refactor(ui): gate mosaic organization sections by permission and admin-delete

.changeset/mosaic-org-section-gating.md

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

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

@@ -1,7 +1,7 @@
 /** @jsxImportSource @emotion/react */
 import { useMachine } from '@clerk/ui/mosaic/machine/useMachine';
-import { deleteOrgMachine } from '@clerk/ui/mosaic/sections/delete-organization-machine';
-import { DeleteOrganizationView } from '@clerk/ui/mosaic/sections/delete-organization-view';
+import { deleteOrgMachine } from '@clerk/ui/mosaic/sections/delete-organization.machine';
+import { DeleteOrganizationView } from '@clerk/ui/mosaic/sections/delete-organization.view';
 
 import type { StoryMeta } from '@/lib/types';
 

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

@@ -1,7 +1,7 @@
 /** @jsxImportSource @emotion/react */
 import { useMachine } from '@clerk/ui/mosaic/machine/useMachine';
-import { leaveOrgMachine } from '@clerk/ui/mosaic/sections/leave-organization-machine';
-import { LeaveOrganizationView } from '@clerk/ui/mosaic/sections/leave-organization-view';
+import { leaveOrgMachine } from '@clerk/ui/mosaic/sections/leave-organization.machine';
+import { LeaveOrganizationView } from '@clerk/ui/mosaic/sections/leave-organization.view';
 
 import type { StoryMeta } from '@/lib/types';
 

packages/ui/src/mosaic/sections/__tests__/delete-organization-controller.test.tsx → packages/ui/src/mosaic/sections/__tests__/delete-organization.controller.test.tsx

@@ -1,29 +1,38 @@
 import { act, fireEvent, render, screen } from '@testing-library/react';
-import React from 'react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { deferred } from '../../machines/__tests__/test-utils';
-import { useDeleteOrganizationController } from '../delete-organization-controller';
+import { useDeleteOrganizationController } from '../delete-organization.controller';
 
 const ORG_NAME = 'Acme Inc';
 
 let destroy: ReturnType<typeof vi.fn>;
 let revalidate: ReturnType<typeof vi.fn>;
