openvsx-webui-test 0.19.0-dev.2 → 0.20.0-dev.1

package/src/pages/admin-dashboard/customers/customer-member-list.tsx

@@ -0,0 +1,174 @@
+/******************************************************************************
+ * Copyright (c) 2026 Contributors to the Eclipse Foundation.
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License 2.0 which is available at
+ * https://www.eclipse.org/legal/epl-2.0.
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *****************************************************************************/
+
+import { FunctionComponent, useEffect, useState, useContext, useRef } from 'react';
+import {
+    Box,
+    Typography,
+    Button,
+    Divider,
+    List,
+    ListItem,
+    ListItemAvatar,
+    Avatar,
+    ListItemText, IconButton, type PaperProps, Paper
+} from '@mui/material';
+import { Link as RouterLink } from 'react-router-dom';
+import { AdminDashboardRoutes } from '../admin-routes';
+import { MainContext } from '../../../context';
+import { CustomerMembership, Customer, UserData, isError } from '../../../extension-registry-types';
+import { AddUserDialog } from '../../user/add-user-dialog';
+import DeleteIcon from '@mui/icons-material/Delete';
+import PersonAddIcon from '@mui/icons-material/PersonAdd';
+import { createRoute } from '../../../utils';
+
+const sectionPaperProps: PaperProps = { elevation: 1, sx: { p: 3, mb: 3 } };
+
+export const CustomerMemberList: FunctionComponent<CustomerMemberListProps> = props => {
+    const { service, handleError } = useContext(MainContext);
+    const [members, setMembers] = useState<CustomerMembership[]>([]);
+    const [addDialogIsOpen, setAddDialogIsOpen] = useState(false);
+    const abortController = useRef<AbortController>(new AbortController());
+
+    const users = members.map(member => member.user);
+
+    useEffect(() => {
+        fetchMembers();
+    }, [props.customer]);
+
+    useEffect(() => {
+        return () => {
+            abortController.current.abort();
+        };
+    }, []);
+
+    const handleCloseAddDialog = async () => {
+        setAddDialogIsOpen(false);
+        fetchMembers();
+    };
+
+    const handleOpenAddDialog = async () => {
+        setAddDialogIsOpen(true);
+    };
+
+    const handleAddUser = async (user: UserData) => {
+        try {
+            const result = await service.admin.addCustomerMember(abortController.current, props.customer.name, user);
+            if (isError(result)) {
+                throw result;
+            }
+            await fetchMembers();
+        } catch (err) {
+            handleError(err);
+        }
+    };
+
+    const handleRemoveUser = async (user: UserData) => {
+        try {
+            const result = await service.admin.removeCustomerMember(abortController.current, props.customer.name, user);
+            if (isError(result)) {
+                throw result;
+            }
+            await fetchMembers();
+        } catch (err) {
+            handleError(err);
+        }
+    };
+
+    const fetchMembers = async () => {
+        try {
+            const membershipList = await service.admin.getCustomerMembers(abortController.current, props.customer.name);
+            const members = membershipList.customerMemberships;
+            setMembers(members);
+        } catch (err) {
+            handleError(err);
+        }
+    };
+
+    return <Paper {...sectionPaperProps}>
+        <Box
+            sx={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                mb: 1,
+                flexDirection: { xs: 'column', sm: 'column', md: 'row', lg: 'row', xl: 'row' }
+            }}
+        >
+            <Typography variant='h6'>Members</Typography>
+            <Button size='small' startIcon={<PersonAddIcon />} onClick={handleOpenAddDialog}>
+                Add Member
+            </Button>
+        </Box>
+        <Divider sx={{ mb: 1 }} />
+        {members.length === 0 ? (
+            <Typography variant='body2' color='text.secondary' sx={{ py: 1 }}>
+                No members assigned to this customer.
+            </Typography>
+        ) : (
+            <List dense disablePadding>
+                {users.map(user => (
+                    <ListItem
+                        key={`${user.loginName}-${user.provider}`}
+                        secondaryAction={
+                            <IconButton edge='end' size='small' color='error' onClick={() => handleRemoveUser(user)} title='Remove member'>
+                                <DeleteIcon fontSize='small' />
+                            </IconButton>
+                        }
+                    >
+                        <ListItemAvatar>
+                            <Avatar src={user.avatarUrl} sx={{ width: 32, height: 32 }} />
+                        </ListItemAvatar>
+                        <ListItemText
+                            primary={
+                                <RouterLink style={{ color: 'inherit' }} to={createRoute([AdminDashboardRoutes.PUBLISHER_ADMIN, user.loginName])}>
+                                    {user.loginName}
+                                </RouterLink>
+                            }
+                            secondary={user.fullName}
+                        />
+                    </ListItem>
+                ))}
+            </List>
+        )}
+
+
+
+
+        {/*{members.length ?*/}
+        {/*    <Paper elevation={3}>*/}
+        {/*        {members.map(member =>*/}
+        {/*            <UserNamespaceMember*/}
+        {/*                key={'nspcmbr-' + member.user.loginName + member.user.provider}*/}
+        {/*                namespace={props.namespace}*/}
+        {/*                member={member}*/}
+        {/*                fixSelf={props.fixSelf}*/}
+        {/*                onChangeRole={role => changeRole(member, role)}*/}
+        {/*                onRemoveUser={() => changeRole(member, 'remove')} />)}*/}
+        {/*    </Paper> :*/}
+        {/*    <Typography variant='body1'>There are no members assigned yet.</Typography>}*/}
+
+        <AddUserDialog
+            open={addDialogIsOpen}
+            title='Add Member'
+            description='Search for a user by login name to add them to this customer.'
+            existingUsers={members.map(member => member.user)}
+            onClose={handleCloseAddDialog}
+            onAddUser={handleAddUser}
+        />
+    </Paper>;
+};
+
+export interface CustomerMemberListProps {
+    customer: Customer;
+}

