feat(ui): add OrganizationProfileApiKeysPanel mosaic component

.changeset/org-profile-api-keys-panel.md

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

packages/swingset/src/components/DocsViewer.tsx

@@ -13,6 +13,7 @@ const docModules: Record<string, Record<string, React.ComponentType>> = {
   organization: {
     '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-profile-section': dynamic(
       () => import('../stories/organization-profile-profile-section.mdx'),
     ),

packages/swingset/src/lib/registry.ts

@@ -38,6 +38,10 @@ import {
   Default as OrganizationProfileDefault,
   meta as organizationProfileMeta,
 } from '../stories/organization-profile.stories';
+import {
+  Default as OrganizationProfileApiKeysPanelDefault,
+  meta as organizationProfileApiKeysPanelMeta,
+} from '../stories/organization-profile-api-keys-panel.stories';
 import {
   Default as OrganizationProfileDeleteSectionDefault,
   meta as organizationProfileDeleteSectionMeta,
@@ -88,6 +92,10 @@ const organizationProfileGeneralPanelModule: StoryModule = {
   meta: organizationProfileGeneralPanelMeta,
   Default: OrganizationProfileGeneralPanelDefault,
 };
+const organizationProfileApiKeysPanelModule: StoryModule = {
+  meta: organizationProfileApiKeysPanelMeta,
+  Default: OrganizationProfileApiKeysPanelDefault,
+};
 
 const cardComponentModule: StoryModule = { meta: cardComponentMeta, Default: CardDefault, Centered: CardCentered };
 
@@ -138,6 +146,7 @@ export const registry: StoryModule[] = [
   // Organization
   organizationProfileModule,
   organizationProfileGeneralPanelModule,
+  organizationProfileApiKeysPanelModule,
   organizationProfileProfileSectionModule,
   organizationProfileLeaveSectionModule,
   organizationProfileDeleteSectionModule,

packages/swingset/src/stories/organization-profile-api-keys-panel.mdx

@@ -0,0 +1,17 @@
+import * as OrganizationProfileApiKeysPanelStories from './organization-profile-api-keys-panel.stories';
+
+# Organization Profile API Keys Panel
+
+The API keys tab panel of the Organization Profile — lists an organization's API keys and owns the create and revoke flows. It gates on `org:sys_api_keys:read` to view and `org:sys_api_keys:manage` to create or revoke.
+
+<Story
+  name='Default'
+  storyModule={OrganizationProfileApiKeysPanelStories}
+  composition={[
+    {
+      name: 'OrganizationProfile',
+      href: '/organization/organization-profile',
+      layer: 'Organization',
+    },
+  ]}
+/>

packages/swingset/src/stories/organization-profile-api-keys-panel.stories.tsx

@@ -0,0 +1,97 @@
+/** @jsxImportSource @emotion/react */
+import { useMachine } from '@clerk/ui/mosaic/machine/useMachine';
+import type { ApiKeyRow } from '@clerk/ui/mosaic/organization/organization-profile-api-keys-panel.view';
+import { OrganizationProfileApiKeysPanelView } from '@clerk/ui/mosaic/organization/organization-profile-api-keys-panel.view';
+import { organizationProfileApiKeysPanelCreateMachine } from '@clerk/ui/mosaic/organization/organization-profile-api-keys-panel-create.machine';
+import { organizationProfileApiKeysPanelRevokeMachine } from '@clerk/ui/mosaic/organization/organization-profile-api-keys-panel-revoke.machine';
+import { useMemo, useState } from 'react';
+
+import type { StoryMeta } from '@/lib/types';
+
+export const meta: StoryMeta = {
+  group: 'Organization',
+  title: 'OrganizationProfileApiKeysPanel',
+  source: 'packages/ui/src/mosaic/organization/organization-profile-api-keys-panel.tsx',
+};
+
+const SHOW_DESCRIPTION = false;
+
+// Fixed dates (not `Date.now()`) so the demo renders deterministically across reloads.
+const DEMO_ROWS: ApiKeyRow[] = [
+  {
+    id: 'key_prod',
+    name: 'Production',
+    createdAt: new Date('2026-01-12'),
+    expiration: null,
+    lastUsedAt: new Date('2026-06-28'),
+  },
+  {
+    id: 'key_ci',
+    name: 'CI pipeline',
+    createdAt: new Date('2026-03-04'),
+    expiration: new Date('2026-09-04'),
+    lastUsedAt: null,
+  },
+  {
+    id: 'key_staging',
+    name: 'Staging',
+    createdAt: new Date('2026-05-20'),
+    expiration: null,
+    lastUsedAt: new Date('2026-07-01'),
+  },
+];
+
+const delay = (ms: number) => new Promise<void>(resolve => setTimeout(resolve, ms));
+
+export function Default() {
+  const [searchValue, setSearchValue] = useState('');
+
+  const rows = useMemo(() => {
+    const query = searchValue.trim().toLowerCase();
+    return query ? DEMO_ROWS.filter(row => row.name.toLowerCase().includes(query)) : DEMO_ROWS;
+  }, [searchValue]);
+
+  const [createSnapshot, sendCreate, createActor] = useMachine(organizationProfileApiKeysPanelCreateMachine, {
+    context: {
+      showDescription: SHOW_DESCRIPTION,
+      createAPIKey: async params => {
+        await delay(600);
+        return { name: params.name, secret: `sk_test_${params.name.replace(/\s+/g, '_').toLowerCase()}` };
+      },
+    },
+  });
+
+  const [revokeSnapshot, sendRevoke, revokeActor] = useMachine(organizationProfileApiKeysPanelRevokeMachine, {
+    context: {
+      confirmationText: 'Revoke',
+      revokeAPIKey: () => delay(600),
+    },
+  });
+
+  return (
+    <OrganizationProfileApiKeysPanelView
+      list={{
+        rows,
+        isLoading: false,
+        page: 1,
+        pageCount: 1,
+        itemCount: rows.length,
+        onPageChange: () => undefined,
+        searchValue,
+        onSearchChange: setSearchValue,
+      }}
+      canManage
+      create={{
+        snapshot: createSnapshot,
+        send: sendCreate,
+        canSubmit: createActor.can({ type: 'SUBMIT' }),
+        showDescription: SHOW_DESCRIPTION,
+      }}
+      revoke={{
+        snapshot: revokeSnapshot,
+        send: sendRevoke,
+        canConfirm: revokeActor.can({ type: 'CONFIRM' }),
+      }}
+    />
+  );
+}

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

@@ -13,6 +13,11 @@ The full Organization Profile AIO — lays out the organization panels under a t
       href: '/organization/organization-profile-general-panel',
       layer: 'Organization',
     },
+    {
+      name: 'OrganizationProfileApiKeysPanel',
+      href: '/organization/organization-profile-api-keys-panel',
+      layer: 'Organization',
+    },
     { name: 'Tabs', href: '/components/tabs', layer: 'Components' },
   ]}
 />

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

@@ -3,6 +3,7 @@ import { OrganizationProfileView } from '@clerk/ui/mosaic/organization/organizat
 
 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';
 
 export const meta: StoryMeta = {
@@ -12,5 +13,10 @@ export const meta: StoryMeta = {
 };
 
 export function Default() {
-  return <OrganizationProfileView general={<OrganizationProfileGeneralPanelDemo />} />;
+  return (
+    <OrganizationProfileView
+      general={<OrganizationProfileGeneralPanelDemo />}
+      apiKeys={<OrganizationProfileApiKeysPanelDemo />}
+    />
+  );
 }

packages/ui/src/mosaic/organization/__tests__/organization-profile-api-keys-panel-create.machine.test.ts

@@ -0,0 +1,143 @@
+import { describe, expect, it, vi } from 'vitest';
+
+import { createActor } from '../../machine/createActor';
+import { deferred, tick } from '../../machines/__tests__/test-utils';
+import { organizationProfileApiKeysPanelCreateMachine } from '../organization-profile-api-keys-panel-create.machine';
+
+const createdKey = { name: 'CI token', secret: 'sk_test_123' };
+
+function actorWith(createAPIKey = vi.fn(() => Promise.resolve(createdKey))) {
+  const actor = createActor(organizationProfileApiKeysPanelCreateMachine, {
+    context: { createAPIKey },
+  });
+  actor.start();
+  return { actor, createAPIKey };
+}
+
+describe('organizationProfileApiKeysPanelCreateMachine', () => {
+  it('opens the create form on OPEN', () => {
+    const { actor } = actorWith();
+
+    expect(actor.getSnapshot().value).toBe('closed');
+    actor.send({ type: 'OPEN' });
+    expect(actor.getSnapshot().value).toBe('editing');
+  });
+
+  it('guards SUBMIT until the name is longer than two characters', () => {
+    const { actor, createAPIKey } = actorWith();
+
+    actor.send({ type: 'OPEN' });
+    actor.send({ type: 'TYPE_NAME', value: 'ab' });
+    actor.send({ type: 'SUBMIT' });
+
+    expect(actor.getSnapshot().value).toBe('editing');
+    expect(createAPIKey).not.toHaveBeenCalled();
+  });
+
+  it('invokes createAPIKey with the drafted values after a valid submit', async () => {
+    const { actor, createAPIKey } = actorWith();
+
+    actor.send({ type: 'OPEN' });
+    actor.send({ type: 'TYPE_NAME', value: 'CI token' });
+    actor.send({ type: 'TYPE_DESCRIPTION', value: 'for CI' });
+    actor.send({ type: 'SET_EXPIRATION', secondsUntilExpiration: 86400 });
+    actor.send({ type: 'SUBMIT' });
+
+    expect(actor.getSnapshot().value).toBe('creating');
+    expect(createAPIKey).toHaveBeenCalledWith({
+      name: 'CI token',
+      description: 'for CI',
+      secondsUntilExpiration: 86400,
+    });
+
+    await tick();
+
+    expect(actor.getSnapshot().value).toBe('showingSecret');
+    expect(actor.getSnapshot().context.createdKey).toEqual(createdKey);
+  });
+
+  it('omits an empty description when submitting', async () => {
+    const { actor, createAPIKey } = actorWith();
+
+    actor.send({ type: 'OPEN' });
+    actor.send({ type: 'TYPE_NAME', value: 'CI token' });
+    actor.send({ type: 'SUBMIT' });
+
+    await tick();
+
+    expect(createAPIKey).toHaveBeenCalledWith({
+      name: 'CI token',
+      description: undefined,
+      secondsUntilExpiration: undefined,
+    });
+  });
+
+  it('returns to editing with an error message when creation fails', async () => {
+    const { actor } = actorWith(vi.fn(() => Promise.reject(new Error('name already exists'))));
+
+    actor.send({ type: 'OPEN' });
+    actor.send({ type: 'TYPE_NAME', value: 'CI token' });
+    actor.send({ type: 'SUBMIT' });
+
+    await tick();
+
+    expect(actor.getSnapshot().value).toBe('editing');
+    expect(actor.getSnapshot().context.error).toBe('name already exists');
+  });
+
+  it('clears the error as soon as the user edits again', async () => {
+    const { actor } = actorWith(vi.fn(() => Promise.reject(new Error('boom'))));
+
+    actor.send({ type: 'OPEN' });
+    actor.send({ type: 'TYPE_NAME', value: 'CI token' });
+    actor.send({ type: 'SUBMIT' });
+    await tick();
+    expect(actor.getSnapshot().context.error).toBe('boom');
+
+    actor.send({ type: 'TYPE_NAME', value: 'CI token v2' });
+    expect(actor.getSnapshot().context.error).toBeNull();
+  });
+
+  it('discards drafts on CANCEL and closes', () => {
+    const { actor } = actorWith();
+
+    actor.send({ type: 'OPEN' });
+    actor.send({ type: 'TYPE_NAME', value: 'CI token' });
+    actor.send({ type: 'CANCEL' });
+
+    expect(actor.getSnapshot().value).toBe('closed');
+    expect(actor.getSnapshot().context.draftName).toBe('');
+  });
+
+  it('resets drafts and the revealed secret when the copy step is closed', async () => {
+    const { actor } = actorWith();
+
+    actor.send({ type: 'OPEN' });
+    actor.send({ type: 'TYPE_NAME', value: 'CI token' });
+    actor.send({ type: 'SUBMIT' });
+    await tick();
+    expect(actor.getSnapshot().value).toBe('showingSecret');
+
+    actor.send({ type: 'CLOSE' });
+
+    expect(actor.getSnapshot().value).toBe('closed');
+    expect(actor.getSnapshot().context.createdKey).toBeNull();
+    expect(actor.getSnapshot().context.draftName).toBe('');
+  });
+
+  it('does not resolve the create promise until it settles', async () => {
+    const gate = deferred<typeof createdKey>();
+    const { actor } = actorWith(vi.fn(() => gate.promise));
+
+    actor.send({ type: 'OPEN' });
+    actor.send({ type: 'TYPE_NAME', value: 'CI token' });
+    actor.send({ type: 'SUBMIT' });
+
+    expect(actor.getSnapshot().value).toBe('creating');
+
+    gate.resolve(createdKey);
+    await tick();
+
+    expect(actor.getSnapshot().value).toBe('showingSecret');
+  });
+});