From 72a979d2957ecade8f5a351c82a379f696e8b384 Mon Sep 17 00:00:00 2001 From: typescreep Date: Tue, 11 Nov 2025 06:00:00 +0300 Subject: [PATCH] outlets --- src/App.tsx | 32 +++++----- .../ListInsideApiByApiGroupPage.tsx | 46 +++++++------- .../ListInsideApiPage/ListInsideApiPage.tsx | 42 ++++++------- .../ListInsideCrdByApiGroupPage.tsx | 56 ++++++++--------- src/pages/ListProjectsPage/index.ts | 1 - src/pages/ProjectInfoPage/index.ts | 1 - .../RedirectProjectInfoPage.tsx} | 2 +- src/pages/RedirectProjectInfoPage/index.ts | 1 + .../RedirectProjectsPage.tsx} | 2 +- src/pages/RedirectProjectsPage/index.ts | 1 + src/pages/SearchPage/SearchPage.tsx | 61 +++++++------------ src/pages/index.ts | 21 ++++--- src/templates/AppShell/AppShell.tsx | 24 +++++--- src/utils/getBreadcrumbsIdPrefix.ts | 6 +- src/utils/getSidebarIdPrefix.ts | 6 +- 15 files changed, 151 insertions(+), 151 deletions(-) delete mode 100644 src/pages/ListProjectsPage/index.ts delete mode 100644 src/pages/ProjectInfoPage/index.ts rename src/pages/{ProjectInfoPage/ProjectInfoPage.tsx => RedirectProjectInfoPage/RedirectProjectInfoPage.tsx} (80%) create mode 100644 src/pages/RedirectProjectInfoPage/index.ts rename src/pages/{ListProjectsPage/ListProjectsPage.tsx => RedirectProjectsPage/RedirectProjectsPage.tsx} (81%) create mode 100644 src/pages/RedirectProjectsPage/index.ts diff --git a/src/App.tsx b/src/App.tsx index e97f190..3911dcd 100644 --- a/src/App.tsx +++ b/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 = ({ isFederation, forcedTheme }) => { }> } /> } /> - } /> - } /> - } /> }> {/* } /> */} } /> } /> {/* } /> */} - } /> } /> + } /> } /> + } /> + }> {/* } /> */} } /> @@ -80,18 +79,19 @@ export const App: FC = ({ isFederation, forcedTheme }) => { } /> + } /> } /> - } /> - } - /> - } - /> + }> + } /> + } + /> + } /> + - } /> + } /> + } /> ) diff --git a/src/pages/Insides/ListInsideApiByApiGroupPage/ListInsideApiByApiGroupPage.tsx b/src/pages/Insides/ListInsideApiByApiGroupPage/ListInsideApiByApiGroupPage.tsx index bb5f561..c25064f 100644 --- a/src/pages/Insides/ListInsideApiByApiGroupPage/ListInsideApiByApiGroupPage.tsx +++ b/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 = ({ 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() + + useEffect(() => { + setSidebarSuffix('api-by-api') + setBreadcrumbsSuffix('api-by-api') + setUseOnlyNamespace(true) + + return () => { + setSidebarSuffix(undefined) + setBreadcrumbsSuffix(undefined) + setUseOnlyNamespace(false) + } + }, [setSidebarSuffix, setBreadcrumbsSuffix, setUseOnlyNamespace]) return ( - }> - - - - - {apiGroup && apiVersion && ( - - )} - - + + {apiGroup && apiVersion && ( + + )} + ) } diff --git a/src/pages/Insides/ListInsideApiPage/ListInsideApiPage.tsx b/src/pages/Insides/ListInsideApiPage/ListInsideApiPage.tsx index 9e5ae09..05057a1 100644 --- a/src/pages/Insides/ListInsideApiPage/ListInsideApiPage.tsx +++ b/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 = ({ 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() + + useEffect(() => { + setSidebarSuffix('apis') + setBreadcrumbsSuffix('apis') + setUseOnlyNamespace(true) + + return () => { + setSidebarSuffix(undefined) + setBreadcrumbsSuffix(undefined) + setUseOnlyNamespace(false) + } + }, [setSidebarSuffix, setBreadcrumbsSuffix, setUseOnlyNamespace]) return ( - }> - - - - - - - + + + ) } diff --git a/src/pages/Insides/ListInsideCrdByApiGroupPage/ListInsideCrdByApiGroupPage.tsx b/src/pages/Insides/ListInsideCrdByApiGroupPage/ListInsideCrdByApiGroupPage.tsx index 19cd151..68d7b5c 100644 --- a/src/pages/Insides/ListInsideCrdByApiGroupPage/ListInsideCrdByApiGroupPage.tsx +++ b/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 = ({ 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() + + useEffect(() => { + setSidebarSuffix('crd-by-api') + setBreadcrumbsSuffix('crd-by-api') + setUseOnlyNamespace(true) + + return () => { + setSidebarSuffix(undefined) + setBreadcrumbsSuffix(undefined) + setUseOnlyNamespace(false) + } + }, [setSidebarSuffix, setBreadcrumbsSuffix, setUseOnlyNamespace]) return ( - }> - - - - - {apiGroup && apiVersion && apiExtensionVersion && ( - - )} - - + + {apiGroup && apiVersion && apiExtensionVersion && ( + + )} + ) } diff --git a/src/pages/ListProjectsPage/index.ts b/src/pages/ListProjectsPage/index.ts deleted file mode 100644 index b3c30e4..0000000 --- a/src/pages/ListProjectsPage/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { ListProjectsPage } from './ListProjectsPage' diff --git a/src/pages/ProjectInfoPage/index.ts b/src/pages/ProjectInfoPage/index.ts deleted file mode 100644 index 14f22bf..0000000 --- a/src/pages/ProjectInfoPage/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { ProjectInfoPage } from './ProjectInfoPage' diff --git a/src/pages/ProjectInfoPage/ProjectInfoPage.tsx b/src/pages/RedirectProjectInfoPage/RedirectProjectInfoPage.tsx similarity index 80% rename from src/pages/ProjectInfoPage/ProjectInfoPage.tsx rename to src/pages/RedirectProjectInfoPage/RedirectProjectInfoPage.tsx index f205d63..f8ff0f8 100644 --- a/src/pages/ProjectInfoPage/ProjectInfoPage.tsx +++ b/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 ( diff --git a/src/pages/RedirectProjectInfoPage/index.ts b/src/pages/RedirectProjectInfoPage/index.ts new file mode 100644 index 0000000..7a1c41e --- /dev/null +++ b/src/pages/RedirectProjectInfoPage/index.ts @@ -0,0 +1 @@ +export { RedirectProjectInfoPage } from './RedirectProjectInfoPage' diff --git a/src/pages/ListProjectsPage/ListProjectsPage.tsx b/src/pages/RedirectProjectsPage/RedirectProjectsPage.tsx similarity index 81% rename from src/pages/ListProjectsPage/ListProjectsPage.tsx rename to src/pages/RedirectProjectsPage/RedirectProjectsPage.tsx index 1d02c38..d37455a 100644 --- a/src/pages/ListProjectsPage/ListProjectsPage.tsx +++ b/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 ( diff --git a/src/pages/RedirectProjectsPage/index.ts b/src/pages/RedirectProjectsPage/index.ts new file mode 100644 index 0000000..2ea6faf --- /dev/null +++ b/src/pages/RedirectProjectsPage/index.ts @@ -0,0 +1 @@ +export { RedirectProjectsPage } from './RedirectProjectsPage' diff --git a/src/pages/SearchPage/SearchPage.tsx b/src/pages/SearchPage/SearchPage.tsx index 33e3e24..26bdd2b 100644 --- a/src/pages/SearchPage/SearchPage.tsx +++ b/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() - 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 ( - - } - > - - - - - - - - + + + ) } diff --git a/src/pages/index.ts b/src/pages/index.ts index c41444f..046b069 100644 --- a/src/pages/index.ts +++ b/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' diff --git a/src/templates/AppShell/AppShell.tsx b/src/templates/AppShell/AppShell.tsx index 534de74..c42f1a7 100644 --- a/src/templates/AppShell/AppShell.tsx +++ b/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() const [backlinkTo, setBacklinkTo] = useState() const [backlinkTitle, setBacklinkTitle] = useState() + const [useOnlyNamespace, setUseOnlyNamespace] = useState(false) + const [baseTemplateSearchBoolean, setBaseTemplateSearchBoolean] = useState(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 ( - + {backlinkTo && backlinkTitle && } diff --git a/src/utils/getBreadcrumbsIdPrefix.ts b/src/utils/getBreadcrumbsIdPrefix.ts index 42b0a50..0d7a49a 100644 --- a/src/utils/getBreadcrumbsIdPrefix.ts +++ b/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-' diff --git a/src/utils/getSidebarIdPrefix.ts b/src/utils/getSidebarIdPrefix.ts index 27b9347..33c8199 100644 --- a/src/utils/getSidebarIdPrefix.ts +++ b/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-'