SONAR-9245 Display new_lines measure even if there is no data on the leak projects page

3 files changed, 219 insertions, 77 deletions

diff --git a/server/sonar-web/src/main/js/apps/projects/components/ProjectCardLeakMeasures.js b/server/sonar-web/src/main/js/apps/projects/components/ProjectCardLeakMeasures.js
index db61abdf13a..2675af49875 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/ProjectCardLeakMeasures.js
+++ b/server/sonar-web/src/main/js/apps/projects/components/ProjectCardLeakMeasures.js
@@ -116,20 +116,19 @@ export default function ProjectCardLeakMeasures({ measures }: Props) {
         </div>
       </div>
 
-      {measures['new_lines'] != null &&
-        <div className="project-card-measure smaller-card pull-right" data-key="new_lines">
-          <div className="project-card-measure-inner">
-            <div className="project-card-measure-number">
-              <Measure
-                measure={{ leak: measures['new_lines'] }}
-                metric={{ key: 'new_lines', type: 'SHORT_INT' }}
-              />
-            </div>
-            <div className="project-card-measure-label">
-              {translate('metric.lines.name')}
-            </div>
+      <div className="project-card-measure smaller-card pull-right" data-key="new_lines">
+        <div className="project-card-measure-inner">
+          <div className="project-card-measure-number">
+            <Measure
+              measure={{ leak: measures['new_lines'] }}
+              metric={{ key: 'new_lines', type: 'SHORT_INT' }}
+            />
           </div>
-        </div>}
+          <div className="project-card-measure-label">
+            {translate('metric.lines.name')}
+          </div>
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/server/sonar-web/src/main/js/apps/projects/components/__tests__/ProjectCardLeakMeasures-test.js b/server/sonar-web/src/main/js/apps/projects/components/__tests__/ProjectCardLeakMeasures-test.js
index 8ef407e3181..5003e421267 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/__tests__/ProjectCardLeakMeasures-test.js
+++ b/server/sonar-web/src/main/js/apps/projects/components/__tests__/ProjectCardLeakMeasures-test.js
@@ -39,23 +39,16 @@ it('should render correctly with all data', () => {
   expect(wrapper).toMatchSnapshot();
 });
 
-it('should not render new coverage', () => {
+it('should render no data style new coverage, new duplications and new lines', () => {
   const wrapper = shallow(
-    <ProjectCardLeakMeasures measures={{ ...measures, new_coverage: undefined }} />
+    <ProjectCardLeakMeasures
+      measures={{
+        ...measures,
+        new_coverage: undefined,
+        new_duplicated_lines_density: undefined,
+        new_lines: undefined
+      }}
+    />
   );
-  expect(wrapper.find('[data-key="new_coverage"]')).toMatchSnapshot();
-});
-
-it('should not render new duplications', () => {
-  const wrapper = shallow(
-    <ProjectCardLeakMeasures measures={{ ...measures, new_duplicated_lines_density: undefined }} />
-  );
-  expect(wrapper.find('[data-key="new_duplicated_lines_density"]')).toMatchSnapshot();
-});
-
-it('should not render new lines', () => {
-  const wrapper = shallow(
-    <ProjectCardLeakMeasures measures={{ ...measures, new_lines: undefined }} />
-  );
-  expect(wrapper.find('[data-key="new_lines"]')).toMatchSnapshot();
+  expect(wrapper).toMatchSnapshot();
 });
diff --git a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardLeakMeasures-test.js.snap b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardLeakMeasures-test.js.snap
index fa740a935fe..ff9b33de649 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardLeakMeasures-test.js.snap
+++ b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardLeakMeasures-test.js.snap
@@ -1,76 +1,226 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`should not render new coverage 1`] = `
+exports[`should render correctly with all data 1`] = `
 <div
-  className="project-card-measure"
-  data-key="new_coverage"
+  className="project-card-leak-measures"
 >
   <div
-    className="project-card-measure-inner"
+    className="project-card-measure smaller-card"
+    data-key="new_reliability_rating"
   >
     <div
-      className="project-card-measure-number"
+      className="project-card-measure-inner"
     >
-      <Measure
-        measure={
-          Object {
-            "leak": undefined,
+      <div
+        className="project-card-measure-number"
+      >
+        <Measure
+          className="spacer-right"
+          measure={
+            Object {
+              "leak": "8",
+            }
           }
-        }
-        metric={
-          Object {
-            "key": "new_coverage",
-            "type": "PERCENT",
+          metric={
+            Object {
+              "key": "new_bugs",
+              "type": "SHORT_INT",
+            }
           }
-        }
-      />
+        />
+        <Rating
+          muted={false}
+          small={false}
+          value="1.0"
+        />
+      </div>
+      <div
+        className="project-card-measure-label-with-icon"
+      >
+        <BugIcon
+          className="little-spacer-right vertical-bottom"
+        />
+        metric.bugs.name
+      </div>
     </div>
+  </div>
+  <div
+    className="project-card-measure"
+    data-key="new_security_rating"
+  >
     <div
-      className="project-card-measure-label"
+      className="project-card-measure-inner"
     >
-      metric.coverage.name
+      <div
+        className="project-card-measure-number"
+      >
+        <Measure
+          className="spacer-right"
+          measure={
+            Object {
+              "leak": "2",
+            }
+          }
+          metric={
+            Object {
+              "key": "new_vulnerabilities",
+              "type": "SHORT_INT",
+            }
+          }
+        />
+        <Rating
+          muted={false}
+          small={false}
+          value="2.0"
+        />
+      </div>
+      <div
+        className="project-card-measure-label-with-icon"
+      >
+        <VulnerabilityIcon
+          className="little-spacer-right vertical-bottom"
+        />
+        metric.vulnerabilities.name
+      </div>
     </div>
   </div>
-</div>
-`;
-
-exports[`should not render new duplications 1`] = `
-<div
-  className="project-card-measure"
-  data-key="new_duplicated_lines_density"
->
   <div
-    className="project-card-measure-inner"
+    className="project-card-measure"
+    data-key="new_maintainability_rating"
   >
     <div
-      className="project-card-measure-number"
+      className="project-card-measure-inner"
     >
-      <Measure
-        measure={
-          Object {
-            "leak": undefined,
+      <div
+        className="project-card-measure-number"
+      >
+        <Measure
+          className="spacer-right"
+          measure={
+            Object {
+              "leak": "0",
+            }
           }
-        }
-        metric={
-          Object {
-            "key": "new_duplicated_lines_density",
-            "type": "PERCENT",
+          metric={
+            Object {
+              "key": "new_code_smells",
+              "type": "SHORT_INT",
+            }
           }
-        }
-      />
+        />
+        <Rating
+          muted={false}
+          small={false}
+          value="1.0"
+        />
+      </div>
+      <div
+        className="project-card-measure-label-with-icon"
+      >
+        <CodeSmellIcon
+          className="little-spacer-right vertical-bottom"
+        />
+        metric.code_smells.name
+      </div>
     </div>
+  </div>
+  <div
+    className="project-card-measure"
+    data-key="new_coverage"
+  >
     <div
-      className="project-card-measure-label"
+      className="project-card-measure-inner"
     >
-      metric.duplicated_lines_density.short_name
+      <div
+        className="project-card-measure-number"
+      >
+        <Measure
+          measure={
+            Object {
+              "leak": "26.55",
+            }
+          }
+          metric={
+            Object {
+              "key": "new_coverage",
+              "type": "PERCENT",
+            }
+          }
+        />
+      </div>
+      <div
+        className="project-card-measure-label"
+      >
+        metric.coverage.name
+      </div>
+    </div>
+  </div>
+  <div
+    className="project-card-measure"
+    data-key="new_duplicated_lines_density"
+  >
+    <div
+      className="project-card-measure-inner"
+    >
+      <div
+        className="project-card-measure-number"
+      >
+        <Measure
+          measure={
+            Object {
+              "leak": "0.55",
+            }
+          }
+          metric={
+            Object {
+              "key": "new_duplicated_lines_density",
+              "type": "PERCENT",
+            }
+          }
+        />
+      </div>
+      <div
+        className="project-card-measure-label"
+      >
+        metric.duplicated_lines_density.short_name
+      </div>
+    </div>
+  </div>
+  <div
+    className="project-card-measure smaller-card pull-right"
+    data-key="new_lines"
+  >
+    <div
+      className="project-card-measure-inner"
+    >
+      <div
+        className="project-card-measure-number"
+      >
+        <Measure
+          measure={
+            Object {
+              "leak": "87",
+            }
+          }
+          metric={
+            Object {
+              "key": "new_lines",
+              "type": "SHORT_INT",
+            }
+          }
+        />
+      </div>
+      <div
+        className="project-card-measure-label"
+      >
+        metric.lines.name
+      </div>
     </div>
   </div>
 </div>
 `;
 
-exports[`should not render new lines 1`] = `undefined`;
-
-exports[`should render correctly with all data 1`] = `
+exports[`should render no data style new coverage, new duplications and new lines 1`] = `
 <div
   className="project-card-leak-measures"
 >
@@ -207,7 +357,7 @@ exports[`should render correctly with all data 1`] = `
         <Measure
           measure={
             Object {
-              "leak": "26.55",
+              "leak": undefined,
             }
           }
           metric={
@@ -238,7 +388,7 @@ exports[`should render correctly with all data 1`] = `
         <Measure
           measure={
             Object {
-              "leak": "0.55",
+              "leak": undefined,
             }
           }
           metric={
@@ -269,7 +419,7 @@ exports[`should render correctly with all data 1`] = `
         <Measure
           measure={
             Object {
-              "leak": "87",
+              "leak": undefined,
             }
           }
           metric={