Let EMCN modals wait on async confirms and inputs take controlled values

A confirm that returns a promise holds the dialog open as pending, closes on
success, and shows the error inline on failure. A synchronous confirm still closes
in the same update. Every existing caller only sets state that commutes with
closing, so running it before close changes nothing they render.

Author: waleedlatif1

apps/sim/platform/design-system/components/field/fields.tsx

@@ -51,7 +51,12 @@ export function FieldFrame({ id, label, optional, error, children }: FieldFrameP
   )
 }
 
-interface TextFieldProps extends FieldProps {
+interface TextValueProps {
+  value?: string
+  onChange?: (value: string) => void
+}
+
+interface TextFieldProps extends FieldProps, TextValueProps {
   required?: boolean
   pattern?: string
   placeholder?: string
@@ -64,6 +69,8 @@ export function TextField({
   disabled,
   name,
   defaultValue,
+  value,
+  onChange,
   placeholder,
   required,
   pattern,
@@ -78,6 +85,8 @@ export function TextField({
         label={label}
         name={name}
         defaultValue={defaultValue}
+        value={value}
+        onChange={onChange}
         placeholder={placeholder}
         disabled={disabled}
         invalid={Boolean(error)}
@@ -87,7 +96,7 @@ export function TextField({
   )
 }
 
-interface TextAreaFieldProps extends FieldProps {
+interface TextAreaFieldProps extends FieldProps, TextValueProps {
   placeholder?: string
 }
 
@@ -98,6 +107,8 @@ export function TextAreaField({
   disabled,
   name,
   defaultValue,
+  value,
+  onChange,
   placeholder,
 }: TextAreaFieldProps) {
   const id = useId()
@@ -108,6 +119,8 @@ export function TextAreaField({
         label={label}
         name={name}
         defaultValue={defaultValue}
+        value={value}
+        onChange={onChange}
         placeholder={placeholder}
         disabled={disabled}
         invalid={Boolean(error)}

apps/sim/platform/design-system/components/field/inputs.tsx

@@ -13,7 +13,13 @@ export interface ControlProps {
   describedBy?: string
 }
 
-interface InputProps extends ControlProps {
+interface TextControlProps extends ControlProps {
+  /** Controlled text. Leave it out and `defaultValue` keeps the draft in the DOM. */
+  value?: string
+  onChange?: (value: string) => void
+}
+
+interface InputProps extends TextControlProps {
   required?: boolean
   pattern?: string
   placeholder?: string
@@ -24,6 +30,8 @@ export function Input({
   label,
   name,
   defaultValue,
+  value,
+  onChange,
   disabled,
   invalid,
   describedBy,
@@ -44,6 +52,8 @@ export function Input({
         data-type='T043'
         name={name}
         defaultValue={defaultValue}
+        value={value}
+        onChange={onChange && ((event) => onChange(event.target.value))}
         placeholder={placeholder}
         disabled={disabled}
         aria-invalid={invalid || undefined}
@@ -62,6 +72,8 @@ export function TextArea({
   label,
   name,
   defaultValue,
+  value,
+  onChange,
   disabled,
   invalid,
   describedBy,
@@ -82,6 +94,8 @@ export function TextArea({
         name={name}
         data-density={density}
         defaultValue={defaultValue}
+        value={value}
+        onChange={onChange && ((event) => onChange(event.target.value))}
         placeholder={placeholder}
         disabled={disabled}
         aria-invalid={invalid || undefined}

apps/sim/platform/design-system/components/modal/modal-parts.tsx

@@ -54,6 +54,7 @@ interface ModalFooterProps {
   previousStep?: boolean
   destructive?: boolean
   disabled?: boolean
+  cancelDisabled?: boolean
   progress?: string
 }
 
@@ -63,6 +64,7 @@ export function ModalFooter({
   previousStep,
   destructive,
   disabled,
+  cancelDisabled,
   progress,
 }: ModalFooterProps) {
   return (
@@ -72,7 +74,7 @@ export function ModalFooter({
           {progress}
         </span>
       )}
-      <Button variant='quiet' onClick={onPrevious}>
+      <Button variant='quiet' disabled={cancelDisabled} onClick={onPrevious}>
         {previousStep ? 'Back' : 'Cancel'}
       </Button>
       <Button variant={destructive ? 'destructive' : 'primary'} submit disabled={disabled}>

apps/sim/platform/design-system/components/modal/modal.module.css

@@ -111,3 +111,7 @@
   padding: 0;
   gap: 0;
 }
+
+.error {
+  color: var(--control-danger);
+}

apps/sim/platform/design-system/components/modal/modal.tsx

@@ -1,8 +1,10 @@
 'use client'
 
 import { type ReactNode, useState } from 'react'
+import { getErrorMessage } from '@sim/utils/errors'
 import type { IconName } from '@/platform/design-system/catalog/icon-geometry'
 import { Button } from '@/platform/design-system/components/button/button'
+import styles from '@/platform/design-system/components/modal/modal.module.css'
 import { ModalBody, ModalFooter } from '@/platform/design-system/components/modal/modal-parts'
 import { OverlayDialog } from '@/platform/design-system/components/modal/overlay-dialog'
 
@@ -11,11 +13,19 @@ interface ModalStep {
   content: ReactNode
 }
 
+/**
+ * A synchronous confirm closes the dialog in the same update. A returned promise holds it open as
+ * pending, closes it on success, and on rejection keeps the draft and shows the error's message.
+ */
+type ConfirmHandler<Args extends unknown[]> =
+  | ((...args: Args) => void)
+  | ((...args: Args) => Promise<void>)
+
 interface ModalActions {
   title: string
   confirmLabel: string
   confirmDisabled?: boolean
-  onConfirm?: (values: FormData) => void
+  onConfirm?: ConfirmHandler<[values: FormData]>
 }
 type ModalTrigger =
   | { triggerLabel: string; triggerIcon?: IconName; open?: never; onOpenChange?: never }
@@ -27,7 +37,7 @@ type ModalTrigger =
     }
 
 interface MultiStepModalProps extends Omit<ModalActions, 'onConfirm'> {
-  onConfirm?: () => void
+  onConfirm?: ConfirmHandler<[]>
   triggerLabel: string
   steps: readonly [ModalStep, ...ModalStep[]]
 }
@@ -57,15 +67,42 @@ function ModalSurface({
 }: ModalSurfaceProps) {
   const [internal, setInternal] = useState(false)
   const [index, setIndex] = useState(0)
+  const [pending, setPending] = useState(false)
+  const [error, setError] = useState<string | null>(null)
   const open = controlled ?? internal
   const step = steps[index]
   const last = index === steps.length - 1
 
+  if (!open && error) setError(null)
+
   function close() {
     setIndex(0)
     if (onOpenChange) onOpenChange(false)
     else setInternal(false)
   }
+
+  async function confirm(values: FormData) {
+    setError(null)
+    try {
+      const result = onConfirm?.(values)
+      if (!(result instanceof Promise)) {
+        close()
+        return
+      }
+      setPending(true)
+      await result
+      close()
+    } catch (failure) {
+      setError(getErrorMessage(failure, 'Something went wrong. Please try again.'))
+    } finally {
+      setPending(false)
+    }
+  }
+
+  /** The work is already underway and its outcome belongs here, so nothing dismisses it mid-flight. */
+  function dismiss() {
+    if (!pending) close()
+  }
   return (
     <>
       {triggerLabel && (
@@ -79,29 +116,34 @@ function ModalSurface({
         description={step.description}
         step={index}
         presentation={presentation}
-        onClose={close}
+        busy={pending}
+        onClose={dismiss}
         onSubmit={(event) => {
           event.preventDefault()
-          if (last && confirmDisabled) return
+          if (pending || (last && confirmDisabled)) return
           if (!last) {
             setIndex(index + 1)
             return
           }
-          const values = new FormData(event.currentTarget)
-          close()
-          onConfirm?.(values)
+          void confirm(new FormData(event.currentTarget))
         }}
       >
         {steps.map((entry, i) => (
           <ModalBody key={i} inactive={i !== index} label={entry.description || title}>
             {entry.content}
           </ModalBody>
         ))}
+        {error && (
+          <p className={styles.error} data-type='T052' role='alert'>
+            {error}
+          </p>
+        )}
         <ModalFooter
           confirmLabel={last ? confirmLabel : 'Continue'}
-          onPrevious={() => (index === 0 ? close() : setIndex(index - 1))}
+          onPrevious={() => (index === 0 ? dismiss() : setIndex(index - 1))}
           previousStep={index > 0}
-          disabled={last && confirmDisabled}
+          disabled={pending || (last && confirmDisabled)}
+          cancelDisabled={pending}
           destructive={destructive}
           progress={steps.length > 1 ? `Step ${index + 1} of ${steps.length}` : undefined}
         />

apps/sim/platform/design-system/components/modal/overlay-dialog.tsx

@@ -10,6 +10,7 @@ interface DialogSurfaceProps {
   onClose: () => void
   description?: string
   step?: number
+  busy?: boolean
   onSubmit?: FormEventHandler<HTMLFormElement>
   children: ReactNode
 }
@@ -28,6 +29,7 @@ export function OverlayDialog({
   description,
   presentation,
   step,
+  busy,
   onSubmit,
   children,
 }: OverlayDialogProps) {
@@ -101,7 +103,12 @@ export function OverlayDialog({
     >
       {open &&
         (onSubmit ? (
-          <form ref={layout} className={styles.modalLayout} onSubmit={onSubmit}>
+          <form
+            ref={layout}
+            className={styles.modalLayout}
+            aria-busy={busy || undefined}
+            onSubmit={onSubmit}
+          >
             {content}
           </form>
         ) : (