feat: Add observers table (#1369)

assets/src/components/cd/ContinuousDeployment.tsx

@@ -19,6 +19,7 @@ import {
   CLUSTERS_REL_PATH,
   GLOBAL_SERVICES_REL_PATH,
   NAMESPACES_REL_PATH,
+  OBSERVERS_REL_PATH,
   PIPELINES_REL_PATH,
   REPOS_REL_PATH,
   SERVICES_REL_PATH,
@@ -153,6 +154,11 @@ function useDirectory({ filtered = true }: { filtered?: boolean } = {}) {
         label: 'Namespaces',
         enabled: personaConfiguration?.all || config?.services,
       },
+      {
+        path: OBSERVERS_REL_PATH,
+        label: 'Observers',
+        enabled: true,
+      },
     ]
 
     if (!filtered) {

assets/src/components/cd/namespaces/NamespacesTable.tsx

@@ -1,9 +1,8 @@
 import { ComponentProps, useMemo } from 'react'
-import { EmptyState, Table } from '@pluralsh/design-system'
+import { Table } from '@pluralsh/design-system'
 import { useNavigate } from 'react-router'
 import { useTheme } from 'styled-components'
 import type { Row } from '@tanstack/react-table'
-import isEmpty from 'lodash/isEmpty'
 import { ManagedNamespace, useManagedNamespacesQuery } from 'generated/graphql'
 import { getNamespacesDetailsPath } from 'routes/cdRoutesConsts'
 import { Edge } from 'utils/graphql'
@@ -71,7 +70,7 @@ export function NamespacesTable() {
     >
       {!data ? (
         <LoadingIndicator />
-      ) : !isEmpty(data?.managedNamespaces?.edges) ? (
+      ) : (
         <FullHeightTableWrap>
           <Table
             virtualizeRows
@@ -94,12 +93,11 @@ export function NamespacesTable() {
             reactTableOptions={reactTableOptions}
             reactVirtualOptions={NAMESPACES_REACT_VIRTUAL_OPTIONS}
             onVirtualSliceChange={setVirtualSlice}
+            emptyStateProps={{
+              message: "Looks like you don't have any namespaces yet",
+            }}
           />
         </FullHeightTableWrap>
-      ) : (
-        <div css={{ height: '100%' }}>
-          <EmptyState message="Looks like you don't have any namespaces yet." />
-        </div>
       )}
     </div>
   )

assets/src/components/cd/observers/ObserverStatusChip.tsx

@@ -0,0 +1,23 @@
+import { ComponentProps } from 'react'
+import { Chip } from '@pluralsh/design-system'
+import capitalize from 'lodash/capitalize'
+
+import { ObserverStatus } from '../../../generated/graphql'
+
+const statusToSeverity = {
+  [ObserverStatus.Healthy]: 'success',
+  [ObserverStatus.Failed]: 'danger',
+} as const satisfies Record<
+  ObserverStatus,
+  ComponentProps<typeof Chip>['severity']
+>
+
+export default function ObserverStatusChip({
+  status,
+}: {
+  status?: ObserverStatus
+}) {
+  if (!status) return null
+
+  return <Chip severity={statusToSeverity[status]}>{capitalize(status)}</Chip>
+}

assets/src/components/cd/observers/ObserverTargetChip.tsx

@@ -0,0 +1,28 @@
+import { Chip } from '@pluralsh/design-system'
+import { ComponentProps } from 'react'
+
+import { ObserverTargetType } from '../../../generated/graphql'
+
+const targetDisplayName = {
+  [ObserverTargetType.Git]: 'Git',
+  [ObserverTargetType.Helm]: 'Helm',
+  [ObserverTargetType.Oci]: 'OCI',
+} as const satisfies Record<ObserverTargetType, string>
+
+export default function ObserverTargetChip({
+  target,
+  ...props
+}: {
+  target?: ObserverTargetType
+} & ComponentProps<typeof Chip>) {
+  if (!target) return null
+
+  return (
+    <Chip
+      severity="info"
+      {...props}
+    >
+      {targetDisplayName[target]}
+    </Chip>
+  )
+}

assets/src/components/cd/observers/ObserverTargetOrderChip.tsx

@@ -0,0 +1,27 @@
+import { Chip } from '@pluralsh/design-system'
+import { ComponentProps } from 'react'
+
+import { ObserverTargetOrder } from '../../../generated/graphql'
+
+const orderDisplayName = {
+  [ObserverTargetOrder.Latest]: 'Latest',
+  [ObserverTargetOrder.Semver]: 'SemVer',
+} as const satisfies Record<ObserverTargetOrder, string>
+
+export default function ObserverTargetOrderChip({
+  order,
+  ...props
+}: {
+  order: ObserverTargetOrder
+} & ComponentProps<typeof Chip>) {
+  if (!order) return null
+
+  return (
+    <Chip
+      severity="info"
+      {...props}
+    >
+      {orderDisplayName[order]}
+    </Chip>
+  )
+}