clean up props a bit

Author: david-crespo

app/components/form/ModalForm.tsx

@@ -16,66 +16,41 @@ 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
-        onDismiss={onDismiss}
-        title={modalTitle}
-        width={width}
-        overlay={overlay}
-      >
+      <Modal isOpen onDismiss={onDismiss} title={title} width={width} overlay={overlay}>
         <Modal.Body>
           <Modal.Section>
-            {subtitle && <div className="mb-4">{subtitle}</div>}
             {submitError && (
               <Message variant="error" title="Error" content={submitError.message} />
             )}

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

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

app/pages/SiloImagesPage.tsx

@@ -160,19 +160,16 @@ const PromoteImageModal = ({ onDismiss }: { onDismiss: () => void }) => {
     [images.data]
   )
 
-  const onSubmit = ({ image, project }: Values) => {
-    if (!image || !project) return
-    promoteImage.mutate({ path: { image } })
-  }
-
   return (
     <ModalForm
       title="Promote image"
       form={form}
-      resourceName="Image"
       loading={promoteImage.isPending}
       submitError={promoteImage.error}
-      onSubmit={onSubmit}
+      onSubmit={({ image, project }) => {
+        if (!image || !project) return // shouldn't happen because of validation
+        promoteImage.mutate({ path: { image } })
+      }}
       onDismiss={onDismiss}
       submitLabel="Promote"
     >