From 7004add944e551c499bfcc0d32ba508022105d42 Mon Sep 17 00:00:00 2001
From: Stas Vilchik <stas.vilchik@sonarsource.com>
Date: Thu, 28 Sep 2017 16:17:18 +0200
Subject: [PATCH] SONAR-9599 change issues measures on the projects page

---
 .../components/ProjectCardLeakMeasures.tsx    |  2 +-
 .../components/ProjectCardOverallMeasures.tsx | 43 +++++++++++--
 .../ProjectCardOverallMeasures-test.tsx       | 25 ++++++--
 .../ProjectCardLeakMeasures-test.tsx.snap     |  4 +-
 .../ProjectCardOverallMeasures-test.tsx.snap  | 63 ++++++++++++++++---
 .../filters/MaintainabilityFilter.tsx         | 18 +++++-
 .../projects/filters/ReliabilityFilter.tsx    | 18 +++++-
 .../apps/projects/filters/SecurityFilter.tsx  | 18 +++++-
 .../MaintainabilityFilter-test.tsx.snap       | 12 ++++
 .../ReliabilityFilter-test.tsx.snap           | 12 ++++
 .../SecurityFilter-test.tsx.snap              | 12 ++++
 .../src/main/js/apps/projects/styles.css      | 27 ++++----
 .../src/main/js/apps/projects/utils.ts        |  3 +
 13 files changed, 219 insertions(+), 38 deletions(-)

