refactor(mosaic): share one invite form between the invite dialog and create organization

useInviteMembersForm owns the invite values, the default role, rejected
addresses, submit availability, and the submit. The invite dialog and
the create organization invite step take it as a single invite prop
instead of repeating each field, and use its form id and submit handler
directly.

Author: austincalvelage

.changeset/mosaic-share-invite-members-form.md

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

packages/mosaic/src/features/create-organization/create-organization.controller.ts

@@ -2,14 +2,10 @@ import { useState } from 'react';
 
 import type { UseFormResult } from '../../components/form';
 import { useForm } from '../../components/form';
-import type { SelectItem } from '../../components/select';
 import { useMessages } from '../../localization';
 import type { MembersRoles } from '../organization-profile/organization-profile-members-panel/members-table-tab.types';
-import { resolveDefaultRole } from '../organization-profile/organization-profile-members-panel/organization-profile-invite-members.controller';
-import {
-  canSendInvitations,
-  emailAddressesToInvite,
-} from '../organization-profile/organization-profile-members-panel/organization-profile-invite-members.utils';
+import type { InviteMembersForm } from '../organization-profile/organization-profile-members-panel/organization-profile-invite-members.controller';
+import { useInviteMembersForm } from '../organization-profile/organization-profile-members-panel/organization-profile-invite-members.controller';
 import type { CreateOrganizationModel } from './create-organization.model';
 import type {
   CreatedOrganization,
@@ -86,12 +82,6 @@ export function useCreateOrganizationController(
   };
 }
 
-interface InviteValues {
-  emailAddresses: string[];
-  emailDraft: string;
-  role: string | null;
-}
-
 export interface CreateOrganizationInviteControllerOptions {
   organizationId: string | null;
   roles: MembersRoles | null;
@@ -100,70 +90,19 @@ export interface CreateOrganizationInviteControllerOptions {
   onSent: () => void;
 }
 
-export interface CreateOrganizationInviteController {
-  emailAddresses: string[];
-  onEmailAddressesChange: (emailAddresses: string[]) => void;
-  emailDraft: string;
-  onEmailDraftChange: (emailDraft: string) => void;
-  rejectedEmailAddresses: string[];
-  roles: SelectItem[];
-  role: string | null;
-  onRoleChange: (role: string | null) => void;
-  isRoleDisabled: boolean;
-  canSubmit: boolean;
-  isPending: boolean;
-  error: string | undefined;
-  onSubmit: () => void;
-}
-
 export function useCreateOrganizationInviteController({
   organizationId,
   roles,
   defaultRole,
   onInvite,
   onSent,
-}: CreateOrganizationInviteControllerOptions): CreateOrganizationInviteController {
+}: CreateOrganizationInviteControllerOptions): InviteMembersForm {
   const m = useMessages('createOrganization');
-  const roleNames = useMessages('roles');
-  const [rejectedEmailAddresses, setRejectedEmailAddresses] = useState<string[]>([]);
-  const initialRole = roles ? resolveDefaultRole(roles, defaultRole) : null;
-
-  const form = useForm<InviteValues, boolean>({
-    initialValues: { emailAddresses: [], emailDraft: '', role: null },
+  return useInviteMembersForm({
+    roles,
+    defaultRole,
     errorFallback: m.invite.error,
-    canSubmit: values => canSendInvitations({ ...values, role: values.role ?? initialRole, rejectedEmailAddresses }),
-    onSubmit: async values => {
-      const selected = values.role ?? initialRole;
-      if (!organizationId || selected === null) {
-        return false;
-      }
-      await onInvite(organizationId, {
-        emailAddresses: emailAddressesToInvite(values),
-        role: selected,
-        onRejected: setRejectedEmailAddresses,
-      });
-      return true;
-    },
-    onSuccess: sent => {
-      if (sent) {
-        onSent();
-      }
-    },
-  });
-
-  return {
-    emailAddresses: form.values.emailAddresses,
-    onEmailAddressesChange: emailAddresses => form.setValue('emailAddresses', emailAddresses),
-    emailDraft: form.values.emailDraft,
-    onEmailDraftChange: emailDraft => form.setValue('emailDraft', emailDraft),
-    rejectedEmailAddresses,
-    roles: (roles?.roles ?? []).map(role => ({ value: role.key, label: roleNames[role.key] ?? role.name })),
-    role: form.values.role ?? initialRole,
-    onRoleChange: role => form.setValue('role', role),
-    isRoleDisabled: !roles || roles.hasRoleSetMigration,
-    canSubmit: form.canSubmit || form.isSubmitting,
-    isPending: form.isSubmitting,
-    error: form.error,
-    onSubmit: form.submit,
-  };
+    send: organizationId ? input => onInvite(organizationId, input) : undefined,
+    onSent,
+  }).invite;
 }

packages/mosaic/src/features/create-organization/create-organization.view.tsx

@@ -15,8 +15,8 @@ import { useErrorText, useMessages } from '../../localization';
 import type { FileRejectionReason } from '../../primitives/file-upload';
 import { FileUpload } from '../../primitives/file-upload';
 import { Form } from '../../primitives/form';
+import type { InviteMembersForm } from '../organization-profile/organization-profile-members-panel/organization-profile-invite-members.controller';
 import { InviteMembersFields } from '../organization-profile/organization-profile-members-panel/organization-profile-invite-members.fields';
-import type { CreateOrganizationInviteController } from './create-organization.controller';
 import { styles } from './create-organization.styles';
 import type { CreateOrganizationStep, CreateOrganizationValues } from './create-organization.types';
 
