From a011c5f350cc8f27940ef71a55b49a41f1bac7f8 Mon Sep 17 00:00:00 2001
From: Wouter Admiraal <wouter.admiraal@sonarsource.com>
Date: Tue, 18 Jun 2019 14:42:43 +0200
Subject: [PATCH] SONAR-12204 Add measures icon to nloc link in portfolio
 overview

---
 .../main/js/apps/portfolio/components/App.tsx | 19 +++++-----
 .../components/MeasuresButtonLink.tsx         |  5 +--
 .../portfolio/components/WorstProjects.tsx    | 10 +++++-
 .../__tests__/MeasuresButtonLink-test.tsx     |  9 +++--
 .../__tests__/__snapshots__/App-test.tsx.snap | 34 +++++++-----------
 .../MeasuresButtonLink-test.tsx.snap          | 24 +++++++++++++
 .../__snapshots__/WorstProjects-test.tsx.snap |  3 ++
 .../src/main/js/apps/portfolio/styles.css     | 35 ++++++-------------
 8 files changed, 77 insertions(+), 62 deletions(-)

diff --git a/server/sonar-web/src/main/js/apps/portfolio/components/App.tsx b/server/sonar-web/src/main/js/apps/portfolio/components/App.tsx
index c1b063059e3..433a00de531 100644
--- a/server/sonar-web/src/main/js/apps/portfolio/components/App.tsx
+++ b/server/sonar-web/src/main/js/apps/portfolio/components/App.tsx
@@ -19,7 +19,6 @@
  */
 import * as React from 'react';
 import { connect } from 'react-redux';
-import { Link } from 'react-router';
 import MeasuresButtonLink from './MeasuresButtonLink';
 import MetricBox from './MetricBox';
 import Report from './Report';
@@ -30,7 +29,6 @@ import Measure from '../../../components/measure/Measure';
 import { getChildren } from '../../../api/components';
 import { getMeasures } from '../../../api/measures';
 import { translate } from '../../../helpers/l10n';
-import { getComponentDrilldownUrl } from '../../../helpers/urls';
 import { fetchMetrics } from '../../../store/rootActions';
 import { getMetrics, Store } from '../../../store/rootReducer';
 import '../styles.css';
