Add button to clear search field

Closes #121.

Problem:

Users cannot clear their search
unless they re-submit the search with an empty field,
or click on the resource link in the navigation bar.

Solution:

Add a button for clearing out the search field
and going back to showing all resources.

administrate/app/views/administrate/application/_search.html.erb

@@ -0,0 +1,20 @@
+<form class="search">
+  <span class="search__icon">
+    <%= inline_svg "administrate/search.svg" %>
+  </span>
+  <input
+    type="text"
+    name="search"
+    class="search__input"
+    placeholder="Search"
+    value="<%= search_term %>"
+  />
+  <span class="search__hint">
+    Press enter to search
+  </span>
+  <span class="search__clear">
+    <%= link_to params.except(:search) do %>
+      <%= inline_svg "administrate/cancel.svg" %>
+    <% end %>
+  </span>
+</form>

app/assets/stylesheets/administrate/components/_search.scss

@@ -9,11 +9,14 @@
   width: 100%;
 }
 
+.search__clear,
 .search__icon {
   svg {
     @include size(1em);
   }
+}
 
+.search__icon {
   path {
     @include transition($base-transition);
     fill: $hint-grey;
@@ -24,6 +27,18 @@
   }
 }
 
+.search__clear {
+  z-index: 2;
+
+  rect {
+    fill: $hint-grey;
+  }
+
+  &:hover rect {
+    fill: $base-accent-color;
+  }
+}
+
 .search__input {
   appearance: none;
   border: none;
@@ -38,6 +53,7 @@
 }
 
 .search__hint {
+  z-index: 1;
   @include position(absolute, 1em 0 null null);
   @include transition($base-transition);
   color: $hint-grey;

app/views/administrate/application/index.html.erb

@@ -24,21 +24,7 @@ It renders the `_table` partial to display details about the resources.
 <% content_for(:title) { page.resource_name.pluralize.titleize } %>
 
 <% content_for(:search) do %>
-  <form class="search">
-    <span class="search__icon">
-      <%= inline_svg "administrate/search.svg" %>
-    </span>
-    <input
-      type="text"
-      name="search"
-      class="search__input"
-      placeholder="Search"
-      value="<%= search_term %>"
-    />
-    <span class="search__hint">
-      Press enter to search
-    </span>
-  </form>
+  <%= render "search", search_term: search_term %>
 <% end %>
 
 <header class="header">

spec/features/search_spec.rb

@@ -9,7 +9,7 @@
 
     visit admin_customers_path
     fill_in :search, with: query
-    page.execute_script("$('.search').submit()")
+    submit_search
 
     expect(page).to have_content(perfect_match.email)
     expect(page).to have_content(partial_match.email)
@@ -24,10 +24,34 @@
 
     visit admin_customers_path
     fill_in :search, with: query
-    page.execute_script("$('.search').submit()")
+    submit_search
 
     expect(page).to have_content(name_match.email)
     expect(page).to have_content(email_match.email)
     expect(page).not_to have_content(mismatch.email)
   end
+
+  scenario "admin clears search" do
+    query = "foo"
+    mismatch = create(:customer, name: "someone")
+    visit admin_customers_path(search: query, order: :name)
+
+    expect(page).not_to have_content(mismatch.email)
+    clear_search
+    expect(page_params).to eq("order=name")
+    expect(page).to have_content(mismatch.email)
+
+  end
+
+  def clear_search
+    find(".search__clear a").click
+  end
+
+  def page_params
+    URI.parse(page.current_url).query
+  end
+
+  def submit_search
+    page.execute_script("$('.search').submit()")
+  end
 end