spree_admin 5.1.7 → 5.2.0.rc1

data/app/models/spree/admin/form_builder.rb

@@ -0,0 +1,250 @@
+module Spree
+  module Admin
+    # Custom form builder for Spree admin interface
+    #
+    # This form builder provides helper methods for creating form fields with
+    # consistent styling and behavior across the Spree admin interface. It includes
+    # form groups, error handling, help text, and other features.
+    class FormBuilder < ActionView::Helpers::FormBuilder
+      # Display error messages for a specific field
+      #
+      # @param method [Symbol] the field name
+      # @param options [Hash] additional options for the error message
+      # @return [String] HTML string containing the error message
+      def error_message_on(method, options = {})
+        @template.error_message_on(@object_name, method, objectify_options(options))
+      end
+
+      # Create a text field with Spree form styling
+      #
+      # @param method [Symbol] the field name
+      # @param options [Hash] field options including:
+      #   - :class [String] CSS classes (defaults to 'form-control')
+      #   - :label [String, Boolean] label text or false to hide label
+      #   - :required [Boolean] whether field is required
+      #   - :help [String] help text to display below the field
+      #   - :help_bubble [String] help bubble text
+      # @return [String] HTML string containing the complete form group
+      def spree_text_field(method, options = {})
+        options[:class] ||= 'form-control'
+        @template.content_tag(:div, class: 'form-group') do
+          @template.label(@object_name, method, get_label(method, options)) +
+            @template.text_field(@object_name, method, objectify_options(options)) +
+            @template.error_message_on(@object_name, method) + field_help(method, options)
+        end
+      end
+
+      # Create a number field with Spree form styling
+      #
+      # @param method [Symbol] the field name
+      # @param options [Hash] field options (see {#spree_text_field} for available options)
+      # @return [String] HTML string containing the complete form group
+      def spree_number_field(method, options = {})
+        options[:class] ||= 'form-control'
+        @template.content_tag(:div, class: 'form-group') do
+          @template.label(@object_name, method, get_label(method, options)) +
+            @template.number_field(@object_name, method, objectify_options(options)) +
+            @template.error_message_on(@object_name, method) + field_help(method, options)
+        end
+      end
+
+      # Create an email field with Spree form styling
+      #
+      # @param method [Symbol] the field name
+      # @param options [Hash] field options (see {#spree_text_field} for available options)
+      # @return [String] HTML string containing the complete form group
+      def spree_email_field(method, options = {})
+        options[:class] ||= 'form-control'
+        @template.content_tag(:div, class: 'form-group') do
+          @template.label(@object_name, method, get_label(method, options)) +
+            @template.email_field(@object_name, method, objectify_options(options)) +
+            @template.error_message_on(@object_name, method) + field_help(method, options)
+        end
+      end
+
+      # Create a date field with Spree form styling
+      #
+      # @param method [Symbol] the field name
+      # @param options [Hash] field options (see {#spree_text_field} for available options)
+      # @return [String] HTML string containing the complete form group
+      def spree_date_field(method, options = {})
+        options[:class] ||= 'form-control'
+        @template.content_tag(:div, class: 'form-group') do
+          @template.label(@object_name, method, get_label(method, options)) +
+            @template.date_field(@object_name, method, objectify_options(options)) +
+            @template.error_message_on(@object_name, method) + field_help(method, options)
+        end
+      end
+
+      # Create a datetime field with Spree form styling
+      #
+      # @param method [Symbol] the field name
+      # @param options [Hash] field options (see {#spree_text_field} for available options)
+      # @return [String] HTML string containing the complete form group
+      def spree_datetime_field(method, options = {})
+        options[:class] ||= 'form-control'
+        @template.content_tag(:div, class: 'form-group') do
+          @template.label(@object_name, method, get_label(method, options)) +
+            @template.datetime_field(@object_name, method, objectify_options(options)) +
+            @template.error_message_on(@object_name, method) + field_help(method, options)
+        end
+      end
+
+      # Create a textarea with Spree form styling and auto-grow functionality
+      #
+      # @param method [Symbol] the field name
+      # @param options [Hash] field options including:
+      #   - :class [String] CSS classes (defaults to 'form-control')
+      #   - :rows [Integer] number of rows (defaults to 5)
+      #   - :data [Hash] data attributes (defaults to textarea-autogrow controller)
+      #   - other options from {#spree_text_field}
+      # @return [String] HTML string containing the complete form group
+      def spree_text_area(method, options = {})
+        @template.content_tag(:div, class: 'form-group') do
+          options[:class] ||= 'form-control'
+          options[:rows] ||= 5
+          options[:data] ||= { controller: 'textarea-autogrow' }
+
+          @template.label(@object_name, method, get_label(method, options)) +
+            @template.text_area(@object_name, method, objectify_options(options)) +
+            @template.error_message_on(@object_name, method) + field_help(method, options)
+        end
+      end
+
+      # Create a rich text area (Trix editor) with Spree form styling
+      #
+      # @param method [Symbol] the field name
+      # @param options [Hash] field options (see {#spree_text_field} for available options)
+      # @return [String] HTML string containing the complete form group with Trix editor
+      def spree_rich_text_area(method, options = {})
+        @template.content_tag(:div, class: 'form-group') do
+          @template.label(@object_name, method, get_label(method, options)) +
+            @template.content_tag(:div, class: 'trix-container') do
+              @template.rich_text_area(@object_name, method, objectify_options(options))
+            end +
+            @template.error_message_on(@object_name, method) + field_help(method, options)
+        end
+      end
+
+      # Create a select field with Spree form styling
+      #
+      # @param method [Symbol] the field name
+      # @param choices [Array, nil] options for the select field
+      # @param options [Hash] field options including:
+      #   - :autocomplete [Boolean] whether to enable autocomplete functionality
+      #   - other options from {#spree_text_field}
+      # @param html_options [Hash] HTML options for the select element
+      # @param block [Proc] optional block for generating options
+      # @return [String] HTML string containing the complete form group
+      def spree_select(method, choices = nil, options = {}, html_options = {}, &block)
+        if options[:autocomplete]
+          html_options[:data] ||= {}
+          html_options[:data][:controller] ||= 'autocomplete-select'
+        else
+          html_options[:class] ||= 'custom-select'
+        end
+
+        @template.content_tag(:div, class: 'form-group') do
+          @template.label(@object_name, method, get_label(method, options)) +
+            @template.select(@object_name, method, choices, objectify_options(options), html_options, &block) +
+            @template.error_message_on(@object_name, method) + field_help(method, options)
+        end
+      end
+
+      # Create a collection select field with Spree form styling
+      #
+      # @param method [Symbol] the field name
+      # @param collection [Array] collection of objects for the select options
+      # @param value_method [Symbol] method to call on each object for the option value
+      # @param text_method [Symbol] method to call on each object for the option text
+      # @param options [Hash] field options including:
+      #   - :autocomplete [Boolean] whether to enable autocomplete functionality
+      #   - other options from {#spree_text_field}
+      # @param html_options [Hash] HTML options for the select element
+      # @return [String] HTML string containing the complete form group
+      def spree_collection_select(method, collection, value_method, text_method, options = {}, html_options = {})
+        if options[:autocomplete]
+          html_options[:data] ||= {}
+          html_options[:data][:controller] ||= 'autocomplete-select'
+        else
+          html_options[:class] ||= 'custom-select'
+        end
+
+        @template.content_tag(:div, class: 'form-group') do
+          @template.label(@object_name, method, get_label(method, options)) +
+            @template.collection_select(@object_name, method, collection, value_method, text_method, objectify_options(options), html_options) +
+            @template.error_message_on(@object_name, method) + field_help(method, options)
+        end
+      end
+
+      # Create a checkbox with Spree custom control styling
+      #
+      # @param method [Symbol] the field name
+      # @param options [Hash] field options (see {#spree_text_field} for available options)
+      # @return [String] HTML string containing the complete form group with custom checkbox
+      def spree_check_box(method, options = {})
+        @template.content_tag(:div, class: 'form-group') do
+          @template.content_tag(:div, class: 'custom-control custom-checkbox') do
+            @template.check_box(@object_name, method, objectify_options(options.merge(class: 'custom-control-input'))) +
+            @template.label(@object_name, method, get_label(method, options), class: 'custom-control-label')
+          end + @template.error_message_on(@object_name, method) + field_help(method, options)
+        end
+      end
+
+      # Create a radio button with Spree custom control styling
+      #
+      # @param method [Symbol] the field name
+      # @param tag_value [String] the value for this radio button option
+      # @param options [Hash] field options including:
+      #   - :id [String] the HTML ID for the radio button
+      #   - other options from {#spree_text_field}
+      # @return [String] HTML string containing the complete form group with custom radio button
+      def spree_radio_button(method, tag_value, options = {})
+        @template.content_tag(:div, class: 'form-group') do
+          @template.content_tag(:div, class: 'custom-control custom-radio') do
+            @template.radio_button(@object_name, method, tag_value, objectify_options(options.merge(class: 'custom-control-input'))) +
+              @template.label(@object_name, method, get_label(method, options), class: 'custom-control-label', for: options[:id])
+          end + @template.error_message_on(@object_name, method) + field_help(method, options)
+        end
+      end
+
+      # Generate help text for a field
+      #
+      # @param _method [Symbol] the field name (unused but kept for consistency)
+      # @param options [Hash] field options
+      # @option options [String] :help help text to display
+      # @return [String] HTML string containing the help text or empty string
+      def field_help(_method, options = {})
+        @template.content_tag(:span, options[:help], class: 'form-text mt-2')
+      end
+
+      private
+
+      # Generate the label for a field with required indicator and help bubble
+      #
+      # @param method [Symbol] the field name
+      # @param options [Hash] field options
+      # @option options [String, Boolean] :label label text or false to hide label
+      # @option options [Boolean] :required whether field is required
+      # @option options [String] :help_bubble help bubble text
+      # @return [String] HTML string containing the complete label
+      def get_label(method, options)
+        return '' if options[:label] == false
+
+        translated_label = if options[:label]
+                              options[:label]
+                            elsif I18n.exists?("spree.#{method}")
+                              I18n.t("spree.#{method}")
+                            else
+                              I18n.t("activerecord.attributes.spree/#{@object_name.to_s.underscore}.#{method}")
+                            end
+
+        required_label = options[:required] ? ' ' + @template.required_span_tag : ''
+
+        help_bubble = options[:help_bubble] ? ' ' + @template.help_bubble(options[:help_bubble]) : ''
+
+        @template.raw(translated_label + required_label + help_bubble)
+      end
+    end
+  end
+end

