[MM-60859] Replace FormattedMarkdownMessage in 'webapp/channels/src/components/admin_console/system_roles/system_role/system_role_permissions.tsx' with FormattedMessage (#28732)

webapp/channels/src/components/admin_console/system_roles/system_role/system_role_permissions.tsx

@@ -2,13 +2,13 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {defineMessage} from 'react-intl';
+import {defineMessage, FormattedMessage} from 'react-intl';
 
 import type {Role} from '@mattermost/types/roles';
 
 import {memoizeResult} from 'mattermost-redux/utils/helpers';
 
-import FormattedMarkdownMessage from 'components/formatted_markdown_message';
+import ExternalLink from 'components/external_link';
 import AdminPanel from 'components/widgets/admin_console/admin_panel';
 
 import Constants from 'utils/constants';
@@ -206,10 +206,40 @@ export default class SystemRolePermissions extends React.PureComponent<Props, St
 
         if (this.props.role.name === Constants.PERMISSIONS_SYSTEM_CUSTOM_GROUP_ADMIN) {
             return (
-                <FormattedMarkdownMessage
-                    id='admin.permissions.roles.system_custom_group_admin.detail_text'
-                    defaultMessage="The built-in Custom Group Manager role can be used to delegate the administration of [Custom Groups](https://docs.mattermost.com/welcome/manage-custom-groups.html) to users other than the System Admin.\n \nDon't forget to deauthorize all other system users from administering Custom Groups by unchecking the associated permissions checkbox in System console > User Management > Permissions.\n \nThis role has permission to create, edit, and delete custom user groups by selecting **User groups** from the Products menu."
-                />
+                <>
+                    <p>
+                        <FormattedMessage
+                            id='admin.permissions.roles.system_custom_group_admin.introduction'
+                            defaultMessage='The built-in Custom Group Manager role can be used to delegate the administration of <a>Custom Groups</a> to users other than the System Admin.'
+                            values={{
+                                a: (chunks: string) => (
+                                    <ExternalLink
+                                        href='https://docs.mattermost.com/welcome/manage-custom-groups.html'
+                                        location='adminConsoleSystemRoles'
+                                    >
+                                        {chunks}
+                                    </ExternalLink>
+                                ),
+                            }}
+                        />
+                    </p>
+                    <p>
+                        <FormattedMessage
+                            id='admin.permissions.roles.system_custom_group_admin.deauthorize_reminder'
+                            defaultMessage="Don't forget to deauthorize all other system users from administering Custom Groups by unchecking the associated permissions checkbox in System console > User Management > Permissions."
+                        />
+                    </p>
+                    <p>
+                        <FormattedMessage
+                            id='admin.permissions.roles.system_custom_group_admin.permissions_info'
+                            defaultMessage='This role has permission to create, edit, and delete custom user groups by selecting <b>User groups</b> from the Products menu.'
+                            values={{
+                                b: (chunks: string) => <b>{chunks}</b>,
+                            }}
+                        />
+                    </p>
+                </>
+
             );
         }
 

webapp/channels/src/i18n/en.json

@@ -1765,9 +1765,11 @@
   "admin.permissions.roles.system_admin.description": "Access to modifying everything.",
   "admin.permissions.roles.system_admin.name": "System Admin",
   "admin.permissions.roles.system_admin.type": "System Role",
+  "admin.permissions.roles.system_custom_group_admin.deauthorize_reminder": "Don't forget to deauthorize all other system users from administering Custom Groups by unchecking the associated permissions checkbox in System console > User Management > Permissions.",
   "admin.permissions.roles.system_custom_group_admin.description": "Administers all Custom Groups across the system.",
-  "admin.permissions.roles.system_custom_group_admin.detail_text": "The built-in Custom Group Manager role can be used to delegate the administration of [Custom Groups](https://docs.mattermost.com/welcome/manage-custom-groups.html) to users other than the System Admin.\n \nDon't forget to deauthorize all other system users from administering Custom Groups by unchecking the associated permissions checkbox in System console > User Management > Permissions.\n \nThis role has permission to create, edit, and delete custom user groups by selecting **User groups** from the Products menu.",
+  "admin.permissions.roles.system_custom_group_admin.introduction": "The built-in Custom Group Manager role can be used to delegate the administration of <a>Custom Groups</a> to users other than the System Admin.",
   "admin.permissions.roles.system_custom_group_admin.name": "Custom Group Manager",
+  "admin.permissions.roles.system_custom_group_admin.permissions_info": "This role has permission to create, edit, and delete custom user groups by selecting <b>User groups</b> from the Products menu.",
   "admin.permissions.roles.system_custom_group_admin.type": "System Role",
   "admin.permissions.roles.system_manager.description": "Slightly less access than system admin.",
   "admin.permissions.roles.system_manager.name": "System Manager",