Adds a button to clear all selected filters

This patch adds following

- adds an action in resource store to clear all selected filters
- adds a button on `No Resource Found` page

Signed-off-by: Shiv Verma <shverma@redhat.com>

ui/src/containers/Resources/Resources.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import { when } from 'mobx';
-import { EmptyState, GalleryItem } from '@patternfly/react-core';
+import { EmptyState, GalleryItem, Button } from '@patternfly/react-core';
 import { BrowserRouter as Router } from 'react-router-dom';
 import { FakeHub } from '../../api/testutil';
 import { createProviderAndStore } from '../../store/root';
@@ -79,6 +79,7 @@ describe('Resource Component', () => {
           component.update();
           const r = component.find(EmptyState);
           expect(r.length).toEqual(1);
+          expect(r.find(Button).length).toEqual(1);
 
           done();
         }, 0);

ui/src/containers/Resources/index.tsx

@@ -6,7 +6,8 @@ import {
   EmptyStateVariant,
   Gallery,
   Spinner,
-  Title
+  Title,
+  Button
 } from '@patternfly/react-core';
 import CubesIcon from '@patternfly/react-icons/dist/js/icons/cubes-icon';
 import { useMst } from '../../store/root';
@@ -17,17 +18,20 @@ import './Resources.css';
 const Resources = () => {
   const { resources } = useMst();
 
-  const checkResources = (resources: IResource[]) => {
-    return !resources.length ? (
+  const checkResources = (resourceList: IResource[]) => {
+    return !resourceList.length ? (
       <EmptyState variant={EmptyStateVariant.full} className="hub-resource-emptystate__margin">
         <EmptyStateIcon icon={CubesIcon} />
         <Title headingLevel="h5" size="md">
           No Resource Found.
         </Title>
+        <Button variant="primary" onClick={() => resources.clear()}>
+          Clear All Filters
+        </Button>
       </EmptyState>
     ) : (
       <Gallery hasGutter className="hub-resource">
-        <Cards items={resources} />
+        <Cards items={resourceList} />
       </Gallery>
     );
   };

ui/src/containers/Search/index.tsx

@@ -1,16 +1,14 @@
-import { TextInput } from '@patternfly/react-core';
-import React, { useState } from 'react';
+import React from 'react';
 import { useHistory } from 'react-router-dom';
+import { useObserver } from 'mobx-react';
+import { TextInput } from '@patternfly/react-core';
 import { useMst } from '../../store/root';
 import './Search.css';
 
 const Search: React.FC = () => {
   const { resources } = useMst();
 
-  const [value, setValue] = useState('');
-
   const onSearchChange = (text: string) => {
-    setValue(text);
     resources.setSearch(text.trim());
   };
 
@@ -23,9 +21,9 @@ const Search: React.FC = () => {
     return;
   };
 
-  return (
+  return useObserver(() => (
     <TextInput
-      value={value}
+      value={resources.search}
       type="search"
       onChange={onSearchChange}
       onKeyPress={onSearchKeyPress}
@@ -34,7 +32,7 @@ const Search: React.FC = () => {
       spellCheck="false"
       className="hub-search"
     />
-  );
+  ));
 };
 
 export default Search;

ui/src/containers/SortDropDown/index.tsx

@@ -9,7 +9,6 @@ const Sort: React.FC = () => {
   const { resources } = useMst();
 
   const [isOpen, setIsOpen] = useState(false);
-  const [selected, setSelected] = useState('');
 
   const items: Array<string> = Object.values(SortByFields);
   const keys = items.slice(1).map((value) => (
@@ -26,8 +25,7 @@ const Sort: React.FC = () => {
 
   const clearSelection = () => {
     setIsOpen(false);
-    setSelected('');
-    resources.setSortBy('');
+    resources.setSortBy(SortByFields.Unknown);
   };
 
   const onToggle = () => setIsOpen(!isOpen);
@@ -39,28 +37,28 @@ const Sort: React.FC = () => {
   ) => {
     if (isPlaceholder) clearSelection();
     else {
-      setSelected(value.toString());
+      value.toString() === SortByFields.Name
+        ? resources.setSortBy(SortByFields.Name)
+        : resources.setSortBy(SortByFields.Rating);
       setIsOpen(false);
     }
   };
 
-  return useObserver(() => {
-    return (
-      <div className="hub-sort">
-        <Select
-          variant={SelectVariant.typeahead}
-          typeAheadAriaLabel="Sort By"
-          onToggle={onToggle}
-          onSelect={onSelect}
-          onClear={clearSelection}
-          isOpen={isOpen}
-          selections={selected}
-          placeholderText="Sort By"
-        >
-          {keys}
-        </Select>
-      </div>
-    );
-  });
+  return useObserver(() => (
+    <div className="hub-sort">
+      <Select
+        variant={SelectVariant.typeahead}
+        typeAheadAriaLabel="Sort By"
+        onToggle={onToggle}
+        onSelect={onSelect}
+        onClear={clearSelection}
+        isOpen={isOpen}
+        selections={resources.sortBy}
+        placeholderText="Sort By"
+      >
+        {keys}
+      </Select>
+    </div>
+  ));
 };
 export default Sort;

ui/src/store/resource.test.ts

@@ -583,4 +583,28 @@ describe('Store functions', () => {
       }
     );
   });
+
+  it('it should clear all slected filters', (done) => {
+    const store = ResourceStore.create(
+      {},
+      {
+        api,
+        categories: CategoryStore.create({}, { api })
+      }
+    );
+    expect(store.isLoading).toBe(true);
+    when(
+      () => !store.isLoading,
+      () => {
+        store.setSearch('golang');
+        store.setSortBy(SortByFields.Name);
+        expect(store.filteredResources.length).toBe(1);
+
+        store.clear();
+        expect(store.filteredResources.length).toBe(7);
+
+        done();
+      }
+    );
+  });
 });

ui/src/store/resource.ts

@@ -128,6 +128,16 @@ export const ResourceStore = types
     }
   }))
 
+  .actions((self) => ({
+    clear() {
+      self.kinds.clearSelected();
+      self.catalogs.clearSelected();
+      self.categories.clearSelected();
+      self.setSearch('');
+      self.setSortBy(SortByFields.Unknown);
+    }
+  }))
+
   .actions((self) => ({
     versionInfo: flow(function* (resourceName: string) {
       try {