SONAR-9385 SONAR-9436 Replace moment with react-intl

9 files changed, 87 insertions, 60 deletions

diff --git a/server/sonar-web/src/main/js/components/issue/components/IssueChangelog.js b/server/sonar-web/src/main/js/components/issue/components/IssueChangelog.js
index 721c83ff7e4..404e395479a 100644
--- a/server/sonar-web/src/main/js/components/issue/components/IssueChangelog.js
+++ b/server/sonar-web/src/main/js/components/issue/components/IssueChangelog.js
@@ -19,9 +19,11 @@
  */
 // @flow
 import React from 'react';
-import moment from 'moment';
+import { FormattedRelative } from 'react-intl';
 import BubblePopupHelper from '../../../components/common/BubblePopupHelper';
 import ChangelogPopup from '../popups/ChangelogPopup';
+import DateTimeFormatter from '../../../components/intl/DateTimeFormatter';
+import Tooltip from '../../../components/controls/Tooltip';
 /*:: import type { Issue } from '../types'; */
 
 /*::
@@ -47,22 +49,25 @@ export default class IssueChangelog extends React.PureComponent {
   };
 
   render() {
-    const momentCreationDate = moment(this.props.creationDate);
     return (
       <BubblePopupHelper
         isOpen={this.props.isOpen}
         position="bottomright"
         togglePopup={this.toggleChangelog}
         popup={<ChangelogPopup issue={this.props.issue} onFail={this.props.onFail} />}>
-        <button
-          className="button-link issue-action issue-action-with-options js-issue-show-changelog"
-          title={momentCreationDate.format('LLL')}
-          onClick={this.handleClick}>
-          <span className="issue-meta-label">
-            {momentCreationDate.fromNow()}
-          </span>
-          <i className="icon-dropdown little-spacer-left" />
-        </button>
+        <Tooltip
+          overlay={<DateTimeFormatter date={this.props.creationDate} />}
+          placement="left"
+          mouseEnterDelay={0.5}>
+          <button
+            className="button-link issue-action issue-action-with-options js-issue-show-changelog"
+            onClick={this.handleClick}>
+            <span className="issue-meta-label">
+              <FormattedRelative value={this.props.creationDate} />
+            </span>
+            <i className="icon-dropdown little-spacer-left" />
+          </button>
+        </Tooltip>
       </BubblePopupHelper>
     );
   }
diff --git a/server/sonar-web/src/main/js/components/issue/components/IssueCommentLine.js b/server/sonar-web/src/main/js/components/issue/components/IssueCommentLine.js
index 54836503b39..51865ad5850 100644
--- a/server/sonar-web/src/main/js/components/issue/components/IssueCommentLine.js
+++ b/server/sonar-web/src/main/js/components/issue/components/IssueCommentLine.js
@@ -19,7 +19,7 @@
  */
 // @flow
 import React from 'react';
-import moment from 'moment';
+import { FormattedRelative } from 'react-intl';
 import Avatar from '../../../components/ui/Avatar';
 import BubblePopupHelper from '../../../components/common/BubblePopupHelper';
 import CommentDeletePopup from '../popups/CommentDeletePopup';
