WIP optional paths

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
This commit is contained in:
Patrik Oldsberg
2022-05-02 10:02:37 +02:00
parent 2b4ed3f8de
commit 6339d94337
5 changed files with 26 additions and 29 deletions
@@ -388,9 +388,7 @@ const overviewContent = (
const serviceEntityPage = (
<EntityLayoutWrapper>
<EntityLayout.Route path="." title="Overview">
{overviewContent}
</EntityLayout.Route>
<EntityLayout.Route title="Overview">{overviewContent}</EntityLayout.Route>
<EntityLayout.Route path="ci-cd" title="CI/CD">
{cicdContent}
@@ -488,9 +486,7 @@ const serviceEntityPage = (
const websiteEntityPage = (
<EntityLayoutWrapper>
<EntityLayout.Route path="." title="Overview">
{overviewContent}
</EntityLayout.Route>
<EntityLayout.Route title="Overview">{overviewContent}</EntityLayout.Route>
<EntityLayout.Route path="ci-cd" title="CI/CD">
{cicdContent}
@@ -567,9 +563,7 @@ const websiteEntityPage = (
const defaultEntityPage = (
<EntityLayoutWrapper>
<EntityLayout.Route path="." title="Overview">
{overviewContent}
</EntityLayout.Route>
<EntityLayout.Route title="Overview">{overviewContent}</EntityLayout.Route>
<EntityLayout.Route path="docs" title="Docs">
{techdocsContent}
@@ -597,7 +591,7 @@ const componentPage = (
const apiPage = (
<EntityLayoutWrapper>
<EntityLayout.Route path="." title="Overview">
<EntityLayout.Route title="Overview">
<Grid container spacing={3}>
{entityWarningContent}
<Grid item md={6} xs={12}>
@@ -631,7 +625,7 @@ const apiPage = (
const userPage = (
<EntityLayoutWrapper>
<EntityLayout.Route path="." title="Overview">
<EntityLayout.Route title="Overview">
<Grid container spacing={3}>
{entityWarningContent}
<Grid item xs={12} md={6}>
@@ -650,7 +644,7 @@ const userPage = (
const groupPage = (
<EntityLayoutWrapper>
<EntityLayout.Route path="." title="Overview">
<EntityLayout.Route title="Overview">
<Grid container spacing={3}>
{entityWarningContent}
<Grid item xs={12} md={6}>
@@ -672,7 +666,7 @@ const groupPage = (
const systemPage = (
<EntityLayoutWrapper>
<EntityLayout.Route path="." title="Overview">
<EntityLayout.Route title="Overview">
<Grid container spacing={3} alignItems="stretch">
{entityWarningContent}
<Grid item md={6}>
@@ -716,7 +710,7 @@ const systemPage = (
const domainPage = (
<EntityLayoutWrapper>
<EntityLayout.Route path="." title="Overview">
<EntityLayout.Route title="Overview">
<Grid container spacing={3} alignItems="stretch">
{entityWarningContent}
<Grid item md={6}>
@@ -29,7 +29,7 @@ export function useSelectedSubRoute(subRoutes: SubRoute[]): {
const routes = subRoutes.map(({ path, children }) => ({
caseSensitive: false,
path: `${path}/*`,
path: path ? `${path}/*` : '.',
element: children,
}));
@@ -68,20 +68,23 @@ export function RoutedTabs(props: { routes: SubRoute[] }) {
const headerTabs = useMemo(
() =>
routes.map(t => ({
id: t.path,
id: t.path ?? '.',
label: t.title,
tabProps: t.tabProps,
})),
[routes],
);
const onTabChange = (tabIndex: number) =>
const onTabChange = (tabIndex: number) => {
let { path = '.' } = routes[tabIndex];
// Remove trailing /*
path = path.replace(/\/\*$/, '');
// And remove leading / for relative navigation
path = path.replace(/^\//, '');
// Note! route resolves relative to the position in the React tree,
// not relative to current location
navigate(routes[tabIndex].path.replace(/\/\*$/, '').replace(/^\//, ''));
navigate(path);
};
return (
<>
<HeaderTabs
@@ -18,7 +18,7 @@ import { TabProps } from '@material-ui/core/Tab';
import * as React from 'react';
export type SubRoute = {
path: string;
path?: string;
title: string;
children: JSX.Element;
tabProps?: TabProps<React.ElementType, { component?: React.ElementType }>;
@@ -147,7 +147,7 @@ const overviewContent = (
const serviceEntityPage = (
<EntityLayout>
<EntityLayout.Route path="." title="Overview">
<EntityLayout.Route title="Overview">
{overviewContent}
</EntityLayout.Route>
@@ -185,7 +185,7 @@ const serviceEntityPage = (
const websiteEntityPage = (
<EntityLayout>
<EntityLayout.Route path="." title="Overview">
<EntityLayout.Route title="Overview">
{overviewContent}
</EntityLayout.Route>
@@ -219,7 +219,7 @@ const websiteEntityPage = (
const defaultEntityPage = (
<EntityLayout>
<EntityLayout.Route path="." title="Overview">
<EntityLayout.Route title="Overview">
{overviewContent}
</EntityLayout.Route>
@@ -245,7 +245,7 @@ const componentPage = (
const apiPage = (
<EntityLayout>
<EntityLayout.Route path="." title="Overview">
<EntityLayout.Route title="Overview">
<Grid container spacing={3}>
{entityWarningContent}
<Grid item md={6}>
@@ -280,7 +280,7 @@ const apiPage = (
const userPage = (
<EntityLayout>
<EntityLayout.Route path="." title="Overview">
<EntityLayout.Route title="Overview">
<Grid container spacing={3}>
{entityWarningContent}
<Grid item xs={12} md={6}>
@@ -296,7 +296,7 @@ const userPage = (
const groupPage = (
<EntityLayout>
<EntityLayout.Route path="." title="Overview">
<EntityLayout.Route title="Overview">
<Grid container spacing={3}>
{entityWarningContent}
<Grid item xs={12} md={6}>
@@ -315,7 +315,7 @@ const groupPage = (
const systemPage = (
<EntityLayout>
<EntityLayout.Route path="." title="Overview">
<EntityLayout.Route title="Overview">
<Grid container spacing={3} alignItems="stretch">
{entityWarningContent}
<Grid item md={6}>
@@ -362,7 +362,7 @@ const systemPage = (
const domainPage = (
<EntityLayout>
<EntityLayout.Route path="." title="Overview">
<EntityLayout.Route title="Overview">
<Grid container spacing={3} alignItems="stretch">
{entityWarningContent}
<Grid item md={6}>
@@ -52,7 +52,7 @@ import { EntityContextMenu } from '../EntityContextMenu/EntityContextMenu';
/** @public */
export type EntityLayoutRouteProps = {
path: string;
path?: string;
title: string;
children: JSX.Element;
if?: (entity: Entity) => boolean;