Make column selector a dropdown

With some styling tweaks.

app/views/admin/column_preferences/_form.html.haml

@@ -3,12 +3,21 @@
     html: { 'data-controller': "column-preferences" } do |f|
   = hidden_field_tag :action_name, action
 
-  - ColumnPreference.for(spree_current_user, action).each_with_index do |column_preference, index|
-    = f.fields_for("column_preferences", column_preference, index:) do |cp_form|
-      = cp_form.hidden_field :id
-      = cp_form.hidden_field :column_name
-      %label
-        = cp_form.check_box :visible, 'data-column-name': column_preference.column_name
-        = t("admin.products_page.columns." + column_preference.column_name)
+  / DC: this makes my Chrome DevTools crash when inspecting the <details> element. If problem continues, we need to use a different method.
+  %details.ofn-drop-down.ofn-drop-down-v2.right{ 'data-controller': "dropdown" }
+    %summary.ofn-drop-down-label
+      = t('admin.columns')
+      %span.icon-caret
 
-  = f.submit t('admin.column_save_as_default')
+    .menu
+      .menu_items
+        - ColumnPreference.for(spree_current_user, action).each_with_index do |column_preference, index|
+          = f.fields_for("column_preferences", column_preference, index:) do |cp_form|
+            = cp_form.hidden_field :id
+            = cp_form.hidden_field :column_name
+            %label.menu_item
+              = cp_form.check_box :visible, 'data-column-name': column_preference.column_name
+              %span= t("admin.products_page.columns." + column_preference.column_name)
+
+      .actions
+        = f.submit t('admin.column_save_as_default'), class: "secondary fullwidth"

app/webpacker/controllers/dropdown_controller.js

@@ -1,5 +1,6 @@
 import { Controller } from "stimulus";
 
+// Close a <details> element when click outside
 export default class extends Controller {
 
   connect() {

app/webpacker/css/admin_v3/components/dropdown.scss

@@ -111,7 +111,7 @@
     top: 100%;
     left: 0px;
     padding: 5px 0px;
-    border: 1px solid #adadad;
+    border-radius: $border-radius;
     background-color: #ffffff;
     box-shadow: 1px 3px 10px #888888;
     z-index: 100;
@@ -280,6 +280,16 @@
       }
     }
   }
+
+  .actions {
+    margin-top: 5px;
+    margin-right: 15px; // Compensate for scrollbar on menu_items
+    padding: 2px 10px;
+
+    &:hover {
+      background-color: inherit;
+    }
+  }
 }
 
 .ofn-drop-down.ofn-drop-down-v2 {

spec/support/request/admin_helper.rb

@@ -3,10 +3,10 @@
 module AdminHelper
   def toggle_columns(*labels)
     # open dropdown
-    # case insensitive search for "Columns" text
-    find("div#columns-dropdown", text: /columns/i).click
+    columns_dropdown = ofn_drop_down("Columns")
+    columns_dropdown.click
 
-    within "div#columns-dropdown" do
+    within columns_dropdown do
       labels.each do |label|
         # Convert label to case-insensitive regexp if not one already
         label = /#{label}/i unless label.is_a?(Regexp)
@@ -16,6 +16,10 @@ module AdminHelper
     end
 
     # close dropdown
-    find("div#columns-dropdown", text: /columns/i).click
+    columns_dropdown.click
+  end
+
+  def ofn_drop_down(label)
+    find(".ofn-drop-down", text: /#{label}/i)
   end
 end

spec/system/admin/products_v3/products_spec.rb

@@ -3,6 +3,7 @@
 require "system_helper"
 
 RSpec.describe 'As an enterprise user, I can manage my products', feature: :admin_style_v3 do
+  include AdminHelper
   include WebHelper
   include AuthenticationHelper
   include FileHelper
@@ -38,26 +39,37 @@ RSpec.describe 'As an enterprise user, I can manage my products', feature: :admi
     end
 
     it "hides column and remembers saved preference" do
+      # Name shows by default
+      expect(page).to have_checked_field "Name"
       expect(page).to have_selector "th", text: "Name"
+      expect_other_columns_visible
+
+      # Name is hidden
+      ofn_drop_down("Columns").click
+      within ofn_drop_down("Columns") do
+        uncheck "Name"
+      end
+      # expect(page).not_to have_selector "th", text: "Name" # column is not visible, but capybara doesn't understand yet.
+      expect_other_columns_visible
+
+      # Preference saved
+      click_on "Save as default"
+      expect(page).to have_content "Column preferences saved"
+      refresh
+
+      # Preference remembered
+      ofn_drop_down("Columns").click
+      within ofn_drop_down("Columns") do
+        expect(page).to have_unchecked_field "Name"
+      end
+      # expect(page).not_to have_selector "th", text: "Name"
+      expect_other_columns_visible
+    end
+
+    def expect_other_columns_visible
       expect(page).to have_selector "th", text: "Producer"
       expect(page).to have_selector "th", text: "Price"
       expect(page).to have_selector "th", text: "On Hand"
-
-      uncheck "Name"
-
-      expect(page).not_to have_selector "th", text: "Name"
-      expect(page).to have_selector "th",     text: "Producer"
-      expect(page).to have_selector "th",     text: "Price"
-      expect(page).to have_selector "th",     text: "On Hand"
-
-      click_on "Save as default"
-      refresh
-      expect(page).to have_unchecked_field "Name"
-
-      expect(page).not_to have_selector "th", text: "Name"
-      expect(page).to have_selector "th",     text: "Producer"
-      expect(page).to have_selector "th",     text: "Price"
-      expect(page).to have_selector "th",     text: "On Hand"
     end
   end