Merge pull request #1101 from umrkhn/feature/1081-render-empty-state-…

…explorer [Feat-1081] Render empty state explorer (no resources)
tailwarden · Oct 20, 2023 · 9651f32 · 9651f32
2 parents b9d6263 + 3070707
commit 9651f32
Show file tree

Hide file tree

Showing 4 changed files with 178 additions and 6 deletions.
diff --git a/dashboard/components/empty-state/EmptyState.tsx b/dashboard/components/empty-state/EmptyState.tsx
@@ -22,6 +22,7 @@ type Poses =
   | 'whiteboard'
   | 'thinking'
   | 'working'
+  | 'devops'
   | 'tablet';
 
 export type EmptyStateProps = {

diff --git a/dashboard/components/explorer/DependencyGraph.tsx b/dashboard/components/explorer/DependencyGraph.tsx
@@ -126,6 +126,31 @@ 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)}
+      />
       {dataIsEmpty ? (
         <>
           <div className="translate-y-[201px]">

diff --git a/dashboard/components/explorer/DependencyGraphWrapper.tsx b/dashboard/components/explorer/DependencyGraphWrapper.tsx
@@ -5,6 +5,7 @@ import { useEffect, useState } from 'react';
 import parseURLParams from '@components/inventory/hooks/useInventory/helpers/parseURLParams';
 import { InventoryFilterData } from '@components/inventory/hooks/useInventory/types/useInventoryTypes';
 import ArrowDownIcon from '@components/icons/ArrowDownIcon';
+import EmptyState from '@components/empty-state/EmptyState';
 import DependencyGraphLoader from './DependencyGraphLoader';
 import DependendencyGraphFilter from './filter/DependendencyGraphFilter';
 import useDependencyGraph from './hooks/useDependencyGraph';
@@ -95,12 +96,32 @@ function DependencyGraphWrapper() {
             deleteFilter={deleteFilter}
           />
         </div>
-        <DependencyGraphLoader
-          loading={loading}
-          data={data}
-          error={error}
-          fetch={fetch}
-        />
+        {!data?.nodes.length && !data?.edges.length ? (
+          <div className="mt-24">
+            <EmptyState
+              title="We could not find any resources"
+              message="It seems like you have no AWS cloud resources associated with your cloud accounts"
+              mascotPose="devops"
+              secondaryActionLabel="Report an issue"
+              actionLabel="Check cloud account"
+              secondaryAction={() => {
+                router.push(
+                  'https://github.com/tailwarden/komiser/issues/new/choose'
+                );
+              }}
+              action={() => {
+                router.push('/');
+              }}
+            />
+          </div>
+        ) : (
+          <DependencyGraphLoader
+            loading={loading}
+            data={data}
+            error={error}
+            fetch={fetch}
+          />
+        )}
       </div>
     </>
   );