refactor(mosaic): pass confirmation disabled state directly

Author: austincalvelage

packages/mosaic/docs/controllers.md

@@ -71,8 +71,8 @@ Opening a dialog does not acquire the lock. The lock owns no errors or row IDs.
 `usePendingAction` keeps its inline errors and boolean result; refused runs
 return `false` without changing metadata. `useConfirmController` keeps removal
 errors in its dialog; refusal leaves the dialog and its error unchanged.
-Its `canConfirm` projection disables only the confirmation submit control.
-Admission still runs through the lock, not the rendered projection. Without an
+Pass the section's pending state to `Confirmation.disabled` to disable its submit
+control while another action runs. Admission still runs through the lock. Without an
 injected lock, each owner retains its existing independent behavior.
 
 `actionLock` is a hook option, not a per-run option. Project its `isPending` to

packages/mosaic/src/blocks/confirm/confirm-shell.tsx

@@ -34,7 +34,6 @@ export interface ConfirmStepProps<Payload> {
   actionLabel: string;
   cancelLabel: string;
   isPending: boolean;
-  canConfirm: boolean;
   errorMessage: string | undefined;
   confirm: () => void;
 }
@@ -69,7 +68,6 @@ function ConfirmCard<Payload>({
     actionLabel: resolve(actionLabel, payload),
     cancelLabel,
     isPending: controller.isPending,
-    canConfirm: controller.canConfirm,
     errorMessage: controller.errorMessage,
     confirm: () => controller.confirm(payload),
   });

packages/mosaic/src/blocks/confirm/confirm.controller.ts