data/app/views/layouts/spree/admin.html.erb

@@ -7,18 +7,22 @@
 
   <body class="admin min-vh-100 <%= controller_name %> <%= action_name %>"
     data-controller="admin"
-    data-action="keydown.esc->admin#close keydown.ctrl+s->admin#save keydown.meta+s->admin#save"
+    data-action="keydown.ctrl+s->admin#save keydown.meta+s->admin#save"
   >
     <%= render_admin_partials(:body_start_partials) %>
 
     <%= render "spree/admin/shared/header" %>
     <%= render "spree/admin/shared/sidebar" %>
-    <main id="content">
+    <main id="content" data-controller="drawer dialog export-dialog">
       <%= render "spree/admin/shared/content_header" %>
+      <%= render "spree/admin/shared/page_tabs" %>
+      <%= render "spree/admin/shared/page_alerts" %>
       <div class="container">
         <%= yield %>
       </div>
       <%= render "spree/admin/shared/footer" %>
+      <%= render 'spree/admin/shared/drawer' %>
+      <%= render "spree/admin/shared/dialog" %>
     </main>
     <%= render "spree/admin/shared/modal" %>
     <%= render "spree/admin/shared/alerts" %>

data/app/views/layouts/spree/admin_settings.html.erb

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="<%= I18n.locale %>">
+  <head>
+    <%= render "spree/admin/shared/head" %>
+  </head>
+
+  <body class="admin admin-settings min-vh-100 <%= controller_name %> <%= action_name %>"
+    data-controller="admin drawer dialog"
+    data-action="keydown.ctrl+s->admin#save keydown.meta+s->admin#save"
+  >
+    <%= render_admin_partials(:body_start_partials) %>
+
+    <header id="settings-header">
+      <%= render 'spree/admin/shared/back_to_dashboard' %>
+      <div class="flex-grow-1">
+        <%= render 'spree/admin/shared/content_header' %>
+      </div>
+    </header>
+
+    <%= render "spree/admin/shared/sidebar" %>
+    <main id="content" class="pt-4">
+      <%= render "spree/admin/shared/page_tabs" %>
+      <%= render "spree/admin/shared/page_alerts" %>
+      <div class="container">
+        <%= yield %>
+      </div>
+      <%= render "spree/admin/shared/footer" %>
+      <%= render 'spree/admin/shared/drawer' %>
+    </main>
+    <%= render "spree/admin/shared/dialog" %>
+    <%= render "spree/admin/shared/modal" %>
+    <%= render "spree/admin/shared/alerts" %>
+
+    <%= render_admin_partials(:body_end_partials) %>
+  </body>
+</html>

