Add clear search button and action

app/reflexes/products_reflex.rb

@@ -22,6 +22,15 @@ class ProductsReflex < ApplicationReflex
     fetch_and_render_products
   end
 
+  def clear_search
+    @search_term = nil
+    @producer_id = nil
+    @category_id = nil
+    @page = 1
+
+    fetch_and_render_products
+  end
+
   private
 
   def init_params

app/views/admin/products_v3/_content.html.haml

@@ -9,7 +9,7 @@
   - if products.any?
     .container
       .sixteen.columns
-        = render partial: 'sort', locals: { pagy: pagy }
+        = render partial: 'sort', locals: { pagy: pagy, search_term: search_term, producer_id: producer_id, category_id: category_id }
     = render partial: 'table', locals: { products: products }
     = render partial: 'admin/shared/v3/pagy', locals: { pagy: pagy, reflex: "click->Products#fetch" }
   - else

app/views/admin/products_v3/_sort.html.haml

@@ -1,6 +1,9 @@
 #sort
   %div
     = t(".pagination.total_html", total: pagy.count, from: pagy.from, to: pagy.to)
+    - if search_term.present? || producer_id.present? || category_id.present?
+      %a{ href: "#", class: "button disruptive", data: { reflex: "click->products#clear_search" } }
+        = t(".pagination.clear_search")  
   %div.with-dropdown
     = t(".pagination.per_page.show")
     = select_tag :per_page, options_for_select([15, 25, 50, 100].collect{|i| [t('.pagination.per_page.per_page', num: i), i]}, pagy.items), data: { reflex: "change->products#change_per_page" }

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

@@ -25,6 +25,10 @@ button:not(.plain):not(.trix-button),
     border: 1px solid $color-btn-hover-border;
   }
 
+  &:active:focus {
+    box-shadow: none;
+  }
+
   &:hover {
     background-color: $color-btn-hover-bg;
     border: 1px solid $color-btn-hover-bg;
@@ -55,6 +59,25 @@ button:not(.plain):not(.trix-button),
     }
   }
 
+  &.disruptive {
+    background-color: transparent;
+    border: 1px solid $color-5;
+    color: $color-5;
+
+    &:hover {
+      background-color: $fair-pink;
+      border: 1px solid $color-5;
+      color: $color-5;
+    }
+
+    &:active,
+    &:focus {
+      background-color: $fair-pink;
+      border: 1px solid $roof-terracotta;
+      color: $roof-terracotta;
+    }
+  }
+
   .badge {
     position: absolute;
     top: 0;

app/webpacker/css/admin_v3/globals/palette.scss

@@ -11,6 +11,8 @@ $lighter-grey: #f8f9fa !default; // Lighter grey
 $light-grey: #eff1f2 !default; // Light grey
 $near-black: #191c1d !default; // Near-black
 $dark-grey: #2e3132 !default; // Dark Grey
+$fair-pink: #ffefeb !default; // Fair Pink
+$roof-terracotta: #b83b1f !default; // Roof Terracotta
 
 // Old colour variables for backwards compatibility
 $color-1: $white;
@@ -24,3 +26,5 @@ $color-8: $near-black;
 $color-9: $dark-grey;
 $color-10: $orient;
 $color-11: $mystic;
+$color-12: $fair-pink;
+$color-13: $roof-terracotta;

config/locales/en.yml

@@ -773,6 +773,7 @@ en:
           per_page:
             show: Show
             per_page: "%{num} per page"
+          clear_search: Clear search
       filters:
         search_products: Search for products
         all_producers: All producers

spec/system/admin/products_v3/products_spec.rb

@@ -117,6 +117,20 @@ describe 'As an admin, I can see the new product page' do
         expect_products_count_to_be 1
       end
     end
+
+    context "clear filters" do
+      it "can clear filters" do
+        search_for "searchable product"
+        expect(page).to have_field "search_term", with: "searchable product"
+        expect_page_to_be 1
+        expect_products_count_to_be 1
+
+        click_link "Clear search"
+        expect(page).to have_field "search_term", with: ""
+        expect_page_to_be 1
+        expect_products_count_to_be 15
+      end
+    end
   end
 
   def expect_page_to_be(page)