]> source.dussan.org Git - sonarqube.git/commitdiff
SONAR-16028 Navigate to project overall code from portfolio breakdown
authorRevanshu Paliwal <revanshu.paliwal@sonarsource.com>
Wed, 8 Jun 2022 13:46:29 +0000 (15:46 +0200)
committersonartech <sonartech@sonarsource.com>
Thu, 9 Jun 2022 20:03:15 +0000 (20:03 +0000)
16 files changed:
server/sonar-web/src/main/js/apps/code/components/CodeApp.tsx
server/sonar-web/src/main/js/apps/code/components/Component.tsx
server/sonar-web/src/main/js/apps/code/components/ComponentName.tsx
server/sonar-web/src/main/js/apps/code/components/Components.tsx
server/sonar-web/src/main/js/apps/code/components/__tests__/CodeApp-test.tsx
server/sonar-web/src/main/js/apps/code/components/__tests__/ComponentName-test.tsx
server/sonar-web/src/main/js/apps/code/components/__tests__/__snapshots__/CodeApp-test.tsx.snap
server/sonar-web/src/main/js/apps/code/components/__tests__/__snapshots__/ComponentName-test.tsx.snap
server/sonar-web/src/main/js/apps/overview/branches/BranchOverviewRenderer.tsx
server/sonar-web/src/main/js/apps/overview/branches/MeasuresPanel.tsx
server/sonar-web/src/main/js/apps/overview/branches/__tests__/MeasuresPanel-test.tsx
server/sonar-web/src/main/js/apps/overview/branches/__tests__/__snapshots__/BranchOverviewRenderer-test.tsx.snap
server/sonar-web/src/main/js/apps/overview/branches/__tests__/__snapshots__/MeasuresPanel-test.tsx.snap
server/sonar-web/src/main/js/apps/overview/utils.ts
server/sonar-web/src/main/js/helpers/__tests__/urls-test.ts
server/sonar-web/src/main/js/helpers/urls.ts

index 69481261394b68d60114c8773befc9f835a4cf8c..b49a0559215370707897fc559a59e7eece2cb50f 100644 (file)
@@ -34,7 +34,7 @@ import Suggestions from '../../../components/embed-docs-modal/Suggestions';
 import { Alert } from '../../../components/ui/Alert';
 import { isPullRequest, isSameBranchLike } from '../../../helpers/branch-like';
 import { translate } from '../../../helpers/l10n';
-import { getCodeUrl, getProjectUrl } from '../../../helpers/urls';
+import { CodeScope, getCodeUrl, getProjectUrl } from '../../../helpers/urls';
 import { BranchLike } from '../../../types/branch-like';
 import { isPortfolioLike } from '../../../types/component';
 import { Breadcrumb, Component, ComponentMeasure, Dict, Issue, Metric } from '../../../types/types';
