feat(react-intl): Bump react-intl package [BREAKING CHANGE] (#3466)

* feat(react-intl): upgrade package

BREAKING CHANGE: upgrade the major version of the react-intl dependency

* fix: fix intl type

* fix: fix message syntax

* fix: fix comments and i18n readme file

* fix: fix react-intl version comments

* fix: use IntlShape as a type in js files

* Fix: correct type import for IntlShape

* fix: add resolution

* fix: use exact version to match other repos

* Fix: correct type import for IntlShape

* fix: remove all support for legacy versions

* fix: add relativeTime helper function

* fix: fix relative time in PresenceAvatarTooltipContent component

* fix: fix relativeTime in PresenceCollaborator component

* fix: use inclusive inequalities in relativeTime helper

* fix: remove unnecessary modulo operations

* fix: fix relative time in ReadableTime + fix snapshots

* fix: fix relative time in lastModifiedByCellRenderer

* fix: fix tests

* fix: use js

* fix: fix import

* fix: fix else statement

* fix: revert import reorder

i18n/en-US.properties

@@ -1399,7 +1399,7 @@ boxui.securityControls.mobileDownloadOwnersEditors = Download restricted on mobi
 # Description for modal to display classification and security controls details
 boxui.securityControls.modalDescription = Classification labels defined by your administrator can be used to label content and apply security policies.
 # Title for modal to display classification and security controls details
-boxui.securityControls.modalTitle = View Classification for '{itemName}'
+boxui.securityControls.modalTitle = View Classification for “{itemName}”
 # Label displayed above the security restrictions on the file due to the classification label and associated policies.
 boxui.securityControls.securityControlsLabel = Restrictions
 # Bullet point that summarizes collaborators shared link restriction applied to classification

package.json

@@ -276,7 +276,7 @@
         "react-dom": "^17.0.1",
         "react-draggable": "^3.3.0",
         "react-immutable-proptypes": "^2.1.0",
-        "react-intl": "^3.11.0",
+        "react-intl": "6.4.2",
         "react-measure": "^2.3.0",
         "react-modal": "^3.8.1",
         "react-popper": "^1.3.4",
@@ -373,7 +373,8 @@
     },
     "resolutions": {
         "ip": "1.1.8",
-        "terser-webpack-plugin": "^4.2.3"
+        "terser-webpack-plugin": "^4.2.3",
+        "**/react-intl/**/@types/react": "^16.9.18"
     },
     "overrides": {
         "draft-js": {

scripts/check_generated_files.sh

@@ -10,17 +10,13 @@ blue=$"\e[1;34m"
 end=$"\e[0m\n"
 
 check_generated_files() {
-    printf "${blue}--------------------------------------${end}"
-    printf "${blue}Checking react-intl v3 usage${end}"
-    printf "${blue}--------------------------------------${end}"
-    ./scripts/findReactIntlViolators.js || return 1
 
     printf "${blue}-------------------------------------------------------------${end}"
     printf "${blue}Building bundles again, this may update en-US.properties${end}"
     printf "${blue}-------------------------------------------------------------${end}"
     yarn build:i18n || return 1
 
-    if [[ $(git status --porcelain 2>/dev/null| egrep "^(M| M)") != "" ]] ; then
+    if [[ $(git status --porcelain 2>/dev/null | egrep "^(M| M)") != "" ]]; then
         printf "${red}Your PR has uncommitted files!${end}"
         git status --porcelain
         return 1

scripts/prepush.sh

@@ -10,7 +10,7 @@ blue=$"\e[1;34m"
 end=$"\e[0m\n"
 
 check_uncommitted_files() {
-    if [[ $(git status --porcelain 2>/dev/null| egrep "^(M| M)") != "" ]] ; then
+    if [[ $(git status --porcelain 2>/dev/null | egrep "^(M| M)") != "" ]]; then
         printf "${red}Your branch has uncommitted files!${end}"
         return 1
     fi
@@ -37,10 +37,6 @@ check_and_commit_updated_translations() {
 
 # lint, test, and build assets to update translations
 prepush() {
-    printf "${blue}--------------------------------------${end}"
-    printf "${blue}Checking react-intl v3 usage${end}"
-    printf "${blue}--------------------------------------${end}"
-    ./scripts/findReactIntlViolators.js || exit 1
 
     printf "${blue}-------------------------------------------------------------${end}"
     printf "${blue}Building all sources, this will update i18n/json${end}"

src/components/breadcrumb/Breadcrumb.js

@@ -1,7 +1,7 @@
 // @flow
 import * as React from 'react';
 import { injectIntl } from 'react-intl';
-import type { InjectIntlProvidedProps } from 'react-intl';
+import type { IntlShape } from 'react-intl';
 import classNames from 'classnames';
 
 import { MenuLinkItem } from '../menu';
@@ -18,6 +18,7 @@ export type BreadcrumbProps = {
     className?: string,
     /** Reverse default overflow breadcrumb ordering to highest to lowest depth */
     hasReverseOverflowOrder?: boolean,
+    intl: IntlShape,
     /** Show number of breadcrumb items before overflow. Default is 1 */
     numItemsBeforeOverflow?: number,
     /** Element to override default overflow menu button */
@@ -26,7 +27,7 @@ export type BreadcrumbProps = {
     threshold?: number,
 };
 
-type Props = BreadcrumbProps & InjectIntlProvidedProps;
+type Props = BreadcrumbProps;
 
 const Breadcrumb = ({
     children,

src/components/date-picker/DatePicker.js.flow

@@ -1,7 +1,7 @@
 // @flow
 import * as React from 'react';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-import type { InjectIntlProvidedProps } from 'react-intl';
+import type { IntlShape } from 'react-intl';
 import classNames from 'classnames';
 import Pikaday from 'pikaday';
 import range from 'lodash/range';
@@ -122,6 +122,7 @@ type Props = {
     hideOptionalLabel?: boolean,
     /** Props that will be applied on the input element */
     inputProps?: Object,
+    intl: IntlShape,
     /** Is input clearable */
     isClearable?: boolean,
     /** Is input disabled */
@@ -151,7 +152,7 @@ type Props = {
     /** Date to set the input */
     value?: Date,
     yearRange?: number | Array<number>,
-} & InjectIntlProvidedProps;
+};
 
 class DatePicker extends React.Component<Props> {
     static defaultProps = {

src/components/grid-view/GridViewSlider.js

@@ -1,7 +1,7 @@
 // @flow
 import * as React from 'react';
 import { injectIntl } from 'react-intl';
-import type { InjectIntlProvidedProps } from 'react-intl';
+import type { IntlShape } from 'react-intl';
 import IconPlusThin from '../../icons/general/IconPlusThin';
 import IconMinusThin from '../../icons/general/IconMinusThin';
 import PlainButton from '../plain-button/PlainButton';
@@ -13,9 +13,10 @@ type Props = {
     columnCount: number,
     gridMaxColumns: number,
     gridMinColumns: number,
+    intl: IntlShape,
     maxColumnCount: number,
     onChange: (newSliderValue: number) => void,
-} & InjectIntlProvidedProps;
+};
 
 const GridViewSlider = ({ columnCount, gridMaxColumns, gridMinColumns, intl, maxColumnCount, onChange }: Props) => {
     const { formatMessage } = intl;

src/components/i18n/FormattedCompMessage.js

@@ -1,4 +1,5 @@
 // @flow
+// @deprecated, use FormattedMessage from react-intl v6 instead.
 import * as React from 'react';
 import { injectIntl } from 'react-intl';
 import isNaN from 'lodash/isNaN';

src/components/i18n/Plural.js

@@ -1,5 +1,5 @@
 // @flow
-// @deprecated, use FormattedPlural from react-intl v3 instead
+// @deprecated, use FormattedPlural from react-intl v6 instead.
 import * as React from 'react';
 
 type Props = {

src/components/i18n/README.md

@@ -1,5 +1,9 @@
 ### Examples
 
+<!-- @deprecated, use [FormattedPlural](https://formatjs.io/docs/react-intl/components#formattedplural) or [FormattedMessage](https://formatjs.io/docs/react-intl/components#rich-text-formatting) with rich-text formatting from react-intl v6 instead. 
+@TODO: remove redundant components/code after react-intl upgrade (confirm unusability).  
+-->
+
 ** Basic **
 
 This can be a drop-in replacement for react-intl's FormattedHTMLMessage component:

src/components/i18n/index.js

@@ -1,5 +1,5 @@
 // @flow
-// @deprecated, use FormattedPlural or FormattedMessage from react-intl v3 instead
+// @deprecated, use FormattedPlural or FormattedMessage from react-intl v6 instead.
 export { default as Param } from './Param';
 export { default as Plural } from './Plural';
 export { default } from './FormattedCompMessage';

src/components/sidebar-toggle-button/SidebarToggleButton.js

@@ -2,7 +2,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { injectIntl } from 'react-intl';
-import type { InjectIntlProvidedProps } from 'react-intl';
+import type { IntlShape } from 'react-intl';
 
 import IconHide from '../../icons/general/IconHide';
 import IconShow from '../../icons/general/IconShow';
@@ -19,9 +19,10 @@ const DIRECTION_RIGHT = 'right';
 type Props = {
     className?: string,
     direction?: string,
+    intl: IntlShape,
     isOpen: boolean,
     onClick?: Function,
-} & InjectIntlProvidedProps;
+};
 
 const SidebarToggleButton = ({
     className = '',

src/components/time/ReadableTime.js

@@ -3,7 +3,8 @@
 import { injectIntl } from 'react-intl';
 
 import { ONE_HOUR_MS } from '../../constants';
-import { isToday, isYesterday, isCurrentYear } from '../../utils/datetime';
+import { isCurrentYear, isToday, isYesterday } from '../../utils/datetime';
+import timeFromNow from '../../utils/relativeTime';
 
 import messages from './messages';
 
@@ -78,13 +79,8 @@ const ReadableTime = ({
     // print the default time format
     const timeDiff = timestamp - Date.now();
     if (Math.abs(timeDiff) <= relativeThreshold) {
-        if (intl.formatRelativeTime) {
-            // react-intl v3
-            output = intl.formatRelativeTime(timeDiff);
-        } else {
-            // react-intl v2
-            output = intl.formatRelative(timestamp);
-        }
+        const { value, unit } = timeFromNow(timestamp);
+        output = intl.formatRelativeTime(value, unit);
     }
 
     return shouldUppercase ? output.toLocaleUpperCase(intl.locale) : output;

src/components/time/__tests__/__snapshots__/ReadableTime.test.js.snap

@@ -1,10 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`components/time/ReadableTime should use default relative threshold if not provided 1`] = `"in 1,800,000 seconds"`;
+exports[`components/time/ReadableTime should use default relative threshold if not provided 1`] = `"in 30 minutes"`;
 
-exports[`components/time/ReadableTime timestamp: ms1HourInFuture | allowFutureTimestamps: false | alwaysShowTime: false | showWeekday: false | Today at hh:mm 1`] = `"3,600,000 seconds ago"`;
+exports[`components/time/ReadableTime timestamp: ms1HourInFuture | allowFutureTimestamps: false | alwaysShowTime: false | showWeekday: false | Today at hh:mm 1`] = `"1 hour ago"`;
 
-exports[`components/time/ReadableTime timestamp: ms1HourInFuture | allowFutureTimestamps: false | alwaysShowTime: false | showWeekday: false | Today at hh:mm: uppercase 1`] = `"3,600,000 SECONDS AGO"`;
+exports[`components/time/ReadableTime timestamp: ms1HourInFuture | allowFutureTimestamps: false | alwaysShowTime: false | showWeekday: false | Today at hh:mm: uppercase 1`] = `"1 HOUR AGO"`;
 
 exports[`components/time/ReadableTime timestamp: msBeginningOfCenturyTime | allowFutureTimestamps: true | alwaysShowTime: false | showWeekday: false | mm dd yy at hh:mm 1`] = `"Dec 31, 1999"`;
 
@@ -26,13 +26,13 @@ exports[`components/time/ReadableTime timestamp: relativeThreshold * 2 + now | a
 
 exports[`components/time/ReadableTime timestamp: relativeThreshold * 2 + now | allowFutureTimestamps: true | alwaysShowTime: false | showWeekday: false | Today at hh:mm: uppercase 1`] = `"TODAY AT 5:30 PM"`;
 
-exports[`components/time/ReadableTime timestamp: withinRelativeThresholdAhead | allowFutureTimestamps: true | alwaysShowTime: false | showWeekday: false | in 30 minutes 1`] = `"in 1,800,000 seconds"`;
+exports[`components/time/ReadableTime timestamp: withinRelativeThresholdAhead | allowFutureTimestamps: true | alwaysShowTime: false | showWeekday: false | in 30 minutes 1`] = `"in 30 minutes"`;
 
-exports[`components/time/ReadableTime timestamp: withinRelativeThresholdAhead | allowFutureTimestamps: true | alwaysShowTime: false | showWeekday: false | in 30 minutes: uppercase 1`] = `"IN 1,800,000 SECONDS"`;
+exports[`components/time/ReadableTime timestamp: withinRelativeThresholdAhead | allowFutureTimestamps: true | alwaysShowTime: false | showWeekday: false | in 30 minutes: uppercase 1`] = `"IN 30 MINUTES"`;
 
-exports[`components/time/ReadableTime timestamp: withinRelativeThresholdBehind | allowFutureTimestamps: true | alwaysShowTime: false | showWeekday: false | 30 minutes ago 1`] = `"1,800,000 seconds ago"`;
+exports[`components/time/ReadableTime timestamp: withinRelativeThresholdBehind | allowFutureTimestamps: true | alwaysShowTime: false | showWeekday: false | 30 minutes ago 1`] = `"30 minutes ago"`;
 
-exports[`components/time/ReadableTime timestamp: withinRelativeThresholdBehind | allowFutureTimestamps: true | alwaysShowTime: false | showWeekday: false | 30 minutes ago: uppercase 1`] = `"1,800,000 SECONDS AGO"`;
+exports[`components/time/ReadableTime timestamp: withinRelativeThresholdBehind | allowFutureTimestamps: true | alwaysShowTime: false | showWeekday: false | 30 minutes ago: uppercase 1`] = `"30 MINUTES AGO"`;
 
 exports[`components/time/ReadableTime timestamp: yesterday | allowFutureTimestamps: true | alwaysShowTime: false | showWeekday: false | Yesterday at hh:mm 1`] = `"Yesterday at 3:30 PM"`;
 

src/elements/common/breadcrumbs/Breadcrumbs.js

@@ -6,7 +6,7 @@
 
 import React from 'react';
 import { injectIntl } from 'react-intl';
-import type { InjectIntlProvidedProps } from 'react-intl';
+import type { IntlShape } from 'react-intl';
 import Breadcrumb from './Breadcrumb';
 import BreadcrumbDropdown from './BreadcrumbDropdown';
 import BreadcrumbDelimiter from './BreadcrumbDelimiter';
@@ -18,10 +18,11 @@ import './Breadcrumbs.scss';
 type Props = {
     crumbs: Crumb[],
     delimiter: Delimiter,
+    intl: IntlShape,
     isSmall?: boolean,
     onCrumbClick: Function,
     rootId: string,
-} & InjectIntlProvidedProps;
+};
 
 /**
  * Filters out ancestors to root from the crumbs.

src/elements/common/create-folder-dialog/CreateFolderDialog.js

@@ -7,7 +7,7 @@
 import React from 'react';
 import Modal from 'react-modal';
 import { injectIntl, FormattedMessage } from 'react-intl';
-import type { InjectIntlProvidedProps } from 'react-intl';
+import type { IntlShape } from 'react-intl';
 import PrimaryButton from '../../../components/primary-button/PrimaryButton';
 import Button from '../../../components/button/Button';
 import messages from '../messages';
@@ -22,12 +22,13 @@ import {
 type Props = {
     appElement: HTMLElement,
     errorCode: string,
+    intl: IntlShape,
     isLoading: boolean,
     isOpen: boolean,
     onCancel: Function,
     onCreate: Function,
     parentElement: HTMLElement,
-} & InjectIntlProvidedProps;
+};
 
 /* eslint-disable jsx-a11y/label-has-for */
 const CreateFolderDialog = ({

src/elements/common/date/DateField.js

@@ -6,7 +6,7 @@
 
 import React from 'react';
 import { injectIntl, FormattedMessage } from 'react-intl';
-import type { InjectIntlProvidedProps } from 'react-intl';
+import type { IntlShape } from 'react-intl';
 import { isToday, isYesterday } from '../../../utils/datetime';
 import messages from '../messages';
 import './DateField.scss';
@@ -15,9 +15,10 @@ type Props = {
     capitalize?: boolean,
     date: string,
     dateFormat?: Object,
+    intl: IntlShape,
     omitCommas?: boolean,
     relative?: boolean,
-} & InjectIntlProvidedProps;
+};
 
 const DEFAULT_DATE_FORMAT = {
     weekday: 'short',

src/elements/common/share-access-select/ShareAccessSelect.js

@@ -6,7 +6,7 @@
 
 import React from 'react';
 import { injectIntl } from 'react-intl';
-import type { InjectIntlProvidedProps } from 'react-intl';
+import type { IntlShape } from 'react-intl';
 import messages from '../messages';
 import { ACCESS_NONE, ACCESS_OPEN, ACCESS_COLLAB, ACCESS_COMPANY } from '../../../constants';
 import type { BoxItem } from '../../../common/types/core';
@@ -15,9 +15,10 @@ import './ShareAccessSelect.scss';
 type Props = {
     canSetShareAccess: boolean,
     className: string,
+    intl: IntlShape,
     item: BoxItem,
     onChange: Function,
-} & InjectIntlProvidedProps;
+};
 
 const ShareAccessSelect = ({ className, canSetShareAccess, onChange, item, intl }: Props) => {
     const { allowed_shared_link_access_levels: allowedSharedAccessLevels, permissions, shared_link: sharedLink } = item;