diff --git a/frontend/src/component/admin/Admin.tsx b/frontend/src/component/admin/Admin.tsx index cfea959366..c24281afa9 100644 --- a/frontend/src/component/admin/Admin.tsx +++ b/frontend/src/component/admin/Admin.tsx @@ -20,11 +20,18 @@ import { AdminIndex } from './AdminIndex'; import { AdminTabsMenu } from './menu/AdminTabsMenu'; import { Banners } from './banners/Banners'; import { License } from './license/License'; +import { useUiFlag } from 'hooks/useUiFlag'; +import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; export const Admin = () => { + const sidebarNavigationEnabled = useUiFlag('navigationSidebar'); + return ( <> - + } + /> } /> } /> diff --git a/frontend/src/component/layout/MainLayout/MainLayout.tsx b/frontend/src/component/layout/MainLayout/MainLayout.tsx index f3d642930f..30f26a3adc 100644 --- a/frontend/src/component/layout/MainLayout/MainLayout.tsx +++ b/frontend/src/component/layout/MainLayout/MainLayout.tsx @@ -1,6 +1,7 @@ import { forwardRef, type ReactNode } from 'react'; import { Box, Grid, styled, useMediaQuery, useTheme } from '@mui/material'; import Header from 'component/menu/Header/Header'; +import OldHeader from 'component/menu/Header/OldHeader'; import Footer from 'component/menu/Footer/Footer'; import Proclamation from 'component/common/Proclamation/Proclamation'; import BreadcrumbNav from 'component/common/BreadcrumbNav/BreadcrumbNav'; @@ -110,7 +111,12 @@ export const MainLayout = forwardRef( return ( <> -
+ } + elseShow={} + /> + diff --git a/frontend/src/component/menu/Header/Header.tsx b/frontend/src/component/menu/Header/Header.tsx index 84a70af633..c81699e531 100644 --- a/frontend/src/component/menu/Header/Header.tsx +++ b/frontend/src/component/menu/Header/Header.tsx @@ -2,16 +2,8 @@ import { useState, type VFC } from 'react'; import useMediaQuery from '@mui/material/useMediaQuery'; import { useTheme } from '@mui/material/styles'; import { Link } from 'react-router-dom'; -import { - AppBar, - IconButton, - Tooltip, - styled, - type Theme, - Box, -} from '@mui/material'; +import { AppBar, Box, IconButton, styled, Tooltip } from '@mui/material'; import MenuIcon from '@mui/icons-material/Menu'; -import SettingsIcon from '@mui/icons-material/Settings'; import UserProfile from 'component/user/UserProfile'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import MenuBookIcon from '@mui/icons-material/MenuBook'; @@ -23,20 +15,16 @@ import { ReactComponent as CelebatoryUnleashLogoWhite } from 'assets/img/unleash import { DrawerMenu } from './DrawerMenu/DrawerMenu'; import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; import { flexRow, focusable } from 'themes/themeStyles'; -import { NavigationMenu } from './NavigationMenu/NavigationMenu'; -import { getRoutes, getCondensedRoutes } from 'component/menu/routes'; +import { getCondensedRoutes, getRoutes } from 'component/menu/routes'; import DarkModeOutlined from '@mui/icons-material/DarkModeOutlined'; -import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown'; import LightModeOutlined from '@mui/icons-material/LightModeOutlined'; import { filterByConfig, mapRouteLink } from 'component/common/util'; -import { useId } from 'hooks/useId'; import { ThemeMode } from 'component/common/ThemeMode/ThemeMode'; import { useThemeMode } from 'hooks/useThemeMode'; import { Notifications } from 'component/common/Notifications/Notifications'; import { useAdminRoutes } from 'component/admin/useAdminRoutes'; import InviteLinkButton from './InviteLink/InviteLinkButton/InviteLinkButton'; import { useUiFlag } from 'hooks/useUiFlag'; -import { Badge } from '../../common/Badge/Badge'; const HeaderComponent = styled(AppBar)(({ theme }) => ({ backgroundColor: theme.palette.background.paper, @@ -44,9 +32,8 @@ const HeaderComponent = styled(AppBar)(({ theme }) => ({ boxShadow: 'none', position: 'relative', zIndex: 300, - maxWidth: '1512px', + paddingRight: theme.spacing(9), [theme.breakpoints.down('lg')]: { - maxWidth: '1280px', paddingLeft: theme.spacing(1), paddingRight: theme.spacing(1), }, @@ -98,23 +85,6 @@ const StyledLinks = styled('div')(({ theme }) => ({ }, })); -const StyledAdvancedNavButton = styled('button')(({ theme }) => ({ - ...focusable(theme), - border: 'none', - background: 'transparent', - height: '100%', - display: 'flex', - fontSize: theme.fontSizes.bodySize, - fontFamily: theme.typography.fontFamily, - alignItems: 'center', - color: 'inherit', - cursor: 'pointer', -})); - -const styledIconProps = (theme: Theme) => ({ - color: theme.palette.neutral.main, -}); - const StyledLink = styled(Link)(({ theme }) => focusable(theme)); const StyledText = styled('div')(({ theme }) => ({ @@ -123,17 +93,6 @@ const StyledText = styled('div')(({ theme }) => ({ gap: theme.spacing(1), })); -const StyledLinkWithBetaBadge = ({ - title, - to, -}: { title: string; to: string }) => ( - - - {title} Beta - - -); - const StyledIconButton = styled(IconButton)<{ component?: 'a' | 'button'; href?: string; @@ -151,25 +110,13 @@ const StyledIconButton = styled(IconButton)<{ const Header: VFC = () => { const { onSetThemeMode, themeMode } = useThemeMode(); const theme = useTheme(); - const adminId = useId(); - const configId = useId(); - const [adminRef, setAdminRef] = useState(null); - const [configRef, setConfigRef] = useState(null); const disableNotifications = useUiFlag('disableNotifications'); const { uiConfig, isOss } = useUiConfig(); - const sidebarNavigationEnabled = useUiFlag('navigationSidebar'); - const smallScreen = useMediaQuery( - sidebarNavigationEnabled - ? theme.breakpoints.down('lg') - : theme.breakpoints.down('md'), - ); + const smallScreen = useMediaQuery(theme.breakpoints.down('lg')); const [openDrawer, setOpenDrawer] = useState(false); const toggleDrawer = () => setOpenDrawer((prev) => !prev); - const onAdminClose = () => setAdminRef(null); - const onConfigureClose = () => setConfigRef(null); const celebatoryUnleash = useUiFlag('celebrateUnleash'); - const insightsDashboard = useUiFlag('executiveDashboardUI'); const routes = getRoutes(); const adminRoutes = useAdminRoutes(); @@ -242,35 +189,6 @@ const Header: VFC = () => { - - Projects - Search - Playground - - } - /> - setConfigRef(e.currentTarget)} - aria-controls={configRef ? configId : undefined} - aria-expanded={Boolean(configRef)} - > - Configure - - - - { target='_blank' rel='noopener noreferrer' size='large' + sx={{ mr: 1 }} > - - setAdminRef(e.currentTarget)} - aria-controls={adminRef ? adminId : undefined} - aria-expanded={Boolean(adminRef)} - size='large' - > - - - - {' '} diff --git a/frontend/src/component/menu/Header/OldHeader.tsx b/frontend/src/component/menu/Header/OldHeader.tsx new file mode 100644 index 0000000000..41fda84539 --- /dev/null +++ b/frontend/src/component/menu/Header/OldHeader.tsx @@ -0,0 +1,333 @@ +import { useState, type VFC } from 'react'; +import useMediaQuery from '@mui/material/useMediaQuery'; +import { useTheme } from '@mui/material/styles'; +import { Link } from 'react-router-dom'; +import { + AppBar, + IconButton, + Tooltip, + styled, + type Theme, + Box, +} from '@mui/material'; +import MenuIcon from '@mui/icons-material/Menu'; +import SettingsIcon from '@mui/icons-material/Settings'; +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 { ReactComponent as CelebatoryUnleashLogo } from 'assets/img/unleashHoliday.svg'; +import { ReactComponent as CelebatoryUnleashLogoWhite } from 'assets/img/unleashHolidayDark.svg'; + +import { DrawerMenu } from './DrawerMenu/DrawerMenu'; +import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; +import { flexRow, focusable } from 'themes/themeStyles'; +import { NavigationMenu } from './NavigationMenu/NavigationMenu'; +import { getRoutes, getCondensedRoutes } from 'component/menu/routes'; +import DarkModeOutlined from '@mui/icons-material/DarkModeOutlined'; +import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown'; +import LightModeOutlined from '@mui/icons-material/LightModeOutlined'; +import { filterByConfig, mapRouteLink } from 'component/common/util'; +import { useId } from 'hooks/useId'; +import { ThemeMode } from 'component/common/ThemeMode/ThemeMode'; +import { useThemeMode } from 'hooks/useThemeMode'; +import { Notifications } from 'component/common/Notifications/Notifications'; +import { useAdminRoutes } from 'component/admin/useAdminRoutes'; +import InviteLinkButton from './InviteLink/InviteLinkButton/InviteLinkButton'; +import { useUiFlag } from 'hooks/useUiFlag'; +import { Badge } from '../../common/Badge/Badge'; + +const HeaderComponent = styled(AppBar)(({ theme }) => ({ + backgroundColor: theme.palette.background.paper, + padding: theme.spacing(1), + boxShadow: 'none', + position: 'relative', + zIndex: 300, + maxWidth: '1512px', + [theme.breakpoints.down('lg')]: { + maxWidth: '1280px', + paddingLeft: theme.spacing(1), + paddingRight: theme.spacing(1), + }, + [theme.breakpoints.down(1024)]: { + marginLeft: 0, + marginRight: 0, + }, + [theme.breakpoints.down('sm')]: { + minWidth: '100%', + }, + margin: '0 auto', +})); + +const ContainerComponent = styled(Box)(() => ({ + display: 'flex', + alignItems: 'center', + width: '100%', + '&&&': { padding: 0 }, +})); + +const StyledUserContainer = styled('div')({ + marginLeft: 'auto', + display: 'flex', + alignItems: 'center', +}); + +const StyledNav = styled('nav')({ + display: 'flex', + alignItems: 'center', + flexGrow: 1, +}); + +const StyledUnleashLogoWhite = styled(UnleashLogoWhite)({ width: '150px' }); + +const StyledUnleashLogo = styled(UnleashLogo)({ width: '150px' }); + +const StyledCelebatoryLogo = styled(CelebatoryUnleashLogo)({ width: '150px' }); + +const StyledLinks = styled('div')(({ theme }) => ({ + display: 'flex', + justifyContent: 'center', + marginLeft: theme.spacing(3), + '& a': { + textDecoration: 'none', + color: 'inherit', + marginRight: theme.spacing(3), + display: 'flex', + alignItems: 'center', + }, +})); + +const StyledAdvancedNavButton = styled('button')(({ theme }) => ({ + ...focusable(theme), + border: 'none', + background: 'transparent', + height: '100%', + display: 'flex', + fontSize: theme.fontSizes.bodySize, + fontFamily: theme.typography.fontFamily, + alignItems: 'center', + color: 'inherit', + cursor: 'pointer', +})); + +const styledIconProps = (theme: Theme) => ({ + color: theme.palette.neutral.main, +}); + +const StyledLink = styled(Link)(({ theme }) => focusable(theme)); + +const StyledText = styled('div')(({ theme }) => ({ + display: 'flex', + alignItems: 'center', + gap: theme.spacing(1), +})); + +const StyledLinkWithBetaBadge = ({ + title, + to, +}: { title: string; to: string }) => ( + + + {title} Beta + + +); + +const StyledIconButton = styled(IconButton)<{ + component?: 'a' | 'button'; + href?: string; + target?: string; +}>(({ theme }) => ({ + borderRadius: 100, + '&:focus-visible': { + outlineStyle: 'solid', + outlineWidth: 2, + outlineColor: theme.palette.primary.main, + borderRadius: '100%', + }, +})); + +const OldHeader: VFC = () => { + const { onSetThemeMode, themeMode } = useThemeMode(); + const theme = useTheme(); + const adminId = useId(); + const configId = useId(); + const [adminRef, setAdminRef] = useState(null); + const [configRef, setConfigRef] = useState(null); + + const disableNotifications = useUiFlag('disableNotifications'); + const { uiConfig, isOss } = useUiConfig(); + const smallScreen = useMediaQuery(theme.breakpoints.down('md')); + const [openDrawer, setOpenDrawer] = useState(false); + const toggleDrawer = () => setOpenDrawer((prev) => !prev); + const onAdminClose = () => setAdminRef(null); + const onConfigureClose = () => setConfigRef(null); + const celebatoryUnleash = useUiFlag('celebrateUnleash'); + const insightsDashboard = useUiFlag('executiveDashboardUI'); + + const routes = getRoutes(); + const adminRoutes = useAdminRoutes(); + + const filteredMainRoutes = { + mainNavRoutes: getCondensedRoutes(routes.mainNavRoutes) + .filter(filterByConfig(uiConfig)) + .map(mapRouteLink), + mobileRoutes: getCondensedRoutes(routes.mobileRoutes) + .filter(filterByConfig(uiConfig)) + .map(mapRouteLink), + adminRoutes, + }; + + if (smallScreen) { + return ( + + + + theme.palette.text.primary, + }} + onClick={toggleDrawer} + aria-controls='header-drawer' + aria-expanded={openDrawer} + size='large' + > + + + + + + + + + + ); + } + + return ( + + + + } + elseShow={ + + } + /> + } + lightmode={ + } + elseShow={ + + } + /> + } + /> + + + + + Projects + Search + Playground + + } + /> + setConfigRef(e.currentTarget)} + aria-controls={configRef ? configId : undefined} + aria-expanded={Boolean(configRef)} + > + Configure + + + + + + + + + } + elseShow={} + /> + + + } + /> + + + + + + + setAdminRef(e.currentTarget)} + aria-controls={adminRef ? adminId : undefined} + aria-expanded={Boolean(adminRef)} + size='large' + > + + + + {' '} + + + + + + ); +}; + +export default OldHeader; diff --git a/src/server-dev.ts b/src/server-dev.ts index a03ec4938c..5058e18e58 100644 --- a/src/server-dev.ts +++ b/src/server-dev.ts @@ -56,7 +56,7 @@ process.nextTick(async () => { createProjectWithEnvironmentConfig: true, manyStrategiesPagination: true, enableLegacyVariants: false, - navigationSidebar: true, + navigationSidebar: false, }, }, authentication: {