@@ -217,9 +217,12 @@ export class CodeApp extends React.Component<Props, State> {
 
   handleSelect = (component: ComponentMeasure) => {
     const { branchLike, component: rootComponent } = this.props;
+    const { newCodeSelected } = this.state;
 
     if (component.refKey) {
-      this.props.router.push(getProjectUrl(component.refKey, component.branch));
+      const codeType = newCodeSelected ? CodeScope.New : CodeScope.Overall;
+      const url = getProjectUrl(component.refKey, component.branch, codeType);
+      this.props.router.push(url);
     } else {
       this.props.router.push(getCodeUrl(rootComponent.key, branchLike, component.key));
     }
@@ -350,6 +353,7 @@ export class CodeApp extends React.Component<Props, State> {
                   onSelect={this.handleSelect}
                   rootComponent={component}
                   selected={highlighted}
+                  newCodeSelected={newCodeSelected}
                 />
               </div>
               <ListFooter count={components.length} loadMore={this.handleLoadMore} total={total} />
index 42654cedf37b931db744132bb2a9be1010a20e0b..4d6a199c662369d44703799c3d2603f5d0af1860 100644 (file)
@@ -40,6 +40,7 @@ interface Props {
   previous?: TypeComponentMeasure;
   rootComponent: TypeComponentMeasure;
   selected?: boolean;
+  newCodeSelected?: boolean;
 }
 
 export class Component extends React.PureComponent<Props> {
@@ -54,7 +55,8 @@ export class Component extends React.PureComponent<Props> {
       metrics,
       previous,
       rootComponent,
-      selected = false
+      selected = false,
+      newCodeSelected
     } = this.props;
 
     const isFile =
@@ -91,6 +93,7 @@ export class Component extends React.PureComponent<Props> {
               previous={previous}
               rootComponent={rootComponent}
               unclickable={isBaseComponent}
+              newCodeSelected={newCodeSelected}
             />
           </div>
         </td>
index c555d2e1366d83850d4724547b91de15fb73d1e7..fae113cae5226189442007e94c8b2e85e7123ae0 100644 (file)
@@ -24,7 +24,7 @@ import BranchIcon from '../../../components/icons/BranchIcon';
 import QualifierIcon from '../../../components/icons/QualifierIcon';
 import { getBranchLikeQuery } from '../../../helpers/branch-like';
 import { translate } from '../../../helpers/l10n';
-import { getComponentOverviewUrl } from '../../../helpers/urls';
+import { CodeScope, getComponentOverviewUrl } from '../../../helpers/urls';
 import { BranchLike } from '../../../types/branch-like';
 import {
   ComponentQualifier,
@@ -52,6 +52,7 @@ export interface Props {
   previous?: ComponentMeasure;
   rootComponent: ComponentMeasure;
   unclickable?: boolean;
+  newCodeSelected?: boolean;
 }
 
 export default function ComponentName({
@@ -60,7 +61,8 @@ export default function ComponentName({
   unclickable = false,
   rootComponent,
   previous,
-  canBrowse = false
+  canBrowse = false,
+  newCodeSelected
 }: Props) {
   const ariaLabel = unclickable ? translate('code.parent_folder') : undefined;
 
@@ -81,7 +83,8 @@ export default function ComponentName({
             previous,
             rootComponent,
             unclickable,
-            canBrowse
+            canBrowse,
+            newCodeSelected
           )}
         </span>
         {component.branch ? (
@@ -111,10 +114,11 @@ function renderNameWithIcon(
   previous: ComponentMeasure | undefined,
   rootComponent: ComponentMeasure,
   unclickable = false,
-  canBrowse = false
+  canBrowse = false,
+  newCodeSelected = true
 ) {
   const name = renderName(component, previous);
-
+  const codeType = newCodeSelected ? CodeScope.New : CodeScope.Overall;
   if (
     !unclickable &&
     (isPortfolioLike(component.qualifier) ||
@@ -129,9 +133,14 @@ function renderNameWithIcon(
     return (
       <Link
         className="link-with-icon"
-        to={getComponentOverviewUrl(component.refKey || component.key, component.qualifier, {
-          branch
-        })}>
+        to={getComponentOverviewUrl(
+          component.refKey || component.key,
+          component.qualifier,
+          {
+            branch
+          },
+          codeType
+        )}>
         <QualifierIcon qualifier={component.qualifier} /> <span>{name}</span>
       </Link>
     );
index 4e47f27956aa855c9c9392b22b60bfa420aacb06..e16cf21bcf3f581c4d4fce76906640df26d84da4 100644 (file)
@@ -34,13 +34,22 @@ interface Props {
   metrics: Metric[];
   rootComponent: ComponentMeasure;
   selected?: ComponentMeasure;
+  newCodeSelected?: boolean;
 }
 
 const BASE_COLUMN_COUNT = 4;
 
 export class Components extends React.PureComponent<Props> {
   render() {
-    const { baseComponent, branchLike, components, rootComponent, selected, metrics } = this.props;
+    const {
+      baseComponent,
+      branchLike,
+      components,
+      rootComponent,
+      selected,
+      metrics,
+      newCodeSelected
+    } = this.props;
 
     const colSpan = metrics.length + BASE_COLUMN_COUNT;
     const canBePinned = baseComponent && !['APP', 'VW', 'SVW'].includes(baseComponent.qualifier);
@@ -67,6 +76,7 @@ export class Components extends React.PureComponent<Props> {
                 key={baseComponent.key}
                 metrics={metrics}
                 rootComponent={rootComponent}
+                newCodeSelected={newCodeSelected}
               />
               <tr className="blank">
                 <td colSpan={3}>
@@ -96,6 +106,7 @@ export class Components extends React.PureComponent<Props> {
                 metrics={this.props.metrics}
                 previous={index > 0 ? list[index - 1] : undefined}
                 rootComponent={rootComponent}
+                newCodeSelected={newCodeSelected}
                 selected={
                   selected &&
                   getComponentMeasureUniqueKey(component) === getComponentMeasureUniqueKey(selected)
index e74d049dd86b6bce9e74071d66661dd025450578..08af19dcb2906515c493587ce03d755a14dd4ed8 100644 (file)
@@ -214,14 +214,22 @@ it('should handle select correctly', () => {
   wrapper.instance().handleSelect(mockComponentMeasure(true, { refKey: 'test' }));
   expect(router.push).toHaveBeenCalledWith({
     pathname: '/dashboard',
-    query: { branch: undefined, id: 'test' }
+    query: { branch: undefined, id: 'test', code_scope: 'new' }
   });
   expect(wrapper.state().highlighted).toBeUndefined();
 
-  wrapper.instance().handleSelect(mockComponentMeasure());
+  wrapper.setState({ newCodeSelected: false });
+
+  wrapper.instance().handleSelect(mockComponentMeasure(true, { refKey: 'test' }));
   expect(router.push).toHaveBeenCalledWith({
     pathname: '/dashboard',
-    query: { branch: undefined, id: 'test' }
+    query: { branch: undefined, id: 'test', code_scope: 'overall' }
+  });
+
+  wrapper.instance().handleSelect(mockComponentMeasure());
+  expect(router.push).toHaveBeenCalledWith({
+    pathname: '/code',
+    query: { id: 'foo', line: undefined, selected: 'foo' }
   });
 });
 
index 7d0d3c0ddb9c61b7300631592be7b9a4fc40cffd..b043f9e4f51da484d697715efaf96c474fe3b3dd 100644 (file)
@@ -49,6 +49,8 @@ describe('#ComponentName', () => {
         rootComponent: mockComponentMeasure(false, { qualifier: 'APP' })
       })
     ).toMatchSnapshot();
+    expect(shallowRender({ newCodeSelected: true })).toMatchSnapshot();
+    expect(shallowRender({ newCodeSelected: false })).toMatchSnapshot();
   });
 
   it('should render correctly for dirs', () => {
index 3fdce8225df7208071553f678c18ae4c4ab6594d..56b99a9c95a4089b51624a1970caef3d4d21fc13 100644 (file)
@@ -55,6 +55,7 @@ Object {
       "type": "RATING",
     },
   ],
+  "newCodeSelected": true,
   "onEndOfList": [Function],
   "onGoToParent": [Function],
   "onHighlight": [Function],
@@ -139,6 +140,7 @@ Object {
       "type": "RATING",
     },
   ],
+  "newCodeSelected": false,
   "onEndOfList": [Function],
   "onGoToParent": [Function],
   "onHighlight": [Function],
@@ -385,6 +387,7 @@ exports[`should render correclty when no sub component for APP: with sub compone
             },
           ]
         }
+        newCodeSelected={true}
         onEndOfList={[Function]}
         onGoToParent={[Function]}
         onHighlight={[Function]}
@@ -571,6 +574,7 @@ exports[`should render correclty when no sub component for SVW: with sub compone
         }
         cycle={true}
         metrics={Array []}
+        newCodeSelected={true}
         onEndOfList={[Function]}
         onGoToParent={[Function]}
         onHighlight={[Function]}
@@ -767,6 +771,7 @@ exports[`should render correclty when no sub component for TRK: with sub compone
             },
           ]
         }
+        newCodeSelected={true}
         onEndOfList={[Function]}
         onGoToParent={[Function]}
         onHighlight={[Function]}
@@ -953,6 +958,7 @@ exports[`should render correclty when no sub component for VW: with sub componen
         }
         cycle={true}
         metrics={Array []}
+        newCodeSelected={true}
         onEndOfList={[Function]}
         onGoToParent={[Function]}
         onHighlight={[Function]}
index 1b2109af89b0a3edc702453c65e4a6552fbf247c..8f38318ed18d41164e85a515bf34495889332cde 100644 (file)
@@ -237,6 +237,40 @@ foo:src/index.tsx"
 </span>
 `;
 
+exports[`#ComponentName should render correctly for files 6`] = `
+<span
+  className="max-width-100 display-inline-block text-ellipsis"
+  title="src/index.tsx
+
+foo:src/index.tsx"
+>
+  <span>
+    <QualifierIcon
+      qualifier="FIL"
+    />
+     
+    index.tsx
+  </span>
+</span>
+`;
+
+exports[`#ComponentName should render correctly for files 7`] = `
+<span
+  className="max-width-100 display-inline-block text-ellipsis"
+  title="src/index.tsx
+
+foo:src/index.tsx"
+>
+  <span>
+    <QualifierIcon
+      qualifier="FIL"
+    />
+     
+    index.tsx
+  </span>
+</span>
+`;
+
 exports[`#ComponentName should render correctly for refs 1`] = `
 <span
   className="max-width-100 display-inline-block text-ellipsis"
@@ -255,6 +289,7 @@ foo"
         "pathname": "/dashboard",
         "query": Object {
           "branch": undefined,
+          "code_scope": "new",
           "id": "src/main/ts/app",
         },
       }
@@ -292,6 +327,7 @@ foo"
           "pathname": "/dashboard",
           "query": Object {
             "branch": "foo",
+            "code_scope": "new",
             "id": "src/main/ts/app",
           },
         }
@@ -340,6 +376,7 @@ foo"
           "pathname": "/dashboard",
           "query": Object {
             "branch": undefined,
+            "code_scope": "new",
             "id": "src/main/ts/app",
           },
         }
index e55f0fd8b7b8a6a12e0fb917ba7c5b479c29a8e6..c718f5b46583d60655503a9d9947f75295d9ec39 100644 (file)
@@ -29,7 +29,7 @@ import { QualityGateStatus } from '../../../types/quality-gates';
 import { Analysis, Component, MeasureEnhanced, Metric, Period } from '../../../types/types';
 import ActivityPanel from './ActivityPanel';
 import FirstAnalysisNextStepsNotif from './FirstAnalysisNextStepsNotif';
-import { MeasuresPanel } from './MeasuresPanel';
+import MeasuresPanel from './MeasuresPanel';
 import NoCodeWarning from './NoCodeWarning';
 import QualityGatePanel from './QualityGatePanel';
 
index 8bc586430f6b981250cb13e3d6f05d18d1ef4c4d..c490803dc3d70d6f5f2786b22f1317449a305e2b 100644 (file)
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import { withRouter, Location } from '../../../components/hoc/withRouter';
 import { rawSizes } from '../../../app/theme';
 import BoxedTabs from '../../../components/controls/BoxedTabs';
 import ComponentReportActions from '../../../components/controls/ComponentReportActions';
 import DeferredSpinner from '../../../components/ui/DeferredSpinner';
 import { translate } from '../../../helpers/l10n';
 import { findMeasure, isDiffMetric } from '../../../helpers/measures';
+import { CodeScope } from '../../../helpers/urls';
 import { ApplicationPeriod } from '../../../types/application';
 import { Branch } from '../../../types/branch-like';
 import { ComponentQualifier } from '../../../types/component';
@@ -31,7 +33,7 @@ import { IssueType } from '../../../types/issues';
 import { MetricKey } from '../../../types/metrics';
 import { Component, MeasureEnhanced, Period } from '../../../types/types';
 import MeasurementLabel from '../components/MeasurementLabel';
-import { MeasurementType } from '../utils';
+import { MeasurementType, parseQuery } from '../utils';
 import { DrilldownMeasureValue } from './DrilldownMeasureValue';
 import { LeakPeriodInfo } from './LeakPeriodInfo';
 import MeasuresPanelIssueMeasureRow from './MeasuresPanelIssueMeasureRow';
@@ -44,6 +46,7 @@ export interface MeasuresPanelProps {
   loading?: boolean;
   measures?: MeasureEnhanced[];
   period?: Period;
+  location: Location;
 }
 
 export enum MeasuresPanelTabs {
@@ -51,14 +54,19 @@ export enum MeasuresPanelTabs {
   Overall
 }
 
-export function MeasuresPanel(props: MeasuresPanelProps) {
-  const { appLeak, branch, component, loading, measures = [], period } = props;
+function MeasuresPanel(props: MeasuresPanelProps) {
+  const { appLeak, branch, component, loading, measures = [], period, location } = props;
 
   const hasDiffMeasures = measures.some(m => isDiffMetric(m.metric.key));
   const isApp = component.qualifier === ComponentQualifier.Application;
   const leakPeriod = isApp ? appLeak : period;
+  const query = parseQuery(location.query);
 
-  const [tab, selectTab] = React.useState(MeasuresPanelTabs.New);
+  const [tab, selectTab] = React.useState(() => {
+    return query.codeScope === CodeScope.Overall
+      ? MeasuresPanelTabs.Overall
+      : MeasuresPanelTabs.New;
+  });
 
   const isNewCodeTab = tab === MeasuresPanelTabs.New;
 
@@ -188,4 +196,4 @@ export function MeasuresPanel(props: MeasuresPanelProps) {
   );
 }
 
-export default React.memo(MeasuresPanel);
+export default withRouter(React.memo(MeasuresPanel));
index db7b961d0c1cd11ccb942d9aaaa340ceb23be8c9..0c85d3493927392065714eb311802f27d9dfffe8 100644 (file)
@@ -22,15 +22,30 @@ import * as React from 'react';
 import BoxedTabs from '../../../../components/controls/BoxedTabs';
 import { mockBranch, mockMainBranch } from '../../../../helpers/mocks/branch-like';
 import { mockComponent } from '../../../../helpers/mocks/component';
-import { mockMeasureEnhanced, mockMetric, mockPeriod } from '../../../../helpers/testMocks';
+import {
+  mockLocation,
+  mockMeasureEnhanced,
+  mockMetric,
+  mockPeriod
+} from '../../../../helpers/testMocks';
 import { ComponentQualifier } from '../../../../types/component';
 import { MetricKey } from '../../../../types/metrics';
-import { MeasuresPanel, MeasuresPanelProps, MeasuresPanelTabs } from '../MeasuresPanel';
+import MeasuresPanel, { MeasuresPanelProps, MeasuresPanelTabs } from '../MeasuresPanel';
+
+jest.mock('react', () => {
+  return {
+    ...jest.requireActual('react'),
+    useEffect: jest.fn().mockImplementation(f => f())
+  };
+});
 
 it('should render correctly for projects', () => {
   const wrapper = shallowRender();
   expect(wrapper).toMatchSnapshot();
-  wrapper.find(BoxedTabs).prop<Function>('onSelect')(MeasuresPanelTabs.Overall);
+  wrapper
+    .dive()
+    .find(BoxedTabs)
+    .prop<Function>('onSelect')(MeasuresPanelTabs.Overall);
   expect(wrapper).toMatchSnapshot();
 });
 
@@ -39,7 +54,10 @@ it('should render correctly for applications', () => {
     component: mockComponent({ qualifier: ComponentQualifier.Application })
   });
   expect(wrapper).toMatchSnapshot();
-  wrapper.find(BoxedTabs).prop<Function>('onSelect')(MeasuresPanelTabs.Overall);
+  wrapper
+    .dive()
+    .find(BoxedTabs)
+    .prop<Function>('onSelect')(MeasuresPanelTabs.Overall);
   expect(wrapper).toMatchSnapshot();
 });
 
@@ -50,7 +68,10 @@ it('should render correctly if there is no new code measures', () => {
       mockMeasureEnhanced({ metric: mockMetric({ key: MetricKey.bugs }) })
     ]
   });
-  wrapper.find(BoxedTabs).prop<Function>('onSelect')(MeasuresPanelTabs.New);
+  wrapper
+    .dive()
+    .find(BoxedTabs)
+    .prop<Function>('onSelect')(MeasuresPanelTabs.New);
   expect(wrapper).toMatchSnapshot();
 });
 
@@ -63,7 +84,10 @@ it('should render correctly if branch is misconfigured', () => {
     ],
     period: mockPeriod({ date: undefined, mode: 'REFERENCE_BRANCH', parameter: 'own-reference' })
   });
-  wrapper.find(BoxedTabs).prop<Function>('onSelect')(MeasuresPanelTabs.New);
+  wrapper
+    .dive()
+    .find(BoxedTabs)
+    .prop<Function>('onSelect')(MeasuresPanelTabs.New);
   expect(wrapper).toMatchSnapshot('hide settings');
 
   wrapper.setProps({ component: mockComponent({ configuration: { showSettings: true } }) });
@@ -85,6 +109,22 @@ it('should render correctly if the data is still loading', () => {
   expect(shallowRender({ loading: true })).toMatchSnapshot();
 });
 
+it('should render correctly when code scope is overall code', () => {
+  expect(
+    shallowRender({
+      location: mockLocation({ pathname: '/dashboard', query: { code_scope: 'overall' } })
+    })
+  ).toMatchSnapshot();
+});
+
+it('should render correctly when code scope is new code', () => {
+  expect(
+    shallowRender({
+      location: mockLocation({ pathname: '/dashboard', query: { code_scope: 'new' } })
+    })
+  ).toMatchSnapshot();
+});
+
 function shallowRender(props: Partial<MeasuresPanelProps> = {}) {
   return shallow<MeasuresPanelProps>(
     <MeasuresPanel
@@ -96,6 +136,7 @@ function shallowRender(props: Partial<MeasuresPanelProps> = {}) {
         mockMeasureEnhanced({ metric: mockMetric({ key: MetricKey.bugs }) }),
         mockMeasureEnhanced({ metric: mockMetric({ key: MetricKey.new_bugs }) })
       ]}
+      location={mockLocation()}
       {...props}
     />
   );
index 2b0909eaafe30a63f8df76101a946d2ad62c5fc2..406a135f1cc904d3fdfcab6fdbd2955084d9e0a1 100644 (file)
@@ -73,7 +73,7 @@ exports[`should render correctly: default 1`] = `
           <div
             className="display-flex-column"
           >
-            <MeasuresPanel
+            <withRouter(Component)
               branch={
                 Object {
                   "analysisDate": "2018-01-01",
@@ -336,7 +336,7 @@ exports[`should render correctly: loading 1`] = `
           <div
             className="display-flex-column"
           >
-            <MeasuresPanel
+            <withRouter(Component)
               branch={
                 Object {
                   "analysisDate": "2018-01-01",
index d274642205ad4f21e3cb0728dd503a44b5cf9861..338eab97b8c7a9edfe932d45624e6efac96df51f 100644 (file)
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render correctly for applications 1`] = `
-<div
-  className="overview-panel"
-  data-test="overview__measures-panel"
->
-  <div
-    className="display-flex-space-between display-flex-start"
-  >
-    <h2
-      className="overview-panel-title"
-    >
-      overview.measures
-    </h2>
-    <withCurrentUserContext(withAppStateContext(ComponentReportActions))
-      branch={
-        Object {
-          "analysisDate": "2018-01-01",
-          "excludedFromPurge": true,
-          "isMain": true,
-          "name": "master",
-        }
-      }
-      component={
-        Object {
-          "breadcrumbs": Array [],
-          "key": "my-project",
-          "name": "MyProject",
-          "qualifier": "APP",
-          "qualityGate": Object {
-            "isDefault": true,
-            "key": "30",
-            "name": "Sonar way",
-          },
-          "qualityProfiles": Array [
-            Object {
-              "deleted": false,
-              "key": "my-qp",
-              "language": "ts",
-              "name": "Sonar way",
-            },
-          ],
-          "tags": Array [],
-        }
-      }
-    />
-  </div>
-  <BoxedTabs
-    onSelect={[Function]}
-    selected={0}
-    tabs={
-      Array [
-        Object {
-          "key": 0,
-          "label": <div
-            className="text-left overview-measures-tab"
-          >
-            <span
-              className="text-bold"
-            >
-              overview.new_code
-            </span>
-          </div>,
-        },
-        Object {
-          "key": 1,
-          "label": <div
-            className="text-left overview-measures-tab"
-          >
-            <span
-              className="text-bold"
-              style={
-                Object {
-                  "position": "absolute",
-                  "top": 16,
-                }
-              }
-            >
-              overview.overall_code
-            </span>
-          </div>,
+<Memo(MeasuresPanel)
+  branch={
+    Object {
+      "analysisDate": "2018-01-01",
+      "excludedFromPurge": true,
+      "isMain": true,
+      "name": "master",
+    }
+  }
+  component={
+    Object {
+      "breadcrumbs": Array [],
+      "key": "my-project",
+      "name": "MyProject",
+      "qualifier": "APP",
+      "qualityGate": Object {
+        "isDefault": true,
+        "key": "30",
+        "name": "Sonar way",
+      },
+      "qualityProfiles": Array [
+        Object {
+          "deleted": false,
+          "key": "my-qp",
+          "language": "ts",
+          "name": "Sonar way",
         },
-      ]
+      ],
+      "tags": Array [],
     }
-  />
-  <div
-    className="overview-panel-content flex-1 bordered"
-  >
-    <MeasuresPanelIssueMeasureRow
-      branchLike={
-        Object {
-          "analysisDate": "2018-01-01",
-          "excludedFromPurge": true,
-          "isMain": true,
-          "name": "master",
-        }
-      }
-      component={
-        Object {
-          "breadcrumbs": Array [],
-          "key": "my-project",
-          "name": "MyProject",
-          "qualifier": "APP",
-          "qualityGate": Object {
-            "isDefault": true,
-            "key": "30",
-            "name": "Sonar way",
-          },
-          "qualityProfiles": Array [
-            Object {
-              "deleted": false,
-              "key": "my-qp",
-              "language": "ts",
-              "name": "Sonar way",
-            },
-          ],
-          "tags": Array [],
-        }
-      }
-      isNewCodeTab={true}
-      key="BUG"
-      measures={
-        Array [
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "coverage",
-              "key": "coverage",
-              "name": "Coverage",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "new_coverage",
-              "key": "new_coverage",
-              "name": "New_coverage",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "bugs",
-              "key": "bugs",
-              "name": "Bugs",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "new_bugs",
-              "key": "new_bugs",
-              "name": "New_bugs",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-        ]
-      }
-      type="BUG"
-    />
-    <MeasuresPanelIssueMeasureRow
-      branchLike={
-        Object {
-          "analysisDate": "2018-01-01",
-          "excludedFromPurge": true,
-          "isMain": true,
-          "name": "master",
-        }
-      }
-      component={
-        Object {
-          "breadcrumbs": Array [],
-          "key": "my-project",
-          "name": "MyProject",
-          "qualifier": "APP",
-          "qualityGate": Object {
-            "isDefault": true,
-            "key": "30",
-            "name": "Sonar way",
-          },
-          "qualityProfiles": Array [
-            Object {
-              "deleted": false,
-              "key": "my-qp",
-              "language": "ts",
-              "name": "Sonar way",
-            },
-          ],
-          "tags": Array [],
-        }
-      }
-      isNewCodeTab={true}
-      key="VULNERABILITY"
-      measures={
-        Array [
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "coverage",
-              "key": "coverage",
-              "name": "Coverage",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "new_coverage",
-              "key": "new_coverage",
-              "name": "New_coverage",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "bugs",
-              "key": "bugs",
-              "name": "Bugs",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "new_bugs",
-              "key": "new_bugs",
-              "name": "New_bugs",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-        ]
-      }
-      type="VULNERABILITY"
-    />
-    <MeasuresPanelIssueMeasureRow
-      branchLike={
-        Object {
-          "analysisDate": "2018-01-01",
-          "excludedFromPurge": true,
-          "isMain": true,
-          "name": "master",
-        }
-      }
-      component={
-        Object {
-          "breadcrumbs": Array [],
-          "key": "my-project",
-          "name": "MyProject",
-          "qualifier": "APP",
-          "qualityGate": Object {
-            "isDefault": true,
-            "key": "30",
-            "name": "Sonar way",
-          },
-          "qualityProfiles": Array [
-            Object {
-              "deleted": false,
-              "key": "my-qp",
-              "language": "ts",
-              "name": "Sonar way",
-            },
-          ],
-          "tags": Array [],
-        }
-      }
-      isNewCodeTab={true}
-      key="SECURITY_HOTSPOT"
-      measures={
-        Array [
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "coverage",
-              "key": "coverage",
-              "name": "Coverage",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "new_coverage",
-              "key": "new_coverage",
-              "name": "New_coverage",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "bugs",
-              "key": "bugs",
-              "name": "Bugs",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "new_bugs",
-              "key": "new_bugs",
-              "name": "New_bugs",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-        ]
-      }
-      type="SECURITY_HOTSPOT"
-    />
-    <MeasuresPanelIssueMeasureRow
-      branchLike={
-        Object {
-          "analysisDate": "2018-01-01",
-          "excludedFromPurge": true,
-          "isMain": true,
-          "name": "master",
-        }
-      }
-      component={
-        Object {
-          "breadcrumbs": Array [],
-          "key": "my-project",
-          "name": "MyProject",
-          "qualifier": "APP",
-          "qualityGate": Object {
-            "isDefault": true,
-            "key": "30",
-            "name": "Sonar way",
-          },
-          "qualityProfiles": Array [
-            Object {
-              "deleted": false,
-              "key": "my-qp",
-              "language": "ts",
-              "name": "Sonar way",
-            },
-          ],
-          "tags": Array [],
-        }
-      }
-      isNewCodeTab={true}
-      key="CODE_SMELL"
-      measures={
-        Array [
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "coverage",
-              "key": "coverage",
-              "name": "Coverage",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "new_coverage",
-              "key": "new_coverage",
-              "name": "New_coverage",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "bugs",
-              "key": "bugs",
-              "name": "Bugs",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "new_bugs",
-              "key": "new_bugs",
-              "name": "New_bugs",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-        ]
-      }
-      type="CODE_SMELL"
-    />
-    <div
-      className="display-flex-row overview-measures-row"
-    >
-      <div
-        className="overview-panel-huge-padded flex-1 bordered-right display-flex-center"
-        data-test="overview__measures-coverage"
-      >
-        <MeasurementLabel
-          branchLike={
-            Object {
-              "analysisDate": "2018-01-01",
-              "excludedFromPurge": true,
-              "isMain": true,
-              "name": "master",
-            }
-          }
-          centered={true}
-          component={
-            Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "qualifier": "APP",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
-              },
-              "qualityProfiles": Array [
-                Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
-                  "name": "Sonar way",
-                },
-              ],
-              "tags": Array [],
-            }
-          }
-          measures={
-            Array [
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "coverage",
-                  "key": "coverage",
-                  "name": "Coverage",
-                  "type": "PERCENT",
-                },
-                "period": Object {
-                  "bestValue": true,
-                  "index": 1,
-                  "value": "1.0",
-                },
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_coverage",
-                  "key": "new_coverage",
-                  "name": "New_coverage",
-                  "type": "PERCENT",
-                },
-                "period": Object {
-                  "bestValue": true,
-                  "index": 1,
-                  "value": "1.0",
-                },
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "bugs",
-                  "key": "bugs",
-                  "name": "Bugs",
-                  "type": "PERCENT",
-                },
-                "period": Object {
-                  "bestValue": true,
-                  "index": 1,
-                  "value": "1.0",
-                },
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_bugs",
-                  "key": "new_bugs",
-                  "name": "New_bugs",
-                  "type": "PERCENT",
-                },
-                "period": Object {
-                  "bestValue": true,
-                  "index": 1,
-                  "value": "1.0",
-                },
-                "value": "1.0",
-              },
-            ]
-          }
-          type="COVERAGE"
-          useDiffMetric={true}
-        />
-      </div>
-      <div
-        className="overview-panel-huge-padded flex-1 display-flex-center"
-      >
-        <MeasurementLabel
-          branchLike={
-            Object {
-              "analysisDate": "2018-01-01",
-              "excludedFromPurge": true,
-              "isMain": true,
-              "name": "master",
-            }
-          }
-          centered={true}
-          component={
-            Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "qualifier": "APP",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
-              },
-              "qualityProfiles": Array [
-                Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
-                  "name": "Sonar way",
-                },
-              ],
-              "tags": Array [],
-            }
-          }
-          measures={
-            Array [
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "coverage",
-                  "key": "coverage",
-                  "name": "Coverage",
-                  "type": "PERCENT",
-                },
-                "period": Object {
-                  "bestValue": true,
-                  "index": 1,
-                  "value": "1.0",
-                },
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_coverage",
-                  "key": "new_coverage",
-                  "name": "New_coverage",
-                  "type": "PERCENT",
-                },
-                "period": Object {
-                  "bestValue": true,
-                  "index": 1,
-                  "value": "1.0",
-                },
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "bugs",
-                  "key": "bugs",
-                  "name": "Bugs",
-                  "type": "PERCENT",
-                },
-                "period": Object {
-                  "bestValue": true,
-                  "index": 1,
-                  "value": "1.0",
-                },
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_bugs",
-                  "key": "new_bugs",
-                  "name": "New_bugs",
-                  "type": "PERCENT",
-                },
-                "period": Object {
-                  "bestValue": true,
-                  "index": 1,
-                  "value": "1.0",
-                },
-                "value": "1.0",
-              },
-            ]
-          }
-          type="DUPLICATION"
-          useDiffMetric={true}
-        />
-      </div>
-    </div>
-  </div>
-</div>
+  }
+  location={
+    Object {
+      "action": "PUSH",
+      "hash": "",
+      "key": "key",
+      "pathname": "/path",
+      "query": Object {},
+      "search": "",
+      "state": Object {},
+    }
+  }
+  measures={
+    Array [
+      Object {
+        "bestValue": true,
+        "leak": "1",
+        "metric": Object {
+          "id": "coverage",
+          "key": "coverage",
+          "name": "Coverage",
+          "type": "PERCENT",
+        },
+        "period": Object {
+          "bestValue": true,
+          "index": 1,
+          "value": "1.0",
+        },
+        "value": "1.0",
+      },
+      Object {
+        "bestValue": true,
+        "leak": "1",
+        "metric": Object {
+          "id": "new_coverage",
+          "key": "new_coverage",
+          "name": "New_coverage",
+          "type": "PERCENT",
+        },
+        "period": Object {
+          "bestValue": true,
+          "index": 1,
+          "value": "1.0",
+        },
+        "value": "1.0",
+      },
+      Object {
+        "bestValue": true,
+        "leak": "1",
+        "metric": Object {
+          "id": "bugs",
+          "key": "bugs",
+          "name": "Bugs",
+          "type": "PERCENT",
+        },
+        "period": Object {
+          "bestValue": true,
+          "index": 1,
+          "value": "1.0",
+        },
+        "value": "1.0",
+      },
+      Object {
+        "bestValue": true,
+        "leak": "1",
+        "metric": Object {
+          "id": "new_bugs",
+          "key": "new_bugs",
+          "name": "New_bugs",
+          "type": "PERCENT",
+        },
+        "period": Object {
+          "bestValue": true,
+          "index": 1,
+          "value": "1.0",
+        },
+        "value": "1.0",
+      },
+    ]
+  }
+/>
 `;
 
 exports[`should render correctly for applications 2`] = `
