add self-hosted and cloud instance combined table

Author: jsladerman

www/src/components/Plural.tsx

@@ -76,6 +76,11 @@ const Clusters = lazy(() =>
     default: module.Clusters,
   }))
 )
+const AllClusters = lazy(() =>
+  import('./overview/clusters/all/AllClusters').then((module) => ({
+    default: module.AllClusters,
+  }))
+)
 const SelfHostedClusters = lazy(() =>
   import('./overview/clusters/self-hosted/SelfHostedClusters').then(
     (module) => ({
@@ -646,10 +651,14 @@ export function PluralInner() {
                     element={
                       <Navigate
                         replace
-                        to="self-hosted"
+                        to="all"
                       />
                     }
                   />
+                  <Route
+                    path="all"
+                    element={<AllClusters />}
+                  />
                   <Route
                     path="self-hosted"
                     element={<SelfHostedClusters />}

www/src/components/overview/OverviewHeader.tsx

@@ -6,6 +6,7 @@ import { useLocation, useNavigate } from 'react-router-dom'
 import { LinkTabWrap } from '../utils/Tabs'
 
 const DIRECTORY = [
+  { path: '/overview/clusters/all', label: 'All' },
   { path: '/overview/clusters/self-hosted', label: 'Self-hosted clusters' },
   { path: '/overview/clusters/plural-cloud', label: 'Plural cloud instances' },
 ]
@@ -16,11 +17,6 @@ export default function OverviewHeader(): ReactElement {
   const { pathname } = useLocation()
   const currentTab = DIRECTORY.find((tab) => pathname?.startsWith(tab.path))
 
-  // const [showUnfinished, setShowUnfinished] = useState(hasUnfinishedCreation())
-  // const { triggerDelete, loading } = useDeleteUnfinishedInstance({
-  //   onClear: () => setShowUnfinished(false),
-  // })
-
   return (
     <Flex justifyContent="space-between">
       <TabList
@@ -41,15 +37,6 @@ export default function OverviewHeader(): ReactElement {
         ))}
       </TabList>
       <Flex gap="medium">
-        {/* {showUnfinished && (
-          <Button
-            destructive
-            loading={loading}
-            onClick={triggerDelete}
-          >
-            Cancel cluster creation
-          </Button>
-        )} */}
         <Button onClick={() => navigate('/create-cluster')}>
           Create cluster
         </Button>

www/src/components/overview/clusters/ClusterList.tsx

@@ -1,13 +1,16 @@
 import { isEmpty } from 'lodash'
-import { ReactElement, useContext, useEffect, useState } from 'react'
+import { ReactElement, useContext, useEffect, useMemo, useState } from 'react'
 
 import { Button, Flex, Toast } from '@pluralsh/design-system'
 
 import { Outlet } from 'react-router-dom'
 
 import ConsoleInstancesContext from 'contexts/ConsoleInstancesContext'
 
-import { FINISHED_LOCAL_CREATE_KEY } from 'components/create-cluster/CreateClusterActions'
+import {
+  FINISHED_CONSOLE_INSTANCE_KEY,
+  FINISHED_LOCAL_CREATE_KEY,
+} from 'components/create-cluster/CreateClusterActions'
 
 import { useTheme } from 'styled-components'
 
@@ -19,9 +22,23 @@ import ClustersContext from '../../../contexts/ClustersContext'
 
 import OverviewHeader from '../OverviewHeader'
 
+import CurrentUserContext from 'contexts/CurrentUserContext'
 import ClusterListEmptyState from './ClusterListEmptyState'
 import ClustersHelpSection from './ClustersHelpSection'
 
+import { ConsoleInstanceFragment } from 'generated/graphql'
+import {
+  CombinedClusterT,
+  CombinedClusterType,
+} from './all/AllClustersTableCols'
+import { ClusterListElement, fromClusterList } from './clusterListUtils'
+
+export type OverviewContextType = {
+  selfHostedClusters: ClusterListElement[]
+  cloudInstances: ConsoleInstanceFragment[]
+  combinedClusterList: CombinedClusterT[]
+}
+
 export const CLUSTERS_ROOT_CRUMB = {
   label: 'clusters',
   url: '/overview/clusters',
@@ -32,18 +49,58 @@ export const CLUSTERS_OVERVIEW_BREADCRUMBS = [
 ]
 
 export function Clusters(): ReactElement | null {
-  const [showToast, setShowToast] = useState(false)
+  const { spacing } = useTheme()
+  const [showSupportToast, setShowSupportToast] = useState(false)
+  const [showPluralCloudToast, setShowPluralCloudToast] = useState(false)
+
+  const me = useContext(CurrentUserContext)
   const { clusters } = useContext(ClustersContext)
   const { instances } = useContext(ConsoleInstancesContext)
   const showEmpty = isEmpty(clusters) && isEmpty(instances)
 
+  // checks if clusters are still empty after finishing plural cloud setup
   useEffect(() => {
     if (localStorage.getItem(FINISHED_LOCAL_CREATE_KEY) === 'true') {
-      if (isEmpty(clusters)) setShowToast(true)
+      if (isEmpty(clusters)) setShowSupportToast(true)
       localStorage.removeItem(FINISHED_LOCAL_CREATE_KEY)
     }
   }, [clusters])
 
+  // shows a success toast after plural cloud instance is created
+  useEffect(() => {
+    const id = localStorage.getItem(FINISHED_CONSOLE_INSTANCE_KEY)
+
+    if (id && instances.some((i) => i.id === id)) {
+      localStorage.removeItem(FINISHED_CONSOLE_INSTANCE_KEY)
+      setShowPluralCloudToast(true)
+    }
+  }, [instances])
+
+  const ctx: OverviewContextType = useMemo(() => {
+    const selfHostedClusters = fromClusterList(clusters, me)
+    const cloudInstances = instances
+    const combinedClusterList = [
+      ...instances.map((instance) => ({
+        type: CombinedClusterType.PluralCloud as const,
+        id: instance.id,
+        name: instance.name,
+        status: instance.status,
+        owner: instance.owner,
+        consoleUrl: instance.url,
+      })),
+      ...selfHostedClusters.map((cluster) => ({
+        type: CombinedClusterType.SelfHosted as const,
+        ...cluster,
+      })),
+    ]
+
+    return {
+      selfHostedClusters,
+      cloudInstances,
+      combinedClusterList,
+    }
+  }, [clusters, me, instances])
+
   return (
     <Flex
       direction="column"
@@ -59,13 +116,22 @@ export function Clusters(): ReactElement | null {
       ) : (
         <>
           <OverviewHeader />
-          <Outlet />
+          <Outlet context={ctx} />
         </>
       )}
       <ContactSupportToast
-        open={showToast}
-        onClose={() => setShowToast(false)}
+        open={showSupportToast}
+        onClose={() => setShowSupportToast(false)}
       />
+      <Toast
+        show={showPluralCloudToast}
+        marginBottom={spacing.xsmall}
+        severity="success"
+        position="bottom"
+        onClose={() => setShowPluralCloudToast(false)}
+      >
+        Your instance was created successfully!
+      </Toast>
     </Flex>
   )
 }

www/src/components/overview/clusters/Clusters.tsx

@@ -11,12 +11,12 @@ import { A, Div } from 'honorable'
 import { Link } from 'react-router-dom'
 import styled, { useTheme } from 'styled-components'
 
-import { Source } from '../../../generated/graphql'
+import { ClusterFragment, Source } from '../../../generated/graphql'
 import { ProviderIcon } from '../../utils/ProviderIcon'
 
 import ClusterHealth from './ClusterHealth'
 import ClusterOwner from './ClusterOwner'
-import { ClusterListElement } from './types'
+import { ClusterListElement } from './clusterListUtils'
 
 const clusterExists = (row: ClusterListElement): boolean =>
   row.pingedAt !== null
@@ -40,16 +40,10 @@ const sourceDisplayNames = {
   [Source.Demo]: 'Demo',
 }
 
-export const ColCluster = columnHelper.accessor((row) => row.name, {
-  id: 'cluster',
-  meta: { gridTemplate: '3fr' },
-  enableGlobalFilter: true,
-  enableSorting: true,
-  cell: ({
-    row: {
-      original: { id, name, provider, source, accessible, pingedAt },
-    },
-  }) => (
+export function ClusterDisplay({ cluster }: { cluster: ClusterListElement }) {
+  const { id, name, provider, source, accessible, pingedAt } = cluster
+
+  return (
     <CellWrap>
       <AppIcon
         size="xxsmall"
@@ -75,7 +69,15 @@ export const ColCluster = columnHelper.accessor((row) => row.name, {
         <CellCaption>{sourceDisplayNames[source || '']}</CellCaption>
       </div>
     </CellWrap>
-  ),
+  )
+}
+
+export const ColCluster = columnHelper.accessor((row) => row.name, {
+  id: 'cluster',
+  meta: { gridTemplate: '3fr' },
+  enableGlobalFilter: true,
+  enableSorting: true,
+  cell: ({ row }) => <ClusterDisplay cluster={row.original} />,
   header: 'Cluster',
 })
 

www/src/components/overview/clusters/SelfHostedTableCols.tsx

@@ -0,0 +1,37 @@
+import { Table, useSetBreadcrumbs } from '@pluralsh/design-system'
+import { type Row } from '@tanstack/react-table'
+import { useNavigate, useOutletContext } from 'react-router-dom'
+import { CLUSTERS_OVERVIEW_BREADCRUMBS, OverviewContextType } from '../Clusters'
+import {
+  allClustersCols,
+  CombinedClusterT,
+  CombinedClusterType,
+} from './AllClustersTableCols'
+import { PLURAL_CLOUD_INSTANCES_PATH_ABS } from '../plural-cloud/PluralCloudInstances'
+
+const ALL_CLUSTERS_BREADCRUMBS = [
+  ...CLUSTERS_OVERVIEW_BREADCRUMBS,
+  { label: 'all', url: '/overview/clusters/all' },
+]
+
+export function AllClusters() {
+  useSetBreadcrumbs(ALL_CLUSTERS_BREADCRUMBS)
+  const navigate = useNavigate()
+  const { combinedClusterList } = useOutletContext<OverviewContextType>()
+  return (
+    <Table
+      data={combinedClusterList}
+      columns={allClustersCols}
+      emptyStateProps={{ message: 'No clusters found' }}
+      onRowClick={(_, { original }: Row<CombinedClusterT>) => {
+        if (
+          original.type === CombinedClusterType.SelfHosted &&
+          original.accessible
+        )
+          navigate(`/clusters/${original.id}`)
+        else if (original.type === CombinedClusterType.PluralCloud)
+          navigate(PLURAL_CLOUD_INSTANCES_PATH_ABS + `/${original.id}`)
+      }}
+    />
+  )
+}