feat: add navigation confirmation when builder fields are dirty

[karrui]

Problem

This PR adds a navigation confirmation on navigation and change of field when the field being currently edited is dirty. The possible navigation cases are covered below:

• start page
• end page
• field
• builder tabs
• drawer close button
• drawer back button

Any permutation (start page -> field, field -> field, end page -> start page) will trigger a render of a new DirtyModal component if the fields are dirty. This was achieved by storing pending states in the respective stores and context, subscribing to a newly exposed isDirty selector in fieldBuilderStore.

Any route navigation change will also trigger a similar NavigationPrompt modal.

Closes #4304

Solution

Breaking Changes

• No - this PR is backwards compatible

Features:

• feat: add NavigationPrompt modal component to show navigation confirmation modal when condition is true
  • this is used in this PR when the isDirty constant is true.
• feat: update useDesignStore, useFieldBuilderStore, CreatePageSidebarContext to be responsive to dirty field state.
• feat: show confirmation modal when navigating or changing edit fields when current field is dirty.

Screenshots

CreatePage stories should now have the behaviour, but here is a gif in case that is hard to navigate.

[justynoh]

Regarding the UX itself, is there any particular reason to have different modals in each case? Since there are two sets of modals (one for navigation and one for changing the active state within the same route), I wonder if users would have the (incorrect) impression that "discarding changes" means different things for each modal.

For instance (and this is just my intuition - feel free to comment if you don't think so), if i click out of a dirty field, I might think that the "You have unsaved changes" modal will discard my changes to the current active field. But if let's say i've been working on my form and I try to navigate away, seeing a different modal ("Discard changes?") I might be worried that there are other changes to the form that aren't yet saved.

[karrui]

Regarding the UX itself, is there any particular reason to have different modals in each case? Since there are two sets of modals (one for navigation and one for changing the active state within the same route), I wonder if users would have the (incorrect) impression that "discarding changes" means different things for each modal.

For instance (and this is just my intuition - feel free to comment if you don't think so), if i click out of a dirty field, I might think that the "You have unsaved changes" modal will discard my changes to the current active field. But if let's say i've been working on my form and I try to navigate away, seeing a different modal ("Discard changes?") I might be worried that there are other changes to the form that aren't yet saved.

@pearlyong?

[pearlyong]

agree it might be confusing, let's stick with the 'You have unsaved changes' modal, which is easier English to understand

[justynoh]

lgtm