Remove t from from cloud-related and license-related code (#27055)

* Remove t from components/announcement_bar * Remove t from components/cloud_usage_modal * Remove t from components/common/hooks * Remove t and localizeMessage from components/downgrade_modal * Remove t from components/pricing_modal * Remove t from components/preparing_workspace * Remove t from components/start_trial_form_modal * Fix test
2024-05-24 12:05:47 -04:00
--- a/webapp/channels/src/components/admin_console/billing/billing_subscriptions/to_paid_plan_nudge_banner.tsx
+++ b/webapp/channels/src/components/admin_console/billing/billing_subscriptions/to_paid_plan_nudge_banner.tsx
@@ -3,7 +3,7 @@

 import moment from 'moment';
 import React, {useEffect} from 'react';
-import {FormattedMessage} from 'react-intl';
+import {FormattedMessage, defineMessages} from 'react-intl';
 import {useDispatch, useSelector} from 'react-redux';

 import type {GlobalState} from '@mattermost/types/store';
@@ -17,7 +17,6 @@ import AnnouncementBar from 'components/announcement_bar/default_announcement_ba
 import useOpenPricingModal from 'components/common/hooks/useOpenPricingModal';

 import {AnnouncementBarTypes, CloudBanners, CloudProducts, Preferences} from 'utils/constants';
-import {t} from 'utils/i18n';

 import './to_paid_plan_nudge_banner.scss';

@@ -163,11 +162,17 @@ export const ToPaidPlanBannerDismissable = () => {
            type={announcementType}
            showCloseButton={daysToCloudFreeEnd > 10}
            onButtonClick={openPricingModal}
-            modalButtonText={t('cloud_billing.nudge_to_paid.view_plans')}
-            modalButtonDefaultText='View plans'
+            modalButtonText={messages.viewPlans}
            message={<FormattedMessage {...message}/>}
            showLinkAsButton={true}
            handleClose={showBanner}
        />
    );
 };
+
+const messages = defineMessages({
+    viewPlans: {
+        id: 'cloud_billing.nudge_to_paid.view_plans',
+        defaultMessage: 'View plans',
+    },
+});
--- a/webapp/channels/src/components/admin_console/billing/delete_workspace/progress_modal.tsx
+++ b/webapp/channels/src/components/admin_console/billing/delete_workspace/progress_modal.tsx
@@ -2,8 +2,7 @@
 // See LICENSE.txt for license information.

 import React, {useEffect, useRef, useState} from 'react';
-import {injectIntl} from 'react-intl';
-import type {WrappedComponentProps} from 'react-intl';
+import {FormattedMessage} from 'react-intl';
 import {useDispatch} from 'react-redux';

 import {closeModal} from 'actions/views/modals';
@@ -20,9 +19,7 @@ import './progress_modal.scss';
 const MIN_PROCESSING_MILLISECONDS = 5000;
 const MAX_FAKE_PROGRESS = 95;

