SONAR-16007 Display secondary locations within hotspot code snippet

3 files changed, 155 insertions, 9 deletions

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 8904fc41747..8a65af22ba2 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
@@ -22,7 +22,7 @@ import * as React from 'react';
 import { BranchLike } from '../../../types/branch-like';
 import { Issue, LinearIssueLocation, SourceLine } from '../../../types/types';
 import LocationIndex from '../../common/LocationIndex';
-import LocationMessage from '../../common/LocationMessage';
+import Tooltip from '../../controls/Tooltip';
 import {
   highlightIssueLocations,
   highlightSymbol,
@@ -141,15 +141,18 @@ export default class LineCode extends React.PureComponent<Props, State> {
     const { onLocationSelect } = this.props;
     const onClick = onLocationSelect ? () => onLocationSelect(index) : undefined;
     const ref = selected ? (node: HTMLElement | null) => (this.activeMarkerNode = node) : undefined;
+
     return (
-      <LocationIndex
-        key={`marker-${index}`}
-        leading={leading}
-        onClick={onClick}
-        selected={selected}>
-        <span ref={ref}>{index + 1}</span>
-        {message && <LocationMessage selected={true}>{message}</LocationMessage>}
-      </LocationIndex>
+      <Tooltip overlay={message} placement="top">
+        <LocationIndex
+          key={`marker-${index}`}
+          leading={leading}
+          onClick={onClick}
+          selected={selected}
+          aria-label={message ? `${index + 1}-${message}` : index + 1}>
+          <span ref={ref}>{index + 1}</span>
+        </LocationIndex>
+      </Tooltip>
     );
   }
 
diff --git a/server/sonar-web/src/main/js/components/SourceViewer/components/__tests__/LineCode-test.tsx b/server/sonar-web/src/main/js/components/SourceViewer/components/__tests__/LineCode-test.tsx
index ebe3cc56430..92ee72265e2 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/components/__tests__/LineCode-test.tsx
+++ b/server/sonar-web/src/main/js/components/SourceViewer/components/__tests__/LineCode-test.tsx
@@ -28,6 +28,13 @@ it('render code', () => {
   expect(shallowRender({ additionalChild: <div>additional child</div> })).toMatchSnapshot(
     'with additional child'
   );
+  expect(
+    shallowRender({
+      secondaryIssueLocations: [
+        { index: 1, from: 5, to: 6, line: 16, startLine: 16, text: 'secondary-location-msg' }
+      ]
+    })
+  ).toMatchSnapshot('with secondary location');
 });
 
 function shallowRender(props: Partial<LineCode['props']> = {}) {
diff --git a/server/sonar-web/src/main/js/components/SourceViewer/components/__tests__/__snapshots__/LineCode-test.tsx.snap b/server/sonar-web/src/main/js/components/SourceViewer/components/__tests__/__snapshots__/LineCode-test.tsx.snap
index 77bebd4c983..37718ed25a8 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/components/__tests__/__snapshots__/LineCode-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/SourceViewer/components/__tests__/__snapshots__/LineCode-test.tsx.snap
@@ -242,3 +242,139 @@ exports[`render code: with additional child 1`] = `
   </div>
 </td>
 `;
+
+exports[`render code: with secondary location 1`] = `
+<td
+  className="source-line-code code has-issues"
+  data-line-number={16}
+>
+  <div
+    className="source-line-code-inner"
+  >
+    <pre>
+      <span
+        className="k source-line-code-issue"
+        key="0"
+      >
+        impor
+      </span>
+      <Tooltip
+        overlay="secondary-location-msg"
+        placement="top"
+      >
+        <LocationIndex
+          aria-label="2-secondary-location-msg"
+          key="marker-1"
+          leading={false}
+          onClick={[Function]}
+          selected={false}
+        >
+          <span>
+            2
+          </span>
+        </LocationIndex>
+      </Tooltip>
+      <span
+        className="k issue-location"
+        key="1"
+      >
+        t
+      </span>
+      <span
+        className=""
+        key="2"
+      >
+         java.util.
+      </span>
+      <span
+        className="sym-9 sym highlighted"
+        key="3"
+      >
+        ArrayList
+      </span>
+      <span
+        className=""
+        key="4"
+      >
+        ;
+      </span>
+    </pre>
+  </div>
+  <LineIssuesList
+    branchLike={
+      Object {
+        "analysisDate": "2018-01-01",
+        "excludedFromPurge": true,
+        "isMain": false,
+        "name": "branch-6.7",
+      }
+    }
+    issues={
+      Array [
+        Object {
+          "actions": Array [],
+          "component": "main.js",
+          "componentLongName": "main.js",
+          "componentQualifier": "FIL",
+          "componentUuid": "foo1234",
+          "creationDate": "2017-03-01T09:36:01+0100",
+          "flows": Array [],
+          "fromHotspot": false,
+          "key": "issue-1",
+          "line": 25,
+          "message": "Reduce the number of conditional operators (4) used in the expression",
+          "project": "myproject",
+          "projectKey": "foo",
+          "projectName": "Foo",
+          "rule": "javascript:S1067",
+          "ruleName": "foo",
+          "secondaryLocations": Array [],
+          "severity": "MAJOR",
+          "status": "OPEN",
+          "textRange": Object {
+            "endLine": 26,
+            "endOffset": 15,
+            "startLine": 25,
+            "startOffset": 0,
+          },
+          "transitions": Array [],
+          "type": "BUG",
+        },
+        Object {
+          "actions": Array [],
+          "component": "main.js",
+          "componentLongName": "main.js",
+          "componentQualifier": "FIL",
+          "componentUuid": "foo1234",
+          "creationDate": "2017-03-01T09:36:01+0100",
+          "flows": Array [],
+          "fromHotspot": false,
+          "key": "issue-2",
+          "line": 25,
+          "message": "Reduce the number of conditional operators (4) used in the expression",
+          "project": "myproject",
+          "projectKey": "foo",
+          "projectName": "Foo",
+          "rule": "javascript:S1067",
+          "ruleName": "foo",
+          "secondaryLocations": Array [],
+          "severity": "MAJOR",
+          "status": "OPEN",
+          "textRange": Object {
+            "endLine": 26,
+            "endOffset": 15,
+            "startLine": 25,
+            "startOffset": 0,
+          },
+          "transitions": Array [],
+          "type": "BUG",
+        },
+      ]
+    }
+    onIssueChange={[MockFunction]}
+    onIssueClick={[MockFunction]}
+    onIssuePopupToggle={[MockFunction]}
+    selectedIssue="issue-1"
+  />
+</td>
+`;