From 2b2cadcf4cead3ea609bd024ab1a6d3eb1b7ed76 Mon Sep 17 00:00:00 2001
From: typescreep <typescri@yandex.ru>
Date: Thu, 3 Jul 2025 18:54:22 +0300
Subject: [PATCH] forms prefills and overrides via id

---
 .../molecules/BlackholeForm/BlackholeForm.tsx | 31 +++----------------
 .../ManageableBreadcrumbs.tsx                 |  4 ++-
 .../Forms/ApisForms/CreateApisForm.tsx        |  1 +
 .../Forms/ApisForms/UpdateApisForm.tsx        |  1 +
 .../Forms/BuiltinForms/CreateBuiltinForm.tsx  |  1 +
 .../Forms/BuiltinForms/UpdateBuiltinForm.tsx  |  1 +
 .../Forms/CrdsForms/CreateCrdsForm.tsx        |  1 +
 .../Forms/CrdsForms/UpdateCrdsForm.tsx        |  1 +
 src/pages/FactoryPage/FactoryPage.tsx         |  2 +-
 src/pages/FormApiPage/FormApiPage.tsx         |  8 ++++-
 src/pages/FormBuiltinPage/FormBuiltinPage.tsx |  8 ++++-
 src/pages/FormCrdPage/FormCrdPage.tsx         |  8 ++++-
 .../ListInsideApiByApiGroupPage.tsx           |  4 ++-
 .../ListInsideApiPage/ListInsideApiPage.tsx   |  4 ++-
 .../ListInsideCrdByApiGroupPage.tsx           |  4 ++-
 .../ListProjectsPage/ListProjectsPage.tsx     |  4 ++-
 src/pages/TableApiPage/TableApiPage.tsx       |  8 ++++-
 .../TableBuiltinPage/TableBuiltinPage.tsx     |  8 ++++-
 src/pages/TableCrdPage/TableCrdPage.tsx       |  8 ++++-
 src/utils/getBreadcrumbsIdPrefix.ts           | 25 +++++++++++++++
 20 files changed, 93 insertions(+), 39 deletions(-)
 create mode 100644 src/utils/getBreadcrumbsIdPrefix.ts

diff --git a/src/components/molecules/BlackholeForm/BlackholeForm.tsx b/src/components/molecules/BlackholeForm/BlackholeForm.tsx
index a15fb79..ceb2139 100644
--- a/src/components/molecules/BlackholeForm/BlackholeForm.tsx
+++ b/src/components/molecules/BlackholeForm/BlackholeForm.tsx
@@ -1,16 +1,8 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 import React, { FC, useState, useEffect } from 'react'
 import { useParams } from 'react-router-dom'
-import {
-  BlackholeFormDataProvider,
-  useBuiltinResources,
-  useCrdResources,
-  TJSON,
-  TFormsPrefillsData,
-} from '@prorobotech/openapi-k8s-toolkit'
+import { BlackholeFormDataProvider, TJSON } from '@prorobotech/openapi-k8s-toolkit'
 import { useSelector } from 'react-redux'
 import type { RootState } from 'store/store'
