Unsaved Changes Notification

Purpose: To implement an "unsaved changes" confirmation that will notify users that they are leaving a form with unsaved changes and ask them if they want to save or not.

User Story
As a FOLIO user
I want to know if I am leaving a form with unsaved changes
So I can save the changes if desired

Scenarios

1. Scenario

   • Given the create or edit user form with unsaved changes

   • When I navigate away from the page by clicking another navigational element in FOLIO OR using the back button in the browser

   • Then I am presented with an unsaved changes notification (see attached screenshot)

     • Text: Save changes?

     • Buttons:

       • -Save changes - Saves changes and allows user to navigate as indicated-

       • Discard changes - Discards changes and allows user to navigate as indicated

       • Cancel - Closes notification popup and leaves user on create/edit user page. Unsaved changes remain and are unsaved.

2. Scenario

   • Given the create or edit item form with unsaved changes

   • When I navigate away from the page by clicking another navigational element in FOLIO OR using the back button in the browser

   • Then I am presented with an unsaved changes notification (see attached screenshot)

     • Text: Save changes?

     • Buttons:

       • -Save changes - Saves changes and allows user to navigate as indicated-

       • Discard changes - Discards changes and allows user to navigate as indicated

       • Cancel - Closes notification popup and leaves user on create/edit user page. Unsaved changes remain and are unsaved.

3. Scenario

   • Given I navigate away from a create or edit form with unsaved changes AND validation errors are present (invalid or required fields)

   • When I click the "Save changes" button in the unsaved changes notification

   • Then the notification closes and returns user to the create/edit user page where they can view and correct any validation errors and retry their save