From 118a9c73f0788fa8b84e1546a5fcf76ea8869ecf Mon Sep 17 00:00:00 2001
From: Jeremy Davis <jeremy.davis@sonarsource.com>
Date: Fri, 16 Apr 2021 17:45:00 +0200
Subject: [PATCH] SONAR-12586 Display portfolio description

---
 .../src/main/js/apps/portfolio/components/App.tsx |  5 +++++
 .../portfolio/components/__tests__/App-test.tsx   | 15 +++++++++++++--
 .../__tests__/__snapshots__/App-test.tsx.snap     |  8 +++++++-
 .../src/main/js/apps/portfolio/styles.css         |  4 ++++
 4 files changed, 29 insertions(+), 3 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 9460718ea5b..e7c170aa7a7 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
@@ -161,6 +161,11 @@ export class App extends React.PureComponent<Props, State> {
         <div className="page-actions">
           <Report component={component} />
         </div>
+        {component.description && (
+          <div className="portfolio-description display-inline-block big-spacer-bottom">
+            {component.description}
+          </div>
+        )}
         <h1>{translate('portfolio.health_factors')}</h1>
         <div className="portfolio-boxes">
           <MetricBox component={component.key} measures={measures!} metricKey="releasability" />
diff --git a/server/sonar-web/src/main/js/apps/portfolio/components/__tests__/App-test.tsx b/server/sonar-web/src/main/js/apps/portfolio/components/__tests__/App-test.tsx
index 3356a46cb7c..70aed21093a 100644
--- a/server/sonar-web/src/main/js/apps/portfolio/components/__tests__/App-test.tsx
+++ b/server/sonar-web/src/main/js/apps/portfolio/components/__tests__/App-test.tsx
@@ -28,15 +28,26 @@ jest.mock('../../../../api/components', () => ({
 
 import { mount, shallow } from 'enzyme';
 import * as React from 'react';
+import { ComponentQualifier } from '../../../../types/component';
 import { App } from '../App';
 
 const getMeasures = require('../../../../api/measures').getMeasures as jest.Mock<any>;
 const getChildren = require('../../../../api/components').getChildren as jest.Mock<any>;
 
-const component = { key: 'foo', name: 'Foo', qualifier: 'TRK' } as T.Component;
+const component = {
+  key: 'foo',
+  name: 'Foo',
+  qualifier: ComponentQualifier.Portfolio
+} as T.Component;
 
 it('renders', () => {
-  const wrapper = shallow(<App component={component} fetchMetrics={jest.fn()} metrics={{}} />);
+  const wrapper = shallow(
+    <App
+      component={{ ...component, description: 'accurate description' }}
+      fetchMetrics={jest.fn()}
+      metrics={{}}
+    />
+  );
   wrapper.setState({
     loading: false,
     measures: { ncloc: '173', reliability_rating: '1' },
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 97f174df1ea..fb87db2a7d0 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
@@ -10,13 +10,19 @@ exports[`renders 1`] = `
     <Report
       component={
         Object {
+          "description": "accurate description",
           "key": "foo",
           "name": "Foo",
-          "qualifier": "TRK",
+          "qualifier": "VW",
         }
       }
     />
   </div>
+  <div
+    className="portfolio-description display-inline-block big-spacer-bottom"
+  >
+    accurate description
+  </div>
   <h1>
     portfolio.health_factors
   </h1>
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 269f331480c..e5840431728 100644
--- a/server/sonar-web/src/main/js/apps/portfolio/styles.css
+++ b/server/sonar-web/src/main/js/apps/portfolio/styles.css
@@ -54,6 +54,10 @@
   white-space: nowrap;
 }
 
+.portfolio-description {
+  max-width: 60%;
+}
+
 .portfolio-boxes {
   display: flex;
   justify-content: space-between;
-- 
2.39.5