feat: portal framework

.changeset/pr-759-2080482692.md

@@ -0,0 +1,3 @@
+
+---
+---

.changeset/pr-770-2086136734.md

@@ -0,0 +1,3 @@
+
+---
+---

legacyAppLoader/package.json → client/apps/legacyAppLoader/package.json

@@ -5,8 +5,8 @@
   "type": "module",
   "main": "src/index.ts",
   "scripts": {
-    "prebuild": "rm -f ../client/packages/portal-client/src/assets/appLegacyLoader.js",
-    "build": "fusion-framework-cli app build && mv ./dist/app-bundle.js ../client/packages/portal-client/src/assets/appLegacyLoader.js",
+    "prebuild": "rm -f ../../packages/portal-client/src/assets/appLegacyLoader.js",
+    "build:appLoader": "fusion-framework-cli app build && mv ./dist/app-bundle.js ../../packages/portal-client/src/assets/appLegacyLoader.js",
     "build:resources": "tsc && vite build",
     "dev": "fusion-framework-cli app dev -c vite.config.js",
     "docker": "cd .. && sh docker-script.sh app-react",
@@ -42,4 +42,4 @@
     "@types/react-router-dom": "^5.3.3",
     "vite-plugin-static-copy": "^0.17.0"
   }
-}
+}

client/apps/legacyAppLoader/src/app-loader/components/LegacyAppLoader.tsx

