fix: enforce context selection to display application list in menu

equinor · Oct 10, 2023 · b0e4d54 · b0e4d54
1 parent 18be2c9
commit b0e4d54
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 32 deletions.
diff --git a/client/packages/portal-client/src/components/portal-menu/PortalMenu.tsx b/client/packages/portal-client/src/components/portal-menu/PortalMenu.tsx
@@ -72,6 +72,8 @@ export function MenuGroups() {
 		return filteredApps;
 	}, [searchText, activeItem, data, favoriteGroup]);
 
+	const hasApps = useMemo(() => Boolean(data && data.length !== 0), [data]);
+
 	const handleToggle = (name: string) => {
 		if (activeItem === name) {
 			setActiveItem('All Apps');
@@ -87,6 +89,8 @@ export function MenuGroups() {
 			<Search
 				id="app-search"
 				placeholder={'Search for apps'}
+				disabled={!hasApps}
+				title={hasApps ? 'Search for apps' : 'Please select a contest to be able to search'}
 				value={searchText}
 				onChange={(e) => {
 					setSearchText(e.target.value);
@@ -112,14 +116,22 @@ export function MenuGroups() {
 						{displayAppGroups && !!displayAppGroups?.length ? (
 							activeItem.includes('Pinned Apps') && favorites?.length === 0 ? (
 								<InfoMessage>
-									Looks like you do not have any pinned apps yet. Click the star icon on apps to add
-									them to the pinned app section.
+									Looks like you do not have any pinned apps yet. <br /> Click the star icon on apps
+									to add them to the pinned app section.
 								</InfoMessage>
 							) : (
 								<GroupWrapper appGroups={displayAppGroups} maxAppsInColumn={BREAK_COL_COUNT} />
 							)
 						) : (
-							<>{searchText ? <InfoMessage>No results found for your search.</InfoMessage> : null}</>
+							<>
+								{searchText ? (
+									<InfoMessage>No results found for your search.</InfoMessage>
+								) : !hasApps ? (
+									<InfoMessage>
+										Please select a context to display a list of applications.
+									</InfoMessage>
+								) : null}
+							</>
 						)}
 					</>
 				)}

diff --git a/client/packages/portal-core/src/queries/portal/getAppGroups.ts b/client/packages/portal-core/src/queries/portal/getAppGroups.ts
@@ -3,24 +3,22 @@ import { AppGroup } from '../../types/view';
 
 /** Get menu items based on current view id */
 export async function getAppGroups(
-  client: IHttpClient,
-  viewId?: string,
-  contextExternalId?: string
+	client: IHttpClient,
+	viewId?: string,
+	contextExternalId?: string
 ): Promise<AppGroup[] | []> {
-  try {
-    if (!viewId) return [];
-    const res = await client.fetch(getAppGroupsURI(viewId, contextExternalId));
-    if (!res.ok) throw res;
-    const data = (await res.json()) as AppGroup[];
-    return data || [];
-  } catch (error) {
-    console.error(error);
-    return [];
-  }
+	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[];
+		return data || [];
+	} catch (error) {
+		console.error(error);
+		return [];
+	}
 }
 
 function getAppGroupsURI(viewId: string, contextExternalId?: string): string {
-  return contextExternalId
-    ? `/api/work-surfaces/${viewId}/contexts/${contextExternalId}/apps`
-    : `/api/work-surfaces/${viewId}/apps`;
+	return `/api/work-surfaces/${viewId}/contexts/${contextExternalId}/apps`;
 }
diff --git a/client/packages/portal-ui/src/info-message/InfoMessage.tsx b/client/packages/portal-ui/src/info-message/InfoMessage.tsx
@@ -3,23 +3,29 @@ import { tokens } from '@equinor/eds-tokens';
 import { PropsWithChildren } from 'react';
 import styled from 'styled-components';
 
-const StylesWrapper = styled.div`
-	width: 100%;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	padding: 20% 0;
-	justify-content: center;
-	place-self: auto center;
-`;
+const Style = {
+	Wrapper: styled.div`
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		padding: 20% 0;
+		justify-content: center;
+		place-self: auto center;
+	`,
+	Typography: styled(Typography)`
+		padding-top: 1rem;
+		text-align: center;
+	`,
+};
 
 export function InfoMessage({ children }: PropsWithChildren) {
 	return (
-		<StylesWrapper>
+		<Style.Wrapper>
 			<Icon size={48} color={tokens.colors.text.static_icons__tertiary.hex} name="info_circle" />
-			<Typography color={tokens.colors.text.static_icons__tertiary.hex} variant="h6">
+			<Style.Typography color={tokens.colors.text.static_icons__tertiary.hex} variant="h6">
 				{children}
-			</Typography>
-		</StylesWrapper>
+			</Style.Typography>
+		</Style.Wrapper>
 	);
 }