openvsx-webui-test 0.20.0-dev.5 → 0.20.2-dev.0

package/src/other-pages.tsx

@@ -11,25 +11,27 @@
  * SPDX-License-Identifier: EPL-2.0
  *****************************************************************************/
 
-import { FunctionComponent, useContext, useEffect, useState } from 'react';
+import { FunctionComponent, useContext, useEffect, useState, lazy, Suspense } from 'react';
 import { Routes, Route } from 'react-router-dom';
 import { AppBar, Box, Toolbar } from '@mui/material';
 import { styled, Theme } from '@mui/material/styles';
 import { Banner } from './components/banner';
 import { MainContext } from './context';
 import { HeaderMenu } from './header-menu';
-import { ExtensionListContainer } from './pages/extension-list/extension-list-container';
-import { ExtensionListRoutes } from "./pages/extension-list/extension-list-routes";
-import { UserSettings } from './pages/user/user-settings';
+import { ExtensionListRoutes } from './pages/extension-list/extension-list-routes';
 import { UserSettingsRoutes } from './pages/user/user-settings-routes';
-import { NamespaceDetail } from './pages/namespace-detail/namespace-detail';
 import { NamespaceDetailRoutes } from './pages/namespace-detail/namespace-detail-routes';
-import { ExtensionDetail } from './pages/extension-detail/extension-detail';
 import { ExtensionDetailRoutes } from './pages/extension-detail/extension-detail-routes';
 import { getCookieValueByKey, setCookie } from './utils';
 import { UserData } from './extension-registry-types';
+
+import { ExtensionDetail } from './pages/extension-detail/extension-detail';
+import { ExtensionListContainer } from './pages/extension-list/extension-list-container';
+import { NamespaceDetail } from './pages/namespace-detail/namespace-detail';
 import { NotFound } from './not-found';
 
