SONAR-12586 Display portfolio description

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 9460718ea5b83f3310d5ec0e4322fa236d9c664c..e7c170aa7a76fd711acbf9d878a422f93936e226 100644 (file)
--- 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 3356a46cb7cf5c95d45bc1c81ca4026771a69d20..70aed21093acc5943a397d11715ee01ee713d747 100644 (file)
--- 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 97f174df1ea05d8e19fcb3f5936f20118507a9b3..fb87db2a7d0144d907525ead6d4f8f48806c66aa 100644 (file)
--- 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 269f331480cda7b877fea8d32bd1509c9c4999a4..e5840431728659933100be31690ceb69c05ed1a0 100644 (file)
--- 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;