SONAR-15992 Remove Global Settings from redux

45 files changed, 300 insertions, 430 deletions

diff --git a/server/sonar-web/src/main/js/apps/audit-logs/components/AuditApp.tsx b/server/sonar-web/src/main/js/apps/audit-logs/components/AuditApp.tsx
index df64cb4c24b..da2e3196a93 100644
--- a/server/sonar-web/src/main/js/apps/audit-logs/components/AuditApp.tsx
+++ b/server/sonar-web/src/main/js/apps/audit-logs/components/AuditApp.tsx
@@ -18,60 +18,63 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import { connect } from 'react-redux';
-import { getGlobalSettingValue, Store } from '../../../store/rootReducer';
+import { getValues } from '../../../api/settings';
 import { AdminPageExtension } from '../../../types/extension';
+import { SettingsKey } from '../../../types/settings';
 import { Extension } from '../../../types/types';
-import { fetchValues } from '../../settings/store/actions';
 import '../style.css';
 import { HousekeepingPolicy, RangeOption } from '../utils';
 import AuditAppRenderer from './AuditAppRenderer';
 
 interface Props {
-  auditHousekeepingPolicy: HousekeepingPolicy;
-  fetchValues: typeof fetchValues;
   adminPages: Extension[];
 }
 
 interface State {
   dateRange?: { from?: Date; to?: Date };
-  hasGovernanceExtension?: boolean;
   downloadStarted: boolean;
+  housekeepingPolicy: HousekeepingPolicy;
   selection: RangeOption;
 }
 
