@equinor/fusion-framework-dev-portal 8.0.3 → 10.0.0

package/src/PersonSideSheet/sheets/roles/RolesSheetContent.test.tsx

@@ -0,0 +1,86 @@
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { RolesSheetContent } from './RolesSheetContent';
+
+const mocks = vi.hoisted(() => ({
+  createClient: vi.fn(),
+  currentUser: { localAccountId: 'account-id' },
+  framework: {
+    modules: { serviceDiscovery: { createClient: vi.fn() } },
+  },
+}));
+
+mocks.framework.modules.serviceDiscovery.createClient = mocks.createClient;
+
+vi.mock('@equinor/fusion-framework-react', () => ({
+  useFramework: () => mocks.framework,
+}));
+
+vi.mock('@equinor/fusion-framework-react/hooks', () => ({
+  useCurrentUser: () => mocks.currentUser,
+}));
+
+vi.mock('./ClaimableRole', () => ({
+  ClaimableRole: () => <div>Claimable role</div>,
+}));
+
+describe('RolesSheetContent', () => {
+  beforeEach(() => {
+    mocks.createClient.mockReset();
+    mocks.currentUser.localAccountId = 'account-id';
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('renders loading and empty states', async () => {
+    const json = vi.fn().mockResolvedValue([]);
+    mocks.createClient.mockResolvedValue({ json });
+
+    render(<RolesSheetContent navigate={vi.fn()} />);
+
+    expect(screen.getByLabelText('Loading roles')).toBeTruthy();
+    expect(await screen.findByText('You have no available roles')).toBeTruthy();
+    expect(json).toHaveBeenCalledTimes(2);
+  });
+
+  it('retries role retrieval after a failure', async () => {
+    const json = vi
+      .fn()
+      .mockRejectedValueOnce(new Error('Roles service unavailable'))
+      .mockResolvedValue([]);
+    mocks.createClient.mockResolvedValue({ json });
+
+    render(<RolesSheetContent navigate={vi.fn()} />);
+
+    expect(await screen.findByText('Roles service unavailable')).toBeTruthy();
+    fireEvent.click(screen.getByRole('button', { name: 'Retry' }));
+
+    expect(screen.getByLabelText('Loading roles')).toBeTruthy();
+    await waitFor(() => expect(mocks.createClient).toHaveBeenCalledTimes(2));
+    expect(await screen.findByText('You have no available roles')).toBeTruthy();
+  });
+
+  it('hides stale assignments while loading roles for a changed account', async () => {
+    const initialJson = vi
+      .fn()
+      .mockResolvedValueOnce([{ id: 'old-assignment' }])
+      .mockResolvedValueOnce([]);
+    const pendingJson = vi.fn().mockReturnValue(new Promise(() => undefined));
+    mocks.createClient
+      .mockResolvedValueOnce({ json: initialJson })
+      .mockResolvedValueOnce({ json: pendingJson });
+
+    const { rerender } = render(<RolesSheetContent navigate={vi.fn()} />);
+
+    expect(await screen.findByText('Claimable role')).toBeTruthy();
+
+    mocks.currentUser.localAccountId = 'next-account-id';
+    rerender(<RolesSheetContent navigate={vi.fn()} />);
+
+    expect(screen.getByLabelText('Loading roles')).toBeTruthy();
+    expect(screen.queryByText('Claimable role')).toBeNull();
+  });
+});

package/src/PersonSideSheet/sheets/roles/RolesSheetContent.tsx

@@ -0,0 +1,207 @@
+import {
+  Banner,
+  Button,
+  CircularProgress,
+  Divider,
+  Icon,
+  Tabs,
+  Typography,
+} from '@equinor/eds-core-react';
+import { arrow_back, verified_user } from '@equinor/eds-icons';
+import { useFramework } from '@equinor/fusion-framework-react';
+import { useCurrentUser } from '@equinor/fusion-framework-react/hooks';
+import { type ReactElement, useEffect, useRef, useState } from 'react';
+import styled from 'styled-components';
+
+import type { SheetContentProps } from '../types';
+import { ClaimableRole } from './ClaimableRole';
+import { RolesApi, type ClaimableRoleAssignment, type PermanentRoleAssignment } from './RolesApi';
+
+Icon.add({ arrow_back, verified_user });
+
+const Styled = {
+  Content: styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding: 1rem 0.5rem;
+  `,
+  Role: styled.div`
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+    padding: 0.5rem;
+  `,
+  Indicator: styled.div<{ $active: boolean }>`
+    width: 0.25rem;
+    height: 2.5rem;
+    background: ${({ $active }) => ($active ? '#007079' : '#dcdcdc')};
+  `,
+};
+
+/**
+ * Displays the signed-in user's consolidated claimable and permanent Fusion roles.
+ *
+ * The role collections use the same Roles V2 endpoints as the production portal.
+ *
+ * @param props.navigate - Navigates back to the person side sheet landing page.
+ * @returns A tabbed role overview with loading, error, and empty states.
+ */
+export const RolesSheetContent = ({ navigate }: SheetContentProps): ReactElement => {
+  const framework = useFramework();
+  const user = useCurrentUser();
+  const [tab, setTab] = useState(0);
+  const [claimableRoles, setClaimableRoles] = useState<ClaimableRoleAssignment[]>([]);
+  const [permanentRoles, setPermanentRoles] = useState<PermanentRoleAssignment[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string>();
+  const [loadAttempt, setLoadAttempt] = useState(0);
+  const latestLoadAttempt = useRef(loadAttempt);
+  latestLoadAttempt.current = loadAttempt;
+
+  /** Starts a fresh role request after a retrieval failure. */
+  const handleRetry = (): void => {
+    setError(undefined);
+    setIsLoading(true);
+    setLoadAttempt((attempt) => attempt + 1);
+  };
+
+  /**
+   * Replaces a changed assignment after activation or deactivation succeeds.
+   * @param changedAssignment - Updated claimable assignment returned by the role row.
+   */
+  const handleClaimableRoleChange = (changedAssignment: ClaimableRoleAssignment): void => {
+    setClaimableRoles((currentRoles) => {
+      // Preserve the endpoint ordering while updating only the role that changed.
+      return currentRoles.map((assignment) =>
+        assignment.id === changedAssignment.id ? changedAssignment : assignment,
+      );
+    });
+  };
+
+  useEffect(() => {
+    let isActive = true;
+    const currentLoadAttempt = loadAttempt;
+
+    // Hide assignments from the previous account before resolving the next role snapshot.
+    setIsLoading(true);
+    setError(undefined);
+
+    /** Loads both role collections together so the tabs represent one consistent snapshot. */
+    const loadRoles = async (): Promise<void> => {
+      // A Roles V2 account identifier is required before either endpoint can be queried.
+      if (!user?.localAccountId) {
+        setError('Unable to resolve the signed-in Fusion account.');
+        setIsLoading(false);
+        return;
+      }
+
+      try {
+        const client = await framework.modules.serviceDiscovery.createClient('rolesv2');
+        const rolesApi = new RolesApi(client, user.localAccountId);
+        const [claimable, permanent] = await Promise.all([
+          rolesApi.getClaimableRoles(),
+          rolesApi.getPermanentRoles(),
+        ]);
+
+        // Ignore a completed request after the side sheet content has unmounted.
+        if (isActive && latestLoadAttempt.current === currentLoadAttempt) {
+          setClaimableRoles(claimable);
+          setPermanentRoles(permanent);
+          setError(undefined);
+        }
+      } catch (cause) {
+        // Keep transport details out of the side sheet while preserving a useful retry direction.
+        if (isActive && latestLoadAttempt.current === currentLoadAttempt) {
+          setError(cause instanceof Error ? cause.message : 'Failed to load roles.');
+        }
+      } finally {
+        // Avoid updating state when navigation unmounts this sheet during a request.
+        if (isActive && latestLoadAttempt.current === currentLoadAttempt) {
+          setIsLoading(false);
+        }
+      }
+    };
+
+    void loadRoles();
+
+    return () => {
+      isActive = false;
+    };
+  }, [framework, user?.localAccountId, loadAttempt]);
+
+  // Prepare role rows before markup so the tab panels only render presentation state.
+  const claimableItems = claimableRoles.map((assignment) => (
+    <ClaimableRole
+      key={assignment.id}
+      assignment={assignment}
+      onChange={handleClaimableRoleChange}
+    />
+  ));
+
+  // Permanent assignments include scope context but do not expose activation controls.
+  const permanentItems = permanentRoles.map((assignment) => {
+    const scope =
+      !assignment.scope || assignment.scope.isGlobal ? 'Global' : assignment.scope.value;
+    return (
+      <Styled.Role key={assignment.id}>
+        <Styled.Indicator $active={true} />
+        <div>
+          <Typography>{assignment.role.displayName}</Typography>
+          <Typography variant="overline">
+            {assignment.role.name}
+            {scope ? ` (${scope})` : ''}
+          </Typography>
+        </div>
+      </Styled.Role>
+    );
+  });
+
+  return (
+    <section>
+      <Button variant="ghost" onClick={() => navigate()}>
+        <Icon name="arrow_back" />
+        <Icon name="verified_user" />
+        My Roles
+      </Button>
+      <Divider />
+      <Styled.Content>
+        {isLoading ? (
+          <CircularProgress aria-label="Loading roles" />
+        ) : error ? (
+          <>
+            <Banner>
+              <Banner.Message>{error}</Banner.Message>
+            </Banner>
+            <Button variant="outlined" onClick={handleRetry}>
+              Retry
+            </Button>
+          </>
+        ) : (
+          <Tabs activeTab={tab} onChange={(index) => setTab(Number(index))}>
+            <Tabs.List>
+              <Tabs.Tab>Claimable</Tabs.Tab>
+              <Tabs.Tab>Permanent</Tabs.Tab>
+            </Tabs.List>
+            <Tabs.Panels>
+              <Tabs.Panel>
+                {claimableItems.length > 0 ? (
+                  claimableItems
+                ) : (
+                  <Typography>You have no available roles</Typography>
+                )}
+              </Tabs.Panel>
+              <Tabs.Panel>
+                {permanentItems.length > 0 ? (
+                  permanentItems
+                ) : (
+                  <Typography>You have no permanent roles assigned</Typography>
+                )}
+              </Tabs.Panel>
+            </Tabs.Panels>
+          </Tabs>
+        )}
+      </Styled.Content>
+    </section>
+  );
+};

package/src/PersonSideSheet/sheets/roles/index.ts

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

package/src/Router.tsx

@@ -1,11 +1,10 @@
 import { useBookmarkNavigate } from '@equinor/fusion-framework-react-module-bookmark/portal';
 
-import { Outlet, Router as FusionRouter, useParams } from '@equinor/fusion-framework-react-router';
+import { Router as FusionRouter, Outlet, useParams } from '@equinor/fusion-framework-react-router';
 import AppLoader from './AppLoader';
 import { Header } from './Header';
 
 import { styled } from 'styled-components';
-import { useAppContextNavigation } from './useAppContextNavigation';
 
 const Styled = {
   ContentContainer: styled.div`
@@ -76,11 +75,9 @@ const routes = [
 /**
  * Top-level router for the Fusion Dev Portal.
  *
- * Renders the application via `FusionRouter`. Observes context changes through
- * {@link useAppContextNavigation} to keep the URL in sync.
+ * Uses `@equinor/fusion-framework-react-router` which automatically connects
+ * to the framework's navigation module for history and basename.
  */
 export const Router = () => {
-  // observe the context changes and navigate when the context changes
-  useAppContextNavigation();
   return <FusionRouter routes={routes} />;
 };

package/src/configure.ts

@@ -1,9 +1,13 @@
-import { enableAppModule } from '@equinor/fusion-framework-module-app';
+import { enableAppModule, type AppModule } from '@equinor/fusion-framework-module-app';
 import { enableBookmark } from '@equinor/fusion-framework-react-module-bookmark';
 import type { FrameworkConfigurator } from '@equinor/fusion-framework';
 import { enableAnalytics } from '@equinor/fusion-framework-module-analytics';
 import { ConsoleAnalyticsAdapter } from '@equinor/fusion-framework-module-analytics/adapters';
-import { enableNavigation } from '@equinor/fusion-framework-module-navigation';
+import { enableContext } from '@equinor/fusion-framework-module-context';
+import {
+  enableNavigation,
+  type NavigationModule,
+} from '@equinor/fusion-framework-module-navigation';
 import { enableServices } from '@equinor/fusion-framework-module-services';
 import { enableFeatureFlagging } from '@equinor/fusion-framework-module-feature-flag';
 import {
@@ -11,15 +15,22 @@ import {
   createUrlPlugin,
 } from '@equinor/fusion-framework-module-feature-flag/plugins';
 import { enableAgGrid } from '@equinor/fusion-framework-module-ag-grid';
-
 import { enableTelemetry } from '@equinor/fusion-framework-module-telemetry';
+import {
+  enableContextNavigation,
+  legacyAppNavigationFix,
+} from '@equinor/fusion-framework-plugin-context-navigation';
+import {
+  buildContextUrlForStrategy,
+  resolveContextIdFromUrl,
+} from '@equinor/fusion-framework-plugin-context-navigation/utils';
 import { version } from './version';
 
 declare global {
   interface Window {
     /**
-     * AG Grid license key for enabling enterprise features
-     * @remarks This is typically set via environment variables during build time
+     * AG Grid license key for enabling enterprise features.
+     * @remarks Typically set via environment variables during build time.
      */
     FUSION_AG_GRID_KEY?: string;
   }
@@ -28,10 +39,15 @@ declare global {
 /**
  * Configures the Fusion Dev Portal framework with all required modules.
  *
- * Enables and wires together:
+ * Modules enabled:
  * - **Telemetry** — portal-scoped usage analytics with version metadata.
- * - **App module** — application manifest loading and lifecycle.
- * - **Navigation** — router integration with optional telemetry.
+ * - **App** — application manifest loading and lifecycle.
+ * - **Context** — context routing URL hooks (path generator + extractor) wired to the shared context-navigation URL utilities.
+ * - **Context Navigation plugin** — keeps the browser URL in sync with the
+ *   active context, handles app-switch carry-over, and guards against
+ *   accidental context loss. Telemetry is auto-resolved from the framework
+ *   telemetry module.
+ * - **Navigation** — router integration with telemetry.
  * - **Services** — standard Fusion service integrations.
  * - **AG Grid** — enterprise license key from `window.FUSION_AG_GRID_KEY`.
  * - **Analytics** — console adapter gated by the `fusionLogAnalytics` feature flag.
@@ -51,10 +67,7 @@ export const configure = async (config: FrameworkConfigurator) => {
       builder.setMetadata(() => ({
         fusion: {
           type: 'portal-telemetry',
-          portal: {
-            version,
-            name: 'Fusion Dev Portal',
-          },
+          portal: { version, name: 'Fusion Dev Portal' },
         },
       }));
       // Scope telemetry events to portal-specific tracking
@@ -66,8 +79,26 @@ export const configure = async (config: FrameworkConfigurator) => {
 
   enableAppModule(config);
 
+  /**
+   * Configure context module with dev-portal URL conventions.
+   *
+   * This wires the context module's URL hooks — the path generator
+   * and path extractor — to the dev-portal's URL routing strategy.
+   *
+   * The context-navigation plugin keeps the browser URL in sync with the
+   * active context as it changes at runtime.
+   */
+  enableContext(config, (builder) => {
+    builder.setContextPathGenerator((context, path) =>
+      buildContextUrlForStrategy(context?.id, path),
+    );
+
+    builder.setContextPathExtractor((path) => resolveContextIdFromUrl(path));
+  });
+
   enableNavigation(config, {
     configure: (config) => {
+      config.setBasename('/');
       config.setTelemetry(async (args) => {
         // Only provide telemetry when the telemetry module was actually enabled
         if (args.hasModule('telemetry')) {
@@ -133,13 +164,23 @@ export const configure = async (config: FrameworkConfigurator) => {
     builder.addPlugin(createUrlPlugin(['fusionDebug']));
   });
 
-  // Expose framework modules globally for development debugging and inspection
-  config.onInitialized(async (modules) => {
-    // NOTE: TypeScript ignore needed due to window object extension
-    // This provides developer access to all initialized modules via window.Fusion
-    // @ts-expect-error
+  // Keep portal URLs aligned with the active app/context combination by using
+  // the shared context-navigation plugin and the dev-portal URL helpers.
+  enableContextNavigation(config, (builder) => {
+    builder.setPortalName('dev-portal');
+    builder.setDebug(true);
+    builder.setUrlGuard(true);
+    builder.setNavigationOptions({
+      replace: false, // Use pushState for navigation to allow back button support
+    });
+  });
+
+  config.onInitialized<[AppModule, NavigationModule]>((modules) => {
+    // Reset legacy app routers on context navigation for apps with navigation <v7.
+    legacyAppNavigationFix({ event: modules.event });
+
+    // Expose framework modules globally for development debugging and inspection.
+    // @ts-expect-error — `window` is not typed with `Fusion`
     window.Fusion = { modules };
   });
 };
-
-export default configure;

package/src/version.ts

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

package/tsconfig.json

@@ -69,6 +69,9 @@
     },
     {
       "path": "../dev-server"
+    },
+    {
+      "path": "../plugins/context-navigation"
     }
   ],
   "include": ["src/**/*", "start.ts"],