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

.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

@@ -1,5 +1,5 @@
 import { useMergeRefs } from '@floating-ui/react';
-import { useId, useState } from 'react';
+import { useState } from 'react';
 
 import { AvatarUpload } from '../../blocks/avatar-upload';
 import { Button, SubmitButton } from '../../components/button';
@@ -13,16 +13,16 @@ import { useErrorText, useMessages } from '../../localization';
 import { FileUpload } from '../../primitives/file-upload';
 import { Form } from '../../primitives/form';
 import { AVATAR_REJECTION_ERRORS } from '../../utils/avatar-upload';
+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 type { CreateOrganizationStep, CreateOrganizationValues } from './create-organization.types';
 
 export interface CreateOrganizationStepsProps {
   step: CreateOrganizationStep;
   form: UseFormResult<CreateOrganizationValues>;
   slugEnabled: boolean;
   onNameChange: (name: string) => void;
-  invite: CreateOrganizationInviteController;
+  invite: InviteMembersForm;
   onFinish: () => void;
   onCancel?: () => void;
 }
@@ -208,7 +208,6 @@ function LogoField({
 
 function InviteStep({ invite, onFinish }: CreateOrganizationStepsProps) {
   const m = useMessages('createOrganization');
-  const formId = useId();
   const emailInput = useFlowAutoFocus();
 
   return (
@@ -225,17 +224,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>
@@ -248,7 +244,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' }),
+    );
   });
 });