From 30ef1d37d6058b15501c770370d2f9616e9efe94 Mon Sep 17 00:00:00 2001 From: Harrison Healey Date: Fri, 24 May 2024 12:05:47 -0400 Subject: [PATCH] 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 --- .../to_paid_plan_nudge_banner.tsx | 13 ++++-- .../delete_workspace/progress_modal.tsx | 21 ++++----- .../cloud_trial_announcement_bar.tsx | 24 ++++++---- .../index.tsx | 25 ++++++----- .../configuration_bar/configuration_bar.tsx | 25 ++++++----- .../announcement_bar.tsx | 9 ++-- .../overage_users_banner/index.tsx | 1 - .../payment_announcement_bar/index.tsx | 13 ++++-- .../lhs_nearing_limit_modal.tsx | 39 ++++++++-------- .../hooks/useExpandOverageUsersCheck.ts | 5 +-- .../common/hooks/useShowAdminLimitReached.ts | 29 ++++++------ .../multi_select_cards/multi_select_card.tsx | 8 +--- .../src/components/downgrade_modal/index.tsx | 10 +++-- .../overage_users_banner_notice/index.tsx | 2 +- .../preparing_workspace/plugins.tsx | 37 +++++++++++----- .../pricing_modal/starter_disclaimer_cta.tsx | 21 +++++---- .../purchase_modal/icon_message.tsx | 44 ++----------------- .../start_trial_form_modal/index.tsx | 36 +++++++++++---- 18 files changed, 184 insertions(+), 178 deletions(-) diff --git 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 index 0e39f409a1..ccd4bc381c 100644 --- 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={} showLinkAsButton={true} handleClose={showBanner} /> ); }; + +const messages = defineMessages({ + viewPlans: { + id: 'cloud_billing.nudge_to_paid.view_plans', + defaultMessage: 'View plans', + }, +}); diff --git 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 index bacaf50e8e..bac3f47af5 100644 --- 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) => { >
} icon={ { ); -}; - -export default injectIntl(DeleteWorkspaceProgressModal); +} diff --git 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 index d436ea5ddf..f91aaab82b 100644 --- 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 { /> ); - 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 { 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 { } } +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; diff --git 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 index 2679152467..74be3cd8ae 100644 --- 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 ( openPricingModal({trackingLocation: 'cloud_trial_ended_announcement_bar'})} - modalButtonText={t('more.details')} - modalButtonDefaultText={'More details'} - message={} + modalButtonText={messages.moreDetails} + message={} showLinkAsButton={true} isTallBanner={true} icon={} @@ -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; diff --git a/webapp/channels/src/components/announcement_bar/configuration_bar/configuration_bar.tsx b/webapp/channels/src/components/announcement_bar/configuration_bar/configuration_bar.tsx index 7bb6bdedd0..bccd252ca4 100644 --- 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 site URL either on the System Console or, if you\'re using GitLab Mattermost, in gitlab.rb.'; - } else { - id = t('announcement_bar.error.site_url.full'); - defaultMessage = 'Please configure your site URL on the System Console.'; - } - const values: Record = { linkSite: (msg: string) => ( { ), }; - 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 site URL either on the System Console 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 site URL on the System Console.', + }, values); + } return ( void; - modalButtonText?: string; - modalButtonDefaultText?: string; + modalButtonText?: MessageDescriptor; showLinkAsButton: boolean; icon?: ReactNode; actions: { @@ -185,14 +185,13 @@ export default class AnnouncementBar extends React.PureComponent { {message} { - this.props.showLinkAsButton && this.props.showCTA && this.props.modalButtonText && this.props.modalButtonDefaultText && + this.props.showLinkAsButton && this.props.showCTA && this.props.modalButtonText && } diff --git a/webapp/channels/src/components/announcement_bar/overage_users_banner/index.tsx b/webapp/channels/src/components/announcement_bar/overage_users_banner/index.tsx index 992bde0532..92355ce9c9 100644 --- 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} diff --git a/webapp/channels/src/components/announcement_bar/payment_announcement_bar/index.tsx b/webapp/channels/src/components/announcement_bar/payment_announcement_bar/index.tsx index deea975a1c..f770a911e2 100644 --- 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', + }, +}); diff --git 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 index 24feaf3182..1068813a55 100644 --- 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 ( diff --git a/webapp/channels/src/components/common/hooks/useExpandOverageUsersCheck.ts b/webapp/channels/src/components/common/hooks/useExpandOverageUsersCheck.ts index c52e94311f..c6763c7600 100644 --- 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', }); diff --git a/webapp/channels/src/components/common/hooks/useShowAdminLimitReached.ts b/webapp/channels/src/components/common/hooks/useShowAdminLimitReached.ts index d504da4195..e341b4cbab 100644 --- 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'}); diff --git 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 index 6eafac6561..57e8f8f335 100644 --- 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} - + {props.buttonText} {props.checked && } diff --git a/webapp/channels/src/components/downgrade_modal/index.tsx b/webapp/channels/src/components/downgrade_modal/index.tsx index c837c272e0..5ca925f393 100644 --- 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() { >
+ } icon={ { href={LicenseLinks.CONTACT_SALES} onClick={handleClick} > - {cta} + ); }, diff --git a/webapp/channels/src/components/preparing_workspace/plugins.tsx b/webapp/channels/src/components/preparing_workspace/plugins.tsx index 1093b0ad32..6027925d60 100644 --- 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: , - 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: , - 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: , - 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: , - 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: , - 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', diff --git a/webapp/channels/src/components/pricing_modal/starter_disclaimer_cta.tsx b/webapp/channels/src/components/pricing_modal/starter_disclaimer_cta.tsx index a2d08f87ab..d5b5cfbcb6 100644 --- 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)); }, diff --git a/webapp/channels/src/components/purchase_modal/icon_message.tsx b/webapp/channels/src/components/purchase_modal/icon_message.tsx index 389cc2f59e..c755bc232e 100644 --- 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 = (
); } let tertiaryBtn = null; - if ((tertiaryBtnText || formattedTertiaryButonText) && tertiaryButtonHandler) { + if (formattedTertiaryButonText && tertiaryButtonHandler) { tertiaryBtn = (
); @@ -88,19 +72,6 @@ export default function IconMessage(props: Props) { {formattedLinkText}
); - } else if (linkText && linkURL) { - link = ( -
- - - -
- ); } const withTestId: {'data-testid'?: string} = {}; if (testId) { @@ -118,16 +89,9 @@ export default function IconMessage(props: Props) { {icon}

- {title ? : null} {formattedTitle || null}

- {subtitle ? ( - - ) : null} {formattedSubtitle || null}
diff --git a/webapp/channels/src/components/start_trial_form_modal/index.tsx b/webapp/channels/src/components/start_trial_form_modal/index.tsx index 98baebf0ed..c3ff998613 100644 --- 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',