-<div
-  className="overview-panel"
-  data-test="overview__measures-panel"
->
-  <div
-    className="display-flex-space-between display-flex-start"
-  >
-    <h2
-      className="overview-panel-title"
-    >
-      overview.measures
-    </h2>
-    <withCurrentUserContext(withAppStateContext(ComponentReportActions))
-      branch={
-        Object {
-          "analysisDate": "2018-01-01",
-          "excludedFromPurge": true,
-          "isMain": true,
-          "name": "master",
-        }
-      }
-      component={
-        Object {
-          "breadcrumbs": Array [],
-          "key": "my-project",
-          "name": "MyProject",
-          "qualifier": "APP",
-          "qualityGate": Object {
-            "isDefault": true,
-            "key": "30",
-            "name": "Sonar way",
-          },
-          "qualityProfiles": Array [
-            Object {
-              "deleted": false,
-              "key": "my-qp",
-              "language": "ts",
-              "name": "Sonar way",
-            },
-          ],
-          "tags": Array [],
-        }
-      }
-    />
-  </div>
-  <BoxedTabs
-    onSelect={[Function]}
-    selected={1}
-    tabs={
-      Array [
-        Object {
-          "key": 0,
-          "label": <div
-            className="text-left overview-measures-tab"
-          >
-            <span
-              className="text-bold"
-            >
-              overview.new_code
-            </span>
-          </div>,
-        },
-        Object {
-          "key": 1,
-          "label": <div
-            className="text-left overview-measures-tab"
-          >
-            <span
-              className="text-bold"
-              style={
-                Object {
-                  "position": "absolute",
-                  "top": 16,
-                }
-              }
-            >
-              overview.overall_code
-            </span>
-          </div>,
+<Memo(MeasuresPanel)
+  branch={
+    Object {
+      "analysisDate": "2018-01-01",
+      "excludedFromPurge": true,
+      "isMain": true,
+      "name": "master",
+    }
+  }
+  component={
+    Object {
+      "breadcrumbs": Array [],
+      "key": "my-project",
+      "name": "MyProject",
+      "qualifier": "APP",
+      "qualityGate": Object {
+        "isDefault": true,
+        "key": "30",
+        "name": "Sonar way",
+      },
+      "qualityProfiles": Array [
+        Object {
+          "deleted": false,
+          "key": "my-qp",
+          "language": "ts",
+          "name": "Sonar way",
         },
-      ]
+      ],
+      "tags": Array [],
     }
-  />
-  <div
-    className="overview-panel-content flex-1 bordered"
-  >
-    <MeasuresPanelIssueMeasureRow
-      branchLike={
-        Object {
-          "analysisDate": "2018-01-01",
-          "excludedFromPurge": true,
-          "isMain": true,
-          "name": "master",
-        }
-      }
-      component={
-        Object {
-          "breadcrumbs": Array [],
-          "key": "my-project",
-          "name": "MyProject",
-          "qualifier": "APP",
-          "qualityGate": Object {
-            "isDefault": true,
-            "key": "30",
-            "name": "Sonar way",
-          },
-          "qualityProfiles": Array [
-            Object {
-              "deleted": false,
-              "key": "my-qp",
-              "language": "ts",
-              "name": "Sonar way",
-            },
-          ],
-          "tags": Array [],
-        }
-      }
-      isNewCodeTab={false}
-      key="BUG"
-      measures={
-        Array [
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "coverage",
-              "key": "coverage",
-              "name": "Coverage",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "new_coverage",
-              "key": "new_coverage",
-              "name": "New_coverage",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "bugs",
-              "key": "bugs",
-              "name": "Bugs",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "new_bugs",
-              "key": "new_bugs",
-              "name": "New_bugs",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-        ]
-      }
-      type="BUG"
-    />
-    <MeasuresPanelIssueMeasureRow
-      branchLike={
-        Object {
-          "analysisDate": "2018-01-01",
-          "excludedFromPurge": true,
-          "isMain": true,
-          "name": "master",
-        }
-      }
-      component={
-        Object {
-          "breadcrumbs": Array [],
-          "key": "my-project",
-          "name": "MyProject",
-          "qualifier": "APP",
-          "qualityGate": Object {
-            "isDefault": true,
-            "key": "30",
-            "name": "Sonar way",
-          },
-          "qualityProfiles": Array [
-            Object {
-              "deleted": false,
-              "key": "my-qp",
-              "language": "ts",
-              "name": "Sonar way",
-            },
-          ],
-          "tags": Array [],
-        }
-      }
-      isNewCodeTab={false}
-      key="VULNERABILITY"
-      measures={
-        Array [
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "coverage",
-              "key": "coverage",
-              "name": "Coverage",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "new_coverage",
-              "key": "new_coverage",
-              "name": "New_coverage",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "bugs",
-              "key": "bugs",
-              "name": "Bugs",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "new_bugs",
-              "key": "new_bugs",
-              "name": "New_bugs",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-        ]
-      }
-      type="VULNERABILITY"
-    />
-    <MeasuresPanelIssueMeasureRow
-      branchLike={
-        Object {
-          "analysisDate": "2018-01-01",
-          "excludedFromPurge": true,
-          "isMain": true,
-          "name": "master",
-        }
-      }
-      component={
-        Object {
-          "breadcrumbs": Array [],
-          "key": "my-project",
-          "name": "MyProject",
-          "qualifier": "APP",
-          "qualityGate": Object {
-            "isDefault": true,
-            "key": "30",
-            "name": "Sonar way",
-          },
-          "qualityProfiles": Array [
-            Object {
-              "deleted": false,
-              "key": "my-qp",
-              "language": "ts",
-              "name": "Sonar way",
-            },
-          ],
-          "tags": Array [],
-        }
-      }
-      isNewCodeTab={false}
-      key="SECURITY_HOTSPOT"
-      measures={
-        Array [
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "coverage",
-              "key": "coverage",
-              "name": "Coverage",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "new_coverage",
-              "key": "new_coverage",
-              "name": "New_coverage",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "bugs",
-              "key": "bugs",
-              "name": "Bugs",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "new_bugs",
-              "key": "new_bugs",
-              "name": "New_bugs",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-        ]
-      }
-      type="SECURITY_HOTSPOT"
-    />
-    <MeasuresPanelIssueMeasureRow
-      branchLike={
-        Object {
-          "analysisDate": "2018-01-01",
-          "excludedFromPurge": true,
-          "isMain": true,
-          "name": "master",
-        }
-      }
-      component={
-        Object {
-          "breadcrumbs": Array [],
-          "key": "my-project",
-          "name": "MyProject",
-          "qualifier": "APP",
-          "qualityGate": Object {
-            "isDefault": true,
-            "key": "30",
-            "name": "Sonar way",
-          },
-          "qualityProfiles": Array [
-            Object {
-              "deleted": false,
-              "key": "my-qp",
-              "language": "ts",
-              "name": "Sonar way",
-            },
-          ],
-          "tags": Array [],
-        }
-      }
-      isNewCodeTab={false}
-      key="CODE_SMELL"
-      measures={
-        Array [
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "coverage",
-              "key": "coverage",
-              "name": "Coverage",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "new_coverage",
-              "key": "new_coverage",
-              "name": "New_coverage",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "bugs",
-              "key": "bugs",
-              "name": "Bugs",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "new_bugs",
-              "key": "new_bugs",
-              "name": "New_bugs",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-        ]
-      }
-      type="CODE_SMELL"
-    />
-    <div
-      className="display-flex-row overview-measures-row"
-    >
-      <div
-        className="overview-panel-huge-padded flex-1 bordered-right display-flex-center"
-        data-test="overview__measures-coverage"
-      >
-        <MeasurementLabel
-          branchLike={
-            Object {
-              "analysisDate": "2018-01-01",
-              "excludedFromPurge": true,
-              "isMain": true,
-              "name": "master",
-            }
-          }
-          centered={false}
-          component={
-            Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "qualifier": "APP",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
-              },
-              "qualityProfiles": Array [
-                Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
-                  "name": "Sonar way",
-                },
-              ],
-              "tags": Array [],
-            }
-          }
-          measures={
-            Array [
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "coverage",
-                  "key": "coverage",
-                  "name": "Coverage",
-                  "type": "PERCENT",
-                },
-                "period": Object {
-                  "bestValue": true,
-                  "index": 1,
-                  "value": "1.0",
-                },
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_coverage",
-                  "key": "new_coverage",
-                  "name": "New_coverage",
-                  "type": "PERCENT",
-                },
-                "period": Object {
-                  "bestValue": true,
-                  "index": 1,
-                  "value": "1.0",
-                },
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "bugs",
-                  "key": "bugs",
-                  "name": "Bugs",
-                  "type": "PERCENT",
-                },
-                "period": Object {
-                  "bestValue": true,
-                  "index": 1,
-                  "value": "1.0",
-                },
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_bugs",
-                  "key": "new_bugs",
-                  "name": "New_bugs",
-                  "type": "PERCENT",
-                },
-                "period": Object {
-                  "bestValue": true,
-                  "index": 1,
-                  "value": "1.0",
-                },
-                "value": "1.0",
-              },
-            ]
-          }
-          type="COVERAGE"
-          useDiffMetric={false}
-        />
-        <div
-          className="huge-spacer-left"
-        >
-          <DrilldownMeasureValue
-            branchLike={
-              Object {
-                "analysisDate": "2018-01-01",
-                "excludedFromPurge": true,
-                "isMain": true,
-                "name": "master",
-              }
-            }
-            component={
-              Object {
-                "breadcrumbs": Array [],
-                "key": "my-project",
-                "name": "MyProject",
-                "qualifier": "APP",
-                "qualityGate": Object {
-                  "isDefault": true,
-                  "key": "30",
-                  "name": "Sonar way",
-                },
-                "qualityProfiles": Array [
-                  Object {
-                    "deleted": false,
-                    "key": "my-qp",
-                    "language": "ts",
-                    "name": "Sonar way",
-                  },
-                ],
-                "tags": Array [],
-              }
-            }
-            measures={
-              Array [
-                Object {
-                  "bestValue": true,
-                  "leak": "1",
-                  "metric": Object {
-                    "id": "coverage",
-                    "key": "coverage",
-                    "name": "Coverage",
-                    "type": "PERCENT",
-                  },
-                  "period": Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                  "value": "1.0",
-                },
-                Object {
-                  "bestValue": true,
-                  "leak": "1",
-                  "metric": Object {
-                    "id": "new_coverage",
-                    "key": "new_coverage",
-                    "name": "New_coverage",
-                    "type": "PERCENT",
-                  },
-                  "period": Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                  "value": "1.0",
-                },
-                Object {
-                  "bestValue": true,
-                  "leak": "1",
-                  "metric": Object {
-                    "id": "bugs",
-                    "key": "bugs",
-                    "name": "Bugs",
-                    "type": "PERCENT",
-                  },
-                  "period": Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                  "value": "1.0",
-                },
-                Object {
-                  "bestValue": true,
-                  "leak": "1",
-                  "metric": Object {
-                    "id": "new_bugs",
-                    "key": "new_bugs",
-                    "name": "New_bugs",
-                    "type": "PERCENT",
-                  },
-                  "period": Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                  "value": "1.0",
-                },
-              ]
-            }
-            metric="tests"
-          />
-        </div>
-      </div>
-      <div
-        className="overview-panel-huge-padded flex-1 display-flex-center"
-      >
-        <MeasurementLabel
-          branchLike={
-            Object {
-              "analysisDate": "2018-01-01",
-              "excludedFromPurge": true,
-              "isMain": true,
-              "name": "master",
-            }
-          }
-          centered={false}
-          component={
-            Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "qualifier": "APP",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
-              },
-              "qualityProfiles": Array [
-                Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
-                  "name": "Sonar way",
-                },
-              ],
-              "tags": Array [],
-            }
-          }
-          measures={
-            Array [
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "coverage",
-                  "key": "coverage",
-                  "name": "Coverage",
-                  "type": "PERCENT",
-                },
-                "period": Object {
-                  "bestValue": true,
-                  "index": 1,
-                  "value": "1.0",
-                },
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_coverage",
-                  "key": "new_coverage",
-                  "name": "New_coverage",
-                  "type": "PERCENT",
-                },
-                "period": Object {
-                  "bestValue": true,
-                  "index": 1,
-                  "value": "1.0",
-                },
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "bugs",
-                  "key": "bugs",
-                  "name": "Bugs",
-                  "type": "PERCENT",
-                },
-                "period": Object {
-                  "bestValue": true,
-                  "index": 1,
-                  "value": "1.0",
-                },
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_bugs",
-                  "key": "new_bugs",
-                  "name": "New_bugs",
-                  "type": "PERCENT",
-                },
-                "period": Object {
-                  "bestValue": true,
-                  "index": 1,
-                  "value": "1.0",
-                },
-                "value": "1.0",
-              },
-            ]
-          }
-          type="DUPLICATION"
-          useDiffMetric={false}
-        />
-        <div
-          className="huge-spacer-left"
-        >
-          <DrilldownMeasureValue
-            branchLike={
-              Object {
-                "analysisDate": "2018-01-01",
-                "excludedFromPurge": true,
-                "isMain": true,
-                "name": "master",
-              }
-            }
-            component={
-              Object {
-                "breadcrumbs": Array [],
-                "key": "my-project",
-                "name": "MyProject",
-                "qualifier": "APP",
-                "qualityGate": Object {
-                  "isDefault": true,
-                  "key": "30",
-                  "name": "Sonar way",
-                },
-                "qualityProfiles": Array [
-                  Object {
-                    "deleted": false,
-                    "key": "my-qp",
-                    "language": "ts",
-                    "name": "Sonar way",
-                  },
-                ],
-                "tags": Array [],
-              }
-            }
-            measures={
-              Array [
-                Object {
-                  "bestValue": true,
-                  "leak": "1",
-                  "metric": Object {
-                    "id": "coverage",
-                    "key": "coverage",
-                    "name": "Coverage",
-                    "type": "PERCENT",
-                  },
-                  "period": Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                  "value": "1.0",
-                },
-                Object {
-                  "bestValue": true,
-                  "leak": "1",
-                  "metric": Object {
-                    "id": "new_coverage",
-                    "key": "new_coverage",
-                    "name": "New_coverage",
-                    "type": "PERCENT",
-                  },
-                  "period": Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                  "value": "1.0",
-                },
-                Object {
-                  "bestValue": true,
-                  "leak": "1",
-                  "metric": Object {
-                    "id": "bugs",
-                    "key": "bugs",
-                    "name": "Bugs",
-                    "type": "PERCENT",
-                  },
-                  "period": Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                  "value": "1.0",
-                },
-                Object {
-                  "bestValue": true,
-                  "leak": "1",
-                  "metric": Object {
-                    "id": "new_bugs",
-                    "key": "new_bugs",
-                    "name": "New_bugs",
-                    "type": "PERCENT",
-                  },
-                  "period": Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                  "value": "1.0",
-                },
-              ]
-            }
-            metric="duplicated_blocks"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
+  }
+  location={
+    Object {
+      "action": "PUSH",
+      "hash": "",
+      "key": "key",
+      "pathname": "/path",
+      "query": Object {},
+      "search": "",
+      "state": Object {},
+    }
+  }
+  measures={
+    Array [
+      Object {
+        "bestValue": true,
+        "leak": "1",
+        "metric": Object {
+          "id": "coverage",
+          "key": "coverage",
+          "name": "Coverage",
+          "type": "PERCENT",
+        },
+        "period": Object {
+          "bestValue": true,
+          "index": 1,
+          "value": "1.0",
+        },
+        "value": "1.0",
+      },
+      Object {
+        "bestValue": true,
+        "leak": "1",
+        "metric": Object {
+          "id": "new_coverage",
+          "key": "new_coverage",
+          "name": "New_coverage",
+          "type": "PERCENT",
+        },
+        "period": Object {
+          "bestValue": true,
+          "index": 1,
+          "value": "1.0",
+        },
+        "value": "1.0",
+      },
+      Object {
+        "bestValue": true,
+        "leak": "1",
+        "metric": Object {
+          "id": "bugs",
+          "key": "bugs",
+          "name": "Bugs",
+          "type": "PERCENT",
+        },
+        "period": Object {
+          "bestValue": true,
+          "index": 1,
+          "value": "1.0",
+        },
+        "value": "1.0",
+      },
+      Object {
+        "bestValue": true,
+        "leak": "1",
+        "metric": Object {
+          "id": "new_bugs",
+          "key": "new_bugs",
+          "name": "New_bugs",
+          "type": "PERCENT",
+        },
+        "period": Object {
+          "bestValue": true,
+          "index": 1,
+          "value": "1.0",
+        },
+        "value": "1.0",
+      },
+    ]
+  }
+/>
 `;
 
 exports[`should render correctly for projects 1`] = `
