feat(ui): add enterprise account views and interactive stories

.changeset/enterprise-accounts-view.md

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

packages/swingset/src/components/DocsViewer.tsx

@@ -30,6 +30,9 @@ const docModules: Record<string, Record<string, React.ComponentType>> = {
     'user-profile-billing-history-section': dynamic(
       () => import('../stories/user-profile-billing-history-section.mdx'),
     ),
+    'user-profile-enterprise-accounts-section': dynamic(
+      () => import('../stories/user-profile-enterprise-accounts-section.mdx'),
+    ),
     'user-profile-connected-accounts-section': dynamic(
       () => import('../stories/user-profile-connected-accounts-section.mdx'),
     ),

packages/swingset/src/lib/registry.ts

@@ -230,6 +230,14 @@ import {
   meta as userProfileDeleteSectionMeta,
   WithError as UserProfileDeleteSectionWithError,
 } from '../stories/user-profile-delete-section.stories';
+import {
+  ConnectionError as UserProfileEnterpriseAccountsSectionConnectionError,
+  ConnectOnly as UserProfileEnterpriseAccountsSectionConnectOnly,
+  Default as UserProfileEnterpriseAccountsSectionDefault,
+  LinkedAccounts as UserProfileEnterpriseAccountsSectionLinkedAccounts,
+  meta as userProfileEnterpriseAccountsSectionMeta,
+  RequiresAction as UserProfileEnterpriseAccountsSectionRequiresAction,
+} from '../stories/user-profile-enterprise-accounts-section.stories';
 import {
   Default as UserProfileMfaSectionDefault,
   Empty as UserProfileMfaSectionEmpty,
@@ -529,6 +537,14 @@ const userProfilePaymentMethodsSectionModule: StoryModule = {
   Default: UserProfilePaymentMethodsSectionDefault,
   Empty: UserProfilePaymentMethodsSectionEmpty,
 };
+const userProfileEnterpriseAccountsSectionModule: StoryModule = {
+  meta: userProfileEnterpriseAccountsSectionMeta,
+  Default: UserProfileEnterpriseAccountsSectionDefault,
+  LinkedAccounts: UserProfileEnterpriseAccountsSectionLinkedAccounts,
+  RequiresAction: UserProfileEnterpriseAccountsSectionRequiresAction,
+  ConnectOnly: UserProfileEnterpriseAccountsSectionConnectOnly,
+  ConnectionError: UserProfileEnterpriseAccountsSectionConnectionError,
+};
 const userProfileConnectedAccountsSectionModule: StoryModule = {
   meta: userProfileConnectedAccountsSectionMeta,
   Default: UserProfileConnectedAccountsSectionDefault,
@@ -596,6 +612,7 @@ export const registry: StoryModule[] = [
   userProfilePaymentMethodsSectionModule,
   userProfileBillingHistorySectionModule,
   userProfileConnectedAccountsSectionModule,
+  userProfileEnterpriseAccountsSectionModule,
   userProfileWeb3WalletsSectionModule,
   userProfileDeleteSectionModule,
   // Reverification

packages/swingset/src/stories/fixtures/user-profile-enterprise-accounts.ts

@@ -0,0 +1,55 @@
+import type {
+  UserProfileEnterpriseAccount,
+  UserProfileEnterpriseConnection,
+} from '@clerk/ui/mosaic/features/user-profile/user-profile-enterprise-accounts-section/user-profile-enterprise-accounts-section.types';
+import { useState } from 'react';
+
+export const accounts: UserProfileEnterpriseAccount[] = [
+  {
+    id: 'account_okta',
+    name: 'Acme Okta',
+    emailAddress: 'alex@acme.com',
+    iconUrl: 'https://img.clerk.com/static/okta.svg',
+  },
+  { id: 'account_custom', name: 'Internal SSO', emailAddress: 'alex@internal.acme.com' },
+];
+const connections: UserProfileEnterpriseConnection[] = [
+  { id: 'connection_google', name: 'Google Workspace', iconUrl: 'https://img.clerk.com/static/google.svg' },
+  { id: 'connection_saml', name: 'Partner SAML' },
+];
+
+export function useEnterpriseAccountsFixture({
+  initialAccounts = accounts,
+  initialError,
+}: {
+  initialAccounts?: UserProfileEnterpriseAccount[];
+  initialError?: string;
+} = {}) {
+  const [linkedAccounts, setLinkedAccounts] = useState(initialAccounts);
+  const [availableConnections, setAvailableConnections] = useState(
+    connections.map((connection, index) => ({ ...connection, connectError: index === 0 ? initialError : undefined })),
+  );
+  const [pendingConnectionId, setPendingConnectionId] = useState<string>();
+
+  return {
+    accounts: linkedAccounts,
+    connections: availableConnections,
+    pendingConnectionId,
+    onConnect: (id: string) => {
+      const connection = availableConnections.find(item => item.id === id);
+      if (!connection || pendingConnectionId) {
+        return;
+      }
+      setPendingConnectionId(id);
+      setAvailableConnections(current => current.map(item => ({ ...item, connectError: undefined })));
+      setTimeout(() => {
+        setLinkedAccounts(current => [
+          ...current,
+          { id: `account_${id}`, name: connection.name, iconUrl: connection.iconUrl, emailAddress: 'alex@acme.com' },
+        ]);
+        setAvailableConnections(current => current.filter(item => item.id !== id));
+        setPendingConnectionId(undefined);
+      }, 1500);
+    },
+  };
+}

packages/swingset/src/stories/user-profile-enterprise-accounts-section.mdx

@@ -0,0 +1,35 @@
+import * as Stories from './user-profile-enterprise-accounts-section.stories';
+
+# UserProfileEnterpriseAccountsSection
+
+Linked enterprise accounts and available connection rows, driven entirely by supplied data and callbacks. Accounts and available connections are already filtered by the caller. Selecting a connection in these examples only changes preview state; it does not start SSO.
+
+<Story name='Default' storyModule={Stories} composition={[
+  { name: 'Section', href: '/components/section', layer: 'Components' },
+  { name: 'Button', href: '/components/button', layer: 'Components' },
+  { name: 'Badge', href: '/components/badge', layer: 'Components' },
+  { name: 'Icon', href: '/components/icon', layer: 'Components' },
+  { name: 'Spinner', href: '/components/spinner', layer: 'Components' },
+]} />
+
+## Linked accounts
+
+<Story name='LinkedAccounts' storyModule={Stories} />
+
+## Requires action
+
+The badge is informational. The caller decides whether it applies; it does not introduce a repair or remove action.
+
+<Story name='RequiresAction' storyModule={Stories} />
+
+## Connect only
+
+Eligible connections can be displayed without any linked accounts. Select Connect to see its pending state; after a short delay, it becomes a linked account.
+
+<Story name='ConnectOnly' storyModule={Stories} />
+
+## Connection error
+
+The inline error is supplied by the caller. Selecting Connect clears the error, shows pending state, then adds the linked account.
+
+<Story name='ConnectionError' storyModule={Stories} />

packages/swingset/src/stories/user-profile-enterprise-accounts-section.stories.tsx

@@ -0,0 +1,46 @@
+import { UserProfileEnterpriseAccountsSectionView } from '@clerk/ui/mosaic/features/user-profile/user-profile-enterprise-accounts-section/user-profile-enterprise-accounts-section.view';
+
+import type { StoryMeta } from '@/lib/types';
+
+import { accounts, useEnterpriseAccountsFixture } from './fixtures/user-profile-enterprise-accounts';
+
+export { default as __source } from './user-profile-enterprise-accounts-section.stories?raw';
+
+export const meta: StoryMeta = {
+  group: 'User Profile',
+  status: 'wip',
+  title: 'UserProfileEnterpriseAccountsSection',
+  label: 'Enterprise accounts',
+  navigation: { category: 'Sections' },
+  source:
+    'packages/ui/src/mosaic/features/user-profile/user-profile-enterprise-accounts-section/user-profile-enterprise-accounts-section.view.tsx',
+};
+
+export function Default() {
+  const fixture = useEnterpriseAccountsFixture();
+  return <UserProfileEnterpriseAccountsSectionView {...fixture} />;
+}
+
+export function LinkedAccounts() {
+  return <UserProfileEnterpriseAccountsSectionView accounts={accounts} />;
+}
+
+export function RequiresAction() {
+  return (
+    <UserProfileEnterpriseAccountsSectionView
+      accounts={accounts.map(account => ({ ...account, requiresAction: true }))}
+    />
+  );
+}
+
+export function ConnectOnly() {
+  const fixture = useEnterpriseAccountsFixture({ initialAccounts: [] });
+  return <UserProfileEnterpriseAccountsSectionView {...fixture} />;
+}
+
+export function ConnectionError() {
+  const fixture = useEnterpriseAccountsFixture({
+    initialError: 'Unable to connect your account. Please try again.',
+  });
+  return <UserProfileEnterpriseAccountsSectionView {...fixture} />;
+}

packages/ui/src/mosaic/features/user-profile/__tests__/user-profile-enterprise-accounts-section.view.test.tsx

@@ -0,0 +1,89 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+
+import { UserProfileEnterpriseAccountsSectionView } from '../user-profile-enterprise-accounts-section/user-profile-enterprise-accounts-section.view';
+
+describe('UserProfileEnterpriseAccountsSectionView', () => {
+  it.each([{ connections: [] }, { connections: [{ id: 'okta', name: 'Acme Okta' }] }])(
+    'renders nothing without accounts or actionable connections (%j)',
+    ({ connections }) => {
+      const { container } = render(
+        <UserProfileEnterpriseAccountsSectionView
+          accounts={[]}
+          connections={connections}
+        />,
+      );
+      expect(container).toBeEmptyDOMElement();
+    },
+  );
+
+  it('offers a keyboard-accessible Connect button for each available connection', async () => {
+    const user = userEvent.setup();
+    const onConnect = vi.fn();
+    render(
+      <UserProfileEnterpriseAccountsSectionView
+        accounts={[]}
+        connections={[{ id: 'sso', name: 'SSO', iconUrl: '   ' }]}
+        onConnect={onConnect}
+      />,
+    );
+    const button = screen.getByRole('button', { name: 'Connect SSO' });
+    expect(screen.getByText('SSO')).toBeVisible();
+    expect(screen.getByText('S', { exact: true })).toBeInTheDocument();
+    expect(screen.queryByRole('menu')).not.toBeInTheDocument();
+    button.focus();
+    await user.keyboard('{Enter}');
+    expect(onConnect).toHaveBeenCalledExactlyOnceWith('sso');
+  });
+
+  it('blocks connection actions while pending and enables retry with a row error', async () => {
+    const user = userEvent.setup();
+    const onConnect = vi.fn();
+    const connections = [
+      { id: 'okta', name: 'Acme Okta' },
+      { id: 'saml', name: 'Custom SAML' },
+    ];
+    const { rerender } = render(
+      <UserProfileEnterpriseAccountsSectionView
+        accounts={[]}
+        connections={connections}
+        onConnect={onConnect}
+        pendingConnectionId='okta'
+      />,
+    );
+    expect(screen.getByRole('button', { name: 'Connect Acme Okta' })).toHaveAttribute('aria-busy', 'true');
+    expect(screen.getByRole('button', { name: 'Connect Custom SAML' })).toBeDisabled();
+    await user.click(screen.getByRole('button', { name: 'Connect Custom SAML' }));
+    expect(onConnect).not.toHaveBeenCalled();
+    rerender(
+      <UserProfileEnterpriseAccountsSectionView
+        accounts={[]}
+        connections={[{ ...connections[0], connectError: 'Unable to connect' }, connections[1]]}
+        onConnect={onConnect}
+      />,
+    );
+    expect(screen.getByRole('alert')).toHaveTextContent('Unable to connect');
+    expect(screen.getByRole('button', { name: 'Connect Acme Okta' })).toBeEnabled();
+    expect(screen.getByRole('button', { name: 'Connect Custom SAML' })).toBeEnabled();
+  });
+
+  it('renders linked account identity and requires-action status from plain props', () => {
+    render(
+      <UserProfileEnterpriseAccountsSectionView
+        accounts={[
+          { id: 'okta', name: 'Acme Okta', emailAddress: 'test@acme.com', requiresAction: true },
+          { id: 'custom', name: 'Custom SSO', iconUrl: 'https://example.com/logo.svg' },
+        ]}
+      />,
+    );
+    expect(screen.getByRole('region', { name: 'Enterprise accounts' })).toBeInTheDocument();
+    expect(screen.getByText('Acme Okta')).toBeInTheDocument();
+    expect(screen.getByText('test@acme.com')).toBeInTheDocument();
+    expect(screen.getByText('Requires action')).toBeInTheDocument();
+    expect(screen.getByText('A', { exact: true })).toBeInTheDocument();
+    expect(screen.getByText('Custom SSO')).toBeVisible();
+    expect(screen.queryByRole('img')).not.toBeInTheDocument();
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+  });
+});

packages/ui/src/mosaic/features/user-profile/user-profile-enterprise-accounts-section/user-profile-enterprise-account-row.view.tsx

@@ -0,0 +1,93 @@
+import * as stylex from '@stylexjs/stylex';
+
+import { Badge } from '../../../components/badge';
+import { Button } from '../../../components/button';
+import { Icon, IconFrame } from '../../../components/icon';
+import { Section } from '../../../components/section';
+import { Spinner } from '../../../components/spinner';
+import { userProfileEnterpriseAccountsMessages as m } from './user-profile-enterprise-accounts-section.messages';
+import { styles } from './user-profile-enterprise-accounts-section.styles';
+import type { UserProfileEnterpriseAccount } from './user-profile-enterprise-accounts-section.types';
+
+export function UserProfileEnterpriseAccountRowView({
+  account,
+  onConnect,
+  isPending,
+  disabled,
+}: {
+  account: UserProfileEnterpriseAccount;
+  onConnect?: (id: string) => void;
+  isPending?: boolean;
+  disabled?: boolean;
+}) {
+  const iconUrl = account.iconUrl?.trim();
+  return (
+    <Section.Row xstyle={onConnect && styles.connectRow}>
+      <Section.Item>
+        <Section.Media size='lg'>
+          <IconFrame>
+            {iconUrl ? (
+              <img
+                src={iconUrl}
+                alt=''
+                aria-hidden
+                {...stylex.props(styles.icon)}
+              />
+            ) : (
+              <span
+                aria-hidden
+                {...stylex.props(styles.fallback)}
+              >
+                {account.name.trim().charAt(0).toUpperCase()}
+              </span>
+            )}
+          </IconFrame>
+        </Section.Media>
+        <Section.Content>
+          <Section.Label xstyle={styles.label}>
+            <span
+              title={account.name}
+              {...stylex.props(styles.text)}
+            >
+              {account.name}
+            </span>
+            {account.requiresAction ? <Badge color='negative'>{m.requiresAction}</Badge> : null}
+          </Section.Label>
+          {account.emailAddress ? (
+            <Section.Description
+              title={account.emailAddress}
+              xstyle={styles.text}
+            >
+              {account.emailAddress}
+            </Section.Description>
+          ) : null}
+        </Section.Content>
+        {onConnect ? (
+          <Section.Actions>
+            <Button
+              color='neutral'
+              size='sm'
+              variant='outline'
+              aria-label={m.connectProvider.replace('{provider}', account.name)}
+              aria-busy={isPending || undefined}
+              disabled={disabled}
+              onClick={() => onConnect(account.id)}
+            >
+              {m.connect}
+              {isPending ? (
+                <Spinner size='sm' />
+              ) : (
+                <Icon
+                  name='arrow-right-top'
+                  placement='inline-end'
+                  size='sm'
+                />
+              )}
+            </Button>
+          </Section.Actions>
+        ) : null}
+      </Section.Item>
+      {onConnect && account.connectError ? <Section.Error>{account.connectError}</Section.Error> : null}
+    </Section.Row>
+  );
+}

packages/ui/src/mosaic/features/user-profile/user-profile-enterprise-accounts-section/user-profile-enterprise-accounts-section.messages.ts

@@ -0,0 +1,6 @@
+export const userProfileEnterpriseAccountsMessages = {
+  title: 'Enterprise accounts',
+  connect: 'Connect',
+  connectProvider: 'Connect {provider}',
+  requiresAction: 'Requires action',
+};