Backport: Modify "select all/deselect all" button to become an "All" …

…checkbox to save horizontal space

app/assets/stylesheets/spotlight/_blacklight_configuration.scss

@@ -11,13 +11,11 @@
       @include edit-in-place-highlighting;
     }
 
-    // the effect of position: relative on table elements is undefined, so put a div in there.
-    // this fix is for Firefox
     .handle-wrap {
-      position: relative;
       padding: 0.75rem 0.75rem 0.75rem 40px;
       margin: 0;
       margin-top: -1px;
+      height: 100%;
     }
 
     .dd3-handle:before {
@@ -77,7 +75,10 @@
   .metadata-select {
     display: inline-block;
     text-wrap: nowrap;
-    min-width: 72px;
+  }
+
+  .select-label {
+    font-weight: normal;
   }
 }
 

app/helpers/spotlight/application_helper.rb

@@ -124,14 +124,13 @@ def selected_search_block_views(block)
       end.keys.map(&:to_s)
     end
 
-    def select_deselect_button
-      button_tag(
-        t(:'.deselect_all'),
-        class: 'btn btn-secondary btn-sm metadata-select',
+    # Create checkbox for selecting/deselecting metadata fields for a given view in metadata configuration
+    def select_deselect_action(id)
+      check_box_tag(
+        id,
+        class: 'metadata-select',
         data: {
-          behavior: 'metadata-select',
-          'deselect-text' => t(:'.deselect_all'),
-          'select-text' => t(:'.select_all')
+          behavior: 'metadata-select'
         }
       )
     end

app/javascript/spotlight/admin/blacklight_configuration.js

@@ -1,53 +1,50 @@
 export default class {
   connect() {
-    // Add Select/Deselect all button behavior
+    // Add Select/Deselect all input behavior
     this.addCheckboxToggleBehavior();
     this.addEnableToggleBehavior();
   }
 
-  // Add Select/Deselect all button behavior
+  // Add Select/Deselect all behavior for metadata field names for a given view e.g. Item details. 
   addCheckboxToggleBehavior() {
     $("[data-behavior='metadata-select']").each(function(){
-      var button = $(this)
-      var parentCell = button.parents("th");
+      var selectCheckbox = $(this);
+      var parentCell = selectCheckbox.parents("th");
       var table = parentCell.closest("table");
       var columnRows = $("tr td:nth-child(" + (parentCell.index() + 1) + ")", table);
       var checkboxes = $("input[type='checkbox']", columnRows);
-      swapSelectAllButtonText(button, columnRows);
-      // Add the check/uncheck behavior to the button
-      // and swap the button text if necessary
-      button.on('click', function(e){
-        e.preventDefault();
+      updateSelectAllInput(selectCheckbox, columnRows);
+      // Add the check/uncheck behavior to the select/deselect all checkbox
+      selectCheckbox.on('click', function(e){
         var allChecked = allCheckboxesChecked(columnRows);
         columnRows.each(function(){
           $("input[type='checkbox']", $(this)).prop('checked', !allChecked);
-          swapSelectAllButtonText(button, columnRows);
         });
       });
-      // Swap button text when a checkbox value changes
+      // When a single checkbox is selected/unselected, the "All" checkbox should be updated accordingly.
       checkboxes.each(function(){
         $(this).on('change', function(){
-          swapSelectAllButtonText(button, columnRows);
+          updateSelectAllInput(selectCheckbox, columnRows);
         });
-      });
+      }); 
     });
+
     // Check number of checkboxes against the number of checked
     // checkboxes to determine if all of them are checked or not
     function allCheckboxesChecked(elements) {
       return ($("input[type='checkbox']", elements).length == $("input[type='checkbox']:checked", elements).length)
     }
-    // Swap the button text to "Deselect all"
-    // when all the checkboxes are checked and
-    // "Select all" when any are unchecked
-    function swapSelectAllButtonText(button, elements) {
+
+    // Check or uncheck the "All" checkbox for each view column, e.g. Item details, List, etc.
+    function updateSelectAllInput(checkbox, elements) {
       if ( allCheckboxesChecked(elements) ) {
-        button.text(button.data('deselect-text'));
+        checkbox.prop('checked', true);
       } else {
-        button.text(button.data('select-text'));
+        checkbox.prop('checked', false);
       }
     }
   }
-
+    
   addEnableToggleBehavior() {
     $("[data-behavior='enable-feature']").each(function(){
       var checkbox = $(this);
@@ -62,4 +59,4 @@ export default class {
       });
     });
   }
-}
+}

app/views/spotlight/metadata_configurations/edit.html.erb

@@ -16,14 +16,24 @@
             <div>
               <%= t :'.view.show' %>
             </div>