@@ -171,8 +169,8 @@ export class App extends React.PureComponent<Props, State> {
         <h1>{translate('portfolio.breakdown')}</h1>
         <div className="portfolio-breakdown">
           <div className="portfolio-breakdown-box">
-            <h2>{translate('portfolio.number_of_projects')}</h2>
-            <div className="portfolio-breakdown-metric">
+            <h2 className="text-muted small">{translate('portfolio.number_of_projects')}</h2>
+            <div className="portfolio-breakdown-metric huge">
               <Measure
                 metricKey="projects"
                 metricType="SHORT_INT"
@@ -186,8 +184,8 @@ export class App extends React.PureComponent<Props, State> {
             </div>
           </div>
           <div className="portfolio-breakdown-box">
-            <h2>{translate('portfolio.number_of_lines')}</h2>
-            <div className="portfolio-breakdown-metric">
+            <h2 className="text-muted small">{translate('portfolio.number_of_lines')}</h2>
+            <div className="portfolio-breakdown-metric huge">
               <Measure
                 metricKey="ncloc"
                 metricType="SHORT_INT"
@@ -196,10 +194,11 @@ export class App extends React.PureComponent<Props, State> {
             </div>
             <div className="portfolio-breakdown-box-link">
               <div>
-                <Link
-                  to={getComponentDrilldownUrl({ componentKey: component.key, metric: 'ncloc' })}>
-                  <span>{translate('portfolio.language_breakdown_link')}</span>
-                </Link>
+                <MeasuresButtonLink
+                  component={component.key}
+                  label={translate('portfolio.language_breakdown_link')}
+                  metric="ncloc"
+                />
               </div>
             </div>
           </div>
diff --git a/server/sonar-web/src/main/js/apps/portfolio/components/MeasuresButtonLink.tsx b/server/sonar-web/src/main/js/apps/portfolio/components/MeasuresButtonLink.tsx
index 258eed0869e..3d78ef61ebc 100644
--- a/server/sonar-web/src/main/js/apps/portfolio/components/MeasuresButtonLink.tsx
+++ b/server/sonar-web/src/main/js/apps/portfolio/components/MeasuresButtonLink.tsx
@@ -25,14 +25,15 @@ import { getComponentDrilldownUrl } from '../../../helpers/urls';
 
 interface Props {
   component: string;
+  label?: string;
   metric: string;
 }
 
-export default function MeasuresButtonLink({ component, metric }: Props) {
+export default function MeasuresButtonLink({ component, label, metric }: Props) {
   return (
     <Link to={getComponentDrilldownUrl({ componentKey: component, metric })}>
       <MeasuresIcon className="little-spacer-right" size={14} />
-      <span>{translate('portfolio.measures_link')}</span>
+      <span>{label || translate('portfolio.measures_link')}</span>
     </Link>
   );
 }
diff --git a/server/sonar-web/src/main/js/apps/portfolio/components/WorstProjects.tsx b/server/sonar-web/src/main/js/apps/portfolio/components/WorstProjects.tsx
index 344fd501672..6943e3e9dc1 100644
--- a/server/sonar-web/src/main/js/apps/portfolio/components/WorstProjects.tsx
+++ b/server/sonar-web/src/main/js/apps/portfolio/components/WorstProjects.tsx
@@ -21,6 +21,7 @@ import * as React from 'react';
 import { Link } from 'react-router';
 import { max } from 'lodash';
 import { SubComponent } from '../types';
+import * as theme from '../../../app/theme';
 import Measure from '../../../components/measure/Measure';
 import QualifierIcon from '../../../components/icons-components/QualifierIcon';
 import { translate, translateWithParameters } from '../../../helpers/l10n';
@@ -129,7 +130,14 @@ function renderNcloc(measures: T.Dict<string | undefined>, maxLoc: number) {
       </span>
       {maxLoc > 0 && (
         <svg className="spacer-left" height="16" width="50">
-          <rect className="bar-chart-bar" height="10" width={barWidth} x="0" y="3" />
+          <rect
+            className="bar-chart-bar"
+            height="10"
+            fill={theme.blue}
+            width={barWidth}
+            x="0"
+            y="3"
+          />
         </svg>
       )}
     </td>
diff --git a/server/sonar-web/src/main/js/apps/portfolio/components/__tests__/MeasuresButtonLink-test.tsx b/server/sonar-web/src/main/js/apps/portfolio/components/__tests__/MeasuresButtonLink-test.tsx
index 86b0d5c639e..41aaba68219 100644
--- a/server/sonar-web/src/main/js/apps/portfolio/components/__tests__/MeasuresButtonLink-test.tsx
+++ b/server/sonar-web/src/main/js/apps/portfolio/components/__tests__/MeasuresButtonLink-test.tsx
@@ -22,7 +22,10 @@ import { shallow } from 'enzyme';
 import MeasuresButtonLink from '../MeasuresButtonLink';
 
 it('renders', () => {
-  expect(
-    shallow(<MeasuresButtonLink component="foo" metric="security_rating" />)
-  ).toMatchSnapshot();
+  expect(shallowRender()).toMatchSnapshot();
+  expect(shallowRender({ label: 'Foo' })).toMatchSnapshot();
 });
+
+function shallowRender(props = {}) {
+  return shallow(<MeasuresButtonLink component="foo" metric="security_rating" {...props} />);
+}
diff --git a/server/sonar-web/src/main/js/apps/portfolio/components/__tests__/__snapshots__/App-test.tsx.snap b/server/sonar-web/src/main/js/apps/portfolio/components/__tests__/__snapshots__/App-test.tsx.snap
index 9c400a1ff41..4691a613e06 100644
--- a/server/sonar-web/src/main/js/apps/portfolio/components/__tests__/__snapshots__/App-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/portfolio/components/__tests__/__snapshots__/App-test.tsx.snap
@@ -83,11 +83,13 @@ exports[`renders 1`] = `
     <div
       className="portfolio-breakdown-box"
     >
-      <h2>
+      <h2
+        className="text-muted small"
+      >
         portfolio.number_of_projects
       </h2>
       <div
-        className="portfolio-breakdown-metric"
+        className="portfolio-breakdown-metric huge"
       >
         <Measure
           metricKey="projects"
@@ -109,11 +111,13 @@ exports[`renders 1`] = `
     <div
       className="portfolio-breakdown-box"
     >
-      <h2>
+      <h2
+        className="text-muted small"
+      >
         portfolio.number_of_lines
       </h2>
       <div
-        className="portfolio-breakdown-metric"
+        className="portfolio-breakdown-metric huge"
       >
         <Measure
           metricKey="ncloc"
@@ -125,23 +129,11 @@ exports[`renders 1`] = `
         className="portfolio-breakdown-box-link"
       >
         <div>
-          <Link
-            onlyActiveOnIndex={false}
-            style={Object {}}
-            to={
-              Object {
-                "pathname": "/component_measures",
-                "query": Object {
-                  "id": "foo",
-                  "metric": "ncloc",
-                },
-              }
-            }
-          >
-            <span>
-              portfolio.language_breakdown_link
-            </span>
-          </Link>
+          <MeasuresButtonLink
+            component="foo"
+            label="portfolio.language_breakdown_link"
+            metric="ncloc"
+          />
         </div>
       </div>
     </div>
diff --git a/server/sonar-web/src/main/js/apps/portfolio/components/__tests__/__snapshots__/MeasuresButtonLink-test.tsx.snap b/server/sonar-web/src/main/js/apps/portfolio/components/__tests__/__snapshots__/MeasuresButtonLink-test.tsx.snap
index 5b5aff8aff9..4c62daa9f2d 100644
--- a/server/sonar-web/src/main/js/apps/portfolio/components/__tests__/__snapshots__/MeasuresButtonLink-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/portfolio/components/__tests__/__snapshots__/MeasuresButtonLink-test.tsx.snap
@@ -23,3 +23,27 @@ exports[`renders 1`] = `
   </span>
 </Link>
 `;
+
+exports[`renders 2`] = `
+<Link
+  onlyActiveOnIndex={false}
+  style={Object {}}
+  to={
+    Object {
+      "pathname": "/component_measures",
+      "query": Object {
+        "id": "foo",
+        "metric": "security_rating",
+      },
+    }
+  }
+>
+  <MeasuresIcon
+    className="little-spacer-right"
+    size={14}
+  />
+  <span>
+    Foo
+  </span>
+</Link>
+`;
diff --git a/server/sonar-web/src/main/js/apps/portfolio/components/__tests__/__snapshots__/WorstProjects-test.tsx.snap b/server/sonar-web/src/main/js/apps/portfolio/components/__tests__/__snapshots__/WorstProjects-test.tsx.snap
index ee5e59a8907..7fbb4c9db8b 100644
--- a/server/sonar-web/src/main/js/apps/portfolio/components/__tests__/__snapshots__/WorstProjects-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/portfolio/components/__tests__/__snapshots__/WorstProjects-test.tsx.snap
@@ -134,6 +134,7 @@ exports[`renders 1`] = `
           >
             <rect
               className="bar-chart-bar"
+              fill="#4b9fd5"
               height="10"
               width={50}
               x="0"
@@ -230,6 +231,7 @@ exports[`renders 1`] = `
           >
             <rect
               className="bar-chart-bar"
+              fill="#4b9fd5"
               height="10"
               width={25}
               x="0"
@@ -326,6 +328,7 @@ exports[`renders 1`] = `
           >
             <rect
               className="bar-chart-bar"
+              fill="#4b9fd5"
               height="10"
               width={38}
               x="0"
diff --git a/server/sonar-web/src/main/js/apps/portfolio/styles.css b/server/sonar-web/src/main/js/apps/portfolio/styles.css
index 3f810d2a794..6778e7eca1a 100644
--- a/server/sonar-web/src/main/js/apps/portfolio/styles.css
+++ b/server/sonar-web/src/main/js/apps/portfolio/styles.css
@@ -162,48 +162,33 @@
 
 .portfolio-breakdown {
   display: flex;
-  flex-direction: row;
-  align-items: flex-start;
 }
 
 .portfolio-breakdown-box {
   flex: 0 0 auto;
+  display: flex;
+  flex-direction: column;
   background-color: white;
   border: 1px solid var(--barBorderColor);
-  margin: var(--gridSize) var(--gridSize) calc(2 * var(--gridSize));
-  padding: 0 var(--gridSize) 66px;
-  position: relative;
-}
-
-.portfolio-breakdown-box:first-child {
-  margin-left: 0;
-}
-
-.portfolio-breakdown-box:last-child {
-  margin-right: 0;
+  margin: var(--gridSize) 0 calc(2 * var(--gridSize));
 }
 
-.portfolio-breakdown-box > h2 {
-  color: var(--secondFontColor);
-  margin: var(--gridSize);
-  font-size: 12px;
+.portfolio-breakdown-box + .portfolio-breakdown-box {
+  margin-left: calc(2 * var(--gridSize));
 }
 
-.portfolio-breakdown-box > .portfolio-breakdown-metric {
-  font-size: var(--hugeFontSize);
-  margin-left: var(--gridSize);
+.portfolio-breakdown-box h2,
+.portfolio-breakdown-box .portfolio-breakdown-metric {
+  margin: var(--gridSize) calc(2 * var(--gridSize)) 0;
 }
 
 .portfolio-breakdown-box-link {
+  margin-top: calc(2 * var(--gridSize));
   border-top: 1px solid var(--barBorderColor);
   padding: calc(2 * var(--gridSize));
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
 }
 
-.portfolio-sub-components table.data > thead > tr > th {
+.portfolio-sub-components table.data th {
   font-size: var(--baseFontSize);
   text-transform: none;
   vertical-align: middle;
-- 
2.39.5