SONAR-20511 Fix multiline syntax highlighting in rule description line diffs

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 6b6c4d807b56919bf3dc8720c2cf7eb13c26578e..1e821822ad8e25f574400fb11f1353cd8bf43ca7 100644 (file)
--- 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 170397e1b079535502c314a9b081db46692db331..658db41a02f1a0fcf6505b3f9017a13ab8ead172 100644 (file)
--- 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 f4884a8171314a1d1114dc70bd83269011afcaec..376a039fed8e4f23301f4124f5d69c87e6ee6c2a 100644 (file)
--- 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);
 }