package/src/pages/admin-dashboard/customers/customer-token-list.tsx

@@ -0,0 +1,135 @@
+/******************************************************************************
+ * Copyright (c) 2026 Contributors to the Eclipse Foundation.
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License 2.0 which is available at
+ * https://www.eclipse.org/legal/epl-2.0.
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *****************************************************************************/
+
+import { FunctionComponent, useEffect, useState, useContext, useRef } from 'react';
+import {
+    Box,
+    Typography,
+    Divider,
+    List,
+    ListItem,
+    ListItemText,
+    IconButton,
+    Paper,
+    Button,
+    type PaperProps
+} from '@mui/material';
+import DeleteIcon from '@mui/icons-material/Delete';
+import AddIcon from '@mui/icons-material/Add';
+import { MainContext } from '../../../context';
+import { Customer, isError, RateLimitToken } from '../../../extension-registry-types';
+import { GenerateTokenDialog } from '../../../components/generate-token-dialog';
+import { Timestamp } from "../../../components/timestamp";
+
+const sectionPaperProps: PaperProps = { elevation: 1, sx: { p: 3, mb: 3 } };
+
+export const CustomerTokenList: FunctionComponent<CustomerTokenListProps> = props => {
+    const { service, handleError } = useContext(MainContext);
+    const [tokens, setTokens] = useState<RateLimitToken[]>([]);
+    const [dialogOpen, setDialogOpen] = useState(false);
+    const abortController = useRef<AbortController>(new AbortController());
+
+    useEffect(() => {
+        fetchTokens();
+    }, [props.customer]);
+
+    useEffect(() => {
+        return () => {
+            abortController.current.abort();
+        };
+    }, []);
+
+    const fetchTokens = async () => {
+        try {
+            const result = await service.admin.getCustomerRateLimitTokens(abortController.current, props.customer.name);
+            setTokens([...result]);
+        } catch (err) {
+            handleError(err);
+        }
+    };
+
+    const handleGenerate = async (description: string): Promise<string> => {
+        const token = await service.admin.createCustomerRateLimitToken(abortController.current, props.customer.name, description);
+        await fetchTokens();
+        return token.value ?? '';
+    };
+
+    const handleDelete = async (tokenId: number) => {
+        try {
+            const result = await service.admin.deleteCustomerRateLimitToken(abortController.current, props.customer.name, tokenId);
+            if (isError(result)) {
+                throw result;
+            }
+            await fetchTokens();
+        } catch (err) {
+            handleError(err);
+        }
+    };
+
+    return <Paper {...sectionPaperProps}>
+        <Box
+            sx={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                mb: 1,
+                flexDirection: { xs: 'column', sm: 'column', md: 'row', lg: 'row', xl: 'row' }
+            }}
+        >
+            <Typography variant='h6'>Tokens</Typography>
+            <Button size='small' startIcon={<AddIcon />} onClick={() => setDialogOpen(true)}>
+                Generate Token
+            </Button>
+        </Box>
+        <Divider sx={{ mb: 1 }} />
+        {tokens.length === 0 ? (
+            <Typography variant='body2' color='text.secondary' sx={{ py: 1 }}>
+                No rate limiting tokens for this customer.
+            </Typography>
+        ) : (
+            <List dense disablePadding>
+                {tokens.map(token => (
+                    <ListItem
+                        key={token.id}
+                        secondaryAction={
+                            <IconButton edge='end' size='small' color='error' onClick={() => handleDelete(token.id)} title='Delete token'>
+                                <DeleteIcon fontSize='small' />
+                            </IconButton>
+                        }
+                    >
+                        <ListItemText
+                            primary={
+                                <Typography sx={{ fontWeight: 'bold', overflow: 'hidden', textOverflow: 'ellipsis' }}>{token.description || 'N/A'}</Typography>
+                            }
+                            secondary={
+                                <Typography variant='body2'>Created: <Timestamp value={token.createdTimestamp}/></Typography>
+                            }
+                        />
+                    </ListItem>
+                ))}
+            </List>
+        )}
+
+        <GenerateTokenDialog
+            open={dialogOpen}
+            onClose={() => setDialogOpen(false)}
+            onGenerate={handleGenerate}
+            onError={handleError}
+            title='Generate token'
+        />
+    </Paper>;
+};
+
+export interface CustomerTokenListProps {
+    customer: Customer;
+}

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

