Extract common fields and refactor VPC router route forms

app/forms/vpc-router-route/shared.tsx → app/forms/vpc-router-route-common.tsx

@@ -6,7 +6,21 @@
  * Copyright Oxide Computer Company
  */
 
-import type { RouteDestination, RouteTarget } from '~/api'
+import type { Control } from 'react-hook-form'
+
+import type {
+  RouteDestination,
+  RouterRouteCreate,
+  RouterRouteUpdate,
+  RouteTarget,
+} from '~/api'
+import { DescriptionField } from '~/components/form/fields/DescriptionField'
+import { ListboxField } from '~/components/form/fields/ListboxField'
+import { NameField } from '~/components/form/fields/NameField'
+import { TextField } from '~/components/form/fields/TextField'
+import { Message } from '~/ui/lib/Message'
+
+export type RouteFormValues = RouterRouteCreate | Required<RouterRouteUpdate>
 
 // VPCs can not be specified as a destination in custom routers
 // https://github.com/oxidecomputer/omicron/blob/4f27433d1bca57eb02073a4ea1cd14557f70b8c7/nexus/src/app/vpc_router.rs#L363
@@ -74,3 +88,34 @@ export const targetValueDescription = (targetType: RouteTarget['type']) =>
   targetType === 'internet_gateway'
     ? routeFormMessage.internetGatewayTargetValue
     : undefined
+
+type RouteFormFieldsProps = {
+  control: Control<RouteFormValues>
+  targetType: RouteTarget['type']
+  isDisabled?: boolean
+}
+export const RouteFormFields = ({
+  control,
+  targetType,
+  isDisabled,
+}: RouteFormFieldsProps) => (
+  <>
+    {isDisabled && (
+      <Message variant="info" content={routeFormMessage.vpcSubnetNotModifiable} />
+    )}
+    <NameField name="name" control={control} disabled={isDisabled} />
+    <DescriptionField name="description" control={control} disabled={isDisabled} />
+    <ListboxField {...fields.destType} control={control} disabled={isDisabled} />
+    <TextField {...fields.destValue} control={control} disabled={isDisabled} />
+    <ListboxField {...fields.targetType} control={control} disabled={isDisabled} />
+    {targetType !== 'drop' && (
+      <TextField
+        {...fields.targetValue}
+        control={control}
+        // 'internet_gateway' targetTypes can only have the value 'outbound', so we disable the field
+        disabled={isDisabled || targetType === 'internet_gateway'}
+        description={targetValueDescription(targetType)}
+      />
+    )}
+  </>
+)

app/forms/vpc-router-route-create.tsx

@@ -5,22 +5,19 @@
  *
  * Copyright Oxide Computer Company
  */
+import { useEffect } from 'react'
 import { useForm } from 'react-hook-form'
 import { useNavigate } from 'react-router-dom'
 
-import { useApiMutation, useApiQueryClient, type RouterRouteCreate } from '@oxide/api'
+import { useApiMutation, useApiQueryClient } from '@oxide/api'
 
-import { DescriptionField } from '~/components/form/fields/DescriptionField'
-import { ListboxField } from '~/components/form/fields/ListboxField'
-import { NameField } from '~/components/form/fields/NameField'
-import { TextField } from '~/components/form/fields/TextField'
 import { SideModalForm } from '~/components/form/SideModalForm'
-import { fields, targetValueDescription } from '~/forms/vpc-router-route/shared'
+import { RouteFormFields, type RouteFormValues } from '~/forms/vpc-router-route-common'
 import { useVpcRouterSelector } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
 import { pb } from '~/util/path-builder'
 
