feat: app context expansion message

equinor · Mar 18, 2024 · 8e10993 · 8e10993
1 parent 9029eb4
commit 8e10993
Show file tree

Hide file tree

Showing 6 changed files with 123 additions and 78 deletions.
diff --git a/client/packages/components/src/components/app-context-message/AppContextMessage.tsx b/client/packages/components/src/components/app-context-message/AppContextMessage.tsx
@@ -0,0 +1,30 @@
+import { useFavorites } from '@portal/core';
+import styled from 'styled-components';
+import { MessageCard } from '@portal/ui';
+
+const Styles = {
+	AppMessageWrapper: styled.div`
+		padding: 1rem 0;
+	`,
+};
+
+const APP_COUNT = 15;
+
+export const AppContextMessage = () => {
+	const { apps } = useFavorites();
+	return (
+		<>
+			{apps && apps.length < APP_COUNT && (
+				<Styles.AppMessageWrapper>
+					<MessageCard
+						title="Application and Context Expansion"
+						messages={[
+							"Currently, we're striving to expand the availability of applications to accommodate both facility and project contexts.",
+							"Due to data and certain applications lacking support for all context types, we're unable to offer all applications for all contexts at this time.",
+						]}
+					/>
+				</Styles.AppMessageWrapper>
+			)}
+		</>
+	);
+};
diff --git a/client/packages/components/src/index.ts b/client/packages/components/src/index.ts
@@ -14,3 +14,4 @@ export * from './components/app-group/AppGroup';
 export { GroupWrapper } from './components/group-wrapper/GroupWrapper';
 export * from './components/app-search/AppSearchBar';
 export * from './components/menu';
