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 }) => ( + + + + + {actions.map( + ({ label, onSelect, icon }) => ( + + + {icon} + + + {label} + + + ), + )} + + + + + )} + + + ); +}; 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 }) => ( - - - - - - - - - - Approve changes - - - - - - - - Reject changes - - - - - - - )} - - - ); -}; +}> = ({ disabled, onReject, onApprove, children }) => ( + , + }, + { + label: 'Reject', + onSelect: onReject, + icon: , + }, + ]} + > + {children} + +);