@@ -0,0 +1,45 @@
+import { lazy } from 'react';
+import AppWrapperLegacy, { getLegacyFusion } from './LegacyAppWrapper';
+
+import { AppConfig } from '@equinor/fusion-framework-module-app';
+import { AppManifest as LegacyAppManifest } from '@equinor/fusion';
+
+import LegacyAppContainer from '../legacy-interopt/LegacyAppContainer';
+import { MessagePage } from './MessagePage';
+export type LegacyEnv = {
+	basename: string;
+	config: AppConfig;
+	manifest: LegacyAppManifest;
+};
+
+export const createLegacyAppLoader = (appKey: string) =>
+	lazy(async () => {
+		const appContainer = getLegacyFusion().app.container as LegacyAppContainer;
+		const [basename] = window.location.pathname.match(/\/?apps\/[a-z|-]+\//) ?? [''];
+
+		if (Object.keys(appContainer.allApps).length === 0) {
+			await appContainer.getAllAsync();
+		}
+
+		const config = await appContainer.setCurrentAppAsync(appKey);
+
+		if (!config) {
+			return {
+				default: () => <MessagePage type="Warning" title="No config" />,
+			};
+		}
+
+		const env = {
+			basename,
+			config,
+			manifest: { ...appContainer.currentApp } as LegacyAppManifest,
+		};
+
+		return {
+			default: () => (
+				<>
+					<AppWrapperLegacy appKey={appKey} env={env} />
+				</>
+			),
+		};
+	});

client/apps/legacyAppLoader/src/app-loader/components/LegacyAppWrapper.tsx

@@ -0,0 +1,63 @@
+import { Suspense, useMemo } from 'react';
+
+import { useFramework } from '@equinor/fusion-framework-react';
+
+import { GLOBAL_FUSION_CONTEXT_KEY } from '../legacy-interopt/static';
+import { createLegacyRender } from '../legacy-interopt';
+
+import { MessagePage } from './MessagePage';
+import { ProgressLoader } from './ProgressLoader';
+
+import { LegacyEnv } from './LegacyAppLoader';
+
+const DEBUG_LOG = false;
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+export const getLegacyFusion = () => window[GLOBAL_FUSION_CONTEXT_KEY];
+/**
+ * Legacy wrapper element
+ * this should be removed in future when applications are moved over to ESM
+ */
+
+export const AppWrapperLegacy = (props: { appKey: string; env: LegacyEnv }): JSX.Element => {
+	const { appKey, env } = props;
+	const fusion = useFramework();
+	const legacyFusion = getLegacyFusion();
+	const manifest = getLegacyFusion().app.container.get(appKey) || null;
+
+	const AppComponent = useMemo(() => {
+		if (!manifest) {
+			console.warn('🌍❗️ Portal Legacy:', 'missing application manifest');
+			return null;
+		}
+
+		/** sanity check if the `registerApp` has been loaded */
+		if (!manifest.render && !manifest.AppComponent) {
+			DEBUG_LOG &&
+				console.warn('🌍❗️ Portal Legacy:', 'no render or component, make sure app script is loading');
+			return null;
+		}
+
+		DEBUG_LOG && console.debug('🌍 Portal:', 'creating application component', manifest);
+
+		const render = manifest.render ?? createLegacyRender(manifest, legacyFusion);
+		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+		// @ts-ignore
+		return render(fusion, env);
+	}, [fusion, legacyFusion, manifest, env]);
+
+	if (!AppComponent) {
+		return (
+			<MessagePage title="Loader Error">
+				<p>Failed to render application, missing app component</p>
+			</MessagePage>
+		);
+	}
+	return (
+		<Suspense fallback={<ProgressLoader title="Loading" />}>
+			<AppComponent />
+		</Suspense>
+	);
+};
+
+export default AppWrapperLegacy;

client/apps/legacyAppLoader/src/app-loader/components/LegacyWrapper.tsx

@@ -0,0 +1,23 @@
+import { useFramework } from '@equinor/fusion-framework-react';
+import { PropsWithChildren } from 'react';
+
+import { AppModule } from '@equinor/fusion-framework-module-app';
+import { NavigationModule } from '@equinor/fusion-framework-module-navigation';
+import { LegacyFusionWrapper } from '../legacy-interopt/components';
+import { useAppModules } from '@equinor/fusion-framework-react-app';
+import { ProgressLoader } from './ProgressLoader';
+
+export const LegacyWrapper = ({ children }: PropsWithChildren<unknown>) => {
+	const framework = useFramework<[AppModule, NavigationModule]>();
+	const appFramework = useAppModules<[AppModule]>();
+
+	return (
+		<LegacyFusionWrapper
+			framework={framework}
+			loader={<ProgressLoader title="Loading" />}
+			appFramework={appFramework}
+		>
+			{children}
+		</LegacyFusionWrapper>
+	);
+};

client/package.json

@@ -7,6 +7,7 @@
     "start": "npx lerna run serve",
     "build": "npx lerna run build",
     "build:apps": "npx lerna run build:apps",
+    "build:appLoader": "npx lerna run build:appLoader",
     "test:all": "test:coverage && build:coverage",
     "test": "lerna  run test",
     "test:coverage": "lerna run test:coverage",
@@ -64,27 +65,30 @@
     "@equinor/eds-core-react": "^0.36.0",
     "@equinor/eds-icons": "^0.17.0",
     "@equinor/eds-tokens": "^0.9.0",
-    "@equinor/fusion-framework-app": "^8.1.1",
-    "@equinor/fusion-framework-module-ag-grid": "^31.0.1",
-    "@equinor/fusion-framework-module-app": "^5.2.13",
-    "@equinor/fusion-framework-module-context": "^4.0.21",
-    "@equinor/fusion-framework-module-feature-flag": "^1.0.2",
-    "@equinor/fusion-framework-module-http": "^5.1.6",
-    "@equinor/fusion-framework-module-navigation": "^3.1.4",
-    "@equinor/fusion-framework-module-services": "^3.2.4",
-    "@equinor/fusion-framework-module-signalr": "^2.0.19",
-    "@equinor/fusion-framework-react": "^6.0.2",
-    "@equinor/fusion-framework-react-app": "^4.3.3",
-    "@equinor/fusion-framework-react-components-bookmark": "0.3.7",
-    "@equinor/fusion-framework-react-components-people-provider": "^1.1.15",
-    "@equinor/fusion-framework-react-module-signalr": "^2.0.18",
-    "@equinor/fusion-observable": "^8.1.5",
-    "@equinor/fusion-react-context-selector": "^0.6.0",
-    "@equinor/fusion-react-person": "^0.7.0",
-    "@equinor/fusion-react-side-sheet": "1.3.0",
+    "@equinor/fusion-framework-app": "^9.1.8",
+    "@equinor/fusion-framework-module-ag-grid": "^32.2.0",
+    "@equinor/fusion-framework-module-app": "^5.3.11",
+    "@equinor/fusion-framework-module-context": "^5.0.12",
+    "@equinor/fusion-framework-module-feature-flag": "^1.1.9",
+    "@equinor/fusion-framework-module-http": "^6.1.0",
+    "@equinor/fusion-framework-module-msal": "^3.1.5",
+    "@equinor/fusion-framework-module-navigation": "^4.0.7",
+    "@equinor/fusion-framework-module-service-discovery": "^8.0.0",
+    "@equinor/fusion-framework-module-services": "^4.1.4",
+    "@equinor/fusion-framework-module-signalr": "^4.0.0",
+    "@equinor/fusion-framework-react": "^7.2.2",
+    "@equinor/fusion-framework-react-app": "^5.2.8",
+    "@equinor/fusion-framework-react-components-bookmark": "0.5.0",
+    "@equinor/fusion-framework-react-components-people-provider": "^1.4.7",
+    "@equinor/fusion-framework-react-module-signalr": "^3.0.15",
+    "@equinor/fusion-observable": "^8.4.1",
+    "@equinor/fusion-react-context-selector": "^0.6.6",
+    "@equinor/fusion-react-person": "^0.9.2",
+    "@equinor/fusion-react-side-sheet": "1.3.3",
     "@equinor/fusion-react-skeleton": "^0.3.0",
-    "@equinor/fusion-react-styles": "^0.6.1",
+    "@equinor/fusion-react-styles": "^0.6.2",
     "@equinor/fusion-react-tooltip": "^1.1.11",
+    "@equinor/fusion-react-utils": "^2.1.1",
     "@hookform/resolvers": "^3.3.2",
     "@microsoft/applicationinsights-web": "^3.0.2",
     "@microsoft/signalr": "^7.0.0",
@@ -100,7 +104,7 @@
     "react-query": "^3.39.2",
     "react-router-dom": "^6.16.0",
     "rxjs": "^7.5.7",
-    "styled-components": "5.3.11",
+    "styled-components": "^6.1.13",
     "swiper": "^9.3.2",
     "zod": "^3.22.4"
   },

