MM-51974 : Unify "react-intl" related dependencies versions across products (#22894)

Picks out formatjs-eslint-plugin to webapp root. Updates react-intl to 6.3.2 in all products. Executed i18n-extract and checked if any translations got changed. Although it was a major version update, the only breaking change was for a vue peer dependency. Adds "*" to take whatever dependency rule to products and declare the react-intl as the root package. Fixes a few lint and type errors cropped in due to the update No-ID rule removed from playbooks in preparation for unifying practices across products. Lastly, a few missing translations in Playbooks added

webapp/playbooks/.eslintrc.json

@@ -630,9 +630,8 @@
         "onlyEquality": false
       }
     ],
-    "formatjs/no-id": 2,
+    "formatjs/no-multiple-whitespaces": 2,
     "formatjs/enforce-default-message": 2,
-    "formatjs/no-multiple-whitespaces": 1,
     "formatjs/no-multiple-plurals": 2,
     "formatjs/enforce-placeholders": 2,
     "formatjs/no-literal-string-in-jsx": 2,

webapp/playbooks/i18n/en.json

@@ -95,6 +95,7 @@
   "9M92On": "Select channels",
   "9Obw6C": "Filter",
   "9PXW6Q": "Duration / Started on",
+  "9S+ZiL": "No team is selected",
   "9SIW2x": "Target value for each run",
   "9TTfXU": "Your System Admin has been notified.",
   "9X3jwi": "{icon} Cost",
@@ -142,6 +143,7 @@
   "DXACD6": "Publish retrospective report and access the timeline",
   "DaHpK1": "Search for a channel",
   "DnBhRg": "Add People",
+  "DoskyC": "All Teams",
   "DqTQOp": "Once",
   "DtCplA": "{numParticipants, plural, =1 {<b>#</b> participant} other {<b>#</b> participants}}",
   "EQpfkS": "Finished",
@@ -222,6 +224,7 @@
   "MyIJbr": "Contents",
   "N1U/QR": "Task state changes",
   "N2IrpM": "Confirm",
+  "N7Ln74": "Rerun",
   "NFyWnZ": "Work more effectively",
   "NGKqOC": "Also add me to the channel linked to this run",
   "NJ9uPu": "Key metrics",

webapp/playbooks/package.json

@@ -28,7 +28,7 @@
     "react-dom": "^17.0.2",
     "react-infinite-scroll-component": "^6.1.0",
     "react-infinite-scroller": "1.2.6",
-    "react-intl": "5.24.1",
+    "react-intl": "*",
     "react-redux": "7.2.6",
     "react-router-dom": "5.3.4",
     "react-router-hash-link": "2.4.3",
@@ -85,7 +85,6 @@
     "classnames": "2.3.1",
     "css-loader": "6.5.1",
     "eslint-import-resolver-webpack": "0.13.2",
-    "eslint-plugin-formatjs": "4.0.2",
     "eslint-plugin-import": "2.25.4",
     "eslint-plugin-import-newlines": "1.3.0",
     "eslint-plugin-no-relative-import-paths": "1.5.0",
@@ -125,7 +124,7 @@
     "test:debug": "cross-env TZ=Etc/UTC jest --forceExit --detectOpenHandles --verbose",
     "test-ci": "cross-env TZ=Etc/UTC jest --ci --maxWorkers=100%",
     "check-types": "tsc -b",
-    "extract": "formatjs extract 'src/**/*.{ts,tsx}' --out-file i18n/temp.json --id-interpolation-pattern '[sha512:contenthash:base64:6]' && formatjs compile 'i18n/temp.json' --out-file i18n/en.json && rm i18n/temp.json",
+    "extract": "formatjs extract 'src/**/*.{ts,tsx}' --ignore \"**/*.d.ts\" --out-file i18n/temp.json --id-interpolation-pattern '[sha512:contenthash:base64:6]' && formatjs compile 'i18n/temp.json' --out-file i18n/en.json && rm i18n/temp.json",
     "graphql": "graphql-codegen --config graphql_gen.ts",
     "report-unused-exports": "ts-prune",
     "build:product": "webpack --mode=production",

webapp/playbooks/src/components/backstage/metrics/metrics_card.tsx