@@ -11,7 +11,7 @@
  * SPDX-License-Identifier: EPL-2.0
  *****************************************************************************/
 
-import { FC, useContext, useState, useEffect, useRef, useCallback, useMemo } from "react";
+import { FC, useContext, useState, useEffect, useRef, useCallback, useMemo } from 'react';
 import {
     Box,
     Button,
@@ -27,14 +27,14 @@ 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 VisibilityIcon from "@mui/icons-material/Visibility";
 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 { createRoute, handleError } from "../../../utils";
 import { createMultiSelectFilterOperators, createArrayContainsFilterOperators } from "../components";
-import { AdminDashboardRoutes } from "../admin-dashboard";
+import { AdminDashboardRoutes } from "../admin-routes";
 import { Link } from "react-router-dom";
 
 export const Customers: FC = () => {
@@ -181,10 +181,10 @@ export const Customers: FC = () => {
           <IconButton
             size='small'
             component={Link}
-            to={`${AdminDashboardRoutes.USAGE_STATS}/${params.row.name}`}
-            title='View Usage Stats'
+            to={createRoute([AdminDashboardRoutes.CUSTOMERS, params.row.name])}
+            title='View Details'
           >
-            <BarChartIcon />
+            <VisibilityIcon />
           </IconButton>
           <IconButton
             size='small'
@@ -207,7 +207,7 @@ export const Customers: FC = () => {
   ];
 
   return (
-    <Box sx={{ p: 3, height: '100%', display: 'flex', flexDirection: 'column' }}>
+    <Box sx={{ p: 2, height: '100%', display: 'flex', flexDirection: 'column' }}>
       <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 3 }}>
         <Typography variant='h4' component='h1'>
           Customer Management

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

@@ -136,16 +136,7 @@ export const Logs: FC = () => {
     ];
 
     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={{ p: 3, height: '100%', display: 'flex', flexDirection: 'column' }}>
             <Box sx={{
                 display: "flex",
                 justifyContent: "space-between",

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

@@ -8,16 +8,22 @@
  * SPDX-License-Identifier: EPL-2.0
  ********************************************************************************/
 
-import { FunctionComponent, useState, useContext, createContext, useEffect, useRef, ReactNode } from 'react';
+import { FunctionComponent, useState, useContext, createContext, useEffect, useRef, useCallback, ReactNode } from 'react';
 import { Typography, Box } from '@mui/material';
+import { useParams, useNavigate } from 'react-router-dom';
 import { PublisherInfo } from '../../extension-registry-types';
 import { MainContext } from '../../context';
 import { StyledInput } from './namespace-input';
 import { SearchListContainer } from './search-list-container';
 import { PublisherDetails } from './publisher-details';
+import { AdminDashboardRoutes } from './admin-routes';
 
+// eslint-disable-next-line react-refresh/only-export-components
 export const UpdateContext = createContext({ handleUpdate: () => { } });
+
 export const PublisherAdmin: FunctionComponent = () => {
+    const { publisher: publisherParam } = useParams<{ publisher: string }>();
+    const navigate = useNavigate();
     const { pageSettings, service, user, handleError } = useContext(MainContext);
 
     const abortController = useRef<AbortController>(new AbortController());
@@ -28,24 +34,20 @@ export const PublisherAdmin: FunctionComponent = () => {
     }, []);
 
     const [loading, setLoading] = useState(false);
-    const [inputValue, setInputValue] = useState('');
-    const onChangeInput = (name: string) => {
-        setInputValue(name);
-    };
 
     const [publisher, setPublisher] = useState<PublisherInfo | undefined>();
     const [notFound, setNotFound] = useState('');
-    const fetchPublisher = async () => {
-        const publisherName = inputValue;
+
+    const fetchPublisher = useCallback(async (publisherName: string) => {
         try {
             setLoading(true);
             if (publisherName === '') {
                 setNotFound('');
                 setPublisher(undefined);
             } else {
-                const publisher = await service.admin.getPublisherInfo(abortController.current, 'github', publisherName);
+                const pub = await service.admin.getPublisherInfo(abortController.current, 'github', publisherName);
                 setNotFound('');
-                setPublisher(publisher);
+                setPublisher(pub);
             }
             setLoading(false);
         } catch (err) {
@@ -57,10 +59,26 @@ export const PublisherAdmin: FunctionComponent = () => {
             }
             setLoading(false);
         }
+    }, [service, handleError]);
+
+    useEffect(() => {
+        if (publisherParam) {
+            fetchPublisher(publisherParam);
+        }
+    }, [publisherParam, fetchPublisher]);
+
+    const handleSubmit = (inputValue: string) => {
+        if (inputValue) {
+            navigate(`${AdminDashboardRoutes.PUBLISHER_ADMIN}/${inputValue}`);
+        } else {
+            navigate(AdminDashboardRoutes.PUBLISHER_ADMIN);
+        }
     };
 
     const handleUpdate = () => {
-        fetchPublisher();
+        if (publisherParam) {
+            fetchPublisher(publisherParam);
+        }
     };
 
     let listContainer: ReactNode = '';
@@ -78,7 +96,7 @@ export const PublisherAdmin: FunctionComponent = () => {
 
     return <SearchListContainer
         searchContainer={
-            [<StyledInput placeholder='Publisher Name' key='pi' onSubmit={fetchPublisher} onChange={onChangeInput} />]
+            [<StyledInput placeholder='Publisher Name' key='pi' value={publisherParam || ''} onSubmit={handleSubmit} onChange={() => {}} />]
         }
         listContainer={listContainer}
         loading={loading}

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

@@ -11,17 +11,17 @@
  * SPDX-License-Identifier: EPL-2.0
  *****************************************************************************/
 
-import { FC, useContext, useState, useEffect, useRef, useMemo, useCallback } from "react";
+import { FC, useContext, useState, useEffect, useRef, useMemo } from "react";
 import { Box, Alert } from "@mui/material";
 import { useParams, useNavigate } from "react-router-dom";
 import { MainContext } from "../../../context";
-import type { UsageStats, Customer } from "../../../extension-registry-types";
+import type { Customer } from "../../../extension-registry-types";
 import { handleError } from "../../../utils";
-import { AdminDashboardRoutes } from "../admin-dashboard";
+import { AdminDashboardRoutes } from "../admin-routes";
 import { SearchListContainer } from "../search-list-container";
 import { CustomerSearch } from "./usage-stats-search";
-import { UsageStatsChart } from "./usage-stats-chart";
-import { getDefaultStartDate } from "./usage-stats-utils";
+import { UsageStatsChart } from "../../../components/rate-limiting/usage-stats/usage-stats-chart";
+import { useAdminUsageStats } from "./use-usage-stats";
 
 export const UsageStatsView: FC = () => {
     const { customer } = useParams<{ customer: string }>();
@@ -31,10 +31,9 @@ export const UsageStatsView: FC = () => {
 
     const [customers, setCustomers] = useState<Customer[]>([]);
     const [customersLoading, setCustomersLoading] = useState(true);
-    const [usageStats, setUsageStats] = useState<readonly UsageStats[]>([]);
-    const [loading, setLoading] = useState(false);
-    const [error, setError] = useState<string | null>(null);
-    const [startDate, setStartDate] = useState<Date>(getDefaultStartDate);
+    const [customersError, setCustomersError] = useState<string | null>(null);
+
+    const { usageStats, loading, error: statsError, startDate, setStartDate } = useAdminUsageStats(customer);
 
     // Load customers for autocomplete
     useEffect(() => {
@@ -44,7 +43,7 @@ export const UsageStatsView: FC = () => {
                 const data = await service.admin.getCustomers(abortController.current);
                 setCustomers(data.customers);
             } catch (err) {
-                setError(handleError(err as Error));
+                setCustomersError(handleError(err as Error));
             } finally {
                 setCustomersLoading(false);
             }
@@ -66,35 +65,7 @@ export const UsageStatsView: FC = () => {
         }
     };
 
-    const loadUsageStats = useCallback(async () => {
-        if (!customer) {
-            setUsageStats([]);
-            setLoading(false);
-            return;
-        }
-
-        try {
-            setLoading(true);
-            setError(null);
-            const data = await service.admin.getUsageStats(
-                abortController.current,
-                customer,
-                startDate
-            );
-            setUsageStats(data.stats);
-        } catch (err) {
-            setError(handleError(err as Error));
-        } finally {
-            setLoading(false);
-        }
-    }, [service, customer, startDate]);
-
-    useEffect(() => {
-        if (customer) {
-            loadUsageStats();
-        }
-    }, [loadUsageStats, customer]);
-
+    const error = customersError || statsError;
     if (error) {
         return <Alert severity='error'>{error}</Alert>;
     }

package/src/pages/admin-dashboard/usage-stats/use-usage-stats.ts

@@ -0,0 +1,70 @@
+/******************************************************************************
+ * 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 { useContext, useState, useEffect, useRef, useCallback } from "react";
+import { MainContext } from "../../../context";
+import type { UsageStats } from "../../../extension-registry-types";
+import { handleError } from "../../../utils";
+import { getDefaultStartDate } from "../../../components/rate-limiting/usage-stats/usage-stats-utils";
+import { DateTime } from "luxon";
+
+export const useAdminUsageStats = (customerName: string | undefined) => {
+    const abortController = useRef(new AbortController());
+    const { service } = useContext(MainContext);
+
+    const [usageStats, setUsageStats] = useState<readonly UsageStats[]>([]);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+    const [internalStartDate, setInternalStartDate] = useState<DateTime>(getDefaultStartDate);
+
+    const startDateRef = useRef(internalStartDate);
+    startDateRef.current = internalStartDate;
+
+    const fetchUsageStats = useCallback(async (date: DateTime) => {
+        if (!customerName) {
+            setUsageStats([]);
+            setLoading(false);
+            return;
+        }
+
+        try {
+            setLoading(true);
+            setError(null);
+            const data = await service.admin.getUsageStats(
+                abortController.current,
+                customerName,
+                date.toJSDate()
+            );
+            setUsageStats(data.stats);
+        } catch (err) {
+            setError(handleError(err as Error));
+        } finally {
+            setLoading(false);
+        }
+    }, [service, customerName]);
+
+    const setStartDate = useCallback((date: DateTime) => {
+        setInternalStartDate(date);
+        fetchUsageStats(date);
+    }, [fetchUsageStats]);
+
+    useEffect(() => {
+        fetchUsageStats(startDateRef.current);
+        return () => {
+            abortController.current.abort();
+            abortController.current = new AbortController();
+        };
+    }, [fetchUsageStats]);
+
+    return { usageStats, loading, error, startDate: internalStartDate, setStartDate };
+};

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

@@ -12,7 +12,7 @@ import { FunctionComponent } from 'react';
 import { Typography, Grid, Paper } from '@mui/material';
 import { styled, Theme } from '@mui/material/styles';
 import { Link } from 'react-router-dom';
-import { AdminDashboardRoutes } from './admin-dashboard';
+import { AdminDashboardRoutes } from './admin-routes';
 
 export const Welcome: FunctionComponent = props => {
     return <Grid container direction='column' spacing={2} sx={{ height: '100%' }}>

package/src/pages/extension-detail/extension-detail-overview.tsx

@@ -21,8 +21,8 @@ import { DelayedLoadIndicator } from '../../components/delayed-load-indicator';
 import { SanitizedMarkdown } from '../../components/sanitized-markdown';
 import { Timestamp } from '../../components/timestamp';
 import { Extension, ExtensionReference, VERSION_ALIASES } from '../../extension-registry-types';
-import { ExtensionListRoutes } from '../extension-list/extension-list-container';
-import { ExtensionDetailRoutes } from './extension-detail';
+import { ExtensionListRoutes } from '../extension-list/extension-list-routes';
+import { ExtensionDetailRoutes } from './extension-detail-routes';
 import { ExtensionDetailDownloadsMenu } from './extension-detail-downloads-menu';
 
 export const ExtensionDetailOverview: FunctionComponent<ExtensionDetailOverviewProps> = props => {