add heading and clear all btn to tag filters (#4620)

app/assets/stylesheets/item-list.scss

@@ -37,6 +37,25 @@
       @include themeable(color, theme-color, $black);
     }
 
+    .filters-header {
+      display: flex;
+      justify-content: space-between;
+      padding: 10px 5px;
+      .filters-header-text {
+        font-size: 0.9em;
+        font-family: $monospace;
+        text-decoration: underline;
+        @include themeable(color, theme-secondary-color, $medium-gray);
+      }
+      .filters-header-action {
+        font-size: 0.8em;
+        background: none;
+        border: none;
+        text-decoration: underline;
+        @include themeable(color, theme-color, $blue);
+      }
+    }
+
     .tags {
       .tag {
         padding: 5px 0px;
@@ -214,7 +233,6 @@
       margin-bottom: -15px;
 
       .filters {
-        height: 85px;
         min-height: 85px;
 
         .tags {

app/javascript/readingList/__tests__/__snapshots__/readingList.test.jsx.snap

@@ -14,6 +14,15 @@ exports[`<ReadingList /> renders properly 1`] = `
         onKeyUp={[Function]}
         placeHolder="search your list"
       />
+      <div
+        class="filters-header"
+      >
+        <h4
+          class="filters-header-text"
+        >
+          my tags
+        </h4>
+      </div>
       <div
         class="tags"
       >

app/javascript/readingList/readingList.jsx

@@ -9,6 +9,7 @@ import {
   performInitialSearch,
   search,
   toggleTag,
+  clearSelectedTags,
 } from '../searchableItemList/searchableItemList';
 import { ItemListItem } from '../src/components/ItemList/ItemListItem';
 import { ItemListItemArchiveButton } from '../src/components/ItemList/ItemListItemArchiveButton';
@@ -45,6 +46,7 @@ export class ReadingList extends Component {
     this.performInitialSearch = performInitialSearch.bind(this);
     this.search = search.bind(this);
     this.toggleTag = toggleTag.bind(this);
+    this.clearSelectedTags = clearSelectedTags.bind(this);
   }
 
   componentDidMount() {
@@ -198,7 +200,23 @@ export class ReadingList extends Component {
               onKeyUp={this.onSearchBoxType}
               placeHolder="search your list"
             />
-
+            <div className="filters-header">
+              <h4 className="filters-header-text">my tags</h4>
+              {Boolean(selectedTags.length) && (
+                <a
+                  className="filters-header-action"
+                  href={
+                    isStatusViewValid
+                      ? READING_LIST_PATH
+                      : READING_LIST_ARCHIVE_PATH
+                  }
+                  onClick={this.clearSelectedTags}
+                  data-no-instant
+                >
+                  clear all
+                </a>
+              )}
+            </div>
             <ItemListTags
               availableTags={availableTags}
               selectedTags={selectedTags}

app/javascript/searchableItemList/searchableItemList.js

@@ -48,6 +48,16 @@ export function toggleTag(event, tag) {
   component.search(query, { tags: newTags, statusView });
 }
 
+export function clearSelectedTags(event) {
+  event.preventDefault();
+
+  const component = this;
+  const { query, statusView } = component.state;
+  const newTags = [];
+  component.setState({ selectedTags: newTags, page: 0, items: [] });
+  component.search(query, { tags: newTags, statusView });
+}
+
 // Perform the initial search
 export function performInitialSearch({
   containerId,