inside routing

src/components/molecules/ManageableBreadcrumbs/ManageableBreadcrumbs.tsx

@@ -3,7 +3,11 @@ import { useLocation, useParams } from 'react-router-dom'
 import { ManageableBreadcrumbsWithDataProvider } from '@prorobotech/openapi-k8s-toolkit'
 import { BASE_API_GROUP, BASE_API_VERSION } from 'constants/customizationApiGroupAndVersion'
 
-export const ManageableBreadcrumbs: FC = () => {
+type TManageableBreadCrumbsProps = {
+  inside?: boolean
+}
+
+export const ManageableBreadcrumbs: FC<TManageableBreadCrumbsProps> = ({ inside }) => {
   const { pathname } = useLocation()
   const params = useParams()
   const clusterName = params?.clusterName || ''
@@ -18,7 +22,9 @@ export const ManageableBreadcrumbs: FC = () => {
 
   return (
     <ManageableBreadcrumbsWithDataProvider
-      uri={`/api/clusters/${clusterName}/k8s/apis/${BASE_API_GROUP}/${BASE_API_VERSION}/breadcrumbs/`}
+      uri={`/api/clusters/${clusterName}/k8s/apis/${BASE_API_GROUP}/${BASE_API_VERSION}/${
+        inside ? 'breadcrumbsinside' : 'breadcrumbs'
+      }/`}
       refetchInterval={5000}
       isEnabled={clusterName !== undefined}
       replaceValues={{

src/pages/FormApiPage/FormApiPage.tsx

@@ -32,7 +32,7 @@ export const FormApiPage: FC<TFormApiPageProps> = ({ forcedTheme, inside }) => {
 
   return (
     <BaseTemplate forcedTheme={forcedTheme} inside={inside}>
-      <ManageableBreadcrumbs />
+      <ManageableBreadcrumbs inside={inside} />
       <Spacer $space={20} $samespace />
       <BackLink
         to={backLink || customBacklink}

src/pages/FormBuiltinPage/FormBuiltinPage.tsx

@@ -32,7 +32,7 @@ export const FormBuiltinPage: FC<TFormBuiltinPageProps> = ({ forcedTheme, inside
 
   return (
     <BaseTemplate forcedTheme={forcedTheme} inside={inside}>
-      <ManageableBreadcrumbs />
+      <ManageableBreadcrumbs inside={inside} />
       <Spacer $space={20} $samespace />
       <BackLink
         to={backLink || customBacklink}

src/pages/FormCrdPage/FormCrdPage.tsx

@@ -32,7 +32,7 @@ export const FormCrdPage: FC<TFormCrdPageProps> = ({ forcedTheme, inside }) => {
 
   return (
     <BaseTemplate forcedTheme={forcedTheme} inside={inside}>
-      <ManageableBreadcrumbs />
+      <ManageableBreadcrumbs inside={inside} />
       <Spacer $space={20} $samespace />
       <BackLink
         to={backLink || customBacklink}

src/pages/ListInsideApiByApiGroupPage/ListInsideApiByApiGroupPage.tsx

@@ -1,10 +1,7 @@
 import React, { FC } from 'react'
-import { Breadcrumb } from 'antd'
 import { Spacer } from '@prorobotech/openapi-k8s-toolkit'
-import { useParams, Link } from 'react-router-dom'
-import { useSelector } from 'react-redux'
-import type { RootState } from 'store/store'
-import { ListInsideApisByApiGroup } from 'components'
+import { useParams } from 'react-router-dom'
+import { ListInsideApisByApiGroup, ManageableBreadcrumbs } from 'components'
 import { BaseTemplate } from 'templates'
 
 type TListInsideApiByApiGroupPageProps = {
@@ -13,33 +10,11 @@ type TListInsideApiByApiGroupPageProps = {
 }
 
 export const ListInsideApiByApiGroupPage: FC<TListInsideApiByApiGroupPageProps> = ({ forcedTheme, inside }) => {
-  const { clusterName, namespace, apiGroup, apiVersion } = useParams()
-  const baseprefix = useSelector((state: RootState) => state.baseprefix.baseprefix)
-
-  const breadcrumbItems = [
-    {
-      title: <Link to={`${baseprefix}/inside/clusters`}>In-Cloud: inside</Link>,
-      key: 'home',
-    },
-    {
-      title: (
-        <Link to={`${baseprefix}/inside/${clusterName}${namespace ? `/${namespace}` : ''}/apis`}>API Resources</Link>
-      ),
-      key: 'list-api',
-    },
-    {
-      title: 'Api Resources by Group',
-      key: 'api-resources-by-group',
-    },
-    {
-      title: apiGroup,
-      key: 'api-group',
-    },
-  ]
+  const { namespace, apiGroup, apiVersion } = useParams()
 
   return (
     <BaseTemplate forcedTheme={forcedTheme} inside={inside}>
-      <Breadcrumb items={breadcrumbItems} separator=">" />
+      <ManageableBreadcrumbs inside />
       <Spacer $space={20} $samespace />
       {apiGroup && apiVersion && (
         <ListInsideApisByApiGroup namespace={namespace} apiGroup={apiGroup} apiVersion={apiVersion} />

src/pages/ListInsideApiPage/ListInsideApiPage.tsx

@@ -1,10 +1,7 @@
 import React, { FC } from 'react'
-import { Breadcrumb } from 'antd'
 import { Spacer } from '@prorobotech/openapi-k8s-toolkit'
-import { useParams, Link } from 'react-router-dom'
-import { useSelector } from 'react-redux'
-import type { RootState } from 'store/store'
-import { ListInsideAllResources } from 'components'
+import { useParams } from 'react-router-dom'
+import { ListInsideAllResources, ManageableBreadcrumbs } from 'components'
 import { BaseTemplate } from 'templates'
 
 type TListInsideApiPageProps = {
@@ -14,22 +11,10 @@ type TListInsideApiPageProps = {
 
 export const ListInsideApiPage: FC<TListInsideApiPageProps> = ({ forcedTheme, inside }) => {
   const { namespace } = useParams()
-  const baseprefix = useSelector((state: RootState) => state.baseprefix.baseprefix)
-
-  const breadcrumbItems = [
-    {
-      title: <Link to={`${baseprefix}/inside/clusters`}>In-Cloud: inside</Link>,
-      key: 'home',
-    },
-    {
-      title: 'API Resources',
-      key: 'list-api',
-    },
-  ]
 
   return (
     <BaseTemplate forcedTheme={forcedTheme} inside={inside}>
-      <Breadcrumb items={breadcrumbItems} separator=">" />
+      <ManageableBreadcrumbs inside />
       <Spacer $space={20} $samespace />
       <ListInsideAllResources namespace={namespace} />
     </BaseTemplate>

src/pages/ListInsideCrdByApiGroupPage/ListInsideCrdByApiGroupPage.tsx

@@ -1,10 +1,7 @@
 import React, { FC } from 'react'
-import { Breadcrumb } from 'antd'
 import { Spacer } from '@prorobotech/openapi-k8s-toolkit'
-import { useParams, Link } from 'react-router-dom'
-import { useSelector } from 'react-redux'
-import type { RootState } from 'store/store'
-import { ListInsideCrdsByApiGroup } from 'components'
+import { useParams } from 'react-router-dom'
+import { ListInsideCrdsByApiGroup, ManageableBreadcrumbs } from 'components'
 import { BaseTemplate } from 'templates'
 
 type TListInsideCrdByApiGroupPageProps = {
@@ -13,33 +10,11 @@ type TListInsideCrdByApiGroupPageProps = {
 }
 
 export const ListInsideCrdByApiGroupPage: FC<TListInsideCrdByApiGroupPageProps> = ({ forcedTheme, inside }) => {
-  const { clusterName, namespace, apiGroup, apiVersion, apiExtensionVersion } = useParams()
-  const baseprefix = useSelector((state: RootState) => state.baseprefix.baseprefix)
-
-  const breadcrumbItems = [
-    {
-      title: <Link to={`${baseprefix}/inside/clusters`}>In-Cloud: inside</Link>,
-      key: 'home',
-    },
-    {
-      title: (
-        <Link to={`${baseprefix}/inside/${clusterName}${namespace ? `/${namespace}` : ''}/apis`}>API Resources</Link>
-      ),
-      key: 'list-api',
-    },
-    {
-      title: 'CRD by Group',
-      key: 'crd-by-group',
-    },
-    {
-      title: apiGroup,
-      key: 'api-group',
-    },
-  ]
+  const { namespace, apiGroup, apiVersion, apiExtensionVersion } = useParams()
 
   return (
     <BaseTemplate forcedTheme={forcedTheme} inside={inside}>
-      <Breadcrumb items={breadcrumbItems} separator=">" />
+      <ManageableBreadcrumbs inside />
       <Spacer $space={20} $samespace />
       {apiGroup && apiVersion && apiExtensionVersion && (
         <ListInsideCrdsByApiGroup

src/pages/TableApiPage/TableApiPage.tsx

@@ -30,7 +30,11 @@ export const TableApiPage: FC<TTableApiPageProps> = ({ forcedTheme, inside }) =>
       `${baseprefix}/${clusterName}/${possibleProject}/api-table/${BASE_INSTANCES_API_GROUP}/${BASE_INSTANCES_VERSION}/${BASE_INSTANCES_RESOURCE_NAME}`
     : `${baseprefix}/clusters/${clusterName}/projects/${possibleProject}`
 
-  const clustererBacklink = `${baseprefix}/clusters`
+  const customBacklinkWithInside = inside
+    ? `${baseprefix}/inside/${clusterName}${namespace ? `/${namespace}` : ''}/apis`
+    : customBacklink
+
+  const clustererBacklink = inside ? customBacklinkWithInside : `${baseprefix}/clusters`
 
   // const instancesBacklink =
   //   apiGroup === 'apps' && apiVersion === 'v1' && typeName === 'deployments'
@@ -41,8 +45,11 @@ export const TableApiPage: FC<TTableApiPageProps> = ({ forcedTheme, inside }) =>
 
   return (
     <BaseTemplate forcedTheme={forcedTheme} inside={inside}>
-      <ManageableBreadcrumbs />
-      <BackLink to={namespace ? customBacklink : clustererBacklink} title={`${apiGroup}/${apiVersion}/${typeName}`} />
+      <ManageableBreadcrumbs inside={inside} />
+      <BackLink
+        to={namespace ? customBacklinkWithInside : clustererBacklink}
+        title={`${apiGroup}/${apiVersion}/${typeName}`}
+      />
       <Spacer $space={20} $samespace />
       <ContentCard flexGrow={1} displayFlex flexFlow="column">
         <RowFlexGrow>

src/pages/TableBuiltinPage/TableBuiltinPage.tsx

@@ -29,12 +29,16 @@ export const TableBuiltinPage: FC<TTableBuiltinPageProps> = ({ forcedTheme, insi
     ? `${baseprefix}/${clusterName}/${possibleProject}/api-table/${BASE_INSTANCES_API_GROUP}/${BASE_INSTANCES_VERSION}/${BASE_INSTANCES_RESOURCE_NAME}`
     : `${baseprefix}/clusters/${clusterName}/projects/${possibleProject}`
 
-  const clustererBacklink = `${baseprefix}/clusters`
+  const customBacklinkWithInside = inside
+    ? `${baseprefix}/inside/${clusterName}${namespace ? `/${namespace}` : ''}/apis`
+    : customBacklink
+
+  const clustererBacklink = inside ? customBacklinkWithInside : `${baseprefix}/clusters`
 
   return (
     <BaseTemplate forcedTheme={forcedTheme} inside={inside}>
-      <ManageableBreadcrumbs />
-      <BackLink to={namespace ? customBacklink : clustererBacklink} title={typeName} />
+      <ManageableBreadcrumbs inside={inside} />
+      <BackLink to={namespace ? customBacklinkWithInside : clustererBacklink} title={typeName} />
       <Spacer $space={20} $samespace />
       <ContentCard flexGrow={1} displayFlex flexFlow="column">
         <RowFlexGrow>

src/pages/TableCrdPage/TableCrdPage.tsx

@@ -28,12 +28,19 @@ export const TableCrdPage: FC<TTableCrdPageProps> = ({ forcedTheme, inside }) =>
     ? `${baseprefix}/${clusterName}/${possibleProject}/api-table/${BASE_INSTANCES_API_GROUP}/${BASE_INSTANCES_VERSION}/${BASE_INSTANCES_RESOURCE_NAME}`
     : `${baseprefix}/clusters/${clusterName}/projects/${possibleProject}`
 
-  const clustererBacklink = `${baseprefix}/clusters`
+  const customBacklinkWithInside = inside
+    ? `${baseprefix}/inside/${clusterName}${namespace ? `/${namespace}` : ''}/apis`
+    : customBacklink
+
+  const clustererBacklink = inside ? customBacklinkWithInside : `${baseprefix}/clusters`
 
   return (
     <BaseTemplate forcedTheme={forcedTheme} inside={inside}>
-      <ManageableBreadcrumbs />
-      <BackLink to={namespace ? customBacklink : clustererBacklink} title={`${apiGroup}/${apiVersion}/${crdName}`} />
+      <ManageableBreadcrumbs inside={inside} />
+      <BackLink
+        to={namespace ? customBacklinkWithInside : clustererBacklink}
+        title={`${apiGroup}/${apiVersion}/${crdName}`}
+      />
       <Spacer $space={20} $samespace />
       <ContentCard flexGrow={1} displayFlex flexFlow="column">
         <RowFlexGrow>