feat: scope service messages by current applications in context

.changeset/pr-449-1600350490.md

@@ -0,0 +1,5 @@
+
+---
+"fusion-project-portal": minor
+--- 
+Service messages are now specifically tailored to the selected project's application. Only service messages relevant to the chosen application will be displayed, ensuring that users are not confused by messages unrelated to their concerns.

client/packages/core/src/apps/hooks/index.ts

@@ -0,0 +1 @@
+export * from './use-current-apps';

client/packages/core/src/apps/hooks/use-current-apps.ts

@@ -0,0 +1,13 @@
+import { useAppGroupsQuery, App } from '@equinor/portal-core';
+import { useMemo } from 'react';
+
+export const useCurrentApps = (shouldFilter?: boolean) => {
+	const { data } = useAppGroupsQuery();
+	if (!shouldFilter) return undefined;
+	return useMemo(() => {
+		if (!data) return [];
+		return data.reduce((acc, app) => {
+			return [...acc, ...app.apps];
+		}, [] as App[]);
+	}, [data]);
+};

client/packages/core/src/apps/index.ts

@@ -0,0 +1 @@
+export * from './hooks';

client/packages/core/src/index.ts

@@ -1 +1,2 @@
 export * from './user';
+export * from './apps';

client/packages/core/tsconfig.json

@@ -13,7 +13,7 @@
     "outDir": "../../dist/out-tsc",
   },
   "files": [],
-  "include": ["**/*.tsx"]
+  "include": ["**/*.tsx", "./src"]
 
 }
 

client/packages/portal-client/src/components/portal-frame/PortalFrame.tsx

@@ -9,6 +9,7 @@ import { useBookmarkNavigate } from '@equinor/fusion-framework-react-module-book
 import { BookmarkProvider } from '@equinor/fusion-framework-react-components-bookmark';
 import { HasContext } from '../context/HasContext';
 import { css } from '@emotion/css';
+import { ServiceMessageFilter } from '../service-message-filter/ServiceMessageFilter';
 
 const style = css`
 	width: 100vw;
@@ -32,6 +33,7 @@ export const PortalFrame = () => {
 						<ViewProvider>
 							<MenuProvider>
 								<section className={style}>
+									<ServiceMessageFilter />
 									<MainHeader />
 									<MenuGroups />
 									<HasContext />

client/packages/portal-client/src/components/service-message-filter/ServiceMessageFilter.tsx

@@ -0,0 +1,19 @@
+import { useCurrentApps } from '@portal/core';
+import { useEffect } from 'react';
+import { useServiceMessage } from '@equinor/service-message';
+
+export const ServiceMessageFilter = () => {
+	const currentApps = useCurrentApps(true);
+	const { registerCurrentApps, registerPortals } = useServiceMessage();
+
+	useEffect(() => {
+		if (currentApps) {
+			registerCurrentApps(currentApps.map((app) => app.appKey));
+		}
+	}, [currentApps]);
+
+	useEffect(() => {
+		registerPortals(['Project execution portal']);
+	}, []);
+	return null;
+};

client/packages/portal-core/src/queries/hooks/use-app-groups-query.ts

@@ -5,14 +5,14 @@ import { useViewController } from '../../providers';
 import { AppGroup } from '../../types';
 import { getAppGroups } from '../portal/getAppGroups';
 
-export const useAppGroupsQuery = (): UseQueryResult<[] | AppGroup[]> => {
-  const id = useViewController().currentView?.id;
-  const currentContext = useFrameworkCurrentContext();
+export const useAppGroupsQuery = (): UseQueryResult<AppGroup[]> => {
+	const id = useViewController().currentView?.id;
+	const currentContext = useFrameworkCurrentContext();
 
-  const client = usePortalClient();
+	const client = usePortalClient();
 
-  return useQuery({
-    queryKey: ['appGroups', { id, externalId: currentContext?.externalId }],
-    queryFn: () => getAppGroups(client, id, currentContext?.externalId),
-  });
+	return useQuery({
+		queryKey: ['appGroups', { id, externalId: currentContext?.externalId }],
+		queryFn: () => getAppGroups(client, id, currentContext?.externalId),
+	});
 };

client/packages/portal-core/src/queries/portal/getAppGroups.ts

@@ -6,12 +6,12 @@ export async function getAppGroups(
 	client: IHttpClient,
 	viewId?: string,
 	contextExternalId?: string
-): Promise<AppGroup[] | []> {
+): Promise<AppGroup[]> {
 	try {
 		if (!viewId || !contextExternalId) return [];
 		const res = await client.fetch(getAppGroupsURI(viewId, contextExternalId));
 		if (!res.ok) throw res;
-		const data = (await res.json()) as AppGroup[];
+		const data = await res.json();
 		return data || [];
 	} catch (error) {
 		console.error(error);

client/packages/portal-core/src/queries/portal/index.ts

@@ -1,2 +1,3 @@
 export * from './getViewById';
 export * from './getViews';
+export * from './getAppGroups';

client/packages/service-message/components/NotificationService.tsx

@@ -1,7 +1,7 @@
 import { FC, PropsWithChildren } from 'react';
 import { useParams } from 'react-router-dom';
 
-import { useServiceMessage } from '../query/use-service-message';
+import { useServiceMessage } from '../hooks/use-service-message';
 
 import { MessageWrapper } from './MessageWrapper';
 import { css } from '@emotion/css';

client/packages/service-message/components/ServiceMessage.tsx

@@ -5,11 +5,11 @@ import { useParams } from 'react-router-dom';
 import styled from 'styled-components';
 
 import { ServiceMessageList } from './ServiceMessageList';
-import { ServiceMessageCard } from './ServiceMessageCard';
-import { AppServiceMessage } from '../provider/ServiceMessageProvider';
-import { useServiceMessage } from '../query/use-service-message';
+
+import { useServiceMessage } from '../hooks/use-service-message';
 import { PortalActionProps } from '@equinor/portal-core';
 import SideSheet from '@equinor/fusion-react-side-sheet';
+import { AppServiceMessage } from '../types/types';
 
 export function ServiceMessages({ action, onClose, open }: PortalActionProps) {
 	const { appKey } = useParams();
@@ -36,6 +36,11 @@ const StyledWrapper = styled.div`
 	flex-direction: column;
 `;
 
+const portalNameMapper = (identifier: string) => {
+	if (identifier === 'Project execution portal') return 'Project Portal';
+	return identifier;
+};
+
 export const ServiceMessageWidget: FC<ServiceMessageWidgetProps> = ({ appKey }) => {
 	const { appsMessages, portalMessages, messages } = useServiceMessage();
 	const [compact] = useState(false);
@@ -44,9 +49,16 @@ export const ServiceMessageWidget: FC<ServiceMessageWidgetProps> = ({ appKey })
 		<>
 			<StyledWrapper>
 				<Typography variant="h5">Portal ({portalMessages.length})</Typography>
-				{portalMessages.length > 0
-					? portalMessages.map((message) => <ServiceMessageCard key={message.id} message={message} />)
-					: null}
+				{portalMessages.length > 0 &&
+					portalMessages.map((portal) => (
+						<ServiceMessageList
+							key={portal.identifier}
+							messages={portal.messages}
+							title={portalNameMapper(portal.identifier)}
+							currentApp={true}
+							compact={compact}
+						/>
+					))}
 			</StyledWrapper>
 			<StyledWrapper>
 				<Typography variant="h5">App Status ({messages.filter((a) => a.scope === 'App').length})</Typography>

client/packages/service-message/components/ServiceMessageIcon.tsx

@@ -2,7 +2,7 @@ import { Icon } from '@equinor/eds-core-react';
 import { tokens } from '@equinor/eds-tokens';
 import { useMemo } from 'react';
 import styled from 'styled-components';
-import { useServiceMessage } from '../query/use-service-message';
+import { useServiceMessage } from '../hooks/use-service-message';
 import { ServiceMessage } from '../types/types';
 
 const StyledMessageChip = styled.span<{ color: string }>`

