[8.16] [visualize] fix Save to library action from a by value panel breaks the chart panel (#210125)

src/plugins/visualizations/public/embeddable/state.ts

@@ -30,13 +30,11 @@ import {
 import { getSavedVisualization } from '../utils/saved_visualize_utils';
 import type { SerializedVis } from '../vis';
 import {
-  isVisualizeSavedObjectState,
   VisualizeSavedObjectInputState,
   VisualizeSerializedState,
   VisualizeRuntimeState,
   VisualizeSavedVisInputState,
   ExtraSavedObjectProperties,
-  isVisualizeRuntimeState,
 } from './types';
 
 export const deserializeState = async (
@@ -49,15 +47,24 @@ export const deserializeState = async (
       },
     } as VisualizeRuntimeState;
   let serializedState = cloneDeep(state.rawState);
-  if (isVisualizeSavedObjectState(serializedState)) {
-    serializedState = await deserializeSavedObjectState(serializedState);
-  } else if (isVisualizeRuntimeState(serializedState)) {
+  if ((serializedState as VisualizeSavedObjectInputState).savedObjectId) {
+    serializedState = await deserializeSavedObjectState(
+      serializedState as VisualizeSavedObjectInputState
+    );
+  } else if ((serializedState as VisualizeRuntimeState).serializedVis) {
+    // TODO remove once embeddable only exposes SerializedState
+    // Canvas passes incoming embeddable state in getSerializedStateForChild
+    // without this early return, serializedVis gets replaced in deserializeSavedVisState
+    // and breaks adding a new by-value embeddable in Canvas
     return serializedState as VisualizeRuntimeState;
   }
 
   const references: Reference[] = state.references ?? [];
 
-  const deserializedSavedVis = deserializeSavedVisState(serializedState, references);
+  const deserializedSavedVis = deserializeSavedVisState(
+    serializedState as VisualizeSavedVisInputState,
+    references
+  );
 
   return {
     ...serializedState,

src/plugins/visualizations/public/embeddable/types.ts

@@ -69,26 +69,6 @@ export type VisualizeOutputState = VisualizeSavedVisInputState &
   Required<Omit<SerializedTitles, 'hidePanelTitles'>> &
   ExtraSavedObjectProperties;
 
-export const isVisualizeSavedObjectState = (
-  state: unknown
-): state is VisualizeSavedObjectInputState => {
-  return (
-    typeof state !== 'undefined' &&
-    (state as VisualizeSavedObjectInputState).savedObjectId !== undefined &&
-    !!(state as VisualizeSavedObjectInputState).savedObjectId &&
-    !('savedVis' in (state as VisualizeSavedObjectInputState)) &&
-    !('serializedVis' in (state as VisualizeSavedObjectInputState))
-  );
-};
-
-export const isVisualizeRuntimeState = (state: unknown): state is VisualizeRuntimeState => {
-  return (
-    !isVisualizeSavedObjectState(state) &&
-    !('savedVis' in (state as VisualizeRuntimeState)) &&
-    (state as VisualizeRuntimeState).serializedVis !== undefined
-  );
-};
-
 export type VisualizeApi = Partial<HasEditCapabilities> &
   PublishesDataViews &
   PublishesDataLoading &

src/plugins/visualizations/public/embeddable/visualize_embeddable.tsx

@@ -53,7 +53,6 @@ import {
   VisualizeOutputState,
   VisualizeRuntimeState,
   VisualizeSerializedState,
-  isVisualizeSavedObjectState,
 } from './types';
 import { initializeEditApi } from './initialize_edit_api';
 
@@ -66,15 +65,11 @@ export const getVisualizeEmbeddableFactory: (deps: {
 }) => ({
   type: VISUALIZE_EMBEDDABLE_TYPE,
   deserializeState,
-  buildEmbeddable: async (initialState: unknown, buildApi, uuid, parentApi) => {
-    // Handle state transfer from legacy visualize editor, which uses the legacy visualize embeddable and doesn't
-    // produce a snapshot state. If buildEmbeddable is passed only a savedObjectId in the state, this means deserializeState
-    // was never run, and it needs to be invoked manually
-    const state = isVisualizeSavedObjectState(initialState)
-      ? await deserializeState({
-          rawState: initialState,
-        })
-      : (initialState as VisualizeRuntimeState);
+  buildEmbeddable: async (initialState, buildApi, uuid, parentApi) => {
+    const state = {
+      ...initialState,
+      linkedToLibrary: Boolean(initialState.savedObjectId),
+    };
 
     // Initialize dynamic actions
     const dynamicActionsApi = embeddableEnhancedStart?.initializeReactEmbeddableDynamicActions(
@@ -311,7 +306,13 @@ export const getVisualizeEmbeddableFactory: (deps: {
           },
         ],
         savedObjectProperties: getUnchangingComparator(),
-        linkedToLibrary: [linkedToLibrary$, (value) => linkedToLibrary$.next(value)],
+        linkedToLibrary: [
+          linkedToLibrary$,
+          (value) => linkedToLibrary$.next(value),
+          (a, b) => {
+            return a === undefined || b === undefined ? true : a === b;
+          },
+        ],
       }
     );
 

src/plugins/visualizations/public/plugin.ts

@@ -125,7 +125,7 @@ import {
   VisualizationSavedObjectAttributes,
 } from '../common/content_management';
 import { AddAggVisualizationPanelAction } from './actions/add_agg_vis_action';
-import type { VisualizeSerializedState } from './embeddable/types';
+import type { VisualizeRuntimeState } from './embeddable/types';
 import { getVisualizeEmbeddableFactoryLazy } from './embeddable';
 
 /**
@@ -412,10 +412,15 @@ export class VisualizationsPlugin
       return getVisualizeEmbeddableFactory({ embeddableStart, embeddableEnhancedStart });
     });
     embeddable.registerReactEmbeddableSavedObject<VisualizationSavedObjectAttributes>({
-      onAdd: (container, savedObject) => {
-        container.addNewPanel<VisualizeSerializedState>({
+      onAdd: async (container, savedObject) => {
+        const { deserializeState } = await import('./embeddable/state');
+        const initialState = await deserializeState({
+          rawState: { savedObjectId: savedObject.id },
+          references: savedObject.references,
+        });
+        container.addNewPanel<VisualizeRuntimeState>({
           panelType: VISUALIZE_EMBEDDABLE_TYPE,
-          initialState: { savedObjectId: savedObject.id },
+          initialState,
         });
       },
       embeddableType: VISUALIZE_EMBEDDABLE_TYPE,

src/plugins/visualizations/public/visualize_app/utils/get_top_nav_config.tsx

@@ -187,7 +187,10 @@ export const getTopNavConfig = (
             stateTransfer.navigateToWithEmbeddablePackage(app, {
               state: {
                 type: VISUALIZE_EMBEDDABLE_TYPE,
-                input: { savedObjectId: id },
+                input: {
+                  serializedVis: vis.serialize(),
+                  savedObjectId: id,
+                },
                 embeddableId: saveOptions.copyOnSave ? undefined : embeddableId,
                 searchSessionId: data.search.session.getSessionId(),
               },