[NEW] App request phase 2

apps/meteor/app/apps/client/orchestrator.ts

@@ -7,7 +7,7 @@ import type { IPermission } from '@rocket.chat/apps-engine/definition/permission
 import type { IAppStorageItem } from '@rocket.chat/apps-engine/server/storage/IAppStorageItem';
 import { Meteor } from 'meteor/meteor';
 import { Tracker } from 'meteor/tracker';
-import type { AppScreenshot, AppRequestFilter, Pagination, IRestResponse, Serialized, AppRequest } from '@rocket.chat/core-typings';
+import type { AppScreenshot, AppRequestFilter, Serialized, AppRequestsStats, PaginatedAppRequests } from '@rocket.chat/core-typings';
 
 import type { App } from '../../../client/views/marketplace/types';
 import { dispatchToastMessage } from '../../../client/lib/toast';
@@ -98,24 +98,26 @@ class AppClientOrchestrator {
 		throw new Error('Invalid response from API');
 	}
 
-	public async getAppsFromMarketplace(): Promise<App[]> {
-		const result = await APIClient.get('/apps/marketplace');
+	public async getAppsFromMarketplace(isAdminUser?: string): Promise<App[]> {
+		const result = await APIClient.get('/apps/marketplace', { isAdminUser });
 
 		if (!Array.isArray(result)) {
 			// TODO: chapter day: multiple results are returned, but we only need one
 			throw new Error('Invalid response from API');
 		}
 
 		return (result as App[]).map((app: App) => {
-			const { latest, price, pricingPlans, purchaseType, isEnterpriseOnly, modifiedAt, bundledIn } = app;
+			const { latest, appRequestStats, price, pricingPlans, purchaseType, isEnterpriseOnly, modifiedAt, bundledIn, requestedEndUser } = app;
 			return {
 				...latest,
+				appRequestStats,
 				price,
 				pricingPlans,
 				purchaseType,
 				isEnterpriseOnly,
 				modifiedAt,
 				bundledIn,
+				requestedEndUser,
 			};
 		});
 	}
@@ -246,26 +248,30 @@ class AppClientOrchestrator {
 
 	public async appRequests(
 		appId: string,
-		filter: AppRequestFilter,
-		sort: string,
-		pagination: Pagination,
-	): Promise<IRestResponse<AppRequest>> {
+		filter?: AppRequestFilter,
+		sort?: string,
+		limit?: number,
+		offset?: number,
+	): Promise<PaginatedAppRequests> {
 		try {
-			const response: IRestResponse<AppRequest> = await APIClient.get(
-				`/apps/app-request?appId=${appId}&q=${filter}&sort=${sort}&limit=${pagination.limit}&offset=${pagination.offset}`,
-			);
+			const response = await APIClient.get(`/apps/app-request?appId=${appId}&q=${filter}&sort=${sort}&limit=${limit}&offset=${offset}`);
 
-			const restResponse = {
-				data: response.data,
-				meta: response.meta,
-			};
-
-			return restResponse;
+			return response;
 		} catch (e: unknown) {
 			throw new Error('Could not get the list of app requests');
 		}
 	}
 
+	public async getAppRequestsStats(): Promise<AppRequestsStats> {
+		try {
+			const response = await APIClient.get('/apps/app-request/stats');
+
+			return response;
+		} catch (e: unknown) {
+			throw new Error('Could not get the app requests stats');
+		}
+	}
+
 	public async getCategories(): Promise<Serialized<ICategory[]>> {
 		const result = await APIClient.get('/apps/categories');
 

apps/meteor/app/apps/server/communication/rest.js

@@ -98,9 +98,15 @@ export class AppsRestApi {
 						headers.Authorization = `Bearer ${token}`;
 					}
 
+					const customQueryParams = new URLSearchParams();
+
+					if (this.queryParams.isAdminUser === 'false') {
+						customQueryParams.set('endUserID', this.user._id);
+					}
+
 					let result;
 					try {
-						result = HTTP.get(`${baseUrl}/v1/apps`, {
+						result = HTTP.get(`${baseUrl}/v1/apps?${customQueryParams.toString()}`, {
 							headers,
 						});
 					} catch (e) {
@@ -1087,11 +1093,11 @@ export class AppsRestApi {
 					}
 
 					try {
-						const data = HTTP.get(`${baseUrl}/v1/app-request?appId=${appId}&q=${q}&sort=${sort}&limit=${limit}&offset=${offset}`, {
+						const result = HTTP.get(`${baseUrl}/v1/app-request?appId=${appId}&q=${q}&sort=${sort}&limit=${limit}&offset=${offset}`, {
 							headers,
 						});
 
-						return API.v1.success({ data });
+						return API.v1.success(result.data);
 					} catch (e) {
 						orchestrator.getRocketChatLogger().error('Error getting all non sent app requests from the Marketplace:', e.message);
 
@@ -1100,5 +1106,59 @@ export class AppsRestApi {
 				},
 			},
 		);
+
+		this.api.addRoute(
+			'app-request/stats',
+			{ authRequired: true },
+			{
+				async get() {
+					const baseUrl = orchestrator.getMarketplaceUrl();
+					const headers = getDefaultHeaders();
+
+					const token = await getWorkspaceAccessToken();
+					if (token) {
+						headers.Authorization = `Bearer ${token}`;
+					}
+
+					try {
+						const result = HTTP.get(`${baseUrl}/v1/app-request/stats`, { headers });
+
+						return API.v1.success(result.data);
+					} catch (e) {
+						orchestrator.getRocketChatLogger().error('Error getting the app requests stats from marketplace', e.message);
+
+						return API.v1.failure(e.message);
+					}
+				},
+			},
+		);
+
+		this.api.addRoute(
+			'app-request/markAsSeen',
+			{ authRequired: true },
+			{
+				async post() {
+					const baseUrl = orchestrator.getMarketplaceUrl();
+					const headers = getDefaultHeaders();
+
+					const token = await getWorkspaceAccessToken();
+					if (token) {
+						headers.Authorization = `Bearer ${token}`;
+					}
+
+					const { unseenRequests } = this.bodyParams;
+
+					try {
+						const result = HTTP.post(`${baseUrl}/v1/app-request/markAsSeen`, { headers, data: { ids: unseenRequests } });
+
+						return API.v1.success(result.data);
+					} catch (e) {
+						orchestrator.getRocketChatLogger().error('Error marking app requests as seen', e.message);
+
+						return API.v1.failure(e.message);
+					}
+				},
+			},
+		);
 	}
 }

apps/meteor/client/components/AdministrationList/AdministrationList.spec.tsx

@@ -30,6 +30,7 @@ describe('AdministrationList', () => {
 				accountBoxItems={[{} as any]}
 				hasAuditPermission
 				hasAuditLogPermission
+				hasManageApps
 				hasAdminPermission
 				hasAuditLicense={false}
 				onDismiss={() => null}
@@ -50,6 +51,7 @@ describe('AdministrationList', () => {
 				hasAuditLicense={false}
 				hasAuditLogPermission={false}
 				hasAuditPermission={false}
+				hasManageApps={false}
 				accountBoxItems={[{} as any]}
 				onDismiss={() => null}
 			/>,
@@ -74,6 +76,7 @@ describe('AdministrationList', () => {
 				hasAuditLicense={false}
 				hasAuditLogPermission={false}
 				hasAuditPermission={false}
+				hasManageApps={false}
 				accountBoxItems={[{} as any]}
 				onDismiss={() => null}
 			/>,

apps/meteor/client/components/AdministrationList/AdministrationList.tsx

@@ -1,5 +1,5 @@
 import { OptionDivider } from '@rocket.chat/fuselage';
-import type { FC } from 'react';
+import type { ReactElement } from 'react';
 import React, { Fragment } from 'react';
 
 import type { AccountBoxItem, IAppAccountBoxItem } from '../../../app/ui-utils/client/lib/AccountBox';
@@ -15,15 +15,17 @@ type AdministrationListProps = {
 	hasAuditLicense: boolean;
 	hasAuditPermission: boolean;
 	hasAuditLogPermission: boolean;
+	hasManageApps: boolean;
 };
 
-const AdministrationList: FC<AdministrationListProps> = ({
+const AdministrationList = ({
 	accountBoxItems,
 	hasAuditPermission,
 	hasAuditLogPermission,
 	hasAdminPermission,
+	hasManageApps,
 	onDismiss,
-}) => {
+}: AdministrationListProps): ReactElement => {
 	const appBoxItems = accountBoxItems.filter((item): item is IAppAccountBoxItem => isAppAccountBoxItem(item));
 	const adminBoxItems = accountBoxItems.filter((item): item is AccountBoxItem => !isAppAccountBoxItem(item));
 	const showAudit = hasAuditPermission || hasAuditLogPermission;
@@ -32,7 +34,7 @@ const AdministrationList: FC<AdministrationListProps> = ({
 
 	const list = [
 		showAdmin && <AdministrationModelList showWorkspace={showWorkspace} accountBoxItems={adminBoxItems} onDismiss={onDismiss} />,
-		<AppsModelList appBoxItems={appBoxItems} onDismiss={onDismiss} />,
+		<AppsModelList appBoxItems={appBoxItems} onDismiss={onDismiss} appsManagementAllowed={hasManageApps} />,
 		showAudit && <AuditModelList showAudit={hasAuditPermission} showAuditLog={hasAuditLogPermission} onDismiss={onDismiss} />,
 	];
 

apps/meteor/client/components/AdministrationList/AppsModelList.spec.tsx

@@ -14,18 +14,47 @@ describe('AppsModelList', () => {
 			'../../../app/ui-message/client/ActionManager': {
 				triggerActionButtonAction: {},
 			},
+			'../../views/marketplace/hooks/useAppRequestStats': {
+				useAppRequestStats: () => {
+					return {
+						isLoading: false,
+						data: {
+							data: {
+								totalUnseen: 5,
+							},
+						},
+					};
+				},
+			},
 			...stubs,
 		}).default;
 	};
 
-	it('should render apps', async () => {
+	it('should render all apps options when a user has manage apps permission', async () => {
 		const AppsModelList = loadMock();
 
-		render(<AppsModelList onDismiss={() => null} appBoxItems={[]} />);
+		render(<AppsModelList onDismiss={() => null} appBoxItems={[]} appsManagementAllowed />);
 
 		expect(screen.getByText('Apps')).to.exist;
 		expect(screen.getByText('Marketplace')).to.exist;
 		expect(screen.getByText('Installed')).to.exist;
+		expect(screen.getByText('Requested')).to.exist;
+	});
+
+	it('should render only marketplace and installed options when a user does not have manage apps permission', async () => {
+		const AppsModelList = loadMock({
+			'@rocket.chat/ui-contexts': {
+				'useAtLeastOnePermission': (): boolean => false,
+				'@noCallThru': false,
+			},
+		});
+
+		render(<AppsModelList onDismiss={() => null} appBoxItems={[]} appsManagementAllowed={false} />);
+
+		expect(screen.getByText('Apps')).to.exist;
+		expect(screen.getByText('Marketplace')).to.exist;
+		expect(screen.getByText('Installed')).to.exist;
+		expect(screen.queryByText('Requested')).to.not.exist;
 	});
 
 	context('when clicked', () => {
@@ -36,7 +65,7 @@ describe('AppsModelList', () => {
 			return <RouterContextMock pushRoute={pushRoute}>{children}</RouterContextMock>;
 		};
 
-		it('should go to admin marketplace', async () => {
+		it('should go to marketplace', async () => {
 			const AppsModelList = loadMock();
 
 			render(<AppsModelList onDismiss={handleDismiss} appBoxItems={[]} />, { wrapper: ProvidersMock });
@@ -59,6 +88,18 @@ describe('AppsModelList', () => {
 			await waitFor(() => expect(handleDismiss).to.have.been.called());
 		});
 
+		it('should go to requested if user has manage apps permission', async () => {
+			const AppsModelList = loadMock();
+
+			render(<AppsModelList onDismiss={handleDismiss} appBoxItems={[]} appsManagementAllowed />, { wrapper: ProvidersMock });
+
+			const button = screen.getByText('Requested');
+
+			userEvent.click(button);
+			await waitFor(() => expect(pushRoute).to.have.been.called.with('marketplace', { context: 'requested', page: 'list' }));
+			await waitFor(() => expect(handleDismiss).to.have.been.called());
+		});
+
 		it('should render apps and trigger action', async () => {
 			const triggerActionButtonAction = spy();
 
@@ -69,7 +110,7 @@ describe('AppsModelList', () => {
 				},
 			});
 
-			render(<AppsModelList onDismiss={handleDismiss} appBoxItems={[{ name: 'Custom App' } as any]} />, {
+			render(<AppsModelList onDismiss={handleDismiss} appBoxItems={[{ name: 'Custom App' } as any]} appsManagementAllowed />, {
 				wrapper: ProvidersMock,
 			});
 

apps/meteor/client/components/AdministrationList/AppsModelList.tsx

@@ -5,18 +5,22 @@ import React from 'react';
 
 import { triggerActionButtonAction } from '../../../app/ui-message/client/ActionManager';
 import type { IAppAccountBoxItem } from '../../../app/ui-utils/client/lib/AccountBox';
+import { useAppRequestStats } from '../../views/marketplace/hooks/useAppRequestStats';
 import ListItem from '../Sidebar/ListItem';
 
 type AppsModelListProps = {
 	appBoxItems: IAppAccountBoxItem[];
+	appsManagementAllowed?: boolean;
 	onDismiss: () => void;
 };
 
-const AppsModelList = ({ appBoxItems, onDismiss }: AppsModelListProps): ReactElement => {
+const AppsModelList = ({ appBoxItems, appsManagementAllowed, onDismiss }: AppsModelListProps): ReactElement => {
 	const t = useTranslation();
 	const marketplaceRoute = useRoute('marketplace');
 	const page = 'list';
 
+	const { data: appRequestStats, isLoading } = useAppRequestStats();
+
 	return (
 		<>
 			<OptionTitle>{t('Apps')}</OptionTitle>
@@ -38,6 +42,19 @@ const AppsModelList = ({ appBoxItems, onDismiss }: AppsModelListProps): ReactEle
 							onDismiss();
 						}}
 					/>
+
+					{appsManagementAllowed && (
+						<ListItem
+							icon='cube'
+							text={t('Requested')}
+							action={(): void => {
+								marketplaceRoute.push({ context: 'requested', page });
+								onDismiss();
+							}}
+							loading={isLoading}
+							notifications={appRequestStats?.data.totalUnseen ? appRequestStats?.data.totalUnseen : null}
+						/>
+					)}
 				</>
 				{appBoxItems.length > 0 && (
 					<>