openvsx-webui-test 0.17.2 → 0.18.0-dev.1

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

@@ -0,0 +1,279 @@
+
+/******************************************************************************
+ * 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 React, { FC, useState, useEffect, useRef, useCallback, useMemo } from "react";
+import {
+    Box,
+    Button,
+    Paper,
+    Typography,
+    CircularProgress,
+    Alert,
+    IconButton,
+    Stack,
+    Chip
+} from "@mui/material";
+import { DataGrid, GridColDef, GridRenderCellParams } from "@mui/x-data-grid";
+import EditIcon from "@mui/icons-material/Edit";
+import DeleteIcon from "@mui/icons-material/Delete";
+import AddIcon from "@mui/icons-material/Add";
+import BarChartIcon from "@mui/icons-material/BarChart";
+import { MainContext } from "../../../context";
+import type { Customer } from "../../../extension-registry-types";
+import { CustomerFormDialog } from "./customer-form-dialog";
+import { DeleteCustomerDialog } from "./delete-customer-dialog";
+import { handleError } from "../../../utils";
+import { createMultiSelectFilterOperators, createArrayContainsFilterOperators } from "../components";
+import { AdminDashboardRoutes } from "../admin-dashboard";
+import { Link } from "react-router-dom";
+
+export const Customers: FC = () => {
+    const abortController = useRef<AbortController>(new AbortController());
+    const { service } = React.useContext(MainContext);
+    const [customers, setCustomers] = useState<Customer[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+    const [formDialogOpen, setFormDialogOpen] = useState(false);
+    const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+    const [selectedCustomer, setSelectedCustomer] = useState<Customer | undefined>();
+
+    // Load all customers
+    const loadCustomers = useCallback(async () => {
+        try {
+            setLoading(true);
+            setError(null);
+            const data = await service.admin.getCustomers(abortController.current);
+            setCustomers(data.customers);
+        } catch (err: any) {
+            setError(handleError(err));
+        } finally {
+            setLoading(false);
+        }
+    }, [service]);
+
+    useEffect(() => {
+        loadCustomers();
+        return () => abortController.current.abort();
+    }, []);
+
+    const handleCreateClick = () => {
+        setSelectedCustomer(undefined);
+        setFormDialogOpen(true);
+    };
+
+    const handleEditClick = (customer: Customer) => {
+        setSelectedCustomer(customer);
+        setFormDialogOpen(true);
+    };
+
+    const handleDeleteClick = (customer: Customer) => {
+        setSelectedCustomer(customer);
+        setDeleteDialogOpen(true);
+    };
+
+    const handleFormSubmit = async (customer: Customer) => {
+        if (selectedCustomer) {
+            // update existing customer
+            await service.admin.updateCustomer(abortController.current, selectedCustomer.name, customer);
+        } else {
+            // create new customer
+            await service.admin.createCustomer(abortController.current, customer);
+        }
+        await loadCustomers();
+    };
+
+    const handleDeleteConfirm = async () => {
+        if (selectedCustomer) {
+            await service.admin.deleteCustomer(abortController.current, selectedCustomer.name);
+            await loadCustomers();
+        }
+    };
+
+    const handleFormDialogClose = () => {
+        setFormDialogOpen(false);
+        setSelectedCustomer(undefined);
+    };
+
+    const handleDeleteDialogClose = () => {
+        setDeleteDialogOpen(false);
+        setSelectedCustomer(undefined);
+    };
+
+  // Extract unique values for filter dropdowns
+  const tierOptions = useMemo(() =>
+    [...new Set(customers.map(c => c.tier?.name).filter(Boolean))] as string[],
+    [customers]
+  );
+  const stateOptions = useMemo(() =>
+    [...new Set(customers.map(c => c.state).filter(Boolean))],
+    [customers]
+  );
+  const cidrBlockOptions = useMemo(() => {
+    const allCidrs = customers.reduce<string[]>((acc, c) => acc.concat(c.cidrBlocks), []);
+    return [...new Set(allCidrs)];
+  }, [customers]);
+
+  const columns: GridColDef[] = [
+    { field: 'name', headerName: 'Name', flex: 1, minWidth: 150 },
+    {
+      field: 'tier',
+      headerName: 'Tier',
+      flex: 1,
+      minWidth: 120,
+      valueGetter: (value: Customer['tier']) => value?.name || '',
+      filterOperators: createMultiSelectFilterOperators(tierOptions)
+    },
+    {
+      field: 'state',
+      headerName: 'State',
+      flex: 1,
+      minWidth: 100,
+      filterOperators: createMultiSelectFilterOperators(stateOptions)
+    },
+    {
+      field: 'cidrBlocks',
+      headerName: 'CIDR Blocks',
+      flex: 2,
+      minWidth: 200,
+      sortable: false,
+      filterOperators: createArrayContainsFilterOperators(cidrBlockOptions),
+      renderCell: (params: GridRenderCellParams<Customer>) => {
+        const cidrBlocks = params.row.cidrBlocks;
+        const maxVisible = 2;
+        const visibleCidrs = cidrBlocks.slice(0, maxVisible);
+        const remainingCount = cidrBlocks.length - maxVisible;
+
+        return (
+          <Stack direction='row' spacing={0.5} alignItems='center' height='100%' sx={{ py: 0.5 }}>
+            {visibleCidrs.map((cidr: string) => (
+              <Chip key={cidr} label={cidr} size='small' variant='filled' />
+            ))}
+            {remainingCount > 0 && (
+              <Chip
+                label={`+${remainingCount}`}
+                size='small'
+                variant='outlined'
+                title={cidrBlocks.slice(maxVisible).join(', ')}
+              />
+            )}
+          </Stack>
+        );
+      }
+    },
+    {
+      field: 'actions',
+      headerName: 'Actions',
+      width: 160,
+      sortable: false,
+      filterable: false,
+      renderCell: (params: GridRenderCellParams<Customer>) => (
+        <>
+          <IconButton
+            size='small'
+            component={Link}
+            to={`${AdminDashboardRoutes.USAGE_STATS}/${params.row.name}`}
+            title='View Usage Stats'
+          >
+            <BarChartIcon />
+          </IconButton>
+          <IconButton
+            size='small'
+            onClick={() => handleEditClick(params.row)}
+            title='Edit'
+          >
+            <EditIcon />
+          </IconButton>
+          <IconButton
+            size='small'
+            onClick={() => handleDeleteClick(params.row)}
+            title='Delete'
+            color='error'
+          >
+            <DeleteIcon />
+          </IconButton>
+        </>
+      )
+    }
+  ];
+
+  return (
+    <Box sx={{ p: 3, height: '100%', display: 'flex', flexDirection: 'column' }}>
+      <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 3 }}>
+        <Typography variant='h4' component='h1'>
+          Customer Management
+        </Typography>
+        <Button
+          variant='contained'
+          startIcon={<AddIcon />}
+          onClick={handleCreateClick}
+          disabled={loading}
+        >
+          Create Customer
+        </Button>
+      </Box>
+
+            {error && (
+                <Alert severity='error' sx={{ mb: 2 }} onClose={() => setError(null)}>
+                    {error}
+                </Alert>
+            )}
+
+            {loading && (
+                <Box sx={{ display: "flex", justifyContent: "center", p: 4 }}>
+                    <CircularProgress/>
+                </Box>
+            )}
+
+      { !loading && customers.length === 0 && (
+        <Paper elevation={0} sx={{ p: 3, textAlign: "center" }}>
+          <Typography color='textSecondary' gutterBottom>
+            No customers found. Create one to get started.
+          </Typography>
+        </Paper>
+      )}
+
+      { !loading && customers.length > 0 && (
+        <Paper elevation={0} sx={{ flex: 1, minHeight: 400, width: '100%', display: 'flex', flexDirection: 'column' }}>
+          <DataGrid
+            rows={customers}
+            columns={columns}
+            getRowId={(row) => row.name}
+            pageSizeOptions={[20, 35, 50]}
+            initialState={{
+              pagination: { paginationModel: { pageSize: 20 } },
+            }}
+            disableRowSelectionOnClick
+            sx={{
+              flex: 1,
+            }}
+          />
+        </Paper>
+      )}
+
+            <CustomerFormDialog
+                open={formDialogOpen}
+                customer={selectedCustomer}
+                onClose={handleFormDialogClose}
+                onSubmit={handleFormSubmit}
+            />
+
+            <DeleteCustomerDialog
+                open={deleteDialogOpen}
+                customer={selectedCustomer}
+                onClose={handleDeleteDialogClose}
+                onConfirm={handleDeleteConfirm}
+            />
+        </Box>
+    );
+};

package/src/pages/admin-dashboard/customers/delete-customer-dialog.tsx

@@ -0,0 +1,94 @@
+
+/******************************************************************************
+ * 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 React, { FC, useState } from 'react';
+import {
+    Dialog,
+    DialogTitle,
+    DialogContent,
+    DialogActions,
+    Button,
+    Typography,
+    Alert,
+    CircularProgress,
+    Box
+} from '@mui/material';
+import WarningIcon from '@mui/icons-material/Warning';
+import type { Customer } from "../../../extension-registry-types";
+import { handleError } from "../../../utils";
+
+interface DeleteCustomerDialogProps {
+    open: boolean;
+    customer?: Customer;
+    onClose: () => void;
+    onConfirm: () => Promise<void>;
+}
+
+export const DeleteCustomerDialog: FC<DeleteCustomerDialogProps> = ({ open, customer, onClose, onConfirm }) => {
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    const handleConfirm = async () => {
+        try {
+            setError(null);
+            setLoading(true);
+            await onConfirm();
+            onClose();
+        } catch (err: any) {
+            setError(handleError(err));
+            setLoading(false);
+        }
+    };
+
+    if (!customer) return null;
+
+    return (
+        <Dialog open={open} onClose={onClose} maxWidth='sm' fullWidth>
+            <DialogTitle>
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                    <WarningIcon sx={{ color: 'warning.main' }} />
+                    Delete Customer
+                </Box>
+            </DialogTitle>
+            <DialogContent>
+                {error && <Alert severity='error' sx={{ mb: 2 }}>{error}</Alert>}
+                <Typography gutterBottom>
+                    Are you sure you want to delete the customer <strong>{customer.name}</strong>?
+                </Typography>
+                {customer.tier?.name && (
+                    <Typography variant='body2' color='textSecondary' sx={{ mt: 1 }}>
+                        This customer is currently using the <strong>{customer.tier?.name}</strong> tier.
+                    </Typography>
+                )}
+                <Typography variant='body2' color='error' sx={{ mt: 2 }}>
+                    This action cannot be undone. All associated usage statistics will also be deleted.
+                </Typography>
+            </DialogContent>
+            <DialogActions sx={{ p: 2 }}>
+                <Button onClick={onClose} disabled={loading}>
+                    Cancel
+                </Button>
+                <Button
+                    onClick={handleConfirm}
+                    variant='contained'
+                    color='error'
+                    disabled={loading}
+                    startIcon={loading ? <CircularProgress size={20} /> : undefined}
+                >
+                    Delete
+                </Button>
+            </DialogActions>
+        </Dialog>
+    );
+};

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

@@ -17,7 +17,7 @@ import { SearchListContainer } from './search-list-container';
 import { PublisherDetails } from './publisher-details';
 
 export const UpdateContext = createContext({ handleUpdate: () => { } });
-export const PublisherAdmin: FunctionComponent = props => {
+export const PublisherAdmin: FunctionComponent = () => {
     const { pageSettings, service, user, handleError } = useContext(MainContext);
 
     const abortController = useRef<AbortController>(new AbortController());
@@ -39,13 +39,13 @@ export const PublisherAdmin: FunctionComponent = props => {
         const publisherName = inputValue;
         try {
             setLoading(true);
-            if (publisherName !== '') {
-                const publisher = await service.admin.getPublisherInfo(abortController.current, 'github', publisherName);
+            if (publisherName === '') {
                 setNotFound('');
-                setPublisher(publisher);
+                setPublisher(undefined);
             } else {
+                const publisher = await service.admin.getPublisherInfo(abortController.current, 'github', publisherName);
                 setNotFound('');
-                setPublisher(undefined);
+                setPublisher(publisher);
             }
             setLoading(false);
         } catch (err) {

package/src/pages/admin-dashboard/publisher-revoke-dialog.tsx

@@ -61,6 +61,7 @@ export const PublisherRevokeDialog: FunctionComponent<PublisherRevokeDialogProps
     const tokenCount = props.publisherInfo.activeAccessTokenNum;
     const extensionCount = props.publisherInfo.extensions.filter(e => e.active).length;
     const hasAgreement = props.publisherInfo.user.publisherAgreement?.status !== 'none';
+
     return <>
         <Button
             variant='contained'
@@ -74,7 +75,7 @@ export const PublisherRevokeDialog: FunctionComponent<PublisherRevokeDialogProps
             <DialogTitle >Revoke Publisher Contributions</DialogTitle>
             <DialogContent>
                 <DialogContentText component='div'>
-                    <Typography>
+                    <Typography component='div'>
                         {
                             !tokenCount && !extensionCount && !hasAgreement ?
                             <>

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

@@ -0,0 +1,109 @@
+/********************************************************************************
+ * 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 React, { FunctionComponent, useContext } from 'react';
+import { Box, Typography } from '@mui/material';
+import { ScanProvider } from '../../context/scan-admin';
+import { useTabNavigation, useUrlSync } from '../../hooks/scan-admin';
+import {
+    TabToolbar,
+    TabPanel,
+    ScansTabContent,
+    QuarantinedTabContent,
+    AutoRejectedTabContent,
+    AllowListTabContent,
+    BlockListTabContent,
+    QuarantineDialog,
+    FileDialog,
+} from '../../components/scan-admin';
+import { MainContext } from '../../context';
+
+/**
+ * Inner component that consumes the ScanContext.
+ * Uses lean tab components that consume context via hooks.
+ */
+const ScanAdminContent: FunctionComponent = () => {
+    const { selectedTab, setTab } = useTabNavigation();
+
+    // Sync state with URL parameters for bookmarkable URLs and browser navigation
+    useUrlSync();
+
+    const handleTabChange = (_event: React.SyntheticEvent, newValue: number) => {
+        setTab(newValue);
+    };
+
+    return (
+        <Box sx={{
+            width: 'min(1500px, 100vw - 280px)',
+            maxWidth: 'none',
+            mx: 'auto',
+            px: 2,
+            pb: 3,
+            position: 'relative',
+            left: '50%',
+            transform: 'translateX(-50%)',
+        }}>
+            <Typography variant='h5' gutterBottom sx={{ mb: 2 }}>
+                Extension Scans
+            </Typography>
+            <Box sx={{ width: '100%' }}>
+                <TabToolbar
+                    selectedTab={selectedTab}
+                    onTabChange={handleTabChange}
+                    tabs={['Scans', 'Quarantined', 'Auto Rejected', 'Allowed Files', 'Blocked Files']}
+                />
+
+                {/* Tab panels - each tab content component consumes context via hooks */}
+                <TabPanel value={selectedTab} index={0}>
+                    <ScansTabContent />
+                </TabPanel>
+
+                <TabPanel value={selectedTab} index={1}>
+                    <QuarantinedTabContent />
+                </TabPanel>
+
+                <TabPanel value={selectedTab} index={2}>
+                    <AutoRejectedTabContent />
+                </TabPanel>
+
+                <TabPanel value={selectedTab} index={3}>
+                    <AllowListTabContent />
+                </TabPanel>
+
+                <TabPanel value={selectedTab} index={4}>
+                    <BlockListTabContent />
+                </TabPanel>
+            </Box>
+
+            {/* Dialogs - consume context via hooks */}
+            <QuarantineDialog />
+            <FileDialog />
+        </Box>
+    );
+};
+
+/**
+ * Main ScanAdmin component that provides the context.
+ * This is the entry point for the scan administration feature.
+ */
+export const ScanAdmin: FunctionComponent = () => {
+    const { service, handleError } = useContext(MainContext);
+
+    return (
+        <ScanProvider service={service} handleError={handleError}>
+            <ScanAdminContent />
+        </ScanProvider>
+    );
+};
+
+export default ScanAdmin;

