fix: system throws GUI Application error while enabling, disabling and...

fix: system throws GUI Application error while enabling, disabling and uninstalling an app. (#34887)

.changeset/giant-bottles-impress.md

+---
+"@rocket.chat/meteor": patch
+"@rocket.chat/core-typings": patch
+---
+
+Fixes an issue where the system would throw the error: 'GUI Application error' while uninstalling an app(when on the requests tab).

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

@@ -17,7 +17,7 @@ const AppRequests = ({ id, isAdminUser }: { id: App['id']; isAdminUser: boolean
 	const [limit, setLimit] = useState<itemsPerPage>(25);
 	const [offset, setOffset] = useState<number>(0);
 
-	const paginatedAppRequests = useAppRequests(id, limit, offset);
+	const { isSuccess, data: paginatedAppRequests, isLoading } = useAppRequests(id, limit, offset);
 	const { t } = useTranslation();
 
 	const onSetItemsPerPage = (itemsPerPageOption: SetStateAction<itemsPerPage>) => setLimit(itemsPerPageOption);
@@ -35,8 +35,10 @@ const AppRequests = ({ id, isAdminUser }: { id: App['id']; isAdminUser: boolean
 
 	useEffect(() => {
 		return () => {
-			if (isAdminUser && paginatedAppRequests.isSuccess) {
-				const unseenRequests = paginatedAppRequests.data.data.filter(({ seen }) => !seen).map(({ id }) => id);
+			if (isAdminUser && isSuccess) {
+				// Marketplace returns data = null if the app was removed, so we need to be sure that the thing
+				// we are filtering & mapping is an array
+				const unseenRequests = (paginatedAppRequests.data || []).filter(({ seen }) => !seen).map(({ id }) => id);
 
 				if (unseenRequests.length) {
 					markAppRequestsAsSeen.mutate(unseenRequests, {
@@ -49,9 +51,9 @@ const AppRequests = ({ id, isAdminUser }: { id: App['id']; isAdminUser: boolean
 			}
 		};
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [isAdminUser, paginatedAppRequests.isSuccess, paginatedAppRequests?.data, reloadApps]);
+	}, [isAdminUser, isSuccess, paginatedAppRequests?.data, reloadApps]);
 
-	if (paginatedAppRequests.isLoading) {
+	if (isLoading) {
 		return (
 			<Box w='full' maxWidth='x608' marginInline='auto' pbs={36}>
 				<AppRequestsLoading />
@@ -62,8 +64,8 @@ const AppRequests = ({ id, isAdminUser }: { id: App['id']; isAdminUser: boolean
 	return (
 		<Box h='full' display='flex' flexDirection='column'>
 			<Box w='full' maxWidth='x608' marginInline='auto' pbs={36} flexGrow='1'>
-				{paginatedAppRequests.isSuccess && paginatedAppRequests.data.data?.length ? (
-					paginatedAppRequests.data.data.map((request) => (
+				{isSuccess && paginatedAppRequests.data?.length ? (
+					paginatedAppRequests.data.map((request) => (
 						<AppRequestItem
 							key={request.id}
 							seen={request.seen}
@@ -80,12 +82,12 @@ const AppRequests = ({ id, isAdminUser }: { id: App['id']; isAdminUser: boolean
 					</States>
 				)}
 			</Box>
-			{paginatedAppRequests.isSuccess && paginatedAppRequests.data.data?.length && (
+			{isSuccess && paginatedAppRequests.data?.length && (
 				<Pagination
 					divider
-					count={paginatedAppRequests.data.meta.total}
-					itemsPerPage={paginatedAppRequests.data.meta.limit}
-					current={paginatedAppRequests.data.meta.offset}
+					count={paginatedAppRequests.meta.total}
+					itemsPerPage={paginatedAppRequests.meta.limit}
+					current={paginatedAppRequests.meta.offset}
 					onSetItemsPerPage={onSetItemsPerPage}
 					onSetCurrent={onSetCurrent}
 				/>

packages/core-typings/src/AppRequests.ts

@@ -35,7 +35,7 @@ export type Meta = {
 };
 
 export type PaginatedAppRequests = {
-	data: AppRequest[];
+	data: AppRequest[] | null;
 	meta: Meta;
 };