-type Props = WrappedComponentProps
-
-const DeleteWorkspaceProgressModal = (props: Props) => {
+export default function DeleteWorkspaceProgressModal() {
    const modal = React.createRef();
    const mounted = useRef(false);
    const dispatch = useDispatch();
@@ -67,11 +64,11 @@ const DeleteWorkspaceProgressModal = (props: Props) => {
            >
                <div className='DeleteWorkspaceProgressModal'>
                    <IconMessage
-                        title={
-                            props.intl.formatMessage({
-                                id: 'admin.billing.deleteWorkspace.progressModal.title',
-                                defaultMessage: 'Deleting your workspace',
-                            })
+                        formattedTitle={
+                            <FormattedMessage
+                                id='admin.billing.deleteWorkspace.progressModal.title'
+                                defaultMessage='Deleting your workspace'
+                            />
                        }
                        icon={
                            <CreditCardSvg
@@ -89,6 +86,4 @@ const DeleteWorkspaceProgressModal = (props: Props) => {
            </FullScreenModal>
        </RootPortal>
    );
-};
-
-export default injectIntl(DeleteWorkspaceProgressModal);
+}
--- a/webapp/channels/src/components/announcement_bar/cloud_trial_announcement_bar/cloud_trial_announcement_bar.tsx
+++ b/webapp/channels/src/components/announcement_bar/cloud_trial_announcement_bar/cloud_trial_announcement_bar.tsx
@@ -3,7 +3,7 @@

 import isEmpty from 'lodash/isEmpty';
 import React from 'react';
-import {FormattedMessage} from 'react-intl';
+import {FormattedMessage, defineMessages} from 'react-intl';

 import {AlertCircleOutlineIcon, AlertOutlineIcon} from '@mattermost/compass-icons/components';
 import type {Subscription} from '@mattermost/types/cloud';
@@ -22,7 +22,6 @@ import {
    TELEMETRY_CATEGORIES,
    TrialPeriodDays,
 } from 'utils/constants';
-import {t} from 'utils/i18n';
 import {getLocaleDateFromUTC} from 'utils/utils';

 import type {ModalData} from 'types/actions';
@@ -140,12 +139,11 @@ class CloudTrialAnnouncementBar extends React.PureComponent<Props> {
            />
        );

-        let modalButtonText = t('admin.billing.subscription.cloudTrial.subscribeButton');
-        let modalButtonDefaultText = 'Upgrade Now';
-
+        let modalButtonText;
        if (this.props.reverseTrial) {
-            modalButtonText = t('admin.billing.subscription.cloudReverseTrial.subscribeButton');
-            modalButtonDefaultText = 'Review your options';
+            modalButtonText = messages.trialButton;
+        } else {
+            modalButtonText = messages.reverseTrialButton;
        }

        if (this.props.reverseTrial) {
@@ -221,7 +219,6 @@ class CloudTrialAnnouncementBar extends React.PureComponent<Props> {
                handleClose={this.handleClose}
                onButtonClick={this.showModal}
                modalButtonText={modalButtonText}
-                modalButtonDefaultText={modalButtonDefaultText}
                message={bannerMessage}
                showLinkAsButton={true}
                icon={icon}
@@ -230,4 +227,15 @@ class CloudTrialAnnouncementBar extends React.PureComponent<Props> {
    }
 }

+const messages = defineMessages({
+    reverseTrialButton: {
+        id: 'admin.billing.subscription.cloudReverseTrial.subscribeButton',
+        defaultMessage: 'Review your options',
+    },
+    trialButton: {
+        id: 'admin.billing.subscription.cloudTrial.subscribeButton',
+        defaultMessage: 'Upgrade Now',
+    },
+});
+
 export default CloudTrialAnnouncementBar;
--- a/webapp/channels/src/components/announcement_bar/cloud_trial_ended_announcement_bar/index.tsx
+++ b/webapp/channels/src/components/announcement_bar/cloud_trial_ended_announcement_bar/index.tsx
@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.

 import React, {useMemo} from 'react';
-import {FormattedMessage} from 'react-intl';
+import {FormattedMessage, defineMessages} from 'react-intl';
 import {useSelector, useDispatch} from 'react-redux';

 import {savePreferences} from 'mattermost-redux/actions/preferences';
@@ -25,7 +25,6 @@ import {
    CloudBanners,
    CloudProducts,
 } from 'utils/constants';
-import {t} from 'utils/i18n';

 import type {GlobalState} from 'types/store';

@@ -104,20 +103,13 @@ const CloudTrialEndAnnouncementBar: React.FC = () => {
        );
    };

-    const message = {
-        id: t('free.banner.downgraded'),
-        defaultMessage:
-            'Your workspace now has restrictions and some data has been archived',
-    };
-
    return (
        <AnnouncementBar
            type={AnnouncementBarTypes.CRITICAL}
            showCloseButton={true}
            onButtonClick={() => openPricingModal({trackingLocation: 'cloud_trial_ended_announcement_bar'})}
-            modalButtonText={t('more.details')}
-            modalButtonDefaultText={'More details'}
-            message={<FormattedMessage {...message}/>}
+            modalButtonText={messages.moreDetails}
+            message={<FormattedMessage {...messages.downgraded}/>}
            showLinkAsButton={true}
            isTallBanner={true}
            icon={<i className='icon icon-alert-outline'/>}
@@ -126,4 +118,15 @@ const CloudTrialEndAnnouncementBar: React.FC = () => {
    );
 };

+const messages = defineMessages({
+    downgraded: {
+        id: 'free.banner.downgraded',
+        defaultMessage: 'Your workspace now has restrictions and some data has been archived',
+    },
+    moreDetails: {
+        id: 'more.details',
+        defaultMessage: 'More details',
+    },
+});
+
 export default CloudTrialEndAnnouncementBar;
--- a/webapp/channels/src/components/announcement_bar/configuration_bar/configuration_bar.tsx
+++ b/webapp/channels/src/components/announcement_bar/configuration_bar/configuration_bar.tsx
@@ -20,7 +20,6 @@ import ExternalLink from 'components/external_link';
 import alertIcon from 'images/icons/round-white-info-icon.svg';
 import warningIcon from 'images/icons/warning-icon.svg';
 import {AnnouncementBarTypes, AnnouncementBarMessages, Preferences, ConfigurationBanners, Constants, TELEMETRY_CATEGORIES} from 'utils/constants';
-import {t} from 'utils/i18n';
 import {daysToLicenseExpire, isLicenseExpired, isLicenseExpiring, isLicensePastGracePeriod, isTrialLicense} from 'utils/license_utils';
 import {getSkuDisplayName} from 'utils/subscription';
 import {getViewportSize} from 'utils/utils';
@@ -252,16 +251,6 @@ const ConfigurationAnnouncementBar = (props: Props) => {
    }

    if (props.canViewSystemErrors && props.config?.SiteURL === '') {
-        let id;
-        let defaultMessage;
-        if (props.config?.EnableSignUpWithGitLab === 'true') {
-            id = t('announcement_bar.error.site_url_gitlab.full');
-            defaultMessage = 'Please configure your <linkSite>site URL</linkSite> either on the <linkConsole>System Console<linkConsole> or, if you\'re using GitLab Mattermost, in gitlab.rb.';
-        } else {
-            id = t('announcement_bar.error.site_url.full');
-            defaultMessage = 'Please configure your <linkSite>site URL</linkSite> on the <linkConsole>System Console</linkConsole>.';
-        }
-
        const values: Record<string, ReactNode> = {
            linkSite: (msg: string) => (
                <ExternalLink
@@ -277,7 +266,19 @@ const ConfigurationAnnouncementBar = (props: Props) => {
                </Link>
            ),
        };
-        const siteURLMessage = formatMessage({id, defaultMessage}, values);
+
+        let siteURLMessage;
+        if (props.config?.EnableSignUpWithGitLab === 'true') {
+            siteURLMessage = formatMessage({
+                id: 'announcement_bar.error.site_url_gitlab.full',
+                defaultMessage: 'Please configure your <linkSite>site URL</linkSite> either on the <linkConsole>System Console</linkConsole> or, if you\'re using GitLab Mattermost, in gitlab.rb.',
+            }, values);
+        } else {
+            siteURLMessage = formatMessage({
+                id: 'announcement_bar.error.site_url.full',
+                defaultMessage: 'Please configure your <linkSite>site URL</linkSite> on the <linkConsole>System Console</linkConsole>.',
+            }, values);
+        }

        return (
            <TextDismissableBar
--- a/webapp/channels/src/components/announcement_bar/default_announcement_bar/announcement_bar.tsx
+++ b/webapp/channels/src/components/announcement_bar/default_announcement_bar/announcement_bar.tsx
@@ -3,6 +3,7 @@

 import type {ReactNode} from 'react';
 import React from 'react';
+import type {MessageDescriptor} from 'react-intl';
 import {FormattedMessage} from 'react-intl';

 import FormattedMarkdownMessage from 'components/formatted_markdown_message';
@@ -24,8 +25,7 @@ type Props = {
    showModal?: boolean;
    announcementBarCount?: number;
    onButtonClick?: (e?: any) => void;
-    modalButtonText?: string;
-    modalButtonDefaultText?: string;
+    modalButtonText?: MessageDescriptor;
    showLinkAsButton: boolean;
    icon?: ReactNode;
    actions: {
@@ -185,14 +185,13 @@ export default class AnnouncementBar extends React.PureComponent<Props, State> {
                            {message}
                        </span>
                        {
-                            this.props.showLinkAsButton && this.props.showCTA && this.props.modalButtonText && this.props.modalButtonDefaultText &&
+                            this.props.showLinkAsButton && this.props.showCTA && this.props.modalButtonText &&
                            <button
                                onClick={this.props.onButtonClick}
                                disabled={this.props.ctaDisabled}
                            >
                                <FormattedMessage
-                                    id={this.props.modalButtonText}
-                                    defaultMessage={this.props.modalButtonDefaultText}
+                                    {...this.props.modalButtonText}
                                />
                            </button>
                        }
--- a/webapp/channels/src/components/announcement_bar/overage_users_banner/index.tsx
+++ b/webapp/channels/src/components/announcement_bar/overage_users_banner/index.tsx
@@ -109,7 +109,6 @@ const OverageUsersBanner = () => {
            showCloseButton={isBetween5PercerntAnd10PercentPurchasedSeats}
            onButtonClick={handleClick}
            modalButtonText={cta}
-            modalButtonDefaultText={cta}
            message={message}
            showLinkAsButton={true}
            isTallBanner={true}
--- a/webapp/channels/src/components/announcement_bar/payment_announcement_bar/index.tsx
+++ b/webapp/channels/src/components/announcement_bar/payment_announcement_bar/index.tsx
@@ -3,7 +3,7 @@

 import isEmpty from 'lodash/isEmpty';
 import React, {useEffect, useState} from 'react';
-import {FormattedMessage} from 'react-intl';
+import {FormattedMessage, defineMessages} from 'react-intl';
 import {useSelector, useDispatch} from 'react-redux';

 import {getCloudCustomer} from 'mattermost-redux/actions/cloud';
@@ -18,7 +18,6 @@ import {isCurrentUserSystemAdmin} from 'mattermost-redux/selectors/entities/user
 import {getHistory} from 'utils/browser_history';
 import {isCustomerCardExpired} from 'utils/cloud_utils';
 import {AnnouncementBarTypes, CloudProducts, ConsolePages} from 'utils/constants';
-import {t} from 'utils/i18n';

 import AnnouncementBar from '../default_announcement_bar';

@@ -78,11 +77,17 @@ export default function PaymentAnnouncementBar() {
            type={AnnouncementBarTypes.CRITICAL}
            showCloseButton={false}
            onButtonClick={updatePaymentInfo}
-            modalButtonText={t('admin.billing.subscription.updatePaymentInfo')}
-            modalButtonDefaultText={'Update payment info'}
+            modalButtonText={messages.updatePaymentInfo}
            message={message}
            showLinkAsButton={true}
            isTallBanner={true}
        />
    );
 }
+
+const messages = defineMessages({
+    updatePaymentInfo: {
+        id: 'admin.billing.subscription.updatePaymentInfo',
+        defaultMessage: 'Update payment info',
+    },
+});
--- a/webapp/channels/src/components/cloud_usage_modal/lhs_nearing_limit_modal.tsx
+++ b/webapp/channels/src/components/cloud_usage_modal/lhs_nearing_limit_modal.tsx
@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.

 import React from 'react';
-import {useIntl} from 'react-intl';
+import {defineMessage, useIntl} from 'react-intl';
 import {useDispatch, useSelector} from 'react-redux';

 import {getSubscriptionProduct} from 'mattermost-redux/selectors/entities/cloud';
@@ -15,7 +15,6 @@ import useGetUsage from 'components/common/hooks/useGetUsage';
 import useOpenPricingModal from 'components/common/hooks/useOpenPricingModal';

 import {ModalIdentifiers} from 'utils/constants';
-import {t} from 'utils/i18n';
 import type {Message} from 'utils/i18n';
 import {fallbackStarterLimits, asGBString, LimitTypes} from 'utils/limits';

@@ -31,50 +30,50 @@ export default function LHSNearingLimitsModal() {
    const [limits] = useGetLimits();

    const primaryAction = {
-        message: {
-            id: t('workspace_limits.modals.view_plans'),
+        message: defineMessage({
+            id: 'workspace_limits.modals.view_plans',
            defaultMessage: 'View plans',
-        },
+        }),
        onClick: () => openPricingModal({trackingLocation: 'cloud_usage_lhs_nearing_limit_modal'}),
    };
    const secondaryAction = {
-        message: {
-            id: t('workspace_limits.modals.close'),
+        message: defineMessage({
+            id: 'workspace_limits.modals.close',
            defaultMessage: 'Close',
-        },
+        }),
        onClick: () => {
            dispatch(closeModal(ModalIdentifiers.CLOUD_LIMITS));
        },
    };
    const highestLimit = useGetHighestThresholdCloudLimit(usage, limits);
-    let title: Message = {
-        id: t('workspace_limits.modals.informational.title'),
+    let title: Message = defineMessage({
+        id: 'workspace_limits.modals.informational.title',
        defaultMessage: '{planName} limits',
        values: {
            planName: product?.name,
        },
-    };
+    });

-    let description: Message = {
-        id: t('workspace_limits.modals.informational.description.freeLimits'),
+    let description: Message = defineMessage({
+        id: 'workspace_limits.modals.informational.description.freeLimits',
        defaultMessage: '{planName} is restricted to {messages} message history and {storage} file storage.',
        values: {
            planName: product?.name,
            messages: intl.formatNumber(limits?.messages?.history ?? fallbackStarterLimits.messages.history),
            storage: asGBString(limits?.files?.total_storage ?? fallbackStarterLimits.files.totalStorage, intl.formatNumber),
        },
-    };
+    });

    if (highestLimit && highestLimit.id === LimitTypes.messageHistory) {
-        title = {
-            id: t('workspace_limits.modals.limits_reached.title.message_history'),
+        title = defineMessage({
+            id: 'workspace_limits.modals.limits_reached.title.message_history',
            defaultMessage: 'Message history',
-        };
+        });

-        description = {
-            id: t('workspace_limits.modals.limits_reached.description.message_history'),
+        description = defineMessage({
+            id: 'workspace_limits.modals.limits_reached.description.message_history',
            defaultMessage: 'Your sent message history is no longer available but you can still send messages. Upgrade to a paid plan and get unlimited access to your message history.',
-        };
+        });
    }

    return (
--- a/webapp/channels/src/components/common/hooks/useExpandOverageUsersCheck.ts
+++ b/webapp/channels/src/components/common/hooks/useExpandOverageUsersCheck.ts
@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.

-import {useIntl} from 'react-intl';
+import {defineMessage} from 'react-intl';
 import {useSelector} from 'react-redux';

 import {trackEvent} from 'actions/telemetry_actions.jsx';
@@ -16,10 +16,9 @@ export const useExpandOverageUsersCheck = ({
    isWarningState,
    banner,
 }: UseExpandOverageUsersCheckArgs) => {
-    const {formatMessage} = useIntl();
    const expandableLink = useSelector(getExpandSeatsLink);

-    const cta = formatMessage({
+    const cta = defineMessage({
        id: 'licensingPage.overageUsersBanner.cta',
        defaultMessage: 'Contact Sales',
    });
--- a/webapp/channels/src/components/common/hooks/useShowAdminLimitReached.ts
+++ b/webapp/channels/src/components/common/hooks/useShowAdminLimitReached.ts
@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.

 // import React from 'react';
-import {useIntl} from 'react-intl';
+import {defineMessage, useIntl} from 'react-intl';
 import {useDispatch, useSelector} from 'react-redux';

 import {setNeedsLoggedInLimitReachedCheck} from 'actions/views/admin';
@@ -13,7 +13,6 @@ import CloudUsageModal from 'components/cloud_usage_modal';
 import useOpenPricingModal from 'components/common/hooks/useOpenPricingModal';

 import {ModalIdentifiers, Preferences} from 'utils/constants';
-import {t} from 'utils/i18n';

 import useGetLimits from './useGetLimits';
 import useGetUsage from './useGetUsage';
@@ -43,34 +42,34 @@ export default function useShowAdminLimitReached() {
            modalId: ModalIdentifiers.CLOUD_LIMITS,
            dialogType: CloudUsageModal,
            dialogProps: {
-                title: {
-                    id: t('workspace_limits.modals.limits_reached.title'),
+                title: defineMessage({
+                    id: 'workspace_limits.modals.limits_reached.title',
                    defaultMessage: '{limitName} limit reached',
                    values: {
                        limitName: intl.formatMessage({
-                            id: t('workspace_limits.modals.limits_reached.title.message_history'),
+                            id: 'workspace_limits.modals.limits_reached.title.message_history',
                            defaultMessage: 'Message history',
                        }),
                    },
-                },
-                description: {
-                    id: t('workspace_limits.modals.limits_reached.description.message_history'),
+                }),
+                description: defineMessage({
+                    id: 'workspace_limits.modals.limits_reached.description.message_history',
                    defaultMessage: 'Your sent message history is no longer available but you can still send messages. Upgrade to a paid plan and get unlimited access to your message history.',
-                },
+                }),
                secondaryAction: {
-                    message: {
-                        id: t('workspace_limits.modals.close'),
+                    message: defineMessage({
+                        id: 'workspace_limits.modals.close',
                        defaultMessage: 'Close',
-                    },
+                    }),
                    onClick: () => {
                        dispatch(closeModal(ModalIdentifiers.CLOUD_LIMITS));
                    },
                },
                primaryAction: {
-                    message: {
-                        id: t('workspace_limits.modals.view_plan_options'),
+                    message: defineMessage({
+                        id: 'workspace_limits.modals.view_plan_options',
                        defaultMessage: 'View plan options',
-                    },
+                    }),
                    onClick: () => {
                        dispatch(closeModal(ModalIdentifiers.CLOUD_LIMITS));
                        openPricingModal({trackingLocation: 'admin_login_limit_reached_dashboard'});
--- a/webapp/channels/src/components/common/multi_select_cards/multi_select_card.tsx
+++ b/webapp/channels/src/components/common/multi_select_cards/multi_select_card.tsx
@@ -2,7 +2,6 @@
 // See LICENSE.txt for license information.

 import React from 'react';
-import {FormattedMessage} from 'react-intl';

 import WithTooltip from 'components/with_tooltip';

@@ -12,7 +11,7 @@ export type Props = {
    onClick: () => void;
    icon: JSX.Element;
    id: string;
-    defaultMessage: string;
+    buttonText: string;
    checked: boolean;
    tooltip?: string;
    size?: 'regular' | 'small';
@@ -38,10 +37,7 @@ const MultiSelectCard = (props: Props) => {
        >
            {props.icon}
            <span className='MultiSelectCard__label'>
-                <FormattedMessage
-                    id={props.id}
-                    defaultMessage={props.defaultMessage}
-                />
+                {props.buttonText}
            </span>
            {props.checked && <i className='MultiSelectCard__checkmark icon icon-check-circle'/>}
        </button>
--- a/webapp/channels/src/components/downgrade_modal/index.tsx
+++ b/webapp/channels/src/components/downgrade_modal/index.tsx
@@ -2,6 +2,7 @@
 // See LICENSE.txt for license information.

 import React, {useEffect, useRef, useState} from 'react';
+import {FormattedMessage} from 'react-intl';
 import {useDispatch} from 'react-redux';

 import {closeModal} from 'actions/views/modals';
@@ -15,7 +16,6 @@ import FullScreenModal from 'components/widgets/modals/full_screen_modal';
 import 'components/payment_form/payment_form.scss';

 import {ModalIdentifiers} from 'utils/constants';
-import {t} from 'utils/i18n';

 import './index.scss';

@@ -67,8 +67,12 @@ export default function DowngradeModal() {
            >
                <div id='DowngradeModal'>
                    <IconMessage
-                        title={t('admin.billing.subscription.downgrading')}
-                        subtitle={''}
+                        formattedTitle={
+                            <FormattedMessage
+                                id='admin.billing.subscription.downgrading'
+                                defaultMessage='Downgrading your workspace'
+                            />
+                        }
                        icon={
                            <CreditCardSvg
                                width={444}
--- a/webapp/channels/src/components/invitation_modal/overage_users_banner_notice/index.tsx
+++ b/webapp/channels/src/components/invitation_modal/overage_users_banner_notice/index.tsx
@@ -102,7 +102,7 @@ const OverageUsersBannerNotice = () => {
                                href={LicenseLinks.CONTACT_SALES}
                                onClick={handleClick}
                            >
-                                {cta}
+                                <FormattedMessage {...cta}/>
                            </ExternalLink>
                        );
                    },
--- a/webapp/channels/src/components/preparing_workspace/plugins.tsx
+++ b/webapp/channels/src/components/preparing_workspace/plugins.tsx
@@ -13,8 +13,6 @@ import ServiceNowSVG from 'components/common/svg_images_components/servicenow_sv
 import ZoomSVG from 'components/common/svg_images_components/zoom_svg';
 import ExternalLink from 'components/external_link';

-import {t} from 'utils/i18n';
-
 import Description from './description';
 import PageBody from './page_body';
 import PageLine from './page_line';
@@ -91,8 +89,11 @@ const Plugins = (props: Props) => {
                                {
                                    onClick: () => props.setOption('github'),
                                    icon: <GithubSVG/>,
-                                    id: t('onboarding_wizard.plugins.github'),
-                                    defaultMessage: 'GitHub',
+                                    id: 'onboarding_wizard.plugins.github',
+                                    buttonText: formatMessage({
+                                        id: 'onboarding_wizard.plugins.github',
+                                        defaultMessage: 'GitHub',
+                                    }),
                                    checked: props.options.github,
                                    tooltip: formatMessage({
                                        id: 'onboarding_wizard.plugins.github.tooltip',
@@ -102,8 +103,11 @@ const Plugins = (props: Props) => {
                                {
                                    onClick: () => props.setOption('gitlab'),
                                    icon: <GitlabSVG/>,
-                                    id: t('onboarding_wizard.plugins.gitlab'),
-                                    defaultMessage: 'GitLab',
+                                    id: 'onboarding_wizard.plugins.gitlab',
+                                    buttonText: formatMessage({
+                                        id: 'onboarding_wizard.plugins.gitlab',
+                                        defaultMessage: 'GitLab',
+                                    }),
                                    checked: props.options.gitlab,
                                    tooltip: formatMessage({
                                        id: 'onboarding_wizard.plugins.gitlab.tooltip',
@@ -113,8 +117,11 @@ const Plugins = (props: Props) => {
                                {
                                    onClick: () => props.setOption('jira'),
                                    icon: <JiraSVG/>,
-                                    id: t('onboarding_wizard.plugins.jira'),
-                                    defaultMessage: 'Jira',
+                                    id: 'onboarding_wizard.plugins.jira',
+                                    buttonText: formatMessage({
+                                        id: 'onboarding_wizard.plugins.jira',
+                                        defaultMessage: 'Jira',
+                                    }),
                                    checked: props.options.jira,
                                    tooltip: formatMessage({
                                        id: 'onboarding_wizard.plugins.jira.tooltip',
@@ -124,8 +131,11 @@ const Plugins = (props: Props) => {
                                {
                                    onClick: () => props.setOption('zoom'),
                                    icon: <ZoomSVG/>,
-                                    id: t('onboarding_wizard.plugins.zoom'),
-                                    defaultMessage: 'Zoom',
+                                    id: 'onboarding_wizard.plugins.zoom',
+                                    buttonText: formatMessage({
+                                        id: 'onboarding_wizard.plugins.zoom',
+                                        defaultMessage: 'Zoom',
+                                    }),
                                    checked: props.options.zoom,
                                    tooltip: formatMessage({
                                        id: 'onboarding_wizard.plugins.zoom.tooltip',
@@ -135,8 +145,11 @@ const Plugins = (props: Props) => {
                                {
                                    onClick: () => props.setOption('servicenow'),
                                    icon: <ServiceNowSVG/>,
-                                    id: t('onboarding_wizard.plugins.servicenow'),
-                                    defaultMessage: 'ServiceNow',
+                                    id: 'onboarding_wizard.plugins.servicenow',
+                                    buttonText: formatMessage({
+                                        id: 'onboarding_wizard.plugins.servicenow',
+                                        defaultMessage: 'ServiceNow',
+                                    }),
                                    checked: props.options.servicenow,
                                    tooltip: formatMessage({
                                        id: 'onboarding_wizard.plugins.servicenow.tooltip',
--- a/webapp/channels/src/components/pricing_modal/starter_disclaimer_cta.tsx
+++ b/webapp/channels/src/components/pricing_modal/starter_disclaimer_cta.tsx
@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.

 import React from 'react';
-import {useIntl} from 'react-intl';
+import {defineMessage, useIntl} from 'react-intl';
 import {useDispatch, useSelector} from 'react-redux';
 import styled from 'styled-components';

@@ -16,7 +16,6 @@ import CloudUsageModal from 'components/cloud_usage_modal';
 import useGetLimits from 'components/common/hooks/useGetLimits';

 import {CloudProducts, ModalIdentifiers} from 'utils/constants';
-import {t} from 'utils/i18n';
 import {fallbackStarterLimits, asGBString, hasSomeLimits} from 'utils/limits';

 const Disclaimer = styled.div`
@@ -47,27 +46,27 @@ function StarterDisclaimerCTA() {
            dialogType: CloudUsageModal,
            dialogProps: {
                backdropClassName: 'cloud-usage-backdrop',
-                title: {
-                    id: t('workspace_limits.modals.informational.title'),
+                title: defineMessage({
+                    id: 'workspace_limits.modals.informational.title',
                    defaultMessage: '{planName} limits',
                    values: {
                        planName: starterProductName,
                    },
-                },
-                description: {
-                    id: t('workspace_limits.modals.informational.description.freeLimits'),
+                }),
+                description: defineMessage({
+                    id: 'workspace_limits.modals.informational.description.freeLimits',
                    defaultMessage: '{planName} is restricted to {messages} message history and {storage} file storage.',
                    values: {
                        planName: starterProductName,
                        messages: intl.formatNumber(fallbackStarterLimits.messages.history),
                        storage: asGBString(fallbackStarterLimits.files.totalStorage, intl.formatNumber),
                    },
-                },
+                }),
                secondaryAction: {
-                    message: {
-                        id: t('workspace_limits.modals.close'),
+                    message: defineMessage({
+                        id: 'workspace_limits.modals.close',
                        defaultMessage: 'Close',
-                    },
+                    }),
                    onClick: () => {
                        dispatch(closeModal(ModalIdentifiers.CLOUD_LIMITS));
                    },
--- a/webapp/channels/src/components/purchase_modal/icon_message.tsx
+++ b/webapp/channels/src/components/purchase_modal/icon_message.tsx
@@ -3,19 +3,12 @@

 import classNames from 'classnames';
 import React from 'react';
-import {FormattedMessage} from 'react-intl';

 import './icon_message.scss';
-import ExternalLink from 'components/external_link';

 type Props = {
    icon: JSX.Element;
-    title?: string;
-    subtitle?: string;
-    date?: string;
    error?: boolean;
-    buttonText?: string;
-    tertiaryBtnText?: string;
    formattedButtonText?: JSX.Element;
    formattedLinkText?: React.ReactNode;
    formattedTertiaryButonText?: JSX.Element;
@@ -23,8 +16,6 @@ type Props = {
    formattedSubtitle?: React.ReactNode;
    buttonHandler?: () => void;
    tertiaryButtonHandler?: () => void;
-    linkText?: string;
-    linkURL?: string;
    footer?: JSX.Element;
    testId?: string;
    className?: string;
@@ -33,12 +24,7 @@ type Props = {
 export default function IconMessage(props: Props) {
    const {
        icon,
-        title,
-        subtitle,
-        date,
        error,
-        buttonText,
-        tertiaryBtnText,
        formattedButtonText,
        formattedTertiaryButonText,
        formattedTitle,
@@ -46,36 +32,34 @@ export default function IconMessage(props: Props) {
        formattedLinkText,
        buttonHandler,
        tertiaryButtonHandler,
-        linkText,
-        linkURL,
        footer,
        testId,
        className,
    } = props;

    let button = null;
-    if ((buttonText || formattedButtonText) && buttonHandler) {
+    if (formattedButtonText && buttonHandler) {
        button = (
            <div className={classNames('IconMessage-button', error ? 'error' : '')}>
                <button
                    className='btn btn-primary Form-btn'
                    onClick={buttonHandler}
                >
-                    {formattedButtonText || <FormattedMessage id={buttonText}/>}
+                    {formattedButtonText}
                </button>
            </div>
        );
    }

    let tertiaryBtn = null;
-    if ((tertiaryBtnText || formattedTertiaryButonText) && tertiaryButtonHandler) {
+    if (formattedTertiaryButonText && tertiaryButtonHandler) {
        tertiaryBtn = (
            <div className={classNames('IconMessage-tertiary-button', error ? 'error' : '')}>
                <button
                    className='btn Form-btn'
                    onClick={tertiaryButtonHandler}
                >
-                    {formattedTertiaryButonText || <FormattedMessage id={tertiaryBtnText}/>}
+                    {formattedTertiaryButonText}
                </button>
            </div>
        );
@@ -88,19 +72,6 @@ export default function IconMessage(props: Props) {
                {formattedLinkText}
            </div>
        );
-    } else if (linkText && linkURL) {
-        link = (
-            <div className='IconMessage-link'>
-                <ExternalLink
-                    href={linkURL}
-                    location='icon_message'
-                >
-                    <FormattedMessage
-                        id={linkText}
-                    />
-                </ExternalLink>
-            </div>
-        );
    }
    const withTestId: {'data-testid'?: string} = {};
    if (testId) {
@@ -118,16 +89,9 @@ export default function IconMessage(props: Props) {
                    {icon}
                </div>
                <h3 className='IconMessage-h3'>
-                    {title ? <FormattedMessage id={title}/> : null}
                    {formattedTitle || null}
                </h3>
                <div className={classNames('IconMessage-sub', error || '')}>
-                    {subtitle ? (
-                        <FormattedMessage
-                            id={subtitle}
-                            values={{date}}
-                        />
-                    ) : null}
                    {formattedSubtitle || null}
                </div>
                <div className='IconMessage-buttons'>
--- a/webapp/channels/src/components/start_trial_form_modal/index.tsx
+++ b/webapp/channels/src/components/start_trial_form_modal/index.tsx
@@ -4,7 +4,7 @@
 import classNames from 'classnames';
 import React, {useEffect, useState} from 'react';
 import {Modal, Button} from 'react-bootstrap';
-import {FormattedMessage, useIntl} from 'react-intl';
+import {FormattedMessage, defineMessages, useIntl} from 'react-intl';
 import {useSelector, useDispatch} from 'react-redux';

 import {getLicenseConfig} from 'mattermost-redux/actions/general';
@@ -26,7 +26,6 @@ import Input, {SIZE} from 'components/widgets/inputs/input/input';
 import type {CustomMessageInputType} from 'components/widgets/inputs/input/input';

 import {AboutLinks, LicenseLinks, ModalIdentifiers, TELEMETRY_CATEGORIES} from 'utils/constants';
-import {t} from 'utils/i18n';

 import type {GlobalState} from 'types/store';

@@ -44,13 +43,32 @@ enum TrialLoadStatus {
    Failed = 'FAILED'
 }

-// Marker functions so i18n-extract doesn't remove strings
-t('ONE_TO_50');
-t('FIFTY_TO_100');
-t('ONE_HUNDRED_TO_500');
-t('FIVE_HUNDRED_TO_1000');
-t('ONE_THOUSAND_TO_2500');
-t('TWO_THOUSAND_FIVE_HUNDRED_AND_UP');
+defineMessages({
+    ONE_TO_50: {
+        id: 'ONE_TO_50',
+        defaultMessage: '1-50',
+    },
+    FIFTY_TO_100: {
+        id: 'FIFTY_TO_100',
+        defaultMessage: '51-100',
+    },
+    ONE_HUNDRED_TO_500: {
+        id: 'ONE_HUNDRED_TO_500',
+        defaultMessage: '101-500',
+    },
+    FIVE_HUNDRED_TO_1000: {
+        id: 'FIVE_HUNDRED_TO_1000',
+        defaultMessage: '501-1000',
+    },
+    ONE_THOUSAND_TO_2500: {
+        id: 'ONE_THOUSAND_TO_2500',
+        defaultMessage: '1001-2500',
+    },
+    TWO_THOUSAND_FIVE_HUNDRED_AND_UP: {
+        id: 'TWO_THOUSAND_FIVE_HUNDRED_AND_UP',
+        defaultMessage: '2501+',
+    },
+});

 export enum OrgSize {
    ONE_TO_50 = '1-50',