[dashboard][8.17][8.16] fix State being dropped when editing visualize embeddables - #216910

#216901)

Closes #216886

8.17 and 8.16 resolve in branch specific patch
#216910

### Problem
1) Open previously saved empty dashboard. `panels$.value` is `{}`
2) add new markdown panel. This takes you to visualize editor. On return
to dashboard, embeddable state transfer service contains the markdown
embeddable runtime state. `panels$.value` is `{ markdownPanelId: {
explicitInput: {}}}`. Markdown panel is rendered with empty
serializedState and runtimeState from embeddable transfer service.
3) Click save dashboard. This is where the bug lies. `panels$.value` is
not updated to `{ markdownPanelId: { explicitInput: { // serializedState
}}}` but instead, remains unchanged.
4) Click duplicate panel. New panel is added to `panels$.value`. This
triggers unsaved changes to be stored in session storage. Unsaved
changes store `panels$.value` so `{ markdownPanelId: { explicitInput: {
// empty!!! }}, duplicatedMarkdownPanelId: { explicitInput: {
serializedState }}}` is put into session storage
5) Edit duplicated markdown panel. This takes you to visualize editor.
On return to dashboard, embeddable state transfer service contains the
new markdown embeddable runtime state for the duplicated panel. This is
where things start to fall apart. The dashboard state is loaded from
saved object state and `panels` contains the serialized state for both
`markdownPanelId` and `duplicatedMarkdownPanelId`. Then unsaved changes
state is loaded from dashboard session and replaces dashboard saved
state. This causes the first markdown panel to render with empty
serializedState.


### Solution
The problem is resolved by updating `panels$` on save. This causes step
4 to store the current serializedState in unsaved changes.

elastic#216901)

Closes elastic#216886

8.17 and 8.16 resolve in branch specific patch
elastic#216910

### Problem
1) Open previously saved empty dashboard. `panels$.value` is `{}`
2) add new markdown panel. This takes you to visualize editor. On return
to dashboard, embeddable state transfer service contains the markdown
embeddable runtime state. `panels$.value` is `{ markdownPanelId: {
explicitInput: {}}}`. Markdown panel is rendered with empty
serializedState and runtimeState from embeddable transfer service.
3) Click save dashboard. This is where the bug lies. `panels$.value` is
not updated to `{ markdownPanelId: { explicitInput: { // serializedState
}}}` but instead, remains unchanged.
4) Click duplicate panel. New panel is added to `panels$.value`. This
triggers unsaved changes to be stored in session storage. Unsaved
changes store `panels$.value` so `{ markdownPanelId: { explicitInput: {
// empty!!! }}, duplicatedMarkdownPanelId: { explicitInput: {
serializedState }}}` is put into session storage
5) Edit duplicated markdown panel. This takes you to visualize editor.
On return to dashboard, embeddable state transfer service contains the
new markdown embeddable runtime state for the duplicated panel. This is
where things start to fall apart. The dashboard state is loaded from
saved object state and `panels` contains the serialized state for both
`markdownPanelId` and `duplicatedMarkdownPanelId`. Then unsaved changes
state is loaded from dashboard session and replaces dashboard saved
state. This causes the first markdown panel to render with empty
serializedState.

### Solution
The problem is resolved by updating `panels$` on save. This causes step
4 to store the current serializedState in unsaved changes.

(cherry picked from commit 45b7af2)

elastic#216901)

Closes elastic#216886

8.17 and 8.16 resolve in branch specific patch
elastic#216910

### Problem
1) Open previously saved empty dashboard. `panels$.value` is `{}`
2) add new markdown panel. This takes you to visualize editor. On return
to dashboard, embeddable state transfer service contains the markdown
embeddable runtime state. `panels$.value` is `{ markdownPanelId: {
explicitInput: {}}}`. Markdown panel is rendered with empty
serializedState and runtimeState from embeddable transfer service.
3) Click save dashboard. This is where the bug lies. `panels$.value` is
not updated to `{ markdownPanelId: { explicitInput: { // serializedState
}}}` but instead, remains unchanged.
4) Click duplicate panel. New panel is added to `panels$.value`. This
triggers unsaved changes to be stored in session storage. Unsaved
changes store `panels$.value` so `{ markdownPanelId: { explicitInput: {
// empty!!! }}, duplicatedMarkdownPanelId: { explicitInput: {
serializedState }}}` is put into session storage
5) Edit duplicated markdown panel. This takes you to visualize editor.
On return to dashboard, embeddable state transfer service contains the
new markdown embeddable runtime state for the duplicated panel. This is
where things start to fall apart. The dashboard state is loaded from
saved object state and `panels` contains the serialized state for both
`markdownPanelId` and `duplicatedMarkdownPanelId`. Then unsaved changes
state is loaded from dashboard session and replaces dashboard saved
state. This causes the first markdown panel to render with empty
serializedState.

