mirror of
				https://github.com/Unleash/unleash.git
				synced 2025-10-27 11:02:16 +01: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:
		
							parent
							
								
									a113f9c2c0
								
							
						
					
					
						commit
						d20dff60a7
					
				@ -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>
 | 
				
			||||||
        </>
 | 
					        </>
 | 
				
			||||||
    );
 | 
					    );
 | 
				
			||||||
 | 
				
			|||||||
		Loading…
	
		Reference in New Issue
	
	Block a user