diff --git a/server/sonar-web/src/main/js/apps/projects/components/ProjectCardLeakMeasures.tsx b/server/sonar-web/src/main/js/apps/projects/components/ProjectCardLeakMeasures.tsx
index 47652952ec2..a08b77c9997 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/ProjectCardLeakMeasures.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/ProjectCardLeakMeasures.tsx
@@ -119,7 +119,7 @@ export default function ProjectCardLeakMeasures({ measures }: Props) {
         </div>
       </div>
 
-      <div className="project-card-measure smaller-card pull-right" data-key="new_lines">
+      <div className="project-card-measure smaller-card project-card-ncloc" data-key="new_lines">
         <div className="project-card-measure-inner">
           <div className="project-card-measure-number">
             <Measure
diff --git a/server/sonar-web/src/main/js/apps/projects/components/ProjectCardOverallMeasures.tsx b/server/sonar-web/src/main/js/apps/projects/components/ProjectCardOverallMeasures.tsx
index d0ef2f047ce..cdb325a02dd 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/ProjectCardOverallMeasures.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/ProjectCardOverallMeasures.tsx
@@ -25,6 +25,9 @@ import CoverageRating from '../../../components/ui/CoverageRating';
 import DuplicationsRating from '../../../components/ui/DuplicationsRating';
 import SizeRating from '../../../components/ui/SizeRating';
 import { translate } from '../../../helpers/l10n';
+import BugIcon from '../../../components/icons-components/BugIcon';
+import CodeSmellIcon from '../../../components/icons-components/CodeSmellIcon';
+import VulnerabilityIcon from '../../../components/icons-components/VulnerabilityIcon';
 
 interface Props {
   measures: { [key: string]: string | undefined };
@@ -40,28 +43,56 @@ export default function ProjectCardOverallMeasures({ measures }: Props) {
       <div className="project-card-measure smaller-card" data-key="reliability_rating">
         <div className="project-card-measure-inner">
           <div className="project-card-measure-number">
+            <Measure
+              className="spacer-right"
+              measure={{
+                metric: { key: 'bugs', type: 'SHORT_INT' },
+                value: measures['bugs']
+              }}
+            />
             <Rating value={measures['reliability_rating']} />
           </div>
-          <div className="project-card-measure-label">{translate('metric_domain.Reliability')}</div>
+          <div className="project-card-measure-label-with-icon">
+            <BugIcon className="little-spacer-right vertical-bottom" />
+            {translate('metric.bugs.name')}
+          </div>
         </div>
       </div>
 
-      <div className="project-card-measure smaller-card" data-key="security_rating">
+      <div className="project-card-measure" data-key="security_rating">
         <div className="project-card-measure-inner">
           <div className="project-card-measure-number">
+            <Measure
+              className="spacer-right"
+              measure={{
+                metric: { key: 'vulnerabilities', type: 'SHORT_INT' },
+                value: measures['vulnerabilities']
+              }}
+            />
             <Rating value={measures['security_rating']} />
           </div>
-          <div className="project-card-measure-label">{translate('metric_domain.Security')}</div>
+          <div className="project-card-measure-label-with-icon">
+            <VulnerabilityIcon className="little-spacer-right vertical-bottom" />
+            {translate('metric.vulnerabilities.name')}
+          </div>
         </div>
       </div>
 
       <div className="project-card-measure" data-key="sqale_rating">
         <div className="project-card-measure-inner">
           <div className="project-card-measure-number">
+            <Measure
+              className="spacer-right"
+              measure={{
+                metric: { key: 'code_smells', type: 'SHORT_INT' },
+                value: measures['code_smells']
+              }}
+            />
             <Rating value={measures['sqale_rating']} />
           </div>
-          <div className="project-card-measure-label">
-            {translate('metric_domain.Maintainability')}
+          <div className="project-card-measure-label-with-icon">
+            <CodeSmellIcon className="little-spacer-right vertical-bottom" />
+            {translate('metric.code_smells.name')}
           </div>
         </div>
       </div>
@@ -107,7 +138,7 @@ export default function ProjectCardOverallMeasures({ measures }: Props) {
       </div>
 
       {measures['ncloc'] != null && (
-        <div className="project-card-measure pull-right" data-key="ncloc">
+        <div className="project-card-measure project-card-ncloc" data-key="ncloc">
           <div className="project-card-measure-inner pull-right">
             <div className="project-card-measure-number">
               <span className="spacer-right">
diff --git a/server/sonar-web/src/main/js/apps/projects/components/__tests__/ProjectCardOverallMeasures-test.tsx b/server/sonar-web/src/main/js/apps/projects/components/__tests__/ProjectCardOverallMeasures-test.tsx
index ef032d7568f..6ac1cc680cb 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/__tests__/ProjectCardOverallMeasures-test.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/__tests__/ProjectCardOverallMeasures-test.tsx
@@ -24,12 +24,15 @@ import ProjectCardOverallMeasures from '../ProjectCardOverallMeasures';
 it('should render correctly with all data', () => {
   const measures = {
     alert_status: 'ERROR',
+    bugs: '17',
+    code_smells: '132',
     coverage: '88.3',
     duplicated_lines_density: '9.8',
     ncloc: '2053',
     reliability_rating: '1.0',
     security_rating: '1.0',
-    sqale_rating: '1.0'
+    sqale_rating: '1.0',
+    vulnerabilities: '0'
   };
   const wrapper = shallow(<ProjectCardOverallMeasures measures={measures} />);
   expect(wrapper).toMatchSnapshot();
@@ -38,11 +41,14 @@ it('should render correctly with all data', () => {
 it('should not render coverage', () => {
   const measures = {
     alert_status: 'ERROR',
+    bugs: '17',
+    code_smells: '132',
     duplicated_lines_density: '9.8',
     ncloc: '2053',
     reliability_rating: '1.0',
     security_rating: '1.0',
-    sqale_rating: '1.0'
+    sqale_rating: '1.0',
+    vulnerabilities: '0'
   };
   const wrapper = shallow(<ProjectCardOverallMeasures measures={measures} />);
   expect(wrapper.find('[data-key="coverage"]')).toMatchSnapshot();
@@ -51,11 +57,14 @@ it('should not render coverage', () => {
 it('should not render duplications', () => {
   const measures = {
     alert_status: 'ERROR',
+    bugs: '17',
+    code_smells: '132',
     coverage: '88.3',
     ncloc: '2053',
     reliability_rating: '1.0',
     security_rating: '1.0',
-    sqale_rating: '1.0'
+    sqale_rating: '1.0',
+    vulnerabilities: '0'
   };
   const wrapper = shallow(<ProjectCardOverallMeasures measures={measures} />);
   expect(wrapper.find('[data-key="duplicated_lines_density"]')).toMatchSnapshot();
@@ -64,11 +73,14 @@ it('should not render duplications', () => {
 it('should not render ncloc', () => {
   const measures = {
     alert_status: 'ERROR',
+    bugs: '17',
+    code_smells: '132',
     coverage: '88.3',
     duplicated_lines_density: '9.8',
     reliability_rating: '1.0',
     security_rating: '1.0',
-    sqale_rating: '1.0'
+    sqale_rating: '1.0',
+    vulnerabilities: '0'
   };
   const wrapper = shallow(<ProjectCardOverallMeasures measures={measures} />);
   expect(wrapper.find('[data-key="ncloc"]').length).toBe(0);
@@ -77,12 +89,15 @@ it('should not render ncloc', () => {
 it('should render ncloc correctly', () => {
   const measures = {
     alert_status: 'ERROR',
+    bugs: '17',
+    code_smells: '132',
     coverage: '88.3',
     ncloc: '16549887',
     duplicated_lines_density: '9.8',
     reliability_rating: '1.0',
     security_rating: '1.0',
-    sqale_rating: '1.0'
+    sqale_rating: '1.0',
+    vulnerabilities: '0'
   };
   const wrapper = shallow(<ProjectCardOverallMeasures measures={measures} />);
   expect(wrapper.find('[data-key="ncloc"]')).toMatchSnapshot();
diff --git a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardLeakMeasures-test.tsx.snap b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardLeakMeasures-test.tsx.snap
index 9d82c53b036..0ccdace41b1 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardLeakMeasures-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardLeakMeasures-test.tsx.snap
@@ -171,7 +171,7 @@ exports[`should render correctly with all data 1`] = `
     </div>
   </div>
   <div
-    className="project-card-measure smaller-card pull-right"
+    className="project-card-measure smaller-card project-card-ncloc"
     data-key="new_lines"
   >
     <div
@@ -373,7 +373,7 @@ exports[`should render no data style new coverage, new duplications and new line
     </div>
   </div>
   <div
-    className="project-card-measure smaller-card pull-right"
+    className="project-card-measure smaller-card project-card-ncloc"
     data-key="new_lines"
   >
     <div
diff --git a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardOverallMeasures-test.tsx.snap b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardOverallMeasures-test.tsx.snap
index 341a634b69a..c9e88821373 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardOverallMeasures-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardOverallMeasures-test.tsx.snap
@@ -78,19 +78,34 @@ exports[`should render correctly with all data 1`] = `
       <div
         className="project-card-measure-number"
       >
+        <Measure
+          className="spacer-right"
+          measure={
+            Object {
+              "metric": Object {
+                "key": "bugs",
+                "type": "SHORT_INT",
+              },
+              "value": "17",
+            }
+          }
+        />
         <Rating
           value="1.0"
         />
       </div>
       <div
-        className="project-card-measure-label"
+        className="project-card-measure-label-with-icon"
       >
-        metric_domain.Reliability
+        <BugIcon
+          className="little-spacer-right vertical-bottom"
+        />
+        metric.bugs.name
       </div>
     </div>
   </div>
   <div
-    className="project-card-measure smaller-card"
+    className="project-card-measure"
     data-key="security_rating"
   >
     <div
@@ -99,14 +114,29 @@ exports[`should render correctly with all data 1`] = `
       <div
         className="project-card-measure-number"
       >
+        <Measure
+          className="spacer-right"
+          measure={
+            Object {
+              "metric": Object {
+                "key": "vulnerabilities",
+                "type": "SHORT_INT",
+              },
+              "value": "0",
+            }
+          }
+        />
         <Rating
           value="1.0"
         />
       </div>
       <div
-        className="project-card-measure-label"
+        className="project-card-measure-label-with-icon"
       >
-        metric_domain.Security
+        <VulnerabilityIcon
+          className="little-spacer-right vertical-bottom"
+        />
+        metric.vulnerabilities.name
       </div>
     </div>
   </div>
@@ -120,14 +150,29 @@ exports[`should render correctly with all data 1`] = `
       <div
         className="project-card-measure-number"
       >
+        <Measure
+          className="spacer-right"
+          measure={
+            Object {
+              "metric": Object {
+                "key": "code_smells",
+                "type": "SHORT_INT",
+              },
+              "value": "132",
+            }
+          }
+        />
         <Rating
           value="1.0"
         />
       </div>
       <div
-        className="project-card-measure-label"
+        className="project-card-measure-label-with-icon"
       >
-        metric_domain.Maintainability
+        <CodeSmellIcon
+          className="little-spacer-right vertical-bottom"
+        />
+        metric.code_smells.name
       </div>
     </div>
   </div>
@@ -204,7 +249,7 @@ exports[`should render correctly with all data 1`] = `
     </div>
   </div>
   <div
-    className="project-card-measure pull-right"
+    className="project-card-measure project-card-ncloc"
     data-key="ncloc"
   >
     <div
@@ -244,7 +289,7 @@ exports[`should render correctly with all data 1`] = `
 
 exports[`should render ncloc correctly 1`] = `
 <div
-  className="project-card-measure pull-right"
+  className="project-card-measure project-card-ncloc"
   data-key="ncloc"
 >
   <div
diff --git a/server/sonar-web/src/main/js/apps/projects/filters/MaintainabilityFilter.tsx b/server/sonar-web/src/main/js/apps/projects/filters/MaintainabilityFilter.tsx
index d4f71d0f4c6..0e3a09d8d9c 100644
--- a/server/sonar-web/src/main/js/apps/projects/filters/MaintainabilityFilter.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/filters/MaintainabilityFilter.tsx
@@ -20,6 +20,8 @@
 import * as React from 'react';
 import IssuesFilter from './IssuesFilter';
 import { Facet } from '../types';
+import CodeSmellIcon from '../../../components/icons-components/CodeSmellIcon';
+import { translate } from '../../../helpers/l10n';
 
 interface Props {
   className?: string;
@@ -33,5 +35,19 @@ interface Props {
 }
 
 export default function MaintainabilityFilter(props: Props) {
-  return <IssuesFilter {...props} name="Maintainability" property="maintainability" />;
+  return (
+    <IssuesFilter
+      {...props}
+      headerDetail={
+        <span className="note little-spacer-left">
+          {'('}
+          <CodeSmellIcon className="little-spacer-right" />
+          {translate('metric.code_smells.name')}
+          {' )'}
+        </span>
+      }
+      name="Maintainability"
+      property="maintainability"
+    />
+  );
 }
diff --git a/server/sonar-web/src/main/js/apps/projects/filters/ReliabilityFilter.tsx b/server/sonar-web/src/main/js/apps/projects/filters/ReliabilityFilter.tsx
index 77ab08dc006..56f71586862 100644
--- a/server/sonar-web/src/main/js/apps/projects/filters/ReliabilityFilter.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/filters/ReliabilityFilter.tsx
@@ -20,6 +20,8 @@
 import * as React from 'react';
 import IssuesFilter from './IssuesFilter';
 import { Facet } from '../types';
+import BugIcon from '../../../components/icons-components/BugIcon';
+import { translate } from '../../../helpers/l10n';
 
 interface Props {
   className?: string;
@@ -33,5 +35,19 @@ interface Props {
 }
 
 export default function ReliabilityFilter(props: Props) {
-  return <IssuesFilter {...props} name="Reliability" property="reliability" />;
+  return (
+    <IssuesFilter
+      {...props}
+      headerDetail={
+        <span className="note little-spacer-left">
+          {'('}
+          <BugIcon className="little-spacer-right" />
+          {translate('metric.bugs.name')}
+          {' )'}
+        </span>
+      }
+      name="Reliability"
+      property="reliability"
+    />
+  );
 }
diff --git a/server/sonar-web/src/main/js/apps/projects/filters/SecurityFilter.tsx b/server/sonar-web/src/main/js/apps/projects/filters/SecurityFilter.tsx
index 262573864c5..4fbad543cf2 100644
--- a/server/sonar-web/src/main/js/apps/projects/filters/SecurityFilter.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/filters/SecurityFilter.tsx
@@ -20,6 +20,8 @@
 import * as React from 'react';
 import IssuesFilter from './IssuesFilter';
 import { Facet } from '../types';
+import VulnerabilityIcon from '../../../components/icons-components/VulnerabilityIcon';
+import { translate } from '../../../helpers/l10n';
 
 interface Props {
   className?: string;
@@ -33,5 +35,19 @@ interface Props {
 }
 
 export default function SecurityFilter(props: Props) {
-  return <IssuesFilter {...props} name="Security" property="security" />;
+  return (
+    <IssuesFilter
+      {...props}
+      headerDetail={
+        <span className="note little-spacer-left">
+          {'('}
+          <VulnerabilityIcon className="little-spacer-right" />
+          {translate('metric.vulnerabilities.name')}
+          {' )'}
+        </span>
+      }
+      name="Security"
+      property="security"
+    />
+  );
 }
diff --git a/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/MaintainabilityFilter-test.tsx.snap b/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/MaintainabilityFilter-test.tsx.snap
index ef3d9057b14..bf53d3df2a0 100644
--- a/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/MaintainabilityFilter-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/MaintainabilityFilter-test.tsx.snap
@@ -2,6 +2,18 @@
 
 exports[`renders 1`] = `
 <IssuesFilter
+  headerDetail={
+    <span
+      className="note little-spacer-left"
+    >
+      (
+      <CodeSmellIcon
+        className="little-spacer-right"
+      />
+      metric.code_smells.name
+       )
+    </span>
+  }
   name="Maintainability"
   property="maintainability"
   query={Object {}}
diff --git a/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/ReliabilityFilter-test.tsx.snap b/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/ReliabilityFilter-test.tsx.snap
index 4494914b160..00c4db1716b 100644
--- a/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/ReliabilityFilter-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/ReliabilityFilter-test.tsx.snap
@@ -2,6 +2,18 @@
 
 exports[`renders 1`] = `
 <IssuesFilter
+  headerDetail={
+    <span
+      className="note little-spacer-left"
+    >
+      (
+      <BugIcon
+        className="little-spacer-right"
+      />
+      metric.bugs.name
+       )
+    </span>
+  }
   name="Reliability"
   property="reliability"
   query={Object {}}
diff --git a/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/SecurityFilter-test.tsx.snap b/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/SecurityFilter-test.tsx.snap
index 7142354de29..bc4c098e76e 100644
--- a/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/SecurityFilter-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/SecurityFilter-test.tsx.snap
@@ -2,6 +2,18 @@
 
 exports[`renders 1`] = `
 <IssuesFilter
+  headerDetail={
+    <span
+      className="note little-spacer-left"
+    >
+      (
+      <VulnerabilityIcon
+        className="little-spacer-right"
+      />
+      metric.vulnerabilities.name
+       )
+    </span>
+  }
   name="Security"
   property="security"
   query={Object {}}
diff --git a/server/sonar-web/src/main/js/apps/projects/styles.css b/server/sonar-web/src/main/js/apps/projects/styles.css
index fd464b6618c..615d31ae40a 100644
--- a/server/sonar-web/src/main/js/apps/projects/styles.css
+++ b/server/sonar-web/src/main/js/apps/projects/styles.css
@@ -84,11 +84,13 @@
 }
 
 .project-card-measures {
+  display: flex;
   padding-top: 8px;
   margin: 0 -15px;
 }
 
 .project-card-leak-measures {
+  display: flex;
   padding: 8px 0;
   margin: 4px -4px;
   background-color: #fbf3d5;
@@ -132,18 +134,6 @@
   content: '';
 }
 
-.project-card-measure.pull-right {
-  text-align: right;
-}
-
-.project-card-measure.pull-right:before {
-  display: none;
-}
-
-.project-card-measure.pull-right .project-card-measure-inner {
-  text-align: right;
-}
-
 .project-card-measure .level {
   margin-top: 0;
   margin-bottom: 0;
@@ -170,6 +160,19 @@
   font-size: 12px;
 }
 
+.project-card-ncloc {
+  margin-left: auto;
+  text-align: right;
+}
+
+.project-card-ncloc:before {
+  display: none;
+}
+
+.project-card-ncloc .project-card-measure-inner {
+  text-align: right;
+}
+
 .project-card-languages {
   display: inline-block;
   max-width: 120px;
diff --git a/server/sonar-web/src/main/js/apps/projects/utils.ts b/server/sonar-web/src/main/js/apps/projects/utils.ts
index 8b99d5ee803..30f46344a6f 100644
--- a/server/sonar-web/src/main/js/apps/projects/utils.ts
+++ b/server/sonar-web/src/main/js/apps/projects/utils.ts
@@ -86,8 +86,11 @@ const PAGE_SIZE_VISUALIZATIONS = 99;
 
 const METRICS = [
   'alert_status',
+  'bugs',
   'reliability_rating',
+  'vulnerabilities',
   'security_rating',
+  'code_smells',
   'sqale_rating',
   'duplicated_lines_density',
   'coverage',
-- 
2.39.5