### Solution
The problem is resolved by updating `panels$` on save. This causes step
4 to store the current serializedState in unsaved changes.

(cherry picked from commit 45b7af2)

elastic#216901)

Closes elastic#216886

8.17 and 8.16 resolve in branch specific patch
elastic#216910

### Problem
1) Open previously saved empty dashboard. `panels$.value` is `{}`
2) add new markdown panel. This takes you to visualize editor. On return
to dashboard, embeddable state transfer service contains the markdown
embeddable runtime state. `panels$.value` is `{ markdownPanelId: {
explicitInput: {}}}`. Markdown panel is rendered with empty
serializedState and runtimeState from embeddable transfer service.
3) Click save dashboard. This is where the bug lies. `panels$.value` is
not updated to `{ markdownPanelId: { explicitInput: { // serializedState
}}}` but instead, remains unchanged.
4) Click duplicate panel. New panel is added to `panels$.value`. This
triggers unsaved changes to be stored in session storage. Unsaved
changes store `panels$.value` so `{ markdownPanelId: { explicitInput: {
// empty!!! }}, duplicatedMarkdownPanelId: { explicitInput: {
serializedState }}}` is put into session storage
5) Edit duplicated markdown panel. This takes you to visualize editor.
On return to dashboard, embeddable state transfer service contains the
new markdown embeddable runtime state for the duplicated panel. This is
where things start to fall apart. The dashboard state is loaded from
saved object state and `panels` contains the serialized state for both
`markdownPanelId` and `duplicatedMarkdownPanelId`. Then unsaved changes
state is loaded from dashboard session and replaces dashboard saved
state. This causes the first markdown panel to render with empty
serializedState.

### Solution
The problem is resolved by updating `panels$` on save. This causes step
4 to store the current serializedState in unsaved changes.

(cherry picked from commit 45b7af2)

…e embeddables (elastic#216910)

8.16 and 8.17 fix for elastic#216886

See elastic#216901 for details

(cherry picked from commit 2fe3abc)

…ddables (#216901) (#216926)

# Backport

This will backport the following commits from `main` to `9.0`:
- [[dashboard] fix State being dropped when editing visualize
embeddables (#216901)](#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//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//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//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>

…eddables (#216901) (#216924)

# Backport

This will backport the following commits from `main` to `8.18`:
- [[dashboard] fix State being dropped when editing visualize
embeddables (#216901)](#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//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 `8.18`:
{{{{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//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 `8.18`:
{{{{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//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 `8.18`:
{{{{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>

…ddables (#216901) (#216925)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[dashboard] fix State being dropped when editing visualize
embeddables (#216901)](#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//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 `8.x`:
{{{{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//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 `8.x`:
{{{{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//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 `8.x`:
{{{{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>

…isualize embeddables (#216910) (#216927)

# Backport

This will backport the following commits from `8.17` to `8.16`:
- [[dashboard][8.17][8.16] fix State being dropped when editing
visualize embeddables
(#216910)](#216910)

<!--- 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:24:24Z","message":"[dashboard][8.17][8.16]
fix State being dropped when editing visualize embeddables
(#216910)\n\n8.16 and 8.17 fix for
https://github.com/elastic/kibana/issues/216886\n\nSee
#216901 for
details","sha":"2fe3abc40811fc10dd2cdd9af72f93e68b0526fa","branchLabelMapping":{"^v8.16.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:Presentation","backport:version","v8.17.5","v8.16.7"],"title":"[dashboard][8.17][8.16]
fix State being dropped when editing visualize
embeddables","number":216910,"url":"https://github.com/elastic/kibana/pull/216910","mergeCommit":{"message":"[dashboard][8.17][8.16]
fix State being dropped when editing visualize embeddables
(#216910)\n\n8.16 and 8.17 fix for
https://github.com/elastic/kibana/issues/216886\n\nSee
#216901 for
details","sha":"2fe3abc40811fc10dd2cdd9af72f93e68b0526fa"}},"sourceBranch":"8.17","suggestedTargetBranches":["8.16"],"targetPullRequestStates":[{"branch":"8.17","label":"v8.17.5","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/216910","number":216910,"mergeCommit":{"message":"[dashboard][8.17][8.16]
fix State being dropped when editing visualize embeddables
(#216910)\n\n8.16 and 8.17 fix for
https://github.com/elastic/kibana/issues/216886\n\nSee
#216901 for
details","sha":"2fe3abc40811fc10dd2cdd9af72f93e68b0526fa"}},{"branch":"8.16","label":"v8.16.7","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->