[MM-60825] Replace FormattedMarkdownMessage in 'webapp/channels/src/components/mfa/setup/setup.tsx' with FormattedMessage (#28628)

webapp/channels/src/components/mfa/setup/setup.tsx

@@ -7,7 +7,6 @@ import {FormattedMessage, injectIntl, type IntlShape} from 'react-intl';
 import type {UserProfile} from '@mattermost/types/users';
 
 import ExternalLink from 'components/external_link';
-import FormattedMarkdownMessage from 'components/formatted_markdown_message';
 
 import * as Utils from 'utils/utils';
 
@@ -134,11 +133,12 @@ class Setup extends React.PureComponent<Props, State> {
         if (this.props.enforceMultifactorAuthentication) {
             mfaRequired = (
                 <p>
-                    <FormattedMarkdownMessage
+                    <FormattedMessage
-                        id='mfa.setup.required'
+                        id='mfa.setup.required_mfa'
-                        defaultMessage='**Multi-factor authentication is required on {siteName}.**'
+                        defaultMessage='<strong>Multi-factor authentication is required on {siteName}.</strong>'
                         values={{
                             siteName: this.props.siteName,
+                            strong: (chunks: React.ReactNode) => <strong>{chunks}</strong>,
                         }}
                     />
                 </p>
@@ -178,9 +178,12 @@ class Setup extends React.PureComponent<Props, State> {
                         />
                     </p>
                     <p>
-                        <FormattedMarkdownMessage
+                        <FormattedMessage
-                            id='mfa.setup.step2'
+                            id='mfa.setup.step2_secret'
-                            defaultMessage='**Step 2: **Use Google Authenticator to scan this QR code, or manually type in the secret key'
+                            defaultMessage='<strong>Step 2: </strong>Use Google Authenticator to scan this QR code, or manually type in the secret key.'
+                            values={{
+                                strong: (chunks: React.ReactNode) => <strong>{chunks}</strong>,
+                            }}
                         />
                     </p>
                     <div className='form-group'>
@@ -205,9 +208,12 @@ class Setup extends React.PureComponent<Props, State> {
                         </p>
                     </div>
                     <p>
-                        <FormattedMarkdownMessage
+                        <FormattedMessage
-                            id='mfa.setup.step3'
+                            id='mfa.setup.step3_code'
-                            defaultMessage='**Step 3: **Enter the code generated by Google Authenticator'
+                            defaultMessage='<strong>Step 3: </strong>Enter the code generated by Google Authenticator.'
+                            values={{
+                                strong: (chunks: React.ReactNode) => <strong>{chunks}</strong>,
+                            }}
                         />
                     </p>
                     <p>

webapp/channels/src/i18n/en.json

@@ -4252,12 +4252,12 @@
   "mfa.setup.badCode": "Invalid code. If this issue persists, contact your System Administrator.",
   "mfa.setup.code": "MFA Code",
   "mfa.setup.codeError": "Please enter the code from Google Authenticator.",
-  "mfa.setup.required": "**Multi-factor authentication is required on {siteName}.**",
+  "mfa.setup.required_mfa": "<strong>Multi-factor authentication is required on {siteName}.</strong>",
   "mfa.setup.save": "Save",
   "mfa.setup.secret": "Secret: {secret}",
   "mfa.setup.step1": "<strong>Step 1: </strong>On your phone, download Google Authenticator from <linkiTunes>iTunes</linkiTunes> or <linkGooglePlay>Google Play</linkGooglePlay>",
-  "mfa.setup.step2": "**Step 2: **Use Google Authenticator to scan this QR code, or manually type in the secret key",
+  "mfa.setup.step2_secret": "<strong>Step 2: </strong>Use Google Authenticator to scan this QR code, or manually type in the secret key.",
-  "mfa.setup.step3": "**Step 3: **Enter the code generated by Google Authenticator",
+  "mfa.setup.step3_code": "<strong>Step 3: </strong>Enter the code generated by Google Authenticator.",
   "mfa.setupTitle": "Multi-factor Authentication Setup",
   "mobile.set_status.away.icon": "Away Icon",
   "mobile.set_status.dnd.icon": "Do Not Disturb Icon",