refs #38, fixes case where choices is empty but unlisted_choice is enabled

jupyterhub_config.py

@@ -223,4 +223,23 @@
             },
         },
     },
+    {
+        "description": "Specify your own docker image (must have python and jupyterhub installed in it)",
+        "display_name": "Bring your own image",
+        "profile_options": {
+            "image": {
+                "choices": {},
+                "display_name": "Image",
+                "unlisted_choice": {
+                    "display_name": "Custom image",
+                    "enabled": True,
+                    "kubespawner_override": {"image": "{value}"},
+                    "validation_message": "Must be a publicly available docker image, of form <image-name>:<tag>",
+                    "validation_regex": "^.+:.+$",
+                    "display_name_in_choices": "Other...",
+                },
+            },
+        },
+        "slug": "custom",
+    },
 ]

setupTests.js

@@ -159,4 +159,25 @@ window.profileList = [
       },
     },
   },
+  {
+    description:
+      "Specify your own docker image (must have python and jupyterhub installed in it)",
+    display_name: "Bring your own image",
+    profile_options: {
+      image: {
+        choices: {},
+        display_name: "Image - No options",
+        unlisted_choice: {
+          display_name: "Docker image",
+          enabled: true,
+          kubespawner_override: { image: "{value}" },
+          validation_message:
+            "Must be a publicly available docker image, of form <image-name>:<tag>",
+          validation_regex: "^.+:.+$",
+          display_name_in_choices: "Other...",
+        },
+      },
+    },
+    slug: "custom",
+  },
 ];

src/ProfileForm.test.js

@@ -154,3 +154,12 @@ test("Multiple profiles renders", async () => {
   expect(smallImageField.tabIndex).toEqual(-1);
   expect(screen.getByLabelText("Resource Allocation").tabIndex).toEqual(-1);
 });
+
+test("select with no options should not render", () => {
+  render(
+    <SpawnerFormProvider>
+      <ProfileForm />
+    </SpawnerFormProvider>,
+  );
+  expect(screen.queryByLabelText("Image - No options")).not.toBeInTheDocument();
+});

src/ResourceSelect.jsx

@@ -6,13 +6,16 @@ import { SelectField, TextField } from "./components/form/fields";
 function ResourceSelect({ id, profile, config, customOptions = [] }) {
   const { display_name, unlisted_choice } = config;
 
-  const { options, defaultOption } = useSelectOptions(config, customOptions);
+  const { options, defaultOption, hasDefaultChoices } = useSelectOptions(
+    config,
+    customOptions,
+  );
   const { profile: selectedProfile } = useContext(SpawnerFormContext);
   const FIELD_ID = `profile-option-${profile}--${id}`;
   const FIELD_ID_UNLISTED = `${FIELD_ID}--unlisted-choice`;
 
   const isActive = selectedProfile?.slug === profile;
-  const [value, setValue] = useState(defaultOption.value);
+  const [value, setValue] = useState(defaultOption?.value);
   const [unlistedChoiceValue, setUnlistedChoiceValue] = useState("");
 
   if (!options.length > 0) {
@@ -23,20 +26,22 @@ function ResourceSelect({ id, profile, config, customOptions = [] }) {
 
   return (
     <>
-      <SelectField
-        id={FIELD_ID}
-        label={display_name}
-        options={options}
-        defaultOption={defaultOption}
-        value={value}
-        onChange={(e) => setValue(e.value)}
-        tabIndex={isActive ? "0" : "-1"}
-        validate={
-          isActive && {
-            required: "Select a value.",
+      {hasDefaultChoices && (
+        <SelectField
+          id={FIELD_ID}
+          label={display_name}
+          options={options}
+          defaultOption={defaultOption}
+          value={value}
+          onChange={(e) => setValue(e.value)}
+          tabIndex={isActive ? "0" : "-1"}
+          validate={
+            isActive && {
+              required: "Select a value.",
+            }
           }
-        }
-      />
+        />
+      )}
       {value === "unlisted_choice" && (
         <TextField
           id={FIELD_ID_UNLISTED}

src/hooks/useSelectOptions.js

@@ -2,7 +2,7 @@ import { useMemo } from "react";
 
 function useSelectOptions(config, customOptions = []) {
   const { choices, unlisted_choice } = config;
-
+  const hasDefaultChoices = Object.keys(choices).length > 0;
   const options = useMemo(() => {
     const defaultChoices = Object.keys(choices).map((choiceName) => {
       return {
@@ -24,9 +24,14 @@ function useSelectOptions(config, customOptions = []) {
     return [...defaultChoices, ...extraChoices, ...customOptions];
   }, [choices]);
 
+  // The default choice is either the choice marked as default,
+  // OR the first explicit choice
+  // OR the first item from options which could be an extra or custom choice
   const defaultChoiceName =
     Object.keys(choices).find((choiceName) => choices[choiceName].default) ||
-    Object.keys(choices)[0];
+    Object.keys(choices).length > 0
+      ? Object.keys(choices)[0]
+      : options[0].value;
 
   const defaultOption = options.find(
     (option) => option.value === defaultChoiceName,
@@ -35,6 +40,7 @@ function useSelectOptions(config, customOptions = []) {
   return {
     options,
     defaultOption,
+    hasDefaultChoices,
   };
 }