data/app/views/layouts/spree/admin_wizard.html.erb

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="<%= I18n.locale %>">
+  <head>
+    <%= render "spree/admin/shared/head" %>
+  </head>
+
+  <body class="admin admin-wizard min-vh-100 <%= controller_name %> <%= action_name %>"
+    data-controller="admin drawer dialog"
+    data-action="keydown.ctrl+s->admin#save keydown.meta+s->admin#save"
+  >
+    <%= render_admin_partials(:body_start_partials) %>
+
+    <header id="header" class="d-flex align-items-center p-0">
+      <%= render 'spree/admin/shared/back_to_dashboard' %>
+
+      <% if content_for?(:steps) %>
+        <ol class="d-flex align-items-center list-unstyled flex-grow-1 justify-content-between align-items-center m-0" style="height: 60px;" id="steps">
+          <%= yield :steps %>
+        </ol>
+      <% end %>
+    </header>
+
+    <main class="pb-5">
+      <%= yield %>
+    </main>
+    
+    <%= render 'spree/admin/shared/drawer' %>
+    <%= render "spree/admin/shared/dialog" %>
+    <%= render "spree/admin/shared/modal" %>
+    <%= render "spree/admin/shared/alerts" %>
+
+    <%= render_admin_partials(:body_end_partials) %>
+  </body>
+</html>