-            <%= select_deselect_button %>
+            <div class="text-center">
+              <%= label_tag 'item_details', class: 'select-label'  do %>
+                <%= select_deselect_action(t :'.view.select_id') %>
+                <%= t(:'.select_all') %>
+              <% end %>
+            </div>
           </th>
           <% available_view_fields.keys.each do |type| %>
             <th class="text-center">
               <div>
                 <%= t :".view.#{type}", default: t("blacklight.search.view.#{type}", default: type.to_s.humanize.titleize) %>
               </div>
-              <%= select_deselect_button %>
+              <div class="text-center">
+                <%= label_tag t(:'.deselect_all') + type.to_s, class: 'select-label'  do %>
+                  <%= select_deselect_action(t(:'.deselect_all') + type.to_s) %>
+                  <%= t(:'.select_all') %>
+                <% end %>
+              </div>
             </th>
           <% end %>
           <th class="text-center"><%= t :'.type_label' %></th>

config/locales/spotlight.en.yml

@@ -720,7 +720,7 @@ en:
         header: Metadata
         instructions: Select metadata fields to display on each type of page. Select a field name to edit its display label. Drag and drop fields to specify the order in which they are displayed.
         order_header: Display and order metadata fields
-        select_all: Select all
+        select_all: All
         type_label: Type
         view:
           show: Item details

spec/features/javascript/metadata_admin_spec.rb

@@ -6,35 +6,42 @@
 
   before { login_as admin }
 
-  describe 'Select/Deselect all button' do
+  describe 'Select/Deselect all checkbox' do
     it 'deselects all checkboxes when all are selected' do
       visit spotlight.edit_exhibit_metadata_configuration_path exhibit
-      # No checkboxes should be unchecked
+
+      # All checkboxes in the item details column should checked
       expect(page).to have_no_css("tr td:nth-child(2) input[type='checkbox']:not(:checked)")
+      # In the scope of the th element which contains the checkbox
       within('tr th:nth-child(2)') do
-        click_button 'Deselect all'
-        expect(page).to have_css('button', text: 'Select all', visible: true)
+        find("input[type='checkbox']").set(false)
       end
-      # No checkboxes should be checked
+      # After unchecking the all checkbox, all checkboxes in the item details column should be unchecked
       expect(page).to have_no_css("tr td:nth-child(2) input[type='checkbox']:checked")
     end
 
     it 'selects all checkboxes when any are unselected' do
       visit spotlight.edit_exhibit_metadata_configuration_path exhibit
+
       # No checkboxes should be unchecked
       expect(page).to have_no_css("tr td:nth-child(2) input[type='checkbox']:not(:checked)")
-      first_button_area = find('tr th:nth-child(2)')
-      within first_button_area do
-        expect(page).to have_css('button', text: 'Deselect all')
+      # Find the "All" checkbox in the th field for the item details column
+      first_checkbox_area = find('tr th:nth-child(2)')
+      within first_checkbox_area do
+        expect(page).to have_css("input[type='checkbox']")
+        expect(page).to have_css('label', text: 'All')
       end
-      # Uncheck first checkbox
+      # Uncheck first metadata field checkbox in the item details column
       find("tr:first-child td:nth-child(2) input[type='checkbox']").set(false)
-      # A checkbox should be checked
+      # Unchecking the first metadata checkbox should not uncheck other metadata field checkboxes
       expect(page).to have_css("tr td:nth-child(2) input[type='checkbox']:checked")
-      within first_button_area do
-        click_button 'Select all'
+      within first_checkbox_area do
+        # Unchecking one of the checkboxes should also uncheck "All"
+        expect(page).to have_css("input[type='checkbox']:not(:checked)")
+        # Check the "All" checkbox for the item details column
+        find("input[type='checkbox']").set(true)
       end
-      # No checkboxes should be unchecked
+      # After clicking "All", all checkboxes should be checked
       expect(page).to have_no_css("tr td:nth-child(2) input[type='checkbox']:not(:checked)")
     end
   end

spec/views/spotlight/metadata_configurations/_metadata_field.html.erb_spec.rb

@@ -19,7 +19,7 @@
       current_exhibit: exhibit,
       blacklight_config: exhibit.blacklight_configuration.blacklight_config,
       available_view_fields: { some_view_type: 1, another_view_type: 2 },
-      select_deselect_button: nil
+      select_deselect_action: nil
     )
   end
 

spec/views/spotlight/metadata_configurations/edit.html.erb_spec.rb

@@ -11,7 +11,7 @@
       blacklight_config: exhibit.blacklight_configuration.blacklight_config,
       available_view_fields: { some_view_type: 1, another_view_type: 2 },
       exhibit_alt_text_path: '/',
-      select_deselect_button: nil
+      select_deselect_action: nil
     )
     allow(controller).to receive(:enabled_in_spotlight_view_type_configuration?).and_return(true)
   end