-<div
-  className="overview-panel"
-  data-test="overview__measures-panel"
->
-  <div
-    className="display-flex-space-between display-flex-start"
-  >
-    <h2
-      className="overview-panel-title"
-    >
-      overview.measures
-    </h2>
-    <withCurrentUserContext(withAppStateContext(ComponentReportActions))
-      branch={
-        Object {
-          "analysisDate": "2018-01-01",
-          "excludedFromPurge": true,
-          "isMain": true,
-          "name": "master",
-        }
-      }
-      component={
-        Object {
-          "breadcrumbs": Array [],
-          "key": "my-project",
-          "name": "MyProject",
-          "qualifier": "TRK",
-          "qualityGate": Object {
-            "isDefault": true,
-            "key": "30",
-            "name": "Sonar way",
-          },
-          "qualityProfiles": Array [
-            Object {
-              "deleted": false,
-              "key": "my-qp",
-              "language": "ts",
-              "name": "Sonar way",
-            },
-          ],
-          "tags": Array [],
-        }
-      }
-    />
-  </div>
-  <BoxedTabs
-    onSelect={[Function]}
-    selected={0}
-    tabs={
-      Array [
-        Object {
-          "key": 0,
-          "label": <div
-            className="text-left overview-measures-tab"
-          >
-            <span
-              className="text-bold"
-            >
-              overview.new_code
-            </span>
-          </div>,
-        },
-        Object {
-          "key": 1,
-          "label": <div
-            className="text-left overview-measures-tab"
-          >
-            <span
-              className="text-bold"
-              style={
-                Object {
-                  "position": "absolute",
-                  "top": 16,
-                }
-              }
-            >
-              overview.overall_code
-            </span>
-          </div>,
+<Memo(MeasuresPanel)
+  branch={
+    Object {
+      "analysisDate": "2018-01-01",
+      "excludedFromPurge": true,
+      "isMain": true,
+      "name": "master",
+    }
+  }
+  component={
+    Object {
+      "breadcrumbs": Array [],
+      "key": "my-project",
+      "name": "MyProject",
+      "qualifier": "TRK",
+      "qualityGate": Object {
+        "isDefault": true,
+        "key": "30",
+        "name": "Sonar way",
+      },
+      "qualityProfiles": Array [
+        Object {
+          "deleted": false,
+          "key": "my-qp",
+          "language": "ts",
+          "name": "Sonar way",
         },
-      ]
+      ],
+      "tags": Array [],
     }
-  />
-  <div
-    className="overview-panel-content flex-1 bordered"
-  >
-    <MeasuresPanelIssueMeasureRow
-      branchLike={
-        Object {
-          "analysisDate": "2018-01-01",
-          "excludedFromPurge": true,
-          "isMain": true,
-          "name": "master",
-        }
-      }
-      component={
-        Object {
-          "breadcrumbs": Array [],
-          "key": "my-project",
-          "name": "MyProject",
-          "qualifier": "TRK",
-          "qualityGate": Object {
-            "isDefault": true,
-            "key": "30",
-            "name": "Sonar way",
-          },
-          "qualityProfiles": Array [
-            Object {
-              "deleted": false,
-              "key": "my-qp",
-              "language": "ts",
-              "name": "Sonar way",
-            },
-          ],
-          "tags": Array [],
-        }
-      }
-      isNewCodeTab={true}
-      key="BUG"
-      measures={
-        Array [
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "coverage",
-              "key": "coverage",
-              "name": "Coverage",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "new_coverage",
-              "key": "new_coverage",
-              "name": "New_coverage",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "bugs",
-              "key": "bugs",
-              "name": "Bugs",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "new_bugs",
-              "key": "new_bugs",
-              "name": "New_bugs",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-        ]
-      }
-      type="BUG"
-    />
-    <MeasuresPanelIssueMeasureRow
-      branchLike={
-        Object {
-          "analysisDate": "2018-01-01",
-          "excludedFromPurge": true,
-          "isMain": true,
-          "name": "master",
-        }
-      }
-      component={
-        Object {
-          "breadcrumbs": Array [],
-          "key": "my-project",
-          "name": "MyProject",
-          "qualifier": "TRK",
-          "qualityGate": Object {
-            "isDefault": true,
-            "key": "30",
-            "name": "Sonar way",
-          },
-          "qualityProfiles": Array [
-            Object {
-              "deleted": false,
-              "key": "my-qp",
-              "language": "ts",
-              "name": "Sonar way",
-            },
-          ],
-          "tags": Array [],
-        }
-      }
-      isNewCodeTab={true}
-      key="VULNERABILITY"
-      measures={
-        Array [
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "coverage",
-              "key": "coverage",
-              "name": "Coverage",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "new_coverage",
-              "key": "new_coverage",
-              "name": "New_coverage",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "bugs",
-              "key": "bugs",
-              "name": "Bugs",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "new_bugs",
-              "key": "new_bugs",
-              "name": "New_bugs",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-        ]
-      }
-      type="VULNERABILITY"
-    />
-    <MeasuresPanelIssueMeasureRow
-      branchLike={
-        Object {
-          "analysisDate": "2018-01-01",
-          "excludedFromPurge": true,
-          "isMain": true,
-          "name": "master",
-        }
-      }
-      component={
-        Object {
-          "breadcrumbs": Array [],
-          "key": "my-project",
-          "name": "MyProject",
-          "qualifier": "TRK",
-          "qualityGate": Object {
-            "isDefault": true,
-            "key": "30",
-            "name": "Sonar way",
-          },
-          "qualityProfiles": Array [
-            Object {
-              "deleted": false,
-              "key": "my-qp",
-              "language": "ts",
-              "name": "Sonar way",
-            },
-          ],
-          "tags": Array [],
-        }
-      }
-      isNewCodeTab={true}
-      key="SECURITY_HOTSPOT"
-      measures={
-        Array [
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "coverage",
-              "key": "coverage",
-              "name": "Coverage",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "new_coverage",
-              "key": "new_coverage",
-              "name": "New_coverage",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "bugs",
-              "key": "bugs",
-              "name": "Bugs",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "new_bugs",
-              "key": "new_bugs",
-              "name": "New_bugs",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-        ]
-      }
-      type="SECURITY_HOTSPOT"
-    />
-    <MeasuresPanelIssueMeasureRow
-      branchLike={
-        Object {
-          "analysisDate": "2018-01-01",
-          "excludedFromPurge": true,
-          "isMain": true,
-          "name": "master",
-        }
-      }
-      component={
-        Object {
-          "breadcrumbs": Array [],
-          "key": "my-project",
-          "name": "MyProject",
-          "qualifier": "TRK",
-          "qualityGate": Object {
-            "isDefault": true,
-            "key": "30",
-            "name": "Sonar way",
-          },
-          "qualityProfiles": Array [
-            Object {
-              "deleted": false,
-              "key": "my-qp",
-              "language": "ts",
-              "name": "Sonar way",
-            },
-          ],
-          "tags": Array [],
-        }
-      }
-      isNewCodeTab={true}
-      key="CODE_SMELL"
-      measures={
-        Array [
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "coverage",
-              "key": "coverage",
-              "name": "Coverage",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "new_coverage",
-              "key": "new_coverage",
-              "name": "New_coverage",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "bugs",
-              "key": "bugs",
-              "name": "Bugs",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "new_bugs",
-              "key": "new_bugs",
-              "name": "New_bugs",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-        ]
-      }
-      type="CODE_SMELL"
-    />
-    <div
-      className="display-flex-row overview-measures-row"
-    >
-      <div
-        className="overview-panel-huge-padded flex-1 bordered-right display-flex-center"
-        data-test="overview__measures-coverage"
-      >
-        <MeasurementLabel
-          branchLike={
-            Object {
-              "analysisDate": "2018-01-01",
-              "excludedFromPurge": true,
-              "isMain": true,
-              "name": "master",
-            }
-          }
-          centered={true}
-          component={
-            Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "qualifier": "TRK",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
-              },
-              "qualityProfiles": Array [
-                Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
-                  "name": "Sonar way",
-                },
-              ],
-              "tags": Array [],
-            }
-          }
-          measures={
-            Array [
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "coverage",
-                  "key": "coverage",
-                  "name": "Coverage",
-                  "type": "PERCENT",
-                },
-                "period": Object {
-                  "bestValue": true,
-                  "index": 1,
-                  "value": "1.0",
-                },
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_coverage",
-                  "key": "new_coverage",
-                  "name": "New_coverage",
-                  "type": "PERCENT",
-                },
-                "period": Object {
-                  "bestValue": true,
-                  "index": 1,
-                  "value": "1.0",
-                },
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "bugs",
-                  "key": "bugs",
-                  "name": "Bugs",
-                  "type": "PERCENT",
-                },
-                "period": Object {
-                  "bestValue": true,
-                  "index": 1,
-                  "value": "1.0",
-                },
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_bugs",
-                  "key": "new_bugs",
-                  "name": "New_bugs",
-                  "type": "PERCENT",
-                },
-                "period": Object {
-                  "bestValue": true,
-                  "index": 1,
-                  "value": "1.0",
-                },
-                "value": "1.0",
-              },
-            ]
-          }
-          type="COVERAGE"
-          useDiffMetric={true}
-        />
-      </div>
-      <div
-        className="overview-panel-huge-padded flex-1 display-flex-center"
-      >
-        <MeasurementLabel
-          branchLike={
-            Object {
-              "analysisDate": "2018-01-01",
-              "excludedFromPurge": true,
-              "isMain": true,
-              "name": "master",
-            }
-          }
-          centered={true}
-          component={
-            Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "qualifier": "TRK",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
-              },
-              "qualityProfiles": Array [
-                Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
-                  "name": "Sonar way",
-                },
-              ],
-              "tags": Array [],
-            }
-          }
-          measures={
-            Array [
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "coverage",
-                  "key": "coverage",
-                  "name": "Coverage",
-                  "type": "PERCENT",
-                },
-                "period": Object {
-                  "bestValue": true,
-                  "index": 1,
-                  "value": "1.0",
-                },
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_coverage",
-                  "key": "new_coverage",
-                  "name": "New_coverage",
-                  "type": "PERCENT",
-                },
-                "period": Object {
-                  "bestValue": true,
-                  "index": 1,
-                  "value": "1.0",
-                },
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "bugs",
-                  "key": "bugs",
-                  "name": "Bugs",
-                  "type": "PERCENT",
-                },
-                "period": Object {
-                  "bestValue": true,
-                  "index": 1,
-                  "value": "1.0",
-                },
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_bugs",
-                  "key": "new_bugs",
-                  "name": "New_bugs",
-                  "type": "PERCENT",
-                },
-                "period": Object {
-                  "bestValue": true,
-                  "index": 1,
-                  "value": "1.0",
-                },
-                "value": "1.0",
-              },
-            ]
-          }
-          type="DUPLICATION"
-          useDiffMetric={true}
-        />
-      </div>
-    </div>
-  </div>
-</div>
+  }
+  location={
+    Object {
+      "action": "PUSH",
+      "hash": "",
+      "key": "key",
+      "pathname": "/path",
+      "query": Object {},
+      "search": "",
+      "state": Object {},
+    }
+  }
+  measures={
+    Array [
+      Object {
+        "bestValue": true,
+        "leak": "1",
+        "metric": Object {
+          "id": "coverage",
+          "key": "coverage",
+          "name": "Coverage",
+          "type": "PERCENT",
+        },
+        "period": Object {
+          "bestValue": true,
+          "index": 1,
+          "value": "1.0",
+        },
+        "value": "1.0",
+      },
+      Object {
+        "bestValue": true,
+        "leak": "1",
+        "metric": Object {
+          "id": "new_coverage",
+          "key": "new_coverage",
+          "name": "New_coverage",
+          "type": "PERCENT",
+        },
+        "period": Object {
+          "bestValue": true,
+          "index": 1,
+          "value": "1.0",
+        },
+        "value": "1.0",
+      },
+      Object {
+        "bestValue": true,
+        "leak": "1",
+        "metric": Object {
+          "id": "bugs",
+          "key": "bugs",
+          "name": "Bugs",
+          "type": "PERCENT",
+        },
+        "period": Object {
+          "bestValue": true,
+          "index": 1,
+          "value": "1.0",
+        },
+        "value": "1.0",
+      },
+      Object {
+        "bestValue": true,
+        "leak": "1",
+        "metric": Object {
+          "id": "new_bugs",
+          "key": "new_bugs",
+          "name": "New_bugs",
+          "type": "PERCENT",
+        },
+        "period": Object {
+          "bestValue": true,
+          "index": 1,
+          "value": "1.0",
+        },
+        "value": "1.0",
+      },
+    ]
+  }
+/>
 `;
 
 exports[`should render correctly for projects 2`] = `
