Adds EmptyState with title No Resource Found

This patch adds EmptyState with title `No Resource Found`
if selected filter doesn't match to any resources

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

ui/src/containers/Resources/Resources.css

@@ -10,3 +10,7 @@
   bottom: 0;
   margin: auto;
 }
+
+.hub-resource-emptystate__margin {
+  margin-left: -12em;
+}

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import { when } from 'mobx';
-import { GalleryItem } from '@patternfly/react-core';
+import { EmptyState, GalleryItem } from '@patternfly/react-core';
 import { BrowserRouter as Router } from 'react-router-dom';
 import { FakeHub } from '../../api/testutil';
 import { createProviderAndStore } from '../../store/root';
@@ -47,4 +47,34 @@ describe('Resource Component', () => {
       }
     );
   });
+
+  it('should find EmptyState if filtered does not match to any resources', (done) => {
+    const component = mount(
+      <Provider>
+        <Router>
+          <Resources />
+        </Router>
+      </Provider>
+    );
+
+    const { resources } = root;
+    when(
+      () => {
+        return !resources.isLoading;
+      },
+      () => {
+        setTimeout(() => {
+          resources.setSearch('asdf');
+          const resource = resources.filteredResources;
+          expect(resource.length).toBe(0);
+
+          component.update();
+          const r = component.find(EmptyState);
+          expect(r.length).toEqual(1);
+
+          done();
+        }, 0);
+      }
+    );
+  });
 });

ui/src/containers/Resources/index.tsx

@@ -1,24 +1,43 @@
 import React from 'react';
-import { Gallery, Spinner } from '@patternfly/react-core';
-import { useMst } from '../../store/root';
 import { useObserver } from 'mobx-react';
+import {
+  EmptyState,
+  EmptyStateIcon,
+  EmptyStateVariant,
+  Gallery,
+  Spinner,
+  Title
+} from '@patternfly/react-core';
+import CubesIcon from '@patternfly/react-icons/dist/js/icons/cubes-icon';
+import { useMst } from '../../store/root';
+import { IResource } from '../../store/resource';
 import Cards from '../../components/Cards';
 import './Resources.css';
 
 const Resources = () => {
   const { resources } = useMst();
 
+  const checkResources = (resources: IResource[]) => {
+    return !resources.length ? (
+      <EmptyState variant={EmptyStateVariant.full} className="hub-resource-emptystate__margin">
+        <EmptyStateIcon icon={CubesIcon} />
+        <Title headingLevel="h5" size="md">
+          No Resource Found.
+        </Title>
+      </EmptyState>
+    ) : (
+      <Gallery hasGutter className="hub-resource">
+        <Cards items={resources} />
+      </Gallery>
+    );
+  };
+
   return useObserver(() =>
     resources.isLoading ? (
       <Spinner className="hub-spinner" />
     ) : (
-      <React.Fragment>
-        <Gallery hasGutter className="hub-resource">
-          <Cards items={resources.filteredResources} />
-        </Gallery>
-      </React.Fragment>
+      <React.Fragment>{checkResources(resources.filteredResources)}</React.Fragment>
     )
   );
 };
-
 export default Resources;