SONAR-12586 Display portfolio description

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" />

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' },

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>

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;