package/src/pages/admin-dashboard/tiers/delete-tier-dialog.tsx

@@ -0,0 +1,83 @@
+/******************************************************************************
+ * 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 React, { FC, useState } from 'react';
+import {
+    Dialog,
+    DialogTitle,
+    DialogContent,
+    DialogActions,
+    Button,
+    Typography,
+    CircularProgress,
+    Alert
+} from '@mui/material';
+import type { Tier } from '../../../extension-registry-types';
+import { handleError } from "../../../utils";
+
+interface DeleteTierDialogProps {
+    open: boolean;
+    tier?: Tier;
+    onClose: () => void;
+    onConfirm: () => Promise<void>;
+}
+
+export const DeleteTierDialog: FC<DeleteTierDialogProps> = ({ open, tier, onClose, onConfirm }) => {
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    const handleConfirm = async () => {
+        try {
+            setError(null);
+            setLoading(true);
+            await onConfirm();
+            onClose();
+        } catch (err: any) {
+            setError(handleError(err));
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return (
+        <Dialog open={open} onClose={onClose} maxWidth='sm' fullWidth>
+            <DialogTitle>Delete Tier</DialogTitle>
+            <DialogContent sx={{ display: 'flex', flexDirection: 'column', gap: 2, pt: 2 }}>
+                {error && <Alert severity='error'>{error}</Alert>}
+
+                <Typography>
+                    Are you sure you want to delete the tier <strong>{tier?.name}</strong>?
+                </Typography>
+
+                <Typography variant='body2' color='warning.main'>
+                    This action cannot be undone. If this tier is assigned to customers, they will be affected.
+                </Typography>
+            </DialogContent>
+
+            <DialogActions sx={{ p: 2 }}>
+                <Button onClick={onClose} disabled={loading}>
+                    Cancel
+                </Button>
+                <Button
+                    onClick={handleConfirm}
+                    variant='contained'
+                    color='error'
+                    disabled={loading}
+                    startIcon={loading ? <CircularProgress size={20} /> : undefined}
+                >
+                    Delete
+                </Button>
+            </DialogActions>
+        </Dialog>
+    );
+};