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)