SONAR-15911 Extract Metrics from Redux

18 files changed, 100 insertions, 132 deletions

diff --git a/server/sonar-web/src/main/js/apps/quality-gates/__tests__/utils-test.ts b/server/sonar-web/src/main/js/apps/quality-gates/__tests__/utils-test.ts
index 3962281b4b2..9e22b6392dd 100644
--- a/server/sonar-web/src/main/js/apps/quality-gates/__tests__/utils-test.ts
+++ b/server/sonar-web/src/main/js/apps/quality-gates/__tests__/utils-test.ts
@@ -20,30 +20,27 @@
 import { mockMetric } from '../../../helpers/testMocks';
 import { getLocalizedMetricNameNoDiffMetric } from '../utils';
 
-jest.mock('../../../store/rootReducer', () => ({
-  getMetricByKey: (store: any, key: string) => store[key]
-}));
-
-jest.mock('../../../app/utils/getStore', () => () => ({
-  getState: () => ({
-    bugs: mockMetric({ key: 'bugs', name: 'Bugs' }),
-    existing_metric: mockMetric(),
-    new_maintainability_rating: mockMetric(),
-    sqale_rating: mockMetric({ key: 'sqale_rating', name: 'Maintainability Rating' })
-  })
-}));
+const METRICS = {
+  bugs: mockMetric({ key: 'bugs', name: 'Bugs' }),
+  existing_metric: mockMetric(),
+  new_maintainability_rating: mockMetric(),
+  sqale_rating: mockMetric({ key: 'sqale_rating', name: 'Maintainability Rating' })
+};
 
 describe('getLocalizedMetricNameNoDiffMetric', () => {
   it('should return the correct corresponding metric', () => {
-    expect(getLocalizedMetricNameNoDiffMetric(mockMetric())).toBe('Coverage');
-    expect(getLocalizedMetricNameNoDiffMetric(mockMetric({ key: 'new_bugs' }))).toBe('Bugs');
+    expect(getLocalizedMetricNameNoDiffMetric(mockMetric(), {})).toBe('Coverage');
+    expect(getLocalizedMetricNameNoDiffMetric(mockMetric({ key: 'new_bugs' }), METRICS)).toBe(
+      'Bugs'
+    );
     expect(
       getLocalizedMetricNameNoDiffMetric(
-        mockMetric({ key: 'new_custom_metric', name: 'Custom Metric on New Code' })
+        mockMetric({ key: 'new_custom_metric', name: 'Custom Metric on New Code' }),
+        METRICS
       )
     ).toBe('Custom Metric on New Code');
     expect(
-      getLocalizedMetricNameNoDiffMetric(mockMetric({ key: 'new_maintainability_rating' }))
+      getLocalizedMetricNameNoDiffMetric(mockMetric({ key: 'new_maintainability_rating' }), METRICS)
     ).toBe('Maintainability Rating');
   });
 });
diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/Condition.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/Condition.tsx
index 7968f0d2929..4f1b4203e15 100644
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/Condition.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/Condition.tsx
@@ -20,11 +20,12 @@
 import classNames from 'classnames';
 import * as React from 'react';
 import { deleteCondition } from '../../../api/quality-gates';
+import withMetricsContext from '../../../app/components/metrics/withMetricsContext';
 import { DeleteButton, EditButton } from '../../../components/controls/buttons';
 import ConfirmModal from '../../../components/controls/ConfirmModal';
 import { getLocalizedMetricName, translate, translateWithParameters } from '../../../helpers/l10n';
 import { formatMeasure } from '../../../helpers/measures';
-import { Condition as ConditionType, Metric, QualityGate } from '../../../types/types';
+import { Condition as ConditionType, Dict, Metric, QualityGate } from '../../../types/types';
 import { getLocalizedMetricNameNoDiffMetric } from '../utils';
 import ConditionModal from './ConditionModal';
 
