openvsx-webui-test 0.18.0-security.4 → 0.19.0-dev.0

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

@@ -0,0 +1,278 @@
+/******************************************************************************
+ * 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 { FC, useContext, 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 } = 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,93 @@
+/******************************************************************************
+ * 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 { 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/extension-admin.tsx

@@ -8,7 +8,7 @@
  * SPDX-License-Identifier: EPL-2.0
  ********************************************************************************/
 
-import React, { FunctionComponent, useState, useContext, useEffect, useRef } from 'react';
+import { FunctionComponent, useState, useContext, useEffect, useRef } from 'react';
 import { SearchListContainer } from './search-list-container';
 import { ExtensionListSearchfield } from '../extension-list/extension-list-searchfield';
 import { Button, Typography } from '@mui/material';

package/src/pages/admin-dashboard/extension-remove-dialog.tsx

@@ -8,7 +8,7 @@
  * SPDX-License-Identifier: EPL-2.0
  ********************************************************************************/
 
-import React, { FunctionComponent, useState, useContext, useEffect, useRef } from 'react';
+import { FunctionComponent, useState, useContext, useEffect, useRef } from 'react';
 import { Button, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Typography } from '@mui/material';
 import { ButtonWithProgress } from '../../components/button-with-progress';
 import { Extension, TargetPlatformVersion } from '../../extension-registry-types';

package/src/pages/admin-dashboard/extension-version-container.tsx

@@ -8,7 +8,7 @@
  * SPDX-License-Identifier: EPL-2.0
  ********************************************************************************/
 
-import React, { ChangeEvent, FunctionComponent, useContext, useState, useEffect, useRef } from 'react';
+import { ChangeEvent, FunctionComponent, useContext, useState, useEffect, useRef } from 'react';
 import { Extension, TargetPlatformVersion, VERSION_ALIASES } from '../../extension-registry-types';
 import { Box, Grid, Typography, FormControl, FormGroup, FormControlLabel, Checkbox } from '@mui/material';
 import WarningIcon from '@mui/icons-material/Warning';

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

@@ -0,0 +1,213 @@
+/******************************************************************************
+ * 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 { FC, useContext, useState, useEffect, useMemo } from "react";
+import {
+    Box,
+    Paper,
+    Typography,
+    Alert,
+    FormControl,
+    InputLabel,
+    Select,
+    MenuItem,
+    SelectChangeEvent,
+} from "@mui/material";
+import { DataGrid, GridColDef, GridPaginationModel, GridRenderCellParams } from "@mui/x-data-grid";
+import { MainContext } from "../../../context";
+import type { Log } from "../../../extension-registry-types";
+import { handleError } from "../../../utils";
+import { createMultiSelectFilterOperators } from "../components";
+
+type PeriodFilter = '' | 'P1D' | 'P7D' | 'P30D' | 'P90D' | 'P1Y';
+
+const periodOptions: { value: PeriodFilter; label: string }[] = [
+    { value: '', label: 'All Time' },
+    { value: 'P1D', label: 'Last 24 Hours' },
+    { value: 'P7D', label: 'Last 7 Days' },
+    { value: 'P30D', label: 'Last 30 Days' },
+    { value: 'P90D', label: 'Last 90 Days' },
+    { value: 'P1Y', label: 'Last Year' },
+];
+
+export const Logs: FC = () => {
+    const { service } = useContext(MainContext);
+    const [logs, setLogs] = useState<Log[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+    const [paginationModel, setPaginationModel] = useState<GridPaginationModel>({
+        page: 0,
+        pageSize: 20,
+    });
+    const [totalElements, setTotalElements] = useState(0);
+    const [periodFilter, setPeriodFilter] = useState<PeriodFilter>('');
+    const logsWithId = useMemo(() =>
+        logs.map((log, index) => ({ ...log, id: index })),
+        [logs]
+    );
+
+    useEffect(() => {
+        const abortController = new AbortController();
+
+        const loadLogs = async () => {
+            try {
+                setLoading(true);
+                setError(null);
+                const data = await service.admin.getLogs(
+                    abortController,
+                    paginationModel.page,
+                    paginationModel.pageSize,
+                    periodFilter || undefined
+                );
+                setLogs(data.content);
+                setTotalElements(data.page.totalElements);
+            } catch (err: any) {
+                if (!abortController.signal.aborted) {
+                    setError(handleError(err));
+                }
+            } finally {
+                if (!abortController.signal.aborted) {
+                    setLoading(false);
+                }
+            }
+        };
+
+        loadLogs();
+        return () => abortController.abort();
+    }, [service, paginationModel.page, paginationModel.pageSize, periodFilter]);
+
+    const handlePaginationModelChange = (newModel: GridPaginationModel) => {
+        setPaginationModel(newModel);
+    };
+
+    const handlePeriodChange = (event: SelectChangeEvent) => {
+        setPeriodFilter(event.target.value as PeriodFilter);
+        // Reset to first page when filter changes
+        setPaginationModel(prev => ({ ...prev, page: 0 }));
+    };
+
+    // Extract unique values for filter dropdowns
+    const userOptions = useMemo(() =>
+        [...new Set(logs.map(l => l.user).filter(Boolean))],
+        [logs]
+    );
+
+    const columns: GridColDef[] = [
+        {
+            field: 'timestamp',
+            headerName: 'Timestamp',
+            width: 200,
+            sortable: false,
+            renderCell: (params: GridRenderCellParams<Log>) => {
+                if (!params.value) return null;
+                const date = new Date(params.value as string);
+                return (
+                    <Typography variant='caption'>
+                        {date.toLocaleString()}
+                    </Typography>
+                );
+            }
+        },
+        {
+            field: 'user',
+            headerName: 'User',
+            flex: 1,
+            minWidth: 150,
+            sortable: false,
+            filterOperators: createMultiSelectFilterOperators(userOptions)
+        },
+        {
+            field: 'message',
+            headerName: 'Message',
+            flex: 5,
+            minWidth: 300,
+            sortable: false,
+        },
+    ];
+
+    return (
+        <Box sx={{
+            width: 'min(1500px, 100vw - 280px)',
+            maxWidth: 'none',
+            mx: 'auto',
+            px: 2,
+            pb: 3,
+            position: 'relative',
+            left: '50%',
+            transform: 'translateX(-50%)',
+        }}>
+            <Box sx={{
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+                mb: 3,
+                flexWrap: 'wrap',
+                gap: 2,
+                width: '100%',
+            }}>
+                <Typography variant='h4' component='h1'>
+                    Admin Logs
+                </Typography>
+                <FormControl sx={{ minWidth: 200 }} size='small'>
+                    <InputLabel id='period-filter-label'>Time Period</InputLabel>
+                    <Select
+                        labelId='period-filter-label'
+                        id='period-filter'
+                        value={periodFilter}
+                        label='Time Period'
+                        onChange={handlePeriodChange}
+                    >
+                        {periodOptions.map(option => (
+                            <MenuItem key={option.value} value={option.value}>
+                                {option.label}
+                            </MenuItem>
+                        ))}
+                    </Select>
+                </FormControl>
+            </Box>
+
+            {error && (
+                <Alert severity='error' sx={{ mb: 2 }} onClose={() => setError(null)}>
+                    {error}
+                </Alert>
+            )}
+
+            {!loading && !error && logs.length === 0 && (
+                <Paper elevation={0} sx={{ p: 3, textAlign: "center" }}>
+                    <Typography color='textSecondary' gutterBottom>
+                        No logs found for the selected time period.
+                    </Typography>
+                </Paper>
+            )}
+
+            {!error && logs.length > 0 && (
+                <Paper elevation={0} sx={{ flex: 1, minHeight: 400, width: '100%', display: 'flex', flexDirection: 'column' }}>
+                    <DataGrid
+                        rows={logsWithId}
+                        columns={columns}
+                        paginationMode='server'
+                        rowCount={totalElements}
+                        paginationModel={paginationModel}
+                        onPaginationModelChange={handlePaginationModelChange}
+                        pageSizeOptions={[20, 35, 50, 100]}
+                        loading={loading}
+                        disableRowSelectionOnClick
+                        sx={{
+                            flex: 1,
+                        }}
+                    />
+                </Paper>
+            )}
+        </Box>
+    );
+};

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

@@ -8,7 +8,7 @@
  * SPDX-License-Identifier: EPL-2.0
  ********************************************************************************/
 
