From cfa1972494a71f4b5956ed0cd42db8e094b71ef9 Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Thu, 7 Mar 2024 16:01:27 -0800
Subject: [PATCH 01/11] Make SideModal button copy consistent

---
 app/components/form/SideModalForm.tsx  | 12 +++++++-----
 app/forms/disk-attach.tsx              |  2 +-
 app/forms/disk-create.tsx              |  2 +-
 app/forms/firewall-rules-create.tsx    |  2 +-
 app/forms/firewall-rules-edit.tsx      |  3 +--
 app/forms/floating-ip-create.tsx       |  2 +-
 app/forms/floating-ip-edit.tsx         |  3 +--
 app/forms/idp/create.tsx               |  2 +-
 app/forms/idp/edit.tsx                 |  2 +-
 app/forms/image-edit.tsx               |  2 +-
 app/forms/image-from-snapshot.tsx      |  2 +-
 app/forms/image-upload.tsx             |  2 +-
 app/forms/ip-pool-create.tsx           |  2 +-
 app/forms/ip-pool-edit.tsx             |  3 +--
 app/forms/ip-pool-range-add.tsx        |  2 +-
 app/forms/network-interface-create.tsx |  2 +-
 app/forms/network-interface-edit.tsx   |  3 +--
 app/forms/project-access.tsx           |  5 ++---
 app/forms/project-create.tsx           |  2 +-
 app/forms/project-edit.tsx             |  3 +--
 app/forms/silo-access.tsx              |  5 ++---
 app/forms/silo-create.tsx              |  2 +-
 app/forms/snapshot-create.tsx          |  2 +-
 app/forms/ssh-key-create.tsx           |  2 +-
 app/forms/subnet-create.tsx            |  2 +-
 app/forms/subnet-edit.tsx              |  2 +-
 app/forms/vpc-create.tsx               |  2 +-
 app/forms/vpc-edit.tsx                 |  3 +--
 28 files changed, 36 insertions(+), 42 deletions(-)

diff --git a/app/components/form/SideModalForm.tsx b/app/components/form/SideModalForm.tsx
index c11a9ebd73..46bd9fd877 100644
--- a/app/components/form/SideModalForm.tsx
+++ b/app/components/form/SideModalForm.tsx
@@ -5,7 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
-import { useEffect, type ReactNode } from 'react'
+import { useEffect, useId, type ReactNode } from 'react'
 import type { FieldValues, UseFormReturn } from 'react-hook-form'
 import { useNavigationType } from 'react-router-dom'
 
