feature: webserver: fusion apps service migration

.changeset/pr-806-2098564848.md

@@ -0,0 +1,15 @@
+
+---
+"fusion-project-portal": major
+--- 
+- BREAKING CHANGE: The previous proxy endpoint: `/bundles/apps/{appKey}/resources/{*resourcePath}` is no more. Instead use `/fusion-apps/{*wildcard*}` to make proxy calls against the whole Fusion Apps API. See Fusion Apps API Swagger documentation for more information about routes.
+- Migrated proxy from Fusion Portal to Fusion Apps API
+- Updated packages to latest version
+- Refactored and simplified code
+- Removed unused Project Portal variables in frontend 
+- Update frontend to use the new proxy endpoints
+- Make frontend client use the new types provided by fusion core
+- Update the legacy app loader to use the new proxy endpoints and and fix types
+- Move legacy app code to apps folder for cleaner repository
+- Setup build of legacy app loader in build pipeline for constant build an deployment. 
+- Update all Fusion dependencies for frontend client

client/apps/legacyAppLoader/.gitignore

@@ -0,0 +1,2 @@
+
+node_modules

client/apps/legacyAppLoader/app.config.ts

@@ -0,0 +1,24 @@
+import { mergeAppConfigs, defineAppConfig } from '@equinor/fusion-framework-cli';
+export default defineAppConfig((_env, { base }) =>
+	mergeAppConfigs(
+		{},
+		{
+			environment: {
+				endpoints: {
+					client: {
+						baseUri: 'https://backend-fusion-project-portal-test.radix.equinor.com',
+						defaultScopes: ['api://02f3484c-cad0-4d1d-853d-3a9e604b38f3/access_as_user'],
+					},
+					portal: {
+						baseUri: 'https://fusion-s-portal-ci.azurewebsites.net',
+						defaultScopes: ['5a842df8-3238-415d-b168-9f16a6a6031b/.default'],
+					},
+				},
+				fusionEnv: 'ci',
+				loadingText: 'Loading',
+				appKey: 'handover-garden',
+				basename: 'localhost:3000/apps/handover-garden/',
+			},
+		}
+	)
+);

client/apps/legacyAppLoader/app.manifest.config.ts

@@ -0,0 +1,7 @@
+import { defineAppManifest, mergeManifests } from '@equinor/fusion-framework-cli';
+
+export default defineAppManifest((env, { base }) => {
+	return mergeManifests(base, {
+		name: 'App-loader',
+	});
+});

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

@@ -5,26 +5,28 @@
   "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",
+    "dev:appLoader": "fusion-framework-cli app dev -c vite.config.js",
     "docker": "cd .. && sh docker-script.sh app-react",
     "update:fusion": "ncu -i -f /fusion/"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@equinor/fusion": "^3.4.13",
+    "@equinor/eds-core-react": "^0.42.0",
+    "@equinor/fusion": "^3.4.16",
     "@equinor/fusion-components": "^2.12.0",
-    "@equinor/fusion-framework-cli": "^7.0.12",
-    "@equinor/fusion-framework-module-http": "^5.1.1",
-    "@equinor/fusion-framework-module-navigation": "^3.0.6",
-    "@equinor/fusion-framework-react": "^5.3.2",
-    "@equinor/fusion-framework-react-app": "^4.1.9",
-    "@equinor/fusion-observable": "^8.1.2",
-    "@equinor/fusion-react-styles": "^0.5.11",
+    "@equinor/fusion-framework-app": "^9.1.10",
+    "@equinor/fusion-framework-module-app": "^6.0.0",
+    "@equinor/fusion-framework-module-http": "^6.2.0",
+    "@equinor/fusion-framework-module-navigation": "^4.0.7",
+    "@equinor/fusion-framework-react": "^7.3.0",
+    "@equinor/fusion-framework-react-app": "^5.2.10",
+    "@equinor/fusion-observable": "^8.4.1",
+    "@equinor/fusion-react-styles": "^0.6.2",
     "@types/react": "^17.0.70",
     "@types/react-dom": "^17.0.25",
     "react": "^17.0.1",
@@ -39,6 +41,7 @@
     "vite-tsconfig-paths": "^4.2.0"
   },
   "devDependencies": {
+    "@equinor/fusion-framework-cli": "^10.0.0",
     "@types/react-router-dom": "^5.3.3",
     "vite-plugin-static-copy": "^0.17.0"
   }

