Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-10-27 11:02:16 +01:00
Code Issues Projects Releases Wiki Activity

feat: adjust change request banner for new layout (#7160)

Browse Source
This commit is contained in:
Mateusz Kwasniewski 2024-05-27 11:08:23 +02:00 committed by GitHub
parent 10a03d46dc
commit 17720d6185
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 24 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
frontend/src/component/layout/MainLayout/DraftBanner/DraftBanner.tsx
View File

@ -6,6 +6,7 @@ import { usePendingChangeRequests } from 'hooks/api/getters/usePendingChangeRequ
import type { ChangeRequestType } from 'component/changeRequest/changeRequest.types'; import type { ChangeRequestType } from 'component/changeRequest/changeRequest.types';
import { changesCount } from 'component/changeRequest/changesCount'; import { changesCount } from 'component/changeRequest/changesCount';
import { Sticky } from 'component/common/Sticky/Sticky'; import { Sticky } from 'component/common/Sticky/Sticky';
import { useUiFlag } from 'hooks/useUiFlag';
interface IDraftBannerProps { interface IDraftBannerProps {
project: string; project: string;
@ -17,7 +18,7 @@ const StyledDraftBannerContentWrapper = styled(Box)(({ theme }) => ({
padding: theme.spacing(1, 0), padding: theme.spacing(1, 0),
})); }));
const StyledDraftBanner = styled(Box)(({ theme }) => ({ const OldStyledDraftBanner = styled(Box)(({ theme }) => ({
maxWidth: '1512px', maxWidth: '1512px',
paddingLeft: theme.spacing(2), paddingLeft: theme.spacing(2),
paddingRight: theme.spacing(2), paddingRight: theme.spacing(2),
@ -33,10 +34,26 @@ const StyledDraftBanner = styled(Box)(({ theme }) => ({
}, },
})); }));
const StyledDraftBanner = styled(Box)(({ theme }) => ({
width: '100%',
paddingLeft: theme.spacing(3),
paddingRight: theme.spacing(9),
marginLeft: 'auto',
marginRight: 'auto',
[theme.breakpoints.down(1024)]: {
marginLeft: 0,
marginRight: 0,
},
[theme.breakpoints.down('sm')]: {
minWidth: '100%',
},
}));
const DraftBannerContent: FC<{ const DraftBannerContent: FC<{
changeRequests: ChangeRequestType[]; changeRequests: ChangeRequestType[];
onClick: () => void; onClick: () => void;
}> = ({ changeRequests, onClick }) => { }> = ({ changeRequests, onClick }) => {
const sidebarNavigationEnabled = useUiFlag('navigationSidebar');
const environments = changeRequests.map(({ environment }) => environment); const environments = changeRequests.map(({ environment }) => environment);
const allChangesCount = changeRequests.reduce( const allChangesCount = changeRequests.reduce(
(acc, curr) => acc + changesCount(curr), (acc, curr) => acc + changesCount(curr),
@ -54,8 +71,12 @@ const DraftBannerContent: FC<{
}[changeRequests[0].state as 'Draft' | 'In review' | 'Approved'] }[changeRequests[0].state as 'Draft' | 'In review' | 'Approved']
: ''; : '';
const Banner = sidebarNavigationEnabled
? StyledDraftBanner
: OldStyledDraftBanner;
return ( return (
<StyledDraftBanner> <Banner>
<StyledDraftBannerContentWrapper> <StyledDraftBannerContentWrapper>
<Typography variant='body2' sx={{ mr: 4 }}> <Typography variant='body2' sx={{ mr: 4 }}>
<strong>Change request mode</strong> – You have changes{' '} <strong>Change request mode</strong> – You have changes{' '}
@ -91,7 +112,7 @@ const DraftBannerContent: FC<{
View changes ({allChangesCount}) View changes ({allChangesCount})
</Button> </Button>
</StyledDraftBannerContentWrapper> </StyledDraftBannerContentWrapper>
</StyledDraftBanner> </Banner>
); );
}; };