From 664bd62954836af9429055fe669d70dbd125415a Mon Sep 17 00:00:00 2001
From: David Cho-Lerat
 <117642976+david-cho-lerat-sonarsource@users.noreply.github.com>
Date: Wed, 30 Nov 2022 11:13:16 +0100
Subject: [PATCH] SONAR-17625 Code highlighting for Security Hotspot messages
 and code locations (#7114)

---
 .../apps/security-hotspots/components/HotspotHeader.tsx  | 9 ++++++---
 .../js/apps/security-hotspots/components/HotspotList.css | 9 +++++++++
 .../security-hotspots/components/HotspotListItem.tsx     | 6 +++++-
 .../components/HotspotPrimaryLocationBox.tsx             | 8 +++++++-
 .../__tests__/__snapshots__/HotspotHeader-test.tsx.snap  | 6 ++++--
 .../__snapshots__/HotspotListItem-test.tsx.snap          | 8 ++++++--
 .../HotspotPrimaryLocationBox-test.tsx.snap              | 8 ++++++--
 server/sonar-web/src/main/js/types/security-hotspots.ts  | 3 +++
 8 files changed, 46 insertions(+), 11 deletions(-)

diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotHeader.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotHeader.tsx
index c35fa0359f9..07f911168bc 100644
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotHeader.tsx
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotHeader.tsx
@@ -20,6 +20,7 @@
 
 import React from 'react';
 import Link from '../../../components/common/Link';
+import { IssueMessageHighlighting } from '../../../components/issue/IssueMessageHighlighting';
 import { translate } from '../../../helpers/l10n';
 import { getRuleUrl } from '../../../helpers/urls';
 import { Hotspot, HotspotStatusOption } from '../../../types/security-hotspots';
@@ -33,11 +34,13 @@ export interface HotspotHeaderProps {
 
 export function HotspotHeader(props: HotspotHeaderProps) {
   const { hotspot } = props;
-  const { message, rule } = hotspot;
+  const { message, messageFormattings, rule } = hotspot;
   return (
-    <div className="huge-spacer-bottom">
+    <div className="huge-spacer-bottom hotspot-header">
       <div className="display-flex-column big-spacer-bottom">
-        <div className="big text-bold">{message}</div>
+        <div className="big text-bold">
+          <IssueMessageHighlighting message={message} messageFormattings={messageFormattings} />
+        </div>
         <div className="spacer-top">
           <span className="note padded-right">{rule.name}</span>
           <Link className="small" to={getRuleUrl(rule.key)} target="_blank">
diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotList.css b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotList.css
index 3ac44e26a5e..8dbb2909014 100644
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotList.css
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotList.css
@@ -116,3 +116,12 @@
 .hotspot-box-filename {
   direction: rtl;
 }
+
+.hotspot-header .issue-message-highlight-CODE {
+  background-color: var(--blacka06);
+  border-radius: 5px;
+}
+
+.hotspot-item .issue-message-highlight-CODE {
+  background-color: var(--blacka06);
+}
diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotListItem.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotListItem.tsx
index df0e499d2e6..260e71d489d 100644
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotListItem.tsx
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotListItem.tsx
@@ -21,6 +21,7 @@ import classNames from 'classnames';
 import * as React from 'react';
 import { ButtonPlain } from '../../../components/controls/buttons';
 import QualifierIcon from '../../../components/icons/QualifierIcon';
+import { IssueMessageHighlighting } from '../../../components/issue/IssueMessageHighlighting';
 import LocationsList from '../../../components/locations/LocationsList';
 import { ComponentQualifier } from '../../../types/component';
 import { RawHotspot } from '../../../types/security-hotspots';
@@ -51,7 +52,10 @@ export default function HotspotListItem(props: HotspotListItemProps) {
         className={classNames('little-spacer-left text-bold', { 'cursor-pointer': selected })}
         onClick={selected ? () => props.onLocationClick() : undefined}
       >
-        {hotspot.message}
+        <IssueMessageHighlighting
+          message={hotspot.message}
+          messageFormattings={hotspot.messageFormattings}
+        />
       </div>
       <div className="display-flex-center big-spacer-top">
         <QualifierIcon qualifier={ComponentQualifier.File} />
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 bc297c01249..d9e6e798565 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
@@ -21,6 +21,7 @@ import classNames from 'classnames';
 import * as React from 'react';
 import withCurrentUserContext from '../../../app/components/current-user/withCurrentUserContext';
 import { ButtonLink } from '../../../components/controls/buttons';
+import { IssueMessageHighlighting } from '../../../components/issue/IssueMessageHighlighting';
 import { translate } from '../../../helpers/l10n';
 import { Hotspot } from '../../../types/security-hotspots';
 import { CurrentUser, isLoggedIn } from '../../../types/users';
@@ -55,7 +56,12 @@ export function HotspotPrimaryLocationBox(props: HotspotPrimaryLocationBoxProps)
       )}
       ref={locationRef}
     >
-      <div className="text-bold">{hotspot.message}</div>
+      <div className="text-bold">
+        <IssueMessageHighlighting
+          message={hotspot.message}
+          messageFormattings={hotspot.messageFormattings}
+        />
+      </div>
       {isLoggedIn(currentUser) && (
         <ButtonLink
           className="nowrap big-spacer-left it__hs-add-comment"
diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotHeader-test.tsx.snap b/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotHeader-test.tsx.snap
index a5d2957ac54..2b0d422efb3 100644
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotHeader-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotHeader-test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`should render correctly 1`] = `
 <div
-  className="huge-spacer-bottom"
+  className="huge-spacer-bottom hotspot-header"
 >
   <div
     className="display-flex-column big-spacer-bottom"
@@ -10,7 +10,9 @@ exports[`should render correctly 1`] = `
     <div
       className="big text-bold"
     >
-      '3' is a magic number.
+      <IssueMessageHighlighting
+        message="'3' is a magic number."
+      />
     </div>
     <div
       className="spacer-top"
diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotListItem-test.tsx.snap b/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotListItem-test.tsx.snap
index f9e251cc5ee..1dc2e1e34d8 100644
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotListItem-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotListItem-test.tsx.snap
@@ -9,7 +9,9 @@ exports[`should render correctly 1`] = `
   <div
     className="little-spacer-left text-bold"
   >
-    '3' is a magic number.
+    <IssueMessageHighlighting
+      message="'3' is a magic number."
+    />
   </div>
   <div
     className="display-flex-center big-spacer-top"
@@ -39,7 +41,9 @@ exports[`should render correctly 2`] = `
     className="little-spacer-left text-bold cursor-pointer"
     onClick={[Function]}
   >
-    '3' is a magic number.
+    <IssueMessageHighlighting
+      message="'3' is a magic number."
+    />
   </div>
   <div
     className="display-flex-center big-spacer-top"
diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotPrimaryLocationBox-test.tsx.snap b/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotPrimaryLocationBox-test.tsx.snap
index ca9f922a126..4d3f324977c 100644
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotPrimaryLocationBox-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotPrimaryLocationBox-test.tsx.snap
@@ -7,7 +7,9 @@ exports[`should render correctly: User logged in 1`] = `
   <div
     className="text-bold"
   >
-    '3' is a magic number.
+    <IssueMessageHighlighting
+      message="'3' is a magic number."
+    />
   </div>
   <ButtonLink
     className="nowrap big-spacer-left it__hs-add-comment"
@@ -25,7 +27,9 @@ exports[`should render correctly: User not logged in  1`] = `
   <div
     className="text-bold"
   >
-    '3' is a magic number.
+    <IssueMessageHighlighting
+      message="'3' is a magic number."
+    />
   </div>
 </div>
 `;
diff --git a/server/sonar-web/src/main/js/types/security-hotspots.ts b/server/sonar-web/src/main/js/types/security-hotspots.ts
index abf1e09b607..7cf67d7e996 100644
--- a/server/sonar-web/src/main/js/types/security-hotspots.ts
+++ b/server/sonar-web/src/main/js/types/security-hotspots.ts
@@ -18,6 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import { ComponentQualifier } from './component';
+import { MessageFormatting } from './issues';
 import { FlowLocation, IssueChangelog, IssueChangelogDiff, Paging, TextRange } from './types';
 import { UserBase } from './users';
 
@@ -66,6 +67,7 @@ export interface RawHotspot {
   key: string;
   line?: number;
   message: string;
+  messageFormattings?: MessageFormatting[];
   project: string;
   resolution?: HotspotResolution;
   rule: string;
@@ -92,6 +94,7 @@ export interface Hotspot {
   key: string;
   line?: number;
   message: string;
+  messageFormattings?: MessageFormatting[];
   project: HotspotComponent;
   resolution?: HotspotResolution;
   rule: HotspotRule;
-- 
2.39.5