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

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}/>
+    </>;
+};

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/publisher-admin.tsx

@@ -16,7 +16,7 @@ import { MainContext } from '../../context';
 import { StyledInput } from './namespace-input';
 import { SearchListContainer } from './search-list-container';
 import { PublisherDetails } from './publisher-details';
-import { AdminDashboardRoutes } from './admin-routes';
+import { AdminDashboardRoutes } from './admin-dashboard-routes';
 
 // eslint-disable-next-line react-refresh/only-export-components
 export const UpdateContext = createContext({ handleUpdate: () => { } });

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/usage-stats/usage-stats.tsx

@@ -17,7 +17,7 @@ import { useParams, useNavigate } from "react-router-dom";
 import { MainContext } from "../../../context";
 import type { Customer } from "../../../extension-registry-types";
 import { handleError } from "../../../utils";
-import { AdminDashboardRoutes } from "../admin-routes";
+import { AdminDashboardRoutes } from "../admin-dashboard-routes";
 import { SearchListContainer } from "../search-list-container";
 import { CustomerSearch } from "./usage-stats-search";
 import { UsageStatsChart } from "../../../components/rate-limiting/usage-stats/usage-stats-chart";

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-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/extension-detail/extension-detail-routes.ts

@@ -18,12 +18,11 @@ export namespace ExtensionDetailRoutes {
         export const NAMESPACE = ':namespace';
         export const NAME = ':name';
         export const TARGET = `:target(${getTargetPlatforms().join('|')})`;
-        export const VERSION = ':version?';
     }
 
     export const ROOT = 'extension';
-    export const MAIN = createRoute([ROOT, Parameters.NAMESPACE, Parameters.NAME, Parameters.VERSION]);
-    export const MAIN_TARGET = createRoute([ROOT, Parameters.NAMESPACE, Parameters.NAME, Parameters.TARGET, Parameters.VERSION]);
+    export const MAIN = createRoute([ROOT, Parameters.NAMESPACE, Parameters.NAME, '*']);
+    export const MAIN_TARGET = createRoute([ROOT, Parameters.NAMESPACE, Parameters.NAME, Parameters.TARGET, '*']);
     export const LATEST = createRoute([ROOT, Parameters.NAMESPACE, Parameters.NAME]);
     export const LATEST_TARGET = createRoute([ROOT, Parameters.NAMESPACE, Parameters.NAME, Parameters.TARGET]);
     export const PRE_RELEASE = createRoute([ROOT, Parameters.NAMESPACE, Parameters.NAME, 'pre-release']);