From c477ed7f76254142519426fadee08a8ebc1e5832 Mon Sep 17 00:00:00 2001
From: pratap0007 <shverma@redhat.com>
Date: Thu, 7 Jan 2021 16:55:06 +0530
Subject: [PATCH] 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     |  4 +++
 .../containers/Resources/Resources.test.tsx   | 32 ++++++++++++++++-
 ui/src/containers/Resources/index.tsx         | 35 ++++++++++++++-----
 3 files changed, 62 insertions(+), 9 deletions(-)

diff --git a/ui/src/containers/Resources/Resources.css b/ui/src/containers/Resources/Resources.css
index c3308c85d2..09b838d35d 100644
--- a/ui/src/containers/Resources/Resources.css
+++ b/ui/src/containers/Resources/Resources.css
@@ -10,3 +10,7 @@
   bottom: 0;
   margin: auto;
 }
+
+.hub-resource-emptystate__margin {
+  margin-left: -12em;
+}
diff --git a/ui/src/containers/Resources/Resources.test.tsx b/ui/src/containers/Resources/Resources.test.tsx
index 52cd629165..dbd5c044a3 100644
--- a/ui/src/containers/Resources/Resources.test.tsx
+++ b/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);
+      }
+    );
+  });
 });
diff --git a/ui/src/containers/Resources/index.tsx b/ui/src/containers/Resources/index.tsx
index f8827ed76a..fc0853d4e4 100644
--- a/ui/src/containers/Resources/index.tsx
+++ b/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;