SONAR-19174 Code viewer changes for hotspots page

4 files changed, 49 insertions, 48 deletions

diff --git a/server/sonar-web/src/main/js/apps/issues/crossComponentSourceViewer/ComponentSourceSnippetGroupViewer.tsx b/server/sonar-web/src/main/js/apps/issues/crossComponentSourceViewer/ComponentSourceSnippetGroupViewer.tsx
index fe0935791f5..337e813a485 100644
--- a/server/sonar-web/src/main/js/apps/issues/crossComponentSourceViewer/ComponentSourceSnippetGroupViewer.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/crossComponentSourceViewer/ComponentSourceSnippetGroupViewer.tsx
@@ -19,12 +19,13 @@
  */
 import styled from '@emotion/styled';
 import classNames from 'classnames';
-import { FlagMessage, LineFinding, ThemeProp, themeColor, withTheme } from 'design-system';
+import { FlagMessage, LineFinding, themeColor } from 'design-system';
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { getSources } from '../../../api/components';
 import getCoverageStatus from '../../../components/SourceViewer/helpers/getCoverageStatus';
 import { locationsByLine } from '../../../components/SourceViewer/helpers/indexing';
+import { IssueMessageHighlighting } from '../../../components/issue/IssueMessageHighlighting';
 import { getBranchLikeQuery } from '../../../helpers/branch-like';
 import { translate } from '../../../helpers/l10n';
 import { BranchLike } from '../../../types/branch-like';
@@ -81,10 +82,10 @@ interface State {
   snippets: Snippet[];
 }
 