@@ -15,8 +15,8 @@ import { Button } from '~/ui/lib/Button'
 import { SideModal } from '~/ui/lib/SideModal'
 
 type SideModalFormProps<TFieldValues extends FieldValues> = {
-  id: string
   form: UseFormReturn<TFieldValues>
+  formType: 'create' | 'edit'
   /**
    * A function that returns the fields.
    *
@@ -49,8 +49,8 @@ export function useShouldAnimateModal() {
 }
 
 export function SideModalForm<TFieldValues extends FieldValues>({
-  id,
   form,
+  formType,
   children,
   onDismiss,
   submitDisabled,
@@ -61,6 +61,7 @@ export function SideModalForm<TFieldValues extends FieldValues>({
   loading,
   subtitle,
 }: SideModalFormProps<TFieldValues>) {
+  const id = useId()
   const { isSubmitting } = form.formState
 
   useEffect(() => {
@@ -69,6 +70,7 @@ export function SideModalForm<TFieldValues extends FieldValues>({
       form.setError('name', { message: 'Name already exists' })
     }
   }, [submitError, form])
+  const defaultLabel = formType === 'edit' ? 'Save changes' : title
 
   return (
     <SideModal
@@ -106,12 +108,12 @@ export function SideModalForm<TFieldValues extends FieldValues>({
           <Button
             type="submit"
             size="sm"
-            disabled={!!submitDisabled}
+            disabled={!form.formState.isDirty || !!submitDisabled}
             disabledReason={submitDisabled}
             loading={loading || isSubmitting}
             form={id}
           >
-            {submitLabel || title}
+            {submitLabel || defaultLabel}
           </Button>
         )}
       </SideModal.Footer>
diff --git a/app/forms/disk-attach.tsx b/app/forms/disk-attach.tsx
index 60ec1f417c..1aba4b0c7f 100644
--- a/app/forms/disk-attach.tsx
+++ b/app/forms/disk-attach.tsx
@@ -46,9 +46,9 @@ export function AttachDiskSideModalForm({
 
   return (
     <SideModalForm
-      id="form-disk-attach"
       title="Attach Disk"
       form={form}
+      formType="create"
       onSubmit={onSubmit}
       loading={loading}
       submitError={submitError}
diff --git a/app/forms/disk-create.tsx b/app/forms/disk-create.tsx
index eb626cf722..05b2ea9b5a 100644
--- a/app/forms/disk-create.tsx
+++ b/app/forms/disk-create.tsx
@@ -100,9 +100,9 @@ export function CreateDiskSideModalForm({
 
   return (
     <SideModalForm
-      id="create-disk-form"
       title="Create Disk"
       form={form}
+      formType="create"
       onDismiss={() => onDismiss(navigate)}
       onSubmit={({ size, ...rest }) => {
         const body = { size: size * GiB, ...rest }
diff --git a/app/forms/firewall-rules-create.tsx b/app/forms/firewall-rules-create.tsx
index be4ec6dc00..8db1c35d19 100644
--- a/app/forms/firewall-rules-create.tsx
+++ b/app/forms/firewall-rules-create.tsx
@@ -504,9 +504,9 @@ export function CreateFirewallRuleForm({
 
   return (
     <SideModalForm
-      id="create-firewall-rule-form"
       title="Add firewall rule"
       form={form}
+      formType="create"
       onDismiss={onDismiss}
       onSubmit={(values) => {
         // TODO: this silently overwrites existing rules with the current name.
diff --git a/app/forms/firewall-rules-edit.tsx b/app/forms/firewall-rules-edit.tsx
index 5fe192f074..f949ba1024 100644
--- a/app/forms/firewall-rules-edit.tsx
+++ b/app/forms/firewall-rules-edit.tsx
@@ -65,9 +65,9 @@ export function EditFirewallRuleForm({
 
   return (
     <SideModalForm
-      id="create-firewall-rule-form"
       title="Edit rule"
       form={form}
+      formType="edit"
       onDismiss={onDismiss}
       onSubmit={(values) => {
         // note different filter logic from create: filter out the rule with the
@@ -86,7 +86,6 @@ export function EditFirewallRuleForm({
       // validateOnBlur
       loading={updateRules.isPending}
       submitError={updateRules.error}
-      submitLabel="Update rule"
     >
       <CommonFields error={updateRules.error} control={form.control} />
     </SideModalForm>
diff --git a/app/forms/floating-ip-create.tsx b/app/forms/floating-ip-create.tsx
index 4b138a5941..d2575d42f2 100644
--- a/app/forms/floating-ip-create.tsx
+++ b/app/forms/floating-ip-create.tsx
@@ -83,9 +83,9 @@ export function CreateFloatingIpSideModalForm() {
 
   return (
     <SideModalForm
-      id="create-floating-ip-form"
       title="Create Floating IP"
       form={form}
+      formType="create"
       onDismiss={() => navigate(pb.floatingIps(projectSelector))}
       onSubmit={({ ip, ...rest }) => {
         createFloatingIp.mutate({
diff --git a/app/forms/floating-ip-edit.tsx b/app/forms/floating-ip-edit.tsx
index cab8e03019..fa58117aed 100644
--- a/app/forms/floating-ip-edit.tsx
+++ b/app/forms/floating-ip-edit.tsx
@@ -55,8 +55,8 @@ export function EditFloatingIpSideModalForm() {
 
   return (
     <SideModalForm
-      id="edit-floating-ip-form"
       form={form}
+      formType="edit"
       title="Edit floating IP"
       onDismiss={onDismiss}
       onSubmit={({ name, description }) => {
@@ -68,7 +68,6 @@ export function EditFloatingIpSideModalForm() {
       }}
       loading={editFloatingIp.isPending}
       submitError={editFloatingIp.error}
-      submitLabel="Save changes"
     >
       <NameField name="name" control={form.control} />
       <DescriptionField name="description" control={form.control} />
diff --git a/app/forms/idp/create.tsx b/app/forms/idp/create.tsx
index d8b185109d..0d99580f01 100644
--- a/app/forms/idp/create.tsx
+++ b/app/forms/idp/create.tsx
@@ -61,8 +61,8 @@ export function CreateIdpSideModalForm() {
 
   return (
     <SideModalForm
-      id="create-idp-form"
       form={form}
+      formType="create"
       title="Create identity provider"
       onDismiss={onDismiss}
       onSubmit={async ({
diff --git a/app/forms/idp/edit.tsx b/app/forms/idp/edit.tsx
index b0865c01f9..190d767d2a 100644
--- a/app/forms/idp/edit.tsx
+++ b/app/forms/idp/edit.tsx
@@ -44,8 +44,8 @@ export function EditIdpSideModalForm() {
 
   return (
     <SideModalForm
-      id="edit-idp-form"
       form={form}
+      formType="edit"
       title="Identity provider"
       onDismiss={onDismiss}
       subtitle={
diff --git a/app/forms/image-edit.tsx b/app/forms/image-edit.tsx
index 92ad38bb86..2241dc3b61 100644
--- a/app/forms/image-edit.tsx
+++ b/app/forms/image-edit.tsx
@@ -72,8 +72,8 @@ export function EditImageSideModalForm({
 
   return (
     <SideModalForm
-      id="edit-project-image-form"
       form={form}
+      formType="edit"
       title={`${type} image`}
       onDismiss={() => navigate(dismissLink)}
       subtitle={
diff --git a/app/forms/image-from-snapshot.tsx b/app/forms/image-from-snapshot.tsx
index da0c61eb8c..799a9e8832 100644
--- a/app/forms/image-from-snapshot.tsx
+++ b/app/forms/image-from-snapshot.tsx
@@ -69,8 +69,8 @@ export function CreateImageFromSnapshotSideModalForm() {
 
   return (
     <SideModalForm
-      id="create-image-from-snapshot-form"
       form={form}
+      formType="create"
       title={`Create image from snapshot`}
       submitLabel="Create image"
       onDismiss={onDismiss}
diff --git a/app/forms/image-upload.tsx b/app/forms/image-upload.tsx
index 1969114be4..f5d55e051a 100644
--- a/app/forms/image-upload.tsx
+++ b/app/forms/image-upload.tsx
@@ -471,8 +471,8 @@ export function CreateImageSideModalForm() {
 
   return (
     <SideModalForm
-      id="upload-image-form"
       form={form}
+      formType="create"
       title="Upload image"
       onDismiss={backToImages}
       onSubmit={async (values) => {
diff --git a/app/forms/ip-pool-create.tsx b/app/forms/ip-pool-create.tsx
index af360cc8bc..342b2e02b7 100644
--- a/app/forms/ip-pool-create.tsx
+++ b/app/forms/ip-pool-create.tsx
@@ -39,8 +39,8 @@ export function CreateIpPoolSideModalForm() {
 
   return (
     <SideModalForm
-      id="create-pool-form"
       form={form}
+      formType="create"
       title="Create IP pool"
       onDismiss={onDismiss}
       onSubmit={({ name, description }) => {
diff --git a/app/forms/ip-pool-edit.tsx b/app/forms/ip-pool-edit.tsx
index 22407ad158..181f09f1e5 100644
--- a/app/forms/ip-pool-edit.tsx
+++ b/app/forms/ip-pool-edit.tsx
@@ -49,8 +49,8 @@ export function EditIpPoolSideModalForm() {
 
   return (
     <SideModalForm
-      id="edit-pool-form"
       form={form}
+      formType="edit"
       title="Edit IP pool"
       onDismiss={onDismiss}
       onSubmit={({ name, description }) => {
@@ -58,7 +58,6 @@ export function EditIpPoolSideModalForm() {
       }}
       loading={editPool.isPending}
       submitError={editPool.error}
-      submitLabel="Save changes"
     >
       <NameField name="name" control={form.control} />
       <DescriptionField name="description" control={form.control} />
diff --git a/app/forms/ip-pool-range-add.tsx b/app/forms/ip-pool-range-add.tsx
index 9c16060e1a..de2b0ef22a 100644
--- a/app/forms/ip-pool-range-add.tsx
+++ b/app/forms/ip-pool-range-add.tsx
@@ -77,8 +77,8 @@ export function IpPoolAddRangeSideModalForm() {
 
   return (
     <SideModalForm
-      id="add-ip-range-form"
       form={form}
+      formType="create"
       title="Add IP range"
       onDismiss={onDismiss}
       onSubmit={(body) => addRange.mutate({ path: { pool }, body })}
diff --git a/app/forms/network-interface-create.tsx b/app/forms/network-interface-create.tsx
index 19732a6009..be01e00334 100644
--- a/app/forms/network-interface-create.tsx
+++ b/app/forms/network-interface-create.tsx
@@ -52,9 +52,9 @@ export default function CreateNetworkInterfaceForm({
 
   return (
     <SideModalForm
-      id="create-network-interface-form"
       title="Add network interface"
       form={form}
+      formType="create"
       onDismiss={onDismiss}
       onSubmit={onSubmit}
       loading={loading}
diff --git a/app/forms/network-interface-edit.tsx b/app/forms/network-interface-edit.tsx
index 08011cc4d9..18011de5d4 100644
--- a/app/forms/network-interface-edit.tsx
+++ b/app/forms/network-interface-edit.tsx
@@ -42,9 +42,9 @@ export default function EditNetworkInterfaceForm({
 
   return (
     <SideModalForm
-      id="edit-network-interface-form"
       title="Edit network interface"
       form={form}
+      formType="edit"
       onDismiss={onDismiss}
       onSubmit={(body) => {
         const interfaceName = defaultValues.name
@@ -56,7 +56,6 @@ export default function EditNetworkInterfaceForm({
       }}
       loading={editNetworkInterface.isPending}
       submitError={editNetworkInterface.error}
-      submitLabel="Save changes"
     >
       <NameField name="name" control={form.control} />
       <DescriptionField name="description" control={form.control} />
diff --git a/app/forms/project-access.tsx b/app/forms/project-access.tsx
index 02f83b75e6..74e52cc772 100644
--- a/app/forms/project-access.tsx
+++ b/app/forms/project-access.tsx
@@ -42,8 +42,8 @@ export function ProjectAccessAddUserSideModal({ onDismiss, policy }: AddRoleModa
   return (
     <SideModalForm
       title="Add user or group"
-      id="project-access-add-user"
       form={form}
+      formType="create"
       onSubmit={({ identityId, roleName }) => {
         // can't happen because roleName is validated not to be '', but TS
         // wants to be sure
@@ -103,8 +103,8 @@ export function ProjectAccessEditUserSideModal({
     <SideModalForm
       // TODO: show user name in header or SOMEWHERE
       title="Change user role"
-      id="project-access-edit-user"
       form={form}
+      formType="edit"
       onSubmit={({ roleName }) => {
         updatePolicy.mutate({
           path: { project },
@@ -113,7 +113,6 @@ export function ProjectAccessEditUserSideModal({
       }}
       loading={updatePolicy.isPending}
       submitError={updatePolicy.error}
-      submitLabel="Update role"
       onDismiss={onDismiss}
     >
       <ListboxField
diff --git a/app/forms/project-create.tsx b/app/forms/project-create.tsx
index 33768db5f4..832056a6d2 100644
--- a/app/forms/project-create.tsx
+++ b/app/forms/project-create.tsx
@@ -42,8 +42,8 @@ export function CreateProjectSideModalForm() {
 
   return (
     <SideModalForm
-      id="create-project-form"
       form={form}
+      formType="create"
       title="Create project"
       onDismiss={onDismiss}
       onSubmit={({ name, description }) => {
diff --git a/app/forms/project-edit.tsx b/app/forms/project-edit.tsx
index 68985c4218..1e09b93fc6 100644
--- a/app/forms/project-edit.tsx
+++ b/app/forms/project-edit.tsx
@@ -55,8 +55,8 @@ export function EditProjectSideModalForm() {
 
   return (
     <SideModalForm
-      id="edit-project-form"
       form={form}
+      formType="edit"
       title="Edit project"
       onDismiss={onDismiss}
       onSubmit={({ name, description }) => {
@@ -64,7 +64,6 @@ export function EditProjectSideModalForm() {
       }}
       loading={editProject.isPending}
       submitError={editProject.error}
-      submitLabel="Save changes"
     >
       <NameField name="name" control={form.control} />
       <DescriptionField name="description" control={form.control} />
diff --git a/app/forms/silo-access.tsx b/app/forms/silo-access.tsx
index 9771ce5965..7903d668a2 100644
--- a/app/forms/silo-access.tsx
+++ b/app/forms/silo-access.tsx
@@ -41,8 +41,8 @@ export function SiloAccessAddUserSideModal({ onDismiss, policy }: AddRoleModalPr
     <SideModalForm
       onDismiss={onDismiss}
       title="Add user or group"
-      id="silo-access-add-user"
       form={form}
+      formType="create"
       onSubmit={({ identityId, roleName }) => {
         // can't happen because roleName is validated not to be '', but TS
         // wants to be sure
@@ -98,8 +98,8 @@ export function SiloAccessEditUserSideModal({
     <SideModalForm
       // TODO: show user name in header or SOMEWHERE
       title="Change user role"
-      id="silo-access-edit-user"
       form={form}
+      formType="edit"
       onSubmit={({ roleName }) => {
         updatePolicy.mutate({
           body: updateRole({ identityId, identityType, roleName }, policy),
@@ -107,7 +107,6 @@ export function SiloAccessEditUserSideModal({
       }}
       loading={updatePolicy.isPending}
       submitError={updatePolicy.error}
-      submitLabel="Update role"
       onDismiss={onDismiss}
     >
       <ListboxField
diff --git a/app/forms/silo-create.tsx b/app/forms/silo-create.tsx
index 2d86946c9e..8f67ac1006 100644
--- a/app/forms/silo-create.tsx
+++ b/app/forms/silo-create.tsx
@@ -66,9 +66,9 @@ export function CreateSiloSideModalForm() {
 
   return (
     <SideModalForm
-      id="create-silo-form"
       title="Create silo"
       form={form}
+      formType="create"
       onDismiss={onDismiss}
       onSubmit={({
         adminGroupName,
diff --git a/app/forms/snapshot-create.tsx b/app/forms/snapshot-create.tsx
index 2da1e8ba3e..0ee2f73f74 100644
--- a/app/forms/snapshot-create.tsx
+++ b/app/forms/snapshot-create.tsx
@@ -62,9 +62,9 @@ export function CreateSnapshotSideModalForm() {
 
   return (
     <SideModalForm
-      id="create-snapshot-form"
       title="Create Snapshot"
       form={form}
+      formType="create"
       onDismiss={onDismiss}
       onSubmit={(values) => {
         createSnapshot.mutate({ query: projectSelector, body: values })
diff --git a/app/forms/ssh-key-create.tsx b/app/forms/ssh-key-create.tsx
index 65f4332cc1..ee6e111479 100644
--- a/app/forms/ssh-key-create.tsx
+++ b/app/forms/ssh-key-create.tsx
@@ -44,9 +44,9 @@ export function CreateSSHKeySideModalForm({
 
   return (
     <SideModalForm
-      id="create-ssh-key-form"
       title="Add SSH key"
       form={form}
+      formType="create"
       onDismiss={handleDismiss}
       onSubmit={(body) => createSshKey.mutate({ body })}
       loading={createSshKey.isPending}
diff --git a/app/forms/subnet-create.tsx b/app/forms/subnet-create.tsx
index 4b74f87a14..3c1b4b35bf 100644
--- a/app/forms/subnet-create.tsx
+++ b/app/forms/subnet-create.tsx
@@ -39,9 +39,9 @@ export function CreateSubnetForm({ onDismiss }: CreateSubnetFormProps) {
 
   return (
     <SideModalForm
-      id="create-subnet-form"
       title="Create subnet"
       form={form}
+      formType="create"
       onDismiss={onDismiss}
       onSubmit={(body) => createSubnet.mutate({ query: vpcSelector, body })}
       loading={createSubnet.isPending}
diff --git a/app/forms/subnet-edit.tsx b/app/forms/subnet-edit.tsx
index 7810960097..98137a6c4f 100644
--- a/app/forms/subnet-edit.tsx
+++ b/app/forms/subnet-edit.tsx
@@ -35,10 +35,10 @@ export function EditSubnetForm({ onDismiss, editing }: EditSubnetFormProps) {
 
   return (
     <SideModalForm
-      id="edit-subnet-form"
       title="Edit subnet"
       onDismiss={onDismiss}
       form={form}
+      formType="edit"
       onSubmit={(body) => {
         updateSubnet.mutate({
           path: { subnet: editing.name },
diff --git a/app/forms/vpc-create.tsx b/app/forms/vpc-create.tsx
index da5db90b2d..a9e84ed4fb 100644
--- a/app/forms/vpc-create.tsx
+++ b/app/forms/vpc-create.tsx
@@ -47,7 +47,7 @@ export function CreateVpcSideModalForm() {
   return (
     <SideModalForm
       form={form}
-      id="create-vpc-form"
+      formType="create"
       title="Create VPC"
       onSubmit={(values) => createVpc.mutate({ query: projectSelector, body: values })}
       onDismiss={() => navigate(pb.vpcs(projectSelector))}
diff --git a/app/forms/vpc-edit.tsx b/app/forms/vpc-edit.tsx
index 7b2e5877e5..343544948d 100644
--- a/app/forms/vpc-edit.tsx
+++ b/app/forms/vpc-edit.tsx
@@ -56,9 +56,9 @@ export function EditVpcSideModalForm() {
 
   return (
     <SideModalForm
-      id="edit-vpc-form"
       title="Edit VPC"
       form={form}
+      formType="edit"
       onDismiss={onDismiss}
       onSubmit={({ name, description, dnsName }) => {
         editVpc.mutate({
@@ -68,7 +68,6 @@ export function EditVpcSideModalForm() {
         })
       }}
       loading={editVpc.isPending}
-      submitLabel="Save changes"
       submitError={editVpc.error}
     >
       <NameField name="name" control={form.control} />

From 52b14b31e184c76fe7bcbda4c6b3eceace1a44ca Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Thu, 7 Mar 2024 16:34:29 -0800
Subject: [PATCH 02/11] Fix test issues

---
 app/components/form/SideModalForm.tsx | 2 +-
 test/e2e/firewall-rules.e2e.ts        | 2 +-
 test/e2e/project-access.e2e.ts        | 2 +-
 test/e2e/silo-access.e2e.ts           | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/components/form/SideModalForm.tsx b/app/components/form/SideModalForm.tsx
index 46bd9fd877..3ad1ed8467 100644
--- a/app/components/form/SideModalForm.tsx
+++ b/app/components/form/SideModalForm.tsx
@@ -108,7 +108,7 @@ export function SideModalForm<TFieldValues extends FieldValues>({
           <Button
             type="submit"
             size="sm"
-            disabled={!form.formState.isDirty || !!submitDisabled}
+            disabled={!!submitDisabled}
             disabledReason={submitDisabled}
             loading={loading || isSubmitting}
             form={id}
diff --git a/test/e2e/firewall-rules.e2e.ts b/test/e2e/firewall-rules.e2e.ts
index ae376b7465..7fbb07cf7f 100644
--- a/test/e2e/firewall-rules.e2e.ts
+++ b/test/e2e/firewall-rules.e2e.ts
@@ -238,7 +238,7 @@ test('can update firewall rule', async ({ page }) => {
   await expect(page.locator('role=cell >> text="edit-filter-subnet"')).toBeVisible()
 
   // submit the form
-  await page.locator('text="Update rule"').click()
+  await page.locator('text="Save changes"').click()
 
   // modal closes again
   await expect(modal).toBeHidden()
diff --git a/test/e2e/project-access.e2e.ts b/test/e2e/project-access.e2e.ts
index a99a0db1a4..f5ea668965 100644
--- a/test/e2e/project-access.e2e.ts
+++ b/test/e2e/project-access.e2e.ts
@@ -83,7 +83,7 @@ test('Click through project access page', async ({ page }) => {
 
   await page.click('role=button[name*="Role"]')
   await page.click('role=option[name="Viewer"]')
-  await page.click('role=button[name="Update role"]')
+  await page.click('role=button[name="Save changes"]')
 
   await expectRowVisible(table, { Name: user4.display_name, 'Project role': 'viewer' })
 
diff --git a/test/e2e/silo-access.e2e.ts b/test/e2e/silo-access.e2e.ts
index 8ce9827175..6f9399642a 100644
--- a/test/e2e/silo-access.e2e.ts
+++ b/test/e2e/silo-access.e2e.ts
@@ -72,7 +72,7 @@ test('Click through silo access page', async ({ page }) => {
 
   await page.click('role=button[name*="Role"]')
   await page.click('role=option[name="Viewer"]')
-  await page.click('role=button[name="Update role"]')
+  await page.click('role=button[name="Save changes"]')
 
   await expectRowVisible(table, { Name: user3.display_name, 'Silo role': 'viewer' })
 

From 5234cafb77fd7c19ca65e64f5f27ebc9ec223ef9 Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Fri, 8 Mar 2024 15:12:10 -0800
Subject: [PATCH 03/11] add resourceName prop

---
 app/components/form/SideModalForm.tsx  | 24 ++++++++++++++++++++++--
 app/forms/disk-attach.tsx              |  1 +
 app/forms/disk-create.tsx              |  1 +
 app/forms/firewall-rules-create.tsx    |  1 +
 app/forms/firewall-rules-edit.tsx      |  1 +
 app/forms/floating-ip-create.tsx       |  1 +
 app/forms/floating-ip-edit.tsx         |  1 +
 app/forms/idp/create.tsx               |  1 +
 app/forms/idp/edit.tsx                 |  1 +
 app/forms/image-edit.tsx               |  1 +
 app/forms/image-from-snapshot.tsx      |  1 +
 app/forms/image-upload.tsx             |  1 +
 app/forms/ip-pool-create.tsx           |  1 +
 app/forms/ip-pool-edit.tsx             |  1 +
 app/forms/ip-pool-range-add.tsx        |  1 +
 app/forms/network-interface-create.tsx |  1 +
 app/forms/network-interface-edit.tsx   |  1 +
 app/forms/project-access.tsx           |  2 ++
 app/forms/project-create.tsx           |  1 +
 app/forms/project-edit.tsx             |  3 ++-
 app/forms/silo-access.tsx              |  2 ++
 app/forms/silo-create.tsx              |  1 +
 app/forms/snapshot-create.tsx          |  1 +
 app/forms/ssh-key-create.tsx           |  1 +
 app/forms/subnet-create.tsx            |  1 +
 app/forms/subnet-edit.tsx              |  1 +
 app/forms/vpc-create.tsx               |  1 +
 app/forms/vpc-edit.tsx                 |  1 +
 28 files changed, 52 insertions(+), 3 deletions(-)

diff --git a/app/components/form/SideModalForm.tsx b/app/components/form/SideModalForm.tsx
index 3ad1ed8467..2b90e5be71 100644
--- a/app/components/form/SideModalForm.tsx
+++ b/app/components/form/SideModalForm.tsx
@@ -14,6 +14,23 @@ import type { ApiError } from '@oxide/api'
 import { Button } from '~/ui/lib/Button'
 import { SideModal } from '~/ui/lib/SideModal'
 
+type ResourceName =
+  | 'disk'
+  | 'floating IP'
+  | 'identity provider'
+  | 'image'
+  | 'IP pool'
+  | 'IP range'
+  | 'network interface'
+  | 'project'
+  | 'role'
+  | 'rule'
+  | 'silo'
+  | 'snapshot'
+  | 'SSH key'
+  | 'subnet'
+  | 'VPC'
+
 type SideModalFormProps<TFieldValues extends FieldValues> = {
   form: UseFormReturn<TFieldValues>
   formType: 'create' | 'edit'
@@ -27,6 +44,7 @@ type SideModalFormProps<TFieldValues extends FieldValues> = {
    */
   children: ReactNode
   onDismiss: () => void
+  resourceName: ResourceName
   /** Must be provided with a reason describing why it's disabled */
   submitDisabled?: string
   /** Error from the API call */
@@ -53,6 +71,7 @@ export function SideModalForm<TFieldValues extends FieldValues>({
   formType,
   children,
   onDismiss,
+  resourceName,
   submitDisabled,
   submitError,
   title,
@@ -70,13 +89,14 @@ export function SideModalForm<TFieldValues extends FieldValues>({
       form.setError('name', { message: 'Name already exists' })
     }
   }, [submitError, form])
-  const defaultLabel = formType === 'edit' ? 'Save changes' : title
+  const defaultTitle = formType === 'edit' ? `Edit ${resourceName}` : title
+  const defaultLabel = formType === 'edit' ? `Update ${resourceName}` : submitLabel || title
 
   return (
     <SideModal
       onDismiss={onDismiss}
       isOpen
-      title={title}
+      title={defaultTitle}
       animate={useShouldAnimateModal()}
       subtitle={subtitle}
       errors={submitError ? [submitError.message] : []}
diff --git a/app/forms/disk-attach.tsx b/app/forms/disk-attach.tsx
index 1aba4b0c7f..a43163d1c3 100644
--- a/app/forms/disk-attach.tsx
+++ b/app/forms/disk-attach.tsx
@@ -47,6 +47,7 @@ export function AttachDiskSideModalForm({
   return (
     <SideModalForm
       title="Attach Disk"
+      resourceName="disk"
       form={form}
       formType="create"
       onSubmit={onSubmit}
diff --git a/app/forms/disk-create.tsx b/app/forms/disk-create.tsx
index 05b2ea9b5a..e8c37b034b 100644
--- a/app/forms/disk-create.tsx
+++ b/app/forms/disk-create.tsx
@@ -101,6 +101,7 @@ export function CreateDiskSideModalForm({
   return (
     <SideModalForm
       title="Create Disk"
+      resourceName="disk"
       form={form}
       formType="create"
       onDismiss={() => onDismiss(navigate)}
diff --git a/app/forms/firewall-rules-create.tsx b/app/forms/firewall-rules-create.tsx
index 8db1c35d19..6b8e6b1afe 100644
--- a/app/forms/firewall-rules-create.tsx
+++ b/app/forms/firewall-rules-create.tsx
@@ -505,6 +505,7 @@ export function CreateFirewallRuleForm({
   return (
     <SideModalForm
       title="Add firewall rule"
+      resourceName="rule"
       form={form}
       formType="create"
       onDismiss={onDismiss}
diff --git a/app/forms/firewall-rules-edit.tsx b/app/forms/firewall-rules-edit.tsx
index f949ba1024..f79e9920ef 100644
--- a/app/forms/firewall-rules-edit.tsx
+++ b/app/forms/firewall-rules-edit.tsx
@@ -66,6 +66,7 @@ export function EditFirewallRuleForm({
   return (
     <SideModalForm
       title="Edit rule"
+      resourceName="rule"
       form={form}
       formType="edit"
       onDismiss={onDismiss}
diff --git a/app/forms/floating-ip-create.tsx b/app/forms/floating-ip-create.tsx
index d2575d42f2..b4b84efaf5 100644
--- a/app/forms/floating-ip-create.tsx
+++ b/app/forms/floating-ip-create.tsx
@@ -84,6 +84,7 @@ export function CreateFloatingIpSideModalForm() {
   return (
     <SideModalForm
       title="Create Floating IP"
+      resourceName="floating IP"
       form={form}
       formType="create"
       onDismiss={() => navigate(pb.floatingIps(projectSelector))}
diff --git a/app/forms/floating-ip-edit.tsx b/app/forms/floating-ip-edit.tsx
index fa58117aed..f40bd4148f 100644
--- a/app/forms/floating-ip-edit.tsx
+++ b/app/forms/floating-ip-edit.tsx
@@ -56,6 +56,7 @@ export function EditFloatingIpSideModalForm() {
   return (
     <SideModalForm
       form={form}
+      resourceName="floating IP"
       formType="edit"
       title="Edit floating IP"
       onDismiss={onDismiss}
diff --git a/app/forms/idp/create.tsx b/app/forms/idp/create.tsx
index 0d99580f01..b8945b8be7 100644
--- a/app/forms/idp/create.tsx
+++ b/app/forms/idp/create.tsx
@@ -62,6 +62,7 @@ export function CreateIdpSideModalForm() {
   return (
     <SideModalForm
       form={form}
+      resourceName="identity provider"
       formType="create"
       title="Create identity provider"
       onDismiss={onDismiss}
diff --git a/app/forms/idp/edit.tsx b/app/forms/idp/edit.tsx
index 190d767d2a..e9ee4016c0 100644
--- a/app/forms/idp/edit.tsx
+++ b/app/forms/idp/edit.tsx
@@ -45,6 +45,7 @@ export function EditIdpSideModalForm() {
   return (
     <SideModalForm
       form={form}
+      resourceName="identity provider"
       formType="edit"
       title="Identity provider"
       onDismiss={onDismiss}
diff --git a/app/forms/image-edit.tsx b/app/forms/image-edit.tsx
index 2241dc3b61..26a1aec44e 100644
--- a/app/forms/image-edit.tsx
+++ b/app/forms/image-edit.tsx
@@ -73,6 +73,7 @@ export function EditImageSideModalForm({
   return (
     <SideModalForm
       form={form}
+      resourceName="image"
       formType="edit"
       title={`${type} image`}
       onDismiss={() => navigate(dismissLink)}
diff --git a/app/forms/image-from-snapshot.tsx b/app/forms/image-from-snapshot.tsx
index 799a9e8832..1fea9c3e12 100644
--- a/app/forms/image-from-snapshot.tsx
+++ b/app/forms/image-from-snapshot.tsx
@@ -70,6 +70,7 @@ export function CreateImageFromSnapshotSideModalForm() {
   return (
     <SideModalForm
       form={form}
+      resourceName="image"
       formType="create"
       title={`Create image from snapshot`}
       submitLabel="Create image"
diff --git a/app/forms/image-upload.tsx b/app/forms/image-upload.tsx
index f5d55e051a..79ec167632 100644
--- a/app/forms/image-upload.tsx
+++ b/app/forms/image-upload.tsx
@@ -472,6 +472,7 @@ export function CreateImageSideModalForm() {
   return (
     <SideModalForm
       form={form}
+      resourceName="image"
       formType="create"
       title="Upload image"
       onDismiss={backToImages}
diff --git a/app/forms/ip-pool-create.tsx b/app/forms/ip-pool-create.tsx
index 342b2e02b7..5aa37727ed 100644
--- a/app/forms/ip-pool-create.tsx
+++ b/app/forms/ip-pool-create.tsx
@@ -40,6 +40,7 @@ export function CreateIpPoolSideModalForm() {
   return (
     <SideModalForm
       form={form}
+      resourceName="IP pool"
       formType="create"
       title="Create IP pool"
       onDismiss={onDismiss}
diff --git a/app/forms/ip-pool-edit.tsx b/app/forms/ip-pool-edit.tsx
index 181f09f1e5..d94edbaa4e 100644
--- a/app/forms/ip-pool-edit.tsx
+++ b/app/forms/ip-pool-edit.tsx
@@ -50,6 +50,7 @@ export function EditIpPoolSideModalForm() {
   return (
     <SideModalForm
       form={form}
+      resourceName="IP pool"
       formType="edit"
       title="Edit IP pool"
       onDismiss={onDismiss}
diff --git a/app/forms/ip-pool-range-add.tsx b/app/forms/ip-pool-range-add.tsx
index de2b0ef22a..e61878215c 100644
--- a/app/forms/ip-pool-range-add.tsx
+++ b/app/forms/ip-pool-range-add.tsx
@@ -78,6 +78,7 @@ export function IpPoolAddRangeSideModalForm() {
   return (
     <SideModalForm
       form={form}
+      resourceName="IP range"
       formType="create"
       title="Add IP range"
       onDismiss={onDismiss}
diff --git a/app/forms/network-interface-create.tsx b/app/forms/network-interface-create.tsx
index be01e00334..455bde4baa 100644
--- a/app/forms/network-interface-create.tsx
+++ b/app/forms/network-interface-create.tsx
@@ -53,6 +53,7 @@ export default function CreateNetworkInterfaceForm({
   return (
     <SideModalForm
       title="Add network interface"
+      resourceName="network interface"
       form={form}
       formType="create"
       onDismiss={onDismiss}
diff --git a/app/forms/network-interface-edit.tsx b/app/forms/network-interface-edit.tsx
index 18011de5d4..fbdb60840c 100644
--- a/app/forms/network-interface-edit.tsx
+++ b/app/forms/network-interface-edit.tsx
@@ -43,6 +43,7 @@ export default function EditNetworkInterfaceForm({
   return (
     <SideModalForm
       title="Edit network interface"
+      resourceName="network interface"
       form={form}
       formType="edit"
       onDismiss={onDismiss}
diff --git a/app/forms/project-access.tsx b/app/forms/project-access.tsx
index 74e52cc772..0dfa68b691 100644
--- a/app/forms/project-access.tsx
+++ b/app/forms/project-access.tsx
@@ -42,6 +42,7 @@ export function ProjectAccessAddUserSideModal({ onDismiss, policy }: AddRoleModa
   return (
     <SideModalForm
       title="Add user or group"
+      resourceName="role"
       form={form}
       formType="create"
       onSubmit={({ identityId, roleName }) => {
@@ -103,6 +104,7 @@ export function ProjectAccessEditUserSideModal({
     <SideModalForm
       // TODO: show user name in header or SOMEWHERE
       title="Change user role"
+      resourceName="role"
       form={form}
       formType="edit"
       onSubmit={({ roleName }) => {
diff --git a/app/forms/project-create.tsx b/app/forms/project-create.tsx
index 832056a6d2..d1f0463866 100644
--- a/app/forms/project-create.tsx
+++ b/app/forms/project-create.tsx
@@ -43,6 +43,7 @@ export function CreateProjectSideModalForm() {
   return (
     <SideModalForm
       form={form}
+      resourceName="project"
       formType="create"
       title="Create project"
       onDismiss={onDismiss}
diff --git a/app/forms/project-edit.tsx b/app/forms/project-edit.tsx
index 1e09b93fc6..ba5889c4ae 100644
--- a/app/forms/project-edit.tsx
+++ b/app/forms/project-edit.tsx
@@ -55,9 +55,10 @@ export function EditProjectSideModalForm() {
 
   return (
     <SideModalForm
+      title="Edit project"
+      resourceName="project"
       form={form}
       formType="edit"
-      title="Edit project"
       onDismiss={onDismiss}
       onSubmit={({ name, description }) => {
         editProject.mutate({ path: projectSelector, body: { name, description } })
diff --git a/app/forms/silo-access.tsx b/app/forms/silo-access.tsx
index 7903d668a2..5764ce35b2 100644
--- a/app/forms/silo-access.tsx
+++ b/app/forms/silo-access.tsx
@@ -39,6 +39,7 @@ export function SiloAccessAddUserSideModal({ onDismiss, policy }: AddRoleModalPr
 
   return (
     <SideModalForm
+      resourceName="role"
       onDismiss={onDismiss}
       title="Add user or group"
       form={form}
@@ -98,6 +99,7 @@ export function SiloAccessEditUserSideModal({
     <SideModalForm
       // TODO: show user name in header or SOMEWHERE
       title="Change user role"
+      resourceName="role"
       form={form}
       formType="edit"
       onSubmit={({ roleName }) => {
diff --git a/app/forms/silo-create.tsx b/app/forms/silo-create.tsx
index 8f67ac1006..413b454a15 100644
--- a/app/forms/silo-create.tsx
+++ b/app/forms/silo-create.tsx
@@ -67,6 +67,7 @@ export function CreateSiloSideModalForm() {
   return (
     <SideModalForm
       title="Create silo"
+      resourceName="silo"
       form={form}
       formType="create"
       onDismiss={onDismiss}
diff --git a/app/forms/snapshot-create.tsx b/app/forms/snapshot-create.tsx
index 0ee2f73f74..80bb54bda5 100644
--- a/app/forms/snapshot-create.tsx
+++ b/app/forms/snapshot-create.tsx
@@ -63,6 +63,7 @@ export function CreateSnapshotSideModalForm() {
   return (
     <SideModalForm
       title="Create Snapshot"
+      resourceName="snapshot"
       form={form}
       formType="create"
       onDismiss={onDismiss}
diff --git a/app/forms/ssh-key-create.tsx b/app/forms/ssh-key-create.tsx
index ee6e111479..a752e7d81a 100644
--- a/app/forms/ssh-key-create.tsx
+++ b/app/forms/ssh-key-create.tsx
@@ -45,6 +45,7 @@ export function CreateSSHKeySideModalForm({
   return (
     <SideModalForm
       title="Add SSH key"
+      resourceName="SSH key"
       form={form}
       formType="create"
       onDismiss={handleDismiss}
diff --git a/app/forms/subnet-create.tsx b/app/forms/subnet-create.tsx
index 3c1b4b35bf..486c2abfdb 100644
--- a/app/forms/subnet-create.tsx
+++ b/app/forms/subnet-create.tsx
@@ -40,6 +40,7 @@ export function CreateSubnetForm({ onDismiss }: CreateSubnetFormProps) {
   return (
     <SideModalForm
       title="Create subnet"
+      resourceName="subnet"
       form={form}
       formType="create"
       onDismiss={onDismiss}
diff --git a/app/forms/subnet-edit.tsx b/app/forms/subnet-edit.tsx
index 98137a6c4f..bf3db27f58 100644
--- a/app/forms/subnet-edit.tsx
+++ b/app/forms/subnet-edit.tsx
@@ -36,6 +36,7 @@ export function EditSubnetForm({ onDismiss, editing }: EditSubnetFormProps) {
   return (
     <SideModalForm
       title="Edit subnet"
+      resourceName="subnet"
       onDismiss={onDismiss}
       form={form}
       formType="edit"
diff --git a/app/forms/vpc-create.tsx b/app/forms/vpc-create.tsx
index a9e84ed4fb..8b2ac231d8 100644
--- a/app/forms/vpc-create.tsx
+++ b/app/forms/vpc-create.tsx
@@ -47,6 +47,7 @@ export function CreateVpcSideModalForm() {
   return (
     <SideModalForm
       form={form}
+      resourceName="VPC"
       formType="create"
       title="Create VPC"
       onSubmit={(values) => createVpc.mutate({ query: projectSelector, body: values })}
diff --git a/app/forms/vpc-edit.tsx b/app/forms/vpc-edit.tsx
index 343544948d..8d2aa4b355 100644
--- a/app/forms/vpc-edit.tsx
+++ b/app/forms/vpc-edit.tsx
@@ -57,6 +57,7 @@ export function EditVpcSideModalForm() {
   return (
     <SideModalForm
       title="Edit VPC"
+      resourceName="VPC"
       form={form}
       formType="edit"
       onDismiss={onDismiss}

From 12a6f85f5aeaa7f327a611e261003c22d0a3cc98 Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Fri, 8 Mar 2024 15:15:25 -0800
Subject: [PATCH 04/11] use discriminated union to enforce parallel button
 label copy

---
 app/components/form/SideModalForm.tsx | 14 +++++++++++---
 app/forms/subnet-edit.tsx             |  1 -
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/app/components/form/SideModalForm.tsx b/app/components/form/SideModalForm.tsx
index 2b90e5be71..bad6da0b00 100644
--- a/app/components/form/SideModalForm.tsx
+++ b/app/components/form/SideModalForm.tsx
@@ -31,9 +31,18 @@ type ResourceName =
   | 'subnet'
   | 'VPC'
 
+type CreateFormProps = {
+  formType: 'create'
+  submitLabel?: string
+}
+
+type EditFormProps = {
+  formType: 'edit'
+  submitLabel?: never
+}
+
 type SideModalFormProps<TFieldValues extends FieldValues> = {
   form: UseFormReturn<TFieldValues>
-  formType: 'create' | 'edit'
   /**
    * A function that returns the fields.
    *
@@ -53,8 +62,7 @@ type SideModalFormProps<TFieldValues extends FieldValues> = {
   title: string
   subtitle?: ReactNode
   onSubmit?: (values: TFieldValues) => void
-  submitLabel?: string
-}
+} & (CreateFormProps | EditFormProps)
 
 /**
  * Only animate the modal in when we're navigating by a client-side click.
diff --git a/app/forms/subnet-edit.tsx b/app/forms/subnet-edit.tsx
index bf3db27f58..7dd0f8cc7c 100644
--- a/app/forms/subnet-edit.tsx
+++ b/app/forms/subnet-edit.tsx
@@ -49,7 +49,6 @@ export function EditSubnetForm({ onDismiss, editing }: EditSubnetFormProps) {
       }}
       loading={updateSubnet.isPending}
       submitError={updateSubnet.error}
-      submitLabel="Update subnet"
     >
       <NameField name="name" control={form.control} />
       <DescriptionField name="description" control={form.control} />

From b7f7fa2801d62d675d290fc71735c79697496d2a Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Fri, 8 Mar 2024 15:34:05 -0800
Subject: [PATCH 05/11] Add title to discriminated union types

---
 app/components/form/SideModalForm.tsx | 9 ++++++---
 app/forms/firewall-rules-edit.tsx     | 1 -
 app/forms/floating-ip-edit.tsx        | 1 -
 app/forms/idp/edit.tsx                | 1 -
 app/forms/image-edit.tsx              | 3 +--
 app/forms/ip-pool-edit.tsx            | 1 -
 app/forms/network-interface-edit.tsx  | 1 -
 app/forms/project-access.tsx          | 1 -
 app/forms/project-edit.tsx            | 1 -
 app/forms/silo-access.tsx             | 1 -
 app/forms/subnet-edit.tsx             | 1 -
 app/forms/vpc-edit.tsx                | 1 -
 12 files changed, 7 insertions(+), 15 deletions(-)

diff --git a/app/components/form/SideModalForm.tsx b/app/components/form/SideModalForm.tsx
index bad6da0b00..c5b7390f8b 100644
--- a/app/components/form/SideModalForm.tsx
+++ b/app/components/form/SideModalForm.tsx
@@ -23,9 +23,11 @@ type ResourceName =
   | 'IP range'
   | 'network interface'
   | 'project'
+  | 'project image'
   | 'role'
   | 'rule'
   | 'silo'
+  | 'silo image'
   | 'snapshot'
   | 'SSH key'
   | 'subnet'
@@ -34,11 +36,13 @@ type ResourceName =
 type CreateFormProps = {
   formType: 'create'
   submitLabel?: string
+  title?: string
 }
 
 type EditFormProps = {
   formType: 'edit'
   submitLabel?: never
+  title?: never
 }
 
 type SideModalFormProps<TFieldValues extends FieldValues> = {
@@ -59,7 +63,6 @@ type SideModalFormProps<TFieldValues extends FieldValues> = {
   /** Error from the API call */
   submitError: ApiError | null
   loading?: boolean
-  title: string
   subtitle?: ReactNode
   onSubmit?: (values: TFieldValues) => void
 } & (CreateFormProps | EditFormProps)
@@ -98,7 +101,7 @@ export function SideModalForm<TFieldValues extends FieldValues>({
     }
   }, [submitError, form])
   const defaultTitle = formType === 'edit' ? `Edit ${resourceName}` : title
-  const defaultLabel = formType === 'edit' ? `Update ${resourceName}` : submitLabel || title
+  const label = formType === 'edit' ? `Update ${resourceName}` : submitLabel || title
 
   return (
     <SideModal
@@ -141,7 +144,7 @@ export function SideModalForm<TFieldValues extends FieldValues>({
             loading={loading || isSubmitting}
             form={id}
           >
-            {submitLabel || defaultLabel}
+            {label}
           </Button>
         )}
       </SideModal.Footer>
diff --git a/app/forms/firewall-rules-edit.tsx b/app/forms/firewall-rules-edit.tsx
index f79e9920ef..44c662c8e1 100644
--- a/app/forms/firewall-rules-edit.tsx
+++ b/app/forms/firewall-rules-edit.tsx
@@ -65,7 +65,6 @@ export function EditFirewallRuleForm({
 
   return (
     <SideModalForm
-      title="Edit rule"
       resourceName="rule"
       form={form}
       formType="edit"
diff --git a/app/forms/floating-ip-edit.tsx b/app/forms/floating-ip-edit.tsx
index f40bd4148f..4201b992f6 100644
--- a/app/forms/floating-ip-edit.tsx
+++ b/app/forms/floating-ip-edit.tsx
@@ -58,7 +58,6 @@ export function EditFloatingIpSideModalForm() {
       form={form}
       resourceName="floating IP"
       formType="edit"
-      title="Edit floating IP"
       onDismiss={onDismiss}
       onSubmit={({ name, description }) => {
         editFloatingIp.mutate({
diff --git a/app/forms/idp/edit.tsx b/app/forms/idp/edit.tsx
index e9ee4016c0..2712214d06 100644
--- a/app/forms/idp/edit.tsx
+++ b/app/forms/idp/edit.tsx
@@ -47,7 +47,6 @@ export function EditIdpSideModalForm() {
       form={form}
       resourceName="identity provider"
       formType="edit"
-      title="Identity provider"
       onDismiss={onDismiss}
       subtitle={
         <ResourceLabel>
diff --git a/app/forms/image-edit.tsx b/app/forms/image-edit.tsx
index 26a1aec44e..2fe023c895 100644
--- a/app/forms/image-edit.tsx
+++ b/app/forms/image-edit.tsx
@@ -73,9 +73,8 @@ export function EditImageSideModalForm({
   return (
     <SideModalForm
       form={form}
-      resourceName="image"
+      resourceName={type === 'Project' ? 'project image' : 'silo image'}
       formType="edit"
-      title={`${type} image`}
       onDismiss={() => navigate(dismissLink)}
       subtitle={
         <ResourceLabel>
diff --git a/app/forms/ip-pool-edit.tsx b/app/forms/ip-pool-edit.tsx
index d94edbaa4e..b44df0ab5f 100644
--- a/app/forms/ip-pool-edit.tsx
+++ b/app/forms/ip-pool-edit.tsx
@@ -52,7 +52,6 @@ export function EditIpPoolSideModalForm() {
       form={form}
       resourceName="IP pool"
       formType="edit"
-      title="Edit IP pool"
       onDismiss={onDismiss}
       onSubmit={({ name, description }) => {
         editPool.mutate({ path: poolSelector, body: { name, description } })
diff --git a/app/forms/network-interface-edit.tsx b/app/forms/network-interface-edit.tsx
index fbdb60840c..6deacfc8f4 100644
--- a/app/forms/network-interface-edit.tsx
+++ b/app/forms/network-interface-edit.tsx
@@ -42,7 +42,6 @@ export default function EditNetworkInterfaceForm({
 
   return (
     <SideModalForm
-      title="Edit network interface"
       resourceName="network interface"
       form={form}
       formType="edit"
diff --git a/app/forms/project-access.tsx b/app/forms/project-access.tsx
index 0dfa68b691..85d8ef1be4 100644
--- a/app/forms/project-access.tsx
+++ b/app/forms/project-access.tsx
@@ -103,7 +103,6 @@ export function ProjectAccessEditUserSideModal({
   return (
     <SideModalForm
       // TODO: show user name in header or SOMEWHERE
-      title="Change user role"
       resourceName="role"
       form={form}
       formType="edit"
diff --git a/app/forms/project-edit.tsx b/app/forms/project-edit.tsx
index ba5889c4ae..561a728421 100644
--- a/app/forms/project-edit.tsx
+++ b/app/forms/project-edit.tsx
@@ -55,7 +55,6 @@ export function EditProjectSideModalForm() {
 
   return (
     <SideModalForm
-      title="Edit project"
       resourceName="project"
       form={form}
       formType="edit"
diff --git a/app/forms/silo-access.tsx b/app/forms/silo-access.tsx
index 5764ce35b2..c5a610f9ea 100644
--- a/app/forms/silo-access.tsx
+++ b/app/forms/silo-access.tsx
@@ -98,7 +98,6 @@ export function SiloAccessEditUserSideModal({
   return (
     <SideModalForm
       // TODO: show user name in header or SOMEWHERE
-      title="Change user role"
       resourceName="role"
       form={form}
       formType="edit"
diff --git a/app/forms/subnet-edit.tsx b/app/forms/subnet-edit.tsx
index 7dd0f8cc7c..030f6c4f98 100644
--- a/app/forms/subnet-edit.tsx
+++ b/app/forms/subnet-edit.tsx
@@ -35,7 +35,6 @@ export function EditSubnetForm({ onDismiss, editing }: EditSubnetFormProps) {
 
   return (
     <SideModalForm
-      title="Edit subnet"
       resourceName="subnet"
       onDismiss={onDismiss}
       form={form}
diff --git a/app/forms/vpc-edit.tsx b/app/forms/vpc-edit.tsx
index 8d2aa4b355..10fbc0d63e 100644
--- a/app/forms/vpc-edit.tsx
+++ b/app/forms/vpc-edit.tsx
@@ -56,7 +56,6 @@ export function EditVpcSideModalForm() {
 
   return (
     <SideModalForm
-      title="Edit VPC"
       resourceName="VPC"
       form={form}
       formType="edit"

From c0e835b6a05eef40f53c63295c60a8a9b1bf5ef5 Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Fri, 8 Mar 2024 16:42:39 -0800
Subject: [PATCH 06/11] Refactor and remove title from most create forms

---
 app/components/form/SideModalForm.tsx | 29 +++++----------------------
 app/forms/disk-create.tsx             |  1 -
 app/forms/floating-ip-create.tsx      |  1 -
 app/forms/idp/create.tsx              |  1 -
 app/forms/idp/edit.tsx                |  1 +
 app/forms/image-from-snapshot.tsx     |  2 +-
 app/forms/ip-pool-create.tsx          |  1 -
 app/forms/project-create.tsx          |  1 -
 app/forms/silo-create.tsx             |  1 -
 app/forms/snapshot-create.tsx         |  1 -
 app/forms/subnet-create.tsx           |  1 -
 app/forms/vpc-create.tsx              |  1 -
 test/e2e/click-everything.e2e.ts      |  4 ++--
 test/e2e/firewall-rules.e2e.ts        |  2 +-
 test/e2e/floating-ip-create.e2e.ts    |  8 ++++----
 test/e2e/floating-ip-update.e2e.ts    |  6 +++---
 test/e2e/instance/disks.e2e.ts        |  2 +-
 test/e2e/instance/networking.e2e.ts   |  2 +-
 test/e2e/networking.e2e.ts            |  4 ++--
 test/e2e/project-access.e2e.ts        |  4 ++--
 test/e2e/silo-access.e2e.ts           |  4 ++--
 21 files changed, 25 insertions(+), 52 deletions(-)

diff --git a/app/components/form/SideModalForm.tsx b/app/components/form/SideModalForm.tsx
index c5b7390f8b..00970ec67b 100644
--- a/app/components/form/SideModalForm.tsx
+++ b/app/components/form/SideModalForm.tsx
@@ -14,35 +14,14 @@ import type { ApiError } from '@oxide/api'
 import { Button } from '~/ui/lib/Button'
 import { SideModal } from '~/ui/lib/SideModal'
 
-type ResourceName =
-  | 'disk'
-  | 'floating IP'
-  | 'identity provider'
-  | 'image'
-  | 'IP pool'
-  | 'IP range'
-  | 'network interface'
-  | 'project'
-  | 'project image'
-  | 'role'
-  | 'rule'
-  | 'silo'
-  | 'silo image'
-  | 'snapshot'
-  | 'SSH key'
-  | 'subnet'
-  | 'VPC'
-
 type CreateFormProps = {
   formType: 'create'
   submitLabel?: string
-  title?: string
 }
 
 type EditFormProps = {
   formType: 'edit'
   submitLabel?: never
-  title?: never
 }
 
 type SideModalFormProps<TFieldValues extends FieldValues> = {
@@ -57,12 +36,13 @@ type SideModalFormProps<TFieldValues extends FieldValues> = {
    */
   children: ReactNode
   onDismiss: () => void
-  resourceName: ResourceName
+  resourceName: string
   /** Must be provided with a reason describing why it's disabled */
   submitDisabled?: string
   /** Error from the API call */
   submitError: ApiError | null
   loading?: boolean
+  title?: string
   subtitle?: ReactNode
   onSubmit?: (values: TFieldValues) => void
 } & (CreateFormProps | EditFormProps)
@@ -100,8 +80,9 @@ export function SideModalForm<TFieldValues extends FieldValues>({
       form.setError('name', { message: 'Name already exists' })
     }
   }, [submitError, form])
-  const defaultTitle = formType === 'edit' ? `Edit ${resourceName}` : title
-  const label = formType === 'edit' ? `Update ${resourceName}` : submitLabel || title
+  const defaultTitle = title || `${formType === 'edit' ? 'Edit' : 'Create'} ${resourceName}`
+  const label =
+    submitLabel || title || `${formType === 'edit' ? 'Update' : 'Create'} ${resourceName}`
 
   return (
     <SideModal
diff --git a/app/forms/disk-create.tsx b/app/forms/disk-create.tsx
index e8c37b034b..fc54afb290 100644
--- a/app/forms/disk-create.tsx
+++ b/app/forms/disk-create.tsx
@@ -100,7 +100,6 @@ export function CreateDiskSideModalForm({
 
   return (
     <SideModalForm
-      title="Create Disk"
       resourceName="disk"
       form={form}
       formType="create"
diff --git a/app/forms/floating-ip-create.tsx b/app/forms/floating-ip-create.tsx
index b4b84efaf5..5c3620defa 100644
--- a/app/forms/floating-ip-create.tsx
+++ b/app/forms/floating-ip-create.tsx
@@ -83,7 +83,6 @@ export function CreateFloatingIpSideModalForm() {
 
   return (
     <SideModalForm
-      title="Create Floating IP"
       resourceName="floating IP"
       form={form}
       formType="create"
diff --git a/app/forms/idp/create.tsx b/app/forms/idp/create.tsx
index b8945b8be7..f675d8102d 100644
--- a/app/forms/idp/create.tsx
+++ b/app/forms/idp/create.tsx
@@ -64,7 +64,6 @@ export function CreateIdpSideModalForm() {
       form={form}
       resourceName="identity provider"
       formType="create"
-      title="Create identity provider"
       onDismiss={onDismiss}
       onSubmit={async ({
         signingKeypair,
diff --git a/app/forms/idp/edit.tsx b/app/forms/idp/edit.tsx
index 2712214d06..ec2579b36f 100644
--- a/app/forms/idp/edit.tsx
+++ b/app/forms/idp/edit.tsx
@@ -46,6 +46,7 @@ export function EditIdpSideModalForm() {
     <SideModalForm
       form={form}
       resourceName="identity provider"
+      title="Identity provider"
       formType="edit"
       onDismiss={onDismiss}
       subtitle={
diff --git a/app/forms/image-from-snapshot.tsx b/app/forms/image-from-snapshot.tsx
index 1fea9c3e12..8ef86aa39b 100644
--- a/app/forms/image-from-snapshot.tsx
+++ b/app/forms/image-from-snapshot.tsx
@@ -72,7 +72,7 @@ export function CreateImageFromSnapshotSideModalForm() {
       form={form}
       resourceName="image"
       formType="create"
-      title={`Create image from snapshot`}
+      title="Create image from snapshot"
       submitLabel="Create image"
       onDismiss={onDismiss}
       onSubmit={(body) =>
diff --git a/app/forms/ip-pool-create.tsx b/app/forms/ip-pool-create.tsx
index 5aa37727ed..ebfab20d86 100644
--- a/app/forms/ip-pool-create.tsx
+++ b/app/forms/ip-pool-create.tsx
@@ -42,7 +42,6 @@ export function CreateIpPoolSideModalForm() {
       form={form}
       resourceName="IP pool"
       formType="create"
-      title="Create IP pool"
       onDismiss={onDismiss}
       onSubmit={({ name, description }) => {
         createPool.mutate({ body: { name, description } })
diff --git a/app/forms/project-create.tsx b/app/forms/project-create.tsx
index d1f0463866..1c74429fe7 100644
--- a/app/forms/project-create.tsx
+++ b/app/forms/project-create.tsx
@@ -45,7 +45,6 @@ export function CreateProjectSideModalForm() {
       form={form}
       resourceName="project"
       formType="create"
-      title="Create project"
       onDismiss={onDismiss}
       onSubmit={({ name, description }) => {
         createProject.mutate({ body: { name, description } })
diff --git a/app/forms/silo-create.tsx b/app/forms/silo-create.tsx
index 413b454a15..c9f0caaf37 100644
--- a/app/forms/silo-create.tsx
+++ b/app/forms/silo-create.tsx
@@ -66,7 +66,6 @@ export function CreateSiloSideModalForm() {
 
   return (
     <SideModalForm
-      title="Create silo"
       resourceName="silo"
       form={form}
       formType="create"
diff --git a/app/forms/snapshot-create.tsx b/app/forms/snapshot-create.tsx
index 80bb54bda5..f9432281b5 100644
--- a/app/forms/snapshot-create.tsx
+++ b/app/forms/snapshot-create.tsx
@@ -62,7 +62,6 @@ export function CreateSnapshotSideModalForm() {
 
   return (
     <SideModalForm
-      title="Create Snapshot"
       resourceName="snapshot"
       form={form}
       formType="create"
diff --git a/app/forms/subnet-create.tsx b/app/forms/subnet-create.tsx
index 486c2abfdb..c46671755f 100644
--- a/app/forms/subnet-create.tsx
+++ b/app/forms/subnet-create.tsx
@@ -39,7 +39,6 @@ export function CreateSubnetForm({ onDismiss }: CreateSubnetFormProps) {
 
   return (
     <SideModalForm
-      title="Create subnet"
       resourceName="subnet"
       form={form}
       formType="create"
diff --git a/app/forms/vpc-create.tsx b/app/forms/vpc-create.tsx
index 8b2ac231d8..18200b10a7 100644
--- a/app/forms/vpc-create.tsx
+++ b/app/forms/vpc-create.tsx
@@ -49,7 +49,6 @@ export function CreateVpcSideModalForm() {
       form={form}
       resourceName="VPC"
       formType="create"
-      title="Create VPC"
       onSubmit={(values) => createVpc.mutate({ query: projectSelector, body: values })}
       onDismiss={() => navigate(pb.vpcs(projectSelector))}
       loading={createVpc.isPending}
diff --git a/test/e2e/click-everything.e2e.ts b/test/e2e/click-everything.e2e.ts
index 50bfae8091..8db2064c09 100644
--- a/test/e2e/click-everything.e2e.ts
+++ b/test/e2e/click-everything.e2e.ts
@@ -48,12 +48,12 @@ test('Click through disks page', async ({ page }) => {
   // Create disk form
   await page.click('role=link[name="New Disk"]')
   await expectVisible(page, [
-    'role=heading[name*="Create Disk"]',
+    'role=heading[name*="Create disk"]',
     'role=textbox[name="Name"]',
     'role=textbox[name="Description"]',
     'role=radiogroup[name="Block size (Bytes)"]',
     'role=textbox[name="Size (GiB)"]',
-    'role=button[name="Create Disk"]',
+    'role=button[name="Create disk"]',
   ])
   await page.goBack()
 })
diff --git a/test/e2e/firewall-rules.e2e.ts b/test/e2e/firewall-rules.e2e.ts
index 7fbb07cf7f..ae376b7465 100644
--- a/test/e2e/firewall-rules.e2e.ts
+++ b/test/e2e/firewall-rules.e2e.ts
@@ -238,7 +238,7 @@ test('can update firewall rule', async ({ page }) => {
   await expect(page.locator('role=cell >> text="edit-filter-subnet"')).toBeVisible()
 
   // submit the form
-  await page.locator('text="Save changes"').click()
+  await page.locator('text="Update rule"').click()
 
   // modal closes again
   await expect(modal).toBeHidden()
diff --git a/test/e2e/floating-ip-create.e2e.ts b/test/e2e/floating-ip-create.e2e.ts
index 35a821c6ab..04d902696e 100644
--- a/test/e2e/floating-ip-create.e2e.ts
+++ b/test/e2e/floating-ip-create.e2e.ts
@@ -22,11 +22,11 @@ test('can create a floating IP', async ({ page }) => {
   await page.locator('text="New Floating IP"').click()
 
   await expectVisible(page, [
-    'role=heading[name*="Create Floating IP"]',
+    'role=heading[name*="Create floating IP"]',
     'role=textbox[name="Name"]',
     'role=textbox[name="Description"]',
     'role=button[name="Advanced"]',
-    'role=button[name="Create Floating IP"]',
+    'role=button[name="Create floating IP"]',
   ])
 
   const floatingIpName = 'my-floating-ip'
@@ -51,14 +51,14 @@ test('can create a floating IP', async ({ page }) => {
   await poolListbox.click()
   await page.getByRole('option', { name: 'ip-pool-1' }).click()
   await ipTextbox.fill('256.256.256.256')
-  await page.getByRole('button', { name: 'Create Floating IP' }).click()
+  await page.getByRole('button', { name: 'Create floating IP' }).click()
   await expect(page.getByText('Not a valid IP address').first()).toBeVisible()
 
   // correct IP and submit
   await ipTextbox.clear()
   await ipTextbox.fill('12.34.56.78')
 
-  await page.getByRole('button', { name: 'Create Floating IP' }).click()
+  await page.getByRole('button', { name: 'Create floating IP' }).click()
 
   await expect(page).toHaveURL(floatingIpsPage)
 
diff --git a/test/e2e/floating-ip-update.e2e.ts b/test/e2e/floating-ip-update.e2e.ts
index 0453358eeb..68bcf0d05d 100644
--- a/test/e2e/floating-ip-update.e2e.ts
+++ b/test/e2e/floating-ip-update.e2e.ts
@@ -16,7 +16,7 @@ const expectedFormElements = [
   'role=heading[name*="Edit floating IP"]',
   'role=textbox[name="Name"]',
   'role=textbox[name="Description"]',
-  'role=button[name="Save changes"]',
+  'role=button[name="Update floating IP"]',
 ]
 
 test('can update a floating IP', async ({ page }) => {
@@ -26,7 +26,7 @@ test('can update a floating IP', async ({ page }) => {
 
   await page.fill('input[name=name]', updatedName)
   await page.getByRole('textbox', { name: 'Description' }).fill(updatedDescription)
-  await page.getByRole('button', { name: 'Save changes' }).click()
+  await page.getByRole('button', { name: 'Update floating IP' }).click()
   await expect(page).toHaveURL(floatingIpsPage)
   await expectRowVisible(page.getByRole('table'), {
     name: updatedName,
@@ -41,7 +41,7 @@ test('can update *just* the floating IP description', async ({ page }) => {
   await expectVisible(page, expectedFormElements)
 
   await page.getByRole('textbox', { name: 'Description' }).fill(updatedDescription)
-  await page.getByRole('button', { name: 'Save changes' }).click()
+  await page.getByRole('button', { name: 'Update floating IP' }).click()
   await expect(page).toHaveURL(floatingIpsPage)
   await expectRowVisible(page.getByRole('table'), {
     name: originalName,
diff --git a/test/e2e/instance/disks.e2e.ts b/test/e2e/instance/disks.e2e.ts
index 98e377162d..a9d4279f0e 100644
--- a/test/e2e/instance/disks.e2e.ts
+++ b/test/e2e/instance/disks.e2e.ts
@@ -46,7 +46,7 @@ test('Attach disk', async ({ page }) => {
     'role=textbox[name="Description"]',
     'role=radiogroup[name="Block size (Bytes)"]',
     'role=textbox[name="Size (GiB)"]',
-    'role=button[name="Create Disk"]',
+    'role=button[name="Create disk"]',
   ])
   await page.click('role=button[name="Cancel"]')
 
diff --git a/test/e2e/instance/networking.e2e.ts b/test/e2e/instance/networking.e2e.ts
index fe0ccba638..43ef5064de 100644
--- a/test/e2e/instance/networking.e2e.ts
+++ b/test/e2e/instance/networking.e2e.ts
@@ -66,7 +66,7 @@ test('Instance networking tab', async ({ page }) => {
   // Make an edit to the network interface
   await clickRowAction(page, 'nic-2', 'Edit')
   await page.fill('role=textbox[name="Name"]', 'nic-3')
-  await page.click('role=button[name="Save changes"]')
+  await page.click('role=button[name="Update network interface"]')
   await expectNotVisible(page, ['role=cell[name="nic-2"]'])
   const nic3 = page.getByRole('cell', { name: 'nic-3' })
   await expect(nic3).toBeVisible()
diff --git a/test/e2e/networking.e2e.ts b/test/e2e/networking.e2e.ts
index 999ef18907..e2f6637302 100644
--- a/test/e2e/networking.e2e.ts
+++ b/test/e2e/networking.e2e.ts
@@ -40,10 +40,10 @@ test('Create and edit VPC', async ({ page }) => {
     'role=textbox[name="Name"]',
     'role=textbox[name="Description"]',
     'role=textbox[name="DNS name"]',
-    'role=button[name="Save changes"]',
+    'role=button[name="Update VPC"]',
   ])
   await page.fill('role=textbox[name="Name"]', 'new-vpc')
-  await page.click('role=button[name="Save changes"]')
+  await page.click('role=button[name="Update VPC"]')
 
   // Close toast, it holds up the test for some reason
   await page.click('role=button[name="Dismiss notification"]')
diff --git a/test/e2e/project-access.e2e.ts b/test/e2e/project-access.e2e.ts
index f5ea668965..877fc7d709 100644
--- a/test/e2e/project-access.e2e.ts
+++ b/test/e2e/project-access.e2e.ts
@@ -78,12 +78,12 @@ test('Click through project access page', async ({ page }) => {
     .click()
   await page.click('role=menuitem[name="Change role"]')
 
-  await expectVisible(page, ['role=heading[name*="Change user role"]'])
+  await expectVisible(page, ['role=heading[name*="Edit role"]'])
   await expectVisible(page, ['button:has-text("Collaborator")'])
 
   await page.click('role=button[name*="Role"]')
   await page.click('role=option[name="Viewer"]')
-  await page.click('role=button[name="Save changes"]')
+  await page.click('role=button[name="Update role"]')
 
   await expectRowVisible(table, { Name: user4.display_name, 'Project role': 'viewer' })
 
diff --git a/test/e2e/silo-access.e2e.ts b/test/e2e/silo-access.e2e.ts
index 6f9399642a..833dcce6d9 100644
--- a/test/e2e/silo-access.e2e.ts
+++ b/test/e2e/silo-access.e2e.ts
@@ -67,12 +67,12 @@ test('Click through silo access page', async ({ page }) => {
     .click()
   await page.click('role=menuitem[name="Change role"]')
 
-  await expectVisible(page, ['role=heading[name*="Change user role"]'])
+  await expectVisible(page, ['role=heading[name*="Edit role"]'])
   await expectVisible(page, ['button:has-text("Collaborator")'])
 
   await page.click('role=button[name*="Role"]')
   await page.click('role=option[name="Viewer"]')
-  await page.click('role=button[name="Save changes"]')
+  await page.click('role=button[name="Update role"]')
 
   await expectRowVisible(table, { Name: user3.display_name, 'Silo role': 'viewer' })
 

From 6cc0a63afb0f74bd43949ab11818ab333e2dc430 Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Fri, 8 Mar 2024 16:53:01 -0800
Subject: [PATCH 07/11] Refactor

---
 app/components/form/SideModalForm.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/app/components/form/SideModalForm.tsx b/app/components/form/SideModalForm.tsx
index 00970ec67b..8a9b04eb8e 100644
--- a/app/components/form/SideModalForm.tsx
+++ b/app/components/form/SideModalForm.tsx
@@ -80,15 +80,12 @@ export function SideModalForm<TFieldValues extends FieldValues>({
       form.setError('name', { message: 'Name already exists' })
     }
   }, [submitError, form])
-  const defaultTitle = title || `${formType === 'edit' ? 'Edit' : 'Create'} ${resourceName}`
-  const label =
-    submitLabel || title || `${formType === 'edit' ? 'Update' : 'Create'} ${resourceName}`
 
   return (
     <SideModal
       onDismiss={onDismiss}
       isOpen
-      title={defaultTitle}
+      title={title || `${formType === 'edit' ? 'Edit' : 'Create'} ${resourceName}`}
       animate={useShouldAnimateModal()}
       subtitle={subtitle}
       errors={submitError ? [submitError.message] : []}
@@ -125,7 +122,9 @@ export function SideModalForm<TFieldValues extends FieldValues>({
             loading={loading || isSubmitting}
             form={id}
           >
-            {label}
+            {submitLabel ||
+              title ||
+              `${formType === 'edit' ? 'Update' : 'Create'} ${resourceName}`}
           </Button>
         )}
       </SideModal.Footer>

From e83dd480674fd454385f9226564b66041b799a96 Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Fri, 8 Mar 2024 17:07:14 -0800
Subject: [PATCH 08/11] Reorder props for easier legibility

---
 app/forms/disk-attach.tsx              | 4 ++--
 app/forms/disk-create.tsx              | 2 +-
 app/forms/firewall-rules-create.tsx    | 4 ++--
 app/forms/firewall-rules-edit.tsx      | 2 +-
 app/forms/floating-ip-create.tsx       | 2 +-
 app/forms/floating-ip-edit.tsx         | 2 +-
 app/forms/idp/create.tsx               | 2 +-
 app/forms/idp/edit.tsx                 | 2 +-
 app/forms/image-edit.tsx               | 2 +-
 app/forms/image-from-snapshot.tsx      | 2 +-
 app/forms/image-upload.tsx             | 2 +-
 app/forms/ip-pool-create.tsx           | 2 +-
 app/forms/ip-pool-edit.tsx             | 2 +-
 app/forms/ip-pool-range-add.tsx        | 2 +-
 app/forms/network-interface-create.tsx | 4 ++--
 app/forms/network-interface-edit.tsx   | 2 +-
 app/forms/project-access.tsx           | 2 +-
 app/forms/project-create.tsx           | 2 +-
 app/forms/project-edit.tsx             | 2 +-
 app/forms/silo-access.tsx              | 8 ++++----
 app/forms/silo-create.tsx              | 2 +-
 app/forms/snapshot-create.tsx          | 2 +-
 app/forms/ssh-key-create.tsx           | 4 ++--
 app/forms/subnet-create.tsx            | 2 +-
 app/forms/subnet-edit.tsx              | 4 ++--
 app/forms/vpc-create.tsx               | 2 +-
 app/forms/vpc-edit.tsx                 | 2 +-
 27 files changed, 35 insertions(+), 35 deletions(-)

diff --git a/app/forms/disk-attach.tsx b/app/forms/disk-attach.tsx
index a43163d1c3..94f75e86ef 100644
--- a/app/forms/disk-attach.tsx
+++ b/app/forms/disk-attach.tsx
@@ -46,10 +46,10 @@ export function AttachDiskSideModalForm({
 
   return (
     <SideModalForm
-      title="Attach Disk"
-      resourceName="disk"
       form={form}
       formType="create"
+      resourceName="disk"
+      title="Attach Disk"
       onSubmit={onSubmit}
       loading={loading}
       submitError={submitError}
diff --git a/app/forms/disk-create.tsx b/app/forms/disk-create.tsx
index fc54afb290..06e55ef27c 100644
--- a/app/forms/disk-create.tsx
+++ b/app/forms/disk-create.tsx
@@ -100,9 +100,9 @@ export function CreateDiskSideModalForm({
 
   return (
     <SideModalForm
-      resourceName="disk"
       form={form}
       formType="create"
+      resourceName="disk"
       onDismiss={() => onDismiss(navigate)}
       onSubmit={({ size, ...rest }) => {
         const body = { size: size * GiB, ...rest }
diff --git a/app/forms/firewall-rules-create.tsx b/app/forms/firewall-rules-create.tsx
index 6b8e6b1afe..43afafdf1e 100644
--- a/app/forms/firewall-rules-create.tsx
+++ b/app/forms/firewall-rules-create.tsx
@@ -504,10 +504,10 @@ export function CreateFirewallRuleForm({
 
   return (
     <SideModalForm
-      title="Add firewall rule"
-      resourceName="rule"
       form={form}
       formType="create"
+      resourceName="rule"
+      title="Add firewall rule"
       onDismiss={onDismiss}
       onSubmit={(values) => {
         // TODO: this silently overwrites existing rules with the current name.
diff --git a/app/forms/firewall-rules-edit.tsx b/app/forms/firewall-rules-edit.tsx
index 44c662c8e1..e23428bdc2 100644
--- a/app/forms/firewall-rules-edit.tsx
+++ b/app/forms/firewall-rules-edit.tsx
@@ -65,9 +65,9 @@ export function EditFirewallRuleForm({
 
   return (
     <SideModalForm
-      resourceName="rule"
       form={form}
       formType="edit"
+      resourceName="rule"
       onDismiss={onDismiss}
       onSubmit={(values) => {
         // note different filter logic from create: filter out the rule with the
diff --git a/app/forms/floating-ip-create.tsx b/app/forms/floating-ip-create.tsx
index 5c3620defa..0ad8e21545 100644
--- a/app/forms/floating-ip-create.tsx
+++ b/app/forms/floating-ip-create.tsx
@@ -83,9 +83,9 @@ export function CreateFloatingIpSideModalForm() {
 
   return (
     <SideModalForm
-      resourceName="floating IP"
       form={form}
       formType="create"
+      resourceName="floating IP"
       onDismiss={() => navigate(pb.floatingIps(projectSelector))}
       onSubmit={({ ip, ...rest }) => {
         createFloatingIp.mutate({
diff --git a/app/forms/floating-ip-edit.tsx b/app/forms/floating-ip-edit.tsx
index 4201b992f6..94b568adfa 100644
--- a/app/forms/floating-ip-edit.tsx
+++ b/app/forms/floating-ip-edit.tsx
@@ -56,8 +56,8 @@ export function EditFloatingIpSideModalForm() {
   return (
     <SideModalForm
       form={form}
-      resourceName="floating IP"
       formType="edit"
+      resourceName="floating IP"
       onDismiss={onDismiss}
       onSubmit={({ name, description }) => {
         editFloatingIp.mutate({
diff --git a/app/forms/idp/create.tsx b/app/forms/idp/create.tsx
index f675d8102d..8bed8ea2db 100644
--- a/app/forms/idp/create.tsx
+++ b/app/forms/idp/create.tsx
@@ -62,8 +62,8 @@ export function CreateIdpSideModalForm() {
   return (
     <SideModalForm
       form={form}
-      resourceName="identity provider"
       formType="create"
+      resourceName="identity provider"
       onDismiss={onDismiss}
       onSubmit={async ({
         signingKeypair,
diff --git a/app/forms/idp/edit.tsx b/app/forms/idp/edit.tsx
index ec2579b36f..0ab889d0f0 100644
--- a/app/forms/idp/edit.tsx
+++ b/app/forms/idp/edit.tsx
@@ -45,9 +45,9 @@ export function EditIdpSideModalForm() {
   return (
     <SideModalForm
       form={form}
+      formType="edit"
       resourceName="identity provider"
       title="Identity provider"
-      formType="edit"
       onDismiss={onDismiss}
       subtitle={
         <ResourceLabel>
diff --git a/app/forms/image-edit.tsx b/app/forms/image-edit.tsx
index 2fe023c895..1871960436 100644
--- a/app/forms/image-edit.tsx
+++ b/app/forms/image-edit.tsx
@@ -73,8 +73,8 @@ export function EditImageSideModalForm({
   return (
     <SideModalForm
       form={form}
-      resourceName={type === 'Project' ? 'project image' : 'silo image'}
       formType="edit"
+      resourceName={type === 'Project' ? 'project image' : 'silo image'}
       onDismiss={() => navigate(dismissLink)}
       subtitle={
         <ResourceLabel>
diff --git a/app/forms/image-from-snapshot.tsx b/app/forms/image-from-snapshot.tsx
index 8ef86aa39b..14126fc975 100644
--- a/app/forms/image-from-snapshot.tsx
+++ b/app/forms/image-from-snapshot.tsx
@@ -70,8 +70,8 @@ export function CreateImageFromSnapshotSideModalForm() {
   return (
     <SideModalForm
       form={form}
-      resourceName="image"
       formType="create"
+      resourceName="image"
       title="Create image from snapshot"
       submitLabel="Create image"
       onDismiss={onDismiss}
diff --git a/app/forms/image-upload.tsx b/app/forms/image-upload.tsx
index 79ec167632..e4f450bd28 100644
--- a/app/forms/image-upload.tsx
+++ b/app/forms/image-upload.tsx
@@ -472,8 +472,8 @@ export function CreateImageSideModalForm() {
   return (
     <SideModalForm
       form={form}
-      resourceName="image"
       formType="create"
+      resourceName="image"
       title="Upload image"
       onDismiss={backToImages}
       onSubmit={async (values) => {
diff --git a/app/forms/ip-pool-create.tsx b/app/forms/ip-pool-create.tsx
index ebfab20d86..f3d633fbc1 100644
--- a/app/forms/ip-pool-create.tsx
+++ b/app/forms/ip-pool-create.tsx
@@ -40,8 +40,8 @@ export function CreateIpPoolSideModalForm() {
   return (
     <SideModalForm
       form={form}
-      resourceName="IP pool"
       formType="create"
+      resourceName="IP pool"
       onDismiss={onDismiss}
       onSubmit={({ name, description }) => {
         createPool.mutate({ body: { name, description } })
diff --git a/app/forms/ip-pool-edit.tsx b/app/forms/ip-pool-edit.tsx
index b44df0ab5f..da2467ebf8 100644
--- a/app/forms/ip-pool-edit.tsx
+++ b/app/forms/ip-pool-edit.tsx
@@ -50,8 +50,8 @@ export function EditIpPoolSideModalForm() {
   return (
     <SideModalForm
       form={form}
-      resourceName="IP pool"
       formType="edit"
+      resourceName="IP pool"
       onDismiss={onDismiss}
       onSubmit={({ name, description }) => {
         editPool.mutate({ path: poolSelector, body: { name, description } })
diff --git a/app/forms/ip-pool-range-add.tsx b/app/forms/ip-pool-range-add.tsx
index e61878215c..332a6cf904 100644
--- a/app/forms/ip-pool-range-add.tsx
+++ b/app/forms/ip-pool-range-add.tsx
@@ -78,8 +78,8 @@ export function IpPoolAddRangeSideModalForm() {
   return (
     <SideModalForm
       form={form}
-      resourceName="IP range"
       formType="create"
+      resourceName="IP range"
       title="Add IP range"
       onDismiss={onDismiss}
       onSubmit={(body) => addRange.mutate({ path: { pool }, body })}
diff --git a/app/forms/network-interface-create.tsx b/app/forms/network-interface-create.tsx
index 455bde4baa..ffedcce784 100644
--- a/app/forms/network-interface-create.tsx
+++ b/app/forms/network-interface-create.tsx
@@ -52,10 +52,10 @@ export default function CreateNetworkInterfaceForm({
 
   return (
     <SideModalForm
-      title="Add network interface"
-      resourceName="network interface"
       form={form}
       formType="create"
+      resourceName="network interface"
+      title="Add network interface"
       onDismiss={onDismiss}
       onSubmit={onSubmit}
       loading={loading}
diff --git a/app/forms/network-interface-edit.tsx b/app/forms/network-interface-edit.tsx
index 6deacfc8f4..1e530130f0 100644
--- a/app/forms/network-interface-edit.tsx
+++ b/app/forms/network-interface-edit.tsx
@@ -42,9 +42,9 @@ export default function EditNetworkInterfaceForm({
 
   return (
     <SideModalForm
-      resourceName="network interface"
       form={form}
       formType="edit"
+      resourceName="network interface"
       onDismiss={onDismiss}
       onSubmit={(body) => {
         const interfaceName = defaultValues.name
diff --git a/app/forms/project-access.tsx b/app/forms/project-access.tsx
index 85d8ef1be4..19d961a8c5 100644
--- a/app/forms/project-access.tsx
+++ b/app/forms/project-access.tsx
@@ -103,9 +103,9 @@ export function ProjectAccessEditUserSideModal({
   return (
     <SideModalForm
       // TODO: show user name in header or SOMEWHERE
-      resourceName="role"
       form={form}
       formType="edit"
+      resourceName="role"
       onSubmit={({ roleName }) => {
         updatePolicy.mutate({
           path: { project },
diff --git a/app/forms/project-create.tsx b/app/forms/project-create.tsx
index 1c74429fe7..81d7e846d8 100644
--- a/app/forms/project-create.tsx
+++ b/app/forms/project-create.tsx
@@ -43,8 +43,8 @@ export function CreateProjectSideModalForm() {
   return (
     <SideModalForm
       form={form}
-      resourceName="project"
       formType="create"
+      resourceName="project"
       onDismiss={onDismiss}
       onSubmit={({ name, description }) => {
         createProject.mutate({ body: { name, description } })
diff --git a/app/forms/project-edit.tsx b/app/forms/project-edit.tsx
index 561a728421..300df72b92 100644
--- a/app/forms/project-edit.tsx
+++ b/app/forms/project-edit.tsx
@@ -55,9 +55,9 @@ export function EditProjectSideModalForm() {
 
   return (
     <SideModalForm
-      resourceName="project"
       form={form}
       formType="edit"
+      resourceName="project"
       onDismiss={onDismiss}
       onSubmit={({ name, description }) => {
         editProject.mutate({ path: projectSelector, body: { name, description } })
diff --git a/app/forms/silo-access.tsx b/app/forms/silo-access.tsx
index c5a610f9ea..a4cb336ed3 100644
--- a/app/forms/silo-access.tsx
+++ b/app/forms/silo-access.tsx
@@ -39,11 +39,11 @@ export function SiloAccessAddUserSideModal({ onDismiss, policy }: AddRoleModalPr
 
   return (
     <SideModalForm
-      resourceName="role"
-      onDismiss={onDismiss}
-      title="Add user or group"
       form={form}
       formType="create"
+      resourceName="role"
+      title="Add user or group"
+      onDismiss={onDismiss}
       onSubmit={({ identityId, roleName }) => {
         // can't happen because roleName is validated not to be '', but TS
         // wants to be sure
@@ -98,9 +98,9 @@ export function SiloAccessEditUserSideModal({
   return (
     <SideModalForm
       // TODO: show user name in header or SOMEWHERE
-      resourceName="role"
       form={form}
       formType="edit"
+      resourceName="role"
       onSubmit={({ roleName }) => {
         updatePolicy.mutate({
           body: updateRole({ identityId, identityType, roleName }, policy),
diff --git a/app/forms/silo-create.tsx b/app/forms/silo-create.tsx
index c9f0caaf37..76bd9c4efd 100644
--- a/app/forms/silo-create.tsx
+++ b/app/forms/silo-create.tsx
@@ -66,9 +66,9 @@ export function CreateSiloSideModalForm() {
 
   return (
     <SideModalForm
-      resourceName="silo"
       form={form}
       formType="create"
+      resourceName="silo"
       onDismiss={onDismiss}
       onSubmit={({
         adminGroupName,
diff --git a/app/forms/snapshot-create.tsx b/app/forms/snapshot-create.tsx
index f9432281b5..7a173a8c09 100644
--- a/app/forms/snapshot-create.tsx
+++ b/app/forms/snapshot-create.tsx
@@ -62,9 +62,9 @@ export function CreateSnapshotSideModalForm() {
 
   return (
     <SideModalForm
-      resourceName="snapshot"
       form={form}
       formType="create"
+      resourceName="snapshot"
       onDismiss={onDismiss}
       onSubmit={(values) => {
         createSnapshot.mutate({ query: projectSelector, body: values })
diff --git a/app/forms/ssh-key-create.tsx b/app/forms/ssh-key-create.tsx
index a752e7d81a..8b4044f179 100644
--- a/app/forms/ssh-key-create.tsx
+++ b/app/forms/ssh-key-create.tsx
@@ -44,10 +44,10 @@ export function CreateSSHKeySideModalForm({
 
   return (
     <SideModalForm
-      title="Add SSH key"
-      resourceName="SSH key"
       form={form}
       formType="create"
+      resourceName="SSH key"
+      title="Add SSH key"
       onDismiss={handleDismiss}
       onSubmit={(body) => createSshKey.mutate({ body })}
       loading={createSshKey.isPending}
diff --git a/app/forms/subnet-create.tsx b/app/forms/subnet-create.tsx
index c46671755f..a240c61544 100644
--- a/app/forms/subnet-create.tsx
+++ b/app/forms/subnet-create.tsx
@@ -39,9 +39,9 @@ export function CreateSubnetForm({ onDismiss }: CreateSubnetFormProps) {
 
   return (
     <SideModalForm
-      resourceName="subnet"
       form={form}
       formType="create"
+      resourceName="subnet"
       onDismiss={onDismiss}
       onSubmit={(body) => createSubnet.mutate({ query: vpcSelector, body })}
       loading={createSubnet.isPending}
diff --git a/app/forms/subnet-edit.tsx b/app/forms/subnet-edit.tsx
index 030f6c4f98..ed93841a54 100644
--- a/app/forms/subnet-edit.tsx
+++ b/app/forms/subnet-edit.tsx
@@ -35,10 +35,10 @@ export function EditSubnetForm({ onDismiss, editing }: EditSubnetFormProps) {
 
   return (
     <SideModalForm
-      resourceName="subnet"
-      onDismiss={onDismiss}
       form={form}
       formType="edit"
+      resourceName="subnet"
+      onDismiss={onDismiss}
       onSubmit={(body) => {
         updateSubnet.mutate({
           path: { subnet: editing.name },
diff --git a/app/forms/vpc-create.tsx b/app/forms/vpc-create.tsx
index 18200b10a7..e89683e40d 100644
--- a/app/forms/vpc-create.tsx
+++ b/app/forms/vpc-create.tsx
@@ -47,8 +47,8 @@ export function CreateVpcSideModalForm() {
   return (
     <SideModalForm
       form={form}
-      resourceName="VPC"
       formType="create"
+      resourceName="VPC"
       onSubmit={(values) => createVpc.mutate({ query: projectSelector, body: values })}
       onDismiss={() => navigate(pb.vpcs(projectSelector))}
       loading={createVpc.isPending}
diff --git a/app/forms/vpc-edit.tsx b/app/forms/vpc-edit.tsx
index 10fbc0d63e..169098cd51 100644
--- a/app/forms/vpc-edit.tsx
+++ b/app/forms/vpc-edit.tsx
@@ -56,9 +56,9 @@ export function EditVpcSideModalForm() {
 
   return (
     <SideModalForm
-      resourceName="VPC"
       form={form}
       formType="edit"
+      resourceName="VPC"
       onDismiss={onDismiss}
       onSubmit={({ name, description, dnsName }) => {
         editVpc.mutate({

From b130a15d8f3164602604a7cbed9178f80481b344 Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Fri, 8 Mar 2024 17:11:51 -0800
Subject: [PATCH 09/11] Comments on props

---
 app/components/form/SideModalForm.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/app/components/form/SideModalForm.tsx b/app/components/form/SideModalForm.tsx
index 8a9b04eb8e..8cad703f81 100644
--- a/app/components/form/SideModalForm.tsx
+++ b/app/components/form/SideModalForm.tsx
@@ -16,11 +16,13 @@ import { SideModal } from '~/ui/lib/SideModal'
 
 type CreateFormProps = {
   formType: 'create'
+  /** Only needed if you need to override the default button text (`Create ${resourceName}`) */
   submitLabel?: string
 }
 
 type EditFormProps = {
   formType: 'edit'
+  /** Not permitted, as all edit form buttons should read `Update ${resourceName}` */
   submitLabel?: never
 }
 
@@ -42,6 +44,7 @@ type SideModalFormProps<TFieldValues extends FieldValues> = {
   /** Error from the API call */
   submitError: ApiError | null
   loading?: boolean
+  /** Only needed if you need to override the default title (Create/Edit ${resourceName}) */
   title?: string
   subtitle?: ReactNode
   onSubmit?: (values: TFieldValues) => void

From bdfc280f45a2e906236f22d471ab7cd339d1fcd3 Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Mon, 11 Mar 2024 11:09:37 -0700
Subject: [PATCH 10/11] Update sidemodal header, tests

---
 app/components/form/SideModalForm.tsx          | 9 ++++++---
 app/forms/access-util.tsx                      | 1 +
 app/forms/project-access.tsx                   | 2 ++
 app/forms/silo-access.tsx                      | 2 ++
 app/pages/SiloAccessPage.tsx                   | 1 +
 app/pages/project/access/ProjectAccessPage.tsx | 1 +
 app/ui/lib/SideModal.tsx                       | 5 ++++-
 test/e2e/project-access.e2e.ts                 | 2 +-
 test/e2e/silo-access.e2e.ts                    | 2 +-
 9 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/app/components/form/SideModalForm.tsx b/app/components/form/SideModalForm.tsx
index 8cad703f81..e066f1bd3f 100644
--- a/app/components/form/SideModalForm.tsx
+++ b/app/components/form/SideModalForm.tsx
@@ -84,6 +84,11 @@ export function SideModalForm<TFieldValues extends FieldValues>({
     }
   }, [submitError, form])
 
+  const label =
+    formType === 'edit'
+      ? `Update ${resourceName}`
+      : submitLabel || title || `Create ${resourceName}`
+
   return (
     <SideModal
       onDismiss={onDismiss}
@@ -125,9 +130,7 @@ export function SideModalForm<TFieldValues extends FieldValues>({
             loading={loading || isSubmitting}
             form={id}
           >
-            {submitLabel ||
-              title ||
-              `${formType === 'edit' ? 'Update' : 'Create'} ${resourceName}`}
+            {label}
           </Button>
         )}
       </SideModal.Footer>
diff --git a/app/forms/access-util.tsx b/app/forms/access-util.tsx
index 58087231c1..62af6c9e0c 100644
--- a/app/forms/access-util.tsx
+++ b/app/forms/access-util.tsx
@@ -50,6 +50,7 @@ export type AddRoleModalProps = {
 }
 
 export type EditRoleModalProps = AddRoleModalProps & {
+  name?: string
   identityId: string
   identityType: IdentityType
   defaultValues: { roleName: RoleKey }
diff --git a/app/forms/project-access.tsx b/app/forms/project-access.tsx
index 19d961a8c5..9ac407e749 100644
--- a/app/forms/project-access.tsx
+++ b/app/forms/project-access.tsx
@@ -83,6 +83,7 @@ export function ProjectAccessAddUserSideModal({ onDismiss, policy }: AddRoleModa
 
 export function ProjectAccessEditUserSideModal({
   onDismiss,
+  name,
   identityId,
   identityType,
   policy,
@@ -106,6 +107,7 @@ export function ProjectAccessEditUserSideModal({
       form={form}
       formType="edit"
       resourceName="role"
+      title={`Change role for ${name}`}
       onSubmit={({ roleName }) => {
         updatePolicy.mutate({
           path: { project },
diff --git a/app/forms/silo-access.tsx b/app/forms/silo-access.tsx
index a4cb336ed3..d1bd8c3f0f 100644
--- a/app/forms/silo-access.tsx
+++ b/app/forms/silo-access.tsx
@@ -81,6 +81,7 @@ export function SiloAccessAddUserSideModal({ onDismiss, policy }: AddRoleModalPr
 
 export function SiloAccessEditUserSideModal({
   onDismiss,
+  name,
   identityId,
   identityType,
   policy,
@@ -101,6 +102,7 @@ export function SiloAccessEditUserSideModal({
       form={form}
       formType="edit"
       resourceName="role"
+      title={`Change role for ${name}`}
       onSubmit={({ roleName }) => {
         updatePolicy.mutate({
           body: updateRole({ identityId, identityType, roleName }, policy),
diff --git a/app/pages/SiloAccessPage.tsx b/app/pages/SiloAccessPage.tsx
index 2fd87ea148..0ba0d4f014 100644
--- a/app/pages/SiloAccessPage.tsx
+++ b/app/pages/SiloAccessPage.tsx
@@ -172,6 +172,7 @@ export function SiloAccessPage() {
         <SiloAccessEditUserSideModal
           onDismiss={() => setEditingUserRow(null)}
           policy={siloPolicy}
+          name={editingUserRow.name}
           identityId={editingUserRow.id}
           identityType={editingUserRow.identityType}
           defaultValues={{ roleName: editingUserRow.siloRole }}
diff --git a/app/pages/project/access/ProjectAccessPage.tsx b/app/pages/project/access/ProjectAccessPage.tsx
index 6bc38461e4..a83756d870 100644
--- a/app/pages/project/access/ProjectAccessPage.tsx
+++ b/app/pages/project/access/ProjectAccessPage.tsx
@@ -199,6 +199,7 @@ export function ProjectAccessPage() {
         <ProjectAccessEditUserSideModal
           onDismiss={() => setEditingUserRow(null)}
           policy={projectPolicy}
+          name={editingUserRow.name}
           identityId={editingUserRow.id}
           identityType={editingUserRow.identityType}
           defaultValues={{ roleName: editingUserRow.projectRole }}
diff --git a/app/ui/lib/SideModal.tsx b/app/ui/lib/SideModal.tsx
index 341afb585f..5227da1da5 100644
--- a/app/ui/lib/SideModal.tsx
+++ b/app/ui/lib/SideModal.tsx
@@ -142,7 +142,10 @@ SideModal.Title = ({
   subtitle?: ReactNode
 }) => (
   <div className="items-top mb-4 mt-8">
-    <h2 className="flex w-full items-center justify-between pr-8 text-sans-2xl" id={id}>
+    <h2
+      className="flex w-full items-center justify-between break-all pr-8 text-sans-2xl"
+      id={id}
+    >
       {title}
     </h2>
     {subtitle}
diff --git a/test/e2e/project-access.e2e.ts b/test/e2e/project-access.e2e.ts
index 877fc7d709..a6481688bc 100644
--- a/test/e2e/project-access.e2e.ts
+++ b/test/e2e/project-access.e2e.ts
@@ -78,7 +78,7 @@ test('Click through project access page', async ({ page }) => {
     .click()
   await page.click('role=menuitem[name="Change role"]')
 
-  await expectVisible(page, ['role=heading[name*="Edit role"]'])
+  await expectVisible(page, ['role=heading[name*="Change role for Simone de Beauvoir"]'])
   await expectVisible(page, ['button:has-text("Collaborator")'])
 
   await page.click('role=button[name*="Role"]')
diff --git a/test/e2e/silo-access.e2e.ts b/test/e2e/silo-access.e2e.ts
index 833dcce6d9..aaf6142c59 100644
--- a/test/e2e/silo-access.e2e.ts
+++ b/test/e2e/silo-access.e2e.ts
@@ -67,7 +67,7 @@ test('Click through silo access page', async ({ page }) => {
     .click()
   await page.click('role=menuitem[name="Change role"]')
 
-  await expectVisible(page, ['role=heading[name*="Edit role"]'])
+  await expectVisible(page, ['role=heading[name*="Change role for Jacob Klein"]'])
   await expectVisible(page, ['button:has-text("Collaborator")'])
 
   await page.click('role=button[name*="Role"]')

From ade7a538183638f8d09791661c644c6cc3bf5e7d Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Mon, 11 Mar 2024 11:39:46 -0700
Subject: [PATCH 11/11] better text wrapping with break-words

---
 app/ui/lib/SideModal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/ui/lib/SideModal.tsx b/app/ui/lib/SideModal.tsx
index 5227da1da5..f1404a4a4b 100644
--- a/app/ui/lib/SideModal.tsx
+++ b/app/ui/lib/SideModal.tsx
@@ -143,7 +143,7 @@ SideModal.Title = ({
 }) => (
   <div className="items-top mb-4 mt-8">
     <h2
-      className="flex w-full items-center justify-between break-all pr-8 text-sans-2xl"
+      className="flex w-full items-center justify-between break-words pr-8 text-sans-2xl"
       id={id}
     >
       {title}