feature/Sidebars Ids (#20)

* sidebars based on id

* sidebars based on id

package-lock.json

@@ -11,7 +11,7 @@
         "@ant-design/icons": "5.6.0",
         "@monaco-editor/react": "4.6.0",
         "@originjs/vite-plugin-federation": "1.3.6",
-        "@prorobotech/openapi-k8s-toolkit": "^0.0.1-alpha.34",
+        "@prorobotech/openapi-k8s-toolkit": "^0.0.1-alpha.35",
         "@readme/openapi-parser": "4.0.0",
         "@reduxjs/toolkit": "2.2.5",
         "@tanstack/react-query": "5.62.2",
@@ -2807,9 +2807,9 @@
       }
     },
     "node_modules/@prorobotech/openapi-k8s-toolkit": {
-      "version": "0.0.1-alpha.34",
-      "resolved": "https://registry.npmjs.org/@prorobotech/openapi-k8s-toolkit/-/openapi-k8s-toolkit-0.0.1-alpha.34.tgz",
-      "integrity": "sha512-dD1QdcIBAuPDk5HFBi78s7NvoPLOHFHVsTWL4NxLZVi8sY5DYZL/L2ZqC3X3/bei5KtAG96178lZH48wqKeA5w==",
+      "version": "0.0.1-alpha.35",
+      "resolved": "https://registry.npmjs.org/@prorobotech/openapi-k8s-toolkit/-/openapi-k8s-toolkit-0.0.1-alpha.35.tgz",
+      "integrity": "sha512-bSvTlrTTW/OIWJ7aFaooSmXvyckFN8NzCoPTww0yx9kJW95M9EvTOGWiOxzWeNopuZKRmifmJULLmKVXEqZHyA==",
       "license": "MIT",
       "dependencies": {
         "@monaco-editor/react": "4.6.0",

package.json

@@ -20,7 +20,7 @@
     "@ant-design/icons": "5.6.0",
     "@monaco-editor/react": "4.6.0",
     "@originjs/vite-plugin-federation": "1.3.6",
-    "@prorobotech/openapi-k8s-toolkit": "0.0.1-alpha.34",
+    "@prorobotech/openapi-k8s-toolkit": "0.0.1-alpha.35",
     "@readme/openapi-parser": "4.0.0",
     "@reduxjs/toolkit": "2.2.5",
     "@tanstack/react-query": "5.62.2",

src/components/molecules/ManageableSidebar/ManageableSidebar.tsx

@@ -23,9 +23,10 @@ import { Styled } from './styled'
 type TManageableSidebarProps = {
   instanceName?: string
   projectName?: string
+  idToCompare: string
 }
 
-export const ManageableSidebar: FC<TManageableSidebarProps> = ({ projectName, instanceName }) => {
+export const ManageableSidebar: FC<TManageableSidebarProps> = ({ projectName, instanceName, idToCompare }) => {
   const { pathname } = useLocation()
   const params = useParams()
   const clusterName = params?.clusterName || ''
@@ -84,6 +85,7 @@ export const ManageableSidebar: FC<TManageableSidebarProps> = ({ projectName, in
           syntheticProject,
         }}
         pathname={pathname}
+        idToCompare={idToCompare}
         noMarginTop
       />
     </Styled.Container>

src/pages/FormApiPage/FormApiPage.tsx

@@ -13,6 +13,7 @@ import {
   RowFlexGrow,
   FlexCol,
 } from 'components'
+import { getSidebarIdPrefix } from 'utils/getSidebarIdPrefix'
 import { AFTER_BACKLINK_SPACE, AFTER_BREADCRUMBS_SPACE } from 'constants/blocksSizes'
 import { BaseTemplate } from 'templates'
 
@@ -39,6 +40,8 @@ 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`
+
   return (
     <BaseTemplate forcedTheme={forcedTheme} inside={inside}>
       <ManageableBreadcrumbs inside={inside} />
@@ -53,7 +56,7 @@ export const FormApiPage: FC<TFormApiPageProps> = ({ forcedTheme, inside }) => {
       <ContentCard flexGrow={1} displayFlex flexFlow="column">
         <RowFlexGrow wrap={false}>
           <Col span="auto">
-            <ManageableSidebar instanceName={possibleInstance} projectName={possibleProject} />
+            <ManageableSidebar instanceName={possibleInstance} projectName={possibleProject} idToCompare={sidebarId} />
           </Col>
           <FlexCol flex="auto">
             {entryName ? (

src/pages/FormBuiltinPage/FormBuiltinPage.tsx

@@ -13,6 +13,7 @@ import {
   RowFlexGrow,
   FlexCol,
 } from 'components'
+import { getSidebarIdPrefix } from 'utils/getSidebarIdPrefix'
 import { AFTER_BACKLINK_SPACE, AFTER_BREADCRUMBS_SPACE } from 'constants/blocksSizes'
 import { BaseTemplate } from 'templates'
 
@@ -39,6 +40,8 @@ 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`
+
   return (
     <BaseTemplate forcedTheme={forcedTheme} inside={inside}>
       <ManageableBreadcrumbs inside={inside} />
@@ -51,7 +54,7 @@ export const FormBuiltinPage: FC<TFormBuiltinPageProps> = ({ forcedTheme, inside
       <ContentCard flexGrow={1} displayFlex flexFlow="column">
         <RowFlexGrow wrap={false}>
           <Col span="auto">
-            <ManageableSidebar instanceName={possibleInstance} projectName={possibleProject} />
+            <ManageableSidebar instanceName={possibleInstance} projectName={possibleProject} idToCompare={sidebarId} />
           </Col>
           <FlexCol flex="auto">
             {entryName ? (

src/pages/FormCrdPage/FormCrdPage.tsx

@@ -13,6 +13,7 @@ import {
   RowFlexGrow,
   FlexCol,
 } from 'components'
+import { getSidebarIdPrefix } from 'utils/getSidebarIdPrefix'
 import { AFTER_BACKLINK_SPACE, AFTER_BREADCRUMBS_SPACE } from 'constants/blocksSizes'
 import { BaseTemplate } from 'templates'
 
@@ -39,6 +40,8 @@ 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`
+
   return (
     <BaseTemplate forcedTheme={forcedTheme} inside={inside}>
       <ManageableBreadcrumbs inside={inside} />
@@ -53,7 +56,7 @@ export const FormCrdPage: FC<TFormCrdPageProps> = ({ forcedTheme, inside }) => {
       <ContentCard flexGrow={1} displayFlex flexFlow="column">
         <RowFlexGrow wrap={false}>
           <Col span="auto">
-            <ManageableSidebar instanceName={possibleInstance} projectName={possibleProject} />
+            <ManageableSidebar instanceName={possibleInstance} projectName={possibleProject} idToCompare={sidebarId} />
           </Col>
           <FlexCol flex="auto">
             {entryName ? (

src/pages/ListInsideApiByApiGroupPage/ListInsideApiByApiGroupPage.tsx

@@ -3,6 +3,7 @@ import { Col } from 'antd'
 import { ContentCard, Spacer } from '@prorobotech/openapi-k8s-toolkit'
 import { useParams } from 'react-router-dom'
 import { ListInsideApisByApiGroup, ManageableBreadcrumbs, ManageableSidebar, RowFlexGrow, FlexCol } from 'components'
+import { getSidebarIdPrefix } from 'utils/getSidebarIdPrefix'
 import { BaseTemplate } from 'templates'
 import { AFTER_BREADCRUMBS_SPACE } from 'constants/blocksSizes'
 
@@ -14,6 +15,8 @@ type TListInsideApiByApiGroupPageProps = {
 export const ListInsideApiByApiGroupPage: FC<TListInsideApiByApiGroupPageProps> = ({ forcedTheme, inside }) => {
   const { namespace, apiGroup, apiVersion } = useParams()
 
+  const sidebarId = `${getSidebarIdPrefix({ namespace: !!namespace, inside })}api-by-api`
+
   return (
     <BaseTemplate forcedTheme={forcedTheme} inside={inside}>
       <ManageableBreadcrumbs inside />
@@ -21,7 +24,7 @@ export const ListInsideApiByApiGroupPage: FC<TListInsideApiByApiGroupPageProps>
       <ContentCard flexGrow={1} displayFlex flexFlow="column">
         <RowFlexGrow wrap={false}>
           <Col span="auto">
-            <ManageableSidebar />
+            <ManageableSidebar idToCompare={sidebarId} />
           </Col>
           <FlexCol flex="auto">
             {apiGroup && apiVersion && (

src/pages/ListInsideApiPage/ListInsideApiPage.tsx

@@ -3,6 +3,7 @@ import { Col } from 'antd'
 import { ContentCard, Spacer } from '@prorobotech/openapi-k8s-toolkit'
 import { useParams } from 'react-router-dom'
 import { ListInsideAllResources, ManageableBreadcrumbs, ManageableSidebar, RowFlexGrow, FlexCol } from 'components'
+import { getSidebarIdPrefix } from 'utils/getSidebarIdPrefix'
 import { BaseTemplate } from 'templates'
 import { AFTER_BREADCRUMBS_SPACE } from 'constants/blocksSizes'
 
@@ -14,6 +15,8 @@ type TListInsideApiPageProps = {
 export const ListInsideApiPage: FC<TListInsideApiPageProps> = ({ forcedTheme, inside }) => {
   const { namespace } = useParams()
 
+  const sidebarId = `${getSidebarIdPrefix({ namespace: !!namespace, inside })}apis`
+
   return (
     <BaseTemplate forcedTheme={forcedTheme} inside={inside}>
       <ManageableBreadcrumbs inside />
@@ -21,7 +24,7 @@ export const ListInsideApiPage: FC<TListInsideApiPageProps> = ({ forcedTheme, in
       <ContentCard flexGrow={1} displayFlex flexFlow="column">
         <RowFlexGrow wrap={false}>
           <Col span="auto">
-            <ManageableSidebar />
+            <ManageableSidebar idToCompare={sidebarId} />
           </Col>
           <FlexCol flex="auto">
             <ListInsideAllResources namespace={namespace} />

src/pages/ListInsideCrdByApiGroupPage/ListInsideCrdByApiGroupPage.tsx

@@ -3,6 +3,7 @@ import { Col } from 'antd'
 import { ContentCard, Spacer } from '@prorobotech/openapi-k8s-toolkit'
 import { useParams } from 'react-router-dom'
 import { ListInsideCrdsByApiGroup, ManageableBreadcrumbs, ManageableSidebar, RowFlexGrow, FlexCol } from 'components'
+import { getSidebarIdPrefix } from 'utils/getSidebarIdPrefix'
 import { BaseTemplate } from 'templates'
 import { AFTER_BREADCRUMBS_SPACE } from 'constants/blocksSizes'
 
@@ -14,6 +15,8 @@ type TListInsideCrdByApiGroupPageProps = {
 export const ListInsideCrdByApiGroupPage: FC<TListInsideCrdByApiGroupPageProps> = ({ forcedTheme, inside }) => {
   const { namespace, apiGroup, apiVersion, apiExtensionVersion } = useParams()
 
+  const sidebarId = `${getSidebarIdPrefix({ namespace: !!namespace, inside })}crd-by-api`
+
   return (
     <BaseTemplate forcedTheme={forcedTheme} inside={inside}>
       <ManageableBreadcrumbs inside />
@@ -21,7 +24,7 @@ export const ListInsideCrdByApiGroupPage: FC<TListInsideCrdByApiGroupPageProps>
       <ContentCard flexGrow={1} displayFlex flexFlow="column">
         <RowFlexGrow wrap={false}>
           <Col span="auto">
-            <ManageableSidebar />
+            <ManageableSidebar idToCompare={sidebarId} />
           </Col>
           <FlexCol flex="auto">
             {apiGroup && apiVersion && apiExtensionVersion && (

src/pages/ListProjectsPage/ListProjectsPage.tsx

@@ -2,6 +2,7 @@ import React, { FC } from 'react'
 import { Col } from 'antd'
 import { ContentCard, Spacer } from '@prorobotech/openapi-k8s-toolkit'
 import { ListProjects, ManageableBreadcrumbs, ManageableSidebar, RowFlexGrow, FlexCol } from 'components'
+import { getSidebarIdPrefix } from 'utils/getSidebarIdPrefix'
 import { BaseTemplate } from 'templates'
 import { AFTER_BREADCRUMBS_SPACE } from 'constants/blocksSizes'
 
@@ -10,6 +11,8 @@ type TListProjectsPageProps = {
 }
 
 export const ListProjectsPage: FC<TListProjectsPageProps> = ({ forcedTheme }) => {
+  const sidebarId = `${getSidebarIdPrefix({})}projects-list`
+
   return (
     <BaseTemplate forcedTheme={forcedTheme}>
       <ManageableBreadcrumbs />
@@ -17,7 +20,7 @@ export const ListProjectsPage: FC<TListProjectsPageProps> = ({ forcedTheme }) =>
       <ContentCard flexGrow={1} displayFlex flexFlow="column">
         <RowFlexGrow wrap={false}>
           <Col span="auto">
-            <ManageableSidebar />
+            <ManageableSidebar idToCompare={sidebarId} />
           </Col>
           <FlexCol flex="auto">
             <ListProjects />

src/pages/TableApiPage/TableApiPage.tsx

@@ -5,6 +5,7 @@ import { useParams, useSearchParams } from 'react-router-dom'
 import { useSelector } from 'react-redux'
 import type { RootState } from 'store/store'
 import { TableNonCrdInfo, BackLink, ManageableBreadcrumbs, ManageableSidebar, RowFlexGrow, FlexCol } from 'components'
+import { getSidebarIdPrefix } from 'utils/getSidebarIdPrefix'
 import { BaseTemplate } from 'templates'
 import {
   BASE_INSTANCES_API_GROUP,
@@ -44,6 +45,8 @@ export const TableApiPage: FC<TTableApiPageProps> = ({ forcedTheme, inside }) =>
 
   // const nonInstanceBackLink = namespace ? customBacklink : clustererBacklink
 
+  const sidebarId = `${getSidebarIdPrefix({ instance: !!syntheticProject, project: !!namespace, inside })}api-table`
+
   return (
     <BaseTemplate forcedTheme={forcedTheme} inside={inside}>
       <ManageableBreadcrumbs inside={inside} />
@@ -56,7 +59,7 @@ export const TableApiPage: FC<TTableApiPageProps> = ({ forcedTheme, inside }) =>
       <ContentCard flexGrow={1} displayFlex flexFlow="column">
         <RowFlexGrow wrap={false}>
           <Col span="auto">
-            <ManageableSidebar instanceName={possibleInstance} projectName={possibleProject} />
+            <ManageableSidebar instanceName={possibleInstance} projectName={possibleProject} idToCompare={sidebarId} />
           </Col>
           <FlexCol flex="auto">
             {typeName && apiGroup && apiVersion && (

src/pages/TableBuiltinPage/TableBuiltinPage.tsx

@@ -5,6 +5,7 @@ import { useParams, useSearchParams } from 'react-router-dom'
 import { useSelector } from 'react-redux'
 import type { RootState } from 'store/store'
 import { TableBuiltinInfo, BackLink, ManageableBreadcrumbs, ManageableSidebar, RowFlexGrow, FlexCol } from 'components'
+import { getSidebarIdPrefix } from 'utils/getSidebarIdPrefix'
 import { BaseTemplate } from 'templates'
 import {
   BASE_INSTANCES_API_GROUP,
@@ -36,6 +37,8 @@ export const TableBuiltinPage: FC<TTableBuiltinPageProps> = ({ forcedTheme, insi
 
   const clustererBacklink = inside ? customBacklinkWithInside : `${baseprefix}/clusters`
 
+  const sidebarId = `${getSidebarIdPrefix({ instance: !!syntheticProject, project: !!namespace, inside })}builtin-table`
+
   return (
     <BaseTemplate forcedTheme={forcedTheme} inside={inside}>
       <ManageableBreadcrumbs inside={inside} />
@@ -45,7 +48,7 @@ export const TableBuiltinPage: FC<TTableBuiltinPageProps> = ({ forcedTheme, insi
       <ContentCard flexGrow={1} displayFlex flexFlow="column">
         <RowFlexGrow wrap={false}>
           <Col span="auto">
-            <ManageableSidebar instanceName={possibleInstance} projectName={possibleProject} />
+            <ManageableSidebar instanceName={possibleInstance} projectName={possibleProject} idToCompare={sidebarId} />
           </Col>
           <FlexCol flex="auto">
             {typeName && (

src/pages/TableCrdPage/TableCrdPage.tsx

@@ -5,6 +5,7 @@ import { useParams } from 'react-router-dom'
 import { useSelector } from 'react-redux'
 import type { RootState } from 'store/store'
 import { TableCrdInfo, BackLink, ManageableBreadcrumbs, ManageableSidebar, RowFlexGrow, FlexCol } from 'components'
+import { getSidebarIdPrefix } from 'utils/getSidebarIdPrefix'
 import { BaseTemplate } from 'templates'
 import {
   BASE_INSTANCES_API_GROUP,
@@ -35,6 +36,8 @@ export const TableCrdPage: FC<TTableCrdPageProps> = ({ forcedTheme, inside }) =>
 
   const clustererBacklink = inside ? customBacklinkWithInside : `${baseprefix}/clusters`
 
+  const sidebarId = `${getSidebarIdPrefix({ instance: !!syntheticProject, project: !!namespace, inside })}crd-table`
+
   return (
     <BaseTemplate forcedTheme={forcedTheme} inside={inside}>
       <ManageableBreadcrumbs inside={inside} />
@@ -47,7 +50,7 @@ export const TableCrdPage: FC<TTableCrdPageProps> = ({ forcedTheme, inside }) =>
       <ContentCard flexGrow={1} displayFlex flexFlow="column">
         <RowFlexGrow wrap={false}>
           <Col span="auto">
-            <ManageableSidebar instanceName={possibleInstance} projectName={possibleProject} />
+            <ManageableSidebar instanceName={possibleInstance} projectName={possibleProject} idToCompare={sidebarId} />
           </Col>
           <FlexCol flex="auto">
             {crdName && apiGroup && apiVersion && apiExtensionVersion && (

src/utils/getSidebarIdPrefix.ts

@@ -0,0 +1,25 @@
+export const getSidebarIdPrefix = ({
+  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
+}