+const UserSettings = lazy(() => import('./pages/user/user-settings').then(m => ({ default: m.UserSettings })));
+
 const ToolbarItem = styled(Box)({
     display: 'flex',
     alignItems: 'center'
@@ -122,16 +124,18 @@ export const OtherPages: FunctionComponent<OtherPagesProps> = (props) => {
                 : null
         }
         <Box pb={`${getContentPadding()}px`}>
-            <Routes>
-                <Route path={ExtensionListRoutes.MAIN} element={ <ExtensionListContainer /> } />
-                <Route path={UserSettingsRoutes.MAIN} element={<UserSettings userLoading={props.userLoading} />} />
-                <Route path={UserSettingsRoutes.DELETE_EXTENSION} element={<UserSettings userLoading={props.userLoading} />} />
-                <Route path={NamespaceDetailRoutes.MAIN} element={ <NamespaceDetail /> } />
-                <Route path={ExtensionDetailRoutes.MAIN} element={<ExtensionDetail />} />
-                <Route path={ExtensionDetailRoutes.MAIN_TARGET} element={<ExtensionDetail />} />
-                {AdditionalRoutes ?? null}
-                <Route path='*' element={<NotFound />} />
-            </Routes>
+            <Suspense fallback={null}>
+                <Routes>
+                    <Route path={ExtensionListRoutes.MAIN} element={ <ExtensionListContainer /> } />
+                    <Route path={UserSettingsRoutes.MAIN} element={<UserSettings userLoading={props.userLoading} />} />
+                    <Route path={UserSettingsRoutes.DELETE_EXTENSION} element={<UserSettings userLoading={props.userLoading} />} />
+                    <Route path={NamespaceDetailRoutes.MAIN} element={ <NamespaceDetail /> } />
+                    <Route path={ExtensionDetailRoutes.MAIN} element={<ExtensionDetail />} />
+                    <Route path={ExtensionDetailRoutes.MAIN_TARGET} element={<ExtensionDetail />} />
+                    {AdditionalRoutes ?? null}
+                    <Route path='*' element={<NotFound />} />
+                </Routes>
+            </Suspense>
         </Box>
         {
             FooterComponent ?

package/src/pages/admin-dashboard/{admin-routes.ts → admin-dashboard-routes.ts}

@@ -1,15 +1,12 @@
-/******************************************************************************
- * Copyright (c) 2026 Contributors to the Eclipse Foundation.
- *
- * See the NOTICE file(s) distributed with this work for additional
- * information regarding copyright ownership.
+/********************************************************************************
+ * Copyright (c) 2020 TypeFox and others
  *
  * This program and the accompanying materials are made available under the
- * terms of the Eclipse Public License 2.0 which is available at
- * https://www.eclipse.org/legal/epl-2.0.
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
  *
  * SPDX-License-Identifier: EPL-2.0
- *****************************************************************************/
+ ********************************************************************************/
 
 import { createRoute } from '../../utils';
 

package/src/pages/admin-dashboard/admin-dashboard.tsx

@@ -8,95 +8,62 @@
  * SPDX-License-Identifier: EPL-2.0
  ********************************************************************************/
 
-import { FunctionComponent, ReactNode, useContext, useState } from 'react';
+import { FunctionComponent, ReactNode, useContext, lazy, Suspense } from 'react';
 import {
     Box,
     Container,
     CssBaseline,
     Typography,
     IconButton,
-    Breadcrumbs,
-    LinkProps,
-    Link,
-    Toolbar
 } from '@mui/material';
-import MuiAppBar, { AppBarProps as MuiAppBarProps } from '@mui/material/AppBar';
-import { styled } from "@mui/material/styles";
-import { Link as RouterLink, Route, Routes, useNavigate, useLocation } from 'react-router-dom';
+import { styled } from '@mui/material/styles';
+import { Route, Routes, useNavigate } from 'react-router-dom';
 import AccountBoxIcon from '@mui/icons-material/AccountBox';
 import AssignmentIndIcon from '@mui/icons-material/AssignmentInd';
 import BarChartIcon from '@mui/icons-material/BarChart';
 import ExtensionSharpIcon from '@mui/icons-material/ExtensionSharp';
-import HighlightOffIcon from '@mui/icons-material/HighlightOff';
 import HistoryIcon from '@mui/icons-material/History';
-import MenuIcon from '@mui/icons-material/Menu';
 import PeopleIcon from '@mui/icons-material/People';
 import PersonIcon from '@mui/icons-material/Person';
 import SecurityIcon from '@mui/icons-material/Security';
 import SpeedIcon from '@mui/icons-material/Speed';
 import StarIcon from '@mui/icons-material/Star';
-import { CustomerDetails } from './customers/customer-details';
-import { Customers } from './customers/customers';
-import { DrawerHeader } from '../../components/sidepanel/drawer-header';
-import { Sidepanel } from "../../components/sidepanel/sidepanel";
-import { ExtensionAdmin } from './extension-admin';
 import { LoginComponent } from "../../default/login";
-import { Logs } from './logs/logs';
 import { MainContext } from '../../context';
+import { AdminDashboardRoutes } from './admin-dashboard-routes';
+import { AdminSidepanel } from './admin-sidepanel';
+import { AdminHeader } from './admin-header';
+import { isNavGroup, NavEntry } from './nav-types';
+
 import { NamespaceAdmin } from './namespace-admin';
-import { NavigationItem } from '../../components/sidepanel/navigation-item';
 import { PublisherAdmin } from './publisher-admin';
 import { ScanAdmin } from './scan-admin';
 import { Tiers } from './tiers/tiers';
-import { UsageStatsView } from './usage-stats/usage-stats';
+import { Customers } from './customers/customers';
+import { CustomerDetails } from './customers/customer-details';
+import { Logs } from './logs/logs';
 import { Welcome } from './welcome';
-import { AdminDashboardRoutes } from "./admin-routes";
-
-const Message: FunctionComponent<{message: string}> = ({ message }) => {
-    return (<Box sx={{
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        width: '100%'
-    }}>
-        <Typography variant='h6'>{message}</Typography>
-    </Box>);
-};
-
-interface RouteEntry {
-    path: string;
-    name: string;
-    icon: ReactNode;
-}
-
-interface NavGroup {
-    name: string;
-    icon: ReactNode;
-    children: RouteEntry[];
-}
 
-type NavEntry = RouteEntry | NavGroup;
-
-const isNavGroup = (entry: NavEntry): entry is NavGroup => 'children' in entry;
+const ExtensionAdmin = lazy(() => import('./extension-admin').then(m => ({ default: m.ExtensionAdmin })));
+const UsageStatsView = lazy(() => import('./usage-stats/usage-stats').then(m => ({ default: m.UsageStatsView })));
 
 const navConfig: NavEntry[] = [
-    { path: AdminDashboardRoutes.NAMESPACE_ADMIN, name: 'Namespaces', icon: <AssignmentIndIcon /> },
-    { path: AdminDashboardRoutes.EXTENSION_ADMIN, name: 'Extensions', icon: <ExtensionSharpIcon /> },
-    { path: AdminDashboardRoutes.PUBLISHER_ADMIN, name: 'Publisher', icon: <PersonIcon /> },
-    { path: AdminDashboardRoutes.SCANS_ADMIN, name: 'Scans', icon: <SecurityIcon /> },
+    { path: AdminDashboardRoutes.NAMESPACE_ADMIN, name: 'Namespaces', icon: <AssignmentIndIcon />, description: 'Manage user roles and create new namespaces' },
+    { path: AdminDashboardRoutes.EXTENSION_ADMIN, name: 'Extensions', icon: <ExtensionSharpIcon />, description: 'Search for extensions and remove certain versions' },
+    { path: AdminDashboardRoutes.PUBLISHER_ADMIN, name: 'Publisher', icon: <PersonIcon />, description: 'Search for publishers and revoke their contributions' },
+    { path: AdminDashboardRoutes.SCANS_ADMIN, name: 'Scans', icon: <SecurityIcon />, description: 'View security scan results and manage quarantined extensions' },
     {
         name: 'Rate Limiting',
         icon: <SpeedIcon />,
         children: [
-            { path: AdminDashboardRoutes.TIERS, name: 'Tiers', icon: <StarIcon /> },
-            { path: AdminDashboardRoutes.CUSTOMERS, name: 'Customers', icon: <PeopleIcon /> },
-            { path: AdminDashboardRoutes.USAGE_STATS, name: 'Usage Stats', icon: <BarChartIcon /> },
+            { path: AdminDashboardRoutes.TIERS, name: 'Tiers', icon: <StarIcon />, description: 'Manage rate-limit tiers' },
+            { path: AdminDashboardRoutes.CUSTOMERS, name: 'Customers', icon: <PeopleIcon />, description: 'Manage rate-limit customers' },
+            { path: AdminDashboardRoutes.USAGE_STATS, name: 'Usage Stats', icon: <BarChartIcon />, description: 'Show usage stats for customers' },
         ],
     },
-    { path: AdminDashboardRoutes.LOGS, name: 'Logs', icon: <HistoryIcon /> },
+    { path: AdminDashboardRoutes.LOGS, name: 'Logs', icon: <HistoryIcon />, description: 'Browse admin activity logs' },
 ];
 
-// Flat name lookup for breadcrumbs
 const routeNames: { [key: string]: string } = {
     [AdminDashboardRoutes.MAIN]: 'Admin Dashboard',
     ...navConfig.reduce<{ [key: string]: string }>((acc, entry) => {
@@ -111,183 +78,71 @@ const routeNames: { [key: string]: string } = {
     }, {}),
 };
 
-const drawerWidth = 240;
-
-interface AppBarProps extends MuiAppBarProps {
-    open?: boolean;
-}
-
-const AppBar = styled(MuiAppBar, {
-    shouldForwardProp: (prop) => prop !== 'open',
-})<AppBarProps>(({ theme, open }) => ({
-    transition: theme.transitions.create(['margin', 'width'], {
-        easing: theme.transitions.easing.sharp,
-        duration: theme.transitions.duration.leavingScreen,
-    }),
-    ...(open && {
-        width: `calc(100% - ${drawerWidth}px)`,
-        marginLeft: `${drawerWidth}px`,
-        transition: theme.transitions.create(['margin', 'width'], {
-            easing: theme.transitions.easing.easeOut,
-            duration: theme.transitions.duration.enteringScreen,
-        }),
-    }),
+const ScrollableContent = styled(Box)(({ theme }) => ({
+    flex: 1,
+    overflowY: 'auto',
+    '&::-webkit-scrollbar': {
+        width: '12px',
+    },
+    '&::-webkit-scrollbar-track': {
+        backgroundColor: theme.palette.action.hover,
+    },
+    '&::-webkit-scrollbar-thumb': {
+        backgroundColor: theme.palette.action.selected,
+        borderRadius: '6px',
+        '&:hover': {
+            backgroundColor: theme.palette.action.focus,
+        },
+    },
 }));
 
-interface LinkRouterProps extends LinkProps {
-    to: string;
-    replace?: boolean;
-}
-
-const LinkRouter = (props: LinkRouterProps) => (
-    <Link {...props} component={RouterLink as any} />
-);
-
-const BreadcrumbsComponent = () => {
-    const { pathname } = useLocation();
-
-    const pathnames = pathname.split("/").filter((segment) => segment);
-
-    return (
-        <Breadcrumbs aria-label='breadcrumb' sx={{ pt: 2, pb: 2, px: 4 }} >
-            <LinkRouter underline='hover' color='inherit' to='/'>
-                Home
-            </LinkRouter>
-            {pathnames.map((value, index) => {
-                const last = index === pathnames.length - 1;
-                const to = `/${pathnames.slice(0, index + 1).join("/")}`;
-
-                return last ? (
-                    <Typography color='text.primary' key={to}>
-                        {routeNames[to] ?? value}
-                    </Typography>
-                ) : (
-                    <LinkRouter underline='hover' color='inherit' to={to} key={to}>
-                        {routeNames[to]}
-                    </LinkRouter>
-                );
-            })}
-        </Breadcrumbs>
-    );
+const Message: FunctionComponent<{message: string}> = ({ message }) => {
+    return (<Box sx={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: '100%'
+    }}>
+        <Typography variant='h6'>{message}</Typography>
+    </Box>);
 };
 
-const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })<{
-    open?: boolean;
-}>(({ theme, open }) => ({
-    flexGrow: 1,
-    padding: theme.spacing(3),
-    transition: theme.transitions.create('margin', {
-        easing: theme.transitions.easing.sharp,
-        duration: theme.transitions.duration.leavingScreen,
-    }),
-    marginLeft: `-${drawerWidth}px`,
-    ...(open && {
-        transition: theme.transitions.create('margin', {
-            easing: theme.transitions.easing.easeOut,
-            duration: theme.transitions.duration.enteringScreen,
-        }),
-        marginLeft: 0,
-    }),
-}));
-
 export const AdminDashboard: FunctionComponent<AdminDashboardProps> = props => {
     const { user, loginProviders } = useContext(MainContext);
-    const [drawerOpen, setDrawerOpen] = useState(true);
 
     const navigate = useNavigate();
     const toMainPage = () => navigate('/');
 
-    const [currentPage, setCurrentPage] = useState<string | undefined>(useLocation().pathname);
-    const handleOpenRoute = (route: string) => {
-        setCurrentPage(route);
-    };
-
     let content: ReactNode = null;
     if (user?.role === 'admin') {
         content =
-            <Box sx={{ display: 'flex', width: '100%' }}>
+            <Box sx={{ display: 'flex', width: '100%', height: '100%' }}>
                 <CssBaseline />
-                <AppBar position='fixed' open={drawerOpen} color='default' enableColorOnDark elevation={0}>
-                    <Toolbar>
-                        <IconButton
-                            aria-label='open drawer'
-                            onClick={() => setDrawerOpen(true)}
-                            edge='start'
-                            sx={[{ mr: 2 }, drawerOpen && { display: 'none' }]}
-                        >
-                            <MenuIcon />
-                        </IconButton>
-                        <Box sx={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}>
-                            <BreadcrumbsComponent />
-                            <IconButton onClick={toMainPage} sx={{ mt: 1, mr: 1 }}>
-                                <HighlightOffIcon/>
-                            </IconButton>
-                        </Box>
-                    </Toolbar>
-                </AppBar>
-                <Sidepanel width={drawerWidth} open={drawerOpen} handleDrawerClose={() => setDrawerOpen(false)} >
-                    {navConfig.map((entry) => {
-                        if (isNavGroup(entry)) {
-                            return (
-                                <NavigationItem
-                                    key={entry.name}
-                                    label={entry.name}
-                                    icon={entry.icon}
-                                >
-                                    {entry.children.map((child) => (
-                                        <NavigationItem key={child.path} onOpenRoute={handleOpenRoute} active={currentPage?.startsWith(child.path)}
-                                                        label={child.name} icon={child.icon} route={child.path}/>
-                                    ))}
-                                </NavigationItem>
-                            );
-                        }
-                        return (
-                            <NavigationItem key={entry.path} onOpenRoute={handleOpenRoute} active={currentPage?.startsWith(entry.path)}
-                                            label={entry.name} icon={entry.icon} route={entry.path}/>
-                        );
-                    })}
-                </Sidepanel>
-                <Main open={drawerOpen} >
-                    <DrawerHeader />
-                    <Box
-                        overflow='auto'
-                        flex={1}
-                        sx={{
-                            overflowY: 'scroll',
-                            '&::-webkit-scrollbar': {
-                                width: '12px',
-                            },
-                            '&::-webkit-scrollbar-track': {
-                                backgroundColor: 'rgba(0, 0, 0, 0.2)',
-                            },
-                            '&::-webkit-scrollbar-thumb': {
-                                backgroundColor: 'rgba(255, 255, 255, 0.2)',
-                                borderRadius: '6px',
-                                '&:hover': {
-                                    backgroundColor: 'rgba(255, 255, 255, 0.3)',
-                                },
-                            },
-                        }}
-                    >
-                        <Container sx={{ pt: 2, pb: 4, px: 3 }} maxWidth='xl'>
-                            <Routes>
-                                <Route path='/namespaces' element={<NamespaceAdmin/>} />
-                                <Route path='/extensions' element={<ExtensionAdmin/>} />
-                                <Route path='/extensions/:namespace/:extension' element={<ExtensionAdmin/>} />
-                                <Route path='/publisher' element={<PublisherAdmin/>} />
-                                <Route path='/publisher/:publisher' element={<PublisherAdmin/>} />
-                                <Route path='/scans' element={<ScanAdmin/>} />
-                                <Route path='/tiers' element={<Tiers/>} />
-                                <Route path='/customers' element={<Customers/>} />
-                                <Route path='/customers/:customer' element={<CustomerDetails/>} />
-                                <Route path='/usage' element={<UsageStatsView/>} />
-                                <Route path='/usage/:customer' element={<UsageStatsView/>} />
-                                <Route path='/logs' element={<Logs/>} />
-                                <Route path='*' element={<Welcome/>} />
-                            </Routes>
+                <AdminSidepanel items={navConfig} />
+                <Box sx={{ display: 'flex', flexDirection: 'column', flex: 1, overflow: 'hidden' }}>
+                    <AdminHeader routeNames={routeNames} onClose={toMainPage} />
+                    <ScrollableContent>
+                        <Container sx={{ pt: 3, pb: 4, px: 3 }} maxWidth='xl'>
+                            <Suspense fallback={null}>
+                                <Routes>
+                                    <Route path='/namespaces' element={<NamespaceAdmin/>} />
+                                    <Route path='/extensions' element={<ExtensionAdmin/>} />
+                                    <Route path='/extensions/:namespace/:extension' element={<ExtensionAdmin/>} />
+                                    <Route path='/publisher' element={<PublisherAdmin/>} />
+                                    <Route path='/publisher/:publisher' element={<PublisherAdmin/>} />
+                                    <Route path='/scans' element={<ScanAdmin/>} />
+                                    <Route path='/tiers' element={<Tiers/>} />
+                                    <Route path='/customers' element={<Customers/>} />
+                                    <Route path='/customers/:customer' element={<CustomerDetails/>} />
+                                    <Route path='/usage' element={<UsageStatsView/>} />
+                                    <Route path='/usage/:customer' element={<UsageStatsView/>} />
+                                    <Route path='/logs' element={<Logs/>} />
+                                    <Route path='*' element={<Welcome items={navConfig} />} />
+                                </Routes>
+                            </Suspense>
                         </Container>
-                    </Box>
-                </Main>
+                    </ScrollableContent>
+                </Box>
             </Box>;
     } else if (user) {
         content = <Message message='You are not authorized as administrator.'/>;

package/src/pages/admin-dashboard/admin-header.tsx

@@ -0,0 +1,59 @@
+/******************************************************************************
+ * Copyright (c) 2026 Contributors to the Eclipse Foundation.
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License 2.0 which is available at
+ * https://www.eclipse.org/legal/epl-2.0.
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *****************************************************************************/
+
+import { FunctionComponent } from 'react';
+import { AppBar, Breadcrumbs, IconButton, Link, Toolbar, Typography } from '@mui/material';
+import HighlightOffIcon from '@mui/icons-material/HighlightOff';
+import { Link as RouterLink, useLocation } from 'react-router-dom';
+
+export interface AdminHeaderProps {
+    routeNames: Record<string, string>;
+    onClose: () => void;
+}
+
+const BreadcrumbsNav: FunctionComponent<{ routeNames: Record<string, string> }> = ({ routeNames }) => {
+    const { pathname } = useLocation();
+    const segments = pathname.split('/').filter(Boolean);
+
+    return (
+        <Breadcrumbs aria-label='breadcrumb' sx={{ pt: 2, pb: 2, px: 4 }}>
+            <Link component={RouterLink} to='/' underline='hover' color='inherit'>
+                Home
+            </Link>
+            {segments.map((value, index) => {
+                const to = `/${segments.slice(0, index + 1).join('/')}`;
+                const label = routeNames[to] ?? value;
+                const isLast = index === segments.length - 1;
+
+                return isLast ? (
+                    <Typography color='text.primary' key={to}>{label}</Typography>
+                ) : (
+                    <Link component={RouterLink} to={to} underline='hover' color='inherit' key={to}>
+                        {label}
+                    </Link>
+                );
+            })}
+        </Breadcrumbs>
+    );
+};
+
+export const AdminHeader: FunctionComponent<AdminHeaderProps> = ({ routeNames, onClose }) => (
+    <AppBar position='sticky' color='default' enableColorOnDark elevation={0}>
+        <Toolbar sx={{ display: 'flex', justifyContent: 'space-between' }}>
+            <BreadcrumbsNav routeNames={routeNames} />
+            <IconButton onClick={onClose} aria-label='close admin dashboard' sx={{ mt: 1, mr: 1 }}>
+                <HighlightOffIcon />
+            </IconButton>
+        </Toolbar>
+    </AppBar>
+);

package/src/pages/admin-dashboard/admin-sidepanel.tsx

@@ -0,0 +1,59 @@
+/******************************************************************************
+ * Copyright (c) 2026 Contributors to the Eclipse Foundation.
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License 2.0 which is available at
+ * https://www.eclipse.org/legal/epl-2.0.
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *****************************************************************************/
+
+import { FunctionComponent } from 'react';
+import { useLocation } from 'react-router-dom';
+import { Sidepanel } from '../../components/sidepanel/sidepanel';
+import { NavigationItem } from '../../components/sidepanel/navigation-item';
+import { isNavGroup, NavEntry } from './nav-types';
+import { useLocalStorage } from '../../hooks/use-local-storage';
+
+export interface AdminSidepanelProps {
+    items: NavEntry[];
+}
+
+export const AdminSidepanel: FunctionComponent<AdminSidepanelProps> = ({ items }) => {
+    const [open, setOpen] = useLocalStorage('openvsx-admin-sidepanel-open', true);
+    const { pathname } = useLocation();
+
+    return (
+        <Sidepanel open={open} onToggle={() => setOpen(prev => !prev)}>
+            {items.map((entry) => {
+                if (isNavGroup(entry)) {
+                    return (
+                        <NavigationItem key={entry.name} label={entry.name} icon={entry.icon}>
+                            {entry.children.map((child) => (
+                                <NavigationItem
+                                    key={child.path}
+                                    active={pathname.startsWith(child.path)}
+                                    label={child.name}
+                                    icon={child.icon}
+                                    route={child.path}
+                                />
+                            ))}
+                        </NavigationItem>
+                    );
+                }
+                return (
+                    <NavigationItem
+                        key={entry.path}
+                        active={pathname.startsWith(entry.path)}
+                        label={entry.name}
+                        icon={entry.icon}
+                        route={entry.path}
+                    />
+                );
+            })}
+        </Sidepanel>
+    );
+};

package/src/pages/admin-dashboard/customers/customer-member-list.tsx

@@ -24,7 +24,7 @@ import {
     ListItemText, IconButton, type PaperProps, Paper
 } from '@mui/material';
 import { Link as RouterLink } from 'react-router-dom';
-import { AdminDashboardRoutes } from '../admin-routes';
+import { AdminDashboardRoutes } from '../admin-dashboard-routes';
 import { MainContext } from '../../../context';
 import { CustomerMembership, Customer, UserData, isError } from '../../../extension-registry-types';
 import { AddUserDialog } from '../../user/add-user-dialog';

package/src/pages/admin-dashboard/customers/customers.tsx

@@ -34,7 +34,7 @@ import { CustomerFormDialog } from "./customer-form-dialog";
 import { DeleteCustomerDialog } from "./delete-customer-dialog";
 import { createRoute, handleError } from "../../../utils";
 import { createMultiSelectFilterOperators, createArrayContainsFilterOperators } from "../components";
-import { AdminDashboardRoutes } from "../admin-routes";
+import { AdminDashboardRoutes } from "../admin-dashboard-routes";
 import { Link } from "react-router-dom";
 
 export const Customers: FC = () => {

package/src/pages/admin-dashboard/namespace-admin.tsx

@@ -31,6 +31,10 @@ export const NamespaceAdmin: FunctionComponent = props => {
         };
     }, []);
 
+    const handleDeleteNamespace = () => {
+        setCurrentNamespace(undefined);
+    };
+
     const fetchNamespace = async (namespaceName: string) => {
         if (!namespaceName) {
             setCurrentNamespace(undefined);
@@ -82,6 +86,7 @@ export const NamespaceAdmin: FunctionComponent = props => {
         listContainer = <NamespaceDetailConfigContext.Provider value={{ defaultMemberRole: 'owner' }}>
             <NamespaceDetail
                 setLoadingState={setLoading}
+                onDelete={handleDeleteNamespace}
                 namespace={currentNamespace}
                 filterUsers={() => true}
                 fixSelf={false}