From ab594f5c290f07325258ac1005ff63da748a84e9 Mon Sep 17 00:00:00 2001 From: David Leek Date: Wed, 16 Apr 2025 14:58:37 +0200 Subject: [PATCH] feat: move admin menu into nav sidebar (#9774) --- frontend/src/component/admin/adminRoutes.ts | 6 +- .../src/component/admin/auth/AuthSettings.tsx | 11 +- .../MainLayout/AdminMenu/AdminListItem.tsx | 50 ++++- .../MainLayout/AdminMenu/AdminMenuIcons.tsx | 6 +- .../AdminMenu/AdminNavigationItems.tsx | 136 ++++++++++---- .../layout/MainLayout/MainLayout.tsx | 41 ++++- .../NavigationSidebar/IconRenderer.tsx | 1 + .../NavigationSidebar/NavigationList.tsx | 14 +- .../NavigationSidebar/NavigationSidebar.tsx | 171 ++++++++++-------- .../menu/Header/DrawerMenu/DrawerMenu.tsx | 2 +- frontend/src/component/menu/Header/Header.tsx | 62 +------ frontend/src/hooks/useNewAdminMenu.ts | 12 +- 12 files changed, 313 insertions(+), 199 deletions(-) diff --git a/frontend/src/component/admin/adminRoutes.ts b/frontend/src/component/admin/adminRoutes.ts index 5bfdebfb64..70132d5587 100644 --- a/frontend/src/component/admin/adminRoutes.ts +++ b/frontend/src/component/admin/adminRoutes.ts @@ -1,11 +1,11 @@ import type { INavigationMenuItem } from 'interfaces/route'; export const adminGroups: Record = { - users: 'User administration', + users: 'User config', access: 'Access control', sso: 'Single sign-on', network: 'Network', - instance: 'Instance configuration', + instance: 'Instance config', }; export const adminRoutes: INavigationMenuItem[] = [ @@ -87,7 +87,7 @@ export const adminRoutes: INavigationMenuItem[] = [ // Single sign-on/login { - path: '/admin/auth', + path: '/admin/auth/oidc', title: 'Open ID Connect', menu: { adminSettings: true, mode: ['enterprise'] }, group: 'sso', diff --git a/frontend/src/component/admin/auth/AuthSettings.tsx b/frontend/src/component/admin/auth/AuthSettings.tsx index 8c6721beab..515c0c3cb2 100644 --- a/frontend/src/component/admin/auth/AuthSettings.tsx +++ b/frontend/src/component/admin/auth/AuthSettings.tsx @@ -9,7 +9,7 @@ import { GoogleAuth } from './GoogleAuth/GoogleAuth'; import { PermissionGuard } from 'component/common/PermissionGuard/PermissionGuard'; import { ADMIN, UPDATE_AUTH_CONFIGURATION } from '@server/types/permissions'; import { PremiumFeature } from 'component/common/PremiumFeature/PremiumFeature'; -import { Route, Routes, useLocation } from 'react-router-dom'; +import { Navigate, Route, Routes, useLocation } from 'react-router-dom'; import { usePageTitle } from 'hooks/usePageTitle'; import { useUiFlag } from 'hooks/useUiFlag'; @@ -20,7 +20,7 @@ export const AuthSettings = () => { const tabs = [ { label: 'Single sign-on: OpenID Connect', - path: '/admin/auth', + path: '/admin/auth/oidc', }, { label: 'Single sign-on: SAML 2.0', @@ -55,7 +55,12 @@ export const AuthSettings = () => { - } /> + } + /> + } /> } /> } /> {googleAuthEnabled && ( diff --git a/frontend/src/component/layout/MainLayout/AdminMenu/AdminListItem.tsx b/frontend/src/component/layout/MainLayout/AdminMenu/AdminListItem.tsx index f6615f2436..ffca790073 100644 --- a/frontend/src/component/layout/MainLayout/AdminMenu/AdminListItem.tsx +++ b/frontend/src/component/layout/MainLayout/AdminMenu/AdminListItem.tsx @@ -10,7 +10,7 @@ import { AccordionDetails, } from '@mui/material'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; -import type { FC, ReactNode } from 'react'; +import { useState, type FC, type ReactNode } from 'react'; import { Link } from 'react-router-dom'; import type { Theme } from '@mui/material/styles/createTheme'; @@ -18,15 +18,29 @@ const listItemButtonStyle = (theme: Theme) => ({ borderRadius: theme.spacing(0.5), borderLeft: `${theme.spacing(0.5)} solid transparent`, m: 0, + paddingTop: theme.spacing(1), + paddingBottom: theme.spacing(1), '&.Mui-selected': { - borderLeft: `${theme.spacing(0.5)} solid ${theme.palette.primary.main}`, + backgroundColor: '#607B81', + color: theme.palette.common.white, + '& p': { + fontWeight: theme.typography.fontWeightBold, + }, + '&:hover': { + backgroundColor: theme.palette.action.hover, + color: 'inherit', + fontWeight: theme.typography.fontWeightLight, + '& p': { + fontWeight: theme.typography.fontWeightLight, + }, + }, }, minHeight: '0px', '.MuiAccordionSummary-content': { margin: 0 }, '&>.MuiAccordionSummary-content.MuiAccordionSummary-content': { margin: '0', alignItems: 'center', - padding: theme.spacing(0.5, 0), + padding: theme.spacing(0.1, 0), }, }); @@ -35,17 +49,32 @@ const subListItemButtonStyle = (theme: Theme) => ({ borderRadius: theme.spacing(0.5), borderLeft: `${theme.spacing(0.5)} solid transparent`, m: 0, + paddingTop: theme.spacing(0.75), + paddingBottom: theme.spacing(0.75), '&.Mui-selected': { - borderLeft: `${theme.spacing(0.5)} solid ${theme.palette.primary.main}`, + backgroundColor: '#607B81', + color: theme.palette.common.white, + '& p': { + fontWeight: theme.typography.fontWeightBold, + }, + '&:hover': { + backgroundColor: theme.palette.action.hover, + color: 'inherit', + fontWeight: theme.typography.fontWeightLight, + '& p': { + fontWeight: theme.typography.fontWeightLight, + }, + }, }, }); -const CappedText = styled(Typography)({ +const CappedText = styled(Typography)(({ theme }) => ({ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', width: '100%', -}); + paddingTop: theme.spacing(0.25), +})); const StyledListItemIcon = styled(ListItemIcon)(({ theme }) => ({ minWidth: theme.spacing(4), @@ -58,6 +87,7 @@ const StyledListItemText = styled(ListItemText)(({ theme }) => ({ const StyledAccordion = styled(Accordion)(({ theme }) => ({ paddingTop: theme.spacing(0), + backgroundColor: 'inherit', })); const StyledAccordionSummary = styled(AccordionSummary)(({ theme }) => ({ @@ -84,10 +114,16 @@ export const MenuGroup = ({ isActiveMenu, staticExpanded, }: IMenuGroupProps) => { + const [isExpanded, setIsExpanded] = staticExpanded + ? [true, () => undefined] + : useState(isActiveMenu); return ( { + setIsExpanded(expanded); + }} sx={{ boxShadow: 'none', '&:before': { diff --git a/frontend/src/component/layout/MainLayout/AdminMenu/AdminMenuIcons.tsx b/frontend/src/component/layout/MainLayout/AdminMenu/AdminMenuIcons.tsx index fd553f29c6..579f2a20e7 100644 --- a/frontend/src/component/layout/MainLayout/AdminMenu/AdminMenuIcons.tsx +++ b/frontend/src/component/layout/MainLayout/AdminMenu/AdminMenuIcons.tsx @@ -35,9 +35,9 @@ export const IconRenderer: FC<{ path: string; active: boolean }> = ({ return ( ({ + color: active ? theme.palette.common.white : 'inherit', + })} /> ); }; diff --git a/frontend/src/component/layout/MainLayout/AdminMenu/AdminNavigationItems.tsx b/frontend/src/component/layout/MainLayout/AdminMenu/AdminNavigationItems.tsx index d4865198f0..20a11b6b76 100644 --- a/frontend/src/component/layout/MainLayout/AdminMenu/AdminNavigationItems.tsx +++ b/frontend/src/component/layout/MainLayout/AdminMenu/AdminNavigationItems.tsx @@ -1,4 +1,12 @@ -import { Button, styled, Typography, List } from '@mui/material'; +import { + styled, + Typography, + List, + ListItem, + ListItemButton, + ListItemText, + type Theme, +} from '@mui/material'; import { OtherLinksList } from '../NavigationSidebar/NavigationList'; import ArrowBackIcon from '@mui/icons-material/ArrowBack'; import StopRoundedIcon from '@mui/icons-material/StopRounded'; @@ -6,11 +14,11 @@ import { AdminListItem, AdminSubListItem, MenuGroup } from './AdminListItem'; import { IconRenderer } from './AdminMenuIcons'; import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; import { useInstanceStatus } from 'hooks/api/getters/useInstanceStatus/useInstanceStatus'; -import { useLocation, useNavigate } from 'react-router-dom'; +import { Link, useLocation } from 'react-router-dom'; import { filterByConfig } from 'component/common/util'; import { filterAdminRoutes } from 'component/admin/filterAdminRoutes'; import { adminGroups, adminRoutes } from 'component/admin/adminRoutes'; -import type { ReactNode } from 'react'; +import { useEffect, useState, type ReactNode } from 'react'; import type { INavigationMenuItem } from 'interfaces/route'; import { useShowBadge } from 'component/layout/components/EnterprisePlanBadge/useShowBadge'; import { EnterprisePlanBadge } from 'component/layout/components/EnterprisePlanBadge/EnterprisePlanBadge'; @@ -34,31 +42,72 @@ const SettingsHeader = styled(Typography)(({ theme }) => ({ fontWeight: theme.fontWeight.bold, })); -const StyledButton = styled(Button)(({ theme }) => ({ - paddingLeft: theme.spacing(0), - marginBottom: theme.spacing(3), +const CappedText = styled(Typography)(({ theme }) => ({ + whiteSpace: 'nowrap', + overflow: 'hidden', + textOverflow: 'ellipsis', + width: '100%', + paddingTop: theme.spacing(0.25), + marginLeft: theme.spacing(0.75), + fontWeight: theme.typography.fontWeightBold, +})); + +const StyledListItemText = styled(ListItemText)(({ theme }) => ({ + margin: 0, })); const StyledDiv = styled('div')(({ theme }) => ({ padding: theme.spacing(2, 2.5, 0, 2.5), + + '&.MuiButton-root': { + padding: theme.spacing(0), + }, })); const StyledStopRoundedIcon = styled(StopRoundedIcon)(({ theme }) => ({ - color: theme.palette.primary.main, + color: '#607B81', })); -export const DashboardLink = () => { - const navigate = useNavigate(); +const ActiveStyledStopRoundedIcon = styled(StopRoundedIcon)(({ theme }) => ({ + color: theme.palette.common.white, +})); + +const listItemButtonStyle = (theme: Theme) => ({ + borderRadius: theme.spacing(0.5), + borderLeft: `${theme.spacing(0.5)} solid transparent`, + color: theme.palette.primary.main, + fontWeight: theme.typography.fontWeightBold, + m: 0, + paddingTop: theme.spacing(1), + paddingBottom: theme.spacing(1), + minHeight: '0px', + '.MuiAccordionSummary-content': { margin: 0 }, + '&>.MuiAccordionSummary-content.MuiAccordionSummary-content': { + margin: '0', + alignItems: 'center', + padding: theme.spacing(0.1, 0), + }, +}); + +export const DashboardLink = ({ onClick }: { onClick: () => void }) => { return ( - { - navigate(`/personal`); - }} - rel='noreferrer' - startIcon={} - > - Back to Unleash - + + + + + + Back to Unleash + + + + ); }; @@ -66,8 +115,9 @@ export const AdminMobileNavigation = ({ onClick }: { onClick: () => void }) => { return ( <> - + Admin settings + @@ -79,29 +129,18 @@ export const AdminMobileNavigation = ({ onClick }: { onClick: () => void }) => { export const AdminMenuNavigation = ({ onClick }: { onClick: () => void }) => { return ( <> - + ); }; -export const AdminNavigationHeader = () => { - return ( - <> - Admin settings - - - ); -}; - export const AdminNavigationItems = ({ onClick, staticExpanded, }: { onClick: () => void; staticExpanded?: true | undefined }) => { const { uiConfig, isPro, isEnterprise } = useUiConfig(); const { isBilling } = useInstanceStatus(); - const isActiveItem = (item?: string) => - item !== undefined && location.pathname === item; const location = useLocation(); const showBadge = useShowBadge(); @@ -115,6 +154,28 @@ export const AdminNavigationItems = ({ }), ); + const findActiveItem = () => { + const activeItem = routes.find( + (route) => route.path === location.pathname, + ); + if (!activeItem) { + return routes.find( + (route) => + route.path !== '/admin' && + location.pathname.startsWith(route.path), + )?.path; + } + return activeItem.path; + }; + const [activeItem, setActiveItem] = useState( + findActiveItem(), + ); + const isActiveItem = (item?: string) => + item !== undefined && activeItem !== undefined && item === activeItem; + useEffect(() => { + setActiveItem(findActiveItem()); + }, [location, location.pathname]); + const menuStructure = routes.reduce( (acc: Record, route) => { if (route.group && adminGroups[route.group]) { @@ -159,7 +220,7 @@ export const AdminNavigationItems = ({ } activeIcon={ - + } isActiveMenu={Boolean(isActiveMenu)} key={item.text} @@ -178,7 +239,11 @@ export const AdminNavigationItems = ({ ) : null } > - + {isActiveItem(subItem.href) ? ( + + ) : ( + + )} ))} @@ -197,7 +262,10 @@ export const AdminNavigationItems = ({ ) : null } > - + ); })} diff --git a/frontend/src/component/layout/MainLayout/MainLayout.tsx b/frontend/src/component/layout/MainLayout/MainLayout.tsx index dd0a6eb105..c7cf16a241 100644 --- a/frontend/src/component/layout/MainLayout/MainLayout.tsx +++ b/frontend/src/component/layout/MainLayout/MainLayout.tsx @@ -18,9 +18,6 @@ import { NavigationSidebar } from './NavigationSidebar/NavigationSidebar'; import { EventTimelineProvider } from 'component/events/EventTimeline/EventTimelineProvider'; import { NewInUnleash } from './NavigationSidebar/NewInUnleash/NewInUnleash'; -import { WrapIfAdminSubpage } from './AdminMenu/AdminMenu'; -import { useNewAdminMenu } from '../../../hooks/useNewAdminMenu'; - interface IMainLayoutProps { children: ReactNode; } @@ -34,6 +31,34 @@ const MainLayoutContainer = styled(Grid)(() => ({ position: 'relative', })); +const MainLayoutContent = styled(Grid)(({ theme }) => ({ + minWidth: 0, // this is a fix for overflowing flex + maxWidth: `1512px`, + margin: '0 auto', + paddingLeft: theme.spacing(2), + paddingRight: theme.spacing(2), + [theme.breakpoints.up(1856)]: { + width: '100%', + }, + [theme.breakpoints.down(1856)]: { + marginLeft: theme.spacing(7), + marginRight: theme.spacing(7), + }, + [theme.breakpoints.down('lg')]: { + maxWidth: `1250px`, + 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 MainLayoutContentWrapper = styled('div')(({ theme }) => ({ margin: theme.spacing(0, 'auto'), flexGrow: 1, @@ -65,7 +90,6 @@ const MainLayoutContentContainer = styled('main')(({ theme }) => ({ export const MainLayout = forwardRef( ({ children }, ref) => { - const showOnlyAdminMenu = useNewAdminMenu(); const { uiConfig } = useUiConfig(); const projectId = useOptionalPathParam('projectId'); const { isChangeRequestConfiguredInAnyEnv } = useChangeRequestsEnabled( @@ -74,9 +98,6 @@ export const MainLayout = forwardRef( const theme = useTheme(); const isSmallScreen = useMediaQuery(theme.breakpoints.down('lg')); - const showRegularNavigationSideBar = - !isSmallScreen && !showOnlyAdminMenu; - return ( @@ -97,7 +118,7 @@ export const MainLayout = forwardRef( })} > ( >
- + {children} - + diff --git a/frontend/src/component/layout/MainLayout/NavigationSidebar/IconRenderer.tsx b/frontend/src/component/layout/MainLayout/NavigationSidebar/IconRenderer.tsx index 7f0bb10def..ea231a2521 100644 --- a/frontend/src/component/layout/MainLayout/NavigationSidebar/IconRenderer.tsx +++ b/frontend/src/component/layout/MainLayout/NavigationSidebar/IconRenderer.tsx @@ -60,6 +60,7 @@ const icons: Record< '/admin/roles/project-roles': RoleIcon, '/admin/api': ApiAccessIcon, '/admin/auth': SingleSignOnIcon, + '/admin/auth/oidc': SingleSignOnIcon, '/admin/auth/saml': SingleSignOnIcon, '/admin/auth/scim': SingleSignOnIcon, '/admin/auth/password': SingleSignOnIcon, diff --git a/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationList.tsx b/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationList.tsx index 316af538a0..758d025d6a 100644 --- a/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationList.tsx +++ b/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationList.tsx @@ -22,6 +22,8 @@ import { ProjectIcon } from 'component/common/ProjectIcon/ProjectIcon'; import useProjectOverview from 'hooks/api/getters/useProjectOverview/useProjectOverview'; import { useShowBadge } from 'component/layout/components/EnterprisePlanBadge/useShowBadge'; import { EnterprisePlanBadge } from 'component/layout/components/EnterprisePlanBadge/EnterprisePlanBadge'; +import { useNewAdminMenu } from 'hooks/useNewAdminMenu'; +import { AdminMenuNavigation } from '../AdminMenu/AdminNavigationItems'; export const SecondaryNavigationList: FC<{ routes: INavigationMenuItem[]; @@ -235,10 +237,18 @@ export const AdminSettingsNavigation: FC<{ activeItem, mode, }) => { - const newAdminUIEnabled = useUiFlag('adminNavUI'); + const { showOnlyAdminMenu, newAdminUIEnabled } = useNewAdminMenu(); + if (showOnlyAdminMenu) { + return onClick('/admin')} />; + } + + const setFullModeOnClick = (activeItem: string) => { + onSetFullMode(); + onClick(activeItem); + }; if (newAdminUIEnabled) { - return ; + return ; } return ( diff --git a/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.tsx b/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.tsx index 4742db4828..c2bebba15c 100644 --- a/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.tsx +++ b/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.tsx @@ -31,6 +31,7 @@ import { ReactComponent as LogoOnly } from 'assets/img/logoDark.svg'; import { Link } from 'react-router-dom'; import { useFlag } from '@unleash/proxy-client-react'; import { useUiFlag } from 'hooks/useUiFlag'; +import { useNewAdminMenu } from 'hooks/useNewAdminMenu'; export const MobileNavigationSidebar: FC<{ onClick: () => void; @@ -62,9 +63,12 @@ export const MobileNavigationSidebar: FC<{ ); }; -export const StretchContainer = styled(Box)<{ mode: string }>( - ({ theme, mode }) => ({ - backgroundColor: theme.palette.background.paper, +export const StretchContainer = styled(Box)<{ mode: string; admin: boolean }>( + ({ theme, mode, admin }) => ({ + backgroundColor: admin + ? theme.palette.background.application + : theme.palette.background.paper, + borderRight: admin ? `2px solid ${theme.palette.divider}` : 'none', padding: theme.spacing(2), alignSelf: 'stretch', display: 'flex', @@ -98,12 +102,14 @@ const StyledUnleashLogoOnlyWhite = styled(LogoOnlyWhite)(({ theme }) => ({ })); // This component is needed when the sticky item could overlap with nav items. You can replicate it on a short screen. -const StickyContainer = styled(Box)(({ theme }) => ({ +const StickyContainer = styled(Box)<{ admin: boolean }>(({ theme, admin }) => ({ position: 'sticky', paddingBottom: theme.spacing(1.5), paddingTop: theme.spacing(1), bottom: theme.spacing(0), - backgroundColor: theme.palette.background.paper, + backgroundColor: admin + ? theme.palette.background.application + : theme.palette.background.paper, borderTop: `1px solid ${theme.palette.divider}`, })); @@ -112,6 +118,7 @@ export const NavigationSidebar: FC<{ NewInUnleash?: typeof NewInUnleash }> = ({ }) => { const { routes } = useRoutes(); const celebrateUnleashFrontend = useFlag('celebrateUnleashFrontend'); + const { showOnlyAdminMenu } = useNewAdminMenu(); const [mode, setMode] = useNavigationMode(); const [expanded, changeExpanded] = useExpanded<'configure' | 'admin'>(); @@ -131,7 +138,7 @@ export const NavigationSidebar: FC<{ NewInUnleash?: typeof NewInUnleash }> = ({ }, [initialPathname]); return ( - + = ({ } /> - + + { + changeExpanded('configure', expand); + }} + mode={mode} + title='Configure' + > + + + + setMode('full')} + activeItem={activeItem} + onExpandChange={(expand) => { + changeExpanded('admin', expand); + }} + expanded={expanded.includes('admin')} + routes={routes.adminRoutes} + /> + + {showRecentProject && ( + setActiveItem('/projects')} + /> + )} + + {showRecentFlags && ( + setActiveItem('/projects')} + /> + )} + + {/* this will push the show/hide to the bottom on short nav list */} + + + + {NewInUnleash ? ( + setMode('full')} + /> + ) : null} + { + setMode(mode === 'full' ? 'mini' : 'full'); + }} + /> + + + } + elseShow={ + <> + setMode('full')} + activeItem={activeItem} + onExpandChange={(expand) => { + changeExpanded('admin', expand); + }} + expanded={expanded.includes('admin')} + routes={routes.adminRoutes} + /> + + } /> - { - changeExpanded('configure', expand); - }} - mode={mode} - title='Configure' - > - - - - setMode('full')} - activeItem={activeItem} - onExpandChange={(expand) => { - changeExpanded('admin', expand); - }} - expanded={expanded.includes('admin')} - routes={routes.adminRoutes} - /> - - {showRecentProject && ( - setActiveItem('/projects')} - /> - )} - - {showRecentFlags && ( - setActiveItem('/projects')} - /> - )} - - {/* this will push the show/hide to the bottom on short nav list */} - - - - {NewInUnleash ? ( - setMode('full')} - /> - ) : null} - { - setMode(mode === 'full' ? 'mini' : 'full'); - }} - /> - ); }; diff --git a/frontend/src/component/menu/Header/DrawerMenu/DrawerMenu.tsx b/frontend/src/component/menu/Header/DrawerMenu/DrawerMenu.tsx index 9e963d920d..90407aa760 100644 --- a/frontend/src/component/menu/Header/DrawerMenu/DrawerMenu.tsx +++ b/frontend/src/component/menu/Header/DrawerMenu/DrawerMenu.tsx @@ -33,7 +33,7 @@ export const DrawerMenu: VFC = ({ open = false, toggleDrawer, }) => { - const showOnlyAdminMenu = useNewAdminMenu(); + const { showOnlyAdminMenu } = useNewAdminMenu(); const onClick = () => { toggleDrawer(); }; diff --git a/frontend/src/component/menu/Header/Header.tsx b/frontend/src/component/menu/Header/Header.tsx index ff164629ba..1fcdb65718 100644 --- a/frontend/src/component/menu/Header/Header.tsx +++ b/frontend/src/component/menu/Header/Header.tsx @@ -1,7 +1,6 @@ import { useState } from 'react'; import useMediaQuery from '@mui/material/useMediaQuery'; -import { type Theme, useTheme } from '@mui/material/styles'; -import { Link } from 'react-router-dom'; +import { useTheme } from '@mui/material/styles'; import { AppBar, Box, @@ -14,12 +13,9 @@ import MenuIcon from '@mui/icons-material/Menu'; import UserProfile from 'component/user/UserProfile'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import MenuBookIcon from '@mui/icons-material/MenuBook'; -import { ReactComponent as UnleashLogo } from 'assets/img/logoDarkWithText.svg'; -import { ReactComponent as UnleashLogoWhite } from 'assets/img/logoWithWhiteText.svg'; import { DrawerMenu } from './DrawerMenu/DrawerMenu'; import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; -import { focusable } from 'themes/themeStyles'; import DarkModeOutlined from '@mui/icons-material/DarkModeOutlined'; import LightModeOutlined from '@mui/icons-material/LightModeOutlined'; import { useThemeMode } from 'hooks/useThemeMode'; @@ -27,10 +23,6 @@ import { Notifications } from 'component/common/Notifications/Notifications'; import InviteLinkButton from './InviteLink/InviteLinkButton/InviteLinkButton'; import { useUiFlag } from 'hooks/useUiFlag'; import { CommandBar } from 'component/commandBar/CommandBar'; -import { ThemeMode } from 'component/common/ThemeMode/ThemeMode'; -import { ReactComponent as CelebratoryUnleashLogo } from 'assets/img/unleashHoliday.svg'; -import { ReactComponent as CelebratoryUnleashLogoWhite } from 'assets/img/unleashHolidayDark.svg'; -import { useNewAdminMenu } from 'hooks/useNewAdminMenu'; const HeaderComponent = styled(AppBar)(({ theme }) => ({ backgroundColor: theme.palette.background.application, @@ -71,16 +63,6 @@ const StyledNav = styled('nav')({ flexGrow: 1, }); -const StyledCelebratoryLogo = styled(CelebratoryUnleashLogo)({ - height: '50px', -}); - -const StyledUnleashLogoWhite = styled(UnleashLogoWhite)({ height: '50px' }); - -const StyledUnleashLogo = styled(UnleashLogo)({ height: '50px' }); - -const StyledLink = styled(Link)(({ theme }) => focusable(theme)); - const StyledIconButton = styled(IconButton)<{ component?: 'a' | 'button'; href?: string; @@ -100,16 +82,10 @@ const Header = () => { const theme = useTheme(); const disableNotifications = useUiFlag('disableNotifications'); - const { uiConfig, isOss } = useUiConfig(); + const { isOss } = useUiConfig(); const smallScreen = useMediaQuery(theme.breakpoints.down('lg')); const [openDrawer, setOpenDrawer] = useState(false); const toggleDrawer = () => setOpenDrawer((prev) => !prev); - const celebratoryUnleash = useUiFlag('celebrateUnleash'); - const headerLogo = (theme: Theme) => ({ - height: '50px', - marginLeft: theme.spacing(1.5), - }); - const adminMenu = useNewAdminMenu(); if (smallScreen) { return ( @@ -141,40 +117,6 @@ const Header = () => { - - - } - elseShow={ - - } - /> - } - lightmode={ - } - elseShow={ - - } - /> - } - /> - - } - /> - { const newAdminUIEnabled = useUiFlag('adminNavUI'); const location = useLocation(); - return ( - newAdminUIEnabled && - (location.pathname.indexOf('/admin') === 0 || - location.pathname.indexOf('/history') === 0) - ); + return { + showOnlyAdminMenu: + newAdminUIEnabled && + (location.pathname.indexOf('/admin') === 0 || + location.pathname.indexOf('/history') === 0), + newAdminUIEnabled, + }; };