@equinor/fusion-framework-dev-portal 1.0.0-next.0

package/CHANGELOG.md

@@ -0,0 +1,19 @@
+# @equinor/fusion-framework-dev-portal
+
+## 1.0.0-next.0
+
+### Major Changes
+
+- [#3074](https://github.com/equinor/fusion-framework/pull/3074) [`6b034e5`](https://github.com/equinor/fusion-framework/commit/6b034e5459094cea0c0f2490335eef3092390a13) Thanks [@odinr](https://github.com/odinr)! - This release introduces a new package, `@equinor/fusion-framework-dev-portal`, as part of a refactor of the `@equinor/fusion-framework-cli`.
+  The refactor moves specific functionality and code related to the development portal into its own dedicated package to improve modularity and maintainability.
+
+  Additionally, this update includes improved documentation and examples for better user guidance.
+
+  This package is a small part of the refactoring of the `@equinor/fusion-framework-cli` and is not intended for direct use in production.
+  The main purpose of this package is to provide a development portal for the Fusion framework, allowing developers to easily set up and test their applications in a local environment.
+
+  Even though this package can be used as standalone, it is recommended to use the `@equinor/fusion-framework-dev-server` package for a more complete development experience.
+
+### Patch Changes
+
+- [#3074](https://github.com/equinor/fusion-framework/pull/3074) [`6b034e5`](https://github.com/equinor/fusion-framework/commit/6b034e5459094cea0c0f2490335eef3092390a13) Thanks [@odinr](https://github.com/odinr)! - update Vite to 6.3.5

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Equinor
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,86 @@
+## Dev Portal
+
+This package provides a development portal for the Fusion framework.
+
+This Portal only contains the bare minimum to get started with the Fusion Application development. Visuals might differ from the production portal.
+
+It is recommended to use the `@equinor/fusion-framework-dev-server` package for a more complete development experience.
+This package is a small part of the refactoring of the `@equinor/fusion-framework-cli` and is not intended for direct use in production.
+
+## Installation
+
+```sh
+pnpm add @equinor/fusion-framework-dev-portal
+```
+
+## Environment Variables
+
+The following environment variables must be set in `.env` or in the environment variables of the server:
+
+- FUSION_MSAL_CLIENT_ID: The client ID for MSAL authentication.
+- FUSION_MSAL_TENANT_ID: The tenant ID for MSAL authentication.
+- FUSION_SERVICE_DISCOVERY_URL: The URL for service discovery.
+- FUSION_SERVICE_SCOPE: The scopes for the service.
+
+## Development
+
+```sh
+pnpm start
+```
+
+## Usage
+
+```ts
+import { render } from "@equinor/fusion-framework-dev-portal";
+
+const el = document.createElement("div");
+el.id = "dev-portal";
+document.body.appendChild(el);
+
+const framework = /** Fusion Framework, [Service Discovery, MSAL] */;
+
+render(el, {ref: framework});
+```
+
+### Usage with `@equinor/fusion-framework-dev-server`
+
+```ts
+import { createDevServer } from "@equinor/fusion-framework-dev-server";
+
+const portalId = '@equinor/fusion-framework-dev-portal';
+const devServer = await createDevServer({
+  spa: {
+    templateEnv: {
+      portal: {
+        id: portalId,
+        tag: 'latest',
+      }
+      /** --- Add any other environment variables you need here --- */
+    },
+  },
+  api: {
+    serviceDiscoveryUrl: "https://location.of.your.service.discovery",
+    processServices: /** generate proxy routes */
+    routes: [
+      {
+        // intercept for the dev-portal manifest
+        match: `/PROXY_SERVICE_KEY/PROXY_PATH/${options.portal}{@:tag}`,
+        middleware: async (req, res) => {
+          res.writeHead(200, { 'content-type': 'application/json' });
+          // resolve the local path to the dev-portal
+          // __CWD__/node_modules/@equinor/fusion-framework-dev-portal/dist/main.js
+          const path =  fileURLToPath('/@fs' + import.meta.resolve(portalId));
+          const manifest = {
+            build: { 
+              entrypoint: new URL(path, req.headers.referer), 
+            }
+          }
+          res.end(JSON.stringify(manifest));
+        },
+      }
+    ]
+  },
+});
+```
+
+

package/dev-server.ts

@@ -0,0 +1,96 @@
+import dotenv from 'dotenv';
+import { createDevServer, processServices } from '@equinor/fusion-framework-dev-server';
+
+import { name } from './package.json' assert { type: 'json' };
+
+dotenv.config();
+
+const clientId = process.env.FUSION_MSAL_CLIENT_ID;
+const tenantId = process.env.FUSION_MSAL_TENANT_ID;
+const serviceDiscoveryUrl = process.env.FUSION_SERVICE_DISCOVERY_URL;
+const serviceScopes = JSON.parse(process.env.FUSION_SERVICE_SCOPE || '[]') as string[];
+
+if (!clientId) {
+  throw new Error('FUSION_MSAL_CLIENT_ID is not set');
+}
+if (!tenantId) {
+  throw new Error('FUSION_MSAL_TENANT_ID is not set');
+}
+if (!serviceDiscoveryUrl) {
+  throw new Error('SERVICE_DISCOVERY_URL is not set');
+}
+if (serviceScopes.length === 0) {
+  throw new Error('SERVICE_SCOPES is not set');
+}
+
+(async () => {
+  const devServer = await createDevServer({
+    spa: {
+      templateEnv: {
+        portal: {
+          id: name,
+        },
+        title: 'Fusion SPA',
+        serviceDiscovery: {
+          url: '/@fusion-services',
+          scopes: serviceScopes,
+        },
+        msal: {
+          clientId,
+          tenantId,
+          redirectUri: '/authentication/login-callback',
+          requiresAuth: 'true',
+        },
+        serviceWorker: {
+          resources: [
+            {
+              url: '/apps-proxy',
+              rewrite: '/@fusion-api/apps',
+              scopes: serviceScopes,
+            },
+            {
+              url: '/help-proxy',
+              rewrite: '/@fusion-api/help',
+              scopes: serviceScopes,
+            },
+          ],
+        },
+      },
+    },
+    api: {
+      serviceDiscoveryUrl,
+      processServices: (dataResponse, route) => {
+        const { data, routes } = processServices(dataResponse, route);
+        return {
+          data: data.concat({
+            key: 'portals',
+            name: 'Portal Service - MOCK',
+            uri: '/@fusion-api/portals',
+          }),
+          routes,
+        };
+      },
+      routes: [
+        {
+          match: `/portals/portals/${name}{@:tag}`,
+          middleware: async (req, res) => {
+            const url = new URL('/src/main.tsx', req.headers.referer);
+            res.writeHead(200, {
+              'content-type': 'application/json',
+            });
+            res.end(
+              JSON.stringify({
+                build: {
+                  config: {},
+                  entrypoint: url,
+                },
+              }),
+            );
+          },
+        },
+      ],
+    },
+  });
+  await devServer.listen();
+  devServer.printUrls();
+})();

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@equinor/fusion-framework-dev-portal",
+  "version": "1.0.0-next.0",
+  "description": "",
+  "type": "module",
+  "module": "./dist/main.js",
+  "exports": {
+    ".": "./dist/main.js"
+  },
+  "directories": {
+    "dist": "dist"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@equinor/eds-core-react": "^0.43.0",
+    "@equinor/eds-icons": "^0.22.0",
+    "@equinor/eds-tokens": "^0.9.2",
+    "@equinor/fusion-react-context-selector": "^1.0.4",
+    "@equinor/fusion-react-progress-indicator": "^0.3.0",
+    "@equinor/fusion-react-side-sheet": "1.3.6",
+    "@equinor/fusion-react-styles": "^0.6.4",
+    "@equinor/fusion-wc-chip": "^1.2.2",
+    "@equinor/fusion-wc-person": "^3.1.8",
+    "@material-ui/styles": "^4.11.5",
+    "@rollup/plugin-commonjs": "^28.0.3",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-typescript": "^12.1.2",
+    "@types/dotenv": "^8.2.3",
+    "@types/react": "^18.2.50",
+    "@types/react-dom": "^18.2.7",
+    "dotenv": "^16.5.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.15.0",
+    "rollup": "^4.39.0",
+    "rxjs": "^7.8.1",
+    "styled-components": "^6.0.7",
+    "tsx": "^4.19.3",
+    "typescript": "^5.8.2",
+    "vite": "^6.3.5",
+    "@equinor/fusion-framework": "^7.3.13-next.0",
+    "@equinor/fusion-framework-app": "^9.3.15-next.0",
+    "@equinor/fusion-framework-module-bookmark": "^2.1.9",
+    "@equinor/fusion-framework-module-app": "^6.1.13",
+    "@equinor/fusion-framework-dev-server": "^1.0.0-next.0",
+    "@equinor/fusion-framework-module-context": "^6.0.3",
+    "@equinor/fusion-framework-module-feature-flag": "^1.1.18",
+    "@equinor/fusion-framework-module-navigation": "^5.0.2",
+    "@equinor/fusion-framework-module-services": "^6.0.2",
+    "@equinor/fusion-framework-react": "^7.4.13-next.0",
+    "@equinor/fusion-framework-react-components-bookmark": "^1.0.21-next.0",
+    "@equinor/fusion-framework-react-components-people-provider": "^1.5.18-next.0",
+    "@equinor/fusion-observable": "^8.4.9",
+    "@equinor/fusion-framework-react-module-bookmark": "^4.0.4-next.0",
+    "@equinor/fusion-query": "^5.2.8"
+  },
+  "scripts": {
+    "start": "tsx dev-server.ts",
+    "build": "rollup -c rollup.config.js",
+    "build:clean": "rm -rf dist && rm -f tsconfig.tsbuildinfo && pnpm build"
+  }
+}

package/rollup.config.js

@@ -0,0 +1,16 @@
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import typescript from '@rollup/plugin-typescript';
+
+/** @type {import('rollup').RollupOptions} */
+export default [
+  {
+    input: 'src/main.tsx',
+    output: {
+      file: 'dist/main.js', // Output bundle file
+      format: 'esm',
+      sourcemap: true,
+    },
+    plugins: [typescript(), resolve(), commonjs()],
+  },
+];

package/src/AppLoader.tsx

@@ -0,0 +1,121 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+
+import { Subscription } from 'rxjs';
+import { last } from 'rxjs/operators';
+
+import { useFramework } from '@equinor/fusion-framework-react';
+
+import { useObservableState } from '@equinor/fusion-observable/react';
+
+import { AppManifestError } from '@equinor/fusion-framework-module-app/errors.js';
+
+import { ErrorViewer } from './ErrorViewer';
+import type { AppModule } from '@equinor/fusion-framework-module-app';
+import EquinorLoader from './EquinorLoader';
+
+/**
+ * React Functional Component for handling current application
+ *
+ * this component will set the current app by provided appKey.
+ * when the appKey changes, this component will try to initialize the referred application
+ * and render it.
+ */
+export const AppLoader = (props: { readonly appKey: string }) => {
+  const { appKey } = props;
+  const fusion = useFramework<[AppModule]>();
+
+  /** reference of application section/container */
+  const ref = useRef<HTMLElement>(null);
+
+  const [loading, setLoading] = useState<boolean>(false);
+  const [error, setError] = useState<Error | undefined>();
+
+  // TODO change to `useCurrentApp`
+  /** observe and use the current selected application from framework */
+  const { value: currentApp } = useObservableState(
+    useMemo(() => fusion.modules.app.current$, [fusion.modules.app]),
+  );
+
+  useEffect(() => {
+    /** when appKey property change, assign it to current */
+    fusion.modules.app.setCurrentApp(appKey);
+  }, [appKey, fusion]);
+
+  useEffect(() => {
+    /** flag that application is loading */
+    setLoading(true);
+
+    /** clear previous errors */
+    setError(undefined);
+
+    /** create a teardown of load */
+    const subscription = new Subscription();
+
+    /** make sure that initialize is canceled and disposed if current app changes  */
+    subscription.add(
+      currentApp
+        ?.initialize()
+        .pipe(last())
+        .subscribe({
+          next: ({ manifest, script, config }) => {
+            /** generate basename for application */
+            const [basename] = window.location.pathname.match(/\/?apps\/[a-z|-]+(\/)?/g) ?? [''];
+
+            /** create a 'private' element for the application */
+            const el = document.createElement('div');
+            if (!ref.current) {
+              throw Error('Missing application mounting point');
+            }
+
+            ref.current.appendChild(el);
+
+            /** extract render callback function from javascript module */
+            const render = script.renderApp ?? script.default;
+
+            /** add application teardown to current render effect teardown */
+            subscription.add(render(el, { fusion, env: { basename, config, manifest } }));
+
+            /** remove app element when application unmounts */
+            subscription.add(() => el.remove());
+          },
+          complete: () => {
+            /** flag that application is no longer loading */
+            setLoading(false);
+          },
+          error: (err) => {
+            /** set error if initialization of application fails */
+            setError(err);
+          },
+        }),
+    );
+
+    /** teardown application when hook unmounts */
+    return () => subscription.unsubscribe();
+  }, [fusion, currentApp]);
+
+  if (error) {
+    if (error.cause instanceof AppManifestError) {
+      return (
+        <div>
+          <h2>🔥 Failed to load application manifest 🤬</h2>
+          <h3>{error.cause.type}</h3>
+          <ErrorViewer error={error} />
+        </div>
+      );
+    }
+    return (
+      <div>
+        <h2>🔥 Failed to load application 🤬</h2>
+        <ErrorViewer error={error} />
+      </div>
+    );
+  }
+
+  return (
+    <section id="application-content" ref={ref} style={{ display: 'contents' }}>
+      {loading && <EquinorLoader text="Loading Application" />}
+    </section>
+  );
+};
+
+export default AppLoader;

package/src/BookMarkSideSheet.tsx

@@ -0,0 +1,36 @@
+import { Button, Icon } from '@equinor/eds-core-react';
+import { Bookmark } from '@equinor/fusion-framework-react-components-bookmark';
+import { useBookmarkComponentContext } from '@equinor/fusion-framework-react-components-bookmark';
+import { SideSheet } from '@equinor/fusion-react-side-sheet';
+
+type BookmarkSideSheetProps = {
+  readonly isOpen: boolean;
+  readonly onClose: VoidFunction;
+};
+
+export const BookmarkSideSheet = ({ isOpen, onClose }: BookmarkSideSheetProps) => {
+  const { provider, showCreateBookmark } = useBookmarkComponentContext();
+
+  return (
+    <SideSheet isOpen={isOpen} onClose={onClose} isDismissable={true} enableFullscreen={true}>
+      <SideSheet.Indicator color={'#258800'} />
+      <SideSheet.Title title="Bookmarks" />
+      <SideSheet.SubTitle subTitle={'Application bookmarks'} />
+      <SideSheet.Actions>
+        <Button
+          disabled={!provider?.canCreateBookmarks}
+          variant="ghost"
+          onClick={() => {
+            showCreateBookmark();
+            onClose();
+          }}
+        >
+          <Icon name="add" /> Add Bookmark
+        </Button>
+      </SideSheet.Actions>
+      <SideSheet.Content>
+        <Bookmark />
+      </SideSheet.Content>
+    </SideSheet>
+  );
+};

package/src/ContextSelector/ContextSelector.tsx

@@ -0,0 +1,71 @@
+import { useCallback, useEffect, useMemo } from 'react';
+import {
+  ContextProvider,
+  ContextSearch,
+  type ContextSearchProps,
+  type ContextSelectEvent,
+  ContextClearEvent,
+} from '@equinor/fusion-react-context-selector';
+import { useContextResolver } from './useContextResolver';
+
+/**
+ * See fusion-react-component storybook for available attributes
+ * @link https://equinor.github.io/fusion-react-components/?path=/docs/data-contextselector--component
+ * @returns JSX element
+ */
+export const ContextSelector = (props: ContextSearchProps): JSX.Element | null => {
+  const {
+    resolver,
+    provider,
+    currentContext: [selectedContextItem],
+  } = useContextResolver();
+
+  /** callback handler for context selector, when context is changed or cleared */
+  const onContextSelect = useCallback(
+    (e: Event | ContextSelectEvent) => {
+      if (provider) {
+        if (e.type === 'select') {
+          const ev = e as unknown as ContextSelectEvent;
+          if (ev.nativeEvent.detail.selected.length) {
+            provider.contextClient.setCurrentContext(ev.nativeEvent.detail.selected[0].id);
+          }
+        } else {
+          provider.clearCurrentContext();
+        }
+      }
+    },
+    [provider],
+  );
+
+  /**
+   * Clears context when ctx has been cleared outside the selector.
+   */
+  const clearEvent = useMemo(() => new ContextClearEvent({ date: Date.now() }), []);
+  useEffect(() => {
+    if (!selectedContextItem) {
+      document.dispatchEvent(clearEvent);
+    }
+  }, [clearEvent, selectedContextItem]);
+
+  if (!resolver) return null;
+
+  return (
+    <div style={{ flex: 1, maxWidth: '480px' }}>
+      <ContextProvider resolver={resolver}>
+        <ContextSearch
+          id="context-selector-cli-header"
+          placeholder={props.placeholder ?? 'Search for context'}
+          initialText={props.initialText ?? 'Start typing to search'}
+          dropdownHeight={props.dropdownHeight ?? '300px'}
+          variant={props.variant ?? 'header'}
+          onSelect={(e: ContextSelectEvent) => onContextSelect(e)}
+          selectTextOnFocus={true}
+          previewItem={selectedContextItem}
+          onClearContext={onContextSelect}
+        />
+      </ContextProvider>
+    </div>
+  );
+};
+
+export default ContextSelector;

package/src/ContextSelector/index.ts

@@ -0,0 +1 @@
+export { ContextSelector } from './ContextSelector';