+export * from './components/app-context-message/AppContextMessage';
diff --git a/client/packages/core/src/modules/portal-config/hooks/use-favorites.ts b/client/packages/core/src/modules/portal-config/hooks/use-favorites.ts
@@ -61,6 +61,7 @@ export const useFavorites = () => {
 	}, [isPinned, appCategories]);
 
 	return {
+		apps,
 		appGroups: appGroupsWithPinned,
 		favorites: favoritesWithDisabled,
 		disabledAppKeys,

diff --git a/client/packages/portal-client/src/components/portal-menu/PortalMenu.tsx b/client/packages/portal-client/src/components/portal-menu/PortalMenu.tsx
@@ -7,7 +7,7 @@ import { useState, useMemo } from 'react';
 import { useFeature } from '@equinor/fusion-framework-react-app/feature-flag';
 import { useFavorites } from '@portal/core';
 import styled from 'styled-components';
-import { AppGroup, LoadingMenu } from '@portal/components';
+import { AppContextMessage, AppGroup, LoadingMenu } from '@portal/components';
 
 const Styles = {
 	Divider: styled.div`
@@ -59,6 +59,9 @@ const Styles = {
 		bottom: 1rem;
 		right: 1rem;
 	`,
+	AppMessageWrapper: styled.div`
+		padding: 1rem 0;
+	`,
 };
 
 export function MenuGroups() {
@@ -139,56 +142,59 @@ export function MenuGroups() {
 								/>
 							</Styles.Feature>
 						</Styles.Divider>
-						{displayAppGroups && !!displayAppGroups?.length ? (
-							activeItem.includes('Pinned Apps') && favorites?.length === 0 ? (
-								<InfoMessage>
-									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>
-							) : (
-								<Styles.Wrapper>
-									{displayAppGroups &&
-										displayAppGroups.map((appGroup) => (
-											<div key={appGroup.name}>
-												<AppGroup
-													dark={false}
-													group={appGroup}
-													onClick={(app, e) => {
-														if (app.isDisabled) {
-															e.preventDefault();
-															return;
-														}
-														dispatchEvent(
-															{
-																name: 'onAppNavigation',
-															},
-
-															{
-																appKey: app.key,
-																isFavorite: app.isPinned,
-																source: 'app-menu',
-															}
-														);
-
-														closeMenu();
-													}}
-													onFavorite={(app) => addFavorite(app.key)}
-												/>
-											</div>
-										))}
-								</Styles.Wrapper>
-							)
-						) : (
-							<>
-								{searchText ? (
-									<InfoMessage>No results found for your search.</InfoMessage>
-								) : !hasApps ? (
+						<div>
+							<AppContextMessage />
+							{displayAppGroups && !!displayAppGroups?.length ? (
+								activeItem.includes('Pinned Apps') && favorites?.length === 0 ? (
 									<InfoMessage>
-										Please select a context to display a list of applications.
+										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>
-								) : null}
-							</>
-						)}
+								) : (
+									<Styles.Wrapper>
+										{displayAppGroups &&
+											displayAppGroups.map((appGroup) => (
+												<div key={appGroup.name}>
+													<AppGroup
+														dark={false}
+														group={appGroup}
+														onClick={(app, e) => {
+															if (app.isDisabled) {
+																e.preventDefault();
+																return;
+															}
+															dispatchEvent(
+																{
+																	name: 'onAppNavigation',
+																},
+
+																{
+																	appKey: app.key,
+																	isFavorite: app.isPinned,
+																	source: 'app-menu',
+																}
+															);
+
+															closeMenu();
+														}}
+														onFavorite={(app) => addFavorite(app.key)}
+													/>
+												</div>
+											))}
+									</Styles.Wrapper>
+								)
+							) : (
+								<>
+									{searchText ? (
+										<InfoMessage>No results found for your search.</InfoMessage>
+									) : !hasApps ? (
+										<InfoMessage>
+											Please select a context to display a list of applications.
+										</InfoMessage>
+									) : null}
+								</>
+							)}
+						</div>
 					</>
 				)}
 			</Styles.MenuWrapper>

diff --git a/client/packages/portal-pages/src/pages/sheared/components/AllApps.tsx b/client/packages/portal-pages/src/pages/sheared/components/AllApps.tsx
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { AppGroup } from '@portal/components';
+import { AppContextMessage, AppGroup } from '@portal/components';
 import { appGroupArraySort, useFavorites } from '@portal/core';
 
 import { ProgressLoader } from '@equinor/portal-ui';
@@ -9,6 +9,7 @@ const Styles = {
 	Wrapper: styled.div`
 		column-count: 3;
 		max-width: calc(100vw - 490px);
+
 		gap: 1.5rem;
 
 		@media only screen and (max-width: 1500px) {
@@ -39,34 +40,37 @@ export const AllApps = () => {
 		);
 	}
 	return (
-		<Styles.Wrapper>
-			{appGroups &&
-				appGroups.sort(appGroupArraySort).map((appGroup) => (
-					<div key={appGroup.name}>
-						<AppGroup
-							dark={true}
-							group={appGroup}
-							onClick={(app, e) => {
-								if (app.isDisabled) {
-									e.preventDefault();
-									return;
-								}
-								dispatchEvent(
-									{
-										name: 'onAppNavigation',
-									},
-
-									{
-										appKey: app.key,
-										isFavorite: app.isPinned,
-										source: 'app-menu',
+		<>
+			<AppContextMessage />
+			<Styles.Wrapper>
+				{appGroups &&
+					appGroups.sort(appGroupArraySort).map((appGroup) => (
+						<div key={appGroup.name}>
+							<AppGroup
+								dark={true}
+								group={appGroup}
+								onClick={(app, e) => {
+									if (app.isDisabled) {
+										e.preventDefault();
+										return;
 									}
-								);
-							}}
-							onFavorite={(app) => addFavorite(app.key)}
-						/>
-					</div>
-				))}
-		</Styles.Wrapper>
+									dispatchEvent(
+										{
+											name: 'onAppNavigation',
+										},
+
+										{
+											appKey: app.key,
+											isFavorite: app.isPinned,
+											source: 'app-menu',
+										}
+									);
+								}}
+								onFavorite={(app) => addFavorite(app.key)}
+							/>
+						</div>
+					))}
+			</Styles.Wrapper>
+		</>
 	);
 };
diff --git a/client/packages/ui/src/components/message/Message.tsx b/client/packages/ui/src/components/message/Message.tsx
@@ -83,6 +83,9 @@ export const Styled = {
 		margin-inline-start: 0px;
 		margin-inline-end: 0px;
 		padding-inline-start: 35px;
+		& > li {
+			padding-bottom: 0.5rem;
+		}
 	`,
 };