openvsx-webui-test 0.20.1-rc.0 → 0.20.2-dev.0

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

@@ -8,39 +8,32 @@
  * SPDX-License-Identifier: EPL-2.0
  ********************************************************************************/
 
-import { FunctionComponent, ReactNode, useContext, useState, lazy, Suspense } 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 { DrawerHeader } from '../../components/sidepanel/drawer-header';
-import { Sidepanel } from "../../components/sidepanel/sidepanel";
 import { LoginComponent } from "../../default/login";
 import { MainContext } from '../../context';
-import { NavigationItem } from '../../components/sidepanel/navigation-item';
 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 { PublisherAdmin } from './publisher-admin';
@@ -54,51 +47,23 @@ import { Welcome } from './welcome';
 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 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 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) => {
@@ -113,165 +78,51 @@ 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'>
+                <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/>} />
@@ -286,12 +137,12 @@ export const AdminDashboard: FunctionComponent<AdminDashboardProps> = props => {
                                     <Route path='/usage' element={<UsageStatsView/>} />
                                     <Route path='/usage/:customer' element={<UsageStatsView/>} />
                                     <Route path='/logs' element={<Logs/>} />
-                                    <Route path='*' element={<Welcome/>} />
+                                    <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/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}

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

@@ -8,38 +8,38 @@
  * SPDX-License-Identifier: EPL-2.0
  ********************************************************************************/
 
- import { ChangeEvent, FunctionComponent, useState, useContext, useEffect, useRef } from 'react';
- import {
-     Button, Checkbox, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, FormControlLabel, TextField
- } from '@mui/material';
- import { ButtonWithProgress } from '../../components/button-with-progress';
- import { Namespace, SuccessResult, isError } from '../../extension-registry-types';
- import { MainContext } from '../../context';
- import { InfoDialog } from '../../components/info-dialog';
+import { ChangeEvent, FunctionComponent, useState, useContext, useEffect, useRef } from 'react';
+import {
+    Button, Checkbox, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, FormControlLabel, TextField
+} from '@mui/material';
+import { ButtonWithProgress } from '../../components/button-with-progress';
+import { Namespace, SuccessResult, isError } from '../../extension-registry-types';
+import { MainContext } from '../../context';
+import { InfoDialog } from '../../components/info-dialog';
 
- export interface NamespaceChangeDialogProps {
-     open: boolean;
-     onClose: () => void;
-     namespace: Namespace;
-     setLoadingState: (loading: boolean) => void;
- }
+export interface NamespaceChangeDialogProps {
+    open: boolean;
+    onClose: () => void;
+    namespace: Namespace;
+    setLoadingState: (loading: boolean) => void;
+}
 
- export const NamespaceChangeDialog: FunctionComponent<NamespaceChangeDialogProps> = props => {
-     const { open } = props;
-     const { service, handleError } = useContext(MainContext);
-     const [working, setWorking] = useState(false);
-     const [newNamespace, setNewNamespace] = useState('');
-     const [removeOldNamespace, setRemoveOldNamespace] = useState(false);
-     const [mergeIfNewNamespaceAlreadyExists, setMergeIfNewNamespaceAlreadyExists] = useState(false);
-     const [infoDialogIsOpen, setInfoDialogIsOpen] = useState(false);
-     const [infoDialogMessage, setInfoDialogMessage] = useState('');
+export const NamespaceChangeDialog: FunctionComponent<NamespaceChangeDialogProps> = props => {
+    const { open } = props;
+    const { service, handleError } = useContext(MainContext);
+    const [working, setWorking] = useState(false);
+    const [newNamespace, setNewNamespace] = useState('');
+    const [removeOldNamespace, setRemoveOldNamespace] = useState(false);
+    const [mergeIfNewNamespaceAlreadyExists, setMergeIfNewNamespaceAlreadyExists] = useState(false);
+    const [infoDialogIsOpen, setInfoDialogIsOpen] = useState(false);
+    const [infoDialogMessage, setInfoDialogMessage] = useState('');
 
-     const abortController = useRef<AbortController>(new AbortController());
-     useEffect(() => {
-         return () => {
-             abortController.current.abort();
-         };
-     }, []);
+    const abortController = useRef<AbortController>(new AbortController());
+    useEffect(() => {
+        return () => {
+            abortController.current.abort();
+        };
+    }, []);
 
     useEffect(() => {
         if (open) {
@@ -70,7 +70,12 @@
             setWorking(true);
             props.setLoadingState(true);
             const oldNamespace = props.namespace.name;
-            const result = await service.admin.changeNamespace(abortController.current, { oldNamespace, newNamespace, removeOldNamespace, mergeIfNewNamespaceAlreadyExists });
+            const result = await service.admin.changeNamespace(abortController.current, {
+                oldNamespace,
+                newNamespace,
+                removeOldNamespace,
+                mergeIfNewNamespaceAlreadyExists
+            });
             if (isError(result)) {
                 throw result;
             }
@@ -87,12 +92,12 @@
         }
     };
 
-     return <>
+    return <>
         <Dialog onClose={onClose} open={open} aria-labelledby='form-dialog-title'>
             <DialogTitle id='form-dialog-title'>Change Namespace</DialogTitle>
             <DialogContent>
                 <DialogContentText>
-                     Enter the new Namespace name.
+                    Enter the new Namespace name.
                 </DialogContentText>
                 <TextField
                     autoFocus
@@ -106,27 +111,31 @@
                     }}
                 />
                 <FormControlLabel
-                    control={<Checkbox checked={removeOldNamespace} onChange={onRemoveOldNamespaceChange} name='remove-old-namespace' />}
-                    label={`Remove '${props.namespace.name}' namespace after namespace change`} />
+                    control={<Checkbox checked={removeOldNamespace} onChange={onRemoveOldNamespaceChange}
+                                       name='remove-old-namespace'/>}
+                    label={`Remove '${props.namespace.name}' namespace after namespace change`}/>
                 <FormControlLabel
-                    control={<Checkbox checked={mergeIfNewNamespaceAlreadyExists} onChange={onMergeIfNewNamespaceAlreadyExistsChange} name='merge-change-namespace' />}
-                    label='Merge namespaces if new namespace already exists' />
-             </DialogContent>
-             <DialogActions>
-                 <Button
+                    control={<Checkbox checked={mergeIfNewNamespaceAlreadyExists}
+                                       onChange={onMergeIfNewNamespaceAlreadyExistsChange}
+                                       name='merge-change-namespace'/>}
+                    label='Merge namespaces if new namespace already exists'/>
+            </DialogContent>
+            <DialogActions>
+                <Button
                     variant='contained'
                     color='primary'
-                    onClick={onClose} >
+                    onClick={onClose}>
                     Cancel
                 </Button>
                 <ButtonWithProgress
                     sx={{ ml: 1 }}
                     working={working}
-                    onClick={handleChangeNamespace} >
+                    onClick={handleChangeNamespace}>
                     Change Namespace
                 </ButtonWithProgress>
-             </DialogActions>
-         </Dialog>
-         <InfoDialog infoMessage={infoDialogMessage} isInfoDialogOpen={infoDialogIsOpen} handleCloseDialog={onInfoDialogClose}/>
-     </>;
- };
+            </DialogActions>
+        </Dialog>
+        <InfoDialog infoMessage={infoDialogMessage} isInfoDialogOpen={infoDialogIsOpen}
+                    handleCloseDialog={onInfoDialogClose}/>
+    </>;
+};