data/app/views/layouts/spree/minimal.html.erb

@@ -3,7 +3,7 @@
   <head>
     <%= render "spree/admin/shared/head" %>
   </head>
-  <body class="admin min-vh-100 <%= controller_name %> <%= action_name %>">
+  <body class="admin min-vh-100 <%= controller_name %> <%= action_name %>" data-controller="dialog">
     <div class="container-fluid">
       <div class="row bg-white">
         <div
@@ -16,6 +16,7 @@
         </div>
       </div>
     </div>
+    <%= render "spree/admin/shared/dialog" %>
     <%= render "spree/admin/shared/modal" %>
     <%= render "spree/admin/shared/alerts" %>
   </body>

data/app/views/layouts/spree/page_builder.html.erb

@@ -7,7 +7,7 @@
 
   <body class="admin page-builder"
         id="page-builder"
-        data-controller="page-builder"
+        data-controller="page-builder tabs dialog"
         data-page-builder-preview-url-value="<%= page_preview_url %>"
   >
 
@@ -23,7 +23,7 @@
       <main id="main-part">
         <div class="desktopLiveView" data-page-builder-target="previewContainer">
           <div class="embed-responsive embed-responsive-4by3">
-            <iframe class="embed-responsive-item"
+            <iframe class="embed-responsive-item overflow-y-auto"
                     data-page-builder-target="iframe"
                     data-action="load->page-builder#initializeVisualEditor"
                     id="page-builder-preview"
@@ -39,6 +39,7 @@
       </main>
     </main>
 
+    <%= render 'spree/admin/shared/dialog' %>
     <%= render 'spree/admin/shared/modal' %>
     <%= render 'spree/admin/shared/alerts' %>
   </body>

