SONAR-12367 Show total issues in codeviewer header

5 files changed, 29 insertions, 17 deletions

diff --git a/server/sonar-web/src/main/js/apps/code/components/App.tsx b/server/sonar-web/src/main/js/apps/code/components/App.tsx
index ce34389013d..7135d3fe6a0 100644
--- a/server/sonar-web/src/main/js/apps/code/components/App.tsx
+++ b/server/sonar-web/src/main/js/apps/code/components/App.tsx
@@ -327,6 +327,7 @@ export class App extends React.PureComponent<Props, State> {
               <SourceViewerWrapper
                 branchLike={branchLike}
                 component={sourceViewer.key}
+                componentMeasures={sourceViewer.measures}
                 isFile={true}
                 location={location}
                 onGoToParent={this.handleGoToParent}
diff --git a/server/sonar-web/src/main/js/apps/code/components/SourceViewerWrapper.tsx b/server/sonar-web/src/main/js/apps/code/components/SourceViewerWrapper.tsx
index 438a17f0178..f9882605bbc 100644
--- a/server/sonar-web/src/main/js/apps/code/components/SourceViewerWrapper.tsx
+++ b/server/sonar-web/src/main/js/apps/code/components/SourceViewerWrapper.tsx
@@ -26,6 +26,7 @@ import SourceViewer from '../../../components/SourceViewer/SourceViewer';
 interface Props {
   branchLike?: T.BranchLike;
   component: string;
+  componentMeasures: T.Measure[] | undefined;
   location: Pick<Location, 'query'>;
   onIssueChange?: (issue: T.Issue) => void;
 }
@@ -44,7 +45,7 @@ export class SourceViewerWrapper extends React.PureComponent<Props> {
   };
 
   render() {
-    const { branchLike, component, location } = this.props;
+    const { branchLike, component, componentMeasures, location } = this.props;
     const { line } = location.query;
     const finalLine = line ? Number(line) : undefined;
 
@@ -53,6 +54,7 @@ export class SourceViewerWrapper extends React.PureComponent<Props> {
         aroundLine={finalLine}
         branchLike={branchLike}
         component={component}
+        componentMeasures={componentMeasures}
         highlightedLine={finalLine}
         onIssueChange={this.props.onIssueChange}
         onLoaded={this.scrollToLine}
diff --git a/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerBase.tsx b/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerBase.tsx
index 22b82d5f11a..e66edd4fde0 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerBase.tsx
+++ b/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerBase.tsx
@@ -56,6 +56,7 @@ export interface Props {
   aroundLine?: number;
   branchLike: T.BranchLike | undefined;
   component: string;
+  componentMeasures?: T.Measure[];
   displayAllIssues?: boolean;
   displayIssueLocationsCount?: boolean;
   displayIssueLocationsLink?: boolean;
@@ -664,7 +665,7 @@ export default class SourceViewerBase extends React.PureComponent<Props, State>
         {({ openComponent }) => (
           <SourceViewerHeader
             branchLike={this.props.branchLike}
-            issues={this.state.issues}
+            componentMeasures={this.props.componentMeasures}
             openComponent={openComponent}
             showMeasures={this.props.showMeasures}
             sourceViewerFile={sourceViewerFile}
diff --git a/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerHeader.tsx b/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerHeader.tsx
index 18ec3d1a091..c54a71591b5 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerHeader.tsx
+++ b/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerHeader.tsx
@@ -39,7 +39,7 @@ import MeasuresOverlay from './components/MeasuresOverlay';
 
 interface Props {
   branchLike: T.BranchLike | undefined;
-  issues?: T.Issue[];
+  componentMeasures?: T.Measure[];
   openComponent: WorkspaceContextShape['openComponent'];
   showMeasures?: boolean;
   sourceViewerFile: T.SourceViewerFile;
@@ -49,6 +49,13 @@ interface State {
   measuresOverlay: boolean;
 }
 
+const METRIC_KEY_FOR_ISSUE_TYPE: { [type in T.IssueType]: string } = {
+  BUG: 'bugs',
+  VULNERABILITY: 'vulnerabilities',
+  CODE_SMELL: 'code_smells',
+  SECURITY_HOTSPOT: 'security_hotspots'
+};
+
 export default class SourceViewerHeader extends React.PureComponent<Props, State> {
   state: State = { measuresOverlay: false };
 
@@ -68,10 +75,10 @@ export default class SourceViewerHeader extends React.PureComponent<Props, State
   };
 
   renderIssueMeasures = () => {
-    const { branchLike, issues, sourceViewerFile } = this.props;
+    const { branchLike, componentMeasures, sourceViewerFile } = this.props;
     return (
-      issues &&
-      issues.length > 0 && (
+      componentMeasures &&
+      componentMeasures.length > 0 && (
         <>
           <div className="source-viewer-header-measure-separator" />
 
@@ -83,7 +90,9 @@ export default class SourceViewerHeader extends React.PureComponent<Props, State
               types: type
             };
 
-            const total = issues.filter(issue => issue.type === type).length;
+            const measure = componentMeasures.find(
+              m => m.metric === METRIC_KEY_FOR_ISSUE_TYPE[type]
+            );
             return (
               <div className="source-viewer-header-measure" key={type}>
                 <span className="source-viewer-header-measure-label">
@@ -91,7 +100,7 @@ export default class SourceViewerHeader extends React.PureComponent<Props, State
                 </span>
                 <span className="source-viewer-header-measure-value">
                   <Link to={getComponentIssuesUrl(sourceViewerFile.project, params)}>
-                    {formatMeasure(total, 'INT')}
+                    {formatMeasure((measure && measure.value) || 0, 'INT')}
                   </Link>
                 </span>
               </div>
diff --git a/server/sonar-web/src/main/js/components/SourceViewer/__tests__/SourceViewerHeader-test.tsx b/server/sonar-web/src/main/js/components/SourceViewer/__tests__/SourceViewerHeader-test.tsx
index 3a78dea570a..385046e2078 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/__tests__/SourceViewerHeader-test.tsx
+++ b/server/sonar-web/src/main/js/components/SourceViewer/__tests__/SourceViewerHeader-test.tsx
@@ -19,7 +19,7 @@
  */
 import { shallow } from 'enzyme';
 import * as React from 'react';
-import { mockIssue, mockMainBranch, mockSourceViewerFile } from '../../../helpers/testMocks';
+import { mockMainBranch, mockSourceViewerFile } from '../../../helpers/testMocks';
 import SourceViewerHeader from '../SourceViewerHeader';
 
 it('should render correctly for a regular file', () => {
@@ -36,24 +36,23 @@ it('should render correctly for a unit test', () => {
 });
 
 it('should render correctly if issue details are passed', () => {
-  const issues = [
-    mockIssue(false, { type: 'VULNERABILITY' }),
-    mockIssue(false, { type: 'VULNERABILITY' }),
-    mockIssue(false, { type: 'CODE_SMELL' }),
-    mockIssue(false, { type: 'SECURITY_HOTSPOT' }),
-    mockIssue(false, { type: 'SECURITY_HOTSPOT' })
+  const componentMeasures: T.Measure[] = [
+    { metric: 'code_smells', value: '1' },
+    { metric: 'unused_metric_to_be_ignored', value: '42' },
+    { metric: 'security_hotspots', value: '2' },
+    { metric: 'vulnerabilities', value: '2' }
   ];
 
   expect(
     shallowRender({
-      issues,
+      componentMeasures,
       showMeasures: true
     })
   ).toMatchSnapshot();
 
   expect(
     shallowRender({
-      issues,
+      componentMeasures,
       showMeasures: false
     })
       .find('.source-viewer-header-measure')