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

package/src/pages/namespace-detail/namespace-detail.tsx

@@ -16,19 +16,9 @@ import TwitterIcon from '@mui/icons-material/Twitter';
 import { useParams } from 'react-router-dom';
 import { ExtensionListItem } from '../extension-list/extension-list-item';
 import { MainContext } from '../../context';
-import { createRoute } from '../../utils';
 import { DelayedLoadIndicator } from '../../components/delayed-load-indicator';
 import { NamespaceDetails, isError, UrlString } from '../../extension-registry-types';
 
-export namespace NamespaceDetailRoutes {
-    export namespace Parameters {
-        export const NAME = ':name';
-    }
-
-    export const ROOT = 'namespace';
-    export const MAIN = createRoute([ROOT, Parameters.NAME]);
-}
-
 export const NamespaceDetail: FunctionComponent = () => {
     const [loading, setLoading] = useState(true);
     const [truncateReadMore, setTruncateReadMore] = useState(true);

package/src/pages/user/add-namespace-member-dialog.tsx

@@ -8,15 +8,12 @@
  * SPDX-License-Identifier: EPL-2.0
  ********************************************************************************/
 
-import { ChangeEvent, FunctionComponent, KeyboardEvent, useState, useContext, useEffect, useRef } from 'react';
+import { FunctionComponent, useContext, useRef } from 'react';
 import { UserData } from '../..';
-import {
-    Dialog, DialogTitle, DialogContent, DialogContentText, TextField, DialogActions, Button, Popper, Fade, Paper,
-    Box, Avatar
-} from '@mui/material';
 import { Namespace, NamespaceMembership, isError } from '../../extension-registry-types';
 import { NamespaceDetailConfigContext } from './user-settings-namespace-detail';
 import { MainContext } from '../../context';
+import { AddUserDialog } from './add-user-dialog';
 
 export interface AddMemberDialogProps {
     open: boolean;
@@ -28,29 +25,17 @@ export interface AddMemberDialogProps {
 }
 
 export const AddMemberDialog: FunctionComponent<AddMemberDialogProps> = props => {
-    const { open } = props;
     const config = useContext(NamespaceDetailConfigContext);
     const { service, handleError } = useContext(MainContext);
-    const [foundUsers, setFoundUsers] = useState<UserData[]>([]);
-    const [showUserPopper, setShowUserPopper] = useState(false);
-    const [popperTarget, setPopperTarget] = useState<HTMLInputElement | undefined>(undefined);
     const abortController = useRef<AbortController>(new AbortController());
-    useEffect(() => {
-        return () => {
-            abortController.current.abort();
-        };
-    }, []);
 
-    const addUser = async (user: UserData) => {
+    const existingUsers = props.members.map(m => m.user);
+
+    const handleAddUser = async (user: UserData) => {
         try {
             if (!props.namespace) {
                 return;
             }
-            if (props.members.find(m => m.user.loginName === user.loginName && m.user.provider === user.provider)) {
-                setShowUserPopper(false);
-                handleError({ message: `User ${user.loginName} is already a member of ${props.namespace.name}.` });
-                return;
-            }
             props.setLoadingState(true);
             const endpoint = props.namespace.roleUrl;
             const result = await service.setNamespaceMember(abortController.current, endpoint, user, config.defaultMemberRole ?? 'contributor');
@@ -58,106 +43,22 @@ export const AddMemberDialog: FunctionComponent<AddMemberDialogProps> = props =>
                 throw result;
             }
             props.setLoadingState(false);
-            onClose();
+            props.onClose();
         } catch (err) {
-            setShowUserPopper(false);
             props.setLoadingState(false);
             handleError(err);
         }
     };
 
-    const onClose = () => {
-        setShowUserPopper(false);
-        props.onClose();
-    };
-
-    const handleUserSearch = async (e: ChangeEvent<HTMLInputElement>) => {
-        const popperTarget = e.currentTarget;
-        setPopperTarget(popperTarget);
-        const val = popperTarget.value;
-        let showUserPopper = false;
-        let foundUsers: UserData[] = [];
-        if (val) {
-            const users = await service.getUserByName(abortController.current, val);
-            if (users) {
-                showUserPopper = true;
-                foundUsers = users;
-            }
-        }
-        setShowUserPopper(showUserPopper);
-        setFoundUsers(foundUsers);
-    };
-
-    return <>
-        <Dialog onClose={onClose} open={open} aria-labelledby='form-dialog-title'>
-            <DialogTitle id='form-dialog-title'>Add User to Namespace</DialogTitle>
-            <DialogContent>
-                <DialogContentText>
-                    Enter the Login Name of the User you want to add.
-                    </DialogContentText>
-                <TextField
-                    autoFocus
-                    margin='dense'
-                    id='name'
-                    autoComplete='off'
-                    label='Open VSX User'
-                    fullWidth
-                    onChange={handleUserSearch}
-                    onKeyDown={(e: KeyboardEvent) => {
-                        if (e.key === "Enter" && foundUsers.length === 1) {
-                            e.preventDefault();
-                            addUser(foundUsers[0]);
-                        }
-                    }}
-                />
-            </DialogContent>
-            <DialogActions>
-                <Button onClick={onClose} color='secondary'>
-                    Cancel
-                </Button>
-            </DialogActions>
-        </Dialog>
-        <Popper
-            sx={{ zIndex: 'tooltip' }}
-            open={showUserPopper}
-            anchorEl={popperTarget}
-            placement='bottom'
-            transition>
-            {({ TransitionProps }) => (
-                <Fade {...TransitionProps} timeout={350}>
-                    <Paper sx={{ display: 'flex', flexDirection: 'column', width: 350 }}>
-                        {
-                            foundUsers.filter(props.filterUsers).map(foundUser => {
-                                return <Box
-                                    onClick={() => addUser(foundUser)}
-                                    key={'found' + foundUser.loginName}
-                                    sx={{
-                                        display: 'flex',
-                                        height: 60,
-                                        alignItems: 'center',
-                                        '&:hover': {
-                                            cursor: 'pointer',
-                                            bgcolor: 'action.hover'
-                                        }
-                                    }}
-                                >
-                                    <Box flex='1' marginLeft='10px'>
-                                        <Box fontWeight='bold'>
-                                            {foundUser.loginName}
-                                        </Box>
-                                        <Box fontSize='0.75rem'>
-                                            {foundUser.fullName}
-                                        </Box>
-                                    </Box>
-                                    <Box flex='1'>
-                                        <Avatar variant='rounded' src={foundUser.avatarUrl} />
-                                    </Box>
-                                </Box>;
-                            })
-                        }
-                    </Paper>
-                </Fade>
-            )}
-        </Popper>
-    </>;
+    return (
+        <AddUserDialog
+            open={props.open}
+            title='Add Member'
+            description='Enter the Login Name of the User you want to add.'
+            existingUsers={existingUsers}
+            filterUsers={props.filterUsers}
+            onClose={props.onClose}
+            onAddUser={handleAddUser}
+        />
+    );
 };

package/src/pages/user/add-user-dialog.tsx

@@ -0,0 +1,141 @@
+/******************************************************************************
+ * 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, useState, useContext, useEffect, useRef } from 'react';
+import {
+    Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button,
+    TextField, Autocomplete, Box, Avatar
+} from '@mui/material';
+import type { UserData } from '../../extension-registry-types';
+import { MainContext } from '../../context';
+
+export interface AddUserDialogProps {
+    open: boolean;
+    title: string;
+    description: string;
+    existingUsers: UserData[];
+    onClose: () => void;
+    onAddUser: (user: UserData) => void;
+    filterUsers?: (user: UserData) => boolean;
+}
+
+export const AddUserDialog: FC<AddUserDialogProps> = ({
+    open,
+    title,
+    description,
+    existingUsers,
+    onClose,
+    onAddUser,
+    filterUsers: externalFilter
+}) => {
+    const { service, handleError } = useContext(MainContext);
+    const [options, setOptions] = useState<UserData[]>([]);
+    const [loading, setLoading] = useState(false);
+    const abortController = useRef<AbortController>(new AbortController());
+    const debounceTimeout = useRef<ReturnType<typeof setTimeout>>();
+
+    useEffect(() => {
+        return () => {
+            abortController.current.abort();
+            clearTimeout(debounceTimeout.current);
+        };
+    }, []);
+
+    const isUserExcluded = (user: UserData) =>
+        existingUsers.some(u => u.loginName === user.loginName && u.provider === user.provider)
+        || (externalFilter && !externalFilter(user));
+
+    const handleInputChange = (_: unknown, value: string) => {
+        clearTimeout(debounceTimeout.current);
+        if (!value) {
+            setOptions([]);
+            setLoading(false);
+            return;
+        }
+        setLoading(true);
+        debounceTimeout.current = setTimeout(async () => {
+            const users = await service.getUserByName(abortController.current, value);
+            if (users) {
+                setOptions(users);
+            }
+            setLoading(false);
+        }, 300);
+    };
+
+    const handleSelect = (_: unknown, user: UserData | null) => {
+        if (!user) return;
+        if (isUserExcluded(user)) {
+            handleError({ message: `User ${user.loginName} is already added.` });
+            return;
+        }
+        onAddUser(user);
+        onClose();
+    };
+
+    const handleClose = () => {
+        setOptions([]);
+        onClose();
+    };
+
+    return (
+        <Dialog onClose={handleClose} open={open} maxWidth='sm' fullWidth>
+            <DialogTitle>{title}</DialogTitle>
+            <DialogContent>
+                <DialogContentText>{description}</DialogContentText>
+                <Autocomplete<UserData>
+                    options={options}
+                    loading={loading}
+                    filterOptions={(opts) => opts.filter(u => !isUserExcluded(u))}
+                    getOptionLabel={(option) => option.loginName}
+                    isOptionEqualToValue={(option, value) =>
+                        option.loginName === value.loginName && option.provider === value.provider
+                    }
+                    onInputChange={handleInputChange}
+                    onChange={handleSelect}
+                    renderOption={(props, user) => (
+                        <Box
+                            component='li'
+                            {...props}
+                            key={user.loginName + user.provider}
+                            sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}
+                        >
+                            <Avatar
+                                variant='rounded'
+                                src={user.avatarUrl}
+                                sx={{ width: 36, height: 36 }}
+                            />
+                            <Box>
+                                <Box fontWeight='bold'>{user.loginName}</Box>
+                                <Box fontSize='0.75rem' color='text.secondary'>{user.fullName}</Box>
+                            </Box>
+                        </Box>
+                    )}
+                    renderInput={(params) => (
+                        <TextField
+                            {...params}
+                            autoFocus
+                            margin='dense'
+                            label='Search User'
+                            fullWidth
+                        />
+                    )}
+                />
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={handleClose} color='secondary'>
+                    Cancel
+                </Button>
+            </DialogActions>
+        </Dialog>
+    );
+};

package/src/pages/user/avatar.tsx

@@ -11,8 +11,8 @@
 import { FunctionComponent, useContext, useRef, useState } from 'react';
 import { Avatar, Menu, Typography, MenuItem, Link, Divider, IconButton } from '@mui/material';
 import { Link as RouteLink } from 'react-router-dom';
-import { UserSettingsRoutes } from './user-settings';
-import { AdminDashboardRoutes } from '../admin-dashboard/admin-dashboard';
+import { UserSettingsRoutes } from './user-settings-routes';
+import { AdminDashboardRoutes } from '../admin-dashboard/admin-routes';
 import { MainContext } from '../../context';
 import { LogoutForm } from './logout';
 

package/src/pages/user/user-namespace-extension-list-item.tsx

@@ -16,9 +16,9 @@ import { Link as RouteLink, useNavigate } from 'react-router-dom';
 import { MainContext } from '../../context';
 import { createRoute } from '../../utils';
 import { Timestamp } from '../../components/timestamp';
-import { ExtensionDetailRoutes } from '../extension-detail/extension-detail';
+import { ExtensionDetailRoutes } from '../extension-detail/extension-detail-routes';
 import DeleteIcon from '@mui/icons-material/Delete';
-import { UserSettingsRoutes } from './user-settings';
+import { UserSettingsRoutes } from './user-settings-routes';
 
 const getOpacity = (extension: Extension) => {
     if (extension.deprecated) {

package/src/pages/user/user-setting-tabs.tsx

@@ -12,7 +12,7 @@ import { ChangeEvent, ReactElement } from 'react';
 import { Tabs, Tab, useTheme, useMediaQuery } from '@mui/material';
 import { useNavigate, useParams } from 'react-router-dom';
 import { createRoute } from '../../utils';
-import { UserSettingsRoutes } from './user-settings';
+import { UserSettingsRoutes } from './user-settings-routes';
 
 export const UserSettingTabs = (): ReactElement => {
 
@@ -42,6 +42,7 @@ export const UserSettingTabs = (): ReactElement => {
             <Tab value='tokens' label='Access Tokens' />
             <Tab value='namespaces' label='Namespaces' />
             <Tab value='extensions' label='Extensions' />
+            <Tab value='customers' label='Rate Limiting' />
         </Tabs>
     );
 };

package/src/pages/user/user-settings-customer-detail.tsx

@@ -0,0 +1,39 @@
+/******************************************************************************
+ * 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 { Box, Typography } from '@mui/material';
+import type { Customer } from '../../extension-registry-types';
+import { useUsageStats } from '../../components/rate-limiting/usage-stats/use-usage-stats';
+import { UsageStats } from '../../components/rate-limiting/customer';
+
+export interface UserSettingsCustomerDetailProps {
+    customer: Customer;
+}
+
+export const UserSettingsCustomerDetail: FC<UserSettingsCustomerDetailProps> = ({ customer }) => {
+    const { usageStats, startDate, setStartDate } = useUsageStats(customer.name);
+
+    return (
+        <Box sx={{ flex: 5, pl: { xs: 0, lg: 2 } }}>
+            <Typography variant='h4' sx={{ mb: 2 }}>{customer.name}</Typography>
+            <UsageStats
+                usageStats={usageStats}
+                customer={customer}
+                startDate={startDate}
+                onStartDateChange={setStartDate}
+                compact
+            />
+        </Box>
+    );
+};

package/src/pages/user/user-settings-customers.tsx

@@ -0,0 +1,120 @@
+/******************************************************************************
+ * 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, ReactNode, useContext, useEffect, useState, useRef } from 'react';
+import { Box, Typography, Tabs, Tab, useTheme, useMediaQuery } from '@mui/material';
+import { Customer } from '../../extension-registry-types';
+import { DelayedLoadIndicator } from '../../components/delayed-load-indicator';
+import { MainContext } from '../../context';
+import { UserSettingsCustomerDetail } from './user-settings-customer-detail';
+
+interface CustomerTabsProps {
+    chosenCustomer: Customer;
+    onChange: (value: Customer) => void;
+    customers: Customer[];
+}
+
+const CustomersTabs = (props: CustomerTabsProps) => {
+    const theme = useTheme();
+    const isATablet = useMediaQuery(theme.breakpoints.down('md'));
+    return (
+        <Tabs
+            orientation={isATablet ? 'horizontal' : 'vertical'}
+            value={props.chosenCustomer}
+            onChange={(event, value) => props.onChange(value)}
+            variant={isATablet ? 'scrollable' : 'standard'}
+            scrollButtons={isATablet ? 'auto' : false}
+            indicatorColor='secondary'
+            sx={{ width: { xs: '80%', sm: '80%', md: '80%', lg: '160px', xl: '160px' } }}
+        >
+            {props.customers.map(customer => (
+                <Tab
+                    sx={{
+                        root: { minHeight: '24px' },
+                        wrapper: { textTransform: 'none' }
+                    }}
+                    key={'cust-' + customer.name}
+                    value={customer}
+                    label={customer.name}
+                />
+            ))}
+        </Tabs>
+    );
+};
+
+export const UserSettingsCustomers: FunctionComponent = () => {
+    const [loading, setLoading] = useState(true);
+    const [customers, setCustomers] = useState<Customer[]>([]);
+    const [chosenCustomer, setChosenCustomer] = useState<Customer>();
+    const { service, handleError } = useContext(MainContext);
+    const abortController = useRef<AbortController>(new AbortController());
+
+    useEffect(() => {
+        loadCustomers();
+        return () => {
+            abortController.current.abort();
+        };
+    }, []);
+
+    const loadCustomers = async (): Promise<void> => {
+        try {
+            const data = await service.getCustomers(abortController.current);
+            const chosen = data.length ? data[0] : undefined;
+            setCustomers(data);
+            setChosenCustomer(chosen);
+            setLoading(false);
+        } catch (err) {
+            handleError(err);
+            setLoading(false);
+        }
+    };
+
+    let customerContainer: ReactNode = null;
+    if (customers.length > 0 && chosenCustomer) {
+        customerContainer = (
+            <Box
+                sx={{
+                    display: 'flex',
+                    width: '100%',
+                    flexDirection: { xs: 'column', sm: 'column', md: 'column', lg: 'row', xl: 'row' },
+                    alignItems: { xs: 'center', sm: 'center', md: 'center', lg: 'normal', xl: 'normal' }
+                }}
+            >
+                <CustomersTabs
+                    chosenCustomer={chosenCustomer}
+                    customers={customers}
+                    onChange={setChosenCustomer}
+                />
+                <UserSettingsCustomerDetail customer={chosenCustomer} />
+            </Box>
+        );
+    } else if (!loading) {
+        customerContainer = (
+            <Typography variant='body1'>
+                You are not a member of any rate limiting customer group.
+            </Typography>
+        );
+    }
+
+    return (
+        <>
+            <Box>
+                <Typography variant='h5' gutterBottom>Rate Limiting</Typography>
+            </Box>
+            <Box mt={2}>
+                <DelayedLoadIndicator loading={loading} />
+                {customerContainer}
+            </Box>
+        </>
+    );
+};

package/src/pages/user/user-settings-delete-extension.tsx

@@ -15,7 +15,7 @@ import { isError, Extension, TargetPlatformVersion } from '../../extension-regis
 import { DelayedLoadIndicator } from '../../components/delayed-load-indicator';
 import { ExtensionVersionContainer } from '../admin-dashboard/extension-version-container';
 import { useNavigate } from 'react-router';
-import { UserSettingsRoutes } from './user-settings';
+import { UserSettingsRoutes } from './user-settings-routes';
 
 export const UserSettingsDeleteExtension: FunctionComponent<UserSettingsDeleteExtensionProps> = props => {
     const navigate = useNavigate();

package/src/pages/user/user-settings-namespace-detail.tsx

@@ -14,7 +14,7 @@ import { Box, Button, Link, Paper, Grid, Typography } from '@mui/material';
 import { styled, Theme } from '@mui/material/styles';
 import WarningIcon from '@mui/icons-material/Warning';
 import { UserNamespaceExtensionListContainer } from './user-namespace-extension-list';
-import { AdminDashboardRoutes } from '../admin-dashboard/admin-dashboard';
+import { AdminDashboardRoutes } from '../admin-dashboard/admin-routes';
 import { Namespace, UserData } from '../../extension-registry-types';
 import { NamespaceChangeDialog } from '../admin-dashboard/namespace-change-dialog';
 import { UserNamespaceMemberList } from './user-namespace-member-list';
@@ -23,6 +23,8 @@ import { UserNamespaceDetails } from './user-namespace-details';
 export interface NamespaceDetailConfig {
     defaultMemberRole?: 'contributor' | 'owner';
 }
+
+// eslint-disable-next-line react-refresh/only-export-components
 export const NamespaceDetailConfigContext = createContext<NamespaceDetailConfig>({});
 
 const NamespaceDetailContainer = styled(Grid)(({ theme }: { theme: Theme }) => ({

package/src/pages/user/user-settings-routes.ts

@@ -0,0 +1,25 @@
+/******************************************************************************
+ * 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 { createRoute } from '../../utils';
+
+export namespace UserSettingsRoutes {
+    export const ROOT = createRoute(['user-settings']);
+    export const MAIN = createRoute([ROOT, ':tab']);
+    export const PROFILE = createRoute([ROOT, 'profile']);
+    export const TOKENS = createRoute([ROOT, 'tokens']);
+    export const NAMESPACES = createRoute([ROOT, 'namespaces']);
+    export const EXTENSIONS = createRoute([ROOT, 'extensions']);
+    export const DELETE_EXTENSION = createRoute([ROOT, 'extensions', ':namespace', ':extension', 'delete']);
+    export const CUSTOMERS = createRoute([ROOT, 'customers']);
+}

package/src/pages/user/user-settings-tokens.tsx

@@ -16,7 +16,7 @@ import { Timestamp } from '../../components/timestamp';
 import { PersonalAccessToken } from '../../extension-registry-types';
 import { MainContext } from '../../context';
 import { GenerateTokenDialog } from './generate-token-dialog';
-import { UserSettingsRoutes } from './user-settings';
+import { UserSettingsRoutes } from './user-settings-routes';
 import styled from '@mui/material/styles/styled';
 
 const link = ({ theme }: { theme: Theme }) => ({
@@ -105,7 +105,7 @@ export const UserSettingsTokens: FunctionComponent = () => {
             <Box alignItems='center' overflow='auto'>
                 <Typography sx={{ fontWeight: 'bold', overflow: 'hidden', textOverflow: 'ellipsis' }}>{token.description}</Typography>
                 <Typography variant='body2'>Created: <Timestamp value={token.createdTimestamp}/></Typography>
-                <Typography variant='body2'>Expires: {token.expiresTimestamp ? <Timestamp value={token.expiresTimestamp} isFutureTime={true} /> : 'never'}</Typography>
+                <Typography variant='body2'>Expires: {token.expiresTimestamp ? <Timestamp value={token.expiresTimestamp}/> : 'never'}</Typography>
                 <Typography variant='body2'>Accessed: {token.accessedTimestamp ? <Timestamp value={token.accessedTimestamp}/> : 'never'}</Typography>
             </Box>
             <Box display='flex' alignItems='center'>
@@ -216,10 +216,3 @@ export const UserSettingsTokens: FunctionComponent = () => {
         </Dialog>
     </>;
 };
-
-export namespace UserSettingsTokens {
-    export interface State {
-        tokens: PersonalAccessToken[];
-        loading: boolean;
-    }
-}

package/src/pages/user/user-settings.tsx

@@ -12,28 +12,18 @@ import { FunctionComponent, ReactNode, useContext } from 'react';
 import { Helmet } from 'react-helmet-async';
 import { Grid, Container, Box, Typography, Link } from '@mui/material';
 import { useParams } from 'react-router-dom';
-import { createRoute } from '../../utils';
 import { DelayedLoadIndicator } from '../../components/delayed-load-indicator';
 import { UserSettingTabs } from './user-setting-tabs';
 import { UserSettingsTokens } from './user-settings-tokens';
 import { UserSettingsProfile } from './user-settings-profile';
 import { UserSettingsNamespaces } from './user-settings-namespaces';
 import { UserSettingsExtensions } from './user-settings-extensions';
+import { UserSettingsCustomers } from './user-settings-customers';
 import { MainContext } from '../../context';
 import { UserData } from '../../extension-registry-types';
 import { LoginComponent } from '../../default/login';
 import { UserSettingsDeleteExtension } from './user-settings-delete-extension';
 
-export namespace UserSettingsRoutes {
-    export const ROOT = createRoute(['user-settings']);
-    export const MAIN = createRoute([ROOT, ':tab']);
-    export const PROFILE = createRoute([ROOT, 'profile']);
-    export const TOKENS = createRoute([ROOT, 'tokens']);
-    export const NAMESPACES = createRoute([ROOT, 'namespaces']);
-    export const EXTENSIONS = createRoute([ROOT, 'extensions']);
-    export const DELETE_EXTENSION = createRoute([ROOT, 'extensions', ':namespace', ':extension', 'delete']);
-}
-
 export const UserSettings: FunctionComponent<UserSettingsProps> = props => {
 
     const { pageSettings, user, loginProviders } = useContext(MainContext);
@@ -53,6 +43,8 @@ export const UserSettings: FunctionComponent<UserSettingsProps> = props => {
                 return <UserSettingsNamespaces />;
             case 'extensions':
                 return <UserSettingsExtensions />;
+            case 'customers':
+                return <UserSettingsCustomers />;
             default:
                 return null;
         }
@@ -79,7 +71,7 @@ return (<Link color='secondary' href={href} onClick={onClick}>log in</Link>);
             </Container> : null;
         }
 
-        return <Container>
+        return <Container maxWidth={'xl'}>
             <Box mt={6}>
                 <Grid container sx={{ flexDirection: { xs: 'column', sm: 'column', md: 'column', lg: 'row', xl: 'row' } }}>
                     <Grid item sx={{ mb: { xs: '3rem', sm: '3rem', md: '3rem', lg: '3rem', xl: 0 } }}>