update access breadcrumbs

pluralsh · Mar 27, 2024 · 85e6126 · 85e6126
1 parent 401f2d1
commit 85e6126
Show file tree

Hide file tree

Showing 5 changed files with 133 additions and 26 deletions.
diff --git a/assets/src/components/kubernetes/access/Access.tsx b/assets/src/components/kubernetes/access/Access.tsx
@@ -1,10 +1,5 @@
 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 {
@@ -50,26 +45,6 @@ export default function Access() {
   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: 'access',
-          url: getAccessAbsPath(cluster?.id),
-        },
-      ],
-      [cluster]
-    )
-  )
-
   const headerContent = useMemo(
     () => (
       <TabList

diff --git a/assets/src/components/kubernetes/access/ClusterRoleBindings.tsx b/assets/src/components/kubernetes/access/ClusterRoleBindings.tsx
@@ -1,19 +1,52 @@
 import { createColumnHelper } from '@tanstack/react-table'
 import { useMemo } from 'react'
 
+import { useSetBreadcrumbs } from '@pluralsh/design-system'
+
 import {
   Clusterrolebinding_ClusterRoleBindingList as ClusterRoleBindingListT,
   Clusterrolebinding_ClusterRoleBinding as ClusterRoleBindingT,
   ClusterRoleBindingsQuery,
   ClusterRoleBindingsQueryVariables,
+  Maybe,
   useClusterRoleBindingsQuery,
 } from '../../../generated/graphql-kubernetes'
 import { useDefaultColumns } from '../utils'
 import { ResourceList } from '../ResourceList'
+import { ClusterTinyFragment } from '../../../generated/graphql'
+import {
+  CLUSTER_ROLE_BINDINGS_REL_PATH,
+  getAccessAbsPath,
+  getKubernetesAbsPath,
+} from '../../../routes/kubernetesRoutesConsts'
+import { useKubernetesContext } from '../Kubernetes'
+
+export const getBreadcrumbs = (cluster?: Maybe<ClusterTinyFragment>) => [
+  {
+    label: 'kubernetes',
+    url: getKubernetesAbsPath(cluster?.id),
+  },
+  {
+    label: cluster?.name ?? '',
+    url: getKubernetesAbsPath(cluster?.id),
+  },
+  {
+    label: 'access',
+    url: getAccessAbsPath(cluster?.id),
+  },
+  {
+    label: 'cluster role bindings',
+    url: `${getAccessAbsPath(cluster?.id)}/${CLUSTER_ROLE_BINDINGS_REL_PATH}`,
+  },
+]
 
 const columnHelper = createColumnHelper<ClusterRoleBindingT>()
 
 export default function ClusterRoleBindings() {
+  const { cluster } = useKubernetesContext()
+
+  useSetBreadcrumbs(useMemo(() => getBreadcrumbs(cluster), [cluster]))
+
   const { colName, colLabels, colCreationTimestamp } =
     useDefaultColumns(columnHelper)
   const columns = useMemo(

diff --git a/assets/src/components/kubernetes/access/ClusterRoles.tsx b/assets/src/components/kubernetes/access/ClusterRoles.tsx
@@ -1,19 +1,52 @@
 import { createColumnHelper } from '@tanstack/react-table'
 import { useMemo } from 'react'
 
+import { useSetBreadcrumbs } from '@pluralsh/design-system'
+
 import {
   Clusterrole_ClusterRoleList as ClusterRoleListT,
   Clusterrole_ClusterRole as ClusterRoleT,
   ClusterRolesQuery,
   ClusterRolesQueryVariables,
+  Maybe,
   useClusterRolesQuery,
 } from '../../../generated/graphql-kubernetes'
 import { useDefaultColumns } from '../utils'
 import { ResourceList } from '../ResourceList'
+import { ClusterTinyFragment } from '../../../generated/graphql'
+import {
+  CLUSTER_ROLES_REL_PATH,
+  getAccessAbsPath,
+  getKubernetesAbsPath,
+} from '../../../routes/kubernetesRoutesConsts'
+import { useKubernetesContext } from '../Kubernetes'
+
+export const getBreadcrumbs = (cluster?: Maybe<ClusterTinyFragment>) => [
+  {
+    label: 'kubernetes',
+    url: getKubernetesAbsPath(cluster?.id),
+  },
+  {
+    label: cluster?.name ?? '',
+    url: getKubernetesAbsPath(cluster?.id),
+  },
+  {
+    label: 'access',
+    url: getAccessAbsPath(cluster?.id),
+  },
+  {
+    label: 'cluster roles',
+    url: `${getAccessAbsPath(cluster?.id)}/${CLUSTER_ROLES_REL_PATH}`,
+  },
+]
 
 const columnHelper = createColumnHelper<ClusterRoleT>()
 
 export default function ClusterRoles() {
+  const { cluster } = useKubernetesContext()
+
+  useSetBreadcrumbs(useMemo(() => getBreadcrumbs(cluster), [cluster]))
+
   const { colName, colLabels, colCreationTimestamp } =
     useDefaultColumns(columnHelper)
   const columns = useMemo(

diff --git a/assets/src/components/kubernetes/access/RoleBindings.tsx b/assets/src/components/kubernetes/access/RoleBindings.tsx
@@ -1,7 +1,10 @@
 import { createColumnHelper } from '@tanstack/react-table'
 import { useMemo } from 'react'
 
+import { useSetBreadcrumbs } from '@pluralsh/design-system'
+
 import {
+  Maybe,
   Rolebinding_RoleBindingList as RoleBindingListT,
   Rolebinding_RoleBinding as RoleBindingT,
   RoleBindingsQuery,
@@ -10,10 +13,40 @@ import {
 } from '../../../generated/graphql-kubernetes'
 import { useDefaultColumns } from '../utils'
 import { ResourceList } from '../ResourceList'
+import { ClusterTinyFragment } from '../../../generated/graphql'
+import {
+  ROLE_BINDINGS_REL_PATH,
+  getAccessAbsPath,
+  getKubernetesAbsPath,
+} from '../../../routes/kubernetesRoutesConsts'
+import { useKubernetesContext } from '../Kubernetes'
+
+export const getBreadcrumbs = (cluster?: Maybe<ClusterTinyFragment>) => [
+  {
+    label: 'kubernetes',
+    url: getKubernetesAbsPath(cluster?.id),
+  },
+  {
+    label: cluster?.name ?? '',
+    url: getKubernetesAbsPath(cluster?.id),
+  },
+  {
+    label: 'access',
+    url: getAccessAbsPath(cluster?.id),
+  },
+  {
+    label: 'role bindings',
+    url: `${getAccessAbsPath(cluster?.id)}/${ROLE_BINDINGS_REL_PATH}`,
+  },
+]
 
 const columnHelper = createColumnHelper<RoleBindingT>()
 
 export default function RoleBindings() {
+  const { cluster } = useKubernetesContext()
+
+  useSetBreadcrumbs(useMemo(() => getBreadcrumbs(cluster), [cluster]))
+
   const { colName, colNamespace, colLabels, colCreationTimestamp } =
     useDefaultColumns(columnHelper)
   const columns = useMemo(

diff --git a/assets/src/components/kubernetes/access/Roles.tsx b/assets/src/components/kubernetes/access/Roles.tsx
@@ -1,7 +1,10 @@
 import { createColumnHelper } from '@tanstack/react-table'
 import { useMemo } from 'react'
 
+import { useSetBreadcrumbs } from '@pluralsh/design-system'
+
 import {
+  Maybe,
   Role_RoleList as RoleListT,
   Role_Role as RoleT,
   RolesQuery,
@@ -10,10 +13,40 @@ import {
 } from '../../../generated/graphql-kubernetes'
 import { useDefaultColumns } from '../utils'
 import { ResourceList } from '../ResourceList'
+import { ClusterTinyFragment } from '../../../generated/graphql'
+import {
+  ROLES_REL_PATH,
+  getAccessAbsPath,
+  getKubernetesAbsPath,
+} from '../../../routes/kubernetesRoutesConsts'
+import { useKubernetesContext } from '../Kubernetes'
+
+export const getBreadcrumbs = (cluster?: Maybe<ClusterTinyFragment>) => [
+  {
+    label: 'kubernetes',
+    url: getKubernetesAbsPath(cluster?.id),
+  },
+  {
+    label: cluster?.name ?? '',
+    url: getKubernetesAbsPath(cluster?.id),
+  },
+  {
+    label: 'access',
+    url: getAccessAbsPath(cluster?.id),
+  },
+  {
+    label: 'roles',
+    url: `${getAccessAbsPath(cluster?.id)}/${ROLES_REL_PATH}`,
+  },
+]
 
 const columnHelper = createColumnHelper<RoleT>()
 
 export default function Roles() {
+  const { cluster } = useKubernetesContext()
+
+  useSetBreadcrumbs(useMemo(() => getBreadcrumbs(cluster), [cluster]))
+
   const { colName, colNamespace, colLabels, colCreationTimestamp } =
     useDefaultColumns(columnHelper)
   const columns = useMemo(