fix(clerk-js): Initialize default role with form controls (#4281)

clerk · Oct 4, 2024 · d2ec88e · d2ec88e
1 parent 5aeff83
commit d2ec88e
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 4 deletions.
diff --git a/.changeset/heavy-bulldogs-wash.md b/.changeset/heavy-bulldogs-wash.md
@@ -0,0 +1,5 @@
+---
+"@clerk/clerk-js": patch
+---
+
+Enable "Send invitation" button when default role is loaded
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/InviteMembersForm.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/InviteMembersForm.tsx
@@ -2,7 +2,7 @@ import { isClerkAPIResponseError } from '@clerk/shared/error';
 import { useOrganization } from '@clerk/shared/react';
 import type { ClerkAPIError } from '@clerk/types';
 import type { FormEvent } from 'react';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { useEnvironment } from '../../contexts';
 import { Flex } from '../../customizables';
@@ -42,10 +42,19 @@ export const InviteMembersForm = (props: InviteMembersFormProps) => {
     label: localizationKeys('formFieldLabel__emailAddresses'),
   });
 
+  const defaultRole = useDefaultRole();
   const roleField = useFormControl('role', '', {
     label: localizationKeys('formFieldLabel__role'),
   });
 
+  useEffect(() => {
+    if (roleField.value || !defaultRole) {
+      return;
+    }
+
+    roleField.setValue(defaultRole);
+  }, [defaultRole, roleField]);
+
   if (!organization) {
     return null;
   }
@@ -188,8 +197,6 @@ const AsyncRoleSelect = (field: ReturnType<typeof useFormControl<'role'>>) => {
 
   const { t } = useLocalizations();
 
-  const defaultRole = useDefaultRole();
-
   return (
     <Form.ControlRow elementId={field.id}>
       <Flex
@@ -198,7 +205,6 @@ const AsyncRoleSelect = (field: ReturnType<typeof useFormControl<'role'>>) => {
       >
         <RoleSelect
           {...field.props}
-          value={field.props.value || (defaultRole ?? '')}
           roles={options}
           isDisabled={isLoading}
           onChange={value => field.setValue(value)}

diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/InviteMembersPage.test.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/InviteMembersPage.test.tsx
@@ -189,6 +189,70 @@ describe('InviteMembersPage', () => {
       await userEvent.type(getByTestId('tag-input'), '[email protected],');
       await waitFor(() => expect(getByRole('button', { name: /select role/i })).toBeInTheDocument());
     });
+
+    it('enables send button with default role once email address has been entered', async () => {
+      const defaultRole = 'mydefaultrole';
+
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withOrganizations();
+        f.withOrganizationDomains(undefined, defaultRole);
+        f.withUser({
+          email_addresses: ['[email protected]'],
+          organization_memberships: [{ name: 'Org1', role: 'admin' }],
+        });
+      });
+
+      fixtures.clerk.organization?.getRoles.mockResolvedValue({
+        total_count: 3,
+        data: [
+          {
+            pathRoot: '',
+            reload: jest.fn(),
+            id: 'member',
+            key: 'member',
+            name: 'member',
+            description: '',
+            permissions: [],
+            createdAt: new Date(),
+            updatedAt: new Date(),
+          },
+          {
+            pathRoot: '',
+            reload: jest.fn(),
+            id: 'admin',
+            key: 'admin',
+            name: 'Admin',
+            description: '',
+            permissions: [],
+            createdAt: new Date(),
+            updatedAt: new Date(),
+          },
+          {
+            pathRoot: '',
+            reload: jest.fn(),
+            id: defaultRole,
+            key: defaultRole,
+            name: defaultRole,
+            description: '',
+            permissions: [],
+            createdAt: new Date(),
+            updatedAt: new Date(),
+          },
+        ],
+      });
+
+      const { getByRole, userEvent, getByTestId } = render(
+        <Action.Root>
+          <InviteMembersScreen />
+        </Action.Root>,
+        { wrapper },
+      );
+
+      expect(getByRole('button', { name: 'Send invitations' })).toBeDisabled();
+      await userEvent.type(getByTestId('tag-input'), '[email protected],');
+      expect(getByRole('button', { name: 'Send invitations' })).not.toBeDisabled();
+      await userEvent.click(getByRole('button', { name: /mydefaultrole/i }));
+    });
   });
 
   describe('when submitting', () => {