From ab22dff3c11317c85dd2e6928d6654ddc1f70e89 Mon Sep 17 00:00:00 2001
From: Justin Bennett <oss@just-be.dev>
Date: Wed, 29 Jun 2022 21:32:42 -0400
Subject: [PATCH 1/2] Make vpc, subnet required for NIC creation

---
 app/components/form/fields/ListboxField.tsx | 6 +++++-
 app/forms/network-interface-create.tsx      | 4 ++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/app/components/form/fields/ListboxField.tsx b/app/components/form/fields/ListboxField.tsx
index 3cf0f72553..dbcdaf3839 100644
--- a/app/components/form/fields/ListboxField.tsx
+++ b/app/components/form/fields/ListboxField.tsx
@@ -24,7 +24,11 @@ export function ListboxField({
   description,
   helpText,
 }: ListboxFieldProps) {
-  const [, { value }, { setValue }] = useField({ name })
+  type ItemValue = typeof items[number]['value'] | undefined
+  const [, { value }, { setValue }] = useField<ItemValue>({
+    name,
+    validate: (v) => (required && !v ? `${name} is required` : undefined),
+  })
   return (
     <div className="max-w-lg">
       <div className="mb-2">
diff --git a/app/forms/network-interface-create.tsx b/app/forms/network-interface-create.tsx
index b1dc84aa42..60fa4f3fad 100644
--- a/app/forms/network-interface-create.tsx
+++ b/app/forms/network-interface-create.tsx
@@ -88,7 +88,7 @@ export default function CreateNetworkInterfaceSideModalForm({
         name="vpcName"
         label="VPC"
         items={vpcs.map(({ name }) => ({ label: name, value: name }))}
-        // required
+        required={true}
       />
       <SubnetListbox
         id="nic-subnet"
@@ -96,7 +96,7 @@ export default function CreateNetworkInterfaceSideModalForm({
         label="Subnet"
         vpcNameField="vpcName"
         vpcs={vpcs}
-        // required
+        required={true}
       />
       <TextField id="nic-ip" name="ip" label="IP Address" />
     </SideModalForm>

From 9a8f07009ff0c14e9119359dea2851abf8220ae6 Mon Sep 17 00:00:00 2001
From: Justin Bennett <oss@just-be.dev>
Date: Wed, 29 Jun 2022 21:52:13 -0400
Subject: [PATCH 2/2] This should be a lint rule

---
 app/forms/network-interface-create.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/forms/network-interface-create.tsx b/app/forms/network-interface-create.tsx
index 60fa4f3fad..ef4ec5b686 100644
--- a/app/forms/network-interface-create.tsx
+++ b/app/forms/network-interface-create.tsx
@@ -88,7 +88,7 @@ export default function CreateNetworkInterfaceSideModalForm({
         name="vpcName"
         label="VPC"
         items={vpcs.map(({ name }) => ({ label: name, value: name }))}
-        required={true}
+        required
       />
       <SubnetListbox
         id="nic-subnet"
@@ -96,7 +96,7 @@ export default function CreateNetworkInterfaceSideModalForm({
         label="Subnet"
         vpcNameField="vpcName"
         vpcs={vpcs}
-        required={true}
+        required
       />
       <TextField id="nic-ip" name="ip" label="IP Address" />
     </SideModalForm>