SONAR-13310 Use sonar-ui-common imports where possible

55 files changed, 75 insertions, 355 deletions

diff --git a/server/sonar-web/package.json b/server/sonar-web/package.json
index c9965f9dd34..b9189e323ac 100644
--- a/server/sonar-web/package.json
+++ b/server/sonar-web/package.json
@@ -38,7 +38,7 @@
     "remark-custom-blocks": "2.5.0",
     "remark-rehype": "6.0.0",
     "remark-slug": "5.1.2",
-    "sonar-ui-common": "0.0.57",
+    "sonar-ui-common": "0.0.58",
     "unist-util-visit": "2.0.2",
     "valid-url": "1.0.9",
     "whatwg-fetch": "3.0.0"
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 1fbb9f7521a..5c9711ce993 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
@@ -20,9 +20,9 @@
 import * as React from 'react';
 import { connect } from 'react-redux';
 import ChevronRightIcon from 'sonar-ui-common/components/icons/ChevronRightIcon';
+import DateFormatter from 'sonar-ui-common/components/intl/DateFormatter';
 import { translate } from 'sonar-ui-common/helpers/l10n';
 import { fetchPrismicNews, fetchPrismicRefs, PrismicNews } from '../../../api/news';
-import DateFormatter from '../../../components/intl/DateFormatter';
 import PlaceholderBar from '../../../components/ui/PlaceholderBar';
 import { getGlobalSettingValue, Store } from '../../../store/rootReducer';
 
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 dd34f0fc164..4ade1fb45e0 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
@@ -58,6 +58,9 @@ import PullRequestIcon from 'sonar-ui-common/components/icons/PullRequestIcon';
 import QualifierIcon from 'sonar-ui-common/components/icons/QualifierIcon';
 import SecurityHotspotIcon from 'sonar-ui-common/components/icons/SecurityHotspotIcon';
 import VulnerabilityIcon from 'sonar-ui-common/components/icons/VulnerabilityIcon';
+import DateFormatter from 'sonar-ui-common/components/intl/DateFormatter';
+import DateFromNow from 'sonar-ui-common/components/intl/DateFromNow';
+import DateTimeFormatter from 'sonar-ui-common/components/intl/DateTimeFormatter';
 import { Alert } from 'sonar-ui-common/components/ui/Alert';
 import DeferredSpinner from 'sonar-ui-common/components/ui/DeferredSpinner';
 import DuplicationsRating from 'sonar-ui-common/components/ui/DuplicationsRating';
@@ -68,9 +71,6 @@ import NotFound from '../../../app/components/NotFound';
 import Favorite from '../../../components/controls/Favorite';
 import HomePageSelect from '../../../components/controls/HomePageSelect';
 import BranchLikeIcon from '../../../components/icons/BranchLikeIcon';
