Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: remove navigation sidebar leftover flag #8504

Merged
merged 3 commits into from
Oct 22, 2024
Merged

chore: remove navigation sidebar leftover flag #8504

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
232bb90
chore: remove navigation sidebar leftover flag
kwasniew Oct 22, 2024
3b5d688
chore: remove navigation sidebar leftover flag
kwasniew Oct 22, 2024
b675ad1
chore: remove navigation sidebar leftover flag
kwasniew Oct 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 0 additions & 9 deletions frontend/src/component/admin/Admin.tsx
View file
Open in desktop
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
Open in desktop

This file was deleted.

26 changes: 2 additions & 24 deletions frontend/src/component/layout/MainLayout/DraftBanner/DraftBanner.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading