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

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

@@ -0,0 +1,89 @@
+/******************************************************************************
+ * 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, useState, useContext, useEffect, useRef } from 'react';
+import {
+    Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle
+} from '@mui/material';
+import { ButtonWithProgress } from '../../components/button-with-progress';
+import { Namespace, isError } from '../../extension-registry-types';
+import { MainContext } from '../../context';
+
+export interface NamespaceDeleteDialogProps {
+    open: boolean;
+    onClose: () => void;
+    onDelete: () => void;
+    namespace: Namespace;
+    setLoadingState: (loading: boolean) => void;
+}
+
+export const NamespaceDeleteDialog: FunctionComponent<NamespaceDeleteDialogProps> = props => {
+    const { open, onClose, onDelete, namespace } = props;
+    const { service, handleError } = useContext(MainContext);
+    const [working, setWorking] = useState(false);
+
+    const abortController = useRef<AbortController>(new AbortController());
+    useEffect(() => {
+        return () => {
+            abortController.current.abort();
+        };
+    }, []);
+
+    const handleDeleteNamespace = async () => {
+        try {
+            if (!props.namespace) {
+                return;
+            }
+            setWorking(true);
+            props.setLoadingState(true);
+            const name = props.namespace.name;
+            const result = await service.admin.deleteNamespace(abortController.current, { name });
+            if (isError(result)) {
+                throw result;
+            }
+
+            props.setLoadingState(false);
+            setWorking(false);
+            onDelete();
+        } catch (err) {
+            props.setLoadingState(false);
+            setWorking(false);
+            handleError(err);
+        }
+    };
+
+    return <>
+        <Dialog onClose={onClose} open={open} aria-labelledby='form-dialog-title'>
+            <DialogTitle id='form-dialog-title'>Delete Namespace</DialogTitle>
+            <DialogContent>
+                <DialogContentText>
+                    Are you sure you want to delete the namespace <strong>{namespace.name}</strong>?
+                </DialogContentText>
+            </DialogContent>
+            <DialogActions>
+                <Button
+                    variant='contained'
+                    color='primary'
+                    onClick={onClose}>
+                    Cancel
+                </Button>
+                <ButtonWithProgress
+                    sx={{ ml: 1 }}
+                    working={working}
+                    onClick={handleDeleteNamespace}>
+                    Delete Namespace
+                </ButtonWithProgress>
+            </DialogActions>
+        </Dialog>
+    </>;
+};

package/src/pages/admin-dashboard/nav-types.ts

@@ -0,0 +1,31 @@
+/******************************************************************************
+ * 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 { ReactNode } from 'react';
+
+export interface RouteEntry {
+    path: string;
+    name: string;
+    icon: ReactNode;
+    description?: string;
+}
+
+export interface NavGroup {
+    name: string;
+    icon: ReactNode;
+    children: RouteEntry[];
+}
+
+export type NavEntry = RouteEntry | NavGroup;
+
+export const isNavGroup = (entry: NavEntry): entry is NavGroup => 'children' in entry;

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

@@ -45,14 +45,11 @@ const ScanAdminContent: FunctionComponent = () => {
 
     return (
         <Box sx={{
-            width: 'min(1500px, 100vw - 280px)',
-            maxWidth: 'none',
+            width: '100%',
+            maxWidth: 1500,
             mx: 'auto',
             px: 2,
             pb: 3,
-            position: 'relative',
-            left: '50%',
-            transform: 'translateX(-50%)',
         }}>
             <Typography variant='h5' gutterBottom sx={{ mb: 2 }}>
                 Extension Scans

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

@@ -9,54 +9,86 @@
  ********************************************************************************/
 
 import { FunctionComponent } from 'react';
-import { Typography, Grid, Paper } from '@mui/material';
-import { styled, Theme } from '@mui/material/styles';
-import { Link } from 'react-router-dom';
-import { AdminDashboardRoutes } from './admin-dashboard-routes';
-
-export const Welcome: FunctionComponent = props => {
-    return <Grid container direction='column' spacing={2} sx={{ height: '100%' }}>
-        <Grid item container direction='column' alignItems='center' justifyContent='flex-end'>
-            <Paper elevation={3} sx={{ p: 4 }}>
-                <Typography sx={{ mb: 2 }} align='center' variant='h5'>Welcome to the Admin Dashboard!</Typography>
-                <Typography align='center'>You can switch pages in the sidepanel menu on the left side.</Typography>
-                <Typography align='center'>
-                    Choose between administration for
-                </Typography>
-                <Grid container justifyContent='center' alignItems='center' sx={{ mt: 2 }}>
-                    <WelcomeLinkItem route={AdminDashboardRoutes.NAMESPACE_ADMIN} label='Namespaces' description='Manage user roles, create new namespaces' />
-                    <WelcomeLinkItem route={AdminDashboardRoutes.EXTENSION_ADMIN} label='Extensions' description='Search for extensions and remove certain versions' />
-                    <WelcomeLinkItem route={AdminDashboardRoutes.PUBLISHER_ADMIN} label='Publishers' description='Search for publishers and revoke their contributions' />
-                    <WelcomeLinkItem route={AdminDashboardRoutes.SCANS_ADMIN} label='Scans' description='View security scan results and manage quarantined extensions' />
-                    <WelcomeLinkItem route={AdminDashboardRoutes.TIERS} label='Tiers' description='Manage rate-limit tiers' />
-                    <WelcomeLinkItem route={AdminDashboardRoutes.CUSTOMERS} label='Customers' description='Manage rate-limit customers' />
-                    <WelcomeLinkItem route={AdminDashboardRoutes.USAGE_STATS} label='Usage Stats' description='Show usage stats for customers' />
-                    <WelcomeLinkItem route={AdminDashboardRoutes.LOGS} label='Logs' description='Browse admin logs' />
-                </Grid>
-            </Paper>
-        </Grid>
-    </Grid>;
+import { Box, Card, CardActionArea, CardContent, Divider, Grid, Typography } from '@mui/material';
+import { useNavigate } from 'react-router-dom';
+import { isNavGroup, NavEntry, RouteEntry } from './nav-types';
+
+interface NavSection {
+    groupName?: string;
+    entries: RouteEntry[];
+}
+
+/** Preserve the original group structure: ungrouped items come first as a section without a title. */
+function buildSections(items: NavEntry[]): NavSection[] {
+    const ungrouped: RouteEntry[] = items.filter((e): e is RouteEntry => !isNavGroup(e));
+    const groups: NavSection[] = items
+        .filter(isNavGroup)
+        .map(group => ({ groupName: group.name, entries: group.children }));
+
+    return ungrouped.length > 0 ? [{ entries: ungrouped }, ...groups] : groups;
+}
+
+const NavCard: FunctionComponent<{ entry: RouteEntry }> = ({ entry }) => {
+    const navigate = useNavigate();
+    return (
+        <Card variant='outlined' sx={{ height: '100%' }}>
+            <CardActionArea
+                onClick={() => navigate(entry.path)}
+                sx={{ height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', py: 3, px: 2 }}
+            >
+                <Box sx={{ fontSize: 40, color: 'primary.main', mb: 1, display: 'flex' }}>
+                    {entry.icon}
+                </Box>
+                <CardContent sx={{ textAlign: 'center', p: 1 }}>
+                    <Typography variant='h6' gutterBottom>{entry.name}</Typography>
+                    {entry.description && (
+                        <Typography variant='body2' color='text.secondary'>
+                            {entry.description}
+                        </Typography>
+                    )}
+                </CardContent>
+            </CardActionArea>
+        </Card>
+    );
 };
 
-const StyledLink = styled(Link)(({ theme }: { theme: Theme }) => ({
-    color: theme.palette.secondary.main,
-    textDecoration: 'none',
-    '&:hover': {
-        textDecoration: 'underline'
-    }
-}));
-
-const WelcomeLinkItem: FunctionComponent<{ route: string, label: string, description: string }> = props => {
-    return <Grid container item xs={8} sx={{ mb: 2 }}>
-        <Grid container alignItems='center' item xs={12} md={4}>
-            <Typography>
-                <StyledLink to={props.route}>
-                    {props.label}
-                </StyledLink>
+export interface WelcomeProps {
+    items: NavEntry[];
+}
+
+export const Welcome: FunctionComponent<WelcomeProps> = ({ items }) => {
+    const sections = buildSections(items);
+
+    return (
+        <Box sx={{ py: 4, px: 2 }}>
+            <Typography variant='h5' gutterBottom>
+                Welcome to the Admin Dashboard
             </Typography>
-        </Grid>
-        <Grid item xs={12} md={8}>
-            <Typography variant='body1' style={{ lineHeight: 1.5 }}>{props.description}</Typography>
-        </Grid>
-    </Grid>;
-};
+            <Typography variant='body1' color='text.secondary' sx={{ mb: 4 }}>
+                Select a section below to get started
+            </Typography>
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
+                {sections.map((section, i) => (
+                    <Box key={section.groupName ?? '__root__'}>
+                        {section.groupName && (
+                            <>
+                                <Typography variant='overline' color='text.secondary' sx={{ mb: 1, display: 'block' }}>
+                                    {section.groupName}
+                                </Typography>
+                                <Divider sx={{ mb: 2 }} />
+                            </>
+                        )}
+                        {!section.groupName && i > 0 && <Divider sx={{ mb: 2 }} />}
+                        <Grid container spacing={3}>
+                            {section.entries.map(entry => (
+                                <Grid item key={entry.path} xs={12} sm={6} md={4} lg={3}>
+                                    <NavCard entry={entry} />
+                                </Grid>
+                            ))}
+                        </Grid>
+                    </Box>
+                ))}
+            </Box>
+        </Box>
+    );
+};

package/src/pages/user/user-setting-tabs.tsx

@@ -20,6 +20,7 @@ export const UserSettingTabs = (): ReactElement => {
     const isATablet = useMediaQuery(theme.breakpoints.down('md'));
     const isAMobile = useMediaQuery(theme.breakpoints.down('sm'));
     const { tab } = useParams();
+
     const navigate = useNavigate();
 
     const handleChange = (event: ChangeEvent, newTab: string) => {
@@ -32,10 +33,10 @@ export const UserSettingTabs = (): ReactElement => {
 
     return (
         <Tabs
-            value={tab}
+            value={tab ?? 'extensions'}
             onChange={handleChange}
             orientation={isATablet ? 'horizontal' : 'vertical'}
-            centered={isAMobile ? true : false}
+            centered={isAMobile}
             indicatorColor='secondary'
         >
             <Tab value='profile' label='Profile' />

package/src/pages/user/user-settings-namespace-detail.tsx

@@ -17,6 +17,7 @@ import { UserNamespaceExtensionListContainer } from './user-namespace-extension-
 import { AdminDashboardRoutes } from '../admin-dashboard/admin-dashboard-routes';
 import { Namespace, UserData } from '../../extension-registry-types';
 import { NamespaceChangeDialog } from '../admin-dashboard/namespace-change-dialog';
+import { NamespaceDeleteDialog } from '../admin-dashboard/namespace-delete-dialog';
 import { UserNamespaceMemberList } from './user-namespace-member-list';
 import { UserNamespaceDetails } from './user-namespace-details';
 
@@ -61,6 +62,7 @@ const NamespaceHeader = styled(Box)(({ theme }: { theme: Theme }) => ({
 
 export const NamespaceDetail: FunctionComponent<NamespaceDetailProps> = props => {
     const [changeDialogIsOpen, setChangeDialogIsOpen] = useState(false);
+    const [deleteDialogIsOpen, setDeleteDialogIsOpen] = useState(false);
     const { pathname } = useLocation();
 
     const handleCloseChangeDialog = async () => {
@@ -70,6 +72,19 @@ export const NamespaceDetail: FunctionComponent<NamespaceDetailProps> = props =>
         setChangeDialogIsOpen(true);
     };
 
+    const handleCloseDeleteDialog = async () => {
+        setDeleteDialogIsOpen(false);
+    };
+    const handleDeletedNamespace = async () => {
+        setDeleteDialogIsOpen(false);
+        if (props.onDelete !== undefined) {
+            props.onDelete();
+        }
+    };
+
+    const handleOpenDeleteDialog = () => {
+        setDeleteDialogIsOpen(true);
+    };
     const warningColor = props.theme === 'dark' ? '#fff' : '#151515';
     return <>
         <NamespaceDetailContainer container direction='column' spacing={4}>
@@ -101,9 +116,20 @@ export const NamespaceDetail: FunctionComponent<NamespaceDetailProps> = props =>
                 <NamespaceHeader>
                     <Typography variant='h4'>{props.namespace.name}</Typography>
                     { pathname.startsWith(AdminDashboardRoutes.NAMESPACE_ADMIN)
-                        ? <Button sx={{ ml: { xs: 2, sm: 2, md: 2, lg: 0, xl: 0 } }} variant='outlined' onClick={handleOpenChangeDialog}>
-                            Change Namespace
-                        </Button>
+                        ?
+                        <Box>
+                            <Button sx={{ ml: { xs: 2, sm: 2, md: 2, lg: 0, xl: 0 } }} variant='outlined' onClick={handleOpenChangeDialog}>
+                                Change Namespace
+                            </Button>
+                            { Object.keys(props.namespace.extensions).length === 0 &&
+                                <Button
+                                    variant='outlined'
+                                    sx={{ color: 'error.main', height: 36, ml: { xs: 2 } }}
+                                    onClick={handleOpenDeleteDialog}>
+                                    Delete
+                                </Button>
+                            }
+                        </Box>
                         : null
                     }
                 </NamespaceHeader>
@@ -137,6 +163,12 @@ export const NamespaceDetail: FunctionComponent<NamespaceDetailProps> = props =>
             onClose={handleCloseChangeDialog}
             namespace={props.namespace}
             setLoadingState={props.setLoadingState} />
+        <NamespaceDeleteDialog
+            open={deleteDialogIsOpen}
+            onClose={handleCloseDeleteDialog}
+            onDelete={handleDeletedNamespace}
+            namespace={props.namespace}
+            setLoadingState={props.setLoadingState} />
     </>;
 };
 
@@ -147,4 +179,5 @@ export interface NamespaceDetailProps {
     setLoadingState: (loading: boolean) => void;
     namespaceAccessUrl?: string;
     theme?: string;
-}
+    onDelete?: () => void;
+}

package/src/pages/user/user-settings-namespaces.tsx

@@ -117,7 +117,7 @@ export const UserSettingsNamespaces: FunctionComponent = () => {
                 filterUsers={(foundUser: UserData) => foundUser.provider !== user?.provider || foundUser.loginName !== user?.loginName}
                 fixSelf={true}
                 namespaceAccessUrl={namespaceAccessUrl}
-                theme={pageSettings.themeType}/>
+                theme={pageSettings.themeType} />
         </Box>;
     } else if (!loading) {
         namespaceContainer = <Typography variant='body1'>No namespaces available. Read <Link color='secondary' href={namespaceAccessUrl} target='_blank'>here</Link> about claiming namespaces.</Typography>;