From 07aaed6f6c0a506fe64d20e048f53997723c09bc Mon Sep 17 00:00:00 2001
From: Ambroise C <ambroise.christea@sonarsource.com>
Date: Tue, 19 Sep 2023 16:35:41 +0200
Subject: [PATCH] SONAR-20511 Fix multiline syntax highlighting in rule
 description line diffs

---
 .../main/js/components/rules/RuleDescription.tsx |  1 -
 .../__snapshots__/code-difference-test.tsx.snap  | 16 ++++------------
 .../src/main/js/helpers/code-difference.ts       | 16 ++++++++--------
 3 files changed, 12 insertions(+), 21 deletions(-)

diff --git a/server/sonar-web/src/main/js/components/rules/RuleDescription.tsx b/server/sonar-web/src/main/js/components/rules/RuleDescription.tsx
index 6b6c4d807b5..1e821822ad8 100644
--- a/server/sonar-web/src/main/js/components/rules/RuleDescription.tsx
+++ b/server/sonar-web/src/main/js/components/rules/RuleDescription.tsx
@@ -198,7 +198,6 @@ const StyledHtmlFormatter = styled(HtmlFormatter)`
   margin-bottom: 1.5rem;
 
   .code-difference-container {
-    display: flex;
     flex-direction: column;
     width: fit-content;
     min-width: 100%;
diff --git a/server/sonar-web/src/main/js/helpers/__tests__/__snapshots__/code-difference-test.tsx.snap b/server/sonar-web/src/main/js/helpers/__tests__/__snapshots__/code-difference-test.tsx.snap
index 170397e1b07..658db41a02f 100644
--- a/server/sonar-web/src/main/js/helpers/__tests__/__snapshots__/code-difference-test.tsx.snap
+++ b/server/sonar-web/src/main/js/helpers/__tests__/__snapshots__/code-difference-test.tsx.snap
@@ -8,24 +8,20 @@ HTMLCollection [
     <div
       class="code-difference-container"
     >
-      <div>
-        public void endpoint(HttpServletRequest request, HttpServletResponse response) throws IOException
+      public void endpoint(HttpServletRequest request, HttpServletResponse response) throws IOException
 {
     String data        = request.getParameter("input");
     PrintWriter writer = response.getWriter();
 
 
-      </div>
       <div
         class="code-removed"
       >
             writer.print(data); // Noncompliant
 
       </div>
-      <div>
-        }
+      }
 
-      </div>
     </div>
   </pre>,
   <pre
@@ -41,24 +37,20 @@ HTMLCollection [
 
 
       </div>
-      <div>
-        public void endpoint(HttpServletRequest request, HttpServletResponse response) throws IOException
+      public void endpoint(HttpServletRequest request, HttpServletResponse response) throws IOException
 {
     String data        = request.getParameter("input");
     PrintWriter writer = response.getWriter();
 
 
-      </div>
       <div
         class="code-added"
       >
             writer.print(Encode.forHtml(data));
 
       </div>
-      <div>
-        }
+      }
 
-      </div>
     </div>
   </pre>,
 ]
diff --git a/server/sonar-web/src/main/js/helpers/code-difference.ts b/server/sonar-web/src/main/js/helpers/code-difference.ts
index f4884a81713..376a039fed8 100644
--- a/server/sonar-web/src/main/js/helpers/code-difference.ts
+++ b/server/sonar-web/src/main/js/helpers/code-difference.ts
@@ -71,10 +71,10 @@ function differentiateCode(compliant: string, nonCompliant: string) {
   let compliantCode = '';
 
   hunks.forEach((hunk) => {
-    const value = sanitizeString(hunk.value);
+    const { value } = hunk;
     if (!hunk.added && !hunk.removed) {
-      nonCompliantCode += `<div>${value}</div>`;
-      compliantCode += `<div>${value}</div>`;
+      nonCompliantCode += value;
+      compliantCode += value;
     }
 
     if (hunk.added) {
@@ -85,15 +85,15 @@ function differentiateCode(compliant: string, nonCompliant: string) {
       nonCompliantCode += `<div class='code-removed'>${value}</div>`;
     }
   });
-  return [nonCompliantCode, compliantCode];
+  return [sanitizeString(nonCompliantCode), sanitizeString(compliantCode)];
 }
 
 function replaceInDom(current: Element, code: string) {
   const markedCode = document.createElement('pre');
   markedCode.classList.add('code-difference-scrollable');
-  const flexDiv = document.createElement('div');
-  flexDiv.classList.add('code-difference-container');
-  flexDiv.innerHTML = code;
-  markedCode.appendChild(flexDiv);
+  const div = document.createElement('div');
+  div.classList.add('code-difference-container');
+  div.innerHTML = code;
+  markedCode.appendChild(div);
   current.parentNode?.replaceChild(markedCode, current);
 }
-- 
2.39.5