From 06b5c1ad181b78d7a5934dfa01df2fcdc0bc23d3 Mon Sep 17 00:00:00 2001
From: Saba Shavidze <sabashavidze@gmail.com>
Date: Mon, 16 Oct 2023 13:50:42 +0400
Subject: [PATCH] feat: add empty state for empty page filters apllied on
 resource explorer

---
 .../components/empty-state/EmptyState.tsx     |  3 +-
 .../components/explorer/DependencyGraph.tsx   | 86 ++++++++++++-------
 dashboard/package.json                        |  1 +
 3 files changed, 56 insertions(+), 34 deletions(-)

diff --git a/dashboard/components/empty-state/EmptyState.tsx b/dashboard/components/empty-state/EmptyState.tsx
index cd7883b32..74b65aabb 100644
--- a/dashboard/components/empty-state/EmptyState.tsx
+++ b/dashboard/components/empty-state/EmptyState.tsx
@@ -21,7 +21,8 @@ type Poses =
   | 'shirt'
   | 'whiteboard'
   | 'thinking'
-  | 'working';
+  | 'working'
+  | 'tablet';
 
 export type EmptyStateProps = {
   title: string;
diff --git a/dashboard/components/explorer/DependencyGraph.tsx b/dashboard/components/explorer/DependencyGraph.tsx
index 4c98ab025..14e33ed6b 100644
--- a/dashboard/components/explorer/DependencyGraph.tsx
+++ b/dashboard/components/explorer/DependencyGraph.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import React, { useState, memo } from 'react';
+import React, { useState, memo, useEffect } from 'react';
 import CytoscapeComponent from 'react-cytoscapejs';
 import Cytoscape, { EventObject } from 'cytoscape';
 import popper from 'cytoscape-popper';
@@ -12,6 +12,8 @@ import nodeHtmlLabel, {
 // @ts-ignore
 import COSEBilkent from 'cytoscape-cose-bilkent';
 
+import EmptyState from '@components/empty-state/EmptyState';
+
 import Tooltip from '@components/tooltip/Tooltip';
 import WarningIcon from '@components/icons/WarningIcon';
 import { ReactFlowData } from './hooks/useDependencyGraph';
@@ -36,6 +38,8 @@ Cytoscape.use(popper);
 const DependencyGraph = ({ data }: DependencyGraphProps) => {
   const [initDone, setInitDone] = useState(false);
 
+  const dataIsEmpty: boolean = data.nodes.length === 0;
+
   // Type technically is Cytoscape.EdgeCollection but that throws an unexpected error
   const loopAnimation = (eles: any) => {
     const ani = eles.animation(edgeAnimationConfig[0], edgeAnimationConfig[1]);
@@ -122,39 +126,55 @@ const DependencyGraph = ({ data }: DependencyGraphProps) => {
 
   return (
     <div className="relative h-full flex-1 bg-dependency-graph bg-[length:40px_40px]">
-      <CytoscapeComponent
-        className="h-full w-full"
-        elements={CytoscapeComponent.normalizeElements({
-          nodes: data.nodes,
-          edges: data.edges
-        })}
-        maxZoom={maxZoom}
-        minZoom={minZoom}
-        layout={graphLayoutConfig}
-        stylesheet={[
-          {
-            selector: 'node',
-            style: nodeStyeConfig
-          },
-          {
-            selector: 'edge',
-            style: edgeStyleConfig
-          },
-          {
-            selector: '.leaf',
-            style: leafStyleConfig
-          }
-        ]}
-        cy={(cy: Cytoscape.Core) => cyActionHandlers(cy)}
-      />
-      <div className="absolute bottom-0 left-0 flex gap-2 overflow-visible overflow-visible bg-black-100 text-black-400">
+      {dataIsEmpty ? (
+        <>
+          <div className="translate-y-[201px]">
+            <EmptyState
+              title="No results for this filter"
+              message="It seems like you have no cloud resources matching the filters you added"
+              mascotPose="tablet"
+            />
+          </div>
+        </>
+      ) : (
+        <>
+          <CytoscapeComponent
+            className="h-full w-full"
+            elements={CytoscapeComponent.normalizeElements({
+              nodes: data.nodes,
+              edges: data.edges
+            })}
+            maxZoom={maxZoom}
+            minZoom={minZoom}
+            layout={graphLayoutConfig}
+            stylesheet={[
+              {
+                selector: 'node',
+                style: nodeStyeConfig
+              },
+              {
+                selector: 'edge',
+                style: edgeStyleConfig
+              },
+              {
+                selector: '.leaf',
+                style: leafStyleConfig
+              }
+            ]}
+            cy={(cy: Cytoscape.Core) => cyActionHandlers(cy)}
+          />
+        </>
+      )}
+      <div className="absolute bottom-0 left-0 flex gap-2 overflow-visible bg-black-100 text-black-400">
         {data?.nodes?.length} Resources
-        <div className="relative">
-          <WarningIcon className="peer" height="16" width="16" />
-          <Tooltip bottom="xs" align="left" width="lg">
-            Only AWS resources are currently supported on the explorer.
-          </Tooltip>
-        </div>
+        {!dataIsEmpty && (
+          <div className="relative">
+            <WarningIcon className="peer" height="16" width="16" />
+            <Tooltip bottom="xs" align="left" width="lg">
+              Only AWS resources are currently supported on the explorer.
+            </Tooltip>
+          </div>
+        )}
       </div>
     </div>
   );
diff --git a/dashboard/package.json b/dashboard/package.json
index bce604520..0a9667039 100644
--- a/dashboard/package.json
+++ b/dashboard/package.json
@@ -7,6 +7,7 @@
     "build": "next build && next export",
     "start": "next start -p 3002",
     "lint": "next lint",
+    "format": "prettier --write \"**/*.{ts,tsx,json,css,scss,md}\"",
     "prepare": "cd .. && husky install dashboard/.husky",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",