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

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

@@ -0,0 +1,372 @@
+/******************************************************************************
+ * 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, useEffect, useState } from 'react';
+import type { SelectChangeEvent } from '@mui/material';
+import {
+    Alert,
+    Box,
+    Button,
+    CircularProgress,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    FormControl,
+    FormHelperText,
+    InputLabel,
+    MenuItem,
+    Select,
+    TextField
+} from '@mui/material';
+import { RefillStrategy, type Tier, TierType } from "../../../extension-registry-types";
+import { handleError } from "../../../utils";
+
+type DurationUnit = 'seconds' | 'minutes' | 'hours';
+
+const DURATION_MULTIPLIERS: Record<DurationUnit, number> = {
+    seconds: 1,
+    minutes: 60,
+    hours: 3600
+};
+
+function formatDuration(duration: number): [number, DurationUnit] {
+    const hours = Math.floor(duration / 3600);
+    if (hours > 0) {
+        return [hours, "hours"];
+    }
+
+    const minutes = Math.floor(duration / 60);
+    if (minutes > 0) {
+        return [minutes, "minutes"];
+    }
+
+    return [duration, "seconds"];
+}
+
+interface TierFormDialogProps {
+    open: boolean;
+    tier?: Tier;
+    onClose: () => void;
+    onSubmit: (formData: Tier) => Promise<void>;
+}
+
+export const TierFormDialog: FC<TierFormDialogProps> = ({ open, tier, onClose, onSubmit }) => {
+    const [formData, setFormData] = useState<Tier>({
+        name: '',
+        description: '',
+        capacity: 100,
+        duration: 3600,
+        refillStrategy: RefillStrategy.INTERVAL
+    } as Tier);
+    const [durationValue, setDurationValue] = useState(1);
+    const [durationUnit, setDurationUnit] = useState<DurationUnit>('hours');
+    const [loading, setLoading] = useState(false);
+    const [errors, setErrors] = useState<Record<string, string>>({});
+    const [touched, setTouched] = useState<Record<string, boolean>>({});
+
+    const getDurationInSeconds = (): number => {
+        return durationValue * DURATION_MULTIPLIERS[durationUnit];
+    };
+
+    useEffect(() => {
+        if (tier) {
+            setFormData(_ => ({
+                name: tier.name,
+                description: tier.description || '',
+                tierType: tier.tierType,
+                capacity: tier.capacity,
+                duration: tier.duration,
+                refillStrategy: tier.refillStrategy
+            } as Tier));
+            // Convert duration seconds to value/unit for display
+            const [value, unit] = formatDuration(tier.duration);
+            setDurationValue(value);
+            setDurationUnit(unit);
+        } else {
+            setFormData(prev => ({
+                ...prev,
+                name: '',
+                description: '',
+                tierType: TierType.NON_FREE,
+                capacity: 100,
+                duration: 3600,
+                refillStrategy: RefillStrategy.INTERVAL
+            }));
+            setDurationValue(1);
+            setDurationUnit('hours');
+        }
+        setErrors({});
+        setTouched({});
+    }, [open, tier]);
+
+    const clearFieldError = (fieldName: string) => {
+        if (errors[fieldName]) {
+            setErrors(prev => {
+                const newErrors = { ...prev };
+                delete newErrors[fieldName];
+                return newErrors;
+            });
+        }
+    };
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement | { name?: string; value: unknown }> | SelectChangeEvent) => {
+        const { name, value } = e.target as any;
+        clearFieldError(name);
+
+        setFormData((prev: Tier) => ({
+            ...prev,
+            [name]: name === 'capacity' || name === 'duration' ? Number.parseInt(value as string, 10) : value
+        } as Tier));
+    };
+
+    const handleBlur = (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+        const { name } = e.target;
+        setTouched(prev => ({ ...prev, [name]: true }));
+        validateField(name);
+    };
+
+    const fieldValidators: Record<string, () => string | undefined> = {
+        name: () => {
+            if (formData.name === undefined) {
+                return "Tier name is required";
+            } else if (formData.name.trim() !== formData.name) {
+                return "Tier name must not contain trailing whitespace";
+            } else {
+                return undefined;
+            }
+        },
+        tierType: () => formData.tierType ? undefined : 'Tier type is required',
+        capacity: () => formData.capacity <= 0 ? 'Capacity must be greater than 0' : undefined,
+        duration: () => durationValue <= 0 ? 'Duration must be greater than 0' : undefined,
+        refillStrategy: () => formData.refillStrategy ? undefined : 'Refill strategy is required',
+    };
+
+    const validateField = (fieldName: string): string | undefined => {
+        const validator = fieldValidators[fieldName];
+        const error = validator?.();
+
+        if (error) {
+            setErrors(prev => ({ ...prev, [fieldName]: error }));
+        }
+        return error;
+    };
+
+    const validateForm = (): boolean => {
+        // Mark all fields as touched on submit
+        setTouched({
+            name: true,
+            tierType: true,
+            capacity: true,
+            duration: true,
+            refillStrategy: 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 {
+            const durationInSeconds = getDurationInSeconds();
+            await onSubmit({
+                ...formData,
+                duration: durationInSeconds
+            });
+            onClose();
+        } catch (err: any) {
+            setErrors({ submit: handleError(err) });
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const isEditMode = !!tier;
+    const title = isEditMode ? 'Edit Tier' : 'Create New Tier';
+
+    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='Tier Name'
+                    name='name'
+                    value={formData.name}
+                    onChange={handleChange}
+                    onBlur={handleBlur}
+                    fullWidth
+                    placeholder='e.g., Professional, Enterprise'
+                    required={true}
+                    disabled={loading}
+                    error={touched.name && !!errors.name}
+                    helperText={touched.name && errors.name}
+                />
+
+                <TextField
+                    label='Description'
+                    name='description'
+                    value={formData.description}
+                    onChange={handleChange}
+                    fullWidth
+                    multiline
+                    rows={3}
+                    placeholder='Optional description for this tier'
+                    disabled={loading}
+                />
+
+                <FormControl fullWidth disabled={loading} required={true} error={touched.tierType && !!errors.tierType}>
+                  <InputLabel>Tier Type</InputLabel>
+                  <Select
+                      name='tierType'
+                      value={formData.tierType || ''}
+                      onChange={(e: SelectChangeEvent) => {
+                          const { name, value } = e.target;
+                          clearFieldError(name);
+                          setFormData((prev: Tier) => ({
+                              ...prev,
+                              [name]: value
+                          } as Tier));
+                      }}
+                      onBlur={() => {
+                          setTouched(prev => ({ ...prev, tierType: true }));
+                          validateField('tierType');
+                      }}
+                      label='Tier Type'
+                  >
+                      {Object.keys(TierType).map(tierType => (
+                          <MenuItem key={tierType} value={TierType[tierType as keyof typeof TierType]}>
+                              {tierType}
+                          </MenuItem>
+                      ))}
+                  </Select>
+                  {touched.tierType && errors.tierType && <FormHelperText>{errors.tierType}</FormHelperText>}
+                </FormControl>
+
+                <TextField
+                    label='Capacity'
+                    name='capacity'
+                    type='number'
+                    value={formData.capacity}
+                    onChange={handleChange}
+                    onBlur={handleBlur}
+                    fullWidth
+                    inputProps={{ min: '1' }}
+                    disabled={loading}
+                    required={true}
+                    error={touched.capacity && !!errors.capacity}
+                    helperText={(touched.capacity && errors.capacity) || 'Maximum number of requests allowed per interval'}
+                />
+
+                <Box sx={{ display: 'flex', gap: 2 }}>
+                    <TextField
+                        label='Duration'
+                        name='duration'
+                        type='number'
+                        value={durationValue}
+                        onChange={(e) => {
+                            clearFieldError('duration');
+                            setDurationValue(Math.max(1, Number.parseInt(e.target.value, 10) || 0));
+                        }}
+                        onBlur={(e) => {
+                            setTouched(prev => ({ ...prev, duration: true }));
+                            validateField('duration');
+                        }}
+                        inputProps={{ min: '1' }}
+                        disabled={loading}
+                        required={true}
+                        error={touched.duration && !!errors.duration}
+                        helperText={touched.duration && errors.duration}
+                        sx={{ flex: 1 }}
+                    />
+                    <FormControl disabled={loading} required={true} sx={{ minWidth: 150 }}>
+                        <InputLabel>Unit</InputLabel>
+                        <Select
+                            value={durationUnit}
+                            onChange={(e: SelectChangeEvent) => setDurationUnit(e.target.value as DurationUnit)}
+                            label='Unit'
+                        >
+                            <MenuItem value='seconds'>Seconds</MenuItem>
+                            <MenuItem value='minutes'>Minutes</MenuItem>
+                            <MenuItem value='hours'>Hours</MenuItem>
+                        </Select>
+                    </FormControl>
+                </Box>
+                <Box sx={{ fontSize: '0.875rem', color: 'text.secondary' }}>
+                    = {getDurationInSeconds().toLocaleString()} seconds
+                </Box>
+
+                <FormControl fullWidth disabled={loading} required={true} error={touched.refillStrategy && !!errors.refillStrategy}>
+                    <InputLabel>Refill Strategy</InputLabel>
+                    <Select
+                        name='refillStrategy'
+                        value={formData.refillStrategy || ''}
+                        onChange={(e: SelectChangeEvent) => {
+                            const { name, value } = e.target;
+                            clearFieldError(name);
+                            setFormData((prev: Tier) => ({
+                                ...prev,
+                                [name]: value
+                            } as Tier));
+                        }}
+                        onBlur={() => {
+                            setTouched(prev => ({ ...prev, refillStrategy: true }));
+                            validateField('refillStrategy');
+                        }}
+                        label='Refill Strategy'
+                    >
+                        {Object.keys(RefillStrategy).map(strategy => (
+                            <MenuItem key={strategy} value={RefillStrategy[strategy as keyof typeof RefillStrategy]}>
+                                {strategy}
+                            </MenuItem>
+                        ))}
+                    </Select>
+                    {touched.refillStrategy && errors.refillStrategy && <FormHelperText>{errors.refillStrategy}</FormHelperText>}
+                </FormControl>
+
+
+              </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>
+    );
+};

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

@@ -0,0 +1,254 @@
+/******************************************************************************
+ * 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, useMemo } from "react";
+import {
+  Box,
+  Button,
+  Paper,
+  Typography,
+  CircularProgress,
+  Alert,
+  IconButton
+} 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 { MainContext } from "../../../context";
+import type { Tier } from "../../../extension-registry-types";
+import { TierFormDialog } from "./tier-form-dialog";
+import { DeleteTierDialog } from "./delete-tier-dialog";
+import { handleError } from "../../../utils";
+import { createMultiSelectFilterOperators } from "../components";
+
+export const Tiers: FC = () => {
+  const abortController = useRef<AbortController>(new AbortController());
+  const { service } = React.useContext(MainContext);
+  const [tiers, setTiers] = useState<readonly Tier[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [formDialogOpen, setFormDialogOpen] = useState(false);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [selectedTier, setSelectedTier] = useState<Tier | undefined>();
+
+  // load all tiers
+  const loadTiers = async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const data = await service.admin.getTiers(abortController.current);
+      setTiers(data.tiers);
+    } catch (err: any) {
+      setError(handleError(err));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadTiers();
+    return () => abortController.current.abort();
+  }, []);
+
+  const handleCreateClick = () => {
+    setSelectedTier(undefined);
+    setFormDialogOpen(true);
+  };
+
+  const handleEditClick = (tier: Tier) => {
+    setSelectedTier(tier);
+    setFormDialogOpen(true);
+  };
+
+  const handleDeleteClick = (tier: Tier) => {
+    setSelectedTier(tier);
+    setDeleteDialogOpen(true);
+  };
+
+  const handleFormSubmit = async (formData: Tier) => {
+    if (selectedTier) {
+      // update existing tier
+      await service.admin.updateTier(abortController.current, selectedTier.name, formData);
+    } else {
+      // create new tier
+      await service.admin.createTier(abortController.current, formData);
+    }
+    await loadTiers();
+  };
+
+  const handleDeleteConfirm = async () => {
+    if (selectedTier) {
+      await service.admin.deleteTier(abortController.current, selectedTier.name);
+      await loadTiers();
+    }
+  };
+
+  const handleFormDialogClose = () => {
+    setFormDialogOpen(false);
+    setSelectedTier(undefined);
+  };
+
+  const handleDeleteDialogClose = () => {
+    setDeleteDialogOpen(false);
+    setSelectedTier(undefined);
+  };
+
+  // Extract unique values for filter dropdowns
+  const tierTypeOptions = useMemo(() =>
+          [...new Set(tiers.map(t => t.tierType).filter(Boolean))],
+      [tiers]
+  );
+
+  const refillStrategyOptions = useMemo(() =>
+    [...new Set(tiers.map(t => t.refillStrategy).filter(Boolean))],
+    [tiers]
+  );
+
+  const columns: GridColDef[] = [
+    {
+      field: 'name',
+      headerName: 'Name',
+      flex: 1,
+      minWidth: 150
+    },
+    {
+      field: 'description',
+      headerName: 'Description',
+      flex: 2,
+      minWidth: 200,
+      valueGetter: (value: string) => value || '-'
+    },
+    {
+      field: 'tierType',
+      headerName: 'Tier Type',
+      width: 150,
+      filterOperators: createMultiSelectFilterOperators(tierTypeOptions)
+    },
+    {
+      field: 'capacity',
+      headerName: 'Capacity',
+      type: 'number',
+      width: 120,
+      valueFormatter: (value: number) => value.toLocaleString()
+    },
+    {
+      field: 'duration',
+      headerName: 'Duration (s)',
+      type: 'number',
+      width: 130,
+      valueFormatter: (value: number) => value.toLocaleString()
+    },
+    {
+      field: 'refillStrategy',
+      headerName: 'Refill Strategy',
+      width: 150,
+      filterOperators: createMultiSelectFilterOperators(refillStrategyOptions)
+    },
+    {
+      field: 'actions',
+      headerName: 'Actions',
+      width: 120,
+      sortable: false,
+      filterable: false,
+      renderCell: (params: GridRenderCellParams<Tier>) => (
+        <>
+          <IconButton
+            size='small'
+            onClick={() => handleEditClick(params.row)}
+            title='Edit tier'
+            color='primary'
+          >
+            <EditIcon />
+          </IconButton>
+          <IconButton
+            size='small'
+            onClick={() => handleDeleteClick(params.row)}
+            title='Delete tier'
+            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'>
+          Tier Management
+        </Typography>
+        <Button
+          variant='contained'
+          startIcon={<AddIcon />}
+          onClick={handleCreateClick}
+          disabled={loading}
+        >
+          Create Tier
+        </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 && tiers.length === 0 &&
+        <Paper elevation={0} sx={{ p: 3, textAlign: "center" }}>
+          <Typography color='textSecondary' gutterBottom>
+            No tiers found. Create one to get started.
+          </Typography>
+        </Paper>
+      }
+
+      { !loading && tiers.length > 0 &&
+        <Paper elevation={0} sx={{ flex: 1, minHeight: 400, width: '100%', display: 'flex', flexDirection: 'column' }}>
+          <DataGrid
+            rows={tiers as Tier[]}
+            columns={columns}
+            getRowId={(row) => row.name}
+            pageSizeOptions={[20, 35, 50]}
+            initialState={{
+              pagination: { paginationModel: { pageSize: 20 } },
+            }}
+            disableRowSelectionOnClick
+            sx={{ flex: 1 }}
+          />
+        </Paper>
+      }
+
+      <TierFormDialog
+        open={formDialogOpen}
+        tier={selectedTier}
+        onClose={handleFormDialogClose}
+        onSubmit={handleFormSubmit}
+      />
+
+      <DeleteTierDialog
+        open={deleteDialogOpen}
+        tier={selectedTier}
+        onClose={handleDeleteDialogClose}
+        onConfirm={handleDeleteConfirm}
+      />
+    </Box>
+  );
+};