-class ComponentSourceSnippetGroupViewer extends React.PureComponent<Props & ThemeProp, State> {
+export default class ComponentSourceSnippetGroupViewer extends React.PureComponent<Props, State> {
   mounted = false;
 
-  constructor(props: Props & ThemeProp) {
+  constructor(props: Props) {
     super(props);
     this.state = {
       additionalLines: {},
@@ -242,7 +243,12 @@ class ComponentSourceSnippetGroupViewer extends React.PureComponent<Props & Them
                   <LineFinding
                     issueType={issueToDisplay.type}
                     issueKey={issueToDisplay.key}
-                    message={issueToDisplay.message}
+                    message={
+                      <IssueMessageHighlighting
+                        message={issueToDisplay.message}
+                        messageFormattings={issueToDisplay.messageFormattings}
+                      />
+                    }
                     selected={isSelectedIssue}
                     ref={isSelectedIssue ? ctx?.registerPrimaryLocationRef : undefined}
                     onIssueSelect={this.props.onIssueSelect}
@@ -257,8 +263,7 @@ class ComponentSourceSnippetGroupViewer extends React.PureComponent<Props & Them
   };
 
   render() {
-    const { branchLike, isLastOccurenceOfPrimaryComponent, issue, snippetGroup, theme } =
-      this.props;
+    const { branchLike, isLastOccurenceOfPrimaryComponent, issue, snippetGroup } = this.props;
     const { additionalLines, loading, snippets } = this.state;
 
     const snippetLines = linesForSnippets(snippets, {
@@ -272,12 +277,6 @@ class ComponentSourceSnippetGroupViewer extends React.PureComponent<Props & Them
       ? 'issue.closed.file_level'
       : 'issue.closed.project_level';
 
-    const borderColor = themeColor('codeLineBorder')({ theme });
-
-    const FileLevelIssueStyle = styled.div`
-      border: 1px solid ${borderColor};
-    `;
-
     const hideLocationIndex = issue.secondaryLocations.length !== 0;
 
     return (
@@ -323,7 +322,12 @@ class ComponentSourceSnippetGroupViewer extends React.PureComponent<Props & Them
                   <LineFinding
                     issueType={issue.type}
                     issueKey={issue.key}
-                    message={issue.message}
+                    message={
+                      <IssueMessageHighlighting
+                        message={issue.message}
+                        messageFormattings={issue.messageFormattings}
+                      />
+                    }
                     selected={true}
                     ref={ctx?.registerPrimaryLocationRef}
                     onIssueSelect={this.props.onIssueSelect}
@@ -391,4 +395,6 @@ function isExpandable(snippets: Snippet[], snippetGroup: SnippetGroup) {
   return !fullyShown && isFile(snippetGroup.component.q);
 }
 
-export default withTheme(ComponentSourceSnippetGroupViewer);
+const FileLevelIssueStyle = styled.div`
+  border: 1px solid ${themeColor('codeLineBorder')};
+`;
diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotPrimaryLocationBox.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotPrimaryLocationBox.tsx
index 6506a0bc9f7..ceba4a4006a 100644
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotPrimaryLocationBox.tsx
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotPrimaryLocationBox.tsx
@@ -17,11 +17,10 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import classNames from 'classnames';
+import { LineFinding } from 'design-system';
 import * as React from 'react';
 import { IssueMessageHighlighting } from '../../../components/issue/IssueMessageHighlighting';
 import { Hotspot } from '../../../types/security-hotspots';
-import './HotspotPrimaryLocationBox.css';
 
 const SCROLL_DELAY = 100;
 const SCROLL_TOP_OFFSET = 100; // 5 lines above
@@ -51,23 +50,23 @@ export default function HotspotPrimaryLocationBox(props: HotspotPrimaryLocationB
 
   return (
     <div
-      className={classNames(
-        'hotspot-primary-location',
-        'display-flex-space-between display-flex-center padded-top padded-bottom big-padded-left big-padded-right',
-        `hotspot-risk-exposure-${hotspot.rule.vulnerabilityProbability}`
-      )}
       style={{
         scrollMarginTop: `${SCROLL_TOP_OFFSET}px`,
         scrollMarginBottom: `${SCROLL_BOTTOM_OFFSET}px`,
       }}
       ref={locationRef}
     >
-      <div className="text-bold">
-        <IssueMessageHighlighting
-          message={hotspot.message}
-          messageFormattings={hotspot.messageFormattings}
-        />
-      </div>
+      <LineFinding
+        issueKey={hotspot.key}
+        message={
+          <IssueMessageHighlighting
+            message={hotspot.message}
+            messageFormattings={hotspot.messageFormattings}
+          />
+        }
+        selected={true}
+        className="sw-cursor-default"
+      />
     </div>
   );
 }
diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotSnippetContainerRenderer.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotSnippetContainerRenderer.tsx
index 3434874b0d7..48433425bde 100644
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotSnippetContainerRenderer.tsx
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotSnippetContainerRenderer.tsx
@@ -62,7 +62,7 @@ export async function animateExpansion(
   expandBlock: (direction: ExpandDirection) => Promise<void>,
   direction: ExpandDirection
 ) {
-  const wrapper = scrollableRef.current?.querySelector<HTMLElement>('.snippet');
+  const wrapper = scrollableRef.current?.querySelector<HTMLElement>('.it__source-viewer-code');
   const table = wrapper?.firstChild as HTMLElement;
 
   if (!wrapper || !table) {
@@ -175,6 +175,7 @@ export default function HotspotSnippetContainerRenderer(
             renderAdditionalChildInLine={renderHotspotBoxInLine}
             renderDuplicationPopup={noop}
             snippet={sourceLines}
+            hideLocationIndex={secondaryLocations.length !== 0}
           />
         )}
       </SourceFileWrapper>
diff --git a/server/sonar-web/src/main/js/components/SourceViewer/components/LineCode.tsx b/server/sonar-web/src/main/js/components/SourceViewer/components/LineCode.tsx
index 90c85e342c9..370073cf80b 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/components/LineCode.tsx
+++ b/server/sonar-web/src/main/js/components/SourceViewer/components/LineCode.tsx
@@ -31,7 +31,7 @@ import {
   UncoveredUnderlineLabel,
   UnderlineLabels,
 } from 'design-system';
-import React, { Fragment, PureComponent, ReactNode, RefObject, createRef } from 'react';
+import React, { PureComponent, ReactNode, RefObject, createRef } from 'react';
 import { IssueSourceViewerScrollContext } from '../../../apps/issues/components/IssueSourceViewerScrollContext';
 import { translate } from '../../../helpers/l10n';
 import { LinearIssueLocation, SourceLine } from '../../../types/types';
@@ -104,21 +104,19 @@ export class LineCode extends PureComponent<React.PropsWithChildren<Props>> {
     const message = loc?.text;
     const isLeading = leadingMarker && markerIndex === 0;
     return (
-      <Fragment key={`${marker}-${index}`}>
-        <IssueSourceViewerScrollContext.Consumer>
-          {(ctx) => (
-            <LineMarker
-              hideLocationIndex={hideLocationIndex}
-              index={marker}
-              leading={isLeading}
-              message={message}
-              onLocationSelect={this.props.onLocationSelect}
-              ref={selected ? ctx?.registerSelectedSecondaryLocationRef : undefined}
-              selected={selected}
-            />
-          )}
-        </IssueSourceViewerScrollContext.Consumer>
-      </Fragment>
+      <IssueSourceViewerScrollContext.Consumer key={`${marker}-${index}`}>
+        {(ctx) => (
+          <LineMarker
+            hideLocationIndex={hideLocationIndex}
+            index={marker}
+            leading={isLeading}
+            message={message}
+            onLocationSelect={this.props.onLocationSelect}
+            ref={selected ? ctx?.registerSelectedSecondaryLocationRef : undefined}
+            selected={selected}
+          />
+        )}
+      </IssueSourceViewerScrollContext.Consumer>
     );
   };
 
@@ -189,10 +187,7 @@ export class LineCode extends PureComponent<React.PropsWithChildren<Props>> {
       (previousLine?.coverageStatus && previousLine.coverageBlock === line.coverageBlock);
 
     return (
-      <LineCodeLayers
-        className="js-source-line-code it__source-line-code"
-        data-line-number={line.line}
-      >
+      <LineCodeLayers className="it__source-line-code" data-line-number={line.line}>
         {(displayCoverageUnderlineLabel || displayNewCodeUnderlineLabel) && (
           <UnderlineLabels aria-hidden={true} transparentBackground={previousLineHasUnderline}>
             {displayCoverageUnderlineLabel && line.coverageStatus === 'covered' && (