data/app/views/spree/admin/admin_users/_admin_user.html.erb

@@ -1,6 +1,6 @@
 <tr id="<%= spree_dom_id admin_user %>" class="cursor-pointer" data-controller="row-link">
   <td class="w-50" data-action="click->row-link#openLink">
-    <%= link_to spree.admin_admin_user_path(admin_user), data: { row_link_target: :link }, class: 'd-flex align-items-center' do %>
+    <%= link_to spree.admin_admin_user_path(admin_user), data: { row_link_target: :link, turbo_frame: '_top' }, class: 'd-flex align-items-center' do %>
       <%= render_avatar(admin_user, width: 48, height: 48, class: 'mr-3 avatar') %>
       <div class="d-flex flex-column">
         <%= admin_user.name %>
@@ -14,6 +14,6 @@
     <% end %>
   </td>
   <td class="w-20">
-    <%= local_time(admin_user.created_at) %>
+    <%= spree_time(admin_user.created_at) %>
   </td>
 </tr>

data/app/views/spree/admin/admin_users/_form.html.erb

@@ -1,12 +1,3 @@
-<div class="form-group">
-  <%= f.label :email %>
-  <%= f.email_field :email, class: 'form-control', required: true, autofocus: true %>
-</div>
-<div class="form-group">
-  <%= f.label :first_name %>
-  <%= f.text_field :first_name, class: 'form-control', required: true %>
-</div>
-<div class="form-group">
-  <%= f.label :last_name %>
-  <%= f.text_field :last_name, class: 'form-control', required: true %>
-</div>
+<%= f.spree_text_field :email, required: true, autofocus: true, type: :email %>
+<%= f.spree_text_field :first_name, required: true %>
+<%= f.spree_text_field :last_name, required: true %>

data/app/views/spree/admin/admin_users/edit.html.erb

@@ -19,13 +19,10 @@
       <%= render'spree/admin/shared/error_messages', target: @admin_user %>
       <%= render 'form', f: f %>
       <% if can?(:manage, Spree::Role) && @roles.any? %>
-        <div class="form-group">
-          <%= f.label :spree_role_ids, Spree.t(:roles) %>
-          <%= f.select :spree_role_ids,
-                  options_from_collection_for_select(@roles, 'id', 'name', @admin_user.spree_roles.pluck(:id)),
-                  { prompt: false },
-                  { multiple: true,  data: { controller: 'autocomplete-select' } } %>          
-        </div>
+        <%= f.spree_select :spree_role_ids,
+                options_from_collection_for_select(@roles, 'id', 'name', @admin_user.spree_roles.pluck(:id)),
+                { prompt: false, label: Spree.t(:roles), autocomplete: true },
+                { multiple: true } %>          
       <% end %>
     </div>
     <div class="card-footer">

data/app/views/spree/admin/admin_users/index.html.erb

@@ -11,9 +11,9 @@
     <table class="table">
       <thead>
         <tr>
-          <th class="rounded-lg-top-left"><%= Spree.t(:user) %></th>
-          <th><%= Spree.t(:roles) %></th>
-          <th class="rounded-lg-top-right"><%= sort_link @search, :created_at, Spree.t(:created_at) %></th>
+          <th scope="col" class="rounded-lg-top-left"><%= Spree.t(:user) %></th>
+          <th scope="col"><%= Spree.t(:roles) %></th>
+          <th scope="col" class="rounded-lg-top-right"><%= sort_link @search, :created_at, Spree.t(:created_at) %></th>
         </tr>
       </thead>
       <tbody>

data/app/views/spree/admin/admin_users/show.html.erb

@@ -67,7 +67,7 @@
                 <%= I18n.t('activerecord.attributes.user.last_sign_in') %>
                 <span>
                   <% if @admin_user.last_sign_in_at %>
-                    <%= local_time(@admin_user.last_sign_in_at) %>
+                    <%= spree_time(@admin_user.last_sign_in_at) %>
                   <% else %>
                     <%= Spree.t(:not_available) %>
                   <% end %>
@@ -79,7 +79,7 @@
                 <%= I18n.t('activerecord.attributes.user.current_sign_in') %>
                 <span>
                   <% if @admin_user.current_sign_in_at %>
