Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-08-23 13:46:45 +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 { useChangeRequest } from 'hooks/api/getters/useChangeRequest/useChangeRequest';
import { ChangeRequestHeader } from './ChangeRequestHeader/ChangeRequestHeader.tsx';
import { ReactComponent as ApprovedIcon } from 'assets/icons/merge.svg';
import {
ChangeRequestTimeline,
type ISuggestChangeTimelineProps,
@ -49,9 +57,19 @@ const StyledAsideBox = styled(Box)(({ 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),
width: '70%',
padding: theme.spacing(1, 2),
borderRadius: theme.shape.borderRadiusLarge,
[theme.breakpoints.down(breakpoint)]: {
width: '100%',
@ -68,6 +86,15 @@ const StyledInnerContainer = styled(Box)(({ theme }) => ({
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 }) => ({
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 = () => {
const projectId = useRequiredPathParam('projectId');
const [showCancelDialog, setShowCancelDialog] = useState(false);
@ -110,6 +167,7 @@ export const ChangeRequestOverview: FC = () => {
const [disabled, setDisabled] = useState(false);
const navigate = useNavigate();
const approversEnabled = useUiFlag('changeRequestApproverEmails');
const theme = useTheme();
if (!changeRequest) {
return null;
@ -306,6 +364,7 @@ export const ChangeRequestOverview: FC = () => {
}
/>
</StyledAsideBox>
<StyledDiv>
<StyledPaper elevation={0}>
<StyledInnerContainer>
Requested Changes ({countOfChanges})
@ -346,7 +405,8 @@ export const ChangeRequestOverview: FC = () => {
})}
severity='info'
>
You can not approve your own change request
You can not approve your own change
request
</Alert>
}
/>
@ -379,7 +439,10 @@ export const ChangeRequestOverview: FC = () => {
/>
<ConditionallyRender
condition={changeRequest.state === 'Approved'}
condition={
changeRequest.state === 'Approved' &&
!approversEnabled
}
show={
<ApplyButton
onApply={onApplyChanges}
@ -388,7 +451,9 @@ export const ChangeRequestOverview: FC = () => {
disabled
}
onSchedule={() =>
setShowScheduleChangeDialog(true)
setShowScheduleChangeDialog(
true,
)
}
>
Apply or schedule changes
@ -396,18 +461,24 @@ export const ChangeRequestOverview: FC = () => {
}
/>
<ConditionallyRender
condition={changeRequest.state === 'Scheduled'}
condition={
changeRequest.state === 'Scheduled'
}
show={
<ApplyButton
onApply={() =>
setShowApplyScheduledDialog(true)
setShowApplyScheduledDialog(
true,
)
}
disabled={
!allowChangeRequestActions ||
disabled
}
onSchedule={() =>
setShowScheduleChangeDialog(true)
setShowScheduleChangeDialog(
true,
)
}
variant={'update'}
>
@ -441,7 +512,8 @@ export const ChangeRequestOverview: FC = () => {
changeRequest.state !== 'Applied' &&
changeRequest.state !== 'Rejected' &&
changeRequest.state !== 'Cancelled' &&
(changeRequest.createdBy.id === user?.id ||
(changeRequest.createdBy.id ===
user?.id ||
isAdmin)
}
show={
@ -475,6 +547,54 @@ export const ChangeRequestOverview: FC = () => {
</StyledButtonBox>
</StyledInnerContainer>
</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
open={showCancelDialog}
onClick={onCancelChanges}