regression: missing link in AppsUsageCard info (#33571)

RocketChat · Oct 17, 2024 · 9662e1a · 9662e1a
1 parent a23e699
commit 9662e1a
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 17 deletions.
diff --git a/...eor/client/views/admin/subscription/components/cards/AppsUsageCard/AppsUsageCard.spec.tsx b/...eor/client/views/admin/subscription/components/cards/AppsUsageCard/AppsUsageCard.spec.tsx
@@ -3,6 +3,7 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 
+import { PRICING_LINK } from '../../../utils/links';
 import AppsUsageCard from './AppsUsageCard';
 
 const appRoot = mockAppRoot().withTranslations('en', 'core', {
@@ -36,9 +37,7 @@ it('should render data as progress bars', async () => {
 
 	await userEvent.click(screen.getByRole('button', { name: 'Click_here_for_more_info' }));
 
-	expect(
-		screen.getByText('Community workspaces can enable up to 5 marketplace apps. Private apps can only be enabled in premium plans.'),
-	).toBeInTheDocument();
+	expect(screen.getByRole('link', { name: 'premium plans' })).toHaveAttribute('href', PRICING_LINK);
 });
 
 it('should render an upgrade button if marketplace apps reached 80% of the limit', async () => {
@@ -54,9 +53,7 @@ it('should render an upgrade button if marketplace apps reached 80% of the limit
 
 	await userEvent.click(screen.getByRole('button', { name: 'Click_here_for_more_info' }));
 
-	expect(
-		screen.getByText('Community workspaces can enable up to 5 marketplace apps. Private apps can only be enabled in premium plans.'),
-	).toBeInTheDocument();
+	expect(screen.getByRole('link', { name: 'premium plans' })).toHaveAttribute('href', PRICING_LINK);
 });
 
 it('should render a full progress bar with private apps disabled', async () => {
@@ -78,7 +75,5 @@ it('should render a full progress bar with private apps disabled', async () => {
 
 	await userEvent.click(screen.getByRole('button', { name: 'Click_here_for_more_info' }));
 
-	expect(
-		screen.getByText('Community workspaces can enable up to 5 marketplace apps. Private apps can only be enabled in premium plans.'),
-	).toBeInTheDocument();
+	expect(screen.getByRole('link', { name: 'premium plans' })).toHaveAttribute('href', PRICING_LINK);
 });
diff --git a/apps/meteor/client/views/admin/subscription/components/cards/AppsUsageCard/AppsUsageCard.tsx b/apps/meteor/client/views/admin/subscription/components/cards/AppsUsageCard/AppsUsageCard.tsx
@@ -1,8 +1,10 @@
-import { Box, Skeleton } from '@rocket.chat/fuselage';
+import { Skeleton } from '@rocket.chat/fuselage';
+import { ExternalLink } from '@rocket.chat/ui-client';
 import type { ReactElement } from 'react';
 import React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
+import { PRICING_LINK } from '../../../utils/links';
 import type { CardProps } from '../../FeatureUsageCard';
 import FeatureUsageCard from '../../FeatureUsageCard';
 import UpgradeButton from '../../UpgradeButton';
@@ -41,13 +43,11 @@ const AppsUsageCard = ({ privateAppsLimit, marketplaceAppsLimit }: AppsUsageCard
 	const card: CardProps = {
 		title: t('Apps'),
 		infoText: (
-			<Trans i18nKey='Apps_InfoText_limited' tOptions={{ marketplaceAppsMaxCount }}>
-				Community workspaces can enable up to {{ marketplaceAppsMaxCount }} marketplace apps. Private apps can only be enabled in{' '}
-				<Box is='a' href='https://www.rocket.chat/pricing' target='_blank' color='info'>
-					premium plans
-				</Box>
-				.
-			</Trans>
+			<Trans
+				i18nKey='Apps_InfoText_limited'
+				values={{ marketplaceAppsMaxCount }}
+				components={{ 1: <ExternalLink to={PRICING_LINK}>premium plans</ExternalLink> }}
+			/>
 		),
 
 		...(marketplaceAppsAboveWarning && {