-import React, { FunctionComponent, useState, useContext, useEffect, useRef, ReactNode } from 'react';
+import { FunctionComponent, useState, useContext, useEffect, useRef, ReactNode } from 'react';
 import { Typography, Box } from '@mui/material';
 import { NamespaceDetail, NamespaceDetailConfigContext } from '../user/user-settings-namespace-detail';
 import { ButtonWithProgress } from '../../components/button-with-progress';

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

@@ -8,7 +8,7 @@
  * SPDX-License-Identifier: EPL-2.0
  ********************************************************************************/
 
- import React, { ChangeEvent, FunctionComponent, useState, useContext, useEffect, useRef } from 'react';
+ import { ChangeEvent, FunctionComponent, useState, useContext, useEffect, useRef } from 'react';
  import {
      Button, Checkbox, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, FormControlLabel, TextField
  } from '@mui/material';

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

@@ -8,7 +8,7 @@
  * SPDX-License-Identifier: EPL-2.0
  ********************************************************************************/
 
-import React, { ChangeEvent, FunctionComponent, KeyboardEvent, useContext, useState } from 'react';
+import { ChangeEvent, FunctionComponent, KeyboardEvent, useContext, useState } from 'react';
 import { Paper, IconButton, InputBase } from '@mui/material';
 import SearchIcon from '@mui/icons-material/Search';
 import { MainContext } from '../../context';

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

@@ -8,7 +8,7 @@
  * SPDX-License-Identifier: EPL-2.0
  ********************************************************************************/
 
-import React, { FunctionComponent, useState, useContext, createContext, useEffect, useRef, ReactNode } from 'react';
+import { FunctionComponent, useState, useContext, createContext, useEffect, useRef, ReactNode } from 'react';
 import { Typography, Box } from '@mui/material';
 import { PublisherInfo } from '../../extension-registry-types';
 import { MainContext } from '../../context';
@@ -39,13 +39,13 @@ export const PublisherAdmin: FunctionComponent = () => {
         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-details.tsx

@@ -8,7 +8,7 @@
  * SPDX-License-Identifier: EPL-2.0
  ********************************************************************************/
 
-import React, { FunctionComponent } from 'react';
+import { FunctionComponent } from 'react';
 import { PublisherInfo } from '../../extension-registry-types';
 import { UserSettingsProfile } from '../user/user-settings-profile';
 import { UserExtensionList } from '../user/user-extension-list';