@equinor/fusion-framework-dev-portal 1.1.4 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/fusion-framework-dev-portal",
-  "version": "1.1.4",
+  "version": "1.2.0",
   "description": "",
   "type": "module",
   "module": "./dist/main.js",
@@ -25,7 +25,7 @@
     "@equinor/fusion-react-side-sheet": "1.3.11",
     "@equinor/fusion-react-styles": "^0.6.4",
     "@equinor/fusion-wc-chip": "^1.2.2",
-    "@equinor/fusion-wc-person": "^3.1.8",
+    "@equinor/fusion-wc-person": "^3.2.4",
     "@material-ui/styles": "^4.11.5",
     "@types/dotenv": "^8.2.3",
     "@types/react": "^18.2.50",
@@ -39,22 +39,23 @@
     "styled-components": "^6.0.7",
     "tsx": "^4.19.3",
     "typescript": "^5.8.2",
-    "vite": "^7.1.5",
-    "@equinor/fusion-framework": "^7.3.20",
-    "@equinor/fusion-framework-app": "^10.0.0",
-    "@equinor/fusion-framework-module-app": "^7.0.1",
-    "@equinor/fusion-framework-dev-server": "^1.1.3",
-    "@equinor/fusion-framework-module-bookmark": "^3.0.1",
-    "@equinor/fusion-framework-module-feature-flag": "^1.1.24",
-    "@equinor/fusion-framework-module-context": "^7.0.0",
-    "@equinor/fusion-framework-module-services": "^7.1.2",
-    "@equinor/fusion-framework-module-navigation": "^6.0.0",
-    "@equinor/fusion-framework-react": "^7.4.18",
-    "@equinor/fusion-framework-react-components-people-provider": "^1.5.23",
-    "@equinor/fusion-framework-react-module-bookmark": "^5.0.1",
-    "@equinor/fusion-framework-react-components-bookmark": "^1.1.0",
-    "@equinor/fusion-query": "^5.2.14",
-    "@equinor/fusion-observable": "^8.5.4"
+    "vite": "^7.1.9",
+    "@equinor/fusion-framework": "7.4.0",
+    "@equinor/fusion-framework-dev-server": "1.1.4",
+    "@equinor/fusion-framework-app": "10.1.0",
+    "@equinor/fusion-framework-module-app": "7.0.2",
+    "@equinor/fusion-framework-module-bookmark": "3.0.2",
+    "@equinor/fusion-framework-module-context": "7.0.1",
+    "@equinor/fusion-framework-module-services": "7.1.2",
+    "@equinor/fusion-framework-module-navigation": "6.0.0",
+    "@equinor/fusion-framework-module-feature-flag": "1.1.24",
+    "@equinor/fusion-framework-module-telemetry": "4.2.0",
+    "@equinor/fusion-framework-react": "7.4.18",
+    "@equinor/fusion-framework-react-components-bookmark": "1.1.1",
+    "@equinor/fusion-framework-react-components-people-provider": "1.5.24",
+    "@equinor/fusion-observable": "8.5.5",
+    "@equinor/fusion-query": "6.0.0",
+    "@equinor/fusion-framework-react-module-bookmark": "5.0.1"
   },
   "scripts": {
     "start": "tsx dev-server.ts",

package/src/AppLoader.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useId, useMemo, useRef, useState } from 'react';
 
 import { Subscription } from 'rxjs';
 import { last } from 'rxjs/operators';
