changes request

apps/meteor/client/views/admin/workspaceStatus/VersionCard/VersionCard.tsx

@@ -13,12 +13,12 @@ import { useLicense } from '../../../../hooks/useLicense';
 import { useRegistrationStatus } from '../../../../hooks/useRegistrationStatus';
 import { isOverLicenseLimits } from '../../../../lib/utils/isOverLicenseLimits';
 import VersionCardActionButton from './components/VersionCardActionButton';
+import type { VersionActionButton } from './components/VersionCardActionButton';
+import type { VersionActionItem } from './components/VersionCardActionItem';
 import VersionCardActionItemList from './components/VersionCardActionItemList';
 import { VersionCardSkeleton } from './components/VersionCardSkeleton';
 import { VersionTag } from './components/VersionTag';
-import type { VersionActionButton } from './types/VersionActionButton';
-import type { VersionActionItem } from './types/VersionActionItem';
-import type { VersionStatus } from './types/VersionStatus';
+import type { VersionStatus } from './components/VersionTag';
 
 const SUPPORT_EXTERNAL_LINK = 'https://go.rocket.chat/i/version-support';
 const RELEASES_EXTERNAL_LINK = 'https://go.rocket.chat/i/update-product';

apps/meteor/client/views/admin/workspaceStatus/VersionCard/components/VersionCardActionButton.tsx

@@ -5,12 +5,16 @@ import type { ReactElement } from 'react';
 import React, { memo } from 'react';
 
 import RegisterWorkspaceModal from '../../../cloud/modals/RegisterWorkspaceModal';
-import type { VersionActionButton } from '../types/VersionActionButton';
 
 type VersionCardActionButtonProps = {
 	actionButton: VersionActionButton;
 };
 
+export type VersionActionButton = {
+	path: string;
+	label: ReactElement;
+};
+
 const VersionCardActionButton = ({ actionButton }: VersionCardActionButtonProps): ReactElement => {
 	const router = useRouter();
 	const setModal = useSetModal();

apps/meteor/client/views/admin/workspaceStatus/VersionCard/components/VersionCardActionItem.tsx

@@ -1,9 +1,14 @@
 import { Box } from '@rocket.chat/fuselage';
+import type { Keys } from '@rocket.chat/icons';
 import { FramedIcon } from '@rocket.chat/ui-client';
 import type { ReactElement } from 'react';
 import React from 'react';
 
-import type { VersionActionItem } from '../types/VersionActionItem';
+export type VersionActionItem = {
+	type: 'danger' | 'neutral';
+	icon: Keys;
+	label: ReactElement;
+};
 
 type VersionCardActionItemProps = {
 	actionItem: VersionActionItem;

apps/meteor/client/views/admin/workspaceStatus/VersionCard/components/VersionCardActionItemList.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import type { VersionActionItem } from '../types/VersionActionItem';
+import type { VersionActionItem } from './VersionCardActionItem';
 import VersionCardActionItem from './VersionCardActionItem';
 
 type VersionCardActionItemListProps = {

apps/meteor/client/views/admin/workspaceStatus/VersionCard/components/VersionTag.tsx

@@ -2,7 +2,7 @@ import { Tag } from '@rocket.chat/fuselage';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-import type { VersionStatus } from '../types/VersionStatus';
+export type VersionStatus = 'outdated' | 'latest' | 'available_version' | undefined;
 
 type VersionTagProps = {
 	versionStatus: VersionStatus;

apps/meteor/client/views/admin/workspaceStatus/WorkspaceStatusRoute.tsx

@@ -31,6 +31,10 @@ const WorkspaceStatusRoute = (): ReactElement => {
 		downloadJsonAs(statistics, 'statistics');
 	};
 
+	if (!canViewStatistics) {
+		return <NotAuthorizedPage />;
+	}
+
 	if (isLoading) {
 		return <PageSkeleton />;
 	}
@@ -52,20 +56,16 @@ const WorkspaceStatusRoute = (): ReactElement => {
 		);
 	}
 
-	if (canViewStatistics) {
-		return (
-			<WorkspaceStatusPage
-				canViewStatistics={canViewStatistics}
-				serverInfo={serverInfo}
-				statistics={statistics}
-				instances={instances}
-				onClickRefreshButton={handleClickRefreshButton}
-				onClickDownloadInfo={handleClickDownloadInfo}
-			/>
-		);
-	}
-
-	return <NotAuthorizedPage />;
+	return (
+		<WorkspaceStatusPage
+			canViewStatistics={canViewStatistics}
+			serverInfo={serverInfo}
+			statistics={statistics}
+			instances={instances}
+			onClickRefreshButton={handleClickRefreshButton}
+			onClickDownloadInfo={handleClickDownloadInfo}
+		/>
+	);
 };
 
 export default memo(WorkspaceStatusRoute);

packages/ui-client/src/components/FramedIcon.tsx

@@ -2,23 +2,27 @@ import { Box, Icon } from '@rocket.chat/fuselage';
 import type { Keys } from '@rocket.chat/icons';
 import type { FC } from 'react';
 
-const getColors = (type: string) => {
-	switch (type) {
-		case 'danger':
-			return { color: 'status-font-on-danger', bg: 'status-background-danger' };
-		case 'info':
-			return { color: 'status-font-on-info', bg: 'status-background-info' };
-		case 'success':
-			return { color: 'status-font-on-success', bg: 'status-background-success' };
-		case 'warning':
-			return { color: 'status-font-on-warning', bg: 'status-background-warning' };
-		default:
-			return { color: 'font-secondary-info', bg: 'surface-tint' };
-	}
+type Variant = 'danger' | 'info' | 'success' | 'warning' | 'neutral';
+
+type ColorMapType = {
+	[key in Variant]: {
+		color: string;
+		bg: string;
+	};
+};
+
+const colorMap: ColorMapType = {
+	danger: { color: 'status-font-on-danger', bg: 'status-background-danger' },
+	info: { color: 'status-font-on-info', bg: 'status-background-info' },
+	success: { color: 'status-font-on-success', bg: 'status-background-success' },
+	warning: { color: 'status-font-on-warning', bg: 'status-background-warning' },
+	neutral: { color: 'font-secondary-info', bg: 'surface-tint' },
 };
 
+const getColors = (type: Variant) => colorMap[type] || colorMap.neutral;
+
 type FramedIconProps = {
-	type: 'danger' | 'info' | 'success' | 'warning' | 'neutral';
+	type: Variant;
 	icon: Keys;
 };