-<div
-  className="overview-panel"
-  data-test="overview__measures-panel"
->
-  <div
-    className="display-flex-space-between display-flex-start"
-  >
-    <h2
-      className="overview-panel-title"
-    >
-      overview.measures
-    </h2>
-    <withCurrentUserContext(withAppStateContext(ComponentReportActions))
-      branch={
-        Object {
-          "analysisDate": "2018-01-01",
-          "excludedFromPurge": true,
-          "isMain": true,
-          "name": "master",
-        }
-      }
-      component={
-        Object {
-          "breadcrumbs": Array [],
-          "key": "my-project",
-          "name": "MyProject",
-          "qualifier": "TRK",
-          "qualityGate": Object {
-            "isDefault": true,
-            "key": "30",
-            "name": "Sonar way",
-          },
-          "qualityProfiles": Array [
-            Object {
-              "deleted": false,
-              "key": "my-qp",
-              "language": "ts",
-              "name": "Sonar way",
-            },
-          ],
-          "tags": Array [],
-        }
-      }
-    />
-  </div>
-  <BoxedTabs
-    onSelect={[Function]}
-    selected={1}
-    tabs={
-      Array [
-        Object {
-          "key": 0,
-          "label": <div
-            className="text-left overview-measures-tab"
-          >
-            <span
-              className="text-bold"
-            >
-              overview.new_code
-            </span>
-          </div>,
-        },
-        Object {
-          "key": 1,
-          "label": <div
-            className="text-left overview-measures-tab"
-          >
-            <span
-              className="text-bold"
-              style={
-                Object {
-                  "position": "absolute",
-                  "top": 16,
-                }
-              }
-            >
-              overview.overall_code
-            </span>
-          </div>,
+<Memo(MeasuresPanel)
+  branch={
+    Object {
+      "analysisDate": "2018-01-01",
+      "excludedFromPurge": true,
+      "isMain": true,
+      "name": "master",
+    }
+  }
+  component={
+    Object {
+      "breadcrumbs": Array [],
+      "key": "my-project",
+      "name": "MyProject",
+      "qualifier": "TRK",
+      "qualityGate": Object {
+        "isDefault": true,
+        "key": "30",
+        "name": "Sonar way",
+      },
+      "qualityProfiles": Array [
+        Object {
+          "deleted": false,
+          "key": "my-qp",
+          "language": "ts",
+          "name": "Sonar way",
         },
-      ]
+      ],
+      "tags": Array [],
     }
-  />
-  <div
-    className="overview-panel-content flex-1 bordered"
-  >
-    <MeasuresPanelIssueMeasureRow
-      branchLike={
-        Object {
-          "analysisDate": "2018-01-01",
-          "excludedFromPurge": true,
-          "isMain": true,
-          "name": "master",
-        }
-      }
-      component={
-        Object {
-          "breadcrumbs": Array [],
-          "key": "my-project",
-          "name": "MyProject",
-          "qualifier": "TRK",
-          "qualityGate": Object {
-            "isDefault": true,
-            "key": "30",
-            "name": "Sonar way",
-          },
-          "qualityProfiles": Array [
-            Object {
-              "deleted": false,
-              "key": "my-qp",
-              "language": "ts",
-              "name": "Sonar way",
-            },
-          ],
-          "tags": Array [],
-        }
-      }
-      isNewCodeTab={false}
-      key="BUG"
-      measures={
-        Array [
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "coverage",
-              "key": "coverage",
-              "name": "Coverage",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "new_coverage",
-              "key": "new_coverage",
-              "name": "New_coverage",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "bugs",
-              "key": "bugs",
-              "name": "Bugs",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "new_bugs",
-              "key": "new_bugs",
-              "name": "New_bugs",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-        ]
-      }
-      type="BUG"
-    />
-    <MeasuresPanelIssueMeasureRow
-      branchLike={
-        Object {
-          "analysisDate": "2018-01-01",
-          "excludedFromPurge": true,
-          "isMain": true,
-          "name": "master",
-        }
-      }
-      component={
-        Object {
-          "breadcrumbs": Array [],
-          "key": "my-project",
-          "name": "MyProject",
-          "qualifier": "TRK",
-          "qualityGate": Object {
-            "isDefault": true,
-            "key": "30",
-            "name": "Sonar way",
-          },
-          "qualityProfiles": Array [
-            Object {
-              "deleted": false,
-              "key": "my-qp",
-              "language": "ts",
-              "name": "Sonar way",
-            },
-          ],
-          "tags": Array [],
-        }
-      }
-      isNewCodeTab={false}
-      key="VULNERABILITY"
-      measures={
-        Array [
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "coverage",
-              "key": "coverage",
-              "name": "Coverage",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "new_coverage",
-              "key": "new_coverage",
-              "name": "New_coverage",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "bugs",
-              "key": "bugs",
-              "name": "Bugs",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "new_bugs",
-              "key": "new_bugs",
-              "name": "New_bugs",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-        ]
-      }
-      type="VULNERABILITY"
-    />
-    <MeasuresPanelIssueMeasureRow
-      branchLike={
-        Object {
-          "analysisDate": "2018-01-01",
-          "excludedFromPurge": true,
-          "isMain": true,
-          "name": "master",
-        }
-      }
-      component={
-        Object {
-          "breadcrumbs": Array [],
-          "key": "my-project",
-          "name": "MyProject",
-          "qualifier": "TRK",
-          "qualityGate": Object {
-            "isDefault": true,
-            "key": "30",
-            "name": "Sonar way",
-          },
-          "qualityProfiles": Array [
-            Object {
-              "deleted": false,
-              "key": "my-qp",
-              "language": "ts",
-              "name": "Sonar way",
-            },
-          ],
-          "tags": Array [],
-        }
-      }
-      isNewCodeTab={false}
-      key="SECURITY_HOTSPOT"
-      measures={
-        Array [
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "coverage",
-              "key": "coverage",
-              "name": "Coverage",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "new_coverage",
-              "key": "new_coverage",
-              "name": "New_coverage",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "bugs",
-              "key": "bugs",
-              "name": "Bugs",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "new_bugs",
-              "key": "new_bugs",
-              "name": "New_bugs",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-        ]
-      }
-      type="SECURITY_HOTSPOT"
-    />
-    <MeasuresPanelIssueMeasureRow
-      branchLike={
-        Object {
-          "analysisDate": "2018-01-01",
-          "excludedFromPurge": true,
-          "isMain": true,
-          "name": "master",
-        }
-      }
-      component={
-        Object {
-          "breadcrumbs": Array [],
-          "key": "my-project",
-          "name": "MyProject",
-          "qualifier": "TRK",
-          "qualityGate": Object {
-            "isDefault": true,
-            "key": "30",
-            "name": "Sonar way",
-          },
-          "qualityProfiles": Array [
-            Object {
-              "deleted": false,
-              "key": "my-qp",
-              "language": "ts",
-              "name": "Sonar way",
-            },
-          ],
-          "tags": Array [],
-        }
-      }
-      isNewCodeTab={false}
-      key="CODE_SMELL"
-      measures={
-        Array [
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "coverage",
-              "key": "coverage",
-              "name": "Coverage",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "new_coverage",
-              "key": "new_coverage",
-              "name": "New_coverage",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "bugs",
-              "key": "bugs",
-              "name": "Bugs",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "new_bugs",
-              "key": "new_bugs",
-              "name": "New_bugs",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-        ]
-      }
-      type="CODE_SMELL"
-    />
-    <div
-      className="display-flex-row overview-measures-row"
-    >
-      <div
-        className="overview-panel-huge-padded flex-1 bordered-right display-flex-center"
-        data-test="overview__measures-coverage"
-      >
-        <MeasurementLabel
-          branchLike={
-            Object {
-              "analysisDate": "2018-01-01",
-              "excludedFromPurge": true,
-              "isMain": true,
-              "name": "master",
-            }
-          }
-          centered={false}
-          component={
-            Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "qualifier": "TRK",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
-              },
-              "qualityProfiles": Array [
-                Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
-                  "name": "Sonar way",
-                },
-              ],
-              "tags": Array [],
-            }
-          }
-          measures={
-            Array [
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "coverage",
-                  "key": "coverage",
-                  "name": "Coverage",
-                  "type": "PERCENT",
-                },
-                "period": Object {
-                  "bestValue": true,
-                  "index": 1,
-                  "value": "1.0",
-                },
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_coverage",
-                  "key": "new_coverage",
-                  "name": "New_coverage",
-                  "type": "PERCENT",
-                },
-                "period": Object {
-                  "bestValue": true,
-                  "index": 1,
-                  "value": "1.0",
-                },
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "bugs",
-                  "key": "bugs",
-                  "name": "Bugs",
-                  "type": "PERCENT",
-                },
-                "period": Object {
-                  "bestValue": true,
-                  "index": 1,
-                  "value": "1.0",
-                },
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_bugs",
-                  "key": "new_bugs",
-                  "name": "New_bugs",
-                  "type": "PERCENT",
-                },
-                "period": Object {
-                  "bestValue": true,
-                  "index": 1,
-                  "value": "1.0",
-                },
-                "value": "1.0",
-              },
-            ]
-          }
-          type="COVERAGE"
-          useDiffMetric={false}
-        />
-        <div
-          className="huge-spacer-left"
-        >
-          <DrilldownMeasureValue
-            branchLike={
-              Object {
-                "analysisDate": "2018-01-01",
-                "excludedFromPurge": true,
-                "isMain": true,
-                "name": "master",
-              }
-            }
-            component={
-              Object {
-                "breadcrumbs": Array [],
-                "key": "my-project",
-                "name": "MyProject",
-                "qualifier": "TRK",
-                "qualityGate": Object {
-                  "isDefault": true,
-                  "key": "30",
-                  "name": "Sonar way",
-                },
-                "qualityProfiles": Array [
-                  Object {
-                    "deleted": false,
-                    "key": "my-qp",
-                    "language": "ts",
-                    "name": "Sonar way",
-                  },
-                ],
-                "tags": Array [],
-              }
-            }
-            measures={
-              Array [
-                Object {
-                  "bestValue": true,
-                  "leak": "1",
-                  "metric": Object {
-                    "id": "coverage",
-                    "key": "coverage",
-                    "name": "Coverage",
-                    "type": "PERCENT",
-                  },
-                  "period": Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                  "value": "1.0",
-                },
-                Object {
-                  "bestValue": true,
-                  "leak": "1",
-                  "metric": Object {
-                    "id": "new_coverage",
-                    "key": "new_coverage",
-                    "name": "New_coverage",
-                    "type": "PERCENT",
-                  },
-                  "period": Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                  "value": "1.0",
-                },
-                Object {
-                  "bestValue": true,
-                  "leak": "1",
-                  "metric": Object {
-                    "id": "bugs",
-                    "key": "bugs",
-                    "name": "Bugs",
-                    "type": "PERCENT",
-                  },
-                  "period": Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                  "value": "1.0",
-                },
-                Object {
-                  "bestValue": true,
-                  "leak": "1",
-                  "metric": Object {
-                    "id": "new_bugs",
-                    "key": "new_bugs",
-                    "name": "New_bugs",
-                    "type": "PERCENT",
-                  },
-                  "period": Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                  "value": "1.0",
-                },
-              ]
-            }
-            metric="tests"
-          />
-        </div>
-      </div>
-      <div
-        className="overview-panel-huge-padded flex-1 display-flex-center"
-      >
-        <MeasurementLabel
-          branchLike={
-            Object {
-              "analysisDate": "2018-01-01",
-              "excludedFromPurge": true,
-              "isMain": true,
-              "name": "master",
-            }
-          }
-          centered={false}
-          component={
-            Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "qualifier": "TRK",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
-              },
-              "qualityProfiles": Array [
-                Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
-                  "name": "Sonar way",
-                },
-              ],
-              "tags": Array [],
-            }
-          }
-          measures={
-            Array [
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "coverage",
-                  "key": "coverage",
-                  "name": "Coverage",
-                  "type": "PERCENT",
-                },
-                "period": Object {
-                  "bestValue": true,
-                  "index": 1,
-                  "value": "1.0",
-                },
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_coverage",
-                  "key": "new_coverage",
-                  "name": "New_coverage",
-                  "type": "PERCENT",
-                },
-                "period": Object {
-                  "bestValue": true,
-                  "index": 1,
-                  "value": "1.0",
-                },
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "bugs",
-                  "key": "bugs",
-                  "name": "Bugs",
-                  "type": "PERCENT",
-                },
-                "period": Object {
-                  "bestValue": true,
-                  "index": 1,
-                  "value": "1.0",
-                },
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_bugs",
-                  "key": "new_bugs",
-                  "name": "New_bugs",
-                  "type": "PERCENT",
-                },
-                "period": Object {
-                  "bestValue": true,
-                  "index": 1,
-                  "value": "1.0",
-                },
-                "value": "1.0",
-              },
-            ]
-          }
-          type="DUPLICATION"
-          useDiffMetric={false}
-        />
-        <div
-          className="huge-spacer-left"
-        >
-          <DrilldownMeasureValue
-            branchLike={
-              Object {
-                "analysisDate": "2018-01-01",
-                "excludedFromPurge": true,
-                "isMain": true,
-                "name": "master",
-              }
-            }
-            component={
-              Object {
-                "breadcrumbs": Array [],
-                "key": "my-project",
-                "name": "MyProject",
-                "qualifier": "TRK",
-                "qualityGate": Object {
-                  "isDefault": true,
-                  "key": "30",
-                  "name": "Sonar way",
-                },
-                "qualityProfiles": Array [
-                  Object {
-                    "deleted": false,
-                    "key": "my-qp",
-                    "language": "ts",
-                    "name": "Sonar way",
-                  },
-                ],
-                "tags": Array [],
-              }
-            }
-            measures={
-              Array [
-                Object {
-                  "bestValue": true,
-                  "leak": "1",
-                  "metric": Object {
-                    "id": "coverage",
-                    "key": "coverage",
-                    "name": "Coverage",
-                    "type": "PERCENT",
-                  },
-                  "period": Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                  "value": "1.0",
-                },
-                Object {
-                  "bestValue": true,
-                  "leak": "1",
-                  "metric": Object {
-                    "id": "new_coverage",
-                    "key": "new_coverage",
-                    "name": "New_coverage",
-                    "type": "PERCENT",
-                  },
-                  "period": Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                  "value": "1.0",
-                },
-                Object {
-                  "bestValue": true,
-                  "leak": "1",
-                  "metric": Object {
-                    "id": "bugs",
-                    "key": "bugs",
-                    "name": "Bugs",
-                    "type": "PERCENT",
-                  },
-                  "period": Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                  "value": "1.0",
-                },
-                Object {
-                  "bestValue": true,
-                  "leak": "1",
-                  "metric": Object {
-                    "id": "new_bugs",
-                    "key": "new_bugs",
-                    "name": "New_bugs",
-                    "type": "PERCENT",
-                  },
-                  "period": Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                  "value": "1.0",
-                },
-              ]
-            }
-            metric="duplicated_blocks"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
+  }
+  location={
+    Object {
+      "action": "PUSH",
+      "hash": "",
+      "key": "key",
+      "pathname": "/path",
+      "query": Object {},
+      "search": "",
+      "state": Object {},
+    }
+  }
+  measures={
+    Array [
+      Object {
+        "bestValue": true,
+        "leak": "1",
+        "metric": Object {
+          "id": "coverage",
+          "key": "coverage",
+          "name": "Coverage",
+          "type": "PERCENT",
+        },
+        "period": Object {
+          "bestValue": true,
+          "index": 1,
+          "value": "1.0",
+        },
+        "value": "1.0",
+      },
+      Object {
+        "bestValue": true,
+        "leak": "1",
+        "metric": Object {
+          "id": "new_coverage",
+          "key": "new_coverage",
+          "name": "New_coverage",
+          "type": "PERCENT",
+        },
+        "period": Object {
+          "bestValue": true,
+          "index": 1,
+          "value": "1.0",
+        },
+        "value": "1.0",
+      },
+      Object {
+        "bestValue": true,
+        "leak": "1",
+        "metric": Object {
+          "id": "bugs",
+          "key": "bugs",
+          "name": "Bugs",
+          "type": "PERCENT",
+        },
+        "period": Object {
+          "bestValue": true,
+          "index": 1,
+          "value": "1.0",
+        },
+        "value": "1.0",
+      },
+      Object {
+        "bestValue": true,
+        "leak": "1",
+        "metric": Object {
+          "id": "new_bugs",
+          "key": "new_bugs",
+          "name": "New_bugs",
+          "type": "PERCENT",
+        },
+        "period": Object {
+          "bestValue": true,
+          "index": 1,
+          "value": "1.0",
+        },
+        "value": "1.0",
+      },
+    ]
+  }
+/>
 `;
 
 exports[`should render correctly if branch is misconfigured: hide settings 1`] = `
