Migrate parts of overview app to TS

4 files changed, 88 insertions, 243 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 4efd5855aff..50c440bda9c 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
@@ -37,10 +37,9 @@ export default function ProjectCardLeakMeasures({ measures }: Props) {
           <div className="project-card-measure-number">
             <Measure
               className="spacer-right"
-              measure={{
-                metric: { key: 'new_bugs', type: 'SHORT_INT' },
-                leak: measures['new_bugs']
-              }}
+              metricKey="new_bugs"
+              metricType="SHORT_INT"
+              value={measures['new_bugs']}
             />
             <Rating value={measures['new_reliability_rating']} />
           </div>
@@ -56,10 +55,9 @@ export default function ProjectCardLeakMeasures({ measures }: Props) {
           <div className="project-card-measure-number">
             <Measure
               className="spacer-right"
-              measure={{
-                metric: { key: 'new_vulnerabilities', type: 'SHORT_INT' },
-                leak: measures['new_vulnerabilities']
-              }}
+              metricKey="new_vulnerabilities"
+              metricType="SHORT_INT"
+              value={measures['new_vulnerabilities']}
             />
             <Rating value={measures['new_security_rating']} />
           </div>
@@ -75,10 +73,9 @@ export default function ProjectCardLeakMeasures({ measures }: Props) {
           <div className="project-card-measure-number">
             <Measure
               className="spacer-right"
-              measure={{
-                metric: { key: 'new_code_smells', type: 'SHORT_INT' },
-                leak: measures['new_code_smells']
-              }}
+              metricKey="new_code_smells"
+              metricType="SHORT_INT"
+              value={measures['new_code_smells']}
             />
             <Rating value={measures['new_maintainability_rating']} />
           </div>
@@ -93,10 +90,9 @@ export default function ProjectCardLeakMeasures({ measures }: Props) {
         <div className="project-card-measure-inner">
           <div className="project-card-measure-number">
             <Measure
-              measure={{
-                metric: { key: 'new_coverage', type: 'PERCENT' },
-                leak: measures['new_coverage']
-              }}
+              metricKey="new_coverage"
+              metricType="PERCENT"
+              value={measures['new_coverage']}
             />
           </div>
           <div className="project-card-measure-label">{translate('metric.coverage.name')}</div>
@@ -107,10 +103,9 @@ export default function ProjectCardLeakMeasures({ measures }: Props) {
         <div className="project-card-measure-inner">
           <div className="project-card-measure-number">
             <Measure
-              measure={{
-                metric: { key: 'new_duplicated_lines_density', type: 'PERCENT' },
-                leak: measures['new_duplicated_lines_density']
-              }}
+              metricKey="new_duplicated_lines_density"
+              metricType="PERCENT"
+              value={measures['new_duplicated_lines_density']}
             />
           </div>
           <div className="project-card-measure-label">
@@ -122,12 +117,7 @@ export default function ProjectCardLeakMeasures({ measures }: Props) {
       <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
-              measure={{
-                metric: { key: 'new_lines', type: 'SHORT_INT' },
-                leak: measures['new_lines']
-              }}
-            />
+            <Measure metricKey="new_lines" metricType="SHORT_INT" value={measures['new_lines']} />
           </div>
           <div className="project-card-measure-label">{translate('metric.lines.name')}</div>
         </div>
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 63dba2d25f4..e11c8e5b80d 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
@@ -45,10 +45,9 @@ export default function ProjectCardOverallMeasures({ measures }: Props) {
           <div className="project-card-measure-number">
             <Measure
               className="spacer-right"
-              measure={{
-                metric: { key: 'bugs', type: 'SHORT_INT' },
-                value: measures['bugs']
-              }}
+              metricKey="bugs"
+              metricType="SHORT_INT"
+              value={measures['bugs']}
             />
             <Rating value={measures['reliability_rating']} />
           </div>
@@ -64,10 +63,9 @@ export default function ProjectCardOverallMeasures({ measures }: Props) {
           <div className="project-card-measure-number">
             <Measure
               className="spacer-right"
-              measure={{
-                metric: { key: 'vulnerabilities', type: 'SHORT_INT' },
-                value: measures['vulnerabilities']
-              }}
+              metricKey="vulnerabilities"
+              metricType="SHORT_INT"
+              value={measures['vulnerabilities']}
             />
             <Rating value={measures['security_rating']} />
           </div>
@@ -83,10 +81,9 @@ export default function ProjectCardOverallMeasures({ measures }: Props) {
           <div className="project-card-measure-number">
             <Measure
               className="spacer-right"
-              measure={{
-                metric: { key: 'code_smells', type: 'SHORT_INT' },
-                value: measures['code_smells']
-              }}
+              metricKey="code_smells"
+              metricType="SHORT_INT"
+              value={measures['code_smells']}
             />
             <Rating value={measures['sqale_rating']} />
           </div>
@@ -105,12 +102,7 @@ export default function ProjectCardOverallMeasures({ measures }: Props) {
                 <CoverageRating value={measures['coverage']} />
               </span>
             )}
-            <Measure
-              measure={{
-                metric: { key: 'coverage', type: 'PERCENT' },
-                value: measures['coverage']
-              }}
-            />
+            <Measure metricKey="coverage" metricType="PERCENT" value={measures['coverage']} />
           </div>
           <div className="project-card-measure-label">{translate('metric.coverage.name')}</div>
         </div>
@@ -125,10 +117,9 @@ export default function ProjectCardOverallMeasures({ measures }: Props) {
               </span>
             )}
             <Measure
-              measure={{
-                metric: { key: 'duplicated_lines_density', type: 'PERCENT' },
-                value: measures['duplicated_lines_density']
-              }}
+              metricKey="duplicated_lines_density"
+              metricType="PERCENT"
+              value={measures['duplicated_lines_density']}
             />
           </div>
           <div className="project-card-measure-label">
@@ -141,12 +132,7 @@ export default function ProjectCardOverallMeasures({ measures }: Props) {
         <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">
-              <Measure
-                measure={{
-                  metric: { key: 'ncloc', type: 'SHORT_INT' },
-                  value: measures['ncloc']
-                }}
-              />
+              <Measure metricKey="ncloc" metricType="SHORT_INT" value={measures['ncloc']} />
               <span className="spacer-left">
                 <SizeRating value={Number(measures['ncloc'])} />
               </span>
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 0ccdace41b1..5dbdbd4a074 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
@@ -16,15 +16,9 @@ exports[`should render correctly with all data 1`] = `
       >
         <Measure
           className="spacer-right"
-          measure={
-            Object {
-              "leak": "8",
-              "metric": Object {
-                "key": "new_bugs",
-                "type": "SHORT_INT",
-              },
-            }
-          }
+          metricKey="new_bugs"
+          metricType="SHORT_INT"
+          value="8"
         />
         <Rating
           value="1.0"
@@ -52,15 +46,9 @@ exports[`should render correctly with all data 1`] = `
       >
         <Measure
           className="spacer-right"
-          measure={
-            Object {
-              "leak": "2",
-              "metric": Object {
-                "key": "new_vulnerabilities",
-                "type": "SHORT_INT",
-              },
-            }
-          }
+          metricKey="new_vulnerabilities"
+          metricType="SHORT_INT"
+          value="2"
         />
         <Rating
           value="2.0"
@@ -88,15 +76,9 @@ exports[`should render correctly with all data 1`] = `
       >
         <Measure
           className="spacer-right"
-          measure={
-            Object {
-              "leak": "0",
-              "metric": Object {
-                "key": "new_code_smells",
-                "type": "SHORT_INT",
-              },
-            }
-          }
+          metricKey="new_code_smells"
+          metricType="SHORT_INT"
+          value="0"
         />
         <Rating
           value="1.0"
@@ -123,15 +105,9 @@ exports[`should render correctly with all data 1`] = `
         className="project-card-measure-number"
       >
         <Measure
-          measure={
-            Object {
-              "leak": "26.55",
-              "metric": Object {
-                "key": "new_coverage",
-                "type": "PERCENT",
-              },
-            }
-          }
+          metricKey="new_coverage"
+          metricType="PERCENT"
+          value="26.55"
         />
       </div>
       <div
@@ -152,15 +128,9 @@ exports[`should render correctly with all data 1`] = `
         className="project-card-measure-number"
       >
         <Measure
-          measure={
-            Object {
-              "leak": "0.55",
-              "metric": Object {
-                "key": "new_duplicated_lines_density",
-                "type": "PERCENT",
-              },
-            }
-          }
+          metricKey="new_duplicated_lines_density"
+          metricType="PERCENT"
+          value="0.55"
         />
       </div>
       <div
@@ -181,15 +151,9 @@ exports[`should render correctly with all data 1`] = `
         className="project-card-measure-number"
       >
         <Measure
-          measure={
-            Object {
-              "leak": "87",
-              "metric": Object {
-                "key": "new_lines",
-                "type": "SHORT_INT",
-              },
-            }
-          }
+          metricKey="new_lines"
+          metricType="SHORT_INT"
+          value="87"
         />
       </div>
       <div
@@ -218,15 +182,9 @@ exports[`should render no data style new coverage, new duplications and new line
       >
         <Measure
           className="spacer-right"
-          measure={
-            Object {
-              "leak": "8",
-              "metric": Object {
-                "key": "new_bugs",
-                "type": "SHORT_INT",
-              },
-            }
-          }
+          metricKey="new_bugs"
+          metricType="SHORT_INT"
+          value="8"
         />
         <Rating
           value="1.0"
@@ -254,15 +212,9 @@ exports[`should render no data style new coverage, new duplications and new line
       >
         <Measure
           className="spacer-right"
-          measure={
-            Object {
-              "leak": "2",
-              "metric": Object {
-                "key": "new_vulnerabilities",
-                "type": "SHORT_INT",
-              },
-            }
-          }
+          metricKey="new_vulnerabilities"
+          metricType="SHORT_INT"
+          value="2"
         />
         <Rating
           value="2.0"
@@ -290,15 +242,9 @@ exports[`should render no data style new coverage, new duplications and new line
       >
         <Measure
           className="spacer-right"
-          measure={
-            Object {
-              "leak": "0",
-              "metric": Object {
-                "key": "new_code_smells",
-                "type": "SHORT_INT",
-              },
-            }
-          }
+          metricKey="new_code_smells"
+          metricType="SHORT_INT"
+          value="0"
         />
         <Rating
           value="1.0"
@@ -325,15 +271,8 @@ exports[`should render no data style new coverage, new duplications and new line
         className="project-card-measure-number"
       >
         <Measure
-          measure={
-            Object {
-              "leak": undefined,
-              "metric": Object {
-                "key": "new_coverage",
-                "type": "PERCENT",
-              },
-            }
-          }
+          metricKey="new_coverage"
+          metricType="PERCENT"
         />
       </div>
       <div
@@ -354,15 +293,8 @@ exports[`should render no data style new coverage, new duplications and new line
         className="project-card-measure-number"
       >
         <Measure
-          measure={
-            Object {
-              "leak": undefined,
-              "metric": Object {
-                "key": "new_duplicated_lines_density",
-                "type": "PERCENT",
-              },
-            }
-          }
+          metricKey="new_duplicated_lines_density"
+          metricType="PERCENT"
         />
       </div>
       <div
@@ -383,15 +315,8 @@ exports[`should render no data style new coverage, new duplications and new line
         className="project-card-measure-number"
       >
         <Measure
-          measure={
-            Object {
-              "leak": undefined,
-              "metric": Object {
-                "key": "new_lines",
-                "type": "SHORT_INT",
-              },
-            }
-          }
+          metricKey="new_lines"
+          metricType="SHORT_INT"
         />
       </div>
       <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 74ef1f08cfe..2c300ec6258 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
@@ -12,15 +12,8 @@ exports[`should not render coverage 1`] = `
       className="project-card-measure-number"
     >
       <Measure
-        measure={
-          Object {
-            "metric": Object {
-              "key": "coverage",
-              "type": "PERCENT",
-            },
-            "value": undefined,
-          }
-        }
+        metricKey="coverage"
+        metricType="PERCENT"
       />
     </div>
     <div
@@ -44,15 +37,8 @@ exports[`should not render duplications 1`] = `
       className="project-card-measure-number"
     >
       <Measure
-        measure={
-          Object {
-            "metric": Object {
-              "key": "duplicated_lines_density",
-              "type": "PERCENT",
-            },
-            "value": undefined,
-          }
-        }
+        metricKey="duplicated_lines_density"
+        metricType="PERCENT"
       />
     </div>
     <div
@@ -80,15 +66,9 @@ exports[`should render correctly with all data 1`] = `
       >
         <Measure
           className="spacer-right"
-          measure={
-            Object {
-              "metric": Object {
-                "key": "bugs",
-                "type": "SHORT_INT",
-              },
-              "value": "17",
-            }
-          }
+          metricKey="bugs"
+          metricType="SHORT_INT"
+          value="17"
         />
         <Rating
           value="1.0"
@@ -116,15 +96,9 @@ exports[`should render correctly with all data 1`] = `
       >
         <Measure
           className="spacer-right"
-          measure={
-            Object {
-              "metric": Object {
-                "key": "vulnerabilities",
-                "type": "SHORT_INT",
-              },
-              "value": "0",
-            }
-          }
+          metricKey="vulnerabilities"
+          metricType="SHORT_INT"
+          value="0"
         />
         <Rating
           value="1.0"
@@ -152,15 +126,9 @@ exports[`should render correctly with all data 1`] = `
       >
         <Measure
           className="spacer-right"
-          measure={
-            Object {
-              "metric": Object {
-                "key": "code_smells",
-                "type": "SHORT_INT",
-              },
-              "value": "132",
-            }
-          }
+          metricKey="code_smells"
+          metricType="SHORT_INT"
+          value="132"
         />
         <Rating
           value="1.0"
@@ -194,15 +162,9 @@ exports[`should render correctly with all data 1`] = `
           />
         </span>
         <Measure
-          measure={
-            Object {
-              "metric": Object {
-                "key": "coverage",
-                "type": "PERCENT",
-              },
-              "value": "88.3",
-            }
-          }
+          metricKey="coverage"
+          metricType="PERCENT"
+          value="88.3"
         />
       </div>
       <div
@@ -230,15 +192,9 @@ exports[`should render correctly with all data 1`] = `
           />
         </span>
         <Measure
-          measure={
-            Object {
-              "metric": Object {
-                "key": "duplicated_lines_density",
-                "type": "PERCENT",
-              },
-              "value": "9.8",
-            }
-          }
+          metricKey="duplicated_lines_density"
+          metricType="PERCENT"
+          value="9.8"
         />
       </div>
       <div
@@ -259,15 +215,9 @@ exports[`should render correctly with all data 1`] = `
         className="project-card-measure-number"
       >
         <Measure
-          measure={
-            Object {
-              "metric": Object {
-                "key": "ncloc",
-                "type": "SHORT_INT",
-              },
-              "value": "2053",
-            }
-          }
+          metricKey="ncloc"
+          metricType="SHORT_INT"
+          value="2053"
         />
         <span
           className="spacer-left"
@@ -299,15 +249,9 @@ exports[`should render ncloc correctly 1`] = `
       className="project-card-measure-number"
     >
       <Measure
-        measure={
-          Object {
-            "metric": Object {
-              "key": "ncloc",
-              "type": "SHORT_INT",
-            },
-            "value": "16549887",
-          }
-        }
+        metricKey="ncloc"
+        metricType="SHORT_INT"
+        value="16549887"
       />
       <span
         className="spacer-left"