SONAR-10486 Display badges for applications

5 files changed, 136 insertions, 53 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 aa0fd5f0a16..ab35a37e8ae 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
@@ -34,11 +34,11 @@ import { getChildren } from '../../../api/components';
 import { translate } from '../../../helpers/l10n';
 import { fetchMetrics } from '../../../store/rootActions';
 import { getMetrics } from '../../../store/rootReducer';
-import { Metric } from '../../../app/types';
+import { Metric, Component } from '../../../app/types';
 import '../styles.css';
 
 interface OwnProps {
-  component: { key: string; name: string };
+  component: Component;
 }
 
 interface StateToProps {
@@ -184,10 +184,21 @@ export class App extends React.PureComponent<Props, State> {
           <div className="page-main">{this.renderMain()}</div>
 
           <aside className="page-sidebar-fixed">
-            {!this.isEmpty() &&
-              !this.isNotComputed() && <Summary component={component} measures={measures!} />}
-            <Activity component={component.key} metrics={this.props.metrics} />
-            <Report component={component} />
+            <div className="portfolio-meta-card">
+              <h4 className="portfolio-meta-header">
+                {translate('overview.about_this_portfolio')}
+              </h4>
+              {!this.isEmpty() &&
+                !this.isNotComputed() && <Summary component={component} measures={measures!} />}
+            </div>
+
+            <div className="portfolio-meta-card">
+              <Activity component={component.key} metrics={this.props.metrics} />
+            </div>
+
+            <div className="portfolio-meta-card">
+              <Report component={component} />
+            </div>
           </aside>
         </div>
       </div>
diff --git a/server/sonar-web/src/main/js/apps/portfolio/components/Summary.tsx b/server/sonar-web/src/main/js/apps/portfolio/components/Summary.tsx
index 75ef3f32723..b32e4cda434 100644
--- a/server/sonar-web/src/main/js/apps/portfolio/components/Summary.tsx
+++ b/server/sonar-web/src/main/js/apps/portfolio/components/Summary.tsx
@@ -34,7 +34,7 @@ export default function Summary({ component, measures }: Props) {
   const nclocDistribution = measures['ncloc_language_distribution'];
 
   return (
-    <section id="portfolio-summary" className="big-spacer-bottom">
+    <section className="big-spacer-bottom" id="portfolio-summary">
       {component.description && <div className="big-spacer-bottom">{component.description}</div>}
 
       <ul className="portfolio-grid">
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 4abdc4e056b..58ec3447ae8 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
@@ -44,11 +44,12 @@ jest.mock('../Report', () => ({
 import * as React from 'react';
 import { shallow, mount } from 'enzyme';
 import { App } from '../App';
+import { Component } from '../../../../app/types';
 
 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' };
+const component = { key: 'foo', name: 'Foo', qualifier: 'TRK' } as Component;
 
 it('renders', () => {
   const wrapper = shallow(<App component={component} fetchMetrics={jest.fn()} metrics={{}} />);
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 76ccc5b4cb8..4a89b29c509 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
@@ -61,32 +61,51 @@ exports[`renders 1`] = `
     <aside
       className="page-sidebar-fixed"
     >
-      <Summary
-        component={
-          Object {
-            "key": "foo",
-            "name": "Foo",
+      <div
+        className="portfolio-meta-card"
+      >
+        <h4
+          className="portfolio-meta-header"
+        >
+          overview.about_this_portfolio
+        </h4>
+        <Summary
+          component={
+            Object {
+              "key": "foo",
+              "name": "Foo",
+              "qualifier": "TRK",
+            }
           }
-        }
-        measures={
-          Object {
-            "ncloc": "173",
-            "reliability_rating": "1",
+          measures={
+            Object {
+              "ncloc": "173",
+              "reliability_rating": "1",
+            }
           }
-        }
-      />
-      <Activity
-        component="foo"
-        metrics={Object {}}
-      />
-      <Report
-        component={
-          Object {
-            "key": "foo",
-            "name": "Foo",
+        />
+      </div>
+      <div
+        className="portfolio-meta-card"
+      >
+        <Activity
+          component="foo"
+          metrics={Object {}}
+        />
+      </div>
+      <div
+        className="portfolio-meta-card"
+      >
+        <Report
+          component={
+            Object {
+              "key": "foo",
+              "name": "Foo",
+              "qualifier": "TRK",
+            }
           }
-        }
-      />
+        />
+      </div>
     </aside>
   </div>
 </div>
@@ -116,18 +135,36 @@ exports[`renders when portfolio is empty 1`] = `
     <aside
       className="page-sidebar-fixed"
     >
-      <Activity
-        component="foo"
-        metrics={Object {}}
-      />
-      <Report
-        component={
-          Object {
-            "key": "foo",
-            "name": "Foo",
+      <div
+        className="portfolio-meta-card"
+      >
+        <h4
+          className="portfolio-meta-header"
+        >
+          overview.about_this_portfolio
+        </h4>
+      </div>
+      <div
+        className="portfolio-meta-card"
+      >
+        <Activity
+          component="foo"
+          metrics={Object {}}
+        />
+      </div>
+      <div
+        className="portfolio-meta-card"
+      >
+        <Report
+          component={
+            Object {
+              "key": "foo",
+              "name": "Foo",
+              "qualifier": "TRK",
+            }
           }
-        }
-      />
+        />
+      </div>
     </aside>
   </div>
 </div>
@@ -154,18 +191,36 @@ exports[`renders when portfolio is not computed 1`] = `
     <aside
       className="page-sidebar-fixed"
     >
-      <Activity
-        component="foo"
-        metrics={Object {}}
-      />
-      <Report
-        component={
-          Object {
-            "key": "foo",
-            "name": "Foo",
+      <div
+        className="portfolio-meta-card"
+      >
+        <h4
+          className="portfolio-meta-header"
+        >
+          overview.about_this_portfolio
+        </h4>
+      </div>
+      <div
+        className="portfolio-meta-card"
+      >
+        <Activity
+          component="foo"
+          metrics={Object {}}
+        />
+      </div>
+      <div
+        className="portfolio-meta-card"
+      >
+        <Report
+          component={
+            Object {
+              "key": "foo",
+              "name": "Foo",
+              "qualifier": "TRK",
+            }
           }
-        }
-      />
+        />
+      </div>
     </aside>
   </div>
 </div>
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 1d51166d27a..7267fc0b4b6 100644
--- a/server/sonar-web/src/main/js/apps/portfolio/styles.css
+++ b/server/sonar-web/src/main/js/apps/portfolio/styles.css
@@ -110,3 +110,19 @@
 .portfolio-sub-components-cell {
   width: 90px;
 }
+
+.portfolio-meta-header {
+  margin-bottom: calc(0.5 * var(--gridSize));
+  color: var(--baseFontColor);
+}
+
+.portfolio-meta-card {
+  min-width: 200px;
+  box-sizing: border-box;
+}
+
+.portfolio-meta-card + .portfolio-meta-card {
+  margin-top: calc(2 * var(--gridSize));
+  padding-top: calc(2 * var(--gridSize) - 1px);
+  border-top: 1px solid var(--barBorderColor);
+}