Skip to content

Commit

Permalink
chore: remove navigation sidebar leftover flag (#8504)
Browse files Browse the repository at this point in the history
  • Loading branch information
@kwasniew
kwasniew authored Oct 22, 2024
1 parent 802a50d commit d3294d5
Show file tree
Hide file tree
Showing 8 changed files with 9 additions and 547 deletions.
9 changes: 0 additions & 9 deletions frontend/src/component/admin/Admin.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 />} />
Expand Down
80 changes: 0 additions & 80 deletions frontend/src/component/admin/menu/AdminTabsMenu.tsx
View file

This file was deleted.

26 changes: 2 additions & 24 deletions frontend/src/component/layout/MainLayout/DraftBanner/DraftBanner.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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),
Expand All @@ -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),
Expand All @@ -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{' '}
Expand Down Expand Up @@ -114,7 +92,7 @@ const DraftBannerContent: FC<{
View changes ({allChangesCount})
</Button>
</StyledDraftBannerContentWrapper>
</Banner>
</StyledDraftBanner>
);
};

Expand Down
42 changes: 5 additions & 37 deletions frontend/src/component/layout/MainLayout/MainLayout.tsx
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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';
Expand All @@ -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',
Expand Down Expand Up @@ -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>
Expand All @@ -153,9 +123,7 @@ export const MainLayout = forwardRef<HTMLDivElement, IMainLayoutProps>(
})}
>
<ConditionallyRender
condition={
sidebarNavigationEnabled && !isSmallScreen
}
condition={!isSmallScreen}
show={<NavigationSidebar />}
/>

Expand All @@ -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>

Expand Down
80 changes: 2 additions & 78 deletions frontend/src/component/menu/Header/DrawerMenu/DrawerMenu.tsx
View file
Original file line number Diff line number Diff line change
@@ -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',
Expand Down Expand Up @@ -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}
Expand Down Expand Up @@ -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>
);
Expand Down
Loading

0 comments on commit d3294d5

Please sign in to comment.