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

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

@@ -23,8 +23,16 @@ import HighlightOffIcon from '@mui/icons-material/HighlightOff';
 import { Welcome } from './welcome';
 import { PublisherAdmin } from './publisher-admin';
 import PersonIcon from '@mui/icons-material/Person';
+import PeopleIcon from '@mui/icons-material/People';
 import { ScanAdmin } from './scan-admin';
 import SecurityIcon from '@mui/icons-material/Security';
+import StarIcon from '@mui/icons-material/Star';
+import BarChartIcon from '@mui/icons-material/BarChart';
+import { Tiers } from './tiers/tiers';
+import { Customers } from './customers/customers';
+import { UsageStatsView } from './usage-stats/usage-stats';
+import { LoginComponent } from "../../default/login";
+import AccountBoxIcon from "@mui/icons-material/AccountBox";
 
 export namespace AdminDashboardRoutes {
     export const ROOT = 'admin-dashboard';
@@ -33,6 +41,9 @@ export namespace AdminDashboardRoutes {
     export const EXTENSION_ADMIN = createRoute([ROOT, 'extensions']);
     export const PUBLISHER_ADMIN = createRoute([ROOT, 'publisher']);
     export const SCANS_ADMIN = createRoute([ROOT, 'scans']);
+    export const TIERS = createRoute([ROOT, 'tiers']);
+    export const CUSTOMERS = createRoute([ROOT, 'customers']);
+    export const USAGE_STATS = createRoute([ROOT, 'usage']);
 }
 
 const Message: FunctionComponent<{message: string}> = ({ message }) => {
@@ -63,6 +74,9 @@ export const AdminDashboard: FunctionComponent<AdminDashboardProps> = props => {
                 <NavigationItem onOpenRoute={handleOpenRoute} active={currentPage === AdminDashboardRoutes.EXTENSION_ADMIN} label='Extensions' icon={<ExtensionSharpIcon />} route={AdminDashboardRoutes.EXTENSION_ADMIN} />
                 <NavigationItem onOpenRoute={handleOpenRoute} active={currentPage === AdminDashboardRoutes.PUBLISHER_ADMIN} label='Publishers' icon={<PersonIcon />} route={AdminDashboardRoutes.PUBLISHER_ADMIN} />
                 <NavigationItem onOpenRoute={handleOpenRoute} active={currentPage === AdminDashboardRoutes.SCANS_ADMIN} label='Scans' icon={<SecurityIcon />} route={AdminDashboardRoutes.SCANS_ADMIN} />
+                <NavigationItem onOpenRoute={handleOpenRoute} active={currentPage === AdminDashboardRoutes.TIERS} label='Tiers' icon={<StarIcon />} route={AdminDashboardRoutes.TIERS} />
+                <NavigationItem onOpenRoute={handleOpenRoute} active={currentPage === AdminDashboardRoutes.CUSTOMERS} label='Customers' icon={<PeopleIcon />} route={AdminDashboardRoutes.CUSTOMERS} />
+                <NavigationItem onOpenRoute={handleOpenRoute} active={currentPage?.startsWith(AdminDashboardRoutes.USAGE_STATS)} label='Usage Stats' icon={<BarChartIcon />} route={AdminDashboardRoutes.USAGE_STATS} />
             </Sidepanel>
             <Box
                 overflow='auto'
@@ -93,6 +107,10 @@ export const AdminDashboard: FunctionComponent<AdminDashboardProps> = props => {
                         <Route path='/extensions' element={<ExtensionAdmin/>} />
                         <Route path='/publisher' element={<PublisherAdmin/>} />
                         <Route path='/scans' element={<ScanAdmin/>} />
+                        <Route path='/tiers' element={<Tiers/>} />
+                        <Route path='/customers' element={<Customers/>} />
+                        <Route path='/usage' element={<UsageStatsView/>} />
+                        <Route path='/usage/:customer' element={<UsageStatsView/>} />
                         <Route path='*' element={<Welcome/>} />
                     </Routes>
                 </Container>
@@ -101,12 +119,37 @@ export const AdminDashboard: FunctionComponent<AdminDashboardProps> = props => {
     } else if (user) {
         content = <Message message='You are not authorized as administrator.'/>;
     } else if (!props.userLoading && loginProviders) {
-        content = <Message message='You are not logged in.'/>;
+
+        content = <Box display='flex' alignItems='center'>
+            <Message message='You are not logged in.'/>
+            <Box height='fit-content' alignItems='center' display='flex'>
+            <LoginComponent
+                loginProviders={loginProviders}
+                renderButton={(href, onClick) => {
+                    if (href) {
+                        return (<IconButton
+                            href={href}
+                            title='Log In'
+                            aria-label='Log In' >
+                            <AccountBoxIcon />
+                        </IconButton>);
+                    } else {
+                        return (<IconButton
+                            onClick={onClick}
+                            title='Log In'
+                            aria-label='Log In' >
+                            <AccountBoxIcon />
+                        </IconButton>);
+                    }
+                }}
+            />
+            </Box>
+        </Box>;
     }
 
     return <>
         <CssBaseline />
-        <Box display='flex' height='100vh'>{content}</Box>
+        <Box display='flex' height='100vh' justifyContent='center'>{content}</Box>
     </>;
 };
 

package/src/pages/admin-dashboard/components/data-grid-filter-operators.tsx

@@ -0,0 +1,126 @@
+/*
+ * 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 } from 'react';
+import { Autocomplete, TextField } from '@mui/material';
+import { GridFilterOperator, GridFilterInputValueProps } from '@mui/x-data-grid';
+
+/**
+ * Custom multi-select filter input component for DataGrid columns.
+ * Renders an Autocomplete with multiple selection support.
+ */
+export const MultiSelectFilterInput: FC<GridFilterInputValueProps & { options: string[] }> = ({
+  item,
+  applyValue,
+  options
+}) => {
+  const handleChange = (_event: React.SyntheticEvent, newValue: string[]) => {
+    applyValue({ ...item, value: newValue });
+  };
+
+  return (
+    <Autocomplete
+      multiple
+      size='small'
+      options={options}
+      value={(item.value as string[]) || []}
+      onChange={handleChange}
+      renderInput={(params) => (
+        <TextField {...params} variant='standard' placeholder='Filter...' />
+      )}
+      sx={{ minWidth: 150, mt: 'auto' }}
+    />
+  );
+};
+
+/**
+ * Creates filter operators for single-value columns with multi-select capability.
+ * Includes "is any of" and "is none of" operators.
+ *
+ * @param options - Array of possible values to select from
+ * @returns Array of GridFilterOperator for use in column definition
+ *
+ */
+export const createMultiSelectFilterOperators = (options: string[]): GridFilterOperator[] => [
+  {
+    label: 'is any of',
+    value: 'isAnyOf',
+    getApplyFilterFn: (filterItem) => {
+      if (!filterItem.value || (filterItem.value as string[]).length === 0) {
+        return null;
+      }
+      const filterValues = filterItem.value as string[];
+
+      return (value) => filterValues.indexOf(value as string) !== -1;
+    },
+    InputComponent: (props: GridFilterInputValueProps) => (
+      <MultiSelectFilterInput {...props} options={options} />
+    ),
+  },
+  {
+    label: 'is none of',
+    value: 'isNoneOf',
+    getApplyFilterFn: (filterItem) => {
+      if (!filterItem.value || (filterItem.value as string[]).length === 0) {
+        return null;
+      }
+      const filterValues = filterItem.value as string[];
+
+      return (value) => filterValues.indexOf(value as string) === -1;
+    },
+    InputComponent: (props: GridFilterInputValueProps) => (
+      <MultiSelectFilterInput {...props} options={options} />
+    ),
+  },
+];
+
+/**
+ * Creates filter operators for array-type columns with multi-select capability.
+ * Includes "contains any of" and "contains none of" operators.
+ *
+ * @param options - Array of possible values to select from
+ * @returns Array of GridFilterOperator for use in column definition
+ *
+ */
+export const createArrayContainsFilterOperators = (options: string[]): GridFilterOperator[] => [
+  {
+    label: 'contains any of',
+    value: 'containsAnyOf',
+    getApplyFilterFn: (filterItem) => {
+      if (!filterItem.value || (filterItem.value as string[]).length === 0) {
+        return null;
+      }
+      const filterValues = filterItem.value as string[];
+
+      return (value) => filterValues.some(fv => (value as string[]).indexOf(fv) !== -1);
+    },
+    InputComponent: (props: GridFilterInputValueProps) => (
+      <MultiSelectFilterInput {...props} options={options} />
+    ),
+  },
+  {
+    label: 'contains none of',
+    value: 'containsNoneOf',
+    getApplyFilterFn: (filterItem) => {
+      if (!filterItem.value || (filterItem.value as string[]).length === 0) {
+        return null;
+      }
+      const filterValues = filterItem.value as string[];
+
+      return (value) => !filterValues.some(fv => (value as string[]).indexOf(fv) !== -1);
+    },
+    InputComponent: (props: GridFilterInputValueProps) => (
+      <MultiSelectFilterInput {...props} options={options} />
+    ),
+  },
+];

package/src/pages/admin-dashboard/components/index.ts

@@ -0,0 +1,18 @@
+/*
+ * 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
+ */
+
+export {
+  MultiSelectFilterInput,
+  createMultiSelectFilterOperators,
+  createArrayContainsFilterOperators
+} from './data-grid-filter-operators';

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

@@ -0,0 +1,348 @@
+
+/******************************************************************************
+ * 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 } from 'react';
+import {
+    Dialog,
+    DialogTitle,
+    DialogContent,
+    DialogActions,
+    TextField,
+    Button,
+    FormControl,
+    InputLabel,
+    Select,
+    MenuItem,
+    CircularProgress,
+    Alert,
+    Box,
+    Autocomplete,
+    FormHelperText,
+    styled
+} from '@mui/material';
+import type { SelectChangeEvent } from '@mui/material';
+import { type Customer, EnforcementState, type Tier } from "../../../extension-registry-types";
+import { MainContext } from "../../../context";
+import { handleError } from "../../../utils";
+
+interface CustomerFormDialogProps {
+    open: boolean;
+    customer?: Customer;
+    onClose: () => void;
+    onSubmit: (formData: Customer) => Promise<void>;
+}
+
+
+const Code = styled('code')(({ theme }) => ({
+  fontFamily: 'source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace',
+  backgroundColor: theme.palette.action.hover, // Subtle gray background
+  padding: '2px 6px',
+  borderRadius: '4px',
+  fontSize: '0.9em',
+  color: theme.palette.text.primary,
+}));
+
+export const CustomerFormDialog: FC<CustomerFormDialogProps> = ({ open, customer, onClose, onSubmit }) => {
+    const abortController = useRef<AbortController>(new AbortController());
+    const { service } = React.useContext(MainContext);
+    const [formData, setFormData] = useState<Customer>({
+        name: '',
+        tier: undefined,
+        state: EnforcementState.ENFORCEMENT,
+        cidrBlocks: []
+    });
+    const [tiers, setTiers] = useState<Tier[]>([]);
+    const [loading, setLoading] = useState(false);
+    const [errors, setErrors] = useState<Record<string, string>>({});
+    const [touched, setTouched] = useState<Record<string, boolean>>({});
+
+    const loadTiers = async () => {
+        try {
+            const data = await service.admin.getTiers(abortController.current);
+            setTiers(data.tiers);
+        } catch (err: any) {
+            console.error('Failed to load tiers:', err);
+        }
+    };
+
+    useEffect(() => {
+        loadTiers();
+        return () => abortController.current.abort();
+    }, []);
+
+    useEffect(() => {
+        if (customer) {
+            setFormData({
+                name: customer.name,
+                tier: customer.tier,
+                state: customer.state,
+                cidrBlocks: customer.cidrBlocks
+            });
+        } else {
+            setFormData({
+                name: '',
+                tier: tiers.length > 0 ? tiers[0] : undefined,
+                state: EnforcementState.ENFORCEMENT,
+                cidrBlocks: []
+            });
+        }
+        setErrors({});
+        setTouched({});
+    }, [open, customer, tiers]);
+
+    const clearFieldError = (fieldName: string) => {
+        if (errors[fieldName]) {
+            setErrors(prev => {
+                const newErrors = { ...prev };
+                delete newErrors[fieldName];
+                return newErrors;
+            });
+        }
+    };
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | SelectChangeEvent) => {
+        const { name, value } = e.target;
+        clearFieldError(name);
+
+        if (name === 'tierName') {
+            const tier = tiers.find((tier) => tier.name === value);
+            setFormData(prev => ({
+                ...prev,
+                tier: tier,
+            }));
+        } else {
+            setFormData(prev => ({ ...prev, [name]: value }));
+        }
+    };
+
+    const handleBlur = (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+        const { name } = e.target;
+        setTouched(prev => ({ ...prev, [name]: true }));
+
+        // Validate the specific field on blur
+        validateField(name);
+    };
+
+    const fieldValidators: Record<string, () => string | undefined> = {
+        name: () => {
+            if (formData.name === undefined) {
+                return "Customer name is required";
+            } else if (formData.name.trim() !== formData.name) {
+                return "Customer name must not contain trailing whitespace";
+            } else {
+                return undefined;
+            }
+        },
+        tierName: () => formData.tier?.name ? undefined : 'Tier selection is required',
+        state: () => formData.state ? undefined : 'State is required',
+        cidrBlocks: () => {
+            if (formData.cidrBlocks && formData.cidrBlocks.length > 0) {
+                const invalidEntries = formData.cidrBlocks.filter(cidr => !isValidCIDR(cidr.trim()));
+                if (invalidEntries.length > 0) {
+                    return `Invalid CIDR block(s): ${invalidEntries.join(', ')}`;
+                }
+            }
+            return undefined;
+        },
+    };
+
+    const validateField = (fieldName: string): string | undefined => {
+        const validator = fieldValidators[fieldName];
+        const error = validator?.();
+
+        if (error) {
+            setErrors(prev => ({ ...prev, [fieldName]: error }));
+        }
+        return error;
+    };
+
+    const isValidCIDR = (cidr: string): boolean => {
+        const ipv4Regex = /^(\d{1,3}\.){3}\d{1,3}(\/\d{1,2})?$/;
+        const ipv6Regex = /^([0-9a-fA-F]{0,4}:){2,7}[0-9a-fA-F]{0,4}(\/\d{1,3})?$/;
+        return ipv4Regex.test(cidr) || ipv6Regex.test(cidr);
+    };
+
+    const handleCidrBlocksChange = (event: any, value: string[]) => {
+        clearFieldError('cidrBlocks');
+
+        // Validate all entries
+        const invalidEntries = value.filter(cidr => !isValidCIDR(cidr.trim()));
+
+        if (invalidEntries.length > 0) {
+            setTouched(prev => ({ ...prev, cidrBlocks: true }));
+            setErrors(prev => ({
+                ...prev,
+                cidrBlocks: `Invalid CIDR block(s): ${invalidEntries.join(', ')}. Please enter valid IPv4 or IPv6 CIDR notation.`
+            }));
+        }
+
+        // Always update the value so the user can see and correct invalid entries
+        setFormData(prev => ({
+            ...prev,
+            cidrBlocks: value.map(cidr => cidr.trim()),
+        }));
+    };
+
+    const validateForm = (): boolean => {
+        // Mark all fields as touched on submit
+        setTouched({
+            name: true,
+            tierName: true,
+            state: true,
+            cidrBlocks: true,
+        });
+
+        const newErrors: Record<string, string> = {};
+        for (const key of Object.keys(formData)) {
+            const error = validateField(key);
+            if (error !== undefined) {
+                newErrors[key] = error;
+            }
+        }
+
+        setErrors(newErrors);
+        return Object.keys(newErrors).length === 0;
+    };
+
+    const handleSubmit = async () => {
+        if (!validateForm()) {
+            return;
+        }
+
+        setLoading(true);
+
+        try {
+            await onSubmit(formData);
+            onClose();
+        } catch (err: any) {
+            setErrors({ submit: handleError(err) });
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const isEditMode = !!customer;
+    const title = isEditMode ? 'Edit Customer' : 'Create New Customer';
+
+    return (
+        <Dialog open={open} onClose={onClose} maxWidth='sm' fullWidth>
+            <DialogTitle>{title}</DialogTitle>
+            <DialogContent>
+              <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, pt: 2 }}>
+                {errors.submit && (
+                  <Alert severity='error'>{errors.submit}</Alert>
+                )}
+
+                <TextField
+                    label='Customer Name'
+                    name='name'
+                    value={formData.name}
+                    onChange={handleChange}
+                    onBlur={handleBlur}
+                    fullWidth
+                    placeholder='e.g., Acme Corp, TechStart Inc'
+                    required={true}
+                    disabled={loading}
+                    error={touched.name && !!errors.name}
+                    helperText={touched.name && errors.name}
+                />
+
+                <FormControl fullWidth disabled={loading} required={true} error={touched.tierName && !!errors.tierName}>
+                    <InputLabel>Tier</InputLabel>
+                    <Select
+                        name='tierName'
+                        value={formData.tier?.name ?? ''}
+                        onChange={handleChange}
+                        onBlur={(e) => {
+                            setTouched(prev => ({ ...prev, tierName: true }));
+                            validateField('tierName');
+                        }}
+                        label='Tier'
+                    >
+                        {tiers
+                            .filter(tier => tier.tierType === 'NON_FREE')
+                            .map(tier => (
+                            <MenuItem key={tier.name} value={tier.name}>
+                                {tier.name}
+                            </MenuItem>
+                        ))}
+                    </Select>
+                    {touched.tierName && errors.tierName && <FormHelperText>{errors.tierName}</FormHelperText>}
+                </FormControl>
+
+                <FormControl fullWidth disabled={loading} required={true} error={touched.state && !!errors.state}>
+                    <InputLabel>State</InputLabel>
+                    <Select
+                        name='state'
+                        value={formData.state}
+                        onChange={handleChange}
+                        onBlur={(e) => {
+                            setTouched(prev => ({ ...prev, state: true }));
+                            validateField('state');
+                        }}
+                        label='State'
+                    >
+                        {Object.keys(EnforcementState).map(key => (
+                            <MenuItem key={key} value={EnforcementState[key as keyof typeof EnforcementState]}>
+                                {key}
+                            </MenuItem>
+                        ))}
+                    </Select>
+                    {touched.state && errors.state && <FormHelperText>{errors.state}</FormHelperText>}
+                </FormControl>
+
+                <Autocomplete
+                    multiple
+                    freeSolo
+                    limitTags={5}
+                    disabled={loading}
+                    options={[]}
+                    value={formData.cidrBlocks || []}
+                    onChange={handleCidrBlocksChange}
+                    onBlur={() => {
+                        setTouched(prev => ({ ...prev, cidrBlocks: true }));
+                        validateField('cidrBlocks');
+                    }}
+                    renderInput={(params) => (
+                        <TextField
+                            {...params}
+                            label='CIDR Blocks'
+                            placeholder='e.g., 192.168.1.0/24'
+                            error={touched.cidrBlocks && !!errors.cidrBlocks}
+                            helperText={(touched.cidrBlocks && errors.cidrBlocks) || (
+                              <>Enter CIDR blocks and press <Code>Enter</Code> to add each one</>
+                            )}
+                        />
+                    )}
+                />
+
+              </Box>
+            </DialogContent>
+
+            <DialogActions sx={{ p: 2 }}>
+                <Button onClick={onClose} disabled={loading}>
+                    Cancel
+                </Button>
+                <Button
+                    onClick={handleSubmit}
+                    variant='contained'
+                    disabled={loading || Object.keys(errors).length > 0}
+                    startIcon={loading ? <CircularProgress size={20} /> : undefined}
+                >
+                    {isEditMode ? 'Update' : 'Create'}
+                </Button>
+            </DialogActions>
+        </Dialog>
+    );
+};