client/packages/components/src/components/app-card/components/AppIcon/IconSceleton.tsx

@@ -0,0 +1,31 @@
+import styled, { css } from 'styled-components';
+import { Skeleton, HTMLSkeletonCustomElement } from '@equinor/fusion-react-skeleton';
+import { WebComponent } from '@equinor/fusion-react-utils';
+import { tokens } from '@equinor/eds-tokens';
+
+import { AppCardType } from '../../types/types';
+
+export const primaryColor = tokens.colors.interactive.primary__resting.hex;
+
+type ElementProps = React.PropsWithChildren<
+	Partial<Pick<HTMLSkeletonCustomElement, 'size' | 'variant' | 'inactive' | 'fluid'>>
+>;
+
+export const AppIconSkeleton = styled(Skeleton as WebComponent<HTMLSkeletonCustomElement, ElementProps>)<{
+	$display: AppCardType;
+}>`
+	--fwc-skeleton-fill-color: var(--app-color-skeleton, ${primaryColor}33);
+	${({ $display }) => {
+		switch ($display) {
+			default:
+			case 'card':
+				return css`
+					margin: 1.313rem 0.625rem;
+				`;
+			case 'portal':
+				return css`
+					margin: 1.625rem 1.25rem;
+				`;
+		}
+	}}
+`;

client/packages/components/src/components/app-card/components/AppIcon/index.tsx

@@ -1,14 +1,12 @@
 import styled, { css } from 'styled-components';
-import { Skeleton } from '@equinor/fusion-react-skeleton';
-import { tokens } from '@equinor/eds-tokens';
+
 import { SkeletonSize, SkeletonVariant } from '@equinor/fusion-react-skeleton';
 import { AppCardType } from '../../types/types';
 import { defaultIcon } from './defaultIcon';
 import { AppManifest } from '../../types/types';
+import { AppIconSkeleton, primaryColor } from './IconSceleton';
 
