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

package/src/components/rate-limiting/customer/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 { GeneralDetails } from './general-details';
+export type { GeneralDetailsProps } from './general-details';
+
+export { UsageStats } from './usage-stats';
+export type { UsageStatsProps } from './usage-stats';

package/src/components/rate-limiting/customer/usage-stats.tsx

@@ -0,0 +1,50 @@
+/******************************************************************************
+ * Copyright (c) 2026 Contributors to the Eclipse Foundation.
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License 2.0 which is available at
+ * https://www.eclipse.org/legal/epl-2.0.
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *****************************************************************************/
+
+import { FC } from 'react';
+import {
+    Typography,
+    Paper,
+    type PaperProps,
+    Divider,
+} from '@mui/material';
+import type { Customer, UsageStats as UsageStatsType } from '../../../extension-registry-types';
+import type { DateTime } from 'luxon';
+import { UsageStatsChart } from '../usage-stats/usage-stats-chart';
+
+const sectionPaperProps: PaperProps = { elevation: 1, sx: { p: 3, mb: 3 } };
+
+export interface UsageStatsProps {
+    usageStats: readonly UsageStatsType[];
+    customer: Customer;
+    startDate: DateTime;
+    onStartDateChange: (date: DateTime) => void;
+    compact?: boolean;
+}
+
+export const UsageStats: FC<UsageStatsProps> = ({ usageStats, customer, startDate, onStartDateChange, compact }) => (
+    <Paper {...sectionPaperProps}>
+        <Typography variant='h6' gutterBottom>
+            Usage Statistics
+        </Typography>
+        <Divider sx={{ mb: 2 }} />
+        <UsageStatsChart
+            usageStats={usageStats}
+            customer={customer}
+            startDate={startDate}
+            onStartDateChange={onStartDateChange}
+            embedded
+            compact={compact}
+        />
+    </Paper>
+);

package/src/{pages/admin-dashboard → components/rate-limiting}/usage-stats/usage-stats-chart.tsx

@@ -17,48 +17,60 @@ import {
     Paper,
     Typography,
     Alert,
-    Stack
+    Stack,
+    IconButton
 } from "@mui/material";
 import { BarPlot } from "@mui/x-charts/BarChart";
 import { DatePicker } from "@mui/x-date-pickers/DatePicker";
 import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
-import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
+import { AdapterLuxon } from "@mui/x-date-pickers/AdapterLuxon";
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 import type { Customer, UsageStats } from "../../../extension-registry-types";
-import { addDays, format, startOfDay } from "date-fns";
 import {
     ChartsReferenceLine,
     ChartsTooltip,
     ChartsXAxis,
     ChartsYAxis,
-    ResponsiveChartContainer
+    ChartsContainer,
 } from "@mui/x-charts";
