[9.0] [dashboard] fix State being dropped when editing visualize embeddables (#216901) (#216926)

# Backport

This will backport the following commits from `main` to `9.0`:
- [[dashboard] fix State being dropped when editing visualize
embeddables (#216901)](https://github.com/elastic/kibana/pull/216901)

<!--- Backport version: 9.6.6 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Nathan
Reese","email":"reese.nathan@elastic.co"},"sourceCommit":{"committedDate":"2025-04-02T20:12:27Z","message":"[dashboard]
fix State being dropped when editing visualize embeddables
(#216901)\n\nCloses
https://github.com/elastic/kibana/issues/216886\n\n8.17 and 8.16 resolve
in branch specific
patch\nhttps://github.com/elastic/kibana/pull/216910\n\n### Problem\n1)
Open previously saved empty dashboard. `panels$.value` is `{}`\n2) add
new markdown panel. This takes you to visualize editor. On return\nto
dashboard, embeddable state transfer service contains the
markdown\nembeddable runtime state. `panels$.value` is `{
markdownPanelId: {\nexplicitInput: {}}}`. Markdown panel is rendered
with empty\nserializedState and runtimeState from embeddable transfer
service.\n3) Click save dashboard. This is where the bug lies.
`panels$.value` is\nnot updated to `{ markdownPanelId: { explicitInput:
{ // serializedState\n}}}` but instead, remains unchanged.\n4) Click
duplicate panel. New panel is added to `panels$.value`. This\ntriggers
unsaved changes to be stored in session storage. Unsaved\nchanges store
`panels$.value` so `{ markdownPanelId: { explicitInput: {\n// empty!!!
}}, duplicatedMarkdownPanelId: { explicitInput: {\nserializedState }}}`
is put into session storage\n5) Edit duplicated markdown panel. This
takes you to visualize editor.\nOn return to dashboard, embeddable state
transfer service contains the\nnew markdown embeddable runtime state for
the duplicated panel. This is\nwhere things start to fall apart. The
dashboard state is loaded from\nsaved object state and `panels` contains
the serialized state for both\n`markdownPanelId` and
`duplicatedMarkdownPanelId`. Then unsaved changes\nstate is loaded from
dashboard session and replaces dashboard saved\nstate. This causes the
first markdown panel to render with empty\nserializedState.\n\n\n###
Solution\nThe problem is resolved by updating `panels# Backport

This will backport the following commits from `main` to `9.0`:
{{{{raw}}}} - [[dashboard] fix State being dropped when editing
visualize embeddables
(#216901)](https://github.com/elastic/kibana/pull/216901){{{{/raw}}}}

<!--- Backport version: 9.6.6 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT on save. This causes step\n4 to store the current
serializedState in unsaved
changes.","sha":"45b7af2fbd55442924deb46166bee3eee42b7c70","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:Presentation","project:embeddableRebuild","backport:version","v9.1.0","v8.19.0","v8.18.1","v9.0.1"],"title":"[dashboard]
fix State being dropped when editing visualize
embeddables","number":216901,"url":"https://github.com/elastic/kibana/pull/216901","mergeCommit":{"message":"[dashboard]
fix State being dropped when editing visualize embeddables
(#216901)\n\nCloses
https://github.com/elastic/kibana/issues/216886\n\n8.17 and 8.16 resolve
in branch specific
patch\nhttps://github.com/elastic/kibana/pull/216910\n\n### Problem\n1)
Open previously saved empty dashboard. `panels$.value` is `{}`\n2) add
new markdown panel. This takes you to visualize editor. On return\nto
dashboard, embeddable state transfer service contains the
markdown\nembeddable runtime state. `panels$.value` is `{
markdownPanelId: {\nexplicitInput: {}}}`. Markdown panel is rendered
with empty\nserializedState and runtimeState from embeddable transfer
service.\n3) Click save dashboard. This is where the bug lies.
`panels$.value` is\nnot updated to `{ markdownPanelId: { explicitInput:
{ // serializedState\n}}}` but instead, remains unchanged.\n4) Click
duplicate panel. New panel is added to `panels$.value`. This\ntriggers
unsaved changes to be stored in session storage. Unsaved\nchanges store
`panels$.value` so `{ markdownPanelId: { explicitInput: {\n// empty!!!
}}, duplicatedMarkdownPanelId: { explicitInput: {\nserializedState }}}`
is put into session storage\n5) Edit duplicated markdown panel. This
takes you to visualize editor.\nOn return to dashboard, embeddable state
transfer service contains the\nnew markdown embeddable runtime state for
the duplicated panel. This is\nwhere things start to fall apart. The
dashboard state is loaded from\nsaved object state and `panels` contains
the serialized state for both\n`markdownPanelId` and
`duplicatedMarkdownPanelId`. Then unsaved changes\nstate is loaded from
dashboard session and replaces dashboard saved\nstate. This causes the
first markdown panel to render with empty\nserializedState.\n\n\n###
Solution\nThe problem is resolved by updating `panels# Backport

This will backport the following commits from `main` to `9.0`:
{{{{raw}}}} - [[dashboard] fix State being dropped when editing
visualize embeddables
(#216901)](https://github.com/elastic/kibana/pull/216901){{{{/raw}}}}

<!--- Backport version: 9.6.6 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT on save. This causes step\n4 to store the current
serializedState in unsaved
changes.","sha":"45b7af2fbd55442924deb46166bee3eee42b7c70"}},"sourceBranch":"main","suggestedTargetBranches":["8.x","8.18","9.0"],"targetPullRequestStates":[{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/216901","number":216901,"mergeCommit":{"message":"[dashboard]
fix State being dropped when editing visualize embeddables
(#216901)\n\nCloses
https://github.com/elastic/kibana/issues/216886\n\n8.17 and 8.16 resolve
in branch specific
patch\nhttps://github.com/elastic/kibana/pull/216910\n\n### Problem\n1)
Open previously saved empty dashboard. `panels$.value` is `{}`\n2) add
new markdown panel. This takes you to visualize editor. On return\nto
dashboard, embeddable state transfer service contains the
markdown\nembeddable runtime state. `panels$.value` is `{
markdownPanelId: {\nexplicitInput: {}}}`. Markdown panel is rendered
with empty\nserializedState and runtimeState from embeddable transfer
service.\n3) Click save dashboard. This is where the bug lies.
`panels$.value` is\nnot updated to `{ markdownPanelId: { explicitInput:
{ // serializedState\n}}}` but instead, remains unchanged.\n4) Click
duplicate panel. New panel is added to `panels$.value`. This\ntriggers
unsaved changes to be stored in session storage. Unsaved\nchanges store
`panels$.value` so `{ markdownPanelId: { explicitInput: {\n// empty!!!
}}, duplicatedMarkdownPanelId: { explicitInput: {\nserializedState }}}`
is put into session storage\n5) Edit duplicated markdown panel. This
takes you to visualize editor.\nOn return to dashboard, embeddable state
transfer service contains the\nnew markdown embeddable runtime state for
the duplicated panel. This is\nwhere things start to fall apart. The
dashboard state is loaded from\nsaved object state and `panels` contains
the serialized state for both\n`markdownPanelId` and
`duplicatedMarkdownPanelId`. Then unsaved changes\nstate is loaded from
dashboard session and replaces dashboard saved\nstate. This causes the
first markdown panel to render with empty\nserializedState.\n\n\n###
Solution\nThe problem is resolved by updating `panels# Backport

This will backport the following commits from `main` to `9.0`:
{{{{raw}}}} - [[dashboard] fix State being dropped when editing
visualize embeddables
(#216901)](https://github.com/elastic/kibana/pull/216901){{{{/raw}}}}

<!--- Backport version: 9.6.6 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT on save. This causes step\n4 to store the current
serializedState in unsaved
changes.","sha":"45b7af2fbd55442924deb46166bee3eee42b7c70"}},{"branch":"8.x","label":"v8.19.0","branchLabelMappingKey":"^v8.19.0$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.18","label":"v8.18.1","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"9.0","label":"v9.0.1","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Nathan Reese <reese.nathan@elastic.co>

src/platform/plugins/shared/dashboard/public/dashboard_api/panels_manager.ts

@@ -358,6 +358,7 @@ export function initializePanelsManager(
           [api.uuid]: api,
         });
       },
+      setPanels,
       reset: (lastSavedState: DashboardState) => {
         setPanels(lastSavedState.panels);
         restoredRuntimeState = {};

src/platform/plugins/shared/dashboard/public/dashboard_api/unsaved_changes_manager.ts

@@ -130,6 +130,8 @@ export function initializeUnsavedChangesManager({
       getLastSavedState: () => lastSavedState$.value,
       onSave: (savedState: DashboardState) => {
         lastSavedState$.next(savedState);
+        // sync panels manager with latest saved state
+        panelsManager.internalApi.setPanels(savedState.panels);
         saveNotification$.next();
       },
     },