SONAR-17812 Upgrade intl to 6.2.5

16 files changed, 77 insertions, 144 deletions

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 17e61354623..b9386f3ea1f 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
@@ -279,7 +279,7 @@ it.each([
         pathname: onBackgroudTaskPage ? '/project/background_tasks' : '/foo/bar',
       }),
     });
-    const messageProps = wrapper.find<FormattedMessage>(FormattedMessage).props();
+    const messageProps = wrapper.find(FormattedMessage).props();
 
     // Translation key.
     expect(messageProps.defaultMessage).toBe(expectedMessage);
diff --git a/server/sonar-web/src/main/js/apps/issues/crossComponentSourceViewer/__tests__/ComponentSourceSnippetGroupViewer-test.tsx b/server/sonar-web/src/main/js/apps/issues/crossComponentSourceViewer/__tests__/ComponentSourceSnippetGroupViewer-test.tsx
index 9c97893afd8..a8ad63029d5 100644
--- a/server/sonar-web/src/main/js/apps/issues/crossComponentSourceViewer/__tests__/ComponentSourceSnippetGroupViewer-test.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/crossComponentSourceViewer/__tests__/ComponentSourceSnippetGroupViewer-test.tsx
@@ -177,7 +177,7 @@ it.each([
 
     await waitAndUpdate(wrapper);
 
-    expect(wrapper.find<FormattedMessage>(FormattedMessage).prop('id')).toEqual(expectedLabel);
+    expect(wrapper.find(FormattedMessage).prop('id')).toEqual(expectedLabel);
     expect(wrapper.find('ContextConsumer').exists()).toBe(false);
   }
 );
