[Dashboard] Add visualization by value to dashboard

scripts/functional_tests.js

@@ -22,6 +22,7 @@ const alwaysImportedTests = [
   require.resolve('../test/functional/config.js'),
   require.resolve('../test/plugin_functional/config.js'),
   require.resolve('../test/ui_capabilities/newsfeed_err/config.ts'),
+  require.resolve('../test/new_visualize_flow/config.js'),
 ];
 // eslint-disable-next-line no-restricted-syntax
 const onlyNotInCoverageTests = [

src/plugins/dashboard/public/application/dashboard_app_controller.tsx

@@ -58,7 +58,6 @@ import {
   isErrorEmbeddable,
   openAddPanelFlyout,
   ViewMode,
-  SavedObjectEmbeddableInput,
   ContainerOutput,
   EmbeddableInput,
 } from '../../../embeddable/public';
@@ -432,7 +431,7 @@ export class DashboardAppController {
               .getIncomingEmbeddablePackage();
             if (incomingState) {
               if ('id' in incomingState) {
-                container.addNewEmbeddable<SavedObjectEmbeddableInput>(incomingState.type, {
+                container.addNewEmbeddable<EmbeddableInput>(incomingState.type, {
                   savedObjectId: incomingState.id,
                 });
               } else if ('input' in incomingState) {

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

@@ -30,7 +30,7 @@ import {
 import { DisabledLabEmbeddable } from './disabled_lab_embeddable';
 import { VisualizeEmbeddable, VisualizeInput, VisualizeOutput } from './visualize_embeddable';
 import { VISUALIZE_EMBEDDABLE_TYPE } from './constants';
-import { Vis } from '../vis';
+import { SerializedVis, Vis } from '../vis';
 import {
   getCapabilities,
   getTypes,
@@ -124,13 +124,20 @@ export class VisualizeEmbeddableFactory
     }
   }
 
-  public async create() {
+  public async create(input: VisualizeInput & { savedVis?: SerializedVis }, parent?: IContainer) {
     // TODO: This is a bit of a hack to preserve the original functionality. Ideally we will clean this up
     // to allow for in place creation of visualizations without having to navigate away to a new URL.
-    showNewVisModal({
-      originatingApp: await this.getCurrentAppId(),
-      outsideVisualizeApp: true,
-    });
-    return undefined;
+    if (input.savedVis) {
+      const visState = input.savedVis;
+      const vis = new Vis(visState.type, visState);
+      await vis.setState(visState);
+      return createVisEmbeddableFromObject(this.deps)(vis, input, parent);
+    } else {
+      showNewVisModal({
+        originatingApp: await this.getCurrentAppId(),
+        outsideVisualizeApp: true,
+      });
+      return undefined;
+    }
   }
 }

src/plugins/visualize/config.ts

@@ -0,0 +1,26 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { schema, TypeOf } from '@kbn/config-schema';
+
+export const configSchema = schema.object({
+  showNewVisualizeFlow: schema.boolean({ defaultValue: false }),
+});
+
+export type ConfigSchema = TypeOf<typeof configSchema>;

src/plugins/visualize/public/application/editor/editor.js

@@ -28,8 +28,8 @@ import React from 'react';
 import { makeStateful, useVisualizeAppState } from './lib';
 import { VisualizeConstants } from '../visualize_constants';
 import { getEditBreadcrumbs } from '../breadcrumbs';
-
 import { addHelpMenuToAppChrome } from '../help_menu/help_menu_util';
+
 import { unhashUrl } from '../../../../kibana_utils/public';
 import { MarkdownSimple, toMountPoint } from '../../../../kibana_react/public';
 import {
@@ -77,9 +77,9 @@ function VisualizeAppController($scope, $route, $injector, $timeout, kbnUrlState
     setActiveUrl,
     visualizations,
     embeddable,
+    featureFlagConfig,
     scopedHistory,
   } = getServices();
-
   const {
     filterManager,
     timefilter: { timefilter },
@@ -252,6 +252,17 @@ function VisualizeAppController($scope, $route, $injector, $timeout, kbnUrlState
                 });
               };
 
+              const createVisReference = () => {
+                const input = {
+                  savedVis: { ...vis.serialize() },
+                };
+                embeddable
+                  .getStateTransfer()
+                  .navigateToWithEmbeddablePackage($scope.getOriginatingApp(), {
+                    state: { input, type: VISUALIZE_EMBEDDABLE_TYPE },
+                  });
+              };
+
               const saveModal = (
                 <SavedObjectSaveModalOrigin
                   documentInfo={savedVis}
@@ -261,7 +272,12 @@ function VisualizeAppController($scope, $route, $injector, $timeout, kbnUrlState
                   originatingApp={$scope.getOriginatingApp()}
                 />
               );
-              showSaveModal(saveModal, I18nContext);
+              const lastAppType = $scope.getOriginatingApp();
+              if (lastAppType === 'dashboards' && featureFlagConfig.showNewVisualizeFlow) {
+                createVisReference();
+              } else {
+                showSaveModal(saveModal, I18nContext);
+              }
             },
           },
         ]

src/plugins/visualize/public/kibana_services.ts

@@ -36,6 +36,7 @@ import { SavedVisualizations } from './application/types';
 import { KibanaLegacyStart } from '../../kibana_legacy/public';
 import { SavedObjectsStart } from '../../saved_objects/public';
 import { EmbeddableStart } from '../../embeddable/public';
+import { ConfigSchema } from '../config';
 
 export interface VisualizeKibanaServices {
   pluginInitializerContext: PluginInitializerContext;
@@ -52,13 +53,14 @@ export interface VisualizeKibanaServices {
   kibanaLegacy: KibanaLegacyStart;
   visualizeCapabilities: any;
   visualizations: VisualizationsStart;
-  embeddable: EmbeddableStart;
   I18nContext: I18nStart['Context'];
   setActiveUrl: (newUrl: string) => void;
   restorePreviousUrl: () => void;
   createVisEmbeddableFromObject: VisualizationsStart['__LEGACY']['createVisEmbeddableFromObject'];
   scopedHistory: () => ScopedHistory;
   savedObjects: SavedObjectsStart;
+  embeddable: EmbeddableStart;
+  featureFlagConfig: ConfigSchema;
 }
 
 let services: VisualizeKibanaServices | null = null;

src/plugins/visualize/public/plugin.ts

@@ -60,6 +60,10 @@ export interface VisualizePluginSetupDependencies {
   data: DataPublicPluginSetup;
 }
 
+export interface FeatureFlagConfig {
+  showNewVisualizeFlow: boolean;
+}
+
 export class VisualizePlugin
   implements
     Plugin<void, void, VisualizePluginSetupDependencies, VisualizePluginStartDependencies> {
@@ -119,7 +123,6 @@ export class VisualizePlugin
         this.currentHistory = params.history;
 
         appMounted();
-
         const deps: VisualizeKibanaServices = {
           pluginInitializerContext: this.initializerContext,
           addBasePath: coreStart.http.basePath.prepend,
@@ -142,6 +145,7 @@ export class VisualizePlugin
             pluginsStart.visualizations.__LEGACY.createVisEmbeddableFromObject,
           scopedHistory: () => this.currentHistory!,
           savedObjects: pluginsStart.savedObjects,
+          featureFlagConfig: this.initializerContext.config.get<FeatureFlagConfig>(),
           restorePreviousUrl,
         };
         setServices(deps);

src/plugins/visualize/server/index.ts

@@ -17,8 +17,17 @@
  * under the License.
  */
 
-import { PluginInitializerContext } from 'kibana/server';
+import { PluginInitializerContext, PluginConfigDescriptor } from 'kibana/server';
 import { VisualizeServerPlugin } from './plugin';
 
+import { ConfigSchema, configSchema } from '../config';
+
+export const config: PluginConfigDescriptor<ConfigSchema> = {
+  exposeToBrowser: {
+    showNewVisualizeFlow: true,
+  },
+  schema: configSchema,
+};
+
 export const plugin = (initContext: PluginInitializerContext) =>
   new VisualizeServerPlugin(initContext);

tasks/function_test_groups.js

@@ -41,6 +41,8 @@ const getDefaultArgs = (tag) => {
     // '--config', 'test/functional/config.firefox.js',
     '--bail',
     '--debug',
+    '--config',
+    'test/new_visualize_flow/config.js',
   ];
 };
 

test/functional/services/dashboard/visualizations.ts

@@ -139,5 +139,31 @@ export function DashboardVisualizationProvider({ getService, getPageObjects }: F
         redirectToOrigin: true,
       });
     }
+
+    async createAndEmbedMetric(name: string) {
+      log.debug(`createAndEmbedMetric(${name})`);
+      const inViewMode = await PageObjects.dashboard.getIsInViewMode();
+      if (inViewMode) {
+        await PageObjects.dashboard.switchToEditMode();
+      }
+      await this.ensureNewVisualizationDialogIsShowing();
+      await PageObjects.visualize.clickMetric();
+      await find.clickByCssSelector('li.euiListGroupItem:nth-of-type(2)');
+      await testSubjects.exists('visualizeSaveButton');
+      await testSubjects.click('visualizeSaveButton');
+    }
+
+    async createAndEmbedMarkdown({ name, markdown }: { name: string; markdown: string }) {
+      log.debug(`createAndEmbedMarkdown(${markdown})`);
+      const inViewMode = await PageObjects.dashboard.getIsInViewMode();
+      if (inViewMode) {
+        await PageObjects.dashboard.switchToEditMode();
+      }
+      await this.ensureNewVisualizationDialogIsShowing();
+      await PageObjects.visualize.clickMarkdownWidget();
+      await PageObjects.visEditor.setMarkdownTxt(markdown);
+      await PageObjects.visEditor.clickGo();
+      await testSubjects.click('visualizeSaveButton');
+    }
   })();
 }