diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx
index b53dd16e08..09a613f6ce 100644
--- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx
@@ -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,175 +364,237 @@ export const ChangeRequestOverview: FC = () => {
}
/>
-
-
- Requested Changes ({countOfChanges})
-
- {changeRequest.comments?.map((comment) => (
-
+
+
+ Requested Changes ({countOfChanges})
+
- ))}
-
-
-
- ({
- marginTop: theme.spacing(1.5),
- })}
- severity='info'
+
+
- setShowRejectDialog(true)
- }
- onApprove={onApprove}
- disabled={
- !allowChangeRequestActions ||
- disabled
- }
+ ({
+ marginTop: theme.spacing(1.5),
+ })}
+ severity='info'
>
- Review changes ({countOfChanges})
-
+ You can not approve your own change
+ request
+
}
/>
+
+ setShowScheduleChangeDialog(true)
+ }
+ />
+
+
+ setShowRejectDialog(true)
+ }
+ onApprove={onApprove}
+ disabled={
+ !allowChangeRequestActions ||
+ disabled
+ }
+ >
+ Review changes ({countOfChanges})
+
+ }
+ />
-
- setShowScheduleChangeDialog(true)
- }
- >
- Apply or schedule changes
-
- }
- />
-
- setShowApplyScheduledDialog(true)
- }
- disabled={
- !allowChangeRequestActions ||
- disabled
- }
- onSchedule={() =>
- setShowScheduleChangeDialog(true)
- }
- variant={'update'}
- >
- Apply or schedule changes
-
- }
- />
+
+ setShowScheduleChangeDialog(
+ true,
+ )
+ }
+ >
+ Apply or schedule changes
+
+ }
+ />
+
+ setShowApplyScheduledDialog(
+ true,
+ )
+ }
+ disabled={
+ !allowChangeRequestActions ||
+ disabled
+ }
+ onSchedule={() =>
+ setShowScheduleChangeDialog(
+ true,
+ )
+ }
+ variant={'update'}
+ >
+ Apply or schedule changes
+
+ }
+ />
- {
- navigate(
- `/playground?changeRequest=${changeRequest.id}&projects=${projectId}&environments=${changeRequest.environment}`,
- );
- }}
- >
- Preview changes
-
- }
- />
+ {
+ navigate(
+ `/playground?changeRequest=${changeRequest.id}&projects=${projectId}&environments=${changeRequest.environment}`,
+ );
+ }}
+ >
+ Preview changes
+
+ }
+ />
-
- setShowRejectScheduledDialog(
+
+ setShowRejectScheduledDialog(
+ true,
+ )
+ }
+ disabled={disabled}
+ >
+ Reject changes
+
+ }
+ elseShow={
+
+ Cancel changes
+
+ }
+ />
+ }
+ />
+
+
+
+
+
+
+
+
+
+
+
+ Apply changes
+
+
+ The change request has been
+ reviewed and approved
+
+
+
+
+
+ setShowScheduleChangeDialog(
true,
)
}
- disabled={disabled}
>
- Reject changes
-
- }
- elseShow={
-
- Cancel changes
-
- }
- />
- }
- />
-
-
-
+ Apply or schedule changes
+
+
+
+
+
+ }
+ />
+