@@ -34,7 +34,7 @@ export interface CreateOrganizationStepsProps {
   form: UseFormResult<CreateOrganizationValues>;
   slugEnabled: boolean;
   onNameChange: (name: string) => void;
-  invite: CreateOrganizationInviteController;
+  invite: InviteMembersForm;
   onFinish: () => void;
   onCancel?: () => void;
 }
@@ -261,7 +261,6 @@ function LogoField({
 
 function InviteStep({ invite, onFinish }: CreateOrganizationStepsProps) {
   const m = useMessages('createOrganization');
-  const formId = useId();
   const emailInput = useFlowAutoFocus();
 
   return (
@@ -278,17 +277,14 @@ function InviteStep({ invite, onFinish }: CreateOrganizationStepsProps) {
       <Card.Content
         render={
           <Form
-            id={formId}
-            onSubmit={event => {
-              event.preventDefault();
-              invite.onSubmit();
-            }}
+            id={invite.formId}
+            onSubmit={invite.onSubmit}
           />
         }
       >
         <InviteMembersFields
           emailInputRef={emailInput}
-          {...invite}
+          invite={invite}
         />
       </Card.Content>
       <Card.Footer>
@@ -301,7 +297,7 @@ function InviteStep({ invite, onFinish }: CreateOrganizationStepsProps) {
           {m.invite.skip}
         </Button>
         <SubmitButton
-          form={formId}
+          form={invite.formId}
           isPending={invite.isPending}
           disabled={!invite.canSubmit}
           focusableWhenDisabled

packages/mosaic/src/features/organization-profile/organization-profile-members-panel/__tests__/organization-profile-invite-members.dialog.test.tsx

@@ -1,64 +1,55 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { useState } from 'react';
 import { describe, expect, it, vi } from 'vitest';
 
 import { MosaicProvider } from '../../../../mosaic-provider';
-import type { OrganizationProfileInviteMembersDialogProps } from '../organization-profile-invite-members.dialog';
+import { useInviteMembersForm } from '../organization-profile-invite-members.controller';
 import { OrganizationProfileInviteMembersDialog } from '../organization-profile-invite-members.dialog';
-import { canSendInvitations } from '../organization-profile-invite-members.utils';
+import type { InviteMembersInput } from '../organization-profile-invite-members.model';
 
-type HarnessProps = Partial<Omit<OrganizationProfileInviteMembersDialogProps, 'emailAddresses'>> & {
-  initialEmailAddresses?: string[];
-};
-
-function Harness({ initialEmailAddresses = [], ...overrides }: HarnessProps) {
-  const [emailAddresses, setEmailAddresses] = useState(initialEmailAddresses);
-  const [emailDraft, setEmailDraft] = useState('');
-  const [role, setRole] = useState<string | null>('member');
+function Harness({ send }: { send: (input: InviteMembersInput) => Promise<void> }) {
+  const { invite } = useInviteMembersForm({
+    roles: {
+      roles: [
+        { key: 'org:member', name: 'Member' },
+        { key: 'org:admin', name: 'Admin' },
+      ],
+      hasRoleSetMigration: false,
+    },
+    defaultRole: 'org:member',
+    errorFallback: 'Something went wrong.',
+    send,
+    onSent: vi.fn(),
+  });
   return (
     <OrganizationProfileInviteMembersDialog
       open
       onOpenChange={vi.fn()}
-      emailAddresses={emailAddresses}
-      onEmailAddressesChange={setEmailAddresses}
-      emailDraft={emailDraft}
-      onEmailDraftChange={setEmailDraft}
-      roles={[
-        { value: 'member', label: 'Member', description: 'Non-privileged permissions.' },
-        { value: 'admin', label: 'Admin', description: 'Elevated permissions.' },
-      ]}
-      role={role}
-      onRoleChange={setRole}
-      canSubmit={canSendInvitations({ emailAddresses, emailDraft, rejectedEmailAddresses: [], role })}
-      isPending={false}
-      error={null}
-      onSubmit={vi.fn()}
-      {...overrides}
+      invite={invite}
     />
   );
 }
 
-function renderDialog(props: HarnessProps = {}) {
-  return render(
-    <MosaicProvider>
-      <Harness {...props} />
-    </MosaicProvider>,
-  );
-}
-
 describe('OrganizationProfileInviteMembersDialog', () => {
   it('blocks submitting until malformed emails are removed', async () => {
     const user = userEvent.setup();
-    const onSubmit = vi.fn();
-    renderDialog({ onSubmit, initialEmailAddresses: ['preston@clerk.dev', 'nate'] });
+    const send = vi.fn(() => Promise.resolve());
+    render(
+      <MosaicProvider>
+        <Harness send={send} />
+      </MosaicProvider>,
+    );
 
+    await user.type(screen.getByRole('textbox', { name: 'Email' }), 'preston@clerk.dev,nate,');
     expect(screen.getByText('Remove invalid email addresses to continue')).toBeInTheDocument();
     await user.click(screen.getByRole('button', { name: 'Send invites' }));
-    expect(onSubmit).not.toHaveBeenCalled();
+    expect(send).not.toHaveBeenCalled();
 
     await user.click(screen.getByRole('button', { name: 'Remove nate' }));
     await user.click(screen.getByRole('button', { name: 'Send invites' }));
-    expect(onSubmit).toHaveBeenCalledOnce();
+    expect(send).toHaveBeenCalledOnce();
+    expect(send).toHaveBeenCalledWith(
+      expect.objectContaining({ emailAddresses: ['preston@clerk.dev'], role: 'org:member' }),
+    );
   });
 });