outlets

src/App.tsx

@@ -12,8 +12,8 @@ import { setBaseprefix } from 'store/federation/federation/baseprefix'
 import {
   MainPage,
   ListClustersPage,
-  ListProjectsPage,
-  ProjectInfoPage,
+  RedirectProjectsPage,
+  RedirectProjectInfoPage,
   ListInsideClustersAndNsPage,
   ListInsideApiPage,
   ListInsideCrdByApiGroupPage,
@@ -58,19 +58,18 @@ export const App: FC<TAppProps> = ({ isFederation, forcedTheme }) => {
       <Route element={<MainLayout forcedTheme={forcedTheme} />}>
         <Route path={`${prefix}/`} element={<MainPage />} />
         <Route path={`${prefix}/clusters`} element={<ListClustersPage />} />
-        <Route path={`${prefix}/clusters/:clusterName`} element={<ListProjectsPage />} />
-        <Route path={`${prefix}/inside/`} element={<MainPage />} />
-        <Route path={`${prefix}/clusters/:clusterName/projects/:namespace`} element={<ProjectInfoPage />} />
 
         <Route path={`${prefix}/:clusterName/:namespace?/:syntheticProject?/*`} element={<AppShell />}>
           {/* <Route path="crd-table/:apiGroup/:apiVersion/:apiExtensionVersion/:crdName" element={<TableCrdPage />} /> */}
           <Route path="api-table/:apiGroup/:apiVersion/:typeName" element={<TableApiPage />} />
           <Route path="builtin-table/:typeName" element={<TableBuiltinPage />} />
           {/* <Route path="forms/crds/:apiGroup/:apiVersion/:typeName/:entryName?/"" element={<FormCrdPage />} /> */}
-          <Route path="forms/builtin/:apiVersion/:typeName/:entryName?/" element={<FormBuiltinPage />} />
           <Route path="forms/apis/:apiGroup/:apiVersion/:typeName/:entryName?/" element={<FormApiPage />} />
+          <Route path="forms/builtin/:apiVersion/:typeName/:entryName?/" element={<FormBuiltinPage />} />
           <Route path="factory/:key/*" element={<FactoryPage />} />
+          <Route path="search/*" element={<SearchPage />} />
         </Route>
+
         <Route path={`${prefix}/inside/:clusterName/:namespace?/:syntheticProject?/*`} element={<AppShell inside />}>
           {/* <Route path="crd-table/:apiGroup/:apiVersion/:apiExtensionVersion/:crdName" element={<TableCrdPage inside />} /> */}
           <Route path="api-table/:apiGroup/:apiVersion/:typeName" element={<TableApiPage inside />} />
@@ -80,18 +79,19 @@ export const App: FC<TAppProps> = ({ isFederation, forcedTheme }) => {
           <Route path="forms/apis/:apiGroup/:apiVersion/:typeName/:entryName?/" element={<FormApiPage />} />
         </Route>
 
+        <Route path={`${prefix}/inside/`} element={<MainPage />} />
         <Route path={`${prefix}/inside/clusters`} element={<ListInsideClustersAndNsPage inside />} />
-        <Route path={`${prefix}/inside/:clusterName/:namespace?/apis`} element={<ListInsideApiPage inside />} />
-        <Route
-          path={`${prefix}/inside/:clusterName/:namespace?/crds-by-api/:apiGroup/:apiVersion/:apiExtensionVersion`}
-          element={<ListInsideCrdByApiGroupPage inside />}
-        />
-        <Route
-          path={`${prefix}/inside/:clusterName/:namespace?/apis-by-api/:apiGroup/:apiVersion/`}
-          element={<ListInsideApiByApiGroupPage inside />}
-        />
+        <Route path={`${prefix}/inside/:clusterName/:namespace?/*`} element={<AppShell inside />}>
+          <Route path="apis" element={<ListInsideApiPage />} />
+          <Route
+            path="crds-by-api/:apiGroup/:apiVersion/:apiExtensionVersion"
+            element={<ListInsideCrdByApiGroupPage />}
+          />
+          <Route path="apis-by-api/:apiGroup/:apiVersion/" element={<ListInsideApiByApiGroupPage />} />
+        </Route>
 
-        <Route path={`${prefix}/:clusterName/:namespace?/:syntheticProject?/search/*`} element={<SearchPage />} />
+        <Route path={`${prefix}/clusters/:clusterName`} element={<RedirectProjectsPage />} />
+        <Route path={`${prefix}/clusters/:clusterName/projects/:namespace`} element={<RedirectProjectInfoPage />} />
       </Route>
     </Routes>
   )

src/pages/Insides/ListInsideApiByApiGroupPage/ListInsideApiByApiGroupPage.tsx

@@ -1,31 +1,31 @@
-import React, { FC } from 'react'
+import React, { FC, useEffect } from 'react'
 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'
+import { useParams, useOutletContext } from 'react-router-dom'
+import { ListInsideApisByApiGroup } from 'components'
+import { TChromeCtx } from 'templates'
 
-type TListInsideApiByApiGroupPageProps = {
-  inside?: boolean
-}
-
-export const ListInsideApiByApiGroupPage: FC<TListInsideApiByApiGroupPageProps> = ({ inside }) => {
+export const ListInsideApiByApiGroupPage: FC = () => {
   const { namespace, apiGroup, apiVersion } = useParams()
 
-  const sidebarId = `${getSidebarIdPrefix({ namespace: !!namespace, inside })}api-by-api`
-  const breadcrumbsId = `${getBreadcrumbsIdPrefix({ namespace: !!namespace, inside })}api-by-api`
+  const { setSidebarSuffix, setBreadcrumbsSuffix, setUseOnlyNamespace } = useOutletContext<TChromeCtx>()
+
+  useEffect(() => {
+    setSidebarSuffix('api-by-api')
+    setBreadcrumbsSuffix('api-by-api')
+    setUseOnlyNamespace(true)
+
+    return () => {
+      setSidebarSuffix(undefined)
+      setBreadcrumbsSuffix(undefined)
+      setUseOnlyNamespace(false)
+    }
+  }, [setSidebarSuffix, setBreadcrumbsSuffix, setUseOnlyNamespace])
 
   return (
-    <BaseTemplate inside={inside} sidebar={<ManageableSidebar idToCompare={sidebarId} />}>
-      <NavigationContainer>
-        <ManageableBreadcrumbs idToCompare={breadcrumbsId} inside />
-      </NavigationContainer>
-      <ContentCard flexGrow={1} displayFlex flexFlow="column">
-        {apiGroup && apiVersion && (
-          <ListInsideApisByApiGroup namespace={namespace} apiGroup={apiGroup} apiVersion={apiVersion} />
-        )}
-      </ContentCard>
-    </BaseTemplate>
+    <ContentCard flexGrow={1} displayFlex flexFlow="column">
+      {apiGroup && apiVersion && (
+        <ListInsideApisByApiGroup namespace={namespace} apiGroup={apiGroup} apiVersion={apiVersion} />
+      )}
+    </ContentCard>
   )
 }

src/pages/Insides/ListInsideApiPage/ListInsideApiPage.tsx

@@ -1,29 +1,29 @@
-import React, { FC } from 'react'
+import React, { FC, useEffect } from 'react'
 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'
+import { useParams, useOutletContext } from 'react-router-dom'
+import { ListInsideAllResources } from 'components'
+import { TChromeCtx } from 'templates'
 
-type TListInsideApiPageProps = {
-  inside?: boolean
-}
-
-export const ListInsideApiPage: FC<TListInsideApiPageProps> = ({ inside }) => {
+export const ListInsideApiPage: FC = () => {
   const { namespace } = useParams()
 
-  const sidebarId = `${getSidebarIdPrefix({ namespace: !!namespace, inside })}apis`
-  const breadcrumbsId = `${getBreadcrumbsIdPrefix({ namespace: !!namespace, inside })}apis`
+  const { setSidebarSuffix, setBreadcrumbsSuffix, setUseOnlyNamespace } = useOutletContext<TChromeCtx>()
+
+  useEffect(() => {
+    setSidebarSuffix('apis')
+    setBreadcrumbsSuffix('apis')
+    setUseOnlyNamespace(true)
+
+    return () => {
+      setSidebarSuffix(undefined)
+      setBreadcrumbsSuffix(undefined)
+      setUseOnlyNamespace(false)
+    }
+  }, [setSidebarSuffix, setBreadcrumbsSuffix, setUseOnlyNamespace])
 
   return (
-    <BaseTemplate inside={inside} sidebar={<ManageableSidebar idToCompare={sidebarId} />}>
-      <NavigationContainer>
-        <ManageableBreadcrumbs idToCompare={breadcrumbsId} inside />
-      </NavigationContainer>
-      <ContentCard flexGrow={1} displayFlex flexFlow="column">
-        <ListInsideAllResources namespace={namespace} />
-      </ContentCard>
-    </BaseTemplate>
+    <ContentCard flexGrow={1} displayFlex flexFlow="column">
+      <ListInsideAllResources namespace={namespace} />
+    </ContentCard>
   )
 }

src/pages/Insides/ListInsideCrdByApiGroupPage/ListInsideCrdByApiGroupPage.tsx

@@ -1,36 +1,36 @@
-import React, { FC } from 'react'
+import React, { FC, useEffect } from 'react'
 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'
+import { useParams, useOutletContext } from 'react-router-dom'
+import { ListInsideCrdsByApiGroup } from 'components'
+import { TChromeCtx } from 'templates'
 
-type TListInsideCrdByApiGroupPageProps = {
-  inside?: boolean
-}
-
-export const ListInsideCrdByApiGroupPage: FC<TListInsideCrdByApiGroupPageProps> = ({ inside }) => {
+export const ListInsideCrdByApiGroupPage: FC = () => {
   const { namespace, apiGroup, apiVersion, apiExtensionVersion } = useParams()
 
-  const sidebarId = `${getSidebarIdPrefix({ namespace: !!namespace, inside })}crd-by-api`
-  const breadcrumbsId = `${getBreadcrumbsIdPrefix({ namespace: !!namespace, inside })}crd-by-api`
+  const { setSidebarSuffix, setBreadcrumbsSuffix, setUseOnlyNamespace } = useOutletContext<TChromeCtx>()
+
+  useEffect(() => {
+    setSidebarSuffix('crd-by-api')
+    setBreadcrumbsSuffix('crd-by-api')
+    setUseOnlyNamespace(true)
+
+    return () => {
+      setSidebarSuffix(undefined)
+      setBreadcrumbsSuffix(undefined)
+      setUseOnlyNamespace(false)
+    }
+  }, [setSidebarSuffix, setBreadcrumbsSuffix, setUseOnlyNamespace])
 
   return (
-    <BaseTemplate inside={inside} sidebar={<ManageableSidebar idToCompare={sidebarId} />}>
-      <NavigationContainer>
-        <ManageableBreadcrumbs idToCompare={breadcrumbsId} inside />
-      </NavigationContainer>
-      <ContentCard flexGrow={1} displayFlex flexFlow="column">
-        {apiGroup && apiVersion && apiExtensionVersion && (
-          <ListInsideCrdsByApiGroup
-            namespace={namespace}
-            apiGroup={apiGroup}
-            apiVersion={apiVersion}
-            apiExtensionVersion={apiExtensionVersion}
-          />
-        )}
-      </ContentCard>
-    </BaseTemplate>
+    <ContentCard flexGrow={1} displayFlex flexFlow="column">
+      {apiGroup && apiVersion && apiExtensionVersion && (
+        <ListInsideCrdsByApiGroup
+          namespace={namespace}
+          apiGroup={apiGroup}
+          apiVersion={apiVersion}
+          apiExtensionVersion={apiExtensionVersion}
+        />
+      )}
+    </ContentCard>
   )
 }

src/pages/ListProjectsPage/index.ts

@@ -1 +0,0 @@
-export { ListProjectsPage } from './ListProjectsPage'

src/pages/ProjectInfoPage/index.ts

@@ -1 +0,0 @@
-export { ProjectInfoPage } from './ProjectInfoPage'

src/pages/RedirectProjectInfoPage/RedirectProjectInfoPage.tsx

@@ -2,7 +2,7 @@ import React, { FC } from 'react'
 import { RedirectProjectInfo } from 'components'
 import { BaseTemplate } from 'templates'
 
-export const ProjectInfoPage: FC = () => {
+export const RedirectProjectInfoPage: FC = () => {
   return (
     <BaseTemplate>
       <RedirectProjectInfo />

src/pages/RedirectProjectInfoPage/index.ts

@@ -0,0 +1 @@
+export { RedirectProjectInfoPage } from './RedirectProjectInfoPage'

src/pages/RedirectProjectsPage/RedirectProjectsPage.tsx

@@ -2,7 +2,7 @@ import React, { FC } from 'react'
 import { RedirectProjectList } from 'components'
 import { BaseTemplate } from 'templates'
 
-export const ListProjectsPage: FC = () => {
+export const RedirectProjectsPage: FC = () => {
   return (
     <BaseTemplate>
       <RedirectProjectList />

src/pages/RedirectProjectsPage/index.ts

@@ -0,0 +1 @@
+export { RedirectProjectsPage } from './RedirectProjectsPage'

src/pages/SearchPage/SearchPage.tsx

@@ -1,47 +1,32 @@
-import React, { FC } from 'react'
+import React, { FC, useEffect } from 'react'
 import { ContentCard } from '@prorobotech/openapi-k8s-toolkit'
-import { useParams } from 'react-router-dom'
-import { BackLink, ManageableBreadcrumbs, ManageableSidebar, NavigationContainer, Search } from 'components'
-import { getSidebarIdPrefix } from 'utils/getSidebarIdPrefix'
-import { getBreadcrumbsIdPrefix } from 'utils/getBreadcrumbsIdPrefix'
-import { BaseTemplate } from 'templates'
+import { useOutletContext } from 'react-router-dom'
+import { Search } from 'components'
+import { TChromeCtx } from 'templates'
 
 export const SearchPage: FC = () => {
-  const { namespace, syntheticProject } = useParams()
+  const { setCurrentTags, setSidebarSuffix, setBreadcrumbsSuffix, setUseOnlyNamespace, setBaseTemplateSearchBoolean } =
+    useOutletContext<TChromeCtx>()
 
-  const possibleProject = syntheticProject && namespace ? syntheticProject : namespace
-  const possibleInstance = syntheticProject && namespace ? namespace : undefined
+  useEffect(() => {
+    setCurrentTags(['search'])
+    setSidebarSuffix('search-page')
+    setBreadcrumbsSuffix('search-page')
+    setUseOnlyNamespace(true)
+    setBaseTemplateSearchBoolean(true)
 
-  // const sidebarId = `${getSidebarIdPrefix({ instance: !!syntheticProject, project: !!namespace })}search-page`
-  // const breadcrumbsId = `${getBreadcrumbsIdPrefix({
-  //   instance: !!syntheticProject,
-  //   project: !!namespace,
-  // })}search-page`
-  const sidebarId = `${getSidebarIdPrefix({ namespace: !!namespace })}search-page`
-  const breadcrumbsId = `${getBreadcrumbsIdPrefix({
-    namespace: !!namespace,
-  })}search-page`
+    return () => {
+      setCurrentTags(undefined)
+      setSidebarSuffix(undefined)
+      setBreadcrumbsSuffix(undefined)
+      setUseOnlyNamespace(false)
+      setBaseTemplateSearchBoolean(false)
+    }
+  }, [setSidebarSuffix, setBreadcrumbsSuffix, setCurrentTags, setUseOnlyNamespace, setBaseTemplateSearchBoolean])
 
   return (
-    <BaseTemplate
-      inside={false}
-      isSearch
-      sidebar={
-        <ManageableSidebar
-          instanceName={possibleInstance}
-          projectName={possibleProject}
-          idToCompare={sidebarId}
-          currentTags={['search']}
-        />
-      }
-    >
-      <NavigationContainer>
-        <ManageableBreadcrumbs idToCompare={breadcrumbsId} inside={false} />
-        <BackLink title="Search" />
-      </NavigationContainer>
-      <ContentCard flexGrow={1} displayFlex flexFlow="column">
-        <Search />
-      </ContentCard>
-    </BaseTemplate>
+    <ContentCard flexGrow={1} displayFlex flexFlow="column">
+      <Search />
+    </ContentCard>
   )
 }

src/pages/index.ts

@@ -1,15 +1,6 @@
-export { MainPage } from './MainPage'
 /* main routing */
+export { MainPage } from './MainPage'
 export { ListClustersPage } from './ListClustersPage'
-export { ListProjectsPage } from './ListProjectsPage'
-export { ProjectInfoPage } from './ProjectInfoPage'
-/* inside routing */
-export {
-  ListInsideClustersAndNsPage,
-  ListInsideApiPage,
-  ListInsideCrdByApiGroupPage,
-  ListInsideApiByApiGroupPage,
-} from './Insides'
 /* tables */
 export {
   // TableCrdPage,
@@ -26,3 +17,13 @@ export {
 export { FactoryPage } from './FactoryPage'
 /* search */
 export { SearchPage } from './SearchPage'
+/* inside routing */
+export {
+  ListInsideClustersAndNsPage,
+  ListInsideApiPage,
+  ListInsideCrdByApiGroupPage,
+  ListInsideApiByApiGroupPage,
+} from './Insides'
+/* redirects */
+export { RedirectProjectsPage } from './RedirectProjectsPage'
+export { RedirectProjectInfoPage } from './RedirectProjectInfoPage'

src/templates/AppShell/AppShell.tsx

@@ -12,6 +12,8 @@ export type TChromeCtx = {
   setBreadcrumbsSuffix: (suffix?: string) => void
   setBacklinkTo: (backlinkTo?: string) => void
   setBacklinkTitle: (backlinkTitle?: string) => void
+  setUseOnlyNamespace: (flag: boolean) => void
+  setBaseTemplateSearchBoolean: (flag: boolean) => void
 }
 
 export const AppShell: FC<{ inside?: boolean }> = ({ inside }) => {
@@ -25,6 +27,8 @@ export const AppShell: FC<{ inside?: boolean }> = ({ inside }) => {
   const [breadcrumbsSuffix, setBreadcrumbsSuffix] = useState<string | undefined>()
   const [backlinkTo, setBacklinkTo] = useState<string | undefined>()
   const [backlinkTitle, setBacklinkTitle] = useState<string | undefined>()
+  const [useOnlyNamespace, setUseOnlyNamespace] = useState<boolean>(false)
+  const [baseTemplateSearchBoolean, setBaseTemplateSearchBoolean] = useState<boolean>(false)
 
   // Commit tags only on actual content change to avoid sidebar refetch
   const setCurrentTags = React.useCallback((next?: string[]) => {
@@ -39,18 +43,22 @@ export const AppShell: FC<{ inside?: boolean }> = ({ inside }) => {
 
   const sidebarId = useMemo(
     () =>
-      `${getSidebarIdPrefix({ instance: !!syntheticProject, project: !!namespace, inside })}${
+      `${getSidebarIdPrefix({ instance: !!syntheticProject, project: !!namespace, useOnlyNamespace, inside })}${
         sidebarSuffix ?? 'app-shell'
       }`,
-    [syntheticProject, namespace, inside, sidebarSuffix],
+    [syntheticProject, namespace, sidebarSuffix, useOnlyNamespace, inside],
   )
 
   const breadcrumbsId = useMemo(
     () =>
-      `${getBreadcrumbsIdPrefix({ instance: !!syntheticProject, project: !!namespace, inside })}${
-        breadcrumbsSuffix ?? 'app-shell'
-      }`,
-    [syntheticProject, namespace, inside, breadcrumbsSuffix],
+      `${getBreadcrumbsIdPrefix({
+        namespace: !!namespace,
+        instance: !!syntheticProject,
+        project: !!namespace,
+        useOnlyNamespace,
+        inside,
+      })}${breadcrumbsSuffix ?? 'app-shell'}`,
+    [syntheticProject, namespace, breadcrumbsSuffix, useOnlyNamespace, inside],
   )
 
   const sidebarEl = React.useMemo(
@@ -72,12 +80,14 @@ export const AppShell: FC<{ inside?: boolean }> = ({ inside }) => {
       setBreadcrumbsSuffix,
       setBacklinkTo,
       setBacklinkTitle,
+      setUseOnlyNamespace,
+      setBaseTemplateSearchBoolean,
     }),
     [setCurrentTags],
   )
 
   return (
-    <BaseTemplate inside={inside} sidebar={sidebarEl}>
+    <BaseTemplate inside={inside} sidebar={sidebarEl} isSearch={baseTemplateSearchBoolean}>
       <NavigationContainer>
         <ManageableBreadcrumbs idToCompare={breadcrumbsId} inside={inside} />
         {backlinkTo && backlinkTitle && <BackLink to={backlinkTo} title={backlinkTitle} />}

src/utils/getBreadcrumbsIdPrefix.ts

@@ -3,17 +3,19 @@ export const getBreadcrumbsIdPrefix = ({
   instance,
   namespace,
   inside,
+  useOnlyNamespace,
 }: {
   project?: boolean
   instance?: boolean
   namespace?: boolean
   inside?: boolean
+  useOnlyNamespace?: boolean
 }): string => {
   let result = inside ? 'inside-' : 'stock-'
 
-  if (instance) {
+  if (instance && !useOnlyNamespace) {
     result += 'instance-'
-  } else if (project) {
+  } else if (project && !useOnlyNamespace) {
     result += 'project-'
   } else if (namespace) {
     result += 'namespace-'

src/utils/getSidebarIdPrefix.ts

@@ -3,17 +3,19 @@ export const getSidebarIdPrefix = ({
   instance,
   namespace,
   inside,
+  useOnlyNamespace,
 }: {
   project?: boolean
   instance?: boolean
   namespace?: boolean
   inside?: boolean
+  useOnlyNamespace?: boolean
 }): string => {
   let result = inside ? 'inside-' : 'stock-'
 
-  if (instance) {
+  if (instance && !useOnlyNamespace) {
     result += 'instance-'
-  } else if (project) {
+  } else if (project && !useOnlyNamespace) {
     result += 'project-'
   } else if (namespace) {
     result += 'namespace-'