fix(admin): reflect immediate submission state

Author: TheodoreSpeaks

apps/sim/app/workspace/[workspaceId]/settings/components/admin/add-user-modal.test.tsx

@@ -21,19 +21,36 @@ const { addUserMutation, mockMutate, mockReset } = vi.hoisted(() => ({
 vi.mock('@sim/emcn', () => ({
   ChipModal: ({ open, children }: { open: boolean; children: ReactNode }) =>
     open ? <div role='dialog'>{children}</div> : null,
-  ChipModalHeader: ({ children }: { children: ReactNode }) => <h2>{children}</h2>,
+  ChipModalHeader: ({
+    children,
+    onClose,
+    closeDisabled,
+  }: {
+    children: ReactNode
+    onClose: () => void
+    closeDisabled?: boolean
+  }) => (
+    <header>
+      <h2>{children}</h2>
+      <button type='button' onClick={onClose} disabled={closeDisabled}>
+        Close
+      </button>
+    </header>
+  ),
   ChipModalBody: ({ children }: { children: ReactNode }) => <div>{children}</div>,
   ChipModalError: ({ children }: { children: ReactNode }) =>
     children ? <div role='alert'>{children}</div> : null,
   ChipModalFooter: ({
     onCancel,
+    cancelDisabled,
     primaryAction,
   }: {
     onCancel: () => void
+    cancelDisabled?: boolean
     primaryAction: { label: ReactNode; onClick: () => void; disabled?: boolean }
   }) => (
     <footer>
-      <button type='button' onClick={onCancel}>
+      <button type='button' onClick={onCancel} disabled={cancelDisabled}>
         Cancel
       </button>
       <button type='button' disabled={primaryAction.disabled} onClick={primaryAction.onClick}>
@@ -223,6 +240,8 @@ describe('AddUserModal', () => {
     })
 
     expect(mockMutate).toHaveBeenCalledTimes(1)
+    expect(buttonLabelled('Close').disabled).toBe(true)
+    expect(buttonLabelled('Cancel').disabled).toBe(true)
   })
 
   it('supports unverified accounts without exposing a platform-role control', async () => {

apps/sim/app/workspace/[workspaceId]/settings/components/admin/add-user-modal.tsx

@@ -27,6 +27,7 @@ interface AddUserModalProps {
 export function AddUserModal({ open, onOpenChange, onCreated }: AddUserModalProps) {
   const addUser = useAddUser()
   const submissionInFlightRef = useRef(false)
+  const [isSubmitting, setIsSubmitting] = useState(false)
   const [name, setName] = useState('')
   const [email, setEmail] = useState('')
   const [password, setPassword] = useState('')
@@ -41,11 +42,12 @@ export function AddUserModal({ open, onOpenChange, onCreated }: AddUserModalProp
     password.length > 0 && password.length < 8
       ? 'Password must be at least 8 characters'
       : undefined
+  const isSubmissionPending = isSubmitting || addUser.isPending
   const canSubmit =
     normalizedName.length > 0 &&
     isValidEmailSyntax(normalizedEmail) &&
     password.length >= 8 &&
-    !addUser.isPending
+    !isSubmissionPending
 
   const reset = () => {
     setName('')
@@ -56,14 +58,15 @@ export function AddUserModal({ open, onOpenChange, onCreated }: AddUserModalProp
   }
 
   const handleClose = () => {
-    if (submissionInFlightRef.current || addUser.isPending) return
+    if (submissionInFlightRef.current || isSubmissionPending) return
     reset()
     onOpenChange(false)
   }
 
   const handleAddUser = () => {
     if (!canSubmit || submissionInFlightRef.current) return
     submissionInFlightRef.current = true
+    setIsSubmitting(true)
     addUser.reset()
     addUser.mutate(
       {
@@ -80,6 +83,7 @@ export function AddUserModal({ open, onOpenChange, onCreated }: AddUserModalProp
         },
         onSettled: () => {
           submissionInFlightRef.current = false
+          setIsSubmitting(false)
         },
       }
     )
@@ -93,7 +97,9 @@ export function AddUserModal({ open, onOpenChange, onCreated }: AddUserModalProp
       }}
       srTitle='Add user'
     >
-      <ChipModalHeader onClose={handleClose}>Add user</ChipModalHeader>
+      <ChipModalHeader onClose={handleClose} closeDisabled={isSubmissionPending}>
+        Add user
+      </ChipModalHeader>
       <ChipModalBody>
         <ChipModalField
           type='input'
@@ -107,7 +113,7 @@ export function AddUserModal({ open, onOpenChange, onCreated }: AddUserModalProp
           placeholder='Canary Writer'
           maxLength={100}
           autoComplete='off'
-          disabled={addUser.isPending}
+          disabled={isSubmissionPending}
           required
         />
         <ChipModalField
@@ -121,7 +127,7 @@ export function AddUserModal({ open, onOpenChange, onCreated }: AddUserModalProp
           error={emailError}
           placeholder='writer@synthetics.example.com'
           autoComplete='off'
-          disabled={addUser.isPending}
+          disabled={isSubmissionPending}
           required
         />
         <ChipModalField
@@ -137,7 +143,7 @@ export function AddUserModal({ open, onOpenChange, onCreated }: AddUserModalProp
           hint='Better Auth creates a credential account with this password.'
           placeholder='At least 8 characters'
           autoComplete='new-password'
-          disabled={addUser.isPending}
+          disabled={isSubmissionPending}
           required
         />
         <ChipModalField
@@ -151,7 +157,7 @@ export function AddUserModal({ open, onOpenChange, onCreated }: AddUserModalProp
           options={EMAIL_STATUS_OPTIONS}
           align='start'
           hint='Verified users can sign in when email verification is required.'
-          disabled={addUser.isPending}
+          disabled={isSubmissionPending}
           required
         />
         <ChipModalError>
@@ -160,9 +166,9 @@ export function AddUserModal({ open, onOpenChange, onCreated }: AddUserModalProp
       </ChipModalBody>
       <ChipModalFooter
         onCancel={handleClose}
-        cancelDisabled={addUser.isPending}
+        cancelDisabled={isSubmissionPending}
         primaryAction={{
-          label: addUser.isPending ? 'Adding...' : 'Add user',
+          label: isSubmissionPending ? 'Adding...' : 'Add user',
           onClick: handleAddUser,
           disabled: !canSubmit,
         }}

packages/emcn/src/components/chip-modal/chip-modal.tsx

@@ -154,6 +154,8 @@ export interface ChipModalHeaderProps extends React.HTMLAttributes<HTMLDivElemen
   icon?: React.ComponentType<{ className?: string }> | null
   /** Invoked when the trailing close button is activated. Always rendered. */
   onClose: () => void
+  /** Disables the trailing close button while an operation is in flight. */
+  closeDisabled?: boolean
   /** Accessible label for the close button. */
   closeAriaLabel?: string
 }
@@ -164,7 +166,15 @@ export interface ChipModalHeaderProps extends React.HTMLAttributes<HTMLDivElemen
  */
 const ChipModalHeader = React.forwardRef<HTMLDivElement, ChipModalHeaderProps>(
   (
-    { className, children, icon: Icon = null, onClose, closeAriaLabel = 'Close', ...props },
+    {
+      className,
+      children,
+      icon: Icon = null,
+      onClose,
+      closeDisabled = false,
+      closeAriaLabel = 'Close',
+      ...props
+    },
     ref
   ) => (
     <div ref={ref} className={cn('flex flex-col', className)} {...props}>
@@ -177,6 +187,7 @@ const ChipModalHeader = React.forwardRef<HTMLDivElement, ChipModalHeaderProps>(
           type='button'
           variant='ghost'
           onClick={onClose}
+          disabled={closeDisabled}
           className='relative size-[14px] flex-shrink-0 p-0 before:absolute before:inset-[-14px] before:content-[""]'
         >
           <X className='size-[14px] text-[var(--text-icon)]' />