-const primaryColor = tokens.colors.interactive.primary__resting.hex;
-
-export const Styled = {
+export const Styles = {
 	AppIcon: styled.div<{ $display: AppCardType }>`
 		${({ $display }) => {
 			switch ($display) {
@@ -21,7 +19,7 @@ export const Styled = {
 					`;
 				case 'card':
 					return css`
-						--app-icon-size: 1.5rem;
+						--app-icon-size: 1.5rem;a
 						--background-radius: 0.25rem 0 0 0.25rem;
 						padding: 0 0.375rem;
 					`;
@@ -76,22 +74,6 @@ export const Styled = {
 			return '';
 		}}
 	`,
-	AppIconSkeleton: styled(Skeleton)<{ $display: AppCardType }>`
-		--fwc-skeleton-fill-color: var(--app-color-skeleton, ${primaryColor}33);
-		${({ $display }) => {
-			switch ($display) {
-				default:
-				case 'card':
-					return css`
-						margin: 1.313rem 0.625rem;
-					`;
-				case 'portal':
-					return css`
-						margin: 1.625rem 1.25rem;
-					`;
-			}
-		}}
-	`,
 };
 
 type AppIconProps = {
@@ -106,17 +88,17 @@ export const AppIconContainer = ({ app, display, loading }: AppIconProps): JSX.E
 
 	if (loading) {
 		return (
-			<Styled.AppIconSkeletonContainer $display={display}>
-				<Styled.AppIconSkeleton
+			<Styles.AppIconSkeletonContainer $display={display}>
+				<AppIconSkeleton
 					$display={display}
 					size={display === 'card' ? SkeletonSize.XSmall : SkeletonSize.small}
 					variant={SkeletonVariant.Square}
 				/>
-			</Styled.AppIconSkeletonContainer>
+			</Styles.AppIconSkeletonContainer>
 		);
 	}
 
-	return <Styled.AppIcon $display={display} dangerouslySetInnerHTML={{ __html: appIcon || defaultIcon }} />;
+	return <Styles.AppIcon $display={display} dangerouslySetInnerHTML={{ __html: appIcon || defaultIcon }} />;
 };
 
 export default AppIconContainer;

client/packages/components/src/components/app-card/components/FavoriteCard.tsx

@@ -4,7 +4,7 @@ import { tokens } from '@equinor/eds-tokens';
 import { Link } from 'react-router-dom';
 import { Typography } from '@equinor/eds-core-react';
 
-import AppIconContainer, { Styled as IconStyled } from './AppIcon';
+import AppIconContainer, { Styles as IconStyled } from './AppIcon';
 import PinButtonContainer from './PinButton';
 import { AppManifest } from '../types/types';
 

client/packages/components/src/components/app-card/components/PortalCard.tsx

@@ -5,7 +5,7 @@ import { Styled as FavoriteStyled } from './FavoriteCard';
 import { tokens } from '@equinor/eds-tokens';
 import { Typography } from '@equinor/eds-core-react';
 
-import AppIconContainer, { Styled as IconStyled } from './AppIcon';
+import AppIconContainer, { Styles as IconStyled } from './AppIcon';
 import { getAppCardColor } from '../util/app-card-color';
 import { AppManifest } from '../types/types';
 

client/packages/components/src/components/app-context-message/AppContextMessage.tsx

@@ -1,6 +1,7 @@
 import { useFavorites } from '@portal/core';
 import styled from 'styled-components';
 import { MessageCard } from '@portal/ui';
+import { useFramework } from '@equinor/fusion-framework-react';
 
 const Styles = {
 	AppMessageWrapper: styled.div`
@@ -12,9 +13,10 @@ const APP_COUNT = 15;
 
 export const AppContextMessage = () => {
 	const { apps } = useFavorites();
+	const { context } = useFramework().modules;
 	return (
 		<>
-			{apps && apps.length < APP_COUNT && (
+			{apps && apps.length < APP_COUNT && context.currentContext && (
 				<Styles.AppMessageWrapper>
 					<MessageCard
 						title="Application and Context Expansion"

client/packages/core/src/app/hooks/mocks.ts

@@ -17,6 +17,9 @@ export const getAppManifestsMock = vi.fn();
 
 export const appProvider = new AppModuleProvider({
 	config: {
+		proxy: {
+			path: '',
+		},
 		client: {
 			getAppConfig: {
 				client: {

client/packages/core/src/app/hooks/use-app-loader.ts

@@ -28,9 +28,7 @@ export const useAppLoader = (appKey: string) => {
 					appRef.current = createAppElement();
 
 					// Generate basename for application regex extracts /apps/:appKey
-					const [basename] = window.location.pathname.match(/\/?apps\/[a-z|-]+\//g) ?? [
-						window.location.pathname,
-					];
+					const [basename] = location.pathname.match(/\/?apps\/[a-z|-]+\//g) ?? [location.pathname];
 
 					try {
 						//Casting to se if manifest is for fusion legacy application

client/packages/core/src/app/hooks/use-current-app.test.ts

@@ -21,6 +21,9 @@ export const getAppManifestsMock = vi.fn();
 
 export const appProvider = new AppModuleProvider({
 	config: {
+		proxy: {
+			path: '',
+		},
 		client: {
 			getAppConfig: {
 				client: {