From d406420223de7d05b77d6caaecb4148714bb3138 Mon Sep 17 00:00:00 2001 From: David Leek Date: Thu, 17 Apr 2025 11:59:35 +0200 Subject: [PATCH] chore: menu cleanups (#9792) --- .../component/admin/menu/CenteredNavLink.tsx | 24 --- .../layout/MainLayout/AdminMenu/AdminMenu.tsx | 156 ------------------ .../Header/DrawerMenu/DrawerMenu.module.scss | 14 -- .../Header/NavigationLink/NavigationLink.tsx | 92 ----------- .../Header/NavigationMenu/NavigationMenu.tsx | 122 -------------- 5 files changed, 408 deletions(-) delete mode 100644 frontend/src/component/admin/menu/CenteredNavLink.tsx delete mode 100644 frontend/src/component/layout/MainLayout/AdminMenu/AdminMenu.tsx delete mode 100644 frontend/src/component/menu/Header/NavigationLink/NavigationLink.tsx delete mode 100644 frontend/src/component/menu/Header/NavigationMenu/NavigationMenu.tsx diff --git a/frontend/src/component/admin/menu/CenteredNavLink.tsx b/frontend/src/component/admin/menu/CenteredNavLink.tsx deleted file mode 100644 index 851322680c..0000000000 --- a/frontend/src/component/admin/menu/CenteredNavLink.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { styled } from '@mui/material'; -import type { FC } from 'react'; -import { NavLink } from 'react-router-dom'; - -const StyledNavLink = styled(NavLink)(({ theme }) => ({ - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - width: '100%', - height: '100%', - textDecoration: 'none', - color: 'inherit', - padding: theme.spacing(0, 5), - '&.active': { - fontWeight: 'bold', - }, -})); - -export const CenteredNavLink: FC<{ - to: string; - children?: React.ReactNode; -}> = ({ to, children }) => { - return {children}; -}; diff --git a/frontend/src/component/layout/MainLayout/AdminMenu/AdminMenu.tsx b/frontend/src/component/layout/MainLayout/AdminMenu/AdminMenu.tsx deleted file mode 100644 index 88ed67ff71..0000000000 --- a/frontend/src/component/layout/MainLayout/AdminMenu/AdminMenu.tsx +++ /dev/null @@ -1,156 +0,0 @@ -import { Grid, styled, Paper, useMediaQuery, useTheme } from '@mui/material'; -import type { ReactNode } from 'react'; -import { Sticky } from 'component/common/Sticky/Sticky'; -import { AdminMenuNavigation } from './AdminNavigationItems'; -import { useNewAdminMenu } from '../../../../hooks/useNewAdminMenu'; - -const breakpointLgMinusPadding = 1250; -const breakpointLgMinusPaddingAdmin = 1550; -const breakpointXlMinusPadding = 1512; -const breakpointXlAdmin = 1812; -const breakpointXxl = 1856; - -const MainLayoutContent = styled(Grid)(({ theme }) => ({ - minWidth: 0, // this is a fix for overflowing flex - maxWidth: `${breakpointXlMinusPadding}px`, - margin: '0 auto', - paddingLeft: theme.spacing(2), - paddingRight: theme.spacing(2), - [theme.breakpoints.up(breakpointXxl)]: { - width: '100%', - }, - [theme.breakpoints.down(breakpointXxl)]: { - marginLeft: theme.spacing(7), - marginRight: theme.spacing(7), - }, - [theme.breakpoints.down('lg')]: { - maxWidth: `${breakpointLgMinusPadding}px`, - paddingLeft: theme.spacing(1), - paddingRight: theme.spacing(1), - }, - [theme.breakpoints.down(1024)]: { - marginLeft: 0, - marginRight: 0, - }, - [theme.breakpoints.down('sm')]: { - minWidth: '100%', - }, - minHeight: '94vh', -})); - -const AdminMainLayoutContent = styled(Grid)(({ theme }) => ({ - minWidth: 0, // this is a fix for overflowing flex - maxWidth: `${breakpointXlMinusPadding}px`, - margin: '0 auto', - paddingLeft: theme.spacing(2), - paddingRight: theme.spacing(2), - [theme.breakpoints.up(breakpointXxl)]: { - width: '100%', - }, - [theme.breakpoints.down(breakpointXxl)]: { - marginLeft: 0, - marginRight: 0, - }, - [theme.breakpoints.down('lg')]: { - maxWidth: `${breakpointLgMinusPadding}px`, - paddingLeft: theme.spacing(1), - paddingRight: theme.spacing(1), - }, - [theme.breakpoints.down(1024)]: { - marginLeft: 0, - marginRight: 0, - }, - [theme.breakpoints.down('sm')]: { - minWidth: '100%', - }, - minHeight: '94vh', -})); - -const StyledAdminMainGrid = styled(Grid)(({ theme }) => ({ - minWidth: 0, // this is a fix for overflowing flex - maxWidth: `${breakpointXlAdmin}px`, - margin: '0 auto', - paddingLeft: theme.spacing(2), - paddingRight: theme.spacing(2), - [theme.breakpoints.down('lg')]: { - maxWidth: `${breakpointLgMinusPaddingAdmin}px`, - paddingLeft: theme.spacing(1), - paddingRight: theme.spacing(1), - }, - [theme.breakpoints.down(1024)]: { - marginLeft: 0, - marginRight: 0, - }, - [theme.breakpoints.down('sm')]: { - minWidth: '100%', - }, - minHeight: '94vh', -})); - -const StyledMenuPaper = styled(Paper)(({ theme }) => ({ - width: '100%', - minWidth: 320, - padding: theme.spacing(3), - marginTop: theme.spacing(6.5), - borderRadius: `${theme.shape.borderRadiusLarge}px`, - boxShadow: 'none', -})); - -const StickyContainer = styled(Sticky)(({ theme }) => ({ - position: 'sticky', - top: 0, - background: theme.palette.background.application, - transition: 'padding 0.3s ease', -})); - -interface IWrapIfAdminSubpageProps { - children: ReactNode; -} - -export const WrapIfAdminSubpage = ({ children }: IWrapIfAdminSubpageProps) => { - const showOnlyAdminMenu = useNewAdminMenu(); - const theme = useTheme(); - const isSmallScreen = useMediaQuery(theme.breakpoints.down('lg')); - const showAdminMenu = !isSmallScreen && showOnlyAdminMenu; - - if (showAdminMenu) { - return ( - - {children} - - ); - } - - return {children}; -}; - -interface IAdminMenuProps { - children: ReactNode; -} - -export const AdminMenu = ({ children }: IAdminMenuProps) => { - const theme = useTheme(); - const isBreakpoint = useMediaQuery(theme.breakpoints.down(1352)); - const breakpointedSize = isBreakpoint ? 8 : 9; - const onClick = () => { - scrollTo({ - top: 0, - behavior: 'smooth', - }); - }; - - return ( - - - - - - - - - - {children} - - - ); -}; diff --git a/frontend/src/component/menu/Header/DrawerMenu/DrawerMenu.module.scss b/frontend/src/component/menu/Header/DrawerMenu/DrawerMenu.module.scss index 1f1ae94ce3..7c20a68608 100644 --- a/frontend/src/component/menu/Header/DrawerMenu/DrawerMenu.module.scss +++ b/frontend/src/component/menu/Header/DrawerMenu/DrawerMenu.module.scss @@ -39,20 +39,6 @@ color: inherit; } -.navigationLink { - text-decoration: none; - color: var(--drawer-link-inactive); - padding: var(--drawer-padding); - display: flex; - align-items: centre; -} - -.navigationLinkActive { - background-color: var(--drawer-link-active-bg); - color: var(--drawer-link-active); - width: 100%; -} - .navigationIcon { margin-right: 16px; fill: #635dc5; diff --git a/frontend/src/component/menu/Header/NavigationLink/NavigationLink.tsx b/frontend/src/component/menu/Header/NavigationLink/NavigationLink.tsx deleted file mode 100644 index c98d1d6d36..0000000000 --- a/frontend/src/component/menu/Header/NavigationLink/NavigationLink.tsx +++ /dev/null @@ -1,92 +0,0 @@ -import { ListItem, Link, styled } from '@mui/material'; -import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; -import { EnterpriseBadge } from 'component/common/EnterpriseBadge/EnterpriseBadge'; -import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; -import type { INavigationMenuItem } from 'interfaces/route'; -import { Link as RouterLink } from 'react-router-dom'; -interface INavigationLinkProps { - path: string; - text: string; - handleClose: () => void; - mode?: INavigationMenuItem['menu']['mode']; -} - -const StyledListItem = styled(ListItem)({ - minWidth: '150px', - height: '100%', - width: '100%', - margin: '0', - padding: '0', -}); - -const StyledLink = styled(RouterLink)(({ theme }) => ({ - textDecoration: 'none', - alignItems: 'center', - display: 'flex', - color: 'inherit', - height: '100%', - width: '100%', - '&&': { - // Override MenuItem's built-in padding. - color: theme.palette.text.primary, - padding: theme.spacing(1, 2), - }, -})); - -const StyledSpan = styled('span')(({ theme }) => ({ - width: '12.5px', - height: '12.5px', - display: 'block', - backgroundColor: theme.palette.primary.main, - marginRight: '1rem', - borderRadius: '2px', -})); - -const StyledBadgeContainer = styled('div')(({ theme }) => ({ - marginLeft: 'auto', - paddingLeft: theme.spacing(2), - display: 'flex', -})); - -const NavigationLink = ({ - path, - text, - handleClose, - ...props -}: INavigationLinkProps) => { - const { isPro } = useUiConfig(); - const showEnterpriseBadgeToPro = Boolean( - isPro() && - !props.mode?.includes('pro') && - props.mode?.includes('enterprise'), - ); - - return ( - { - handleClose(); - }} - > - - - {text} - - - - - } - /> - - - ); -}; - -export default NavigationLink; diff --git a/frontend/src/component/menu/Header/NavigationMenu/NavigationMenu.tsx b/frontend/src/component/menu/Header/NavigationMenu/NavigationMenu.tsx deleted file mode 100644 index 7cc4ec7efa..0000000000 --- a/frontend/src/component/menu/Header/NavigationMenu/NavigationMenu.tsx +++ /dev/null @@ -1,122 +0,0 @@ -import { Divider, Tooltip } from '@mui/material'; -import { Menu, MenuItem, styled } from '@mui/material'; -import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; -import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; -import type { INavigationMenuItem } from 'interfaces/route'; -import { Link } from 'react-router-dom'; -import { EnterpriseBadge } from '../../../common/EnterpriseBadge/EnterpriseBadge'; -import { useCallback } from 'react'; - -interface INavigationMenuProps { - options: INavigationMenuItem[]; - id: string; - anchorEl: any; - handleClose: () => void; - style: Object; -} - -const StyledLink = styled(Link)(({ theme }) => ({ - textDecoration: 'none', - alignItems: 'center', - display: 'flex', - color: 'inherit', - height: '100%', - width: '100%', - '&&': { - // Override MenuItem's built-in padding. - padding: theme.spacing(1, 2), - }, -})); - -const StyledSpan = styled('span')(({ theme }) => ({ - width: '12.5px', - height: '12.5px', - display: 'block', - backgroundColor: theme.palette.primary.main, - marginRight: theme.spacing(2), - borderRadius: '2px', -})); - -const StyledBadgeContainer = styled('div')(({ theme }) => ({ - marginLeft: 'auto', - paddingLeft: theme.spacing(2), - display: 'flex', -})); - -export const NavigationMenu = ({ - options, - id, - handleClose, - anchorEl, - style, -}: INavigationMenuProps) => { - const { isPro, isOss } = useUiConfig(); - - const showBadge = useCallback( - (mode?: INavigationMenuItem['menu']['mode']) => { - if ( - isPro() && - !mode?.includes('pro') && - mode?.includes('enterprise') - ) { - return true; - } - - return false; - }, - [isPro], - ); - - return ( - - {options - .flatMap((option, i) => { - const previousGroup = options[i - 1]?.group; - const addDivider = - previousGroup && - previousGroup !== option.group && - (!isOss() || option.group === 'log'); - - return [ - addDivider ? ( - - ) : null, - - - - {option.title} - - - - } - /> - - , - ]; - }) - .filter(Boolean)} - - ); -};