diff --git a/client/packages/portal-client/src/components/portal-menu/PortalMenu.tsx b/client/packages/portal-client/src/components/portal-menu/PortalMenu.tsx index a7f39bacf..26f2c4c84 100644 --- 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() { { setSearchText(e.target.value); @@ -112,14 +116,22 @@ export function MenuGroups() { {displayAppGroups && !!displayAppGroups?.length ? ( activeItem.includes('Pinned Apps') && favorites?.length === 0 ? ( - 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.
Click the star icon on apps + to add them to the pinned app section.
) : ( ) ) : ( - <>{searchText ? No results found for your search. : null} + <> + {searchText ? ( + No results found for your search. + ) : !hasApps ? ( + + Please select a context to display a list of applications. + + ) : null} + )} )} diff --git a/client/packages/portal-core/src/queries/portal/getAppGroups.ts b/client/packages/portal-core/src/queries/portal/getAppGroups.ts index cdad0af20..3101ea661 100644 --- 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 { - 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 index bb7de0cbd..586a2ab9c 100644 --- 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 ( - + - + {children} - - + + ); }