SONAR-16435 Clarify date - time on Project Overview

3 files changed, 23 insertions, 13 deletions

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 3e78bec5863..27fc83ce271 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
@@ -18,12 +18,13 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import { useIntl } from 'react-intl';
 import BranchStatus from '../../../../components/common/BranchStatus';
 import HomePageSelect from '../../../../components/controls/HomePageSelect';
 import DetachIcon from '../../../../components/icons/DetachIcon';
-import DateTimeFormatter from '../../../../components/intl/DateTimeFormatter';
+import { formatterOption } from '../../../../components/intl/DateTimeFormatter';
 import { isBranch, isPullRequest } from '../../../../helpers/branch-like';
-import { translate } from '../../../../helpers/l10n';
+import { translate, translateWithParameters } from '../../../../helpers/l10n';
 import { BranchLike } from '../../../../types/branch-like';
 import { ComponentQualifier } from '../../../../types/component';
 import { TaskWarning } from '../../../../types/tasks';
@@ -48,6 +49,7 @@ export function HeaderMeta(props: HeaderMetaProps) {
 
   const currentPage = getCurrentPage(component, branchLike);
   const displayVersion = component.version !== undefined && isABranch;
+  const lastAnalysisDate = useIntl().formatDate(component.analysisDate, formatterOption);
 
   return (
     <>
@@ -63,8 +65,13 @@ export function HeaderMeta(props: HeaderMetaProps) {
           </span>
         )}
         {component.analysisDate && (
-          <span className="spacer-left nowrap note">
-            <DateTimeFormatter date={component.analysisDate} />
+          <span
+            title={translateWithParameters(
+              'overview.project.last_analysis.date_time',
+              lastAnalysisDate
+            )}
+            className="spacer-left nowrap note">
+            {lastAnalysisDate}
           </span>
         )}
         {displayVersion && (
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/HeaderMeta-test.tsx b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/HeaderMeta-test.tsx
index a8ca42031b7..36cd81491a2 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/HeaderMeta-test.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/HeaderMeta-test.tsx
@@ -27,6 +27,12 @@ import { mockCurrentUser } from '../../../../../helpers/testMocks';
 import { ComponentQualifier } from '../../../../../types/component';
 import { getCurrentPage, HeaderMeta, HeaderMetaProps } from '../HeaderMeta';
 
+jest.mock('react-intl', () => ({
+  useIntl: jest.fn().mockImplementation(() => ({
+    formatDate: jest.fn().mockImplementation(() => '2017-01-02T00:00:00.000Z')
+  }))
+}));
+
 it('should render correctly for a branch', () => {
   const wrapper = shallowRender();
   expect(wrapper).toMatchSnapshot();
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/HeaderMeta-test.tsx.snap b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/HeaderMeta-test.tsx.snap
index 8069b500e19..677f9989be4 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/HeaderMeta-test.tsx.snap
+++ b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/HeaderMeta-test.tsx.snap
@@ -30,10 +30,9 @@ exports[`should render correctly for a branch 1`] = `
     </span>
     <span
       className="spacer-left nowrap note"
+      title="overview.project.last_analysis.date_time.2017-01-02T00:00:00.000Z"
     >
-      <DateTimeFormatter
-        date="2017-01-02T00:00:00.000Z"
-      />
+      2017-01-02T00:00:00.000Z
     </span>
     <span
       className="spacer-left nowrap note"
@@ -84,10 +83,9 @@ exports[`should render correctly for a main project branch 1`] = `
     </span>
     <span
       className="spacer-left nowrap note"
+      title="overview.project.last_analysis.date_time.2017-01-02T00:00:00.000Z"
     >
-      <DateTimeFormatter
-        date="2017-01-02T00:00:00.000Z"
-      />
+      2017-01-02T00:00:00.000Z
     </span>
     <span
       className="spacer-left nowrap note"
@@ -179,10 +177,9 @@ exports[`should render correctly for a pull request 1`] = `
     </span>
     <span
       className="spacer-left nowrap note"
+      title="overview.project.last_analysis.date_time.2017-01-02T00:00:00.000Z"
     >
-      <DateTimeFormatter
-        date="2017-01-02T00:00:00.000Z"
-      />
+      2017-01-02T00:00:00.000Z
     </span>
   </div>
   <div