From 610a756e7f0f5e697dd28a245db7f2f11e1c0bb6 Mon Sep 17 00:00:00 2001
From: Domendra Singh Komra <142248999+azadDsync@users.noreply.github.com>
Date: Wed, 23 Oct 2024 13:57:01 +0530
Subject: [PATCH] [MM-60820] Replace FormattedMarkdownMessage in
 'webapp/channels/src/components/integrations/confirm_integration/confirm_integration.tsx'
 with FormattedMessage (#28667)

---
 .../confirm_integration.test.tsx.snap         |  50 ++++---
 .../confirm_integration.tsx                   | 122 ++++++++++++------
 webapp/channels/src/i18n/en.json              |  24 ++--
 3 files changed, 122 insertions(+), 74 deletions(-)

diff --git a/webapp/channels/src/components/integrations/confirm_integration/__snapshots__/confirm_integration.test.tsx.snap b/webapp/channels/src/components/integrations/confirm_integration/__snapshots__/confirm_integration.test.tsx.snap
index 6c43e3fa63..2c67ca0351 100644
--- a/webapp/channels/src/components/integrations/confirm_integration/__snapshots__/confirm_integration.test.tsx.snap
+++ b/webapp/channels/src/components/integrations/confirm_integration/__snapshots__/confirm_integration.test.tsx.snap
@@ -46,11 +46,12 @@ exports[`components/integrations/ConfirmIntegration should match snapshot, comma
     <p
       className="word-break--all"
     >
-      <FormattedMarkdownMessage
-        defaultMessage="**Token**: {token}"
+      <MemoizedFormattedMessage
+        defaultMessage="<b>Token</b>: {token}"
         id="add_command.token"
         values={
           Object {
+            "b": [Function],
             "token": "jb6oyqh95irpbx8fo9zmndkp1r",
           }
         }
@@ -122,11 +123,12 @@ exports[`components/integrations/ConfirmIntegration should match snapshot, incom
     <p
       className="word-break--all"
     >
-      <FormattedMarkdownMessage
-        defaultMessage="**URL**: {url}"
+      <MemoizedFormattedMessage
+        defaultMessage="<b>URL</b>: {url}"
         id="add_incoming_webhook.url"
         values={
           Object {
+            "b": [Function],
             "url": "\`http://localhost:8065/hooks/r5tpgt4iepf45jt768jz84djic\`",
           }
         }
@@ -200,11 +202,12 @@ exports[`components/integrations/ConfirmIntegration should match snapshot, oauth
     <p
       key="add_oauth_app.clientId"
     >
-      <FormattedMarkdownMessage
-        defaultMessage="**Client ID**: {id}"
+      <MemoizedFormattedMessage
+        defaultMessage="<b>Client ID</b>: {id}"
         id="add_oauth_app.clientId"
         values={
           Object {
+            "b": [Function],
             "id": "r5tpgt4iepf45jt768jz84djic",
           }
         }
@@ -219,11 +222,12 @@ exports[`components/integrations/ConfirmIntegration should match snapshot, oauth
         value="r5tpgt4iepf45jt768jz84djic"
       />
       <br />
-      <FormattedMarkdownMessage
-        defaultMessage="**Client Secret**: {secret}"
+      <MemoizedFormattedMessage
+        defaultMessage="<b>Client Secret</b>: {secret}"
         id="add_oauth_app.clientSecret"
         values={
           Object {
+            "b": [Function],
             "secret": "<==secret==>",
           }
         }
@@ -249,11 +253,12 @@ exports[`components/integrations/ConfirmIntegration should match snapshot, oauth
     <p
       className="word-break--all"
     >
-      <FormattedMarkdownMessage
-        defaultMessage="**URL(s)**: {url}"
+      <MemoizedFormattedMessage
+        defaultMessage="<b>URL(s)</b>: {url}"
         id="add_oauth_app.url"
         values={
           Object {
+            "b": [Function],
             "url": "https://someCallback, https://anotherCallback",
           }
         }
@@ -324,11 +329,12 @@ exports[`components/integrations/ConfirmIntegration should match snapshot, outgo
     <p
       className="word-break--all"
     >
-      <FormattedMarkdownMessage
-        defaultMessage="**Token**: {token}"
+      <MemoizedFormattedMessage
+        defaultMessage="<b>Token</b>: {token}"
         id="add_outgoing_webhook.token"
         values={
           Object {
+            "b": [Function],
             "token": "jb6oyqh95irpbx8fo9zmndkp1r",
           }
         }
@@ -402,21 +408,23 @@ exports[`components/integrations/ConfirmIntegration should match snapshot, outgo
     <p
       key="add_outgoing_oauth_connection.clientId"
     >
-      <FormattedMarkdownMessage
-        defaultMessage="**Client ID**: {id}"
+      <MemoizedFormattedMessage
+        defaultMessage="<b>Client ID</b>: {id}"
         id="add_outgoing_oauth_connection.clientId"
         values={
           Object {
+            "b": [Function],
             "id": "someid",
           }
         }
       />
       <br />
-      <FormattedMarkdownMessage
-        defaultMessage="**Client Secret**: \\\\*\\\\*\\\\*\\\\*\\\\*\\\\*\\\\*\\\\*"
+      <MemoizedFormattedMessage
+        defaultMessage="<b>Client Secret</b>: \\\\*\\\\*\\\\*\\\\*\\\\*\\\\*\\\\*\\\\*"
         id="add_outgoing_oauth_connection.clientSecret"
         values={
           Object {
+            "b": [Function],
             "secret": "",
           }
         }
@@ -425,11 +433,12 @@ exports[`components/integrations/ConfirmIntegration should match snapshot, outgo
     <p
       className="word-break--all"
     >
-      <FormattedMarkdownMessage
-        defaultMessage="**Token URL**: \`{url}\`"
+      <MemoizedFormattedMessage
+        defaultMessage="<b>Token URL</b>: \`{url}\`"
         id="add_outgoing_oauth_connection.token_url"
         values={
           Object {
+            "b": [Function],
             "url": "https://tokenurl.com",
           }
         }
@@ -438,11 +447,12 @@ exports[`components/integrations/ConfirmIntegration should match snapshot, outgo
     <p
       className="word-break--all"
     >
-      <FormattedMarkdownMessage
-        defaultMessage="**Audience URL(s)**: \`{url}\`"
+      <MemoizedFormattedMessage
+        defaultMessage="<b>Audience URL(s)</b>: \`{url}\`"
         id="add_outgoing_oauth_connection.audience_urls"
         values={
           Object {
+            "b": [Function],
             "url": "https://myaudience.com",
           }
         }
diff --git a/webapp/channels/src/components/integrations/confirm_integration/confirm_integration.tsx b/webapp/channels/src/components/integrations/confirm_integration/confirm_integration.tsx
index b4c5d8f620..4eaf1c9100 100644
--- a/webapp/channels/src/components/integrations/confirm_integration/confirm_integration.tsx
+++ b/webapp/channels/src/components/integrations/confirm_integration/confirm_integration.tsx
@@ -13,7 +13,6 @@ import type {IDMappedObjects} from '@mattermost/types/utilities';
 import BackstageHeader from 'components/backstage/components/backstage_header';
 import CopyText from 'components/copy_text';
 import ExternalLink from 'components/external_link';
-import FormattedMarkdownMessage from 'components/formatted_markdown_message';
 
 import {Constants, DeveloperLinks, ErrorPageTypes} from 'utils/constants';
 import {getSiteURL} from 'utils/url';
@@ -65,7 +64,7 @@ const ConfirmIntegration = ({team, location, commands, oauthApps, incomingHooks,
 
         headerText = (
             <FormattedMessage
-                id={'slash_commands.header'}
+                id='slash_commands.header'
                 defaultMessage='Slash Commands'
             />
         );
@@ -89,10 +88,13 @@ const ConfirmIntegration = ({team, location, commands, oauthApps, incomingHooks,
         );
         tokenText = (
             <p className='word-break--all'>
-                <FormattedMarkdownMessage
+                <FormattedMessage
                     id='add_command.token'
-                    defaultMessage='**Token**: {token}'
-                    values={{token: commandToken}}
+                    defaultMessage='<b>Token</b>: {token}'
+                    values={{
+                        token: commandToken,
+                        b: (chunks: string) => <b>{chunks}</b>,
+                    }}
                 />
                 <CopyText value={commandToken}/>
             </p>
@@ -126,10 +128,13 @@ const ConfirmIntegration = ({team, location, commands, oauthApps, incomingHooks,
         );
         tokenText = (
             <p className='word-break--all'>
-                <FormattedMarkdownMessage
+                <FormattedMessage
                     id='add_incoming_webhook.url'
-                    defaultMessage='**URL**: {url}'
-                    values={{url: '`' + incomingHookToken + '`'}}
+                    defaultMessage='<b>URL</b>: {url}'
+                    values={{
+                        url: '`' + incomingHookToken + '`',
+                        b: (chunks: string) => <b>{chunks}</b>,
+                    }}
                 />
                 <CopyText value={incomingHookToken}/>
             </p>
@@ -163,10 +168,13 @@ const ConfirmIntegration = ({team, location, commands, oauthApps, incomingHooks,
         );
         tokenText = (
             <p className='word-break--all'>
-                <FormattedMarkdownMessage
+                <FormattedMessage
                     id='add_outgoing_webhook.token'
-                    defaultMessage='**Token**: {token}'
-                    values={{token: outgoingHookToken}}
+                    defaultMessage='<b>Token</b>: {token}'
+                    values={{
+                        token: outgoingHookToken,
+                        b: (chunks: string) => <b>{chunks}</b>,
+                    }}
                 />
                 <CopyText value={outgoingHookToken}/>
             </p>
@@ -203,10 +211,13 @@ const ConfirmIntegration = ({team, location, commands, oauthApps, incomingHooks,
         );
         helpText.push(
             <p key='add_oauth_app.clientId'>
-                <FormattedMarkdownMessage
+                <FormattedMessage
                     id='add_oauth_app.clientId'
-                    defaultMessage='**Client ID**: {id}'
-                    values={{id: oauthAppToken}}
+                    defaultMessage='<b>Client ID</b>: {id}'
+                    values={{
+                        id: oauthAppToken,
+                        b: (chunks: string) => <b>{chunks}</b>,
+                    }}
                 />
                 <CopyText
                     tooltip={
@@ -218,10 +229,13 @@ const ConfirmIntegration = ({team, location, commands, oauthApps, incomingHooks,
                     value={oauthAppToken}
                 />
                 <br/>
-                <FormattedMarkdownMessage
+                <FormattedMessage
                     id='add_oauth_app.clientSecret'
-                    defaultMessage='**Client Secret**: {secret}'
-                    values={{secret: oauthAppSecret}}
+                    defaultMessage='<b>Client Secret</b>: {secret}'
+                    values={{
+                        secret: oauthAppSecret,
+                        b: (chunks: string) => <b>{chunks}</b>,
+                    }}
                 />
                 <CopyText
                     tooltip={
@@ -246,10 +260,13 @@ const ConfirmIntegration = ({team, location, commands, oauthApps, incomingHooks,
 
         tokenText = (
             <p className='word-break--all'>
-                <FormattedMarkdownMessage
+                <FormattedMessage
                     id='add_oauth_app.url'
-                    defaultMessage='**URL(s)**: {url}'
-                    values={{url: oauthApp.callback_urls.join(', ')}}
+                    defaultMessage='<b>URL(s)</b>: {url}'
+                    values={{
+                        url: oauthApp.callback_urls.join(', '),
+                        b: (chunks: string) => <b>{chunks}</b>,
+                    }}
                 />
             </p>
         );
@@ -287,16 +304,22 @@ const ConfirmIntegration = ({team, location, commands, oauthApps, incomingHooks,
         );
         helpText.push(
             <p key='add_outgoing_oauth_connection.clientId'>
-                <FormattedMarkdownMessage
+                <FormattedMessage
                     id='add_outgoing_oauth_connection.clientId'
-                    defaultMessage='**Client ID**: {id}'
-                    values={{id: clientId}}
+                    defaultMessage='<b>Client ID</b>: {id}'
+                    values={{
+                        id: clientId,
+                        b: (chunks: string) => <b>{chunks}</b>,
+                    }}
                 />
                 <br/>
-                <FormattedMarkdownMessage
+                <FormattedMessage
                     id='add_outgoing_oauth_connection.clientSecret'
-                    defaultMessage='**Client Secret**: \*\*\*\*\*\*\*\*'
-                    values={{secret: clientSecret}}
+                    defaultMessage='<b>Client Secret</b>: \*\*\*\*\*\*\*\*'
+                    values={{
+                        secret: clientSecret,
+                        b: (chunks: string) => <b>{chunks}</b>,
+                    }}
                 />
             </p>,
         );
@@ -304,10 +327,13 @@ const ConfirmIntegration = ({team, location, commands, oauthApps, incomingHooks,
         if (outgoingOAuthConnection.grant_type === 'password') {
             helpText.push(
                 <p key='add_outgoing_oauth_connection.username'>
-                    <FormattedMarkdownMessage
+                    <FormattedMessage
                         id='add_outgoing_oauth_connection.username'
-                        defaultMessage='**Username**: {username}'
-                        values={{username}}
+                        defaultMessage='<b>Username</b>: {username}'
+                        values={{
+                            username,
+                            b: (chunks: string) => <b>{chunks}</b>,
+                        }}
                     />
                     <CopyText
                         tooltip={
@@ -319,10 +345,13 @@ const ConfirmIntegration = ({team, location, commands, oauthApps, incomingHooks,
                         value={username || ''}
                     />
                     <br/>
-                    <FormattedMarkdownMessage
+                    <FormattedMessage
                         id='add_outgoing_oauth_connection.password'
-                        defaultMessage='**Password**: {password}'
-                        values={{password}}
+                        defaultMessage='<b>Password</b>: {password}'
+                        values={{
+                            password,
+                            b: (chunks: string) => <b>{chunks}</b>,
+                        }}
                     />
                 </p>,
             );
@@ -331,17 +360,23 @@ const ConfirmIntegration = ({team, location, commands, oauthApps, incomingHooks,
         tokenText = (
             <>
                 <p className='word-break--all'>
-                    <FormattedMarkdownMessage
+                    <FormattedMessage
                         id='add_outgoing_oauth_connection.token_url'
-                        defaultMessage='**Token URL**: `{url}`'
-                        values={{url: outgoingOAuthConnection.oauth_token_url}}
+                        defaultMessage='<b>Token URL</b>: `{url}`'
+                        values={{
+                            url: outgoingOAuthConnection.oauth_token_url,
+                            b: (chunks: string) => <b>{chunks}</b>,
+                        }}
                     />
                 </p>
                 <p className='word-break--all'>
-                    <FormattedMarkdownMessage
+                    <FormattedMessage
                         id='add_outgoing_oauth_connection.audience_urls'
-                        defaultMessage='**Audience URL(s)**: `{url}`'
-                        values={{url: outgoingOAuthConnection.audiences.join(', ')}}
+                        defaultMessage='<b>Audience URL(s)</b>: `{url}`'
+                        values={{
+                            url: outgoingOAuthConnection.audiences.join(', '),
+                            b: (chunks: string) => <b>{chunks}</b>,
+                        }}
                     />
                 </p>
             </>
@@ -362,7 +397,7 @@ const ConfirmIntegration = ({team, location, commands, oauthApps, incomingHooks,
                     defaultMessage='Your bot account **{botname}** has been created successfully. Please use the following access token to connect to the bot (see [documentation](https://mattermost.com/pl/default-bot-accounts) for further details).'
                     values={{
                         botname: bot.display_name || bot.username,
-                        strong: (msg: string) => <strong>{msg}</strong>,
+                        b: (msg: string) => <b>{msg}</b>,
                         link: (msg: string) => (
                             <ExternalLink
                                 href='https://mattermost.com/pl/default-bot-accounts'
@@ -377,10 +412,13 @@ const ConfirmIntegration = ({team, location, commands, oauthApps, incomingHooks,
         );
         tokenText = (
             <p className='word-break--all'>
-                <FormattedMarkdownMessage
+                <FormattedMessage
                     id='add_outgoing_webhook.token'
-                    defaultMessage='**Token**: {token}'
-                    values={{token: botToken}}
+                    defaultMessage='<b>Token</b>: {token}'
+                    values={{
+                        token: botToken,
+                        b: (chunks: string) => <b>{chunks}</b>,
+                    }}
                 />
                 <CopyText value={botToken}/>
                 <br/>
diff --git a/webapp/channels/src/i18n/en.json b/webapp/channels/src/i18n/en.json
index f34efb502c..40869eb61a 100644
--- a/webapp/channels/src/i18n/en.json
+++ b/webapp/channels/src/i18n/en.json
@@ -90,7 +90,7 @@
   "add_command.outgoing_oauth_connections.help_text": "You can connect commands to <link>outgoing OAuth connections</link>.",
   "add_command.save": "Save",
   "add_command.saving": "Saving...",
-  "add_command.token": "**Token**: {token}",
+  "add_command.token": "<b>Token</b>: {token}",
   "add_command.trigger": "Command Trigger Word",
   "add_command.trigger.help": "Specify a trigger word that is not a built-in command, does not contain spaces, and does not begin with the slash character.",
   "add_command.trigger.helpExamples": "Examples: client, employee, patient, weather",
@@ -143,13 +143,13 @@
   "add_incoming_webhook.icon_url.help": "Enter the URL of a .png or .jpg file for the profile picture of this integration when posting. The file should be at least 128 pixels by 128 pixels. If left blank, the profile picture specified by the webhook creator is used.",
   "add_incoming_webhook.save": "Save",
   "add_incoming_webhook.saving": "Saving...",
-  "add_incoming_webhook.url": "**URL**: {url}",
+  "add_incoming_webhook.url": "<b>URL</b>: {url}",
   "add_incoming_webhook.username": "Username",
   "add_incoming_webhook.username.help": "Specify the username this integration will post as. Usernames must be in lowercase, be up to 22 characters, and can contain numbers and the symbols \"-\", \"_\", and \".\" . If left blank, the name specified by the webhook creator is used.",
   "add_oauth_app.callbackUrls.help": "Specify the URIs to which the service redirects users after accepting or denying them authorization to your application, and handles authorization codes or access tokens. It must start with http:// or https://.",
   "add_oauth_app.callbackUrlsRequired": "One or more callback URLs are required",
-  "add_oauth_app.clientId": "**Client ID**: {id}",
-  "add_oauth_app.clientSecret": "**Client Secret**: {secret}",
+  "add_oauth_app.clientId": "<b>Client ID</b>: {id}",
+  "add_oauth_app.clientSecret": "<b>Client Secret</b>: {secret}",
   "add_oauth_app.description.help": "Describe your OAuth 2.0 application.",
   "add_oauth_app.descriptionRequired": "Description for the OAuth 2.0 application is required.",
   "add_oauth_app.doneHelp": "Your OAuth 2.0 application is set up. Please use the following Client ID and Client Secret when requesting authorization for your application (details at <link>oAuth 2.0 Applications</link>).",
@@ -161,9 +161,9 @@
   "add_oauth_app.name.help": "Specify the display name of your OAuth 2.0 application. You can use up to 64 characters.",
   "add_oauth_app.nameRequired": "Name for the OAuth 2.0 application is required.",
   "add_oauth_app.trusted.help": "If true, the OAuth 2.0 application is considered trusted by the Mattermost server and does not require the user to accept authorization. If false, a window opens to ask the user to accept or deny the authorization.",
-  "add_oauth_app.url": "**URL(s)**: {url}",
+  "add_oauth_app.url": "<b>URL(s)</b>: {url}",
   "add_outgoing_oauth_connection.add": "Add",
-  "add_outgoing_oauth_connection.audience_urls": "**Audience URL(s)**: `{url}`",
+  "add_outgoing_oauth_connection.audience_urls": "<b>Audience URL(s)</b>: `{url}`",
   "add_outgoing_oauth_connection.audienceUrls.help": "The URLs which will receive requests with the OAuth token, e.g. your custom slash command handler endpoint. Must be a valid URL and start with http:// or https://.",
   "add_outgoing_oauth_connection.audienceUrls.label": "Audience URLs (One Per Line)",
   "add_outgoing_oauth_connection.audienceUrls.required": "One or more audience URLs are required.",
@@ -174,8 +174,8 @@
   "add_outgoing_oauth_connection.client_secret.help": "Specify the Client Secret for your OAuth connection.",
   "add_outgoing_oauth_connection.client_secret.label": "Client Secret",
   "add_outgoing_oauth_connection.client_secret.required": "Client Secret for the OAuth connection is required.",
-  "add_outgoing_oauth_connection.clientId": "**Client ID**: {id}",
-  "add_outgoing_oauth_connection.clientSecret": "**Client Secret**: \\*\\*\\*\\*\\*\\*\\*\\*",
+  "add_outgoing_oauth_connection.clientId": "<b>Client ID</b>: {id}",
+  "add_outgoing_oauth_connection.clientSecret": "<b>Client Secret</b>: \\*\\*\\*\\*\\*\\*\\*\\*",
   "add_outgoing_oauth_connection.confirm_save": "Save Outgoing OAuth Connection",
   "add_outgoing_oauth_connection.connected": "Connected to \"{connectionName}\"",
   "add_outgoing_oauth_connection.documentation_link": "Get help with <link>configuring outgoing OAuth connections</link>.",
@@ -189,13 +189,13 @@
   "add_outgoing_oauth_connection.oauth_token_url.help": "Specify the OAuth Token URL for your OAuth connection.",
   "add_outgoing_oauth_connection.oauth_token_url.label": "OAuth Token URL",
   "add_outgoing_oauth_connection.oauth_token_url.required": "OAuth Token URL for the OAuth connection is required.",
-  "add_outgoing_oauth_connection.password": "**Password**: {password}",
+  "add_outgoing_oauth_connection.password": "<b>Password</b>: {password}",
   "add_outgoing_oauth_connection.save": "Save",
   "add_outgoing_oauth_connection.save_anyway": "Save anyway",
   "add_outgoing_oauth_connection.save_without_validation_warning": "This connection has not been validated, Do you want to save anyway?",
   "add_outgoing_oauth_connection.saving": "Saving...",
-  "add_outgoing_oauth_connection.token_url": "**Token URL**: `{url}`",
-  "add_outgoing_oauth_connection.username": "**Username**: {username}",
+  "add_outgoing_oauth_connection.token_url": "<b>Token URL</b>: `{url}`",
+  "add_outgoing_oauth_connection.username": "<b>Username</b>: {username}",
   "add_outgoing_oauth_connection.validate": "Validate Connection",
   "add_outgoing_oauth_connection.validated_connection": "Validated connection",
   "add_outgoing_oauth_connection.validating": "Validating...",
@@ -221,7 +221,7 @@
   "add_outgoing_webhook.icon_url.help": "Enter the URL of a .png or .jpg file for this integration to use as the profile picture when posting. The file should be at least 128 pixels by 128 pixels. If left blank, the profile picture specified by the webhook creator is used.",
   "add_outgoing_webhook.save": "Save",
   "add_outgoing_webhook.saving": "Saving...",
-  "add_outgoing_webhook.token": "**Token**: {token}",
+  "add_outgoing_webhook.token": "<b>Token</b>: {token}",
   "add_outgoing_webhook.token.message": "Make sure to add this bot account to teams and channels you want it to interact in. See <link>documentation</link> to learn more.",
   "add_outgoing_webhook.triggerWords": "Trigger Words (One Per Line)",
   "add_outgoing_webhook.triggerWords.help": "Specify the trigger words that send an HTTP POST request to your application. The trigger can be for the channel, the outgoing webhook, or both. If you select only Channel, trigger words are optional. If you select both, the message must match both values.",