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

feat: move apply button to a separate section (#10324)

Browse Source
This commit is contained in:
David Leek 2025-07-08 09:23:48 +02:00 committed by GitHub
parent 59990fb503
commit 068ef585be
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 276 additions and 156 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

138
frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx
View File

@ -1,7 +1,15 @@
import { Alert, Box, Button, styled, Typography } from '@mui/material'; import {
Alert,
Box,
Button,
styled,
Typography,
useTheme,
} from '@mui/material';
import { type FC, useContext, useState } from 'react'; import { type FC, useContext, useState } from 'react';
import { useChangeRequest } from 'hooks/api/getters/useChangeRequest/useChangeRequest'; import { useChangeRequest } from 'hooks/api/getters/useChangeRequest/useChangeRequest';
import { ChangeRequestHeader } from './ChangeRequestHeader/ChangeRequestHeader.tsx'; import { ChangeRequestHeader } from './ChangeRequestHeader/ChangeRequestHeader.tsx';
import { ReactComponent as ApprovedIcon } from 'assets/icons/merge.svg';
import { import {
ChangeRequestTimeline, ChangeRequestTimeline,
type ISuggestChangeTimelineProps, type ISuggestChangeTimelineProps,
@ -49,9 +57,19 @@ const StyledAsideBox = styled(Box)(({ theme }) => ({
})); }));
const StyledPaper = styled(Paper)(({ theme }) => ({ const StyledPaper = styled(Paper)(({ theme }) => ({
padding: theme.spacing(1, 2),
borderRadius: theme.shape.borderRadiusLarge,
}));
const StyledApplyPaper = styled(Paper)(({ theme }) => ({
padding: theme.spacing(1, 2),
borderRadius: theme.shape.borderRadiusLarge,
marginTop: theme.spacing(2),
}));
const StyledDiv = styled('div')(({ theme }) => ({
marginTop: theme.spacing(2), marginTop: theme.spacing(2),
width: '70%', width: '70%',
padding: theme.spacing(1, 2),
borderRadius: theme.shape.borderRadiusLarge, borderRadius: theme.shape.borderRadiusLarge,
[theme.breakpoints.down(breakpoint)]: { [theme.breakpoints.down(breakpoint)]: {
width: '100%', width: '100%',
@ -68,6 +86,15 @@ const StyledInnerContainer = styled(Box)(({ theme }) => ({
padding: theme.spacing(2), padding: theme.spacing(2),
})); }));
const StyledApplyInnerContainer = styled(Box)(({ theme }) => ({
paddingBottom: theme.spacing(1.5),
}));
const StyledOuterContainer = styled(Box)(({ theme }) => ({
display: 'flex',
marginTop: theme.spacing(2),
}));
const StyledButton = styled(Button)(({ theme }) => ({ const StyledButton = styled(Button)(({ theme }) => ({
marginLeft: theme.spacing(2), marginLeft: theme.spacing(2),
})); }));
@ -80,6 +107,36 @@ const ChangeRequestBody = styled(Box)(({ theme }) => ({
}, },
})); }));
const StyledApplyContainer = styled(Box)(({ theme }) => ({
display: 'flex',
flexDirection: 'row',
justifyContent: 'flex-end',
width: '100%',
}));
const StyledBox = styled(Box)(({ theme }) => ({
width: '100%',
}));
const StyledTypography = styled(Typography)(({ theme }) => ({
fontWeight: 'bold',
}));
const StyledButtonContainer = styled(Box)(({ theme }) => ({
borderRadius: `${theme.shape.borderRadiusMedium}px`,
backgroundColor: theme.palette.primary.main!,
padding: theme.spacing(1, 2),
marginRight: theme.spacing(2),
height: '45px',
width: '45px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
svg: {
color: theme.palette.background.paper,
},
}));
export const ChangeRequestOverview: FC = () => { export const ChangeRequestOverview: FC = () => {
const projectId = useRequiredPathParam('projectId'); const projectId = useRequiredPathParam('projectId');
const [showCancelDialog, setShowCancelDialog] = useState(false); const [showCancelDialog, setShowCancelDialog] = useState(false);
@ -110,6 +167,7 @@ export const ChangeRequestOverview: FC = () => {
const [disabled, setDisabled] = useState(false); const [disabled, setDisabled] = useState(false);
const navigate = useNavigate(); const navigate = useNavigate();
const approversEnabled = useUiFlag('changeRequestApproverEmails'); const approversEnabled = useUiFlag('changeRequestApproverEmails');
const theme = useTheme();
if (!changeRequest) { if (!changeRequest) {
return null; return null;
@ -306,6 +364,7 @@ export const ChangeRequestOverview: FC = () => {
} }
/> />
</StyledAsideBox> </StyledAsideBox>
<StyledDiv>
<StyledPaper elevation={0}> <StyledPaper elevation={0}>
<StyledInnerContainer> <StyledInnerContainer>
Requested Changes ({countOfChanges}) Requested Changes ({countOfChanges})
@ -346,7 +405,8 @@ export const ChangeRequestOverview: FC = () => {
})} })}
severity='info' severity='info'
> >
You can not approve your own change request You can not approve your own change
request
</Alert> </Alert>
} }
/> />
@ -379,7 +439,10 @@ export const ChangeRequestOverview: FC = () => {
/> />
<ConditionallyRender <ConditionallyRender
condition={changeRequest.state === 'Approved'} condition={
changeRequest.state === 'Approved' &&
!approversEnabled
}
show={ show={
<ApplyButton <ApplyButton
onApply={onApplyChanges} onApply={onApplyChanges}
@ -388,7 +451,9 @@ export const ChangeRequestOverview: FC = () => {
disabled disabled
} }
onSchedule={() => onSchedule={() =>
setShowScheduleChangeDialog(true) setShowScheduleChangeDialog(
true,
)
} }
> >
Apply or schedule changes Apply or schedule changes
@ -396,18 +461,24 @@ export const ChangeRequestOverview: FC = () => {
} }
/> />
<ConditionallyRender <ConditionallyRender
condition={changeRequest.state === 'Scheduled'} condition={
changeRequest.state === 'Scheduled'
}
show={ show={
<ApplyButton <ApplyButton
onApply={() => onApply={() =>
setShowApplyScheduledDialog(true) setShowApplyScheduledDialog(
true,
)
} }
disabled={ disabled={
!allowChangeRequestActions || !allowChangeRequestActions ||
disabled disabled
} }
onSchedule={() => onSchedule={() =>
setShowScheduleChangeDialog(true) setShowScheduleChangeDialog(
true,
)
} }
variant={'update'} variant={'update'}
> >
@ -441,7 +512,8 @@ export const ChangeRequestOverview: FC = () => {
changeRequest.state !== 'Applied' && changeRequest.state !== 'Applied' &&
changeRequest.state !== 'Rejected' && changeRequest.state !== 'Rejected' &&
changeRequest.state !== 'Cancelled' && changeRequest.state !== 'Cancelled' &&
(changeRequest.createdBy.id === user?.id || (changeRequest.createdBy.id ===
user?.id ||
isAdmin) isAdmin)
} }
show={ show={
@ -475,6 +547,54 @@ export const ChangeRequestOverview: FC = () => {
</StyledButtonBox> </StyledButtonBox>
</StyledInnerContainer> </StyledInnerContainer>
</StyledPaper> </StyledPaper>
<ConditionallyRender
condition={
changeRequest.state === 'Approved' &&
approversEnabled
}
show={
<StyledApplyPaper elevation={0}>
<StyledApplyInnerContainer>
<StyledOuterContainer>
<StyledButtonContainer>
<ApprovedIcon
style={{
transform: `scale(1.5)`,
}}
/>
</StyledButtonContainer>
<StyledBox>
<StyledTypography>
Apply changes
</StyledTypography>
<Typography>
The change request has been
reviewed and approved
</Typography>
</StyledBox>
<StyledApplyContainer>
<ApplyButton
onApply={onApplyChanges}
disabled={
!allowChangeRequestActions ||
disabled
}
onSchedule={() =>
setShowScheduleChangeDialog(
true,
)
}
>
Apply or schedule changes
</ApplyButton>
</StyledApplyContainer>
</StyledOuterContainer>
</StyledApplyInnerContainer>
</StyledApplyPaper>
}
/>
</StyledDiv>
<Dialogue <Dialogue
open={showCancelDialog} open={showCancelDialog}
onClick={onCancelChanges} onClick={onCancelChanges}