[IMPROVE] Change status/price badge to fuselage tag (#27044)

Co-authored-by: Douglas Fabris <27704687+dougfabris@users.noreply.github.com>

apps/meteor/client/views/admin/apps/AppDetailsHeader.tsx

@@ -27,9 +27,9 @@ const AppDetailsHeader = ({ app }: { app: App }): ReactElement => {
 				<Box mbe='x16'>{description}</Box>
 				<Box display='flex' flexDirection='row' alignItems='center' mbe='x16'>
 					<Box display='flex' flexDirection='row' alignItems='center'>
-						<AppStatus app={app} installed={installed} isAppDetailsPage={true} mie='x8' isSubscribed={isSubscribed} />
+						<AppStatus app={app} installed={installed} isAppDetailsPage={true} isSubscribed={isSubscribed} />
 					</Box>
-					{(installed || isSubscribed) && <AppMenu app={app} />}
+					{(installed || isSubscribed) && <AppMenu app={app} mis='x8' />}
 				</Box>
 				<Box display='flex' flexDirection='row' color='hint' alignItems='center'>
 					<Box fontScale='p2m' mie='x16'>

apps/meteor/client/views/admin/apps/AppStatus.js

-import { Box, Button, Icon, Throbber, Tooltip, PositionAnimated, AnimatedVisibility } from '@rocket.chat/fuselage';
+import { Box, Button, Icon, Throbber, Tag } from '@rocket.chat/fuselage';
 import { useSafely } from '@rocket.chat/fuselage-hooks';
-import colors from '@rocket.chat/fuselage-tokens/colors.json';
 import { useSetModal, useMethod, useTranslation } from '@rocket.chat/ui-contexts';
-import React, { useCallback, useState, useRef, memo } from 'react';
+import React, { useCallback, useState, memo } from 'react';
 
 import { Apps } from '../../../../app/apps/client/orchestrator';
 import AppPermissionsReviewModal from './AppPermissionsReviewModal';
@@ -37,9 +36,7 @@ const AppStatus = ({ app, showStatus = true, isAppDetailsPage, isSubscribed, ins
 	const t = useTranslation();
 	const [loading, setLoading] = useSafely(useState());
 	const [isAppPurchased, setPurchased] = useSafely(useState(app?.isPurchased));
-	const [isHovered, setIsHovered] = useState(false);
 	const setModal = useSetModal();
-	const statusRef = useRef();
 
 	const { price, purchaseType, pricingPlans } = app;
 
@@ -108,18 +105,12 @@ const AppStatus = ({ app, showStatus = true, isAppDetailsPage, isSubscribed, ins
 		showAppPermissionsReviewModal();
 	};
 
-	const AppStatusStyle = {
-		bg: status.label === 'Disabled' ? colors.w100 : colors.p100,
-		color: status.label === 'Disabled' ? colors.w800 : colors.p500,
-	};
-
 	const shouldShowPriceDisplay = isAppDetailsPage && button && button.action !== 'update';
 
 	return (
 		<Box {...props}>
 			{button && (
 				<Box
-					bg={isAppDetailsPage ? colors.p100 : 'transparent'}
 					display='flex'
 					flexDirection='row'
 					alignItems='center'
@@ -147,38 +138,18 @@ const AppStatus = ({ app, showStatus = true, isAppDetailsPage, isSubscribed, ins
 							</>
 						)}
 					</Button>
-					{shouldShowPriceDisplay && (
-						<Box pi='x14' color='primary-500'>
-							{!installed && (
-								<PriceDisplay purchaseType={purchaseType} pricingPlans={pricingPlans} price={price} showType={false} marginInline='x8' />
-							)}
+					{shouldShowPriceDisplay && !installed && (
+						<Box>
+							<PriceDisplay purchaseType={purchaseType} pricingPlans={pricingPlans} price={price} showType={false} />
 						</Box>
 					)}
 				</Box>
 			)}
 			{status && (
 				<>
-					<Box
-						ref={statusRef}
-						onMouseEnter={() => setIsHovered(true)}
-						onMouseLeave={() => setIsHovered(false)}
-						display='flex'
-						alignItems='center'
-						pi='x8'
-						pb='x8'
-						bg={AppStatusStyle.bg}
-						color={AppStatusStyle.color}
-					>
-						<Icon size='x20' name={status.icon} mie='x4' />
-					</Box>
-					<PositionAnimated
-						anchor={statusRef}
-						placement='top-middle'
-						margin={8}
-						visible={isHovered ? AnimatedVisibility.VISIBLE : AnimatedVisibility.HIDDEN}
-					>
-						<Tooltip bg={colors.n900} color={colors.white}>{`App ${status.label}`}</Tooltip>
-					</PositionAnimated>
+					<Tag small variant={status.label === 'Disabled' ? 'secondary-danger' : ''}>
+						{status.label}
+					</Tag>
 				</>
 			)}
 		</Box>

apps/meteor/client/views/admin/apps/PriceDisplay.tsx

 import type { AppPricingPlan } from '@rocket.chat/core-typings';
-import { Box } from '@rocket.chat/fuselage';
+import { Box, Tag, Margins } from '@rocket.chat/fuselage';
 import { TranslationKey, useTranslation } from '@rocket.chat/ui-contexts';
 import React, { FC, useMemo } from 'react';
 
@@ -37,7 +37,7 @@ const formatPriceAndPurchaseType = (purchaseType: string, pricingPlans: AppPrici
 	return { type: 'Free', price: '-' };
 };
 
-const PriceDisplay: FC<PriceDisplayProps> = ({ purchaseType, pricingPlans, price, showType = true, ...props }) => {
+const PriceDisplay: FC<PriceDisplayProps> = ({ purchaseType, pricingPlans, price, showType = true }) => {
 	const t = useTranslation();
 
 	const { type, price: formattedPrice } = useMemo(
@@ -46,14 +46,16 @@ const PriceDisplay: FC<PriceDisplayProps> = ({ purchaseType, pricingPlans, price
 	);
 
 	return (
-		<Box display='flex' flexDirection='column' {...props}>
-			{showType && (
-				<Box color='default' withTruncatedText>
-					{t(type as TranslationKey)}
-				</Box>
-			)}
-			<Box withTruncatedText>{!showType && type === 'Free' ? t(type) : formattedPrice}</Box>
-		</Box>
+		<Margins inlineStart='x8'>
+			<Tag small>
+				{showType && (
+					<Box color='default' withTruncatedText>
+						{t(type as TranslationKey)}
+					</Box>
+				)}
+				<Box withTruncatedText>{!showType && type === 'Free' ? t(type) : formattedPrice}</Box>
+			</Tag>
+		</Margins>
 	);
 };
 

apps/meteor/client/views/admin/apps/helpers.ts

@@ -170,7 +170,7 @@ export const appButtonProps = ({
 type appStatusSpanPropsResponse = {
 	type?: 'failed' | 'warning';
 	icon: 'warning' | 'ban' | 'checkmark-circled' | 'check';
-	label: 'Config Needed' | 'Failed' | 'Disabled' | 'Trial period' | 'Enabled';
+	label: 'Config Needed' | 'Failed' | 'Disabled' | 'Trial period' | 'Installed';
 };
 
 export const appStatusSpanProps = ({ installed, status, subscriptionInfo }: App): appStatusSpanPropsResponse | undefined => {
@@ -206,7 +206,7 @@ export const appStatusSpanProps = ({ installed, status, subscriptionInfo }: App)
 
 	return {
 		icon: 'check',
-		label: 'Enabled',
+		label: 'Installed',
 	};
 };
 

apps/meteor/client/views/admin/apps/helpers/filterAppsByEnabled.ts

@@ -2,4 +2,4 @@ import { appStatusSpanProps } from '../helpers';
 import { App } from '../types';
 
 export const filterAppsByEnabled = (app: App): boolean =>
-	appStatusSpanProps(app)?.label === 'Enabled' || appStatusSpanProps(app)?.label === 'Trial period';
+	appStatusSpanProps(app)?.label === 'Installed' || appStatusSpanProps(app)?.label === 'Trial period';