feat: new App instances page & mixed app status

.changeset/mean-apricots-confess.md

@@ -0,0 +1,7 @@
+---
+"@rocket.chat/meteor": minor
+"@rocket.chat/i18n": minor
+---
+
+Adds a new tab on App Details page to see all instances and it's statuses.
+Adds a new variant to the status tag, mixed status.

apps/meteor/client/apps/orchestrator.ts

@@ -47,7 +47,7 @@ class AppClientOrchestrator {
 	}
 
 	public async getInstalledApps(): Promise<App[]> {
-		const result = await sdk.rest.get<'/apps/installed'>('/apps/installed');
+		const result = await sdk.rest.get<'/apps/installed'>('/apps/installed', { includeClusterStatus: 'true' });
 
 		if ('apps' in result) {
 			// TODO: chapter day: multiple results are returned, but we only need one

apps/meteor/client/providers/AppsProvider/storeQueryFunction.ts

@@ -30,6 +30,7 @@ export function storeQueryFunction(
 			...app,
 			...(installedApp && {
 				private: installedApp.private,
+				clusterStatus: installedApp.clusterStatus,
 				installed: true,
 				status: installedApp.status,
 				version: installedApp.version,

apps/meteor/client/views/marketplace/AppDetailsPage/AppDetailsPage.tsx

@@ -13,6 +13,7 @@ import AppDetailsPageTabs from './AppDetailsPageTabs';
 import { handleAPIError } from '../helpers/handleAPIError';
 import { useAppInfo } from '../hooks/useAppInfo';
 import AppDetails from './tabs/AppDetails';
+import AppInstances from './tabs/AppInstances';
 import AppLogs from './tabs/AppLogs';
 import { AppLogsFilterContextualBar } from './tabs/AppLogs/Filters/AppLogsFilterContextualBar';
 import { useAppLogsFilterForm } from './tabs/AppLogs/useAppLogsFilterForm';
@@ -121,6 +122,7 @@ const AppDetailsPage = ({ id }: AppDetailsPageProps): ReactElement => {
 									isSecurityVisible={isSecurityVisible}
 									settings={settings}
 									tab={tab}
+									hasCluster={!!appData.clusterStatus}
 								/>
 								{Boolean(!tab || tab === 'details') && <AppDetails app={appData} />}
 								{tab === 'requests' && <AppRequests id={id} isAdminUser={isAdminUser} />}
@@ -143,6 +145,7 @@ const AppDetailsPage = ({ id }: AppDetailsPageProps): ReactElement => {
 										<AppLogs id={id} />
 									</FormProvider>
 								)}
+								{tab === 'instances' && <AppInstances id={id} />}
 							</>
 						)}
 					</Box>

apps/meteor/client/views/marketplace/AppDetailsPage/AppDetailsPageTabs.tsx

@@ -11,15 +11,23 @@ type AppDetailsPageTabsProps = {
 	isSecurityVisible: boolean;
 	settings: ISettings | undefined;
 	tab: string | undefined;
+	hasCluster: boolean;
 };
 
-const AppDetailsPageTabs = ({ context, installed, isSecurityVisible, settings, tab }: AppDetailsPageTabsProps): ReactElement => {
+const AppDetailsPageTabs = ({
+	context,
+	installed = false,
+	isSecurityVisible,
+	settings,
+	tab,
+	hasCluster = false,
+}: AppDetailsPageTabsProps): ReactElement => {
 	const { t } = useTranslation();
 	const isAdminUser = usePermission('manage-apps');
 
 	const router = useRouter();
 
-	const handleTabClick = (tab: 'details' | 'security' | 'releases' | 'settings' | 'logs' | 'requests') => {
+	const handleTabClick = (tab: 'details' | 'security' | 'releases' | 'settings' | 'logs' | 'requests' | 'instances') => {
 		router.navigate(
 			{
 				name: 'marketplace',
@@ -49,16 +57,21 @@ const AppDetailsPageTabs = ({ context, installed, isSecurityVisible, settings, t
 					{t('Releases')}
 				</Tabs.Item>
 			)}
-			{Boolean(installed && settings && Object.values(settings).length) && isAdminUser && (
+			{installed && Boolean(settings && Object.values(settings).length) && isAdminUser && (
 				<Tabs.Item onClick={() => handleTabClick('settings')} selected={tab === 'settings'}>
 					{t('Settings')}
 				</Tabs.Item>
 			)}
-			{Boolean(installed) && isAdminUser && isAdminUser && (
+			{installed && isAdminUser && (
 				<Tabs.Item onClick={() => handleTabClick('logs')} selected={tab === 'logs'}>
 					{t('Logs')}
 				</Tabs.Item>
 			)}
+			{hasCluster && installed && isAdminUser && (
+				<Tabs.Item onClick={() => handleTabClick('instances')} selected={tab === 'instances'}>
+					{t('Instances')}
+				</Tabs.Item>
+			)}
 		</Tabs>
 	);
 };

apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppInstances/AppInstances.spec.tsx

@@ -0,0 +1,23 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import { composeStories } from '@storybook/react';
+import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+import * as stories from './AppInstances.stories';
+
+const testCases = Object.values(composeStories(stories)).map((Story) => [Story.storyName || 'Story', Story]);
+
+test.each(testCases)(`renders AppInstances without crashing`, async (_storyname, Story) => {
+	const view = render(<Story />, { wrapper: mockAppRoot().build() });
+
+	expect(view.baseElement).toMatchSnapshot();
+});
+
+test.each(testCases)('AppInstances should have no a11y violations', async (_storyname, Story) => {
+	const { container } = render(<Story />, { wrapper: mockAppRoot().build() });
+
+	// Today we do not have exactly a pattern to handle menu cells that don't have a header
+	const results = await axe(container, { rules: { 'empty-table-header': { enabled: false } } });
+
+	expect(results).toHaveNoViolations();
+});

apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppInstances/AppInstances.stories.tsx

@@ -0,0 +1,71 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import AppInstances from './AppInstances';
+
+const statusPossibleStates = [
+	'unknown',
+	'constructed',
+	'initialized',
+	'auto_enabled',
+	'manually_enabled',
+	'compiler_error_disabled',
+	'invalid_license_disabled',
+	'invalid_installation_disabled',
+	'error_disabled',
+	'manually_disabled',
+	'invalid_settings_disabled',
+	'disabled',
+];
+
+const statusTranslations = {
+	App_status_auto_enabled: 'Enabled',
+	App_status_constructed: 'Constructed',
+	App_status_disabled: 'Disabled',
+	App_status_error_disabled: 'Disabled: Uncaught Error',
+	App_status_initialized: 'Initialized',
+	App_status_invalid_license_disabled: 'Disabled: Invalid License',
+	App_status_invalid_settings_disabled: 'Disabled: Configuration Needed',
+	App_status_manually_disabled: 'Disabled: Manually',
+	App_status_manually_enabled: 'Enabled',
+	App_status_unknown: 'Unknown',
+	App_status_invalid_installation_disabled: 'Disabled: Invalid Installation',
+	Workspace_instance: 'Workspace instance',
+};
+
+export default {
+	title: 'Components/AppInstances',
+	component: AppInstances,
+} satisfies Meta<typeof AppInstances>;
+
+type Story = StoryObj<typeof AppInstances>;
+
+export const Default: Story = {
+	decorators: [
+		mockAppRoot()
+			.withEndpoint('GET', '/apps/:id/status', () => ({
+				status: 'disabled',
+				// Using any since the actual values from the AppStatus Enum cannot be used because it was exported as a type
+				clusterStatus: statusPossibleStates.map((status, i) => ({ instanceId: `instance-id-${i}`, status })) as any,
+			}))
+			.withTranslations('en', 'core', statusTranslations)
+			.buildStoryDecorator(),
+	],
+	args: {
+		id: 'app-id',
+	},
+};
+
+export const NoResults: Story = {
+	decorators: [
+		mockAppRoot()
+			.withEndpoint('GET', '/apps/:id/status', () => ({
+				status: 'disabled',
+				clusterStatus: [],
+			}))
+			.buildStoryDecorator(),
+	],
+	args: {
+		id: 'app-id',
+	},
+};

apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppInstances/AppInstances.tsx

@@ -0,0 +1,105 @@
+import type { AppStatus } from '@rocket.chat/apps';
+import { AppStatusUtils } from '@rocket.chat/apps-engine/definition/AppStatus';
+import { Box, Palette, Tag } from '@rocket.chat/fuselage';
+import { GenericMenu } from '@rocket.chat/ui-client';
+import { useRouter } from '@rocket.chat/ui-contexts';
+import type { ReactElement } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { CustomScrollbars } from '../../../../../components/CustomScrollbars';
+import GenericNoResults from '../../../../../components/GenericNoResults';
+import {
+	GenericTable,
+	GenericTableBody,
+	GenericTableCell,
+	GenericTableHeader,
+	GenericTableHeaderCell,
+	GenericTableRow,
+} from '../../../../../components/GenericTable';
+import AccordionLoading from '../../../components/AccordionLoading';
+import { useAppInstances } from '../../../hooks/useAppInstances';
+
+type AppInstanceProps = {
+	id: string;
+};
+
+const AppInstances = ({ id }: AppInstanceProps): ReactElement => {
+	const { t } = useTranslation();
+	const { data, isSuccess, isError, isLoading } = useAppInstances({ appId: id });
+
+	const getStatusColor = (status: AppStatus) => {
+		if (AppStatusUtils.isDisabled(status) || AppStatusUtils.isError(status)) {
+			return Palette.text['font-danger'].toString();
+		}
+
+		return Palette.text['font-default'].toString();
+	};
+
+	const router = useRouter();
+
+	const handleSelectLogs = () => {
+		router.navigate(
+			{
+				name: 'marketplace',
+				params: { ...router.getRouteParameters(), tab: 'logs' },
+			},
+			{ replace: true },
+		);
+	};
+
+	return (
+		<Box h='full' w='full' marginInline='auto' color='default' pbs={24}>
+			{isLoading && <AccordionLoading />}
+			{isError && (
+				<Box maxWidth='x600' alignSelf='center'>
+					{t('App_not_found')}
+				</Box>
+			)}
+			{isSuccess && data.clusterStatus && data.clusterStatus.length > 0 && (
+				<CustomScrollbars>
+					<GenericTable w='full'>
+						<GenericTableHeader>
+							<GenericTableHeaderCell key='instanceId'>{t('Workspace_instance')}</GenericTableHeaderCell>
+							<GenericTableHeaderCell key='status'>{t('Status')}</GenericTableHeaderCell>
+							<GenericTableHeaderCell key='actions' width={64} />
+						</GenericTableHeader>
+						<GenericTableBody>
+							{data?.clusterStatus?.map((instance) => (
+								<GenericTableRow key={instance.instanceId}>
+									<GenericTableCell>{instance.instanceId}</GenericTableCell>
+									<GenericTableCell>
+										<Box justifyContent='flex-start' display='flex'>
+											<Tag medium color={getStatusColor(instance.status)}>
+												{t(`App_status_${instance.status}`)}
+											</Tag>
+										</Box>
+									</GenericTableCell>
+									<GenericTableCell>
+										<GenericMenu
+											title='Actions'
+											items={[
+												{
+													content: t('View_Logs'),
+													onClick: handleSelectLogs,
+													id: 'view-logs',
+													icon: 'desktop-text',
+												},
+											]}
+										/>
+									</GenericTableCell>
+								</GenericTableRow>
+							))}
+						</GenericTableBody>
+					</GenericTable>
+				</CustomScrollbars>
+			)}
+			{isSuccess && (!data.clusterStatus || data.clusterStatus.length === 0) && (
+				<CustomScrollbars>
+					<GenericNoResults />
+				</CustomScrollbars>
+			)}
+		</Box>
+	);
+};
+
+export default AppInstances;

apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppInstances/__snapshots__/AppInstances.spec.tsx.snap

@@ -0,0 +1,41 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`renders AppInstances without crashing 1`] = `
+<body>
+  <div>
+    <div
+      class="rcx-box rcx-box--full rcx-css-vkstbu"
+    >
+      <span
+        class="rcx-skeleton rcx-skeleton--rect rcx-css-jti8fm"
+      />
+      <span
+        class="rcx-skeleton rcx-skeleton--rect rcx-css-jti8fm"
+      />
+      <span
+        class="rcx-skeleton rcx-skeleton--rect rcx-css-jti8fm"
+      />
+    </div>
+  </div>
+</body>
+`;
+
+exports[`renders AppInstances without crashing 2`] = `
+<body>
+  <div>
+    <div
+      class="rcx-box rcx-box--full rcx-css-vkstbu"
+    >
+      <span
+        class="rcx-skeleton rcx-skeleton--rect rcx-css-jti8fm"
+      />
+      <span
+        class="rcx-skeleton rcx-skeleton--rect rcx-css-jti8fm"
+      />
+      <span
+        class="rcx-skeleton rcx-skeleton--rect rcx-css-jti8fm"
+      />
+    </div>
+  </div>
+</body>
+`;

apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppInstances/index.ts

@@ -0,0 +1 @@
+export { default } from './AppInstances';