client/packages/service-message/components/index.ts

@@ -1,2 +1,2 @@
-export * from "./NotificationService"
-export * from "./ServiceMessageIcon"
+export * from './NotificationService';
+export * from './ServiceMessageIcon';

client/packages/service-message/hooks/use-service-message.ts

@@ -0,0 +1,58 @@
+import { useContext, useEffect, useState } from 'react';
+import { ServiceMessageContext } from '../provider/ServiceMessageProvider';
+
+import { AppServiceMessage, PortalServiceMessage, ServiceMessage } from '../types/types';
+
+export const useServiceMessage = (appKey?: string) => {
+	const context = useContext(ServiceMessageContext);
+
+	if (!context) {
+		throw new Error('ServiceMessageContext context used out of bounds');
+	}
+
+	useEffect(() => {
+		if (appKey) context.serviceMessages.setCurrentApp(appKey);
+	}, [appKey]);
+
+	const [messages, setMessages] = useState<ServiceMessage[]>([]);
+	const [appsMessages, setAppsMessages] = useState<AppServiceMessage[]>([]);
+	const [portalMessages, setPortalMessages] = useState<PortalServiceMessage[]>([]);
+	const [currentMessages, setCurrentMessages] = useState<ServiceMessage[]>([]);
+
+	useEffect(() => {
+		const sub = context.serviceMessages.messages$.subscribe(setMessages);
+		return () => {
+			sub.unsubscribe();
+		};
+	}, [context]);
+
+	useEffect(() => {
+		const sub = context.serviceMessages.appMessages$.subscribe(setAppsMessages);
+		return () => {
+			sub.unsubscribe();
+		};
+	}, [context]);
+
+	useEffect(() => {
+		const sub = context.serviceMessages.currentPortalAndAppMessages$.subscribe(setCurrentMessages);
+		return () => {
+			sub.unsubscribe();
+		};
+	}, [context]);
+
+	useEffect(() => {
+		const sub = context.serviceMessages.portal$.subscribe(setPortalMessages);
+		return () => {
+			sub.unsubscribe();
+		};
+	}, [context]);
+
+	return {
+		appsMessages,
+		portalMessages,
+		currentMessages,
+		messages,
+		registerCurrentApps: context.registerCurrentApps,
+		registerPortals: context.registerPortals,
+	};
+};

client/packages/service-message/index.ts

@@ -1,3 +1,4 @@
-export * from "./components/ServiceMessage"
-export * from "./components"
-export * from "./provider/ServiceMessageProvider"
+export * from './components/ServiceMessage';
+export * from './components';
+export * from './provider/ServiceMessageProvider';
+export * from './hooks/use-service-message';