merge modalform thing into this one

Author: david-crespo

app/components/form/ModalForm.tsx

@@ -16,90 +16,67 @@ import { Modal, type ModalProps } from '~/ui/lib/Modal'
 
 type ModalFormProps<TFieldValues extends FieldValues> = {
   form: UseFormReturn<TFieldValues>
-  /**
-   * A function that returns the fields.
-   *
-   * Implemented as a function so we can pass `control` to the fields in the
-   * calling code. We could do that internally with `cloneElement` instead, but
-   * then in the calling code, the field would not infer `TFieldValues` and
-   * constrain the `name` prop to paths in the values object.
-   */
   children: ReactNode
-  resourceName: string
   /** Must be provided with a reason describing why it's disabled */
   submitDisabled?: string
-
+  onSubmit: (values: TFieldValues) => void
+  submitLabel: string
   // require loading and error so we can't forget to hook them up. there are a
   // few forms that don't need them, so we'll use dummy values
 
   /** Error from the API call */
   submitError: ApiError | null
   loading: boolean
-
-  /** Only needed if you need to override the default title (Create/Edit ${resourceName}) */
-  subtitle?: ReactNode
-  onSubmit: (values: TFieldValues) => void
-
-  submitLabel?: string
 } & Omit<ModalProps, 'isOpen'>
 
 export function ModalForm<TFieldValues extends FieldValues>({
   form,
   children,
   onDismiss,
-  resourceName,
   submitDisabled,
   submitError,
   title,
   onSubmit,
   submitLabel = 'Save',
   loading,
-  subtitle,
   width = 'medium',
   overlay = true,
 }: ModalFormProps<TFieldValues>) {
   const id = useId()
-
   const { isSubmitting } = form.formState
-
-  const modalTitle = title || `Create ${resourceName}`
-
   return (
-    <>
-      <Modal
-        isOpen
+    <Modal isOpen onDismiss={onDismiss} title={title} width={width} overlay={overlay}>
+      <Modal.Body>
+        <Modal.Section>
+          {submitError && (
+            <Message variant="error" title="Error" content={submitError.message} />
+          )}
+          <form
+            id={id}
+            className="ox-form"
+            autoComplete="off"
+            onSubmit={(e) => {
+              if (!onSubmit) return
+              // This modal being in a portal doesn't prevent the submit event
+              // from bubbling up out of the portal. Normally that's not a
+              // problem, but sometimes (e.g., instance create) we render the
+              // SideModalForm from inside another form, in which case submitting
+              // the inner form submits the outer form unless we stop propagation
+              e.stopPropagation()
+              form.handleSubmit(onSubmit)(e)
+            }}
+          >
+            {children}
+          </form>
+        </Modal.Section>
+      </Modal.Body>
+      <Modal.Footer
         onDismiss={onDismiss}
-        title={modalTitle}
-        width={width}
-        overlay={overlay}
-      >
-        <Modal.Body>
-          <Modal.Section>
-            {subtitle && <div className="mb-4">{subtitle}</div>}
-            {submitError && (
-              <Message variant="error" title="Error" content={submitError.message} />
-            )}
-            <form
-              id={id}
-              className="ox-form"
-              autoComplete="off"
-              onSubmit={(e) => {
-                if (!onSubmit) return
-                form.handleSubmit(onSubmit)(e)
-              }}
-            >
-              {children}
-            </form>
-          </Modal.Section>
-        </Modal.Body>
-        <Modal.Footer
-          onDismiss={onDismiss}
-          formId={id}
-          actionText={submitLabel}
-          disabled={!!submitDisabled}
-          actionLoading={loading || isSubmitting}
-        />
-      </Modal>
-    </>
+        formId={id}
+        actionText={submitLabel}
+        disabled={!!submitDisabled}
+        actionLoading={loading || isSubmitting}
+      />
+    </Modal>
   )
 }

app/components/form/SideModalForm.tsx