diff --git a/server/sonar-web/src/main/js/components/intl/DateFormatter.tsx b/server/sonar-web/src/main/js/components/intl/DateFormatter.tsx
index 8f787ae6517..f83b2cebf76 100644
--- a/server/sonar-web/src/main/js/components/intl/DateFormatter.tsx
+++ b/server/sonar-web/src/main/js/components/intl/DateFormatter.tsx
@@ -43,7 +43,7 @@ export const longFormatterOption: FormatDateOptions = {
 export default function DateFormatter({ children, date, long }: DateFormatterProps) {
   return (
     <FormattedDate value={parseDate(date)} {...(long ? longFormatterOption : formatterOption)}>
-      {children}
+      {children ? (d) => <>{children(d)}</> : undefined}
     </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
index 5bafaa4cd8a..ca95cdb6c8a 100644
--- a/server/sonar-web/src/main/js/components/intl/DateFromNow.tsx
+++ b/server/sonar-web/src/main/js/components/intl/DateFromNow.tsx
@@ -58,7 +58,7 @@ export default function DateFromNow(props: DateFromNowProps) {
       {(formattedDate) => (
         <span title={formattedDate}>
           <FormattedRelativeTime {...relativeTimeProps}>
-            {children as FormattedRelativeTime['props']['children']}
+            {(d) => <>{children(d)}</>}
           </FormattedRelativeTime>
         </span>
       )}
diff --git a/server/sonar-web/src/main/js/components/intl/DateTimeFormatter.tsx b/server/sonar-web/src/main/js/components/intl/DateTimeFormatter.tsx
index e8faa804a07..6588210f500 100644
--- a/server/sonar-web/src/main/js/components/intl/DateTimeFormatter.tsx
+++ b/server/sonar-web/src/main/js/components/intl/DateTimeFormatter.tsx
@@ -25,6 +25,7 @@ import { ParsableDate } from '../../types/dates';
 interface Props {
   children?: (formattedDate: string) => React.ReactNode;
   date: ParsableDate;
+  timeZone?: string;
 }
 
 export const formatterOption: FormatDateOptions = {
@@ -35,10 +36,10 @@ export const formatterOption: FormatDateOptions = {
   minute: 'numeric',
 };
 
-export default function DateTimeFormatter({ children, date }: Props) {
+export default function DateTimeFormatter({ children, date, ...rest }: Props) {
   return (
-    <FormattedDate value={parseDate(date)} {...formatterOption}>
-      {children}
+    <FormattedDate {...rest} value={parseDate(date)} {...formatterOption}>
+      {children ? (d) => <>{children(d)}</> : undefined}
     </FormattedDate>
   );
 }
diff --git a/server/sonar-web/src/main/js/components/intl/TimeFormatter.tsx b/server/sonar-web/src/main/js/components/intl/TimeFormatter.tsx
index 036fdddbab6..2834f11b6bd 100644
--- a/server/sonar-web/src/main/js/components/intl/TimeFormatter.tsx
+++ b/server/sonar-web/src/main/js/components/intl/TimeFormatter.tsx
@@ -26,6 +26,7 @@ export interface TimeFormatterProps {
   children?: (formattedDate: string) => React.ReactNode;
   date: ParsableDate;
   long?: boolean;
+  timeZone?: string;
 }
 
 export const formatterOption: FormatDateOptions = { hour: 'numeric', minute: 'numeric' };
@@ -36,10 +37,14 @@ export const longFormatterOption: FormatDateOptions = {
   second: 'numeric',
 };
 
-export default function TimeFormatter({ children, date, long }: TimeFormatterProps) {
+export default function TimeFormatter({ children, date, long, ...rest }: TimeFormatterProps) {
   return (
-    <FormattedTime value={parseDate(date)} {...(long ? longFormatterOption : formatterOption)}>
-      {children}
+    <FormattedTime
+      {...rest}
+      value={parseDate(date)}
+      {...(long ? longFormatterOption : formatterOption)}
+    >
+      {children ? (d) => <>{children(d)}</> : undefined}
     </FormattedTime>
   );
 }
diff --git a/server/sonar-web/src/main/js/components/intl/__tests__/DateFormatter-test.tsx b/server/sonar-web/src/main/js/components/intl/__tests__/DateFormatter-test.tsx
index 1e0ba86ea3a..bd752e1a9bd 100644
--- a/server/sonar-web/src/main/js/components/intl/__tests__/DateFormatter-test.tsx
+++ b/server/sonar-web/src/main/js/components/intl/__tests__/DateFormatter-test.tsx
@@ -17,19 +17,26 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import { shallow } from 'enzyme';
+import { screen } from '@testing-library/react';
 import * as React from 'react';
+import { renderComponent } from '../../../helpers/testReactTestingUtils';
 import DateFormatter, { DateFormatterProps } from '../DateFormatter';
 
 it('should render correctly', () => {
-  expect(shallowRender()).toMatchSnapshot('standard');
-  expect(shallowRender({ long: true })).toMatchSnapshot('long');
+  renderDateFormatter({}, (formatted: string) => <span>{formatted}</span>);
+  expect(screen.getByText('Feb 20, 2020')).toBeInTheDocument();
+
+  renderDateFormatter({ long: true });
+  expect(screen.getByText('February 20, 2020')).toBeInTheDocument();
 });
 
-function shallowRender(overrides: Partial<DateFormatterProps> = {}) {
-  return shallow(
+function renderDateFormatter(
+  overrides: Partial<DateFormatterProps> = {},
+  children?: (d: string) => React.ReactNode
+) {
+  return renderComponent(
     <DateFormatter date={new Date('2020-02-20T20:20:20Z')} {...overrides}>
-      {(formatted) => <span>{formatted}</span>}
+      {children}
     </DateFormatter>
   );
 }
diff --git a/server/sonar-web/src/main/js/components/intl/__tests__/DateFromNow-test.tsx b/server/sonar-web/src/main/js/components/intl/__tests__/DateFromNow-test.tsx
index 8c1c927da45..e0eef0da53a 100644
--- a/server/sonar-web/src/main/js/components/intl/__tests__/DateFromNow-test.tsx
+++ b/server/sonar-web/src/main/js/components/intl/__tests__/DateFromNow-test.tsx
@@ -17,31 +17,27 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import { shallow } from 'enzyme';
+import { screen } from '@testing-library/react';
 import * as React from 'react';
-import { FormattedRelativeTime, IntlProvider } from 'react-intl';
+import { renderComponent } from '../../../helpers/testReactTestingUtils';
 import DateFromNow, { DateFromNowProps } from '../DateFromNow';
-import DateTimeFormatter from '../DateTimeFormatter';
-
-const date = '2020-02-20T20:20:20Z';
 
 jest.mock('../dateUtils', () => ({
   getRelativeTimeProps: jest.fn().mockReturnValue({ value: -1, unit: 'year' }),
 }));
 
+const date = '2020-02-20T20:20:20Z';
+
 it('should render correctly', () => {
-  const wrapper = shallowRender();
+  renderDateFromNow({ date });
 
-  expect(wrapper).toMatchSnapshot();
-  expect(wrapper.find(DateTimeFormatter).props().children!(date)).toMatchSnapshot('children');
+  expect(screen.getByText('1 year ago')).toBeInTheDocument();
 });
 
-it('should render correctly when there is no date', () => {
-  const children = jest.fn();
-
-  shallowRender({ date: undefined }, children);
+it('should render correctly when there is no date or no children', () => {
+  renderDateFromNow({ date: undefined });
 
-  expect(children).toHaveBeenCalledWith('never');
+  expect(screen.getByText('never')).toBeInTheDocument();
 });
 
 it('should render correctly when the date is less than one hour in the past', () => {
@@ -50,27 +46,20 @@ it('should render correctly when the date is less than one hour in the past', ()
   const mockDateNow = jest
     .spyOn(Date, 'now')
     .mockImplementation(() => new Date(date) as unknown as number);
-  const children = jest.fn();
 
-  shallowRender({ date: veryCloseDate, hourPrecision: true }, children)
-    .dive() // into DateTimeFormatter
-    .dive() // into DateFormatter
-    .dive() // into rendering function
-    .find(FormattedRelativeTime)
-    .props().children!(date);
+  renderDateFromNow({ date: veryCloseDate, hourPrecision: true });
 
-  expect(children).toHaveBeenCalledWith('less_than_1_hour_ago');
+  expect(screen.getByText('less_than_1_hour_ago')).toBeInTheDocument();
   mockDateNow.mockRestore();
 });
 
-function shallowRender(overrides: Partial<DateFromNowProps> = {}, children: jest.Mock = jest.fn()) {
-  return shallow(
-    <IntlProvider defaultLocale="en-US" locale="en">
-      <DateFromNow date={date} {...overrides}>
-        {(formattedDate) => children(formattedDate)}
-      </DateFromNow>
-    </IntlProvider>
-  )
-    .dive() // into the ContextProvider generated by IntlProvider
-    .dive(); // into the DateFromNow we actually want to render
+function renderDateFromNow(
+  overrides: Partial<DateFromNowProps> = {},
+  children: jest.Mock = jest.fn((d) => <>{d}</>)
+) {
+  return renderComponent(
+    <DateFromNow date={date} {...overrides}>
+      {children}
+    </DateFromNow>
+  );
 }
diff --git a/server/sonar-web/src/main/js/components/intl/__tests__/DateTimeFormatter-test.tsx b/server/sonar-web/src/main/js/components/intl/__tests__/DateTimeFormatter-test.tsx
index 2f2de9b3460..7caddd1f23e 100644
--- a/server/sonar-web/src/main/js/components/intl/__tests__/DateTimeFormatter-test.tsx
+++ b/server/sonar-web/src/main/js/components/intl/__tests__/DateTimeFormatter-test.tsx
@@ -17,18 +17,23 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import { shallow } from 'enzyme';
+import { screen } from '@testing-library/react';
 import * as React from 'react';
+import { renderComponent } from '../../../helpers/testReactTestingUtils';
 import DateTimeFormatter from '../DateTimeFormatter';
 
 it('should render correctly', () => {
-  expect(shallowRender()).toMatchSnapshot('standard');
+  renderDateTimeFormatter();
+  expect(screen.getByText('February 20, 2020, 8:20 PM')).toBeInTheDocument();
+
+  renderDateTimeFormatter((formatted: string) => <span>Nice date: {formatted}</span>);
+  expect(screen.getByText('Nice date: February 20, 2020, 8:20 PM')).toBeInTheDocument();
 });
 
-function shallowRender() {
-  return shallow(
-    <DateTimeFormatter date={new Date('2020-02-20T20:20:20Z')}>
-      {(formatted) => <span>{formatted}</span>}
+function renderDateTimeFormatter(children?: (d: string) => React.ReactNode) {
+  return renderComponent(
+    <DateTimeFormatter date={new Date('2020-02-20T20:20:20Z')} timeZone="UTC">
+      {children}
     </DateTimeFormatter>
   );
 }
diff --git a/server/sonar-web/src/main/js/components/intl/__tests__/TimeFormatter-test.tsx b/server/sonar-web/src/main/js/components/intl/__tests__/TimeFormatter-test.tsx
index 4340f37afde..8557b317c94 100644
--- a/server/sonar-web/src/main/js/components/intl/__tests__/TimeFormatter-test.tsx
+++ b/server/sonar-web/src/main/js/components/intl/__tests__/TimeFormatter-test.tsx
@@ -17,19 +17,26 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import { shallow } from 'enzyme';
+import { screen } from '@testing-library/react';
 import * as React from 'react';
+import { renderComponent } from '../../../helpers/testReactTestingUtils';
 import TimeFormatter, { TimeFormatterProps } from '../TimeFormatter';
 
 it('should render correctly', () => {
-  expect(shallowRender()).toMatchSnapshot('standard');
-  expect(shallowRender({ long: true })).toMatchSnapshot('long');
+  renderTimeFormatter({}, (formatted: string) => <span>{formatted}</span>);
+  expect(screen.getByText('8:20 PM')).toBeInTheDocument();
+
+  renderTimeFormatter({ long: true });
+  expect(screen.getByText('8:20:20 PM')).toBeInTheDocument();
 });
 
-function shallowRender(overrides: Partial<TimeFormatterProps> = {}) {
-  return shallow(
-    <TimeFormatter date={new Date('2020-02-20T20:20:20Z')} {...overrides}>
-      {(formatted) => <span>{formatted}</span>}
+function renderTimeFormatter(
+  overrides: Partial<TimeFormatterProps> = {},
+  children?: (d: string) => React.ReactNode
+) {
+  return renderComponent(
+    <TimeFormatter date={new Date('2020-02-20T20:20:20Z')} timeZone="UTC" {...overrides}>
+      {children}
     </TimeFormatter>
   );
 }
diff --git a/server/sonar-web/src/main/js/components/intl/__tests__/__snapshots__/DateFormatter-test.tsx.snap b/server/sonar-web/src/main/js/components/intl/__tests__/__snapshots__/DateFormatter-test.tsx.snap
deleted file mode 100644
index 2f603c6c1bd..00000000000
--- a/server/sonar-web/src/main/js/components/intl/__tests__/__snapshots__/DateFormatter-test.tsx.snap
+++ /dev/null
@@ -1,23 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`should render correctly: long 1`] = `
-<FormattedDate
-  day="numeric"
-  month="long"
-  value={2020-02-20T20:20:20.000Z}
-  year="numeric"
->
-  <Component />
-</FormattedDate>
-`;
-
-exports[`should render correctly: standard 1`] = `
-<FormattedDate
-  day="2-digit"
-  month="short"
-  value={2020-02-20T20:20:20.000Z}
-  year="numeric"
->
-  <Component />
-</FormattedDate>
-`;
diff --git a/server/sonar-web/src/main/js/components/intl/__tests__/__snapshots__/DateFromNow-test.tsx.snap b/server/sonar-web/src/main/js/components/intl/__tests__/__snapshots__/DateFromNow-test.tsx.snap
deleted file mode 100644
index f893ec98cf7..00000000000
--- a/server/sonar-web/src/main/js/components/intl/__tests__/__snapshots__/DateFromNow-test.tsx.snap
+++ /dev/null
@@ -1,22 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`should render correctly 1`] = `
-<DateTimeFormatter
-  date={2020-02-20T20:20:20.000Z}
->
-  <Component />
-</DateTimeFormatter>
-`;
-
-exports[`should render correctly: children 1`] = `
-<span
-  title="2020-02-20T20:20:20Z"
->
-  <FormattedRelativeTime
-    unit="year"
-    value={-1}
-  >
-    [Function]
-  </FormattedRelativeTime>
-</span>
-`;
diff --git a/server/sonar-web/src/main/js/components/intl/__tests__/__snapshots__/DateTimeFormatter-test.tsx.snap b/server/sonar-web/src/main/js/components/intl/__tests__/__snapshots__/DateTimeFormatter-test.tsx.snap
deleted file mode 100644
index c991112f771..00000000000
--- a/server/sonar-web/src/main/js/components/intl/__tests__/__snapshots__/DateTimeFormatter-test.tsx.snap
+++ /dev/null
@@ -1,14 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`should render correctly: standard 1`] = `
-<FormattedDate
-  day="numeric"
-  hour="numeric"
-  minute="numeric"
-  month="long"
-  value={2020-02-20T20:20:20.000Z}
-  year="numeric"
->
-  <Component />
-</FormattedDate>
-`;
diff --git a/server/sonar-web/src/main/js/components/intl/__tests__/__snapshots__/TimeFormatter-test.tsx.snap b/server/sonar-web/src/main/js/components/intl/__tests__/__snapshots__/TimeFormatter-test.tsx.snap
deleted file mode 100644
index 7c19be3a479..00000000000
--- a/server/sonar-web/src/main/js/components/intl/__tests__/__snapshots__/TimeFormatter-test.tsx.snap
+++ /dev/null
@@ -1,22 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`should render correctly: long 1`] = `
-<FormattedTime
-  hour="numeric"
-  minute="numeric"
-  second="numeric"
-  value={2020-02-20T20:20:20.000Z}
->
-  <Component />
-</FormattedTime>
-`;
-
-exports[`should render correctly: standard 1`] = `
-<FormattedTime
-  hour="numeric"
-  minute="numeric"
-  value={2020-02-20T20:20:20.000Z}
->
-  <Component />
-</FormattedTime>
-`;
diff --git a/server/sonar-web/src/main/js/components/intl/__tests__/__snapshots__/dateUtils-test.ts b/server/sonar-web/src/main/js/components/intl/__tests__/dateUtils-test.ts
index 9661ab376e5..2d651cee59d 100644
--- a/server/sonar-web/src/main/js/components/intl/__tests__/__snapshots__/dateUtils-test.ts
+++ b/server/sonar-web/src/main/js/components/intl/__tests__/dateUtils-test.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 { getRelativeTimeProps } from '../../dateUtils';
+import { getRelativeTimeProps } from '../dateUtils';
 
 const mockDateNow = jest.spyOn(Date, 'now');
 
diff --git a/server/sonar-web/src/main/js/components/intl/dateUtils.ts b/server/sonar-web/src/main/js/components/intl/dateUtils.ts
index 110d4b57b27..513a423fb90 100644
--- a/server/sonar-web/src/main/js/components/intl/dateUtils.ts
+++ b/server/sonar-web/src/main/js/components/intl/dateUtils.ts
@@ -23,7 +23,7 @@ import {
   differenceInSeconds,
   differenceInYears,
 } from 'date-fns';
-import { FormattedRelativeTime } from 'react-intl';
+import { Props as FormattedRelativeTimeProps } from 'react-intl/src/components/relative';
 import { parseDate } from '../../helpers/dates';
 import { ParsableDate } from '../../types/dates';
 
@@ -31,7 +31,7 @@ const UPDATE_INTERVAL_IN_SECONDS = 10;
 
 export function getRelativeTimeProps(
   parsableDate: ParsableDate
-): Pick<FormattedRelativeTime['props'], 'unit' | 'value' | 'updateIntervalInSeconds'> {
+): Pick<FormattedRelativeTimeProps, 'unit' | 'value' | 'updateIntervalInSeconds'> {
   const date = parseDate(parsableDate);
   const y = differenceInYears(date, Date.now());