-import { BASE_API_GROUP, BASE_API_VERSION } from 'constants/customizationApiGroupAndVersion'
 import {
   HEAD_FIRST_ROW,
   HEAD_SECOND_ROW,
@@ -37,6 +29,7 @@ type TBlackholeFormProps = {
         prefillValuesSchema?: TJSON
         prefillValueNamespaceOnly?: string
       }
+  customizationId: string
   isCreate?: boolean
   backlink?: string | null
   modeData?: {
@@ -46,7 +39,7 @@ type TBlackholeFormProps = {
   }
 }
 
-export const BlackholeForm: FC<TBlackholeFormProps> = ({ data, isCreate, backlink, modeData }) => {
+export const BlackholeForm: FC<TBlackholeFormProps> = ({ data, customizationId, isCreate, backlink, modeData }) => {
   const theme = useSelector((state: RootState) => state.openapiTheme.theme)
   const cluster = useSelector((state: RootState) => state.cluster.cluster)
   const params = useParams()
@@ -89,30 +82,14 @@ export const BlackholeForm: FC<TBlackholeFormProps> = ({ data, isCreate, backlin
     typeName: params.typeName,
   }
 
-  const namespacesData = useBuiltinResources({
-    clusterName: cluster,
-    typeName: 'namespaces',
-    refetchInterval: false,
-    limit: null,
-  })
-
-  const formsPrefillsData = useCrdResources<TFormsPrefillsData['items']>({
-    clusterName: cluster,
-    crdName: 'customformsprefills',
-    apiGroup: BASE_API_GROUP,
-    apiVersion: BASE_API_VERSION,
-    refetchInterval: false,
-  })
-
   return (
     <BlackholeFormDataProvider
       theme={theme}
       cluster={cluster}
       urlParams={urlParams}
       urlParamsForPermissions={urlParamsForPermissions}
-      formsPrefillsData={formsPrefillsData.data}
-      namespacesData={namespacesData.data}
       data={data}
+      customizationId={customizationId}
       isCreate={isCreate}
       backlink={backlink}
       modeData={modeData}
diff --git a/src/components/molecules/ManageableBreadcrumbs/ManageableBreadcrumbs.tsx b/src/components/molecules/ManageableBreadcrumbs/ManageableBreadcrumbs.tsx
index 03fa6ec..8a6cb4e 100644
--- a/src/components/molecules/ManageableBreadcrumbs/ManageableBreadcrumbs.tsx
+++ b/src/components/molecules/ManageableBreadcrumbs/ManageableBreadcrumbs.tsx
@@ -4,10 +4,11 @@ import { ManageableBreadcrumbsWithDataProvider } from '@prorobotech/openapi-k8s-
 import { BASE_API_GROUP, BASE_API_VERSION } from 'constants/customizationApiGroupAndVersion'
 
 type TManageableBreadCrumbsProps = {
+  idToCompare: string
   inside?: boolean
 }
 
-export const ManageableBreadcrumbs: FC<TManageableBreadCrumbsProps> = ({ inside }) => {
+export const ManageableBreadcrumbs: FC<TManageableBreadCrumbsProps> = ({ idToCompare, inside }) => {
   const { pathname } = useLocation()
   const params = useParams()
   const clusterName = params?.clusterName || ''
@@ -22,6 +23,7 @@ export const ManageableBreadcrumbs: FC<TManageableBreadCrumbsProps> = ({ inside
 
   return (
     <ManageableBreadcrumbsWithDataProvider
+      idToCompare={idToCompare}
       uri={`/api/clusters/${clusterName}/k8s/apis/${BASE_API_GROUP}/${BASE_API_VERSION}/${
         inside ? 'breadcrumbsinside' : 'breadcrumbs'
       }/`}
diff --git a/src/components/organisms/Forms/ApisForms/CreateApisForm.tsx b/src/components/organisms/Forms/ApisForms/CreateApisForm.tsx
index 9937d56..712a0eb 100644
--- a/src/components/organisms/Forms/ApisForms/CreateApisForm.tsx
+++ b/src/components/organisms/Forms/ApisForms/CreateApisForm.tsx
@@ -48,6 +48,7 @@ export const CreateApisForm: FC<TCreateApisFormProps> = ({ namespace, apiGroup,
           typeName,
           prefillValueNamespaceOnly: namespace,
         }}
+        customizationId={`default-${apiGroup}/${apiVersion}/${typeName}`}
         isCreate
         backlink={backLink}
         modeData={modeData}
diff --git a/src/components/organisms/Forms/ApisForms/UpdateApisForm.tsx b/src/components/organisms/Forms/ApisForms/UpdateApisForm.tsx
index d2ff261..0f609b7 100644
--- a/src/components/organisms/Forms/ApisForms/UpdateApisForm.tsx
+++ b/src/components/organisms/Forms/ApisForms/UpdateApisForm.tsx
@@ -84,6 +84,7 @@ export const UpdateApisForm: FC<TUpdateApisFormProps> = ({
           // prefillValuesSchema: { ...noStatusData, metadata },
           prefillValuesSchema: { ...data, metadata },
         }}
+        customizationId={`default-${apiGroup}/${apiVersion}/${typeName}`}
         backlink={backLink}
         modeData={modeData}
       />
diff --git a/src/components/organisms/Forms/BuiltinForms/CreateBuiltinForm.tsx b/src/components/organisms/Forms/BuiltinForms/CreateBuiltinForm.tsx
index 52ce552..3a9ca51 100644
--- a/src/components/organisms/Forms/BuiltinForms/CreateBuiltinForm.tsx
+++ b/src/components/organisms/Forms/BuiltinForms/CreateBuiltinForm.tsx
@@ -44,6 +44,7 @@ export const CreateBuiltinForm: FC<TCreateBuiltinFormProps> = ({ namespace, type
           typeName,
           prefillValueNamespaceOnly: namespace,
         }}
+        customizationId={`default-v1/${typeName}`}
         isCreate
         backlink={backLink}
         modeData={modeData}
diff --git a/src/components/organisms/Forms/BuiltinForms/UpdateBuiltinForm.tsx b/src/components/organisms/Forms/BuiltinForms/UpdateBuiltinForm.tsx
index ba669b2..130b1a3 100644
--- a/src/components/organisms/Forms/BuiltinForms/UpdateBuiltinForm.tsx
+++ b/src/components/organisms/Forms/BuiltinForms/UpdateBuiltinForm.tsx
@@ -71,6 +71,7 @@ export const UpdateBuiltinForm: FC<TUpdateBuiltinFormProps> = ({ typeName, entry
           // prefillValuesSchema: { ...noStatusData, metadata },
           prefillValuesSchema: { ...data, metadata },
         }}
+        customizationId={`default-v1/${typeName}`}
         backlink={backLink}
         modeData={modeData}
       />
diff --git a/src/components/organisms/Forms/CrdsForms/CreateCrdsForm.tsx b/src/components/organisms/Forms/CrdsForms/CreateCrdsForm.tsx
index d29edfe..697f9b5 100644
--- a/src/components/organisms/Forms/CrdsForms/CreateCrdsForm.tsx
+++ b/src/components/organisms/Forms/CrdsForms/CreateCrdsForm.tsx
@@ -48,6 +48,7 @@ export const CreateCrdsForm: FC<TCreateCrdsFormProps> = ({ namespace, apiGroup,
           typeName,
           prefillValueNamespaceOnly: namespace,
         }}
+        customizationId={`default-${apiGroup}/${apiVersion}/${typeName}`}
         isCreate
         backlink={backLink}
         modeData={modeData}
diff --git a/src/components/organisms/Forms/CrdsForms/UpdateCrdsForm.tsx b/src/components/organisms/Forms/CrdsForms/UpdateCrdsForm.tsx
index d6a1ea3..0630fea 100644
--- a/src/components/organisms/Forms/CrdsForms/UpdateCrdsForm.tsx
+++ b/src/components/organisms/Forms/CrdsForms/UpdateCrdsForm.tsx
@@ -84,6 +84,7 @@ export const UpdateCrdsForm: FC<TUpdateCrdsFormProps> = ({
           // prefillValuesSchema: { ...noStatusData, metadata },
           prefillValuesSchema: { ...data, metadata },
         }}
+        customizationId={`default-${apiGroup}/${apiVersion}/${typeName}`}
         backlink={backLink}
         modeData={modeData}
       />
diff --git a/src/pages/FactoryPage/FactoryPage.tsx b/src/pages/FactoryPage/FactoryPage.tsx
index 46628b5..c334ec7 100644
--- a/src/pages/FactoryPage/FactoryPage.tsx
+++ b/src/pages/FactoryPage/FactoryPage.tsx
@@ -10,7 +10,7 @@ export const FactoryPage: FC<TFactoryPageProps> = ({ forcedTheme }) => {
   return (
     <BaseTemplate forcedTheme={forcedTheme} withNoCluster>
       <NavigationContainer>
-        <ManageableBreadcrumbs />
+        <ManageableBreadcrumbs idToCompare={`factory-${window.location.pathname}`} />
       </NavigationContainer>
       <Factory />
     </BaseTemplate>
diff --git a/src/pages/FormApiPage/FormApiPage.tsx b/src/pages/FormApiPage/FormApiPage.tsx
index bb69836..f02418b 100644
--- a/src/pages/FormApiPage/FormApiPage.tsx
+++ b/src/pages/FormApiPage/FormApiPage.tsx
@@ -12,6 +12,7 @@ import {
   NavigationContainer,
 } from 'components'
 import { getSidebarIdPrefix } from 'utils/getSidebarIdPrefix'
+import { getBreadcrumbsIdPrefix } from 'utils/getBreadcrumbsIdPrefix'
 import { BaseTemplate } from 'templates'
 
 type TFormApiPageProps = {
@@ -38,6 +39,11 @@ export const FormApiPage: FC<TFormApiPageProps> = ({ forcedTheme, inside }) => {
   const backLink = searchParams.get('backlink')?.startsWith('/') ? searchParams.get('backlink') : undefined
 
   const sidebarId = `${getSidebarIdPrefix({ instance: !!syntheticProject, project: !!namespace, inside })}api-form`
+  const breadcrumbsId = `${getBreadcrumbsIdPrefix({
+    instance: !!syntheticProject,
+    project: !!namespace,
+    inside,
+  })}api-form`
 
   return (
     <BaseTemplate
@@ -53,7 +59,7 @@ export const FormApiPage: FC<TFormApiPageProps> = ({ forcedTheme, inside }) => {
       }
     >
       <NavigationContainer>
-        <ManageableBreadcrumbs inside={inside} />
+        <ManageableBreadcrumbs idToCompare={breadcrumbsId} inside={inside} />
         <BackLink
           to={backLink || customBacklink}
           title={`${entryName ? 'Update' : 'Create'} ${apiGroup}/${apiVersion}/${typeName}${
diff --git a/src/pages/FormBuiltinPage/FormBuiltinPage.tsx b/src/pages/FormBuiltinPage/FormBuiltinPage.tsx
index acc8084..ce72add 100644
--- a/src/pages/FormBuiltinPage/FormBuiltinPage.tsx
+++ b/src/pages/FormBuiltinPage/FormBuiltinPage.tsx
@@ -12,6 +12,7 @@ import {
   NavigationContainer,
 } from 'components'
 import { getSidebarIdPrefix } from 'utils/getSidebarIdPrefix'
+import { getBreadcrumbsIdPrefix } from 'utils/getBreadcrumbsIdPrefix'
 import { BaseTemplate } from 'templates'
 
 type TFormBuiltinPageProps = {
@@ -38,6 +39,11 @@ export const FormBuiltinPage: FC<TFormBuiltinPageProps> = ({ forcedTheme, inside
   const backLink = searchParams.get('backlink')?.startsWith('/') ? searchParams.get('backlink') : undefined
 
   const sidebarId = `${getSidebarIdPrefix({ instance: !!syntheticProject, project: !!namespace, inside })}builtin-form`
+  const breadcrumbsId = `${getBreadcrumbsIdPrefix({
+    instance: !!syntheticProject,
+    project: !!namespace,
+    inside,
+  })}builtin-form`
 
   return (
     <BaseTemplate
@@ -53,7 +59,7 @@ export const FormBuiltinPage: FC<TFormBuiltinPageProps> = ({ forcedTheme, inside
       }
     >
       <NavigationContainer>
-        <ManageableBreadcrumbs inside={inside} />
+        <ManageableBreadcrumbs idToCompare={breadcrumbsId} inside={inside} />
         <BackLink
           to={backLink || customBacklink}
           title={`${entryName ? 'Update' : 'Create'} ${typeName}${entryName ? `/${entryName}` : ''}`}
diff --git a/src/pages/FormCrdPage/FormCrdPage.tsx b/src/pages/FormCrdPage/FormCrdPage.tsx
index 98172bb..6511484 100644
--- a/src/pages/FormCrdPage/FormCrdPage.tsx
+++ b/src/pages/FormCrdPage/FormCrdPage.tsx
@@ -12,6 +12,7 @@ import {
   NavigationContainer,
 } from 'components'
 import { getSidebarIdPrefix } from 'utils/getSidebarIdPrefix'
+import { getBreadcrumbsIdPrefix } from 'utils/getBreadcrumbsIdPrefix'
 import { BaseTemplate } from 'templates'
 
 type TFormCrdPageProps = {
@@ -38,6 +39,11 @@ export const FormCrdPage: FC<TFormCrdPageProps> = ({ forcedTheme, inside }) => {
   const backLink = searchParams.get('backlink')?.startsWith('/') ? searchParams.get('backlink') : undefined
 
   const sidebarId = `${getSidebarIdPrefix({ instance: !!syntheticProject, project: !!namespace, inside })}crd-form`
+  const breadcrumbsId = `${getBreadcrumbsIdPrefix({
+    instance: !!syntheticProject,
+    project: !!namespace,
+    inside,
+  })}crd-form`
 
   return (
     <BaseTemplate
@@ -53,7 +59,7 @@ export const FormCrdPage: FC<TFormCrdPageProps> = ({ forcedTheme, inside }) => {
       }
     >
       <NavigationContainer>
-        <ManageableBreadcrumbs inside={inside} />
+        <ManageableBreadcrumbs idToCompare={breadcrumbsId} inside={inside} />
         <BackLink
           to={backLink || customBacklink}
           title={`${entryName ? 'Update' : 'Create'} ${apiGroup}/${apiVersion}/${typeName}${
diff --git a/src/pages/ListInsideApiByApiGroupPage/ListInsideApiByApiGroupPage.tsx b/src/pages/ListInsideApiByApiGroupPage/ListInsideApiByApiGroupPage.tsx
index c5ef263..4f8950a 100644
--- a/src/pages/ListInsideApiByApiGroupPage/ListInsideApiByApiGroupPage.tsx
+++ b/src/pages/ListInsideApiByApiGroupPage/ListInsideApiByApiGroupPage.tsx
@@ -3,6 +3,7 @@ import { ContentCard } from '@prorobotech/openapi-k8s-toolkit'
 import { useParams } from 'react-router-dom'
 import { ListInsideApisByApiGroup, ManageableBreadcrumbs, ManageableSidebar, NavigationContainer } from 'components'
 import { getSidebarIdPrefix } from 'utils/getSidebarIdPrefix'
+import { getBreadcrumbsIdPrefix } from 'utils/getBreadcrumbsIdPrefix'
 import { BaseTemplate } from 'templates'
 
 type TListInsideApiByApiGroupPageProps = {
@@ -14,11 +15,12 @@ export const ListInsideApiByApiGroupPage: FC<TListInsideApiByApiGroupPageProps>
   const { namespace, apiGroup, apiVersion } = useParams()
 
   const sidebarId = `${getSidebarIdPrefix({ namespace: !!namespace, inside })}api-by-api`
+  const breadcrumbsId = `${getBreadcrumbsIdPrefix({ namespace: !!namespace, inside })}api-by-api`
 
   return (
     <BaseTemplate forcedTheme={forcedTheme} inside={inside} sidebar={<ManageableSidebar idToCompare={sidebarId} />}>
       <NavigationContainer>
-        <ManageableBreadcrumbs inside />
+        <ManageableBreadcrumbs idToCompare={breadcrumbsId} inside />
       </NavigationContainer>
       <ContentCard flexGrow={1} displayFlex flexFlow="column">
         {apiGroup && apiVersion && (
diff --git a/src/pages/ListInsideApiPage/ListInsideApiPage.tsx b/src/pages/ListInsideApiPage/ListInsideApiPage.tsx
index f2df20b..b38c085 100644
--- a/src/pages/ListInsideApiPage/ListInsideApiPage.tsx
+++ b/src/pages/ListInsideApiPage/ListInsideApiPage.tsx
@@ -3,6 +3,7 @@ import { ContentCard } from '@prorobotech/openapi-k8s-toolkit'
 import { useParams } from 'react-router-dom'
 import { ListInsideAllResources, ManageableBreadcrumbs, ManageableSidebar, NavigationContainer } from 'components'
 import { getSidebarIdPrefix } from 'utils/getSidebarIdPrefix'
+import { getBreadcrumbsIdPrefix } from 'utils/getBreadcrumbsIdPrefix'
 import { BaseTemplate } from 'templates'
 
 type TListInsideApiPageProps = {
@@ -14,11 +15,12 @@ export const ListInsideApiPage: FC<TListInsideApiPageProps> = ({ forcedTheme, in
   const { namespace } = useParams()
 
   const sidebarId = `${getSidebarIdPrefix({ namespace: !!namespace, inside })}apis`
+  const breadcrumbsId = `${getBreadcrumbsIdPrefix({ namespace: !!namespace, inside })}apis`
 
   return (
     <BaseTemplate forcedTheme={forcedTheme} inside={inside} sidebar={<ManageableSidebar idToCompare={sidebarId} />}>
       <NavigationContainer>
-        <ManageableBreadcrumbs inside />
+        <ManageableBreadcrumbs idToCompare={breadcrumbsId} inside />
       </NavigationContainer>
       <ContentCard flexGrow={1} displayFlex flexFlow="column">
         <ListInsideAllResources namespace={namespace} />
diff --git a/src/pages/ListInsideCrdByApiGroupPage/ListInsideCrdByApiGroupPage.tsx b/src/pages/ListInsideCrdByApiGroupPage/ListInsideCrdByApiGroupPage.tsx
index 00d4cfd..37796a9 100644
--- a/src/pages/ListInsideCrdByApiGroupPage/ListInsideCrdByApiGroupPage.tsx
+++ b/src/pages/ListInsideCrdByApiGroupPage/ListInsideCrdByApiGroupPage.tsx
@@ -3,6 +3,7 @@ import { ContentCard } from '@prorobotech/openapi-k8s-toolkit'
 import { useParams } from 'react-router-dom'
 import { ListInsideCrdsByApiGroup, ManageableBreadcrumbs, ManageableSidebar, NavigationContainer } from 'components'
 import { getSidebarIdPrefix } from 'utils/getSidebarIdPrefix'
+import { getBreadcrumbsIdPrefix } from 'utils/getBreadcrumbsIdPrefix'
 import { BaseTemplate } from 'templates'
 
 type TListInsideCrdByApiGroupPageProps = {
@@ -14,11 +15,12 @@ export const ListInsideCrdByApiGroupPage: FC<TListInsideCrdByApiGroupPageProps>
   const { namespace, apiGroup, apiVersion, apiExtensionVersion } = useParams()
 
   const sidebarId = `${getSidebarIdPrefix({ namespace: !!namespace, inside })}crd-by-api`
+  const breadcrumbsId = `${getBreadcrumbsIdPrefix({ namespace: !!namespace, inside })}crd-by-api`
 
   return (
     <BaseTemplate forcedTheme={forcedTheme} inside={inside} sidebar={<ManageableSidebar idToCompare={sidebarId} />}>
       <NavigationContainer>
-        <ManageableBreadcrumbs inside />
+        <ManageableBreadcrumbs idToCompare={breadcrumbsId} inside />
       </NavigationContainer>
       <ContentCard flexGrow={1} displayFlex flexFlow="column">
         {apiGroup && apiVersion && apiExtensionVersion && (
diff --git a/src/pages/ListProjectsPage/ListProjectsPage.tsx b/src/pages/ListProjectsPage/ListProjectsPage.tsx
index 1f2f7d2..66f6b60 100644
--- a/src/pages/ListProjectsPage/ListProjectsPage.tsx
+++ b/src/pages/ListProjectsPage/ListProjectsPage.tsx
@@ -2,6 +2,7 @@ import React, { FC } from 'react'
 import { ContentCard } from '@prorobotech/openapi-k8s-toolkit'
 import { ListProjects, ManageableBreadcrumbs, ManageableSidebar, NavigationContainer } from 'components'
 import { getSidebarIdPrefix } from 'utils/getSidebarIdPrefix'
+import { getBreadcrumbsIdPrefix } from 'utils/getBreadcrumbsIdPrefix'
 import { BaseTemplate } from 'templates'
 
 type TListProjectsPageProps = {
@@ -10,11 +11,12 @@ type TListProjectsPageProps = {
 
 export const ListProjectsPage: FC<TListProjectsPageProps> = ({ forcedTheme }) => {
   const sidebarId = `${getSidebarIdPrefix({})}projects-list`
+  const breadcrumbsId = `${getBreadcrumbsIdPrefix({})}projects-list`
 
   return (
     <BaseTemplate forcedTheme={forcedTheme} sidebar={<ManageableSidebar idToCompare={sidebarId} />}>
       <NavigationContainer>
-        <ManageableBreadcrumbs />
+        <ManageableBreadcrumbs idToCompare={breadcrumbsId} />
       </NavigationContainer>
       <ContentCard flexGrow={1} displayFlex flexFlow="column">
         <ListProjects />
diff --git a/src/pages/TableApiPage/TableApiPage.tsx b/src/pages/TableApiPage/TableApiPage.tsx
index cf1107e..a9325ef 100644
--- a/src/pages/TableApiPage/TableApiPage.tsx
+++ b/src/pages/TableApiPage/TableApiPage.tsx
@@ -5,6 +5,7 @@ import { useSelector } from 'react-redux'
 import type { RootState } from 'store/store'
 import { TableNonCrdInfo, BackLink, ManageableBreadcrumbs, ManageableSidebar, NavigationContainer } from 'components'
 import { getSidebarIdPrefix } from 'utils/getSidebarIdPrefix'
+import { getBreadcrumbsIdPrefix } from 'utils/getBreadcrumbsIdPrefix'
 import { BaseTemplate } from 'templates'
 import {
   BASE_INSTANCES_API_GROUP,
@@ -44,6 +45,11 @@ export const TableApiPage: FC<TTableApiPageProps> = ({ forcedTheme, inside }) =>
   // const nonInstanceBackLink = namespace ? customBacklink : clustererBacklink
 
   const sidebarId = `${getSidebarIdPrefix({ instance: !!syntheticProject, project: !!namespace, inside })}api-table`
+  const breadcrumbsId = `${getBreadcrumbsIdPrefix({
+    instance: !!syntheticProject,
+    project: !!namespace,
+    inside,
+  })}api-table`
 
   return (
     <BaseTemplate
@@ -59,7 +65,7 @@ export const TableApiPage: FC<TTableApiPageProps> = ({ forcedTheme, inside }) =>
       }
     >
       <NavigationContainer>
-        <ManageableBreadcrumbs inside={inside} />
+        <ManageableBreadcrumbs idToCompare={breadcrumbsId} inside={inside} />
         <BackLink
           to={namespace ? customBacklinkWithInside : clustererBacklink}
           title={`${apiGroup}/${apiVersion}/${typeName}`}
diff --git a/src/pages/TableBuiltinPage/TableBuiltinPage.tsx b/src/pages/TableBuiltinPage/TableBuiltinPage.tsx
index 50a37d7..044b8b7 100644
--- a/src/pages/TableBuiltinPage/TableBuiltinPage.tsx
+++ b/src/pages/TableBuiltinPage/TableBuiltinPage.tsx
@@ -5,6 +5,7 @@ import { useSelector } from 'react-redux'
 import type { RootState } from 'store/store'
 import { TableBuiltinInfo, BackLink, ManageableBreadcrumbs, ManageableSidebar, NavigationContainer } from 'components'
 import { getSidebarIdPrefix } from 'utils/getSidebarIdPrefix'
+import { getBreadcrumbsIdPrefix } from 'utils/getBreadcrumbsIdPrefix'
 import { BaseTemplate } from 'templates'
 import {
   BASE_INSTANCES_API_GROUP,
@@ -36,6 +37,11 @@ export const TableBuiltinPage: FC<TTableBuiltinPageProps> = ({ forcedTheme, insi
   const clustererBacklink = inside ? customBacklinkWithInside : `${baseprefix}/clusters`
 
   const sidebarId = `${getSidebarIdPrefix({ instance: !!syntheticProject, project: !!namespace, inside })}builtin-table`
+  const breadcrumbsId = `${getBreadcrumbsIdPrefix({
+    instance: !!syntheticProject,
+    project: !!namespace,
+    inside,
+  })}builtin-table`
 
   return (
     <BaseTemplate
@@ -51,7 +57,7 @@ export const TableBuiltinPage: FC<TTableBuiltinPageProps> = ({ forcedTheme, insi
       }
     >
       <NavigationContainer>
-        <ManageableBreadcrumbs inside={inside} />
+        <ManageableBreadcrumbs idToCompare={breadcrumbsId} inside={inside} />
         <BackLink to={namespace ? customBacklinkWithInside : clustererBacklink} title={typeName} />
       </NavigationContainer>
       <ContentCard flexGrow={1} displayFlex flexFlow="column">
diff --git a/src/pages/TableCrdPage/TableCrdPage.tsx b/src/pages/TableCrdPage/TableCrdPage.tsx
index 3663a06..92f4e76 100644
--- a/src/pages/TableCrdPage/TableCrdPage.tsx
+++ b/src/pages/TableCrdPage/TableCrdPage.tsx
@@ -5,6 +5,7 @@ import { useSelector } from 'react-redux'
 import type { RootState } from 'store/store'
 import { TableCrdInfo, BackLink, ManageableBreadcrumbs, ManageableSidebar, NavigationContainer } from 'components'
 import { getSidebarIdPrefix } from 'utils/getSidebarIdPrefix'
+import { getBreadcrumbsIdPrefix } from 'utils/getBreadcrumbsIdPrefix'
 import { BaseTemplate } from 'templates'
 import {
   BASE_INSTANCES_API_GROUP,
@@ -35,6 +36,11 @@ export const TableCrdPage: FC<TTableCrdPageProps> = ({ forcedTheme, inside }) =>
   const clustererBacklink = inside ? customBacklinkWithInside : `${baseprefix}/clusters`
 
   const sidebarId = `${getSidebarIdPrefix({ instance: !!syntheticProject, project: !!namespace, inside })}crd-table`
+  const breadcrumbsId = `${getBreadcrumbsIdPrefix({
+    instance: !!syntheticProject,
+    project: !!namespace,
+    inside,
+  })}crd-table`
 
   return (
     <BaseTemplate
@@ -50,7 +56,7 @@ export const TableCrdPage: FC<TTableCrdPageProps> = ({ forcedTheme, inside }) =>
       }
     >
       <NavigationContainer>
-        <ManageableBreadcrumbs inside={inside} />
+        <ManageableBreadcrumbs idToCompare={breadcrumbsId} inside={inside} />
         <BackLink
           to={namespace ? customBacklinkWithInside : clustererBacklink}
           title={`${apiGroup}/${apiVersion}/${crdName}`}
diff --git a/src/utils/getBreadcrumbsIdPrefix.ts b/src/utils/getBreadcrumbsIdPrefix.ts
new file mode 100644
index 0000000..42b0a50
--- /dev/null
+++ b/src/utils/getBreadcrumbsIdPrefix.ts
@@ -0,0 +1,25 @@
+export const getBreadcrumbsIdPrefix = ({
+  project,
+  instance,
+  namespace,
+  inside,
+}: {
+  project?: boolean
+  instance?: boolean
+  namespace?: boolean
+  inside?: boolean
+}): string => {
+  let result = inside ? 'inside-' : 'stock-'
+
+  if (instance) {
+    result += 'instance-'
+  } else if (project) {
+    result += 'project-'
+  } else if (namespace) {
+    result += 'namespace-'
+  } else {
+    result += 'cluster-'
+  }
+
+  return result
+}