@equinor/fusion-framework-dev-portal 9.0.0 → 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/version.ts

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