fix: Show error when application is deleted form app service

.changeset/pr-896-2237159974.md

@@ -0,0 +1,5 @@
+
+---
+"fusion-project-portal": patch
+--- 
+Show error when application is deleted form app service

client/apps/portal-administration/src/components/AgStyle.tsx

@@ -14,6 +14,10 @@ export const AgStyles = {
 		padding: 0.5rem;
 		overflow: hidden;
 	`,
+	TextCellWrapperLeft: styled.div`
+		display: flex;
+		overflow: hidden;
+	`,
 	Chip: styled(Chip)`
 		margin-top: 0.25rem;
 	`,
@@ -59,5 +63,10 @@ export const AgStyles = {
 		}
 		height: 100%;
 		position: relative;
+
+		.notActive {
+			font-weight: bold;
+			background-color: ${tokens.colors.ui.background__danger.hex} !important;
+		}
 	`,
 };

client/apps/portal-administration/src/components/OnboardedApps/AppsTable.tsx

@@ -13,6 +13,8 @@ import { OnboardedAppsActionBar } from './OnboardedAppsActionBar';
 import { useResizeObserver } from '../../hooks/use-resise-observer';
 import { Message } from '../Message';
 
+const FAIL_MESSAGE = 'Application Error!';
+
 export const AppsTable = ({ onboardedApps }: { onboardedApps: PortalApp[] | undefined }) => {
 	const [selectedApps, setSelectedApps] = useState<PortalApp[]>([]);
 	const { mutateAsync: deleteAppByAppKey } = useDeleteOnboardedApp();
@@ -35,6 +37,9 @@ export const AppsTable = ({ onboardedApps }: { onboardedApps: PortalApp[] | unde
 						sortable: true,
 						resizable: true,
 					}}
+					rowClassRules={{
+						notActive: (params) => !Boolean(params.data?.displayName || params.data?.description),
+					}}
 					autoSizeStrategy={{
 						type: 'fitGridWidth',
 						defaultMinWidth: 80,
@@ -61,6 +66,9 @@ export const AppsTable = ({ onboardedApps }: { onboardedApps: PortalApp[] | unde
 							field: 'displayName',
 							headerName: 'Display Name',
 							filter: true,
+							valueFormatter: (params) => {
+								return params.value ? params.value : FAIL_MESSAGE;
+							},
 						},
 						{
 							field: 'appKey',

client/apps/portal-administration/src/components/PortalApps/PortalAppTable.tsx

@@ -8,6 +8,8 @@ import { ActionBar } from './ActionBar';
 import { AgStyles } from '../AgStyle';
 import { Message } from '../Message';
 
+const FAIL_MESSAGE = 'Application Error!';
+
 export const PortalAppTable = ({ portalApps, canEdit }: { portalApps: PortalApplication[]; canEdit?: boolean }) => {
 	const ref = useRef(null);
 	const [_, height] = useResizeObserver(ref);
@@ -28,6 +30,9 @@ export const PortalAppTable = ({ portalApps, canEdit }: { portalApps: PortalAppl
 						sortable: true,
 						resizable: true,
 					}}
+					rowClassRules={{
+						notActive: (params) => !Boolean(params.data?.appManifest),
+					}}
 					ensureDomOrder
 					onGridReady={(event) => {
 						const api = event.api;
@@ -57,19 +62,19 @@ export const PortalAppTable = ({ portalApps, canEdit }: { portalApps: PortalAppl
 									isActive?: boolean;
 									isContextual?: boolean;
 									appKey: string;
-									appManifest: { name: string };
+									appManifest?: { name: string };
 								}>
 							) => {
 								return (
 									<AgStyles.CellWrapper key={`active-${params.context?.appKey}`}>
 										{params.data?.isContextual ? (
 											<AgStyles.ContextIndicator
-												title={`${params.data?.appManifest.name} is activated with contexts`}
+												title={`${params.data?.appManifest?.name} is activated with contexts`}
 												active={params.data?.isContextual?.toString()}
 											/>
 										) : (
 											<AgStyles.Indicator
-												title={`${params.data?.appManifest.name} is active`}
+												title={`${params.data?.appManifest?.name} is active`}
 												active={params.data?.isActive?.toString()}
 											/>
 										)}
@@ -102,9 +107,20 @@ export const PortalAppTable = ({ portalApps, canEdit }: { portalApps: PortalAppl
 								filterOptions: ['contains', 'startsWith', 'endsWith'],
 								defaultOption: 'startsWith',
 							},
+							cellRenderer: (
+								params: CustomCellRendererProps<{
+									appManifest?: { displayName: string };
+								}>
+							) => {
+								return (
+									<AgStyles.TextCellWrapperLeft key={`active-${params.context?.appKey}`}>
+										{params.data?.appManifest ? params.data?.appManifest.displayName : FAIL_MESSAGE}
+									</AgStyles.TextCellWrapperLeft>
+								);
+							},
 						},
 						{
-							field: 'appManifest.appKey',
+							field: 'appKey',
 							maxWidth: 350,
 							headerName: 'Application key',
 							filterParams: {
@@ -120,16 +136,34 @@ export const PortalAppTable = ({ portalApps, canEdit }: { portalApps: PortalAppl
 								filterOptions: ['contains', 'startsWith', 'endsWith'],
 								defaultOption: 'startsWith',
 							},
+							cellRenderer: (
+								params: CustomCellRendererProps<{
+									appManifest?: { category: { displayName: string } };
+								}>
+							) => {
+								return (
+									<AgStyles.TextCellWrapperLeft key={`active-${params.context?.appKey}`}>
+										{params.data?.appManifest
+											? params.data?.appManifest.category.displayName
+											: FAIL_MESSAGE}
+									</AgStyles.TextCellWrapperLeft>
+								);
+							},
 						},
 
 						{
-							field: 'appManifest.description',
+							field: 'appManifest',
 							headerName: 'Description',
 							filterParams: {
 								filterOptions: ['contains', 'startsWith', 'endsWith'],
 								defaultOption: 'startsWith',
 							},
 							width: 500,
+							valueFormatter: (params) => {
+								return params.data?.appManifest
+									? params.data?.appManifest.description
+									: 'Application Missing application manifest! Application may have been deleted from Fusion app service.';
+							},
 						},
 
 						{

client/apps/portal-administration/src/query/apps-mutations.ts

@@ -1,5 +1,5 @@
 import { QueryClient } from '@tanstack/react-query';
-import {  PortalApplication } from '../types';
+import { PortalApplication } from '../types';
 
 export const mutatePortalApps = (queryClient: QueryClient, portalId: string | undefined, apps: PortalApplication[]) => {
 	queryClient.cancelQueries({ queryKey: ['portal-onboarded-apps', portalId] });
@@ -26,8 +26,10 @@ export const mutateDeletePortalApps = (
 	queryClient.cancelQueries({ queryKey: ['portal-onboarded-apps', portalId] });
 	const prevApps = queryClient.getQueryData<PortalApplication[]>(['portal-onboarded-apps', portalId]) || [];
 
-	const appKeys = apps.map((app) => app.appManifest.appKey);
-	const newApps = prevApps?.map((prevApp) => (appKeys.includes(prevApp.appManifest.appKey) ? { ...prevApp, isActive: false } : prevApp));
+	const appKeys = apps.map((app) => app.appKey);
+	const newApps = prevApps?.map((prevApp) =>
+		appKeys.includes(prevApp.appKey) ? { ...prevApp, isActive: false } : prevApp
+	);
 	queryClient.setQueryData(['portal-onboarded-apps', portalId], newApps);
 	return { prevApps, newApps };
 };

client/apps/portal-administration/src/query/apps-queries.ts

@@ -165,7 +165,7 @@ export const removePortalApps = async (client: IHttpClient, portalApps: PortalAp
 	const results: Result[] = [];
 
 	for (const app of portalApps) {
-		const result = await removePortalApp(client, app.appManifest.appKey, portalId);
+		const result = await removePortalApp(client, app.appKey, portalId);
 		results.push(result);
 	}
 

client/apps/portal-administration/src/types/index.ts

@@ -58,6 +58,7 @@ export type FormattedError = {
 
 export type PortalApp = {
 	name: string;
+	displayName: string;
 	id: string;
 	appKey: string;
 	isLegacy: boolean;