Implementing ReferenceOrValueEmbeddable for visualize embeddable

src/plugins/dashboard/config.ts

@@ -20,7 +20,7 @@
 import { schema, TypeOf } from '@kbn/config-schema';
 
 export const configSchema = schema.object({
-  allowByValueEmbeddables: schema.boolean({ defaultValue: false }),
+  allowByValueEmbeddables: schema.boolean({ defaultValue: true }),
 });
 
 export type ConfigSchema = TypeOf<typeof configSchema>;

src/plugins/dashboard/public/attribute_service/attribute_service.tsx

@@ -95,27 +95,26 @@ export class AttributeService<
         : undefined;
     if (!useRefType) {
       return { attributes: newAttributes } as ValType;
-    } else {
-      try {
-        if (savedObjectId) {
-          await this.savedObjectsClient.update(this.type, savedObjectId, newAttributes);
-          return { savedObjectId } as RefType;
-        } else {
-          const savedItem = await this.savedObjectsClient.create(this.type, newAttributes);
-          return { savedObjectId: savedItem.id } as RefType;
-        }
-      } catch (error) {
-        this.toasts.addDanger({
-          title: i18n.translate('dashboard.attributeService.saveToLibraryError', {
-            defaultMessage: `Panel was not saved to the library. Error: {errorMessage}`,
-            values: {
-              errorMessage: error.message,
-            },
-          }),
-          'data-test-subj': 'saveDashboardFailure',
-        });
-        return Promise.reject({ error });
+    }
+    try {
+      if (savedObjectId) {
+        await this.savedObjectsClient.update(this.type, savedObjectId, newAttributes);
+        return { savedObjectId } as RefType;
+      } else {
+        const savedItem = await this.savedObjectsClient.create(this.type, newAttributes);
+        return { savedObjectId: savedItem.id } as RefType;
       }
+    } catch (error) {
+      this.toasts.addDanger({
+        title: i18n.translate('dashboard.attributeService.saveToLibraryError', {
+          defaultMessage: `Panel was not saved to the library. Error: {errorMessage}`,
+          values: {
+            errorMessage: error.message,
+          },
+        }),
+        'data-test-subj': 'saveDashboardFailure',
+      });
+      return Promise.reject({ error });
     }
   }
 
@@ -181,18 +180,22 @@ export class AttributeService<
       };
 
       if (saveOptions && (saveOptions as { showSaveModal: boolean }).showSaveModal) {
-        showSaveModal(
-          <SavedObjectSaveModal
-            onSave={onSave}
-            onClose={() => reject()}
-            title={input.attributes.title}
-            showCopyOnSave={false}
-            objectType={this.type}
-            showDescription={false}
-          />,
-          this.i18nContext
-        );
+        this.showSaveModal(onSave, input.attributes.title, this.type);
       }
     });
   };
+
+  public showSaveModal(onSave, title, type) {
+    showSaveModal(
+      <SavedObjectSaveModal
+        onSave={onSave}
+        onClose={() => reject()}
+        title={title}
+        showCopyOnSave={false}
+        objectType={type}
+        showDescription={false}
+      />,
+      this.i18nContext
+    );
+  }
 }

src/plugins/embeddable/public/lib/embeddables/default_embeddable_factory_provider.ts

@@ -37,11 +37,11 @@ export const defaultEmbeddableFactoryProvider = <
     getExplicitInput: def.getExplicitInput
       ? def.getExplicitInput.bind(def)
       : () => Promise.resolve({}),
-    createFromSavedObject:
-      def.createFromSavedObject ??
-      ((savedObjectId: string, input: Partial<I>, parent?: IContainer) => {
-        throw new Error(`Creation from saved object not supported by type ${def.type}`);
-      }),
+    createFromSavedObject: def.createFromSavedObject
+      ? def.createFromSavedObject.bind(def)
+      : (savedObjectId: string, input: Partial<I>, parent?: IContainer) => {
+          throw new Error(`Creation from saved object not supported by type ${def.type}`);
+        },
     create: def.create.bind(def),
     type: def.type,
     isEditable: def.isEditable.bind(def),

