SONAR-15779 Update react-intl

SonarSource · Dec 15, 2021 · bc95551 · bc95551
1 parent 6ad28a3
commit bc95551
Show file tree

Hide file tree

Showing 35 changed files with 338 additions and 138 deletions.
diff --git a/server/sonar-web/package.json b/server/sonar-web/package.json
@@ -33,7 +33,7 @@
     "react-dom": "16.13.0",
     "react-draggable": "4.2.0",
     "react-helmet-async": "1.0.4",
-    "react-intl": "2.8.0",
+    "react-intl": "3.12.1",
     "react-modal": "3.14.3",
     "react-redux": "5.1.1",
     "react-router": "3.2.6",
@@ -76,7 +76,6 @@
     "@types/react": "16.8.23",
     "@types/react-dom": "16.8.4",
     "@types/react-helmet": "5.0.15",
-    "@types/react-intl": "2.3.17",
     "@types/react-modal": "3.12.1",
     "@types/react-redux": "6.0.6",
     "@types/react-router": "3.0.20",

diff --git a/server/sonar-web/src/main/js/app/components/extensions/Extension.tsx b/server/sonar-web/src/main/js/app/components/extensions/Extension.tsx
@@ -19,7 +19,7 @@
  */
 import * as React from 'react';
 import { Helmet } from 'react-helmet-async';
-import { InjectedIntlProps, injectIntl } from 'react-intl';
+import { injectIntl, WrappedComponentProps } from 'react-intl';
 import { connect } from 'react-redux';
 import { Location, Router, withRouter } from '../../../components/hoc/withRouter';
 import { getExtensionStart } from '../../../helpers/extensions';
@@ -31,7 +31,7 @@ import { ExtensionStartMethod } from '../../../types/extension';
 import * as theme from '../../theme';
 import getStore from '../../utils/getStore';
 
