Attach floating IP modal and prop tweaks

Author: benjaminleonard

app/components/AttachFloatingIpModal.tsx

@@ -13,9 +13,10 @@ import { ListboxField } from '~/components/form/fields/ListboxField'
 import { HL } from '~/components/HL'
 import { addToast } from '~/stores/toast'
 import { Message } from '~/ui/lib/Message'
-import { Modal } from '~/ui/lib/Modal'
 import { Slash } from '~/ui/lib/Slash'
 
+import { ModalForm } from './form/ModalForm'
+
 function FloatingIpLabel({ fip }: { fip: FloatingIp }) {
   return (
     <div className="text-secondary selected:text-accent-secondary">
@@ -60,40 +61,39 @@ export const AttachFloatingIpModal = ({
   const floatingIp = form.watch('floatingIp')
 
   return (
-    <Modal isOpen title="Attach floating IP" onDismiss={onDismiss}>
-      <Modal.Body>
-        <Modal.Section>
-          <Message
-            variant="info"
-            content={`Instance ‘${instance.name}’ will be reachable at the selected IP address`}
-          />
-          <form>
-            <ListboxField
-              control={form.control}
-              name="floatingIp"
-              label="Floating IP"
-              placeholder="Select a floating IP"
-              items={floatingIps.map((ip) => ({
-                value: ip.id,
-                label: <FloatingIpLabel fip={ip} />,
-                selectedLabel: ip.name,
-              }))}
-              required
-            />
-          </form>
-        </Modal.Section>
-      </Modal.Body>
-      <Modal.Footer
-        actionText="Attach"
-        disabled={!floatingIp}
-        onAction={() =>
-          floatingIpAttach.mutate({
-            path: { floatingIp }, // note that this is an ID!
-            body: { kind: 'instance', parent: instance.id },
-          })
-        }
-        onDismiss={onDismiss}
-      ></Modal.Footer>
-    </Modal>
+    <ModalForm
+      form={form}
+      onDismiss={onDismiss}
+      submitLabel="Attach floating IP"
+      submitError={floatingIpAttach.error}
+      loading={floatingIpAttach.isPending}
+      title="Attach floating IP"
+      onSubmit={() =>
+        floatingIpAttach.mutate({
+          path: { floatingIp }, // note that this is an ID!
+          body: { kind: 'instance', parent: instance.id },
+        })
+      }
+      submitDisabled={!floatingIp}
+    >
+      <Message
+        variant="info"
+        content={`Instance ‘${instance.name}’ will be reachable at the selected IP address`}
+      />
+      <form>
+        <ListboxField
+          control={form.control}
+          name="floatingIp"
+          label="Floating IP"
+          placeholder="Select a floating IP"
+          items={floatingIps.map((ip) => ({
+            value: ip.id,
+            label: <FloatingIpLabel fip={ip} />,
+            selectedLabel: ip.name,
+          }))}
+          required
+        />
+      </form>
+    </ModalForm>
   )
 }

app/components/form/ModalForm.tsx

@@ -17,10 +17,12 @@ import { Modal, type ModalProps } from '~/ui/lib/Modal'
 type ModalFormProps<TFieldValues extends FieldValues> = {
   form: UseFormReturn<TFieldValues>
   children: ReactNode
+
   /** Must be provided with a reason describing why it's disabled */
-  submitDisabled?: string
+  submitDisabled?: boolean
   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
 
@@ -33,7 +35,7 @@ export function ModalForm<TFieldValues extends FieldValues>({
   form,
   children,
   onDismiss,
-  submitDisabled,
+  submitDisabled = false,
   submitError,
   title,
   onSubmit,
@@ -44,6 +46,7 @@ export function ModalForm<TFieldValues extends FieldValues>({
 }: ModalFormProps<TFieldValues>) {
   const id = useId()
   const { isSubmitting } = form.formState
+
   return (
     <Modal isOpen onDismiss={onDismiss} title={title} width={width} overlay={overlay}>
       <Modal.Body>
@@ -74,7 +77,7 @@ export function ModalForm<TFieldValues extends FieldValues>({
         onDismiss={onDismiss}
         formId={id}
         actionText={submitLabel}
-        disabled={!!submitDisabled}
+        disabled={submitDisabled}
         actionLoading={loading || isSubmitting}
       />
     </Modal>

app/ui/lib/Modal.tsx

@@ -123,7 +123,7 @@ Modal.Footer = ({
   actionText,
   actionLoading,
   cancelText,
-  disabled = false,
+  disabled,
   formId,
 }: FooterProps) => (
   <footer className="flex items-center justify-between border-t px-4 py-3 border-secondary">
@@ -138,7 +138,7 @@ Modal.Footer = ({
         size="sm"
         variant={actionType}
         onClick={onAction}
-        disabled={disabled}
+        disabled={!!disabled}
         loading={actionLoading}
       >
         {actionText}