Merge pull request #4506 from tvdeyen/v3.1-fix-admin-variants-table

[v3.1] Fix admin variants table UX
solidusio · Aug 16, 2022 · cb8e70e · cb8e70e
2 parents ddc39e6 + dc21ab8
commit cb8e70e
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 17 deletions.
diff --git a/backend/app/views/spree/admin/variants/_table.html.erb b/backend/app/views/spree/admin/variants/_table.html.erb
@@ -3,10 +3,9 @@
 <table class="index sortable" data-sortable-link="<%= update_positions_admin_product_variants_path(@product) %>">
   <colgroup>
     <col style="width: 5%" />
-    <col style="width: 25%" />
-    <col style="width: 20%" />
+    <col style="width: 35%" />
     <col style="width: 20%" />
-    <col style="width: 15%" />
+    <col style="width: 25%" />
     <col style="width: 15%" />
   </colgroup>
   <thead data-hook="variants_header">
@@ -40,9 +39,11 @@
       </td>
     </tr>
     <% end %>
-    <% if variants.empty? %>
-      <tr><td colspan="4"><%= t('spree.none') %></td></tr>
-    <% end %>
   </tbody>
 </table>
+<% if variants.empty? %>
+  <div class="alert alert-warning">
+    <%= t('.no_variants_found', term: params[:variant_search_term]) %>
+  </div>
+<% end %>
 <%= paginate variants, theme: "solidus_admin" %>
diff --git a/backend/app/views/spree/admin/variants/_table_filter.html.erb b/backend/app/views/spree/admin/variants/_table_filter.html.erb
@@ -4,14 +4,13 @@
 
 <% content_for :table_filter do %>
   <%= form_for :variant_search, url: spree.admin_product_variants_path(product), method: :get do |f| %>
-    <div class="col-10">
-      <div data-hook="admin_variants_index_search" class="field">
-        <%= f.label :variant_search_term, t('spree.variant_search_placeholder') %>
-        <%= text_field_tag :variant_search_term, params[:variant_search_term], class: "fullwidth", placeholder: t('spree.variant_search_placeholder') %>
+    <div class="row">
+      <div class="col-10">
+        <div data-hook="admin_variants_index_search" class="field">
+          <%= f.label :variant_search_term, t('spree.variant_search_placeholder') %>
+          <%= text_field_tag :variant_search_term, params[:variant_search_term], class: "fullwidth", placeholder: t('spree.variant_search_placeholder') %>
+        </div>
       </div>
-    </div>
-
-    <% if product.variants.with_discarded.discarded.any? %>
       <div class="col-2">
         <div class="field checkbox">
           <label>
@@ -20,10 +19,10 @@
           </label>
         </div>
       </div>
-    <% end %>
+    </div>
 
     <div class="actions filter-actions">
-      <%= f.button :search %>
+      <%= button_tag t('spree.filter_results'), class: 'btn btn-primary' %>
     </div>
   <% end %>
 <% end %>
diff --git a/backend/app/views/spree/admin/variants/index.html.erb b/backend/app/views/spree/admin/variants/index.html.erb
@@ -14,7 +14,7 @@
   <% end %>
 <% end %>
 
-<% if @product.variants.with_discarded.any? %>
+<% if @product.variants.with_discarded.any? || params[:variant_search_term].present? %>
   <%= render "table_filter", product: @product %>
   <%= render "table", variants: @variants %>
 <% else %>

diff --git a/backend/spec/features/admin/products/variant_spec.rb b/backend/spec/features/admin/products/variant_spec.rb
@@ -65,7 +65,7 @@
       it 'allows to display deleted variants with a filter' do
         visit spree.admin_product_variants_path(product)
         check 'Show Deleted Variants'
-        click_button 'search'
+        click_button 'Filter Results'
 
         expect(page).to have_content(discarded_variant.sku)
       end

diff --git a/core/config/locales/en.yml b/core/config/locales/en.yml
@@ -1004,6 +1004,8 @@ en:
           use_product_tax_category: Use Product Tax Category
         new:
           new_variant: New Variant
+        table:
+          no_variants_found: No variants found for '%{term}'
         table_filter:
           show_deleted: Show Deleted Variants
     administration: Administration