feat: implement unsaved changes modal for navigation blocking

[dganesh05]

feat(ui): add unsaved changes detection and navigation blocking

SUMMARY

This PR adds unsaved changes detection and a modal confirmation dialog to prevent accidental navigation when users have unsaved changes in the dashboard and chart editing pages. This improves user experience by preventing data loss.

Key Changes:

• Created a new UnsavedChangesModal component that provides a consistent UI for handling unsaved changes across the application
• Integrated unsaved changes detection in DashboardPage component when in edit mode
• Added unsaved changes detection in ExplorePage (chart editing) by comparing current form data with saved/initial state
• Integrated UnsavedChangesModal in ChartList component's PropertiesModal for chart metadata editing
• Implemented navigation blocking using React Router's history.block() API to intercept navigation attempts
• Added browser beforeunload event handling to warn users when closing/refreshing the tab with unsaved changes
• Updated PropertiesModal to notify parent components about form changes via onFormChange callback

Design Decisions:

• The modal provides three options: Save, Discard, and Cancel
• Navigation is only blocked when navigating to different routes (not hash changes within the same route)
• For new charts without a saved state, the system tracks initial form data to detect meaningful changes
• Certain fields like url_params and extra_form_data are excluded from change detection as they change frequently but don't represent user edits
• The browser beforeunload prompt is only shown when the custom modal is not already displayed to avoid double prompts

Additional Changes:

• Updated .gitignore to exclude .cursor files
• Enhanced package-lock.json with peerDependencies for eslint-plugin-icons

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before

After

TESTING INSTRUCTIONS

1. Dashboard Edit Mode:

   • Navigate to a dashboard and enter edit mode
   • Make changes to the dashboard (e.g., add/remove charts, change layout)
   • Attempt to navigate away (click a menu item or use the browser back button)
   • Verify that the UnsavedChangesModal appears
   • Test all three options:
     • Save: Should save the dashboard and allow navigation
     • Discard: Should discard changes and allow navigation
     • Cancel: Should cancel navigation and return to editing

2. Chart Editing (Explore Page):

   • Navigate to the Explore page (chart editor)
   • Make changes to chart configuration (e.g., change visualization type, modify query)
   • Attempt to navigate away
   • Verify that the UnsavedChangesModal appears
   • Test Save, Discard, and Cancel options
   • For new charts: Create a new chart, add some configuration, and verify unsaved changes are detected

3. Chart Properties Modal (Chart List):

   • Navigate to the Chart List page
   • Click Edit on a chart to open PropertiesModal
   • Make changes to chart properties (name, description, owners, tags, etc.)
   • Attempt to navigate away or close the modal
   • Verify that the UnsavedChangesModal appears
   • Test all three options

4. Browser Tab Close/Refresh:

   • Make unsaved changes in any of the above scenarios
   • Attempt to close the browser tab or refresh the page
   • Verify that the browser's native warning appears (when the custom modal is not showing)

5. Edge Cases:

   • Verify that navigation within the same route (hash changes) is not blocked
   • Verify that after saving, navigation is no longer blocked
   • Verify that after discarding, changes are actually discarded
   • Test with new charts that have no saved state

ADDITIONAL INFORMATION

• Has associated issue:

• Required feature flags:

• Changes UI

• Includes DB Migration (follow approval process in SIP-59)

  • Migration is atomic, supports rollback & is backwards-compatible

  • Confirm DB migration upgrade and downgrade tested

  • Runtime estimates and downtime expectations provided

• Introduces new feature or API

• Removes existing feature or API