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

package/src/components/scan-admin/scan-card/scan-card-header.tsx

@@ -12,8 +12,9 @@
  ********************************************************************************/
 
 import { FC, useState } from 'react';
-import { Box, Typography, Chip, CircularProgress } from '@mui/material';
+import { Box, Typography, Chip, CircularProgress, Link } from '@mui/material';
 import {
+    AdminPanelSettings as AdminPanelIcon,
     CheckCircle as CheckCircleIcon,
     GppMaybe as WarningIcon,
     Block as BlockIcon,
@@ -30,6 +31,9 @@ import {
     getHypotheticalStatus,
     getStatusColorSx,
 } from './utils';
+import { createRoute } from '../../../utils';
+import { AdminDashboardRoutes } from '../../../pages/admin-dashboard/admin-dashboard';
+import { ExtensionDetailRoutes } from '../../../pages/extension-detail/extension-detail';
 
 interface ScanCardHeaderProps {
     scan: ScanResult;
@@ -61,6 +65,12 @@ export const ScanCardHeader: FC<ScanCardHeaderProps> = ({ scan }) => {
     const [imageError, setImageError] = useState(false);
 
     const hasValidIcon = scan.extensionIcon && !imageError;
+    const extensionRoute = createRoute([ExtensionDetailRoutes.ROOT, scan.namespace, scan.extensionName]);
+    const adminRoute = createRoute([AdminDashboardRoutes.ROOT, 'extensions'],
+        [
+            { key: "namespace", value: scan.namespace },
+            { key: "extension", value: scan.extensionName }
+        ]);
 
     return (
         <>
@@ -97,8 +107,8 @@ export const ScanCardHeader: FC<ScanCardHeaderProps> = ({ scan }) => {
                 )}
             </Box>
 
-            {/* Columns 2-4: Display Name and Namespace */}
-            <Box sx={{ gridRow: '1', gridColumn: '2 / 5', minWidth: 0 }}>
+            {/* Columns 2-5: Display Name and Namespace */}
+            <Box sx={{ gridRow: '1', gridColumn: 'span 4', minWidth: 0 }}>
                 <ConditionalTooltip title={scan.displayName} arrow>
                     <Typography
                         variant='h6'
@@ -122,15 +132,34 @@ export const ScanCardHeader: FC<ScanCardHeaderProps> = ({ scan }) => {
                             whiteSpace: 'nowrap',
                         }}
                     >
-                        {scan.namespace}.{scan.extensionName}
+                        <Link
+                            href={extensionRoute || undefined}
+                            rel='noopener noreferrer'
+                            variant='body2'
+                        >
+                            {scan.namespace}.{scan.extensionName}
+                        </Link>
+
+                        {adminRoute !== undefined &&
+                            <Link
+                                href={adminRoute}
+                                rel='noopener noreferrer'
+                                variant='body2'
+                            >
+                                <AdminPanelIcon sx={{
+                                    verticalAlign: 'bottom',
+                                    ml: '3px'
+                                }} />
+                            </Link>
+                        }
                     </Typography>
                 </ConditionalTooltip>
             </Box>
 
-            {/* Column 5: Status Badge */}
+            {/* Column 6: Status Badge */}
             <Box sx={{
                 gridRow: '1',
-                gridColumn: '5',
+                gridColumn: '6',
                 display: 'flex',
                 flexDirection: 'column',
                 alignItems: 'flex-end',

package/src/components/scan-admin/scan-card/scan-card.tsx

@@ -110,10 +110,10 @@ export const ScanCard: FunctionComponent<ScanCardProps> = ({
                     '&:last-child': { pb: showExpandButton ? 0 : 5 },
                 }}
             >
-                {/* 3 Row x 5 Column Grid Layout */}
+                {/* 3 Row x 6 Column Grid Layout */}
                 <Box sx={{
                     display: 'grid',
-                    gridTemplateColumns: `${ICON_SIZE}px 1fr 1fr 1fr 180px`,
+                    gridTemplateColumns: `${ICON_SIZE}px 1fr 1fr 1fr 1fr 180px`,
                     gridTemplateRows: 'auto auto auto',
                     gap: 2,
                     alignItems: 'start',

package/src/components/timestamp.tsx

@@ -15,16 +15,18 @@ import { toRelativeTime, toLocalTime } from '../utils';
 
 export const Timestamp: FunctionComponent<TimestampProps> = props => {
     const sx = props.sx ?? [];
+    const isFutureTime = props.isFutureTime ?? false;
     const timestamp = props.value;
     return <Box
         component='span'
         title={toLocalTime(timestamp)}
         sx={[...(Array.isArray(sx) ? sx : [sx])]}>
-        {toRelativeTime(timestamp)}
+        {toRelativeTime(timestamp, isFutureTime)}
     </Box>;
 };
 
 export interface TimestampProps {
     value: string;
+    isFutureTime?: boolean;
     sx?: SxProps<Theme>;
 }

package/src/default/menu-content.tsx

@@ -8,10 +8,9 @@
  * SPDX-License-Identifier: EPL-2.0
  ********************************************************************************/
 
-import { FunctionComponent, PropsWithChildren, useContext } from 'react';
+import { FunctionComponent, PropsWithChildren, useContext, useRef } from 'react';
 import { Typography, MenuItem, Link, Button, IconButton, Accordion, AccordionSummary, Avatar, AccordionDetails } from '@mui/material';
-import { useLocation } from 'react-router-dom';
-import { Link as RouteLink } from 'react-router-dom';
+import { useLocation, Link as RouteLink  } from 'react-router-dom';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import GitHubIcon from '@mui/icons-material/GitHub';
 import MenuBookIcon from '@mui/icons-material/MenuBook';
@@ -31,21 +30,13 @@ import { LogoutForm } from '../pages/user/logout';
 import { LoginComponent } from './login';
 
 //-------------------- Mobile View --------------------//
-
-export const MobileMenuItem = styled(MenuItem)({
-    cursor: 'auto',
-    '&>a': {
-        textDecoration: 'none'
-    }
-});
-
 export const itemIcon = {
     mr: 1,
     width: '16px',
     height: '16px',
 };
 
-export const MobileMenuItemText: FunctionComponent<PropsWithChildren> = ({ children }) => {
+export const MenuItemText: FunctionComponent<PropsWithChildren> = ({ children }) => {
     return (
         <Typography variant='body2' color='text.primary' sx={{ display: 'flex', alignItems: 'center', textTransform: 'none' }}>
             {children}
@@ -56,6 +47,7 @@ export const MobileMenuItemText: FunctionComponent<PropsWithChildren> = ({ child
 export const MobileUserAvatar: FunctionComponent = () => {
     const context = useContext(MainContext);
     const user = context.user;
+    const logoutFormRef = useRef<HTMLFormElement>(null);
     if (!user) {
         return null;
     }
@@ -66,52 +58,46 @@ export const MobileUserAvatar: FunctionComponent = () => {
             aria-controls='user-actions'
             id='user-avatar'
         >
-            <MobileMenuItemText>
+            <MenuItemText>
                 <Avatar
                     src={user.avatarUrl}
                     alt={user.loginName}
                     variant='rounded'
                     sx={itemIcon} />
                 {user.loginName}
-            </MobileMenuItemText>
+            </MenuItemText>
         </AccordionSummary>
         <AccordionDetails>
-            <MobileMenuItem>
-                <Link href={user.homepage}>
-                    <MobileMenuItemText>
-                        <GitHubIcon sx={itemIcon} />
-                        {user.loginName}
-                    </MobileMenuItemText>
-                </Link>
-            </MobileMenuItem>
-            <MobileMenuItem>
-                <RouteLink to={UserSettingsRoutes.PROFILE}>
-                    <MobileMenuItemText>
-                        <SettingsIcon sx={itemIcon} />
-                        Settings
-                    </MobileMenuItemText>
-                </RouteLink>
-            </MobileMenuItem>
+            <MenuItem component={Link} href={user.homepage}>
+                <MenuItemText>
+                    <GitHubIcon sx={itemIcon} />
+                    {user.loginName}
+                </MenuItemText>
+            </MenuItem>
+            <MenuItem component={RouteLink} to={UserSettingsRoutes.PROFILE}>
+                <MenuItemText>
+                    <SettingsIcon sx={itemIcon} />
+                    Settings
+                </MenuItemText>
+            </MenuItem>
             {
                 user.role === 'admin'
-                    ? <MobileMenuItem>
-                        <RouteLink to={AdminDashboardRoutes.MAIN}>
-                            <MobileMenuItemText>
-                                <AdminPanelSettingsIcon sx={itemIcon} />
-                                Admin Dashboard
-                            </MobileMenuItemText>
-                        </RouteLink>
-                    </MobileMenuItem>
+                    ? <MenuItem component={RouteLink} to={AdminDashboardRoutes.MAIN}>
+                        <MenuItemText>
+                            <AdminPanelSettingsIcon sx={itemIcon} />
+                            Admin Dashboard
+                        </MenuItemText>
+                    </MenuItem>
                     : null
             }
-            <MobileMenuItem>
-                <LogoutForm>
-                    <MobileMenuItemText>
+            <MenuItem onClick={() => logoutFormRef.current?.submit()}>
+                <LogoutForm ref={logoutFormRef}>
+                    <MenuItemText>
                         <LogoutIcon sx={itemIcon} />
                         Log Out
-                    </MobileMenuItemText>
+                    </MenuItemText>
                 </LogoutForm>
-            </MobileMenuItem>
+            </MenuItem>
         </AccordionDetails>
     </Accordion>;
 };
@@ -125,63 +111,51 @@ export const MobileMenuContent: FunctionComponent = () => {
             user ? (
                 <MobileUserAvatar />
             ) : (
-                <MobileMenuItem>
-                    <LoginComponent
-                        loginProviders={loginProviders}
-                        renderButton={(href, onClick) => {
-                            return (<Link href={href} onClick={onClick}>
-                                <MobileMenuItemText>
-                                    <AccountBoxIcon sx={itemIcon} />
-                                    Log In
-                                </MobileMenuItemText>
-                            </Link>);
-                        }}
-                    />
-                </MobileMenuItem>
+                <LoginComponent
+                    loginProviders={loginProviders}
+                    renderButton={(href, onClick) => (
+                        <MenuItem component={Link} href={href} onClick={onClick}>
+                            <MenuItemText>
+                                <AccountBoxIcon sx={itemIcon} />
+                                Log In
+                            </MenuItemText>
+                        </MenuItem>
+                    )}
+                />
             )
         )}
         {loginProviders && !location.pathname.startsWith(UserSettingsRoutes.ROOT) && (
-            <MobileMenuItem>
-                <RouteLink to='/user-settings/extensions'>
-                    <MobileMenuItemText>
-                        <PublishIcon sx={itemIcon} />
-                        Publish Extension
-                    </MobileMenuItemText>
-                </RouteLink>
-            </MobileMenuItem>
+            <MenuItem component={RouteLink} to='/user-settings/extensions'>
+                <MenuItemText>
+                    <PublishIcon sx={itemIcon} />
+                    Publish Extension
+                </MenuItemText>
+            </MenuItem>
         )}
-        <MobileMenuItem>
-            <Link target='_blank' href='https://github.com/eclipse/openvsx'>
-                <MobileMenuItemText>
-                    <GitHubIcon sx={itemIcon} />
-                    Source Code
-                </MobileMenuItemText>
-            </Link>
-        </MobileMenuItem>
-        <MobileMenuItem>
-            <Link href='https://github.com/eclipse/openvsx/wiki'>
-                <MobileMenuItemText>
-                    <MenuBookIcon sx={itemIcon} />
-                    Documentation
-                </MobileMenuItemText>
-            </Link>
-        </MobileMenuItem>
-        <MobileMenuItem>
-            <Link href='https://join.slack.com/t/openvsxworkinggroup/shared_invite/zt-2y07y1ggy-ct3IfJljjGI6xWUQ9llv6A'>
-                <MobileMenuItemText>
-                    <ForumIcon sx={itemIcon} />
-                    Slack Workspace
-                </MobileMenuItemText>
-            </Link>
-        </MobileMenuItem>
-        <MobileMenuItem>
-            <RouteLink to='/about'>
-                <MobileMenuItemText>
-                    <InfoIcon sx={itemIcon} />
-                    About This Service
-                </MobileMenuItemText>
-            </RouteLink>
-        </MobileMenuItem>
+        <MenuItem component={Link} href='https://github.com/eclipse/openvsx' target='_blank'>
+            <MenuItemText>
+                <GitHubIcon sx={itemIcon} />
+                Source Code
+            </MenuItemText>
+        </MenuItem>
+        <MenuItem component={Link} href='https://github.com/eclipse/openvsx/wiki'>
+            <MenuItemText>
+                <MenuBookIcon sx={itemIcon} />
+                Documentation
+            </MenuItemText>
+        </MenuItem>
+        <MenuItem component={Link} href='https://join.slack.com/t/openvsxworkinggroup/shared_invite/zt-2y07y1ggy-ct3IfJljjGI6xWUQ9llv6A'>
+            <MenuItemText>
+                <ForumIcon sx={itemIcon} />
+                Slack Workspace
+            </MenuItemText>
+        </MenuItem>
+        <MenuItem component={RouteLink} to='/about'>
+            <MenuItemText>
+                <InfoIcon sx={itemIcon} />
+                About This Service
+            </MenuItemText>
+        </MenuItem>
     </>;
 };
 

package/src/extension-registry-service.ts

@@ -397,7 +397,7 @@ export class ExtensionRegistryService {
             payload: extensionPackage,
             headers: headers,
             endpoint: createAbsoluteURL([this.serverUrl, 'api', 'user', 'publish'])
-        });
+        }, false); // do not retry publishing an extension but show the explicit error received
     }
 
     async createNamespace(abortController: AbortController, name: string): Promise<Readonly<SuccessResult | ErrorResult>> {

package/src/extension-registry-types.ts

@@ -180,6 +180,8 @@ export interface PersonalAccessToken {
     value?: string;
     createdTimestamp: TimestampString;
     accessedTimestamp?: TimestampString;
+    expiresTimestamp?: TimestampString;
+    notified?: boolean;
     description: string;
     deleteTokenUrl: UrlString;
 }

package/src/hooks/scan-admin/use-query-params-state.ts

@@ -0,0 +1,55 @@
+/******************************************************************************
+ * 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 { useState } from 'react';
+
+const getQuery = () => {
+    if (typeof window !== 'undefined') {
+        return new URLSearchParams(window.location.search);
+    }
+    return new URLSearchParams();
+};
+
+const getQueryStringVal = (key: string): string | null => {
+    return getQuery().get(key);
+};
+
+const useQueryParam = (
+    key: string,
+    defaultVal: string
+): [string, (val: string) => void] => {
+    const [query, setQuery] = useState(getQueryStringVal(key) || defaultVal);
+
+    const updateUrl = (newVal: string) => {
+        setQuery(newVal);
+
+        const query = getQuery();
+
+        if (newVal.trim() !== '') {
+            query.set(key, newVal);
+        } else {
+            query.delete(key);
+        }
+
+        // This check is necessary if using the hook with Gatsby
+        if (typeof window !== 'undefined') {
+            const { protocol, pathname, host } = window.location;
+            const newUrl = `${protocol}//${host}${pathname}?${query.toString()}`;
+            window.history.pushState({}, '', newUrl);
+        }
+    };
+
+    return [query, updateUrl];
+};
+
+export default useQueryParam;

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

@@ -34,7 +34,7 @@ import { Customers } from './customers/customers';
 import { UsageStatsView } from './usage-stats/usage-stats';
 import { Logs } from './logs/logs';
 import { LoginComponent } from "../../default/login";
-import AccountBoxIcon from "@mui/icons-material/AccountBox";
+import AccountBoxIcon from '@mui/icons-material/AccountBox';
 
 export namespace AdminDashboardRoutes {
     export const ROOT = 'admin-dashboard';
@@ -109,6 +109,7 @@ export const AdminDashboard: FunctionComponent<AdminDashboardProps> = props => {
                     <Routes>
                         <Route path='/namespaces' element={<NamespaceAdmin/>} />
                         <Route path='/extensions' element={<ExtensionAdmin/>} />
+                        <Route path='/extensions/:namespace/:extension' element={<ExtensionAdmin/>} />
                         <Route path='/publisher' element={<PublisherAdmin/>} />
                         <Route path='/scans' element={<ScanAdmin/>} />
                         <Route path='/tiers' element={<Tiers/>} />

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

@@ -16,6 +16,7 @@ import { MainContext } from '../../context';
 import { isError, Extension, TargetPlatformVersion } from '../../extension-registry-types';
 import { ExtensionVersionContainer } from './extension-version-container';
 import { StyledInput } from './namespace-input';
+import useQueryParam from '../../hooks/scan-admin/use-query-params-state';
 
 export const ExtensionAdmin: FunctionComponent = props => {
     const abortController = useRef<AbortController>(new AbortController());
@@ -27,12 +28,12 @@ export const ExtensionAdmin: FunctionComponent = props => {
 
     const [loading, setLoading] = useState(false);
 
-    const [extensionValue, setExtensionValue] = useState('');
+    const [extensionValue, setExtensionValue] = useQueryParam('extension', '');
     const handleExtensionChange = (value: string) => {
         setExtensionValue(value);
     };
 
-    const [namespaceValue, setNamespaceValue] = useState('');
+    const [namespaceValue, setNamespaceValue] = useQueryParam('namespace', '');
     const handleNamespaceChange = (value: string) => {
         setNamespaceValue(value);
     };
@@ -93,6 +94,7 @@ export const ExtensionAdmin: FunctionComponent = props => {
                 error={namespaceFieldError}
                 key='nsi'
                 onChange={handleNamespaceChange}
+                value={namespaceValue}
                 hideIconButton={true}
                 autoFocus={true} />,
             <ExtensionListSearchfield

package/src/pages/admin-dashboard/namespace-input.tsx

@@ -16,6 +16,7 @@ import { MainContext } from '../../context';
 interface InputProps {
     onSubmit?: (inputValue: string) => void;
     onChange: (inputValue: string) => void;
+    value?: string;
     hideIconButton?: boolean;
     error?: boolean;
     autoFocus?: boolean;
@@ -23,7 +24,7 @@ interface InputProps {
 }
 
 export const StyledInput: FunctionComponent<InputProps> = props => {
-    const [inputValue, setInputValue] = useState('');
+    const [inputValue, setInputValue] = useState(props.value || '');
     const { pageSettings } = useContext(MainContext);
     const onChangeInputValue = (ev: ChangeEvent<HTMLInputElement>) => {
         const inputValue = ev.target.value;
@@ -53,6 +54,7 @@ export const StyledInput: FunctionComponent<InputProps> = props => {
                     sx={{ flex: 1, pl: 1 }}
                     placeholder={props.placeholder}
                     onChange={onChangeInputValue}
+                    value={inputValue}
                     onKeyDown={(e: KeyboardEvent) => {
                         if (e.key === 'Enter' && props.onSubmit) {
                             props.onSubmit(inputValue);

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

@@ -46,7 +46,7 @@ export const ExtensionDetailOverview: FunctionComponent<ExtensionDetailOverviewP
                 name: getEngineDisplayName(engine),
                 version: engines[engine]
             }))
-            .filter((d) => d.name != null);
+            .filter((d) => d.name); // only display engines with a known display name
 
         return (<>
             <Grid item xs='auto'>

package/src/pages/extension-detail/extension-review-dialog.tsx

@@ -27,11 +27,7 @@ export const ExtensionReviewDialog: FunctionComponent<ExtensionReviewDialogProps
     const abortController = useRef<AbortController>(new AbortController());
 
     useEffect(() => {
-        document.addEventListener('keydown', handleEnter);
-        return () => {
-            abortController.current.abort();
-            document.removeEventListener('keydown', handleEnter);
-        };
+        return () => abortController.current.abort();
     }, []);
 
     const handleOpenButton = () => {
@@ -70,12 +66,6 @@ export const ExtensionReviewDialog: FunctionComponent<ExtensionReviewDialogProps
         setCommentError(commentError);
     };
 
-    const handleEnter = (e: KeyboardEvent) => {
-        if (e.code ===  'Enter') {
-            handlePost();
-        }
-    };
-
     if (!context.user) {
         return null;
     }
@@ -109,7 +99,7 @@ export const ExtensionReviewDialog: FunctionComponent<ExtensionReviewDialogProps
                     helperText={commentError}
                     onChange={handleCommentChange} />
             </DialogContent>
-            <DialogActions sx={{ justifyContent: { xs: 'center', sm: 'normal', md: 'normal', lg: 'normal', xl: 'normal' } }}>
+            <DialogActions sx={{ justifyContent: { xs: 'center', sm: 'end', md: 'end', lg: 'end', xl: 'end' } }}>
                 <Button
                     onClick={handleCancel}
                     color='secondary' >

package/src/pages/user/avatar.tsx

@@ -9,7 +9,6 @@
  ********************************************************************************/
 
 import { FunctionComponent, useContext, useRef, useState } from 'react';
-import { styled } from '@mui/material/styles';
 import { Avatar, Menu, Typography, MenuItem, Link, Divider, IconButton } from '@mui/material';
 import { Link as RouteLink } from 'react-router-dom';
 import { UserSettingsRoutes } from './user-settings';
@@ -17,18 +16,12 @@ import { AdminDashboardRoutes } from '../admin-dashboard/admin-dashboard';
 import { MainContext } from '../../context';
 import { LogoutForm } from './logout';
 
-const AvatarRouteLink = styled(RouteLink)({
-    cursor: 'pointer',
-    textDecoration: 'none'
-});
-
-const AvatarMenuItem = styled(MenuItem)({ cursor: 'auto' });
-
 
 export const UserAvatar: FunctionComponent = () => {
     const [open, setOpen] = useState<boolean>(false);
     const context = useContext(MainContext);
     const avatarButton = useRef<any>();
+    const logoutFormRef = useRef<HTMLFormElement>(null);
 
     const handleAvatarClick = () => {
         setOpen(!open);
@@ -60,43 +53,45 @@ export const UserAvatar: FunctionComponent = () => {
             anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
             transformOrigin={{ vertical: 'top', horizontal: 'right' }}
             onClose={handleClose} >
-            <AvatarMenuItem>
-                <Link href={user.homepage} underline='hover'>
-                    <Typography variant='body2' color='text.primary'>
-                        Logged in as
-                    </Typography>
-                    <Typography variant='overline' color='text.primary'>
-                        {user.loginName}
-                    </Typography>
-                </Link>
-            </AvatarMenuItem>
+            <MenuItem
+                component={Link}
+                href={user.homepage}
+                sx={{
+                    display: 'block',
+                    '&:hover': {
+                        textDecoration: 'underline'
+                    }
+                }} >
+                <Typography variant='body2' color='text.primary' sx={{ mr: 1 }}>
+                    Logged in as
+                </Typography>
+                <Typography variant='overline' color='text.primary'>
+                    {user.loginName}
+                </Typography>
+            </MenuItem>
             <Divider />
-            <AvatarMenuItem>
-                <AvatarRouteLink onClick={handleClose} to={UserSettingsRoutes.PROFILE}>
-                    <Typography variant='button' color='text.primary'>
-                        Settings
-                    </Typography>
-                </AvatarRouteLink>
-            </AvatarMenuItem>
+            <MenuItem component={RouteLink} to={UserSettingsRoutes.PROFILE} onClick={handleClose}>
+                <Typography variant='button' color='text.primary'>
+                    Settings
+                </Typography>
+            </MenuItem>
             {
                 user.role && user.role === 'admin' ?
-                    <AvatarMenuItem>
-                        <AvatarRouteLink onClick={handleClose} to={AdminDashboardRoutes.MAIN}>
-                            <Typography variant='button' color='text.primary'>
-                                Admin Dashboard
-                            </Typography>
-                        </AvatarRouteLink>
-                    </AvatarMenuItem>
+                    <MenuItem component={RouteLink} to={AdminDashboardRoutes.MAIN} onClick={handleClose}>
+                        <Typography variant='button' color='text.primary'>
+                            Admin Dashboard
+                        </Typography>
+                    </MenuItem>
                     :
                     ''
             }
-            <AvatarMenuItem>
-                <LogoutForm>
+            <MenuItem onClick={() => logoutFormRef.current?.submit()}>
+                <LogoutForm ref={logoutFormRef}>
                     <Typography variant='button' sx={{ color: 'primary.dark' }}>
                         Log Out
                     </Typography>
                 </LogoutForm>
-            </AvatarMenuItem>
+            </MenuItem>
         </Menu>
     </>;
 };