Allow end user to select a choice different from list of available choices in profile_list

jupyterhub_config.py

@@ -46,6 +46,13 @@
         'profile_options': {
             'image': {
                 'display_name': 'Image',
+                'unlisted_choice': {
+                    'enabled': True,
+                    'display_name': 'Image Location',
+                    'validation_regex': '^pangeo/.*$',
+                    'validation_message': 'Must be a pangeo image, matching ^pangeo/.*$',
+                    'kubespawner_override': {'image': '{value}'},
+                },
                 'choices': {
                     'pytorch': {
                         'display_name': 'Python 3 Training Notebook',

kubespawner/spawner.py

@@ -7,6 +7,7 @@
 import asyncio
 import ipaddress
 import os
+import re
 import string
 import sys
 import warnings
@@ -1537,6 +1538,17 @@ def _validate_image_pull_secrets(self, proposal):
           and the value is a dictionary with the following keys:
 
           - `display_name`: Name used to identify this particular option
+          - `unlisted_choice`: Object to specify if there should be a free-form field if the user
+            selected "Other" as a choice:
+            - `enabled`: Boolean, whether the free form input should be enabled
+            - `display_name`: String, label for input field
+            - `validation_regex`: Optional, regex that the free form input should match - eg. ^pangeo/.*$
+            - `validation_message`: Optional, validation message for the regex. Should describe the required
+               input format in a human-readable way.
+            - `kubespawner_override`: Object specifying what key:values should be over-ridden
+               with the value of the free form input, using `{value}` for the value to be substituted with
+               the user POSTed value in the `unlisted_choice` input field. eg:
+              - some_config_key: some_value-with-{value}-substituted-with-what-user-wrote
           - `choices`: A dictionary containing list of choices for the user to choose from
             to set the value for this particular option. The key is an identifier for this
             choice, and the value is a dictionary with the following possible keys:
@@ -1573,6 +1585,15 @@ def _validate_image_pull_secrets(self, proposal):
                     'profile_options': {
                         'image': {
                             'display_name': 'Image',
+                            'unlisted_choice': {
+                                'enabled': true,
+                                'display_name': 'Image Location',
+                                'validation_regex': '^pangeo/.*$',
+                                'validation_message': 'Must be a pangeo image, matching ^pangeo/.*$',
+                                'kubespawner_override': {
+                                    'image': '{value}'
+                                }
+                            },
                             'choices': {
                                 'pytorch': {
                                     'display_name': 'Python 3 Training Notebook',
@@ -2991,6 +3012,48 @@ def _options_from_form(self, formdata):
 
         return options
 
+    def _validate_posted_profile_options(self, profile, selected_options):
+        """
+        Validate posted user options against the selected profile
+
+        The default form is rendered in such a way that each option specified in
+        the profile *must* have a value in the POST body. Extra options in the
+        POST body are ignored. We only honor options that are defined
+        in the selected profile *and* are in the form data
+        posted. This prevents users who may be authorized to only use
+        one profile from being able to access options set for other
+        profiles
+        """
+        for option_name, option in profile.get('profile_options').items():
+            unlisted_choice_form_key = f'{option_name}--unlisted-choice'
+            if option_name not in selected_options:
+                # unlisted_choice is enabled:
+                if option.get('unlisted_choice', {}).get('enabled', False):
+                    if unlisted_choice_form_key not in selected_options:
+                        raise ValueError(
+                            f'Expected option {option_name} for profile {profile["slug"]} or {unlisted_choice_form_key}, not found in posted form'
+                        )
+                    unlisted_choice = selected_options[unlisted_choice_form_key]
+
+                    # Validate value of 'unlisted_choice' against validation regex
+                    if profile.get('profile_options')[option_name][
+                        'unlisted_choice'
+                    ].get('validation_regex', False):
+                        unlisted_choice_validation_regex = profile.get(
+                            'profile_options'
+                        )[option_name]['unlisted_choice']['validation_regex']
+                        if not re.match(
+                            unlisted_choice_validation_regex, unlisted_choice
+                        ):
+                            raise ValueError(
+                                f'Value of {unlisted_choice_form_key} does not match validation regex.'
+                            )
+                # unlisted_choice is Disabled
+                else:
+                    raise ValueError(
+                        f'Expected option {option_name} for profile {profile["slug"]}, not found in posted form'
+                    )
+
     async def _load_profile(self, slug, selected_profile_user_options):
         """Load a profile by name
 
@@ -3041,24 +3104,12 @@ async def _load_profile(self, slug, selected_profile_user_options):
                 setattr(self, k, v)
 
         if profile.get('profile_options'):
-            # each option specified here *must* have a value in our POST, as we
-            # render our HTML such that there's always something selected.
-
-            # We only honor options that are defined in the selected profile *and*
-            # are in the form data posted. This prevents users who may be authorized
-            # to only use one profile from being able to access options set for other
-            # profiles
-            for user_selected_option_name in selected_profile_user_options.keys():
-                if (
-                    user_selected_option_name
-                    not in profile.get('profile_options').keys()
-                ):
-                    raise ValueError(
-                        f'Expected option {user_selected_option_name} for profile {profile["slug"]}, not found in posted form'
-                    )
-
+            self._validate_posted_profile_options(
+                profile, selected_profile_user_options
+            )
             # Get selected options or default to the first option if none is passed
             for option_name, option in profile.get('profile_options').items():
+                unlisted_choice_form_key = f'{option_name}--unlisted-choice'
                 chosen_option = selected_profile_user_options.get(option_name, None)
                 # If none was selected get the default
                 if not chosen_option:
@@ -3069,9 +3120,25 @@ async def _load_profile(self, slug, selected_profile_user_options):
                             default_option = choice_name
                     chosen_option = default_option
 
-                chosen_option_overrides = option['choices'][chosen_option][
-                    'kubespawner_override'
-                ]
+                # Handle override for unlisted_choice free text specified by user
+                if (
+                    option.get('unlisted_choice', {}).get('enabled', False)
+                    and unlisted_choice_form_key in selected_profile_user_options
+                ):
+                    chosen_option_overrides = option['unlisted_choice'][
+                        'kubespawner_override'
+                    ]
+                    for k, v in chosen_option_overrides.items():
+                        chosen_option_overrides[k] = v.format(
+                            value=selected_profile_user_options[
+                                unlisted_choice_form_key
+                            ]
+                        )
+                else:
+                    chosen_option_overrides = option['choices'][chosen_option][
+                        'kubespawner_override'
+                    ]
+
                 for k, v in chosen_option_overrides.items():
                     if callable(v):
                         v = await maybe_future(v(self))

kubespawner/templates/form.html

@@ -17,15 +17,33 @@ <h3>{{ profile.display_name }}</h3>
         {%- if profile.profile_options %}
           <div>
             {%- for k, option in profile.profile_options.items() %}
-              <div class="option">
-                <label for="profile-option-{{ profile.slug }}-{{ k }}"
-                       class="js-profile-option-label">{{ option.display_name }}</label>
-                <select name="profile-option-{{ profile.slug }}-{{ k }}"
-                        class="form-control js-profile-option-select">
-                  {%- for k, choice in option['choices'].items() %}
-                    <option value="{{ k }}" {% if choice.default %}selected{% endif %}>{{ choice.display_name }}</option>
-                  {%- endfor %}
-                </select>
+              <div class="js-options-container">
+                <div class="option">
+                  <label for="profile-option-{{ profile.slug }}-{{ k }}"
+                         class="js-profile-option-label">{{ option.display_name }}</label>
+                  <select name="profile-option-{{ profile.slug }}-{{ k }}"
+                          class="form-control js-profile-option-select">
+                    {%- for k, choice in option['choices'].items() %}
+                      <option value="{{ k }}" {% if choice.default %}selected{% endif %}>{{ choice.display_name }}</option>
+                    {%- endfor %}
+                    {%- if option['unlisted_choice'] and option['unlisted_choice']['enabled'] %}
+                      <option value="unlisted-choice">Other...</option>
+                    {%- endif %}
+                  </select>
+                </div>
+                {%- if option['unlisted_choice'] and option['unlisted_choice']['enabled'] %}
+                  <div class="option hidden js-other-input-container">
+                    <label for="profile-option-{{ profile.slug }}-{{ k }}--unlisted-choice">
+                      {{ option['unlisted_choice']['display_name'] }}
+                    </label>
+                    <input data-name="profile-option-{{ profile.slug }}-{{ k }}--unlisted-choice"
+                           {%- if option['unlisted_choice']['validation_regex'] %}
+                           pattern="{{ option['unlisted_choice']['validation_regex'] }}"
+                           {%- endif %}
+                           title="{{ option['unlisted_choice']['validation_message'] }}"
+                           class="form-control js-other-input" />
+                  </div>
+                {%- endif %}
               </div>
             {%- endfor %}
           </div>
@@ -41,4 +59,40 @@ <h3>{{ profile.display_name }}</h3>
       .find('input[type=radio]')
       .prop('checked', true);
   });
+
+  // If the user selects "Other" in the dropdown, show the free text field
+  $('.js-profile-option-select').change(function() {
+    const selectionValue = $(this).val();
+    const $otherInputContainer = $(this).parents('.js-options-container').find('.js-other-input-container');
+    const $otherInput = $(this).parents('.js-options-container').find('.js-other-input');
+    if (selectionValue === 'unlisted-choice') {
+
+      // if the Select box is selected with a value that is not 'unlisted-choice',
+      // we remove the "name" attribute for the unlisted-choice input
+      // and vice-versa, so that we only submit valid form values
+      // and don't leave the complexity of figuring out which value
+      // to use to the back-end.
+
+      // This can probably be done cleaner by completely refactoring
+      // how we send values from the frontend.
+      $(this).data('name', $(this).attr('name'));
+      $(this).removeAttr('name');
+      $otherInput.attr('name', $otherInput.data('name'));
+      $otherInputContainer.removeClass('hidden');
+    } else {
+      $otherInput.removeAttr('name');
+      $(this).attr('name', $(this).data('name'));
+      $otherInputContainer.addClass('hidden');
+    }
+  });
+
+  // wrapping in a document.ready to make clear this is executed once
+  // on page load
+  $(document).ready(() => {
+    // trigger the `change` event on the select inputs,
+    // so that if "Other" is selected on page load, the corresponding
+    // free-text input shows
+    $('.js-profile-option-select').trigger('change');
+  });
+
 </script>