Dashboard scene: Discard panel changes disabled/enabled depending of changes

[oscarkilhed]

What is this feature?

Screen.Recording.2024-04-30.at.16.38.42.mov

This enables and disables the discard panel changes button depending on if the panel has been changed.

The comparison by converting to Panel and then running it through jsonDiff similar to what we do to detect dashboard changes might be a bit heavy handed, but it feels fairly robust.

Fixes #86974

[grafana-delivery-bot]

Hello @oscarkilhed!
Backport pull requests need to be either:

• Pull requests which address bugs,
• Urgent fixes which need product approval, in order to get merged,
• Docs changes.

Please, if the current pull request addresses a bug fix, label it with the type/bug label.
If it already has the product approval, please add the product-approved label. For docs changes, please add the type/docs label.
If the pull request modifies CI behaviour, please add the type/ci label.
If none of the above applies, please consider removing the backport label and target the next major/minor release.
Thanks!

[grafana-delivery-bot]

This PR must be merged before a backport PR will be created.

[ivanortegaalba]

I was testing this with live data. I was afraid of causing too many calls to this._updateDirty when streaming. But I found the streaming doesn't work when editing a panel in scenes.

[ivanortegaalba]

Sorry, I was testing wrong, but yes, this is diffing the panel edit for each of the streaming budgets. Why do we need to check the data state? That data is never persisted, right? Probably we just need to check the transforms. We could use something like we do in DashboardScene:

    this._changeTrackerSub = this._dashboard.subscribeToEvent(
      SceneObjectStateChangedEvent,
      this.onStateChanged.bind(this)
    );

Then in the callback we could check the changed stuff, and only run the diff when needed:

  private onStateChanged({ payload }: SceneObjectStateChangedEvent) {
    // If there are no changes in the state, the check is not needed
    if (Object.keys(payload.partialUpdate).length === 0) {
      return;
    }

    // SceneQueryRunner includes the DS configuration
    if (payload.changedObject instanceof SceneQueryRunner) {
      if (!Object.prototype.hasOwnProperty.call(payload.partialUpdate, 'data')) {
        return this.detectSaveModelChanges();
      }
    }
    // SceneDataTransformer includes the transformation configuration
    if (payload.changedObject instanceof SceneDataTransformer) {
      if (!Object.prototype.hasOwnProperty.call(payload.partialUpdate, 'data')) {
        return this.detectSaveModelChanges();
      }
    }
}

[oscarkilhed]

I'll try this

[ivanortegaalba]

This was causing flakiness when resolving all timers

[dprokop]

Works as expected. Great that you managed to reuse the code from the dashboard change detection.

[Sergej-Vlasov]

Code looks good. Tested locally and discard panel button works as intended now.

[grafana-delivery-bot]

The backport to v11.0.x failed:

The process '/usr/bin/git' failed with exit code 1

To backport manually, run these commands in your terminal:

# Fetch latest updates from GitHub
git fetch
# Create a new branch
git switch --create backport-87137-to-v11.0.x origin/v11.0.x
# Cherry-pick the merged commit of this pull request and resolve the conflicts
git cherry-pick -x c3936bbae2e1327194e66d0bb14e110b52a60609

When the conflicts are resolved, stage and commit the changes:

git add . && git cherry-pick --continue

If you have the GitHub CLI installed:

# Push the branch to GitHub:
git push --set-upstream origin backport-87137-to-v11.0.x
# Create the PR body template
PR_BODY=$(gh pr view 87137 --json body --template 'Backport c3936bbae2e1327194e66d0bb14e110b52a60609 from #87137{{ "\n\n---\n\n" }}{{ index . "body" }}')
# Create the PR on GitHub
echo "${PR_BODY}" | gh pr create --title "[v11.0.x] Dashboard scene: Discard panel changes disabled/enabled depending of changes" --body-file - --label "type/bug" --label "area/frontend" --label "no-changelog" --label "area/scenes" --label "backport" --base v11.0.x --milestone 11.0.x --web

Or, if you don't have the GitHub CLI installed (we recommend you install it!):

# Push the branch to GitHub:
git push --set-upstream origin backport-87137-to-v11.0.x

# Create a pull request where the `base` branch is `v11.0.x` and the `compare`/`head` branch is `backport-87137-to-v11.0.x`.

# Remove the local backport branch
git switch main
git branch -D backport-87137-to-v11.0.x