1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-07-17 13:46:47 +02:00

fix: add dialog for cancel (#2568)

* This PR adds a dialog for cancelling changes, and explains what
happens once you move a change request into the cancelled state.
This commit is contained in:
Fredrik Strand Oseberg 2022-11-30 10:47:13 +01:00 committed by GitHub
parent a113f9c2c0
commit d20dff60a7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -23,6 +23,7 @@ import { ChangeRequestComment } from './ChangeRequestComments/ChangeRequestComme
import { AddCommentField } from './ChangeRequestComments/AddCommentField'; import { AddCommentField } from './ChangeRequestComments/AddCommentField';
import { usePendingChangeRequests } from 'hooks/api/getters/usePendingChangeRequests/usePendingChangeRequests'; import { usePendingChangeRequests } from 'hooks/api/getters/usePendingChangeRequests/usePendingChangeRequests';
import { useChangeRequestsEnabled } from '../../../hooks/useChangeRequestsEnabled'; import { useChangeRequestsEnabled } from '../../../hooks/useChangeRequestsEnabled';
import { Dialogue } from 'component/common/Dialogue/Dialogue';
const StyledAsideBox = styled(Box)(({ theme }) => ({ const StyledAsideBox = styled(Box)(({ theme }) => ({
width: '30%', width: '30%',
@ -50,6 +51,7 @@ const StyledInnerContainer = styled(Box)(({ theme }) => ({
export const ChangeRequestOverview: FC = () => { export const ChangeRequestOverview: FC = () => {
const projectId = useRequiredPathParam('projectId'); const projectId = useRequiredPathParam('projectId');
const [showCancelDialog, setShowCancelDialog] = useState(false);
const { user } = useAuthUser(); const { user } = useAuthUser();
const { isAdmin } = useContext(AccessContext); const { isAdmin } = useContext(AccessContext);
const [commentText, setCommentText] = useState(''); const [commentText, setCommentText] = useState('');
@ -110,6 +112,7 @@ export const ChangeRequestOverview: FC = () => {
await changeState(projectId, Number(id), { await changeState(projectId, Number(id), {
state: 'Cancelled', state: 'Cancelled',
}); });
setShowCancelDialog(false);
refetchChangeRequest(); refetchChangeRequest();
refetchChangeRequestOpen(); refetchChangeRequestOpen();
setToastData({ setToastData({
@ -122,6 +125,9 @@ export const ChangeRequestOverview: FC = () => {
} }
}; };
const onCancel = () => setShowCancelDialog(true);
const onCancelAbort = () => setShowCancelDialog(false);
const isSelfReview = const isSelfReview =
changeRequest?.createdBy.id === user?.id && changeRequest?.createdBy.id === user?.id &&
changeRequest.state === 'In review' && changeRequest.state === 'In review' &&
@ -239,7 +245,7 @@ export const ChangeRequestOverview: FC = () => {
<Button <Button
sx={{ ml: 2 }} sx={{ ml: 2 }}
variant="outlined" variant="outlined"
onClick={onCancelChanges} onClick={onCancel}
> >
Cancel changes Cancel changes
</Button> </Button>
@ -248,6 +254,24 @@ export const ChangeRequestOverview: FC = () => {
</StyledButtonBox> </StyledButtonBox>
</StyledInnerContainer> </StyledInnerContainer>
</StyledPaper> </StyledPaper>
<Dialogue
open={showCancelDialog}
onClick={onCancelChanges}
onClose={onCancelAbort}
title="Cancel change request"
>
<Typography sx={{ marginBottom: 2 }}>
You are about to cancel this change request
</Typography>
<Typography
variant="body2"
sx={theme => ({ color: theme.palette.neutral.dark })}
>
The change request will be moved to closed, and it can't
be applied anymore. Once cancelled, the change request
can't be reopened.
</Typography>
</Dialogue>
</Box> </Box>
</> </>
); );