From d515ba3edb109ca8482113bbd11977e02cec543d Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Wed, 21 Aug 2024 16:18:55 -0700
Subject: [PATCH] Working on getting it to work with an updated API; these API
 changes will have to be reverted.

---
 app/api/__generated__/Api.ts                |  9 ++++++---
 app/components/form/fields/ListboxField.tsx |  9 +++++++++
 app/forms/subnet-create.tsx                 |  2 +-
 app/forms/subnet-edit.tsx                   | 16 +++++++++++++++-
 mock-api/msw/handlers.ts                    |  4 +++-
 5 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/app/api/__generated__/Api.ts b/app/api/__generated__/Api.ts
index 9de8c9928..2fcf322bf 100644
--- a/app/api/__generated__/Api.ts
+++ b/app/api/__generated__/Api.ts
@@ -3811,8 +3811,9 @@ export type VpcRouterUpdate = { description?: string; name?: Name }
  * A VPC subnet represents a logical grouping for instances that allows network traffic between them, within a IPv4 subnetwork or optionally an IPv6 subnetwork.
  */
 export type VpcSubnet = {
+  // THIS IS TEMPORARY; BECAUSE THIS IS A GENERATED FILE, IT NEEDS TO GET CORRECTED IN THE API ITSELF
   /** ID for an attached custom router. */
-  customRouterId?: string
+  customRouterId?: string | null
   /** human-readable free-form text about a resource */
   description: string
   /** unique, immutable, system-controlled identifier for each resource */
@@ -3837,8 +3838,9 @@ export type VpcSubnet = {
 export type VpcSubnetCreate = {
   /** An optional router, used to direct packets sent from hosts in this subnet to any destination address.
 
+// THIS IS TEMPORARY; BECAUSE THIS IS A GENERATED FILE, IT NEEDS TO GET CORRECTED IN THE API ITSELF
 Custom routers apply in addition to the VPC-wide *system* router, and have higher priority than the system router for an otherwise equal-prefix-length match. */
-  customRouter?: NameOrId
+  customRouter?: NameOrId | null
   description: string
   /** The IPv4 address range for this subnet.
 
@@ -3865,8 +3867,9 @@ export type VpcSubnetResultsPage = {
  * Updateable properties of a `VpcSubnet`
  */
 export type VpcSubnetUpdate = {
+  // THIS IS TEMPORARY; BECAUSE THIS IS A GENERATED FILE, IT NEEDS TO GET CORRECTED IN THE API ITSELF
   /** An optional router, used to direct packets sent from hosts in this subnet to any destination address. */
-  customRouter?: NameOrId
+  customRouter?: NameOrId | null
   description?: string
   name?: Name
 }
diff --git a/app/components/form/fields/ListboxField.tsx b/app/components/form/fields/ListboxField.tsx
index 965a92081..ee14434ed 100644
--- a/app/components/form/fields/ListboxField.tsx
+++ b/app/components/form/fields/ListboxField.tsx
@@ -35,6 +35,8 @@ export type ListboxFieldProps<
   onChange?: (value: string | null | undefined) => void
   isLoading?: boolean
   noItemsPlaceholder?: string
+  isClearable?: boolean
+  onClear?: () => void
 }
 
 export function ListboxField<
@@ -54,6 +56,8 @@ export function ListboxField<
   onChange,
   isLoading,
   noItemsPlaceholder,
+  isClearable,
+  onClear,
 }: ListboxFieldProps<TFieldValues, TName>) {
   // TODO: recreate this logic
   //   validate: (v) => (required && !v ? `${name} is required` : undefined),
@@ -82,6 +86,11 @@ export function ListboxField<
         buttonRef={field.ref}
       />
       <ErrorMessage error={fieldState.error} label={label} />
+      {isClearable && (
+        <button type="button" onClick={onClear}>
+          clear
+        </button>
+      )}
     </div>
   )
 }
diff --git a/app/forms/subnet-create.tsx b/app/forms/subnet-create.tsx
index 3d2d0467b..6bc5d2933 100644
--- a/app/forms/subnet-create.tsx
+++ b/app/forms/subnet-create.tsx
@@ -21,7 +21,7 @@ import { pb } from '~/util/path-builder'
 
 const defaultValues: VpcSubnetCreate = {
   name: '',
-  customRouter: '',
+  customRouter: undefined,
   description: '',
   ipv4Block: '',
 }
diff --git a/app/forms/subnet-edit.tsx b/app/forms/subnet-edit.tsx
index 04f63bfd6..595e48544 100644
--- a/app/forms/subnet-edit.tsx
+++ b/app/forms/subnet-edit.tsx
@@ -60,6 +60,12 @@ export function EditSubnetForm() {
 
   const form = useForm({ defaultValues })
   const { isLoading, items } = useCustomRouterItems()
+  const customRouterValue = form.watch('customRouter')
+  const clearCustomRouter = () => {
+    // Because this is `undefined`, the dropdown isn't behaving correctly; it should revert to the placeholder
+    // It works when the value is '', but that's not a valid value for this field and it trips zod's validator
+    form.setValue('customRouter', undefined)
+  }
 
   return (
     <SideModalForm
@@ -71,7 +77,13 @@ export function EditSubnetForm() {
         updateSubnet.mutate({
           path: { subnet: subnet.name },
           query: { project, vpc },
-          body,
+          body: {
+            name: body.name,
+            description: body.description,
+            // this is currently failing because the API does not accept null for customRouter, but it should
+            // once that is fixed, this should allow clearing the customRouter
+            customRouter: body.customRouter,
+          },
         })
       }}
       loading={updateSubnet.isPending}
@@ -87,6 +99,8 @@ export function EditSubnetForm() {
         isLoading={isLoading}
         items={items}
         control={form.control}
+        isClearable={!!customRouterValue}
+        onClear={clearCustomRouter}
       />
     </SideModalForm>
   )
diff --git a/mock-api/msw/handlers.ts b/mock-api/msw/handlers.ts
index 71247b61c..2e7c964a7 100644
--- a/mock-api/msw/handlers.ts
+++ b/mock-api/msw/handlers.ts
@@ -1180,8 +1180,10 @@ export const handlers = makeHandlers({
     if (body.name) {
       subnet.name = body.name
     }
-    if (body.custom_router) {
+    if (body.custom_router !== undefined) {
       subnet.custom_router_id = body.custom_router
+    } else {
+      subnet.custom_router_id = null
     }
     updateDesc(subnet, body)