diff --git a/src/nextapp/pages/manager/namespaces/index.tsx b/src/nextapp/pages/manager/namespaces/index.tsx index cafc492e9..0d80b6697 100644 --- a/src/nextapp/pages/manager/namespaces/index.tsx +++ b/src/nextapp/pages/manager/namespaces/index.tsx @@ -23,7 +23,7 @@ import { Skeleton, Tooltip, VStack, - Stack + Stack, } from '@chakra-ui/react'; import ConfirmationDialog from '@/components/confirmation-dialog'; import Head from 'next/head'; @@ -53,13 +53,14 @@ import { RiApps2Fill } from 'react-icons/ri'; import PreviewBanner from '@/components/preview-banner'; import { QueryKey, useQueryClient } from 'react-query'; import { useRouter } from 'next/router'; -import Card from '@/components/card' -import GatewayGetStarted from '@/components/gateway-get-started' +import Card from '@/components/card'; +import GatewayGetStarted from '@/components/gateway-get-started'; import EmptyPane from '@/components/empty-pane'; import { Namespace, Query } from '@/shared/types/query.types'; import useCurrentNamespace from '@/shared/hooks/use-current-namespace'; import { useGlobal } from '@/shared/services/global'; import EditNamespaceDisplayName from '@/components/edit-display-name'; +import { useNamespaceRootBreadcrumbs } from '@/shared/hooks'; const actions = [ { @@ -120,6 +121,7 @@ const secondaryActions = [ const NamespacesPage: React.FC = () => { const { user } = useAuth(); + const breadcrumbs = useNamespaceRootBreadcrumbs(); const hasNamespace = !!user?.namespace; const router = useRouter(); const toast = useToast(); @@ -271,15 +273,14 @@ const NamespacesPage: React.FC = () => { - - + + <> - {isError && ( - Gateways Failed to Load - )} - {isSuccess && data.allNamespaces.length == 0 && ( - - )} + {isError && Gateways Failed to Load} + {isSuccess && data.allNamespaces.length == 0 && } {hasNamespace && ( @@ -444,4 +445,4 @@ const query = gql` name } } -`; \ No newline at end of file +`; diff --git a/src/nextapp/shared/hooks/index.ts b/src/nextapp/shared/hooks/index.ts index ac3f95bc2..48f490298 100644 --- a/src/nextapp/shared/hooks/index.ts +++ b/src/nextapp/shared/hooks/index.ts @@ -1 +1,2 @@ export { default as useNamespaceBreadcrumbs } from './use-namespace-breadcrumbs'; +export { default as useNamespaceRootBreadcrumbs } from './use-namespace-root-breadcrumbs'; diff --git a/src/nextapp/shared/hooks/use-namespace-breadcrumbs.ts b/src/nextapp/shared/hooks/use-namespace-breadcrumbs.ts index 42edff41d..1630428ee 100644 --- a/src/nextapp/shared/hooks/use-namespace-breadcrumbs.ts +++ b/src/nextapp/shared/hooks/use-namespace-breadcrumbs.ts @@ -12,7 +12,8 @@ const useNamespaceBreadcrumbs = ( if (user) { return [ - { href: '/manager/namespaces', text: `Namespaces (${user.namespace})` }, + { href: '/manager/gateways', text: 'My Gateways' }, + { href: '/manager/namespaces', text: `Gateway (${user.namespace})` }, ...appendedBreadcrumbs, ]; } diff --git a/src/nextapp/shared/hooks/use-namespace-root-breadcrumbs.ts b/src/nextapp/shared/hooks/use-namespace-root-breadcrumbs.ts new file mode 100644 index 000000000..28ad4558e --- /dev/null +++ b/src/nextapp/shared/hooks/use-namespace-root-breadcrumbs.ts @@ -0,0 +1,24 @@ +import { useAuth } from '@/shared/services/auth'; + +type Breadcrumb = { + href?: string; + text: string; +}; + +const useNamespaceRootBreadcrumbs = (): Breadcrumb[] => { + const { user } = useAuth(); + + if (user && user.namespace) { + return [ + { href: '/manager/gateways', text: 'My Gateways' }, + { text: `Gateway (${user.namespace})` }, + ]; + } + + return [ + { href: '/manager/gateways', text: 'My Gateways' }, + { text: 'Gateway' }, + ]; +}; + +export default useNamespaceRootBreadcrumbs;