MM-52258 Replace usage of localizeAndFormatMessage (#23009)

* MM-52258 Replace usage of localizeAndFormatMessage

* Remove unused import

* Update snapshot

webapp/channels/src/actions/command.ts

@@ -21,7 +21,7 @@ import * as GlobalActions from 'actions/global_actions';
 import * as PostActions from 'actions/post_actions';
 
 import {isUrlSafe, getSiteURL} from 'utils/url';
-import {localizeMessage, getUserIdFromChannelName, localizeAndFormatMessage} from 'utils/utils';
+import {localizeMessage, getUserIdFromChannelName} from 'utils/utils';
 import * as UserAgent from 'utils/user_agent';
 import {Constants, ModalIdentifiers} from 'utils/constants';
 import {getHistory} from 'utils/browser_history';
@@ -34,7 +34,6 @@ import KeyboardShortcutsModal from 'components/keyboard_shortcuts/keyboard_short
 
 import {GlobalState} from 'types/store';
 
-import {t} from 'utils/i18n';
 import MarketplaceModal from 'components/plugin_marketplace/marketplace_modal';
 import WorkTemplateModal from 'components/work_templates';
 import {haveICurrentTeamPermission} from 'mattermost-redux/selectors/entities/roles';
@@ -194,14 +193,22 @@ export function executeCommand(message: string, args: CommandArgs): ActionFunc {
                     case AppCallResponseTypes.NAVIGATE:
                         return {data: true};
                     default:
-                        return createErrorMessage(localizeAndFormatMessage(
+                        return createErrorMessage(intlShim.formatMessage(
-                            t('apps.error.responses.unknown_type'),
+                            {
-                            'App response type not supported. Response type: {type}.',
+                                id: 'apps.error.responses.unknown_type',
-                            {type: callResp.type},
+                                defaultMessage: 'App response type not supported. Response type: {type}.',
+                            },
+                            {
+                                type: callResp.type,
+                            },
                         ));
                     }
                 } catch (err: any) {
-                    return createErrorMessage(err.message || localizeMessage('apps.error.unknown', 'Unknown error occurred.'));
+                    const message = err.message || intlShim.formatMessage({
+                        id: 'apps.error.unknown',
+                        defaultMessage: 'Unknown error occurred.',
+                    });
+                    return createErrorMessage(message);
                 }
             }
         }

webapp/channels/src/components/admin_console/feature_discovery/__snapshots__/feature_discovery.test.tsx.snap

@@ -90,9 +90,8 @@ exports[`components/feature_discovery FeatureDiscovery should match snapshot whe
         id="translation.test.copy"
       />
     </div>
-    <CloudStartTrialButton
+    <FeatureDiscoveryCloudStartTrialButton
       extraClass="btn btn-primary"
-      message="Try free for 30 days"
       telemetryId="start_cloud_trial_from_test"
     />
     <ExternalLink

webapp/channels/src/components/admin_console/feature_discovery/feature_discovery.tsx

@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {FormattedMessage} from 'react-intl';
+import {FormattedMessage, useIntl} from 'react-intl';
 
 import FormattedMarkdownMessage from 'components/formatted_markdown_message';
 
@@ -196,12 +196,7 @@ export default class FeatureDiscovery extends React.PureComponent<Props, State>
         // if all conditions are set for being able to request a cloud trial, then show the cta start cloud trial button
             if (canRequestCloudFreeTrial) {
                 ctaPrimaryButton = (
-                    <CloudStartTrialButton
+                    <FeatureDiscoveryCloudStartTrialButton
-                        message={Utils.localizeAndFormatMessage(
-                            'admin.ldap_feature_discovery.call_to_action.primary.cloudFree',
-                            'Try free for {trialLength} days',
-                            {trialLength: FREEMIUM_TO_ENTERPRISE_TRIAL_LENGTH_DAYS},
-                        )}
                         telemetryId={`start_cloud_trial_from_${this.props.featureName}`}
                         extraClass='btn btn-primary'
                     />
@@ -440,3 +435,22 @@ export default class FeatureDiscovery extends React.PureComponent<Props, State>
         );
     }
 }
+
+function FeatureDiscoveryCloudStartTrialButton(props: Omit<React.ComponentProps<typeof CloudStartTrialButton>, 'message'>) {
+    const message = useIntl().formatMessage(
+        {
+            id: 'admin.ldap_feature_discovery.call_to_action.primary.cloudFree',
+            defaultMessage: 'Try free for {trialLength} days',
+        },
+        {
+            trialLength: FREEMIUM_TO_ENTERPRISE_TRIAL_LENGTH_DAYS,
+        },
+    );
+
+    return (
+        <CloudStartTrialButton
+            {...props}
+            message={message}
+        />
+    );
+}

webapp/channels/src/components/profile_popover/profile_popover.tsx

@@ -892,7 +892,15 @@ class ProfilePopover extends React.PureComponent<ProfilePopoverProps, ProfilePop
                 {tabCatcher}
                 <div
                     role='dialog'
-                    aria-label={Utils.localizeAndFormatMessage('profile_popover.profileLabel', 'Profile for {name}', {name: displayName})}
+                    aria-label={formatMessage(
+                        {
+                            id: 'profile_popover.profileLabel',
+                            defaultMessage: 'Profile for {name}',
+                        },
+                        {
+                            name: displayName,
+                        },
+                    )}
                     onKeyDown={this.handleKeyDown}
                     className={A11yClassNames.POPUP}
                     aria-modal={true}

webapp/channels/src/i18n/en.json

@@ -1207,6 +1207,7 @@
   "admin.ldap_feature_discovery_cloud.call_to_action.primary": "Upgrade now",
   "admin.ldap_feature_discovery_cloud.call_to_action.primary_sales": "Contact sales",
   "admin.ldap_feature_discovery.call_to_action.primary": "Start trial",
+  "admin.ldap_feature_discovery.call_to_action.primary.cloudFree": "Try free for {trialLength} days",
   "admin.ldap_feature_discovery.call_to_action.secondary": "Learn more",
   "admin.ldap_feature_discovery.copy": "When you connect Mattermost with your organization's Active Directory/LDAP, users can log in without having to create new usernames and passwords.",
   "admin.ldap_feature_discovery.title": "Integrate Active Directory/LDAP with Mattermost Professional",
@@ -4523,6 +4524,7 @@
   "pricing_modal.title": "Select a plan",
   "pricing_modal.wantToTry": "Want to try? ",
   "pricing_modal.wantToUpgrade": "Want to upgrade? ",
+  "profile_popover.profileLabel": "Profile for {name}",
   "promote_to_user_modal.desc": "This action promotes the guest {username} to a member. It will allow the user to join public channels and interact with users outside of the channels they are currently members of. Are you sure you want to promote guest {username} to member?",
   "promote_to_user_modal.promote": "Promote",
   "promote_to_user_modal.title": "Promote guest {username} to member",

webapp/channels/src/utils/utils.tsx

@@ -1259,6 +1259,9 @@ export function localizeMessage(id: string, defaultMessage?: string) {
     return translations[id];
 }
 
+/**
+ * @deprecated If possible, use intl.formatMessage instead. If you have to use this, remember to mark the id using `t`
+ */
 export function localizeAndFormatMessage(id: string, defaultMessage: string, template: { [name: string]: any } | undefined) {
     const base = localizeMessage(id, defaultMessage);