Add button to clear search field

Closes thoughtbot#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.

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

@@ -9,9 +9,15 @@
   width: 100%;
 }
 
+.search__clear,
 .search__icon {
   svg {
     @include size(1em);
+  }
+}
+
+.search__icon {
+  path {
     fill: $hint-grey;
     transition: fill $base-duration $base-timing;
   }
@@ -23,6 +29,18 @@
   }
 }
 
+.search__clear {
+  z-index: 2;
+
+  path {
+    fill: $hint-grey;
+  }
+
+  &:hover path {
+    fill: $action-color;
+  }
+}
+
 .search__input {
   appearance: none;
   border: 0;
@@ -41,6 +59,7 @@
   color: $hint-grey;
   opacity: 0;
   transition: opacity $base-duration $base-timing;
+  z-index: 1;
 
   svg {
     @include size(100%);

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

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

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

@@ -26,22 +26,7 @@ It renders the `_table` partial to display details about the resources.
 <% end %>
 
 <% content_for(:search) do %>
-  <form class="search">
-    <span class="search__icon">
-      <%= svg_tag "administrate/search.svg", "search", width: 16, height: 16 %>
-    </span>
-    <input
-      type="text"
-      name="search"
-      class="search__input"
-      placeholder="Search"
-      value="<%= search_term %>"
-      aria-label="Search"
-    />
-    <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