@@ -55,11 +55,13 @@ const MetricsCard = ({playbookMetrics, playbookStats, index}: Props) => {
                 <SummaryCardInner>
                     <Cell>
                         <Title>{formatMessage({defaultMessage: 'Average value'})}</Title>
+                        {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                         <Value>{stats.average === null ? '-' : transformFn(stats.average)}</Value>
                     </Cell>
                     <Cell>
                         <Title>{formatMessage({defaultMessage: '10-run average value'})}</Title>
                         <Row>
+                            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                             <Value>{stats.rolling_average === null ? '-' : transformFn(stats.rolling_average)}</Value>
                             {percentageChange(stats.rolling_average_change)}
                         </Row>
@@ -67,9 +69,11 @@ const MetricsCard = ({playbookMetrics, playbookStats, index}: Props) => {
                     <Cell>
                         <Title>{formatMessage({defaultMessage: 'Value range'})}</Title>
                         <Value>
+                            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                             {stats.value_range[0] === null ? '-' : valueTransformFn(stats.value_range[0])}
                             {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                             <ValueTo>{' ' + formatMessage({defaultMessage: 'to'}) + ' '}</ValueTo>
+                            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                             {stats.value_range[1] === null ? '-' : valueTransformFn(stats.value_range[1])}
                         </Value>
                     </Cell>

webapp/playbooks/src/components/backstage/playbook_list.tsx

@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import {getCurrentTeamId} from 'mattermost-redux/selectors/entities/teams';
-import React, {PropsWithChildren, useRef} from 'react';
+import React, {PropsWithChildren, ReactNode, useRef} from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
 import {useDispatch, useSelector} from 'react-redux';
 import styled from 'styled-components';
@@ -350,7 +350,7 @@ const PlaybookList = (props: { firstTimeUserExperience?: boolean }) => {
                                         {formatMessage({defaultMessage: 'Choose a template'})}
                                     </AltHeading>
                                     <ImportSub>
-                                        {formatMessage({defaultMessage: 'or <ImportPlaybookButton>Import a playbook</ImportPlaybookButton>'}, {
+                                        {formatMessage<ReactNode>({defaultMessage: 'or <ImportPlaybookButton>Import a playbook</ImportPlaybookButton>'}, {
                                             ImportPlaybookButton: (chunks) => (
                                                 <ImportLinkButton
                                                     onClick={handleImportClick}

webapp/playbooks/src/components/backstage/playbook_list_row.tsx

@@ -191,6 +191,7 @@ const PlaybookListRow = (props: Props) => {
                     <InfoLine>
                         {infos.map((info, i) => (
                             <Fragment key={props.playbook.id + '-infoline' + i}>
+                                {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                                 {i > 0 && ' - '}
                                 {info}
                             </Fragment>))}
@@ -204,7 +205,7 @@ const PlaybookListRow = (props: Props) => {
                         value={props.playbook.last_run_at}
                     />
                 ) : (
-                    '-'
+                    '-' // eslint-disable-line formatjs/no-literal-string-in-jsx
                 )}
             </PlaybookItemRow>
             <PlaybookItemRow>{props.playbook.active_runs}</PlaybookItemRow>

webapp/playbooks/src/components/backstage/playbook_runs/playbook_run/rhs_info_metrics.tsx

@@ -122,6 +122,7 @@ const Value = ({metricValue, metricType, editable}: ValueProps) => {
     if (metricValue === null) {
         return (
             <ValuePlaceholder>
+                {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                 {editable ? formatMessage({defaultMessage: 'Add value...'}) : '-'}
             </ValuePlaceholder>
         );

webapp/playbooks/src/components/backstage/playbook_runs/playbook_run/status_update.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {useState} from 'react';
+import React, {ReactNode, useState} from 'react';
 import {useDispatch} from 'react-redux';
 import styled from 'styled-components';
 import {FormattedMessage, useIntl} from 'react-intl';
@@ -425,7 +425,7 @@ const useRequestUpdateButton = ({type, onClick, disabled = false}: {disabled: bo
         <Tooltip
             id={'request-update-button-tooltip'}
             placement={'bottom'}
-            content={formatMessage(
+            content={formatMessage<ReactNode>(
                 {defaultMessage: '<title>Professional feature</title>\n<body>This is a paid feature, available with a free 30-day trial</body>'},
                 {
                     title: (el) => <div>{el}</div>,

webapp/playbooks/src/components/backstage/runs_list/row.tsx

@@ -94,7 +94,12 @@ const Row = (props: Props) => {
 
     let infoLine: React.ReactNode = null;
     if (!props.fixedTeam) {
-        infoLine = <InfoLine>{playbookName ? teamName + ' • ' + playbookName : teamName}</InfoLine>;
+        infoLine = (
+            <InfoLine>
+                {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+                {playbookName ? teamName + ' • ' + playbookName : teamName}
+            </InfoLine>
+        );
     }
 
     function openPlaybookRunDetails(playbookRun: PlaybookRun) {

webapp/playbooks/src/components/checklist_item/command.tsx

@@ -79,7 +79,7 @@ const Command = (props: CommandProps) => {
                 }
             }}
         >
-            {props.command_last_run ? 'Rerun' : 'Run'}
+            {props.command_last_run ? formatMessage({defaultMessage: 'Rerun'}) : formatMessage({defaultMessage: 'Run'})}
         </Run>
     );
 

webapp/playbooks/src/components/modals/run_playbook_modal.tsx

@@ -284,6 +284,7 @@ const RunNameSection = ({runName, onSetRunName}: runNameProps) => {
 
     return (<>
         <RunNameLabel invalid={Boolean(error)}>
+            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
             {formatMessage({defaultMessage: 'Run name'})}{error ? ' *' : ''}
         </RunNameLabel>
         <BaseInput

webapp/playbooks/src/components/modals/update_run_status_modal.tsx

@@ -1,7 +1,12 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {ComponentProps, useMemo, useState} from 'react';
+import React, {
+    ComponentProps,
+    ReactNode,
+    useMemo,
+    useState,
+} from 'react';
 import {Link} from 'react-router-dom';
 import {useDispatch, useSelector} from 'react-redux';
 import styled from 'styled-components';
@@ -205,7 +210,7 @@ const UpdateRunStatusModal = ({
         }
         const followersChannelCount = run?.followers?.length ?? 0;
 
-        const OverviewLink = (...chunks: string[]) => (
+        const OverviewLink = (...chunks: string[]): ReactNode => (
             <Link
                 data-testid='run-overview-link'
                 to={pluginUrl(`/runs/${playbookRunId}?from=status_modal`)}

webapp/playbooks/src/components/playbooks_selector.tsx

@@ -124,7 +124,7 @@ const PlaybooksSelector = (props: Props) => {
         return props.searchTerm === '' ? (
             <ErrorContainer>
                 <ClipboardSvg/>
-                <ErrorTitle>{formatMessage({defaultMessage: 'Get started with Playbooks'}, {searchTerm: props.searchTerm})}</ErrorTitle>
+                <ErrorTitle>{formatMessage({defaultMessage: 'Get started with Playbooks'})}</ErrorTitle>
                 <ErrorSubTitle>{formatMessage({defaultMessage: 'Playbooks are configurable checklists that define a repeatable process for teams to achieve specific and predictable outcomes'})}</ErrorSubTitle>
                 <PrimaryButton onClick={props.onCreatePlaybook}>
                     <Plus size={16}/>

webapp/playbooks/src/components/sidebar/sidebar.tsx

@@ -6,6 +6,7 @@ import {useSelector} from 'react-redux';
 import {Team} from '@mattermost/types/teams';
 import {OverlayTrigger, Tooltip} from 'react-bootstrap';
 import Scrollbars from 'react-custom-scrollbars';
+import {useIntl} from 'react-intl';
 
 import {OVERLAY_DELAY} from 'src/constants';
 
@@ -43,6 +44,8 @@ const teamNameSelector = (teamId: string) => (state: GlobalState): Team => getTe
 const Sidebar = (props: SidebarProps) => {
     const team = useSelector(teamNameSelector(props.team_id));
 
+    const {formatMessage} = useIntl();
+
     return (
         <SidebarComponent>
             <Header>
@@ -51,11 +54,13 @@ const Sidebar = (props: SidebarProps) => {
                     delay={OVERLAY_DELAY}
                     shouldUpdatePosition={true}
                     overlay={
-                        <Tooltip id='team-name__tooltip'>{team?.description?.length ? team.description : 'No team is selected'}</Tooltip>
+                        <Tooltip id='team-name__tooltip'>
+                            {team?.description?.length ? team.description : formatMessage({defaultMessage: 'No team is selected'})}
+                        </Tooltip>
                     }
                 >
                     <TeamName>
-                        {team?.display_name?.length ? team.display_name : 'All Teams'}
+                        {team?.display_name?.length ? team.display_name : formatMessage({defaultMessage: 'All Teams'})}
                     </TeamName>
                 </OverlayTrigger>
                 {props.headerDropdown}

webapp/playbooks/src/components/widgets/menu/menu_wrapper.tsx

@@ -90,6 +90,7 @@ const MenuWrapper = (props: Props) => {
     return (
         <MenuWrapperComponent
             role='button'
+            // eslint-disable-next-line formatjs/no-literal-string-in-jsx
             aria-label={props.label || 'menuwrapper'}
             className={className}
             onClick={toggle}