finish configmaps

assets/src/components/kubernetes/Kubernetes.tsx

@@ -141,7 +141,7 @@ export const useKubernetesContext = () => {
   return ctx
 }
 
-const NAMESPACE_PARAM = 'namespace'
+export const NAMESPACE_PARAM = 'namespace'
 
 const directory: Directory = [
   { path: WORKLOADS_REL_PATH, label: 'Workloads' },

assets/src/components/kubernetes/configuration/ConfigMap.tsx

@@ -1,5 +1,5 @@
 import { ReactElement, useMemo } from 'react'
-import { Code } from '@pluralsh/design-system'
+import { Code, useSetBreadcrumbs } from '@pluralsh/design-system'
 import { useParams } from 'react-router-dom'
 import { useTheme } from 'styled-components'
 import { isEmpty } from 'lodash'
@@ -13,11 +13,20 @@ import { KubernetesClient } from '../../../helpers/kubernetes.client'
 import LoadingIndicator from '../../utils/LoadingIndicator'
 import { ResponsivePageFullWidth } from '../../utils/layout/ResponsivePageFullWidth'
 import { SubTitle } from '../../cluster/nodes/SubTitle'
-import { Metadata } from '../utils'
+import { Metadata, useKubernetesCluster } from '../utils'
+import { NAMESPACE_PARAM } from '../Kubernetes'
+import {
+  CONFIG_MAPS_REL_PATH,
+  getConfigurationAbsPath,
+  getResourceDetailsAbsPath,
+} from '../../../routes/kubernetesRoutesConsts'
+
+import { getBreadcrumbs } from './ConfigMaps'
 
 export default function ConfigMap(): ReactElement {
   const theme = useTheme()
-  const { clusterId, name, namespace } = useParams()
+  const cluster = useKubernetesCluster()
+  const { clusterId, name = '', namespace = '' } = useParams()
   const { data, loading } = useConfigMapQuery({
     client: KubernetesClient(clusterId ?? ''),
     skip: !clusterId,
@@ -48,7 +57,29 @@ export default function ConfigMap(): ReactElement {
     [cm?.data]
   )
 
-  // TODO: Breadcrumbs here and on the list.
+  useSetBreadcrumbs(
+    useMemo(
+      () => [
+        ...getBreadcrumbs(cluster),
+        {
+          label: namespace ?? '',
+          url: `${getConfigurationAbsPath(
+            cluster?.id
+          )}/${CONFIG_MAPS_REL_PATH}?${NAMESPACE_PARAM}=${namespace}`,
+        },
+        {
+          label: name ?? '',
+          url: getResourceDetailsAbsPath(
+            clusterId,
+            'configmap',
+            name,
+            namespace
+          ),
+        },
+      ],
+      [cluster, clusterId, name, namespace]
+    )
+  )
 
   if (loading) return <LoadingIndicator />
 

assets/src/components/kubernetes/configuration/ConfigMaps.tsx

@@ -2,19 +2,52 @@ import { useMemo } from 'react'
 
 import { createColumnHelper } from '@tanstack/react-table'
 
+import { useSetBreadcrumbs } from '@pluralsh/design-system'
+
 import { useDefaultColumns } from '../utils'
 import { ResourceList } from '../ResourceList'
 import {
   Configmap_ConfigMapList as ConfigMapListT,
   Configmap_ConfigMap as ConfigMapT,
   ConfigMapsQuery,
   ConfigMapsQueryVariables,
+  Maybe,
   useConfigMapsQuery,
 } from '../../../generated/graphql-kubernetes'
+import {
+  CONFIG_MAPS_REL_PATH,
+  getConfigurationAbsPath,
+  getKubernetesAbsPath,
+} from '../../../routes/kubernetesRoutesConsts'
+import { ClusterTinyFragment } from '../../../generated/graphql'
+import { useKubernetesContext } from '../Kubernetes'
+
+export const getBreadcrumbs = (cluster?: Maybe<ClusterTinyFragment>) => [
+  {
+    label: 'kubernetes',
+    url: getKubernetesAbsPath(cluster?.id),
+  },
+  {
+    label: cluster?.name ?? '',
+    url: getKubernetesAbsPath(cluster?.id),
+  },
+  {
+    label: 'configuration',
+    url: getConfigurationAbsPath(cluster?.id),
+  },
+  {
+    label: 'config maps',
+    url: `${getConfigurationAbsPath(cluster?.id)}/${CONFIG_MAPS_REL_PATH}`,
+  },
+]
 
 const columnHelper = createColumnHelper<ConfigMapT>()
 
 export default function ConfigMaps() {
+  const { cluster } = useKubernetesContext()
+
+  useSetBreadcrumbs(useMemo(() => getBreadcrumbs(cluster), [cluster]))
+
   const { colName, colNamespace, colLabels, colCreationTimestamp } =
     useDefaultColumns(columnHelper)
   const columns = useMemo(

assets/src/components/kubernetes/configuration/Configuration.tsx

@@ -1,17 +1,11 @@
 import { Outlet, useMatch } from 'react-router-dom'
-import {
-  SubTab,
-  TabList,
-  TabPanel,
-  useSetBreadcrumbs,
-} from '@pluralsh/design-system'
+import { SubTab, TabList, TabPanel } from '@pluralsh/design-system'
 import { Suspense, useMemo, useRef, useState } from 'react'
 
 import {
   CONFIG_MAPS_REL_PATH,
   SECRETS_REL_PATH,
   getConfigurationAbsPath,
-  getKubernetesAbsPath,
 } from '../../../routes/kubernetesRoutesConsts'
 
 import { ScrollablePage } from '../../utils/layout/ScrollablePage'
@@ -46,26 +40,6 @@ export default function Configuration() {
   const tab = pathMatch?.params?.tab || ''
   const currentTab = directory.find(({ path }) => path === tab)
 
-  useSetBreadcrumbs(
-    useMemo(
-      () => [
-        {
-          label: 'kubernetes',
-          url: getKubernetesAbsPath(cluster?.id),
-        },
-        {
-          label: cluster?.name ?? '',
-          url: getKubernetesAbsPath(cluster?.id),
-        },
-        {
-          label: 'configuration',
-          url: getConfigurationAbsPath(cluster?.id),
-        },
-      ],
-      [cluster]
-    )
-  )
-
   const headerContent = useMemo(
     () => (
       <TabList

assets/src/components/kubernetes/utils.tsx

@@ -2,7 +2,7 @@ import uniqWith from 'lodash/uniqWith'
 import { useMemo, useState } from 'react'
 import { ColumnHelper, SortingState, TableOptions } from '@tanstack/react-table'
 import { Card, ChipList, Prop } from '@pluralsh/design-system'
-import { Link } from 'react-router-dom'
+import { Link, useParams } from 'react-router-dom'
 import { useTheme } from 'styled-components'
 import moment from 'moment/moment'
 
@@ -13,9 +13,13 @@ import {
   Types_TypeMeta as TypeMetaT,
 } from '../../generated/graphql-kubernetes'
 import { DateTimeCol } from '../utils/table/DateTimeCol'
-import { ClusterTinyFragment } from '../../generated/graphql'
+import {
+  ClusterTinyFragment,
+  useClustersTinyQuery,
+} from '../../generated/graphql'
 import { InlineLink } from '../utils/typography/InlineLink'
 import { getResourceDetailsAbsPath } from '../../routes/kubernetesRoutesConsts'
+import { mapExistingNodes } from '../../utils/graphql'
 
 export const ITEMS_PER_PAGE = 25
 
@@ -149,7 +153,26 @@ export function extendConnection(
   }
 }
 
-// TODO: Add size to prop and use bigger version here.
+export function useKubernetesCluster() {
+  const { clusterId } = useParams()
+
+  const { data } = useClustersTinyQuery({
+    pollInterval: 120_000,
+    fetchPolicy: 'cache-and-network',
+  })
+
+  const clusters = useMemo(
+    () => mapExistingNodes(data?.clusters),
+    [data?.clusters]
+  )
+
+  return useMemo(
+    () => clusters.find(({ id }) => id === clusterId),
+    [clusterId, clusters]
+  )
+}
+
+// TODO: Add size to prop and use bigger version here, use medium chips as well then.
 export function Metadata({ objectMeta }: { objectMeta?: Maybe<ObjectMetaT> }) {
   const theme = useTheme()
 
@@ -178,13 +201,15 @@ export function Metadata({ objectMeta }: { objectMeta?: Maybe<ObjectMetaT> }) {
       </div>
       <Prop title="Labels">
         <ChipList
+          size="small"
           limit={5}
           values={Object.entries(objectMeta.labels || {})}
           transformValue={(label) => label.join(': ')}
         />
       </Prop>
       <Prop title="Annotations">
         <ChipList
+          size="small"
           limit={5}
           values={Object.entries(objectMeta.annotations || {})}
           transformValue={(annotation) => annotation.join(': ')}