@equinor/fusion-framework-dev-portal 8.0.0 → 8.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/fusion-framework-dev-portal",
-  "version": "8.0.0",
+  "version": "8.0.2",
   "description": "",
   "type": "module",
   "module": "./dist/main.js",
@@ -35,47 +35,47 @@
     "rxjs": "^7.8.1",
     "styled-components": "^6.3.11",
     "tsx": "^4.19.3",
-    "typescript": "^6.0.3",
+    "typescript": "^7.0.2",
     "vite": "^8.0.0",
-    "@equinor/fusion-framework": "8.0.10",
-    "@equinor/fusion-framework-app": "11.0.10",
-    "@equinor/fusion-framework-module-ag-grid": "37.0.0",
-    "@equinor/fusion-framework-dev-server": "2.0.14",
-    "@equinor/fusion-framework-module-analytics": "3.0.1",
-    "@equinor/fusion-framework-module-app": "8.0.2",
-    "@equinor/fusion-framework-module-bookmark": "4.0.2",
-    "@equinor/fusion-framework-module-context": "8.0.0",
-    "@equinor/fusion-framework-module-feature-flag": "2.0.1",
-    "@equinor/fusion-framework-module-services": "8.0.1",
-    "@equinor/fusion-framework-module-navigation": "7.0.4",
-    "@equinor/fusion-framework-react": "8.0.0",
-    "@equinor/fusion-framework-module-telemetry": "7.0.0",
-    "@equinor/fusion-framework-react-components-bookmark": "2.0.1",
-    "@equinor/fusion-framework-react-components-people-provider": "2.0.3",
-    "@equinor/fusion-observable": "9.1.0",
-    "@equinor/fusion-query": "7.0.1",
-    "@equinor/fusion-framework-react-router": "2.2.0",
-    "@equinor/fusion-framework-react-module-bookmark": "6.0.0"
+    "@equinor/fusion-framework": "8.0.11",
+    "@equinor/fusion-framework-dev-server": "2.0.16",
+    "@equinor/fusion-framework-app": "11.0.11",
+    "@equinor/fusion-framework-module-ag-grid": "37.0.1",
+    "@equinor/fusion-framework-module-analytics": "3.0.3",
+    "@equinor/fusion-framework-module-app": "8.0.3",
+    "@equinor/fusion-framework-module-bookmark": "4.0.3",
+    "@equinor/fusion-framework-module-feature-flag": "2.0.2",
+    "@equinor/fusion-framework-module-navigation": "7.0.6",
+    "@equinor/fusion-framework-module-telemetry": "7.0.1",
+    "@equinor/fusion-framework-module-context": "8.0.1",
+    "@equinor/fusion-framework-react": "8.0.1",
+    "@equinor/fusion-framework-module-services": "8.0.2",
+    "@equinor/fusion-framework-react-components-bookmark": "2.0.3",
+    "@equinor/fusion-framework-react-components-people-provider": "2.0.4",
+    "@equinor/fusion-framework-react-router": "2.4.0",
+    "@equinor/fusion-observable": "9.1.1",
+    "@equinor/fusion-framework-react-module-bookmark": "6.0.1",
+    "@equinor/fusion-query": "7.0.2"
   },
   "peerDependencies": {
-    "@equinor/fusion-framework": "8.0.10",
-    "@equinor/fusion-framework-app": "11.0.10",
-    "@equinor/fusion-framework-module-ag-grid": "37.0.0",
-    "@equinor/fusion-framework-dev-server": "2.0.14",
-    "@equinor/fusion-framework-module-analytics": "3.0.1",
-    "@equinor/fusion-framework-module-app": "8.0.2",
-    "@equinor/fusion-framework-module-bookmark": "4.0.2",
-    "@equinor/fusion-framework-module-feature-flag": "2.0.1",
-    "@equinor/fusion-framework-module-context": "8.0.0",
-    "@equinor/fusion-framework-module-navigation": "7.0.4",
-    "@equinor/fusion-framework-module-services": "8.0.1",
-    "@equinor/fusion-framework-module-telemetry": "7.0.0",
-    "@equinor/fusion-framework-react-components-bookmark": "2.0.1",
-    "@equinor/fusion-framework-react": "8.0.0",
-    "@equinor/fusion-framework-react-components-people-provider": "2.0.3",
-    "@equinor/fusion-framework-react-module-bookmark": "6.0.0",
-    "@equinor/fusion-query": "7.0.1",
-    "@equinor/fusion-observable": "9.1.0"
+    "@equinor/fusion-framework": "8.0.11",
+    "@equinor/fusion-framework-app": "11.0.11",
+    "@equinor/fusion-framework-dev-server": "2.0.16",
+    "@equinor/fusion-framework-module-ag-grid": "37.0.1",
+    "@equinor/fusion-framework-module-analytics": "3.0.3",
+    "@equinor/fusion-framework-module-app": "8.0.3",
+    "@equinor/fusion-framework-module-bookmark": "4.0.3",
+    "@equinor/fusion-framework-module-context": "8.0.1",
+    "@equinor/fusion-framework-module-services": "8.0.2",
+    "@equinor/fusion-framework-module-feature-flag": "2.0.2",
+    "@equinor/fusion-framework-module-telemetry": "7.0.1",
+    "@equinor/fusion-framework-module-navigation": "7.0.6",
+    "@equinor/fusion-framework-react": "8.0.1",
+    "@equinor/fusion-framework-react-components-bookmark": "2.0.3",
+    "@equinor/fusion-framework-react-components-people-provider": "2.0.4",
+    "@equinor/fusion-query": "7.0.2",
+    "@equinor/fusion-observable": "9.1.1",
+    "@equinor/fusion-framework-react-module-bookmark": "6.0.1"
   },
   "peerDependenciesMeta": {
     "@equinor/fusion-framework": {

package/src/AppLoader.tsx

@@ -12,24 +12,7 @@ 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';
-
-/**
- * URL search-parameter key used to specify an app version tag.
- *
- * When present in the URL as `?$tag=<value>`, the portal loads that
- * specific version of the application instead of the default.
- */
-export const TAG = '$tag';
-
-/**
- * Reads the application version tag from the current URL search parameters.
- *
- * @returns The tag string if the `$tag` search parameter is present, otherwise `null`.
- */
-export const getAppTagFromUrl = (): string | null => {
-  const url = new URL(window.location.href);
-  return url.searchParams.get(TAG);
-};
+import { getAppTagFromUrl } from './get-app-tag-from-url';
 
 /**
  * Loads, initializes, and mounts a Fusion application by its key.
@@ -51,7 +34,7 @@ export const AppLoader = (props: { readonly appKey: string }) => {
   const [loading, setLoading] = useState<boolean>(false);
   const [error, setError] = useState<Error | undefined>();
 
-  // TODO change to `useCurrentApp`
+  // TODO(#5087): change to `useCurrentApp`
   /** observe and use the current selected application from framework */
   const { value: currentApp } = useObservableState(
     useMemo(() => fusion.modules.app.current$, [fusion.modules.app]),
@@ -60,6 +43,7 @@ export const AppLoader = (props: { readonly appKey: string }) => {
   useEffect(() => {
     const tag = getAppTagFromUrl();
 
+    // A `$tag` URL param takes precedence over the plain appKey
     if (tag) {
       fusion.modules.app.setCurrentApp({ appKey, tag });
       return;
@@ -90,6 +74,7 @@ export const AppLoader = (props: { readonly appKey: string }) => {
 
             /** create a 'private' element for the application */
             const el = document.createElement('div');
+            // Guard against rendering before the mounting ref has attached
             if (!ref.current) {
               throw Error('Missing application mounting point');
             }
@@ -120,7 +105,9 @@ export const AppLoader = (props: { readonly appKey: string }) => {
     return () => subscription.unsubscribe();
   }, [fusion, currentApp]);
 
+  // Render an error view when initialization or manifest resolution failed
   if (error) {
+    // Render a dedicated view for manifest-resolution failures
     if (error.cause instanceof AppManifestError) {
       return (
         <div>

package/src/ContextSelector/ContextSelector.tsx

@@ -30,9 +30,14 @@ export const ContextSelector = (props: ContextSearchProps): ReactElement | null
   /** callback handler for context selector, when context is changed or cleared */
   const onContextSelect = useCallback(
     (e: Event | ContextSelectEvent) => {
+      // Only react to selection/clear events when a provider is available to update
       if (provider) {
+        // 'select' carries a chosen context item; anything else means the selector was cleared
         if (e.type === 'select') {
+          // The 'select' event's `Event` type doesn't reflect the CustomEvent detail payload
+          // dispatched by the underlying context-selector element, so a cast is required here.
           const ev = e as unknown as ContextSelectEvent;
+          // Only set a new context when the user actually chose an item
           if (ev.nativeEvent.detail.selected.length) {
             provider.contextClient.setCurrentContext(ev.nativeEvent.detail.selected[0].id);
           }
@@ -49,11 +54,13 @@ export const ContextSelector = (props: ContextSearchProps): ReactElement | null
    */
   const clearEvent = useMemo(() => new ContextClearEvent({ date: Date.now() }), []);
   useEffect(() => {
+    // Notify listeners only when the context was cleared outside this selector
     if (!selectedContextItem) {
       document.dispatchEvent(clearEvent);
     }
   }, [clearEvent, selectedContextItem]);
 
+  // Nothing to render until a context resolver has been resolved
   if (!resolver) return null;
 
   return (

package/src/ContextSelector/useContextResolver.ts

@@ -43,19 +43,22 @@ function capitalizeFirstLetter(string: string): string {
 function convertGraphic(
   graphic: ContextItem['graphic'],
 ): Pick<ContextResultItem, 'graphic' | 'graphicType'> {
+  // No graphic provided means nothing to render
   if (graphic === undefined) {
     return {};
   }
 
+  // A string graphic is either an inline SVG/HTML markup or an EDS icon name
   if (typeof graphic === 'string') {
+    // EDS icon names aren't part of the ContextResultItem['graphicType'] union upstream, so cast explicitly
+    const edsGraphicType = 'eds' as unknown as ContextResultItem['graphicType'];
     return {
-      graphicType: graphic.startsWith('<')
-        ? 'inline-html'
-        : ('eds' as unknown as ContextResultItem['graphicType']),
+      graphicType: graphic.startsWith('<') ? 'inline-html' : edsGraphicType,
       graphic: graphic,
     };
   }
 
+  // A structured SVG graphic object maps directly to the inline-svg type
   if (graphic.type === 'svg') {
     return {
       graphicType: 'inline-svg',
@@ -76,19 +79,22 @@ function convertGraphic(
  * @returns An object with `meta` and `metaType` properties, or an empty object.
  */
 function convertMeta(meta: ContextItem['meta']): Pick<ContextResultItem, 'metaType' | 'meta'> {
+  // No meta provided means nothing to render
   if (meta === undefined) {
     return {};
   }
 
+  // A string meta is either an inline SVG/HTML markup or an EDS icon name
   if (typeof meta === 'string') {
+    // EDS icon names aren't part of the ContextResultItem['metaType'] union upstream, so cast explicitly
+    const edsMetaType = 'eds' as unknown as ContextResultItem['metaType'];
     return {
-      metaType: meta.startsWith('<')
-        ? 'inline-html'
-        : ('eds' as unknown as ContextResultItem['metaType']),
+      metaType: meta.startsWith('<') ? 'inline-html' : edsMetaType,
       meta: meta,
     };
   }
 
+  // A structured SVG meta object maps directly to the inline-svg type
   if (meta.type === 'svg') {
     return {
       metaType: 'inline-svg',
@@ -112,7 +118,9 @@ function convertMeta(meta: ContextItem['meta']): Pick<ContextResultItem, 'metaTy
  * @returns Mapped array of `ContextResultItem` objects for the selector UI.
  */
 const mapper = (src: ContextItem<{ taskState?: string; state?: string }>[]): ContextResult => {
+  // Map each raw context item to its ContextResultItem shape, applying per-type overrides
   return src.map((i) => {
+    // Layer the base fields with graphic and meta overrides derived from the item
     const baseResult = {
       id: i.id,
       title: i.title,
@@ -125,18 +133,22 @@ const mapper = (src: ContextItem<{ taskState?: string; state?: string }>[]): Con
     const isEquinorTaskInactive = !!(
       i.value.taskState && i.value.taskState.toLowerCase() !== 'active'
     );
+    // Only override the meta chip for EquinorTask items that are inactive
     if (i.type.id === 'EquinorTask' && isEquinorTaskInactive) {
       baseResult.meta = `<fwc-chip disabled variant="outlined" value="${i.value.taskState}" />`;
       baseResult.metaType = 'inline-html';
     }
 
+    // OrgChart items always get a fixed icon plus an optional inactive-state chip
     if (i.type.id === 'OrgChart') {
       // Org charts should always have 'list' icon
       baseResult.graphic = 'list';
+      // 'eds' isn't part of the ContextResultItem['graphicType'] union upstream, so cast explicitly
       baseResult.graphicType = 'eds' as unknown as ContextResultItem['graphicType'];
 
       // Displays the org chart status if it is not 'active'
       const isOrgChartInactive = !!(i.value.state && i.value.state.toLowerCase() !== 'active');
+      // Only override the meta chip when the org chart is inactive
       if (isOrgChartInactive) {
         baseResult.meta = `<fwc-chip disabled variant="outlined" value="${capitalizeFirstLetter(i.value.state ?? '')}" />`;
         baseResult.metaType = 'inline-html';
@@ -156,6 +168,7 @@ const mapper = (src: ContextItem<{ taskState?: string; state?: string }>[]): Con
  * @returns A complete `ContextResultItem` with defaults for `id` and `title`.
  */
 const singleItem = (props: Partial<ContextResultItem>): ContextResultItem => {
+  // Layer the caller-supplied props on top of the placeholder defaults
   return Object.assign({ id: 'no-such-item', title: 'Change me' }, props);
 };
 
@@ -200,6 +213,7 @@ export const useContextResolver = (): {
   const onContextProviderChange = useCallback((modules: AppModulesInstance) => {
     /** try to get the context module from the app module instance */
     const contextProvider = (modules as AppModulesInstance<[ContextModule]>).context;
+    // Only set a provider when the loaded app actually exposes a context module
     if (contextProvider) {
       setProvider(contextProvider);
     } else {
@@ -224,10 +238,12 @@ export const useContextResolver = (): {
   );
 
   const processError = useCallback((err: Error): ContextResult => {
+    // Unwrap query-client errors to get at the underlying cause
     if (err.name === 'QueryClientError') {
       return processError((err as QueryClientError).cause as Error);
     }
 
+    // Render context-search errors with their own title/description
     if (err.name === 'FusionContextSearchError') {
       const error = err as FusionContextSearchError;
       return [
@@ -260,10 +276,11 @@ export const useContextResolver = (): {
     (): ContextResolver | null =>
       provider && {
         searchQuery: async (search: string): Promise<ContextResult> => {
+          // Avoid firing a search query until the minimum character threshold is met
           if (search.length < minLength) {
             return [
               singleItem({
-                // TODO - make as enum if used for checks, or type
+                // TODO(#5064): make as enum if used for checks, or type
                 id: 'min-length',
                 title: `Type ${minLength - search.length} more chars to search`,
                 isDisabled: true,
@@ -271,34 +288,37 @@ export const useContextResolver = (): {
             ];
           }
           try {
+            const query$ = provider.queryContext(search);
             return lastValueFrom(
-              provider.queryContext(search).pipe(
-                map(mapper),
-                map((x) =>
-                  x.length
-                    ? x
-                    : [
-                        singleItem({
-                          // TODO - make as enum if used for checks, or type
-                          id: 'no-results',
-                          title: 'No results found',
-                          graphic: 'info_circle',
-                          isDisabled: true,
-                        }),
-                      ],
+              query$
+                // Run the raw query results through the mapper, falling back to a no-results placeholder
+                .pipe(
+                  map(mapper),
+                  map((x) =>
+                    x.length
+                      ? x
+                      : [
+                          singleItem({
+                            // TODO(#5064): make as enum if used for checks, or type
+                            id: 'no-results',
+                            title: 'No results found',
+                            graphic: 'info_circle',
+                            isDisabled: true,
+                          }),
+                        ],
+                  ),
+                  /** handle failures */
+                  catchError((err) => {
+                    console.error(
+                      'PORTAL::ContextResolver',
+                      `failed to resolve context for query ${search}`,
+                      err,
+                      err.cause,
+                    );
+
+                    return of(processError(err));
+                  }),
                 ),
-                /** handle failures */
-                catchError((err) => {
-                  console.error(
-                    'PORTAL::ContextResolver',
-                    `failed to resolve context for query ${search}`,
-                    err,
-                    err.cause,
-                  );
-
-                  return of(processError(err));
-                }),
-              ),
             );
             /** this should NEVER happen! */
           } catch (e) {

package/src/Header.tsx

@@ -19,9 +19,9 @@ PersonAvatarElement; // Register the custom element - prevent tree-shaking
 
 import { PersonSideSheet } from './PersonSideSheet';
 
-import { BookmarkSideSheet } from './BookMarkSideSheet';
+import { BookmarkSideSheet } from './BookmarkSideSheet';
 
-import { HeaderActions } from './Header.Actions';
+import { HeaderActions } from './HeaderActions';
 
 const Styled = {
   Title: styled.div`

package/src/PersonSideSheet/index.tsx

@@ -29,6 +29,7 @@ export const PersonSideSheet = ({ azureId, isOpen, onClose }: PersonSideSheetPro
   const [currentSheet, setCurrentSheet] = useState<string>('landing');
 
   const Component = useMemo(() => {
+    // Pick the sub-sheet component matching the currently navigated-to sheet
     switch (currentSheet) {
       case 'features':
         return FeatureSheetContent;

package/src/PersonSideSheet/sheets/FeatureTogglerApp.tsx

@@ -2,7 +2,7 @@ import { useCurrentAppFeatures } from '@equinor/fusion-framework-react/feature-f
 
 import { Typography, Switch } from '@equinor/eds-core-react';
 
-import { Styled } from './Styled';
+import { Styled } from './styled';
 
 /**
  * Feature toggle list for application-level feature flags.

package/src/PersonSideSheet/sheets/FeatureTogglerPortal.tsx

@@ -2,7 +2,7 @@ import { useFrameworkFeatures } from '@equinor/fusion-framework-react/feature-fl
 
 import { Typography, Switch } from '@equinor/eds-core-react';
 
-import { Styled } from './Styled';
+import { Styled } from './styled';
 
 /**
  * Feature toggle list for portal-level feature flags.

package/src/Router.tsx

@@ -51,7 +51,6 @@ const Root = () => {
 /**
  * Route component that extracts the `appKey` parameter and delegates to {@link AppLoader}.
  */
-// eslint-disable-next-line react/no-multi-comp
 const AppRoute = () => {
   const { appKey } = useParams();
   return appKey ? <AppLoader appKey={appKey} /> : null;
@@ -77,7 +76,6 @@ const routes = [
  * Renders the application via `FusionRouter`. Observes context changes through
  * {@link useAppContextNavigation} to keep the URL in sync.
  */
-// eslint-disable-next-line react/no-multi-comp
 export const Router = () => {
   // observe the context changes and navigate when the context changes
   useAppContextNavigation();

package/src/{config.ts → configure.ts}

@@ -69,6 +69,7 @@ export const configure = async (config: FrameworkConfigurator) => {
   enableNavigation(config, {
     configure: (config) => {
       config.setTelemetry(async (args) => {
+        // Only provide telemetry when the telemetry module was actually enabled
         if (args.hasModule('telemetry')) {
           return await args.requireInstance('telemetry');
         }
@@ -85,8 +86,10 @@ export const configure = async (config: FrameworkConfigurator) => {
 
   enableAnalytics(config, (builder) => {
     builder.setAdapter('console', async (args) => {
+      // Only resolve the feature-flag-gated adapter when the featureFlag module is enabled
       if (args.hasModule('featureFlag')) {
         const featureFlagProvider = await args.requireInstance('featureFlag');
+        // Only log analytics to the console when the feature flag is explicitly enabled
         if (featureFlagProvider.getFeature('fusionLogAnalytics')?.enabled) {
           return new ConsoleAnalyticsAdapter();
         }

package/src/get-app-tag-from-url.ts

@@ -0,0 +1,17 @@
+/**
+ * URL search-parameter key used to specify an app version tag.
+ *
+ * When present in the URL as `?$tag=<value>`, the portal loads that
+ * specific version of the application instead of the default.
+ */
+const TAG = '$tag';
+
+/**
+ * Reads the application version tag from the current URL search parameters.
+ *
+ * @returns The tag string if the `$tag` search parameter is present, otherwise `null`.
+ */
+export const getAppTagFromUrl = (): string | null => {
+  const url = new URL(window.location.href);
+  return url.searchParams.get(TAG);
+};

package/src/main.tsx

@@ -6,10 +6,10 @@ import { ThemeProvider, theme } from '@equinor/fusion-react-styles';
 import { PeopleResolverProvider } from '@equinor/fusion-framework-react-components-people-provider';
 
 import { EquinorLoader } from './EquinorLoader';
-import { configure } from './config';
+import { configure } from './configure';
 import { Router } from './Router';
 
-import fallbackSvg from './resources/fallback-photo.svg';
+import fallbackSvg from './resources/svg';
 
 /** Fallback avatar image used when a person photo cannot be loaded. */
 const fallbackImage = new Blob([fallbackSvg], { type: 'image/svg+xml' });

package/src/useAppContextNavigation.ts

@@ -37,6 +37,7 @@ const generatePathname = (
   context?: IContextProvider,
   pathContextId?: string,
 ) => {
+  // Replace an existing context id segment in the url when one is present
   if (pathContextId) {
     // context id exists in the url, replace it with the new context id
     const pathname =
@@ -110,6 +111,7 @@ export const useAppContextNavigation = () => {
         /** context was cleared  */
         if (item === null) {
           console.debug('🌍 Portal:', 'current context was cleared, navigating to root');
+          // Prefer the app's own navigation instance when it exists
           if (appNavigation) {
             appNavigation.replace('/');
           } else {

package/src/version.ts

@@ -1,2 +1,2 @@
 // Generated by genversion.
-export const version = '8.0.0';
+export const version = '8.0.2';