+import { DateTime } from "luxon";
 
 interface UsageStatsChartProps {
     usageStats: readonly UsageStats[];
     customer: Customer | null;
-    startDate: Date;
-    onStartDateChange: (date: Date) => void;
+    startDate: DateTime;
+    onStartDateChange: (date: DateTime) => void;
+    embedded?: boolean;
+    compact?: boolean;
 }
 
 export const UsageStatsChart: FC<UsageStatsChartProps> = ({
     usageStats,
     customer,
     startDate,
-    onStartDateChange
+    onStartDateChange,
+    embedded = false,
+    compact = false
 }) => {
-    const dayStart = startOfDay(startDate).getTime() / 1000;
-    const dayEnd = startOfDay(addDays(startDate, 1)).getTime() / 1000;
+    const dayStart = startDate.startOf('day').toMillis() / 1000;
+    const dayEnd = startDate.endOf('day').toMillis() / 1000;
+
+    const formatter = Intl.NumberFormat('en', { notation: 'compact' });
 
     // we have 5min steps
     const step = 5 * 60;
     const tierCapacity =
         customer?.tier !== undefined ? customer.tier.capacity * step / customer.tier.duration : 0;
+    const tierRps =
+        customer?.tier !== undefined ? customer.tier.capacity / customer.tier.duration : 0;
+    const tierRpsRounded = Math.round(tierRps * 100) / 100;
 
     const data: UsageStats[] = useMemo(
         () => {
             const arr: UsageStats[] = [];
 
-            for (let idx = dayStart; idx < dayEnd; idx += step) {
+            for (let idx = dayStart; idx <= dayEnd; idx += step) {
                 arr.push({
                     windowStart: idx,
                     duration: step,
@@ -68,7 +80,9 @@ export const UsageStatsChart: FC<UsageStatsChartProps> = ({
 
             for (const stat of usageStats) {
                 const idx = (stat.windowStart - dayStart) / step;
-                arr[idx].count = stat.count;
+                if (idx >= 0 && idx < arr.length) {
+                    arr[idx].count = stat.count;
+                }
             }
             return arr;
         }, [usageStats]
@@ -89,9 +103,11 @@ export const UsageStatsChart: FC<UsageStatsChartProps> = ({
         [usageStats]
     );
 
+    const Wrapper: typeof Box = embedded ? Box : Paper;
+
     return (
-        <LocalizationProvider dateAdapter={AdapterDateFns}>
-            <Paper sx={{ p: 2, mb: 3 }}>
+        <LocalizationProvider dateAdapter={AdapterLuxon}>
+            <Wrapper sx={{ p: 2, mb: embedded ? 2 : 3 }}>
                 <Typography variant='subtitle2' gutterBottom color='text.secondary'>
                     Filters
                 </Typography>
@@ -100,17 +116,24 @@ export const UsageStatsChart: FC<UsageStatsChartProps> = ({
                         label='Start Date'
                         value={startDate}
                         onChange={onStartDateChange}
-                        slotProps={{ textField: { size: 'small' } }}
+                        timezone='UTC'
+                        slotProps={{ textField: { size: 'small' }, actionBar: { actions: ['today'] } }}
                     />
+                    <IconButton size='small' onClick={() => onStartDateChange(startDate.minus({ days: 1 }))}>
+                        <ChevronLeftIcon />
+                    </IconButton>
+                    <IconButton size='small' onClick={() => onStartDateChange(startDate.plus({ days: 1 }))}>
+                        <ChevronRightIcon />
+                    </IconButton>
                 </Stack>
-            </Paper>
+            </Wrapper>
 
             {usageStats.length === 0 ?
                 <Alert severity='info'>No usage data available for this customer.</Alert>
              :
                 <>
-                <Paper sx={{ p: 2 }}>
-                    <ResponsiveChartContainer
+                <Wrapper sx={{ p: 2 }}>
+                    <ChartsContainer
                         series={[{
                             type: 'bar',
                             data: data.map(d => d.count),
@@ -118,14 +141,15 @@ export const UsageStatsChart: FC<UsageStatsChartProps> = ({
                             color: 'lightgray',
                         }]}
 
-                        height={400}
-                        margin={{ top: 10 }}
+                        height={compact ? 300 : 400}
+                        margin={{ top: 30 }}
                         xAxis={[
                             {
                                 id: 'date',
-                                data: data.map((value) => new Date(value.windowStart * 1000)),
+                                data: data.map((value) => value.windowStart * 1000),
+                                valueFormatter: (value) => DateTime.fromMillis(value, { zone: 'UTC' }).toLocaleString(DateTime.TIME_24_SIMPLE),
                                 scaleType: 'band',
-                                valueFormatter: (value) => format(new Date(value), 'HH:mm'),
+                                height: 50,
                             },
                         ]}
                         yAxis={[
@@ -133,7 +157,9 @@ export const UsageStatsChart: FC<UsageStatsChartProps> = ({
                                 id: 'requests',
                                 scaleType: 'linear',
                                 min: 0,
-                                max: Math.max(tierCapacity, maxDataValue) + 10
+                                max: Math.max(tierCapacity, maxDataValue) * 1.2,
+                                valueFormatter: (value) => formatter.format(value),
+                                width: 50
                             },
                         ]}
                     >
@@ -142,7 +168,7 @@ export const UsageStatsChart: FC<UsageStatsChartProps> = ({
                         {tierCapacity > 0 &&
                             <ChartsReferenceLine
                                 y={tierCapacity}
-                                label='Tier Limit'
+                                label={`Tier Limit (${tierRpsRounded} rps)`}
                                 labelAlign='end'
                                 lineStyle={{
                                     strokeDasharray: '10 5',
@@ -153,15 +179,15 @@ export const UsageStatsChart: FC<UsageStatsChartProps> = ({
                         }
 
                         <ChartsXAxis
-                            label='Time'
+                            label='Time (UTC)'
                             position='bottom'
                             axisId='date'
-                            tickInterval={(value, index) => {
-                                return new Date(value).getMinutes() === 0;
-                            }}
+                            tickInterval='auto'
                             tickLabelInterval={(value, index) => {
-                                return new Date(value).getMinutes() === 0;
+                                const d = new Date(value);
+                                return d.getMinutes() === 0 && (!compact || d.getHours() % 3 === 0);
                             }}
+                            tickLabelPlacement='middle'
                             tickLabelStyle={{
                                 fontSize: 10,
                             }}
@@ -173,8 +199,8 @@ export const UsageStatsChart: FC<UsageStatsChartProps> = ({
                             tickLabelStyle={{ fontSize: 10 }}
                         />
                         <ChartsTooltip />
-                    </ResponsiveChartContainer>
-                </Paper>
+                    </ChartsContainer>
+                </Wrapper>
 
                 <Box mt={2}>
                     <Typography variant='body2' color='text.secondary'>
@@ -186,4 +212,4 @@ export const UsageStatsChart: FC<UsageStatsChartProps> = ({
             }
         </LocalizationProvider>
     );
-};
+};

package/{lib/pages/admin-dashboard/usage-stats/usage-stats-utils.js → src/components/rate-limiting/usage-stats/usage-stats-utils.ts}

@@ -10,7 +10,9 @@
  *
  * SPDX-License-Identifier: EPL-2.0
  *****************************************************************************/
+
+import { DateTime } from "luxon";
+
 export const getDefaultStartDate = () => {
-    return new Date();
+    return DateTime.now().setZone("UTC");
 };
-//# sourceMappingURL=usage-stats-utils.js.map

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';