client/apps/legacyAppLoader/src/App.tsx

@@ -0,0 +1,57 @@
+import { NavigationModule } from '@equinor/fusion-framework-module-navigation';
+import { LegacyFusionWrapper } from './app-loader';
+import { AppModuleLoader } from './app-loader/components/AppModuleLoader';
+
+import { AppModule } from '@equinor/fusion-framework-module-app';
+import { Fusion, useFramework } from '@equinor/fusion-framework-react';
+
+import { ComponentRenderArgs, makeComponent, useAppModules } from '@equinor/fusion-framework-react-app';
+
+import { ProgressLoader } from './app-loader/components/ProgressLoader';
+
+import { addGlobalDependencies } from './globalResources';
+import { Suspense, createElement } from 'react';
+import configure from './config';
+
+addGlobalDependencies();
+
+export const App = (props: {
+	fusion: Fusion;
+	env: {
+		config: {
+			environment: { appKey: string; fusionEnv: string; loadingText?: string };
+		};
+	};
+}) => {
+	const fusion = useFramework<[AppModule, NavigationModule]>();
+	const appFramework = useAppModules<[AppModule]>();
+	return (
+		<LegacyFusionWrapper
+			framework={fusion}
+			options={{
+				loadBundlesFromDisk: false,
+				environment: {
+					env: props.env.config.environment.fusionEnv,
+				},
+			}}
+			loader={<ProgressLoader title={props.env.config.environment.loadingText || 'Loading'} />}
+			appFramework={appFramework}
+		>
+			<AppModuleLoader appKey={props.env?.config.environment.appKey} />
+		</LegacyFusionWrapper>
+	);
+};
+
+const appComponent = (args: any) => createElement(App, args);
+
+/** create React render root component */
+export const createApp = (args: ComponentRenderArgs) => makeComponent(appComponent(args), args, configure as any);
+
+export const AppComponent = (args: ComponentRenderArgs) => {
+	const AppComponent = createApp(args);
+	return (
+		<Suspense fallback={<></>}>
+			<AppComponent />
+		</Suspense>
+	);
+};

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

@@ -0,0 +1,61 @@
+import { NavigationModule } from '@equinor/fusion-framework-module-navigation';
+import { LegacyFusionWrapper } from './app-loader';
+import { AppModuleLoader } from './app-loader/components/AppModuleLoader';
+
+import { AppModule } from '@equinor/fusion-framework-module-app';
+import { Fusion, useFramework } from '@equinor/fusion-framework-react';
+
+import { ComponentRenderArgs, makeComponent, useAppModules } from '@equinor/fusion-framework-react-app';
+
+import { ProgressLoader } from './app-loader/components/ProgressLoader';
+
+import { addGlobalDependencies } from './globalResources';
+import { Suspense, createElement } from 'react';
+import configure from './config';
+
+addGlobalDependencies();
+
+export const App = (props: {
+	fusion: Fusion;
+	env: {
+		config: {
+			environment: { appKey: string; env: string; loadingText?: string };
+		};
+	};
+}) => {
+	const fusion = useFramework<[AppModule, NavigationModule]>();
+	const appFramework = useAppModules<[AppModule]>();
+
+	return (
+		<LegacyFusionWrapper
+			framework={fusion}
+			options={{
+				loadBundlesFromDisk: false,
+				environment: {
+					env: props.env.config.environment.env,
+				},
+			}}
+			loader={<ProgressLoader title={props.env.config.environment.loadingText || 'Loading'} />}
+			appFramework={appFramework}
+		>
+			<AppModuleLoader appKey={props.env?.config.environment.appKey} />
+		</LegacyFusionWrapper>
+	);
+};
+
+const appComponent = (args: any) => createElement(App, args);
+
+/** create React render root component */
+export const createApp = (args: ComponentRenderArgs) => {
+	return makeComponent(appComponent(args), args, configure as any);
+};
+
+export const AppComponent = (args: ComponentRenderArgs) => {
+	const AppComponent = createApp(args);
+	return 'hello';
+	return (
+		<Suspense fallback={<></>}>
+			<AppComponent />
+		</Suspense>
+	);
+};

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>
+	);
+};