From 969fcbad4d661220d5429935deceb8036d6c30d2 Mon Sep 17 00:00:00 2001
From: Sanjay Bhangar <sanjay@developmentseed.org>
Date: Mon, 1 May 2023 14:10:25 +0530
Subject: [PATCH 1/8] select radio when corresponding select is changed,
 addresses #696

---
 kubespawner/templates/form.html | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/kubespawner/templates/form.html b/kubespawner/templates/form.html
index 97047552..7f19724b 100644
--- a/kubespawner/templates/form.html
+++ b/kubespawner/templates/form.html
@@ -2,7 +2,7 @@
 <div class="form-group" id="kubespawner-profiles-list">
   {%- for profile in profile_list %}
     {#- Wrap everything in a label tag so clicking anywhere selects the option #}
-    <label for="profile-item-{{ profile.slug }}" class="profile">
+    <label for="profile-item-{{ profile.slug }}" class="profile js-profile-label">
       <div class="radio">
         <input type="radio"
                name="profile"
@@ -18,7 +18,7 @@ <h3>{{ profile.display_name }}</h3>
             {%- for k, option in profile.profile_options.items() %}
               <div class="option">
                 <label for="profile-option-{{ profile.slug }}-{{ k }}">{{ option.display_name }}</label>
-                <select name="profile-option-{{ profile.slug }}-{{ k }}" class="form-control">
+                <select name="profile-option-{{ profile.slug }}-{{ k }}" class="js-profile-option-select form-control">
                   {%- for k, choice in option['choices'].items() %}
                     <option value="{{ k }}" {% if choice.default %}selected{% endif %}>{{ choice.display_name }}</option>
                   {%- endfor %}
@@ -31,3 +31,10 @@ <h3>{{ profile.display_name }}</h3>
     </label>
   {%- endfor %}
 </div>
+<script>
+  $('.js-profile-option-select').change(function() {
+    // if the user changes a select box of an option,
+    // make sure we also select that option
+    $(this).parents('.js-profile-label').find('input[type=radio]').prop('checked', true);
+  });
+</script>

From c4481548dfdefac7bbfd66a1a03f3bb5d83fc4f2 Mon Sep 17 00:00:00 2001
From: Sanjay Bhangar <sanjay@developmentseed.org>
Date: Mon, 1 May 2023 14:17:07 +0530
Subject: [PATCH 2/8] minor, edit comment and format JS

---
 kubespawner/templates/form.html | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/kubespawner/templates/form.html b/kubespawner/templates/form.html
index 7f19724b..7d61e797 100644
--- a/kubespawner/templates/form.html
+++ b/kubespawner/templates/form.html
@@ -33,8 +33,10 @@ <h3>{{ profile.display_name }}</h3>
 </div>
 <script>
   $('.js-profile-option-select').change(function() {
-    // if the user changes a select box of an option,
-    // make sure we also select that option
-    $(this).parents('.js-profile-label').find('input[type=radio]').prop('checked', true);
+    // if the user changes a select box of a profile option,
+    // make sure we also select the radio button for that option
+    $(this).parents('.js-profile-label')
+      .find('input[type=radio]')
+      .prop('checked', true);
   });
 </script>

From bf760b4e94eee6d1d01ae2671bfbadb187990c01 Mon Sep 17 00:00:00 2001
From: Sanjay Bhangar <sanjay@developmentseed.org>
Date: Wed, 17 May 2023 14:56:59 +0530
Subject: [PATCH 3/8] bind to click event, not change, so profile gets selected
 even when option is not changed

---
 kubespawner/templates/form.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/kubespawner/templates/form.html b/kubespawner/templates/form.html
index 7d61e797..f59f73aa 100644
--- a/kubespawner/templates/form.html
+++ b/kubespawner/templates/form.html
@@ -32,7 +32,7 @@ <h3>{{ profile.display_name }}</h3>
   {%- endfor %}
 </div>
 <script>
-  $('.js-profile-option-select').change(function() {
+  $('.js-profile-option-select').click(function() {
     // if the user changes a select box of a profile option,
     // make sure we also select the radio button for that option
     $(this).parents('.js-profile-label')

From 36368cc3310d29c4480c3e7f8949575817072b66 Mon Sep 17 00:00:00 2001
From: Sanjay Bhangar <sanjay@developmentseed.org>
Date: Wed, 17 May 2023 15:06:20 +0530
Subject: [PATCH 4/8] add click-to-select profile to label as well

---
 kubespawner/templates/form.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/kubespawner/templates/form.html b/kubespawner/templates/form.html
index f59f73aa..b5664766 100644
--- a/kubespawner/templates/form.html
+++ b/kubespawner/templates/form.html
@@ -17,7 +17,7 @@ <h3>{{ profile.display_name }}</h3>
           <div>
             {%- for k, option in profile.profile_options.items() %}
               <div class="option">
-                <label for="profile-option-{{ profile.slug }}-{{ k }}">{{ option.display_name }}</label>
+                <label for="profile-option-{{ profile.slug }}-{{ k }}" class="js-profile-option-label">{{ option.display_name }}</label>
                 <select name="profile-option-{{ profile.slug }}-{{ k }}" class="js-profile-option-select form-control">
                   {%- for k, choice in option['choices'].items() %}
                     <option value="{{ k }}" {% if choice.default %}selected{% endif %}>{{ choice.display_name }}</option>
@@ -32,7 +32,7 @@ <h3>{{ profile.display_name }}</h3>
   {%- endfor %}
 </div>
 <script>
-  $('.js-profile-option-select').click(function() {
+  $('.js-profile-option-select, .js-profile-option-label').click(function() {
     // if the user changes a select box of a profile option,
     // make sure we also select the radio button for that option
     $(this).parents('.js-profile-label')

From 79f54b76dd9c1df88170d7d483f535a786fdac06 Mon Sep 17 00:00:00 2001
From: Sanjay Bhangar <sanjay@developmentseed.org>
Date: Wed, 17 May 2023 16:16:22 +0530
Subject: [PATCH 5/8] cleanup formatting, comments

---
 kubespawner/templates/form.html | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/kubespawner/templates/form.html b/kubespawner/templates/form.html
index b5664766..69d34276 100644
--- a/kubespawner/templates/form.html
+++ b/kubespawner/templates/form.html
@@ -17,10 +17,15 @@ <h3>{{ profile.display_name }}</h3>
           <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="js-profile-option-select form-control">
+                <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>
+                    <option value="{{ k }}" {% if choice.default %}selected{% endif %}>
+                      {{ choice.display_name }}
+                    </option>
                   {%- endfor %}
                 </select>
               </div>
@@ -33,8 +38,8 @@ <h3>{{ profile.display_name }}</h3>
 </div>
 <script>
   $('.js-profile-option-select, .js-profile-option-label').click(function() {
-    // if the user changes a select box of a profile option,
-    // make sure we also select the radio button for that option
+    // if the user clicks on either the select or label for the select,
+    // make sure to select the associated profile radio.
     $(this).parents('.js-profile-label')
       .find('input[type=radio]')
       .prop('checked', true);

From 9904a7087b89211d9e02eeae057c07b9af88c7d4 Mon Sep 17 00:00:00 2001
From: Sanjay Bhangar <sanjay@developmentseed.org>
Date: Wed, 17 May 2023 18:23:40 +0530
Subject: [PATCH 6/8] use <span> instead of <label>, remove js to handle
 clicking on labels for the select

---
 kubespawner/templates/form.html | 12 +++++-------
 kubespawner/templates/style.css |  2 +-
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/kubespawner/templates/form.html b/kubespawner/templates/form.html
index 69d34276..8a819790 100644
--- a/kubespawner/templates/form.html
+++ b/kubespawner/templates/form.html
@@ -17,11 +17,10 @@ <h3>{{ profile.display_name }}</h3>
           <div>
             {%- for k, option in profile.profile_options.items() %}
               <div class="option">
-                <label for="profile-option-{{ profile.slug }}-{{ k }}" class="js-profile-option-label">
+                <span class="profile-options-label">
                   {{ option.display_name }}
-                </label>
-                <select name="profile-option-{{ profile.slug }}-{{ k }}"
-                        class="form-control js-profile-option-select">
+                </span>
+                <select name="profile-option-{{ profile.slug }}-{{ k }}">
                   {%- for k, choice in option['choices'].items() %}
                     <option value="{{ k }}" {% if choice.default %}selected{% endif %}>
                       {{ choice.display_name }}
@@ -37,9 +36,8 @@ <h3>{{ profile.display_name }}</h3>
   {%- endfor %}
 </div>
 <script>
-  $('.js-profile-option-select, .js-profile-option-label').click(function() {
-    // if the user clicks on either the select or label for the select,
-    // make sure to select the associated profile radio.
+  $('.js-profile-option-select').click(function() {
+    // we need this bit of JS to select the profile when a <select> inside is clicked.
     $(this).parents('.js-profile-label')
       .find('input[type=radio]')
       .prop('checked', true);
diff --git a/kubespawner/templates/style.css b/kubespawner/templates/style.css
index 5538e9fe..85d1366d 100644
--- a/kubespawner/templates/style.css
+++ b/kubespawner/templates/style.css
@@ -22,7 +22,7 @@
   padding-bottom: 12px;
 }
 
-#kubespawner-profiles-list .profile .option label {
+#kubespawner-profiles-list .profile-options-label {
   font-weight: normal;
   margin-right: 8px;
   min-width: 96px;

From 28b328179931095c1cbbac90aa45b6ae0ce983b7 Mon Sep 17 00:00:00 2001
From: Sanjay Bhangar <sanjay@developmentseed.org>
Date: Wed, 17 May 2023 18:25:58 +0530
Subject: [PATCH 7/8] autoformatting

---
 kubespawner/templates/form.html | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/kubespawner/templates/form.html b/kubespawner/templates/form.html
index 8a819790..f517447d 100644
--- a/kubespawner/templates/form.html
+++ b/kubespawner/templates/form.html
@@ -2,7 +2,8 @@
 <div class="form-group" id="kubespawner-profiles-list">
   {%- for profile in profile_list %}
     {#- Wrap everything in a label tag so clicking anywhere selects the option #}
-    <label for="profile-item-{{ profile.slug }}" class="profile js-profile-label">
+    <label for="profile-item-{{ profile.slug }}"
+           class="profile js-profile-label">
       <div class="radio">
         <input type="radio"
                name="profile"
@@ -17,14 +18,10 @@ <h3>{{ profile.display_name }}</h3>
           <div>
             {%- for k, option in profile.profile_options.items() %}
               <div class="option">
-                <span class="profile-options-label">
-                  {{ option.display_name }}
-                </span>
+                <span class="profile-options-label">{{ option.display_name }}</span>
                 <select name="profile-option-{{ profile.slug }}-{{ k }}">
                   {%- for k, choice in option['choices'].items() %}
-                    <option value="{{ k }}" {% if choice.default %}selected{% endif %}>
-                      {{ choice.display_name }}
-                    </option>
+                    <option value="{{ k }}" {% if choice.default %}selected{% endif %}>{{ choice.display_name }}</option>
                   {%- endfor %}
                 </select>
               </div>

From 25bf70327373d3c0007d06a1d60d2e305f53d664 Mon Sep 17 00:00:00 2001
From: Sanjay Bhangar <sanjay@developmentseed.org>
Date: Thu, 18 May 2023 11:13:44 +0530
Subject: [PATCH 8/8] revert to using label instead of span, add back
 form-control class to select

---
 kubespawner/templates/form.html | 8 +++++---
 kubespawner/templates/style.css | 2 +-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/kubespawner/templates/form.html b/kubespawner/templates/form.html
index f517447d..69464514 100644
--- a/kubespawner/templates/form.html
+++ b/kubespawner/templates/form.html
@@ -18,8 +18,10 @@ <h3>{{ profile.display_name }}</h3>
           <div>
             {%- for k, option in profile.profile_options.items() %}
               <div class="option">
-                <span class="profile-options-label">{{ option.display_name }}</span>
-                <select name="profile-option-{{ profile.slug }}-{{ k }}">
+                <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 %}
@@ -33,7 +35,7 @@ <h3>{{ profile.display_name }}</h3>
   {%- endfor %}
 </div>
 <script>
-  $('.js-profile-option-select').click(function() {
+  $('.js-profile-option-select, .js-profile-option-label').click(function() {
     // we need this bit of JS to select the profile when a <select> inside is clicked.
     $(this).parents('.js-profile-label')
       .find('input[type=radio]')
diff --git a/kubespawner/templates/style.css b/kubespawner/templates/style.css
index 85d1366d..5538e9fe 100644
--- a/kubespawner/templates/style.css
+++ b/kubespawner/templates/style.css
@@ -22,7 +22,7 @@
   padding-bottom: 12px;
 }
 
-#kubespawner-profiles-list .profile-options-label {
+#kubespawner-profiles-list .profile .option label {
   font-weight: normal;
   margin-right: 8px;
   min-width: 96px;