-<div
-  className="overview-panel"
-  data-test="overview__measures-panel"
->
-  <div
-    className="display-flex-space-between display-flex-start"
-  >
-    <h2
-      className="overview-panel-title"
-    >
-      overview.measures
-    </h2>
-    <withCurrentUserContext(withAppStateContext(ComponentReportActions))
-      branch={
-        Object {
-          "analysisDate": "2018-01-01",
-          "excludedFromPurge": true,
-          "isMain": false,
-          "name": "own-reference",
-        }
-      }
-      component={
-        Object {
-          "breadcrumbs": Array [],
-          "key": "my-project",
-          "name": "MyProject",
-          "qualifier": "TRK",
-          "qualityGate": Object {
-            "isDefault": true,
-            "key": "30",
-            "name": "Sonar way",
-          },
-          "qualityProfiles": Array [
-            Object {
-              "deleted": false,
-              "key": "my-qp",
-              "language": "ts",
-              "name": "Sonar way",
-            },
-          ],
-          "tags": Array [],
-        }
-      }
-    />
-  </div>
-  <BoxedTabs
-    onSelect={[Function]}
-    selected={0}
-    tabs={
-      Array [
-        Object {
-          "key": 0,
-          "label": <div
-            className="text-left overview-measures-tab"
-          >
-            <span
-              className="text-bold"
-            >
-              overview.new_code
-            </span>
-            <LeakPeriodInfo
-              leakPeriod={
-                Object {
-                  "date": undefined,
-                  "index": 0,
-                  "mode": "REFERENCE_BRANCH",
-                  "parameter": "own-reference",
-                }
-              }
-            />
-          </div>,
+<Memo(MeasuresPanel)
+  branch={
+    Object {
+      "analysisDate": "2018-01-01",
+      "excludedFromPurge": true,
+      "isMain": false,
+      "name": "own-reference",
+    }
+  }
+  component={
+    Object {
+      "breadcrumbs": Array [],
+      "key": "my-project",
+      "name": "MyProject",
+      "qualifier": "TRK",
+      "qualityGate": Object {
+        "isDefault": true,
+        "key": "30",
+        "name": "Sonar way",
+      },
+      "qualityProfiles": Array [
+        Object {
+          "deleted": false,
+          "key": "my-qp",
+          "language": "ts",
+          "name": "Sonar way",
         },
-        Object {
-          "key": 1,
-          "label": <div
-            className="text-left overview-measures-tab"
-          >
-            <span
-              className="text-bold"
-              style={
-                Object {
-                  "position": "absolute",
-                  "top": 16,
-                }
-              }
-            >
-              overview.overall_code
-            </span>
-          </div>,
+      ],
+      "tags": Array [],
+    }
+  }
+  location={
+    Object {
+      "action": "PUSH",
+      "hash": "",
+      "key": "key",
+      "pathname": "/path",
+      "query": Object {},
+      "search": "",
+      "state": Object {},
+    }
+  }
+  measures={
+    Array [
+      Object {
+        "bestValue": true,
+        "leak": "1",
+        "metric": Object {
+          "id": "coverage",
+          "key": "coverage",
+          "name": "Coverage",
+          "type": "PERCENT",
+        },
+        "period": Object {
+          "bestValue": true,
+          "index": 1,
+          "value": "1.0",
+        },
+        "value": "1.0",
+      },
+      Object {
+        "bestValue": true,
+        "leak": "1",
+        "metric": Object {
+          "id": "bugs",
+          "key": "bugs",
+          "name": "Bugs",
+          "type": "PERCENT",
         },
-      ]
+        "period": Object {
+          "bestValue": true,
+          "index": 1,
+          "value": "1.0",
+        },
+        "value": "1.0",
+      },
+    ]
+  }
+  period={
+    Object {
+      "date": undefined,
+      "index": 0,
+      "mode": "REFERENCE_BRANCH",
+      "parameter": "own-reference",
     }
-  />
-  <div
-    className="overview-panel-content flex-1 bordered"
-  >
-    <MeasuresPanelNoNewCode
-      branch={
-        Object {
-          "analysisDate": "2018-01-01",
-          "excludedFromPurge": true,
-          "isMain": false,
-          "name": "own-reference",
-        }
-      }
-      component={
-        Object {
-          "breadcrumbs": Array [],
-          "key": "my-project",
-          "name": "MyProject",
-          "qualifier": "TRK",
-          "qualityGate": Object {
-            "isDefault": true,
-            "key": "30",
-            "name": "Sonar way",
-          },
-          "qualityProfiles": Array [
-            Object {
-              "deleted": false,
-              "key": "my-qp",
-              "language": "ts",
-              "name": "Sonar way",
-            },
-          ],
-          "tags": Array [],
-        }
-      }
-      period={
-        Object {
-          "date": undefined,
-          "index": 0,
-          "mode": "REFERENCE_BRANCH",
-          "parameter": "own-reference",
-        }
-      }
-    />
-  </div>
-</div>
+  }
+/>
 `;
 
 exports[`should render correctly if branch is misconfigured: show settings 1`] = `
-<div
-  className="overview-panel"
-  data-test="overview__measures-panel"
->
-  <div
-    className="display-flex-space-between display-flex-start"
-  >
-    <h2
-      className="overview-panel-title"
-    >
-      overview.measures
-    </h2>
-    <withCurrentUserContext(withAppStateContext(ComponentReportActions))
-      branch={
-        Object {
-          "analysisDate": "2018-01-01",
-          "excludedFromPurge": true,
-          "isMain": false,
-          "name": "own-reference",
-        }
-      }
-      component={
-        Object {
-          "breadcrumbs": Array [],
-          "configuration": Object {
-            "showSettings": true,
-          },
-          "key": "my-project",
-          "name": "MyProject",
-          "qualifier": "TRK",
-          "qualityGate": Object {
-            "isDefault": true,
-            "key": "30",
-            "name": "Sonar way",
-          },
-          "qualityProfiles": Array [
-            Object {
-              "deleted": false,
-              "key": "my-qp",
-              "language": "ts",
-              "name": "Sonar way",
-            },
-          ],
-          "tags": Array [],
-        }
-      }
-    />
-  </div>
-  <BoxedTabs
-    onSelect={[Function]}
-    selected={0}
-    tabs={
-      Array [
-        Object {
-          "key": 0,
-          "label": <div
-            className="text-left overview-measures-tab"
-          >
-            <span
-              className="text-bold"
-            >
-              overview.new_code
-            </span>
-            <LeakPeriodInfo
-              leakPeriod={
-                Object {
-                  "date": undefined,
-                  "index": 0,
-                  "mode": "REFERENCE_BRANCH",
-                  "parameter": "own-reference",
-                }
-              }
-            />
-          </div>,
+<Memo(MeasuresPanel)
+  branch={
+    Object {
+      "analysisDate": "2018-01-01",
+      "excludedFromPurge": true,
+      "isMain": false,
+      "name": "own-reference",
+    }
+  }
+  component={
+    Object {
+      "breadcrumbs": Array [],
+      "configuration": Object {
+        "showSettings": true,
+      },
+      "key": "my-project",
+      "name": "MyProject",
+      "qualifier": "TRK",
+      "qualityGate": Object {
+        "isDefault": true,
+        "key": "30",
+        "name": "Sonar way",
+      },
+      "qualityProfiles": Array [
+        Object {
+          "deleted": false,
+          "key": "my-qp",
+          "language": "ts",
+          "name": "Sonar way",
         },
-        Object {
-          "key": 1,
-          "label": <div
-            className="text-left overview-measures-tab"
-          >
-            <span
-              className="text-bold"
-              style={
-                Object {
-                  "position": "absolute",
-                  "top": 16,
-                }
-              }
-            >
-              overview.overall_code
-            </span>
-          </div>,
+      ],
+      "tags": Array [],
+    }
+  }
+  location={
+    Object {
+      "action": "PUSH",
+      "hash": "",
+      "key": "key",
+      "pathname": "/path",
+      "query": Object {},
+      "search": "",
+      "state": Object {},
+    }
+  }
+  measures={
+    Array [
+      Object {
+        "bestValue": true,
+        "leak": "1",
+        "metric": Object {
+          "id": "coverage",
+          "key": "coverage",
+          "name": "Coverage",
+          "type": "PERCENT",
+        },
+        "period": Object {
+          "bestValue": true,
+          "index": 1,
+          "value": "1.0",
         },
-      ]
+        "value": "1.0",
+      },
+      Object {
+        "bestValue": true,
+        "leak": "1",
+        "metric": Object {
+          "id": "bugs",
+          "key": "bugs",
+          "name": "Bugs",
+          "type": "PERCENT",
+        },
+        "period": Object {
+          "bestValue": true,
+          "index": 1,
+          "value": "1.0",
+        },
+        "value": "1.0",
+      },
+    ]
+  }
+  period={
+    Object {
+      "date": undefined,
+      "index": 0,
+      "mode": "REFERENCE_BRANCH",
+      "parameter": "own-reference",
     }
-  />
-  <div
-    className="overview-panel-content flex-1 bordered"
-  >
-    <MeasuresPanelNoNewCode
-      branch={
-        Object {
-          "analysisDate": "2018-01-01",
-          "excludedFromPurge": true,
-          "isMain": false,
-          "name": "own-reference",
-        }
-      }
-      component={
-        Object {
-          "breadcrumbs": Array [],
-          "configuration": Object {
-            "showSettings": true,
-          },
-          "key": "my-project",
-          "name": "MyProject",
-          "qualifier": "TRK",
-          "qualityGate": Object {
-            "isDefault": true,
-            "key": "30",
-            "name": "Sonar way",
-          },
-          "qualityProfiles": Array [
-            Object {
-              "deleted": false,
-              "key": "my-qp",
-              "language": "ts",
-              "name": "Sonar way",
-            },
-          ],
-          "tags": Array [],
-        }
-      }
-      period={
-        Object {
-          "date": undefined,
-          "index": 0,
-          "mode": "REFERENCE_BRANCH",
-          "parameter": "own-reference",
-        }
-      }
-    />
-  </div>
-</div>
+  }
+/>
 `;
 
 exports[`should render correctly if the data is still loading 1`] = `
-<div
-  className="overview-panel"
-  data-test="overview__measures-panel"
->
-  <div
-    className="display-flex-space-between display-flex-start"
-  >
-    <h2
-      className="overview-panel-title"
-    >
-      overview.measures
-    </h2>
-    <withCurrentUserContext(withAppStateContext(ComponentReportActions))
-      branch={
-        Object {
-          "analysisDate": "2018-01-01",
-          "excludedFromPurge": true,
-          "isMain": true,
-          "name": "master",
-        }
-      }
-      component={
-        Object {
-          "breadcrumbs": Array [],
-          "key": "my-project",
-          "name": "MyProject",
-          "qualifier": "TRK",
-          "qualityGate": Object {
-            "isDefault": true,
-            "key": "30",
-            "name": "Sonar way",
-          },
-          "qualityProfiles": Array [
-            Object {
-              "deleted": false,
-              "key": "my-qp",
-              "language": "ts",
-              "name": "Sonar way",
-            },
-          ],
-          "tags": Array [],
-        }
-      }
-    />
-  </div>
-  <div
-    className="overview-panel-content overview-panel-big-padded"
-  >
-    <DeferredSpinner
-      loading={true}
-    />
-  </div>
-</div>
+<Memo(MeasuresPanel)
+  branch={
+    Object {
+      "analysisDate": "2018-01-01",
+      "excludedFromPurge": true,
+      "isMain": true,
+      "name": "master",
+    }
+  }
+  component={
+    Object {
+      "breadcrumbs": Array [],
+      "key": "my-project",
+      "name": "MyProject",
+      "qualifier": "TRK",
+      "qualityGate": Object {
+        "isDefault": true,
+        "key": "30",
+        "name": "Sonar way",
+      },
+      "qualityProfiles": Array [
+        Object {
+          "deleted": false,
+          "key": "my-qp",
+          "language": "ts",
+          "name": "Sonar way",
+        },
+      ],
+      "tags": Array [],
+    }
+  }
+  loading={true}
+  location={
+    Object {
+      "action": "PUSH",
+      "hash": "",
+      "key": "key",
+      "pathname": "/path",
+      "query": Object {},
+      "search": "",
+      "state": Object {},
+    }
+  }
+  measures={
+    Array [
+      Object {
+        "bestValue": true,
+        "leak": "1",
+        "metric": Object {
+          "id": "coverage",
+          "key": "coverage",
+          "name": "Coverage",
+          "type": "PERCENT",
+        },
+        "period": Object {
+          "bestValue": true,
+          "index": 1,
+          "value": "1.0",
+        },
+        "value": "1.0",
+      },
+      Object {
+        "bestValue": true,
+        "leak": "1",
+        "metric": Object {
+          "id": "new_coverage",
+          "key": "new_coverage",
+          "name": "New_coverage",
+          "type": "PERCENT",
+        },
+        "period": Object {
+          "bestValue": true,
+          "index": 1,
+          "value": "1.0",
+        },
+        "value": "1.0",
+      },
+      Object {
+        "bestValue": true,
+        "leak": "1",
+        "metric": Object {
+          "id": "bugs",
+          "key": "bugs",
+          "name": "Bugs",
+          "type": "PERCENT",
+        },
+        "period": Object {
+          "bestValue": true,
+          "index": 1,
+          "value": "1.0",
+        },
+        "value": "1.0",
+      },
+      Object {
+        "bestValue": true,
+        "leak": "1",
+        "metric": Object {
+          "id": "new_bugs",
+          "key": "new_bugs",
+          "name": "New_bugs",
+          "type": "PERCENT",
+        },
+        "period": Object {
+          "bestValue": true,
+          "index": 1,
+          "value": "1.0",
+        },
+        "value": "1.0",
+      },
+    ]
+  }
+/>
 `;
 
 exports[`should render correctly if there is no coverage 1`] = `
-<div
-  className="overview-panel"
-  data-test="overview__measures-panel"
->
-  <div
-    className="display-flex-space-between display-flex-start"
-  >
-    <h2
-      className="overview-panel-title"
-    >
-      overview.measures
-    </h2>
-    <withCurrentUserContext(withAppStateContext(ComponentReportActions))
-      branch={
-        Object {
-          "analysisDate": "2018-01-01",
-          "excludedFromPurge": true,
-          "isMain": true,
-          "name": "master",
-        }
-      }
-      component={
-        Object {
-          "breadcrumbs": Array [],
-          "key": "my-project",
-          "name": "MyProject",
-          "qualifier": "TRK",
-          "qualityGate": Object {
-            "isDefault": true,
-            "key": "30",
-            "name": "Sonar way",
-          },
-          "qualityProfiles": Array [
-            Object {
-              "deleted": false,
-              "key": "my-qp",
-              "language": "ts",
-              "name": "Sonar way",
-            },
-          ],
-          "tags": Array [],
-        }
-      }
-    />
-  </div>
-  <BoxedTabs
-    onSelect={[Function]}
-    selected={0}
-    tabs={
-      Array [
-        Object {
-          "key": 0,
-          "label": <div
-            className="text-left overview-measures-tab"
-          >
-            <span
-              className="text-bold"
-            >
-              overview.new_code
-            </span>
-          </div>,
-        },
-        Object {
-          "key": 1,
-          "label": <div
-            className="text-left overview-measures-tab"
-          >
-            <span
-              className="text-bold"
-              style={
-                Object {
-                  "position": "absolute",
-                  "top": 16,
-                }
-              }
-            >
-              overview.overall_code
-            </span>
-          </div>,
+<Memo(MeasuresPanel)
+  branch={
+    Object {
+      "analysisDate": "2018-01-01",
+      "excludedFromPurge": true,
+      "isMain": true,
+      "name": "master",
+    }
+  }
+  component={
+    Object {
+      "breadcrumbs": Array [],
+      "key": "my-project",
+      "name": "MyProject",
+      "qualifier": "TRK",
+      "qualityGate": Object {
+        "isDefault": true,
+        "key": "30",
+        "name": "Sonar way",
+      },
+      "qualityProfiles": Array [
+        Object {
+          "deleted": false,
+          "key": "my-qp",
+          "language": "ts",
+          "name": "Sonar way",
         },
-      ]
+      ],
+      "tags": Array [],
     }
-  />
-  <div
-    className="overview-panel-content flex-1 bordered"
-  >
-    <MeasuresPanelIssueMeasureRow
-      branchLike={
-        Object {
-          "analysisDate": "2018-01-01",
-          "excludedFromPurge": true,
-          "isMain": true,
-          "name": "master",
-        }
-      }
-      component={
-        Object {
-          "breadcrumbs": Array [],
-          "key": "my-project",
-          "name": "MyProject",
-          "qualifier": "TRK",
-          "qualityGate": Object {
-            "isDefault": true,
-            "key": "30",
-            "name": "Sonar way",
-          },
-          "qualityProfiles": Array [
-            Object {
-              "deleted": false,
-              "key": "my-qp",
-              "language": "ts",
-              "name": "Sonar way",
-            },
-          ],
-          "tags": Array [],
-        }
-      }
-      isNewCodeTab={true}
-      key="BUG"
-      measures={
-        Array [
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "bugs",
-              "key": "bugs",
-              "name": "Bugs",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "new_bugs",
-              "key": "new_bugs",
-              "name": "New_bugs",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-        ]
-      }
-      type="BUG"
-    />
-    <MeasuresPanelIssueMeasureRow
-      branchLike={
-        Object {
-          "analysisDate": "2018-01-01",
-          "excludedFromPurge": true,
-          "isMain": true,
-          "name": "master",
-        }
-      }
-      component={
-        Object {
-          "breadcrumbs": Array [],
-          "key": "my-project",
-          "name": "MyProject",
-          "qualifier": "TRK",
-          "qualityGate": Object {
-            "isDefault": true,
-            "key": "30",
-            "name": "Sonar way",
-          },
-          "qualityProfiles": Array [
-            Object {
-              "deleted": false,
-              "key": "my-qp",
-              "language": "ts",
-              "name": "Sonar way",
-            },
-          ],
-          "tags": Array [],
-        }
-      }
-      isNewCodeTab={true}
-      key="VULNERABILITY"
-      measures={
-        Array [
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "bugs",
-              "key": "bugs",
-              "name": "Bugs",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "new_bugs",
-              "key": "new_bugs",
-              "name": "New_bugs",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-        ]
-      }
-      type="VULNERABILITY"
-    />
-    <MeasuresPanelIssueMeasureRow
-      branchLike={
-        Object {
-          "analysisDate": "2018-01-01",
-          "excludedFromPurge": true,
-          "isMain": true,
-          "name": "master",
-        }
-      }
-      component={
-        Object {
-          "breadcrumbs": Array [],
-          "key": "my-project",
-          "name": "MyProject",
-          "qualifier": "TRK",
-          "qualityGate": Object {
-            "isDefault": true,
-            "key": "30",
-            "name": "Sonar way",
-          },
-          "qualityProfiles": Array [
-            Object {
-              "deleted": false,
-              "key": "my-qp",
-              "language": "ts",
-              "name": "Sonar way",
-            },
-          ],
-          "tags": Array [],
-        }
-      }
-      isNewCodeTab={true}
-      key="SECURITY_HOTSPOT"
-      measures={
-        Array [
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "bugs",
-              "key": "bugs",
-              "name": "Bugs",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "new_bugs",
-              "key": "new_bugs",
-              "name": "New_bugs",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-        ]
-      }
-      type="SECURITY_HOTSPOT"
-    />
-    <MeasuresPanelIssueMeasureRow
-      branchLike={
-        Object {
-          "analysisDate": "2018-01-01",
-          "excludedFromPurge": true,
-          "isMain": true,
-          "name": "master",
-        }
-      }
-      component={
-        Object {
-          "breadcrumbs": Array [],
-          "key": "my-project",
-          "name": "MyProject",
-          "qualifier": "TRK",
-          "qualityGate": Object {
-            "isDefault": true,
-            "key": "30",
-            "name": "Sonar way",
-          },
-          "qualityProfiles": Array [
-            Object {
-              "deleted": false,
-              "key": "my-qp",
-              "language": "ts",
-              "name": "Sonar way",
-            },
-          ],
-          "tags": Array [],
-        }
-      }
-      isNewCodeTab={true}
-      key="CODE_SMELL"
-      measures={
-        Array [
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "bugs",
-              "key": "bugs",
-              "name": "Bugs",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-          Object {
-            "bestValue": true,
-            "leak": "1",
-            "metric": Object {
-              "id": "new_bugs",
-              "key": "new_bugs",
-              "name": "New_bugs",
-              "type": "PERCENT",
-            },
-            "period": Object {
-              "bestValue": true,
-              "index": 1,
-              "value": "1.0",
-            },
-            "value": "1.0",
-          },
-        ]
-      }
-      type="CODE_SMELL"
-    />
-    <div
-      className="display-flex-row overview-measures-row"
-    >
-      <div
-        className="overview-panel-huge-padded flex-1 display-flex-center"
-      >
-        <MeasurementLabel
-          branchLike={
-            Object {
-              "analysisDate": "2018-01-01",
-              "excludedFromPurge": true,
-              "isMain": true,
-              "name": "master",
-            }
-          }
-          centered={true}
-          component={
-            Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "qualifier": "TRK",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
-              },
-              "qualityProfiles": Array [
-                Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
-                  "name": "Sonar way",
-                },
-              ],
-              "tags": Array [],
-            }
-          }
-          measures={
-            Array [
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "bugs",
-                  "key": "bugs",
-                  "name": "Bugs",
-                  "type": "PERCENT",
-                },
-                "period": Object {
-                  "bestValue": true,
-                  "index": 1,
-                  "value": "1.0",
-                },
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_bugs",
-                  "key": "new_bugs",
-                  "name": "New_bugs",
-                  "type": "PERCENT",
-                },
-                "period": Object {
-                  "bestValue": true,
-                  "index": 1,
-                  "value": "1.0",
-                },
-                "value": "1.0",
-              },
-            ]
-          }
-          type="DUPLICATION"
-          useDiffMetric={true}
-        />
-      </div>
-    </div>
-  </div>
-</div>
+  }
+  location={
+    Object {
+      "action": "PUSH",
+      "hash": "",
+      "key": "key",
+      "pathname": "/path",
+      "query": Object {},
+      "search": "",
+      "state": Object {},
+    }
+  }
+  measures={
+    Array [
+      Object {
+        "bestValue": true,
+        "leak": "1",
+        "metric": Object {
+          "id": "bugs",
+          "key": "bugs",
+          "name": "Bugs",
+          "type": "PERCENT",
+        },
+        "period": Object {
+          "bestValue": true,
+          "index": 1,
+          "value": "1.0",
+        },
+        "value": "1.0",
+      },
+      Object {
+        "bestValue": true,
+        "leak": "1",
+        "metric": Object {
+          "id": "new_bugs",
+          "key": "new_bugs",
+          "name": "New_bugs",
+          "type": "PERCENT",
+        },
+        "period": Object {
+          "bestValue": true,
+          "index": 1,
+          "value": "1.0",
+        },
+        "value": "1.0",
+      },
+    ]
+  }
+/>
 `;
 
 exports[`should render correctly if there is no new code measures 1`] = `
-<div
-  className="overview-panel"
-  data-test="overview__measures-panel"
->
-  <div
-    className="display-flex-space-between display-flex-start"
-  >
-    <h2
-      className="overview-panel-title"
-    >
-      overview.measures
-    </h2>
-    <withCurrentUserContext(withAppStateContext(ComponentReportActions))
-      branch={
-        Object {
-          "analysisDate": "2018-01-01",
-          "excludedFromPurge": true,
-          "isMain": true,
-          "name": "master",
-        }
-      }
-      component={
-        Object {
-          "breadcrumbs": Array [],
-          "key": "my-project",
-          "name": "MyProject",
-          "qualifier": "TRK",
-          "qualityGate": Object {
-            "isDefault": true,
-            "key": "30",
-            "name": "Sonar way",
-          },
-          "qualityProfiles": Array [
-            Object {
-              "deleted": false,
-              "key": "my-qp",
-              "language": "ts",
-              "name": "Sonar way",
-            },
-          ],
-          "tags": Array [],
-        }
-      }
-    />
-  </div>
-  <BoxedTabs
-    onSelect={[Function]}
-    selected={0}
-    tabs={
-      Array [
-        Object {
-          "key": 0,
-          "label": <div
-            className="text-left overview-measures-tab"
-          >
-            <span
-              className="text-bold"
-            >
-              overview.new_code
-            </span>
-          </div>,
+<Memo(MeasuresPanel)
+  branch={
+    Object {
+      "analysisDate": "2018-01-01",
+      "excludedFromPurge": true,
+      "isMain": true,
+      "name": "master",
+    }
+  }
+  component={
+    Object {
+      "breadcrumbs": Array [],
+      "key": "my-project",
+      "name": "MyProject",
+      "qualifier": "TRK",
+      "qualityGate": Object {
+        "isDefault": true,
+        "key": "30",
+        "name": "Sonar way",
+      },
+      "qualityProfiles": Array [
+        Object {
+          "deleted": false,
+          "key": "my-qp",
+          "language": "ts",
+          "name": "Sonar way",
         },
-        Object {
-          "key": 1,
-          "label": <div
-            className="text-left overview-measures-tab"
-          >
-            <span
-              className="text-bold"
-              style={
-                Object {
-                  "position": "absolute",
-                  "top": 16,
-                }
-              }
-            >
-              overview.overall_code
-            </span>
-          </div>,
+      ],
+      "tags": Array [],
+    }
+  }
+  location={
+    Object {
+      "action": "PUSH",
+      "hash": "",
+      "key": "key",
+      "pathname": "/path",
+      "query": Object {},
+      "search": "",
+      "state": Object {},
+    }
+  }
+  measures={
+    Array [
+      Object {
+        "bestValue": true,
+        "leak": "1",
+        "metric": Object {
+          "id": "coverage",
+          "key": "coverage",
+          "name": "Coverage",
+          "type": "PERCENT",
+        },
+        "period": Object {
+          "bestValue": true,
+          "index": 1,
+          "value": "1.0",
+        },
+        "value": "1.0",
+      },
+      Object {
+        "bestValue": true,
+        "leak": "1",
+        "metric": Object {
+          "id": "bugs",
+          "key": "bugs",
+          "name": "Bugs",
+          "type": "PERCENT",
+        },
+        "period": Object {
+          "bestValue": true,
+          "index": 1,
+          "value": "1.0",
         },
-      ]
+        "value": "1.0",
+      },
+    ]
+  }
+/>
+`;
+
+exports[`should render correctly when code scope is new code 1`] = `
+<Memo(MeasuresPanel)
+  branch={
+    Object {
+      "analysisDate": "2018-01-01",
+      "excludedFromPurge": true,
+      "isMain": true,
+      "name": "master",
     }
-  />
-  <div
-    className="overview-panel-content flex-1 bordered"
-  >
-    <MeasuresPanelNoNewCode
-      branch={
-        Object {
-          "analysisDate": "2018-01-01",
-          "excludedFromPurge": true,
-          "isMain": true,
-          "name": "master",
-        }
-      }
-      component={
-        Object {
-          "breadcrumbs": Array [],
-          "key": "my-project",
-          "name": "MyProject",
-          "qualifier": "TRK",
-          "qualityGate": Object {
-            "isDefault": true,
-            "key": "30",
-            "name": "Sonar way",
-          },
-          "qualityProfiles": Array [
-            Object {
-              "deleted": false,
-              "key": "my-qp",
-              "language": "ts",
-              "name": "Sonar way",
-            },
-          ],
-          "tags": Array [],
-        }
-      }
-    />
-  </div>
-</div>
+  }
+  component={
+    Object {
+      "breadcrumbs": Array [],
+      "key": "my-project",
+      "name": "MyProject",
+      "qualifier": "TRK",
+      "qualityGate": Object {
+        "isDefault": true,
+        "key": "30",
+        "name": "Sonar way",
+      },
+      "qualityProfiles": Array [
+        Object {
+          "deleted": false,
+          "key": "my-qp",
+          "language": "ts",
+          "name": "Sonar way",
+        },
+      ],
+      "tags": Array [],
+    }
+  }
+  location={
+    Object {
+      "action": "PUSH",
+      "hash": "",
+      "key": "key",
+      "pathname": "/dashboard",
+      "query": Object {
+        "code_scope": "new",
+      },
+      "search": "",
+      "state": Object {},
+    }
+  }
+  measures={
+    Array [
+      Object {
+        "bestValue": true,
+        "leak": "1",
+        "metric": Object {
+          "id": "coverage",
+          "key": "coverage",
+          "name": "Coverage",
+          "type": "PERCENT",
+        },
+        "period": Object {
+          "bestValue": true,
+          "index": 1,
+          "value": "1.0",
+        },
+        "value": "1.0",
+      },
+      Object {
+        "bestValue": true,
+        "leak": "1",
+        "metric": Object {
+          "id": "new_coverage",
+          "key": "new_coverage",
+          "name": "New_coverage",
+          "type": "PERCENT",
+        },
+        "period": Object {
+          "bestValue": true,
+          "index": 1,
+          "value": "1.0",
+        },
+        "value": "1.0",
+      },
+      Object {
+        "bestValue": true,
+        "leak": "1",
+        "metric": Object {
+          "id": "bugs",
+          "key": "bugs",
+          "name": "Bugs",
+          "type": "PERCENT",
+        },
+        "period": Object {
+          "bestValue": true,
+          "index": 1,
+          "value": "1.0",
+        },
+        "value": "1.0",
+      },
+      Object {
+        "bestValue": true,
+        "leak": "1",
+        "metric": Object {
+          "id": "new_bugs",
+          "key": "new_bugs",
+          "name": "New_bugs",
+          "type": "PERCENT",
+        },
+        "period": Object {
+          "bestValue": true,
+          "index": 1,
+          "value": "1.0",
+        },
+        "value": "1.0",
+      },
+    ]
+  }
+/>
+`;
+
+exports[`should render correctly when code scope is overall code 1`] = `
+<Memo(MeasuresPanel)
+  branch={
+    Object {
+      "analysisDate": "2018-01-01",
+      "excludedFromPurge": true,
+      "isMain": true,
+      "name": "master",
+    }
+  }
+  component={
+    Object {
+      "breadcrumbs": Array [],
+      "key": "my-project",
+      "name": "MyProject",
+      "qualifier": "TRK",
+      "qualityGate": Object {
+        "isDefault": true,
+        "key": "30",
+        "name": "Sonar way",
+      },
+      "qualityProfiles": Array [
+        Object {
+          "deleted": false,
+          "key": "my-qp",
+          "language": "ts",
+          "name": "Sonar way",
+        },
+      ],
+      "tags": Array [],
+    }
+  }
+  location={
+    Object {
+      "action": "PUSH",
+      "hash": "",
+      "key": "key",
+      "pathname": "/dashboard",
+      "query": Object {
+        "code_scope": "overall",
+      },
+      "search": "",
+      "state": Object {},
+    }
+  }
+  measures={
+    Array [
+      Object {
+        "bestValue": true,
+        "leak": "1",
+        "metric": Object {
+          "id": "coverage",
+          "key": "coverage",
+          "name": "Coverage",
+          "type": "PERCENT",
+        },
+        "period": Object {
+          "bestValue": true,
+          "index": 1,
+          "value": "1.0",
+        },
+        "value": "1.0",
+      },
+      Object {
+        "bestValue": true,
+        "leak": "1",
+        "metric": Object {
+          "id": "new_coverage",
+          "key": "new_coverage",
+          "name": "New_coverage",
+          "type": "PERCENT",
+        },
+        "period": Object {
+          "bestValue": true,
+          "index": 1,
+          "value": "1.0",
+        },
+        "value": "1.0",
+      },
+      Object {
+        "bestValue": true,
+        "leak": "1",
+        "metric": Object {
+          "id": "bugs",
+          "key": "bugs",
+          "name": "Bugs",
+          "type": "PERCENT",
+        },
+        "period": Object {
+          "bestValue": true,
+          "index": 1,
+          "value": "1.0",
+        },
+        "value": "1.0",
+      },
+      Object {
+        "bestValue": true,
+        "leak": "1",
+        "metric": Object {
+          "id": "new_bugs",
+          "key": "new_bugs",
+          "name": "New_bugs",
+          "type": "PERCENT",
+        },
+        "period": Object {
+          "bestValue": true,
+          "index": 1,
+          "value": "1.0",
+        },
+        "value": "1.0",
+      },
+    ]
+  }
+/>
 `;
index 7b2c5312589aed14e808e91d1a3bdc9db8184d3d..d3eff6be5fe64e3c15fb5cf40ee1c659a5727232 100644 (file)
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import { Query } from 'history';
+import { memoize } from 'lodash';
 import CoverageRating from '../../components/ui/CoverageRating';
 import DuplicationsRating from '../../components/ui/DuplicationsRating';
 import { ISSUETYPE_METRIC_KEYS_MAP } from '../../helpers/issues';
 import { translate } from '../../helpers/l10n';
+import { parseAsString } from '../../helpers/query';
 import { IssueType } from '../../types/issues';
 import { MetricKey } from '../../types/metrics';
+import { RawQuery } from '../../types/types';
 
 export const METRICS: string[] = [
   // quality gate
@@ -178,3 +182,11 @@ export function getMeasurementLabelKeys(type: MeasurementType, useDiffMetric: bo
     labelKey: MEASUREMENTS_MAP[type].labelKey
   };
 }
+
+export const parseQuery = memoize(
+  (urlQuery: RawQuery): Query => {
+    return {
+      codeScope: parseAsString(urlQuery['code_scope'])
+    };
+  }
+);
index 81cfc0f0fa8d42f89e6ab82004acf9a6b0327b3c..bdcb878c1b37a5b903904ea892feae517e683c96 100644 (file)
@@ -23,6 +23,7 @@ import { IssueType } from '../../types/issues';
 import { SecurityStandard } from '../../types/security';
 import { mockBranch, mockMainBranch, mockPullRequest } from '../mocks/branch-like';
 import {
+  CodeScope,
   convertGithubApiUrlToLink,
   getComponentDrilldownUrl,
   getComponentDrilldownUrlWithSelection,
@@ -130,6 +131,32 @@ describe('#getComponentOverviewUrl', () => {
       query: { id: SIMPLE_COMPONENT_KEY }
     });
   });
+  it('should return correct dashboard url for a project when navigating from new code', () => {
+    expect(
+      getComponentOverviewUrl(
+        SIMPLE_COMPONENT_KEY,
+        ComponentQualifier.Project,
+        undefined,
+        CodeScope.New
+      )
+    ).toEqual({
+      pathname: '/dashboard',
+      query: { id: SIMPLE_COMPONENT_KEY, code_scope: 'new' }
+    });
+  });
+  it('should return correct dashboard url for a project when navigating from overall code', () => {
+    expect(
+      getComponentOverviewUrl(
+        SIMPLE_COMPONENT_KEY,
+        ComponentQualifier.Project,
+        undefined,
+        CodeScope.Overall
+      )
+    ).toEqual({
+      pathname: '/dashboard',
+      query: { id: SIMPLE_COMPONENT_KEY, code_scope: 'overall' }
+    });
+  });
   it('should return a dashboard url for an app', () => {
     expect(getComponentOverviewUrl(SIMPLE_COMPONENT_KEY, ComponentQualifier.Application)).toEqual({
       pathname: '/dashboard',
index 3051feb0f2974f014bc8b013e978cd2562a2ff24..38013879e05cb81556714d327eb4a00f20aad939 100644 (file)
@@ -36,16 +36,26 @@ export interface Location {
   query?: Dict<string | undefined | number>;
 }
 
+export enum CodeScope {
+  Overall = 'overall',
+  New = 'new'
+}
+
+type CodeScopeType = CodeScope.Overall | CodeScope.New;
+
 type Query = Location['query'];
 
+const PROJECT_BASE_URL = '/dashboard';
+
 export function getComponentOverviewUrl(
   componentKey: string,
   componentQualifier: ComponentQualifier | string,
-  branchParameters?: BranchParameters
+  branchParameters?: BranchParameters,
+  codeScope?: CodeScopeType
 ) {
   return isPortfolioLike(componentQualifier)
     ? getPortfolioUrl(componentKey)
-    : getProjectQueryUrl(componentKey, branchParameters);
+    : getProjectQueryUrl(componentKey, branchParameters, codeScope);
 }
 
 export function getComponentAdminUrl(
@@ -61,12 +71,30 @@ export function getComponentAdminUrl(
   }
 }
 
-export function getProjectUrl(project: string, branch?: string): Location {
-  return { pathname: '/dashboard', query: { id: project, branch } };
+export function getProjectUrl(
+  project: string,
+  branch?: string,
+  codeScope?: CodeScopeType
+): Location {
+  return {
+    pathname: PROJECT_BASE_URL,
+    query: { id: project, branch, ...(codeScope && { code_scope: codeScope }) }
+  };
 }
 
-export function getProjectQueryUrl(project: string, branchParameters?: BranchParameters): Location {
-  return { pathname: '/dashboard', query: { id: project, ...branchParameters } };
+export function getProjectQueryUrl(
+  project: string,
+  branchParameters?: BranchParameters,
+  codeScope?: CodeScopeType
+): Location {
+  return {
+    pathname: PROJECT_BASE_URL,
+    query: {
+      id: project,
+      ...branchParameters,
+      ...(codeScope && { code_scope: codeScope })
+    }
+  };
 }
 
 export function getPortfolioUrl(key: string): Location {
@@ -106,11 +134,11 @@ export function getBranchLikeUrl(project: string, branchLike?: BranchLike): Loca
 }
 
 export function getBranchUrl(project: string, branch: string): Location {
-  return { pathname: '/dashboard', query: { branch, id: project } };
+  return { pathname: PROJECT_BASE_URL, query: { branch, id: project } };
 }
 
 export function getPullRequestUrl(project: string, pullRequest: string): Location {
-  return { pathname: '/dashboard', query: { id: project, pullRequest } };
+  return { pathname: PROJECT_BASE_URL, query: { id: project, pullRequest } };
 }
 
 /**