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.',