fix: save button was enabled even no changes were made to the dashboard

[richardfogaca]

SUMMARY

Fixes issue where the "Save" button in dashboard edit mode was incorrectly enabled even when no changes were made. This occurred because the theme change detection effect was running on every render, treating the existing theme value as a "change" and marking the dashboard as having unsaved modifications.

Changes:

• Added previousThemeRef to track the actual previous theme value
• Modified theme change detection to compare against the previous value instead of just checking if theme exists
• Only mark as unsaved when theme actually changes (not on initial render or navigation)
• Reset the theme ref when exiting edit mode to prevent false positives when navigating between dashboards
• Clear unsaved changes flag when entering edit mode to ensure clean state

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

• Save button now disabled when clicking on "Edit dashboard" (on initial page load):

TESTING INSTRUCTIONS

1. Open a dashboard and enter edit mode
2. Verify the "Save" button is disabled (no changes made yet)
3. Change the dashboard theme
4. Verify "Save" button is now enabled
5. Save the changes and exit edit mode
6. Navigate to another dashboard and enter edit mode
7. Verify "Save" button is disabled (should not show false positive)

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

[bito-code-review]

Code Review Agent Run #bfddc5

Actionable Suggestions - 0

Review Details

• Files reviewed - 1 · Commit Range: 2171a30..2171a30

  • superset-frontend/src/dashboard/components/Header/index.jsx
• Files skipped - 0
• Tools

  • Whispers (Secret Scanner) - ✔︎ Successful
  • Detect-secrets (Secret Scanner) - ✔︎ Successful

---

Bito Usage Guide

Commands

Type the following command in the pull request comment and save the comment.

• /review - Manually triggers a full AI review.

• /pause - Pauses automatic reviews on this pull request.

• /resume - Resumes automatic reviews.

• /resolve - Marks all Bito-posted review comments as resolved.

• /abort - Cancels all in-progress reviews.

Refer to the documentation for additional commands.

Configuration

This repository uses Default Agent You can customize the agent settings here or contact your Bito workspace admin at evan@preset.io.

Documentation & Help

• Customize agent settings
• Review rules
• General documentation
• FAQ

AI Code Review powered by

[korbit-ai]

I've completed my review and didn't find any issues.

Files scanned

​

File Path	Reviewed
superset-frontend/src/dashboard/components/Header/index.jsx	✅

Explore our documentation to understand the languages and file types we support and the files we ignore.

Check out our docs on how you can make Korbit work best for you and your team.

Loving Korbit!? Share us on LinkedIn Reddit and X

[bito-code-review]

Interaction Diagram by Bito

sequenceDiagram
participant USER as User
participant HDR as Dashboard Header<br/>🔄 Updated | ●●○ Medium
participant REF as previousThemeRef<br/>🟩 Added | ●○○ Low
participant EFFECT as useEffect Hook<br/>🔄 Updated | ●●○ Medium
participant ACT as boundActionCreators
participant STORE as Redux Store
participant STATE as dashboardState Reducer
Note over HDR, REF: Theme tracking enhancement<br/>prevents false positives
USER->>HDR: Navigate to dashboard
HDR->>REF: Initialize with dashboardInfo.theme
HDR->>EFFECT: Monitor theme & editMode changes
EFFECT->>REF: Compare current vs previous theme
alt Edit Mode & Theme Changed
EFFECT->>ACT: setUnsavedChanges(true)
ACT->>STORE: Dispatch SET_UNSAVED_CHANGES
STORE->>STATE: Update hasUnsavedChanges
EFFECT->>REF: Update previousThemeRef
else Not Edit Mode
EFFECT->>REF: Sync previousThemeRef
    end
USER->>HDR: Click Edit Dashboard button
HDR->>ACT: setUnsavedChanges(false)
ACT->>STORE: Reset unsaved changes flag

Loading

Critical path: User->Dashboard Header->useEffect Hook->boundActionCreators->Redux Store

Note: The Header component now uses a ref to track previous theme values, preventing false positive unsaved change notifications when navigating between dashboards. The edit button click also explicitly resets the unsaved changes flag to ensure clean state initialization.

[msyavuz]

Hey, this looks testable, can we get some tests?

[github-actions]

🎪 Showtime is building environment on GHA for 5e64f4a

[github-actions]

🎪 Showtime deployed environment on GHA for 5e64f4a

• Environment: http://34.215.78.155:8080 (admin/admin)
• Lifetime: 48h auto-cleanup
• Updates: New commits create fresh environments automatically

[EnxDev]

LGTM! We just need to address this comment

[richardfogaca]

Tests added, thanks for the heads up @msyavuz @EnxDev :)

[EnxDev]

LGTM, thanks!