-import DateFormatter from '../../../components/intl/DateFormatter';
-import DateFromNow from '../../../components/intl/DateFromNow';
-import DateTimeFormatter from '../../../components/intl/DateTimeFormatter';
 import CoverageRating from '../../../components/ui/CoverageRating';
 import {
   getBranchLikeQuery,
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/HeaderMeta.tsx b/server/sonar-web/src/main/js/app/components/nav/component/HeaderMeta.tsx
index 46b5cd398f2..37c2ffcae46 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/HeaderMeta.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/HeaderMeta.tsx
@@ -20,10 +20,10 @@
 import * as React from 'react';
 import { connect } from 'react-redux';
 import DetachIcon from 'sonar-ui-common/components/icons/DetachIcon';
+import DateTimeFormatter from 'sonar-ui-common/components/intl/DateTimeFormatter';
 import { translate } from 'sonar-ui-common/helpers/l10n';
 import BranchStatus from '../../../../components/common/BranchStatus';
 import HomePageSelect from '../../../../components/controls/HomePageSelect';
-import DateTimeFormatter from '../../../../components/intl/DateTimeFormatter';
 import { isBranch, isPullRequest } from '../../../../helpers/branch-like';
 import { isLoggedIn } from '../../../../helpers/users';
 import { getCurrentUser, Store } from '../../../../store/rootReducer';
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 41a3833d80e..1e153804a27 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
@@ -22,10 +22,10 @@ import * as differenceInSeconds from 'date-fns/difference_in_seconds';
 import * as React from 'react';
 import { ClearButton } from 'sonar-ui-common/components/controls/buttons';
 import Modal from 'sonar-ui-common/components/controls/Modal';
+import DateFormatter from 'sonar-ui-common/components/intl/DateFormatter';
 import DeferredSpinner from 'sonar-ui-common/components/ui/DeferredSpinner';
 import { translate } from 'sonar-ui-common/helpers/l10n';
 import { PrismicFeatureNews } from '../../../api/news';
-import DateFormatter from '../../../components/intl/DateFormatter';
 
 export interface Props {
   fetchMoreFeatureNews: () => void;
diff --git a/server/sonar-web/src/main/js/apps/account/projects/ProjectCard.tsx b/server/sonar-web/src/main/js/apps/account/projects/ProjectCard.tsx
index 65542a67fd8..00bcb60c1aa 100644
--- a/server/sonar-web/src/main/js/apps/account/projects/ProjectCard.tsx
+++ b/server/sonar-web/src/main/js/apps/account/projects/ProjectCard.tsx
@@ -21,10 +21,10 @@ import * as React from 'react';
 import { Link } from 'react-router';
 import HelpTooltip from 'sonar-ui-common/components/controls/HelpTooltip';
 import Tooltip from 'sonar-ui-common/components/controls/Tooltip';
+import DateFromNow from 'sonar-ui-common/components/intl/DateFromNow';
+import DateTimeFormatter from 'sonar-ui-common/components/intl/DateTimeFormatter';
 import Level from 'sonar-ui-common/components/ui/Level';
 import { translate, translateWithParameters } from 'sonar-ui-common/helpers/l10n';
-import DateFromNow from '../../../components/intl/DateFromNow';
-import DateTimeFormatter from '../../../components/intl/DateTimeFormatter';
 import MetaLink from '../../../app/components/nav/component/projectInformation/meta/MetaLink';
 import { orderLinks } from '../../../helpers/projectLinks';
 
diff --git a/server/sonar-web/src/main/js/apps/background-tasks/components/TaskDate.tsx b/server/sonar-web/src/main/js/apps/background-tasks/components/TaskDate.tsx
index fdd4feedbbe..d95b25468db 100644
--- a/server/sonar-web/src/main/js/apps/background-tasks/components/TaskDate.tsx
+++ b/server/sonar-web/src/main/js/apps/background-tasks/components/TaskDate.tsx
@@ -19,8 +19,8 @@
  */
 import * as differenceInDays from 'date-fns/difference_in_days';
 import * as React from 'react';
+import TimeFormatter from 'sonar-ui-common/components/intl/TimeFormatter';
 import { isValidDate, parseDate } from 'sonar-ui-common/helpers/dates';
-import TimeFormatter from '../../../components/intl/TimeFormatter';
 
 interface Props {
   date?: string;
diff --git a/server/sonar-web/src/main/js/apps/background-tasks/components/TaskDay.tsx b/server/sonar-web/src/main/js/apps/background-tasks/components/TaskDay.tsx
index dcaeee2acf2..7fc20ffeb74 100644
--- a/server/sonar-web/src/main/js/apps/background-tasks/components/TaskDay.tsx
+++ b/server/sonar-web/src/main/js/apps/background-tasks/components/TaskDay.tsx
@@ -19,8 +19,8 @@
  */
 import * as isSameDay from 'date-fns/is_same_day';
 import * as React from 'react';
+import DateFormatter from 'sonar-ui-common/components/intl/DateFormatter';
 import { parseDate } from 'sonar-ui-common/helpers/dates';
-import DateFormatter from '../../../components/intl/DateFormatter';
 
 interface Props {
   submittedAt: string;
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/AvailableSinceFacet.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/AvailableSinceFacet.tsx
index d9725dbd9d0..f6d4b99b7ce 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/AvailableSinceFacet.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/AvailableSinceFacet.tsx
@@ -19,11 +19,11 @@
  */
 import * as React from 'react';
 import { InjectedIntlProps, injectIntl } from 'react-intl';
+import { longFormatterOption } from 'sonar-ui-common/components/intl/DateFormatter';
 import { translate } from 'sonar-ui-common/helpers/l10n';
 import DateInput from '../../../components/controls/DateInput';
 import FacetBox from '../../../components/facet/FacetBox';
 import FacetHeader from '../../../components/facet/FacetHeader';
-import { longFormatterOption } from '../../../components/intl/DateFormatter';
 import { Query } from '../query';
 
 interface Props {
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsMeta.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsMeta.tsx
index 4324f0d5afc..1dca1f3849a 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsMeta.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsMeta.tsx
@@ -25,10 +25,10 @@ import Tooltip from 'sonar-ui-common/components/controls/Tooltip';
 import IssueTypeIcon from 'sonar-ui-common/components/icons/IssueTypeIcon';
 import LinkIcon from 'sonar-ui-common/components/icons/LinkIcon';
 import RuleScopeIcon from 'sonar-ui-common/components/icons/RuleScopeIcon';
+import DateFormatter from 'sonar-ui-common/components/intl/DateFormatter';
 import { PopupPlacement } from 'sonar-ui-common/components/ui/popups';
 import { translate, translateWithParameters } from 'sonar-ui-common/helpers/l10n';
 import DocTooltip from '../../../components/docs/DocTooltip';
-import DateFormatter from '../../../components/intl/DateFormatter';
 import SeverityHelper from '../../../components/shared/SeverityHelper';
 import TagsList from '../../../components/tags/TagsList';
 import { getRuleUrl } from '../../../helpers/urls';
diff --git a/server/sonar-web/src/main/js/apps/component-measures/components/LeakPeriodLegend.tsx b/server/sonar-web/src/main/js/apps/component-measures/components/LeakPeriodLegend.tsx
index 7dbe30fe648..2abd611756e 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/components/LeakPeriodLegend.tsx
+++ b/server/sonar-web/src/main/js/apps/component-measures/components/LeakPeriodLegend.tsx
@@ -22,10 +22,12 @@ import * as differenceInDays from 'date-fns/difference_in_days';
 import * as React from 'react';
 import { InjectedIntlProps, injectIntl } from 'react-intl';
 import Tooltip from 'sonar-ui-common/components/controls/Tooltip';
+import DateFormatter, { longFormatterOption } from 'sonar-ui-common/components/intl/DateFormatter';
+import DateFromNow from 'sonar-ui-common/components/intl/DateFromNow';
+import DateTimeFormatter, {
+  formatterOption
+} from 'sonar-ui-common/components/intl/DateTimeFormatter';
 import { translate, translateWithParameters } from 'sonar-ui-common/helpers/l10n';
-import DateFormatter, { longFormatterOption } from '../../../components/intl/DateFormatter';
-import DateFromNow from '../../../components/intl/DateFromNow';
-import DateTimeFormatter, { formatterOption } from '../../../components/intl/DateTimeFormatter';
 import { getPeriodDate, getPeriodLabel } from '../../../helpers/periods';
 
 interface Props {
diff --git a/server/sonar-web/src/main/js/apps/custom-measures/components/MeasureDate.tsx b/server/sonar-web/src/main/js/apps/custom-measures/components/MeasureDate.tsx
index afe73a410ad..9fe3a0aadbe 100644
--- a/server/sonar-web/src/main/js/apps/custom-measures/components/MeasureDate.tsx
+++ b/server/sonar-web/src/main/js/apps/custom-measures/components/MeasureDate.tsx
@@ -18,8 +18,8 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import DateFormatter from 'sonar-ui-common/components/intl/DateFormatter';
 import { translate } from 'sonar-ui-common/helpers/l10n';
-import DateFormatter from '../../../components/intl/DateFormatter';
 
 interface Props {
   measure: T.CustomMeasure;
diff --git a/server/sonar-web/src/main/js/apps/issues/sidebar/CreationDateFacet.tsx b/server/sonar-web/src/main/js/apps/issues/sidebar/CreationDateFacet.tsx
index 3c7bb54b9dc..ea29fa62561 100644
--- a/server/sonar-web/src/main/js/apps/issues/sidebar/CreationDateFacet.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/sidebar/CreationDateFacet.tsx
@@ -22,6 +22,9 @@ import { max } from 'lodash';
 import * as React from 'react';
 import { InjectedIntlProps, injectIntl } from 'react-intl';
 import BarChart from 'sonar-ui-common/components/charts/BarChart';
+import { longFormatterOption } from 'sonar-ui-common/components/intl/DateFormatter';
+import DateFromNow from 'sonar-ui-common/components/intl/DateFromNow';
+import DateTimeFormatter from 'sonar-ui-common/components/intl/DateTimeFormatter';
 import { parseDate } from 'sonar-ui-common/helpers/dates';
 import { translate } from 'sonar-ui-common/helpers/l10n';
 import { formatMeasure } from 'sonar-ui-common/helpers/measures';
@@ -29,9 +32,6 @@ import DateRangeInput from '../../../components/controls/DateRangeInput';
 import FacetBox from '../../../components/facet/FacetBox';
 import FacetHeader from '../../../components/facet/FacetHeader';
 import FacetItem from '../../../components/facet/FacetItem';
-import { longFormatterOption } from '../../../components/intl/DateFormatter';
-import DateFromNow from '../../../components/intl/DateFromNow';
-import DateTimeFormatter from '../../../components/intl/DateTimeFormatter';
 import { Query } from '../utils';
 
 interface Props {
diff --git a/server/sonar-web/src/main/js/apps/maintenance/components/App.tsx b/server/sonar-web/src/main/js/apps/maintenance/components/App.tsx
index 1f776921f25..46218505658 100644
--- a/server/sonar-web/src/main/js/apps/maintenance/components/App.tsx
+++ b/server/sonar-web/src/main/js/apps/maintenance/components/App.tsx
@@ -22,12 +22,12 @@ import * as React from 'react';
 import { Helmet } from 'react-helmet-async';
 import { FormattedMessage } from 'react-intl';
 import { Button } from 'sonar-ui-common/components/controls/buttons';
+import DateFromNow from 'sonar-ui-common/components/intl/DateFromNow';
+import TimeFormatter from 'sonar-ui-common/components/intl/TimeFormatter';
 import { translate } from 'sonar-ui-common/helpers/l10n';
 import { getBaseUrl, getReturnUrl } from 'sonar-ui-common/helpers/urls';
 import { getMigrationStatus, getSystemStatus, migrateDatabase } from '../../../api/system';
 import InstanceMessage from '../../../components/common/InstanceMessage';
-import DateFromNow from '../../../components/intl/DateFromNow';
-import TimeFormatter from '../../../components/intl/TimeFormatter';
 import { isSonarCloud } from '../../../helpers/system';
 import '../styles.css';
 
diff --git a/server/sonar-web/src/main/js/apps/marketplace/components/PluginChangeLogItem.tsx b/server/sonar-web/src/main/js/apps/marketplace/components/PluginChangeLogItem.tsx
index 057e04a691c..7e0da5e02ee 100644
--- a/server/sonar-web/src/main/js/apps/marketplace/components/PluginChangeLogItem.tsx
+++ b/server/sonar-web/src/main/js/apps/marketplace/components/PluginChangeLogItem.tsx
@@ -19,9 +19,9 @@
  */
 import * as React from 'react';
 import Tooltip from 'sonar-ui-common/components/controls/Tooltip';
+import DateFormatter from 'sonar-ui-common/components/intl/DateFormatter';
 import { translate } from 'sonar-ui-common/helpers/l10n';
 import { Release, Update } from '../../../api/plugins';
-import DateFormatter from '../../../components/intl/DateFormatter';
 
 interface Props {
   release: Release;
diff --git a/server/sonar-web/src/main/js/apps/overview/branches/Analysis.tsx b/server/sonar-web/src/main/js/apps/overview/branches/Analysis.tsx
index af6a7889954..540f2eb6023 100644
--- a/server/sonar-web/src/main/js/apps/overview/branches/Analysis.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/branches/Analysis.tsx
@@ -19,8 +19,8 @@
  */
 import { sortBy } from 'lodash';
 import * as React from 'react';
+import DateTooltipFormatter from 'sonar-ui-common/components/intl/DateTooltipFormatter';
 import { translate } from 'sonar-ui-common/helpers/l10n';
-import DateTooltipFormatter from '../../../components/intl/DateTooltipFormatter';
 import { ComponentQualifier } from '../../../types/component';
 import Event from './Event';
 
diff --git a/server/sonar-web/src/main/js/apps/overview/branches/ApplicationLeakPeriodInfo.tsx b/server/sonar-web/src/main/js/apps/overview/branches/ApplicationLeakPeriodInfo.tsx
index 3505f3d96a8..1e49fc123e5 100644
--- a/server/sonar-web/src/main/js/apps/overview/branches/ApplicationLeakPeriodInfo.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/branches/ApplicationLeakPeriodInfo.tsx
@@ -19,8 +19,8 @@
  */
 import * as React from 'react';
 import HelpTooltip from 'sonar-ui-common/components/controls/HelpTooltip';
+import DateFromNow from 'sonar-ui-common/components/intl/DateFromNow';
 import { translateWithParameters } from 'sonar-ui-common/helpers/l10n';
-import DateFromNow from '../../../components/intl/DateFromNow';
 import { ApplicationPeriod } from '../../../types/application';
 
 export interface ApplicationLeakPeriodInfoProps {
diff --git a/server/sonar-web/src/main/js/apps/overview/branches/ProjectLeakPeriodInfo.tsx b/server/sonar-web/src/main/js/apps/overview/branches/ProjectLeakPeriodInfo.tsx
index 60728b5ed16..f9dd76d3c2a 100644
--- a/server/sonar-web/src/main/js/apps/overview/branches/ProjectLeakPeriodInfo.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/branches/ProjectLeakPeriodInfo.tsx
@@ -19,10 +19,10 @@
  */
 import * as React from 'react';
 import { InjectedIntl, injectIntl } from 'react-intl';
+import { longFormatterOption } from 'sonar-ui-common/components/intl/DateFormatter';
+import DateFromNow from 'sonar-ui-common/components/intl/DateFromNow';
+import { formatterOption } from 'sonar-ui-common/components/intl/DateTimeFormatter';
 import { translateWithParameters } from 'sonar-ui-common/helpers/l10n';
-import { longFormatterOption } from '../../../components/intl/DateFormatter';
-import DateFromNow from '../../../components/intl/DateFromNow';
-import { formatterOption } from '../../../components/intl/DateTimeFormatter';
 import { getPeriodDate, getPeriodLabel } from '../../../helpers/periods';
 
 export interface ProjectLeakPeriodInfoProps {
diff --git a/server/sonar-web/src/main/js/apps/overview/branches/__tests__/ApplicationLeakPeriodInfo-test.tsx b/server/sonar-web/src/main/js/apps/overview/branches/__tests__/ApplicationLeakPeriodInfo-test.tsx
index 49a5368570d..239dacfd4dc 100644
--- a/server/sonar-web/src/main/js/apps/overview/branches/__tests__/ApplicationLeakPeriodInfo-test.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/branches/__tests__/ApplicationLeakPeriodInfo-test.tsx
@@ -25,7 +25,7 @@ import {
   ApplicationLeakPeriodInfoProps
 } from '../ApplicationLeakPeriodInfo';
 
-jest.mock('../../../../components/intl/DateFromNow');
+jest.mock('sonar-ui-common/components/intl/DateFromNow');
 
 it('renders correctly', () => {
   const wrapper = shallowRender();
diff --git a/server/sonar-web/src/main/js/apps/overview/components/ApplicationLeakPeriodLegend.tsx b/server/sonar-web/src/main/js/apps/overview/components/ApplicationLeakPeriodLegend.tsx
index 2c2ec2dae87..0475bc60ecb 100644
--- a/server/sonar-web/src/main/js/apps/overview/components/ApplicationLeakPeriodLegend.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/components/ApplicationLeakPeriodLegend.tsx
@@ -21,10 +21,10 @@ import * as classNames from 'classnames';
 import { sortBy } from 'lodash';
 import * as React from 'react';
 import Tooltip from 'sonar-ui-common/components/controls/Tooltip';
+import DateFromNow from 'sonar-ui-common/components/intl/DateFromNow';
+import DateTooltipFormatter from 'sonar-ui-common/components/intl/DateTooltipFormatter';
 import { translate, translateWithParameters } from 'sonar-ui-common/helpers/l10n';
 import { getApplicationLeak } from '../../../api/application';
-import DateFromNow from '../../../components/intl/DateFromNow';
-import DateTooltipFormatter from '../../../components/intl/DateTooltipFormatter';
 import { Branch } from '../../../types/branch-like';
 
 interface Props {
diff --git a/server/sonar-web/src/main/js/apps/overview/components/LeakPeriodLegend.tsx b/server/sonar-web/src/main/js/apps/overview/components/LeakPeriodLegend.tsx
index 3b327634858..c446d17c202 100644
--- a/server/sonar-web/src/main/js/apps/overview/components/LeakPeriodLegend.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/components/LeakPeriodLegend.tsx
@@ -21,10 +21,12 @@ import * as differenceInDays from 'date-fns/difference_in_days';
 import * as React from 'react';
 import { InjectedIntlProps, injectIntl } from 'react-intl';
 import Tooltip from 'sonar-ui-common/components/controls/Tooltip';
+import DateFormatter, { longFormatterOption } from 'sonar-ui-common/components/intl/DateFormatter';
+import DateFromNow from 'sonar-ui-common/components/intl/DateFromNow';
+import DateTimeFormatter, {
+  formatterOption
+} from 'sonar-ui-common/components/intl/DateTimeFormatter';
 import { translateWithParameters } from 'sonar-ui-common/helpers/l10n';
-import DateFormatter, { longFormatterOption } from '../../../components/intl/DateFormatter';
-import DateFromNow from '../../../components/intl/DateFromNow';
-import DateTimeFormatter, { formatterOption } from '../../../components/intl/DateTimeFormatter';
 import { getPeriodDate, getPeriodLabel } from '../../../helpers/periods';
 
 interface Props {
diff --git a/server/sonar-web/src/main/js/apps/portfolio/components/RatingFreshness.tsx b/server/sonar-web/src/main/js/apps/portfolio/components/RatingFreshness.tsx
index 134dc544fd9..f2abceae200 100644
--- a/server/sonar-web/src/main/js/apps/portfolio/components/RatingFreshness.tsx
+++ b/server/sonar-web/src/main/js/apps/portfolio/components/RatingFreshness.tsx
@@ -19,9 +19,9 @@
  */
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
+import DateFromNow from 'sonar-ui-common/components/intl/DateFromNow';
 import Rating from 'sonar-ui-common/components/ui/Rating';
 import { translate } from 'sonar-ui-common/helpers/l10n';
-import DateFromNow from '../../../components/intl/DateFromNow';
 
 interface Props {
   lastChange?: string;
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAnalysesList.tsx b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAnalysesList.tsx
index 1e8bca67f97..a7874f0f686 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAnalysesList.tsx
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAnalysesList.tsx
@@ -22,9 +22,9 @@ import { isEqual } from 'date-fns';
 import { throttle } from 'lodash';
 import * as React from 'react';
 import Tooltip from 'sonar-ui-common/components/controls/Tooltip';
+import DateFormatter from 'sonar-ui-common/components/intl/DateFormatter';
 import { toShortNotSoISOString } from 'sonar-ui-common/helpers/dates';
 import { translate } from 'sonar-ui-common/helpers/l10n';
-import DateFormatter from '../../../components/intl/DateFormatter';
 import { ComponentQualifier } from '../../../types/component';
 import { activityQueryChanged, getAnalysesByVersionByDay, Query } from '../utils';
 import ProjectActivityAnalysis from './ProjectActivityAnalysis';
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAnalysis.tsx b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAnalysis.tsx
index 92793cf0e12..c72d2742315 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAnalysis.tsx
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAnalysis.tsx
@@ -25,11 +25,11 @@ import ActionsDropdown, {
 } from 'sonar-ui-common/components/controls/ActionsDropdown';
 import ClickEventBoundary from 'sonar-ui-common/components/controls/ClickEventBoundary';
 import HelpTooltip from 'sonar-ui-common/components/controls/HelpTooltip';
+import TimeFormatter from 'sonar-ui-common/components/intl/TimeFormatter';
 import { PopupPlacement } from 'sonar-ui-common/components/ui/popups';
 import { parseDate } from 'sonar-ui-common/helpers/dates';
 import { translate, translateWithParameters } from 'sonar-ui-common/helpers/l10n';
 import { scrollToElement } from 'sonar-ui-common/helpers/scrolling';
-import TimeFormatter from '../../../components/intl/TimeFormatter';
 import Events from './Events';
 import AddEventForm from './forms/AddEventForm';
 import RemoveAnalysisForm from './forms/RemoveAnalysisForm';
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/ProjectActivityAnalysis-test.tsx b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/ProjectActivityAnalysis-test.tsx
index fb297573273..71aa7b723af 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/ProjectActivityAnalysis-test.tsx
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/ProjectActivityAnalysis-test.tsx
@@ -21,9 +21,9 @@
 import { mount, shallow } from 'enzyme';
 import * as React from 'react';
 import { IntlProvider } from 'react-intl';
+import TimeFormatter from 'sonar-ui-common/components/intl/TimeFormatter';
 import { scrollToElement } from 'sonar-ui-common/helpers/scrolling';
 import { click } from 'sonar-ui-common/helpers/testUtils';
-import TimeFormatter from '../../../../components/intl/TimeFormatter';
 import { mockAnalysisEvent, mockParsedAnalysis } from '../../../../helpers/testMocks';
 import AddEventForm from '../forms/AddEventForm';
 import RemoveAnalysisForm from '../forms/RemoveAnalysisForm';
diff --git a/server/sonar-web/src/main/js/apps/projectBaseline/components/BranchAnalysisList.tsx b/server/sonar-web/src/main/js/apps/projectBaseline/components/BranchAnalysisList.tsx
index f6118da854a..f90565f4dbd 100644
--- a/server/sonar-web/src/main/js/apps/projectBaseline/components/BranchAnalysisList.tsx
+++ b/server/sonar-web/src/main/js/apps/projectBaseline/components/BranchAnalysisList.tsx
@@ -23,13 +23,13 @@ import { throttle } from 'lodash';
 import * as React from 'react';
 import Select from 'sonar-ui-common/components/controls/Select';
 import Tooltip from 'sonar-ui-common/components/controls/Tooltip';
+import DateFormatter from 'sonar-ui-common/components/intl/DateFormatter';
+import TimeFormatter from 'sonar-ui-common/components/intl/TimeFormatter';
 import DeferredSpinner from 'sonar-ui-common/components/ui/DeferredSpinner';
 import { parseDate, toShortNotSoISOString } from 'sonar-ui-common/helpers/dates';
 import { translate } from 'sonar-ui-common/helpers/l10n';
 import { scrollToElement } from 'sonar-ui-common/helpers/scrolling';
 import { getProjectActivity } from '../../../api/projectActivity';
-import DateFormatter from '../../../components/intl/DateFormatter';
-import TimeFormatter from '../../../components/intl/TimeFormatter';
 import Events from '../../projectActivity/components/Events';
 import { getAnalysesByVersionByDay } from '../../projectActivity/utils';
 
diff --git a/server/sonar-web/src/main/js/apps/projectBaseline/components/BranchList.tsx b/server/sonar-web/src/main/js/apps/projectBaseline/components/BranchList.tsx
index 464c44ce221..068fcce5f0a 100644
--- a/server/sonar-web/src/main/js/apps/projectBaseline/components/BranchList.tsx
+++ b/server/sonar-web/src/main/js/apps/projectBaseline/components/BranchList.tsx
@@ -21,11 +21,11 @@ import * as React from 'react';
 import ActionsDropdown, {
   ActionsDropdownItem
 } from 'sonar-ui-common/components/controls/ActionsDropdown';
+import DateTimeFormatter from 'sonar-ui-common/components/intl/DateTimeFormatter';
 import DeferredSpinner from 'sonar-ui-common/components/ui/DeferredSpinner';
 import { translate } from 'sonar-ui-common/helpers/l10n';
 import { listBranchesNewCodePeriod, resetNewCodePeriod } from '../../../api/newCodePeriod';
 import BranchLikeIcon from '../../../components/icons/BranchLikeIcon';
-import DateTimeFormatter from '../../../components/intl/DateTimeFormatter';
 import { isBranch, sortBranches } from '../../../helpers/branch-like';
 import { BranchLike, BranchWithNewCodePeriod } from '../../../types/branch-like';
 import BranchBaselineSettingModal from './BranchBaselineSettingModal';
diff --git a/server/sonar-web/src/main/js/apps/projectBranches/components/BranchLikeRow.tsx b/server/sonar-web/src/main/js/apps/projectBranches/components/BranchLikeRow.tsx
index 60014366cbd..526a911abc0 100644
--- a/server/sonar-web/src/main/js/apps/projectBranches/components/BranchLikeRow.tsx
+++ b/server/sonar-web/src/main/js/apps/projectBranches/components/BranchLikeRow.tsx
@@ -21,10 +21,10 @@ import * as React from 'react';
 import ActionsDropdown, {
   ActionsDropdownItem
 } from 'sonar-ui-common/components/controls/ActionsDropdown';
+import DateFromNow from 'sonar-ui-common/components/intl/DateFromNow';
 import { translate } from 'sonar-ui-common/helpers/l10n';
 import BranchStatus from '../../../components/common/BranchStatus';
 import BranchLikeIcon from '../../../components/icons/BranchLikeIcon';
-import DateFromNow from '../../../components/intl/DateFromNow';
 import {
   getBranchLikeDisplayName,
   isBranch,
diff --git a/server/sonar-web/src/main/js/apps/projects/components/ProjectCard.tsx b/server/sonar-web/src/main/js/apps/projects/components/ProjectCard.tsx
index bf49fab53fe..12e28acdc9f 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/ProjectCard.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/ProjectCard.tsx
@@ -22,10 +22,10 @@ import * as difference from 'date-fns/difference_in_milliseconds';
 import * as React from 'react';
 import { Link } from 'react-router';
 import QualifierIcon from 'sonar-ui-common/components/icons/QualifierIcon';
+import DateTimeFormatter from 'sonar-ui-common/components/intl/DateTimeFormatter';
 import { translate, translateWithParameters } from 'sonar-ui-common/helpers/l10n';
 import PrivacyBadgeContainer from '../../../components/common/PrivacyBadgeContainer';
 import Favorite from '../../../components/controls/Favorite';
-import DateTimeFormatter from '../../../components/intl/DateTimeFormatter';
 import TagsList from '../../../components/tags/TagsList';
 import { getProjectUrl } from '../../../helpers/urls';
 import { isLoggedIn } from '../../../helpers/users';
diff --git a/server/sonar-web/src/main/js/apps/projectsManagement/ProjectRow.tsx b/server/sonar-web/src/main/js/apps/projectsManagement/ProjectRow.tsx
index 50a59d94a7c..dc32383e3e1 100644
--- a/server/sonar-web/src/main/js/apps/projectsManagement/ProjectRow.tsx
+++ b/server/sonar-web/src/main/js/apps/projectsManagement/ProjectRow.tsx
@@ -22,9 +22,9 @@ import { Link } from 'react-router';
 import Checkbox from 'sonar-ui-common/components/controls/Checkbox';
 import Tooltip from 'sonar-ui-common/components/controls/Tooltip';
 import QualifierIcon from 'sonar-ui-common/components/icons/QualifierIcon';
+import DateTooltipFormatter from 'sonar-ui-common/components/intl/DateTooltipFormatter';
 import { Project } from '../../api/components';
 import PrivacyBadgeContainer from '../../components/common/PrivacyBadgeContainer';
-import DateTooltipFormatter from '../../components/intl/DateTooltipFormatter';
 import './ProjectRow.css';
 import ProjectRowActions from './ProjectRowActions';
 
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/changelog/Changelog.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/changelog/Changelog.tsx
index 20998eeb0ea..c91891da0cf 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/changelog/Changelog.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/changelog/Changelog.tsx
@@ -21,9 +21,9 @@ import * as isSameMinute from 'date-fns/is_same_minute';
 import { sortBy } from 'lodash';
 import * as React from 'react';
 import { Link } from 'react-router';
+import DateTimeFormatter from 'sonar-ui-common/components/intl/DateTimeFormatter';
 import { parseDate } from 'sonar-ui-common/helpers/dates';
 import { translate } from 'sonar-ui-common/helpers/l10n';
-import DateTimeFormatter from '../../../components/intl/DateTimeFormatter';
 import { getRulesUrl } from '../../../helpers/urls';
 import { ProfileChangelogEvent } from '../types';
 import ChangesList from './ChangesList';
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/components/ProfileDate.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/components/ProfileDate.tsx
index 6affd34675f..0f620164b34 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/components/ProfileDate.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/components/ProfileDate.tsx
@@ -19,9 +19,9 @@
  */
 import * as React from 'react';
 import Tooltip from 'sonar-ui-common/components/controls/Tooltip';
+import DateFromNow from 'sonar-ui-common/components/intl/DateFromNow';
+import DateTimeFormatter from 'sonar-ui-common/components/intl/DateTimeFormatter';
 import { translate } from 'sonar-ui-common/helpers/l10n';
-import DateFromNow from '../../../components/intl/DateFromNow';
-import DateTimeFormatter from '../../../components/intl/DateTimeFormatter';
 
 interface Props {
   date?: string;
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/home/EvolutionStagnant.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/home/EvolutionStagnant.tsx
index 1e651abc94f..fa76b87d003 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/home/EvolutionStagnant.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/home/EvolutionStagnant.tsx
@@ -18,8 +18,8 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import DateFormatter from 'sonar-ui-common/components/intl/DateFormatter';
 import { translate, translateWithParameters } from 'sonar-ui-common/helpers/l10n';
-import DateFormatter from '../../../components/intl/DateFormatter';
 import ProfileLink from '../components/ProfileLink';
 import { Profile } from '../types';
 import { isStagnant } from '../utils';
diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotReviewHistory.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotReviewHistory.tsx
index af209cfc68e..4a9e51a5ad8 100644
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotReviewHistory.tsx
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotReviewHistory.tsx
@@ -23,9 +23,9 @@ import * as React from 'react';
 import { Button, DeleteButton, EditButton } from 'sonar-ui-common/components/controls/buttons';
 import Dropdown, { DropdownOverlay } from 'sonar-ui-common/components/controls/Dropdown';
 import Toggler from 'sonar-ui-common/components/controls/Toggler';
+import DateTimeFormatter from 'sonar-ui-common/components/intl/DateTimeFormatter';
 import { PopupPlacement } from 'sonar-ui-common/components/ui/popups';
 import { translate, translateWithParameters } from 'sonar-ui-common/helpers/l10n';
-import DateTimeFormatter from '../../../components/intl/DateTimeFormatter';
 import IssueChangelogDiff from '../../../components/issue/components/IssueChangelogDiff';
 import Avatar from '../../../components/ui/Avatar';
 import { Hotspot, ReviewHistoryType } from '../../../types/security-hotspots';
diff --git a/server/sonar-web/src/main/js/apps/system/components/system-upgrade/SystemUpgradeIntermediate.tsx b/server/sonar-web/src/main/js/apps/system/components/system-upgrade/SystemUpgradeIntermediate.tsx
index 06411b8801e..a505e8521f8 100644
--- a/server/sonar-web/src/main/js/apps/system/components/system-upgrade/SystemUpgradeIntermediate.tsx
+++ b/server/sonar-web/src/main/js/apps/system/components/system-upgrade/SystemUpgradeIntermediate.tsx
@@ -20,8 +20,8 @@
 import * as React from 'react';
 import { ButtonLink } from 'sonar-ui-common/components/controls/buttons';
 import DropdownIcon from 'sonar-ui-common/components/icons/DropdownIcon';
+import DateFormatter from 'sonar-ui-common/components/intl/DateFormatter';
 import { translate } from 'sonar-ui-common/helpers/l10n';
-import DateFormatter from '../../../../components/intl/DateFormatter';
 import { SystemUpgrade } from '../../../../types/system';
 
 interface Props {
diff --git a/server/sonar-web/src/main/js/apps/system/components/system-upgrade/SystemUpgradeItem.tsx b/server/sonar-web/src/main/js/apps/system/components/system-upgrade/SystemUpgradeItem.tsx
index 9ff36dd4d69..5c41492d62e 100644
--- a/server/sonar-web/src/main/js/apps/system/components/system-upgrade/SystemUpgradeItem.tsx
+++ b/server/sonar-web/src/main/js/apps/system/components/system-upgrade/SystemUpgradeItem.tsx
@@ -19,8 +19,8 @@
  */
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
+import DateFormatter from 'sonar-ui-common/components/intl/DateFormatter';
 import { translate, translateWithParameters } from 'sonar-ui-common/helpers/l10n';
-import DateFormatter from '../../../../components/intl/DateFormatter';
 import {
   getEdition,
   getEditionDownloadFilename,
diff --git a/server/sonar-web/src/main/js/apps/users/components/TokensFormItem.tsx b/server/sonar-web/src/main/js/apps/users/components/TokensFormItem.tsx
index deac20c6e45..a1ec4dc3d3a 100644
--- a/server/sonar-web/src/main/js/apps/users/components/TokensFormItem.tsx
+++ b/server/sonar-web/src/main/js/apps/users/components/TokensFormItem.tsx
@@ -22,12 +22,12 @@ import { FormattedMessage } from 'react-intl';
 import { Button } from 'sonar-ui-common/components/controls/buttons';
 import ConfirmButton from 'sonar-ui-common/components/controls/ConfirmButton';
 import Tooltip from 'sonar-ui-common/components/controls/Tooltip';
+import DateFormatter from 'sonar-ui-common/components/intl/DateFormatter';
+import DateFromNowHourPrecision from 'sonar-ui-common/components/intl/DateFromNowHourPrecision';
 import DeferredSpinner from 'sonar-ui-common/components/ui/DeferredSpinner';
 import { translate } from 'sonar-ui-common/helpers/l10n';
 import { limitComponentName } from 'sonar-ui-common/helpers/path';
 import { revokeToken } from '../../../api/user-tokens';
-import DateFormatter from '../../../components/intl/DateFormatter';
-import DateFromNowHourPrecision from '../../../components/intl/DateFromNowHourPrecision';
 
 export type TokenDeleteConfirmation = 'inline' | 'modal';
 
diff --git a/server/sonar-web/src/main/js/apps/users/components/UserListItem.tsx b/server/sonar-web/src/main/js/apps/users/components/UserListItem.tsx
index c54d7b1e9c2..2720b08425c 100644
--- a/server/sonar-web/src/main/js/apps/users/components/UserListItem.tsx
+++ b/server/sonar-web/src/main/js/apps/users/components/UserListItem.tsx
@@ -20,8 +20,8 @@
 import * as React from 'react';
 import { ButtonIcon } from 'sonar-ui-common/components/controls/buttons';
 import BulletListIcon from 'sonar-ui-common/components/icons/BulletListIcon';
+import DateFromNowHourPrecision from 'sonar-ui-common/components/intl/DateFromNowHourPrecision';
 import { translate } from 'sonar-ui-common/helpers/l10n';
-import DateFromNowHourPrecision from '../../../components/intl/DateFromNowHourPrecision';
 import Avatar from '../../../components/ui/Avatar';
 import TokensFormModal from './TokensFormModal';
 import UserActions from './UserActions';
diff --git a/server/sonar-web/src/main/js/apps/users/components/__tests__/TokensFormItem-test.tsx b/server/sonar-web/src/main/js/apps/users/components/__tests__/TokensFormItem-test.tsx
index 9264c43400a..cf65c6be4ca 100644
--- a/server/sonar-web/src/main/js/apps/users/components/__tests__/TokensFormItem-test.tsx
+++ b/server/sonar-web/src/main/js/apps/users/components/__tests__/TokensFormItem-test.tsx
@@ -23,9 +23,9 @@ import { click, waitAndUpdate } from 'sonar-ui-common/helpers/testUtils';
 import { revokeToken } from '../../../../api/user-tokens';
 import TokensFormItem from '../TokensFormItem';
 
-jest.mock('../../../../components/intl/DateFormatter');
-jest.mock('../../../../components/intl/DateFromNow');
-jest.mock('../../../../components/intl/DateTimeFormatter');
+jest.mock('sonar-ui-common/components/intl/DateFormatter');
+jest.mock('sonar-ui-common/components/intl/DateFromNow');
+jest.mock('sonar-ui-common/components/intl/DateTimeFormatter');
 
 jest.mock('../../../../api/user-tokens', () => ({
   revokeToken: jest.fn().mockResolvedValue(undefined)
diff --git a/server/sonar-web/src/main/js/apps/users/components/__tests__/UserListItem-test.tsx b/server/sonar-web/src/main/js/apps/users/components/__tests__/UserListItem-test.tsx
index 80a3a11a5cf..273a495be88 100644
--- a/server/sonar-web/src/main/js/apps/users/components/__tests__/UserListItem-test.tsx
+++ b/server/sonar-web/src/main/js/apps/users/components/__tests__/UserListItem-test.tsx
@@ -22,8 +22,8 @@ import * as React from 'react';
 import { click } from 'sonar-ui-common/helpers/testUtils';
 import UserListItem from '../UserListItem';
 
-jest.mock('../../../../components/intl/DateFromNow');
-jest.mock('../../../../components/intl/DateTimeFormatter');
+jest.mock('sonar-ui-common/components/intl/DateFromNow');
+jest.mock('sonar-ui-common/components/intl/DateTimeFormatter');
 
 const user: T.User = {
   active: true,
diff --git a/server/sonar-web/src/main/js/apps/webhooks/components/DeliveryAccordion.tsx b/server/sonar-web/src/main/js/apps/webhooks/components/DeliveryAccordion.tsx
index dffd12ecb9c..6d63dc8c08b 100644
--- a/server/sonar-web/src/main/js/apps/webhooks/components/DeliveryAccordion.tsx
+++ b/server/sonar-web/src/main/js/apps/webhooks/components/DeliveryAccordion.tsx
@@ -21,8 +21,8 @@ import * as React from 'react';
 import BoxedGroupAccordion from 'sonar-ui-common/components/controls/BoxedGroupAccordion';
 import AlertErrorIcon from 'sonar-ui-common/components/icons/AlertErrorIcon';
 import AlertSuccessIcon from 'sonar-ui-common/components/icons/AlertSuccessIcon';
+import DateTimeFormatter from 'sonar-ui-common/components/intl/DateTimeFormatter';
 import { getDelivery } from '../../../api/webhooks';
-import DateTimeFormatter from '../../../components/intl/DateTimeFormatter';
 import DeliveryItem from './DeliveryItem';
 
 interface Props {
diff --git a/server/sonar-web/src/main/js/apps/webhooks/components/WebhookItemLatestDelivery.tsx b/server/sonar-web/src/main/js/apps/webhooks/components/WebhookItemLatestDelivery.tsx
index 66370ebc77a..58397e51389 100644
--- a/server/sonar-web/src/main/js/apps/webhooks/components/WebhookItemLatestDelivery.tsx
+++ b/server/sonar-web/src/main/js/apps/webhooks/components/WebhookItemLatestDelivery.tsx
@@ -22,8 +22,8 @@ import { ButtonIcon } from 'sonar-ui-common/components/controls/buttons';
 import AlertErrorIcon from 'sonar-ui-common/components/icons/AlertErrorIcon';
 import AlertSuccessIcon from 'sonar-ui-common/components/icons/AlertSuccessIcon';
 import BulletListIcon from 'sonar-ui-common/components/icons/BulletListIcon';
+import DateTimeFormatter from 'sonar-ui-common/components/intl/DateTimeFormatter';
 import { translate } from 'sonar-ui-common/helpers/l10n';
-import DateTimeFormatter from '../../../components/intl/DateTimeFormatter';
 import LatestDeliveryForm from './LatestDeliveryForm';
 
 interface Props {
diff --git a/server/sonar-web/src/main/js/components/SourceViewer/components/SCMPopup.tsx b/server/sonar-web/src/main/js/components/SourceViewer/components/SCMPopup.tsx
index 0f945e8eb34..7f66c5963bd 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/components/SCMPopup.tsx
+++ b/server/sonar-web/src/main/js/components/SourceViewer/components/SCMPopup.tsx
@@ -20,8 +20,8 @@
 import * as classNames from 'classnames';
 import * as React from 'react';
 import { DropdownOverlay } from 'sonar-ui-common/components/controls/Dropdown';
+import DateFormatter from 'sonar-ui-common/components/intl/DateFormatter';
 import { PopupPlacement } from 'sonar-ui-common/components/ui/popups';
-import DateFormatter from '../../intl/DateFormatter';
 
 interface Props {
   line: T.SourceLine;
diff --git a/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltips.tsx b/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltips.tsx
index 5cf39c6296e..c88ca7475dd 100644
--- a/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltips.tsx
+++ b/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltips.tsx
@@ -18,10 +18,10 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import DateTimeFormatter from 'sonar-ui-common/components/intl/DateTimeFormatter';
 import { Popup, PopupPlacement } from 'sonar-ui-common/components/ui/popups';
 import { isDefined } from 'sonar-ui-common/helpers/types';
 import { MeasureHistory, Serie } from '../../types/project-activity';
-import DateTimeFormatter from '../intl/DateTimeFormatter';
 import GraphsTooltipsContent from './GraphsTooltipsContent';
 import GraphsTooltipsContentCoverage from './GraphsTooltipsContentCoverage';
 import GraphsTooltipsContentDuplication from './GraphsTooltipsContentDuplication';
diff --git a/server/sonar-web/src/main/js/components/intl/DateFormatter.tsx b/server/sonar-web/src/main/js/components/intl/DateFormatter.tsx
deleted file mode 100644
index 2695d5c8ca7..00000000000
--- a/server/sonar-web/src/main/js/components/intl/DateFormatter.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2020 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 * as React from 'react';
-import { DateSource, FormattedDate } from 'react-intl';
-import { parseDate } from 'sonar-ui-common/helpers/dates';
-
-interface Props {
-  children?: (formattedDate: string) => React.ReactNode;
-  date: DateSource;
-  long?: boolean;
-}
-
-export const formatterOption = { year: 'numeric', month: 'short', day: '2-digit' };
-
-export const longFormatterOption = { year: 'numeric', month: 'long', day: 'numeric' };
-
-export default function DateFormatter({ children, date, long }: Props) {
-  return (
-    <FormattedDate value={parseDate(date)} {...(long ? longFormatterOption : formatterOption)}>
-      {children}
-    </FormattedDate>
-  );
-}
diff --git a/server/sonar-web/src/main/js/components/intl/DateFromNow.tsx b/server/sonar-web/src/main/js/components/intl/DateFromNow.tsx
deleted file mode 100644
index 975e0c0b389..00000000000
--- a/server/sonar-web/src/main/js/components/intl/DateFromNow.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2020 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 * as React from 'react';
-import { DateSource, FormattedRelative } from 'react-intl';
-import { parseDate } from 'sonar-ui-common/helpers/dates';
-
-interface Props {
-  children?: (formattedDate: string) => React.ReactNode;
-  date: DateSource;
-}
-
-export default function DateFromNow({ children, date }: Props) {
-  return <FormattedRelative value={parseDate(date)}>{children}</FormattedRelative>;
-}
diff --git a/server/sonar-web/src/main/js/components/intl/DateFromNowHourPrecision.tsx b/server/sonar-web/src/main/js/components/intl/DateFromNowHourPrecision.tsx
deleted file mode 100644
index 900239f24f2..00000000000
--- a/server/sonar-web/src/main/js/components/intl/DateFromNowHourPrecision.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2020 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 * as differenceInHours from 'date-fns/difference_in_hours';
-import * as React from 'react';
-import { DateSource } from 'react-intl';
-import Tooltip from 'sonar-ui-common/components/controls/Tooltip';
-import { translate } from 'sonar-ui-common/helpers/l10n';
-import DateFromNow from './DateFromNow';
-import DateTimeFormatter from './DateTimeFormatter';
-
-interface Props {
-  children?: (formattedDate: string) => React.ReactNode;
-  date?: DateSource;
-}
-
-export default class DateFromNowHourPrecision extends React.PureComponent<Props> {
-  render() {
-    const { children, date } = this.props;
-
-    let overrideDate: string | undefined;
-    if (!date) {
-      overrideDate = translate('never');
-    } else if (differenceInHours(Date.now(), date) < 1) {
-      overrideDate = translate('less_than_1_hour_ago');
-    }
-
-    if (overrideDate) {
-      return children ? children(overrideDate) : overrideDate;
-    }
-
-    return (
-      <Tooltip overlay={<DateTimeFormatter date={date!} />}>
-        <span>
-          <DateFromNow date={date!}>{children}</DateFromNow>
-        </span>
-      </Tooltip>
-    );
-  }
-}
diff --git a/server/sonar-web/src/main/js/components/intl/DateTimeFormatter.tsx b/server/sonar-web/src/main/js/components/intl/DateTimeFormatter.tsx
deleted file mode 100644
index 12481c69947..00000000000
--- a/server/sonar-web/src/main/js/components/intl/DateTimeFormatter.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2020 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 * as React from 'react';
-import { DateSource, FormattedDate } from 'react-intl';
-import { parseDate } from 'sonar-ui-common/helpers/dates';
-
-interface Props {
-  children?: (formattedDate: string) => React.ReactNode;
-  date: DateSource;
-}
-
-export const formatterOption = {
-  year: 'numeric',
-  month: 'long',
-  day: 'numeric',
-  hour: 'numeric',
-  minute: 'numeric'
-};
-
-export default function DateTimeFormatter({ children, date }: Props) {
-  return (
-    <FormattedDate value={parseDate(date)} {...formatterOption}>
-      {children}
-    </FormattedDate>
-  );
-}
diff --git a/server/sonar-web/src/main/js/components/intl/DateTooltipFormatter.tsx b/server/sonar-web/src/main/js/components/intl/DateTooltipFormatter.tsx
deleted file mode 100644
index 3d858ac8838..00000000000
--- a/server/sonar-web/src/main/js/components/intl/DateTooltipFormatter.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2020 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 * as React from 'react';
-import Tooltip from 'sonar-ui-common/components/controls/Tooltip';
-import { parseDate } from 'sonar-ui-common/helpers/dates';
-import DateFormatter from './DateFormatter';
-import DateTimeFormatter from './DateTimeFormatter';
-
-interface Props {
-  className?: string;
-  date: Date | string | number;
-}
-
-export default function DateTooltipFormatter({ className, date }: Props) {
-  const parsedDate = parseDate(date);
-  return (
-    <DateFormatter date={parsedDate} long={true}>
-      {formattedDate => (
-        <Tooltip mouseEnterDelay={0.5} overlay={<DateTimeFormatter date={parsedDate} />}>
-          <time className={className} dateTime={parsedDate.toISOString()}>
-            {formattedDate}
-          </time>
-        </Tooltip>
-      )}
-    </DateFormatter>
-  );
-}
diff --git a/server/sonar-web/src/main/js/components/intl/TimeFormatter.tsx b/server/sonar-web/src/main/js/components/intl/TimeFormatter.tsx
deleted file mode 100644
index 3215886c51f..00000000000
--- a/server/sonar-web/src/main/js/components/intl/TimeFormatter.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2020 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 * as React from 'react';
-import { DateSource, FormattedTime } from 'react-intl';
-import { parseDate } from 'sonar-ui-common/helpers/dates';
-
-interface Props {
-  children?: (formattedDate: string) => React.ReactNode;
-  date: DateSource;
-  long?: boolean;
-}
-
-export const formatterOption = { hour: 'numeric', minute: 'numeric' };
-
-export const longFormatterOption = { hour: 'numeric', minute: 'numeric', second: 'numeric' };
-
-export default function TimeFormatter({ children, date, long }: Props) {
-  return (
-    <FormattedTime value={parseDate(date)} {...(long ? longFormatterOption : formatterOption)}>
-      {children}
-    </FormattedTime>
-  );
-}
diff --git a/server/sonar-web/src/main/js/components/intl/__mocks__/DateFromNow.tsx b/server/sonar-web/src/main/js/components/intl/__mocks__/DateFromNow.tsx
deleted file mode 100644
index 762fcb26a48..00000000000
--- a/server/sonar-web/src/main/js/components/intl/__mocks__/DateFromNow.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2020 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 * as React from 'react';
-import { DateSource } from 'react-intl';
-
-interface Props {
-  children?: (formattedDate: string) => React.ReactNode;
-  date: DateSource;
-}
-
-export default function DateFromNow({ children, date }: Props) {
-  return children && children(date.toString());
-}
diff --git a/server/sonar-web/src/main/js/components/issue/components/IssueChangelog.tsx b/server/sonar-web/src/main/js/components/issue/components/IssueChangelog.tsx
index 00f13f474d9..3fbae07587b 100644
--- a/server/sonar-web/src/main/js/components/issue/components/IssueChangelog.tsx
+++ b/server/sonar-web/src/main/js/components/issue/components/IssueChangelog.tsx
@@ -22,8 +22,8 @@ import { ButtonLink } from 'sonar-ui-common/components/controls/buttons';
 import Toggler from 'sonar-ui-common/components/controls/Toggler';
 import Tooltip from 'sonar-ui-common/components/controls/Tooltip';
 import DropdownIcon from 'sonar-ui-common/components/icons/DropdownIcon';
-import DateFromNow from '../../intl/DateFromNow';
-import DateTimeFormatter from '../../intl/DateTimeFormatter';
+import DateFromNow from 'sonar-ui-common/components/intl/DateFromNow';
+import DateTimeFormatter from 'sonar-ui-common/components/intl/DateTimeFormatter';
 import ChangelogPopup from '../popups/ChangelogPopup';
 
 interface Props {
diff --git a/server/sonar-web/src/main/js/components/issue/components/IssueCommentLine.tsx b/server/sonar-web/src/main/js/components/issue/components/IssueCommentLine.tsx
index e252bd249bb..05c6d4d6574 100644
--- a/server/sonar-web/src/main/js/components/issue/components/IssueCommentLine.tsx
+++ b/server/sonar-web/src/main/js/components/issue/components/IssueCommentLine.tsx
@@ -21,9 +21,9 @@ import { sanitize } from 'dompurify';
 import * as React from 'react';
 import { DeleteButton, EditButton } from 'sonar-ui-common/components/controls/buttons';
 import Toggler from 'sonar-ui-common/components/controls/Toggler';
+import DateFromNow from 'sonar-ui-common/components/intl/DateFromNow';
 import { PopupPlacement } from 'sonar-ui-common/components/ui/popups';
 import { translateWithParameters } from 'sonar-ui-common/helpers/l10n';
-import DateFromNow from '../../intl/DateFromNow';
 import Avatar from '../../ui/Avatar';
 import CommentDeletePopup from '../popups/CommentDeletePopup';
 import CommentPopup from '../popups/CommentPopup';
diff --git a/server/sonar-web/src/main/js/components/issue/popups/ChangelogPopup.tsx b/server/sonar-web/src/main/js/components/issue/popups/ChangelogPopup.tsx
index 6f1062125a3..6fb71ad11e5 100644
--- a/server/sonar-web/src/main/js/components/issue/popups/ChangelogPopup.tsx
+++ b/server/sonar-web/src/main/js/components/issue/popups/ChangelogPopup.tsx
@@ -19,10 +19,10 @@
  */
 import * as React from 'react';
 import { DropdownOverlay } from 'sonar-ui-common/components/controls/Dropdown';
+import DateTimeFormatter from 'sonar-ui-common/components/intl/DateTimeFormatter';
 import { PopupPlacement } from 'sonar-ui-common/components/ui/popups';
 import { translate, translateWithParameters } from 'sonar-ui-common/helpers/l10n';
 import { getIssueChangelog } from '../../../api/issues';
-import DateTimeFormatter from '../../intl/DateTimeFormatter';
 import Avatar from '../../ui/Avatar';
 import IssueChangelogDiff from '../components/IssueChangelogDiff';
 
diff --git a/server/sonar-web/yarn.lock b/server/sonar-web/yarn.lock
index 47f95cc42c0..df6e99dae70 100644
--- a/server/sonar-web/yarn.lock
+++ b/server/sonar-web/yarn.lock
@@ -10517,10 +10517,10 @@ sockjs@0.3.19:
     faye-websocket "^0.10.0"
     uuid "^3.0.1"
 
-sonar-ui-common@0.0.57:
-  version "0.0.57"
-  resolved "https://repox.jfrog.io/repox/api/npm/npm/sonar-ui-common/-/sonar-ui-common-0.0.57.tgz#5fb3f602323b00b64dfe774811ab7fc3c8cfa30e"
-  integrity sha1-X7P2AjI7ALZN/ndIEat/w8jPow4=
+sonar-ui-common@0.0.58:
+  version "0.0.58"
+  resolved "https://repox.jfrog.io/repox/api/npm/npm/sonar-ui-common/-/sonar-ui-common-0.0.58.tgz#860440bd476d176c71828e9b82e193384cd57f66"
+  integrity sha1-hgRAvUdtF2xxgo6bguGTOEzVf2Y=
   dependencies:
     "@types/react-select" "1.2.6"
     classnames "2.2.6"