@@ -30,14 +30,6 @@ type EditFormProps = {
 
 type SideModalFormProps<TFieldValues extends FieldValues> = {
   form: UseFormReturn<TFieldValues>
-  /**
-   * A function that returns the fields.
-   *
-   * Implemented as a function so we can pass `control` to the fields in the
-   * calling code. We could do that internally with `cloneElement` instead, but
-   * then in the calling code, the field would not infer `TFieldValues` and
-   * constrain the `name` prop to paths in the values object.
-   */
   children: ReactNode
   onDismiss: () => void
   resourceName: string

app/forms/disk-attach.tsx

@@ -63,7 +63,6 @@ export function AttachDiskModalForm({
     <ModalForm
       form={form}
       onDismiss={onDismiss}
-      resourceName="disk"
       submitLabel="Attach disk"
       submitError={submitError}
       loading={loading}

app/pages/SiloImagesPage.tsx

@@ -7,7 +7,7 @@
  */
 import { createColumnHelper } from '@tanstack/react-table'
 import { useCallback, useMemo, useState } from 'react'
-import { useForm, type FieldValues } from 'react-hook-form'
+import { useForm } from 'react-hook-form'
 import { Outlet } from 'react-router'
 
 import {
@@ -24,6 +24,7 @@ import { DocsPopover } from '~/components/DocsPopover'
 import { ComboboxField } from '~/components/form/fields/ComboboxField'
 import { toImageComboboxItem } from '~/components/form/fields/ImageSelectField'
 import { ListboxField } from '~/components/form/fields/ListboxField'
+import { ModalForm } from '~/components/form/ModalForm'
 import { HL } from '~/components/HL'
 import { confirmDelete } from '~/stores/confirm-delete'
 import { addToast } from '~/stores/toast'
@@ -35,7 +36,6 @@ import { Button } from '~/ui/lib/Button'
 import { toComboboxItems } from '~/ui/lib/Combobox'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 import { Message } from '~/ui/lib/Message'
-import { Modal } from '~/ui/lib/Modal'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
 import { TableActions } from '~/ui/lib/Table'
 import { docLinks } from '~/util/links'
@@ -129,7 +129,7 @@ type Values = { project: string | null; image: string | null }
 const defaultValues: Values = { project: null, image: null }
 
 const PromoteImageModal = ({ onDismiss }: { onDismiss: () => void }) => {
-  const { control, handleSubmit, watch, resetField } = useForm({ defaultValues })
+  const form = useForm({ defaultValues })
 
   const queryClient = useApiQueryClient()
 
@@ -146,7 +146,7 @@ const PromoteImageModal = ({ onDismiss }: { onDismiss: () => void }) => {
 
   const projects = useApiQuery('projectList', {})
   const projectItems = useMemo(() => toComboboxItems(projects.data?.items), [projects.data])
-  const selectedProject = watch('project')
+  const selectedProject = form.watch('project')
 
   // can only fetch images if a project is selected
   const images = useApiQuery(
@@ -159,74 +159,70 @@ const PromoteImageModal = ({ onDismiss }: { onDismiss: () => void }) => {
     [images.data]
   )
 
-  const onSubmit = ({ image, project }: Values) => {
-    if (!image || !project) return
-    promoteImage.mutate({ path: { image } })
-  }
-
   return (
-    <Modal isOpen onDismiss={onDismiss} title="Promote image">
-      <Modal.Body>
-        <Modal.Section>
-          <form autoComplete="off" onSubmit={handleSubmit(onSubmit)} className="space-y-4">
-            <ComboboxField
-              placeholder="Select a project"
-              name="project"
-              label="Project"
-              items={projectItems}
-              onChange={() => {
-                resetField('image') // reset image field when the project changes
-              }}
-              isLoading={projects.isPending}
-              required
-              control={control}
-            />
-            <ListboxField
-              control={control}
-              name="image"
-              placeholder="Select an image"
-              items={imageItems}
-              isLoading={images.isPending}
-              required
-              disabled={!selectedProject}
-            />
-          </form>
-          <Message
-            variant="info"
-            content="Once an image has been promoted it is visible to all projects in a silo"
-          />
-        </Modal.Section>
-      </Modal.Body>
-      <Modal.Footer
-        onDismiss={onDismiss}
-        onAction={handleSubmit(onSubmit)}
-        actionText="Promote"
+    <ModalForm
+      title="Promote image"
+      form={form}
+      loading={promoteImage.isPending}
+      submitError={promoteImage.error}
+      onSubmit={({ image, project }) => {
+        if (!image || !project) return // shouldn't happen because of validation
+        promoteImage.mutate({ path: { image } })
+      }}
+      onDismiss={onDismiss}
+      submitLabel="Promote"
+    >
+      <ComboboxField
+        placeholder="Select a project"
+        name="project"
+        label="Project"
+        items={projectItems}
+        onChange={() => {
+          form.resetField('image') // reset image field when the project changes
+        }}
+        isLoading={projects.isPending}
+        required
+        control={form.control}
+      />
+      <ListboxField
+        control={form.control}
+        name="image"
+        placeholder="Select an image"
+        items={imageItems}
+        isLoading={images.isPending}
+        required
+        disabled={!selectedProject}
       />
-    </Modal>
+      <Message
+        variant="info"
+        content="Once an image has been promoted it is visible to all projects in a silo"
+      />
+    </ModalForm>
   )
 }
 
+type DemoteFormValues = {
+  project: string | undefined
+}
+
 const DemoteImageModal = ({
   onDismiss,
   image,
 }: {
   onDismiss: () => void
   image: Image
 }) => {
-  const { control, handleSubmit, watch } = useForm()
+  const defaultValues: DemoteFormValues = { project: undefined }
+  const form = useForm({ defaultValues })
 
-  const selectedProject: string | undefined = watch('project')
+  const selectedProject: string | undefined = form.watch('project')
 
   const queryClient = useApiQueryClient()
 
   const demoteImage = useApiMutation('imageDemote', {
     onSuccess(data) {
       addToast({
-        content: (
-          <>
-            Image <HL>{data.name}</HL> demoted
-          </>
-        ),
+        content: <>Image <HL>{data.name}</HL> demoted</>, // prettier-ignore
         cta: selectedProject
           ? {
               text: `View images in ${selectedProject}`,
@@ -243,51 +239,40 @@ const DemoteImageModal = ({
     onSettled: onDismiss,
   })
 
-  const onSubmit = (data: FieldValues) => {
-    demoteImage.mutate({ path: { image: image.id }, query: { project: data.project } })
-  }
-
   const projects = useApiQuery('projectList', {})
   const projectItems = useMemo(() => toComboboxItems(projects.data?.items), [projects.data])
 
   return (
-    <Modal isOpen onDismiss={onDismiss} title="Demote image">
-      <Modal.Body>
-        <Modal.Section>
-          <form
-            autoComplete="off"
-            onSubmit={(e) => {
-              e.stopPropagation()
-              handleSubmit(onSubmit)(e)
-            }}
-            className="space-y-4"
-          >
-            <p>
-              Demoting: <span className="text-sans-semi-md text-raise">{image.name}</span>
-            </p>
+    <ModalForm
+      title="Demote image"
+      form={form}
+      loading={demoteImage.isPending}
+      submitError={demoteImage.error}
+      onSubmit={({ project }) => {
+        if (!project) return // shouldn't happen because of validation
+        demoteImage.mutate({ path: { image: image.id }, query: { project } })
+      }}
+      onDismiss={onDismiss}
+      submitLabel="Demote"
+    >
+      <p>
+        Demoting: <span className="text-sans-semi-md text-raise">{image.name}</span>
+      </p>
 
-            <Message
-              variant="info"
-              content="Once an image has been demoted it is only visible to the project that it is demoted into. This will not affect disks already created with the image."
-            />
+      <Message
+        variant="info"
+        content="Once an image has been demoted it is only visible within the project that it is demoted into. This will not affect disks already created with the image."
+      />
 
-            <ComboboxField
-              placeholder="Select project for image"
-              name="project"
-              label="Project"
-              items={projectItems}
-              isLoading={projects.isPending}
-              required
-              control={control}
-            />
-          </form>
-        </Modal.Section>
-      </Modal.Body>
-      <Modal.Footer
-        onDismiss={onDismiss}
-        onAction={handleSubmit(onSubmit)}
-        actionText="Demote"
+      <ComboboxField
+        placeholder="Select project for image"
+        name="project"
+        label="Project"
+        items={projectItems}
+        isLoading={projects.isPending}
+        required
+        control={form.control}
       />
-    </Modal>
+    </ModalForm>
   )
 }