@@ -36,6 +37,7 @@ interface Props {
   onSaveCondition: (newCondition: ConditionType, oldCondition: ConditionType) => void;
   qualityGate: QualityGate;
   updated?: boolean;
+  metrics: Dict<Metric>;
 }
 
 interface State {
@@ -43,7 +45,7 @@ interface State {
   modal: boolean;
 }
 
-export default class Condition extends React.PureComponent<Props, State> {
+export class ConditionComponent extends React.PureComponent<Props, State> {
   constructor(props: Props) {
     super(props);
     this.state = {
@@ -88,11 +90,11 @@ export default class Condition extends React.PureComponent<Props, State> {
   }
 
   render() {
-    const { condition, canEdit, metric, qualityGate, updated } = this.props;
+    const { condition, canEdit, metric, qualityGate, updated, metrics } = this.props;
     return (
       <tr className={classNames({ highlighted: updated })}>
         <td className="text-middle">
-          {getLocalizedMetricNameNoDiffMetric(metric)}
+          {getLocalizedMetricNameNoDiffMetric(metric, metrics)}
           {metric.hidden && (
             <span className="text-danger little-spacer-left">{translate('deprecated')}</span>
           )}
@@ -146,3 +148,5 @@ export default class Condition extends React.PureComponent<Props, State> {
     );
   }
 }
+
+export default withMetricsContext(ConditionComponent);
diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/ConditionModal.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/ConditionModal.tsx
index aa301459f33..03e45767dec 100644
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/ConditionModal.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/ConditionModal.tsx
@@ -146,8 +146,8 @@ export default class ConditionModal extends React.PureComponent<Props, State> {
           {metrics && (
             <MetricSelect
               metric={metric}
-              metrics={metrics.filter(metric =>
-                scope === 'new' ? isDiffMetric(metric.key) : !isDiffMetric(metric.key)
+              metricsArray={metrics.filter(m =>
+                scope === 'new' ? isDiffMetric(m.key) : !isDiffMetric(m.key)
               )}
               onMetricChange={this.handleMetricChange}
             />
diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/Conditions.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/Conditions.tsx
index 2096d1b7f80..d7ae7b87b7d 100644
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/Conditions.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/Conditions.tsx
@@ -19,6 +19,7 @@
  */
 import { differenceWith, map, sortBy, uniqBy } from 'lodash';
 import * as React from 'react';
+import withMetricsContext from '../../../app/components/metrics/withMetricsContext';
 import DocumentationTooltip from '../../../components/common/DocumentationTooltip';
 import { Button } from '../../../components/controls/buttons';
 import ModalButton from '../../../components/controls/ModalButton';
@@ -227,4 +228,4 @@ export class Conditions extends React.PureComponent<Props> {
   }
 }
 
-export default withAppState(Conditions);
+export default withAppState(withMetricsContext(Conditions));
diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/Details.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/Details.tsx
index 94e2d197a5c..b63b1eed83d 100644
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/Details.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/Details.tsx
@@ -19,48 +19,34 @@
  */
 import * as React from 'react';
 import { Helmet } from 'react-helmet-async';
-import { connect } from 'react-redux';
 import { fetchQualityGate } from '../../../api/quality-gates';
 import addGlobalSuccessMessage from '../../../app/utils/addGlobalSuccessMessage';
 import DeferredSpinner from '../../../components/ui/DeferredSpinner';
 import { translate } from '../../../helpers/l10n';
-import { fetchMetrics } from '../../../store/rootActions';
-import { getMetrics, Store } from '../../../store/rootReducer';
-import { Condition, Dict, Metric, QualityGate } from '../../../types/types';
+import { Condition, QualityGate } from '../../../types/types';
 import { addCondition, checkIfDefault, deleteCondition, replaceCondition } from '../utils';
 import DetailsContent from './DetailsContent';
 import DetailsHeader from './DetailsHeader';
 
-interface OwnProps {
+interface Props {
   id: string;
   onSetDefault: (qualityGate: QualityGate) => void;
   qualityGates: QualityGate[];
   refreshQualityGates: () => Promise<void>;
 }
 
-interface StateToProps {
-  metrics: Dict<Metric>;
-}
-
-interface DispatchToProps {
-  fetchMetrics: () => void;
-}
-
-type Props = StateToProps & DispatchToProps & OwnProps;
-
 interface State {
   loading: boolean;
   qualityGate?: QualityGate;
   updatedConditionId?: number;
 }
 
-export class Details extends React.PureComponent<Props, State> {
+export default class Details extends React.PureComponent<Props, State> {
   mounted = false;
   state: State = { loading: true };
 
   componentDidMount() {
     this.mounted = true;
-    this.props.fetchMetrics();
     this.fetchDetails();
   }
 
@@ -145,7 +131,7 @@ export class Details extends React.PureComponent<Props, State> {
   };
 
   render() {
-    const { metrics, refreshQualityGates } = this.props;
+    const { refreshQualityGates } = this.props;
     const { loading, qualityGate, updatedConditionId } = this.state;
 
     return (
@@ -162,7 +148,6 @@ export class Details extends React.PureComponent<Props, State> {
               />
               <DetailsContent
                 isDefault={checkIfDefault(qualityGate, this.props.qualityGates)}
-                metrics={metrics}
                 onAddCondition={this.handleAddCondition}
                 onRemoveCondition={this.handleRemoveCondition}
                 onSaveCondition={this.handleSaveCondition}
@@ -176,11 +161,3 @@ export class Details extends React.PureComponent<Props, State> {
     );
   }
 }
-
-const mapDispatchToProps: DispatchToProps = { fetchMetrics };
-
-const mapStateToProps = (state: Store): StateToProps => ({
-  metrics: getMetrics(state)
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(Details);
diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/DetailsContent.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/DetailsContent.tsx
index 097be9c814a..6542c48f1ae 100644
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/DetailsContent.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/DetailsContent.tsx
@@ -21,14 +21,13 @@ import * as React from 'react';
 import HelpTooltip from '../../../components/controls/HelpTooltip';
 import { Alert } from '../../../components/ui/Alert';
 import { translate } from '../../../helpers/l10n';
-import { Condition, Dict, Metric, QualityGate } from '../../../types/types';
+import { Condition, QualityGate } from '../../../types/types';
 import Conditions from './Conditions';
 import Projects from './Projects';
 import QualityGatePermissions from './QualityGatePermissions';
 
 export interface DetailsContentProps {
   isDefault?: boolean;
-  metrics: Dict<Metric>;
   onAddCondition: (condition: Condition) => void;
   onRemoveCondition: (Condition: Condition) => void;
   onSaveCondition: (newCondition: Condition, oldCondition: Condition) => void;
@@ -37,7 +36,7 @@ export interface DetailsContentProps {
 }
 
 export function DetailsContent(props: DetailsContentProps) {
-  const { isDefault, metrics, qualityGate, updatedConditionId } = props;
+  const { isDefault, qualityGate, updatedConditionId } = props;
   const conditions = qualityGate.conditions || [];
   const actions = qualityGate.actions || {};
 
@@ -52,7 +51,6 @@ export function DetailsContent(props: DetailsContentProps) {
       <Conditions
         canEdit={Boolean(actions.manageConditions)}
         conditions={conditions}
-        metrics={metrics}
         onAddCondition={props.onAddCondition}
         onRemoveCondition={props.onRemoveCondition}
         onSaveCondition={props.onSaveCondition}
diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/MetricSelect.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/MetricSelect.tsx
index ac44ca51890..ce6879efa16 100644
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/MetricSelect.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/MetricSelect.tsx
@@ -19,14 +19,16 @@
  */
 import { sortBy } from 'lodash';
 import * as React from 'react';
+import withMetricsContext from '../../../app/components/metrics/withMetricsContext';
 import SelectLegacy from '../../../components/controls/SelectLegacy';
 import { getLocalizedMetricDomain, translate } from '../../../helpers/l10n';
-import { Metric } from '../../../types/types';
+import { Dict, Metric } from '../../../types/types';
 import { getLocalizedMetricNameNoDiffMetric } from '../utils';
 
 interface Props {
   metric?: Metric;
-  metrics: Metric[];
+  metricsArray: Metric[];
+  metrics: Dict<Metric>;
   onMetricChange: (metric: Metric) => void;
 }
 
@@ -36,10 +38,10 @@ interface Option {
   value: string;
 }
 
-export default class MetricSelect extends React.PureComponent<Props> {
+export class MetricSelectComponent extends React.PureComponent<Props> {
   handleChange = (option: Option | null) => {
     if (option) {
-      const { metrics } = this.props;
+      const { metricsArray: metrics } = this.props;
       const selectedMetric = metrics.find(metric => metric.key === option.value);
       if (selectedMetric) {
         this.props.onMetricChange(selectedMetric);
@@ -48,13 +50,13 @@ export default class MetricSelect extends React.PureComponent<Props> {
   };
 
   render() {
-    const { metric, metrics } = this.props;
+    const { metric, metricsArray, metrics } = this.props;
 
     const options: Array<Option & { domain?: string }> = sortBy(
-      metrics.map(metric => ({
-        value: metric.key,
-        label: getLocalizedMetricNameNoDiffMetric(metric),
-        domain: metric.domain
+      metricsArray.map(m => ({
+        value: m.key,
+        label: getLocalizedMetricNameNoDiffMetric(m, metrics),
+        domain: m.domain
       })),
       'domain'
     );
@@ -85,3 +87,5 @@ export default class MetricSelect extends React.PureComponent<Props> {
     );
   }
 }
+
+export default withMetricsContext(MetricSelectComponent);
diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/Condition-test.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/Condition-test.tsx
index c113410a338..94805c615da 100644
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/Condition-test.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/Condition-test.tsx
@@ -21,7 +21,7 @@ import { shallow } from 'enzyme';
 import * as React from 'react';
 import { mockQualityGate } from '../../../../helpers/mocks/quality-gates';
 import { mockCondition, mockMetric } from '../../../../helpers/testMocks';
-import Condition from '../Condition';
+import { ConditionComponent } from '../Condition';
 
 it('should render correctly', () => {
   expect(shallowRender()).toMatchSnapshot('default');
@@ -41,12 +41,13 @@ it('should render the delete modal correctly', () => {
   expect(wrapper).toMatchSnapshot();
 });
 
-function shallowRender(props: Partial<Condition['props']> = {}) {
-  return shallow<Condition>(
-    <Condition
+function shallowRender(props: Partial<ConditionComponent['props']> = {}) {
+  return shallow<ConditionComponent>(
+    <ConditionComponent
       canEdit={false}
       condition={mockCondition()}
       metric={mockMetric()}
+      metrics={{}}
       onRemoveCondition={jest.fn()}
       onSaveCondition={jest.fn()}
       qualityGate={mockQualityGate()}
diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/ConditionModal-test.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/ConditionModal-test.tsx
index a9e504131b4..41e1ca0fd44 100644
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/ConditionModal-test.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/ConditionModal-test.tsx
@@ -39,10 +39,10 @@ it('should correctly handle a metric selection', () => {
   const wrapper = shallowRender();
   const metric = mockMetric();
 
-  expect(wrapper.find('MetricSelect').prop('metric')).toBeUndefined();
+  expect(wrapper.find('withMetricsContext(MetricSelectComponent)').prop('metric')).toBeUndefined();
 
   wrapper.instance().handleMetricChange(metric);
-  expect(wrapper.find('MetricSelect').prop('metric')).toEqual(metric);
+  expect(wrapper.find('withMetricsContext(MetricSelectComponent)').prop('metric')).toEqual(metric);
 });
 
 it('should correctly switch scope', () => {
diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/Details-test.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/Details-test.tsx
index 463de2c1eda..960f7379dd1 100644
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/Details-test.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/Details-test.tsx
@@ -24,7 +24,7 @@ import { mockQualityGate } from '../../../../helpers/mocks/quality-gates';
 import { mockCondition } from '../../../../helpers/testMocks';
 import { waitAndUpdate } from '../../../../helpers/testUtils';
 import { addCondition, deleteCondition, replaceCondition } from '../../utils';
-import { Details } from '../Details';
+import Details from '../Details';
 
 jest.mock('../../../../api/quality-gates', () => {
   const { mockQualityGate } = jest.requireActual('../../../../helpers/mocks/quality-gates');
@@ -60,12 +60,6 @@ it('should refresh if the QG id changes', async () => {
   expect(fetchQualityGate).toBeCalledWith({ id: '2' });
 });
 
-it('should fetch metrics on mount', () => {
-  const fetchMetrics = jest.fn();
-  shallowRender({ fetchMetrics });
-  expect(fetchMetrics).toBeCalled();
-});
-
 it('should correctly add/replace/remove conditions', async () => {
   const qualityGate = mockQualityGate();
   (fetchQualityGate as jest.Mock).mockResolvedValue(qualityGate);
@@ -120,9 +114,7 @@ it('should correctly handle setting default', async () => {
 function shallowRender(props: Partial<Details['props']> = {}) {
   return shallow<Details>(
     <Details
-      fetchMetrics={jest.fn()}
       id="1"
-      metrics={{}}
       onSetDefault={jest.fn()}
       qualityGates={[mockQualityGate()]}
       refreshQualityGates={jest.fn()}
diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/DetailsContent-test.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/DetailsContent-test.tsx
index 807fb1035ff..9846a8f2b40 100644
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/DetailsContent-test.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/DetailsContent-test.tsx
@@ -39,7 +39,6 @@ it('should render correctly', () => {
 function shallowRender(props: Partial<DetailsContentProps> = {}) {
   return shallow(
     <DetailsContent
-      metrics={{}}
       onAddCondition={jest.fn()}
       onRemoveCondition={jest.fn()}
       onSaveCondition={jest.fn()}
diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/MetricSelect-test.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/MetricSelect-test.tsx
index 61b0ad596dc..2368e5cf37b 100644
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/MetricSelect-test.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/MetricSelect-test.tsx
@@ -20,7 +20,7 @@
 import { shallow } from 'enzyme';
 import * as React from 'react';
 import { mockMetric } from '../../../../helpers/testMocks';
-import MetricSelect from '../MetricSelect';
+import { MetricSelectComponent } from '../MetricSelect';
 
 it('should render correctly', () => {
   expect(shallowRender()).toMatchSnapshot();
@@ -29,14 +29,19 @@ it('should render correctly', () => {
 it('should correctly handle change', () => {
   const onMetricChange = jest.fn();
   const metric = mockMetric();
-  const metrics = [mockMetric({ key: 'duplication' }), metric];
-  const wrapper = shallowRender({ metrics, onMetricChange });
+  const metricsArray = [mockMetric({ key: 'duplication' }), metric];
+  const wrapper = shallowRender({ metricsArray, onMetricChange });
   wrapper.instance().handleChange({ label: metric.name, value: metric.key });
   expect(onMetricChange).toBeCalledWith(metric);
 });
 
-function shallowRender(props: Partial<MetricSelect['props']> = {}) {
-  return shallow<MetricSelect>(
-    <MetricSelect metrics={[mockMetric()]} onMetricChange={jest.fn()} {...props} />
+function shallowRender(props: Partial<MetricSelectComponent['props']> = {}) {
+  return shallow<MetricSelectComponent>(
+    <MetricSelectComponent
+      metricsArray={[mockMetric()]}
+      metrics={{}}
+      onMetricChange={jest.fn()}
+      {...props}
+    />
   );
 }
diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/App.tsx.snap b/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/App.tsx.snap
index b4268071f9b..92a242c1ba7 100644
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/App.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/App.tsx.snap
@@ -79,7 +79,7 @@ exports[`should render correctly: default gate 1`] = `
     >
       <Component />
     </ScreenPositionHelper>
-    <Connect(Details)
+    <Details
       id="2"
       onSetDefault={[Function]}
       qualityGates={
@@ -121,7 +121,7 @@ exports[`should render correctly: specific gate 1`] = `
     >
       <Component />
     </ScreenPositionHelper>
-    <Connect(Details)
+    <Details
       id="1"
       onSetDefault={[Function]}
       qualityGates={
diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/ConditionModal-test.tsx.snap b/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/ConditionModal-test.tsx.snap
index d634c60d729..29e4136d15e 100644
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/ConditionModal-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/ConditionModal-test.tsx.snap
@@ -44,8 +44,8 @@ exports[`should correctly switch scope 1`] = `
     >
       quality_gates.conditions.fails_when
     </label>
-    <MetricSelect
-      metrics={
+    <withMetricsContext(MetricSelectComponent)
+      metricsArray={
         Array [
           Object {
             "id": "new_coverage",
@@ -111,8 +111,8 @@ exports[`should correctly switch scope 2`] = `
     >
       quality_gates.conditions.fails_when
     </label>
-    <MetricSelect
-      metrics={
+    <withMetricsContext(MetricSelectComponent)
+      metricsArray={
         Array [
           Object {
             "id": "coverage",
@@ -178,8 +178,8 @@ exports[`should correctly switch scope 3`] = `
     >
       quality_gates.conditions.fails_when
     </label>
-    <MetricSelect
-      metrics={
+    <withMetricsContext(MetricSelectComponent)
+      metricsArray={
         Array [
           Object {
             "id": "new_coverage",
@@ -245,8 +245,8 @@ exports[`should render correctly 1`] = `
     >
       quality_gates.conditions.fails_when
     </label>
-    <MetricSelect
-      metrics={
+    <withMetricsContext(MetricSelectComponent)
+      metricsArray={
         Array [
           Object {
             "id": "new_coverage",
@@ -285,7 +285,7 @@ exports[`should render correctly 2`] = `
     >
       quality_gates.conditions.fails_when
     </label>
-    <MetricSelect
+    <withMetricsContext(MetricSelectComponent)
       metric={
         Object {
           "id": "coverage",
@@ -294,7 +294,7 @@ exports[`should render correctly 2`] = `
           "type": "PERCENT",
         }
       }
-      metrics={
+      metricsArray={
         Array [
           Object {
             "id": "new_coverage",
diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/Conditions-test.tsx.snap b/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/Conditions-test.tsx.snap
index cb7ff83d304..66ea9de3960 100644
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/Conditions-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/Conditions-test.tsx.snap
@@ -63,7 +63,7 @@ exports[`should render correctly 1`] = `
         </tr>
       </thead>
       <tbody>
-        <Condition
+        <withMetricsContext(ConditionComponent)
           canEdit={false}
           condition={
             Object {
@@ -92,7 +92,7 @@ exports[`should render correctly 1`] = `
           }
           updated={false}
         />
-        <Condition
+        <withMetricsContext(ConditionComponent)
           canEdit={false}
           condition={
             Object {
@@ -221,7 +221,7 @@ exports[`should render correctly with an updated condition 1`] = `
         </tr>
       </thead>
       <tbody>
-        <Condition
+        <withMetricsContext(ConditionComponent)
           canEdit={false}
           condition={
             Object {
@@ -250,7 +250,7 @@ exports[`should render correctly with an updated condition 1`] = `
           }
           updated={true}
         />
-        <Condition
+        <withMetricsContext(ConditionComponent)
           canEdit={false}
           condition={
             Object {
@@ -348,7 +348,7 @@ exports[`should render correctly with new code conditions 1`] = `
         </tr>
       </thead>
       <tbody>
-        <Condition
+        <withMetricsContext(ConditionComponent)
           canEdit={false}
           condition={
             Object {
@@ -377,7 +377,7 @@ exports[`should render correctly with new code conditions 1`] = `
           }
           updated={false}
         />
-        <Condition
+        <withMetricsContext(ConditionComponent)
           canEdit={false}
           condition={
             Object {
@@ -449,7 +449,7 @@ exports[`should render correctly with new code conditions 1`] = `
         </tr>
       </thead>
       <tbody>
-        <Condition
+        <withMetricsContext(ConditionComponent)
           canEdit={false}
           condition={
             Object {
@@ -478,7 +478,7 @@ exports[`should render correctly with new code conditions 1`] = `
           }
           updated={false}
         />
-        <Condition
+        <withMetricsContext(ConditionComponent)
           canEdit={false}
           condition={
             Object {
@@ -595,7 +595,7 @@ exports[`should render the add conditions button and modal 1`] = `
         </tr>
       </thead>
       <tbody>
-        <Condition
+        <withMetricsContext(ConditionComponent)
           canEdit={true}
           condition={
             Object {
@@ -624,7 +624,7 @@ exports[`should render the add conditions button and modal 1`] = `
           }
           updated={false}
         />
-        <Condition
+        <withMetricsContext(ConditionComponent)
           canEdit={true}
           condition={
             Object {
diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/Details-test.tsx.snap b/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/Details-test.tsx.snap
index ba5a76662eb..b17fb93a813 100644
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/Details-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/Details-test.tsx.snap
@@ -26,7 +26,6 @@ exports[`should render correctly: loaded 1`] = `
     />
     <Memo(DetailsContent)
       isDefault={false}
-      metrics={Object {}}
       onAddCondition={[Function]}
       onRemoveCondition={[Function]}
       onSaveCondition={[Function]}
diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/DetailsContent-test.tsx.snap b/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/DetailsContent-test.tsx.snap
index c1f3da95dad..456f401e581 100644
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/DetailsContent-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/DetailsContent-test.tsx.snap
@@ -4,10 +4,9 @@ exports[`should render correctly: Admin 1`] = `
 <div
   className="layout-page-main-inner"
 >
-  <Connect(withAppState(Conditions))
+  <Connect(withAppState(withMetricsContext(Conditions)))
     canEdit={false}
     conditions={Array []}
-    metrics={Object {}}
     onAddCondition={[MockFunction]}
     onRemoveCondition={[MockFunction]}
     onSaveCondition={[MockFunction]}
@@ -81,7 +80,7 @@ exports[`should render correctly: is default 1`] = `
 <div
   className="layout-page-main-inner"
 >
-  <Connect(withAppState(Conditions))
+  <Connect(withAppState(withMetricsContext(Conditions)))
     canEdit={false}
     conditions={
       Array [
@@ -93,7 +92,6 @@ exports[`should render correctly: is default 1`] = `
         },
       ]
     }
-    metrics={Object {}}
     onAddCondition={[MockFunction]}
     onRemoveCondition={[MockFunction]}
     onSaveCondition={[MockFunction]}
@@ -152,10 +150,9 @@ exports[`should render correctly: is default, no conditions 1`] = `
   >
     quality_gates.is_default_no_conditions
   </Alert>
-  <Connect(withAppState(Conditions))
+  <Connect(withAppState(withMetricsContext(Conditions)))
     canEdit={false}
     conditions={Array []}
-    metrics={Object {}}
     onAddCondition={[MockFunction]}
     onRemoveCondition={[MockFunction]}
     onSaveCondition={[MockFunction]}
@@ -201,7 +198,7 @@ exports[`should render correctly: is not default 1`] = `
 <div
   className="layout-page-main-inner"
 >
-  <Connect(withAppState(Conditions))
+  <Connect(withAppState(withMetricsContext(Conditions)))
     canEdit={false}
     conditions={
       Array [
@@ -213,7 +210,6 @@ exports[`should render correctly: is not default 1`] = `
         },
       ]
     }
-    metrics={Object {}}
     onAddCondition={[MockFunction]}
     onRemoveCondition={[MockFunction]}
     onSaveCondition={[MockFunction]}
diff --git a/server/sonar-web/src/main/js/apps/quality-gates/utils.ts b/server/sonar-web/src/main/js/apps/quality-gates/utils.ts
index 2cb97805e3e..9da8421c861 100644
--- a/server/sonar-web/src/main/js/apps/quality-gates/utils.ts
+++ b/server/sonar-web/src/main/js/apps/quality-gates/utils.ts
@@ -17,11 +17,9 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import getStore from '../../app/utils/getStore';
 import { getLocalizedMetricName } from '../../helpers/l10n';
 import { isDiffMetric } from '../../helpers/measures';
-import { getMetricByKey } from '../../store/rootReducer';
-import { Condition, Metric, QualityGate } from '../../types/types';
+import { Condition, Dict, Metric, QualityGate } from '../../types/types';
 
 export function checkIfDefault(qualityGate: QualityGate, list: QualityGate[]): boolean {
   const finding = list.find(candidate => candidate.id === qualityGate.id);
@@ -58,27 +56,24 @@ export function getPossibleOperators(metric: Metric) {
     return 'LT';
   } else if (metric.direction === -1) {
     return 'GT';
-  } else {
-    return ['LT', 'GT'];
   }
+  return ['LT', 'GT'];
 }
 
-export function metricKeyExists(key: string) {
-  return getMetricByKey(getStore().getState(), key) !== undefined;
+function metricKeyExists(key: string, metrics: Dict<Metric>) {
+  return metrics && metrics[key] !== undefined;
 }
 
-function getNoDiffMetric(metric: Metric) {
-  const store = getStore().getState();
+function getNoDiffMetric(metric: Metric, metrics: Dict<Metric>) {
   const regularMetricKey = metric.key.replace(/^new_/, '');
-  if (isDiffMetric(metric.key) && metricKeyExists(regularMetricKey)) {
-    return getMetricByKey(store, regularMetricKey);
+  if (isDiffMetric(metric.key) && metricKeyExists(regularMetricKey, metrics)) {
+    return metrics[regularMetricKey];
   } else if (metric.key === 'new_maintainability_rating') {
-    return getMetricByKey(store, 'sqale_rating') || metric;
-  } else {
-    return metric;
+    return metrics['sqale_rating'] || metric;
   }
+  return metric;
 }
 
-export function getLocalizedMetricNameNoDiffMetric(metric: Metric) {
-  return getLocalizedMetricName(getNoDiffMetric(metric));
+export function getLocalizedMetricNameNoDiffMetric(metric: Metric, metrics: Dict<Metric>) {
+  return getLocalizedMetricName(getNoDiffMetric(metric, metrics));
 }