SONAR-9063 Add the number of multiple locations on issue box (#1972)

5 files changed, 57 insertions, 5 deletions

diff --git a/server/sonar-web/src/main/js/components/common/LocationIndex.css b/server/sonar-web/src/main/js/components/common/LocationIndex.css
index 58ef49ee7d5..d796e251a43 100644
--- a/server/sonar-web/src/main/js/components/common/LocationIndex.css
+++ b/server/sonar-web/src/main/js/components/common/LocationIndex.css
@@ -25,7 +25,8 @@
   cursor: pointer;
 }
 
-.location-index[tabindex]:hover {
+.location-index[tabindex]:hover,
+a:hover > .location-index {
   background-color: #bc5e5e;
 }
 
@@ -33,13 +34,13 @@
   outline: none;
 }
 
-.source-line-code .location-index {
+.source-line-code-inner .location-index {
   line-height: 16px;
   margin: 1px;
   margin-left: 4px;
   margin-right: 4px;
 }
 
-.source-line-code .location-index + .location-index {
+.source-line-code-inner .location-index + .location-index {
   margin-left: 0;
 }
\ No newline at end of file
diff --git a/server/sonar-web/src/main/js/components/issue/components/IssueTitleBar.js b/server/sonar-web/src/main/js/components/issue/components/IssueTitleBar.js
index 901ae80febf..90ddd3a73c6 100644
--- a/server/sonar-web/src/main/js/components/issue/components/IssueTitleBar.js
+++ b/server/sonar-web/src/main/js/components/issue/components/IssueTitleBar.js
@@ -23,8 +23,11 @@ import { Link } from 'react-router';
 import IssueChangelog from './IssueChangelog';
 import IssueMessage from './IssueMessage';
 import SimilarIssuesFilter from './SimilarIssuesFilter';
+import LocationIndex from '../../common/LocationIndex';
+import Tooltip from '../../controls/Tooltip';
 import { getSingleIssueUrl } from '../../../helpers/urls';
-import { translate } from '../../../helpers/l10n';
+import { formatMeasure } from '../../../helpers/measures';
+import { translate, translateWithParameters } from '../../../helpers/l10n';
 import type { Issue } from '../types';
 
 type Props = {|
@@ -41,6 +44,24 @@ export default function IssueTitleBar(props: Props) {
   const { issue } = props;
   const hasSimilarIssuesFilter = props.onFilter != null;
 
+  const locationsCount =
+    issue.secondaryLocations.length +
+    issue.flows.reduce((sum, locations) => sum + locations.length, 0);
+
+  const locationsBadge = (
+    <Tooltip
+      overlay={translateWithParameters(
+        'issue.this_issue_involves_x_code_locations',
+        formatMeasure(locationsCount)
+      )}
+      placement="left">
+      <LocationIndex>{locationsCount}</LocationIndex>
+    </Tooltip>
+  );
+
+  // dirty trick :(
+  const onIssuesPage = document.getElementById('issues-page') != null;
+
   return (
     <table className="issue-table">
       <tbody>
@@ -69,6 +90,14 @@ export default function IssueTitleBar(props: Props) {
                     L{issue.line}
                   </span>
                 </li>}
+              {locationsCount > 0 &&
+                <li className="issue-meta">
+                  {onIssuesPage
+                    ? locationsBadge
+                    : <Link onClick={stopPropagation} to={getSingleIssueUrl(issue.key)}>
+                        {locationsBadge}
+                      </Link>}
+                </li>}
               <li className="issue-meta">
                 <Link
                   className="js-issue-permalink icon-link"
diff --git a/server/sonar-web/src/main/js/components/issue/components/__tests__/IssueTitleBar-test.js b/server/sonar-web/src/main/js/components/issue/components/__tests__/IssueTitleBar-test.js
index 1d3b7ac4e0e..8545979087b 100644
--- a/server/sonar-web/src/main/js/components/issue/components/__tests__/IssueTitleBar-test.js
+++ b/server/sonar-web/src/main/js/components/issue/components/__tests__/IssueTitleBar-test.js
@@ -27,7 +27,9 @@ const issue = {
   organization: 'myorg',
   key: 'AVsae-CQS-9G3txfbFN2',
   rule: 'javascript:S1067',
-  message: 'Reduce the number of conditional operators (4) used in the expression'
+  message: 'Reduce the number of conditional operators (4) used in the expression',
+  flows: [],
+  secondaryLocations: []
 };
 
 it('should render the titlebar correctly', () => {
@@ -49,3 +51,13 @@ it('should render the titlebar with the filter', () => {
   );
   expect(element).toMatchSnapshot();
 });
+
+it('should count all code locations', () => {
+  const issueWithLocations = {
+    ...issue,
+    flows: [[{}, {}, {}], [{}, {}]],
+    secondaryLocations: [{}, {}]
+  };
+  const element = shallow(<IssueTitleBar issue={issueWithLocations} />);
+  expect(element.find('LocationIndex').children().text()).toBe('7');
+});
diff --git a/server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueTitleBar-test.js.snap b/server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueTitleBar-test.js.snap
index e00752935ca..a0f131c9fc5 100644
--- a/server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueTitleBar-test.js.snap
+++ b/server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueTitleBar-test.js.snap
@@ -21,11 +21,13 @@ exports[`test should render the titlebar correctly 1`] = `
               issue={
                 Object {
                   "creationDate": "2017-03-01T09:36:01+0100",
+                  "flows": Array [],
                   "key": "AVsae-CQS-9G3txfbFN2",
                   "line": 26,
                   "message": "Reduce the number of conditional operators (4) used in the expression",
                   "organization": "myorg",
                   "rule": "javascript:S1067",
+                  "secondaryLocations": Array [],
                 }
               }
               onFail={[Function]}
@@ -86,11 +88,13 @@ exports[`test should render the titlebar with the filter 1`] = `
               issue={
                 Object {
                   "creationDate": "2017-03-01T09:36:01+0100",
+                  "flows": Array [],
                   "key": "AVsae-CQS-9G3txfbFN2",
                   "line": 26,
                   "message": "Reduce the number of conditional operators (4) used in the expression",
                   "organization": "myorg",
                   "rule": "javascript:S1067",
+                  "secondaryLocations": Array [],
                 }
               }
               onFail={[Function]}
@@ -128,11 +132,13 @@ exports[`test should render the titlebar with the filter 1`] = `
               issue={
                 Object {
                   "creationDate": "2017-03-01T09:36:01+0100",
+                  "flows": Array [],
                   "key": "AVsae-CQS-9G3txfbFN2",
                   "line": 26,
                   "message": "Reduce the number of conditional operators (4) used in the expression",
                   "organization": "myorg",
                   "rule": "javascript:S1067",
+                  "secondaryLocations": Array [],
                 }
               }
               onFail={[Function]}
diff --git a/server/sonar-web/src/main/less/components/issues.less b/server/sonar-web/src/main/less/components/issues.less
index ba09fadce81..7d8eae94131 100644
--- a/server/sonar-web/src/main/less/components/issues.less
+++ b/server/sonar-web/src/main/less/components/issues.less
@@ -361,3 +361,7 @@ input.issue-action-options-search {
   left: 50%;
   margin: -8px 0 0 -8px;
 }
+
+.issue:not(.selected) .location-index {
+  background-color: #ccc;
+}
\ No newline at end of file