SC-704 Extract components into sonar-ui-common (#1714)

* SC-704 Extract icons components to sonar-ui-common * Better typings for theme * Use sonar-ui-common in extensions * Extract some helpers * Extract l10n helper to sonar-ui-common * Extract requests helper to sonar-ui-common * Extract part of urls helper * Move buttons, Tooltips and ScreenPositionFixers * Move modal related components * Move IdentityProviderLink * Move GenericAvatar * Move SizeRating * Move charts and move deps to peerDeps * Move nav * Move formatMeasure * Move Rating * Move PageActions * Move the rest of ui components * Move more controls components * Include theme inside extension build * Add missing theme context provider in extensions * Update react to same version everywhere * Update sonar-ui-common * Update eslint configuration
author: Grégoire Aubert <gregoire.aubert@sonarsource.com> 2019-07-11 15:15:35 +0200
committer: SonarTech <sonartech@sonarsource.com> 2019-07-11 20:21:09 +0200
commit: 60226e8e297485bcbe384dc766930da0a5a1c079 (patch)
tree: 84140c9f6d8d0828dbe4db676f8a06a5d6b4b077 /server/sonar-web/src/main/js/app/components
parent: 7ae6f6f0968febebf763cf073b09cb6dd2b218d7 (diff)
download: sonarqube-60226e8e297485bcbe384dc766930da0a5a1c079.tar.gz
sonarqube-60226e8e297485bcbe384dc766930da0a5a1c079.zip
62 files changed, 220 insertions, 204 deletions
diff --git a/server/sonar-web/src/main/js/app/components/AdminContainer.tsx b/server/sonar-web/src/main/js/app/components/AdminContainer.tsx
index 51ead6903c8..701043dc7e3 100644
--- a/server/sonar-web/src/main/js/app/components/AdminContainer.tsx
+++ b/server/sonar-web/src/main/js/app/components/AdminContainer.tsx
@@ -20,14 +20,14 @@
 import * as React from 'react';
 import Helmet from 'react-helmet';
 import { connect } from 'react-redux';
+import { translate } from 'sonar-ui-common/helpers/l10n';
 import AdminContext, { defaultPendingPlugins, defaultSystemStatus } from './AdminContext';
 import SettingsNav from './nav/settings/SettingsNav';
 import { getAppState, Store } from '../../store/rootReducer';
 import { getSettingsNavigation } from '../../api/nav';
 import { setAdminPages } from '../../store/appState';
-import { translate } from '../../helpers/l10n';
 import { PluginPendingResult, getPendingPlugins } from '../../api/plugins';
-import handleRequiredAuthorization from '../utils/handleRequiredAuthorization';
+import handleRequiredAuthorization from '../../app/utils/handleRequiredAuthorization';
 import { getSystemStatus, waitSystemUPStatus } from '../../api/system';
 
 interface Props {
diff --git a/server/sonar-web/src/main/js/app/components/App.tsx b/server/sonar-web/src/main/js/app/components/App.tsx
index 82f566cbcee..3c3a3febc73 100644
--- a/server/sonar-web/src/main/js/app/components/App.tsx
+++ b/server/sonar-web/src/main/js/app/components/App.tsx
@@ -19,10 +19,10 @@
  */
 import * as React from 'react';
 import { connect } from 'react-redux';
+import { lazyLoad } from 'sonar-ui-common/components/lazyLoad';
 import { fetchLanguages } from '../../store/rootActions';
 import { fetchMyOrganizations } from '../../apps/account/organizations/actions';
 import { isSonarCloud } from '../../helpers/system';
-import { lazyLoad } from '../../components/lazyLoad';
 import { getCurrentUser, getAppState, getGlobalSettingValue, Store } from '../../store/rootReducer';
 import { isLoggedIn } from '../../helpers/users';
 
diff --git a/server/sonar-web/src/main/js/app/components/ComponentContainerNotFound.tsx b/server/sonar-web/src/main/js/app/components/ComponentContainerNotFound.tsx
index ecb3ab1716c..f0d6573985c 100644
--- a/server/sonar-web/src/main/js/app/components/ComponentContainerNotFound.tsx
+++ b/server/sonar-web/src/main/js/app/components/ComponentContainerNotFound.tsx
@@ -20,7 +20,7 @@
 import * as React from 'react';
 import { Helmet } from 'react-helmet';
 import { Link } from 'react-router';
-import { translate } from '../../helpers/l10n';
+import { translate } from 'sonar-ui-common/helpers/l10n';
 
 export default function ComponentContainerNotFound() {
   return (
diff --git a/server/sonar-web/src/main/js/app/components/GlobalFooter.tsx b/server/sonar-web/src/main/js/app/components/GlobalFooter.tsx
index 56354293a3f..f4eab307286 100644
--- a/server/sonar-web/src/main/js/app/components/GlobalFooter.tsx
+++ b/server/sonar-web/src/main/js/app/components/GlobalFooter.tsx
@@ -19,13 +19,13 @@
  */
 import * as React from 'react';
 import { Link } from 'react-router';
+import { translate, translateWithParameters } from 'sonar-ui-common/helpers/l10n';
+import { Alert } from 'sonar-ui-common/components/ui/Alert';
 import GlobalFooterSonarCloud from './GlobalFooterSonarCloud';
 import GlobalFooterBranding from './GlobalFooterBranding';
 import InstanceMessage from '../../components/common/InstanceMessage';
 import { EDITIONS } from '../../apps/marketplace/utils';
-import { translate, translateWithParameters } from '../../helpers/l10n';
 import { isSonarCloud } from '../../helpers/system';
-import { Alert } from '../../components/ui/Alert';
 
 interface Props {
   hideLoggedInInfo?: boolean;
diff --git a/server/sonar-web/src/main/js/app/components/GlobalFooterSonarCloud.tsx b/server/sonar-web/src/main/js/app/components/GlobalFooterSonarCloud.tsx
index 25fa55bbd65..98b9fe73096 100644
--- a/server/sonar-web/src/main/js/app/components/GlobalFooterSonarCloud.tsx
+++ b/server/sonar-web/src/main/js/app/components/GlobalFooterSonarCloud.tsx
@@ -20,7 +20,7 @@
 import * as React from 'react';
 import * as getYear from 'date-fns/get_year';
 import { Link } from 'react-router';
-import { translate } from '../../helpers/l10n';
+import { translate } from 'sonar-ui-common/helpers/l10n';
 
 export default function GlobalFooterSonarCloud() {
   return (
diff --git a/server/sonar-web/src/main/js/app/components/GlobalMessagesContainer.tsx b/server/sonar-web/src/main/js/app/components/GlobalMessagesContainer.tsx
index cc34c55d750..0c8c209569c 100644
--- a/server/sonar-web/src/main/js/app/components/GlobalMessagesContainer.tsx
+++ b/server/sonar-web/src/main/js/app/components/GlobalMessagesContainer.tsx
@@ -18,7 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import { connect } from 'react-redux';
-import GlobalMessages from '../../components/controls/GlobalMessages';
+import GlobalMessages from 'sonar-ui-common/components/controls/GlobalMessages';
 import { getGlobalMessages, Store } from '../../store/rootReducer';
 import { closeGlobalMessage } from '../../store/globalMessages';
 
diff --git a/server/sonar-web/src/main/js/app/components/MarkdownHelp.tsx b/server/sonar-web/src/main/js/app/components/MarkdownHelp.tsx
index 1d68d374012..3c12bfccdc3 100644
--- a/server/sonar-web/src/main/js/app/components/MarkdownHelp.tsx
+++ b/server/sonar-web/src/main/js/app/components/MarkdownHelp.tsx
@@ -38,13 +38,13 @@ export default function MarkdownHelp() {
             </td>
           </tr>
           <tr>
-            <td>{'http://sonarqube.org'}</td>
+            <td>http://sonarqube.org</td>
             <td className="markdown">
-              <a href="http://sonarqube.org">{'http://sonarqube.org'}</a>
+              <a href="http://sonarqube.org">http://sonarqube.org</a>
             </td>
           </tr>
           <tr>
-            <td className="text-top">{'[SonarQube™ Home Page](http://www.sonarqube.org)'}</td>
+            <td className="text-top">[SonarQube™ Home Page](http://www.sonarqube.org)</td>
             <td className="markdown text-top">
               <a href="http://www.sonarqube.org" rel="noopener noreferrer" target="_blank">
                 SonarQube™ Home Page
diff --git a/server/sonar-web/src/main/js/app/components/NotFound.tsx b/server/sonar-web/src/main/js/app/components/NotFound.tsx
index f474c4bf7f3..4468ff166ba 100644
--- a/server/sonar-web/src/main/js/app/components/NotFound.tsx
+++ b/server/sonar-web/src/main/js/app/components/NotFound.tsx
@@ -20,8 +20,8 @@
 import * as React from 'react';
 import { Helmet } from 'react-helmet';
 import { Link } from 'react-router';
+import { translate } from 'sonar-ui-common/helpers/l10n';
 import SimpleContainer from './SimpleContainer';
-import { translate } from '../../helpers/l10n';
 
 interface Props {
   withContainer?: boolean;
diff --git a/server/sonar-web/src/main/js/app/components/RecentHistory.ts b/server/sonar-web/src/main/js/app/components/RecentHistory.ts
index e95abef5a18..d5def992dcc 100644
--- a/server/sonar-web/src/main/js/app/components/RecentHistory.ts
+++ b/server/sonar-web/src/main/js/app/components/RecentHistory.ts
@@ -17,7 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import { get, remove, save } from '../../helpers/storage';
+import { get, remove, save } from 'sonar-ui-common/helpers/storage';
 
 const RECENT_HISTORY = 'sonar_recent_history';
 const HISTORY_LIMIT = 10;
diff --git a/server/sonar-web/src/main/js/app/components/SimpleContainer.tsx b/server/sonar-web/src/main/js/app/components/SimpleContainer.tsx
index cc05e78f486..e567dde3e3d 100644
--- a/server/sonar-web/src/main/js/app/components/SimpleContainer.tsx
+++ b/server/sonar-web/src/main/js/app/components/SimpleContainer.tsx
@@ -18,9 +18,9 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import NavBar from 'sonar-ui-common/components/ui/NavBar';
 import GlobalFooterContainer from './GlobalFooterContainer';
-import * as theme from '../theme';
-import NavBar from '../../components/nav/NavBar';
+import { rawSizes } from '../theme';
 
 interface Props {
   children?: React.ReactNode;
@@ -30,7 +30,7 @@ export default function SimpleContainer({ children }: Props) {
   return (
     <div className="global-container">
       <div className="page-wrapper" id="container">
-        <NavBar className="navbar-global" height={theme.globalNavHeightRaw} />
+        <NavBar className="navbar-global" height={rawSizes.globalNavHeightRaw} />
         {children}
       </div>
       <GlobalFooterContainer />
diff --git a/server/sonar-web/src/main/js/app/components/SimpleSessionsContainer.tsx b/server/sonar-web/src/main/js/app/components/SimpleSessionsContainer.tsx
index 32965ae187d..6846dcb5338 100644
--- a/server/sonar-web/src/main/js/app/components/SimpleSessionsContainer.tsx
+++ b/server/sonar-web/src/main/js/app/components/SimpleSessionsContainer.tsx
@@ -18,8 +18,8 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import { lazyLoad } from 'sonar-ui-common/components/lazyLoad';
 import GlobalFooterContainer from './GlobalFooterContainer';
-import { lazyLoad } from '../../components/lazyLoad';
 
 const PageTracker = lazyLoad(() => import('./PageTracker'));
 
diff --git a/server/sonar-web/src/main/js/app/components/StartupModal.tsx b/server/sonar-web/src/main/js/app/components/StartupModal.tsx
index 1162ec0ad5a..a39a2053a5a 100644
--- a/server/sonar-web/src/main/js/app/components/StartupModal.tsx
+++ b/server/sonar-web/src/main/js/app/components/StartupModal.tsx
@@ -18,16 +18,17 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import * as differenceInDays from 'date-fns/difference_in_days';
 import { connect } from 'react-redux';
+import { lazyLoad } from 'sonar-ui-common/components/lazyLoad';
+import { parseDate, toShortNotSoISOString } from 'sonar-ui-common/helpers/dates';
+import { save, get } from 'sonar-ui-common/helpers/storage';
+import { hasMessage } from 'sonar-ui-common/helpers/l10n';
 import { OnboardingContext } from './OnboardingContext';
-import { differenceInDays, parseDate, toShortNotSoISOString } from '../../helpers/dates';
 import { getCurrentUser, getAppState, Store } from '../../store/rootReducer';
 import { skipOnboarding } from '../../store/users';
 import { showLicense } from '../../api/marketplace';
-import { hasMessage } from '../../helpers/l10n';
-import { save, get } from '../../helpers/storage';
 import { isSonarCloud } from '../../helpers/system';
-import { lazyLoad } from '../../components/lazyLoad';
 import { isLoggedIn } from '../../helpers/users';
 import { withRouter, Router, Location } from '../../components/hoc/withRouter';
 
diff --git a/server/sonar-web/src/main/js/app/components/__tests__/ComponentContainer-test.tsx b/server/sonar-web/src/main/js/app/components/__tests__/ComponentContainer-test.tsx
index 905e3bfe371..af44a3ed847 100644
--- a/server/sonar-web/src/main/js/app/components/__tests__/ComponentContainer-test.tsx
+++ b/server/sonar-web/src/main/js/app/components/__tests__/ComponentContainer-test.tsx
@@ -19,13 +19,13 @@
  */
 import * as React from 'react';
 import { shallow } from 'enzyme';
+import { waitAndUpdate } from 'sonar-ui-common/helpers/testUtils';
 import { ComponentContainer } from '../ComponentContainer';
 import { getBranches, getPullRequests } from '../../../api/branches';
 import { getTasksForComponent } from '../../../api/ce';
 import { getComponentData } from '../../../api/components';
 import { getComponentNavigation } from '../../../api/nav';
 import { STATUSES } from '../../../apps/background-tasks/constants';
-import { waitAndUpdate } from '../../../helpers/testUtils';
 import { isSonarCloud } from '../../../helpers/system';
 import {
   mockLocation,
diff --git a/server/sonar-web/src/main/js/app/components/__tests__/ProjectAdminContainer-test.tsx b/server/sonar-web/src/main/js/app/components/__tests__/ProjectAdminContainer-test.tsx
index 2935e1b2686..74ef1c3d5c3 100644
--- a/server/sonar-web/src/main/js/app/components/__tests__/ProjectAdminContainer-test.tsx
+++ b/server/sonar-web/src/main/js/app/components/__tests__/ProjectAdminContainer-test.tsx
@@ -20,7 +20,7 @@
 import * as React from 'react';
 import { mount, shallow } from 'enzyme';
 import ProjectAdminContainer from '../ProjectAdminContainer';
-import handleRequiredAuthorization from '../../utils/handleRequiredAuthorization';
+import handleRequiredAuthorization from '../../../app/utils/handleRequiredAuthorization';
 import { mockComponent } from '../../../helpers/testMocks';
 
 jest.mock('../../utils/handleRequiredAuthorization', () => {
diff --git a/server/sonar-web/src/main/js/app/components/__tests__/RecentHistory-test.tsx b/server/sonar-web/src/main/js/app/components/__tests__/RecentHistory-test.tsx
index c7cd1b57b16..b67f34d85d6 100644
--- a/server/sonar-web/src/main/js/app/components/__tests__/RecentHistory-test.tsx
+++ b/server/sonar-web/src/main/js/app/components/__tests__/RecentHistory-test.tsx
@@ -17,10 +17,10 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import { get, remove, save } from 'sonar-ui-common/helpers/storage';
 import RecentHistory, { History } from '../RecentHistory';
-import { get, remove, save } from '../../../helpers/storage';
 
-jest.mock('../../../helpers/storage', () => ({
+jest.mock('sonar-ui-common/helpers/storage', () => ({
   get: jest.fn(),
   remove: jest.fn(),
   save: jest.fn()
diff --git a/server/sonar-web/src/main/js/app/components/__tests__/StartupModal-test.tsx b/server/sonar-web/src/main/js/app/components/__tests__/StartupModal-test.tsx
index e61ab79265a..638dc91f0d4 100644
--- a/server/sonar-web/src/main/js/app/components/__tests__/StartupModal-test.tsx
+++ b/server/sonar-web/src/main/js/app/components/__tests__/StartupModal-test.tsx
@@ -18,13 +18,14 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import * as differenceInDays from 'date-fns/difference_in_days';
 import { shallow, ShallowWrapper } from 'enzyme';
+import { toShortNotSoISOString } from 'sonar-ui-common/helpers/dates';
+import { hasMessage } from 'sonar-ui-common/helpers/l10n';
+import { save, get } from 'sonar-ui-common/helpers/storage';
+import { waitAndUpdate } from 'sonar-ui-common/helpers/testUtils';
 import { StartupModal, ModalKey } from '../StartupModal';
 import { showLicense } from '../../../api/marketplace';
-import { save, get } from '../../../helpers/storage';
-import { hasMessage } from '../../../helpers/l10n';
-import { waitAndUpdate } from '../../../helpers/testUtils';
-import { differenceInDays, toShortNotSoISOString } from '../../../helpers/dates';
 import { EditionKey } from '../../../apps/marketplace/utils';
 import { mockOrganization, mockRouter } from '../../../helpers/testMocks';
 
@@ -32,21 +33,22 @@ jest.mock('../../../api/marketplace', () => ({
   showLicense: jest.fn().mockResolvedValue(undefined)
 }));
 
-jest.mock('../../../helpers/storage', () => ({
+jest.mock('sonar-ui-common/helpers/storage', () => ({
   get: jest.fn(),
   save: jest.fn()
 }));
 
-jest.mock('../../../helpers/l10n', () => ({
+jest.mock('sonar-ui-common/helpers/l10n', () => ({
   hasMessage: jest.fn().mockReturnValue(true)
 }));
 
-jest.mock('../../../helpers/dates', () => ({
-  differenceInDays: jest.fn().mockReturnValue(1),
+jest.mock('sonar-ui-common/helpers/dates', () => ({
   parseDate: jest.fn().mockReturnValue('parsed-date'),
   toShortNotSoISOString: jest.fn().mockReturnValue('short-not-iso-date')
 }));
 
+jest.mock('date-fns/difference_in_days', () => jest.fn().mockReturnValue(1));
+
 const LOGGED_IN_USER: T.LoggedInUser = {
   groups: [],
   isLoggedIn: true,
diff --git a/server/sonar-web/src/main/js/app/components/a11y/A11ySkipTarget.tsx b/server/sonar-web/src/main/js/app/components/a11y/A11ySkipTarget.tsx
index d660403288a..09ed9a377d4 100644
--- a/server/sonar-web/src/main/js/app/components/a11y/A11ySkipTarget.tsx
+++ b/server/sonar-web/src/main/js/app/components/a11y/A11ySkipTarget.tsx
@@ -18,8 +18,8 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import { translate } from 'sonar-ui-common/helpers/l10n';
 import { A11yContext } from './A11yContext';
-import { translate } from '../../../helpers/l10n';
 
 interface Props {
   anchor: string;
diff --git a/server/sonar-web/src/main/js/app/components/a11y/__tests__/A11yProvider-test.tsx b/server/sonar-web/src/main/js/app/components/a11y/__tests__/A11yProvider-test.tsx
index 22b5e650320..45bee7d508b 100644
--- a/server/sonar-web/src/main/js/app/components/a11y/__tests__/A11yProvider-test.tsx
+++ b/server/sonar-web/src/main/js/app/components/a11y/__tests__/A11yProvider-test.tsx
@@ -19,9 +19,9 @@
  */
 import * as React from 'react';
 import { shallow } from 'enzyme';
+import { waitAndUpdate } from 'sonar-ui-common/helpers/testUtils';
 import { A11yContextShape } from '../A11yContext';
 import A11yProvider from '../A11yProvider';
-import { waitAndUpdate } from '../../../../helpers/testUtils';
 
 const link1 = { key: 'link1', label: 'Link 1', weight: 0 };
 const link2 = { key: 'link2', label: 'Link 2', weight: -10 };
diff --git a/server/sonar-web/src/main/js/app/components/embed-docs-modal/EmbedDocsPopup.tsx b/server/sonar-web/src/main/js/app/components/embed-docs-modal/EmbedDocsPopup.tsx
index 470bc29d579..97bd37fff33 100644
--- a/server/sonar-web/src/main/js/app/components/embed-docs-modal/EmbedDocsPopup.tsx
+++ b/server/sonar-web/src/main/js/app/components/embed-docs-modal/EmbedDocsPopup.tsx
@@ -19,12 +19,12 @@
  */
 import * as React from 'react';
 import { Link } from 'react-router';
+import { translate } from 'sonar-ui-common/helpers/l10n';
+import { getBaseUrl } from 'sonar-ui-common/helpers/urls';
+import { DropdownOverlay } from 'sonar-ui-common/components/controls/Dropdown';
 import ProductNewsMenuItem from './ProductNewsMenuItem';
 import { SuggestionsContext } from './SuggestionsContext';
-import { translate } from '../../../helpers/l10n';
-import { getBaseUrl } from '../../../helpers/urls';
 import { isSonarCloud } from '../../../helpers/system';
-import { DropdownOverlay } from '../../../components/controls/Dropdown';
 
 interface Props {
   onClose: () => void;
diff --git a/server/sonar-web/src/main/js/app/components/embed-docs-modal/EmbedDocsPopupHelper.tsx b/server/sonar-web/src/main/js/app/components/embed-docs-modal/EmbedDocsPopupHelper.tsx
index be13e9494ef..2b894d58996 100644
--- a/server/sonar-web/src/main/js/app/components/embed-docs-modal/EmbedDocsPopupHelper.tsx
+++ b/server/sonar-web/src/main/js/app/components/embed-docs-modal/EmbedDocsPopupHelper.tsx
@@ -18,11 +18,11 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import { ButtonLink } from '../../../components/ui/buttons';
-import Toggler from '../../../components/controls/Toggler';
-import HelpIcon from '../../../components/icons-components/HelpIcon';
-import { lazyLoad } from '../../../components/lazyLoad';
-import { translate } from '../../../helpers/l10n';
+import HelpIcon from 'sonar-ui-common/components/icons/HelpIcon';
+import { translate } from 'sonar-ui-common/helpers/l10n';
+import { ButtonLink } from 'sonar-ui-common/components/controls/buttons';
+import Toggler from 'sonar-ui-common/components/controls/Toggler';
+import { lazyLoad } from 'sonar-ui-common/components/lazyLoad';
 
 const EmbedDocsPopup = lazyLoad(() => import('./EmbedDocsPopup'));
 
diff --git a/server/sonar-web/src/main/js/app/components/embed-docs-modal/ProductNewsMenuItem.tsx b/server/sonar-web/src/main/js/app/components/embed-docs-modal/ProductNewsMenuItem.tsx
index 03574dbbfa4..2fd2e729b66 100644
--- a/server/sonar-web/src/main/js/app/components/embed-docs-modal/ProductNewsMenuItem.tsx
+++ b/server/sonar-web/src/main/js/app/components/embed-docs-modal/ProductNewsMenuItem.tsx
@@ -18,13 +18,13 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import ChevronRightIcon from 'sonar-ui-common/components/icons/ChevronRightIcon';
 import { connect } from 'react-redux';
+import { translate } from 'sonar-ui-common/helpers/l10n';
 import { fetchPrismicRefs, fetchPrismicNews, PrismicNews } from '../../../api/news';
 import { getGlobalSettingValue, Store } from '../../../store/rootReducer';
 import DateFormatter from '../../../components/intl/DateFormatter';
-import ChevronRightIcon from '../../../components/icons-components/ChevronRightcon';
 import PlaceholderBar from '../../../components/ui/PlaceholderBar';
-import { translate } from '../../../helpers/l10n';
 
 interface OwnProps {
   tag?: string;
diff --git a/server/sonar-web/src/main/js/app/components/embed-docs-modal/__tests__/ProductNewsMenuItem-test.tsx b/server/sonar-web/src/main/js/app/components/embed-docs-modal/__tests__/ProductNewsMenuItem-test.tsx
index fc7e3b4abf5..32c2ae9ec41 100644
--- a/server/sonar-web/src/main/js/app/components/embed-docs-modal/__tests__/ProductNewsMenuItem-test.tsx
+++ b/server/sonar-web/src/main/js/app/components/embed-docs-modal/__tests__/ProductNewsMenuItem-test.tsx
@@ -19,9 +19,9 @@
  */
 import * as React from 'react';
 import { shallow } from 'enzyme';
+import { waitAndUpdate } from 'sonar-ui-common/helpers/testUtils';
 import { ProductNewsMenuItem } from '../ProductNewsMenuItem';
 import { fetchPrismicRefs, fetchPrismicNews } from '../../../../api/news';
-import { waitAndUpdate } from '../../../../helpers/testUtils';
 
 jest.mock('../../../../api/news', () => ({
   fetchPrismicRefs: jest.fn().mockResolvedValue({ id: 'master', ref: 'master-ref' }),
diff --git a/server/sonar-web/src/main/js/app/components/extensions/Extension.tsx b/server/sonar-web/src/main/js/app/components/extensions/Extension.tsx
index c0eb4175997..da994657b3d 100644
--- a/server/sonar-web/src/main/js/app/components/extensions/Extension.tsx
+++ b/server/sonar-web/src/main/js/app/components/extensions/Extension.tsx
@@ -21,12 +21,13 @@ import * as React from 'react';
 import Helmet from 'react-helmet';
 import { injectIntl, InjectedIntlProps } from 'react-intl';
 import { connect } from 'react-redux';
+import { translate } from 'sonar-ui-common/helpers/l10n';
 import getStore from '../../utils/getStore';
 import { Location, Router, withRouter } from '../../../components/hoc/withRouter';
 import { getExtensionStart } from '../../../helpers/extensions';
 import { addGlobalErrorMessage } from '../../../store/globalMessages';
-import { translate } from '../../../helpers/l10n';
 import { Store, getCurrentUser } from '../../../store/rootReducer';
+import * as theme from '../../theme';
 
 interface Props extends InjectedIntlProps {
   currentUser: T.CurrentUser;
@@ -72,6 +73,7 @@ export class Extension extends React.PureComponent<Props, State> {
       intl: this.props.intl,
       location: this.props.location,
       router: this.props.router,
+      theme,
       ...this.props.options
     });
 
diff --git a/server/sonar-web/src/main/js/app/components/extensions/__tests__/Extension-test.tsx b/server/sonar-web/src/main/js/app/components/extensions/__tests__/Extension-test.tsx
index 42e27ab3a3e..cdf5d4b0c9b 100644
--- a/server/sonar-web/src/main/js/app/components/extensions/__tests__/Extension-test.tsx
+++ b/server/sonar-web/src/main/js/app/components/extensions/__tests__/Extension-test.tsx
@@ -19,10 +19,10 @@
  */
 import * as React from 'react';
 import { shallow } from 'enzyme';
+import { waitAndUpdate } from 'sonar-ui-common/helpers/testUtils';
 import { Extension } from '../Extension';
 import { mockCurrentUser, mockLocation, mockRouter } from '../../../../helpers/testMocks';
 import { getExtensionStart } from '../../../../helpers/extensions';
-import { waitAndUpdate } from '../../../../helpers/testUtils';
 
 jest.mock('../../../../helpers/extensions', () => ({
   getExtensionStart: jest.fn().mockResolvedValue(jest.fn())
diff --git a/server/sonar-web/src/main/js/app/components/extensions/exposeLibraries.ts b/server/sonar-web/src/main/js/app/components/extensions/exposeLibraries.ts
index 93a942fbbd3..2a74c8b9870 100644
--- a/server/sonar-web/src/main/js/app/components/extensions/exposeLibraries.ts
+++ b/server/sonar-web/src/main/js/app/components/extensions/exposeLibraries.ts
@@ -20,11 +20,52 @@
 import * as ReactRedux from 'react-redux';
 import * as ReactRouter from 'react-router';
 import { FormattedMessage } from 'react-intl';
+import AlertErrorIcon from 'sonar-ui-common/components/icons/AlertErrorIcon';
+import AlertSuccessIcon from 'sonar-ui-common/components/icons/AlertSuccessIcon';
+import AlertWarnIcon from 'sonar-ui-common/components/icons/AlertWarnIcon';
+import CheckIcon from 'sonar-ui-common/components/icons/CheckIcon';
+import ClearIcon from 'sonar-ui-common/components/icons/ClearIcon';
+import SecurityHotspotIcon from 'sonar-ui-common/components/icons/SecurityHotspotIcon';
+import VulnerabilityIcon from 'sonar-ui-common/components/icons/VulnerabilityIcon';
+import DropdownIcon from 'sonar-ui-common/components/icons/DropdownIcon';
+import PlusCircleIcon from 'sonar-ui-common/components/icons/PlusCircleIcon';
+import HelpIcon from 'sonar-ui-common/components/icons/HelpIcon';
+import LockIcon from 'sonar-ui-common/components/icons/LockIcon';
+import DetachIcon from 'sonar-ui-common/components/icons/DetachIcon';
+import QualifierIcon from 'sonar-ui-common/components/icons/QualifierIcon';
+import LongLivingBranchIcon from 'sonar-ui-common/components/icons/LongLivingBranchIcon';
+import PullRequestIcon from 'sonar-ui-common/components/icons/PullRequestIcon';
+import { formatMeasure } from 'sonar-ui-common/helpers/measures';
+import * as request from 'sonar-ui-common/helpers/request';
+import Tooltip from 'sonar-ui-common/components/controls/Tooltip';
+import {
+  EditButton,
+  Button,
+  SubmitButton,
+  ResetButtonLink
+} from 'sonar-ui-common/components/controls/buttons';
+import DeferredSpinner from 'sonar-ui-common/components/ui/DeferredSpinner';
+import Modal from 'sonar-ui-common/components/controls/Modal';
+import SimpleModal from 'sonar-ui-common/components/controls/SimpleModal';
+import ConfirmButton from 'sonar-ui-common/components/controls/ConfirmButton';
+import { Alert } from 'sonar-ui-common/components/ui/Alert';
+import HelpTooltip from 'sonar-ui-common/components/controls/HelpTooltip';
+import Checkbox from 'sonar-ui-common/components/controls/Checkbox';
+import SearchBox from 'sonar-ui-common/components/controls/SearchBox';
+import DuplicationsRating from 'sonar-ui-common/components/ui/DuplicationsRating';
+import Level from 'sonar-ui-common/components/ui/Level';
+import ListFooter from 'sonar-ui-common/components/controls/ListFooter';
+import Rating from 'sonar-ui-common/components/ui/Rating';
+import Dropdown from 'sonar-ui-common/components/controls/Dropdown';
+import ActionsDropdown, {
+  ActionsDropdownItem
+} from 'sonar-ui-common/components/controls/ActionsDropdown';
+import RadioToggle from 'sonar-ui-common/components/controls/RadioToggle';
+import ReloadButton from 'sonar-ui-common/components/controls/ReloadButton';
 import throwGlobalError from '../../utils/throwGlobalError';
 import addGlobalSuccessMessage from '../../utils/addGlobalSuccessMessage';
 import Suggestions from '../embed-docs-modal/Suggestions';
 import * as measures from '../../../helpers/measures';
-import * as request from '../../../helpers/request';
 import {
   getBranchLikeQuery,
   isBranch,
@@ -44,46 +85,13 @@ import DateFormatter from '../../../components/intl/DateFormatter';
 import DateTimeFormatter from '../../../components/intl/DateTimeFormatter';
 import Favorite from '../../../components/controls/Favorite';
 import HomePageSelect from '../../../components/controls/HomePageSelect';
-import ListFooter from '../../../components/controls/ListFooter';
-import Modal from '../../../components/controls/Modal';
-import HelpTooltip from '../../../components/controls/HelpTooltip';
-import SearchBox from '../../../components/controls/SearchBox';
+import BranchIcon from '../../../components/icons-components/BranchIcon';
 import Select from '../../../components/controls/Select';
-import Tooltip from '../../../components/controls/Tooltip';
 import SelectList from '../../../components/SelectList/SelectList';
 import CoverageRating from '../../../components/ui/CoverageRating';
-import DuplicationsRating from '../../../components/ui/DuplicationsRating';
-import Level from '../../../components/ui/Level';
-import { EditButton, Button, SubmitButton, ResetButtonLink } from '../../../components/ui/buttons';
-import Checkbox from '../../../components/controls/Checkbox';
-import DeferredSpinner from '../../../components/common/DeferredSpinner';
-import Dropdown from '../../../components/controls/Dropdown';
-import ReloadButton from '../../../components/controls/ReloadButton';
-import AlertErrorIcon from '../../../components/icons-components/AlertErrorIcon';
-import AlertSuccessIcon from '../../../components/icons-components/AlertSuccessIcon';
-import AlertWarnIcon from '../../../components/icons-components/AlertWarnIcon';
-import CheckIcon from '../../../components/icons-components/CheckIcon';
-import ClearIcon from '../../../components/icons-components/ClearIcon';
-import SecurityHotspotIcon from '../../../components/icons-components/SecurityHotspotIcon';
-import VulnerabilityIcon from '../../../components/icons-components/VulnerabilityIcon';
-import DropdownIcon from '../../../components/icons-components/DropdownIcon';
-import PlusCircleIcon from '../../../components/icons-components/PlusCircleIcon';
-import HelpIcon from '../../../components/icons-components/HelpIcon';
-import LockIcon from '../../../components/icons-components/LockIcon';
-import DetachIcon from '../../../components/icons-components/DetachIcon';
-import QualifierIcon from '../../../components/icons-components/QualifierIcon';
-import Rating from '../../../components/ui/Rating';
-import BranchIcon from '../../../components/icons-components/BranchIcon';
-import LongLivingBranchIcon from '../../../components/icons-components/LongLivingBranchIcon';
 import NotFound from '../../../app/components/NotFound';
-import PullRequestIcon from '../../../components/icons-components/PullRequestIcon';
-import ActionsDropdown, { ActionsDropdownItem } from '../../../components/controls/ActionsDropdown';
-import ConfirmButton from '../../../components/controls/ConfirmButton';
-import SimpleModal from '../../../components/controls/SimpleModal';
 import SearchSelect from '../../../components/controls/SearchSelect';
-import RadioToggle from '../../../components/controls/RadioToggle';
 import A11ySkipTarget from '../a11y/A11ySkipTarget';
-import { Alert } from '../../../components/ui/Alert';
 
 const exposeLibraries = () => {
   const global = window as any;
@@ -103,7 +111,7 @@ const exposeLibraries = () => {
     getComponentIssuesUrl,
     getRulesUrl
   };
-  global.SonarMeasures = measures;
+  global.SonarMeasures = { ...measures, formatMeasure };
   global.SonarRequest = { ...request, throwGlobalError, addGlobalSuccessMessage };
   global.SonarComponents = {
     A11ySkipTarget,
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNav.tsx b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNav.tsx
index 02e9d6a01de..936977d2ff2 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNav.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNav.tsx
@@ -18,13 +18,13 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import ContextNavBar from 'sonar-ui-common/components/ui/ContextNavBar';
 import ComponentNavHeader from './ComponentNavHeader';
 import ComponentNavMeta from './ComponentNavMeta';
 import ComponentNavMenu from './ComponentNavMenu';
 import ComponentNavBgTaskNotif from './ComponentNavBgTaskNotif';
 import RecentHistory from '../../RecentHistory';
-import * as theme from '../../../theme';
-import ContextNavBar from '../../../../components/nav/ContextNavBar';
+import { rawSizes } from '../../../theme';
 import { STATUSES } from '../../../../apps/background-tasks/constants';
 import './ComponentNav.css';
 
@@ -68,6 +68,7 @@ export default class ComponentNav extends React.PureComponent<Props> {
 
   render() {
     const { component, currentBranchLike, currentTask, isInProgress, isPending } = this.props;
+    const contextNavHeight = rawSizes.contextNavHeightRaw;
     let notifComponent;
     if (isInProgress || isPending || (currentTask && currentTask.status === STATUSES.FAILED)) {
       notifComponent = (
@@ -82,7 +83,7 @@ export default class ComponentNav extends React.PureComponent<Props> {
     }
     return (
       <ContextNavBar
-        height={notifComponent ? theme.contextNavHeightRaw + 30 : theme.contextNavHeightRaw}
+        height={notifComponent ? contextNavHeight + 30 : contextNavHeight}
         id="context-navigation"
         notif={notifComponent}>
         <div className="navbar-context-justified">
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavBgTaskNotif.tsx b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavBgTaskNotif.tsx
index 3f9c56757c4..63f4f7d8293 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavBgTaskNotif.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavBgTaskNotif.tsx
@@ -20,11 +20,11 @@
 import * as React from 'react';
 import { Link } from 'react-router';
 import { FormattedMessage } from 'react-intl';
+import { hasMessage, translate } from 'sonar-ui-common/helpers/l10n';
+import { Alert } from 'sonar-ui-common/components/ui/Alert';
 import ComponentNavLicenseNotif from './ComponentNavLicenseNotif';
 import { STATUSES } from '../../../../apps/background-tasks/constants';
 import { getComponentBackgroundTaskUrl } from '../../../../helpers/urls';
-import { hasMessage, translate } from '../../../../helpers/l10n';
-import { Alert } from '../../../../components/ui/Alert';
 
 interface Props {
   component: T.Component;
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavBranch.tsx b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavBranch.tsx
index 546558794e6..46e4cf570e4 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavBranch.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavBranch.tsx
@@ -18,23 +18,23 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import DropdownIcon from 'sonar-ui-common/components/icons/DropdownIcon';
+import PlusCircleIcon from 'sonar-ui-common/components/icons/PlusCircleIcon';
 import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router';
+import { translate } from 'sonar-ui-common/helpers/l10n';
+import Toggler from 'sonar-ui-common/components/controls/Toggler';
+import HelpTooltip from 'sonar-ui-common/components/controls/HelpTooltip';
 import ComponentNavBranchesMenu from './ComponentNavBranchesMenu';
-import DocTooltip from '../../../../components/docs/DocTooltip';
-import * as theme from '../../../theme';
 import BranchIcon from '../../../../components/icons-components/BranchIcon';
+import DocTooltip from '../../../../components/docs/DocTooltip';
+import { colors } from '../../../theme';
 import {
   isShortLivingBranch,
   isSameBranchLike,
   getBranchLikeDisplayName,
   isPullRequest
 } from '../../../../helpers/branches';
-import { translate } from '../../../../helpers/l10n';
-import PlusCircleIcon from '../../../../components/icons-components/PlusCircleIcon';
-import HelpTooltip from '../../../../components/controls/HelpTooltip';
-import Toggler from '../../../../components/controls/Toggler';
-import DropdownIcon from '../../../../components/icons-components/DropdownIcon';
 import { isSonarCloud } from '../../../../helpers/system';
 import { getPortfolioAdminUrl } from '../../../../helpers/urls';
 import { withAppState } from '../../../../components/hoc/withAppState';
@@ -151,12 +151,12 @@ export class ComponentNavBranch extends React.PureComponent<Props, State> {
           <BranchIcon
             branchLike={currentBranchLike}
             className="little-spacer-right"
-            fill={theme.gray80}
+            fill={colors.gray80}
           />
           <span className="note">{displayName}</span>
           {configuration && configuration.showSettings && (
             <HelpTooltip className="spacer-left" overlay={this.renderOverlay()}>
-              <PlusCircleIcon className="text-middle" fill={theme.blue} size={12} />
+              <PlusCircleIcon className="text-middle" fill={colors.blue} size={12} />
             </HelpTooltip>
           )}
         </div>
@@ -168,13 +168,13 @@ export class ComponentNavBranch extends React.PureComponent<Props, State> {
             <BranchIcon
               branchLike={currentBranchLike}
               className="little-spacer-right"
-              fill={theme.gray80}
+              fill={colors.gray80}
             />
             <span className="note">{displayName}</span>
             <DocTooltip
               className="spacer-left"
               doc={import(/* webpackMode: "eager" */ 'Docs/tooltips/branches/no-branch-support.md')}>
-              <PlusCircleIcon fill={theme.gray71} size={12} />
+              <PlusCircleIcon fill={colors.gray71} size={12} />
             </DocTooltip>
           </div>
         );
@@ -188,7 +188,7 @@ export class ComponentNavBranch extends React.PureComponent<Props, State> {
             <DocTooltip
               className="spacer-left"
               doc={import(/* webpackMode: "eager" */ 'Docs/tooltips/branches/single-branch.md')}>
-              <PlusCircleIcon fill={theme.blue} size={12} />
+              <PlusCircleIcon fill={colors.blue} size={12} />
             </DocTooltip>
           </div>
         );
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavBranchesMenu.tsx b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavBranchesMenu.tsx
index 48fed14c4cd..b5fee98b100 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavBranchesMenu.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavBranchesMenu.tsx
@@ -19,6 +19,11 @@
  */
 import * as React from 'react';
 import { Link } from 'react-router';
+import { scrollToElement } from 'sonar-ui-common/helpers/scrolling';
+import { translate } from 'sonar-ui-common/helpers/l10n';
+import HelpTooltip from 'sonar-ui-common/components/controls/HelpTooltip';
+import SearchBox from 'sonar-ui-common/components/controls/SearchBox';
+import { DropdownOverlay } from 'sonar-ui-common/components/controls/Dropdown';
 import ComponentNavBranchesMenuItem from './ComponentNavBranchesMenuItem';
 import {
   sortBranchesAsTree,
@@ -29,12 +34,7 @@ import {
   isPullRequest,
   isBranch
 } from '../../../../helpers/branches';
-import { scrollToElement } from '../../../../helpers/scrolling';
-import { translate } from '../../../../helpers/l10n';
 import { getBranchLikeUrl } from '../../../../helpers/urls';
-import SearchBox from '../../../../components/controls/SearchBox';
-import HelpTooltip from '../../../../components/controls/HelpTooltip';
-import { DropdownOverlay } from '../../../../components/controls/Dropdown';
 import { withRouter, Router } from '../../../../components/hoc/withRouter';
 
 interface Props {
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavBranchesMenuItem.tsx b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavBranchesMenuItem.tsx
index 8455831806e..021cbfce88a 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavBranchesMenuItem.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavBranchesMenuItem.tsx
@@ -20,8 +20,9 @@
 import * as React from 'react';
 import { Link } from 'react-router';
 import * as classNames from 'classnames';
-import BranchStatus from '../../../../components/common/BranchStatus';
+import { translate } from 'sonar-ui-common/helpers/l10n';
 import BranchIcon from '../../../../components/icons-components/BranchIcon';
+import BranchStatus from '../../../../components/common/BranchStatus';
 import {
   isShortLivingBranch,
   getBranchLikeDisplayName,
@@ -29,7 +30,6 @@ import {
   isMainBranch,
   isPullRequest
 } from '../../../../helpers/branches';
-import { translate } from '../../../../helpers/l10n';
 import { getBranchLikeUrl } from '../../../../helpers/urls';
 
 export interface Props {
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavHeader.tsx b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavHeader.tsx
index a2a793eeaf6..0cec4d3a348 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavHeader.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavHeader.tsx
@@ -18,16 +18,17 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import QualifierIcon from 'sonar-ui-common/components/icons/QualifierIcon';
 import { connect } from 'react-redux';
 import { Link } from 'react-router';
+import { getBaseUrl } from 'sonar-ui-common/helpers/urls';
 import ComponentNavBranch from './ComponentNavBranch';
-import QualifierIcon from '../../../../components/icons-components/QualifierIcon';
 import { getOrganizationByKey, Store } from '../../../../store/rootReducer';
 import OrganizationAvatar from '../../../../components/common/OrganizationAvatar';
 import OrganizationHelmet from '../../../../components/common/OrganizationHelmet';
 import OrganizationLink from '../../../../components/ui/OrganizationLink';
 import { sanitizeAlmId } from '../../../../helpers/almIntegrations';
-import { getProjectUrl, getBaseUrl } from '../../../../helpers/urls';
+import { getProjectUrl } from '../../../../helpers/urls';
 import { isSonarCloud } from '../../../../helpers/system';
 import { isMainBranch } from '../../../../helpers/branches';
 
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavLicenseNotif.tsx b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavLicenseNotif.tsx
index 094142356d6..95c6bcce7c4 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavLicenseNotif.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavLicenseNotif.tsx
@@ -19,10 +19,10 @@
  */
 import * as React from 'react';
 import { Link } from 'react-router';
-import { translate } from '../../../../helpers/l10n';
+import { translate } from 'sonar-ui-common/helpers/l10n';
+import { Alert } from 'sonar-ui-common/components/ui/Alert';
 import { isValidLicense } from '../../../../api/marketplace';
 import { withAppState } from '../../../../components/hoc/withAppState';
-import { Alert } from '../../../../components/ui/Alert';
 
 interface Props {
   appState: Pick<T.AppState, 'canAdmin'>;
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavMenu.tsx b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavMenu.tsx
index 10ab55ba621..7e43462d14a 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavMenu.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavMenu.tsx
@@ -18,19 +18,19 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import DropdownIcon from 'sonar-ui-common/components/icons/DropdownIcon';
+import NavBarTabs from 'sonar-ui-common/components/ui/NavBarTabs';
 import { Link } from 'react-router';
 import * as classNames from 'classnames';
-import Dropdown from '../../../../components/controls/Dropdown';
+import { translate } from 'sonar-ui-common/helpers/l10n';
+import Dropdown from 'sonar-ui-common/components/controls/Dropdown';
 import { withAppState } from '../../../../components/hoc/withAppState';
-import DropdownIcon from '../../../../components/icons-components/DropdownIcon';
-import NavBarTabs from '../../../../components/nav/NavBarTabs';
 import {
   isShortLivingBranch,
   isPullRequest,
   isMainBranch,
   getBranchLikeQuery
 } from '../../../../helpers/branches';
-import { translate } from '../../../../helpers/l10n';
 import { isSonarCloud } from '../../../../helpers/system';
 
 const SETTINGS_URLS = [
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavMeta.tsx b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavMeta.tsx
index 58497250583..ba9d0af996d 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavMeta.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavMeta.tsx
@@ -18,21 +18,21 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import DetachIcon from 'sonar-ui-common/components/icons/DetachIcon';
 import { connect } from 'react-redux';
+import { translate } from 'sonar-ui-common/helpers/l10n';
+import Tooltip from 'sonar-ui-common/components/controls/Tooltip';
 import ComponentNavWarnings from './ComponentNavWarnings';
 import BranchStatus from '../../../../components/common/BranchStatus';
 import DateTimeFormatter from '../../../../components/intl/DateTimeFormatter';
 import Favorite from '../../../../components/controls/Favorite';
 import HomePageSelect from '../../../../components/controls/HomePageSelect';
-import Tooltip from '../../../../components/controls/Tooltip';
-import DetachIcon from '../../../../components/icons-components/DetachIcon';
 import {
   isShortLivingBranch,
   isLongLivingBranch,
   isMainBranch,
   isPullRequest
 } from '../../../../helpers/branches';
-import { translate } from '../../../../helpers/l10n';
 import { isLoggedIn } from '../../../../helpers/users';
 import { getCurrentUser, Store } from '../../../../store/rootReducer';
 
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavWarnings.tsx b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavWarnings.tsx
index 18878b4fc81..39439a91b58 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavWarnings.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavWarnings.tsx
@@ -18,10 +18,10 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import WarningIcon from 'sonar-ui-common/components/icons/WarningIcon';
 import { FormattedMessage } from 'react-intl';
-import { lazyLoad } from '../../../../components/lazyLoad';
-import WarningIcon from '../../../../components/icons-components/WarningIcon';
-import { translate, translateWithParameters } from '../../../../helpers/l10n';
+import { translate, translateWithParameters } from 'sonar-ui-common/helpers/l10n';
+import { lazyLoad } from 'sonar-ui-common/components/lazyLoad';
 
 const AnalysisWarningsModal = lazyLoad(() =>
   import('../../../../components/common/AnalysisWarningsModal')
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/ComponentNavBgTaskNotif-test.tsx b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/ComponentNavBgTaskNotif-test.tsx
index 0fd089c3df6..08f7dc6c76e 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/ComponentNavBgTaskNotif-test.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/ComponentNavBgTaskNotif-test.tsx
@@ -17,17 +17,15 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-/* eslint-disable import/first */
-jest.mock('../../../../../helpers/l10n', () => {
-  const l10n = require.requireActual('../../../../../helpers/l10n');
-  l10n.hasMessage = jest.fn(() => true);
-  return l10n;
-});
-
 import * as React from 'react';
 import { shallow } from 'enzyme';
 import ComponentNavBgTaskNotif from '../ComponentNavBgTaskNotif';
 
+jest.mock('sonar-ui-common/helpers/l10n', () => ({
+  ...jest.requireActual('sonar-ui-common/helpers/l10n'),
+  hasMessage: jest.fn().mockReturnValue(true)
+}));
+
 const component = {
   analysisDate: '2017-01-02T00:00:00.000Z',
   breadcrumbs: [],
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/ComponentNavBranch-test.tsx b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/ComponentNavBranch-test.tsx
index 59ef798f2d6..6e37c64541d 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/ComponentNavBranch-test.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/ComponentNavBranch-test.tsx
@@ -19,8 +19,8 @@
  */
 import * as React from 'react';
 import { shallow } from 'enzyme';
+import { click } from 'sonar-ui-common/helpers/testUtils';
 import { ComponentNavBranch } from '../ComponentNavBranch';
-import { click } from '../../../../../helpers/testUtils';
 import { isSonarCloud } from '../../../../../helpers/system';
 import {
   mockPullRequest,
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/ComponentNavBranchesMenu-test.tsx b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/ComponentNavBranchesMenu-test.tsx
index 24b0411de31..28e9e979c57 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/ComponentNavBranchesMenu-test.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/ComponentNavBranchesMenu-test.tsx
@@ -19,8 +19,8 @@
  */
 import * as React from 'react';
 import { shallow } from 'enzyme';
+import { elementKeydown } from 'sonar-ui-common/helpers/testUtils';
 import { ComponentNavBranchesMenu } from '../ComponentNavBranchesMenu';
-import { elementKeydown } from '../../../../../helpers/testUtils';
 import {
   mockPullRequest,
   mockShortLivingBranch,
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/ComponentNavLicenseNotif-test.tsx b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/ComponentNavLicenseNotif-test.tsx
index c670e9e1a0a..9e6590bf91a 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/ComponentNavLicenseNotif-test.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/ComponentNavLicenseNotif-test.tsx
@@ -19,15 +19,14 @@
  */
 import * as React from 'react';
 import { shallow } from 'enzyme';
+import { waitAndUpdate } from 'sonar-ui-common/helpers/testUtils';
 import { ComponentNavLicenseNotif } from '../ComponentNavLicenseNotif';
 import { isValidLicense } from '../../../../../api/marketplace';
-import { waitAndUpdate } from '../../../../../helpers/testUtils';
 
-jest.mock('../../../../../helpers/l10n', () => {
-  const l10n = require.requireActual('../../../../../helpers/l10n');
-  l10n.hasMessage = jest.fn(() => true);
-  return l10n;
-});
+jest.mock('sonar-ui-common/helpers/l10n', () => ({
+  ...jest.requireActual('sonar-ui-common/helpers/l10n'),
+  hasMessage: jest.fn().mockReturnValue(true)
+}));
 
 jest.mock('../../../../../api/marketplace', () => ({
   isValidLicense: jest.fn().mockResolvedValue({ isValidLicense: false })
diff --git a/server/sonar-web/src/main/js/app/components/nav/global/GlobalNav.tsx b/server/sonar-web/src/main/js/app/components/nav/global/GlobalNav.tsx
index d106c1236d6..343687c1c9a 100644
--- a/server/sonar-web/src/main/js/app/components/nav/global/GlobalNav.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/global/GlobalNav.tsx
@@ -19,15 +19,16 @@
  */
 import * as React from 'react';
 import { connect } from 'react-redux';
+import NavBar from 'sonar-ui-common/components/ui/NavBar';
+import { parseDate } from 'sonar-ui-common/helpers/dates';
+import { lazyLoad } from 'sonar-ui-common/components/lazyLoad';
 import GlobalNavBranding, { SonarCloudNavBranding } from './GlobalNavBranding';
 import GlobalNavMenu from './GlobalNavMenu';
 import GlobalNavExplore from './GlobalNavExplore';
 import GlobalNavUserContainer from './GlobalNavUserContainer';
 import Search from '../../search/Search';
 import EmbedDocsPopupHelper from '../../embed-docs-modal/EmbedDocsPopupHelper';
-import * as theme from '../../../theme';
-import NavBar from '../../../../components/nav/NavBar';
-import { lazyLoad } from '../../../../components/lazyLoad';
+import { rawSizes } from '../../../theme';
 import {
   fetchPrismicRefs,
   fetchPrismicFeatureNews,
@@ -44,7 +45,6 @@ import { isSonarCloud } from '../../../../helpers/system';
 import { isLoggedIn } from '../../../../helpers/users';
 import { OnboardingContext } from '../../OnboardingContext';
 import { setCurrentUserSetting } from '../../../../store/users';
-import { parseDate } from '../../../../helpers/dates';
 import './GlobalNav.css';
 
 const GlobalNavPlus = lazyLoad(() => import('./GlobalNavPlus'), 'GlobalNavPlus');
@@ -174,7 +174,7 @@ export class GlobalNav extends React.PureComponent<Props, State> {
     const { appState, currentUser } = this.props;
     const { news } = this.state;
     return (
-      <NavBar className="navbar-global" height={theme.globalNavHeightRaw} id="global-navigation">
+      <NavBar className="navbar-global" height={rawSizes.globalNavHeightRaw} id="global-navigation">
         {isSonarCloud() ? <SonarCloudNavBranding /> : <GlobalNavBranding />}
 
         <GlobalNavMenu {...this.props} />
diff --git a/server/sonar-web/src/main/js/app/components/nav/global/GlobalNavBranding.tsx b/server/sonar-web/src/main/js/app/components/nav/global/GlobalNavBranding.tsx
index e3038b1b549..b17ccdbe76c 100644
--- a/server/sonar-web/src/main/js/app/components/nav/global/GlobalNavBranding.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/global/GlobalNavBranding.tsx
@@ -20,9 +20,9 @@
 import * as React from 'react';
 import { Link } from 'react-router';
 import { connect } from 'react-redux';
+import { translate } from 'sonar-ui-common/helpers/l10n';
+import { getBaseUrl } from 'sonar-ui-common/helpers/urls';
 import { getGlobalSettingValue, Store } from '../../../../store/rootReducer';
-import { translate } from '../../../../helpers/l10n';
-import { getBaseUrl } from '../../../../helpers/urls';
 
 interface StateProps {
   customLogoUrl?: string;
diff --git a/server/sonar-web/src/main/js/app/components/nav/global/GlobalNavExplore.tsx b/server/sonar-web/src/main/js/app/components/nav/global/GlobalNavExplore.tsx
index 0516ed1227b..f1d89ef36ab 100644
--- a/server/sonar-web/src/main/js/app/components/nav/global/GlobalNavExplore.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/global/GlobalNavExplore.tsx
@@ -19,7 +19,7 @@
  */
 import * as React from 'react';
 import { Link } from 'react-router';
-import { translate } from '../../../../helpers/l10n';
+import { translate } from 'sonar-ui-common/helpers/l10n';
 
 interface Props {
   location: { pathname: string };
diff --git a/server/sonar-web/src/main/js/app/components/nav/global/GlobalNavMenu.tsx b/server/sonar-web/src/main/js/app/components/nav/global/GlobalNavMenu.tsx
index 1c8b5f11448..7595b890b7d 100644
--- a/server/sonar-web/src/main/js/app/components/nav/global/GlobalNavMenu.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/global/GlobalNavMenu.tsx
@@ -20,13 +20,13 @@
 import * as React from 'react';
 import * as classNames from 'classnames';
 import { Link } from 'react-router';
-import { translate } from '../../../../helpers/l10n';
-import { getQualityGatesUrl } from '../../../../helpers/urls';
+import DropdownIcon from 'sonar-ui-common/components/icons/DropdownIcon';
+import { translate } from 'sonar-ui-common/helpers/l10n';
+import Dropdown from 'sonar-ui-common/components/controls/Dropdown';
 import { isMySet } from '../../../../apps/issues/utils';
-import Dropdown from '../../../../components/controls/Dropdown';
-import DropdownIcon from '../../../../components/icons-components/DropdownIcon';
 import { isSonarCloud } from '../../../../helpers/system';
 import { isLoggedIn } from '../../../../helpers/users';
+import { getQualityGatesUrl } from '../../../../helpers/urls';
 
 interface Props {
   appState: Pick<T.AppState, 'canAdmin' | 'globalPages' | 'organizationsEnabled' | 'qualifiers'>;
diff --git a/server/sonar-web/src/main/js/app/components/nav/global/GlobalNavPlus.tsx b/server/sonar-web/src/main/js/app/components/nav/global/GlobalNavPlus.tsx
index ab374580b9d..6db1ba0603e 100644
--- a/server/sonar-web/src/main/js/app/components/nav/global/GlobalNavPlus.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/global/GlobalNavPlus.tsx
@@ -18,14 +18,14 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import PlusIcon from 'sonar-ui-common/components/icons/PlusIcon';
 import { Link, withRouter, WithRouterProps } from 'react-router';
+import { translate } from 'sonar-ui-common/helpers/l10n';
+import Dropdown from 'sonar-ui-common/components/controls/Dropdown';
 import CreateFormShim from '../../../../apps/portfolio/components/CreateFormShim';
-import Dropdown from '../../../../components/controls/Dropdown';
-import PlusIcon from '../../../../components/icons-components/PlusIcon';
 import { OnboardingContextShape } from '../../OnboardingContext';
 import { getComponentNavigation } from '../../../../api/nav';
 import { getExtensionStart } from '../../../../helpers/extensions';
-import { translate } from '../../../../helpers/l10n';
 import { isSonarCloud } from '../../../../helpers/system';
 import { getPortfolioAdminUrl, getPortfolioUrl } from '../../../../helpers/urls';
 import { hasGlobalPermission } from '../../../../helpers/users';
diff --git a/server/sonar-web/src/main/js/app/components/nav/global/GlobalNavUser.tsx b/server/sonar-web/src/main/js/app/components/nav/global/GlobalNavUser.tsx
index 5be0e49a400..4cff2ebea7e 100644
--- a/server/sonar-web/src/main/js/app/components/nav/global/GlobalNavUser.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/global/GlobalNavUser.tsx
@@ -20,12 +20,12 @@
 import * as React from 'react';
 import { sortBy } from 'lodash';
 import { Link } from 'react-router';
-import * as theme from '../../../theme';
+import { translate } from 'sonar-ui-common/helpers/l10n';
+import { getBaseUrl } from 'sonar-ui-common/helpers/urls';
+import Dropdown from 'sonar-ui-common/components/controls/Dropdown';
+import { rawSizes } from '../../../theme';
 import Avatar from '../../../../components/ui/Avatar';
 import OrganizationListItem from '../../../../components/ui/OrganizationListItem';
-import { translate } from '../../../../helpers/l10n';
-import { getBaseUrl } from '../../../../helpers/urls';
-import Dropdown from '../../../../components/controls/Dropdown';
 import { isLoggedIn } from '../../../../helpers/users';
 import { withRouter, Router } from '../../../../components/hoc/withRouter';
 
@@ -102,7 +102,7 @@ export class GlobalNavUser extends React.PureComponent<Props> {
           <Avatar
             hash={currentUser.avatar}
             name={currentUser.name}
-            size={theme.globalNavContentHeightRaw}
+            size={rawSizes.globalNavContentHeightRaw}
           />
         </a>
       </Dropdown>
diff --git a/server/sonar-web/src/main/js/app/components/nav/global/__tests__/GlobalNav-test.tsx b/server/sonar-web/src/main/js/app/components/nav/global/__tests__/GlobalNav-test.tsx
index 14c200dff93..5e26c9b94f5 100644
--- a/server/sonar-web/src/main/js/app/components/nav/global/__tests__/GlobalNav-test.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/global/__tests__/GlobalNav-test.tsx
@@ -19,9 +19,9 @@
  */
 import * as React from 'react';
 import { shallow } from 'enzyme';
+import { waitAndUpdate, click } from 'sonar-ui-common/helpers/testUtils';
 import { GlobalNav } from '../GlobalNav';
 import { isSonarCloud } from '../../../../../helpers/system';
-import { waitAndUpdate, click } from '../../../../../helpers/testUtils';
 import {
   fetchPrismicRefs,
   fetchPrismicFeatureNews,
diff --git a/server/sonar-web/src/main/js/app/components/nav/global/__tests__/GlobalNavPlus-test.tsx b/server/sonar-web/src/main/js/app/components/nav/global/__tests__/GlobalNavPlus-test.tsx
index ac376d0a8dc..83c47c47563 100644
--- a/server/sonar-web/src/main/js/app/components/nav/global/__tests__/GlobalNavPlus-test.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/global/__tests__/GlobalNavPlus-test.tsx
@@ -19,10 +19,10 @@
  */
 import * as React from 'react';
 import { shallow, ShallowWrapper } from 'enzyme';
+import { click } from 'sonar-ui-common/helpers/testUtils';
 import { GlobalNavPlus } from '../GlobalNavPlus';
 import { isSonarCloud } from '../../../../../helpers/system';
 import { mockRouter } from '../../../../../helpers/testMocks';
-import { click } from '../../../../../helpers/testUtils';
 
 jest.mock('../../../../../helpers/system', () => ({
   isSonarCloud: jest.fn()
diff --git a/server/sonar-web/src/main/js/app/components/nav/settings/PendingPluginsActionNotif.tsx b/server/sonar-web/src/main/js/app/components/nav/settings/PendingPluginsActionNotif.tsx
index 168c76d265b..8b3250b0d1b 100644
--- a/server/sonar-web/src/main/js/app/components/nav/settings/PendingPluginsActionNotif.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/settings/PendingPluginsActionNotif.tsx
@@ -19,12 +19,12 @@
  */
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
+import { translate } from 'sonar-ui-common/helpers/l10n';
+import { Button } from 'sonar-ui-common/components/controls/buttons';
+import { Alert } from 'sonar-ui-common/components/ui/Alert';
 import InstanceMessage from '../../../../components/common/InstanceMessage';
 import RestartButton from '../../../../components/common/RestartButton';
-import { Alert } from '../../../../components/ui/Alert';
-import { Button } from '../../../../components/ui/buttons';
 import { cancelPendingPlugins, PluginPendingResult } from '../../../../api/plugins';
-import { translate } from '../../../../helpers/l10n';
 
 interface Props {
   fetchSystemStatus: () => void;
diff --git a/server/sonar-web/src/main/js/app/components/nav/settings/SettingsNav.tsx b/server/sonar-web/src/main/js/app/components/nav/settings/SettingsNav.tsx
index 29127e59ac0..c3cfdfe81e2 100644
--- a/server/sonar-web/src/main/js/app/components/nav/settings/SettingsNav.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/settings/SettingsNav.tsx
@@ -20,15 +20,15 @@
 import * as React from 'react';
 import * as classNames from 'classnames';
 import { IndexLink, Link } from 'react-router';
+import DropdownIcon from 'sonar-ui-common/components/icons/DropdownIcon';
+import ContextNavBar from 'sonar-ui-common/components/ui/ContextNavBar';
+import NavBarTabs from 'sonar-ui-common/components/ui/NavBarTabs';
+import { translate } from 'sonar-ui-common/helpers/l10n';
+import Dropdown from 'sonar-ui-common/components/controls/Dropdown';
 import PendingPluginsActionNotif from './PendingPluginsActionNotif';
 import SystemRestartNotif from './SystemRestartNotif';
-import ContextNavBar from '../../../../components/nav/ContextNavBar';
-import Dropdown from '../../../../components/controls/Dropdown';
-import DropdownIcon from '../../../../components/icons-components/DropdownIcon';
-import NavBarTabs from '../../../../components/nav/NavBarTabs';
-import * as theme from '../../../theme';
+import { rawSizes } from '../../../theme';
 import { PluginPendingResult } from '../../../../api/plugins';
-import { translate } from '../../../../helpers/l10n';
 
 interface Props {
   extensions: T.Extension[];
@@ -237,7 +237,7 @@ export default class SettingsNav extends React.PureComponent<Props> {
       pendingPlugins.installing.length +
       pendingPlugins.removing.length +
       pendingPlugins.updating.length;
-
+    const contextNavHeight = rawSizes.contextNavHeightRaw;
     let notifComponent;
     if (this.props.systemStatus === 'RESTARTING') {
       notifComponent = <SystemRestartNotif />;
@@ -254,7 +254,7 @@ export default class SettingsNav extends React.PureComponent<Props> {
 
     return (
       <ContextNavBar
-        height={notifComponent ? theme.contextNavHeightRaw + 30 : theme.contextNavHeightRaw}
+        height={notifComponent ? contextNavHeight + 30 : contextNavHeight}
         id="context-navigation"
         notif={notifComponent}>
         <header className="navbar-context-header">
diff --git a/server/sonar-web/src/main/js/app/components/nav/settings/SystemRestartNotif.tsx b/server/sonar-web/src/main/js/app/components/nav/settings/SystemRestartNotif.tsx
index 10396631b2d..cef5c5f9906 100644
--- a/server/sonar-web/src/main/js/app/components/nav/settings/SystemRestartNotif.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/settings/SystemRestartNotif.tsx
@@ -20,8 +20,8 @@
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router';
-import { Alert } from '../../../../components/ui/Alert';
-import { translate } from '../../../../helpers/l10n';
+import { translate } from 'sonar-ui-common/helpers/l10n';
+import { Alert } from 'sonar-ui-common/components/ui/Alert';
 import { getInstance } from '../../../../helpers/system';
 
 export default function SystemRestartNotif() {
diff --git a/server/sonar-web/src/main/js/app/components/nav/settings/__tests__/PendingPluginsActionNotif-test.tsx b/server/sonar-web/src/main/js/app/components/nav/settings/__tests__/PendingPluginsActionNotif-test.tsx
index ed7aea757a6..d8a2390813e 100644
--- a/server/sonar-web/src/main/js/app/components/nav/settings/__tests__/PendingPluginsActionNotif-test.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/settings/__tests__/PendingPluginsActionNotif-test.tsx
@@ -20,7 +20,7 @@
 /* eslint-disable import/order */
 import * as React from 'react';
 import { shallow } from 'enzyme';
-import { click } from '../../../../../helpers/testUtils';
+import { click } from 'sonar-ui-common/helpers/testUtils';
 import PendingPluginsActionNotif from '../PendingPluginsActionNotif';
 
 jest.mock('../../../../../api/plugins', () => ({
diff --git a/server/sonar-web/src/main/js/app/components/notifications/NavLatestNotification.tsx b/server/sonar-web/src/main/js/app/components/notifications/NavLatestNotification.tsx
index 7617d416ebc..a78b8f5a9bb 100644
--- a/server/sonar-web/src/main/js/app/components/notifications/NavLatestNotification.tsx
+++ b/server/sonar-web/src/main/js/app/components/notifications/NavLatestNotification.tsx
@@ -18,11 +18,12 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import ClearIcon from '../../../components/icons-components/ClearIcon';
-import NotificationIcon from '../../../components/icons-components/NotificationIcon';
+import * as differenceInSeconds from 'date-fns/difference_in_seconds';
+import NotificationIcon from 'sonar-ui-common/components/icons/NotificationIcon';
+import ClearIcon from 'sonar-ui-common/components/icons/ClearIcon';
+import { parseDate } from 'sonar-ui-common/helpers/dates';
+import { translate } from 'sonar-ui-common/helpers/l10n';
 import { PrismicFeatureNews } from '../../../api/news';
-import { differenceInSeconds, parseDate } from '../../../helpers/dates';
-import { translate } from '../../../helpers/l10n';
 import './notifications.css';
 
 interface Props {
diff --git a/server/sonar-web/src/main/js/app/components/notifications/NotificationsSidebar.tsx b/server/sonar-web/src/main/js/app/components/notifications/NotificationsSidebar.tsx
index 7463fae9b79..93418181434 100644
--- a/server/sonar-web/src/main/js/app/components/notifications/NotificationsSidebar.tsx
+++ b/server/sonar-web/src/main/js/app/components/notifications/NotificationsSidebar.tsx
@@ -19,13 +19,13 @@
  */
 import * as React from 'react';
 import * as classNames from 'classnames';
+import * as differenceInSeconds from 'date-fns/difference_in_seconds';
+import { translate } from 'sonar-ui-common/helpers/l10n';
+import { ClearButton } from 'sonar-ui-common/components/controls/buttons';
+import Modal from 'sonar-ui-common/components/controls/Modal';
+import DeferredSpinner from 'sonar-ui-common/components/ui/DeferredSpinner';
 import DateFormatter from '../../../components/intl/DateFormatter';
-import DeferredSpinner from '../../../components/common/DeferredSpinner';
-import Modal from '../../../components/controls/Modal';
-import { ClearButton } from '../../../components/ui/buttons';
 import { PrismicFeatureNews } from '../../../api/news';
-import { differenceInSeconds } from '../../../helpers/dates';
-import { translate } from '../../../helpers/l10n';
 
 export interface Props {
   fetchMoreFeatureNews: () => void;
@@ -39,11 +39,12 @@ export interface Props {
 
 export default function NotificationsSidebar(props: Props) {
   const { loading, loadingMore, news, notificationsLastReadDate, paging } = props;
+  const header = translate('embed_docs.whats_new');
   return (
-    <Modal onRequestClose={props.onClose}>
+    <Modal contentLabel={header} onRequestClose={props.onClose}>
       <div className="notifications-sidebar">
         <div className="notifications-sidebar-top">
-          <h3>{translate('embed_docs.whats_new')}</h3>
+          <h3>{header}</h3>
           <ClearButton
             className="button-tiny"
             iconProps={{ size: 12, thin: true }}
diff --git a/server/sonar-web/src/main/js/app/components/notifications/__tests__/NavLatestNotification-test.tsx b/server/sonar-web/src/main/js/app/components/notifications/__tests__/NavLatestNotification-test.tsx
index 3cd28500982..591a7ac15b7 100644
--- a/server/sonar-web/src/main/js/app/components/notifications/__tests__/NavLatestNotification-test.tsx
+++ b/server/sonar-web/src/main/js/app/components/notifications/__tests__/NavLatestNotification-test.tsx
@@ -19,9 +19,9 @@
  */
 import * as React from 'react';
 import { shallow } from 'enzyme';
+import { parseDate } from 'sonar-ui-common/helpers/dates';
 import NavLatestNotification from '../NavLatestNotification';
 import { PrismicFeatureNews } from '../../../../api/news';
-import { parseDate } from '../../../../helpers/dates';
 
 it('should render correctly if there are new features, and the user has not opted out', () => {
   const wrapper = shallowRender();
diff --git a/server/sonar-web/src/main/js/app/components/notifications/__tests__/NotificationsSidebar-test.tsx b/server/sonar-web/src/main/js/app/components/notifications/__tests__/NotificationsSidebar-test.tsx
index b2c6f1427a3..77f0d35997b 100644
--- a/server/sonar-web/src/main/js/app/components/notifications/__tests__/NotificationsSidebar-test.tsx
+++ b/server/sonar-web/src/main/js/app/components/notifications/__tests__/NotificationsSidebar-test.tsx
@@ -19,13 +19,13 @@
  */
 import * as React from 'react';
 import { shallow } from 'enzyme';
+import { parseDate } from 'sonar-ui-common/helpers/dates';
 import NotificationsSidebar, {
   Props,
   isUnread,
   Notification,
   Feature
 } from '../NotificationsSidebar';
-import { parseDate } from '../../../../helpers/dates';
 
 const news: Props['news'] = [
   {
diff --git a/server/sonar-web/src/main/js/app/components/notifications/__tests__/__snapshots__/NotificationsSidebar-test.tsx.snap b/server/sonar-web/src/main/js/app/components/notifications/__tests__/__snapshots__/NotificationsSidebar-test.tsx.snap
index ddcd230ef57..4936ee19ea8 100644
--- a/server/sonar-web/src/main/js/app/components/notifications/__tests__/__snapshots__/NotificationsSidebar-test.tsx.snap
+++ b/server/sonar-web/src/main/js/app/components/notifications/__tests__/__snapshots__/NotificationsSidebar-test.tsx.snap
@@ -124,6 +124,7 @@ exports[`#Notification should render correctly 2`] = `
 
 exports[`#NotificationSidebar should render correctly if there are new features 1`] = `
 <Modal
+  contentLabel="embed_docs.whats_new"
   onRequestClose={[MockFunction]}
 >
   <div
@@ -164,6 +165,7 @@ exports[`#NotificationSidebar should render correctly if there are new features
 
 exports[`#NotificationSidebar should render correctly if there are new features 2`] = `
 <Modal
+  contentLabel="embed_docs.whats_new"
   onRequestClose={[MockFunction]}
 >
   <div
diff --git a/server/sonar-web/src/main/js/app/components/search/Search.tsx b/server/sonar-web/src/main/js/app/components/search/Search.tsx
index 299dacc1f58..028241d51e9 100644
--- a/server/sonar-web/src/main/js/app/components/search/Search.tsx
+++ b/server/sonar-web/src/main/js/app/components/search/Search.tsx
@@ -18,21 +18,21 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import ClockIcon from 'sonar-ui-common/components/icons/ClockIcon';
 import * as key from 'keymaster';
 import { debounce, keyBy, uniqBy } from 'lodash';
 import { FormattedMessage } from 'react-intl';
 import { withRouter, WithRouterProps } from 'react-router';
+import { scrollToElement } from 'sonar-ui-common/helpers/scrolling';
+import { translate, translateWithParameters } from 'sonar-ui-common/helpers/l10n';
+import { lazyLoad } from 'sonar-ui-common/components/lazyLoad';
+import DeferredSpinner from 'sonar-ui-common/components/ui/DeferredSpinner';
+import OutsideClickHandler from 'sonar-ui-common/components/controls/OutsideClickHandler';
+import SearchBox from 'sonar-ui-common/components/controls/SearchBox';
+import { DropdownOverlay } from 'sonar-ui-common/components/controls/Dropdown';
 import { sortQualifiers, More, Results, ComponentResult } from './utils';
 import RecentHistory from '../RecentHistory';
-import DeferredSpinner from '../../../components/common/DeferredSpinner';
-import { DropdownOverlay } from '../../../components/controls/Dropdown';
-import ClockIcon from '../../../components/icons-components/ClockIcon';
-import OutsideClickHandler from '../../../components/controls/OutsideClickHandler';
-import SearchBox from '../../../components/controls/SearchBox';
-import { lazyLoad } from '../../../components/lazyLoad';
 import { getSuggestions } from '../../../api/components';
-import { translate, translateWithParameters } from '../../../helpers/l10n';
-import { scrollToElement } from '../../../helpers/scrolling';
 import { getProjectUrl, getCodeUrl } from '../../../helpers/urls';
 import './Search.css';
 
diff --git a/server/sonar-web/src/main/js/app/components/search/SearchResult.tsx b/server/sonar-web/src/main/js/app/components/search/SearchResult.tsx
index 20fd40ae953..9821523e093 100644
--- a/server/sonar-web/src/main/js/app/components/search/SearchResult.tsx
+++ b/server/sonar-web/src/main/js/app/components/search/SearchResult.tsx
@@ -18,12 +18,12 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import ClockIcon from 'sonar-ui-common/components/icons/ClockIcon';
+import FavoriteIcon from 'sonar-ui-common/components/icons/FavoriteIcon';
+import QualifierIcon from 'sonar-ui-common/components/icons/QualifierIcon';
 import { Link } from 'react-router';
+import Tooltip from 'sonar-ui-common/components/controls/Tooltip';
 import { ComponentResult } from './utils';
-import FavoriteIcon from '../../../components/icons-components/FavoriteIcon';
-import QualifierIcon from '../../../components/icons-components/QualifierIcon';
-import ClockIcon from '../../../components/icons-components/ClockIcon';
-import Tooltip from '../../../components/controls/Tooltip';
 import { getProjectUrl, getCodeUrl } from '../../../helpers/urls';
 
 interface Props {
diff --git a/server/sonar-web/src/main/js/app/components/search/SearchResults.tsx b/server/sonar-web/src/main/js/app/components/search/SearchResults.tsx
index 672560a3c69..f56bcfb5718 100644
--- a/server/sonar-web/src/main/js/app/components/search/SearchResults.tsx
+++ b/server/sonar-web/src/main/js/app/components/search/SearchResults.tsx
@@ -18,9 +18,9 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import { translate } from 'sonar-ui-common/helpers/l10n';
 import SearchShowMore from './SearchShowMore';
 import { sortQualifiers, More, ComponentResult, Results } from './utils';
-import { translate } from '../../../helpers/l10n';
 
 export interface Props {
   allowMore: boolean;
diff --git a/server/sonar-web/src/main/js/app/components/search/SearchShowMore.tsx b/server/sonar-web/src/main/js/app/components/search/SearchShowMore.tsx
index d528a1a7369..964da6f4f45 100644
--- a/server/sonar-web/src/main/js/app/components/search/SearchShowMore.tsx
+++ b/server/sonar-web/src/main/js/app/components/search/SearchShowMore.tsx
@@ -20,8 +20,8 @@
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
 import * as classNames from 'classnames';
-import DeferredSpinner from '../../../components/common/DeferredSpinner';
-import { translate } from '../../../helpers/l10n';
+import { translate } from 'sonar-ui-common/helpers/l10n';
+import DeferredSpinner from 'sonar-ui-common/components/ui/DeferredSpinner';
 
 interface Props {
   allowMore: boolean;
@@ -65,7 +65,7 @@ export default class SearchShowMore extends React.PureComponent<Props> {
             <div className="pull-right text-muted-2 menu-footer-note">
               <FormattedMessage
                 defaultMessage={translate('search.show_more.hint')}
-                id={'search.show_more.hint'}
+                id="search.show_more.hint"
                 values={{
                   key: <span className="shortcut-button shortcut-button-small">Enter</span>
                 }}
diff --git a/server/sonar-web/src/main/js/app/components/search/__tests__/Search-test.tsx b/server/sonar-web/src/main/js/app/components/search/__tests__/Search-test.tsx
index 1dd07758c98..7e3aecaffeb 100644
--- a/server/sonar-web/src/main/js/app/components/search/__tests__/Search-test.tsx
+++ b/server/sonar-web/src/main/js/app/components/search/__tests__/Search-test.tsx
@@ -19,8 +19,8 @@
  */
 import * as React from 'react';
 import { shallow, ShallowWrapper } from 'enzyme';
+import { elementKeydown } from 'sonar-ui-common/helpers/testUtils';
 import { Search } from '../Search';
-import { elementKeydown } from '../../../../helpers/testUtils';
 
 it('selects results', () => {
   const form = shallowRender();
diff --git a/server/sonar-web/src/main/js/app/components/search/__tests__/SearchShowMore-test.tsx b/server/sonar-web/src/main/js/app/components/search/__tests__/SearchShowMore-test.tsx
index 01f4053c3bb..469f82c967e 100644
--- a/server/sonar-web/src/main/js/app/components/search/__tests__/SearchShowMore-test.tsx
+++ b/server/sonar-web/src/main/js/app/components/search/__tests__/SearchShowMore-test.tsx
@@ -19,8 +19,8 @@
  */
 import * as React from 'react';
 import { shallow } from 'enzyme';
+import { click } from 'sonar-ui-common/helpers/testUtils';
 import SearchShowMore from '../SearchShowMore';
-import { click } from '../../../../helpers/testUtils';
 
 it('should render', () => {
   expect(shallowRender()).toMatchSnapshot();
author	Grégoire Aubert <gregoire.aubert@sonarsource.com>	2019-07-11 15:15:35 +0200
committer	SonarTech <sonartech@sonarsource.com>	2019-07-11 20:21:09 +0200
commit	60226e8e297485bcbe384dc766930da0a5a1c079 (patch)
tree	84140c9f6d8d0828dbe4db676f8a06a5d6b4b077 /server/sonar-web/src/main/js/app/components
parent	7ae6f6f0968febebf763cf073b09cb6dd2b218d7 (diff)
download	sonarqube-60226e8e297485bcbe384dc766930da0a5a1c079.tar.gz sonarqube-60226e8e297485bcbe384dc766930da0a5a1c079.zip