-                    <%= local_time(@admin_user.current_sign_in_at) %>
+                    <%= spree_time(@admin_user.current_sign_in_at) %>
                   <% else %>
                     <%= Spree.t(:not_available) %>
                   <% end %>
@@ -89,13 +89,13 @@
             <li class="list-group-item d-flex justify-content-between align-items-center">
               <%= Spree.t(:created_at) %>
               <span>
-                <%= local_time(@admin_user.created_at) %>
+                <%= spree_time(@admin_user.created_at) %>
               </span>
             </li>
             <li class="list-group-item d-flex justify-content-between align-items-center">
               <%= Spree.t(:updated_at) %>
               <span>
-                <%= local_time(@admin_user.updated_at) %>
+                <%= spree_time(@admin_user.updated_at) %>
               </span>
             </li>
             <% if @admin_user.invited_by %>

data/app/views/spree/admin/assets/create.turbo_stream.erb

@@ -1,5 +1,5 @@
 <%= turbo_render_alerts %>
 
 <%= turbo_stream.replace 'media-form' do %>
-  <%= render 'spree/admin/variants/form/media', viewable: @asset.viewable %>
+  <%= render 'spree/admin/shared/media_form', viewable: @asset.viewable, viewable_type: @asset.viewable_type %>
 <% end %>

data/app/views/spree/admin/assets/destroy.turbo_stream.erb

@@ -1,4 +1,4 @@
 <%= turbo_render_alerts %>
-<%= turbo_close_modal('modal-lg') %>
+<%= turbo_close_dialog %>
 
 <%= turbo_stream.remove "spree_image_#{@asset.id}" %>

data/app/views/spree/admin/assets/edit.html.erb

@@ -1,22 +1,17 @@
-<%= turbo_frame_tag :dialog_modal_lg do %>
-  <div class="modal-content">
-    <%= modal_header(Spree.t(:edit) + ' ' + Spree.t(:image)) %>
-    <%= form_with model: @asset, url: spree.admin_asset_path(@asset), method: :put, scope: :asset do |f| %>
-      <div class="modal-body pb-0" data-turbo-permanent id="asset-<%= @asset.key.parameterize %>">
-        <%= render 'active_storage/upload_form', form: f, field_name: :attachment, width: 200, height: 200, can_delete: false %>
-      </div>
-      <div class="modal-body" style="min-height: 200px">
-        <div class="form-group">
-          <%= f.label :alt, Spree.t(:alt_text) %>
-          <%= f.text_area :alt, rows: 4, class: 'form-control' %>
-        </div>
-      </div>
-      <div class="modal-footer">
-        <%= turbo_save_button_tag %>
-        <%= link_to Spree.t('actions.destroy'), object_url(@asset),
-            data: { turbo_method: :delete, turbo_confirm: Spree.t(:are_you_sure_delete), turbo_frame: '_top' },
-            class: 'btn btn-danger ml-auto' if can?(:destroy, @asset) %>
-      </div>
-    <% end %>
-  </div>
+<%= turbo_frame_tag :dialog do %>
+  <%= dialog_header(Spree.t(:edit) + ' ' + Spree.t(:image)) %>
+  <%= form_with model: @asset, url: spree.admin_asset_path(@asset), method: :put, scope: :asset do |f| %>
+    <div class="dialog-body pb-0" data-turbo-permanent id="asset-<%= @asset.key.parameterize %>">
+      <%= render 'active_storage/upload_form', form: f, field_name: :attachment, width: 200, height: 200, can_delete: false %>
+    </div>
+    <div class="dialog-body" style="min-height: 200px">
+      <%= f.spree_text_area :alt, label: Spree.t(:alt_text), rows: 4 %>
+    </div>
+    <div class="dialog-footer">
+      <%= turbo_save_button_tag %>
+      <%= link_to Spree.t('actions.destroy'), object_url(@asset),
+          data: { turbo_method: :delete, turbo_confirm: Spree.t(:are_you_sure_delete), turbo_frame: '_top' },
+          class: 'btn btn-danger ml-auto' if can?(:destroy, @asset) %>
+    </div>
+  <% end %>
 <% end %>

