Issue #16 - [FEATURE] Add unsaved changes protection to Theme CRUD modal

[rogelio-cmj]

Motivation

Users can accidentally lose their work when editing or creating themes in the Settings > Themes interface. This issue is particularly important for theme configuration, where users may spend considerable time crafting complex JSON configurations. A single accidental click can result in lost work.

Current Behavior

The Theme modal allows users to create new themes or edit existing ones, but provides no protection against accidental data loss. When users modify the theme name or JSON configuration and attempt to close the modal, their changes are immediately discarded without confirmation.

Reproduction Steps:

1. Navigate to Settings > Themes in Superset
2. Click "Add Theme" or edit an existing non-system theme
3. Make changes to the theme name field (e.g., change "My Theme" to "Updated Theme")
4. Click the "Cancel" button or the X icon to close the modal
5. Observe: The modal closes immediately and all changes are lost without any warning
6. Alternatively, make changes to the JSON configuration in the editor
7. Attempt to close the modal or navigate away from the page
8. Observe: Changes are lost without confirmation, and browser navigation occurs without warning

Expected Behavior

The Theme modal should detect when users have unsaved changes and provide appropriate warnings to prevent accidental data loss. Users should be given clear options to save their work, discard changes, or continue editing.

Acceptance Criteria:

• When a user modifies the theme name or JSON configuration and attempts to close the modal, a confirmation dialog appears with three options: "Keep editing", "Save and close", and "Discard changes"
• The confirmation dialog does NOT appear when no changes have been made to the theme
• The confirmation dialog does NOT appear when viewing a read-only system theme
• The confirmation dialog does NOT appear after successfully saving changes
• When attempting to navigate away from the page or close the browser tab with unsaved changes, the browser's native before unload warning appears
• All three confirmation options work correctly: "Keep editing" returns to the editor, "Save and close" persists changes and closes the modal, "Discard changes" closes without saving

Steps to Test

1. Navigate to Settings > Themes
2. Click "Add Theme" and enter a theme name and valid JSON configuration
3. Click "Cancel" - verify the unsaved changes alert appears
4. Click "Keep editing" - verify you return to the editor with your changes intact
5. Click "Cancel" again, then click "Discard changes" - verify the modal closes without saving
6. Click "Add Theme" again, make changes, then click "Save and close" from the alert - verify the theme is saved and modal closes
7. Edit an existing theme, make changes, and attempt to close the browser tab - verify the browser's native warning appears
8. Open a system theme (read-only) - verify no unsaved changes warning appears regardless of actions
9. Create a new theme, save it successfully, then immediately close the modal - verify no warning appears

Submission

Download https://cap.so/ to record your screen (use Studio mode). Export as an mp4, and drag and drop into an issue comment below.

Guide to submitting pull requests: https://hackmd.io/@timothy1ee/Hky8kV3hlx