@@ -98,7 +98,7 @@ export default class IssueCommentLine extends React.PureComponent {
           tabIndex={0}
         />
         <div className="issue-comment-age">
-          ({moment(comment.createdAt).fromNow()})
+          <FormattedRelative value={comment.createdAt} />
         </div>
         <div className="issue-comment-actions">
           {comment.updatable &&
diff --git a/server/sonar-web/src/main/js/components/issue/components/__tests__/IssueChangelog-test.js b/server/sonar-web/src/main/js/components/issue/components/__tests__/IssueChangelog-test.js
index 446dc8bcea4..65c2c001f3a 100644
--- a/server/sonar-web/src/main/js/components/issue/components/__tests__/IssueChangelog-test.js
+++ b/server/sonar-web/src/main/js/components/issue/components/__tests__/IssueChangelog-test.js
@@ -28,11 +28,6 @@ const issue = {
   creationDate: '2017-03-01T09:36:01+0100'
 };
 
-jest.mock('moment', () => () => ({
-  format: () => 'March 1, 2017 9:36 AM',
-  fromNow: () => 'a month ago'
-}));
-
 it('should render correctly', () => {
   const element = shallow(
     <IssueChangelog
diff --git a/server/sonar-web/src/main/js/components/issue/components/__tests__/IssueCommentLine-test.js b/server/sonar-web/src/main/js/components/issue/components/__tests__/IssueCommentLine-test.js
index 9096b729386..3075e60cc89 100644
--- a/server/sonar-web/src/main/js/components/issue/components/__tests__/IssueCommentLine-test.js
+++ b/server/sonar-web/src/main/js/components/issue/components/__tests__/IssueCommentLine-test.js
@@ -31,8 +31,6 @@ const comment = {
   updatable: true
 };
 
-jest.mock('moment', () => () => ({ fromNow: () => 'a month ago' }));
-
 it('should render correctly a comment that is not updatable', () => {
   const element = shallow(
     <IssueCommentLine
diff --git a/server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueChangelog-test.js.snap b/server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueChangelog-test.js.snap
index 8e1f9850fc8..531d5bf7ab2 100644
--- a/server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueChangelog-test.js.snap
+++ b/server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueChangelog-test.js.snap
@@ -27,20 +27,32 @@ exports[`should open the popup when the button is clicked 2`] = `
   position="bottomright"
   togglePopup={[Function]}
 >
-  <button
-    className="button-link issue-action issue-action-with-options js-issue-show-changelog"
-    onClick={[Function]}
-    title="March 1, 2017 9:36 AM"
+  <Tooltip
+    mouseEnterDelay={0.5}
+    overlay={
+      <DateTimeFormatter
+        date="2017-03-01T09:36:01+0100"
+      />
+    }
+    placement="left"
   >
-    <span
-      className="issue-meta-label"
+    <button
+      className="button-link issue-action issue-action-with-options js-issue-show-changelog"
+      onClick={[Function]}
     >
-      a month ago
-    </span>
-    <i
-      className="icon-dropdown little-spacer-left"
-    />
-  </button>
+      <span
+        className="issue-meta-label"
+      >
+        <FormattedRelative
+          updateInterval={10000}
+          value="2017-03-01T09:36:01+0100"
+        />
+      </span>
+      <i
+        className="icon-dropdown little-spacer-left"
+      />
+    </button>
+  </Tooltip>
 </BubblePopupHelper>
 `;
 
@@ -62,19 +74,31 @@ exports[`should render correctly 1`] = `
   position="bottomright"
   togglePopup={[Function]}
 >
-  <button
-    className="button-link issue-action issue-action-with-options js-issue-show-changelog"
-    onClick={[Function]}
-    title="March 1, 2017 9:36 AM"
+  <Tooltip
+    mouseEnterDelay={0.5}
+    overlay={
+      <DateTimeFormatter
+        date="2017-03-01T09:36:01+0100"
+      />
+    }
+    placement="left"
   >
-    <span
-      className="issue-meta-label"
+    <button
+      className="button-link issue-action issue-action-with-options js-issue-show-changelog"
+      onClick={[Function]}
     >
-      a month ago
-    </span>
-    <i
-      className="icon-dropdown little-spacer-left"
-    />
-  </button>
+      <span
+        className="issue-meta-label"
+      >
+        <FormattedRelative
+          updateInterval={10000}
+          value="2017-03-01T09:36:01+0100"
+        />
+      </span>
+      <i
+        className="icon-dropdown little-spacer-left"
+      />
+    </button>
+  </Tooltip>
 </BubblePopupHelper>
 `;
diff --git a/server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueCommentLine-test.js.snap b/server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueCommentLine-test.js.snap
index 9d4ea6fa3aa..a3b7b63d015 100644
--- a/server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueCommentLine-test.js.snap
+++ b/server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueCommentLine-test.js.snap
@@ -42,9 +42,10 @@ exports[`should open the right popups when the buttons are clicked 3`] = `
   <div
     className="issue-comment-age"
   >
-    (
-    a month ago
-    )
+    <FormattedRelative
+      updateInterval={10000}
+      value="2017-03-01T09:36:01+0100"
+    />
   </div>
   <div
     className="issue-comment-actions"
@@ -140,9 +141,10 @@ exports[`should render correctly a comment that is not updatable 1`] = `
   <div
     className="issue-comment-age"
   >
-    (
-    a month ago
-    )
+    <FormattedRelative
+      updateInterval={10000}
+      value="2017-03-01T09:36:01+0100"
+    />
   </div>
   <div
     className="issue-comment-actions"
@@ -180,9 +182,10 @@ exports[`should render correctly a comment that is updatable 1`] = `
   <div
     className="issue-comment-age"
   >
-    (
-    a month ago
-    )
+    <FormattedRelative
+      updateInterval={10000}
+      value="2017-03-01T09:36:01+0100"
+    />
   </div>
   <div
     className="issue-comment-actions"
diff --git a/server/sonar-web/src/main/js/components/issue/popups/ChangelogPopup.js b/server/sonar-web/src/main/js/components/issue/popups/ChangelogPopup.js
index 6f0ca9ac054..01549d5dac7 100644
--- a/server/sonar-web/src/main/js/components/issue/popups/ChangelogPopup.js
+++ b/server/sonar-web/src/main/js/components/issue/popups/ChangelogPopup.js
@@ -19,11 +19,11 @@
  */
 // @flow
 import React from 'react';
-import moment from 'moment';
 import { getIssueChangelog } from '../../../api/issues';
 import { translate } from '../../../helpers/l10n';
 import Avatar from '../../../components/ui/Avatar';
 import BubblePopup from '../../../components/common/BubblePopup';
+import DateTimeFormatter from '../../../components/intl/DateTimeFormatter';
 import IssueChangelogDiff from '../components/IssueChangelogDiff';
 /*:: import type { ChangelogDiff } from '../components/IssueChangelogDiff'; */
 /*:: import type { Issue } from '../types'; */
@@ -86,7 +86,7 @@ export default class ChangelogPopup extends React.PureComponent {
             <tbody>
               <tr>
                 <td className="thin text-left text-top nowrap">
-                  {moment(issue.creationDate).format('LLL')}
+                  <DateTimeFormatter date={issue.creationDate} />
                 </td>
                 <td className="text-left text-top">
                   {author ? `${translate('created_by')} ${author}` : translate('created')}
@@ -96,7 +96,7 @@ export default class ChangelogPopup extends React.PureComponent {
               {this.state.changelogs.map((item, idx) =>
                 <tr key={idx}>
                   <td className="thin text-left text-top nowrap">
-                    {moment(item.creationDate).format('LLL')}
+                    <DateTimeFormatter date={item.creationDate} />
                   </td>
                   <td className="text-left text-top">
                     {item.userName &&
diff --git a/server/sonar-web/src/main/js/components/issue/popups/__tests__/ChangelogPopup-test.js b/server/sonar-web/src/main/js/components/issue/popups/__tests__/ChangelogPopup-test.js
index 35d5c05b5f2..6c4f9d5977e 100644
--- a/server/sonar-web/src/main/js/components/issue/popups/__tests__/ChangelogPopup-test.js
+++ b/server/sonar-web/src/main/js/components/issue/popups/__tests__/ChangelogPopup-test.js
@@ -21,8 +21,6 @@ import { shallow } from 'enzyme';
 import React from 'react';
 import ChangelogPopup from '../ChangelogPopup';
 
-jest.mock('moment', () => () => ({ format: () => 'March 1, 2017 9:36 AM' }));
-
 it('should render the changelog popup correctly', () => {
   const element = shallow(
     <ChangelogPopup
diff --git a/server/sonar-web/src/main/js/components/issue/popups/__tests__/__snapshots__/ChangelogPopup-test.js.snap b/server/sonar-web/src/main/js/components/issue/popups/__tests__/__snapshots__/ChangelogPopup-test.js.snap
index 078a01fc7bf..1e649d62abb 100644
--- a/server/sonar-web/src/main/js/components/issue/popups/__tests__/__snapshots__/ChangelogPopup-test.js.snap
+++ b/server/sonar-web/src/main/js/components/issue/popups/__tests__/__snapshots__/ChangelogPopup-test.js.snap
@@ -15,7 +15,9 @@ exports[`should render the changelog popup correctly 1`] = `
           <td
             className="thin text-left text-top nowrap"
           >
-            March 1, 2017 9:36 AM
+            <DateTimeFormatter
+              date="2017-03-01T09:36:01+0100"
+            />
           </td>
           <td
             className="text-left text-top"
@@ -27,7 +29,9 @@ exports[`should render the changelog popup correctly 1`] = `
           <td
             className="thin text-left text-top nowrap"
           >
-            March 1, 2017 9:36 AM
+            <DateTimeFormatter
+              date="2017-03-01T09:36:01+0100"
+            />
           </td>
           <td
             className="text-left text-top"