@@ -74,7 +74,6 @@ export interface ConfirmController<Payload = void> {
   isPending: boolean;
   /** Whether the dialog can close right now. False while the action is past the point of cancelling */
   canClose: boolean;
-  canConfirm: boolean;
   errorMessage: string | undefined;
   /** Which card the dialog shows: the confirm step, or the reverification the action was interrupted by. */
   step: ConfirmStep;
@@ -124,7 +123,6 @@ export function useConfirmController<Payload = void>({
     isOpen: snapshot.value !== 'idle',
     isPending,
     canClose,
-    canConfirm: snapshot.value === 'confirming' && !actionLock?.isPending,
     errorMessage: error ? errorText(error, errorFallback) : undefined,
     step: isPending && reverification?.visible ? 'verify' : 'confirm',
     reverification,

packages/mosaic/src/blocks/confirmation/__tests__/confirmation.feature.test.tsx

@@ -38,7 +38,11 @@ function Host<Payload>({
 
 async function renderAccount(
   options: ConfirmControllerOptions<void>,
-  { localization, description }: { localization?: MosaicLocalization; description?: ReactNode } = {},
+  {
+    localization,
+    description,
+    disabled,
+  }: { localization?: MosaicLocalization; description?: ReactNode; disabled?: boolean } = {},
 ) {
   const ref: { current: ConfirmController | undefined } = { current: undefined };
   serveFapi({ client: fapiClient([session]) });
@@ -53,6 +57,7 @@ async function renderAccount(
             title={TITLE}
             description={description ?? 'Google will be removed from this account.'}
             actionLabel='Remove'
+            disabled={disabled}
           />
         );
       }}
@@ -70,6 +75,19 @@ async function renderAccount(
 const confirmButton = () => screen.getByRole('button', { name: 'Remove' });
 
 describe('Confirmation', () => {
+  it('disables confirmation while leaving Cancel usable', async () => {
+    const onConfirm = vi.fn(() => Promise.resolve());
+    const { user, open, closed } = await renderAccount({ onConfirm }, { disabled: true });
+    await open();
+
+    expect(confirmButton()).toBeDisabled();
+    await user.click(confirmButton());
+    expect(onConfirm).not.toHaveBeenCalled();
+
+    await user.click(screen.getByRole('button', { name: 'Cancel' }));
+    await closed();
+  });
+
   it('opens from its trigger, confirms, closes once the action lands, and hands focus back', async () => {
     const run = deferred<void>();
     const onConfirm = vi.fn(() => run.promise);

packages/mosaic/src/blocks/confirmation/confirmation.tsx

@@ -10,6 +10,7 @@ export type ConfirmationColor = 'negative' | 'primary';
 export interface ConfirmationProps<Payload = void> extends ConfirmBlockProps<Payload> {
   /** The weight the confirming button carries. An action that can be undone takes `primary` (default: `negative`) */
   color?: ConfirmationColor;
+  disabled?: boolean;
 }
 
 /**
@@ -36,10 +37,10 @@ export interface ConfirmationProps<Payload = void> extends ConfirmBlockProps<Pay
  *   actionLabel='Remove'
  * />
  */
-export function Confirmation<Payload = void>({ color = 'negative', ...props }: ConfirmationProps<Payload>) {
+export function Confirmation<Payload = void>({ color = 'negative', disabled, ...props }: ConfirmationProps<Payload>) {
   return (
     <ConfirmShell {...props}>
-      {({ title, description, actionLabel, cancelLabel, isPending, canConfirm, errorMessage, confirm }) => (
+      {({ title, description, actionLabel, cancelLabel, isPending, errorMessage, confirm }) => (
         <>
           <Card.Header>
             <Card.Title>{title}</Card.Title>
@@ -67,7 +68,7 @@ export function Confirmation<Payload = void>({ color = 'negative', ...props }: C
               fullWidth
               color={color}
               isPending={isPending}
-              disabled={!canConfirm && !isPending}
+              disabled={disabled && !isPending}
               onClick={confirm}
             >
               {actionLabel}

packages/mosaic/src/blocks/destructive/destructive.tsx

@@ -32,7 +32,6 @@ function DestructiveStep<Payload>({
   actionLabel,
   cancelLabel,
   isPending,
-  canConfirm,
   errorMessage,
   confirm,
   fieldLabel,
@@ -99,7 +98,7 @@ function DestructiveStep<Payload>({
           fullWidth
           color='negative'
           isPending={isPending}
-          disabled={!isConfirmed || !canConfirm}
+          disabled={!isConfirmed}
           focusableWhenDisabled
         >
           {actionLabel}

packages/mosaic/src/features/user-profile/user-profile-email-section/user-profile-email-section.view.tsx

@@ -79,6 +79,7 @@ export function UserProfileEmailSectionView({
       {remove ? (
         <Confirmation
           controller={remove}
+          disabled={isDisabled}
           title={m.email.removeDialog.title}
           description={email =>
             fill(email.isVerified ? m.email.removeDialog.verifiedDescription : m.email.removeDialog.description, {

packages/mosaic/src/features/user-profile/user-profile-phone-section/user-profile-phone-section.view.tsx

@@ -81,6 +81,7 @@ export function UserProfilePhoneSectionView({
       {remove ? (
         <Confirmation
           controller={remove}
+          disabled={isDisabled}
           title={m.phone.removeDialog.title}
           description={phone =>
             fill(phone.isVerified ? m.phone.removeDialog.verifiedDescription : m.phone.removeDialog.description, {

packages/mosaic/src/features/user-profile/user-profile-web3-wallets-section/user-profile-web3-wallets-section.view.tsx

@@ -76,6 +76,7 @@ export function UserProfileWeb3WalletsSectionView({
       {remove ? (
         <Confirmation
           controller={remove}
+          disabled={isBusy}
           title={m.removeDialog.title}
           description={wallet =>
             fill(wallet.isVerified ? m.removeDialog.verifiedDescription : m.removeDialog.description, {

packages/mosaic/src/hooks/__tests__/use-action-lock.test.tsx

@@ -34,9 +34,9 @@ describe('shared action admission', () => {
     expect(onConfirm).not.toHaveBeenCalled();
     expect(result.current.remove.isOpen).toBe(true);
     expect(result.current.remove.isPending).toBe(false);
-    expect(result.current.remove.canConfirm).toBe(false);
+    expect(result.current.actionLock.isPending).toBe(true);
     await act(() => pending.resolve());
-    expect(result.current.remove.canConfirm).toBe(true);
+    expect(result.current.actionLock.isPending).toBe(false);
     await act(() => result.current.remove.confirm());
     expect(onConfirm).toHaveBeenCalledOnce();
     expect(result.current.remove.isOpen).toBe(false);