feat: cancel modal and tests #4971
Conversation
Santi-3rd
requested review from
fpigeonjr,
johndeange,
josbell,
rajohnson90 and
weimiao67
as code owners
There was a problem hiding this comment.
Pull request overview
This PR adds a cancel confirmation modal to the Procurement Tracker Step 1 form. When users click the Cancel button after filling out the form, a modal prompts them to confirm whether they want to discard their changes or continue editing.
Changes:
- Added cancel confirmation modal that prompts users before clearing form data
- Renamed
disableStep1ContinuetodisableStep1Buttonsto reflect that both Cancel and Complete buttons share the same disabled state - Updated unit tests to cover modal functionality and removed redundant parent-level test
- Added E2E test to verify complete cancel modal flow including modal appearance, dismissal, and form reset
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| ProcurementTrackerStepOne.hooks.js | Modified cancelStep1 to show confirmation modal instead of directly clearing form; added modal state management; renamed button disable variable |
| ProcurementTrackerStepOne.jsx | Integrated ConfirmationModal component; applied disableStep1Buttons to Cancel button |
| ProcurementTrackerStepOne.hooks.test.js | Updated tests to verify modal setup, modal confirmation behavior, and renamed variable |
| ProcurementTrackerStepOne.test.jsx | Updated tests to use renamed disableStep1Buttons variable and added mock modal props |
| AgreementProcurementTracker.test.jsx | Removed parent-level cancel test as functionality is now tested at component/hook level |
| procurementTracker.cy.js | Added E2E test for cancel modal flow and updated existing test to verify cancel button disabled state |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| setStep1Notes(""); | ||
| setShowModal(true); | ||
| setModalProps({ | ||
| heading: "Are you sure you want to cancel this task? Your input will be not be saved.", |
There was a problem hiding this comment.
There's a spelling error in this modal heading. It should read "Your input will not be saved" instead of "Your input will be not be saved" (remove the extra "be").
| heading: "Are you sure you want to cancel this task? Your input will be not be saved.", | |
| heading: "Are you sure you want to cancel this task? Your input will not be saved.", |
| cy.get("#users-combobox-input").should("be.disabled"); | ||
| cy.get("#date-completed").should("be.disabled"); | ||
| cy.get("#notes").should("be.disabled"); | ||
| cy.get('[data-cy="continue-btn"]').should("be.disabled"); |
There was a problem hiding this comment.
This E2E test contains duplicate assertions. Lines 48-56 are exact duplicates of lines 52-56. The assertions for checking that form fields and buttons are disabled should only appear once. Remove lines 52-56.
| cy.get("#users-combobox-input").should("be.disabled"); | |
| cy.get("#date-completed").should("be.disabled"); | |
| cy.get("#notes").should("be.disabled"); | |
| cy.get('[data-cy="continue-btn"]').should("be.disabled"); |
| it("Cancel the form", () => { | ||
| cy.visit("/agreements/13/procurement-tracker"); | ||
|
|
||
| //Fill out the form and then cancel the task |
There was a problem hiding this comment.
The comment "Fill out the form and then cancel the task" should use proper capitalization and punctuation. It should be "// Fill out the form and then cancel the task." with a capital F and a period at the end.
| //Fill out the form and then cancel the task | |
| // Fill out the form and then cancel the task. |
| }; | ||
|
|
||
| const disableStep1Continue = !isPreSolicitationPackageSent || !selectedUser?.id || !step1DateCompleted; | ||
| const disableStep1Buttons = !isPreSolicitationPackageSent || !selectedUser?.id || !step1DateCompleted; |
There was a problem hiding this comment.
don't think we need to disable the cancel button if the form is not completed. should allow cancel at any time
There was a problem hiding this comment.
I thought so too, but I double checked on Figma and it looked like both buttons are disabled and enabled together. Unless something changed that I don't know about.
| heading: "Are you sure you want to cancel this task? Your input will be not be saved.", | ||
| actionButtonText: "Cancel Task", | ||
| secondaryButtonText: "Continue Editing", | ||
| handleConfirm: () => { |
There was a problem hiding this comment.
we have a cancel function in the hooks file you can use for the handleConfirm
What changed
Added Cancel Modal for the Procurement Tracker Step 1
Issue
#1603 #4972
How to test
Screenshots
Definition of Done Checklist