diff --git a/client/packages/components/src/components/app-context-message/AppContextMessage.tsx b/client/packages/components/src/components/app-context-message/AppContextMessage.tsx new file mode 100644 index 000000000..2ef122318 --- /dev/null +++ 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 && ( + + + + )} + + ); +}; diff --git a/client/packages/components/src/index.ts b/client/packages/components/src/index.ts index 9e3b2ffcd..0979b5d58 100644 --- 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 index c0e4e788d..38d7304e6 100644 --- 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 index bb032aeef..ddcb55e89 100644 --- 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() { /> - {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. - - ) : ( - - {displayAppGroups && - displayAppGroups.map((appGroup) => ( -
- { - if (app.isDisabled) { - e.preventDefault(); - return; - } - dispatchEvent( - { - name: 'onAppNavigation', - }, - - { - appKey: app.key, - isFavorite: app.isPinned, - source: 'app-menu', - } - ); - - closeMenu(); - }} - onFavorite={(app) => addFavorite(app.key)} - /> -
- ))} - - ) - ) : ( - <> - {searchText ? ( - No results found for your search. - ) : !hasApps ? ( +
+ + {displayAppGroups && !!displayAppGroups?.length ? ( + activeItem.includes('Pinned Apps') && favorites?.length === 0 ? ( - Please select a context to display a list of applications. + Looks like you do not have any pinned apps yet.
Click the star icon on + apps to add them to the pinned app section. - ) : null} - - )} + ) : ( + + {displayAppGroups && + displayAppGroups.map((appGroup) => ( +
+ { + if (app.isDisabled) { + e.preventDefault(); + return; + } + dispatchEvent( + { + name: 'onAppNavigation', + }, + + { + appKey: app.key, + isFavorite: app.isPinned, + source: 'app-menu', + } + ); + + closeMenu(); + }} + onFavorite={(app) => addFavorite(app.key)} + /> +
+ ))} + + ) + ) : ( + <> + {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-pages/src/pages/sheared/components/AllApps.tsx b/client/packages/portal-pages/src/pages/sheared/components/AllApps.tsx index 2296a5162..0f19d0df5 100644 --- 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 ( - - {appGroups && - appGroups.sort(appGroupArraySort).map((appGroup) => ( -
- { - if (app.isDisabled) { - e.preventDefault(); - return; - } - dispatchEvent( - { - name: 'onAppNavigation', - }, - - { - appKey: app.key, - isFavorite: app.isPinned, - source: 'app-menu', + <> + + + {appGroups && + appGroups.sort(appGroupArraySort).map((appGroup) => ( +
+ { + if (app.isDisabled) { + e.preventDefault(); + return; } - ); - }} - onFavorite={(app) => addFavorite(app.key)} - /> -
- ))} - + dispatchEvent( + { + name: 'onAppNavigation', + }, + + { + appKey: app.key, + isFavorite: app.isPinned, + source: 'app-menu', + } + ); + }} + onFavorite={(app) => addFavorite(app.key)} + /> +
+ ))} + + ); }; diff --git a/client/packages/ui/src/components/message/Message.tsx b/client/packages/ui/src/components/message/Message.tsx index efb4685d3..423d825a2 100644 --- 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; + } `, };