data/app/views/spree/admin/assets/update.turbo_stream.erb

@@ -1,7 +1,7 @@
 <%= turbo_render_alerts %>
-<%= turbo_close_modal('modal-lg') %>
+<%= turbo_close_dialog %>
 
 <!-- Uploader operates on Spree::Asset, but the edit page uses Spree::Image for the dom_id -->
 <%= turbo_stream.replace spree_dom_id(Spree::Image.new(id: @asset.id)) do %>
-  <%= render 'spree/admin/variants/form/media_asset', asset: @asset %>
+  <%= render 'spree/admin/shared/media_asset', asset: @asset %>
 <% end %>

data/app/views/spree/admin/classifications/_classification.html.erb

@@ -1,13 +1,13 @@
 <div class="row mx-0 hover-light rounded" id="<%= spree_dom_id(classification) %>" data-sortable-update-url="<%= spree.admin_taxon_classification_path(classification.taxon_id, classification, format: :turbo_stream) %>">
   <% if classification.taxon.manual_sort_order? %>
     <div class="col-1 text-center align-self-center">
-      <span class="rounded p-2 hover-gray with-tip move-handle cursor-grab">
+      <span class="rounded p-2 hover-gray move-handle cursor-grab">
         <%= icon('grip-vertical', class: 'mr-0') %>
       </span>
     </div>
   <% end %>
 
-  <div class="<%= classification.taxon.manual_sort_order? ? 'col-6' : 'col-7' %>">
+  <div class="<%= classification.taxon.manual_sort_order? ? 'col-5' : 'col-6' %>">
     <%= link_to spree.edit_admin_product_path(classification.product), data: { 'turbo-frame': '_top' }, class: "d-flex align-items-center text-dark hover-none #{classification.taxon.manual_sort_order? ? 'py-3' : 'p-3'}" do  %>
       <%= render 'spree/admin/shared/product_image', object: classification.product %>
       <span class="ml-3">
@@ -30,9 +30,10 @@
     <% end %>
   </div>
 
-  <div class="col-1 text-center align-self-center">
-    <%= button_to spree.admin_taxon_classification_path(classification.taxon_id, classification), class: 'btn btn-danger btn-sm with-tip', method: :delete, data: { turbo_confirm: Spree.t(:are_you_sure) } do %>
+  <div class="col-2 text-center align-self-center">
+    <%= button_to spree.admin_taxon_classification_path(classification.taxon_id, classification), class: 'btn btn-danger btn-sm', method: :delete, data: { controller: 'tooltip', turbo_confirm: Spree.t(:are_you_sure) } do %>
       <%= icon 'trash', class: 'mr-0', style: 'pointer-events: none' %>
+      <%= tooltip(Spree.t('actions.destroy')) %>
     <% end if classification.taxon.manual? && can?(:delete, classification) %>
   </div>
 </div>

data/app/views/spree/admin/classifications/create.turbo_stream.erb

@@ -1,4 +1,4 @@
-<%= turbo_close_modal %>
+<%= turbo_close_dialog %>
 
 <%= turbo_stream.update :product_count, @taxon.products.count %>
 

data/app/views/spree/admin/classifications/index.html.erb

@@ -12,9 +12,9 @@
     <p class="text-center text-muted px-5 pt-5 pb-2">
       <%= Spree.t(:no_products_added) %>
     </p>
-    <p class="text-center" data-toggle="modal" data-target="#modal">
+    <p class="text-center">
       <% if can?(:create, Spree::Classification) && @taxon.manual? %>
-        <%= link_to_with_icon 'plus', Spree.t(:add_products), spree.new_admin_taxon_classification_path(@taxon.id), class: 'btn btn-link', data: { turbo_frame: 'dialog_modal' } %>
+        <%= link_to_with_icon 'plus', Spree.t(:add_products), spree.new_admin_taxon_classification_path(@taxon.id), class: 'btn btn-secondary', data: { turbo_frame: 'dialog', action: 'dialog#open' } %>
       <% end %>
   <% end %>
 <% end %>