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;
+ }
`,
};