Implement change detection for new content edit

[john-thomas-dotcms]

Parent Issue

#25445

User Story

As a content editor, I want to know if I've changed the content, so I don't accidentally lose my changes when closing the modal or the browser tab.

The existing content edit screen tracks when a user has made changes to any of the fields in the content, and if the user attempts to close the content edit modal or the browser tab, it pops up a warning modal asking the user to either confirm (close and lose changes) or continue editing (don't lose changes).

We need to implement the same functionality for the new content edit screen.

Important Notes:

• This functionality is currently partly broken in the current content edit screen.
  • In the current screen, the popup sometimes appears when no changes have been made, and fails to appear when some types of changes have been made.
  • In addition, the code has broken multiple times due to other unrelated code changes.
  • So, in the new content edit, we need to implement this functionality in a more robust and maintainable way.
• We should not track changes based on user actions within the fields (for example, if a user typed in a field or not).
  • Instead, we should compare the values in the fields when the content edit modal was opened (or when the content was last saved) with the values in the fields at the time the user attempts to close the modal.
  • This will be more robust, and prevent false alarm when a user makes changes to a field and then reverts those changes.

Acceptance Criteria

1. When a user attempts to close the content edit modal, a popup appears asking them to confirm if the following has occurred:
   • The user has changed the value of one or more fields in the content, and has not reverted the change.
2. When a user attempts to close the content edit modal, a popup does NOT appear asking them to confirm if any of the following have occurred:
   • The user has not made any changes to any fields of the content.
   • The user has made a change to one or more fields of the content, but has reverted all fields back to their original values.
3. When the confirmation popup appears, and the user chooses to discard the changes:
   • The content edit modal is closed.
   • No changes are made to the content.
4. When the confirmation popup appears, and the user chooses to continue editing:
   • The content edit modal remains open.
   • No changes are made to the content.
   • Any changes the user has made to the fields in the content edit modal are retained.
5. When the user has made changes to any fields, a visual indicator is displayed showing that the content has been changed.
   • When the user reverts their changes, the visual change indicator is removed/hidden.

Proposed Objective

Core Features

Proposed Priority

Priority 1 - Show Stopper

External Links... Slack Conversations, Support Tickets, Figma Designs, etc.

No response

Assumptions & Initiation Needs

No response

Quality Assurance Notes & Workarounds

No response

Sub-Tasks & Estimates

No response

[wezell]

@john-thomas-dotcms Regarding losing changes - do we want to maintain that annoying popup of "you have changed this"? Or should we be more auto-savey and store the state in the users browser storage so that if the user navigates away and then comes back, their changes are retained, e.g. like github does with issues? They are not stored in dotCMS until the user hits save, but the user won't have lost there work.

Try it in a githiub issue - start a new issue, write some stuff and then hit refresh. Instead of losing your work or breaking the users flow, your work is still there.

[john-thomas-dotcms]

@wezell retaining the info makes sense and would be nice behavior when the user navigates away from the tab or refreshes it.

But I don't think it makes sense when the user actually closes the content edit screen - at that point I think we'll want the popup. Users will expect that explicitly closing the screen will discard their changes.