-interface Props extends InjectedIntlProps {
+interface Props extends WrappedComponentProps {
   currentUser: T.CurrentUser;
   extension: T.Extension;
   location: Location;

diff --git a/...app/components/extensions/__tests__/__snapshots__/ProjectAdminPageExtension-test.tsx.snap b/...app/components/extensions/__tests__/__snapshots__/ProjectAdminPageExtension-test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render correctly: extension exists 1`] = `
-<InjectIntl(withRouter(Connect(Extension)))
+<injectIntl(withRouter(Connect(Extension)))
   extension={
     Object {
       "key": "foo/bar",

diff --git a/...n/js/app/components/extensions/__tests__/__snapshots__/ProjectPageExtension-test.tsx.snap b/...n/js/app/components/extensions/__tests__/__snapshots__/ProjectPageExtension-test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render correctly 1`] = `
-<InjectIntl(withRouter(Connect(Extension)))
+<injectIntl(withRouter(Connect(Extension)))
   extension={
     Object {
       "key": "plugin-key/extension-key",

diff --git a/...r-web/src/main/js/app/components/nav/component/__tests__/ComponentNavBgTaskNotif-test.tsx b/...r-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).props();
+    const messageProps = wrapper.find<FormattedMessage>(FormattedMessage).props();
 
     // Translation key.
     expect(messageProps.defaultMessage).toBe(expectedMessage);

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
@@ -18,7 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import { InjectedIntlProps, injectIntl } from 'react-intl';
+import { injectIntl, WrappedComponentProps } from 'react-intl';
 import DateInput from '../../../components/controls/DateInput';
 import FacetBox from '../../../components/facet/FacetBox';
 import FacetHeader from '../../../components/facet/FacetHeader';
@@ -33,7 +33,7 @@ interface Props {
   value?: Date;
 }
 
-class AvailableSinceFacet extends React.PureComponent<Props & InjectedIntlProps> {
+class AvailableSinceFacet extends React.PureComponent<Props & WrappedComponentProps> {
   handleHeaderClick = () => {
     this.props.onToggle('availableSince');
   };

diff --git a/...src/main/js/apps/coding-rules/components/__tests__/__snapshots__/FacetsList-test.tsx.snap b/...src/main/js/apps/coding-rules/components/__tests__/__snapshots__/FacetsList-test.tsx.snap
@@ -48,7 +48,7 @@ exports[`should render correctly 1`] = `
     sansTop25Open={false}
     sonarsourceSecurityOpen={false}
   />
-  <InjectIntl(AvailableSinceFacet)
+  <injectIntl(AvailableSinceFacet)
     onChange={[MockFunction]}
     onToggle={[MockFunction]}
     open={false}

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
@@ -20,7 +20,7 @@
 import classNames from 'classnames';
 import { differenceInDays } from 'date-fns';
 import * as React from 'react';
-import { InjectedIntlProps, injectIntl } from 'react-intl';
+import { injectIntl, WrappedComponentProps } from 'react-intl';
 import Tooltip from '../../../components/controls/Tooltip';
 import DateFormatter, { longFormatterOption } from '../../../components/intl/DateFormatter';
 import DateFromNow from '../../../components/intl/DateFromNow';
@@ -34,7 +34,7 @@ interface Props {
   period: T.Period;
 }
 
-export class LeakPeriodLegend extends React.PureComponent<Props & InjectedIntlProps> {
+export class LeakPeriodLegend extends React.PureComponent<Props & WrappedComponentProps> {
   formatDate = (date: string) => {
     return this.props.intl.formatDate(date, longFormatterOption);
   };

diff --git a/...ar-web/src/main/js/apps/component-measures/components/__tests__/LeakPeriodLegend-test.tsx b/...ar-web/src/main/js/apps/component-measures/components/__tests__/LeakPeriodLegend-test.tsx
@@ -20,7 +20,7 @@
 import { differenceInDays } from 'date-fns';
 import { shallow } from 'enzyme';
 import * as React from 'react';
-import { InjectedIntlProps } from 'react-intl';
+import { IntlShape } from 'react-intl';
 import { LeakPeriodLegend } from '../LeakPeriodLegend';
 
 jest.mock('date-fns', () => {
@@ -72,7 +72,7 @@ function getWrapper(component: T.ComponentMeasure, period: T.Period) {
   return shallow(
     <LeakPeriodLegend
       component={component}
-      intl={{ formatDate: (x: any) => x } as InjectedIntlProps['intl']}
+      intl={{ formatDate: (x: any) => x } as IntlShape}
       period={period}
     />
   );

diff --git a/...js/apps/component-measures/components/__tests__/__snapshots__/MeasureHeader-test.tsx.snap b/...js/apps/component-measures/components/__tests__/__snapshots__/MeasureHeader-test.tsx.snap
@@ -51,7 +51,7 @@ exports[`should render correctly 1`] = `
     <div
       className="measure-details-primary-actions"
     >
-      <InjectIntl(LeakPeriodLegend)
+      <injectIntl(LeakPeriodLegend)
         className="spacer-left"
         component={
           Object {
@@ -105,7 +105,7 @@ exports[`should render correctly for leak 1`] = `
     <div
       className="measure-details-primary-actions"
     >
-      <InjectIntl(LeakPeriodLegend)
+      <injectIntl(LeakPeriodLegend)
         className="spacer-left"
         component={
           Object {
@@ -159,7 +159,7 @@ exports[`should render with a branch 1`] = `
     <div
       className="measure-details-primary-actions"
     >
-      <InjectIntl(LeakPeriodLegend)
+      <injectIntl(LeakPeriodLegend)
         className="spacer-left"
         component={
           Object {
@@ -232,7 +232,7 @@ exports[`should work with measure without value 1`] = `
     <div
       className="measure-details-primary-actions"
     >
-      <InjectIntl(LeakPeriodLegend)
+      <injectIntl(LeakPeriodLegend)
         className="spacer-left"
         component={
           Object {

diff --git a/.../apps/component-measures/components/__tests__/__snapshots__/MeasureOverview-test.tsx.snap b/.../apps/component-measures/components/__tests__/__snapshots__/MeasureOverview-test.tsx.snap
@@ -194,7 +194,7 @@ exports[`should render correctly: has leak period 1`] = `
     <div
       className="clearfix big-spacer-bottom"
     >
-      <InjectIntl(LeakPeriodLegend)
+      <injectIntl(LeakPeriodLegend)
         className="pull-right"
         component={
           Object {

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
@@ -20,7 +20,7 @@
 import { isSameDay } from 'date-fns';
 import { max } from 'lodash';
 import * as React from 'react';
-import { InjectedIntlProps, injectIntl } from 'react-intl';
+import { injectIntl, WrappedComponentProps } from 'react-intl';
 import BarChart from '../../../components/charts/BarChart';
 import DateRangeInput from '../../../components/controls/DateRangeInput';
 import FacetBox from '../../../components/facet/FacetBox';
@@ -52,7 +52,7 @@ interface Props {
   stats: T.Dict<number> | undefined;
 }
 
-export class CreationDateFacet extends React.PureComponent<Props & InjectedIntlProps> {
+export class CreationDateFacet extends React.PureComponent<Props & WrappedComponentProps> {
   property = 'createdAt';
 
   static defaultProps = {

diff --git a/server/sonar-web/src/main/js/apps/issues/sidebar/__tests__/CreationDateFacet-test.tsx b/server/sonar-web/src/main/js/apps/issues/sidebar/__tests__/CreationDateFacet-test.tsx
@@ -19,7 +19,7 @@
  */
 import { shallow } from 'enzyme';
 import * as React from 'react';
-import { InjectedIntlProps } from 'react-intl';
+import { IntlShape } from 'react-intl';
 import { mockComponent } from '../../../../helpers/mocks/component';
 import { ComponentQualifier } from '../../../../types/component';
 import { CreationDateFacet } from '../CreationDateFacet';
@@ -68,7 +68,7 @@ function shallowRender(props?: Partial<CreationDateFacet['props']>) {
       intl={
         {
           formatDate: (date: string) => 'formatted.' + date
-        } as InjectedIntlProps['intl']
+        } as IntlShape
       }
       onChange={jest.fn()}
       onToggle={jest.fn()}

diff --git a/...r/sonar-web/src/main/js/apps/issues/sidebar/__tests__/__snapshots__/Sidebar-test.tsx.snap b/...r/sonar-web/src/main/js/apps/issues/sidebar/__tests__/__snapshots__/Sidebar-test.tsx.snap
@@ -8,7 +8,7 @@ Array [
   "ResolutionFacet",
   "StatusFacet",
   "StandardFacet",
-  "InjectIntl(CreationDateFacet)",
+  "injectIntl(CreationDateFacet)",
   "Connect(LanguageFacet)",
   "RuleFacet",
   "TagFacet",
@@ -24,7 +24,7 @@ Array [
   "ResolutionFacet",
   "StatusFacet",
   "StandardFacet",
-  "InjectIntl(CreationDateFacet)",
+  "injectIntl(CreationDateFacet)",
   "Connect(LanguageFacet)",
   "RuleFacet",
   "TagFacet",
@@ -42,7 +42,7 @@ Array [
   "ResolutionFacet",
   "StatusFacet",
   "StandardFacet",
-  "InjectIntl(CreationDateFacet)",
+  "injectIntl(CreationDateFacet)",
   "Connect(LanguageFacet)",
   "RuleFacet",
   "TagFacet",
@@ -61,7 +61,7 @@ Array [
   "ResolutionFacet",
   "StatusFacet",
   "StandardFacet",
-  "InjectIntl(CreationDateFacet)",
+  "injectIntl(CreationDateFacet)",
   "Connect(LanguageFacet)",
   "RuleFacet",
   "TagFacet",
@@ -80,7 +80,7 @@ Array [
   "ResolutionFacet",
   "StatusFacet",
   "StandardFacet",
-  "InjectIntl(CreationDateFacet)",
+  "injectIntl(CreationDateFacet)",
   "Connect(LanguageFacet)",
   "RuleFacet",
   "TagFacet",
@@ -98,7 +98,7 @@ Array [
   "ResolutionFacet",
   "StatusFacet",
   "StandardFacet",
-  "InjectIntl(CreationDateFacet)",
+  "injectIntl(CreationDateFacet)",
   "Connect(LanguageFacet)",
   "RuleFacet",
   "TagFacet",
@@ -116,7 +116,7 @@ Array [
   "ResolutionFacet",
   "StatusFacet",
   "StandardFacet",
-  "InjectIntl(CreationDateFacet)",
+  "injectIntl(CreationDateFacet)",
   "Connect(LanguageFacet)",
   "RuleFacet",
   "TagFacet",
@@ -134,7 +134,7 @@ Array [
   "ResolutionFacet",
   "StatusFacet",
   "StandardFacet",
-  "InjectIntl(CreationDateFacet)",
+  "injectIntl(CreationDateFacet)",
   "Connect(LanguageFacet)",
   "RuleFacet",
   "TagFacet",
@@ -152,7 +152,7 @@ Array [
   "ResolutionFacet",
   "StatusFacet",
   "StandardFacet",
-  "InjectIntl(CreationDateFacet)",
+  "injectIntl(CreationDateFacet)",
   "Connect(LanguageFacet)",
   "RuleFacet",
   "TagFacet",
@@ -171,7 +171,7 @@ Array [
   "ResolutionFacet",
   "StatusFacet",
   "StandardFacet",
-  "InjectIntl(CreationDateFacet)",
+  "injectIntl(CreationDateFacet)",
   "Connect(LanguageFacet)",
   "RuleFacet",
   "TagFacet",

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
@@ -18,15 +18,14 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import { InjectedIntl, injectIntl } from 'react-intl';
+import { injectIntl, WrappedComponentProps } from 'react-intl';
 import { longFormatterOption } from '../../../components/intl/DateFormatter';
 import DateFromNow from '../../../components/intl/DateFromNow';
 import { formatterOption } from '../../../components/intl/DateTimeFormatter';
 import { translateWithParameters } from '../../../helpers/l10n';
 import { getPeriodDate, getPeriodLabel } from '../../../helpers/periods';
 
-export interface ProjectLeakPeriodInfoProps {
-  intl: Pick<InjectedIntl, 'formatDate' | 'formatTime'>;
+export interface ProjectLeakPeriodInfoProps extends WrappedComponentProps {
   leakPeriod: T.Period;
 }
 

diff --git a/server/sonar-web/src/main/js/apps/overview/branches/__tests__/ProjectLeakPeriodInfo-test.tsx b/server/sonar-web/src/main/js/apps/overview/branches/__tests__/ProjectLeakPeriodInfo-test.tsx
@@ -20,6 +20,7 @@
 import { differenceInDays } from 'date-fns';
 import { shallow } from 'enzyme';
 import * as React from 'react';
+import { IntlShape } from 'react-intl';
 import { mockPeriod } from '../../../../helpers/testMocks';
 import { ProjectLeakPeriodInfo } from '../ProjectLeakPeriodInfo';
 
@@ -63,10 +64,12 @@ it('should render a more precise date', () => {
 function shallowRender(period: Partial<T.Period> = {}) {
   return shallow(
     <ProjectLeakPeriodInfo
-      intl={{
-        formatDate: (date: string) => 'formatted.' + date,
-        formatTime: (date: string) => 'formattedTime.' + date
-      }}
+      intl={
+        {
+          formatDate: (date: string) => 'formatted.' + date,
+          formatTime: (date: string) => 'formattedTime.' + date
+        } as IntlShape
+      }
       leakPeriod={mockPeriod({ ...period })}
     />
   );

diff --git a/...b/src/main/js/apps/overview/branches/__tests__/__snapshots__/LeakPeriodInfo-test.tsx.snap b/...b/src/main/js/apps/overview/branches/__tests__/__snapshots__/LeakPeriodInfo-test.tsx.snap
@@ -13,7 +13,7 @@ exports[`renders correctly for applications 1`] = `
 `;
 
 exports[`renders correctly for projects 1`] = `
-<Memo(InjectIntl(ProjectLeakPeriodInfo))
+<Memo(injectIntl(ProjectLeakPeriodInfo))
   leakPeriod={
     Object {
       "date": "2019-04-23T02:12:32+0100",

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
@@ -19,7 +19,7 @@
  */
 import { differenceInDays } from 'date-fns';
 import * as React from 'react';
-import { InjectedIntlProps, injectIntl } from 'react-intl';
+import { injectIntl, WrappedComponentProps } from 'react-intl';
 import Tooltip from '../../../components/controls/Tooltip';
 import DateFormatter, { longFormatterOption } from '../../../components/intl/DateFormatter';
 import DateFromNow from '../../../components/intl/DateFromNow';
@@ -36,7 +36,7 @@ const MODE_INCLUDES_TIME: T.Dict<boolean> = {
   SPECIFIC_ANALYSIS: true
 };
 
-export class LeakPeriodLegend extends React.PureComponent<Props & InjectedIntlProps> {
+export class LeakPeriodLegend extends React.PureComponent<Props & WrappedComponentProps> {
   formatDate = (date: string) => {
     return this.props.intl.formatDate(date, longFormatterOption);
   };

diff --git a/server/sonar-web/src/main/js/apps/overview/components/__tests__/LeakPeriodLegend-test.tsx b/server/sonar-web/src/main/js/apps/overview/components/__tests__/LeakPeriodLegend-test.tsx
@@ -20,7 +20,7 @@
 import { differenceInDays } from 'date-fns';
 import { shallow } from 'enzyme';
 import * as React from 'react';
-import { InjectedIntlProps } from 'react-intl';
+import { IntlShape } from 'react-intl';
 import { LeakPeriodLegend } from '../LeakPeriodLegend';
 
 jest.mock('date-fns', () => {
@@ -67,7 +67,7 @@ function getWrapper(period: Partial<T.Period> = {}) {
         {
           formatDate: (date: string) => 'formatted.' + date,
           formatTime: (date: string) => 'formattedTime.' + date
-        } as InjectedIntlProps['intl']
+        } as IntlShape
       }
       period={{
         date: '2013-09-22T00:00:00+0200',