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/boards/.eslintrc.json

@@ -91,9 +91,6 @@
       "error",
       { "allowSameFolder": true, "rootDir": "webapp/boards"}
     ],
- /*    "no-restricted-imports": ["error", {
-      "patterns": ["..*"]
-    }], */
     "import-newlines/enforce": [
       2,
       3
@@ -101,7 +98,8 @@
     "object-curly-spacing": [
       2,
       "never"
-    ]
+    ],
+    "formatjs/no-multiple-whitespaces": 2
   },
   "overrides": [
     {

webapp/boards/package.json

@@ -4,7 +4,7 @@
 	"private": true,
 	"description": "",
 	"scripts": {
-		"i18n-extract": "formatjs extract \"src/**/*.{ts,tsx}\" --ignore \"**/*.d.ts\" \"../**/*.d.ts\" --out-file i18n/tmp.json && formatjs compile i18n/tmp.json --out-file i18n/en.json && npx rimraf i18n/tmp.json",
+		"i18n-extract": "formatjs extract \"src/**/*.{ts,tsx}\" --ignore \"**/*.d.ts\" --out-file i18n/tmp.json && formatjs compile i18n/tmp.json --out-file i18n/en.json && npx rimraf i18n/tmp.json",
 		"build": "webpack --mode=production",
 		"build:watch": "webpack --mode=production --watch",
 		"start:product": "webpack serve --mode=development",
@@ -58,7 +58,7 @@
 		"react-dom": "17.0.2",
 		"react-hot-keys": "^2.7.1",
 		"react-hotkeys-hook": "^3.4.4",
-		"react-intl": "^5.20.0",
+		"react-intl": "*",
 		"react-redux": "^7.2.1",
 		"react-router-dom": "^5.2.0",
 		"react-select": "5.5.9",
@@ -106,7 +106,6 @@
 		"css-loader": "6.7.1",
 		"eslint-import-resolver-webpack": "0.13.2",
 		"eslint-plugin-babel": "^5.3.1",
-		"eslint-plugin-formatjs": "4.9.0",
 		"eslint-plugin-header": "3.1.1",
 		"eslint-plugin-import": "2.25.4",
 		"eslint-plugin-import-newlines": "1.3.1",

webapp/boards/src/components/boardsSwitcherDialog/boardSwitcherDialog.tsx

@@ -39,7 +39,7 @@ const BoardSwitcherDialog = (props: Props): JSX.Element => {
     const team = useAppSelector(getCurrentTeam)
     const me = useAppSelector(getMe)
     const title = intl.formatMessage({id: 'FindBoardsDialog.Title', defaultMessage: 'Find Boards'})
-    const subTitle = intl.formatMessage(
+    const subTitle = intl.formatMessage<ReactNode>(
         {
             id: 'FindBoardsDialog.SubTitle',
             defaultMessage: 'Type to find a board. Use <b>UP/DOWN</b> to browse. <b>ENTER</b> to select, <b>ESC</b> to dismiss',

webapp/boards/src/components/shareBoard/teamPermissionsRow.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 {useIntl} from 'react-intl'
 
 import MenuWrapper from 'src/widgets/menuWrapper'
@@ -77,7 +77,7 @@ const TeamPermissionsRow = (): JSX.Element => {
                     id: 'shareBoard.confirm-change-team-role.title',
                     defaultMessage: 'Change minimum board role',
                 }),
-                subText: intl.formatMessage({
+                subText: intl.formatMessage<ReactNode>({
                     id: 'shareBoard.confirm-change-team-role.body',
                     defaultMessage: 'Everyone on this board with a lower permission than the "{role}" role will <b>now be promoted to {role}</b>. Are you sure you want to change the minimum role for the board?',
                 }, {

webapp/boards/src/components/sidebar/sidebarCategory.tsx

@@ -1,6 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 import React, {
+    ReactNode,
     useCallback,
     useEffect,
     useMemo,
@@ -167,7 +168,7 @@ const SidebarCategory = (props: Props) => {
             id: 'SidebarCategories.CategoryMenu.DeleteModal.Title',
             defaultMessage: 'Delete this category?',
         }),
-        subText: intl.formatMessage(
+        subText: intl.formatMessage<ReactNode>(
             {
                 id: 'SidebarCategories.CategoryMenu.DeleteModal.Body',
                 defaultMessage: 'Boards in <b>{categoryName}</b> will move back to the Boards categories. You\'re not removed from any boards.',

webapp/channels/.eslintrc.json

@@ -97,7 +97,7 @@
       }
     ],
     "max-lines": ["warn", {"max": 800, "skipBlankLines": true, "skipComments": true}],
-    "formatjs/no-multiple-whitespaces": ["error"]
+    "formatjs/no-multiple-whitespaces": 2
   },
   "overrides": [
     {

webapp/channels/package.json

@@ -70,7 +70,7 @@
     "react-day-picker": "8.3.6",
     "react-dom": "17.0.2",
     "react-hot-loader": "4.13.0",
-    "react-intl": "5.20.10",
+    "react-intl": "*",
     "react-is": "17.0.2",
     "react-overlays": "0.9.3",
     "react-popper": "2.3.0",
@@ -162,7 +162,6 @@
     "enzyme-adapter-react-17-updated": "1.0.2",
     "enzyme-to-json": "3.6.2",
     "eslint-import-resolver-webpack": "0.13.2",
-    "eslint-plugin-formatjs": "4.9.1",
     "eslint-plugin-header": "3.1.1",
     "eslint-plugin-import": "2.27.5",
     "eslint-plugin-mattermost": "github:mattermost/eslint-plugin-mattermost#5b0c972eacf19286e4c66221b39113bf8728a99e",

webapp/channels/src/components/__snapshots__/formatted_markdown_message.test.tsx.snap

@@ -4,6 +4,7 @@ exports[`components/FormattedMarkdownMessage should allow to disable links 1`] =
 <IntlProvider
   defaultFormats={Object {}}
   defaultLocale="en"
+  fallbackOnEmptyString={true}
   formats={Object {}}
   locale="en"
   messages={
@@ -14,6 +15,7 @@ exports[`components/FormattedMarkdownMessage should allow to disable links 1`] =
     }
   }
   onError={[Function]}
+  onWarn={[Function]}
   textComponent={Symbol(react.fragment)}
 >
   <FormattedMarkdownMessage
@@ -41,6 +43,7 @@ exports[`components/FormattedMarkdownMessage should backup to default 1`] = `
 <IntlProvider
   defaultFormats={Object {}}
   defaultLocale="en"
+  fallbackOnEmptyString={true}
   formats={Object {}}
   locale="en"
   messages={
@@ -51,6 +54,7 @@ exports[`components/FormattedMarkdownMessage should backup to default 1`] = `
     }
   }
   onError={[Function]}
+  onWarn={[Function]}
   textComponent={Symbol(react.fragment)}
 >
   <FormattedMarkdownMessage
@@ -72,6 +76,7 @@ exports[`components/FormattedMarkdownMessage should escape non-BR 1`] = `
 <IntlProvider
   defaultFormats={Object {}}
   defaultLocale="en"
+  fallbackOnEmptyString={true}
   formats={Object {}}
   locale="en"
   messages={
@@ -82,6 +87,7 @@ exports[`components/FormattedMarkdownMessage should escape non-BR 1`] = `
     }
   }
   onError={[Function]}
+  onWarn={[Function]}
   textComponent={Symbol(react.fragment)}
 >
   <FormattedMarkdownMessage
@@ -109,6 +115,7 @@ exports[`components/FormattedMarkdownMessage should render message 1`] = `
 <IntlProvider
   defaultFormats={Object {}}
   defaultLocale="en"
+  fallbackOnEmptyString={true}
   formats={Object {}}
   locale="en"
   messages={
@@ -119,6 +126,7 @@ exports[`components/FormattedMarkdownMessage should render message 1`] = `
     }
   }
   onError={[Function]}
+  onWarn={[Function]}
   textComponent={Symbol(react.fragment)}
 >
   <FormattedMarkdownMessage
@@ -140,6 +148,7 @@ exports[`components/FormattedMarkdownMessage values should work 1`] = `
 <IntlProvider
   defaultFormats={Object {}}
   defaultLocale="en"
+  fallbackOnEmptyString={true}
   formats={Object {}}
   locale="en"
   messages={
@@ -150,6 +159,7 @@ exports[`components/FormattedMarkdownMessage values should work 1`] = `
     }
   }
   onError={[Function]}
+  onWarn={[Function]}
   textComponent={Symbol(react.fragment)}
 >
   <FormattedMarkdownMessage

webapp/channels/src/components/admin_console/team_channel_settings/team/details/__snapshots__/team_profile.test.tsx.snap

@@ -213,9 +213,11 @@ exports[`admin_console/team_channel_settings/team/TeamProfile__Cloud restore sho
                     content="name"
                     intl={
                       Object {
+                        "$t": [Function],
                         "defaultFormats": Object {},
                         "defaultLocale": "en",
                         "defaultRichTextElements": undefined,
+                        "fallbackOnEmptyString": true,
                         "formatDate": [Function],
                         "formatDateTimeRange": [Function],
                         "formatDateToParts": [Function],
@@ -242,6 +244,7 @@ exports[`admin_console/team_channel_settings/team/TeamProfile__Cloud restore sho
                         "locale": "en",
                         "messages": Object {},
                         "onError": [Function],
+                        "onWarn": [Function],
                         "textComponent": "span",
                         "timeZone": "Etc/UTC",
                         "wrapRichTextChunksInFragment": undefined,
@@ -457,9 +460,11 @@ exports[`admin_console/team_channel_settings/team/TeamProfile__Cloud should matc
                     content="name"
                     intl={
                       Object {
+                        "$t": [Function],
                         "defaultFormats": Object {},
                         "defaultLocale": "en",
                         "defaultRichTextElements": undefined,
+                        "fallbackOnEmptyString": true,
                         "formatDate": [Function],
                         "formatDateTimeRange": [Function],
                         "formatDateToParts": [Function],
@@ -486,6 +491,7 @@ exports[`admin_console/team_channel_settings/team/TeamProfile__Cloud should matc
                         "locale": "en",
                         "messages": Object {},
                         "onError": [Function],
+                        "onWarn": [Function],
                         "textComponent": "span",
                         "timeZone": "Etc/UTC",
                         "wrapRichTextChunksInFragment": undefined,
@@ -603,9 +609,11 @@ exports[`admin_console/team_channel_settings/team/TeamProfile__Cloud should matc
                       id="sharedTooltip"
                       intl={
                         Object {
+                          "$t": [Function],
                           "defaultFormats": Object {},
                           "defaultLocale": "en",
                           "defaultRichTextElements": undefined,
+                          "fallbackOnEmptyString": true,
                           "formatDate": [Function],
                           "formatDateTimeRange": [Function],
                           "formatDateToParts": [Function],
@@ -632,6 +640,7 @@ exports[`admin_console/team_channel_settings/team/TeamProfile__Cloud should matc
                           "locale": "en",
                           "messages": Object {},
                           "onError": [Function],
+                          "onWarn": [Function],
                           "textComponent": "span",
                           "timeZone": "Etc/UTC",
                           "wrapRichTextChunksInFragment": undefined,
@@ -834,9 +843,11 @@ exports[`admin_console/team_channel_settings/team/TeamProfile__Cloud should matc
                     content="name"
                     intl={
                       Object {
+                        "$t": [Function],
                         "defaultFormats": Object {},
                         "defaultLocale": "en",
                         "defaultRichTextElements": undefined,
+                        "fallbackOnEmptyString": true,
                         "formatDate": [Function],
                         "formatDateTimeRange": [Function],
                         "formatDateToParts": [Function],
@@ -863,6 +874,7 @@ exports[`admin_console/team_channel_settings/team/TeamProfile__Cloud should matc
                         "locale": "en",
                         "messages": Object {},
                         "onError": [Function],
+                        "onWarn": [Function],
                         "textComponent": "span",
                         "timeZone": "Etc/UTC",
                         "wrapRichTextChunksInFragment": undefined,

webapp/channels/src/components/announcement_bar/configuration_bar/configuration_bar.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React from 'react';
+import React, {ReactNode} from 'react';
 import {FormattedMessage, injectIntl, IntlShape} from 'react-intl';
 import {Link} from 'react-router-dom';
 
@@ -395,7 +395,7 @@ const ConfigurationAnnouncementBar = (props: Props) => {
             defaultMessage = 'Please configure your <linkSite>site URL</linkSite> on the <linkConsole>System Console</linkConsole>.';
         }
 
-        const values = {
+        const values: Record<string, ReactNode> = {
             linkSite: (msg: string) => (
                 <ExternalLink
                     href={props.siteURL}

webapp/channels/src/components/cloud_subscribe_result_modal/__snapshots__/error.test.tsx.snap

@@ -29,9 +29,11 @@ exports[`components/pricing_modal/downgrade_team_removal_modal matches snapshot
           forwardedRef={null}
           intl={
             Object {
+              "$t": [Function],
               "defaultFormats": Object {},
               "defaultLocale": "en",
               "defaultRichTextElements": undefined,
+              "fallbackOnEmptyString": true,
               "formatDate": [Function],
               "formatDateTimeRange": [Function],
               "formatDateToParts": [Function],
@@ -58,6 +60,7 @@ exports[`components/pricing_modal/downgrade_team_removal_modal matches snapshot
               "locale": "en",
               "messages": Object {},
               "onError": [Function],
+              "onWarn": [Function],
               "textComponent": "span",
               "timeZone": "Etc/UTC",
               "wrapRichTextChunksInFragment": undefined,

webapp/channels/src/components/cloud_subscribe_result_modal/__snapshots__/success.test.tsx.snap

@@ -29,9 +29,11 @@ exports[`components/pricing_modal/downgrade_team_removal_modal matches snapshot
           forwardedRef={null}
           intl={
             Object {
+              "$t": [Function],
               "defaultFormats": Object {},
               "defaultLocale": "en",
               "defaultRichTextElements": undefined,
+              "fallbackOnEmptyString": true,
               "formatDate": [Function],
               "formatDateTimeRange": [Function],
               "formatDateToParts": [Function],
@@ -58,6 +60,7 @@ exports[`components/pricing_modal/downgrade_team_removal_modal matches snapshot
               "locale": "en",
               "messages": Object {},
               "onError": [Function],
+              "onWarn": [Function],
               "textComponent": "span",
               "timeZone": "Etc/UTC",
               "wrapRichTextChunksInFragment": undefined,

webapp/channels/src/components/code_block/__snapshots__/code_block.test.tsx.snap

@@ -4,10 +4,12 @@ exports[`codeBlock should render html code block with proper indentation after s
 <IntlProvider
   defaultFormats={Object {}}
   defaultLocale="en"
+  fallbackOnEmptyString={true}
   formats={Object {}}
   locale="en"
   messages={Object {}}
   onError={[Function]}
+  onWarn={[Function]}
   textComponent={Symbol(react.fragment)}
 >
   <CodeBlock
@@ -68,9 +70,11 @@ exports[`codeBlock should render html code block with proper indentation after s
                   id="copyButton"
                   intl={
                     Object {
+                      "$t": [Function],
                       "defaultFormats": Object {},
                       "defaultLocale": "en",
                       "defaultRichTextElements": undefined,
+                      "fallbackOnEmptyString": true,
                       "formatDate": [Function],
                       "formatDateTimeRange": [Function],
                       "formatDateToParts": [Function],
@@ -97,6 +101,7 @@ exports[`codeBlock should render html code block with proper indentation after s
                       "locale": "en",
                       "messages": Object {},
                       "onError": [Function],
+                      "onWarn": [Function],
                       "textComponent": Symbol(react.fragment),
                       "timeZone": undefined,
                       "wrapRichTextChunksInFragment": undefined,
@@ -228,10 +233,12 @@ exports[`codeBlock should render typescript code block after syntax highlighting
 <IntlProvider
   defaultFormats={Object {}}
   defaultLocale="en"
+  fallbackOnEmptyString={true}
   formats={Object {}}
   locale="en"
   messages={Object {}}
   onError={[Function]}
+  onWarn={[Function]}
   textComponent={Symbol(react.fragment)}
 >
   <CodeBlock
@@ -292,9 +299,11 @@ const myFunction = () => {
                   id="copyButton"
                   intl={
                     Object {
+                      "$t": [Function],
                       "defaultFormats": Object {},
                       "defaultLocale": "en",
                       "defaultRichTextElements": undefined,
+                      "fallbackOnEmptyString": true,
                       "formatDate": [Function],
                       "formatDateTimeRange": [Function],
                       "formatDateToParts": [Function],
@@ -321,6 +330,7 @@ const myFunction = () => {
                       "locale": "en",
                       "messages": Object {},
                       "onError": [Function],
+                      "onWarn": [Function],
                       "textComponent": Symbol(react.fragment),
                       "timeZone": undefined,
                       "wrapRichTextChunksInFragment": undefined,
@@ -452,10 +462,12 @@ exports[`codeBlock should render unknown language after syntax highlighting 1`]
 <IntlProvider
   defaultFormats={Object {}}
   defaultLocale="en"
+  fallbackOnEmptyString={true}
   formats={Object {}}
   locale="en"
   messages={Object {}}
   onError={[Function]}
+  onWarn={[Function]}
   textComponent={Symbol(react.fragment)}
 >
   <CodeBlock
@@ -514,9 +526,11 @@ it shouldn't highlight, it's just garbage
                   id="copyButton"
                   intl={
                     Object {
+                      "$t": [Function],
                       "defaultFormats": Object {},
                       "defaultLocale": "en",
                       "defaultRichTextElements": undefined,
+                      "fallbackOnEmptyString": true,
                       "formatDate": [Function],
                       "formatDateTimeRange": [Function],
                       "formatDateToParts": [Function],
@@ -543,6 +557,7 @@ it shouldn't highlight, it's just garbage
                       "locale": "en",
                       "messages": Object {},
                       "onError": [Function],
+                      "onWarn": [Function],
                       "textComponent": Symbol(react.fragment),
                       "timeZone": undefined,
                       "wrapRichTextChunksInFragment": undefined,

webapp/channels/src/components/drafts/panel/__snapshots__/panel_body.test.tsx.snap

@@ -73,9 +73,11 @@ exports[`components/drafts/panel/panel_body should have called handleFormattedTe
                   hide={[Function]}
                   intl={
                     Object {
+                      "$t": [Function],
                       "defaultFormats": Object {},
                       "defaultLocale": "en",
                       "defaultRichTextElements": undefined,
+                      "fallbackOnEmptyString": true,
                       "formatDate": [Function],
                       "formatDateTimeRange": [Function],
                       "formatDateToParts": [Function],
@@ -102,6 +104,7 @@ exports[`components/drafts/panel/panel_body should have called handleFormattedTe
                       "locale": "en",
                       "messages": Object {},
                       "onError": [Function],
+                      "onWarn": [Function],
                       "textComponent": "span",
                       "timeZone": "Etc/UTC",
                       "wrapRichTextChunksInFragment": undefined,
@@ -351,9 +354,11 @@ exports[`components/drafts/panel/panel_body should match snapshot 1`] = `
                   hide={[Function]}
                   intl={
                     Object {
+                      "$t": [Function],
                       "defaultFormats": Object {},
                       "defaultLocale": "en",
                       "defaultRichTextElements": undefined,
+                      "fallbackOnEmptyString": true,
                       "formatDate": [Function],
                       "formatDateTimeRange": [Function],
                       "formatDateToParts": [Function],
@@ -380,6 +385,7 @@ exports[`components/drafts/panel/panel_body should match snapshot 1`] = `
                       "locale": "en",
                       "messages": Object {},
                       "onError": [Function],
+                      "onWarn": [Function],
                       "textComponent": "span",
                       "timeZone": "Etc/UTC",
                       "wrapRichTextChunksInFragment": undefined,
@@ -635,9 +641,11 @@ exports[`components/drafts/panel/panel_body should match snapshot for priority 1
                   hide={[Function]}
                   intl={
                     Object {
+                      "$t": [Function],
                       "defaultFormats": Object {},
                       "defaultLocale": "en",
                       "defaultRichTextElements": undefined,
+                      "fallbackOnEmptyString": true,
                       "formatDate": [Function],
                       "formatDateTimeRange": [Function],
                       "formatDateToParts": [Function],
@@ -664,6 +672,7 @@ exports[`components/drafts/panel/panel_body should match snapshot for priority 1
                       "locale": "en",
                       "messages": Object {},
                       "onError": [Function],
+                      "onWarn": [Function],
                       "textComponent": "span",
                       "timeZone": "Etc/UTC",
                       "wrapRichTextChunksInFragment": undefined,
@@ -989,9 +998,11 @@ exports[`components/drafts/panel/panel_body should match snapshot for requested_
                   hide={[Function]}
                   intl={
                     Object {
+                      "$t": [Function],
                       "defaultFormats": Object {},
                       "defaultLocale": "en",
                       "defaultRichTextElements": undefined,
+                      "fallbackOnEmptyString": true,
                       "formatDate": [Function],
                       "formatDateTimeRange": [Function],
                       "formatDateToParts": [Function],
@@ -1018,6 +1029,7 @@ exports[`components/drafts/panel/panel_body should match snapshot for requested_
                       "locale": "en",
                       "messages": Object {},
                       "onError": [Function],
+                      "onWarn": [Function],
                       "textComponent": "span",
                       "timeZone": "Etc/UTC",
                       "wrapRichTextChunksInFragment": undefined,

webapp/channels/src/components/plugin_marketplace/marketplace_modal.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {useCallback, useEffect, useRef, useState} from 'react';
+import React, {useCallback, useEffect, useRef, useState, ReactNode} from 'react';
 import {Tabs, Tab, SelectCallback} from 'react-bootstrap';
 import {useIntl} from 'react-intl';
 import {useDispatch, useSelector} from 'react-redux';
@@ -40,7 +40,7 @@ const MarketplaceTabs = {
 
 const SEARCH_TIMEOUT_MILLISECONDS = 200;
 
-const linkConsole = (msg: string) => (
+const linkConsole = (msg: string): ReactNode => (
     <Link to='/admin_console/plugins/plugin_management'>
         {msg}
     </Link>

webapp/channels/src/components/profile_popover/__snapshots__/profile_popover.test.tsx.snap

@@ -3491,9 +3491,11 @@ exports[`components/ProfilePopover should show the start call button when isCall
       hide={[MockFunction]}
       intl={
         Object {
+          "$t": [Function],
           "defaultFormats": Object {},
           "defaultLocale": "en",
           "defaultRichTextElements": undefined,
+          "fallbackOnEmptyString": true,
           "formatDate": [Function],
           "formatDateTimeRange": [Function],
           "formatDateToParts": [Function],
@@ -3520,6 +3522,7 @@ exports[`components/ProfilePopover should show the start call button when isCall
           "locale": "en",
           "messages": Object {},
           "onError": [Function],
+          "onWarn": [Function],
           "textComponent": "span",
           "timeZone": "Etc/UTC",
           "wrapRichTextChunksInFragment": undefined,
@@ -3804,9 +3807,11 @@ exports[`components/ProfilePopover should show the start call button when isCall
                               hourCycle="h12"
                               intl={
                                 Object {
+                                  "$t": [Function],
                                   "defaultFormats": Object {},
                                   "defaultLocale": "en",
                                   "defaultRichTextElements": undefined,
+                                  "fallbackOnEmptyString": true,
                                   "formatDate": [Function],
                                   "formatDateTimeRange": [Function],
                                   "formatDateToParts": [Function],
@@ -3833,6 +3838,7 @@ exports[`components/ProfilePopover should show the start call button when isCall
                                   "locale": "en",
                                   "messages": Object {},
                                   "onError": [Function],
+                                  "onWarn": [Function],
                                   "textComponent": "span",
                                   "timeZone": "Etc/UTC",
                                   "wrapRichTextChunksInFragment": undefined,
@@ -4076,9 +4082,11 @@ exports[`components/ProfilePopover should show the start call button when isCall
                               id="addToChannelTooltip"
                               intl={
                                 Object {
+                                  "$t": [Function],
                                   "defaultFormats": Object {},
                                   "defaultLocale": "en",
                                   "defaultRichTextElements": undefined,
+                                  "fallbackOnEmptyString": true,
                                   "formatDate": [Function],
                                   "formatDateTimeRange": [Function],
                                   "formatDateToParts": [Function],
@@ -4105,6 +4113,7 @@ exports[`components/ProfilePopover should show the start call button when isCall
                                   "locale": "en",
                                   "messages": Object {},
                                   "onError": [Function],
+                                  "onWarn": [Function],
                                   "textComponent": "span",
                                   "timeZone": "Etc/UTC",
                                   "wrapRichTextChunksInFragment": undefined,

webapp/channels/src/components/suggestion/at_mention_provider/__snapshots__/at_mention_suggestion.test.tsx.snap

@@ -4,9 +4,11 @@ exports[`at mention suggestion Should display nick name of non signed in user 1`
 <AtMentionSuggestion
   intl={
     Object {
+      "$t": [Function],
       "defaultFormats": Object {},
       "defaultLocale": "en",
       "defaultRichTextElements": undefined,
+      "fallbackOnEmptyString": true,
       "formatDate": [Function],
       "formatDateTimeRange": [Function],
       "formatDateToParts": [Function],
@@ -33,6 +35,7 @@ exports[`at mention suggestion Should display nick name of non signed in user 1`
       "locale": "en",
       "messages": Object {},
       "onError": [Function],
+      "onWarn": [Function],
       "textComponent": "span",
       "timeZone": "Etc/UTC",
     }
@@ -113,9 +116,11 @@ exports[`at mention suggestion Should not display nick name of the signed in use
 <AtMentionSuggestion
   intl={
     Object {
+      "$t": [Function],
       "defaultFormats": Object {},
       "defaultLocale": "en",
       "defaultRichTextElements": undefined,
+      "fallbackOnEmptyString": true,
       "formatDate": [Function],
       "formatDateTimeRange": [Function],
       "formatDateToParts": [Function],
@@ -142,6 +147,7 @@ exports[`at mention suggestion Should not display nick name of the signed in use
       "locale": "en",
       "messages": Object {},
       "onError": [Function],
+      "onWarn": [Function],
       "textComponent": "span",
       "timeZone": "Etc/UTC",
     }

webapp/channels/src/components/threading/channel_threads/thread_footer/__snapshots__/thread_footer.test.tsx.snap

@@ -105,9 +105,11 @@ exports[`components/threading/channel_threads/thread_footer should report total
                   hide={[Function]}
                   intl={
                     Object {
+                      "$t": [Function],
                       "defaultFormats": Object {},
                       "defaultLocale": "en",
                       "defaultRichTextElements": undefined,
+                      "fallbackOnEmptyString": true,
                       "formatDate": [Function],
                       "formatDateTimeRange": [Function],
                       "formatDateToParts": [Function],
@@ -134,6 +136,7 @@ exports[`components/threading/channel_threads/thread_footer should report total
                       "locale": "en",
                       "messages": Object {},
                       "onError": [Function],
+                      "onWarn": [Function],
                       "textComponent": "span",
                       "timeZone": "Etc/UTC",
                       "wrapRichTextChunksInFragment": undefined,
@@ -189,9 +192,11 @@ exports[`components/threading/channel_threads/thread_footer should report total
                         id="name-5"
                         intl={
                           Object {
+                            "$t": [Function],
                             "defaultFormats": Object {},
                             "defaultLocale": "en",
                             "defaultRichTextElements": undefined,
+                            "fallbackOnEmptyString": true,
                             "formatDate": [Function],
                             "formatDateTimeRange": [Function],
                             "formatDateToParts": [Function],
@@ -218,6 +223,7 @@ exports[`components/threading/channel_threads/thread_footer should report total
                             "locale": "en",
                             "messages": Object {},
                             "onError": [Function],
+                            "onWarn": [Function],
                             "textComponent": "span",
                             "timeZone": "Etc/UTC",
                             "wrapRichTextChunksInFragment": undefined,
@@ -325,9 +331,11 @@ exports[`components/threading/channel_threads/thread_footer should report total
                   hide={[Function]}
                   intl={
                     Object {
+                      "$t": [Function],
                       "defaultFormats": Object {},
                       "defaultLocale": "en",
                       "defaultRichTextElements": undefined,
+                      "fallbackOnEmptyString": true,
                       "formatDate": [Function],
                       "formatDateTimeRange": [Function],
                       "formatDateToParts": [Function],
@@ -354,6 +362,7 @@ exports[`components/threading/channel_threads/thread_footer should report total
                       "locale": "en",
                       "messages": Object {},
                       "onError": [Function],
+                      "onWarn": [Function],
                       "textComponent": "span",
                       "timeZone": "Etc/UTC",
                       "wrapRichTextChunksInFragment": undefined,
@@ -409,9 +418,11 @@ exports[`components/threading/channel_threads/thread_footer should report total
                         id="name-4"
                         intl={
                           Object {
+                            "$t": [Function],
                             "defaultFormats": Object {},
                             "defaultLocale": "en",
                             "defaultRichTextElements": undefined,
+                            "fallbackOnEmptyString": true,
                             "formatDate": [Function],
                             "formatDateTimeRange": [Function],
                             "formatDateToParts": [Function],
@@ -438,6 +449,7 @@ exports[`components/threading/channel_threads/thread_footer should report total
                             "locale": "en",
                             "messages": Object {},
                             "onError": [Function],
+                            "onWarn": [Function],
                             "textComponent": "span",
                             "timeZone": "Etc/UTC",
                             "wrapRichTextChunksInFragment": undefined,
@@ -545,9 +557,11 @@ exports[`components/threading/channel_threads/thread_footer should report total
                   hide={[Function]}
                   intl={
                     Object {
+                      "$t": [Function],
                       "defaultFormats": Object {},
                       "defaultLocale": "en",
                       "defaultRichTextElements": undefined,
+                      "fallbackOnEmptyString": true,
                       "formatDate": [Function],
                       "formatDateTimeRange": [Function],
                       "formatDateToParts": [Function],
@@ -574,6 +588,7 @@ exports[`components/threading/channel_threads/thread_footer should report total
                       "locale": "en",
                       "messages": Object {},
                       "onError": [Function],
+                      "onWarn": [Function],
                       "textComponent": "span",
                       "timeZone": "Etc/UTC",
                       "wrapRichTextChunksInFragment": undefined,
@@ -629,9 +644,11 @@ exports[`components/threading/channel_threads/thread_footer should report total
                         id="name-3"
                         intl={
                           Object {
+                            "$t": [Function],
                             "defaultFormats": Object {},
                             "defaultLocale": "en",
                             "defaultRichTextElements": undefined,
+                            "fallbackOnEmptyString": true,
                             "formatDate": [Function],
                             "formatDateTimeRange": [Function],
                             "formatDateToParts": [Function],
@@ -658,6 +675,7 @@ exports[`components/threading/channel_threads/thread_footer should report total
                             "locale": "en",
                             "messages": Object {},
                             "onError": [Function],
+                            "onWarn": [Function],
                             "textComponent": "span",
                             "timeZone": "Etc/UTC",
                             "wrapRichTextChunksInFragment": undefined,
@@ -763,9 +781,11 @@ exports[`components/threading/channel_threads/thread_footer should report total
                   id="names-overflow"
                   intl={
                     Object {
+                      "$t": [Function],
                       "defaultFormats": Object {},
                       "defaultLocale": "en",
                       "defaultRichTextElements": undefined,
+                      "fallbackOnEmptyString": true,
                       "formatDate": [Function],
                       "formatDateTimeRange": [Function],
                       "formatDateToParts": [Function],
@@ -792,6 +812,7 @@ exports[`components/threading/channel_threads/thread_footer should report total
                       "locale": "en",
                       "messages": Object {},
                       "onError": [Function],
+                      "onWarn": [Function],
                       "textComponent": "span",
                       "timeZone": "Etc/UTC",
                       "wrapRichTextChunksInFragment": undefined,
@@ -954,9 +975,11 @@ exports[`components/threading/channel_threads/thread_footer should report total
           hourCycle="h12"
           intl={
             Object {
+              "$t": [Function],
               "defaultFormats": Object {},
               "defaultLocale": "en",
               "defaultRichTextElements": undefined,
+              "fallbackOnEmptyString": true,
               "formatDate": [Function],
               "formatDateTimeRange": [Function],
               "formatDateToParts": [Function],
@@ -983,6 +1006,7 @@ exports[`components/threading/channel_threads/thread_footer should report total
               "locale": "en",
               "messages": Object {},
               "onError": [Function],
+              "onWarn": [Function],
               "textComponent": "span",
               "timeZone": "Etc/UTC",
               "wrapRichTextChunksInFragment": undefined,
@@ -1105,9 +1129,11 @@ exports[`components/threading/channel_threads/thread_footer should show unread i
               id="threadFooterIndicator"
               intl={
                 Object {
+                  "$t": [Function],
                   "defaultFormats": Object {},
                   "defaultLocale": "en",
                   "defaultRichTextElements": undefined,
+                  "fallbackOnEmptyString": true,
                   "formatDate": [Function],
                   "formatDateTimeRange": [Function],
                   "formatDateToParts": [Function],
@@ -1134,6 +1160,7 @@ exports[`components/threading/channel_threads/thread_footer should show unread i
                   "locale": "en",
                   "messages": Object {},
                   "onError": [Function],
+                  "onWarn": [Function],
                   "textComponent": "span",
                   "timeZone": "Etc/UTC",
                   "wrapRichTextChunksInFragment": undefined,
@@ -1233,9 +1260,11 @@ exports[`components/threading/channel_threads/thread_footer should show unread i
                   hide={[Function]}
                   intl={
                     Object {
+                      "$t": [Function],
                       "defaultFormats": Object {},
                       "defaultLocale": "en",
                       "defaultRichTextElements": undefined,
+                      "fallbackOnEmptyString": true,
                       "formatDate": [Function],
                       "formatDateTimeRange": [Function],
                       "formatDateToParts": [Function],
@@ -1262,6 +1291,7 @@ exports[`components/threading/channel_threads/thread_footer should show unread i
                       "locale": "en",
                       "messages": Object {},
                       "onError": [Function],
+                      "onWarn": [Function],
                       "textComponent": "span",
                       "timeZone": "Etc/UTC",
                       "wrapRichTextChunksInFragment": undefined,
@@ -1317,9 +1347,11 @@ exports[`components/threading/channel_threads/thread_footer should show unread i
                         id="name-5"
                         intl={
                           Object {
+                            "$t": [Function],
                             "defaultFormats": Object {},
                             "defaultLocale": "en",
                             "defaultRichTextElements": undefined,
+                            "fallbackOnEmptyString": true,
                             "formatDate": [Function],
                             "formatDateTimeRange": [Function],
                             "formatDateToParts": [Function],
@@ -1346,6 +1378,7 @@ exports[`components/threading/channel_threads/thread_footer should show unread i
                             "locale": "en",
                             "messages": Object {},
                             "onError": [Function],
+                            "onWarn": [Function],
                             "textComponent": "span",
                             "timeZone": "Etc/UTC",
                             "wrapRichTextChunksInFragment": undefined,
@@ -1453,9 +1486,11 @@ exports[`components/threading/channel_threads/thread_footer should show unread i
                   hide={[Function]}
                   intl={
                     Object {
+                      "$t": [Function],
                       "defaultFormats": Object {},
                       "defaultLocale": "en",
                       "defaultRichTextElements": undefined,
+                      "fallbackOnEmptyString": true,
                       "formatDate": [Function],
                       "formatDateTimeRange": [Function],
                       "formatDateToParts": [Function],
@@ -1482,6 +1517,7 @@ exports[`components/threading/channel_threads/thread_footer should show unread i
                       "locale": "en",
                       "messages": Object {},
                       "onError": [Function],
+                      "onWarn": [Function],
                       "textComponent": "span",
                       "timeZone": "Etc/UTC",
                       "wrapRichTextChunksInFragment": undefined,
@@ -1537,9 +1573,11 @@ exports[`components/threading/channel_threads/thread_footer should show unread i
                         id="name-4"
                         intl={
                           Object {
+                            "$t": [Function],
                             "defaultFormats": Object {},
                             "defaultLocale": "en",
                             "defaultRichTextElements": undefined,
+                            "fallbackOnEmptyString": true,
                             "formatDate": [Function],
                             "formatDateTimeRange": [Function],
                             "formatDateToParts": [Function],
@@ -1566,6 +1604,7 @@ exports[`components/threading/channel_threads/thread_footer should show unread i
                             "locale": "en",
                             "messages": Object {},
                             "onError": [Function],
+                            "onWarn": [Function],
                             "textComponent": "span",
                             "timeZone": "Etc/UTC",
                             "wrapRichTextChunksInFragment": undefined,
@@ -1673,9 +1712,11 @@ exports[`components/threading/channel_threads/thread_footer should show unread i
                   hide={[Function]}
                   intl={
                     Object {
+                      "$t": [Function],
                       "defaultFormats": Object {},
                       "defaultLocale": "en",
                       "defaultRichTextElements": undefined,
+                      "fallbackOnEmptyString": true,
                       "formatDate": [Function],
                       "formatDateTimeRange": [Function],
                       "formatDateToParts": [Function],
@@ -1702,6 +1743,7 @@ exports[`components/threading/channel_threads/thread_footer should show unread i
                       "locale": "en",
                       "messages": Object {},
                       "onError": [Function],
+                      "onWarn": [Function],
                       "textComponent": "span",
                       "timeZone": "Etc/UTC",
                       "wrapRichTextChunksInFragment": undefined,
@@ -1757,9 +1799,11 @@ exports[`components/threading/channel_threads/thread_footer should show unread i
                         id="name-3"
                         intl={
                           Object {
+                            "$t": [Function],
                             "defaultFormats": Object {},
                             "defaultLocale": "en",
                             "defaultRichTextElements": undefined,
+                            "fallbackOnEmptyString": true,
                             "formatDate": [Function],
                             "formatDateTimeRange": [Function],
                             "formatDateToParts": [Function],
@@ -1786,6 +1830,7 @@ exports[`components/threading/channel_threads/thread_footer should show unread i
                             "locale": "en",
                             "messages": Object {},
                             "onError": [Function],
+                            "onWarn": [Function],
                             "textComponent": "span",
                             "timeZone": "Etc/UTC",
                             "wrapRichTextChunksInFragment": undefined,
@@ -1891,9 +1936,11 @@ exports[`components/threading/channel_threads/thread_footer should show unread i
                   id="names-overflow"
                   intl={
                     Object {
+                      "$t": [Function],
                       "defaultFormats": Object {},
                       "defaultLocale": "en",
                       "defaultRichTextElements": undefined,
+                      "fallbackOnEmptyString": true,
                       "formatDate": [Function],
                       "formatDateTimeRange": [Function],
                       "formatDateToParts": [Function],
@@ -1920,6 +1967,7 @@ exports[`components/threading/channel_threads/thread_footer should show unread i
                       "locale": "en",
                       "messages": Object {},
                       "onError": [Function],
+                      "onWarn": [Function],
                       "textComponent": "span",
                       "timeZone": "Etc/UTC",
                       "wrapRichTextChunksInFragment": undefined,
@@ -2082,9 +2130,11 @@ exports[`components/threading/channel_threads/thread_footer should show unread i
           hourCycle="h12"
           intl={
             Object {
+              "$t": [Function],
               "defaultFormats": Object {},
               "defaultLocale": "en",
               "defaultRichTextElements": undefined,
+              "fallbackOnEmptyString": true,
               "formatDate": [Function],
               "formatDateTimeRange": [Function],
               "formatDateToParts": [Function],
@@ -2111,6 +2161,7 @@ exports[`components/threading/channel_threads/thread_footer should show unread i
               "locale": "en",
               "messages": Object {},
               "onError": [Function],
+              "onWarn": [Function],
               "textComponent": "span",
               "timeZone": "Etc/UTC",
               "wrapRichTextChunksInFragment": undefined,

webapp/channels/src/components/threading/global_threads/global_threads.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {memo, useCallback, useEffect, useState} from 'react';
+import React, {ReactNode, memo, useCallback, useEffect, useState} from 'react';
 import {useIntl} from 'react-intl';
 import {isEmpty} from 'lodash';
 import {Link, useRouteMatch} from 'react-router-dom';
@@ -215,7 +215,7 @@ const GlobalThreads = () => {
                                 id: 'globalThreads.threadPane.unselectedTitle',
                                 defaultMessage: '{numUnread, plural, =0 {Looks like you’re all caught up} other {Catch up on your threads}}',
                             }, {numUnread})}
-                            subtitle={formatMessage({
+                            subtitle={formatMessage<ReactNode>({
                                 id: 'globalThreads.threadPane.unreadMessageLink',
                                 defaultMessage: 'You have {numUnread, plural, =0 {no unread threads} =1 {<link>{numUnread} thread</link>} other {<link>{numUnread} threads</link>}} {numUnread, plural, =0 {} other {with unread messages}}',
                             }, {

webapp/channels/src/components/tours/crt_tour/crt_threads_pane_tutorial_tip.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React from 'react';
+import React, {ReactNode} from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
 import {useDispatch, useSelector} from 'react-redux';
 
@@ -29,7 +29,7 @@ const CRTThreadsPaneTutorialTip = () => {
 
     const screen = (
         <p>
-            {formatMessage(
+            {formatMessage<ReactNode>(
                 {
                     id: 'tutorial_threads.threads_pane.description',
                     defaultMessage: 'Click the <b>Follow</b> button to be notified about replies and see it in your <b>Threads</b> view. Within a thread, the <b>New Messages</b> line shows you where you left off.',

webapp/channels/src/components/tours/crt_tour/crt_unread_tutorial_tip.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React from 'react';
+import React, {ReactNode} from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
 
 import {useMeasurePunchouts} from '@mattermost/components';
@@ -19,7 +19,7 @@ const CRTUnreadTutorialTip = () => {
 
     const screen = (
         <p>
-            {formatMessage(
+            {formatMessage<ReactNode>(
                 {
                     id: 'tutorial_threads.unread.description',
                     defaultMessage: 'You can switch to <b>Unreads</b> to show only threads that are unread.',

webapp/channels/src/components/user_group_popover/__snapshots__/user_group_popover.test.tsx.snap

@@ -1177,9 +1177,11 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                                           id="name-id0"
                                                           intl={
                                                             Object {
+                                                              "$t": [Function],
                                                               "defaultFormats": Object {},
                                                               "defaultLocale": "en",
                                                               "defaultRichTextElements": undefined,
+                                                              "fallbackOnEmptyString": true,
                                                               "formatDate": [Function],
                                                               "formatDateTimeRange": [Function],
                                                               "formatDateToParts": [Function],
@@ -1206,6 +1208,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                                               "locale": "en",
                                                               "messages": Object {},
                                                               "onError": [Function],
+                                                              "onWarn": [Function],
                                                               "textComponent": "span",
                                                               "timeZone": "Etc/UTC",
                                                               "wrapRichTextChunksInFragment": undefined,
@@ -1393,9 +1396,11 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                                           id="name-id1"
                                                           intl={
                                                             Object {
+                                                              "$t": [Function],
                                                               "defaultFormats": Object {},
                                                               "defaultLocale": "en",
                                                               "defaultRichTextElements": undefined,
+                                                              "fallbackOnEmptyString": true,
                                                               "formatDate": [Function],
                                                               "formatDateTimeRange": [Function],
                                                               "formatDateToParts": [Function],
@@ -1422,6 +1427,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                                               "locale": "en",
                                                               "messages": Object {},
                                                               "onError": [Function],
+                                                              "onWarn": [Function],
                                                               "textComponent": "span",
                                                               "timeZone": "Etc/UTC",
                                                               "wrapRichTextChunksInFragment": undefined,
@@ -1609,9 +1615,11 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                                           id="name-id10"
                                                           intl={
                                                             Object {
+                                                              "$t": [Function],
                                                               "defaultFormats": Object {},
                                                               "defaultLocale": "en",
                                                               "defaultRichTextElements": undefined,
+                                                              "fallbackOnEmptyString": true,
                                                               "formatDate": [Function],
                                                               "formatDateTimeRange": [Function],
                                                               "formatDateToParts": [Function],
@@ -1638,6 +1646,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                                               "locale": "en",
                                                               "messages": Object {},
                                                               "onError": [Function],
+                                                              "onWarn": [Function],
                                                               "textComponent": "span",
                                                               "timeZone": "Etc/UTC",
                                                               "wrapRichTextChunksInFragment": undefined,
@@ -1825,9 +1834,11 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                                           id="name-id11"
                                                           intl={
                                                             Object {
+                                                              "$t": [Function],
                                                               "defaultFormats": Object {},
                                                               "defaultLocale": "en",
                                                               "defaultRichTextElements": undefined,
+                                                              "fallbackOnEmptyString": true,
                                                               "formatDate": [Function],
                                                               "formatDateTimeRange": [Function],
                                                               "formatDateToParts": [Function],
@@ -1854,6 +1865,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                                               "locale": "en",
                                                               "messages": Object {},
                                                               "onError": [Function],
+                                                              "onWarn": [Function],
                                                               "textComponent": "span",
                                                               "timeZone": "Etc/UTC",
                                                               "wrapRichTextChunksInFragment": undefined,
@@ -2041,9 +2053,11 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                                           id="name-id12"
                                                           intl={
                                                             Object {
+                                                              "$t": [Function],
                                                               "defaultFormats": Object {},
                                                               "defaultLocale": "en",
                                                               "defaultRichTextElements": undefined,
+                                                              "fallbackOnEmptyString": true,
                                                               "formatDate": [Function],
                                                               "formatDateTimeRange": [Function],
                                                               "formatDateToParts": [Function],
@@ -2070,6 +2084,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                                               "locale": "en",
                                                               "messages": Object {},
                                                               "onError": [Function],
+                                                              "onWarn": [Function],
                                                               "textComponent": "span",
                                                               "timeZone": "Etc/UTC",
                                                               "wrapRichTextChunksInFragment": undefined,

webapp/channels/src/components/user_group_popover/group_member_list/__snapshots__/group_member_list.test.tsx.snap

@@ -457,9 +457,11 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                           id="name-id0"
                                           intl={
                                             Object {
+                                              "$t": [Function],
                                               "defaultFormats": Object {},
                                               "defaultLocale": "en",
                                               "defaultRichTextElements": undefined,
+                                              "fallbackOnEmptyString": true,
                                               "formatDate": [Function],
                                               "formatDateTimeRange": [Function],
                                               "formatDateToParts": [Function],
@@ -486,6 +488,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                               "locale": "en",
                                               "messages": Object {},
                                               "onError": [Function],
+                                              "onWarn": [Function],
                                               "textComponent": "span",
                                               "timeZone": "Etc/UTC",
                                               "wrapRichTextChunksInFragment": undefined,
@@ -673,9 +676,11 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                           id="name-id1"
                                           intl={
                                             Object {
+                                              "$t": [Function],
                                               "defaultFormats": Object {},
                                               "defaultLocale": "en",
                                               "defaultRichTextElements": undefined,
+                                              "fallbackOnEmptyString": true,
                                               "formatDate": [Function],
                                               "formatDateTimeRange": [Function],
                                               "formatDateToParts": [Function],
@@ -702,6 +707,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                               "locale": "en",
                                               "messages": Object {},
                                               "onError": [Function],
+                                              "onWarn": [Function],
                                               "textComponent": "span",
                                               "timeZone": "Etc/UTC",
                                               "wrapRichTextChunksInFragment": undefined,
@@ -889,9 +895,11 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                           id="name-id2"
                                           intl={
                                             Object {
+                                              "$t": [Function],
                                               "defaultFormats": Object {},
                                               "defaultLocale": "en",
                                               "defaultRichTextElements": undefined,
+                                              "fallbackOnEmptyString": true,
                                               "formatDate": [Function],
                                               "formatDateTimeRange": [Function],
                                               "formatDateToParts": [Function],
@@ -918,6 +926,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                               "locale": "en",
                                               "messages": Object {},
                                               "onError": [Function],
+                                              "onWarn": [Function],
                                               "textComponent": "span",
                                               "timeZone": "Etc/UTC",
                                               "wrapRichTextChunksInFragment": undefined,
@@ -1105,9 +1114,11 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                           id="name-id3"
                                           intl={
                                             Object {
+                                              "$t": [Function],
                                               "defaultFormats": Object {},
                                               "defaultLocale": "en",
                                               "defaultRichTextElements": undefined,
+                                              "fallbackOnEmptyString": true,
                                               "formatDate": [Function],
                                               "formatDateTimeRange": [Function],
                                               "formatDateToParts": [Function],
@@ -1134,6 +1145,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                               "locale": "en",
                                               "messages": Object {},
                                               "onError": [Function],
+                                              "onWarn": [Function],
                                               "textComponent": "span",
                                               "timeZone": "Etc/UTC",
                                               "wrapRichTextChunksInFragment": undefined,
@@ -1321,9 +1333,11 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                           id="name-id4"
                                           intl={
                                             Object {
+                                              "$t": [Function],
                                               "defaultFormats": Object {},
                                               "defaultLocale": "en",
                                               "defaultRichTextElements": undefined,
+                                              "fallbackOnEmptyString": true,
                                               "formatDate": [Function],
                                               "formatDateTimeRange": [Function],
                                               "formatDateToParts": [Function],
@@ -1350,6 +1364,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                               "locale": "en",
                                               "messages": Object {},
                                               "onError": [Function],
+                                              "onWarn": [Function],
                                               "textComponent": "span",
                                               "timeZone": "Etc/UTC",
                                               "wrapRichTextChunksInFragment": undefined,

webapp/channels/src/components/widgets/menu/menu_items/useWords.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React from 'react';
+import React, {ReactNode} from 'react';
 import {useIntl} from 'react-intl';
 import {PrimitiveType, FormatXMLElementFn} from 'intl-messageformat';
 
@@ -118,7 +118,7 @@ export default function useWords(highestLimit: LimitSummary | false, isAdminUser
                 id: 'workspace_limits.menu_limit.messages',
                 defaultMessage: 'Total messages',
             }),
-            description: intl.formatMessage(
+            description: intl.formatMessage<ReactNode>(
                 {
                     id,
                     defaultMessage,
@@ -150,7 +150,7 @@ export default function useWords(highestLimit: LimitSummary | false, isAdminUser
                 id: 'workspace_limits.menu_limit.file_storage',
                 defaultMessage: 'File storage limit',
             }),
-            description: intl.formatMessage(
+            description: intl.formatMessage<ReactNode>(
                 {
                     id,
                     defaultMessage,

webapp/channels/src/components/widgets/users/avatars/__snapshots__/avatars.test.tsx.snap

@@ -59,9 +59,11 @@ exports[`components/widgets/users/Avatars should fetch missing users 1`] = `
               hide={[Function]}
               intl={
                 Object {
+                  "$t": [Function],
                   "defaultFormats": Object {},
                   "defaultLocale": "en",
                   "defaultRichTextElements": undefined,
+                  "fallbackOnEmptyString": true,
                   "formatDate": [Function],
                   "formatDateTimeRange": [Function],
                   "formatDateToParts": [Function],
@@ -88,6 +90,7 @@ exports[`components/widgets/users/Avatars should fetch missing users 1`] = `
                   "locale": "en",
                   "messages": Object {},
                   "onError": [Function],
+                  "onWarn": [Function],
                   "textComponent": "span",
                   "timeZone": "Etc/UTC",
                   "wrapRichTextChunksInFragment": undefined,
@@ -143,9 +146,11 @@ exports[`components/widgets/users/Avatars should fetch missing users 1`] = `
                     id="name-1"
                     intl={
                       Object {
+                        "$t": [Function],
                         "defaultFormats": Object {},
                         "defaultLocale": "en",
                         "defaultRichTextElements": undefined,
+                        "fallbackOnEmptyString": true,
                         "formatDate": [Function],
                         "formatDateTimeRange": [Function],
                         "formatDateToParts": [Function],
@@ -172,6 +177,7 @@ exports[`components/widgets/users/Avatars should fetch missing users 1`] = `
                         "locale": "en",
                         "messages": Object {},
                         "onError": [Function],
+                        "onWarn": [Function],
                         "textComponent": "span",
                         "timeZone": "Etc/UTC",
                         "wrapRichTextChunksInFragment": undefined,
@@ -279,9 +285,11 @@ exports[`components/widgets/users/Avatars should fetch missing users 1`] = `
               hide={[Function]}
               intl={
                 Object {
+                  "$t": [Function],
                   "defaultFormats": Object {},
                   "defaultLocale": "en",
                   "defaultRichTextElements": undefined,
+                  "fallbackOnEmptyString": true,
                   "formatDate": [Function],
                   "formatDateTimeRange": [Function],
                   "formatDateToParts": [Function],
@@ -308,6 +316,7 @@ exports[`components/widgets/users/Avatars should fetch missing users 1`] = `
                   "locale": "en",
                   "messages": Object {},
                   "onError": [Function],
+                  "onWarn": [Function],
                   "textComponent": "span",
                   "timeZone": "Etc/UTC",
                   "wrapRichTextChunksInFragment": undefined,
@@ -363,9 +372,11 @@ exports[`components/widgets/users/Avatars should fetch missing users 1`] = `
                     id="name-6"
                     intl={
                       Object {
+                        "$t": [Function],
                         "defaultFormats": Object {},
                         "defaultLocale": "en",
                         "defaultRichTextElements": undefined,
+                        "fallbackOnEmptyString": true,
                         "formatDate": [Function],
                         "formatDateTimeRange": [Function],
                         "formatDateToParts": [Function],
@@ -392,6 +403,7 @@ exports[`components/widgets/users/Avatars should fetch missing users 1`] = `
                         "locale": "en",
                         "messages": Object {},
                         "onError": [Function],
+                        "onWarn": [Function],
                         "textComponent": "span",
                         "timeZone": "Etc/UTC",
                         "wrapRichTextChunksInFragment": undefined,
@@ -499,9 +511,11 @@ exports[`components/widgets/users/Avatars should fetch missing users 1`] = `
               hide={[Function]}
               intl={
                 Object {
+                  "$t": [Function],
                   "defaultFormats": Object {},
                   "defaultLocale": "en",
                   "defaultRichTextElements": undefined,
+                  "fallbackOnEmptyString": true,
                   "formatDate": [Function],
                   "formatDateTimeRange": [Function],
                   "formatDateToParts": [Function],
@@ -528,6 +542,7 @@ exports[`components/widgets/users/Avatars should fetch missing users 1`] = `
                   "locale": "en",
                   "messages": Object {},
                   "onError": [Function],
+                  "onWarn": [Function],
                   "textComponent": "span",
                   "timeZone": "Etc/UTC",
                   "wrapRichTextChunksInFragment": undefined,
@@ -583,9 +598,11 @@ exports[`components/widgets/users/Avatars should fetch missing users 1`] = `
                     id="name-7"
                     intl={
                       Object {
+                        "$t": [Function],
                         "defaultFormats": Object {},
                         "defaultLocale": "en",
                         "defaultRichTextElements": undefined,
+                        "fallbackOnEmptyString": true,
                         "formatDate": [Function],
                         "formatDateTimeRange": [Function],
                         "formatDateToParts": [Function],
@@ -612,6 +629,7 @@ exports[`components/widgets/users/Avatars should fetch missing users 1`] = `
                         "locale": "en",
                         "messages": Object {},
                         "onError": [Function],
+                        "onWarn": [Function],
                         "textComponent": "span",
                         "timeZone": "Etc/UTC",
                         "wrapRichTextChunksInFragment": undefined,
@@ -717,9 +735,11 @@ exports[`components/widgets/users/Avatars should fetch missing users 1`] = `
               id="names-overflow"
               intl={
                 Object {
+                  "$t": [Function],
                   "defaultFormats": Object {},
                   "defaultLocale": "en",
                   "defaultRichTextElements": undefined,
+                  "fallbackOnEmptyString": true,
                   "formatDate": [Function],
                   "formatDateTimeRange": [Function],
                   "formatDateToParts": [Function],
@@ -746,6 +766,7 @@ exports[`components/widgets/users/Avatars should fetch missing users 1`] = `
                   "locale": "en",
                   "messages": Object {},
                   "onError": [Function],
+                  "onWarn": [Function],
                   "textComponent": "span",
                   "timeZone": "Etc/UTC",
                   "wrapRichTextChunksInFragment": undefined,
@@ -860,9 +881,11 @@ exports[`components/widgets/users/Avatars should properly count overflow 1`] = `
               hide={[Function]}
               intl={
                 Object {
+                  "$t": [Function],
                   "defaultFormats": Object {},
                   "defaultLocale": "en",
                   "defaultRichTextElements": undefined,
+                  "fallbackOnEmptyString": true,
                   "formatDate": [Function],
                   "formatDateTimeRange": [Function],
                   "formatDateToParts": [Function],
@@ -889,6 +912,7 @@ exports[`components/widgets/users/Avatars should properly count overflow 1`] = `
                   "locale": "en",
                   "messages": Object {},
                   "onError": [Function],
+                  "onWarn": [Function],
                   "textComponent": "span",
                   "timeZone": "Etc/UTC",
                   "wrapRichTextChunksInFragment": undefined,
@@ -944,9 +968,11 @@ exports[`components/widgets/users/Avatars should properly count overflow 1`] = `
                     id="name-1"
                     intl={
                       Object {
+                        "$t": [Function],
                         "defaultFormats": Object {},
                         "defaultLocale": "en",
                         "defaultRichTextElements": undefined,
+                        "fallbackOnEmptyString": true,
                         "formatDate": [Function],
                         "formatDateTimeRange": [Function],
                         "formatDateToParts": [Function],
@@ -973,6 +999,7 @@ exports[`components/widgets/users/Avatars should properly count overflow 1`] = `
                         "locale": "en",
                         "messages": Object {},
                         "onError": [Function],
+                        "onWarn": [Function],
                         "textComponent": "span",
                         "timeZone": "Etc/UTC",
                         "wrapRichTextChunksInFragment": undefined,
@@ -1080,9 +1107,11 @@ exports[`components/widgets/users/Avatars should properly count overflow 1`] = `
               hide={[Function]}
               intl={
                 Object {
+                  "$t": [Function],
                   "defaultFormats": Object {},
                   "defaultLocale": "en",
                   "defaultRichTextElements": undefined,
+                  "fallbackOnEmptyString": true,
                   "formatDate": [Function],
                   "formatDateTimeRange": [Function],
                   "formatDateToParts": [Function],
@@ -1109,6 +1138,7 @@ exports[`components/widgets/users/Avatars should properly count overflow 1`] = `
                   "locale": "en",
                   "messages": Object {},
                   "onError": [Function],
+                  "onWarn": [Function],
                   "textComponent": "span",
                   "timeZone": "Etc/UTC",
                   "wrapRichTextChunksInFragment": undefined,
@@ -1164,9 +1194,11 @@ exports[`components/widgets/users/Avatars should properly count overflow 1`] = `
                     id="name-2"
                     intl={
                       Object {
+                        "$t": [Function],
                         "defaultFormats": Object {},
                         "defaultLocale": "en",
                         "defaultRichTextElements": undefined,
+                        "fallbackOnEmptyString": true,
                         "formatDate": [Function],
                         "formatDateTimeRange": [Function],
                         "formatDateToParts": [Function],
@@ -1193,6 +1225,7 @@ exports[`components/widgets/users/Avatars should properly count overflow 1`] = `
                         "locale": "en",
                         "messages": Object {},
                         "onError": [Function],
+                        "onWarn": [Function],
                         "textComponent": "span",
                         "timeZone": "Etc/UTC",
                         "wrapRichTextChunksInFragment": undefined,
@@ -1300,9 +1333,11 @@ exports[`components/widgets/users/Avatars should properly count overflow 1`] = `
               hide={[Function]}
               intl={
                 Object {
+                  "$t": [Function],
                   "defaultFormats": Object {},
                   "defaultLocale": "en",
                   "defaultRichTextElements": undefined,
+                  "fallbackOnEmptyString": true,
                   "formatDate": [Function],
                   "formatDateTimeRange": [Function],
                   "formatDateToParts": [Function],
@@ -1329,6 +1364,7 @@ exports[`components/widgets/users/Avatars should properly count overflow 1`] = `
                   "locale": "en",
                   "messages": Object {},
                   "onError": [Function],
+                  "onWarn": [Function],
                   "textComponent": "span",
                   "timeZone": "Etc/UTC",
                   "wrapRichTextChunksInFragment": undefined,
@@ -1384,9 +1420,11 @@ exports[`components/widgets/users/Avatars should properly count overflow 1`] = `
                     id="name-3"
                     intl={
                       Object {
+                        "$t": [Function],
                         "defaultFormats": Object {},
                         "defaultLocale": "en",
                         "defaultRichTextElements": undefined,
+                        "fallbackOnEmptyString": true,
                         "formatDate": [Function],
                         "formatDateTimeRange": [Function],
                         "formatDateToParts": [Function],
@@ -1413,6 +1451,7 @@ exports[`components/widgets/users/Avatars should properly count overflow 1`] = `
                         "locale": "en",
                         "messages": Object {},
                         "onError": [Function],
+                        "onWarn": [Function],
                         "textComponent": "span",
                         "timeZone": "Etc/UTC",
                         "wrapRichTextChunksInFragment": undefined,
@@ -1518,9 +1557,11 @@ exports[`components/widgets/users/Avatars should properly count overflow 1`] = `
               id="names-overflow"
               intl={
                 Object {
+                  "$t": [Function],
                   "defaultFormats": Object {},
                   "defaultLocale": "en",
                   "defaultRichTextElements": undefined,
+                  "fallbackOnEmptyString": true,
                   "formatDate": [Function],
                   "formatDateTimeRange": [Function],
                   "formatDateToParts": [Function],
@@ -1547,6 +1588,7 @@ exports[`components/widgets/users/Avatars should properly count overflow 1`] = `
                   "locale": "en",
                   "messages": Object {},
                   "onError": [Function],
+                  "onWarn": [Function],
                   "textComponent": "span",
                   "timeZone": "Etc/UTC",
                   "wrapRichTextChunksInFragment": undefined,
@@ -1659,9 +1701,11 @@ exports[`components/widgets/users/Avatars should support userIds 1`] = `
               hide={[Function]}
               intl={
                 Object {
+                  "$t": [Function],
                   "defaultFormats": Object {},
                   "defaultLocale": "en",
                   "defaultRichTextElements": undefined,
+                  "fallbackOnEmptyString": true,
                   "formatDate": [Function],
                   "formatDateTimeRange": [Function],
                   "formatDateToParts": [Function],
@@ -1688,6 +1732,7 @@ exports[`components/widgets/users/Avatars should support userIds 1`] = `
                   "locale": "en",
                   "messages": Object {},
                   "onError": [Function],
+                  "onWarn": [Function],
                   "textComponent": "span",
                   "timeZone": "Etc/UTC",
                   "wrapRichTextChunksInFragment": undefined,
@@ -1743,9 +1788,11 @@ exports[`components/widgets/users/Avatars should support userIds 1`] = `
                     id="name-1"
                     intl={
                       Object {
+                        "$t": [Function],
                         "defaultFormats": Object {},
                         "defaultLocale": "en",
                         "defaultRichTextElements": undefined,
+                        "fallbackOnEmptyString": true,
                         "formatDate": [Function],
                         "formatDateTimeRange": [Function],
                         "formatDateToParts": [Function],
@@ -1772,6 +1819,7 @@ exports[`components/widgets/users/Avatars should support userIds 1`] = `
                         "locale": "en",
                         "messages": Object {},
                         "onError": [Function],
+                        "onWarn": [Function],
                         "textComponent": "span",
                         "timeZone": "Etc/UTC",
                         "wrapRichTextChunksInFragment": undefined,
@@ -1879,9 +1927,11 @@ exports[`components/widgets/users/Avatars should support userIds 1`] = `
               hide={[Function]}
               intl={
                 Object {
+                  "$t": [Function],
                   "defaultFormats": Object {},
                   "defaultLocale": "en",
                   "defaultRichTextElements": undefined,
+                  "fallbackOnEmptyString": true,
                   "formatDate": [Function],
                   "formatDateTimeRange": [Function],
                   "formatDateToParts": [Function],
@@ -1908,6 +1958,7 @@ exports[`components/widgets/users/Avatars should support userIds 1`] = `
                   "locale": "en",
                   "messages": Object {},
                   "onError": [Function],
+                  "onWarn": [Function],
                   "textComponent": "span",
                   "timeZone": "Etc/UTC",
                   "wrapRichTextChunksInFragment": undefined,
@@ -1963,9 +2014,11 @@ exports[`components/widgets/users/Avatars should support userIds 1`] = `
                     id="name-2"
                     intl={
                       Object {
+                        "$t": [Function],
                         "defaultFormats": Object {},
                         "defaultLocale": "en",
                         "defaultRichTextElements": undefined,
+                        "fallbackOnEmptyString": true,
                         "formatDate": [Function],
                         "formatDateTimeRange": [Function],
                         "formatDateToParts": [Function],
@@ -1992,6 +2045,7 @@ exports[`components/widgets/users/Avatars should support userIds 1`] = `
                         "locale": "en",
                         "messages": Object {},
                         "onError": [Function],
+                        "onWarn": [Function],
                         "textComponent": "span",
                         "timeZone": "Etc/UTC",
                         "wrapRichTextChunksInFragment": undefined,
@@ -2099,9 +2153,11 @@ exports[`components/widgets/users/Avatars should support userIds 1`] = `
               hide={[Function]}
               intl={
                 Object {
+                  "$t": [Function],
                   "defaultFormats": Object {},
                   "defaultLocale": "en",
                   "defaultRichTextElements": undefined,
+                  "fallbackOnEmptyString": true,
                   "formatDate": [Function],
                   "formatDateTimeRange": [Function],
                   "formatDateToParts": [Function],
@@ -2128,6 +2184,7 @@ exports[`components/widgets/users/Avatars should support userIds 1`] = `
                   "locale": "en",
                   "messages": Object {},
                   "onError": [Function],
+                  "onWarn": [Function],
                   "textComponent": "span",
                   "timeZone": "Etc/UTC",
                   "wrapRichTextChunksInFragment": undefined,
@@ -2183,9 +2240,11 @@ exports[`components/widgets/users/Avatars should support userIds 1`] = `
                     id="name-3"
                     intl={
                       Object {
+                        "$t": [Function],
                         "defaultFormats": Object {},
                         "defaultLocale": "en",
                         "defaultRichTextElements": undefined,
+                        "fallbackOnEmptyString": true,
                         "formatDate": [Function],
                         "formatDateTimeRange": [Function],
                         "formatDateToParts": [Function],
@@ -2212,6 +2271,7 @@ exports[`components/widgets/users/Avatars should support userIds 1`] = `
                         "locale": "en",
                         "messages": Object {},
                         "onError": [Function],
+                        "onWarn": [Function],
                         "textComponent": "span",
                         "timeZone": "Etc/UTC",
                         "wrapRichTextChunksInFragment": undefined,

webapp/channels/src/plugins/channel_header_plug/__snapshots__/channel_header_plug.test.tsx.snap

@@ -59,9 +59,11 @@ exports[`plugins/ChannelHeaderPlug should match snapshot when the App Bar is vis
   }
   intl={
     Object {
+      "$t": [Function],
       "defaultFormats": Object {},
       "defaultLocale": "en",
       "defaultRichTextElements": undefined,
+      "fallbackOnEmptyString": true,
       "formatDate": [Function],
       "formatDateTimeRange": [Function],
       "formatDateToParts": [Function],
@@ -88,6 +90,7 @@ exports[`plugins/ChannelHeaderPlug should match snapshot when the App Bar is vis
       "locale": "en",
       "messages": Object {},
       "onError": [Function],
+      "onWarn": [Function],
       "textComponent": "span",
       "timeZone": "Etc/UTC",
     }
@@ -114,9 +117,11 @@ exports[`plugins/ChannelHeaderPlug should match snapshot with no extended compon
   components={Array []}
   intl={
     Object {
+      "$t": [Function],
       "defaultFormats": Object {},
       "defaultLocale": "en",
       "defaultRichTextElements": undefined,
+      "fallbackOnEmptyString": true,
       "formatDate": [Function],
       "formatDateTimeRange": [Function],
       "formatDateToParts": [Function],
@@ -143,6 +148,7 @@ exports[`plugins/ChannelHeaderPlug should match snapshot with no extended compon
       "locale": "en",
       "messages": Object {},
       "onError": [Function],
+      "onWarn": [Function],
       "textComponent": "span",
       "timeZone": "Etc/UTC",
     }
@@ -182,9 +188,11 @@ exports[`plugins/ChannelHeaderPlug should match snapshot with one extended compo
   }
   intl={
     Object {
+      "$t": [Function],
       "defaultFormats": Object {},
       "defaultLocale": "en",
       "defaultRichTextElements": undefined,
+      "fallbackOnEmptyString": true,
       "formatDate": [Function],
       "formatDateTimeRange": [Function],
       "formatDateToParts": [Function],
@@ -211,6 +219,7 @@ exports[`plugins/ChannelHeaderPlug should match snapshot with one extended compo
       "locale": "en",
       "messages": Object {},
       "onError": [Function],
+      "onWarn": [Function],
       "textComponent": "span",
       "timeZone": "Etc/UTC",
     }
@@ -264,9 +273,11 @@ exports[`plugins/ChannelHeaderPlug should match snapshot with one extended compo
               id="pluginTooltip"
               intl={
                 Object {
+                  "$t": [Function],
                   "defaultFormats": Object {},
                   "defaultLocale": "en",
                   "defaultRichTextElements": undefined,
+                  "fallbackOnEmptyString": true,
                   "formatDate": [Function],
                   "formatDateTimeRange": [Function],
                   "formatDateToParts": [Function],
@@ -293,6 +304,7 @@ exports[`plugins/ChannelHeaderPlug should match snapshot with one extended compo
                   "locale": "en",
                   "messages": Object {},
                   "onError": [Function],
+                  "onWarn": [Function],
                   "textComponent": "span",
                   "timeZone": "Etc/UTC",
                   "wrapRichTextChunksInFragment": undefined,
@@ -501,9 +513,11 @@ exports[`plugins/ChannelHeaderPlug should match snapshot with six extended compo
   }
   intl={
     Object {
+      "$t": [Function],
       "defaultFormats": Object {},
       "defaultLocale": "en",
       "defaultRichTextElements": undefined,
+      "fallbackOnEmptyString": true,
       "formatDate": [Function],
       "formatDateTimeRange": [Function],
       "formatDateToParts": [Function],
@@ -530,6 +544,7 @@ exports[`plugins/ChannelHeaderPlug should match snapshot with six extended compo
       "locale": "en",
       "messages": Object {},
       "onError": [Function],
+      "onWarn": [Function],
       "textComponent": "span",
       "timeZone": "Etc/UTC",
     }
@@ -583,9 +598,11 @@ exports[`plugins/ChannelHeaderPlug should match snapshot with six extended compo
               id="pluginTooltip"
               intl={
                 Object {
+                  "$t": [Function],
                   "defaultFormats": Object {},
                   "defaultLocale": "en",
                   "defaultRichTextElements": undefined,
+                  "fallbackOnEmptyString": true,
                   "formatDate": [Function],
                   "formatDateTimeRange": [Function],
                   "formatDateToParts": [Function],
@@ -612,6 +629,7 @@ exports[`plugins/ChannelHeaderPlug should match snapshot with six extended compo
                   "locale": "en",
                   "messages": Object {},
                   "onError": [Function],
+                  "onWarn": [Function],
                   "textComponent": "span",
                   "timeZone": "Etc/UTC",
                   "wrapRichTextChunksInFragment": undefined,
@@ -693,9 +711,11 @@ exports[`plugins/ChannelHeaderPlug should match snapshot with six extended compo
               id="pluginTooltip"
               intl={
                 Object {
+                  "$t": [Function],
                   "defaultFormats": Object {},
                   "defaultLocale": "en",
                   "defaultRichTextElements": undefined,
+                  "fallbackOnEmptyString": true,
                   "formatDate": [Function],
                   "formatDateTimeRange": [Function],
                   "formatDateToParts": [Function],
@@ -722,6 +742,7 @@ exports[`plugins/ChannelHeaderPlug should match snapshot with six extended compo
                   "locale": "en",
                   "messages": Object {},
                   "onError": [Function],
+                  "onWarn": [Function],
                   "textComponent": "span",
                   "timeZone": "Etc/UTC",
                   "wrapRichTextChunksInFragment": undefined,
@@ -803,9 +824,11 @@ exports[`plugins/ChannelHeaderPlug should match snapshot with six extended compo
               id="pluginTooltip"
               intl={
                 Object {
+                  "$t": [Function],
                   "defaultFormats": Object {},
                   "defaultLocale": "en",
                   "defaultRichTextElements": undefined,
+                  "fallbackOnEmptyString": true,
                   "formatDate": [Function],
                   "formatDateTimeRange": [Function],
                   "formatDateToParts": [Function],
@@ -832,6 +855,7 @@ exports[`plugins/ChannelHeaderPlug should match snapshot with six extended compo
                   "locale": "en",
                   "messages": Object {},
                   "onError": [Function],
+                  "onWarn": [Function],
                   "textComponent": "span",
                   "timeZone": "Etc/UTC",
                   "wrapRichTextChunksInFragment": undefined,
@@ -913,9 +937,11 @@ exports[`plugins/ChannelHeaderPlug should match snapshot with six extended compo
               id="pluginTooltip"
               intl={
                 Object {
+                  "$t": [Function],
                   "defaultFormats": Object {},
                   "defaultLocale": "en",
                   "defaultRichTextElements": undefined,
+                  "fallbackOnEmptyString": true,
                   "formatDate": [Function],
                   "formatDateTimeRange": [Function],
                   "formatDateToParts": [Function],
@@ -942,6 +968,7 @@ exports[`plugins/ChannelHeaderPlug should match snapshot with six extended compo
                   "locale": "en",
                   "messages": Object {},
                   "onError": [Function],
+                  "onWarn": [Function],
                   "textComponent": "span",
                   "timeZone": "Etc/UTC",
                   "wrapRichTextChunksInFragment": undefined,
@@ -1023,9 +1050,11 @@ exports[`plugins/ChannelHeaderPlug should match snapshot with six extended compo
               id="pluginTooltip"
               intl={
                 Object {
+                  "$t": [Function],
                   "defaultFormats": Object {},
                   "defaultLocale": "en",
                   "defaultRichTextElements": undefined,
+                  "fallbackOnEmptyString": true,
                   "formatDate": [Function],
                   "formatDateTimeRange": [Function],
                   "formatDateToParts": [Function],
@@ -1052,6 +1081,7 @@ exports[`plugins/ChannelHeaderPlug should match snapshot with six extended compo
                   "locale": "en",
                   "messages": Object {},
                   "onError": [Function],
+                  "onWarn": [Function],
                   "textComponent": "span",
                   "timeZone": "Etc/UTC",
                   "wrapRichTextChunksInFragment": undefined,
@@ -1133,9 +1163,11 @@ exports[`plugins/ChannelHeaderPlug should match snapshot with six extended compo
               id="pluginTooltip"
               intl={
                 Object {
+                  "$t": [Function],
                   "defaultFormats": Object {},
                   "defaultLocale": "en",
                   "defaultRichTextElements": undefined,
+                  "fallbackOnEmptyString": true,
                   "formatDate": [Function],
                   "formatDateTimeRange": [Function],
                   "formatDateToParts": [Function],
@@ -1162,6 +1194,7 @@ exports[`plugins/ChannelHeaderPlug should match snapshot with six extended compo
                   "locale": "en",
                   "messages": Object {},
                   "onError": [Function],
+                  "onWarn": [Function],
                   "textComponent": "span",
                   "timeZone": "Etc/UTC",
                   "wrapRichTextChunksInFragment": undefined,
@@ -1243,9 +1276,11 @@ exports[`plugins/ChannelHeaderPlug should match snapshot with six extended compo
               id="pluginTooltip"
               intl={
                 Object {
+                  "$t": [Function],
                   "defaultFormats": Object {},
                   "defaultLocale": "en",
                   "defaultRichTextElements": undefined,
+                  "fallbackOnEmptyString": true,
                   "formatDate": [Function],
                   "formatDateTimeRange": [Function],
                   "formatDateToParts": [Function],
@@ -1272,6 +1307,7 @@ exports[`plugins/ChannelHeaderPlug should match snapshot with six extended compo
                   "locale": "en",
                   "messages": Object {},
                   "onError": [Function],
+                  "onWarn": [Function],
                   "textComponent": "span",
                   "timeZone": "Etc/UTC",
                   "wrapRichTextChunksInFragment": undefined,
@@ -1353,9 +1389,11 @@ exports[`plugins/ChannelHeaderPlug should match snapshot with six extended compo
               id="pluginTooltip"
               intl={
                 Object {
+                  "$t": [Function],
                   "defaultFormats": Object {},
                   "defaultLocale": "en",
                   "defaultRichTextElements": undefined,
+                  "fallbackOnEmptyString": true,
                   "formatDate": [Function],
                   "formatDateTimeRange": [Function],
                   "formatDateToParts": [Function],
@@ -1382,6 +1420,7 @@ exports[`plugins/ChannelHeaderPlug should match snapshot with six extended compo
                   "locale": "en",
                   "messages": Object {},
                   "onError": [Function],
+                  "onWarn": [Function],
                   "textComponent": "span",
                   "timeZone": "Etc/UTC",
                   "wrapRichTextChunksInFragment": undefined,
@@ -1463,9 +1502,11 @@ exports[`plugins/ChannelHeaderPlug should match snapshot with six extended compo
               id="pluginTooltip"
               intl={
                 Object {
+                  "$t": [Function],
                   "defaultFormats": Object {},
                   "defaultLocale": "en",
                   "defaultRichTextElements": undefined,
+                  "fallbackOnEmptyString": true,
                   "formatDate": [Function],
                   "formatDateTimeRange": [Function],
                   "formatDateToParts": [Function],
@@ -1492,6 +1533,7 @@ exports[`plugins/ChannelHeaderPlug should match snapshot with six extended compo
                   "locale": "en",
                   "messages": Object {},
                   "onError": [Function],
+                  "onWarn": [Function],
                   "textComponent": "span",
                   "timeZone": "Etc/UTC",
                   "wrapRichTextChunksInFragment": undefined,
@@ -1573,9 +1615,11 @@ exports[`plugins/ChannelHeaderPlug should match snapshot with six extended compo
               id="pluginTooltip"
               intl={
                 Object {
+                  "$t": [Function],
                   "defaultFormats": Object {},
                   "defaultLocale": "en",
                   "defaultRichTextElements": undefined,
+                  "fallbackOnEmptyString": true,
                   "formatDate": [Function],
                   "formatDateTimeRange": [Function],
                   "formatDateToParts": [Function],
@@ -1602,6 +1646,7 @@ exports[`plugins/ChannelHeaderPlug should match snapshot with six extended compo
                   "locale": "en",
                   "messages": Object {},
                   "onError": [Function],
+                  "onWarn": [Function],
                   "textComponent": "span",
                   "timeZone": "Etc/UTC",
                   "wrapRichTextChunksInFragment": undefined,
@@ -1683,9 +1728,11 @@ exports[`plugins/ChannelHeaderPlug should match snapshot with six extended compo
               id="pluginTooltip"
               intl={
                 Object {
+                  "$t": [Function],
                   "defaultFormats": Object {},
                   "defaultLocale": "en",
                   "defaultRichTextElements": undefined,
+                  "fallbackOnEmptyString": true,
                   "formatDate": [Function],
                   "formatDateTimeRange": [Function],
                   "formatDateToParts": [Function],
@@ -1712,6 +1759,7 @@ exports[`plugins/ChannelHeaderPlug should match snapshot with six extended compo
                   "locale": "en",
                   "messages": Object {},
                   "onError": [Function],
+                  "onWarn": [Function],
                   "textComponent": "span",
                   "timeZone": "Etc/UTC",
                   "wrapRichTextChunksInFragment": undefined,
@@ -1793,9 +1841,11 @@ exports[`plugins/ChannelHeaderPlug should match snapshot with six extended compo
               id="pluginTooltip"
               intl={
                 Object {
+                  "$t": [Function],
                   "defaultFormats": Object {},
                   "defaultLocale": "en",
                   "defaultRichTextElements": undefined,
+                  "fallbackOnEmptyString": true,
                   "formatDate": [Function],
                   "formatDateTimeRange": [Function],
                   "formatDateToParts": [Function],
@@ -1822,6 +1872,7 @@ exports[`plugins/ChannelHeaderPlug should match snapshot with six extended compo
                   "locale": "en",
                   "messages": Object {},
                   "onError": [Function],
+                  "onWarn": [Function],
                   "textComponent": "span",
                   "timeZone": "Etc/UTC",
                   "wrapRichTextChunksInFragment": undefined,
@@ -1903,9 +1954,11 @@ exports[`plugins/ChannelHeaderPlug should match snapshot with six extended compo
               id="pluginTooltip"
               intl={
                 Object {
+                  "$t": [Function],
                   "defaultFormats": Object {},
                   "defaultLocale": "en",
                   "defaultRichTextElements": undefined,
+                  "fallbackOnEmptyString": true,
                   "formatDate": [Function],
                   "formatDateTimeRange": [Function],
                   "formatDateToParts": [Function],
@@ -1932,6 +1985,7 @@ exports[`plugins/ChannelHeaderPlug should match snapshot with six extended compo
                   "locale": "en",
                   "messages": Object {},
                   "onError": [Function],
+                  "onWarn": [Function],
                   "textComponent": "span",
                   "timeZone": "Etc/UTC",
                   "wrapRichTextChunksInFragment": undefined,
@@ -2013,9 +2067,11 @@ exports[`plugins/ChannelHeaderPlug should match snapshot with six extended compo
               id="pluginTooltip"
               intl={
                 Object {
+                  "$t": [Function],
                   "defaultFormats": Object {},
                   "defaultLocale": "en",
                   "defaultRichTextElements": undefined,
+                  "fallbackOnEmptyString": true,
                   "formatDate": [Function],
                   "formatDateTimeRange": [Function],
                   "formatDateToParts": [Function],
@@ -2042,6 +2098,7 @@ exports[`plugins/ChannelHeaderPlug should match snapshot with six extended compo
                   "locale": "en",
                   "messages": Object {},
                   "onError": [Function],
+                  "onWarn": [Function],
                   "textComponent": "span",
                   "timeZone": "Etc/UTC",
                   "wrapRichTextChunksInFragment": undefined,
@@ -2123,9 +2180,11 @@ exports[`plugins/ChannelHeaderPlug should match snapshot with six extended compo
               id="pluginTooltip"
               intl={
                 Object {
+                  "$t": [Function],
                   "defaultFormats": Object {},
                   "defaultLocale": "en",
                   "defaultRichTextElements": undefined,
+                  "fallbackOnEmptyString": true,
                   "formatDate": [Function],
                   "formatDateTimeRange": [Function],
                   "formatDateToParts": [Function],
@@ -2152,6 +2211,7 @@ exports[`plugins/ChannelHeaderPlug should match snapshot with six extended compo
                   "locale": "en",
                   "messages": Object {},
                   "onError": [Function],
+                  "onWarn": [Function],
                   "textComponent": "span",
                   "timeZone": "Etc/UTC",
                   "wrapRichTextChunksInFragment": undefined,

webapp/channels/src/plugins/mobile_channel_header_plug/__snapshots__/mobile_channel_header_plug.test.tsx.snap

@@ -16,9 +16,11 @@ exports[`plugins/MobileChannelHeaderPlug should match snapshot with no binding,
   components={Array []}
   intl={
     Object {
+      "$t": [Function],
       "defaultFormats": Object {},
       "defaultLocale": "en",
       "defaultRichTextElements": undefined,
+      "fallbackOnEmptyString": true,
       "formatDate": [Function],
       "formatDateTimeRange": [Function],
       "formatDateToParts": [Function],
@@ -45,6 +47,7 @@ exports[`plugins/MobileChannelHeaderPlug should match snapshot with no binding,
       "locale": "en",
       "messages": Object {},
       "onError": [Function],
+      "onWarn": [Function],
       "textComponent": "span",
       "timeZone": "Etc/UTC",
     }
@@ -70,9 +73,11 @@ exports[`plugins/MobileChannelHeaderPlug should match snapshot with no bindings
   components={Array []}
   intl={
     Object {
+      "$t": [Function],
       "defaultFormats": Object {},
       "defaultLocale": "en",
       "defaultRichTextElements": undefined,
+      "fallbackOnEmptyString": true,
       "formatDate": [Function],
       "formatDateTimeRange": [Function],
       "formatDateToParts": [Function],
@@ -99,6 +104,7 @@ exports[`plugins/MobileChannelHeaderPlug should match snapshot with no bindings
       "locale": "en",
       "messages": Object {},
       "onError": [Function],
+      "onWarn": [Function],
       "textComponent": "span",
       "timeZone": "Etc/UTC",
     }
@@ -124,9 +130,11 @@ exports[`plugins/MobileChannelHeaderPlug should match snapshot with no extended
   components={Array []}
   intl={
     Object {
+      "$t": [Function],
       "defaultFormats": Object {},
       "defaultLocale": "en",
       "defaultRichTextElements": undefined,
+      "fallbackOnEmptyString": true,
       "formatDate": [Function],
       "formatDateTimeRange": [Function],
       "formatDateToParts": [Function],
@@ -153,6 +161,7 @@ exports[`plugins/MobileChannelHeaderPlug should match snapshot with no extended
       "locale": "en",
       "messages": Object {},
       "onError": [Function],
+      "onWarn": [Function],
       "textComponent": "span",
       "timeZone": "Etc/UTC",
     }
@@ -178,9 +187,11 @@ exports[`plugins/MobileChannelHeaderPlug should match snapshot with no extended
   components={Array []}
   intl={
     Object {
+      "$t": [Function],
       "defaultFormats": Object {},
       "defaultLocale": "en",
       "defaultRichTextElements": undefined,
+      "fallbackOnEmptyString": true,
       "formatDate": [Function],
       "formatDateTimeRange": [Function],
       "formatDateToParts": [Function],
@@ -207,6 +218,7 @@ exports[`plugins/MobileChannelHeaderPlug should match snapshot with no extended
       "locale": "en",
       "messages": Object {},
       "onError": [Function],
+      "onWarn": [Function],
       "textComponent": "span",
       "timeZone": "Etc/UTC",
     }
@@ -306,9 +318,11 @@ exports[`plugins/MobileChannelHeaderPlug should match snapshot with one binding,
   components={Array []}
   intl={
     Object {
+      "$t": [Function],
       "defaultFormats": Object {},
       "defaultLocale": "en",
       "defaultRichTextElements": undefined,
+      "fallbackOnEmptyString": true,
       "formatDate": [Function],
       "formatDateTimeRange": [Function],
       "formatDateToParts": [Function],
@@ -335,6 +349,7 @@ exports[`plugins/MobileChannelHeaderPlug should match snapshot with one binding,
       "locale": "en",
       "messages": Object {},
       "onError": [Function],
+      "onWarn": [Function],
       "textComponent": "span",
       "timeZone": "Etc/UTC",
     }
@@ -454,9 +469,11 @@ exports[`plugins/MobileChannelHeaderPlug should match snapshot with one extended
   }
   intl={
     Object {
+      "$t": [Function],
       "defaultFormats": Object {},
       "defaultLocale": "en",
       "defaultRichTextElements": undefined,
+      "fallbackOnEmptyString": true,
       "formatDate": [Function],
       "formatDateTimeRange": [Function],
       "formatDateToParts": [Function],
@@ -483,6 +500,7 @@ exports[`plugins/MobileChannelHeaderPlug should match snapshot with one extended
       "locale": "en",
       "messages": Object {},
       "onError": [Function],
+      "onWarn": [Function],
       "textComponent": "span",
       "timeZone": "Etc/UTC",
     }
@@ -547,9 +565,11 @@ exports[`plugins/MobileChannelHeaderPlug should match snapshot with one extended
   }
   intl={
     Object {
+      "$t": [Function],
       "defaultFormats": Object {},
       "defaultLocale": "en",
       "defaultRichTextElements": undefined,
+      "fallbackOnEmptyString": true,
       "formatDate": [Function],
       "formatDateTimeRange": [Function],
       "formatDateToParts": [Function],
@@ -576,6 +596,7 @@ exports[`plugins/MobileChannelHeaderPlug should match snapshot with one extended
       "locale": "en",
       "messages": Object {},
       "onError": [Function],
+      "onWarn": [Function],
       "textComponent": "span",
       "timeZone": "Etc/UTC",
     }
@@ -642,9 +663,11 @@ exports[`plugins/MobileChannelHeaderPlug should match snapshot with one extended
   }
   intl={
     Object {
+      "$t": [Function],
       "defaultFormats": Object {},
       "defaultLocale": "en",
       "defaultRichTextElements": undefined,
+      "fallbackOnEmptyString": true,
       "formatDate": [Function],
       "formatDateTimeRange": [Function],
       "formatDateToParts": [Function],
@@ -671,6 +694,7 @@ exports[`plugins/MobileChannelHeaderPlug should match snapshot with one extended
       "locale": "en",
       "messages": Object {},
       "onError": [Function],
+      "onWarn": [Function],
       "textComponent": "span",
       "timeZone": "Etc/UTC",
     }
@@ -723,9 +747,11 @@ exports[`plugins/MobileChannelHeaderPlug should match snapshot with two bindings
   components={Array []}
   intl={
     Object {
+      "$t": [Function],
       "defaultFormats": Object {},
       "defaultLocale": "en",
       "defaultRichTextElements": undefined,
+      "fallbackOnEmptyString": true,
       "formatDate": [Function],
       "formatDateTimeRange": [Function],
       "formatDateToParts": [Function],
@@ -752,6 +778,7 @@ exports[`plugins/MobileChannelHeaderPlug should match snapshot with two bindings
       "locale": "en",
       "messages": Object {},
       "onError": [Function],
+      "onWarn": [Function],
       "textComponent": "span",
       "timeZone": "Etc/UTC",
     }
@@ -876,9 +903,11 @@ exports[`plugins/MobileChannelHeaderPlug should match snapshot with two extended
   }
   intl={
     Object {
+      "$t": [Function],
       "defaultFormats": Object {},
       "defaultLocale": "en",
       "defaultRichTextElements": undefined,
+      "fallbackOnEmptyString": true,
       "formatDate": [Function],
       "formatDateTimeRange": [Function],
       "formatDateToParts": [Function],
@@ -905,6 +934,7 @@ exports[`plugins/MobileChannelHeaderPlug should match snapshot with two extended
       "locale": "en",
       "messages": Object {},
       "onError": [Function],
+      "onWarn": [Function],
       "textComponent": "span",
       "timeZone": "Etc/UTC",
     }

webapp/package.json

@@ -16,12 +16,16 @@
     "check-types": "npm run check-types --workspaces --if-present",
     "clean": "npm run clean --workspaces --if-present"
   },
+  "dependencies": {
+    "react-intl": "6.3.2"
+  },
   "devDependencies": {
     "blessed": "0.1.81",
     "chalk": "4.1.2",
     "concurrently": "7.6.0",
     "cross-env": "7.0.3",
     "eslint": "8.37.0",
+    "eslint-plugin-formatjs": "4.9.1",
     "strip-ansi": "6.0.1"
   },
   "workspaces": [

webapp/platform/components/package.json

@@ -7,7 +7,7 @@
   "scripts": {
     "build": "rollup -c",
     "run": "rollup -c --watch",
-    "clean": "rm -rf dist node_modules tsconfig.tsbuildinfo"
+    "clean": "rm -rf dist node_modules tsconfig.tsbuildinfo .rollup.cache"
   },
   "devDependencies": {
     "@babel/cli": "^7.17.6",
@@ -53,7 +53,7 @@
     "react": "^17.0.2",
     "react-bootstrap": "github:mattermost/react-bootstrap#d821e2b1db1059bd36112d7587fd1b0912b27626",
     "react-dom": "^17.0.2",
-    "react-intl": "^5.20.0",
+    "react-intl": "^6.3.2",
     "shallow-equals": "^1.0.0",
     "styled-components": "^5.3.5",
     "tippy.js": "^6.3.7"

webapp/platform/types/package.json

@@ -15,7 +15,9 @@
   },
   "typesVersions": {
     ">=3.1": {
-      "*": ["./lib/*.d.ts"]
+      "*": [
+        "./lib/*.d.ts"
+      ]
     }
   },
   "repository": {

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}