diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ApplyButton/ApplyButton.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ApplyButton/ApplyButton.tsx
new file mode 100644
index 0000000000..d3262017bd
--- /dev/null
+++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ApplyButton/ApplyButton.tsx
@@ -0,0 +1,31 @@
+import { FC } from 'react';
+
+import CheckBox from '@mui/icons-material/Check';
+import Today from '@mui/icons-material/Today';
+import { MultiActionButton } from '../MultiActionButton/MultiActionButton';
+import { APPLY_CHANGE_REQUEST } from 'component/providers/AccessProvider/permissions';
+
+export const ApplyButton: FC<{
+ disabled: boolean;
+ onSchedule: () => void;
+ onApply: () => void;
+}> = ({ disabled, onSchedule, onApply, children }) => (
+ ,
+ },
+ {
+ label: 'Schedule changes',
+ onSelect: onSchedule,
+ icon: ,
+ },
+ ]}
+ >
+ {children}
+
+);
diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx
index a23957c2c6..fb613e6c26 100644
--- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx
@@ -24,6 +24,9 @@ import { Dialogue } from 'component/common/Dialogue/Dialogue';
import { changesCount } from '../changesCount';
import { ChangeRequestReviewers } from './ChangeRequestReviewers/ChangeRequestReviewers';
import { ChangeRequestRejectDialogue } from './ChangeRequestRejectDialog/ChangeRequestRejectDialog';
+import { ApplyButton } from './ApplyButton/ApplyButton';
+import { useUiFlag } from 'hooks/useUiFlag';
+import { scheduler } from 'timers/promises';
const StyledAsideBox = styled(Box)(({ theme }) => ({
width: '30%',
@@ -87,6 +90,8 @@ export const ChangeRequestOverview: FC = () => {
return null;
}
+ const scheduleChangeRequests = useUiFlag('scheduledConfigurationChanges');
+
const allowChangeRequestActions = isChangeRequestConfiguredForReview(
changeRequest.environment,
);
@@ -267,21 +272,44 @@ export const ChangeRequestOverview: FC = () => {
{
+ console.log(
+ 'I would schedule changes now',
+ );
+ }}
+ >
+ Apply or schedule changes
+
}
- disabled={
- !allowChangeRequestActions ||
- loading
+ elseShow={
+
+ Apply changes
+
}
- >
- Apply changes
-
+ />
}
/>
void;
+ icon: JSX.Element;
+};
+
+export const MultiActionButton: FC<{
+ disabled: boolean;
+ actions: Action[];
+ permission: string;
+}> = ({ disabled, children, actions, permission }) => {
+ const { isAdmin } = useContext(AccessContext);
+ const projectId = useRequiredPathParam('projectId');
+ const id = useRequiredPathParam('id');
+ const { user } = useAuthUser();
+ const { data } = useChangeRequest(projectId, id);
+
+ const [open, setOpen] = React.useState(false);
+ const anchorRef = React.useRef(null);
+
+ const onToggle = () => {
+ setOpen((prevOpen) => !prevOpen);
+ };
+
+ const onClose = (event: Event) => {
+ if (anchorRef.current?.contains(event.target as HTMLElement)) {
+ return;
+ }
+
+ setOpen(false);
+ };
+ const popperWidth = anchorRef.current
+ ? anchorRef.current.offsetWidth
+ : null;
+
+ return (
+
+ }
+ permission={permission}
+ projectId={projectId}
+ environmentId={data?.environment}
+ >
+ {children}
+
+
+ {({ TransitionProps, placement }) => (
+
+
+
+
+
+
+
+ )}
+
+
+ );
+};
diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ReviewButton/ReviewButton.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ReviewButton/ReviewButton.tsx
index abaaa477c0..7091edcf1d 100644
--- a/frontend/src/component/changeRequest/ChangeRequestOverview/ReviewButton/ReviewButton.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ReviewButton/ReviewButton.tsx
@@ -1,124 +1,31 @@
-import React, { FC, useContext } from 'react';
-import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
-import { useChangeRequest } from 'hooks/api/getters/useChangeRequest/useChangeRequest';
+import { FC } from 'react';
-import {
- ClickAwayListener,
- Grow,
- ListItemIcon,
- ListItemText,
- MenuItem,
- MenuList,
- Paper,
- Popper,
-} from '@mui/material';
-
-import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
-import { APPROVE_CHANGE_REQUEST } from 'component/providers/AccessProvider/permissions';
-import PermissionButton from 'component/common/PermissionButton/PermissionButton';
-import { useAuthUser } from 'hooks/api/getters/useAuth/useAuthUser';
-import AccessContext from 'contexts/AccessContext';
import CheckBox from '@mui/icons-material/Check';
import Clear from '@mui/icons-material/Clear';
+import { MultiActionButton } from '../MultiActionButton/MultiActionButton';
+import { APPROVE_CHANGE_REQUEST } from 'component/providers/AccessProvider/permissions';
export const ReviewButton: FC<{
disabled: boolean;
onReject: () => void;
onApprove: () => void;
-}> = ({ disabled, onReject, onApprove, children }) => {
- const { isAdmin } = useContext(AccessContext);
- const projectId = useRequiredPathParam('projectId');
- const id = useRequiredPathParam('id');
- const { user } = useAuthUser();
- const { data } = useChangeRequest(projectId, id);
-
- const [open, setOpen] = React.useState(false);
- const anchorRef = React.useRef(null);
-
- const onToggle = () => {
- setOpen((prevOpen) => !prevOpen);
- };
-
- const onClose = (event: Event) => {
- if (anchorRef.current?.contains(event.target as HTMLElement)) {
- return;
- }
-
- setOpen(false);
- };
- const popperWidth = anchorRef.current
- ? anchorRef.current.offsetWidth
- : null;
-
- return (
-
- }
- permission={APPROVE_CHANGE_REQUEST}
- projectId={projectId}
- environmentId={data?.environment}
- >
- {children}
-
-
- {({ TransitionProps, placement }) => (
-
-
-
-
-
-
-
- )}
-
-
- );
-};
+}> = ({ disabled, onReject, onApprove, children }) => (
+ ,
+ },
+ {
+ label: 'Reject',
+ onSelect: onReject,
+ icon: ,
+ },
+ ]}
+ >
+ {children}
+
+);