From 13874f1b293f5910f7ccac6a7db0154f8384d95e Mon Sep 17 00:00:00 2001
From: Jacob Rothstein <hi@jbr.me>
Date: Thu, 10 Aug 2023 12:41:56 -0700
Subject: [PATCH] bugfix: correctly handle when there is only one hpke config
 (#392)

---
 app/src/tasks/TaskForm.tsx | 26 +++++++++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/app/src/tasks/TaskForm.tsx b/app/src/tasks/TaskForm.tsx
index bade110a..65ec0ea7 100644
--- a/app/src/tasks/TaskForm.tsx
+++ b/app/src/tasks/TaskForm.tsx
@@ -15,7 +15,12 @@ import FormControl from "react-bootstrap/FormControl";
 import FormGroup from "react-bootstrap/FormGroup";
 import FormLabel from "react-bootstrap/FormLabel";
 import FormSelect from "react-bootstrap/FormSelect";
-import React, { ChangeEvent, ChangeEventHandler, Suspense } from "react";
+import React, {
+  ChangeEvent,
+  ChangeEventHandler,
+  Suspense,
+  useEffect,
+} from "react";
 import Row from "react-bootstrap/Row";
 import { ApiClientContext } from "../ApiClientContext";
 import { LinkContainer } from "react-router-bootstrap";
@@ -626,6 +631,13 @@ function HpkeConfigSelect(props: Props) {
   const { hpkeConfigs } = useLoaderData() as {
     hpkeConfigs: Promise<HpkeConfig[]>;
   };
+  const { setFieldValue } = props;
+
+  useEffect(() => {
+    hpkeConfigs.then((configs) => {
+      if (configs.length === 1) setFieldValue("hpke_config_id", configs[0].id);
+    });
+  }, [hpkeConfigs, setFieldValue]);
 
   return (
     <TaskFormGroup controlId="hpke_config_id">
@@ -633,8 +645,13 @@ function HpkeConfigSelect(props: Props) {
         fieldKey="hpke_config_id"
         setFocusedField={props.setFocusedField}
       />
-      <FormSelect isInvalid={!!props.errors.hpke_config_id} id="hpke-config-id">
-        <Suspense fallback={<option>...</option>}>
+      <FormSelect
+        isInvalid={!!props.errors.hpke_config_id}
+        id="hpke-config-id"
+        name="hpke_config_id"
+      >
+        <option disabled></option>
+        <Suspense fallback={<option disabled>...</option>}>
           <Await resolve={hpkeConfigs}>
             {(hpkeConfigs: HpkeConfig[]) =>
               hpkeConfigs.map((hpkeConfig) => (
@@ -646,6 +663,9 @@ function HpkeConfigSelect(props: Props) {
           </Await>
         </Suspense>
       </FormSelect>
+      <FormControl.Feedback type="invalid">
+        {props.errors.hpke_config_id}
+      </FormControl.Feedback>
     </TaskFormGroup>
   );
 }