@@ -26,6 +26,7 @@ export const AppLoader = (props: { readonly appKey: string }) => {
 
   /** reference of application section/container */
   const ref = useRef<HTMLElement>(null);
+  const applicationContentId = useId();
 
   const [loading, setLoading] = useState<boolean>(false);
   const [error, setError] = useState<Error | undefined>();
@@ -112,7 +113,7 @@ export const AppLoader = (props: { readonly appKey: string }) => {
   }
 
   return (
-    <section id="application-content" ref={ref} style={{ display: 'contents' }}>
+    <section id={applicationContentId} ref={ref} style={{ display: 'contents' }}>
       {loading && <EquinorLoader text="Loading Application" />}
     </section>
   );

package/src/ContextSelector/ContextSelector.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo } from 'react';
+import { useCallback, useEffect, useId, useMemo } from 'react';
 import {
   ContextProvider,
   ContextSearch,
@@ -14,6 +14,7 @@ import { useContextResolver } from './useContextResolver';
  * @returns JSX element
  */
 export const ContextSelector = (props: ContextSearchProps): JSX.Element | null => {
+  const contextSelectorId = useId();
   const {
     resolver,
     provider,
@@ -53,7 +54,7 @@ export const ContextSelector = (props: ContextSearchProps): JSX.Element | null =
     <div style={{ flex: 1, maxWidth: '480px' }}>
       <ContextProvider resolver={resolver}>
         <ContextSearch
-          id="context-selector-cli-header"
+          id={contextSelectorId}
           placeholder={props.placeholder ?? 'Search for context'}
           initialText={props.initialText ?? 'Start typing to search'}
           dropdownHeight={props.dropdownHeight ?? '300px'}

package/src/FusionLogo.tsx

@@ -1,58 +1,64 @@
+import { useId } from 'react';
 import type { SVGProps } from 'react';
 
 type FusionLogoProps = Omit<SVGProps<SVGSVGElement>, 'viewBox'> & {
   readonly scale?: number;
 };
 
-export const FusionLogo = ({ scale = 1, style }: FusionLogoProps) => (
-  <svg viewBox="0 0 50 35" style={{ height: '1em', ...style, transform: `scale(${scale})` }}>
-    <title>Fusion Logo</title>
-    <path
-      d="M0 2V23.1776L7.05405 16.1235V7.05405H16.1235L23.1776 0H2C0.895431 0 0 0.89543 0 2Z"
-      transform="translate(50 17.5) scale(0.92727 1.06779) rotate(135)"
-      fill="url(#paint0_linear)"
-    />
-    <path
-      d="M0 2V23.1776L7.05405 16.1235V7.05405H16.1235L23.1776 0H2C0.895431 0 0 0.89543 0 2Z"
-      transform="translate(0 17.5) scale(0.92727 1.06779) rotate(-45)"
-      fill="url(#paint1_linear)"
-    />
-    <path
-      d="M9.61965 36.6972L2.60087 29.6784L1.96135 22.3809L8.42623 22.9069L9.61965 36.6972Z"
-      transform="translate(33.8887 34.9863) scale(0.92727 -1.06779) rotate(45)"
-      fill="#990025"
-    />
-    <path
-      d="M7.05434 7.05434L0 0L1.21096 13.8183L7.68846 14.3818L7.05434 7.05434Z"
-      transform="translate(33.8887 34.9863) scale(0.92727 -1.06779) rotate(45)"
-      fill="#990025"
-    />
-    <path
-      d="M0 0L2.49398 29.5715L9.61965 36.6972L7.01878 7.01878L0 0Z"
-      transform="translate(33.8887 0.015625) scale(0.92727 1.06779) rotate(45)"
-      fill="#FF1243"
-    />
-    <defs>
-      <linearGradient
-        id="paint0_linear"
-        x2="1"
-        gradientUnits="userSpaceOnUse"
-        gradientTransform="matrix(-13.5478 9.01983 -12.9578 -13.5478 18.0677 6.77391)"
-      >
-        <stop offset="0.508287" stopColor="#DC002E" />
-        <stop offset="0.508387" stopColor="#FF1243" />
-      </linearGradient>
-      <linearGradient
-        id="paint1_linear"
-        x2="1"
-        gradientUnits="userSpaceOnUse"
-        gradientTransform="matrix(-13.5478 9.01983 -12.9578 -13.5478 18.0677 6.77391)"
-      >
-        <stop offset="0.508287" stopColor="#DC002E" />
-        <stop offset="0.508387" stopColor="#FF1243" />
-      </linearGradient>
-    </defs>
-  </svg>
-);
+export const FusionLogo = ({ scale = 1, style }: FusionLogoProps) => {
+  const paint0Id = useId();
+  const paint1Id = useId();
+
+  return (
+    <svg viewBox="0 0 50 35" style={{ height: '1em', ...style, transform: `scale(${scale})` }}>
+      <title>Fusion Logo</title>
+      <path
+        d="M0 2V23.1776L7.05405 16.1235V7.05405H16.1235L23.1776 0H2C0.895431 0 0 0.89543 0 2Z"
+        transform="translate(50 17.5) scale(0.92727 1.06779) rotate(135)"
+        fill={`url(#${paint0Id})`}
+      />
+      <path
+        d="M0 2V23.1776L7.05405 16.1235V7.05405H16.1235L23.1776 0H2C0.895431 0 0 0.89543 0 2Z"
+        transform="translate(0 17.5) scale(0.92727 1.06779) rotate(-45)"
+        fill={`url(#${paint1Id})`}
+      />
+      <path
+        d="M9.61965 36.6972L2.60087 29.6784L1.96135 22.3809L8.42623 22.9069L9.61965 36.6972Z"
+        transform="translate(33.8887 34.9863) scale(0.92727 -1.06779) rotate(45)"
+        fill="#990025"
+      />
+      <path
+        d="M7.05434 7.05434L0 0L1.21096 13.8183L7.68846 14.3818L7.05434 7.05434Z"
+        transform="translate(33.8887 34.9863) scale(0.92727 -1.06779) rotate(45)"
+        fill="#990025"
+      />
+      <path
+        d="M0 0L2.49398 29.5715L9.61965 36.6972L7.01878 7.01878L0 0Z"
+        transform="translate(33.8887 0.015625) scale(0.92727 1.06779) rotate(45)"
+        fill="#FF1243"
+      />
+      <defs>
+        <linearGradient
+          id={paint0Id}
+          x2="1"
+          gradientUnits="userSpaceOnUse"
+          gradientTransform="matrix(-13.5478 9.01983 -12.9578 -13.5478 18.0677 6.77391)"
+        >
+          <stop offset="0.508287" stopColor="#DC002E" />
+          <stop offset="0.508387" stopColor="#FF1243" />
+        </linearGradient>
+        <linearGradient
+          id={paint1Id}
+          x2="1"
+          gradientUnits="userSpaceOnUse"
+          gradientTransform="matrix(-13.5478 9.01983 -12.9578 -13.5478 18.0677 6.77391)"
+        >
+          <stop offset="0.508287" stopColor="#DC002E" />
+          <stop offset="0.508387" stopColor="#FF1243" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+};
 
 export default FusionLogo;

package/src/Header.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useId, useState } from 'react';
 import { ContextSelector } from './ContextSelector';
 import { FusionLogo } from './FusionLogo';
 
@@ -35,6 +35,7 @@ const Styled = {
 
 export const Header = () => {
   const currentUser = useCurrentUser();
+  const topBarId = useId();
   const [isPersonSheetOpen, setIsPersonSheetOpen] = useState(false);
 
   const [isBookmarkOpen, setIsBookmarkOpen] = useState(false);
@@ -58,7 +59,7 @@ export const Header = () => {
         currentUser ? { id: currentUser.localAccountId, name: currentUser.name } : undefined
       }
     >
-      <TopBar id="cli-top-bar" sticky={false} style={{ padding: '0 1em', height: 48 }}>
+      <TopBar id={topBarId} sticky={false} style={{ padding: '0 1em', height: 48 }}>
         <TopBar.Header>
           <Styled.Title>
             <FusionLogo />

package/src/config.ts

@@ -1,6 +1,6 @@
 import { enableAppModule } from '@equinor/fusion-framework-module-app';
 import { enableBookmark } from '@equinor/fusion-framework-react-module-bookmark';
-import type { FrameworkConfigurator, Fusion } from '@equinor/fusion-framework';
+import type { FrameworkConfigurator } from '@equinor/fusion-framework';
 import { enableNavigation } from '@equinor/fusion-framework-module-navigation';
 import { enableServices } from '@equinor/fusion-framework-module-services';
 import { enableFeatureFlagging } from '@equinor/fusion-framework-module-feature-flag';
@@ -9,14 +9,52 @@ import {
   createUrlPlugin,
 } from '@equinor/fusion-framework-module-feature-flag/plugins';
 
+import { enableTelemetry } from '@equinor/fusion-framework-module-telemetry';
+import { version } from './version';
+
+/**
+ * Configures the Fusion Dev Portal with all required modules and features
+ *
+ * This function sets up the complete framework configuration including:
+ * - Telemetry tracking for portal analytics
+ * - Core app functionality and navigation
+ * - Bookmark management system
+ * - Feature flagging for development features
+ * - Service integrations
+ *
+ * @param config - The framework configurator instance to extend with portal features
+ */
 export const configure = async (config: FrameworkConfigurator) => {
+  // Enable telemetry tracking for portal usage analytics and monitoring
+  enableTelemetry(config, {
+    attachConfiguratorEvents: true,
+    configure: (builder, ref) => {
+      // Set metadata identifying this as portal telemetry with version info
+      builder.setMetadata(() => ({
+        fusion: {
+          type: 'portal-telemetry',
+          portal: {
+            version,
+            name: 'Fusion Dev Portal',
+          },
+        },
+      }));
+      // Scope telemetry events to portal-specific tracking
+      builder.setDefaultScope(['portal']);
+      // Inherit parent telemetry configuration for consistent tracking
+      builder.setParent(ref.telemetry);
+    },
+  });
+
   enableAppModule(config);
 
   enableNavigation(config);
 
   enableServices(config);
 
+  // Configure bookmark functionality with CLI as the source system
   enableBookmark(config, (builder) => {
+    // Identify bookmarks created in dev portal as coming from CLI system
     builder.setSourceSystem({
       subSystem: 'CLI',
       identifier: 'fusion-cli',
@@ -24,8 +62,9 @@ export const configure = async (config: FrameworkConfigurator) => {
     });
   });
 
-  /* Adds demo portal features to cli */
+  // Configure feature flags for development and demo purposes
   enableFeatureFlagging(config, (builder) => {
+    // Add local storage plugin for persistent feature flag storage
     builder.addPlugin(
       createLocalStoragePlugin([
         {
@@ -40,16 +79,16 @@ export const configure = async (config: FrameworkConfigurator) => {
         },
       ]),
     );
+    // Add URL plugin to allow enabling debug features via query parameters
     builder.addPlugin(createUrlPlugin(['fusionDebug']));
   });
 
-  config.onConfigured(() => {
-    console.log('framework config done');
-  });
-
+  // Expose framework modules globally for development debugging and inspection
   config.onInitialized(async (modules) => {
-    console.debug('📒 subscribing to all events');
-    window.Fusion = { modules } as Fusion; // expose Fusion instance
+    // NOTE: TypeScript ignore needed due to window object extension
+    // This provides developer access to all initialized modules via window.Fusion
+    // @ts-ignore
+    window.Fusion = { modules };
   });
 };
 

package/src/version.ts

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

package/tsconfig.json

@@ -14,6 +14,9 @@
     {
       "path": "../utils/query"
     },
+    {
+      "path": "../modules/telemetry"
+    },
     {
       "path": "../modules/http"
     },