src/plugins/visualizations/kibana.json

@@ -3,6 +3,6 @@
   "version": "kibana",
   "server": true,
   "ui": true,
-  "requiredPlugins": ["data", "expressions", "uiActions", "embeddable", "usageCollection", "inspector"],
+  "requiredPlugins": ["data", "expressions", "uiActions", "embeddable", "usageCollection", "inspector", "dashboard"],
   "requiredBundles": ["kibanaUtils", "discover", "savedObjects"]
 }

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

@@ -18,7 +18,13 @@
  */
 
 import { Vis } from '../types';
-import { VisualizeInput, VisualizeEmbeddable } from './visualize_embeddable';
+import {
+  VisualizeInput,
+  VisualizeEmbeddable,
+  VisualizeByValueInput,
+  VisualizeByReferenceInput,
+  VisualizeSavedObjectAttributes,
+} from './visualize_embeddable';
 import { IContainer, ErrorEmbeddable } from '../../../../plugins/embeddable/public';
 import { DisabledLabEmbeddable } from './disabled_lab_embeddable';
 import {
@@ -30,10 +36,14 @@ import {
 } from '../services';
 import { VisualizeEmbeddableFactoryDeps } from './visualize_embeddable_factory';
 import { VISUALIZE_ENABLE_LABS_SETTING } from '../../common/constants';
+import { AttributeService } from '../../../dashboard/public';
+import { SavedVisualizationsLoader } from '../saved_visualizations';
 
 export const createVisEmbeddableFromObject = (deps: VisualizeEmbeddableFactoryDeps) => async (
   vis: Vis,
   input: Partial<VisualizeInput> & { id: string },
+  attributeService: AttributeService,
+  savedVisualizationsLoader: SavedVisualizationsLoader,
   parent?: IContainer
 ): Promise<VisualizeEmbeddable | ErrorEmbeddable | DisabledLabEmbeddable> => {
   const savedVisualizations = getSavedVisualizationsLoader();
@@ -55,6 +65,16 @@ export const createVisEmbeddableFromObject = (deps: VisualizeEmbeddableFactoryDe
     const indexPattern = vis.data.indexPattern;
     const indexPatterns = indexPattern ? [indexPattern] : [];
     const editable = getCapabilities().visualize.save as boolean;
+
+    if (!attributeService) {
+      const dashboard = deps.start().plugins.dashboard;
+      attributeService = await dashboard!.getAttributeService<
+        VisualizeSavedObjectAttributes,
+        VisualizeByValueInput,
+        VisualizeByReferenceInput
+      >('visualization');
+    }
+
     return new VisualizeEmbeddable(
       getTimeFilter(),
       {
@@ -66,6 +86,8 @@ export const createVisEmbeddableFromObject = (deps: VisualizeEmbeddableFactoryDe
         deps,
       },
       input,
+      attributeService,
+      savedVisualizationsLoader,
       parent
     );
   } catch (e) {

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

@@ -35,6 +35,8 @@ import {
   Embeddable,
   IContainer,
   Adapters,
+  SavedObjectEmbeddableInput,
+  ReferenceOrValueEmbeddable,
 } from '../../../../plugins/embeddable/public';
 import {
   IExpressionLoaderParams,
@@ -47,6 +49,11 @@ import { getExpressions, getUiActions } from '../services';
 import { VIS_EVENT_TO_TRIGGER } from './events';
 import { VisualizeEmbeddableFactoryDeps } from './visualize_embeddable_factory';
 import { TriggerId } from '../../../ui_actions/public';
+import { SavedObjectAttributes } from '../../../../core/types';
+import { AttributeService } from '../../../dashboard/public';
+import { SavedVisualizationsLoader } from '../saved_visualizations';
+import { VisSavedObject } from '../types';
+import { OnSaveProps, SaveResult } from '../../../saved_objects/public';
 
 const getKeys = <T extends {}>(o: T): Array<keyof T> => Object.keys(o) as Array<keyof T>;
 
@@ -75,9 +82,15 @@ export interface VisualizeOutput extends EmbeddableOutput {
   visTypeName: string;
 }
 
+export type VisualizeSavedObjectAttributes = SavedObjectAttributes & { title: string };
+
+export type VisualizeByValueInput = { attributes: VisualizeSavedObjectAttributes } & VisualizeInput;
+export type VisualizeByReferenceInput = SavedObjectEmbeddableInput & VisualizeInput;
+
 type ExpressionLoader = InstanceType<ExpressionsStart['ExpressionLoader']>;
 
-export class VisualizeEmbeddable extends Embeddable<VisualizeInput, VisualizeOutput> {
+export class VisualizeEmbeddable extends Embeddable<VisualizeInput, VisualizeOutput>
+  implements ReferenceOrValueEmbeddable<VisualizeByValueInput, VisualizeByReferenceInput> {
   private handler?: ExpressionLoader;
   private timefilter: TimefilterContract;
   private timeRange?: TimeRange;
@@ -93,11 +106,22 @@ export class VisualizeEmbeddable extends Embeddable<VisualizeInput, VisualizeOut
   private abortController?: AbortController;
   private readonly deps: VisualizeEmbeddableFactoryDeps;
   private readonly inspectorAdapters?: Adapters;
+  private attributeService: AttributeService;
 
   constructor(
     timefilter: TimefilterContract,
-    { vis, editPath, editUrl, indexPatterns, editable, deps }: VisualizeEmbeddableConfiguration,
+    {
+      vis,
+      editPath,
+      editUrl,
+      indexPatterns,
+      editable,
+      deps,
+      visualizations,
+    }: VisualizeEmbeddableConfiguration,
     initialInput: VisualizeInput,
+    attributeService: AttributeService,
+    savedVisualizationsLoader?: SavedVisualizationsLoader,
     parent?: IContainer
   ) {
     super(
@@ -118,6 +142,8 @@ export class VisualizeEmbeddable extends Embeddable<VisualizeInput, VisualizeOut
     this.vis = vis;
     this.vis.uiState.on('change', this.uiStateChangeHandler);
     this.vis.uiState.on('reload', this.reload);
+    this.attributeService = attributeService;
+    this.savedVisualizationsLoader = savedVisualizationsLoader;
 
     this.autoRefreshFetchSubscription = timefilter
       .getAutoRefreshFetch$()
@@ -381,4 +407,43 @@ export class VisualizeEmbeddable extends Embeddable<VisualizeInput, VisualizeOut
   public supportedTriggers(): TriggerId[] {
     return this.vis.type.getSupportedTriggers?.() ?? [];
   }
+
+  inputIsRefType = (input: VisualizeInput): input is VisualizeByReferenceInput => {
+    return this.attributeService.inputIsRefType(input);
+  };
+
+  getInputAsValueType = async (): Promise<VisualizeByValueInput> => {
+    const input = {
+      savedVis: this.vis.serialize(),
+    };
+    delete input.savedVis.id;
+    return input;
+  };
+
+  getInputAsRefType = async (): Promise<VisualizeByReferenceInput> => {
+    return new Promise<RefType>((resolve, reject) => {
+      const onSave = async (props: OnSaveProps): Promise<SaveResult> => {
+        try {
+          const savedVis: VisSavedObject = await this.savedVisualizationsLoader.get({});
+          const saveOptions = {
+            confirmOverwrite: false,
+            returnToOrigin: true,
+          };
+          savedVis.title = props.newTitle;
+          savedVis.copyOnSave = props.newCopyOnSave || false;
+          savedVis.description = props.newDescription || '';
+          savedVis.searchSourceFields = this.vis?.data.searchSource?.getSerializedFields();
+          savedVis.visState = this.vis.serialize();
+          savedVis.uiStateJSON = this.vis.uiState.toString();
+          const id = await savedVis.save(saveOptions);
+          resolve({ savedObjectId: id });
+          return { id };
+        } catch (error) {
+          reject(error);
+          return { error };
+        }
+      };
+      this.attributeService.showSaveModal(onSave, '', 'visualization');
+    });
+  };
 }

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

@@ -28,7 +28,14 @@ import {
   IContainer,
 } from '../../../embeddable/public';
 import { DisabledLabEmbeddable } from './disabled_lab_embeddable';
-import { VisualizeEmbeddable, VisualizeInput, VisualizeOutput } from './visualize_embeddable';
+import {
+  VisualizeByReferenceInput,
+  VisualizeByValueInput,
+  VisualizeEmbeddable,
+  VisualizeInput,
+  VisualizeOutput,
+  VisualizeSavedObjectAttributes,
+} from './visualize_embeddable';
 import { VISUALIZE_EMBEDDABLE_TYPE } from './constants';
 import { SerializedVis, Vis } from '../vis';
 import {
@@ -43,13 +50,16 @@ import { createVisEmbeddableFromObject } from './create_vis_embeddable_from_obje
 import { StartServicesGetter } from '../../../kibana_utils/public';
 import { VisualizationsStartDeps } from '../plugin';
 import { VISUALIZE_ENABLE_LABS_SETTING } from '../../common/constants';
+import { AttributeService } from '../../../dashboard/public';
 
 interface VisualizationAttributes extends SavedObjectAttributes {
   visState: string;
 }
 
 export interface VisualizeEmbeddableFactoryDeps {
-  start: StartServicesGetter<Pick<VisualizationsStartDeps, 'inspector' | 'embeddable'>>;
+  start: StartServicesGetter<
+    Pick<VisualizationsStartDeps, 'inspector' | 'embeddable' | 'dashboard'>
+  >;
 }
 
 export class VisualizeEmbeddableFactory
@@ -62,6 +72,12 @@ export class VisualizeEmbeddableFactory
     > {
   public readonly type = VISUALIZE_EMBEDDABLE_TYPE;
 
+  private attributeService?: AttributeService<
+    VisualizeSavedObjectAttributes,
+    VisualizeByValueInput,
+    VisualizeByReferenceInput
+  >;
+
   public readonly savedObjectMetaData: SavedObjectMetaData<VisualizationAttributes> = {
     name: i18n.translate('visualizations.savedObjectName', { defaultMessage: 'Visualization' }),
     includeFields: ['visState'],
@@ -105,6 +121,19 @@ export class VisualizeEmbeddableFactory
     return await this.deps.start().core.application.currentAppId$.pipe(first()).toPromise();
   }
 
+  private async getAttributeService() {
+    if (!this.attributeService) {
+      this.attributeService = await this.deps
+        .start()
+        .plugins.dashboard.getAttributeService<
+          VisualizeSavedObjectAttributes,
+          VisualizeByValueInput,
+          VisualizeByReferenceInput
+        >(this.type);
+    }
+    return this.attributeService!;
+  }
+
   public async createFromSavedObject(
     savedObjectId: string,
     input: Partial<VisualizeInput> & { id: string },
@@ -117,7 +146,13 @@ export class VisualizeEmbeddableFactory
       const visState = convertToSerializedVis(savedObject);
       const vis = new Vis(savedObject.visState.type, visState);
       await vis.setState(visState);
-      return createVisEmbeddableFromObject(this.deps)(vis, input, parent);
+      return createVisEmbeddableFromObject(this.deps)(
+        vis,
+        input,
+        await this.getAttributeService(),
+        savedVisualizations,
+        parent
+      );
     } catch (e) {
       console.error(e); // eslint-disable-line no-console
       return new ErrorEmbeddable(e, input, parent);
@@ -131,7 +166,14 @@ export class VisualizeEmbeddableFactory
       const visState = input.savedVis;
       const vis = new Vis(visState.type, visState);
       await vis.setState(visState);
-      return createVisEmbeddableFromObject(this.deps)(vis, input, parent);
+      const savedVisualizations = getSavedVisualizationsLoader();
+      return createVisEmbeddableFromObject(this.deps)(
+        vis,
+        input,
+        await this.getAttributeService(),
+        savedVisualizations,
+        parent
+      );
     } else {
       showNewVisModal({
         originatingApp: await this.getCurrentAppId(),