-const defaultValues: RouterRouteCreate = {
+const defaultValues: RouteFormValues = {
   name: '',
   description: '',
   destination: { type: 'ip', value: '' },
@@ -32,27 +29,28 @@ export function CreateRouterRouteSideModalForm() {
   const routerSelector = useVpcRouterSelector()
   const navigate = useNavigate()
 
-  const onDismiss = () => {
-    navigate(pb.vpcRouter(routerSelector))
-  }
-
   const createRouterRoute = useApiMutation('vpcRouterRouteCreate', {
     onSuccess() {
       queryClient.invalidateQueries('vpcRouterRouteList')
       addToast({ content: 'Your route has been created' })
-      onDismiss()
+      navigate(pb.vpcRouter(routerSelector))
     },
   })
 
   const form = useForm({ defaultValues })
   const targetType = form.watch('target.type')
 
+  useEffect(() => {
+    // when targetType is 'internet_gateway', we set it to `outbound`
+    form.setValue('target.value', targetType === 'internet_gateway' ? 'outbound' : '')
+  }, [form, targetType])
+
   return (
     <SideModalForm
       form={form}
       formType="create"
       resourceName="route"
-      onDismiss={onDismiss}
+      onDismiss={() => navigate(pb.vpcRouter(routerSelector))}
       onSubmit={({ name, description, destination, target }) =>
         createRouterRoute.mutate({
           query: routerSelector,
@@ -68,32 +66,7 @@ export function CreateRouterRouteSideModalForm() {
       loading={createRouterRoute.isPending}
       submitError={createRouterRoute.error}
     >
-      <NameField name="name" control={form.control} />
-      <DescriptionField name="description" control={form.control} />
-      <ListboxField {...fields.destType} control={form.control} />
-      <TextField {...fields.destValue} control={form.control} />
-      <ListboxField
-        {...fields.targetType}
-        control={form.control}
-        onChange={(value) => {
-          // 'outbound' is only valid option when targetType is 'internet_gateway'
-          if (value === 'internet_gateway') {
-            form.setValue('target.value', 'outbound')
-          }
-          if (value === 'drop') {
-            form.setValue('target.value', '')
-          }
-        }}
-      />
-      {targetType !== 'drop' && (
-        <TextField
-          {...fields.targetValue}
-          control={form.control}
-          // when targetType is 'internet_gateway', we set it to `outbound` and make it non-editable
-          disabled={targetType === 'internet_gateway'}
-          description={targetValueDescription(targetType)}
-        />
-      )}
+      <RouteFormFields control={form.control} targetType={targetType} />
     </SideModalForm>
   )
 }

app/forms/vpc-router-route-edit.tsx

@@ -5,6 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
+import { useEffect } from 'react'
 import { useForm } from 'react-hook-form'
 import { useNavigate, type LoaderFunctionArgs } from 'react-router-dom'
 import * as R from 'remeda'
@@ -14,84 +15,73 @@ import {
   useApiMutation,
   useApiQueryClient,
   usePrefetchedApiQuery,
-  type RouterRouteUpdate,
 } from '@oxide/api'
 
-import { DescriptionField } from '~/components/form/fields/DescriptionField'
-import { ListboxField } from '~/components/form/fields/ListboxField'
-import { NameField } from '~/components/form/fields/NameField'
-import { TextField } from '~/components/form/fields/TextField'
 import { SideModalForm } from '~/components/form/SideModalForm'
 import {
-  fields,
+  RouteFormFields,
   routeFormMessage,
-  targetValueDescription,
-} from '~/forms/vpc-router-route/shared'
+  type RouteFormValues,
+} from '~/forms/vpc-router-route-common'
 import { getVpcRouterRouteSelector, useVpcRouterRouteSelector } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
-import { Message } from '~/ui/lib/Message'
 import { pb } from '~/util/path-builder'
 
 EditRouterRouteSideModalForm.loader = async ({ params }: LoaderFunctionArgs) => {
-  const { project, vpc, router, route } = getVpcRouterRouteSelector(params)
+  const { route, ...routerSelector } = getVpcRouterRouteSelector(params)
   await apiQueryClient.prefetchQuery('vpcRouterRouteView', {
     path: { route },
-    query: { project, vpc, router },
+    query: routerSelector,
   })
   return null
 }
 
 export function EditRouterRouteSideModalForm() {
   const queryClient = useApiQueryClient()
-  const routeSelector = useVpcRouterRouteSelector()
-  const { project, vpc, router: routerName, route: routeName } = routeSelector
+  const { route: routeName, ...routerSelector } = useVpcRouterRouteSelector()
   const navigate = useNavigate()
   const { data: route } = usePrefetchedApiQuery('vpcRouterRouteView', {
     path: { route: routeName },
-    query: { project, vpc, router: routerName },
+    query: routerSelector,
   })
 
-  const defaultValues: RouterRouteUpdate = R.pick(route, [
+  const defaultValues: RouteFormValues = R.pick(route, [
     'name',
     'description',
     'target',
     'destination',
   ])
 
-  const onDismiss = () => {
-    navigate(pb.vpcRouter({ project, vpc, router: routerName }))
-  }
-
   const updateRouterRoute = useApiMutation('vpcRouterRouteUpdate', {
     onSuccess() {
       queryClient.invalidateQueries('vpcRouterRouteList')
       addToast({ content: 'Your route has been updated' })
-      onDismiss()
+      navigate(pb.vpcRouter(routerSelector))
     },
   })
 
   const form = useForm({ defaultValues })
   const targetType = form.watch('target.type')
-
-  let isDisabled = false
-  let disabledReason = ''
-
-  // Can simplify this if there aren't other disabling reasons
-  if (route?.kind === 'vpc_subnet') {
-    isDisabled = true
-    disabledReason = routeFormMessage.vpcSubnetNotModifiable
-  }
+  const targetValue = form.watch('target.value')
+  const isDisabled = route?.kind === 'vpc_subnet'
+  useEffect(() => {
+    // when targetType is 'internet_gateway', we set it to `outbound`
+    form.setValue(
+      'target.value',
+      targetType === 'internet_gateway' ? 'outbound' : targetValue
+    )
+  }, [form, targetType, targetValue])
 
   return (
     <SideModalForm
       form={form}
       formType="edit"
       resourceName="route"
-      onDismiss={onDismiss}
+      onDismiss={() => navigate(pb.vpcRouter(routerSelector))}
       onSubmit={({ name, description, destination, target }) =>
         updateRouterRoute.mutate({
-          query: { project, vpc, router: routerName },
           path: { route: routeName },
+          query: routerSelector,
           body: {
             name,
             description,
@@ -103,35 +93,13 @@ export function EditRouterRouteSideModalForm() {
       }
       loading={updateRouterRoute.isPending}
       submitError={updateRouterRoute.error}
+      submitDisabled={isDisabled ? routeFormMessage.vpcSubnetNotModifiable : undefined}
     >
-      {isDisabled && <Message variant="info" content={disabledReason} />}
-      <NameField name="name" control={form.control} disabled={isDisabled} />
-      <DescriptionField name="description" control={form.control} disabled={isDisabled} />
-      <ListboxField {...fields.destType} control={form.control} disabled={isDisabled} />
-      <TextField {...fields.destValue} control={form.control} disabled={isDisabled} />
-      <ListboxField
-        {...fields.targetType}
+      <RouteFormFields
         control={form.control}
-        disabled={isDisabled}
-        onChange={(value) => {
-          // 'outbound' is only valid option when targetType is 'internet_gateway'
-          if (value === 'internet_gateway') {
-            form.setValue('target.value', 'outbound')
-          }
-          if (value === 'drop') {
-            form.setValue('target.value', '')
-          }
-        }}
+        targetType={targetType}
+        isDisabled={isDisabled}
       />
-      {targetType !== 'drop' && (
-        <TextField
-          {...fields.targetValue}
-          control={form.control}
-          // when targetType is 'internet_gateway', we set it to `outbound` and make it non-editable
-          disabled={isDisabled || targetType === 'internet_gateway'}
-          description={targetValueDescription(targetType)}
-        />
-      )}
     </SideModalForm>
   )
 }

app/pages/project/vpcs/RouterPage.tsx

@@ -23,7 +23,7 @@ import {
 import { DocsPopover } from '~/components/DocsPopover'
 import { HL } from '~/components/HL'
 import { MoreActionsMenu } from '~/components/MoreActionsMenu'
-import { routeFormMessage } from '~/forms/vpc-router-route/shared'
+import { routeFormMessage } from '~/forms/vpc-router-route-common'
 import { getVpcRouterSelector, useVpcRouterSelector } from '~/hooks/use-params'
 import { confirmAction } from '~/stores/confirm-action'
 import { addToast } from '~/stores/toast'

app/pages/project/vpcs/VpcPage/tabs/VpcRoutersTab.tsx

@@ -11,7 +11,7 @@ import { Outlet, useNavigate, type LoaderFunctionArgs } from 'react-router-dom'
 
 import { apiQueryClient, useApiMutation, type VpcRouter } from '@oxide/api'
 
-import { routeFormMessage } from '~/forms/vpc-router-route/shared'
+import { routeFormMessage } from '~/forms/vpc-router-route-common'
 import { getVpcSelector, useVpcSelector } from '~/hooks/use-params'
 import { confirmDelete } from '~/stores/confirm-delete'
 import { addToast } from '~/stores/toast'