add the ability for data-hide- directives on checkboxes (#3199)

Add support for data-hide- directives on checkboxes.

apps/dashboard/app/javascript/dynamic_forms.js

@@ -158,16 +158,29 @@ function makeChangeHandlers(prefix){
             });
           }
       });
+    } else if(element['type'] == "checkbox") {
+      let data = $(element).data();
+      let keys = Object.keys(data);
+      if(keys.length !== 0) {
+        keys.forEach((key) => {
+          if(key.startsWith('hide')) {
+            let tokens = parseCheckedWhen(key);
+            if(tokens !== undefined){
+              addHideHandler(element['id'], tokens['value'], tokens['key'], data[key]);
+            }
+          }
+        });
+      }
     }
   });
 
   initializing = false;
 };
 
-function addHideHandler(optionId, option, key,  configValue) {
+function addHideHandler(optionId, option, key, configValue) {
   const changeId = idFromToken(key.replace(/^hide/,''));
 
-  if(hideLookup[optionId] === undefined) hideLookup[optionId] = new Table(changeId, 'option_value');
+  if(hideLookup[optionId] === undefined) hideLookup[optionId] = new Table(changeId, undefined);
   const table = hideLookup[optionId];
   table.put(changeId, option, configValue);
 
@@ -260,7 +273,7 @@ function addMinMaxForHandler(subjectId, option, key,  configValue) {
  *        data-set-account: 'phy3005'
  *      ]
  */
-function addSetHandler(optionId, option, key,  configValue) {
+function addSetHandler(optionId, option, key, configValue) {
   const k = key.replace(/^set/,'');
   const id = String(idFromToken(k));
   if(id === 'undefined') return;
@@ -387,7 +400,7 @@ class Table {
  * event and what's in the hideLookup table.
  */
 function updateVisibility(event, changeId) {
-  const val = event.target.value;
+  const val = valueFromEvent(event);
   const id = event.target['id'];
   let changeElement = undefined;
   $(`#${changeId}`).parents().each(function(_i, parent) {
@@ -408,6 +421,15 @@ function updateVisibility(event, changeId) {
   }
 }
 
+// extract the value from the event. With checkbox being
+// handleded specially.
+function valueFromEvent(event) {
+  if(event.target['type'] == 'checkbox') {
+    return event.target.checked ? 'checked' : 'unchecked';
+  } else {
+    return event.target.value;
+  }
+}
 /**
  * Update the min & max values of `changeId` based on the
  * event, the `otherId` and the settings in minMaxLookup table.
@@ -497,6 +519,19 @@ function addOptionForHandler(causeId, targetId) {
   }
 };
 
+function parseCheckedWhen(key) {
+  const tokens = key.match(/^hide(\w+)When(\w+)$/);
+
+  if(tokens !== undefined && tokens.length && tokens.length == 3) {
+    return {
+      'key': tokens[1],
+      'value': tokens[2].toLowerCase() == 'checked' ? 'checked' : 'unchecked'
+    };
+  } else {
+    return undefined;
+  }
+}
+
 /**
  *
  * @param {*} key minNumCoresForClusterAnnieOakley

apps/dashboard/test/system/batch_connect_test.rb

@@ -493,6 +493,91 @@ def make_bc_app(dir, form)
     assert find("##{bc_ele_id('advanced_options')}").visible?
   end
 
+  test 'hiding using check boxes based on when checked' do
+    Dir.mktmpdir do |dir|
+      "#{dir}/app".tap { |d| Dir.mkdir(d) }
+      SysRouter.stubs(:base_path).returns(Pathname.new(dir))
+      stub_scontrol
+      stub_sacctmgr
+      stub_git("#{dir}/app")
+
+      form = <<~HEREDOC
+        ---
+        cluster:
+          - owens
+        form:
+          - gpus
+          - checkbox_test
+        attributes:
+          gpus:
+            widget: 'number_field'
+          checkbox_test:
+            widget: 'check_box'
+            html_options:
+              data:
+                hide-gpus-when-checked: true
+      HEREDOC
+
+      Pathname.new("#{dir}/app/").join('form.yml').write(form)
+      visit new_batch_connect_session_context_url('sys/app')
+
+      # defaults
+      refute(find("##{bc_ele_id('checkbox_test')}").checked?)
+      assert(find("##{bc_ele_id('gpus')}").visible?)
+
+      # check the checkbox, and 'gpus' is hidden
+      check(bc_ele_id('checkbox_test'))
+      refute(find("##{bc_ele_id('gpus')}", visible: :hidden).visible?)
+
+      # un-check the checkbox, and 'gpus' is back
+      uncheck(bc_ele_id('checkbox_test'))
+      assert(find("##{bc_ele_id('gpus')}").visible?)
+    end
+  end
+
+
+  test 'hiding using check boxes based on when unchecked' do
+    Dir.mktmpdir do |dir|
+      "#{dir}/app".tap { |d| Dir.mkdir(d) }
+      SysRouter.stubs(:base_path).returns(Pathname.new(dir))
+      stub_scontrol
+      stub_sacctmgr
+      stub_git("#{dir}/app")
+
+      form = <<~HEREDOC
+        ---
+        cluster:
+          - owens
+        form:
+          - gpus
+          - checkbox_test
+        attributes:
+          gpus:
+            widget: 'number_field'
+          checkbox_test:
+            widget: 'check_box'
+            html_options:
+              data:
+                hide-gpus-when-not-checked: true
+      HEREDOC
+
+      Pathname.new("#{dir}/app/").join('form.yml').write(form)
+      visit new_batch_connect_session_context_url('sys/app')
+
+      # defaults
+      refute(find("##{bc_ele_id('checkbox_test')}").checked?)
+      refute(find("##{bc_ele_id('gpus')}", visible: :hidden).visible?)
+
+      # check the checkbox, and 'gpus' is visible
+      check(bc_ele_id('checkbox_test'))
+      assert(find("##{bc_ele_id('gpus')}").visible?)
+
+      # un-check the checkbox, and 'gpus' is back to being hidden
+      uncheck(bc_ele_id('checkbox_test'))
+      refute(find("##{bc_ele_id('gpus')}", visible: :hidden).visible?)
+    end
+  end
+
   test 'options with hyphens set min & max' do
     visit new_batch_connect_session_context_url('sys/bc_jupyter')