mirror of
https://github.com/Unleash/unleash.git
synced 2025-01-25 00:07:47 +01:00
chore: remove navigation sidebar leftover flag (#8504)
This commit is contained in:
Mateusz Kwasniewski
GitHub
parent
802a50d6de
commit
d3294d58c2
@ -17,21 +17,12 @@ import { InviteLink } from './users/InviteLink/InviteLink';
|
||||
import UsersAdmin from './users/UsersAdmin';
|
||||
import NotFound from 'component/common/NotFound/NotFound';
|
||||
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 (
|
||||
<>
|
||||
<ConditionallyRender
|
||||
condition={!sidebarNavigationEnabled}
|
||||
show={<AdminTabsMenu />}
|
||||
/>
|
||||
<Routes>
|
||||
<Route index element={<AdminIndex />} />
|
||||
<Route path='users/*' element={<UsersAdmin />} />
|
||||
|
||||
@ -1,80 +0,0 @@
|
||||
import { useLocation } from 'react-router-dom';
|
||||
import { Paper, styled, Tab, Tabs } from '@mui/material';
|
||||
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
|
||||
import { CenteredNavLink } from './CenteredNavLink';
|
||||
import type { VFC } from 'react';
|
||||
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
||||
import { EnterpriseBadge } from 'component/common/EnterpriseBadge/EnterpriseBadge';
|
||||
import { useAdminRoutes } from '../useAdminRoutes';
|
||||
|
||||
const StyledPaper = styled(Paper)(({ theme }) => ({
|
||||
marginBottom: '1rem',
|
||||
borderRadius: `${theme.shape.borderRadiusLarge}px`,
|
||||
boxShadow: 'none',
|
||||
padding: theme.spacing(0, 2),
|
||||
}));
|
||||
|
||||
const StyledBadgeContainer = styled('div')(({ theme }) => ({
|
||||
marginLeft: theme.spacing(1),
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
}));
|
||||
|
||||
export const AdminTabsMenu: VFC = () => {
|
||||
const { isPro, isOss } = useUiConfig();
|
||||
const { pathname } = useLocation();
|
||||
|
||||
const activeTab = pathname.split('/')[2];
|
||||
|
||||
const adminRoutes = useAdminRoutes();
|
||||
const group = adminRoutes.find((route) =>
|
||||
pathname.includes(route.path),
|
||||
)?.group;
|
||||
|
||||
const tabs = adminRoutes.filter(
|
||||
(route) =>
|
||||
!group ||
|
||||
route.group === group ||
|
||||
(isOss() && route.group !== 'log'),
|
||||
);
|
||||
|
||||
if (!group) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<StyledPaper>
|
||||
<Tabs
|
||||
value={activeTab}
|
||||
variant='scrollable'
|
||||
scrollButtons='auto'
|
||||
allowScrollButtonsMobile
|
||||
>
|
||||
{tabs.map((tab) => (
|
||||
<Tab
|
||||
sx={{ padding: 0 }}
|
||||
key={tab.route}
|
||||
value={tab.route?.split('/')?.[2]}
|
||||
label={
|
||||
<CenteredNavLink to={tab.path}>
|
||||
{tab.title}
|
||||
<ConditionallyRender
|
||||
condition={Boolean(
|
||||
tab.menu.mode?.includes('enterprise') &&
|
||||
!tab.menu.mode?.includes('pro') &&
|
||||
isPro(),
|
||||
)}
|
||||
show={
|
||||
<StyledBadgeContainer>
|
||||
<EnterpriseBadge size={16} />
|
||||
</StyledBadgeContainer>
|
||||
}
|
||||
/>
|
||||
</CenteredNavLink>
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</Tabs>
|
||||
</StyledPaper>
|
||||
);
|
||||
};
|
||||
@ -6,7 +6,6 @@ import { usePendingChangeRequests } from 'hooks/api/getters/usePendingChangeRequ
|
||||
import type { ChangeRequestType } from 'component/changeRequest/changeRequest.types';
|
||||
import { changesCount } from 'component/changeRequest/changesCount';
|
||||
import { Sticky } from 'component/common/Sticky/Sticky';
|
||||
import { useUiFlag } from 'hooks/useUiFlag';
|
||||
|
||||
interface IDraftBannerProps {
|
||||
project: string;
|
||||
@ -18,22 +17,6 @@ const StyledDraftBannerContentWrapper = styled(Box)(({ theme }) => ({
|
||||
padding: theme.spacing(1, 0),
|
||||
}));
|
||||
|
||||
const OldStyledDraftBanner = styled(Box)(({ theme }) => ({
|
||||
maxWidth: '1512px',
|
||||
paddingLeft: theme.spacing(2),
|
||||
paddingRight: theme.spacing(2),
|
||||
marginLeft: 'auto',
|
||||
marginRight: 'auto',
|
||||
[theme.breakpoints.down(1024)]: {
|
||||
width: '100%',
|
||||
marginLeft: 0,
|
||||
marginRight: 0,
|
||||
},
|
||||
[theme.breakpoints.down('sm')]: {
|
||||
minWidth: '100%',
|
||||
},
|
||||
}));
|
||||
|
||||
const StyledDraftBanner = styled(Box)(({ theme }) => ({
|
||||
width: '100%',
|
||||
paddingLeft: theme.spacing(3),
|
||||
@ -55,7 +38,6 @@ const DraftBannerContent: FC<{
|
||||
changeRequests: ChangeRequestType[];
|
||||
onClick: () => void;
|
||||
}> = ({ changeRequests, onClick }) => {
|
||||
const sidebarNavigationEnabled = useUiFlag('navigationSidebar');
|
||||
const environments = changeRequests.map(({ environment }) => environment);
|
||||
const allChangesCount = changeRequests.reduce(
|
||||
(acc, curr) => acc + changesCount(curr),
|
||||
@ -73,12 +55,8 @@ const DraftBannerContent: FC<{
|
||||
}[changeRequests[0].state as 'Draft' | 'In review' | 'Approved']
|
||||
: '';
|
||||
|
||||
const Banner = sidebarNavigationEnabled
|
||||
? StyledDraftBanner
|
||||
: OldStyledDraftBanner;
|
||||
|
||||
return (
|
||||
<Banner>
|
||||
<StyledDraftBanner>
|
||||
<StyledDraftBannerContentWrapper>
|
||||
<Typography variant='body2' sx={{ mr: 4 }}>
|
||||
<strong>Change request mode</strong> – You have changes{' '}
|
||||
@ -114,7 +92,7 @@ const DraftBannerContent: FC<{
|
||||
View changes ({allChangesCount})
|
||||
</Button>
|
||||
</StyledDraftBannerContentWrapper>
|
||||
</Banner>
|
||||
</StyledDraftBanner>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
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';
|
||||
@ -16,7 +15,6 @@ import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled';
|
||||
import { DraftBanner } from './DraftBanner/DraftBanner';
|
||||
import { ThemeMode } from 'component/common/ThemeMode/ThemeMode';
|
||||
import { NavigationSidebar } from './NavigationSidebar/NavigationSidebar';
|
||||
import { useUiFlag } from 'hooks/useUiFlag';
|
||||
import { MainLayoutEventTimeline } from './MainLayoutEventTimeline';
|
||||
import { EventTimelineProvider } from 'component/events/EventTimeline/EventTimelineProvider';
|
||||
import { AIChat } from 'component/ai/AIChat';
|
||||
@ -42,27 +40,7 @@ const MainLayoutContentWrapper = styled('main')(({ theme }) => ({
|
||||
position: 'relative',
|
||||
}));
|
||||
|
||||
const OldMainLayoutContent = styled(Grid)(({ theme }) => ({
|
||||
width: '100%',
|
||||
maxWidth: '1512px',
|
||||
margin: '0 auto',
|
||||
paddingLeft: theme.spacing(2),
|
||||
paddingRight: theme.spacing(2),
|
||||
[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%',
|
||||
},
|
||||
}));
|
||||
|
||||
const NewMainLayoutContent = styled(Grid)(({ theme }) => ({
|
||||
const MainLayoutContent = styled(Grid)(({ theme }) => ({
|
||||
minWidth: 0, // this is a fix for overflowing flex
|
||||
maxWidth: '1512px',
|
||||
margin: '0 auto',
|
||||
@ -119,21 +97,13 @@ export const MainLayout = forwardRef<HTMLDivElement, IMainLayoutProps>(
|
||||
projectId || '',
|
||||
);
|
||||
|
||||
const sidebarNavigationEnabled = useUiFlag('navigationSidebar');
|
||||
const StyledMainLayoutContent = sidebarNavigationEnabled
|
||||
? NewMainLayoutContent
|
||||
: OldMainLayoutContent;
|
||||
const theme = useTheme();
|
||||
const isSmallScreen = useMediaQuery(theme.breakpoints.down('lg'));
|
||||
|
||||
return (
|
||||
<EventTimelineProvider>
|
||||
<SkipNavLink />
|
||||
<ConditionallyRender
|
||||
condition={sidebarNavigationEnabled}
|
||||
show={<Header />}
|
||||
elseShow={<OldHeader />}
|
||||
/>
|
||||
<Header />
|
||||
|
||||
<SkipNavTarget />
|
||||
<MainLayoutContainer>
|
||||
@ -153,9 +123,7 @@ export const MainLayout = forwardRef<HTMLDivElement, IMainLayoutProps>(
|
||||
})}
|
||||
>
|
||||
<ConditionallyRender
|
||||
condition={
|
||||
sidebarNavigationEnabled && !isSmallScreen
|
||||
}
|
||||
condition={!isSmallScreen}
|
||||
show={<NavigationSidebar />}
|
||||
/>
|
||||
|
||||
@ -169,13 +137,13 @@ export const MainLayout = forwardRef<HTMLDivElement, IMainLayoutProps>(
|
||||
>
|
||||
<MainLayoutEventTimeline />
|
||||
|
||||
<StyledMainLayoutContent>
|
||||
<MainLayoutContent>
|
||||
<MainLayoutContentContainer ref={ref}>
|
||||
<BreadcrumbNav />
|
||||
<Proclamation toast={uiConfig.toast} />
|
||||
{children}
|
||||
</MainLayoutContentContainer>
|
||||
</StyledMainLayoutContent>
|
||||
</MainLayoutContent>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
|
||||
@ -1,20 +1,13 @@
|
||||
import type { ReactNode, VFC } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Divider, Drawer, List, styled } from '@mui/material';
|
||||
import GitHubIcon from '@mui/icons-material/GitHub';
|
||||
import LibraryBooksIcon from '@mui/icons-material/LibraryBooks';
|
||||
import ExitToApp from '@mui/icons-material/ExitToApp';
|
||||
import { Divider, Drawer, styled } from '@mui/material';
|
||||
import { ReactComponent as UnleashLogo } from 'assets/img/logoDarkWithText.svg';
|
||||
import { ReactComponent as UnleashLogoWhite } from 'assets/img/logoWithWhiteText.svg';
|
||||
import NavigationLink from '../NavigationLink/NavigationLink';
|
||||
import { basePath } from 'utils/formatPath';
|
||||
import type { INavigationMenuItem } from 'interfaces/route';
|
||||
import styles from './DrawerMenu.module.scss'; // FIXME: useStyle - theme
|
||||
import theme from 'themes/theme';
|
||||
import { ThemeMode } from 'component/common/ThemeMode/ThemeMode';
|
||||
import { MobileNavigationSidebar } from 'component/layout/MainLayout/NavigationSidebar/NavigationSidebar';
|
||||
import { useUiFlag } from 'hooks/useUiFlag';
|
||||
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
||||
|
||||
const StyledDrawerHeader = styled('div')(({ theme }) => ({
|
||||
display: 'flex',
|
||||
@ -51,32 +44,6 @@ export const DrawerMenu: VFC<IDrawerMenuProps> = ({
|
||||
toggleDrawer,
|
||||
routes,
|
||||
}) => {
|
||||
const sidebarNavigationEnabled = useUiFlag('navigationSidebar');
|
||||
|
||||
const renderLinks = () => {
|
||||
return links.map((link) => {
|
||||
let icon = null;
|
||||
if (link.value === 'GitHub') {
|
||||
icon = <GitHubIcon className={styles.navigationIcon} />;
|
||||
} else if (link.value === 'Documentation') {
|
||||
icon = <LibraryBooksIcon className={styles.navigationIcon} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<a
|
||||
href={link.href}
|
||||
rel='noopener noreferrer'
|
||||
target='_blank'
|
||||
className={styles.iconLink}
|
||||
key={link.value}
|
||||
>
|
||||
{icon}
|
||||
{link.value}
|
||||
</a>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Drawer
|
||||
className={styles.drawer}
|
||||
@ -104,50 +71,7 @@ export const DrawerMenu: VFC<IDrawerMenuProps> = ({
|
||||
</Link>
|
||||
</StyledDrawerHeader>
|
||||
<Divider />
|
||||
<ConditionallyRender
|
||||
condition={Boolean(sidebarNavigationEnabled)}
|
||||
show={<MobileNavigationSidebar onClick={toggleDrawer} />}
|
||||
elseShow={
|
||||
<>
|
||||
<List className={styles.drawerList}>
|
||||
{routes.mobileRoutes.map((item) => (
|
||||
<NavigationLink
|
||||
handleClose={() => toggleDrawer()}
|
||||
path={item.path}
|
||||
text={item.title}
|
||||
key={item.path}
|
||||
/>
|
||||
))}
|
||||
</List>
|
||||
<Divider />
|
||||
|
||||
<List className={styles.drawerList}>
|
||||
{routes.adminRoutes.map((item) => (
|
||||
<NavigationLink
|
||||
handleClose={() => toggleDrawer()}
|
||||
path={item.path}
|
||||
text={item.title}
|
||||
key={item.path}
|
||||
mode={item.menu?.mode}
|
||||
/>
|
||||
))}
|
||||
</List>
|
||||
<Divider />
|
||||
<div className={styles.iconLinkList}>
|
||||
{renderLinks()}
|
||||
<a
|
||||
className={styles.iconLink}
|
||||
href={`${basePath}/logout`}
|
||||
>
|
||||
<ExitToApp
|
||||
className={styles.navigationIcon}
|
||||
/>
|
||||
Sign out
|
||||
</a>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
<MobileNavigationSidebar onClick={toggleDrawer} />
|
||||
</nav>
|
||||
</Drawer>
|
||||
);
|
||||
|
||||
@ -1,313 +0,0 @@
|
||||
import { useState } 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 { HeaderEventTimelineButton } from './HeaderEventTimelineButton';
|
||||
|
||||
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 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 = () => {
|
||||
const { onSetThemeMode, themeMode } = useThemeMode();
|
||||
const theme = useTheme();
|
||||
const adminId = useId();
|
||||
const configId = useId();
|
||||
const [adminRef, setAdminRef] = useState<HTMLButtonElement | null>(null);
|
||||
const [configRef, setConfigRef] = useState<HTMLButtonElement | null>(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 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 (
|
||||
<HeaderComponent position='static'>
|
||||
<ContainerComponent>
|
||||
<Tooltip title='Menu' arrow>
|
||||
<IconButton
|
||||
sx={{
|
||||
color: (theme) => theme.palette.text.primary,
|
||||
}}
|
||||
onClick={toggleDrawer}
|
||||
aria-controls='header-drawer'
|
||||
aria-expanded={openDrawer}
|
||||
size='large'
|
||||
>
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<DrawerMenu
|
||||
links={uiConfig.links}
|
||||
open={openDrawer}
|
||||
toggleDrawer={toggleDrawer}
|
||||
routes={filteredMainRoutes}
|
||||
/>
|
||||
<StyledUserContainer>
|
||||
<UserProfile />
|
||||
</StyledUserContainer>
|
||||
</ContainerComponent>
|
||||
</HeaderComponent>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<HeaderComponent position='static'>
|
||||
<ContainerComponent>
|
||||
<StyledLink to='/' sx={flexRow} aria-label='Home'>
|
||||
<ThemeMode
|
||||
darkmode={
|
||||
<ConditionallyRender
|
||||
condition={celebatoryUnleash}
|
||||
show={<CelebatoryUnleashLogoWhite />}
|
||||
elseShow={
|
||||
<StyledUnleashLogoWhite aria-label='Unleash logo' />
|
||||
}
|
||||
/>
|
||||
}
|
||||
lightmode={
|
||||
<ConditionallyRender
|
||||
condition={celebatoryUnleash}
|
||||
show={<StyledCelebatoryLogo />}
|
||||
elseShow={
|
||||
<StyledUnleashLogo aria-label='Unleash logo' />
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</StyledLink>
|
||||
|
||||
<StyledNav>
|
||||
<StyledLinks>
|
||||
<StyledLink to='/projects'>Projects</StyledLink>
|
||||
<StyledLink to={'/search'}>Search</StyledLink>
|
||||
<StyledLink to='/playground'>Playground</StyledLink>
|
||||
<ConditionallyRender
|
||||
condition={!isOss()}
|
||||
show={
|
||||
<StyledLink to='/insights'>Insights</StyledLink>
|
||||
}
|
||||
/>
|
||||
<StyledAdvancedNavButton
|
||||
onClick={(e) => setConfigRef(e.currentTarget)}
|
||||
aria-controls={configRef ? configId : undefined}
|
||||
aria-expanded={Boolean(configRef)}
|
||||
>
|
||||
Configure
|
||||
<KeyboardArrowDown sx={styledIconProps} />
|
||||
</StyledAdvancedNavButton>
|
||||
<NavigationMenu
|
||||
id={configId}
|
||||
options={filteredMainRoutes.mainNavRoutes}
|
||||
anchorEl={configRef}
|
||||
handleClose={onConfigureClose}
|
||||
style={{ top: 10 }}
|
||||
/>
|
||||
</StyledLinks>
|
||||
<StyledUserContainer>
|
||||
<HeaderEventTimelineButton />
|
||||
<InviteLinkButton />
|
||||
<Tooltip
|
||||
title={
|
||||
themeMode === 'dark'
|
||||
? 'Switch to light theme'
|
||||
: 'Switch to dark theme'
|
||||
}
|
||||
arrow
|
||||
>
|
||||
<StyledIconButton
|
||||
onClick={onSetThemeMode}
|
||||
size='large'
|
||||
>
|
||||
<ConditionallyRender
|
||||
condition={themeMode === 'dark'}
|
||||
show={<DarkModeOutlined />}
|
||||
elseShow={<LightModeOutlined />}
|
||||
/>
|
||||
</StyledIconButton>
|
||||
</Tooltip>
|
||||
<ConditionallyRender
|
||||
condition={!isOss() && !disableNotifications}
|
||||
show={<Notifications />}
|
||||
/>
|
||||
<Tooltip title='Documentation' arrow>
|
||||
<StyledIconButton
|
||||
component='a'
|
||||
href='https://docs.getunleash.io/'
|
||||
target='_blank'
|
||||
rel='noopener noreferrer'
|
||||
size='large'
|
||||
>
|
||||
<MenuBookIcon />
|
||||
</StyledIconButton>
|
||||
</Tooltip>
|
||||
<Tooltip title='Settings' arrow>
|
||||
<StyledIconButton
|
||||
onClick={(e) => setAdminRef(e.currentTarget)}
|
||||
aria-controls={adminRef ? adminId : undefined}
|
||||
aria-expanded={Boolean(adminRef)}
|
||||
size='large'
|
||||
>
|
||||
<SettingsIcon />
|
||||
</StyledIconButton>
|
||||
</Tooltip>
|
||||
<NavigationMenu
|
||||
id={adminId}
|
||||
options={filteredMainRoutes.adminRoutes}
|
||||
anchorEl={adminRef}
|
||||
handleClose={onAdminClose}
|
||||
style={{
|
||||
top: 5,
|
||||
left: -100,
|
||||
}}
|
||||
/>{' '}
|
||||
<UserProfile />
|
||||
</StyledUserContainer>
|
||||
</StyledNav>
|
||||
</ContainerComponent>
|
||||
</HeaderComponent>
|
||||
);
|
||||
};
|
||||
|
||||
export default OldHeader;
|
||||
@ -85,7 +85,6 @@ export type UiFlags = {
|
||||
featureLifecycle?: boolean;
|
||||
manyStrategiesPagination?: boolean;
|
||||
enableLegacyVariants?: boolean;
|
||||
navigationSidebar?: boolean;
|
||||
flagCreator?: boolean;
|
||||
onboardingUI?: boolean;
|
||||
eventTimeline?: boolean;
|
||||
|
||||
@ -49,7 +49,6 @@ export type IFlagKey =
|
||||
| 'projectOverviewRefactorFeedback'
|
||||
| 'manyStrategiesPagination'
|
||||
| 'enableLegacyVariants'
|
||||
| 'navigationSidebar'
|
||||
| 'extendedMetrics'
|
||||
| 'removeUnsafeInlineStyleSrc'
|
||||
| 'onboardingMetrics'
|
||||
@ -256,10 +255,6 @@ const flags: IFlags = {
|
||||
process.env.UNLEASH_EXPERIMENTAL_ENABLE_LEGACY_VARIANTS,
|
||||
false,
|
||||
),
|
||||
navigationSidebar: parseEnvVarBoolean(
|
||||
process.env.UNLEASH_EXPERIMENTAL_SIDEBAR_NAVIGATION,
|
||||
true,
|
||||
),
|
||||
extendedMetrics: parseEnvVarBoolean(
|
||||
process.env.UNLEASH_EXPERIMENTAL_EXTENDED_METRICS,
|
||||
false,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user