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

package/src/components/rate-limiting/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 "./usage-stats-utils";
+import { DateTime } from "luxon";
+
+export const useUsageStats = (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.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/components/scan-admin/scan-card/scan-card-header.tsx

@@ -32,8 +32,8 @@ import {
     getStatusColorSx,
 } from './utils';
 import { createRoute } from '../../../utils';
-import { AdminDashboardRoutes } from '../../../pages/admin-dashboard/admin-dashboard';
-import { ExtensionDetailRoutes } from '../../../pages/extension-detail/extension-detail';
+import { AdminDashboardRoutes } from '../../../pages/admin-dashboard/admin-routes';
+import { ExtensionDetailRoutes } from '../../../pages/extension-detail/extension-detail-routes';
 
 interface ScanCardHeaderProps {
     scan: ScanResult;

package/src/components/sidepanel/drawer-header.tsx

@@ -0,0 +1,23 @@
+/******************************************************************************
+ * 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 { styled } from '@mui/material/styles';
+
+export const DrawerHeader = styled('div')(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    padding: theme.spacing(0, 1),
+    // necessary for content to be below app bar
+    ...theme.mixins.toolbar,
+    justifyContent: 'flex-end',
+}));

package/src/components/sidepanel/navigation-item.tsx

@@ -11,6 +11,7 @@
 import { FunctionComponent, PropsWithChildren, ReactNode, useState } from 'react';
 import { ListItemButton, ListItemText, Collapse, List, ListItemIcon } from '@mui/material';
 import ExpandLess from '@mui/icons-material/ExpandLess';
+import ExpandMore from '@mui/icons-material/ExpandMore';
 import { useNavigate } from 'react-router';
 
 export const NavigationItem: FunctionComponent<PropsWithChildren<NavigationProps>> = props => {
@@ -21,7 +22,7 @@ export const NavigationItem: FunctionComponent<PropsWithChildren<NavigationProps
         if (props.children) {
             setOpen(!open);
         } else if (props.route) {
-            props.onOpenRoute?.call(props.route);
+            props.onOpenRoute?.call(this, props.route);
             navigate(props.route);
         }
     };
@@ -32,7 +33,7 @@ export const NavigationItem: FunctionComponent<PropsWithChildren<NavigationProps
                 props.icon && <ListItemIcon>{props.icon}</ListItemIcon>
             }
             <ListItemText primary={props.label} />
-            {props.children && open && <ExpandLess />}
+            {props.children && (open ? <ExpandLess /> : <ExpandMore />)}
         </ListItemButton>
         {
             props.children &&

package/src/components/sidepanel/sidepanel.tsx

@@ -9,30 +9,42 @@
  ********************************************************************************/
 
 import { FunctionComponent, PropsWithChildren } from 'react';
-import { Drawer, List } from '@mui/material';
-import { Theme } from '@mui/material/styles';
+import { Divider, Drawer, IconButton, List } from '@mui/material';
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
+import { DrawerHeader } from './drawer-header';
+
+export const Sidepanel: FunctionComponent<PropsWithChildren<SidepanelProps>> = props => {
+    const width = props.width;
 
-export const Sidepanel: FunctionComponent<PropsWithChildren> = props => {
     return (
         <Drawer
-            variant='permanent'
-            PaperProps={{ elevation: 3 }}
-            sx={(theme: Theme) => ({
+            sx={{
+                width: width,
+                flexShrink: 0,
                 '& .MuiDrawer-paper': {
-                    position: 'relative',
-                    justifyContent: 'space-between',
-                    transition: theme.transitions.create('width', {
-                        easing: theme.transitions.easing.sharp,
-                        duration: theme.transitions.duration.enteringScreen
-                    }),
-                    overflowX: { xs: 'hidden', sm: 'hidden', md: 'none', lg: 'none', xl: 'none' },
-                    width: { xs: theme.spacing(7) + 1, sm: theme.spacing(9) + 1, md: 240 },
-                }
-            })}
+                    width: width,
+                    boxSizing: 'border-box',
+                },
+            }}
+            variant='persistent'
+            anchor='left'
+            open={props.open}
         >
+            <DrawerHeader>
+                <IconButton onClick={props.handleDrawerClose}>
+                    <ChevronLeftIcon />
+                </IconButton>
+            </DrawerHeader>
+            <Divider />
             <List>
                 {props.children}
             </List>
         </Drawer>
     );
-};
+};
+
+interface SidepanelProps {
+    width: number;
+    open: boolean;
+    handleDrawerClose: () => void;
+}

package/src/context/scan-admin/scan-context.tsx

@@ -114,6 +114,7 @@ export const ScanProvider: FC<ScanProviderProps> = ({ children, service, handleE
 // Custom Hook
 // ============================================================================
 
+// eslint-disable-next-line react-refresh/only-export-components
 export const useScanContext = (): ScanContextValue => {
     const context = useContext(ScanContext);
     if (!context) {

package/src/default/default-app.tsx

@@ -48,7 +48,7 @@ async function getServerVersion(): Promise<string> {
    }
 }
 
-const App = () => {
+export const App = () => {
     const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
     const theme = useMemo(
         () => createDefaultTheme(prefersDarkMode ? 'dark' : 'light'),

package/src/default/menu-content.tsx

@@ -19,17 +19,18 @@ import InfoIcon from '@mui/icons-material/Info';
 import PublishIcon from '@mui/icons-material/Publish';
 import AccountBoxIcon from '@mui/icons-material/AccountBox';
 import { UserAvatar } from '../pages/user/avatar';
-import { UserSettingsRoutes } from '../pages/user/user-settings';
+import { UserSettingsRoutes } from '../pages/user/user-settings-routes';
 import { styled, Theme } from '@mui/material/styles';
 import { MainContext } from '../context';
 import SettingsIcon from '@mui/icons-material/Settings';
 import AdminPanelSettingsIcon from '@mui/icons-material/AdminPanelSettings';
 import LogoutIcon from '@mui/icons-material/Logout';
-import { AdminDashboardRoutes } from '../pages/admin-dashboard/admin-dashboard';
+import { AdminDashboardRoutes } from '../pages/admin-dashboard/admin-routes';
 import { LogoutForm } from '../pages/user/logout';
 import { LoginComponent } from './login';
 
 //-------------------- Mobile View --------------------//
+// eslint-disable-next-line react-refresh/only-export-components
 export const itemIcon = {
     mr: 1,
     width: '16px',
@@ -161,6 +162,7 @@ export const MobileMenuContent: FunctionComponent = () => {
 
 //-------------------- Default View --------------------//
 
+// eslint-disable-next-line react-refresh/only-export-components
 export const headerItem = ({ theme }: { theme: Theme }) => ({
     margin: theme.spacing(2.5),
     color: theme.palette.text.primary,
@@ -175,7 +177,9 @@ export const headerItem = ({ theme }: { theme: Theme }) => ({
     }
 });
 
+// eslint-disable-next-line react-refresh/only-export-components
 export const MenuLink = styled(Link)(headerItem);
+// eslint-disable-next-line react-refresh/only-export-components
 export const MenuRouteLink = styled(RouteLink)(headerItem);
 
 export const DefaultMenuContent: FunctionComponent = () => {

package/src/default/page-settings.tsx

@@ -16,7 +16,7 @@ import { Link as RouteLink, Route, useParams } from 'react-router-dom';
 import GitHubIcon from '@mui/icons-material/GitHub';
 import { Extension, NamespaceDetails } from '../extension-registry-types';
 import { PageSettings } from '../page-settings';
-import { ExtensionListRoutes } from '../pages/extension-list/extension-list-container';
+import { ExtensionListRoutes } from '../pages/extension-list/extension-list-routes';
 import { DefaultMenuContent, MobileMenuContent } from './menu-content';
 import OpenVSXLogo from './openvsx-registry-logo';
 import About from './about';

package/src/extension-registry-service.ts

@@ -15,7 +15,7 @@ import {
     LoginProviders, ScanResultJson, ScanCounts, ScanResultsResponse, ScanFilterOptions,
     FilesResponse, FileDecisionCountsJson, ScanDecisionRequest, ScanDecisionResponse,
     FileDecisionRequest, FileDecisionResponse, FileDecisionDeleteRequest, FileDecisionDeleteResponse,
-    Tier, TierList, Customer, CustomerList, UsageStatsList, LogPageableList,
+    Tier, TierList, Customer, CustomerList, UsageStatsList, LogPageableList, CustomerMembershipList,
 } from './extension-registry-types';
 import { createAbsoluteURL, addQuery } from './utils';
 import { sendRequest, ErrorResponse } from './server-request';
@@ -28,7 +28,7 @@ export class ExtensionRegistryService {
         this.admin = new AdminConstructor(this);
     }
 
-    getLoginProviders(abortController: AbortController): Promise<Readonly<LoginProviders|SuccessResult>> {
+    async getLoginProviders(abortController: AbortController): Promise<Readonly<LoginProviders|SuccessResult>> {
         const endpoint = createAbsoluteURL([this.serverUrl, 'login-providers']);
         return sendRequest({ abortController, endpoint });
     }
@@ -49,7 +49,7 @@ export class ExtensionRegistryService {
         return createAbsoluteURL(arr);
     }
 
-    getNamespaceDetails(abortController: AbortController, name: string): Promise<Readonly<NamespaceDetails>> {
+    async getNamespaceDetails(abortController: AbortController, name: string): Promise<Readonly<NamespaceDetails>> {
         const endpoint = createAbsoluteURL([this.serverUrl, 'api', name, 'details']);
         return sendRequest({ abortController, endpoint });
     }
@@ -95,7 +95,7 @@ export class ExtensionRegistryService {
         });
     }
 
-    search(abortController: AbortController, filter?: ExtensionFilter): Promise<Readonly<SearchResult | ErrorResult>> {
+    async search(abortController: AbortController, filter?: ExtensionFilter): Promise<Readonly<SearchResult | ErrorResult>> {
         const query: { key: string, value: string | number }[] = [];
         if (filter) {
             if (filter.query)
@@ -115,11 +115,11 @@ export class ExtensionRegistryService {
         return sendRequest({ abortController, endpoint });
     }
 
-    getExtensionDetail(abortController: AbortController, extensionUrl: UrlString): Promise<Readonly<Extension | ErrorResult>> {
+    async getExtensionDetail(abortController: AbortController, extensionUrl: UrlString): Promise<Readonly<Extension | ErrorResult>> {
         return sendRequest({ abortController, endpoint: extensionUrl });
     }
 
-    getExtensionReadme(abortController: AbortController, extension: Extension): Promise<string> {
+    async getExtensionReadme(abortController: AbortController, extension: Extension): Promise<string> {
         return sendRequest({
             abortController,
             endpoint: extension.files.readme,
@@ -128,7 +128,7 @@ export class ExtensionRegistryService {
         });
     }
 
-    getExtensionChangelog(abortController: AbortController, extension: Extension): Promise<string> {
+    async getExtensionChangelog(abortController: AbortController, extension: Extension): Promise<string> {
         return sendRequest({
             abortController,
             endpoint: extension.files.changelog,
@@ -137,7 +137,7 @@ export class ExtensionRegistryService {
         });
     }
 
-    getExtensionIcon(abortController: AbortController, extension: Extension | SearchEntry): Promise<string | undefined> {
+    async getExtensionIcon(abortController: AbortController, extension: Extension | SearchEntry): Promise<string | undefined> {
         if (!extension.files.icon) {
             return Promise.resolve(undefined);
         }
@@ -173,7 +173,7 @@ export class ExtensionRegistryService {
         ];
     }
 
-    getExtensionReviews(abortController: AbortController, extension: Extension): Promise<Readonly<ExtensionReviewList>> {
+    async getExtensionReviews(abortController: AbortController, extension: Extension): Promise<Readonly<ExtensionReviewList>> {
         return sendRequest({ abortController, endpoint: extension.reviewsUrl });
     }
 
@@ -228,7 +228,7 @@ export class ExtensionRegistryService {
         });
     }
 
-    getUser(abortController: AbortController): Promise<Readonly<UserData | ErrorResult>> {
+    async getUser(abortController: AbortController): Promise<Readonly<UserData | ErrorResult>> {
         return sendRequest({
             abortController,
             endpoint: createAbsoluteURL([this.serverUrl, 'user']),
@@ -236,7 +236,7 @@ export class ExtensionRegistryService {
         });
     }
 
-    getUserAuthError(abortController: AbortController): Promise<Readonly<ErrorResponse>> {
+    async getUserAuthError(abortController: AbortController): Promise<Readonly<ErrorResponse>> {
         return sendRequest({
             abortController,
             endpoint: createAbsoluteURL([this.serverUrl, 'user', 'auth-error']),
@@ -244,7 +244,7 @@ export class ExtensionRegistryService {
         });
     }
 
-    getUserByName(abortController: AbortController, name: string): Promise<Readonly<UserData>[]> {
+    async getUserByName(abortController: AbortController, name: string): Promise<Readonly<UserData>[]> {
         return sendRequest({
             abortController,
             endpoint: createAbsoluteURL([this.serverUrl, 'user', 'search', name]),
@@ -252,7 +252,7 @@ export class ExtensionRegistryService {
         });
     }
 
-    getAccessTokens(abortController: AbortController, user: UserData): Promise<Readonly<PersonalAccessToken>[]> {
+    async getAccessTokens(abortController: AbortController, user: UserData): Promise<Readonly<PersonalAccessToken>[]> {
         return sendRequest({
             abortController,
             credentials: true,
@@ -310,7 +310,7 @@ export class ExtensionRegistryService {
         })));
     }
 
-    getCsrfToken(abortController: AbortController): Promise<Readonly<CsrfTokenJson | ErrorResult>> {
+    async getCsrfToken(abortController: AbortController): Promise<Readonly<CsrfTokenJson | ErrorResult>> {
         return sendRequest({
             abortController,
             credentials: true,
@@ -318,7 +318,7 @@ export class ExtensionRegistryService {
         });
     }
 
-    getNamespaces(abortController: AbortController): Promise<Readonly<Namespace>[]> {
+    async getNamespaces(abortController: AbortController): Promise<Readonly<Namespace>[]> {
         return sendRequest({
             abortController,
             credentials: true,
@@ -326,7 +326,26 @@ export class ExtensionRegistryService {
         });
     }
 
-    getNamespaceMembers(abortController: AbortController, namespace: Namespace): Promise<Readonly<NamespaceMembershipList>> {
+    async getCustomers(abortController: AbortController): Promise<Readonly<Customer>[]> {
+        return sendRequest({
+            abortController,
+            credentials: true,
+            endpoint: createAbsoluteURL([this.serverUrl, 'user', 'customers'])
+        });
+    }
+
+    async getUsageStats(abortController: AbortController, customerName: string, date: Date): Promise<Readonly<UsageStatsList>> {
+        const query: { key: string, value: string | number }[] = [];
+        query.push({ key: 'date', value: date.toISOString() });
+
+        return sendRequest({
+            abortController,
+            endpoint: createAbsoluteURL([this.serverUrl, 'user', 'customers', customerName, 'usage'], query),
+            credentials: true
+        }, false);
+    }
+
+    async getNamespaceMembers(abortController: AbortController, namespace: Namespace): Promise<Readonly<NamespaceMembershipList>> {
         return sendRequest({
             abortController,
             credentials: true,
@@ -371,7 +390,7 @@ export class ExtensionRegistryService {
         });
     }
 
-    getStaticContent(abortController: AbortController, url: string): Promise<string> {
+    async getStaticContent(abortController: AbortController, url: string): Promise<string> {
         return sendRequest({
             abortController,
             endpoint: url,
@@ -505,9 +524,13 @@ export interface AdminService {
     updateTier(abortController: AbortController, name: string, tier: Tier): Promise<Readonly<Tier>>;
     deleteTier(abortController: AbortController, name: string): Promise<Readonly<SuccessResult | ErrorResult>>;
     getCustomers(abortController: AbortController): Promise<Readonly<CustomerList>>;
+    getCustomer(abortController: AbortController, name: string): Promise<Readonly<Customer>>;
     createCustomer(abortController: AbortController, customer: Customer): Promise<Readonly<Customer>>;
     updateCustomer(abortController: AbortController, name: string, customer: Customer): Promise<Readonly<Customer>>;
     deleteCustomer(abortController: AbortController, name: string): Promise<Readonly<SuccessResult | ErrorResult>>;
+    getCustomerMembers(abortController: AbortController, name: string): Promise<Readonly<CustomerMembershipList>>;
+    addCustomerMember(abortController: AbortController, name: string, user: UserData): Promise<Readonly<SuccessResult | ErrorResult>>;
+    removeCustomerMember(abortController: AbortController, name: string, user: UserData): Promise<Readonly<SuccessResult | ErrorResult>>;
     getUsageStats(abortController: AbortController, customerName: string, date: Date): Promise<Readonly<UsageStatsList>>;
     getLogs(abortController: AbortController, page?: number, size?: number, period?: string): Promise<Readonly<LogPageableList>>;
 }
@@ -520,7 +543,7 @@ export class AdminServiceImpl implements AdminService {
 
     constructor(readonly registry: ExtensionRegistryService) {}
 
-    getExtension(abortController: AbortController, namespace: string, extension: string): Promise<Readonly<Extension>> {
+    async getExtension(abortController: AbortController, namespace: string, extension: string): Promise<Readonly<Extension>> {
         return sendRequest({
             abortController,
             credentials: true,
@@ -548,7 +571,7 @@ export class AdminServiceImpl implements AdminService {
         });
     }
 
-    getNamespace(abortController: AbortController, name: string): Promise<Readonly<Namespace>> {
+    async getNamespace(abortController: AbortController, name: string): Promise<Readonly<Namespace>> {
         return sendRequest({
             abortController,
             credentials: true,
@@ -634,7 +657,7 @@ export class AdminServiceImpl implements AdminService {
         });
     }
 
-    getAllScans(abortController: AbortController, params?: { size?: number; offset?: number; status?: string | string[]; publisher?: string; namespace?: string; name?: string; validationType?: string[]; threatScannerName?: string[]; dateStartedFrom?: string; dateStartedTo?: string; enforcement?: 'enforced' | 'notEnforced' | 'all'; adminDecision?: string[] }): Promise<Readonly<ScanResultsResponse>> {
+    async getAllScans(abortController: AbortController, params?: { size?: number; offset?: number; status?: string | string[]; publisher?: string; namespace?: string; name?: string; validationType?: string[]; threatScannerName?: string[]; dateStartedFrom?: string; dateStartedTo?: string; enforcement?: 'enforced' | 'notEnforced' | 'all'; adminDecision?: string[] }): Promise<Readonly<ScanResultsResponse>> {
         const query: { key: string, value: string | number }[] = [];
         if (params) {
             if (params.size !== undefined)
@@ -672,7 +695,7 @@ export class AdminServiceImpl implements AdminService {
         });
     }
 
-    getScan(abortController: AbortController, scanId: string): Promise<Readonly<ScanResultJson>> {
+    async getScan(abortController: AbortController, scanId: string): Promise<Readonly<ScanResultJson>> {
         return sendRequest({
             abortController,
             credentials: true,
@@ -680,7 +703,7 @@ export class AdminServiceImpl implements AdminService {
         });
     }
 
-    getScanCounts(abortController: AbortController, params?: { dateStartedFrom?: string; dateStartedTo?: string; enforcement?: 'enforced' | 'notEnforced' | 'all'; threatScannerName?: string[]; validationType?: string[] }): Promise<Readonly<ScanCounts>> {
+    async getScanCounts(abortController: AbortController, params?: { dateStartedFrom?: string; dateStartedTo?: string; enforcement?: 'enforced' | 'notEnforced' | 'all'; threatScannerName?: string[]; validationType?: string[] }): Promise<Readonly<ScanCounts>> {
         const query: { key: string, value: string | number }[] = [];
         if (params) {
             if (params.dateStartedFrom)
@@ -704,7 +727,7 @@ export class AdminServiceImpl implements AdminService {
         });
     }
 
-    getScanFilterOptions(abortController: AbortController): Promise<Readonly<ScanFilterOptions>> {
+    async getScanFilterOptions(abortController: AbortController): Promise<Readonly<ScanFilterOptions>> {
         return sendRequest({
             abortController,
             credentials: true,
@@ -712,7 +735,7 @@ export class AdminServiceImpl implements AdminService {
         });
     }
 
-    getFiles(abortController: AbortController, params?: { size?: number; offset?: number; decision?: string; publisher?: string; namespace?: string; name?: string; dateDecidedFrom?: string; dateDecidedTo?: string; sortBy?: string; sortOrder?: 'asc' | 'desc' }): Promise<Readonly<FilesResponse>> {
+    async getFiles(abortController: AbortController, params?: { size?: number; offset?: number; decision?: string; publisher?: string; namespace?: string; name?: string; dateDecidedFrom?: string; dateDecidedTo?: string; sortBy?: string; sortOrder?: 'asc' | 'desc' }): Promise<Readonly<FilesResponse>> {
         const query: { key: string, value: string | number }[] = [];
         if (params) {
             if (params.size !== undefined)
@@ -744,7 +767,7 @@ export class AdminServiceImpl implements AdminService {
         });
     }
 
-    getFileCounts(abortController: AbortController, params?: { dateDecidedFrom?: string; dateDecidedTo?: string }): Promise<Readonly<FileDecisionCountsJson>> {
+    async getFileCounts(abortController: AbortController, params?: { dateDecidedFrom?: string; dateDecidedTo?: string }): Promise<Readonly<FileDecisionCountsJson>> {
         const query: { key: string, value: string | number }[] = [];
         if (params) {
             if (params.dateDecidedFrom)
@@ -885,13 +908,21 @@ export class AdminServiceImpl implements AdminService {
     }
 
     async getCustomers(abortController: AbortController): Promise<Readonly<CustomerList>> {
-        return sendRequest({
+        return await sendRequest({
             abortController,
             endpoint: createAbsoluteURL([this.registry.serverUrl, 'admin', 'ratelimit', 'customers']),
             credentials: true
         }, false);
     }
 
+    async getCustomer(abortController: AbortController, name: string): Promise<Readonly<Customer>> {
+        return await sendRequest({
+            abortController,
+            endpoint: createAbsoluteURL([this.registry.serverUrl, 'admin', 'ratelimit', 'customers', name]),
+            credentials: true
+        }, false);
+    }
+
     async createCustomer(abortController: AbortController, customer: Customer): Promise<Readonly<Customer>> {
         const csrfResponse = await this.registry.getCsrfToken(abortController);
         const headers: Record<string, string> = {
@@ -948,6 +979,54 @@ export class AdminServiceImpl implements AdminService {
         }, false);
     }
 
+    async getCustomerMembers(abortController: AbortController, name: string): Promise<Readonly<CustomerMembershipList>> {
+        return sendRequest({
+            abortController,
+            credentials: true,
+            endpoint: createAbsoluteURL([this.registry.serverUrl, 'admin', 'ratelimit', 'customers', name, "members"]),
+        }, false);
+    }
+
+    async addCustomerMember(abortController: AbortController, name: string, user: UserData): Promise<Readonly<SuccessResult | ErrorResult>> {
+        const csrfResponse = await this.registry.getCsrfToken(abortController);
+        const headers: Record<string, string> = {};
+        if (!isError(csrfResponse)) {
+            const csrfToken = csrfResponse as CsrfTokenJson;
+            headers[csrfToken.header] = csrfToken.value;
+        }
+        const query = [
+            { key: 'user', value: user.loginName },
+            { key: 'provider', value: user.provider },
+        ];
+        return sendRequest({
+            abortController,
+            headers,
+            method: 'POST',
+            credentials: true,
+            endpoint: addQuery(createAbsoluteURL([this.registry.serverUrl, 'admin', 'ratelimit', 'customers', name, "add-member"]), query),
+        }, false);
+    }
+
+    async removeCustomerMember(abortController: AbortController, name: string, user: UserData): Promise<Readonly<SuccessResult | ErrorResult>> {
+        const csrfResponse = await this.registry.getCsrfToken(abortController);
+        const headers: Record<string, string> = {};
+        if (!isError(csrfResponse)) {
+            const csrfToken = csrfResponse as CsrfTokenJson;
+            headers[csrfToken.header] = csrfToken.value;
+        }
+        const query = [
+            { key: 'user', value: user.loginName },
+            { key: 'provider', value: user.provider },
+        ];
+        return sendRequest({
+            abortController,
+            headers,
+            method: 'POST',
+            credentials: true,
+            endpoint: addQuery(createAbsoluteURL([this.registry.serverUrl, 'admin', 'ratelimit', 'customers', name, "remove-member"]), query),
+        }, false);
+    }
+
     /**
      * Get usage stats for a customer within an optional date range.
      */

package/src/extension-registry-types.ts

@@ -458,6 +458,15 @@ export interface CustomerList {
     customers: Customer[];
 }
 
+export interface CustomerMembership {
+    customer: string;
+    user: UserData;
+}
+
+export interface CustomerMembershipList {
+    customerMemberships: CustomerMembership[];
+}
+
 export interface UsageStats {
     windowStart: number; // epoch seconds in UTC
     duration: number; // in seconds

package/src/main.tsx

@@ -11,7 +11,8 @@
 import { FunctionComponent, ReactNode, useEffect, useState, useRef } from 'react';
 import { CssBaseline } from '@mui/material';
 import { Route, Routes } from 'react-router-dom';
-import { AdminDashboard, AdminDashboardRoutes } from './pages/admin-dashboard/admin-dashboard';
+import { AdminDashboard } from './pages/admin-dashboard/admin-dashboard';
+import { AdminDashboardRoutes } from './pages/admin-dashboard/admin-routes';
 import { ErrorDialog } from './components/error-dialog';
 import { handleError } from './utils';
 import { ExtensionRegistryService } from './extension-registry-service';

package/src/other-pages.tsx

@@ -1,3 +1,16 @@
+/******************************************************************************
+ * 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, useContext, useEffect, useState } from 'react';
 import { Routes, Route } from 'react-router-dom';
 import { AppBar, Box, Toolbar } from '@mui/material';
@@ -5,10 +18,14 @@ import { styled, Theme } from '@mui/material/styles';
 import { Banner } from './components/banner';
 import { MainContext } from './context';
 import { HeaderMenu } from './header-menu';
-import { ExtensionListContainer, ExtensionListRoutes } from './pages/extension-list/extension-list-container';
-import { UserSettings, UserSettingsRoutes } from './pages/user/user-settings';
-import { NamespaceDetail, NamespaceDetailRoutes } from './pages/namespace-detail/namespace-detail';
-import { ExtensionDetail, ExtensionDetailRoutes } from './pages/extension-detail/extension-detail';
+import { ExtensionListContainer } from './pages/extension-list/extension-list-container';
+import { ExtensionListRoutes } from "./pages/extension-list/extension-list-routes";
+import { UserSettings } from './pages/user/user-settings';
+import { UserSettingsRoutes } from './pages/user/user-settings-routes';
+import { NamespaceDetail } from './pages/namespace-detail/namespace-detail';
+import { NamespaceDetailRoutes } from './pages/namespace-detail/namespace-detail-routes';
+import { ExtensionDetail } from './pages/extension-detail/extension-detail';
+import { ExtensionDetailRoutes } from './pages/extension-detail/extension-detail-routes';
 import { getCookieValueByKey, setCookie } from './utils';
 import { UserData } from './extension-registry-types';
 import { NotFound } from './not-found';