From 347ca15f8d12df170989da5209491b975c31e4e7 Mon Sep 17 00:00:00 2001
From: Aditi Patel <aditipatelpro@gmail.com>
Date: Thu, 17 Oct 2024 05:29:15 -0500
Subject: [PATCH] [MM-60858] Replace FormattedMarkdownMessage in
 'webapp/channels/src/components/commercial_support_modal/commercial_support_modal.tsx'
 with FormattedMessage (#28737)

---
 .../commercial_support_modal.test.tsx.snap    | 30 +++++++++------
 .../commercial_support_modal.tsx              | 38 +++++++++++++------
 webapp/channels/src/i18n/en.json              |  6 +--
 3 files changed, 48 insertions(+), 26 deletions(-)

diff --git a/webapp/channels/src/components/commercial_support_modal/__snapshots__/commercial_support_modal.test.tsx.snap b/webapp/channels/src/components/commercial_support_modal/__snapshots__/commercial_support_modal.test.tsx.snap
index e50a9f88ef..62c963d8ae 100644
--- a/webapp/channels/src/components/commercial_support_modal/__snapshots__/commercial_support_modal.test.tsx.snap
+++ b/webapp/channels/src/components/commercial_support_modal/__snapshots__/commercial_support_modal.test.tsx.snap
@@ -51,20 +51,26 @@ exports[`components/CommercialSupportModal should match snapshot 1`] = `
     <div
       className="CommercialSupportModal"
     >
-      <FormattedMarkdownMessage
-        defaultMessage="If you're experiencing issues, [submit a support ticket](!{supportLink}). To help with troubleshooting, it's recommended to download the Support Packet below that includes more details about your Mattermost environment."
-        id="commercial_support.description"
+      <MemoizedFormattedMessage
+        defaultMessage="If you're experiencing issues, <supportLink>submit a support ticket</supportLink>. To help with troubleshooting, it's recommended to download the Support Packet below that includes more details about your Mattermost environment."
+        id="commercial_support_modal.description"
         values={
           Object {
-            "supportLink": "https://support.mattermost.com/hc/en-us/requests/new",
+            "supportLink": [Function],
           }
         }
       />
       <AlertBanner
         message={
-          <FormattedMarkdownMessage
-            defaultMessage="Before downloading the Support Packet, set **Output Logs to File** to **true** and set **File Log Level** to **DEBUG** [here](!/admin_console/environment/logging)."
-            id="commercial_support.warning.banner"
+          <Memo(MemoizedFormattedMessage)
+            defaultMessage="Before downloading the Support Packet, set <strong>Output Logs to File</strong> to <strong>true</strong> and set <strong>File Log Level</strong> to <strong>DEBUG</strong> <debugLink>here</debugLink>."
+            id="commercial_support_modal.warning.banner"
+            values={
+              Object {
+                "debugLink": [Function],
+                "strong": [Function],
+              }
+            }
           />
         }
         mode="info"
@@ -73,10 +79,12 @@ exports[`components/CommercialSupportModal should match snapshot 1`] = `
       <div
         className="CommercialSupportModal__packet_contents_download"
       >
-        <FormattedMarkdownMessage
-          defaultMessage="**Select your Support Packet contents to download**"
-          id="commercial_support.download_contents"
-        />
+        <strong>
+          <MemoizedFormattedMessage
+            defaultMessage="Select your Support Packet contents to download"
+            id="commercial_support_modal.download_contents"
+          />
+        </strong>
       </div>
       <div
         className="CommercialSupportModal__download"
diff --git a/webapp/channels/src/components/commercial_support_modal/commercial_support_modal.tsx b/webapp/channels/src/components/commercial_support_modal/commercial_support_modal.tsx
index cbace25363..4fc7c0d4ad 100644
--- a/webapp/channels/src/components/commercial_support_modal/commercial_support_modal.tsx
+++ b/webapp/channels/src/components/commercial_support_modal/commercial_support_modal.tsx
@@ -5,6 +5,7 @@ import moment from 'moment';
 import React from 'react';
 import {Modal} from 'react-bootstrap';
 import {FormattedMessage} from 'react-intl';
+import {Link} from 'react-router-dom';
 
 import type {SupportPacketContent} from '@mattermost/types/admin';
 import type {UserProfile} from '@mattermost/types/users';
@@ -12,7 +13,7 @@ import type {UserProfile} from '@mattermost/types/users';
 import {Client4} from 'mattermost-redux/client';
 
 import AlertBanner from 'components/alert_banner';
-import FormattedMarkdownMessage from 'components/formatted_markdown_message';
+import ExternalLink from 'components/external_link';
 import LoadingSpinner from 'components/widgets/loading/loading_spinner';
 
 import './commercial_support_modal.scss';
@@ -145,30 +146,43 @@ export default class CommercialSupportModal extends React.PureComponent<Props, S
                 </Modal.Header>
                 <Modal.Body>
                     <div className='CommercialSupportModal'>
-                        <FormattedMarkdownMessage
-                            id='commercial_support.description'
-                            defaultMessage={'If you\'re experiencing issues, [submit a support ticket](!{supportLink}). To help with troubleshooting, it\'s recommended to download the Support Packet below that includes more details about your Mattermost environment.'}
+                        <FormattedMessage
+                            id='commercial_support_modal.description'
+                            defaultMessage={'If you\'re experiencing issues, <supportLink>submit a support ticket</supportLink>. To help with troubleshooting, it\'s recommended to download the Support Packet below that includes more details about your Mattermost environment.'}
                             values={{
-                                supportLink,
+                                supportLink: (chunks: string) => (
+                                    <ExternalLink
+                                        href={supportLink}
+                                        location='commercialSupportModal'
+                                    >
+                                        {chunks}
+                                    </ExternalLink>
+                                ),
                             }}
                         />
                         {showBannerWarning &&
                             <AlertBanner
                                 mode='info'
                                 message={
-                                    <FormattedMarkdownMessage
-                                        id='commercial_support.warning.banner'
-                                        defaultMessage='Before downloading the Support Packet, set **Output Logs to File** to **true** and set **File Log Level** to **DEBUG** [here](!/admin_console/environment/logging).'
+                                    <FormattedMessage
+                                        id='commercial_support_modal.warning.banner'
+                                        defaultMessage='Before downloading the Support Packet, set <strong>Output Logs to File</strong> to <strong>true</strong> and set <strong>File Log Level</strong> to <strong>DEBUG</strong> <debugLink>here</debugLink>.'
+                                        values={{
+                                            strong: (chunks: string) => <strong>{chunks}</strong>,
+                                            debugLink: (chunks: string) => <Link to='/admin_console/environment/logging'>{chunks}</Link>,
+                                        }}
                                     />
                                 }
                                 onDismiss={this.hideBannerWarning}
                             />
                         }
                         <div className='CommercialSupportModal__packet_contents_download'>
-                            <FormattedMarkdownMessage
-                                id='commercial_support.download_contents'
-                                defaultMessage={'**Select your Support Packet contents to download**'}
-                            />
+                            <strong>
+                                <FormattedMessage
+                                    id='commercial_support_modal.download_contents'
+                                    defaultMessage={'Select your Support Packet contents to download'}
+                                />
+                            </strong>
                         </div>
                         {this.state.packetContents.map((item, index) => (
                             <div
diff --git a/webapp/channels/src/i18n/en.json b/webapp/channels/src/i18n/en.json
index 5c32393298..452ada1d37 100644
--- a/webapp/channels/src/i18n/en.json
+++ b/webapp/channels/src/i18n/en.json
@@ -3401,11 +3401,11 @@
   "combined_system_message.removed_from_team.one_you": "You were **removed from the team**.",
   "combined_system_message.removed_from_team.two": "{firstUser} and {secondUser} were **removed from the team**.",
   "combined_system_message.you": "You",
-  "commercial_support.description": "If you're experiencing issues, [submit a support ticket](!{supportLink}). To help with troubleshooting, it's recommended to download the Support Packet below that includes more details about your Mattermost environment.",
-  "commercial_support.download_contents": "**Select your Support Packet contents to download**",
+  "commercial_support_modal.description": "If you're experiencing issues, <a>submit a support ticket</a>. To help with troubleshooting, it's recommended to download the Support Packet below that includes more details about your Mattermost environment.",
+  "commercial_support_modal.download_contents": "Select your Support Packet contents to download",
+  "commercial_support_modal.warning.banner": "Before downloading the Support Packet, set <strong>Output Logs to File</strong> to <strong>true</strong> and set <strong>File Log Level</strong> to <strong>DEBUG</strong> <a>here</a>.",
   "commercial_support.download_support_packet": "Download Support Packet",
   "commercial_support.title": "Commercial Support",
-  "commercial_support.warning.banner": "Before downloading the Support Packet, set **Output Logs to File** to **true** and set **File Log Level** to **DEBUG** [here](!/admin_console/environment/logging).",
   "confirm_modal.cancel": "Cancel",
   "confirm_switch_to_yearly_modal.confirm": "Confirm",
   "confirm_switch_to_yearly_modal.contact_sales": "Contact Sales",