-let organization: { id: string; name: string; destroy: () => Promise<void> } | null;
+let checkAuthorization: ReturnType<typeof vi.fn>;
+let isLoaded: boolean;
+let isSessionLoaded: boolean;
+let organization: { id: string; name: string; destroy: () => Promise<void>; adminDeleteEnabled: boolean } | null;
 
 vi.mock('@clerk/shared/react', async importOriginal => {
  const actual = await importOriginal<typeof import('@clerk/shared/react')>();
  return {
  ...actual,
- useOrganization: () => ({ isLoaded: true, organization, membership: null }),
+ useOrganization: () => ({ isLoaded, organization, membership: null }),
  useOrganizationList: () => ({ userMemberships: { revalidate } }),
+ useSession: () => ({
+ isLoaded: isSessionLoaded,
+ session: isSessionLoaded ? { id: 'sess_1', checkAuthorization } : undefined,
+ }),
  };
 });
 
 beforeEach(() => {
  destroy = vi.fn();
  revalidate = vi.fn().mockResolvedValue(undefined);
- organization = { id: 'org_1', name: ORG_NAME, destroy };
+ checkAuthorization = vi.fn().mockReturnValue(true);
+ isLoaded = true;
+ isSessionLoaded = true;
+ organization = { id: 'org_1', name: ORG_NAME, destroy, adminDeleteEnabled: true };
 });
 
 afterEach(() => {
@@ -33,7 +42,7 @@ afterEach(() => {
 function Harness() {
  const controller = useDeleteOrganizationController();
  if (controller.status !== 'ready') {
- return <output data-testid='state'>loading</output>;
+ return <output data-testid='state'>{controller.status}</output>;
  }
  return (
  <div>
@@ -53,6 +62,46 @@ function openAndConfirm() {
 }
 
 describe('useDeleteOrganizationController', () => {
+ it('is loading until useOrganization is loaded', () => {
+ isLoaded = false;
+
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('loading');
+ });
+
+ it('is loading until the session is loaded', () => {
+ isSessionLoaded = false;
+
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('loading');
+ expect(checkAuthorization).not.toHaveBeenCalled();
+ });
+
+ it('is ready when the user can delete and admin delete is enabled', () => {
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('idle');
+ expect(checkAuthorization).toHaveBeenCalledWith({ permission: 'org:sys_profile:delete' });
+ });
+
+ it('is hidden when the user lacks the delete permission', () => {
+ checkAuthorization.mockReturnValue(false);
+
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('hidden');
+ });
+
+ it('is hidden when admin delete is disabled', () => {
+ organization = { id: 'org_1', name: ORG_NAME, destroy, adminDeleteEnabled: false };
+
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('hidden');
+ });
+
  it('drives CONFIRM → deleting → resolve → deleted', async () => {
  const gate = deferred<void>();
  destroy.mockReturnValue(gate.promise);

packages/ui/src/mosaic/sections/__tests__/delete-organization-machine.test.ts → packages/ui/src/mosaic/sections/__tests__/delete-organization.machine.test.ts

@@ -1,7 +1,7 @@
 import { describe, expect, it, vi } from 'vitest';
 
 import { createActor } from '../../machine/createActor';
-import { deleteOrgMachine } from '../delete-organization-machine';
+import { deleteOrgMachine } from '../delete-organization.machine';
 
 const tick = () => new Promise<void>(resolve => setTimeout(resolve, 0));
 

packages/ui/src/mosaic/sections/__tests__/delete-organization-view.test.tsx → packages/ui/src/mosaic/sections/__tests__/delete-organization.view.test.tsx

@@ -1,10 +1,10 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 
-import { MosaicProvider } from '../../MosaicProvider';
 import type { Snapshot } from '../../machine/types';
-import type { DeleteOrgContext } from '../delete-organization-machine';
-import { DeleteOrganizationView } from '../delete-organization-view';
+import { MosaicProvider } from '../../MosaicProvider';
+import type { DeleteOrgContext } from '../delete-organization.machine';
+import { DeleteOrganizationView } from '../delete-organization.view';
 
 function renderView(snapshot: Snapshot<DeleteOrgContext>, send = vi.fn(), canSubmit = false) {
  render(

packages/ui/src/mosaic/sections/__tests__/leave-organization-controller.test.tsx → packages/ui/src/mosaic/sections/__tests__/leave-organization.controller.test.tsx

@@ -1,29 +1,30 @@
 import { act, fireEvent, render, screen } from '@testing-library/react';
-import React from 'react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { deferred } from '../../machines/__tests__/test-utils';
-import { useLeaveOrganizationController } from '../leave-organization-controller';
+import { useLeaveOrganizationController } from '../leave-organization.controller';
 
 const ORG_NAME = 'Acme Inc';
 
 let destroy: ReturnType<typeof vi.fn>;
 let revalidate: ReturnType<typeof vi.fn>;
+let isLoaded: boolean;
 let organization: { id: string; name: string } | null;
-let membership: { id: string; destroy: () => Promise<void> } | null;
+let membership: { id: string; destroy: () => Promise<void> } | null | undefined;
 
 vi.mock('@clerk/shared/react', async importOriginal => {
  const actual = await importOriginal<typeof import('@clerk/shared/react')>();
  return {
  ...actual,
- useOrganization: () => ({ isLoaded: true, organization, membership }),
+ useOrganization: () => ({ isLoaded, organization, membership }),
  useOrganizationList: () => ({ userMemberships: { revalidate } }),
  };
 });
 
 beforeEach(() => {
  destroy = vi.fn();
  revalidate = vi.fn().mockResolvedValue(undefined);
+ isLoaded = true;
  organization = { id: 'org_1', name: ORG_NAME };
  membership = { id: 'mem_1', destroy };
 });
@@ -35,7 +36,7 @@ afterEach(() => {
 function Harness() {
  const controller = useLeaveOrganizationController();
  if (controller.status !== 'ready') {
- return <output data-testid='state'>loading</output>;
+ return <output data-testid='state'>{controller.status}</output>;
  }
  return (
  <div>
@@ -55,6 +56,38 @@ function openAndConfirm() {
 }
 
 describe('useLeaveOrganizationController', () => {
+ it('is loading until useOrganization is loaded', () => {
+ isLoaded = false;
+
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('loading');
+ });
+
+ it('is loading while membership is still resolving', () => {
+ membership = undefined;
+
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('loading');
+ });
+
+ it('is hidden when there is no active organization', () => {
+ organization = null;
+
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('hidden');
+ });
+
+ it('is hidden when there is no membership', () => {
+ membership = null;
+
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('hidden');
+ });
+
  it('drives CONFIRM → leaving → resolve → left', async () => {
  const gate = deferred<void>();
  destroy.mockReturnValue(gate.promise);

packages/ui/src/mosaic/sections/__tests__/leave-organization-machine.test.ts → packages/ui/src/mosaic/sections/__tests__/leave-organization.machine.test.ts

@@ -1,7 +1,7 @@
 import { describe, expect, it, vi } from 'vitest';
 
 import { createActor } from '../../machine/createActor';
-import { leaveOrgMachine } from '../leave-organization-machine';
+import { leaveOrgMachine } from '../leave-organization.machine';
 
 const tick = () => new Promise<void>(resolve => setTimeout(resolve, 0));
 

packages/ui/src/mosaic/sections/__tests__/leave-organization-view.test.tsx → packages/ui/src/mosaic/sections/__tests__/leave-organization.view.test.tsx

@@ -1,10 +1,10 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 
-import { MosaicProvider } from '../../MosaicProvider';
 import type { Snapshot } from '../../machine/types';
-import type { LeaveOrgContext } from '../leave-organization-machine';
-import { LeaveOrganizationView } from '../leave-organization-view';
+import { MosaicProvider } from '../../MosaicProvider';
+import type { LeaveOrgContext } from '../leave-organization.machine';
+import { LeaveOrganizationView } from '../leave-organization.view';
 
 function renderView(snapshot: Snapshot<LeaveOrgContext>, send = vi.fn(), canSubmit = false) {
  render(

packages/ui/src/mosaic/sections/delete-organization.controller.tsx

@@ -0,0 +1,55 @@
+import { useOrganization, useOrganizationList, useSession } from '@clerk/shared/react';
+
+import type { Snapshot } from '../machine/types';
+import { useMachine } from '../machine/useMachine';
+import type { DeleteOrgContext, DeleteOrgEvent } from './delete-organization.machine';
+import { deleteOrgMachine } from './delete-organization.machine';
+
+type DeleteOrganizationController =
+ | { status: 'loading' }
+ | { status: 'hidden' }
+ | {
+ status: 'ready';
+ snapshot: Snapshot<DeleteOrgContext>;
+ send: (event: DeleteOrgEvent) => void;
+ canSubmit: boolean;
+ };
+
+export function useDeleteOrganizationController(): DeleteOrganizationController {
+ const { isLoaded: isOrganizationLoaded, organization } = useOrganization();
+ const { isLoaded: isSessionLoaded, session } = useSession();
+ const { userMemberships } = useOrganizationList({ userMemberships: true });
+
+ const [snapshot, send, actor] = useMachine(deleteOrgMachine, {
+ context: {
+ organizationName: organization?.name ?? '',
+ destroyOrganization: async () => {
+ await organization?.destroy();
+ // Refresh org lists elsewhere (e.g. the switcher). Not awaited: a stale
+ // list must not make a successful delete look like it failed.
+ void userMemberships.revalidate?.();
+ // TODO(mosaic): navigate away from the deleted org's profile once the flow
+ // has router context, mirroring legacy navigateAfterLeaveOrganization.
+ },
+ },
+ });
+
+ // The permission check needs both the organization and the session resolved.
+ // Treat either still loading as 'loading' so a not-yet-known session is never
+ // collapsed into a definitive 'hidden'.
+ if (!isOrganizationLoaded || !isSessionLoaded) {
+ return { status: 'loading' };
+ }
+
+ const canDelete = session?.checkAuthorization({ permission: 'org:sys_profile:delete' }) ?? false;
+ if (!organization || !canDelete || !organization.adminDeleteEnabled) {
+ return { status: 'hidden' };
+ }
+
+ return {
+ status: 'ready',
+ snapshot,
+ send,
+ canSubmit: actor.can({ type: 'CONFIRM' }),
+ };
+}

packages/ui/src/mosaic/sections/delete-organization.tsx

@@ -1,10 +1,11 @@
-import { SectionSkeleton } from '../components/section-skeleton';
-import { useDeleteOrganizationController } from './delete-organization-controller';
-import { DeleteOrganizationView } from './delete-organization-view';
+import { useDeleteOrganizationController } from './delete-organization.controller';
+import { DeleteOrganizationView } from './delete-organization.view';
 
 export function DeleteOrganization() {
  const controller = useDeleteOrganizationController();
- if (controller.status === 'loading') return <SectionSkeleton />;
+ if (controller.status !== 'ready') {
+ return null;
+ }
  return (
  <DeleteOrganizationView
  snapshot={controller.snapshot}

packages/ui/src/mosaic/sections/delete-organization-view.tsx → packages/ui/src/mosaic/sections/delete-organization.view.tsx

@@ -2,7 +2,7 @@ import { Destructive } from '../block/destructive';
 import { Box } from '../components/box';
 import { Button } from '../components/button';
 import type { Snapshot } from '../machine/types';
-import type { DeleteOrgContext, DeleteOrgEvent } from './delete-organization-machine';
+import type { DeleteOrgContext, DeleteOrgEvent } from './delete-organization.machine';
 
 interface DeleteOrganizationViewProps {
  snapshot: Snapshot<DeleteOrgContext>;

.changeset/mosaic-org-section-gating.md

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

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

@@ -1,7 +1,7 @@
 /** @jsxImportSource @emotion/react */
 import { useMachine } from '@clerk/ui/mosaic/machine/useMachine';
-import { deleteOrgMachine } from '@clerk/ui/mosaic/sections/delete-organization-machine';
-import { DeleteOrganizationView } from '@clerk/ui/mosaic/sections/delete-organization-view';
+import { deleteOrgMachine } from '@clerk/ui/mosaic/sections/delete-organization.machine';
+import { DeleteOrganizationView } from '@clerk/ui/mosaic/sections/delete-organization.view';
 
 import type { StoryMeta } from '@/lib/types';
 

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

@@ -1,7 +1,7 @@
 /** @jsxImportSource @emotion/react */
 import { useMachine } from '@clerk/ui/mosaic/machine/useMachine';
-import { leaveOrgMachine } from '@clerk/ui/mosaic/sections/leave-organization-machine';
-import { LeaveOrganizationView } from '@clerk/ui/mosaic/sections/leave-organization-view';
+import { leaveOrgMachine } from '@clerk/ui/mosaic/sections/leave-organization.machine';
+import { LeaveOrganizationView } from '@clerk/ui/mosaic/sections/leave-organization.view';
 
 import type { StoryMeta } from '@/lib/types';
 

packages/ui/src/mosaic/sections/__tests__/delete-organization-controller.test.tsx → packages/ui/src/mosaic/sections/__tests__/delete-organization.controller.test.tsx

@@ -1,29 +1,38 @@
 import { act, fireEvent, render, screen } from '@testing-library/react';
-import React from 'react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { deferred } from '../../machines/__tests__/test-utils';
-import { useDeleteOrganizationController } from '../delete-organization-controller';
+import { useDeleteOrganizationController } from '../delete-organization.controller';
 
 const ORG_NAME = 'Acme Inc';
 
 let destroy: ReturnType<typeof vi.fn>;
 let revalidate: ReturnType<typeof vi.fn>;
-let organization: { id: string; name: string; destroy: () => Promise<void> } | null;
+let checkAuthorization: ReturnType<typeof vi.fn>;
+let isLoaded: boolean;
+let isSessionLoaded: boolean;
+let organization: { id: string; name: string; destroy: () => Promise<void>; adminDeleteEnabled: boolean } | null;
 
 vi.mock('@clerk/shared/react', async importOriginal => {
  const actual = await importOriginal<typeof import('@clerk/shared/react')>();
  return {
  ...actual,
- useOrganization: () => ({ isLoaded: true, organization, membership: null }),
+ useOrganization: () => ({ isLoaded, organization, membership: null }),
  useOrganizationList: () => ({ userMemberships: { revalidate } }),
+ useSession: () => ({
+ isLoaded: isSessionLoaded,
+ session: isSessionLoaded ? { id: 'sess_1', checkAuthorization } : undefined,
+ }),
  };
 });
 
 beforeEach(() => {
  destroy = vi.fn();
  revalidate = vi.fn().mockResolvedValue(undefined);
- organization = { id: 'org_1', name: ORG_NAME, destroy };
+ checkAuthorization = vi.fn().mockReturnValue(true);
+ isLoaded = true;
+ isSessionLoaded = true;
+ organization = { id: 'org_1', name: ORG_NAME, destroy, adminDeleteEnabled: true };
 });
 
 afterEach(() => {
@@ -33,7 +42,7 @@ afterEach(() => {
 function Harness() {
  const controller = useDeleteOrganizationController();
  if (controller.status !== 'ready') {
- return <output data-testid='state'>loading</output>;
+ return <output data-testid='state'>{controller.status}</output>;
  }
  return (
  <div>
@@ -53,6 +62,46 @@ function openAndConfirm() {
 }
 
 describe('useDeleteOrganizationController', () => {
+ it('is loading until useOrganization is loaded', () => {
+ isLoaded = false;
+
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('loading');
+ });
+
+ it('is loading until the session is loaded', () => {
+ isSessionLoaded = false;
+
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('loading');
+ expect(checkAuthorization).not.toHaveBeenCalled();
+ });
+
+ it('is ready when the user can delete and admin delete is enabled', () => {
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('idle');
+ expect(checkAuthorization).toHaveBeenCalledWith({ permission: 'org:sys_profile:delete' });
+ });
+
+ it('is hidden when the user lacks the delete permission', () => {
+ checkAuthorization.mockReturnValue(false);
+
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('hidden');
+ });
+
+ it('is hidden when admin delete is disabled', () => {
+ organization = { id: 'org_1', name: ORG_NAME, destroy, adminDeleteEnabled: false };
+
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('hidden');
+ });
+
  it('drives CONFIRM → deleting → resolve → deleted', async () => {
  const gate = deferred<void>();
  destroy.mockReturnValue(gate.promise);

packages/ui/src/mosaic/sections/__tests__/delete-organization-machine.test.ts → packages/ui/src/mosaic/sections/__tests__/delete-organization.machine.test.ts

@@ -1,7 +1,7 @@
 import { describe, expect, it, vi } from 'vitest';
 
 import { createActor } from '../../machine/createActor';
-import { deleteOrgMachine } from '../delete-organization-machine';
+import { deleteOrgMachine } from '../delete-organization.machine';
 
 const tick = () => new Promise<void>(resolve => setTimeout(resolve, 0));
 

packages/ui/src/mosaic/sections/__tests__/delete-organization-view.test.tsx → packages/ui/src/mosaic/sections/__tests__/delete-organization.view.test.tsx

@@ -1,10 +1,10 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 
-import { MosaicProvider } from '../../MosaicProvider';
 import type { Snapshot } from '../../machine/types';
-import type { DeleteOrgContext } from '../delete-organization-machine';
-import { DeleteOrganizationView } from '../delete-organization-view';
+import { MosaicProvider } from '../../MosaicProvider';
+import type { DeleteOrgContext } from '../delete-organization.machine';
+import { DeleteOrganizationView } from '../delete-organization.view';
 
 function renderView(snapshot: Snapshot<DeleteOrgContext>, send = vi.fn(), canSubmit = false) {
  render(

packages/ui/src/mosaic/sections/__tests__/leave-organization-controller.test.tsx → packages/ui/src/mosaic/sections/__tests__/leave-organization.controller.test.tsx

@@ -1,29 +1,30 @@
 import { act, fireEvent, render, screen } from '@testing-library/react';
-import React from 'react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { deferred } from '../../machines/__tests__/test-utils';
-import { useLeaveOrganizationController } from '../leave-organization-controller';
+import { useLeaveOrganizationController } from '../leave-organization.controller';
 
 const ORG_NAME = 'Acme Inc';
 
 let destroy: ReturnType<typeof vi.fn>;
 let revalidate: ReturnType<typeof vi.fn>;
+let isLoaded: boolean;
 let organization: { id: string; name: string } | null;
-let membership: { id: string; destroy: () => Promise<void> } | null;
+let membership: { id: string; destroy: () => Promise<void> } | null | undefined;
 
 vi.mock('@clerk/shared/react', async importOriginal => {
  const actual = await importOriginal<typeof import('@clerk/shared/react')>();
  return {
  ...actual,
- useOrganization: () => ({ isLoaded: true, organization, membership }),
+ useOrganization: () => ({ isLoaded, organization, membership }),
  useOrganizationList: () => ({ userMemberships: { revalidate } }),
  };
 });
 
 beforeEach(() => {
  destroy = vi.fn();
  revalidate = vi.fn().mockResolvedValue(undefined);
+ isLoaded = true;
  organization = { id: 'org_1', name: ORG_NAME };
  membership = { id: 'mem_1', destroy };
 });
@@ -35,7 +36,7 @@ afterEach(() => {
 function Harness() {
  const controller = useLeaveOrganizationController();
  if (controller.status !== 'ready') {
- return <output data-testid='state'>loading</output>;
+ return <output data-testid='state'>{controller.status}</output>;
  }
  return (
  <div>
@@ -55,6 +56,38 @@ function openAndConfirm() {
 }
 
 describe('useLeaveOrganizationController', () => {
+ it('is loading until useOrganization is loaded', () => {
+ isLoaded = false;
+
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('loading');
+ });
+
+ it('is loading while membership is still resolving', () => {
+ membership = undefined;
+
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('loading');
+ });
+
+ it('is hidden when there is no active organization', () => {
+ organization = null;
+
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('hidden');
+ });
+
+ it('is hidden when there is no membership', () => {
+ membership = null;
+
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('hidden');
+ });
+
  it('drives CONFIRM → leaving → resolve → left', async () => {
  const gate = deferred<void>();
  destroy.mockReturnValue(gate.promise);

packages/ui/src/mosaic/sections/__tests__/leave-organization-machine.test.ts → packages/ui/src/mosaic/sections/__tests__/leave-organization.machine.test.ts

@@ -1,7 +1,7 @@
 import { describe, expect, it, vi } from 'vitest';
 
 import { createActor } from '../../machine/createActor';
-import { leaveOrgMachine } from '../leave-organization-machine';
+import { leaveOrgMachine } from '../leave-organization.machine';
 
 const tick = () => new Promise<void>(resolve => setTimeout(resolve, 0));
 

packages/ui/src/mosaic/sections/__tests__/leave-organization-view.test.tsx → packages/ui/src/mosaic/sections/__tests__/leave-organization.view.test.tsx

@@ -1,10 +1,10 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 
-import { MosaicProvider } from '../../MosaicProvider';
 import type { Snapshot } from '../../machine/types';
-import type { LeaveOrgContext } from '../leave-organization-machine';
-import { LeaveOrganizationView } from '../leave-organization-view';
+import { MosaicProvider } from '../../MosaicProvider';
+import type { LeaveOrgContext } from '../leave-organization.machine';
+import { LeaveOrganizationView } from '../leave-organization.view';
 
 function renderView(snapshot: Snapshot<LeaveOrgContext>, send = vi.fn(), canSubmit = false) {
  render(

packages/ui/src/mosaic/sections/delete-organization.controller.tsx

@@ -0,0 +1,55 @@
+import { useOrganization, useOrganizationList, useSession } from '@clerk/shared/react';
+
+import type { Snapshot } from '../machine/types';
+import { useMachine } from '../machine/useMachine';
+import type { DeleteOrgContext, DeleteOrgEvent } from './delete-organization.machine';
+import { deleteOrgMachine } from './delete-organization.machine';
+
+type DeleteOrganizationController =
+ | { status: 'loading' }
+ | { status: 'hidden' }
+ | {
+ status: 'ready';
+ snapshot: Snapshot<DeleteOrgContext>;
+ send: (event: DeleteOrgEvent) => void;
+ canSubmit: boolean;
+ };
+
+export function useDeleteOrganizationController(): DeleteOrganizationController {
+ const { isLoaded: isOrganizationLoaded, organization } = useOrganization();
+ const { isLoaded: isSessionLoaded, session } = useSession();
+ const { userMemberships } = useOrganizationList({ userMemberships: true });
+
+ const [snapshot, send, actor] = useMachine(deleteOrgMachine, {
+ context: {
+ organizationName: organization?.name ?? '',
+ destroyOrganization: async () => {
+ await organization?.destroy();
+ // Refresh org lists elsewhere (e.g. the switcher). Not awaited: a stale
+ // list must not make a successful delete look like it failed.
+ void userMemberships.revalidate?.();
+ // TODO(mosaic): navigate away from the deleted org's profile once the flow
+ // has router context, mirroring legacy navigateAfterLeaveOrganization.
+ },
+ },
+ });
+
+ // The permission check needs both the organization and the session resolved.
+ // Treat either still loading as 'loading' so a not-yet-known session is never
+ // collapsed into a definitive 'hidden'.
+ if (!isOrganizationLoaded || !isSessionLoaded) {
+ return { status: 'loading' };
+ }
+
+ const canDelete = session?.checkAuthorization({ permission: 'org:sys_profile:delete' }) ?? false;
+ if (!organization || !canDelete || !organization.adminDeleteEnabled) {
+ return { status: 'hidden' };
+ }
+
+ return {
+ status: 'ready',
+ snapshot,
+ send,
+ canSubmit: actor.can({ type: 'CONFIRM' }),
+ };
+}

packages/ui/src/mosaic/sections/delete-organization.tsx

@@ -1,10 +1,11 @@
-import { SectionSkeleton } from '../components/section-skeleton';
-import { useDeleteOrganizationController } from './delete-organization-controller';
-import { DeleteOrganizationView } from './delete-organization-view';
+import { useDeleteOrganizationController } from './delete-organization.controller';
+import { DeleteOrganizationView } from './delete-organization.view';
 
 export function DeleteOrganization() {
  const controller = useDeleteOrganizationController();
- if (controller.status === 'loading') return <SectionSkeleton />;
+ if (controller.status !== 'ready') {
+ return null;
+ }
  return (
  <DeleteOrganizationView
  snapshot={controller.snapshot}

packages/ui/src/mosaic/sections/delete-organization-view.tsx → packages/ui/src/mosaic/sections/delete-organization.view.tsx

@@ -2,7 +2,7 @@ import { Destructive } from '../block/destructive';
 import { Box } from '../components/box';
 import { Button } from '../components/button';
 import type { Snapshot } from '../machine/types';
-import type { DeleteOrgContext, DeleteOrgEvent } from './delete-organization-machine';
+import type { DeleteOrgContext, DeleteOrgEvent } from './delete-organization.machine';
 
 interface DeleteOrganizationViewProps {
  snapshot: Snapshot<DeleteOrgContext>;

.changeset/mosaic-org-section-gating.md

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

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

@@ -1,7 +1,7 @@
 /** @jsxImportSource @emotion/react */
 import { useMachine } from '@clerk/ui/mosaic/machine/useMachine';
-import { deleteOrgMachine } from '@clerk/ui/mosaic/sections/delete-organization-machine';
-import { DeleteOrganizationView } from '@clerk/ui/mosaic/sections/delete-organization-view';
+import { deleteOrgMachine } from '@clerk/ui/mosaic/sections/delete-organization.machine';
+import { DeleteOrganizationView } from '@clerk/ui/mosaic/sections/delete-organization.view';
 
 import type { StoryMeta } from '@/lib/types';
 

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

@@ -1,7 +1,7 @@
 /** @jsxImportSource @emotion/react */
 import { useMachine } from '@clerk/ui/mosaic/machine/useMachine';
-import { leaveOrgMachine } from '@clerk/ui/mosaic/sections/leave-organization-machine';
-import { LeaveOrganizationView } from '@clerk/ui/mosaic/sections/leave-organization-view';
+import { leaveOrgMachine } from '@clerk/ui/mosaic/sections/leave-organization.machine';
+import { LeaveOrganizationView } from '@clerk/ui/mosaic/sections/leave-organization.view';
 
 import type { StoryMeta } from '@/lib/types';
 

packages/ui/src/mosaic/sections/__tests__/delete-organization-controller.test.tsx → packages/ui/src/mosaic/sections/__tests__/delete-organization.controller.test.tsx

@@ -1,29 +1,38 @@
 import { act, fireEvent, render, screen } from '@testing-library/react';
-import React from 'react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { deferred } from '../../machines/__tests__/test-utils';
-import { useDeleteOrganizationController } from '../delete-organization-controller';
+import { useDeleteOrganizationController } from '../delete-organization.controller';
 
 const ORG_NAME = 'Acme Inc';
 
 let destroy: ReturnType<typeof vi.fn>;
 let revalidate: ReturnType<typeof vi.fn>;
-let organization: { id: string; name: string; destroy: () => Promise<void> } | null;
+let checkAuthorization: ReturnType<typeof vi.fn>;
+let isLoaded: boolean;
+let isSessionLoaded: boolean;
+let organization: { id: string; name: string; destroy: () => Promise<void>; adminDeleteEnabled: boolean } | null;
 
 vi.mock('@clerk/shared/react', async importOriginal => {
  const actual = await importOriginal<typeof import('@clerk/shared/react')>();
  return {
  ...actual,
- useOrganization: () => ({ isLoaded: true, organization, membership: null }),
+ useOrganization: () => ({ isLoaded, organization, membership: null }),
  useOrganizationList: () => ({ userMemberships: { revalidate } }),
+ useSession: () => ({
+ isLoaded: isSessionLoaded,
+ session: isSessionLoaded ? { id: 'sess_1', checkAuthorization } : undefined,
+ }),
  };
 });
 
 beforeEach(() => {
  destroy = vi.fn();
  revalidate = vi.fn().mockResolvedValue(undefined);
- organization = { id: 'org_1', name: ORG_NAME, destroy };
+ checkAuthorization = vi.fn().mockReturnValue(true);
+ isLoaded = true;
+ isSessionLoaded = true;
+ organization = { id: 'org_1', name: ORG_NAME, destroy, adminDeleteEnabled: true };
 });
 
 afterEach(() => {
@@ -33,7 +42,7 @@ afterEach(() => {
 function Harness() {
  const controller = useDeleteOrganizationController();
  if (controller.status !== 'ready') {
- return <output data-testid='state'>loading</output>;
+ return <output data-testid='state'>{controller.status}</output>;
  }
  return (
  <div>
@@ -53,6 +62,46 @@ function openAndConfirm() {
 }
 
 describe('useDeleteOrganizationController', () => {
+ it('is loading until useOrganization is loaded', () => {
+ isLoaded = false;
+
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('loading');
+ });
+
+ it('is loading until the session is loaded', () => {
+ isSessionLoaded = false;
+
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('loading');
+ expect(checkAuthorization).not.toHaveBeenCalled();
+ });
+
+ it('is ready when the user can delete and admin delete is enabled', () => {
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('idle');
+ expect(checkAuthorization).toHaveBeenCalledWith({ permission: 'org:sys_profile:delete' });
+ });
+
+ it('is hidden when the user lacks the delete permission', () => {
+ checkAuthorization.mockReturnValue(false);
+
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('hidden');
+ });
+
+ it('is hidden when admin delete is disabled', () => {
+ organization = { id: 'org_1', name: ORG_NAME, destroy, adminDeleteEnabled: false };
+
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('hidden');
+ });
+
  it('drives CONFIRM → deleting → resolve → deleted', async () => {
  const gate = deferred<void>();
  destroy.mockReturnValue(gate.promise);

packages/ui/src/mosaic/sections/__tests__/delete-organization-machine.test.ts → packages/ui/src/mosaic/sections/__tests__/delete-organization.machine.test.ts

@@ -1,7 +1,7 @@
 import { describe, expect, it, vi } from 'vitest';
 
 import { createActor } from '../../machine/createActor';
-import { deleteOrgMachine } from '../delete-organization-machine';
+import { deleteOrgMachine } from '../delete-organization.machine';
 
 const tick = () => new Promise<void>(resolve => setTimeout(resolve, 0));
 

packages/ui/src/mosaic/sections/__tests__/delete-organization-view.test.tsx → packages/ui/src/mosaic/sections/__tests__/delete-organization.view.test.tsx

@@ -1,10 +1,10 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 
-import { MosaicProvider } from '../../MosaicProvider';
 import type { Snapshot } from '../../machine/types';
-import type { DeleteOrgContext } from '../delete-organization-machine';
-import { DeleteOrganizationView } from '../delete-organization-view';
+import { MosaicProvider } from '../../MosaicProvider';
+import type { DeleteOrgContext } from '../delete-organization.machine';
+import { DeleteOrganizationView } from '../delete-organization.view';
 
 function renderView(snapshot: Snapshot<DeleteOrgContext>, send = vi.fn(), canSubmit = false) {
  render(

packages/ui/src/mosaic/sections/__tests__/leave-organization-controller.test.tsx → packages/ui/src/mosaic/sections/__tests__/leave-organization.controller.test.tsx

@@ -1,29 +1,30 @@
 import { act, fireEvent, render, screen } from '@testing-library/react';
-import React from 'react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { deferred } from '../../machines/__tests__/test-utils';
-import { useLeaveOrganizationController } from '../leave-organization-controller';
+import { useLeaveOrganizationController } from '../leave-organization.controller';
 
 const ORG_NAME = 'Acme Inc';
 
 let destroy: ReturnType<typeof vi.fn>;
 let revalidate: ReturnType<typeof vi.fn>;
+let isLoaded: boolean;
 let organization: { id: string; name: string } | null;
-let membership: { id: string; destroy: () => Promise<void> } | null;
+let membership: { id: string; destroy: () => Promise<void> } | null | undefined;
 
 vi.mock('@clerk/shared/react', async importOriginal => {
  const actual = await importOriginal<typeof import('@clerk/shared/react')>();
  return {
  ...actual,
- useOrganization: () => ({ isLoaded: true, organization, membership }),
+ useOrganization: () => ({ isLoaded, organization, membership }),
  useOrganizationList: () => ({ userMemberships: { revalidate } }),
  };
 });
 
 beforeEach(() => {
  destroy = vi.fn();
  revalidate = vi.fn().mockResolvedValue(undefined);
+ isLoaded = true;
  organization = { id: 'org_1', name: ORG_NAME };
  membership = { id: 'mem_1', destroy };
 });
@@ -35,7 +36,7 @@ afterEach(() => {
 function Harness() {
  const controller = useLeaveOrganizationController();
  if (controller.status !== 'ready') {
- return <output data-testid='state'>loading</output>;
+ return <output data-testid='state'>{controller.status}</output>;
  }
  return (
  <div>
@@ -55,6 +56,38 @@ function openAndConfirm() {
 }
 
 describe('useLeaveOrganizationController', () => {
+ it('is loading until useOrganization is loaded', () => {
+ isLoaded = false;
+
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('loading');
+ });
+
+ it('is loading while membership is still resolving', () => {
+ membership = undefined;
+
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('loading');
+ });
+
+ it('is hidden when there is no active organization', () => {
+ organization = null;
+
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('hidden');
+ });
+
+ it('is hidden when there is no membership', () => {
+ membership = null;
+
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('hidden');
+ });
+
  it('drives CONFIRM → leaving → resolve → left', async () => {
  const gate = deferred<void>();
  destroy.mockReturnValue(gate.promise);

packages/ui/src/mosaic/sections/__tests__/leave-organization-machine.test.ts → packages/ui/src/mosaic/sections/__tests__/leave-organization.machine.test.ts

@@ -1,7 +1,7 @@
 import { describe, expect, it, vi } from 'vitest';
 
 import { createActor } from '../../machine/createActor';
-import { leaveOrgMachine } from '../leave-organization-machine';
+import { leaveOrgMachine } from '../leave-organization.machine';
 
 const tick = () => new Promise<void>(resolve => setTimeout(resolve, 0));
 

packages/ui/src/mosaic/sections/__tests__/leave-organization-view.test.tsx → packages/ui/src/mosaic/sections/__tests__/leave-organization.view.test.tsx

@@ -1,10 +1,10 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 
-import { MosaicProvider } from '../../MosaicProvider';
 import type { Snapshot } from '../../machine/types';
-import type { LeaveOrgContext } from '../leave-organization-machine';
-import { LeaveOrganizationView } from '../leave-organization-view';
+import { MosaicProvider } from '../../MosaicProvider';
+import type { LeaveOrgContext } from '../leave-organization.machine';
+import { LeaveOrganizationView } from '../leave-organization.view';
 
 function renderView(snapshot: Snapshot<LeaveOrgContext>, send = vi.fn(), canSubmit = false) {
  render(

packages/ui/src/mosaic/sections/delete-organization.controller.tsx

@@ -0,0 +1,55 @@
+import { useOrganization, useOrganizationList, useSession } from '@clerk/shared/react';
+
+import type { Snapshot } from '../machine/types';
+import { useMachine } from '../machine/useMachine';
+import type { DeleteOrgContext, DeleteOrgEvent } from './delete-organization.machine';
+import { deleteOrgMachine } from './delete-organization.machine';
+
+type DeleteOrganizationController =
+ | { status: 'loading' }
+ | { status: 'hidden' }
+ | {
+ status: 'ready';
+ snapshot: Snapshot<DeleteOrgContext>;
+ send: (event: DeleteOrgEvent) => void;
+ canSubmit: boolean;
+ };
+
+export function useDeleteOrganizationController(): DeleteOrganizationController {
+ const { isLoaded: isOrganizationLoaded, organization } = useOrganization();
+ const { isLoaded: isSessionLoaded, session } = useSession();
+ const { userMemberships } = useOrganizationList({ userMemberships: true });
+
+ const [snapshot, send, actor] = useMachine(deleteOrgMachine, {
+ context: {
+ organizationName: organization?.name ?? '',
+ destroyOrganization: async () => {
+ await organization?.destroy();
+ // Refresh org lists elsewhere (e.g. the switcher). Not awaited: a stale
+ // list must not make a successful delete look like it failed.
+ void userMemberships.revalidate?.();
+ // TODO(mosaic): navigate away from the deleted org's profile once the flow
+ // has router context, mirroring legacy navigateAfterLeaveOrganization.
+ },
+ },
+ });
+
+ // The permission check needs both the organization and the session resolved.
+ // Treat either still loading as 'loading' so a not-yet-known session is never
+ // collapsed into a definitive 'hidden'.
+ if (!isOrganizationLoaded || !isSessionLoaded) {
+ return { status: 'loading' };
+ }
+
+ const canDelete = session?.checkAuthorization({ permission: 'org:sys_profile:delete' }) ?? false;
+ if (!organization || !canDelete || !organization.adminDeleteEnabled) {
+ return { status: 'hidden' };
+ }
+
+ return {
+ status: 'ready',
+ snapshot,
+ send,
+ canSubmit: actor.can({ type: 'CONFIRM' }),
+ };
+}

packages/ui/src/mosaic/sections/delete-organization.tsx

@@ -1,10 +1,11 @@
-import { SectionSkeleton } from '../components/section-skeleton';
-import { useDeleteOrganizationController } from './delete-organization-controller';
-import { DeleteOrganizationView } from './delete-organization-view';
+import { useDeleteOrganizationController } from './delete-organization.controller';
+import { DeleteOrganizationView } from './delete-organization.view';
 
 export function DeleteOrganization() {
  const controller = useDeleteOrganizationController();
- if (controller.status === 'loading') return <SectionSkeleton />;
+ if (controller.status !== 'ready') {
+ return null;
+ }
  return (
  <DeleteOrganizationView
  snapshot={controller.snapshot}

packages/ui/src/mosaic/sections/delete-organization-view.tsx → packages/ui/src/mosaic/sections/delete-organization.view.tsx

@@ -2,7 +2,7 @@ import { Destructive } from '../block/destructive';
 import { Box } from '../components/box';
 import { Button } from '../components/button';
 import type { Snapshot } from '../machine/types';
-import type { DeleteOrgContext, DeleteOrgEvent } from './delete-organization-machine';
+import type { DeleteOrgContext, DeleteOrgEvent } from './delete-organization.machine';
 
 interface DeleteOrganizationViewProps {
  snapshot: Snapshot<DeleteOrgContext>;

.changeset/mosaic-org-section-gating.md

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

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

@@ -1,7 +1,7 @@
 /** @jsxImportSource @emotion/react */
 import { useMachine } from '@clerk/ui/mosaic/machine/useMachine';
-import { deleteOrgMachine } from '@clerk/ui/mosaic/sections/delete-organization-machine';
-import { DeleteOrganizationView } from '@clerk/ui/mosaic/sections/delete-organization-view';
+import { deleteOrgMachine } from '@clerk/ui/mosaic/sections/delete-organization.machine';
+import { DeleteOrganizationView } from '@clerk/ui/mosaic/sections/delete-organization.view';
 
 import type { StoryMeta } from '@/lib/types';
 

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

@@ -1,7 +1,7 @@
 /** @jsxImportSource @emotion/react */
 import { useMachine } from '@clerk/ui/mosaic/machine/useMachine';
-import { leaveOrgMachine } from '@clerk/ui/mosaic/sections/leave-organization-machine';
-import { LeaveOrganizationView } from '@clerk/ui/mosaic/sections/leave-organization-view';
+import { leaveOrgMachine } from '@clerk/ui/mosaic/sections/leave-organization.machine';
+import { LeaveOrganizationView } from '@clerk/ui/mosaic/sections/leave-organization.view';
 
 import type { StoryMeta } from '@/lib/types';
 

packages/ui/src/mosaic/sections/__tests__/delete-organization-controller.test.tsx → packages/ui/src/mosaic/sections/__tests__/delete-organization.controller.test.tsx

@@ -1,29 +1,38 @@
 import { act, fireEvent, render, screen } from '@testing-library/react';
-import React from 'react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { deferred } from '../../machines/__tests__/test-utils';
-import { useDeleteOrganizationController } from '../delete-organization-controller';
+import { useDeleteOrganizationController } from '../delete-organization.controller';
 
 const ORG_NAME = 'Acme Inc';
 
 let destroy: ReturnType<typeof vi.fn>;
 let revalidate: ReturnType<typeof vi.fn>;
-let organization: { id: string; name: string; destroy: () => Promise<void> } | null;
+let checkAuthorization: ReturnType<typeof vi.fn>;
+let isLoaded: boolean;
+let isSessionLoaded: boolean;
+let organization: { id: string; name: string; destroy: () => Promise<void>; adminDeleteEnabled: boolean } | null;
 
 vi.mock('@clerk/shared/react', async importOriginal => {
  const actual = await importOriginal<typeof import('@clerk/shared/react')>();
  return {
  ...actual,
- useOrganization: () => ({ isLoaded: true, organization, membership: null }),
+ useOrganization: () => ({ isLoaded, organization, membership: null }),
  useOrganizationList: () => ({ userMemberships: { revalidate } }),
+ useSession: () => ({
+ isLoaded: isSessionLoaded,
+ session: isSessionLoaded ? { id: 'sess_1', checkAuthorization } : undefined,
+ }),
  };
 });
 
 beforeEach(() => {
  destroy = vi.fn();
  revalidate = vi.fn().mockResolvedValue(undefined);
- organization = { id: 'org_1', name: ORG_NAME, destroy };
+ checkAuthorization = vi.fn().mockReturnValue(true);
+ isLoaded = true;
+ isSessionLoaded = true;
+ organization = { id: 'org_1', name: ORG_NAME, destroy, adminDeleteEnabled: true };
 });
 
 afterEach(() => {
@@ -33,7 +42,7 @@ afterEach(() => {
 function Harness() {
  const controller = useDeleteOrganizationController();
  if (controller.status !== 'ready') {
- return <output data-testid='state'>loading</output>;
+ return <output data-testid='state'>{controller.status}</output>;
  }
  return (
  <div>
@@ -53,6 +62,46 @@ function openAndConfirm() {
 }
 
 describe('useDeleteOrganizationController', () => {
+ it('is loading until useOrganization is loaded', () => {
+ isLoaded = false;
+
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('loading');
+ });
+
+ it('is loading until the session is loaded', () => {
+ isSessionLoaded = false;
+
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('loading');
+ expect(checkAuthorization).not.toHaveBeenCalled();
+ });
+
+ it('is ready when the user can delete and admin delete is enabled', () => {
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('idle');
+ expect(checkAuthorization).toHaveBeenCalledWith({ permission: 'org:sys_profile:delete' });
+ });
+
+ it('is hidden when the user lacks the delete permission', () => {
+ checkAuthorization.mockReturnValue(false);
+
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('hidden');
+ });
+
+ it('is hidden when admin delete is disabled', () => {
+ organization = { id: 'org_1', name: ORG_NAME, destroy, adminDeleteEnabled: false };
+
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('hidden');
+ });
+
  it('drives CONFIRM → deleting → resolve → deleted', async () => {
  const gate = deferred<void>();
  destroy.mockReturnValue(gate.promise);

packages/ui/src/mosaic/sections/__tests__/delete-organization-machine.test.ts → packages/ui/src/mosaic/sections/__tests__/delete-organization.machine.test.ts

@@ -1,7 +1,7 @@
 import { describe, expect, it, vi } from 'vitest';
 
 import { createActor } from '../../machine/createActor';
-import { deleteOrgMachine } from '../delete-organization-machine';
+import { deleteOrgMachine } from '../delete-organization.machine';
 
 const tick = () => new Promise<void>(resolve => setTimeout(resolve, 0));
 

packages/ui/src/mosaic/sections/__tests__/delete-organization-view.test.tsx → packages/ui/src/mosaic/sections/__tests__/delete-organization.view.test.tsx

@@ -1,10 +1,10 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 
-import { MosaicProvider } from '../../MosaicProvider';
 import type { Snapshot } from '../../machine/types';
-import type { DeleteOrgContext } from '../delete-organization-machine';
-import { DeleteOrganizationView } from '../delete-organization-view';
+import { MosaicProvider } from '../../MosaicProvider';
+import type { DeleteOrgContext } from '../delete-organization.machine';
+import { DeleteOrganizationView } from '../delete-organization.view';
 
 function renderView(snapshot: Snapshot<DeleteOrgContext>, send = vi.fn(), canSubmit = false) {
  render(

packages/ui/src/mosaic/sections/__tests__/leave-organization-controller.test.tsx → packages/ui/src/mosaic/sections/__tests__/leave-organization.controller.test.tsx

@@ -1,29 +1,30 @@
 import { act, fireEvent, render, screen } from '@testing-library/react';
-import React from 'react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { deferred } from '../../machines/__tests__/test-utils';
-import { useLeaveOrganizationController } from '../leave-organization-controller';
+import { useLeaveOrganizationController } from '../leave-organization.controller';
 
 const ORG_NAME = 'Acme Inc';
 
 let destroy: ReturnType<typeof vi.fn>;
 let revalidate: ReturnType<typeof vi.fn>;
+let isLoaded: boolean;
 let organization: { id: string; name: string } | null;
-let membership: { id: string; destroy: () => Promise<void> } | null;
+let membership: { id: string; destroy: () => Promise<void> } | null | undefined;
 
 vi.mock('@clerk/shared/react', async importOriginal => {
  const actual = await importOriginal<typeof import('@clerk/shared/react')>();
  return {
  ...actual,
- useOrganization: () => ({ isLoaded: true, organization, membership }),
+ useOrganization: () => ({ isLoaded, organization, membership }),
  useOrganizationList: () => ({ userMemberships: { revalidate } }),
  };
 });
 
 beforeEach(() => {
  destroy = vi.fn();
  revalidate = vi.fn().mockResolvedValue(undefined);
+ isLoaded = true;
  organization = { id: 'org_1', name: ORG_NAME };
  membership = { id: 'mem_1', destroy };
 });
@@ -35,7 +36,7 @@ afterEach(() => {
 function Harness() {
  const controller = useLeaveOrganizationController();
  if (controller.status !== 'ready') {
- return <output data-testid='state'>loading</output>;
+ return <output data-testid='state'>{controller.status}</output>;
  }
  return (
  <div>
@@ -55,6 +56,38 @@ function openAndConfirm() {
 }
 
 describe('useLeaveOrganizationController', () => {
+ it('is loading until useOrganization is loaded', () => {
+ isLoaded = false;
+
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('loading');
+ });
+
+ it('is loading while membership is still resolving', () => {
+ membership = undefined;
+
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('loading');
+ });
+
+ it('is hidden when there is no active organization', () => {
+ organization = null;
+
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('hidden');
+ });
+
+ it('is hidden when there is no membership', () => {
+ membership = null;
+
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('hidden');
+ });
+
  it('drives CONFIRM → leaving → resolve → left', async () => {
  const gate = deferred<void>();
  destroy.mockReturnValue(gate.promise);

packages/ui/src/mosaic/sections/__tests__/leave-organization-machine.test.ts → packages/ui/src/mosaic/sections/__tests__/leave-organization.machine.test.ts

@@ -1,7 +1,7 @@
 import { describe, expect, it, vi } from 'vitest';
 
 import { createActor } from '../../machine/createActor';
-import { leaveOrgMachine } from '../leave-organization-machine';
+import { leaveOrgMachine } from '../leave-organization.machine';
 
 const tick = () => new Promise<void>(resolve => setTimeout(resolve, 0));
 

packages/ui/src/mosaic/sections/__tests__/leave-organization-view.test.tsx → packages/ui/src/mosaic/sections/__tests__/leave-organization.view.test.tsx

@@ -1,10 +1,10 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 
-import { MosaicProvider } from '../../MosaicProvider';
 import type { Snapshot } from '../../machine/types';
-import type { LeaveOrgContext } from '../leave-organization-machine';
-import { LeaveOrganizationView } from '../leave-organization-view';
+import { MosaicProvider } from '../../MosaicProvider';
+import type { LeaveOrgContext } from '../leave-organization.machine';
+import { LeaveOrganizationView } from '../leave-organization.view';
 
 function renderView(snapshot: Snapshot<LeaveOrgContext>, send = vi.fn(), canSubmit = false) {
  render(

packages/ui/src/mosaic/sections/delete-organization.controller.tsx

@@ -0,0 +1,55 @@
+import { useOrganization, useOrganizationList, useSession } from '@clerk/shared/react';
+
+import type { Snapshot } from '../machine/types';
+import { useMachine } from '../machine/useMachine';
+import type { DeleteOrgContext, DeleteOrgEvent } from './delete-organization.machine';
+import { deleteOrgMachine } from './delete-organization.machine';
+
+type DeleteOrganizationController =
+ | { status: 'loading' }
+ | { status: 'hidden' }
+ | {
+ status: 'ready';
+ snapshot: Snapshot<DeleteOrgContext>;
+ send: (event: DeleteOrgEvent) => void;
+ canSubmit: boolean;
+ };
+
+export function useDeleteOrganizationController(): DeleteOrganizationController {
+ const { isLoaded: isOrganizationLoaded, organization } = useOrganization();
+ const { isLoaded: isSessionLoaded, session } = useSession();
+ const { userMemberships } = useOrganizationList({ userMemberships: true });
+
+ const [snapshot, send, actor] = useMachine(deleteOrgMachine, {
+ context: {
+ organizationName: organization?.name ?? '',
+ destroyOrganization: async () => {
+ await organization?.destroy();
+ // Refresh org lists elsewhere (e.g. the switcher). Not awaited: a stale
+ // list must not make a successful delete look like it failed.
+ void userMemberships.revalidate?.();
+ // TODO(mosaic): navigate away from the deleted org's profile once the flow
+ // has router context, mirroring legacy navigateAfterLeaveOrganization.
+ },
+ },
+ });
+
+ // The permission check needs both the organization and the session resolved.
+ // Treat either still loading as 'loading' so a not-yet-known session is never
+ // collapsed into a definitive 'hidden'.
+ if (!isOrganizationLoaded || !isSessionLoaded) {
+ return { status: 'loading' };
+ }
+
+ const canDelete = session?.checkAuthorization({ permission: 'org:sys_profile:delete' }) ?? false;
+ if (!organization || !canDelete || !organization.adminDeleteEnabled) {
+ return { status: 'hidden' };
+ }
+
+ return {
+ status: 'ready',
+ snapshot,
+ send,
+ canSubmit: actor.can({ type: 'CONFIRM' }),
+ };
+}

packages/ui/src/mosaic/sections/delete-organization.tsx

@@ -1,10 +1,11 @@
-import { SectionSkeleton } from '../components/section-skeleton';
-import { useDeleteOrganizationController } from './delete-organization-controller';
-import { DeleteOrganizationView } from './delete-organization-view';
+import { useDeleteOrganizationController } from './delete-organization.controller';
+import { DeleteOrganizationView } from './delete-organization.view';
 
 export function DeleteOrganization() {
  const controller = useDeleteOrganizationController();
- if (controller.status === 'loading') return <SectionSkeleton />;
+ if (controller.status !== 'ready') {
+ return null;
+ }
  return (
  <DeleteOrganizationView
  snapshot={controller.snapshot}

packages/ui/src/mosaic/sections/delete-organization-view.tsx → packages/ui/src/mosaic/sections/delete-organization.view.tsx

@@ -2,7 +2,7 @@ import { Destructive } from '../block/destructive';
 import { Box } from '../components/box';
 import { Button } from '../components/button';
 import type { Snapshot } from '../machine/types';
-import type { DeleteOrgContext, DeleteOrgEvent } from './delete-organization-machine';
+import type { DeleteOrgContext, DeleteOrgEvent } from './delete-organization.machine';
 
 interface DeleteOrganizationViewProps {
  snapshot: Snapshot<DeleteOrgContext>;

.changeset/mosaic-org-section-gating.md

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

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

@@ -1,7 +1,7 @@
 /** @jsxImportSource @emotion/react */
 import { useMachine } from '@clerk/ui/mosaic/machine/useMachine';
-import { deleteOrgMachine } from '@clerk/ui/mosaic/sections/delete-organization-machine';
-import { DeleteOrganizationView } from '@clerk/ui/mosaic/sections/delete-organization-view';
+import { deleteOrgMachine } from '@clerk/ui/mosaic/sections/delete-organization.machine';
+import { DeleteOrganizationView } from '@clerk/ui/mosaic/sections/delete-organization.view';
 
 import type { StoryMeta } from '@/lib/types';
 

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

@@ -1,7 +1,7 @@
 /** @jsxImportSource @emotion/react */
 import { useMachine } from '@clerk/ui/mosaic/machine/useMachine';
-import { leaveOrgMachine } from '@clerk/ui/mosaic/sections/leave-organization-machine';
-import { LeaveOrganizationView } from '@clerk/ui/mosaic/sections/leave-organization-view';
+import { leaveOrgMachine } from '@clerk/ui/mosaic/sections/leave-organization.machine';
+import { LeaveOrganizationView } from '@clerk/ui/mosaic/sections/leave-organization.view';
 
 import type { StoryMeta } from '@/lib/types';
 

packages/ui/src/mosaic/sections/__tests__/delete-organization-controller.test.tsx → packages/ui/src/mosaic/sections/__tests__/delete-organization.controller.test.tsx

@@ -1,29 +1,38 @@
 import { act, fireEvent, render, screen } from '@testing-library/react';
-import React from 'react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { deferred } from '../../machines/__tests__/test-utils';
-import { useDeleteOrganizationController } from '../delete-organization-controller';
+import { useDeleteOrganizationController } from '../delete-organization.controller';
 
 const ORG_NAME = 'Acme Inc';
 
 let destroy: ReturnType<typeof vi.fn>;
 let revalidate: ReturnType<typeof vi.fn>;
-let organization: { id: string; name: string; destroy: () => Promise<void> } | null;
+let checkAuthorization: ReturnType<typeof vi.fn>;
+let isLoaded: boolean;
+let isSessionLoaded: boolean;
+let organization: { id: string; name: string; destroy: () => Promise<void>; adminDeleteEnabled: boolean } | null;
 
 vi.mock('@clerk/shared/react', async importOriginal => {
  const actual = await importOriginal<typeof import('@clerk/shared/react')>();
  return {
  ...actual,
- useOrganization: () => ({ isLoaded: true, organization, membership: null }),
+ useOrganization: () => ({ isLoaded, organization, membership: null }),
  useOrganizationList: () => ({ userMemberships: { revalidate } }),
+ useSession: () => ({
+ isLoaded: isSessionLoaded,
+ session: isSessionLoaded ? { id: 'sess_1', checkAuthorization } : undefined,
+ }),
  };
 });
 
 beforeEach(() => {
  destroy = vi.fn();
  revalidate = vi.fn().mockResolvedValue(undefined);
- organization = { id: 'org_1', name: ORG_NAME, destroy };
+ checkAuthorization = vi.fn().mockReturnValue(true);
+ isLoaded = true;
+ isSessionLoaded = true;
+ organization = { id: 'org_1', name: ORG_NAME, destroy, adminDeleteEnabled: true };
 });
 
 afterEach(() => {
@@ -33,7 +42,7 @@ afterEach(() => {
 function Harness() {
  const controller = useDeleteOrganizationController();
  if (controller.status !== 'ready') {
- return <output data-testid='state'>loading</output>;
+ return <output data-testid='state'>{controller.status}</output>;
  }
  return (
  <div>
@@ -53,6 +62,46 @@ function openAndConfirm() {
 }
 
 describe('useDeleteOrganizationController', () => {
+ it('is loading until useOrganization is loaded', () => {
+ isLoaded = false;
+
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('loading');
+ });
+
+ it('is loading until the session is loaded', () => {
+ isSessionLoaded = false;
+
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('loading');
+ expect(checkAuthorization).not.toHaveBeenCalled();
+ });
+
+ it('is ready when the user can delete and admin delete is enabled', () => {
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('idle');
+ expect(checkAuthorization).toHaveBeenCalledWith({ permission: 'org:sys_profile:delete' });
+ });
+
+ it('is hidden when the user lacks the delete permission', () => {
+ checkAuthorization.mockReturnValue(false);
+
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('hidden');
+ });
+
+ it('is hidden when admin delete is disabled', () => {
+ organization = { id: 'org_1', name: ORG_NAME, destroy, adminDeleteEnabled: false };
+
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('hidden');
+ });
+
  it('drives CONFIRM → deleting → resolve → deleted', async () => {
  const gate = deferred<void>();
  destroy.mockReturnValue(gate.promise);

packages/ui/src/mosaic/sections/__tests__/delete-organization-machine.test.ts → packages/ui/src/mosaic/sections/__tests__/delete-organization.machine.test.ts

@@ -1,7 +1,7 @@
 import { describe, expect, it, vi } from 'vitest';
 
 import { createActor } from '../../machine/createActor';
-import { deleteOrgMachine } from '../delete-organization-machine';
+import { deleteOrgMachine } from '../delete-organization.machine';
 
 const tick = () => new Promise<void>(resolve => setTimeout(resolve, 0));
 

packages/ui/src/mosaic/sections/__tests__/delete-organization-view.test.tsx → packages/ui/src/mosaic/sections/__tests__/delete-organization.view.test.tsx

@@ -1,10 +1,10 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 
-import { MosaicProvider } from '../../MosaicProvider';
 import type { Snapshot } from '../../machine/types';
-import type { DeleteOrgContext } from '../delete-organization-machine';
-import { DeleteOrganizationView } from '../delete-organization-view';
+import { MosaicProvider } from '../../MosaicProvider';
+import type { DeleteOrgContext } from '../delete-organization.machine';
+import { DeleteOrganizationView } from '../delete-organization.view';
 
 function renderView(snapshot: Snapshot<DeleteOrgContext>, send = vi.fn(), canSubmit = false) {
  render(

packages/ui/src/mosaic/sections/__tests__/leave-organization-controller.test.tsx → packages/ui/src/mosaic/sections/__tests__/leave-organization.controller.test.tsx

@@ -1,29 +1,30 @@
 import { act, fireEvent, render, screen } from '@testing-library/react';
-import React from 'react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { deferred } from '../../machines/__tests__/test-utils';
-import { useLeaveOrganizationController } from '../leave-organization-controller';
+import { useLeaveOrganizationController } from '../leave-organization.controller';
 
 const ORG_NAME = 'Acme Inc';
 
 let destroy: ReturnType<typeof vi.fn>;
 let revalidate: ReturnType<typeof vi.fn>;
+let isLoaded: boolean;
 let organization: { id: string; name: string } | null;
-let membership: { id: string; destroy: () => Promise<void> } | null;
+let membership: { id: string; destroy: () => Promise<void> } | null | undefined;
 
 vi.mock('@clerk/shared/react', async importOriginal => {
  const actual = await importOriginal<typeof import('@clerk/shared/react')>();
  return {
  ...actual,
- useOrganization: () => ({ isLoaded: true, organization, membership }),
+ useOrganization: () => ({ isLoaded, organization, membership }),
  useOrganizationList: () => ({ userMemberships: { revalidate } }),
  };
 });
 
 beforeEach(() => {
  destroy = vi.fn();
  revalidate = vi.fn().mockResolvedValue(undefined);
+ isLoaded = true;
  organization = { id: 'org_1', name: ORG_NAME };
  membership = { id: 'mem_1', destroy };
 });
@@ -35,7 +36,7 @@ afterEach(() => {
 function Harness() {
  const controller = useLeaveOrganizationController();
  if (controller.status !== 'ready') {
- return <output data-testid='state'>loading</output>;
+ return <output data-testid='state'>{controller.status}</output>;
  }
  return (
  <div>
@@ -55,6 +56,38 @@ function openAndConfirm() {
 }
 
 describe('useLeaveOrganizationController', () => {
+ it('is loading until useOrganization is loaded', () => {
+ isLoaded = false;
+
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('loading');
+ });
+
+ it('is loading while membership is still resolving', () => {
+ membership = undefined;
+
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('loading');
+ });
+
+ it('is hidden when there is no active organization', () => {
+ organization = null;
+
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('hidden');
+ });
+
+ it('is hidden when there is no membership', () => {
+ membership = null;
+
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('hidden');
+ });
+
  it('drives CONFIRM → leaving → resolve → left', async () => {
  const gate = deferred<void>();
  destroy.mockReturnValue(gate.promise);

packages/ui/src/mosaic/sections/__tests__/leave-organization-machine.test.ts → packages/ui/src/mosaic/sections/__tests__/leave-organization.machine.test.ts

@@ -1,7 +1,7 @@
 import { describe, expect, it, vi } from 'vitest';
 
 import { createActor } from '../../machine/createActor';
-import { leaveOrgMachine } from '../leave-organization-machine';
+import { leaveOrgMachine } from '../leave-organization.machine';
 
 const tick = () => new Promise<void>(resolve => setTimeout(resolve, 0));
 

packages/ui/src/mosaic/sections/__tests__/leave-organization-view.test.tsx → packages/ui/src/mosaic/sections/__tests__/leave-organization.view.test.tsx

@@ -1,10 +1,10 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 
-import { MosaicProvider } from '../../MosaicProvider';
 import type { Snapshot } from '../../machine/types';
-import type { LeaveOrgContext } from '../leave-organization-machine';
-import { LeaveOrganizationView } from '../leave-organization-view';
+import { MosaicProvider } from '../../MosaicProvider';
+import type { LeaveOrgContext } from '../leave-organization.machine';
+import { LeaveOrganizationView } from '../leave-organization.view';
 
 function renderView(snapshot: Snapshot<LeaveOrgContext>, send = vi.fn(), canSubmit = false) {
  render(

packages/ui/src/mosaic/sections/delete-organization.controller.tsx

@@ -0,0 +1,55 @@
+import { useOrganization, useOrganizationList, useSession } from '@clerk/shared/react';
+
+import type { Snapshot } from '../machine/types';
+import { useMachine } from '../machine/useMachine';
+import type { DeleteOrgContext, DeleteOrgEvent } from './delete-organization.machine';
+import { deleteOrgMachine } from './delete-organization.machine';
+
+type DeleteOrganizationController =
+ | { status: 'loading' }
+ | { status: 'hidden' }
+ | {
+ status: 'ready';
+ snapshot: Snapshot<DeleteOrgContext>;
+ send: (event: DeleteOrgEvent) => void;
+ canSubmit: boolean;
+ };
+
+export function useDeleteOrganizationController(): DeleteOrganizationController {
+ const { isLoaded: isOrganizationLoaded, organization } = useOrganization();
+ const { isLoaded: isSessionLoaded, session } = useSession();
+ const { userMemberships } = useOrganizationList({ userMemberships: true });
+
+ const [snapshot, send, actor] = useMachine(deleteOrgMachine, {
+ context: {
+ organizationName: organization?.name ?? '',
+ destroyOrganization: async () => {
+ await organization?.destroy();
+ // Refresh org lists elsewhere (e.g. the switcher). Not awaited: a stale
+ // list must not make a successful delete look like it failed.
+ void userMemberships.revalidate?.();
+ // TODO(mosaic): navigate away from the deleted org's profile once the flow
+ // has router context, mirroring legacy navigateAfterLeaveOrganization.
+ },
+ },
+ });
+
+ // The permission check needs both the organization and the session resolved.
+ // Treat either still loading as 'loading' so a not-yet-known session is never
+ // collapsed into a definitive 'hidden'.
+ if (!isOrganizationLoaded || !isSessionLoaded) {
+ return { status: 'loading' };
+ }
+
+ const canDelete = session?.checkAuthorization({ permission: 'org:sys_profile:delete' }) ?? false;
+ if (!organization || !canDelete || !organization.adminDeleteEnabled) {
+ return { status: 'hidden' };
+ }
+
+ return {
+ status: 'ready',
+ snapshot,
+ send,
+ canSubmit: actor.can({ type: 'CONFIRM' }),
+ };
+}

packages/ui/src/mosaic/sections/delete-organization.tsx

@@ -1,10 +1,11 @@
-import { SectionSkeleton } from '../components/section-skeleton';
-import { useDeleteOrganizationController } from './delete-organization-controller';
-import { DeleteOrganizationView } from './delete-organization-view';
+import { useDeleteOrganizationController } from './delete-organization.controller';
+import { DeleteOrganizationView } from './delete-organization.view';
 
 export function DeleteOrganization() {
  const controller = useDeleteOrganizationController();
- if (controller.status === 'loading') return <SectionSkeleton />;
+ if (controller.status !== 'ready') {
+ return null;
+ }
  return (
  <DeleteOrganizationView
  snapshot={controller.snapshot}

packages/ui/src/mosaic/sections/delete-organization-view.tsx → packages/ui/src/mosaic/sections/delete-organization.view.tsx

@@ -2,7 +2,7 @@ import { Destructive } from '../block/destructive';
 import { Box } from '../components/box';
 import { Button } from '../components/button';
 import type { Snapshot } from '../machine/types';
-import type { DeleteOrgContext, DeleteOrgEvent } from './delete-organization-machine';
+import type { DeleteOrgContext, DeleteOrgEvent } from './delete-organization.machine';
 
 interface DeleteOrganizationViewProps {
  snapshot: Snapshot<DeleteOrgContext>;

.changeset/mosaic-org-section-gating.md

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

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

@@ -1,7 +1,7 @@
 /** @jsxImportSource @emotion/react */
 import { useMachine } from '@clerk/ui/mosaic/machine/useMachine';
-import { deleteOrgMachine } from '@clerk/ui/mosaic/sections/delete-organization-machine';
-import { DeleteOrganizationView } from '@clerk/ui/mosaic/sections/delete-organization-view';
+import { deleteOrgMachine } from '@clerk/ui/mosaic/sections/delete-organization.machine';
+import { DeleteOrganizationView } from '@clerk/ui/mosaic/sections/delete-organization.view';
 
 import type { StoryMeta } from '@/lib/types';
 

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

@@ -1,7 +1,7 @@
 /** @jsxImportSource @emotion/react */
 import { useMachine } from '@clerk/ui/mosaic/machine/useMachine';
-import { leaveOrgMachine } from '@clerk/ui/mosaic/sections/leave-organization-machine';
-import { LeaveOrganizationView } from '@clerk/ui/mosaic/sections/leave-organization-view';
+import { leaveOrgMachine } from '@clerk/ui/mosaic/sections/leave-organization.machine';
+import { LeaveOrganizationView } from '@clerk/ui/mosaic/sections/leave-organization.view';
 
 import type { StoryMeta } from '@/lib/types';
 

packages/ui/src/mosaic/sections/__tests__/delete-organization-controller.test.tsx → packages/ui/src/mosaic/sections/__tests__/delete-organization.controller.test.tsx

@@ -1,29 +1,38 @@
 import { act, fireEvent, render, screen } from '@testing-library/react';
-import React from 'react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { deferred } from '../../machines/__tests__/test-utils';
-import { useDeleteOrganizationController } from '../delete-organization-controller';
+import { useDeleteOrganizationController } from '../delete-organization.controller';
 
 const ORG_NAME = 'Acme Inc';
 
 let destroy: ReturnType<typeof vi.fn>;
 let revalidate: ReturnType<typeof vi.fn>;
-let organization: { id: string; name: string; destroy: () => Promise<void> } | null;
+let checkAuthorization: ReturnType<typeof vi.fn>;
+let isLoaded: boolean;
+let isSessionLoaded: boolean;
+let organization: { id: string; name: string; destroy: () => Promise<void>; adminDeleteEnabled: boolean } | null;
 
 vi.mock('@clerk/shared/react', async importOriginal => {
  const actual = await importOriginal<typeof import('@clerk/shared/react')>();
  return {
  ...actual,
- useOrganization: () => ({ isLoaded: true, organization, membership: null }),
+ useOrganization: () => ({ isLoaded, organization, membership: null }),
  useOrganizationList: () => ({ userMemberships: { revalidate } }),
+ useSession: () => ({
+ isLoaded: isSessionLoaded,
+ session: isSessionLoaded ? { id: 'sess_1', checkAuthorization } : undefined,
+ }),
  };
 });
 
 beforeEach(() => {
  destroy = vi.fn();
  revalidate = vi.fn().mockResolvedValue(undefined);
- organization = { id: 'org_1', name: ORG_NAME, destroy };
+ checkAuthorization = vi.fn().mockReturnValue(true);
+ isLoaded = true;
+ isSessionLoaded = true;
+ organization = { id: 'org_1', name: ORG_NAME, destroy, adminDeleteEnabled: true };
 });
 
 afterEach(() => {
@@ -33,7 +42,7 @@ afterEach(() => {
 function Harness() {
  const controller = useDeleteOrganizationController();
  if (controller.status !== 'ready') {
- return <output data-testid='state'>loading</output>;
+ return <output data-testid='state'>{controller.status}</output>;
  }
  return (
  <div>
@@ -53,6 +62,46 @@ function openAndConfirm() {
 }
 
 describe('useDeleteOrganizationController', () => {
+ it('is loading until useOrganization is loaded', () => {
+ isLoaded = false;
+
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('loading');
+ });
+
+ it('is loading until the session is loaded', () => {
+ isSessionLoaded = false;
+
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('loading');
+ expect(checkAuthorization).not.toHaveBeenCalled();
+ });
+
+ it('is ready when the user can delete and admin delete is enabled', () => {
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('idle');
+ expect(checkAuthorization).toHaveBeenCalledWith({ permission: 'org:sys_profile:delete' });
+ });
+
+ it('is hidden when the user lacks the delete permission', () => {
+ checkAuthorization.mockReturnValue(false);
+
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('hidden');
+ });
+
+ it('is hidden when admin delete is disabled', () => {
+ organization = { id: 'org_1', name: ORG_NAME, destroy, adminDeleteEnabled: false };
+
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('hidden');
+ });
+
  it('drives CONFIRM → deleting → resolve → deleted', async () => {
  const gate = deferred<void>();
  destroy.mockReturnValue(gate.promise);

packages/ui/src/mosaic/sections/__tests__/delete-organization-machine.test.ts → packages/ui/src/mosaic/sections/__tests__/delete-organization.machine.test.ts

@@ -1,7 +1,7 @@
 import { describe, expect, it, vi } from 'vitest';
 
 import { createActor } from '../../machine/createActor';
-import { deleteOrgMachine } from '../delete-organization-machine';
+import { deleteOrgMachine } from '../delete-organization.machine';
 
 const tick = () => new Promise<void>(resolve => setTimeout(resolve, 0));
 

packages/ui/src/mosaic/sections/__tests__/delete-organization-view.test.tsx → packages/ui/src/mosaic/sections/__tests__/delete-organization.view.test.tsx

@@ -1,10 +1,10 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 
-import { MosaicProvider } from '../../MosaicProvider';
 import type { Snapshot } from '../../machine/types';
-import type { DeleteOrgContext } from '../delete-organization-machine';
-import { DeleteOrganizationView } from '../delete-organization-view';
+import { MosaicProvider } from '../../MosaicProvider';
+import type { DeleteOrgContext } from '../delete-organization.machine';
+import { DeleteOrganizationView } from '../delete-organization.view';
 
 function renderView(snapshot: Snapshot<DeleteOrgContext>, send = vi.fn(), canSubmit = false) {
  render(

packages/ui/src/mosaic/sections/__tests__/leave-organization-controller.test.tsx → packages/ui/src/mosaic/sections/__tests__/leave-organization.controller.test.tsx

@@ -1,29 +1,30 @@
 import { act, fireEvent, render, screen } from '@testing-library/react';
-import React from 'react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { deferred } from '../../machines/__tests__/test-utils';
-import { useLeaveOrganizationController } from '../leave-organization-controller';
+import { useLeaveOrganizationController } from '../leave-organization.controller';
 
 const ORG_NAME = 'Acme Inc';
 
 let destroy: ReturnType<typeof vi.fn>;
 let revalidate: ReturnType<typeof vi.fn>;
+let isLoaded: boolean;
 let organization: { id: string; name: string } | null;
-let membership: { id: string; destroy: () => Promise<void> } | null;
+let membership: { id: string; destroy: () => Promise<void> } | null | undefined;
 
 vi.mock('@clerk/shared/react', async importOriginal => {
  const actual = await importOriginal<typeof import('@clerk/shared/react')>();
  return {
  ...actual,
- useOrganization: () => ({ isLoaded: true, organization, membership }),
+ useOrganization: () => ({ isLoaded, organization, membership }),
  useOrganizationList: () => ({ userMemberships: { revalidate } }),
  };
 });
 
 beforeEach(() => {
  destroy = vi.fn();
  revalidate = vi.fn().mockResolvedValue(undefined);
+ isLoaded = true;
  organization = { id: 'org_1', name: ORG_NAME };
  membership = { id: 'mem_1', destroy };
 });
@@ -35,7 +36,7 @@ afterEach(() => {
 function Harness() {
  const controller = useLeaveOrganizationController();
  if (controller.status !== 'ready') {
- return <output data-testid='state'>loading</output>;
+ return <output data-testid='state'>{controller.status}</output>;
  }
  return (
  <div>
@@ -55,6 +56,38 @@ function openAndConfirm() {
 }
 
 describe('useLeaveOrganizationController', () => {
+ it('is loading until useOrganization is loaded', () => {
+ isLoaded = false;
+
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('loading');
+ });
+
+ it('is loading while membership is still resolving', () => {
+ membership = undefined;
+
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('loading');
+ });
+
+ it('is hidden when there is no active organization', () => {
+ organization = null;
+
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('hidden');
+ });
+
+ it('is hidden when there is no membership', () => {
+ membership = null;
+
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('hidden');
+ });
+
  it('drives CONFIRM → leaving → resolve → left', async () => {
  const gate = deferred<void>();
  destroy.mockReturnValue(gate.promise);

packages/ui/src/mosaic/sections/__tests__/leave-organization-machine.test.ts → packages/ui/src/mosaic/sections/__tests__/leave-organization.machine.test.ts

@@ -1,7 +1,7 @@
 import { describe, expect, it, vi } from 'vitest';
 
 import { createActor } from '../../machine/createActor';
-import { leaveOrgMachine } from '../leave-organization-machine';
+import { leaveOrgMachine } from '../leave-organization.machine';
 
 const tick = () => new Promise<void>(resolve => setTimeout(resolve, 0));
 

packages/ui/src/mosaic/sections/__tests__/leave-organization-view.test.tsx → packages/ui/src/mosaic/sections/__tests__/leave-organization.view.test.tsx

@@ -1,10 +1,10 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 
-import { MosaicProvider } from '../../MosaicProvider';
 import type { Snapshot } from '../../machine/types';
-import type { LeaveOrgContext } from '../leave-organization-machine';
-import { LeaveOrganizationView } from '../leave-organization-view';
+import { MosaicProvider } from '../../MosaicProvider';
+import type { LeaveOrgContext } from '../leave-organization.machine';
+import { LeaveOrganizationView } from '../leave-organization.view';
 
 function renderView(snapshot: Snapshot<LeaveOrgContext>, send = vi.fn(), canSubmit = false) {
  render(

packages/ui/src/mosaic/sections/delete-organization.controller.tsx

@@ -0,0 +1,55 @@
+import { useOrganization, useOrganizationList, useSession } from '@clerk/shared/react';
+
+import type { Snapshot } from '../machine/types';
+import { useMachine } from '../machine/useMachine';
+import type { DeleteOrgContext, DeleteOrgEvent } from './delete-organization.machine';
+import { deleteOrgMachine } from './delete-organization.machine';
+
+type DeleteOrganizationController =
+ | { status: 'loading' }
+ | { status: 'hidden' }
+ | {
+ status: 'ready';
+ snapshot: Snapshot<DeleteOrgContext>;
+ send: (event: DeleteOrgEvent) => void;
+ canSubmit: boolean;
+ };
+
+export function useDeleteOrganizationController(): DeleteOrganizationController {
+ const { isLoaded: isOrganizationLoaded, organization } = useOrganization();
+ const { isLoaded: isSessionLoaded, session } = useSession();
+ const { userMemberships } = useOrganizationList({ userMemberships: true });
+
+ const [snapshot, send, actor] = useMachine(deleteOrgMachine, {
+ context: {
+ organizationName: organization?.name ?? '',
+ destroyOrganization: async () => {
+ await organization?.destroy();
+ // Refresh org lists elsewhere (e.g. the switcher). Not awaited: a stale
+ // list must not make a successful delete look like it failed.
+ void userMemberships.revalidate?.();
+ // TODO(mosaic): navigate away from the deleted org's profile once the flow
+ // has router context, mirroring legacy navigateAfterLeaveOrganization.
+ },
+ },
+ });
+
+ // The permission check needs both the organization and the session resolved.
+ // Treat either still loading as 'loading' so a not-yet-known session is never
+ // collapsed into a definitive 'hidden'.
+ if (!isOrganizationLoaded || !isSessionLoaded) {
+ return { status: 'loading' };
+ }
+
+ const canDelete = session?.checkAuthorization({ permission: 'org:sys_profile:delete' }) ?? false;
+ if (!organization || !canDelete || !organization.adminDeleteEnabled) {
+ return { status: 'hidden' };
+ }
+
+ return {
+ status: 'ready',
+ snapshot,
+ send,
+ canSubmit: actor.can({ type: 'CONFIRM' }),
+ };
+}

packages/ui/src/mosaic/sections/delete-organization.tsx

@@ -1,10 +1,11 @@
-import { SectionSkeleton } from '../components/section-skeleton';
-import { useDeleteOrganizationController } from './delete-organization-controller';
-import { DeleteOrganizationView } from './delete-organization-view';
+import { useDeleteOrganizationController } from './delete-organization.controller';
+import { DeleteOrganizationView } from './delete-organization.view';
 
 export function DeleteOrganization() {
  const controller = useDeleteOrganizationController();
- if (controller.status === 'loading') return <SectionSkeleton />;
+ if (controller.status !== 'ready') {
+ return null;
+ }
  return (
  <DeleteOrganizationView
  snapshot={controller.snapshot}

packages/ui/src/mosaic/sections/delete-organization-view.tsx → packages/ui/src/mosaic/sections/delete-organization.view.tsx

@@ -2,7 +2,7 @@ import { Destructive } from '../block/destructive';
 import { Box } from '../components/box';
 import { Button } from '../components/button';
 import type { Snapshot } from '../machine/types';
-import type { DeleteOrgContext, DeleteOrgEvent } from './delete-organization-machine';
+import type { DeleteOrgContext, DeleteOrgEvent } from './delete-organization.machine';
 
 interface DeleteOrganizationViewProps {
  snapshot: Snapshot<DeleteOrgContext>;

.changeset/mosaic-org-section-gating.md

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

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

@@ -1,7 +1,7 @@
 /** @jsxImportSource @emotion/react */
 import { useMachine } from '@clerk/ui/mosaic/machine/useMachine';
-import { deleteOrgMachine } from '@clerk/ui/mosaic/sections/delete-organization-machine';
-import { DeleteOrganizationView } from '@clerk/ui/mosaic/sections/delete-organization-view';
+import { deleteOrgMachine } from '@clerk/ui/mosaic/sections/delete-organization.machine';
+import { DeleteOrganizationView } from '@clerk/ui/mosaic/sections/delete-organization.view';
 
 import type { StoryMeta } from '@/lib/types';
 

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

@@ -1,7 +1,7 @@
 /** @jsxImportSource @emotion/react */
 import { useMachine } from '@clerk/ui/mosaic/machine/useMachine';
-import { leaveOrgMachine } from '@clerk/ui/mosaic/sections/leave-organization-machine';
-import { LeaveOrganizationView } from '@clerk/ui/mosaic/sections/leave-organization-view';
+import { leaveOrgMachine } from '@clerk/ui/mosaic/sections/leave-organization.machine';
+import { LeaveOrganizationView } from '@clerk/ui/mosaic/sections/leave-organization.view';
 
 import type { StoryMeta } from '@/lib/types';
 

packages/ui/src/mosaic/sections/__tests__/delete-organization-controller.test.tsx → packages/ui/src/mosaic/sections/__tests__/delete-organization.controller.test.tsx

@@ -1,29 +1,38 @@
 import { act, fireEvent, render, screen } from '@testing-library/react';
-import React from 'react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { deferred } from '../../machines/__tests__/test-utils';
-import { useDeleteOrganizationController } from '../delete-organization-controller';
+import { useDeleteOrganizationController } from '../delete-organization.controller';
 
 const ORG_NAME = 'Acme Inc';
 
 let destroy: ReturnType<typeof vi.fn>;
 let revalidate: ReturnType<typeof vi.fn>;
-let organization: { id: string; name: string; destroy: () => Promise<void> } | null;
+let checkAuthorization: ReturnType<typeof vi.fn>;
+let isLoaded: boolean;
+let isSessionLoaded: boolean;
+let organization: { id: string; name: string; destroy: () => Promise<void>; adminDeleteEnabled: boolean } | null;
 
 vi.mock('@clerk/shared/react', async importOriginal => {
  const actual = await importOriginal<typeof import('@clerk/shared/react')>();
  return {
  ...actual,
- useOrganization: () => ({ isLoaded: true, organization, membership: null }),
+ useOrganization: () => ({ isLoaded, organization, membership: null }),
  useOrganizationList: () => ({ userMemberships: { revalidate } }),
+ useSession: () => ({
+ isLoaded: isSessionLoaded,
+ session: isSessionLoaded ? { id: 'sess_1', checkAuthorization } : undefined,
+ }),
  };
 });
 
 beforeEach(() => {
  destroy = vi.fn();
  revalidate = vi.fn().mockResolvedValue(undefined);
- organization = { id: 'org_1', name: ORG_NAME, destroy };
+ checkAuthorization = vi.fn().mockReturnValue(true);
+ isLoaded = true;
+ isSessionLoaded = true;
+ organization = { id: 'org_1', name: ORG_NAME, destroy, adminDeleteEnabled: true };
 });
 
 afterEach(() => {
@@ -33,7 +42,7 @@ afterEach(() => {
 function Harness() {
  const controller = useDeleteOrganizationController();
  if (controller.status !== 'ready') {
- return <output data-testid='state'>loading</output>;
+ return <output data-testid='state'>{controller.status}</output>;
  }
  return (
  <div>
@@ -53,6 +62,46 @@ function openAndConfirm() {
 }
 
 describe('useDeleteOrganizationController', () => {
+ it('is loading until useOrganization is loaded', () => {
+ isLoaded = false;
+
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('loading');
+ });
+
+ it('is loading until the session is loaded', () => {
+ isSessionLoaded = false;
+
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('loading');
+ expect(checkAuthorization).not.toHaveBeenCalled();
+ });
+
+ it('is ready when the user can delete and admin delete is enabled', () => {
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('idle');
+ expect(checkAuthorization).toHaveBeenCalledWith({ permission: 'org:sys_profile:delete' });
+ });
+
+ it('is hidden when the user lacks the delete permission', () => {
+ checkAuthorization.mockReturnValue(false);
+
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('hidden');
+ });
+
+ it('is hidden when admin delete is disabled', () => {
+ organization = { id: 'org_1', name: ORG_NAME, destroy, adminDeleteEnabled: false };
+
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('hidden');
+ });
+
  it('drives CONFIRM → deleting → resolve → deleted', async () => {
  const gate = deferred<void>();
  destroy.mockReturnValue(gate.promise);

packages/ui/src/mosaic/sections/__tests__/delete-organization-machine.test.ts → packages/ui/src/mosaic/sections/__tests__/delete-organization.machine.test.ts

@@ -1,7 +1,7 @@
 import { describe, expect, it, vi } from 'vitest';
 
 import { createActor } from '../../machine/createActor';
-import { deleteOrgMachine } from '../delete-organization-machine';
+import { deleteOrgMachine } from '../delete-organization.machine';
 
 const tick = () => new Promise<void>(resolve => setTimeout(resolve, 0));
 

packages/ui/src/mosaic/sections/__tests__/delete-organization-view.test.tsx → packages/ui/src/mosaic/sections/__tests__/delete-organization.view.test.tsx

@@ -1,10 +1,10 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 
-import { MosaicProvider } from '../../MosaicProvider';
 import type { Snapshot } from '../../machine/types';
-import type { DeleteOrgContext } from '../delete-organization-machine';
-import { DeleteOrganizationView } from '../delete-organization-view';
+import { MosaicProvider } from '../../MosaicProvider';
+import type { DeleteOrgContext } from '../delete-organization.machine';
+import { DeleteOrganizationView } from '../delete-organization.view';
 
 function renderView(snapshot: Snapshot<DeleteOrgContext>, send = vi.fn(), canSubmit = false) {
  render(

packages/ui/src/mosaic/sections/__tests__/leave-organization-controller.test.tsx → packages/ui/src/mosaic/sections/__tests__/leave-organization.controller.test.tsx

@@ -1,29 +1,30 @@
 import { act, fireEvent, render, screen } from '@testing-library/react';
-import React from 'react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { deferred } from '../../machines/__tests__/test-utils';
-import { useLeaveOrganizationController } from '../leave-organization-controller';
+import { useLeaveOrganizationController } from '../leave-organization.controller';
 
 const ORG_NAME = 'Acme Inc';
 
 let destroy: ReturnType<typeof vi.fn>;
 let revalidate: ReturnType<typeof vi.fn>;
+let isLoaded: boolean;
 let organization: { id: string; name: string } | null;
-let membership: { id: string; destroy: () => Promise<void> } | null;
+let membership: { id: string; destroy: () => Promise<void> } | null | undefined;
 
 vi.mock('@clerk/shared/react', async importOriginal => {
  const actual = await importOriginal<typeof import('@clerk/shared/react')>();
  return {
  ...actual,
- useOrganization: () => ({ isLoaded: true, organization, membership }),
+ useOrganization: () => ({ isLoaded, organization, membership }),
  useOrganizationList: () => ({ userMemberships: { revalidate } }),
  };
 });
 
 beforeEach(() => {
  destroy = vi.fn();
  revalidate = vi.fn().mockResolvedValue(undefined);
+ isLoaded = true;
  organization = { id: 'org_1', name: ORG_NAME };
  membership = { id: 'mem_1', destroy };
 });
@@ -35,7 +36,7 @@ afterEach(() => {
 function Harness() {
  const controller = useLeaveOrganizationController();
  if (controller.status !== 'ready') {
- return <output data-testid='state'>loading</output>;
+ return <output data-testid='state'>{controller.status}</output>;
  }
  return (
  <div>
@@ -55,6 +56,38 @@ function openAndConfirm() {
 }
 
 describe('useLeaveOrganizationController', () => {
+ it('is loading until useOrganization is loaded', () => {
+ isLoaded = false;
+
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('loading');
+ });
+
+ it('is loading while membership is still resolving', () => {
+ membership = undefined;
+
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('loading');
+ });
+
+ it('is hidden when there is no active organization', () => {
+ organization = null;
+
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('hidden');
+ });
+
+ it('is hidden when there is no membership', () => {
+ membership = null;
+
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('hidden');
+ });
+
  it('drives CONFIRM → leaving → resolve → left', async () => {
  const gate = deferred<void>();
  destroy.mockReturnValue(gate.promise);

packages/ui/src/mosaic/sections/__tests__/leave-organization-machine.test.ts → packages/ui/src/mosaic/sections/__tests__/leave-organization.machine.test.ts

@@ -1,7 +1,7 @@
 import { describe, expect, it, vi } from 'vitest';
 
 import { createActor } from '../../machine/createActor';
-import { leaveOrgMachine } from '../leave-organization-machine';
+import { leaveOrgMachine } from '../leave-organization.machine';
 
 const tick = () => new Promise<void>(resolve => setTimeout(resolve, 0));
 

packages/ui/src/mosaic/sections/__tests__/leave-organization-view.test.tsx → packages/ui/src/mosaic/sections/__tests__/leave-organization.view.test.tsx

@@ -1,10 +1,10 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 
-import { MosaicProvider } from '../../MosaicProvider';
 import type { Snapshot } from '../../machine/types';
-import type { LeaveOrgContext } from '../leave-organization-machine';
-import { LeaveOrganizationView } from '../leave-organization-view';
+import { MosaicProvider } from '../../MosaicProvider';
+import type { LeaveOrgContext } from '../leave-organization.machine';
+import { LeaveOrganizationView } from '../leave-organization.view';
 
 function renderView(snapshot: Snapshot<LeaveOrgContext>, send = vi.fn(), canSubmit = false) {
  render(

packages/ui/src/mosaic/sections/delete-organization.controller.tsx

@@ -0,0 +1,55 @@
+import { useOrganization, useOrganizationList, useSession } from '@clerk/shared/react';
+
+import type { Snapshot } from '../machine/types';
+import { useMachine } from '../machine/useMachine';
+import type { DeleteOrgContext, DeleteOrgEvent } from './delete-organization.machine';
+import { deleteOrgMachine } from './delete-organization.machine';
+
+type DeleteOrganizationController =
+ | { status: 'loading' }
+ | { status: 'hidden' }
+ | {
+ status: 'ready';
+ snapshot: Snapshot<DeleteOrgContext>;
+ send: (event: DeleteOrgEvent) => void;
+ canSubmit: boolean;
+ };
+
+export function useDeleteOrganizationController(): DeleteOrganizationController {
+ const { isLoaded: isOrganizationLoaded, organization } = useOrganization();
+ const { isLoaded: isSessionLoaded, session } = useSession();
+ const { userMemberships } = useOrganizationList({ userMemberships: true });
+
+ const [snapshot, send, actor] = useMachine(deleteOrgMachine, {
+ context: {
+ organizationName: organization?.name ?? '',
+ destroyOrganization: async () => {
+ await organization?.destroy();
+ // Refresh org lists elsewhere (e.g. the switcher). Not awaited: a stale
+ // list must not make a successful delete look like it failed.
+ void userMemberships.revalidate?.();
+ // TODO(mosaic): navigate away from the deleted org's profile once the flow
+ // has router context, mirroring legacy navigateAfterLeaveOrganization.
+ },
+ },
+ });
+
+ // The permission check needs both the organization and the session resolved.
+ // Treat either still loading as 'loading' so a not-yet-known session is never
+ // collapsed into a definitive 'hidden'.
+ if (!isOrganizationLoaded || !isSessionLoaded) {
+ return { status: 'loading' };
+ }
+
+ const canDelete = session?.checkAuthorization({ permission: 'org:sys_profile:delete' }) ?? false;
+ if (!organization || !canDelete || !organization.adminDeleteEnabled) {
+ return { status: 'hidden' };
+ }
+
+ return {
+ status: 'ready',
+ snapshot,
+ send,
+ canSubmit: actor.can({ type: 'CONFIRM' }),
+ };
+}

packages/ui/src/mosaic/sections/delete-organization.tsx

@@ -1,10 +1,11 @@
-import { SectionSkeleton } from '../components/section-skeleton';
-import { useDeleteOrganizationController } from './delete-organization-controller';
-import { DeleteOrganizationView } from './delete-organization-view';
+import { useDeleteOrganizationController } from './delete-organization.controller';
+import { DeleteOrganizationView } from './delete-organization.view';
 
 export function DeleteOrganization() {
  const controller = useDeleteOrganizationController();
- if (controller.status === 'loading') return <SectionSkeleton />;
+ if (controller.status !== 'ready') {
+ return null;
+ }
  return (
  <DeleteOrganizationView
  snapshot={controller.snapshot}

packages/ui/src/mosaic/sections/delete-organization-view.tsx → packages/ui/src/mosaic/sections/delete-organization.view.tsx

@@ -2,7 +2,7 @@ import { Destructive } from '../block/destructive';
 import { Box } from '../components/box';
 import { Button } from '../components/button';
 import type { Snapshot } from '../machine/types';
-import type { DeleteOrgContext, DeleteOrgEvent } from './delete-organization-machine';
+import type { DeleteOrgContext, DeleteOrgEvent } from './delete-organization.machine';
 
 interface DeleteOrganizationViewProps {
  snapshot: Snapshot<DeleteOrgContext>;

.changeset/mosaic-org-section-gating.md

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

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

@@ -1,7 +1,7 @@
 /** @jsxImportSource @emotion/react */
 import { useMachine } from '@clerk/ui/mosaic/machine/useMachine';
-import { deleteOrgMachine } from '@clerk/ui/mosaic/sections/delete-organization-machine';
-import { DeleteOrganizationView } from '@clerk/ui/mosaic/sections/delete-organization-view';
+import { deleteOrgMachine } from '@clerk/ui/mosaic/sections/delete-organization.machine';
+import { DeleteOrganizationView } from '@clerk/ui/mosaic/sections/delete-organization.view';
 
 import type { StoryMeta } from '@/lib/types';
 

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

@@ -1,7 +1,7 @@
 /** @jsxImportSource @emotion/react */
 import { useMachine } from '@clerk/ui/mosaic/machine/useMachine';
-import { leaveOrgMachine } from '@clerk/ui/mosaic/sections/leave-organization-machine';
-import { LeaveOrganizationView } from '@clerk/ui/mosaic/sections/leave-organization-view';
+import { leaveOrgMachine } from '@clerk/ui/mosaic/sections/leave-organization.machine';
+import { LeaveOrganizationView } from '@clerk/ui/mosaic/sections/leave-organization.view';
 
 import type { StoryMeta } from '@/lib/types';
 

packages/ui/src/mosaic/sections/__tests__/delete-organization-controller.test.tsx → packages/ui/src/mosaic/sections/__tests__/delete-organization.controller.test.tsx

@@ -1,29 +1,38 @@
 import { act, fireEvent, render, screen } from '@testing-library/react';
-import React from 'react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { deferred } from '../../machines/__tests__/test-utils';
-import { useDeleteOrganizationController } from '../delete-organization-controller';
+import { useDeleteOrganizationController } from '../delete-organization.controller';
 
 const ORG_NAME = 'Acme Inc';
 
 let destroy: ReturnType<typeof vi.fn>;
 let revalidate: ReturnType<typeof vi.fn>;
-let organization: { id: string; name: string; destroy: () => Promise<void> } | null;
+let checkAuthorization: ReturnType<typeof vi.fn>;
+let isLoaded: boolean;
+let isSessionLoaded: boolean;
+let organization: { id: string; name: string; destroy: () => Promise<void>; adminDeleteEnabled: boolean } | null;
 
 vi.mock('@clerk/shared/react', async importOriginal => {
  const actual = await importOriginal<typeof import('@clerk/shared/react')>();
  return {
  ...actual,
- useOrganization: () => ({ isLoaded: true, organization, membership: null }),
+ useOrganization: () => ({ isLoaded, organization, membership: null }),
  useOrganizationList: () => ({ userMemberships: { revalidate } }),
+ useSession: () => ({
+ isLoaded: isSessionLoaded,
+ session: isSessionLoaded ? { id: 'sess_1', checkAuthorization } : undefined,
+ }),
  };
 });
 
 beforeEach(() => {
  destroy = vi.fn();
  revalidate = vi.fn().mockResolvedValue(undefined);
- organization = { id: 'org_1', name: ORG_NAME, destroy };
+ checkAuthorization = vi.fn().mockReturnValue(true);
+ isLoaded = true;
+ isSessionLoaded = true;
+ organization = { id: 'org_1', name: ORG_NAME, destroy, adminDeleteEnabled: true };
 });
 
 afterEach(() => {
@@ -33,7 +42,7 @@ afterEach(() => {
 function Harness() {
  const controller = useDeleteOrganizationController();
  if (controller.status !== 'ready') {
- return <output data-testid='state'>loading</output>;
+ return <output data-testid='state'>{controller.status}</output>;
  }
  return (
  <div>
@@ -53,6 +62,46 @@ function openAndConfirm() {
 }
 
 describe('useDeleteOrganizationController', () => {
+ it('is loading until useOrganization is loaded', () => {
+ isLoaded = false;
+
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('loading');
+ });
+
+ it('is loading until the session is loaded', () => {
+ isSessionLoaded = false;
+
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('loading');
+ expect(checkAuthorization).not.toHaveBeenCalled();
+ });
+
+ it('is ready when the user can delete and admin delete is enabled', () => {
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('idle');
+ expect(checkAuthorization).toHaveBeenCalledWith({ permission: 'org:sys_profile:delete' });
+ });
+
+ it('is hidden when the user lacks the delete permission', () => {
+ checkAuthorization.mockReturnValue(false);
+
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('hidden');
+ });
+
+ it('is hidden when admin delete is disabled', () => {
+ organization = { id: 'org_1', name: ORG_NAME, destroy, adminDeleteEnabled: false };
+
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('hidden');
+ });
+
  it('drives CONFIRM → deleting → resolve → deleted', async () => {
  const gate = deferred<void>();
  destroy.mockReturnValue(gate.promise);

packages/ui/src/mosaic/sections/__tests__/delete-organization-machine.test.ts → packages/ui/src/mosaic/sections/__tests__/delete-organization.machine.test.ts

@@ -1,7 +1,7 @@
 import { describe, expect, it, vi } from 'vitest';
 
 import { createActor } from '../../machine/createActor';
-import { deleteOrgMachine } from '../delete-organization-machine';
+import { deleteOrgMachine } from '../delete-organization.machine';
 
 const tick = () => new Promise<void>(resolve => setTimeout(resolve, 0));
 

packages/ui/src/mosaic/sections/__tests__/delete-organization-view.test.tsx → packages/ui/src/mosaic/sections/__tests__/delete-organization.view.test.tsx

@@ -1,10 +1,10 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 
-import { MosaicProvider } from '../../MosaicProvider';
 import type { Snapshot } from '../../machine/types';
-import type { DeleteOrgContext } from '../delete-organization-machine';
-import { DeleteOrganizationView } from '../delete-organization-view';
+import { MosaicProvider } from '../../MosaicProvider';
+import type { DeleteOrgContext } from '../delete-organization.machine';
+import { DeleteOrganizationView } from '../delete-organization.view';
 
 function renderView(snapshot: Snapshot<DeleteOrgContext>, send = vi.fn(), canSubmit = false) {
  render(

packages/ui/src/mosaic/sections/__tests__/leave-organization-controller.test.tsx → packages/ui/src/mosaic/sections/__tests__/leave-organization.controller.test.tsx

@@ -1,29 +1,30 @@
 import { act, fireEvent, render, screen } from '@testing-library/react';
-import React from 'react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { deferred } from '../../machines/__tests__/test-utils';
-import { useLeaveOrganizationController } from '../leave-organization-controller';
+import { useLeaveOrganizationController } from '../leave-organization.controller';
 
 const ORG_NAME = 'Acme Inc';
 
 let destroy: ReturnType<typeof vi.fn>;
 let revalidate: ReturnType<typeof vi.fn>;
+let isLoaded: boolean;
 let organization: { id: string; name: string } | null;
-let membership: { id: string; destroy: () => Promise<void> } | null;
+let membership: { id: string; destroy: () => Promise<void> } | null | undefined;
 
 vi.mock('@clerk/shared/react', async importOriginal => {
  const actual = await importOriginal<typeof import('@clerk/shared/react')>();
  return {
  ...actual,
- useOrganization: () => ({ isLoaded: true, organization, membership }),
+ useOrganization: () => ({ isLoaded, organization, membership }),
  useOrganizationList: () => ({ userMemberships: { revalidate } }),
  };
 });
 
 beforeEach(() => {
  destroy = vi.fn();
  revalidate = vi.fn().mockResolvedValue(undefined);
+ isLoaded = true;
  organization = { id: 'org_1', name: ORG_NAME };
  membership = { id: 'mem_1', destroy };
 });
@@ -35,7 +36,7 @@ afterEach(() => {
 function Harness() {
  const controller = useLeaveOrganizationController();
  if (controller.status !== 'ready') {
- return <output data-testid='state'>loading</output>;
+ return <output data-testid='state'>{controller.status}</output>;
  }
  return (
  <div>
@@ -55,6 +56,38 @@ function openAndConfirm() {
 }
 
 describe('useLeaveOrganizationController', () => {
+ it('is loading until useOrganization is loaded', () => {
+ isLoaded = false;
+
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('loading');
+ });
+
+ it('is loading while membership is still resolving', () => {
+ membership = undefined;
+
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('loading');
+ });
+
+ it('is hidden when there is no active organization', () => {
+ organization = null;
+
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('hidden');
+ });
+
+ it('is hidden when there is no membership', () => {
+ membership = null;
+
+ render(<Harness />);
+
+ expect(screen.getByTestId('state')).toHaveTextContent('hidden');
+ });
+
  it('drives CONFIRM → leaving → resolve → left', async () => {
  const gate = deferred<void>();
  destroy.mockReturnValue(gate.promise);

packages/ui/src/mosaic/sections/__tests__/leave-organization-machine.test.ts → packages/ui/src/mosaic/sections/__tests__/leave-organization.machine.test.ts

@@ -1,7 +1,7 @@
 import { describe, expect, it, vi } from 'vitest';
 
 import { createActor } from '../../machine/createActor';
-import { leaveOrgMachine } from '../leave-organization-machine';
+import { leaveOrgMachine } from '../leave-organization.machine';
 
 const tick = () => new Promise<void>(resolve => setTimeout(resolve, 0));
 

packages/ui/src/mosaic/sections/__tests__/leave-organization-view.test.tsx → packages/ui/src/mosaic/sections/__tests__/leave-organization.view.test.tsx

@@ -1,10 +1,10 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 
-import { MosaicProvider } from '../../MosaicProvider';
 import type { Snapshot } from '../../machine/types';
-import type { LeaveOrgContext } from '../leave-organization-machine';
-import { LeaveOrganizationView } from '../leave-organization-view';
+import { MosaicProvider } from '../../MosaicProvider';
+import type { LeaveOrgContext } from '../leave-organization.machine';
+import { LeaveOrganizationView } from '../leave-organization.view';
 
 function renderView(snapshot: Snapshot<LeaveOrgContext>, send = vi.fn(), canSubmit = false) {
  render(

packages/ui/src/mosaic/sections/delete-organization.controller.tsx

@@ -0,0 +1,55 @@
+import { useOrganization, useOrganizationList, useSession } from '@clerk/shared/react';
+
+import type { Snapshot } from '../machine/types';
+import { useMachine } from '../machine/useMachine';
+import type { DeleteOrgContext, DeleteOrgEvent } from './delete-organization.machine';
+import { deleteOrgMachine } from './delete-organization.machine';
+
+type DeleteOrganizationController =
+ | { status: 'loading' }
+ | { status: 'hidden' }
+ | {
+ status: 'ready';
+ snapshot: Snapshot<DeleteOrgContext>;
+ send: (event: DeleteOrgEvent) => void;
+ canSubmit: boolean;
+ };
+
+export function useDeleteOrganizationController(): DeleteOrganizationController {
+ const { isLoaded: isOrganizationLoaded, organization } = useOrganization();
+ const { isLoaded: isSessionLoaded, session } = useSession();
+ const { userMemberships } = useOrganizationList({ userMemberships: true });
+
+ const [snapshot, send, actor] = useMachine(deleteOrgMachine, {
+ context: {
+ organizationName: organization?.name ?? '',
+ destroyOrganization: async () => {
+ await organization?.destroy();
+ // Refresh org lists elsewhere (e.g. the switcher). Not awaited: a stale
+ // list must not make a successful delete look like it failed.
+ void userMemberships.revalidate?.();
+ // TODO(mosaic): navigate away from the deleted org's profile once the flow
+ // has router context, mirroring legacy navigateAfterLeaveOrganization.
+ },
+ },
+ });
+
+ // The permission check needs both the organization and the session resolved.
+ // Treat either still loading as 'loading' so a not-yet-known session is never
+ // collapsed into a definitive 'hidden'.
+ if (!isOrganizationLoaded || !isSessionLoaded) {
+ return { status: 'loading' };
+ }
+
+ const canDelete = session?.checkAuthorization({ permission: 'org:sys_profile:delete' }) ?? false;
+ if (!organization || !canDelete || !organization.adminDeleteEnabled) {
+ return { status: 'hidden' };
+ }
+
+ return {
+ status: 'ready',
+ snapshot,
+ send,
+ canSubmit: actor.can({ type: 'CONFIRM' }),
+ };
+}

packages/ui/src/mosaic/sections/delete-organization.tsx

@@ -1,10 +1,11 @@
-import { SectionSkeleton } from '../components/section-skeleton';
-import { useDeleteOrganizationController } from './delete-organization-controller';
-import { DeleteOrganizationView } from './delete-organization-view';
+import { useDeleteOrganizationController } from './delete-organization.controller';
+import { DeleteOrganizationView } from './delete-organization.view';
 
 export function DeleteOrganization() {
  const controller = useDeleteOrganizationController();
- if (controller.status === 'loading') return <SectionSkeleton />;
+ if (controller.status !== 'ready') {
+ return null;
+ }
  return (
  <DeleteOrganizationView
  snapshot={controller.snapshot}

packages/ui/src/mosaic/sections/delete-organization-view.tsx → packages/ui/src/mosaic/sections/delete-organization.view.tsx

@@ -2,7 +2,7 @@ import { Destructive } from '../block/destructive';
 import { Box } from '../components/box';
 import { Button } from '../components/button';
 import type { Snapshot } from '../machine/types';
-import type { DeleteOrgContext, DeleteOrgEvent } from './delete-organization-machine';
+import type { DeleteOrgContext, DeleteOrgEvent } from './delete-organization.machine';
 
 interface DeleteOrganizationViewProps {
  snapshot: Snapshot<DeleteOrgContext>;