-export class AuditApp extends React.PureComponent<Props, State> {
+export default class AuditApp extends React.PureComponent<Props, State> {
   constructor(props: Props) {
     super(props);
-    const hasGovernanceExtension = Boolean(
-      props.adminPages?.find(e => e.key === AdminPageExtension.GovernanceConsole)
-    );
+
     this.state = {
       downloadStarted: false,
-      selection: RangeOption.Today,
-      hasGovernanceExtension
+      housekeepingPolicy: HousekeepingPolicy.Monthly,
+      selection: RangeOption.Today
     };
   }
 
   componentDidMount() {
-    const { hasGovernanceExtension } = this.state;
-
-    if (hasGovernanceExtension) {
-      this.props.fetchValues(['sonar.dbcleaner.auditHousekeeping']);
+    if (this.hasGovernanceExtension()) {
+      this.fetchHouseKeepingPolicy();
     }
   }
 
   componentDidUpdate(prevProps: Props) {
-    if (prevProps.adminPages !== this.props.adminPages) {
-      const hasGovernanceExtension = Boolean(
-        this.props.adminPages?.find(e => e.key === AdminPageExtension.GovernanceConsole)
-      );
-      this.setState({
-        hasGovernanceExtension
-      });
+    if (prevProps.adminPages !== this.props.adminPages && this.hasGovernanceExtension()) {
+      this.fetchHouseKeepingPolicy();
     }
   }
 
+  fetchHouseKeepingPolicy = async () => {
+    const results = await getValues({ keys: SettingsKey.AuditHouseKeeping });
+
+    this.setState({
+      housekeepingPolicy:
+        (results[0]?.value as HousekeepingPolicy | undefined) ?? HousekeepingPolicy.Monthly
+    });
+  };
+
+  hasGovernanceExtension = () => {
+    return Boolean(
+      this.props.adminPages?.find(e => e.key === AdminPageExtension.GovernanceConsole)
+    );
+  };
+
   handleDateSelection = (dateRange: { from?: Date; to?: Date }) =>
     this.setState({ dateRange, downloadStarted: false, selection: RangeOption.Custom });
 
@@ -85,10 +88,7 @@ export class AuditApp extends React.PureComponent<Props, State> {
   };
 
   render() {
-    const { hasGovernanceExtension, ...auditAppRendererProps } = this.state;
-    const { auditHousekeepingPolicy } = this.props;
-
-    if (!hasGovernanceExtension) {
+    if (!this.hasGovernanceExtension()) {
       return null;
     }
 
@@ -97,20 +97,8 @@ export class AuditApp extends React.PureComponent<Props, State> {
         handleDateSelection={this.handleDateSelection}
         handleOptionSelection={this.handleOptionSelection}
         handleStartDownload={this.handleStartDownload}
-        housekeepingPolicy={auditHousekeepingPolicy || HousekeepingPolicy.Monthly}
-        {...auditAppRendererProps}
+        {...this.state}
       />
     );
   }
 }
-
-const mapDispatchToProps = { fetchValues };
-
-const mapStateToProps = (state: Store) => {
-  const settingValue = getGlobalSettingValue(state, 'sonar.dbcleaner.auditHousekeeping');
-  return {
-    auditHousekeepingPolicy: settingValue?.value as HousekeepingPolicy
-  };
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(AuditApp);
diff --git a/server/sonar-web/src/main/js/apps/audit-logs/components/__tests__/AuditApp-test.tsx b/server/sonar-web/src/main/js/apps/audit-logs/components/__tests__/AuditApp-test.tsx
index 1b9740af760..baac6e88cda 100644
--- a/server/sonar-web/src/main/js/apps/audit-logs/components/__tests__/AuditApp-test.tsx
+++ b/server/sonar-web/src/main/js/apps/audit-logs/components/__tests__/AuditApp-test.tsx
@@ -20,30 +20,41 @@
 import { subDays } from 'date-fns';
 import { shallow } from 'enzyme';
 import * as React from 'react';
+import { getValues } from '../../../../api/settings';
 import { waitAndUpdate } from '../../../../helpers/testUtils';
 import { AdminPageExtension } from '../../../../types/extension';
 import { HousekeepingPolicy, RangeOption } from '../../utils';
-import { AuditApp } from '../AuditApp';
+import AuditApp from '../AuditApp';
 import AuditAppRenderer from '../AuditAppRenderer';
 
+jest.mock('../../../../api/settings', () => ({
+  getValues: jest.fn().mockResolvedValue([])
+}));
+
+beforeEach(() => {
+  jest.clearAllMocks();
+});
+
 it('should render correctly', () => {
   expect(shallowRender()).toMatchSnapshot();
 });
 
 it('should do nothing if governance is not available', async () => {
-  const fetchValues = jest.fn();
-  const wrapper = shallowRender({ fetchValues, adminPages: [] });
+  const wrapper = shallowRender({ adminPages: [] });
   await waitAndUpdate(wrapper);
 
   expect(wrapper.type()).toBeNull();
-  expect(fetchValues).not.toBeCalled();
+  expect(getValues).not.toBeCalled();
 });
 
-it('should fetch houskeeping policy on mount', async () => {
-  const fetchValues = jest.fn();
-  const wrapper = shallowRender({ fetchValues });
+it('should handle housekeeping policy', async () => {
+  (getValues as jest.Mock).mockResolvedValueOnce([{ value: HousekeepingPolicy.Weekly }]);
+
+  const wrapper = shallowRender();
+
   await waitAndUpdate(wrapper);
-  expect(fetchValues).toBeCalled();
+
+  expect(wrapper.find(AuditAppRenderer).props().housekeepingPolicy).toBe(HousekeepingPolicy.Weekly);
 });
 
 it('should handle date selection', () => {
@@ -76,11 +87,22 @@ it('should handle predefined selection', () => {
   expect(wrapper.state().dateRange).toBeUndefined();
 });
 
+it('should handle update to admin pages', async () => {
+  const wrapper = shallowRender({ adminPages: [] });
+  await waitAndUpdate(wrapper);
+
+  expect(wrapper.type()).toBeNull();
+  expect(getValues).not.toBeCalled();
+
+  wrapper.setProps({ adminPages: [{ key: AdminPageExtension.GovernanceConsole, name: 'name' }] });
+  await waitAndUpdate(wrapper);
+
+  expect(getValues).toBeCalled();
+});
+
 function shallowRender(props: Partial<AuditApp['props']> = {}) {
   return shallow<AuditApp>(
     <AuditApp
-      auditHousekeepingPolicy={HousekeepingPolicy.Monthly}
-      fetchValues={jest.fn()}
       adminPages={[{ key: AdminPageExtension.GovernanceConsole, name: 'name' }]}
       {...props}
     />
diff --git a/server/sonar-web/src/main/js/apps/background-tasks/components/StatPendingCount.tsx b/server/sonar-web/src/main/js/apps/background-tasks/components/StatPendingCount.tsx
index d1cc1e097c7..de54ad439fb 100644
--- a/server/sonar-web/src/main/js/apps/background-tasks/components/StatPendingCount.tsx
+++ b/server/sonar-web/src/main/js/apps/background-tasks/components/StatPendingCount.tsx
@@ -24,7 +24,7 @@ import { ClearButton } from '../../../components/controls/buttons';
 import ConfirmButton from '../../../components/controls/ConfirmButton';
 import Tooltip from '../../../components/controls/Tooltip';
 import { translate } from '../../../helpers/l10n';
-import { AppState } from '../../../types/types';
+import { AppState } from '../../../types/appstate';
 
 export interface Props {
   appState: AppState;
diff --git a/server/sonar-web/src/main/js/apps/change-admin-password/ChangeAdminPasswordApp.tsx b/server/sonar-web/src/main/js/apps/change-admin-password/ChangeAdminPasswordApp.tsx
index 5bb5d8b601b..3582400a715 100644
--- a/server/sonar-web/src/main/js/apps/change-admin-password/ChangeAdminPasswordApp.tsx
+++ b/server/sonar-web/src/main/js/apps/change-admin-password/ChangeAdminPasswordApp.tsx
@@ -21,7 +21,7 @@ import * as React from 'react';
 import { changePassword } from '../../api/users';
 import withAppStateContext from '../../app/components/app-state/withAppStateContext';
 import { Location, withRouter } from '../../components/hoc/withRouter';
-import { AppState } from '../../types/types';
+import { AppState } from '../../types/appstate';
 import ChangeAdminPasswordAppRenderer from './ChangeAdminPasswordAppRenderer';
 import { DEFAULT_ADMIN_LOGIN, DEFAULT_ADMIN_PASSWORD } from './constants';
 
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsIssues.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsIssues.tsx
index fa64d3cee56..5c282e3ee5f 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsIssues.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsIssues.tsx
@@ -26,7 +26,8 @@ import DeferredSpinner from '../../../components/ui/DeferredSpinner';
 import { translate } from '../../../helpers/l10n';
 import { formatMeasure } from '../../../helpers/measures';
 import { getIssuesUrl } from '../../../helpers/urls';
-import { AppState, RuleDetails } from '../../../types/types';
+import { AppState } from '../../../types/appstate';
+import { RuleDetails } from '../../../types/types';
 
 interface Props {
   appState: AppState;
diff --git a/server/sonar-web/src/main/js/apps/create/project/CreateProjectModeSelection.tsx b/server/sonar-web/src/main/js/apps/create/project/CreateProjectModeSelection.tsx
index 3cd2701916e..4471a7923b0 100644
--- a/server/sonar-web/src/main/js/apps/create/project/CreateProjectModeSelection.tsx
+++ b/server/sonar-web/src/main/js/apps/create/project/CreateProjectModeSelection.tsx
@@ -24,7 +24,7 @@ import ChevronsIcon from '../../../components/icons/ChevronsIcon';
 import { translate, translateWithParameters } from '../../../helpers/l10n';
 import { getBaseUrl } from '../../../helpers/system';
 import { AlmKeys } from '../../../types/alm-settings';
-import { AppState } from '../../../types/types';
+import { AppState } from '../../../types/appstate';
 import { CreateProjectModes } from './types';
 
 export interface CreateProjectModeSelectionProps {
diff --git a/server/sonar-web/src/main/js/apps/create/project/CreateProjectPage.tsx b/server/sonar-web/src/main/js/apps/create/project/CreateProjectPage.tsx
index 6f250980373..4c4a3d7bbb6 100644
--- a/server/sonar-web/src/main/js/apps/create/project/CreateProjectPage.tsx
+++ b/server/sonar-web/src/main/js/apps/create/project/CreateProjectPage.tsx
@@ -27,7 +27,8 @@ import { whenLoggedIn } from '../../../components/hoc/whenLoggedIn';
 import { translate } from '../../../helpers/l10n';
 import { getProjectUrl } from '../../../helpers/urls';
 import { AlmKeys, AlmSettingsInstance } from '../../../types/alm-settings';
-import { AppState, LoggedInUser } from '../../../types/types';
+import { AppState } from '../../../types/appstate';
+import { LoggedInUser } from '../../../types/types';
 import AlmBindingDefinitionForm from '../../settings/components/almIntegration/AlmBindingDefinitionForm';
 import AzureProjectCreate from './AzureProjectCreate';
 import BitbucketCloudProjectCreate from './BitbucketCloudProjectCreate';
diff --git a/server/sonar-web/src/main/js/apps/issues/components/__tests__/__snapshots__/IssuesApp-test.tsx.snap b/server/sonar-web/src/main/js/apps/issues/components/__tests__/__snapshots__/IssuesApp-test.tsx.snap
index f5a71c751a2..073c704f38a 100644
--- a/server/sonar-web/src/main/js/apps/issues/components/__tests__/__snapshots__/IssuesApp-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/issues/components/__tests__/__snapshots__/IssuesApp-test.tsx.snap
@@ -65,7 +65,7 @@ exports[`should show warnning when not all projects are accessible 1`] = `
           displayReset={true}
           onReset={[Function]}
         />
-        <Connect(Sidebar)
+        <withAppStateContext(Sidebar)
           component={
             Object {
               "breadcrumbs": Array [],
diff --git a/server/sonar-web/src/main/js/apps/issues/sidebar/Sidebar.tsx b/server/sonar-web/src/main/js/apps/issues/sidebar/Sidebar.tsx
index fd455980dc0..4a80bd6dd96 100644
--- a/server/sonar-web/src/main/js/apps/issues/sidebar/Sidebar.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/sidebar/Sidebar.tsx
@@ -18,9 +18,9 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import { connect } from 'react-redux';
+import withAppStateContext from '../../../app/components/app-state/withAppStateContext';
 import { isBranch, isPullRequest } from '../../../helpers/branch-like';
-import { getGlobalSettingValue, Store } from '../../../store/rootReducer';
+import { AppState } from '../../../types/appstate';
 import { BranchLike } from '../../../types/branch-like';
 import { ComponentQualifier, isApplication, isPortfolioLike } from '../../../types/component';
 import {
@@ -29,6 +29,7 @@ import {
   ReferencedLanguage,
   ReferencedRule
 } from '../../../types/issues';
+import { GlobalSettingKeys } from '../../../types/settings';
 import { Component, Dict, UserBase } from '../../../types/types';
 import { Query } from '../utils';
 import AssigneeFacet from './AssigneeFacet';
@@ -48,6 +49,7 @@ import TagFacet from './TagFacet';
 import TypeFacet from './TypeFacet';
 
 export interface Props {
+  appState: AppState;
   branchLike?: BranchLike;
   component: Component | undefined;
   createdAfterIncludesTime: boolean;
@@ -64,7 +66,6 @@ export interface Props {
   referencedLanguages: Dict<ReferencedLanguage>;
   referencedRules: Dict<ReferencedRule>;
   referencedUsers: Dict<UserBase>;
-  disableDeveloperAggregatedInfo: boolean;
 }
 
 export class Sidebar extends React.PureComponent<Props> {
@@ -108,6 +109,7 @@ export class Sidebar extends React.PureComponent<Props> {
 
   render() {
     const {
+      appState: { settings },
       component,
       createdAfterIncludesTime,
       facets,
@@ -116,6 +118,9 @@ export class Sidebar extends React.PureComponent<Props> {
       branchLike
     } = this.props;
 
+    const disableDeveloperAggregatedInfo =
+      settings[GlobalSettingKeys.DeveloperAggregatedInfoDisabled] === 'true';
+
     const branch =
       (isBranch(branchLike) && branchLike.name) ||
       (isPullRequest(branchLike) && branchLike.branch) ||
@@ -255,7 +260,7 @@ export class Sidebar extends React.PureComponent<Props> {
           />
         )}
         {this.renderComponentFacets()}
-        {!this.props.myIssues && !this.props.disableDeveloperAggregatedInfo && (
+        {!this.props.myIssues && !disableDeveloperAggregatedInfo && (
           <AssigneeFacet
             assigned={query.assigned}
             assignees={query.assignees}
@@ -269,7 +274,7 @@ export class Sidebar extends React.PureComponent<Props> {
             stats={facets.assignees}
           />
         )}
-        {displayAuthorFacet && !this.props.disableDeveloperAggregatedInfo && (
+        {displayAuthorFacet && !disableDeveloperAggregatedInfo && (
           <AuthorFacet
             author={query.author}
             component={component}
@@ -287,14 +292,4 @@ export class Sidebar extends React.PureComponent<Props> {
   }
 }
 
-export const mapStateToProps = (state: Store) => {
-  const disableDeveloperAggregatedInfo = getGlobalSettingValue(
-    state,
-    'sonar.developerAggregatedInfo.disabled'
-  );
-  return {
-    disableDeveloperAggregatedInfo: disableDeveloperAggregatedInfo?.value === true.toString()
-  };
-};
-
-export default connect(mapStateToProps)(Sidebar);
+export default withAppStateContext(Sidebar);
diff --git a/server/sonar-web/src/main/js/apps/issues/sidebar/__tests__/Sidebar-test.tsx b/server/sonar-web/src/main/js/apps/issues/sidebar/__tests__/Sidebar-test.tsx
index 8e7b29ca2af..916e17efba1 100644
--- a/server/sonar-web/src/main/js/apps/issues/sidebar/__tests__/Sidebar-test.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/sidebar/__tests__/Sidebar-test.tsx
@@ -21,12 +21,11 @@ import { shallow, ShallowWrapper } from 'enzyme';
 import { flatten } from 'lodash';
 import * as React from 'react';
 import { mockComponent } from '../../../../helpers/mocks/component';
-import { getGlobalSettingValue } from '../../../../store/rootReducer';
+import { mockAppState } from '../../../../helpers/testMocks';
+import { GlobalSettingKeys } from '../../../../types/settings';
 import { ComponentQualifier } from '../../../../types/component';
 import { Query } from '../../utils';
-import { mapStateToProps, Sidebar } from '../Sidebar';
-
-jest.mock('../../../../store/rootReducer', () => ({ getGlobalSettingValue: jest.fn() }));
+import { Sidebar } from '../Sidebar';
 
 it('should render facets for global page', () => {
   expect(renderSidebar()).toMatchSnapshot();
@@ -52,16 +51,13 @@ it('should render facets when my issues are selected', () => {
 });
 
 it('should not render developer nominative facets when asked not to', () => {
-  expect(renderSidebar({ disableDeveloperAggregatedInfo: true })).toMatchSnapshot();
-});
-
-it('should init the component with the proper store value', () => {
-  mapStateToProps({} as any);
-
-  expect(getGlobalSettingValue).toHaveBeenCalledWith(
-    expect.any(Object),
-    'sonar.developerAggregatedInfo.disabled'
-  );
+  expect(
+    renderSidebar({
+      appState: mockAppState({
+        settings: { [GlobalSettingKeys.DeveloperAggregatedInfoDisabled]: 'true' }
+      })
+    })
+  ).toMatchSnapshot();
 });
 
 const renderSidebar = (props?: Partial<Sidebar['props']>) => {
@@ -69,6 +65,9 @@ const renderSidebar = (props?: Partial<Sidebar['props']>) => {
     mapChildren(
       shallow<Sidebar>(
         <Sidebar
+          appState={mockAppState({
+            settings: { [GlobalSettingKeys.DeveloperAggregatedInfoDisabled]: 'false' }
+          })}
           component={undefined}
           createdAfterIncludesTime={false}
           facets={{}}
@@ -84,7 +83,6 @@ const renderSidebar = (props?: Partial<Sidebar['props']>) => {
           referencedLanguages={{}}
           referencedRules={{}}
           referencedUsers={{}}
-          disableDeveloperAggregatedInfo={false}
           {...props}
         />
       )
diff --git a/server/sonar-web/src/main/js/apps/issues/sidebar/__tests__/__snapshots__/AssigneeFacet-test.tsx.snap b/server/sonar-web/src/main/js/apps/issues/sidebar/__tests__/__snapshots__/AssigneeFacet-test.tsx.snap
index 6e5f27e4e47..ee6aa25506d 100644
--- a/server/sonar-web/src/main/js/apps/issues/sidebar/__tests__/__snapshots__/AssigneeFacet-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/issues/sidebar/__tests__/__snapshots__/AssigneeFacet-test.tsx.snap
@@ -41,7 +41,7 @@ exports[`should render 1`] = `
 
 exports[`test behavior should correctly render facet item 1`] = `
 <React.Fragment>
-  <Connect(Avatar)
+  <withAppStateContext(Avatar)
     className="little-spacer-right"
     name="Name Baz"
     size={16}
@@ -52,7 +52,7 @@ exports[`test behavior should correctly render facet item 1`] = `
 
 exports[`test behavior should correctly render facet item 2`] = `
 <React.Fragment>
-  <Connect(Avatar)
+  <withAppStateContext(Avatar)
     className="little-spacer-right"
     name="foo"
     size={16}
@@ -63,7 +63,7 @@ exports[`test behavior should correctly render facet item 2`] = `
 
 exports[`test behavior should correctly render search result correctly 1`] = `
 <React.Fragment>
-  <Connect(Avatar)
+  <withAppStateContext(Avatar)
     className="little-spacer-right"
     name="Name Bar"
     size={16}
@@ -80,7 +80,7 @@ exports[`test behavior should correctly render search result correctly 1`] = `
 
 exports[`test behavior should correctly render search result correctly 2`] = `
 <React.Fragment>
-  <Connect(Avatar)
+  <withAppStateContext(Avatar)
     className="little-spacer-right"
     name="foo"
     size={16}
diff --git a/server/sonar-web/src/main/js/apps/marketplace/AppContainer.tsx b/server/sonar-web/src/main/js/apps/marketplace/MarketplaceAppContainer.tsx
index 501b4f90072..77050b3ac91 100644
--- a/server/sonar-web/src/main/js/apps/marketplace/AppContainer.tsx
+++ b/server/sonar-web/src/main/js/apps/marketplace/MarketplaceAppContainer.tsx
@@ -18,35 +18,27 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import { connect } from 'react-redux';
 import AdminContext from '../../app/components/AdminContext';
 import withAppStateContext from '../../app/components/app-state/withAppStateContext';
-import { getGlobalSettingValue, Store } from '../../store/rootReducer';
+import { AppState } from '../../types/appstate';
 import { EditionKey } from '../../types/editions';
-import { AppState, RawQuery } from '../../types/types';
-import { fetchValues } from '../settings/store/actions';
+import { GlobalSettingKeys } from '../../types/settings';
+import { RawQuery } from '../../types/types';
 import App from './App';
 
-interface OwnProps {
+export interface MarketplaceAppContainerProps {
   location: { pathname: string; query: RawQuery };
   appState: AppState;
 }
 
-interface StateToProps {
-  fetchValues: typeof fetchValues;
-  updateCenterActive: boolean;
-}
-
-function WithAdminContext(props: StateToProps & OwnProps) {
-  React.useEffect(() => {
-    props.fetchValues(['sonar.updatecenter.activate']);
-  });
+export function MarketplaceAppContainer(props: MarketplaceAppContainerProps) {
+  const { appState, location } = props;
 
   const propsToPass = {
-    location: props.location,
-    updateCenterActive: props.updateCenterActive,
-    currentEdition: props.appState.edition as EditionKey,
-    standaloneMode: props.appState.standalone
+    location,
+    updateCenterActive: appState.settings[GlobalSettingKeys.UpdatecenterActivated] === 'true',
+    currentEdition: appState.edition as EditionKey,
+    standaloneMode: appState.standalone
   };
 
   return (
@@ -62,13 +54,4 @@ function WithAdminContext(props: StateToProps & OwnProps) {
   );
 }
 
-const mapDispatchToProps = { fetchValues };
-
-const mapStateToProps = (state: Store) => {
-  const updateCenterActive = getGlobalSettingValue(state, 'sonar.updatecenter.activate');
-  return {
-    updateCenterActive: Boolean(updateCenterActive && updateCenterActive.value === 'true')
-  };
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(withAppStateContext(WithAdminContext));
+export default withAppStateContext(MarketplaceAppContainer);
diff --git a/server/sonar-web/src/main/js/apps/marketplace/__tests__/AppContainer-test.tsx b/server/sonar-web/src/main/js/apps/marketplace/__tests__/AppContainer-test.tsx
deleted file mode 100644
index d306400526f..00000000000
--- a/server/sonar-web/src/main/js/apps/marketplace/__tests__/AppContainer-test.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2022 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import { connect } from 'react-redux';
-import { mockStore } from '../../../helpers/testMocks';
-import { getGlobalSettingValue } from '../../../store/rootReducer';
-import '../AppContainer';
-
-jest.mock('react-redux', () => ({
-  connect: jest.fn(() => (a: any) => a)
-}));
-
-jest.mock('../../../store/rootReducer', () => {
-  return {
-    getGlobalSettingValue: jest.fn()
-  };
-});
-
-describe('redux', () => {
-  it('should correctly map state and dispatch props', () => {
-    const store = mockStore();
-    const updateCenterActive = true;
-    (getGlobalSettingValue as jest.Mock).mockReturnValueOnce({
-      value: `${updateCenterActive}`
-    });
-
-    const [mapStateToProps] = (connect as jest.Mock).mock.calls[0];
-
-    const props = mapStateToProps(store);
-    expect(props).toEqual({
-      updateCenterActive
-    });
-
-    expect(getGlobalSettingValue).toHaveBeenCalledWith(store, 'sonar.updatecenter.activate');
-  });
-});
diff --git a/server/sonar-web/src/main/js/apps/marketplace/__tests__/MarketplaceAppContainer-test.tsx b/server/sonar-web/src/main/js/apps/marketplace/__tests__/MarketplaceAppContainer-test.tsx
new file mode 100644
index 00000000000..476b4035805
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/marketplace/__tests__/MarketplaceAppContainer-test.tsx
@@ -0,0 +1,48 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2022 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+import { shallow } from 'enzyme';
+import React from 'react';
+import { mockAppState, mockLocation } from '../../../helpers/testMocks';
+import { GlobalSettingKeys } from '../../../types/settings';
+import { EditionKey } from '../../../types/editions';
+import { MarketplaceAppContainer, MarketplaceAppContainerProps } from '../MarketplaceAppContainer';
+
+it('should render correctly', () => {
+  expect(shallowRender().dive()).toMatchSnapshot('default');
+  expect(
+    shallowRender({
+      appState: mockAppState({
+        settings: {
+          [GlobalSettingKeys.UpdatecenterActivated]: 'true'
+        }
+      })
+    }).dive()
+  ).toMatchSnapshot('update center active');
+});
+
+function shallowRender(overrides: Partial<MarketplaceAppContainerProps> = {}) {
+  return shallow<MarketplaceAppContainerProps>(
+    <MarketplaceAppContainer
+      appState={mockAppState({ edition: EditionKey.community, standalone: true })}
+      location={mockLocation()}
+      {...overrides}
+    />
+  );
+}
diff --git a/server/sonar-web/src/main/js/apps/marketplace/__tests__/__snapshots__/MarketplaceAppContainer-test.tsx.snap b/server/sonar-web/src/main/js/apps/marketplace/__tests__/__snapshots__/MarketplaceAppContainer-test.tsx.snap
new file mode 100644
index 00000000000..58d697aede5
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/marketplace/__tests__/__snapshots__/MarketplaceAppContainer-test.tsx.snap
@@ -0,0 +1,54 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render correctly: default 1`] = `
+<withRouter(App)
+  currentEdition="community"
+  fetchPendingPlugins={[Function]}
+  location={
+    Object {
+      "action": "PUSH",
+      "hash": "",
+      "key": "key",
+      "pathname": "/path",
+      "query": Object {},
+      "search": "",
+      "state": Object {},
+    }
+  }
+  pendingPlugins={
+    Object {
+      "installing": Array [],
+      "removing": Array [],
+      "updating": Array [],
+    }
+  }
+  standaloneMode={true}
+  updateCenterActive={false}
+/>
+`;
+
+exports[`should render correctly: update center active 1`] = `
+<withRouter(App)
+  currentEdition="community"
+  fetchPendingPlugins={[Function]}
+  location={
+    Object {
+      "action": "PUSH",
+      "hash": "",
+      "key": "key",
+      "pathname": "/path",
+      "query": Object {},
+      "search": "",
+      "state": Object {},
+    }
+  }
+  pendingPlugins={
+    Object {
+      "installing": Array [],
+      "removing": Array [],
+      "updating": Array [],
+    }
+  }
+  updateCenterActive={true}
+/>
+`;
diff --git a/server/sonar-web/src/main/js/apps/marketplace/routes.ts b/server/sonar-web/src/main/js/apps/marketplace/routes.ts
index c4d59b1b922..211f08c5a06 100644
--- a/server/sonar-web/src/main/js/apps/marketplace/routes.ts
+++ b/server/sonar-web/src/main/js/apps/marketplace/routes.ts
@@ -21,7 +21,7 @@ import { lazyLoadComponent } from '../../components/lazyLoadComponent';
 
 const routes = [
   {
-    indexRoute: { component: lazyLoadComponent(() => import('./AppContainer')) }
+    indexRoute: { component: lazyLoadComponent(() => import('./MarketplaceAppContainer')) }
   }
 ];
 
diff --git a/server/sonar-web/src/main/js/apps/overview/components/App.tsx b/server/sonar-web/src/main/js/apps/overview/components/App.tsx
index 665b63e6ddc..0477fff99e9 100644
--- a/server/sonar-web/src/main/js/apps/overview/components/App.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/components/App.tsx
@@ -24,9 +24,10 @@ import { Router, withRouter } from '../../../components/hoc/withRouter';
 import { lazyLoadComponent } from '../../../components/lazyLoadComponent';
 import { isPullRequest } from '../../../helpers/branch-like';
 import { ProjectAlmBindingResponse } from '../../../types/alm-settings';
+import { AppState } from '../../../types/appstate';
 import { BranchLike } from '../../../types/branch-like';
 import { isPortfolioLike } from '../../../types/component';
-import { AppState, Component } from '../../../types/types';
+import { Component } from '../../../types/types';
 import BranchOverview from '../branches/BranchOverview';
 
 const EmptyOverview = lazyLoadComponent(() => import('./EmptyOverview'));
diff --git a/server/sonar-web/src/main/js/apps/overview/components/IssueRating.tsx b/server/sonar-web/src/main/js/apps/overview/components/IssueRating.tsx
index ec83f1ab978..2eee2295c08 100644
--- a/server/sonar-web/src/main/js/apps/overview/components/IssueRating.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/components/IssueRating.tsx
@@ -19,7 +19,8 @@
  */
 import * as React from 'react';
 import Tooltip from '../../../components/controls/Tooltip';
-import { getLeakValue, getRatingTooltip } from '../../../components/measure/utils';
+import RatingTooltipContent from '../../../components/measure/RatingTooltipContent';
+import { getLeakValue } from '../../../components/measure/utils';
 import DrilldownLink from '../../../components/shared/DrilldownLink';
 import Rating from '../../../components/ui/Rating';
 import { findMeasure } from '../../../helpers/measures';
@@ -50,10 +51,9 @@ function renderRatingLink(props: IssueRatingProps) {
   }
 
   const value = measure && (useDiffMetric ? getLeakValue(measure) : measure.value);
-  const tooltip = value && getRatingTooltip(rating, Number(value));
 
   return (
-    <Tooltip overlay={tooltip}>
+    <Tooltip overlay={value && <RatingTooltipContent metricKey={rating} value={value} />}>
       <span>
         <DrilldownLink
           branchLike={branchLike}
diff --git a/server/sonar-web/src/main/js/apps/overview/components/__tests__/__snapshots__/IssueRating-test.tsx.snap b/server/sonar-web/src/main/js/apps/overview/components/__tests__/__snapshots__/IssueRating-test.tsx.snap
index f8f24334651..6bc60fbd24e 100644
--- a/server/sonar-web/src/main/js/apps/overview/components/__tests__/__snapshots__/IssueRating-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/overview/components/__tests__/__snapshots__/IssueRating-test.tsx.snap
@@ -8,7 +8,12 @@ exports[`should render correctly for bugs 1`] = `
     metric_domain.Reliability
   </span>
   <Tooltip
-    overlay="metric.reliability_rating.tooltip.A"
+    overlay={
+      <withAppStateContext(RatingTooltipContent)
+        metricKey="reliability_rating"
+        value="1.0"
+      />
+    }
   >
     <span>
       <DrilldownLink
@@ -43,7 +48,12 @@ exports[`should render correctly for bugs 2`] = `
     metric_domain.Reliability
   </span>
   <Tooltip
-    overlay="metric.reliability_rating.tooltip.A"
+    overlay={
+      <withAppStateContext(RatingTooltipContent)
+        metricKey="new_reliability_rating"
+        value="1.0"
+      />
+    }
   >
     <span>
       <DrilldownLink
@@ -78,7 +88,12 @@ exports[`should render correctly for code smells 1`] = `
     metric_domain.Maintainability
   </span>
   <Tooltip
-    overlay="metric.sqale_rating.tooltip.A.0.0%"
+    overlay={
+      <withAppStateContext(RatingTooltipContent)
+        metricKey="sqale_rating"
+        value="1.0"
+      />
+    }
   >
     <span>
       <DrilldownLink
@@ -113,7 +128,12 @@ exports[`should render correctly for code smells 2`] = `
     metric_domain.Maintainability
   </span>
   <Tooltip
-    overlay="metric.sqale_rating.tooltip.A.0.0%"
+    overlay={
+      <withAppStateContext(RatingTooltipContent)
+        metricKey="new_maintainability_rating"
+        value="1.0"
+      />
+    }
   >
     <span>
       <DrilldownLink
@@ -148,7 +168,12 @@ exports[`should render correctly for vulnerabilities 1`] = `
     metric_domain.Security
   </span>
   <Tooltip
-    overlay="metric.security_rating.tooltip.A"
+    overlay={
+      <withAppStateContext(RatingTooltipContent)
+        metricKey="security_rating"
+        value="1.0"
+      />
+    }
   >
     <span>
       <DrilldownLink
@@ -183,7 +208,12 @@ exports[`should render correctly for vulnerabilities 2`] = `
     metric_domain.Security
   </span>
   <Tooltip
-    overlay="metric.security_rating.tooltip.A"
+    overlay={
+      <withAppStateContext(RatingTooltipContent)
+        metricKey="new_security_rating"
+        value="1.0"
+      />
+    }
   >
     <span>
       <DrilldownLink
diff --git a/server/sonar-web/src/main/js/apps/permission-templates/components/App.tsx b/server/sonar-web/src/main/js/apps/permission-templates/components/App.tsx
index f5fea8b899a..178579337eb 100644
--- a/server/sonar-web/src/main/js/apps/permission-templates/components/App.tsx
+++ b/server/sonar-web/src/main/js/apps/permission-templates/components/App.tsx
@@ -24,7 +24,8 @@ import { getPermissionTemplates } from '../../../api/permissions';
 import withAppStateContext from '../../../app/components/app-state/withAppStateContext';
 import Suggestions from '../../../app/components/embed-docs-modal/Suggestions';
 import { translate } from '../../../helpers/l10n';
-import { AppState, Permission, PermissionTemplate } from '../../../types/types';
+import { AppState } from '../../../types/appstate';
+import { Permission, PermissionTemplate } from '../../../types/types';
 import '../../permissions/styles.css';
 import { mergeDefaultsToTemplates, mergePermissionsToTemplates, sortPermissions } from '../utils';
 import Home from './Home';
diff --git a/server/sonar-web/src/main/js/apps/permissions/global/components/AllHoldersList.tsx b/server/sonar-web/src/main/js/apps/permissions/global/components/AllHoldersList.tsx
index 0f2d5f98748..8c4a4eb19f0 100644
--- a/server/sonar-web/src/main/js/apps/permissions/global/components/AllHoldersList.tsx
+++ b/server/sonar-web/src/main/js/apps/permissions/global/components/AllHoldersList.tsx
@@ -20,8 +20,9 @@
 import * as React from 'react';
 import withAppStateContext from '../../../../app/components/app-state/withAppStateContext';
 import ListFooter from '../../../../components/controls/ListFooter';
+import { AppState } from '../../../../types/appstate';
 import { ComponentQualifier } from '../../../../types/component';
-import { AppState, Paging, PermissionGroup, PermissionUser } from '../../../../types/types';
+import { Paging, PermissionGroup, PermissionUser } from '../../../../types/types';
 import HoldersList from '../../shared/components/HoldersList';
 import SearchForm from '../../shared/components/SearchForm';
 import {
diff --git a/server/sonar-web/src/main/js/apps/permissions/shared/components/__tests__/__snapshots__/UserHolder-test.tsx.snap b/server/sonar-web/src/main/js/apps/permissions/shared/components/__tests__/__snapshots__/UserHolder-test.tsx.snap
index a132c867d35..10307a9b053 100644
--- a/server/sonar-web/src/main/js/apps/permissions/shared/components/__tests__/__snapshots__/UserHolder-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/permissions/shared/components/__tests__/__snapshots__/UserHolder-test.tsx.snap
@@ -90,7 +90,7 @@ exports[`should render correctly: default 1`] = `
     <div
       className="display-flex-center"
     >
-      <Connect(Avatar)
+      <withAppStateContext(Avatar)
         className="text-middle big-spacer-right flex-0"
         name="John Doe"
         size={36}
diff --git a/server/sonar-web/src/main/js/apps/projectBaseline/components/App.tsx b/server/sonar-web/src/main/js/apps/projectBaseline/components/App.tsx
index d515f2294e7..4c123c72f03 100644
--- a/server/sonar-web/src/main/js/apps/projectBaseline/components/App.tsx
+++ b/server/sonar-web/src/main/js/apps/projectBaseline/components/App.tsx
@@ -27,9 +27,9 @@ import AlertSuccessIcon from '../../../components/icons/AlertSuccessIcon';
 import DeferredSpinner from '../../../components/ui/DeferredSpinner';
 import { isBranch, sortBranches } from '../../../helpers/branch-like';
 import { translate } from '../../../helpers/l10n';
+import { AppState } from '../../../types/appstate';
 import { Branch, BranchLike } from '../../../types/branch-like';
 import {
-  AppState,
   Component,
   NewCodePeriod,
   NewCodePeriodSettingType,
diff --git a/server/sonar-web/src/main/js/apps/projectBranches/components/LifetimeInformation.tsx b/server/sonar-web/src/main/js/apps/projectBranches/components/LifetimeInformation.tsx
index 3e855acdfa6..aabaf35c730 100644
--- a/server/sonar-web/src/main/js/apps/projectBranches/components/LifetimeInformation.tsx
+++ b/server/sonar-web/src/main/js/apps/projectBranches/components/LifetimeInformation.tsx
@@ -20,8 +20,8 @@
 import * as React from 'react';
 import { getValues } from '../../../api/settings';
 import withAppStateContext from '../../../app/components/app-state/withAppStateContext';
+import { AppState } from '../../../types/appstate';
 import { SettingsKey } from '../../../types/settings';
-import { AppState } from '../../../types/types';
 import LifetimeInformationRenderer from './LifetimeInformationRenderer';
 
 interface Props {
diff --git a/server/sonar-web/src/main/js/apps/projectDump/ProjectDumpApp.tsx b/server/sonar-web/src/main/js/apps/projectDump/ProjectDumpApp.tsx
index cd067423adf..29043ef9a85 100644
--- a/server/sonar-web/src/main/js/apps/projectDump/ProjectDumpApp.tsx
+++ b/server/sonar-web/src/main/js/apps/projectDump/ProjectDumpApp.tsx
@@ -23,9 +23,10 @@ import { getStatus } from '../../api/project-dump';
 import withAppStateContext from '../../app/components/app-state/withAppStateContext';
 import throwGlobalError from '../../app/utils/throwGlobalError';
 import { translate } from '../../helpers/l10n';
+import { AppState } from '../../types/appstate';
 import { DumpStatus, DumpTask } from '../../types/project-dump';
 import { TaskStatuses, TaskTypes } from '../../types/tasks';
-import { AppState, Component } from '../../types/types';
+import { Component } from '../../types/types';
 import Export from './components/Export';
 import Import from './components/Import';
 import './styles.css';
diff --git a/server/sonar-web/src/main/js/apps/projects/components/AllProjects.tsx b/server/sonar-web/src/main/js/apps/projects/components/AllProjects.tsx
index 38fa2a56eaf..ed14cc84902 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/AllProjects.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/AllProjects.tsx
@@ -33,8 +33,9 @@ import { translate } from '../../../helpers/l10n';
 import { addSideBarClass, removeSideBarClass } from '../../../helpers/pages';
 import { get, save } from '../../../helpers/storage';
 import { isLoggedIn } from '../../../helpers/users';
+import { AppState } from '../../../types/appstate';
 import { ComponentQualifier } from '../../../types/component';
-import { AppState, CurrentUser, RawQuery } from '../../../types/types';
+import { CurrentUser, RawQuery } from '../../../types/types';
 import { hasFilterParams, hasViewParams, parseUrlQuery, Query } from '../query';
 import '../styles.css';
 import { Facets, Project } from '../types';
diff --git a/server/sonar-web/src/main/js/apps/projects/components/ApplicationCreation.tsx b/server/sonar-web/src/main/js/apps/projects/components/ApplicationCreation.tsx
index 4fe00dc2785..dac6645952c 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/ApplicationCreation.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/ApplicationCreation.tsx
@@ -27,9 +27,10 @@ import { Router, withRouter } from '../../../components/hoc/withRouter';
 import { translate } from '../../../helpers/l10n';
 import { getComponentAdminUrl, getComponentOverviewUrl } from '../../../helpers/urls';
 import { hasGlobalPermission } from '../../../helpers/users';
+import { AppState } from '../../../types/appstate';
 import { ComponentQualifier } from '../../../types/component';
 import { Permissions } from '../../../types/permissions';
-import { AppState, LoggedInUser } from '../../../types/types';
+import { LoggedInUser } from '../../../types/types';
 
 export interface ApplicationCreationProps {
   appState: AppState;
diff --git a/server/sonar-web/src/main/js/apps/projectsManagement/Search.tsx b/server/sonar-web/src/main/js/apps/projectsManagement/Search.tsx
index 4d19a37e27a..81640c8c164 100644
--- a/server/sonar-web/src/main/js/apps/projectsManagement/Search.tsx
+++ b/server/sonar-web/src/main/js/apps/projectsManagement/Search.tsx
@@ -29,7 +29,8 @@ import SearchBox from '../../components/controls/SearchBox';
 import SelectLegacy from '../../components/controls/SelectLegacy';
 import QualifierIcon from '../../components/icons/QualifierIcon';
 import { translate } from '../../helpers/l10n';
-import { AppState, Visibility } from '../../types/types';
+import { AppState } from '../../types/appstate';
+import { Visibility } from '../../types/types';
 import BulkApplyTemplateModal from './BulkApplyTemplateModal';
 import DeleteModal from './DeleteModal';
 
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 ef92de4334b..14f98297bf7 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
@@ -27,14 +27,9 @@ import ModalButton from '../../../components/controls/ModalButton';
 import { Alert } from '../../../components/ui/Alert';
 import { getLocalizedMetricName, translate } from '../../../helpers/l10n';
 import { isDiffMetric } from '../../../helpers/measures';
+import { AppState } from '../../../types/appstate';
 import { MetricKey } from '../../../types/metrics';
-import {
-  AppState,
-  Condition as ConditionType,
-  Dict,
-  Metric,
-  QualityGate
-} from '../../../types/types';
+import { Condition as ConditionType, Dict, Metric, QualityGate } from '../../../types/types';
 import Condition from './Condition';
 import ConditionModal from './ConditionModal';
 
diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/PermissionItem-test.tsx.snap b/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/PermissionItem-test.tsx.snap
index 5ddfe0ab0bc..096ddf281a6 100644
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/PermissionItem-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/PermissionItem-test.tsx.snap
@@ -25,7 +25,7 @@ exports[`should render correctly: user 1`] = `
 <div
   className="display-flex-center permission-list-item padded"
 >
-  <Connect(Avatar)
+  <withAppStateContext(Avatar)
     className="spacer-right"
     name="John Doe"
     size={32}
diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/QualityGatePermissionsAddModalRenderer-test.tsx.snap b/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/QualityGatePermissionsAddModalRenderer-test.tsx.snap
index d479967b848..5994dbc36f5 100644
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/QualityGatePermissionsAddModalRenderer-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/QualityGatePermissionsAddModalRenderer-test.tsx.snap
@@ -334,7 +334,7 @@ exports[`should render options correctly: group 1`] = `
 
 exports[`should render options correctly: user 1`] = `
 <React.Fragment>
-  <Connect(Avatar)
+  <withAppStateContext(Avatar)
     hash="A"
     name="name"
     size={16}
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ProfilePermissionsUser-test.tsx.snap b/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ProfilePermissionsUser-test.tsx.snap
index 305d0624f07..fc1970f5c72 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ProfilePermissionsUser-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ProfilePermissionsUser-test.tsx.snap
@@ -8,7 +8,7 @@ exports[`renders 1`] = `
     className="pull-right spacer-top spacer-left spacer-right button-small"
     onClick={[Function]}
   />
-  <Connect(Avatar)
+  <withAppStateContext(Avatar)
     className="pull-left spacer-right"
     name="Luke Skywalker"
     size={32}
diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotReviewHistory-test.tsx.snap b/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotReviewHistory-test.tsx.snap
index 2475a3723b9..125a1fba9b4 100644
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotReviewHistory-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotReviewHistory-test.tsx.snap
@@ -10,7 +10,7 @@ exports[`should render correctly: default 1`] = `
       <div
         className="display-flex-center"
       >
-        <Connect(Avatar)
+        <withAppStateContext(Avatar)
           className="little-spacer-right"
           name="Luke Skywalker"
           size={20}
@@ -49,7 +49,7 @@ exports[`should render correctly: default 1`] = `
       <div
         className="display-flex-center"
       >
-        <Connect(Avatar)
+        <withAppStateContext(Avatar)
           className="little-spacer-right"
           name="Luke Skywalker"
           size={20}
@@ -88,7 +88,7 @@ exports[`should render correctly: default 1`] = `
       <div
         className="display-flex-center"
       >
-        <Connect(Avatar)
+        <withAppStateContext(Avatar)
           className="little-spacer-right"
           name="John Doe"
           size={20}
@@ -130,7 +130,7 @@ exports[`should render correctly: default 1`] = `
       <div
         className="display-flex-center"
       >
-        <Connect(Avatar)
+        <withAppStateContext(Avatar)
           className="little-spacer-right"
           name="John Doe"
           size={20}
@@ -172,7 +172,7 @@ exports[`should render correctly: default 1`] = `
       <div
         className="display-flex-center"
       >
-        <Connect(Avatar)
+        <withAppStateContext(Avatar)
           className="little-spacer-right"
           name="John Doe"
           size={20}
@@ -255,7 +255,7 @@ exports[`should render correctly: show full list 1`] = `
       <div
         className="display-flex-center"
       >
-        <Connect(Avatar)
+        <withAppStateContext(Avatar)
           className="little-spacer-right"
           name="Luke Skywalker"
           size={20}
@@ -294,7 +294,7 @@ exports[`should render correctly: show full list 1`] = `
       <div
         className="display-flex-center"
       >
-        <Connect(Avatar)
+        <withAppStateContext(Avatar)
           className="little-spacer-right"
           name="Luke Skywalker"
           size={20}
@@ -333,7 +333,7 @@ exports[`should render correctly: show full list 1`] = `
       <div
         className="display-flex-center"
       >
-        <Connect(Avatar)
+        <withAppStateContext(Avatar)
           className="little-spacer-right"
           name="John Doe"
           size={20}
@@ -375,7 +375,7 @@ exports[`should render correctly: show full list 1`] = `
       <div
         className="display-flex-center"
       >
-        <Connect(Avatar)
+        <withAppStateContext(Avatar)
           className="little-spacer-right"
           name="John Doe"
           size={20}
@@ -417,7 +417,7 @@ exports[`should render correctly: show full list 1`] = `
       <div
         className="display-flex-center"
       >
-        <Connect(Avatar)
+        <withAppStateContext(Avatar)
           className="little-spacer-right"
           name="John Doe"
           size={20}
@@ -459,7 +459,7 @@ exports[`should render correctly: show full list 1`] = `
       <div
         className="display-flex-center"
       >
-        <Connect(Avatar)
+        <withAppStateContext(Avatar)
           className="little-spacer-right"
           name="john.doe"
           size={20}
@@ -501,7 +501,7 @@ exports[`should render correctly: show full list 1`] = `
       <div
         className="display-flex-center"
       >
-        <Connect(Avatar)
+        <withAppStateContext(Avatar)
           className="little-spacer-right"
           name="John Doe"
           size={20}
@@ -592,7 +592,7 @@ exports[`should render correctly: show full list 1`] = `
       <div
         className="display-flex-center"
       >
-        <Connect(Avatar)
+        <withAppStateContext(Avatar)
           className="little-spacer-right"
           name="John Doe"
           size={20}
diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/assignee/__tests__/__snapshots__/AssigneeSelectionRenderer-test.tsx.snap b/server/sonar-web/src/main/js/apps/security-hotspots/components/assignee/__tests__/__snapshots__/AssigneeSelectionRenderer-test.tsx.snap
index 087a963a423..7d05daab361 100644
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/assignee/__tests__/__snapshots__/AssigneeSelectionRenderer-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/assignee/__tests__/__snapshots__/AssigneeSelectionRenderer-test.tsx.snap
@@ -71,7 +71,7 @@ exports[`should render correctly: open with results 1`] = `
         key="john.doe"
         onClick={[Function]}
       >
-        <Connect(Avatar)
+        <withAppStateContext(Avatar)
           className="spacer-right"
           name="John Doe"
           size={16}
@@ -83,7 +83,7 @@ exports[`should render correctly: open with results 1`] = `
         key="highlighted"
         onClick={[Function]}
       >
-        <Connect(Avatar)
+        <withAppStateContext(Avatar)
           className="spacer-right"
           name="John Doe"
           size={16}
diff --git a/server/sonar-web/src/main/js/apps/settings/components/AllCategoriesList.tsx b/server/sonar-web/src/main/js/apps/settings/components/AllCategoriesList.tsx
index 69722c98a05..bfc388ce5b2 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/AllCategoriesList.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/AllCategoriesList.tsx
@@ -23,7 +23,8 @@ import * as React from 'react';
 import { IndexLink } from 'react-router';
 import withAppStateContext from '../../../app/components/app-state/withAppStateContext';
 import { getGlobalSettingsUrl, getProjectSettingsUrl } from '../../../helpers/urls';
-import { AppState, Component } from '../../../types/types';
+import { AppState } from '../../../types/appstate';
+import { Component } from '../../../types/types';
 import { getCategoryName } from '../utils';
 import { ADDITIONAL_CATEGORIES } from './AdditionalCategories';
 import CATEGORY_OVERRIDES from './CategoryOverrides';
diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmIntegration.tsx b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmIntegration.tsx
index 7a54c0bc12b..dd57a2c7464 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmIntegration.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmIntegration.tsx
@@ -34,8 +34,9 @@ import {
   AlmSettingsBindingStatus,
   AlmSettingsBindingStatusType
 } from '../../../../types/alm-settings';
+import { AppState } from '../../../../types/appstate';
 import { ExtendedSettingDefinition } from '../../../../types/settings';
-import { AppState, Dict } from '../../../../types/types';
+import { Dict } from '../../../../types/types';
 import AlmIntegrationRenderer from './AlmIntegrationRenderer';
 
 interface Props extends Pick<WithRouterProps, 'location' | 'router'> {
diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/CreationTooltip.tsx b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/CreationTooltip.tsx
index 9f53a41396f..eaca7a893d2 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/CreationTooltip.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/CreationTooltip.tsx
@@ -24,8 +24,8 @@ import Tooltip from '../../../../components/controls/Tooltip';
 import { getEdition, getEditionUrl } from '../../../../helpers/editions';
 import { translate } from '../../../../helpers/l10n';
 import { AlmKeys } from '../../../../types/alm-settings';
+import { AppState } from '../../../../types/appstate';
 import { EditionKey } from '../../../../types/editions';
-import { AppState } from '../../../../types/types';
 
 export interface CreationTooltipProps {
   alm: AlmKeys;
diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecorationBinding/AlmSpecificForm.tsx b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecorationBinding/AlmSpecificForm.tsx
index cd60e263b9d..2da3d4765a7 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecorationBinding/AlmSpecificForm.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecorationBinding/AlmSpecificForm.tsx
@@ -32,8 +32,9 @@ import {
   AlmSettingsInstance,
   ProjectAlmBindingResponse
 } from '../../../../types/alm-settings';
+import { AppState } from '../../../../types/appstate';
 import { EditionKey } from '../../../../types/editions';
-import { AppState, Dict } from '../../../../types/types';
+import { Dict } from '../../../../types/types';
 
 export interface AlmSpecificFormProps {
   alm: AlmKeys;
diff --git a/server/sonar-web/src/main/js/apps/settings/store/__tests__/actions-test.ts b/server/sonar-web/src/main/js/apps/settings/store/__tests__/actions-test.ts
deleted file mode 100644
index 5fc7dd885cf..00000000000
--- a/server/sonar-web/src/main/js/apps/settings/store/__tests__/actions-test.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2022 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import { fetchValues, setValues } from '../actions';
-
-jest.mock('../../../../api/settings', () => {
-  const { mockSettingValue } = jest.requireActual('../../../../helpers/mocks/settings');
-  return {
-    getValues: jest.fn().mockResolvedValue([mockSettingValue()])
-  };
-});
-
-it('should setValues correctly', () => {
-  const dispatch = jest.fn();
-  setValues(['test'], [{ key: 'test', value: 'foo' }])(dispatch);
-  expect(dispatch).toHaveBeenCalledWith({
-    component: undefined,
-    settings: [
-      {
-        key: 'test',
-        value: 'foo'
-      }
-    ],
-    type: 'RECEIVE_VALUES',
-    updateKeys: ['test']
-  });
-});
-
-it('should fetchValue correclty', async () => {
-  const dispatch = jest.fn();
-  await fetchValues(['test'], 'foo')(dispatch);
-  expect(dispatch).toHaveBeenCalledWith({
-    component: 'foo',
-    settings: [{ key: 'test' }],
-    type: 'RECEIVE_VALUES',
-    updateKeys: ['test']
-  });
-  expect(dispatch).toHaveBeenCalledWith({ type: 'CLOSE_ALL_GLOBAL_MESSAGES' });
-});
diff --git a/server/sonar-web/src/main/js/apps/settings/store/actions.ts b/server/sonar-web/src/main/js/apps/settings/store/actions.ts
deleted file mode 100644
index 2c5430e48e7..00000000000
--- a/server/sonar-web/src/main/js/apps/settings/store/actions.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2022 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import { Dispatch } from 'redux';
-import { getValues } from '../../../api/settings';
-import { closeAllGlobalMessages } from '../../../store/globalMessages';
-import { receiveValues } from './values';
-
-export function fetchValues(keys: string[], component?: string) {
-  return (dispatch: Dispatch) =>
-    getValues({ keys: keys.join(), component }).then(settings => {
-      dispatch(receiveValues(keys, settings, component));
-      dispatch(closeAllGlobalMessages());
-    });
-}
-
-export function setValues(
-  keys: string[],
-  settings: Array<{ key: string; value?: string }>,
-  component?: string
-) {
-  return (dispatch: Dispatch) => dispatch(receiveValues(keys, settings, component));
-}
diff --git a/server/sonar-web/src/main/js/apps/settings/store/rootReducer.ts b/server/sonar-web/src/main/js/apps/settings/store/rootReducer.ts
deleted file mode 100644
index 4bc466337b5..00000000000
--- a/server/sonar-web/src/main/js/apps/settings/store/rootReducer.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2022 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import { combineReducers } from 'redux';
-import values, * as fromValues from './values';
-
-interface State {
-  values: fromValues.State;
-}
-
-export default combineReducers({ values });
-
-export function getValue(state: State, key: string, component?: string) {
-  return fromValues.getValue(state.values, key, component);
-}
diff --git a/server/sonar-web/src/main/js/apps/settings/store/values.ts b/server/sonar-web/src/main/js/apps/settings/store/values.ts
deleted file mode 100644
index 478a873c02d..00000000000
--- a/server/sonar-web/src/main/js/apps/settings/store/values.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2022 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import { keyBy, omit } from 'lodash';
-import { combineReducers } from 'redux';
-import { ActionType } from '../../../store/utils/actions';
-import { SettingValue } from '../../../types/settings';
-import { Dict } from '../../../types/types';
-
-enum Actions {
-  receiveValues = 'RECEIVE_VALUES'
-}
-
-type Action = ActionType<typeof receiveValues, Actions.receiveValues>;
-
-type SettingsState = Dict<SettingValue>;
-
-export interface State {
-  components: Dict<SettingsState>;
-  global: SettingsState;
-}
-
-export function receiveValues(
-  updateKeys: string[],
-  settings: Array<{ key: string; value?: string }>,
-  component?: string
-) {
-  return { type: Actions.receiveValues, updateKeys, settings, component };
-}
-
-function components(state: State['components'] = {}, action: Action) {
-  const { component: key } = action;
-  if (!key) {
-    return state;
-  }
-  if (action.type === Actions.receiveValues) {
-    const settingsByKey = keyBy(action.settings, 'key');
-    return { ...state, [key]: { ...omit(state[key] || {}, action.updateKeys), ...settingsByKey } };
-  }
-  return state;
-}
-
-function global(state: State['components'] = {}, action: Action) {
-  if (action.type === Actions.receiveValues) {
-    if (action.component) {
-      return state;
-    }
-    const settingsByKey = keyBy(action.settings, 'key');
-    return { ...omit(state, action.updateKeys), ...settingsByKey };
-  }
-
-  return state;
-}
-
-export default combineReducers({ components, global });
-
-export function getValue(state: State, key: string, component?: string): SettingValue | undefined {
-  if (component) {
-    return state.components[component] && state.components[component][key];
-  }
-  return state.global[key];
-}
diff --git a/server/sonar-web/src/main/js/apps/system/components/PageHeader.tsx b/server/sonar-web/src/main/js/apps/system/components/PageHeader.tsx
index 486c80de4c3..b36b03b3c9f 100644
--- a/server/sonar-web/src/main/js/apps/system/components/PageHeader.tsx
+++ b/server/sonar-web/src/main/js/apps/system/components/PageHeader.tsx
@@ -23,7 +23,7 @@ import { ClipboardButton } from '../../../components/controls/clipboard';
 import { Alert } from '../../../components/ui/Alert';
 import { toShortNotSoISOString } from '../../../helpers/dates';
 import { translate } from '../../../helpers/l10n';
-import { AppState } from '../../../types/types';
+import { AppState } from '../../../types/appstate';
 import PageActions from './PageActions';
 
 export interface Props {
diff --git a/server/sonar-web/src/main/js/apps/users/components/__tests__/__snapshots__/UserListItem-test.tsx.snap b/server/sonar-web/src/main/js/apps/users/components/__tests__/__snapshots__/UserListItem-test.tsx.snap
index 5e34a0c7b61..9d62cbde539 100644
--- a/server/sonar-web/src/main/js/apps/users/components/__tests__/__snapshots__/UserListItem-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/users/components/__tests__/__snapshots__/UserListItem-test.tsx.snap
@@ -5,7 +5,7 @@ exports[`should render correctly 1`] = `
   <td
     className="thin nowrap text-middle"
   >
-    <Connect(Avatar)
+    <withAppStateContext(Avatar)
       name="One"
       size={36}
     />
@@ -92,7 +92,7 @@ exports[`should render correctly without last connection date 1`] = `
   <td
     className="thin nowrap text-middle"
   >
-    <Connect(Avatar)
+    <withAppStateContext(Avatar)
       name="One"
       size={36}
     />
diff --git a/server/sonar-web/src/main/js/apps/users/components/__tests__/__snapshots__/UsersSelectSearch-test.tsx.snap b/server/sonar-web/src/main/js/apps/users/components/__tests__/__snapshots__/UsersSelectSearch-test.tsx.snap
index c3e1c99564e..0d6493812cf 100644
--- a/server/sonar-web/src/main/js/apps/users/components/__tests__/__snapshots__/UsersSelectSearch-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/users/components/__tests__/__snapshots__/UsersSelectSearch-test.tsx.snap
@@ -88,7 +88,7 @@ exports[`UsersSelectSearchOption should render correctly with email instead of h
   role="listitem"
   title="Administrator"
 >
-  <Connect(Avatar)
+  <withAppStateContext(Avatar)
     name="Administrator"
     size={16}
   />
@@ -113,7 +113,7 @@ exports[`UsersSelectSearchOption should render correctly without all parameters
   role="listitem"
   title="Administrator"
 >
-  <Connect(Avatar)
+  <withAppStateContext(Avatar)
     hash="7daf6c79d4802916d83f6266e24850af"
     name="Administrator"
     size={16}
@@ -139,7 +139,7 @@ exports[`UsersSelectSearchValue should render correctly with a user 1`] = `
   <div
     className="Select-value-label"
   >
-    <Connect(Avatar)
+    <withAppStateContext(Avatar)
       hash="7daf6c79d4802916d83f6266e24850af"
       name="Administrator"
       size={16}
@@ -166,7 +166,7 @@ exports[`UsersSelectSearchValue should render correctly with email instead of ha
   <div
     className="Select-value-label"
   >
-    <Connect(Avatar)
+    <withAppStateContext(Avatar)
       name="Administrator"
       size={16}
     />