Make pressing enter submit instance resize modal form (#2586)

* make pressing enter submit resize modal form

* eh do it the good way

* expectToast and expectNoToast use toContainText instead of toHaveText

Author: david-crespo

app/pages/project/instances/instance/InstancePage.tsx

@@ -6,7 +6,7 @@
  * Copyright Oxide Computer Company
  */
 import { filesize } from 'filesize'
-import { useMemo, useState } from 'react'
+import { useId, useMemo, useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { Link, useNavigate, type LoaderFunctionArgs } from 'react-router-dom'
 
@@ -314,13 +314,14 @@ export function ResizeInstanceModal({
     form.watch('ncpus') !== instance.ncpus || form.watch('memory') !== instance.memory / GiB
   const isDisabled = !form.formState.isValid || !canResize || !willChange
 
-  const onAction = form.handleSubmit(({ ncpus, memory }) => {
+  const onSubmit = form.handleSubmit(({ ncpus, memory }) => {
     instanceUpdate.mutate({
       path: { instance: instance.name },
       query: { project },
       body: { ncpus, memory: memory * GiB, bootDisk: instance.bootDiskId },
     })
   })
+  const formId = useId()
 
   return (
     <Modal title="Resize instance" isOpen onDismiss={onDismiss}>
@@ -340,7 +341,7 @@ export function ResizeInstanceModal({
               }
             />
           )}
-          <form autoComplete="off" className="space-y-4">
+          <form id={formId} autoComplete="off" className="space-y-4" onSubmit={onSubmit}>
             <NumberField
               required
               label="vCPUs"
@@ -383,8 +384,8 @@ export function ResizeInstanceModal({
         </Modal.Section>
       </Modal.Body>
       <Modal.Footer
+        formId={formId}
         onDismiss={onDismiss}
-        onAction={onAction}
         actionText="Resize"
         actionLoading={instanceUpdate.isPending}
         disabled={isDisabled}

app/ui/lib/Modal.tsx

@@ -9,6 +9,7 @@ import * as Dialog from '@radix-ui/react-dialog'
 import { animated, useTransition } from '@react-spring/web'
 import cn from 'classnames'
 import React, { forwardRef, useId } from 'react'
+import type { MergeExclusive } from 'type-fest'
 
 import { Close12Icon } from '@oxide/design-system/icons/react'
 
@@ -125,6 +126,21 @@ Modal.Body = classed.div`py-2 overflow-y-auto`
 
 Modal.Section = classed.div`p-4 space-y-4 border-b border-secondary text-secondary last-of-type:border-none text-sans-md`
 
+/**
+ * `formId` and `onAction` are mutually exclusive. If there is a form associated,
+ * the button becomes a submit button for that form, and the action is assumed to
+ * be hooked up in the form's `onSubmit`.
+ */
+type FooterProps = {
+  children?: React.ReactNode
+  onDismiss: () => void
+  actionType?: 'primary' | 'danger'
+  actionText: React.ReactNode
+  actionLoading?: boolean
+  cancelText?: string
+  disabled?: boolean
+} & MergeExclusive<{ formId: string }, { onAction: () => void }>
+
 Modal.Footer = ({
   children,
   onDismiss,
@@ -134,23 +150,17 @@ Modal.Footer = ({
   actionLoading,
   cancelText,
   disabled = false,
-}: {
-  children?: React.ReactNode
-  onDismiss: () => void
-  onAction: () => void
-  actionType?: 'primary' | 'danger'
-  actionText: React.ReactNode
-  actionLoading?: boolean
-  cancelText?: string
-  disabled?: boolean
-}) => (
+  formId,
+}: FooterProps) => (
   <footer className="flex items-center justify-between border-t px-3 py-3 border-secondary">
     <div className="mr-4">{children}</div>
     <div className="space-x-2">
       <Button variant="secondary" size="sm" onClick={onDismiss}>
         {cancelText || 'Cancel'}
       </Button>
       <Button
+        type={formId ? 'submit' : 'button'}
+        form={formId}
         size="sm"
         variant={actionType}
         onClick={onAction}

test/e2e/utils.ts

@@ -118,15 +118,15 @@ export async function stopInstance(page: Page) {
  * Assert that a toast with text matching `expectedText` is visible.
  */
 export async function expectToast(page: Page, expectedText: string | RegExp) {
-  await expect(page.getByTestId('Toasts')).toHaveText(expectedText)
+  await expect(page.getByTestId('Toasts')).toContainText(expectedText)
   await closeToast(page)
 }
 
 /**
  * Assert that a toast with text matching `expectedText` is not visible.
  */
 export async function expectNoToast(page: Page, expectedText: string | RegExp) {
-  await expect(page.getByTestId('Toasts')).not.toHaveText(expectedText)
+  await expect(page.getByTestId('Toasts')).not.toContainText(expectedText)
 }
 
 /**