feat(ui): migrate organization profile members panel to mosaic

.changeset/wild-members-gather.md

@@ -0,0 +1,2 @@
+---
+---

packages/swingset/src/components/DocsViewer.tsx

@@ -14,6 +14,7 @@ const docModules: Record<string, Record<string, React.ComponentType>> = {
     'organization-profile': dynamic(() => import('../stories/organization-profile.mdx')),
     'organization-profile-general-panel': dynamic(() => import('../stories/organization-profile-general-panel.mdx')),
     'organization-profile-api-keys-panel': dynamic(() => import('../stories/organization-profile-api-keys-panel.mdx')),
+    'organization-profile-members-panel': dynamic(() => import('../stories/organization-profile-members-panel.mdx')),
     'organization-profile-profile-section': dynamic(
       () => import('../stories/organization-profile-profile-section.mdx'),
     ),

packages/swingset/src/lib/registry.ts

@@ -58,6 +58,10 @@ import {
   Default as OrganizationProfileLeaveSectionDefault,
   meta as organizationProfileLeaveSectionMeta,
 } from '../stories/organization-profile-leave-section.stories';
+import {
+  Default as OrganizationProfileMembersPanelDefault,
+  meta as organizationProfileMembersPanelMeta,
+} from '../stories/organization-profile-members-panel.stories';
 import {
   Default as OrganizationProfileProfileSectionDefault,
   meta as organizationProfileProfileSectionMeta,
@@ -104,6 +108,10 @@ const organizationProfileApiKeysPanelModule: StoryModule = {
   meta: organizationProfileApiKeysPanelMeta,
   Default: OrganizationProfileApiKeysPanelDefault,
 };
+const organizationProfileMembersPanelModule: StoryModule = {
+  meta: organizationProfileMembersPanelMeta,
+  Default: OrganizationProfileMembersPanelDefault,
+};
 
 const cardComponentModule: StoryModule = { meta: cardComponentMeta, Default: CardDefault, Centered: CardCentered };
 
@@ -155,6 +163,7 @@ export const registry: StoryModule[] = [
   organizationProfileModule,
   organizationProfileGeneralPanelModule,
   organizationProfileApiKeysPanelModule,
+  organizationProfileMembersPanelModule,
   organizationProfileProfileSectionModule,
   organizationProfileDomainsSectionModule,
   organizationProfileLeaveSectionModule,

packages/swingset/src/stories/organization-profile-members-panel.mdx

@@ -0,0 +1,17 @@
+import * as OrganizationProfileMembersPanelStories from './organization-profile-members-panel.stories';
+
+# Organization Profile Members Panel
+
+The Members tab panel of the Organization Profile — lists an organization's active members and owns the search and remove flows. It gates on `org:sys_memberships:read` to view and `org:sys_memberships:manage` to remove a member.
+
+<Story
+  name='Default'
+  storyModule={OrganizationProfileMembersPanelStories}
+  composition={[
+    {
+      name: 'OrganizationProfile',
+      href: '/organization/organization-profile',
+      layer: 'Organization',
+    },
+  ]}
+/>

packages/swingset/src/stories/organization-profile-members-panel.stories.tsx

@@ -0,0 +1,73 @@
+/** @jsxImportSource @emotion/react */
+import { useMachine } from '@clerk/ui/mosaic/machine/useMachine';
+import type { MemberRow } from '@clerk/ui/mosaic/organization/organization-profile-members-panel.controller';
+import { organizationProfileMembersPanelMachine } from '@clerk/ui/mosaic/organization/organization-profile-members-panel.machine';
+import { OrganizationProfileMembersPanelView } from '@clerk/ui/mosaic/organization/organization-profile-members-panel.view';
+import { useState } from 'react';
+
+import type { StoryMeta } from '@/lib/types';
+
+export const meta: StoryMeta = {
+  group: 'Organization',
+  title: 'OrganizationProfileMembersPanel',
+  source: 'packages/ui/src/mosaic/organization/organization-profile-members-panel.tsx',
+};
+
+const DEMO_MEMBERS: Omit<MemberRow, 'onRemove'>[] = [
+  {
+    id: 'mem_1',
+    name: 'Ada Lovelace',
+    identifier: 'ada@example.com',
+    roleLabel: 'Admin',
+    joinedAt: '1/12/2024',
+    isCurrentUser: true,
+    isBanned: false,
+  },
+  {
+    id: 'mem_2',
+    name: 'Alan Turing',
+    identifier: 'alan@example.com',
+    roleLabel: 'Member',
+    joinedAt: '3/4/2024',
+    isCurrentUser: false,
+    isBanned: false,
+  },
+  {
+    id: 'mem_3',
+    name: 'Grace Hopper',
+    identifier: 'grace@example.com',
+    roleLabel: 'Member',
+    joinedAt: '6/9/2024',
+    isCurrentUser: false,
+    isBanned: true,
+  },
+];
+
+export function Default() {
+  const [snapshot, send] = useMachine(organizationProfileMembersPanelMachine);
+  const [page, setPage] = useState(1);
+
+  const rows: MemberRow[] = DEMO_MEMBERS.map(member => ({
+    ...member,
+    onRemove: () =>
+      send({
+        type: 'REMOVE_MEMBER',
+        membershipId: member.id,
+        // Simulate the network round-trip so the row shows its "Removing…" state.
+        run: () => new Promise<void>(resolve => setTimeout(resolve, 700)),
+      }),
+  }));
+
+  return (
+    <OrganizationProfileMembersPanelView
+      snapshot={snapshot}
+      send={send}
+      rows={rows}
+      canManage
+      page={page}
+      pageCount={3}
+      isLoading={false}
+      onPageChange={setPage}
+    />
+  );
+}

packages/swingset/src/stories/organization-profile.stories.tsx

@@ -5,6 +5,7 @@ import type { StoryMeta } from '@/lib/types';
 
 import { Default as OrganizationProfileApiKeysPanelDemo } from './organization-profile-api-keys-panel.stories';
 import { Default as OrganizationProfileGeneralPanelDemo } from './organization-profile-general-panel.stories';
+import { Default as OrganizationProfileMembersPanelDemo } from './organization-profile-members-panel.stories';
 
 export const meta: StoryMeta = {
   group: 'Organization',
@@ -16,6 +17,7 @@ export function Default() {
   return (
     <OrganizationProfileView
       general={<OrganizationProfileGeneralPanelDemo />}
+      members={<OrganizationProfileMembersPanelDemo />}
       apiKeys={<OrganizationProfileApiKeysPanelDemo />}
     />
   );

packages/ui/src/mosaic/organization/__tests__/organization-profile-members-panel.controller.test.tsx

@@ -0,0 +1,213 @@
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { deferred } from '../../machines/__tests__/test-utils';
+import { useOrganizationProfileMembersPanelController } from '../organization-profile-members-panel.controller';
+
+const READ = 'org:sys_memberships:read';
+const MANAGE = 'org:sys_memberships:manage';
+
+let permissions: string[];
+let user: { id: string } | null;
+let isSessionLoaded: boolean;
+let isOrganizationLoaded: boolean;
+let organization: { id: string } | null;
+let memberships: {
+  data: Array<Record<string, unknown>>;
+  count: number;
+  page: number;
+  pageCount: number;
+  isLoading: boolean;
+  fetchPage: ReturnType<typeof vi.fn>;
+  revalidate: ReturnType<typeof vi.fn>;
+} | null;
+let destroy: ReturnType<typeof vi.fn>;
+let revalidate: ReturnType<typeof vi.fn>;
+let fetchPage: ReturnType<typeof vi.fn>;
+
+vi.mock('@clerk/shared/react', async importOriginal => {
+  const actual = await importOriginal<typeof import('@clerk/shared/react')>();
+  return {
+    ...actual,
+    useOrganization: () => ({ isLoaded: isOrganizationLoaded, organization, memberships }),
+    useSession: () => ({
+      isLoaded: isSessionLoaded,
+      session: isSessionLoaded
+        ? {
+            id: 'sess_1',
+            checkAuthorization: ({ permission }: { permission: string }) => permissions.includes(permission),
+          }
+        : undefined,
+    }),
+    useUser: () => ({ user }),
+  };
+});
+
+beforeEach(() => {
+  permissions = [READ, MANAGE];
+  user = { id: 'user_self' };
+  isSessionLoaded = true;
+  isOrganizationLoaded = true;
+  organization = { id: 'org_1' };
+  destroy = vi.fn().mockResolvedValue(undefined);
+  revalidate = vi.fn().mockResolvedValue(undefined);
+  fetchPage = vi.fn();
+  memberships = {
+    data: [
+      {
+        id: 'mem_1',
+        publicUserData: { userId: 'user_self', firstName: 'Alice', lastName: 'Doe', identifier: 'alice@example.com' },
+        role: 'org:admin',
+        roleName: 'Admin',
+        createdAt: new Date('2024-01-01T00:00:00Z'),
+        destroy,
+      },
+      {
+        id: 'mem_2',
+        publicUserData: {
+          userId: 'user_2',
+          firstName: 'Bob',
+          lastName: null,
+          identifier: 'bob@example.com',
+          banned: true,
+        },
+        role: 'org:member',
+        roleName: 'Member',
+        createdAt: new Date('2024-02-01T00:00:00Z'),
+        destroy,
+      },
+    ],
+    count: 2,
+    page: 1,
+    pageCount: 1,
+    isLoading: false,
+    fetchPage,
+    revalidate,
+  };
+});
+
+afterEach(() => {
+  vi.clearAllMocks();
+});
+
+function Harness() {
+  const controller = useOrganizationProfileMembersPanelController();
+  if (controller.status !== 'ready') {
+    return <output data-testid='state'>{controller.status}</output>;
+  }
+  return (
+    <div>
+      <output data-testid='state'>{controller.snapshot.value}</output>
+      <output data-testid='error'>{controller.snapshot.context.error ?? ''}</output>
+      <output data-testid='query'>{controller.snapshot.context.query}</output>
+      <output data-testid='canManage'>{String(controller.canManage)}</output>
+      <output data-testid='rows'>
+        {controller.rows.map(r => `${r.name}|${r.roleLabel}|${r.isCurrentUser}|${r.isBanned}`).join(';')}
+      </output>
+      <button onClick={() => controller.send({ type: 'SEARCH_CHANGE', value: 'z' })}>ChangeSearch</button>
+      <button onClick={() => controller.send({ type: 'SEARCH_SUBMIT' })}>SubmitSearch</button>
+      <button onClick={() => controller.onPageChange(2)}>Page2</button>
+      {controller.rows.map(r => (
+        <button
+          key={r.id}
+          onClick={r.onRemove}
+        >
+          Remove {r.id}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+describe('useOrganizationProfileMembersPanelController', () => {
+  it('is loading until the session is loaded', () => {
+    isSessionLoaded = false;
+    render(<Harness />);
+    expect(screen.getByTestId('state')).toHaveTextContent('loading');
+  });
+
+  it('is loading until the organization is loaded', () => {
+    isOrganizationLoaded = false;
+    render(<Harness />);
+    expect(screen.getByTestId('state')).toHaveTextContent('loading');
+  });
+
+  it('is hidden when the user cannot read memberships', () => {
+    permissions = [];
+    render(<Harness />);
+    expect(screen.getByTestId('state')).toHaveTextContent('hidden');
+  });
+
+  it('is hidden when there is no active organization', () => {
+    organization = null;
+    render(<Harness />);
+    expect(screen.getByTestId('state')).toHaveTextContent('hidden');
+  });
+
+  it('derives plain rows from the memberships resource', () => {
+    render(<Harness />);
+
+    expect(screen.getByTestId('state')).toHaveTextContent('ready');
+    expect(screen.getByTestId('rows')).toHaveTextContent('Alice Doe|Admin|true|false;Bob|Member|false|true');
+  });
+
+  it('reports canManage from the manage permission', () => {
+    permissions = [READ];
+    render(<Harness />);
+
+    expect(screen.getByTestId('state')).toHaveTextContent('ready');
+    expect(screen.getByTestId('canManage')).toHaveTextContent('false');
+  });
+
+  it('commits the search query only on submit', () => {
+    render(<Harness />);
+
+    fireEvent.click(screen.getByText('ChangeSearch'));
+    expect(screen.getByTestId('query')).toHaveTextContent('');
+
+    fireEvent.click(screen.getByText('SubmitSearch'));
+    expect(screen.getByTestId('query')).toHaveTextContent('z');
+  });
+
+  it('drives removal through destroy + revalidate', async () => {
+    const gate = deferred<void>();
+    destroy.mockReturnValue(gate.promise);
+
+    render(<Harness />);
+
+    fireEvent.click(screen.getByText('Remove mem_2'));
+    expect(screen.getByTestId('state')).toHaveTextContent('removing');
+    expect(destroy).toHaveBeenCalledTimes(1);
+
+    await act(async () => {
+      gate.resolve();
+    });
+
+    expect(screen.getByTestId('state')).toHaveTextContent('ready');
+    expect(revalidate).toHaveBeenCalledTimes(1);
+  });
+
+  it('surfaces a removal error on the snapshot', async () => {
+    const gate = deferred<void>();
+    destroy.mockReturnValue(gate.promise);
+
+    render(<Harness />);
+    fireEvent.click(screen.getByText('Remove mem_2'));
+
+    await act(async () => {
+      gate.reject(new Error('cannot remove last admin'));
+    });
+
+    expect(screen.getByTestId('state')).toHaveTextContent('ready');
+    expect(screen.getByTestId('error')).toHaveTextContent('cannot remove last admin');
+    expect(revalidate).not.toHaveBeenCalled();
+  });
+
+  it('fetches a new page via the memberships resource', () => {
+    render(<Harness />);
+
+    fireEvent.click(screen.getByText('Page2'));
+
+    expect(fetchPage).toHaveBeenCalledWith(2);
+  });
+});