table customization id with context

src/components/organisms/TableBuiltinInfo/TableBuiltinInfo.tsx

@@ -28,9 +28,16 @@ type TTableBuiltinInfoProps = {
   typeName: string
   limit: string | null
   inside?: boolean
+  customizationIdPrefix: string
 }
 
-export const TableBuiltinInfo: FC<TTableBuiltinInfoProps> = ({ namespace, typeName, limit, inside }) => {
+export const TableBuiltinInfo: FC<TTableBuiltinInfoProps> = ({
+  namespace,
+  typeName,
+  limit,
+  inside,
+  customizationIdPrefix,
+}) => {
   const navigate = useNavigate()
   const params = useParams()
   const cluster = useSelector((state: RootState) => state.cluster.cluster)
@@ -131,7 +138,7 @@ export const TableBuiltinInfo: FC<TTableBuiltinInfoProps> = ({ namespace, typeNa
         {!error && data && (
           <EnrichedTableProvider
             key={`/v1/${typeName}`}
-            customizationId={`default-/v1/${typeName}`}
+            customizationId={`${customizationIdPrefix}/v1/${typeName}`}
             tableMappingsReplaceValues={{
               clusterName: params.clusterName,
               projectName: params.projectName,

src/components/organisms/TableCrdInfo/TableCrdInfo.tsx

@@ -12,6 +12,7 @@ type TTableCrdInfoProps = {
   apiExtensionVersion: string
   crdName: string
   inside?: boolean
+  customizationIdPrefix: string
 }
 
 export const TableCrdInfo: FC<TTableCrdInfoProps> = ({
@@ -21,6 +22,7 @@ export const TableCrdInfo: FC<TTableCrdInfoProps> = ({
   apiExtensionVersion,
   crdName,
   inside,
+  customizationIdPrefix,
 }) => {
   const cluster = useSelector((state: RootState) => state.cluster.cluster)
 
@@ -96,6 +98,7 @@ export const TableCrdInfo: FC<TTableCrdInfoProps> = ({
             canDelete: isNamespaced ? true : deletePermission.data?.status.allowed,
           }}
           inside={inside}
+          customizationIdPrefix={customizationIdPrefix}
         />
       )}
     </>

src/components/organisms/TableCrdInfo/molecules/ResourceInfo/ResourceInfo.tsx

@@ -37,6 +37,7 @@ type TResourceInfoProps = {
     canDelete?: boolean
   }
   inside?: boolean
+  customizationIdPrefix: string
 }
 
 export const ResourceInfo: FC<TResourceInfoProps> = ({
@@ -50,6 +51,7 @@ export const ResourceInfo: FC<TResourceInfoProps> = ({
   crdAdditionalPrinterColumns,
   permissions,
   inside,
+  customizationIdPrefix,
 }) => {
   const navigate = useNavigate()
   const params = useParams()
@@ -128,7 +130,7 @@ export const ResourceInfo: FC<TResourceInfoProps> = ({
         {!error && data && (
           <EnrichedTableProvider
             key={`/${apiGroup}/${apiVersion}/${crdPluralName}`}
-            customizationId={`default-/${apiGroup}/${apiVersion}/${crdPluralName}`}
+            customizationId={`${customizationIdPrefix}/${apiGroup}/${apiVersion}/${crdPluralName}`}
             tableMappingsReplaceValues={{
               clusterName: params.clusterName,
               projectName: params.projectName,

src/components/organisms/TableNonCrdInfo/TableNonCrdInfo.tsx

@@ -31,6 +31,7 @@ type TTableNonCrdInfoProps = {
   typeName: string
   limit: string | null
   inside?: boolean
+  customizationIdPrefix: string
 }
 
 export const TableNonCrdInfo: FC<TTableNonCrdInfoProps> = ({
@@ -40,6 +41,7 @@ export const TableNonCrdInfo: FC<TTableNonCrdInfoProps> = ({
   typeName,
   limit,
   inside,
+  customizationIdPrefix,
 }) => {
   const navigate = useNavigate()
   const params = useParams()
@@ -145,7 +147,7 @@ export const TableNonCrdInfo: FC<TTableNonCrdInfoProps> = ({
         {!error && data && (
           <EnrichedTableProvider
             key={`/${apiGroup}/${apiVersion}/${typeName}`}
-            customizationId={`default-/${apiGroup}/${apiVersion}/${typeName}`}
+            customizationId={`${customizationIdPrefix}/${apiGroup}/${apiVersion}/${typeName}`}
             tableMappingsReplaceValues={{
               clusterName: params.clusterName,
               projectName: params.projectName,

src/pages/TableApiPage/TableApiPage.tsx

@@ -6,6 +6,7 @@ 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 { getTableCustomizationIdPrefix } from 'utils/getTableCustomizationIdPrefix'
 import { getTablesBackLink } from 'utils/getBacklink'
 import { BaseTemplate } from 'templates'
 import {
@@ -44,6 +45,12 @@ export const TableApiPage: FC<TTableApiPageProps> = ({ forcedTheme, inside }) =>
     project: !!namespace,
     inside,
   })}api-table`
+  const tableCustomizationIdPrefix = getTableCustomizationIdPrefix({
+    instance: !!syntheticProject,
+    project: BASE_USE_NAMESPACE_NAV !== 'true' && !!namespace,
+    namespace: !!namespace,
+    inside,
+  })
 
   const isProjectList =
     !namespace &&
@@ -79,6 +86,7 @@ export const TableApiPage: FC<TTableApiPageProps> = ({ forcedTheme, inside }) =>
             typeName={typeName}
             limit={searchParams.get('limit')}
             inside={inside}
+            customizationIdPrefix={tableCustomizationIdPrefix}
           />
         )}
       </ContentCard>

src/pages/TableBuiltinPage/TableBuiltinPage.tsx

@@ -6,6 +6,7 @@ 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 { getTableCustomizationIdPrefix } from 'utils/getTableCustomizationIdPrefix'
 import { getTablesBackLink } from 'utils/getBacklink'
 import { BaseTemplate } from 'templates'
 import { BASE_USE_NAMESPACE_NAV } from 'constants/customizationApiGroupAndVersion'
@@ -39,6 +40,12 @@ export const TableBuiltinPage: FC<TTableBuiltinPageProps> = ({ forcedTheme, insi
     project: !!namespace,
     inside,
   })}builtin-table`
+  const tableCustomizationIdPrefix = getTableCustomizationIdPrefix({
+    instance: !!syntheticProject,
+    project: BASE_USE_NAMESPACE_NAV !== 'true' && !!namespace,
+    namespace: !!namespace,
+    inside,
+  })
 
   return (
     <BaseTemplate
@@ -64,6 +71,7 @@ export const TableBuiltinPage: FC<TTableBuiltinPageProps> = ({ forcedTheme, insi
             typeName={typeName}
             limit={searchParams.get('limit')}
             inside={inside}
+            customizationIdPrefix={tableCustomizationIdPrefix}
           />
         )}
       </ContentCard>

src/pages/TableCrdPage/TableCrdPage.tsx

@@ -6,6 +6,7 @@ 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 { getTableCustomizationIdPrefix } from 'utils/getTableCustomizationIdPrefix'
 import { getTablesBackLink } from 'utils/getBacklink'
 import { BaseTemplate } from 'templates'
 import { BASE_USE_NAMESPACE_NAV } from 'constants/customizationApiGroupAndVersion'
@@ -38,6 +39,12 @@ export const TableCrdPage: FC<TTableCrdPageProps> = ({ forcedTheme, inside }) =>
     project: !!namespace,
     inside,
   })}crd-table`
+  const tableCustomizationIdPrefix = getTableCustomizationIdPrefix({
+    instance: !!syntheticProject,
+    project: BASE_USE_NAMESPACE_NAV !== 'true' && !!namespace,
+    namespace: !!namespace,
+    inside,
+  })
 
   return (
     <BaseTemplate
@@ -65,6 +72,7 @@ export const TableCrdPage: FC<TTableCrdPageProps> = ({ forcedTheme, inside }) =>
             crdName={crdName}
             apiExtensionVersion={apiExtensionVersion}
             inside={inside}
+            customizationIdPrefix={tableCustomizationIdPrefix}
           />
         )}
       </ContentCard>

src/utils/getTableCustomizationIdPrefix.ts

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