[MM-60820] Replace FormattedMarkdownMessage in 'webapp/channels/src/components/integrations/confirm_integration/confirm_integration.tsx' with FormattedMessage (#28667)

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
+      <MemoizedFormattedMessage
-        defaultMessage="**Token**: {token}"
+        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
+      <MemoizedFormattedMessage
-        defaultMessage="**URL**: {url}"
+        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
+      <MemoizedFormattedMessage
-        defaultMessage="**Client ID**: {id}"
+        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
+      <MemoizedFormattedMessage
-        defaultMessage="**Client Secret**: {secret}"
+        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
+      <MemoizedFormattedMessage
-        defaultMessage="**URL(s)**: {url}"
+        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
+      <MemoizedFormattedMessage
-        defaultMessage="**Token**: {token}"
+        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
+      <MemoizedFormattedMessage
-        defaultMessage="**Client ID**: {id}"
+        defaultMessage="<b>Client ID</b>: {id}"
         id="add_outgoing_oauth_connection.clientId"
         values={
           Object {
+            "b": [Function],
             "id": "someid",
           }
         }
       />
       <br />
-      <FormattedMarkdownMessage
+      <MemoizedFormattedMessage
-        defaultMessage="**Client Secret**: \\\\*\\\\*\\\\*\\\\*\\\\*\\\\*\\\\*\\\\*"
+        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
+      <MemoizedFormattedMessage
-        defaultMessage="**Token URL**: \`{url}\`"
+        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
+      <MemoizedFormattedMessage
-        defaultMessage="**Audience URL(s)**: \`{url}\`"
+        defaultMessage="<b>Audience URL(s)</b>: \`{url}\`"
         id="add_outgoing_oauth_connection.audience_urls"
         values={
           Object {
+            "b": [Function],
             "url": "https://myaudience.com",
           }
         }

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}'
+                    defaultMessage='<b>Token</b>: {token}'
-                    values={{token: commandToken}}
+                    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}'
+                    defaultMessage='<b>URL</b>: {url}'
-                    values={{url: '`' + incomingHookToken + '`'}}
+                    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}'
+                    defaultMessage='<b>Token</b>: {token}'
-                    values={{token: outgoingHookToken}}
+                    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}'
+                    defaultMessage='<b>Client ID</b>: {id}'
-                    values={{id: oauthAppToken}}
+                    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}'
+                    defaultMessage='<b>Client Secret</b>: {secret}'
-                    values={{secret: oauthAppSecret}}
+                    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}'
+                    defaultMessage='<b>URL(s)</b>: {url}'
-                    values={{url: oauthApp.callback_urls.join(', ')}}
+                    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}'
+                    defaultMessage='<b>Client ID</b>: {id}'
-                    values={{id: clientId}}
+                    values={{
+                        id: clientId,
+                        b: (chunks: string) => <b>{chunks}</b>,
+                    }}
                 />
                 <br/>
-                <FormattedMarkdownMessage
+                <FormattedMessage
                     id='add_outgoing_oauth_connection.clientSecret'
-                    defaultMessage='**Client Secret**: \*\*\*\*\*\*\*\*'
+                    defaultMessage='<b>Client Secret</b>: \*\*\*\*\*\*\*\*'
-                    values={{secret: clientSecret}}
+                    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}'
+                        defaultMessage='<b>Username</b>: {username}'
-                        values={{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}'
+                        defaultMessage='<b>Password</b>: {password}'
-                        values={{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}`'
+                        defaultMessage='<b>Token URL</b>: `{url}`'
-                        values={{url: outgoingOAuthConnection.oauth_token_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}`'
+                        defaultMessage='<b>Audience URL(s)</b>: `{url}`'
-                        values={{url: outgoingOAuthConnection.audiences.join(', ')}}
+                        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}'
+                    defaultMessage='<b>Token</b>: {token}'
-                    values={{token: botToken}}
+                    values={{
+                        token: botToken,
+                        b: (chunks: string) => <b>{chunks}</b>,
+                    }}
                 />
                 <CopyText value={botToken}/>
                 <br/>

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.clientId": "<b>Client ID</b>: {id}",
-  "add_oauth_app.clientSecret": "**Client Secret**: {secret}",
+  "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.clientId": "<b>Client ID</b>: {id}",
-  "add_outgoing_oauth_connection.clientSecret": "**Client Secret**: \\*\\*\\*\\*\\*\\*\\*\\*",
+  "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.token_url": "<b>Token URL</b>: `{url}`",
-  "add_outgoing_oauth_connection.username": "**Username**: {username}",
+  "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.",