From 7f3f6ef8b4b253b0941d649c246dccc85a5943ba Mon Sep 17 00:00:00 2001
From: typescreep <typescri@yandex.ru>
Date: Mon, 16 Jun 2025 16:58:58 +0300
Subject: [PATCH] inside routing

---
 .../ManageableBreadcrumbs.tsx                 | 10 ++++--
 src/pages/FormApiPage/FormApiPage.tsx         |  2 +-
 src/pages/FormBuiltinPage/FormBuiltinPage.tsx |  2 +-
 src/pages/FormCrdPage/FormCrdPage.tsx         |  2 +-
 .../ListInsideApiByApiGroupPage.tsx           | 33 +++----------------
 .../ListInsideApiPage/ListInsideApiPage.tsx   | 21 ++----------
 .../ListInsideCrdByApiGroupPage.tsx           | 33 +++----------------
 src/pages/TableApiPage/TableApiPage.tsx       | 13 ++++++--
 .../TableBuiltinPage/TableBuiltinPage.tsx     | 10 ++++--
 src/pages/TableCrdPage/TableCrdPage.tsx       | 13 ++++++--
 10 files changed, 49 insertions(+), 90 deletions(-)

diff --git a/src/components/molecules/ManageableBreadcrumbs/ManageableBreadcrumbs.tsx b/src/components/molecules/ManageableBreadcrumbs/ManageableBreadcrumbs.tsx
index 17dcbd7..03fa6ec 100644
--- a/src/components/molecules/ManageableBreadcrumbs/ManageableBreadcrumbs.tsx
+++ b/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={{
diff --git a/src/pages/FormApiPage/FormApiPage.tsx b/src/pages/FormApiPage/FormApiPage.tsx
index f991e62..bfcf8ed 100644
--- a/src/pages/FormApiPage/FormApiPage.tsx
+++ b/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}
diff --git a/src/pages/FormBuiltinPage/FormBuiltinPage.tsx b/src/pages/FormBuiltinPage/FormBuiltinPage.tsx
index f8f4a87..dec3e3d 100644
--- a/src/pages/FormBuiltinPage/FormBuiltinPage.tsx
+++ b/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}
diff --git a/src/pages/FormCrdPage/FormCrdPage.tsx b/src/pages/FormCrdPage/FormCrdPage.tsx
index 35c50b6..3e7920e 100644
--- a/src/pages/FormCrdPage/FormCrdPage.tsx
+++ b/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}
diff --git a/src/pages/ListInsideApiByApiGroupPage/ListInsideApiByApiGroupPage.tsx b/src/pages/ListInsideApiByApiGroupPage/ListInsideApiByApiGroupPage.tsx
index 8c7a254..95677ed 100644
--- a/src/pages/ListInsideApiByApiGroupPage/ListInsideApiByApiGroupPage.tsx
+++ b/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} />
diff --git a/src/pages/ListInsideApiPage/ListInsideApiPage.tsx b/src/pages/ListInsideApiPage/ListInsideApiPage.tsx
index d02d5d5..fb12048 100644
--- a/src/pages/ListInsideApiPage/ListInsideApiPage.tsx
+++ b/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>
diff --git a/src/pages/ListInsideCrdByApiGroupPage/ListInsideCrdByApiGroupPage.tsx b/src/pages/ListInsideCrdByApiGroupPage/ListInsideCrdByApiGroupPage.tsx
index dabf94b..5a2f9cb 100644
--- a/src/pages/ListInsideCrdByApiGroupPage/ListInsideCrdByApiGroupPage.tsx
+++ b/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
diff --git a/src/pages/TableApiPage/TableApiPage.tsx b/src/pages/TableApiPage/TableApiPage.tsx
index 37d9b26..ed27b33 100644
--- a/src/pages/TableApiPage/TableApiPage.tsx
+++ b/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>
diff --git a/src/pages/TableBuiltinPage/TableBuiltinPage.tsx b/src/pages/TableBuiltinPage/TableBuiltinPage.tsx
index 86014a8..7459600 100644
--- a/src/pages/TableBuiltinPage/TableBuiltinPage.tsx
+++ b/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>
diff --git a/src/pages/TableCrdPage/TableCrdPage.tsx b/src/pages/TableCrdPage/TableCrdPage.tsx
index 6ad4ec2..d9d1b0f 100644
--- a/src/pages/TableCrdPage/TableCrdPage.tsx
+++ b/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>