Make SideModal submit button copy consistent (#2048)

* Make SideModal button copy consistent
* Refactor and remove title from most create forms
* Add name of user/group to 'change role' form

Author: charliepark

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'
 
@@ -14,8 +14,19 @@ import type { ApiError } from '@oxide/api'
 import { Button } from '~/ui/lib/Button'
 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
+}
+
 type SideModalFormProps<TFieldValues extends FieldValues> = {
-  id: string
   form: UseFormReturn<TFieldValues>
   /**
    * A function that returns the fields.
@@ -27,16 +38,17 @@ type SideModalFormProps<TFieldValues extends FieldValues> = {
    */
   children: ReactNode
   onDismiss: () => void
+  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
+  /** Only needed if you need to override the default title (Create/Edit ${resourceName}) */
+  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.
@@ -49,10 +61,11 @@ export function useShouldAnimateModal() {
 }
 
 export function SideModalForm<TFieldValues extends FieldValues>({
-  id,
   form,
+  formType,
   children,
   onDismiss,
+  resourceName,
   submitDisabled,
   submitError,
   title,
@@ -61,6 +74,7 @@ export function SideModalForm<TFieldValues extends FieldValues>({
   loading,
   subtitle,
 }: SideModalFormProps<TFieldValues>) {
+  const id = useId()
   const { isSubmitting } = form.formState
 
   useEffect(() => {
@@ -70,11 +84,16 @@ export function SideModalForm<TFieldValues extends FieldValues>({
     }
   }, [submitError, form])
 
+  const label =
+    formType === 'edit'
+      ? `Update ${resourceName}`
+      : submitLabel || title || `Create ${resourceName}`
+
   return (
     <SideModal
       onDismiss={onDismiss}
       isOpen
-      title={title}
+      title={title || `${formType === 'edit' ? 'Edit' : 'Create'} ${resourceName}`}
       animate={useShouldAnimateModal()}
       subtitle={subtitle}
       errors={submitError ? [submitError.message] : []}
@@ -111,7 +130,7 @@ export function SideModalForm<TFieldValues extends FieldValues>({
             loading={loading || isSubmitting}
             form={id}
           >
-            {submitLabel || title}
+            {label}
           </Button>
         )}
       </SideModal.Footer>

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 }

app/forms/disk-attach.tsx

@@ -46,9 +46,10 @@ export function AttachDiskSideModalForm({
 
   return (
     <SideModalForm
-      id="form-disk-attach"
-      title="Attach Disk"
       form={form}
+      formType="create"
+      resourceName="disk"
+      title="Attach Disk"
       onSubmit={onSubmit}
       loading={loading}
       submitError={submitError}

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"
+      resourceName="disk"
       onDismiss={() => onDismiss(navigate)}
       onSubmit={({ size, ...rest }) => {
         const body = { size: size * GiB, ...rest }

app/forms/firewall-rules-create.tsx

@@ -504,9 +504,10 @@ export function CreateFirewallRuleForm({
 
   return (
     <SideModalForm
-      id="create-firewall-rule-form"
-      title="Add firewall 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.

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"
+      resourceName="rule"
       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>

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"
+      resourceName="floating IP"
       onDismiss={() => navigate(pb.floatingIps(projectSelector))}
       onSubmit={({ ip, ...rest }) => {
         createFloatingIp.mutate({

app/forms/floating-ip-edit.tsx

@@ -55,9 +55,9 @@ export function EditFloatingIpSideModalForm() {
 
   return (
     <SideModalForm
-      id="edit-floating-ip-form"
       form={form}
-      title="Edit floating IP"
+      formType="edit"
+      resourceName="floating IP"
       onDismiss={onDismiss}
       onSubmit={({ name, description }) => {
         editFloatingIp.mutate({
@@ -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} />

app/forms/idp/create.tsx

@@ -61,9 +61,9 @@ export function CreateIdpSideModalForm() {
 
   return (
     <SideModalForm
-      id="create-idp-form"
       form={form}
-      title="Create identity provider"
+      formType="create"
+      resourceName="identity provider"
       onDismiss={onDismiss}
       onSubmit={async ({
         signingKeypair,

app/forms/idp/edit.tsx

@@ -44,8 +44,9 @@ export function EditIdpSideModalForm() {
 
   return (
     <SideModalForm
-      id="edit-idp-form"
       form={form}
+      formType="edit"
+      resourceName="identity provider"
       title="Identity provider"
       onDismiss={onDismiss}
       subtitle={