[7.x] [Dashboard] Add visualization by value to dashboard (#69898)

scripts/functional_tests.js

@@ -25,4 +25,5 @@ require('@kbn/test').runTestsCli([
  require.resolve('../test/interpreter_functional/config.ts'),
  require.resolve('../test/ui_capabilities/newsfeed_err/config.ts'),
  require.resolve('../test/examples/config.js'),
+ require.resolve('../test/new_visualize_flow/config.js'),
 ]);

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

@@ -58,7 +58,6 @@ import {
  isErrorEmbeddable,
  openAddPanelFlyout,
  ViewMode,
- SavedObjectEmbeddableInput,
  ContainerOutput,
  EmbeddableInput,
 } from '../../../embeddable/public';
@@ -432,14 +431,16 @@ 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) {
- container.addNewEmbeddable<EmbeddableInput>(
- incomingState.type,
- incomingState.input
- );
+ const input = incomingState.input;
+ delete input.id;
+ const explicitInput = {
+ savedVis: input,
+ };
+ container.addNewEmbeddable<EmbeddableInput>(incomingState.type, explicitInput);
  }
  }
  }

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/types.ts

@@ -44,6 +44,7 @@ import { SharePluginStart } from 'src/plugins/share/public';
 import { SavedObjectsStart, SavedObject } from 'src/plugins/saved_objects/public';
 import { EmbeddableStart } from 'src/plugins/embeddable/public';
 import { KibanaLegacyStart } from 'src/plugins/kibana_legacy/public';
+import { ConfigSchema } from '../../config';
 
 export type PureVisState = SavedVisState;
 
@@ -110,6 +111,7 @@ export interface VisualizeServices extends CoreStart {
  createVisEmbeddableFromObject: VisualizationsStart['__LEGACY']['createVisEmbeddableFromObject'];
  restorePreviousUrl: () => void;
  scopedHistory: ScopedHistory;
+ featureFlagConfig: ConfigSchema;
 }
 
 export interface SavedVisInstance {

src/plugins/visualize/public/application/utils/get_top_nav_config.tsx

@@ -21,6 +21,7 @@ import React from 'react';
 import { i18n } from '@kbn/i18n';
 
 import { TopNavMenuData } from 'src/plugins/navigation/public';
+import uuid from 'uuid';
 import { VISUALIZE_EMBEDDABLE_TYPE } from '../../../../visualizations/public';
 import {
  showSaveModal,
@@ -33,7 +34,6 @@ import { unhashUrl } from '../../../../kibana_utils/public';
 import { SavedVisInstance, VisualizeServices, VisualizeAppStateContainer } from '../types';
 import { VisualizeConstants } from '../visualize_constants';
 import { getEditBreadcrumbs } from './breadcrumbs';
-
 interface TopNavConfigParams {
  hasUnsavedChanges: boolean;
  setHasUnsavedChanges: (value: boolean) => void;
@@ -66,6 +66,7 @@ export const getTopNavConfig = (
  toastNotifications,
  visualizeCapabilities,
  i18n: { Context: I18nContext },
+ featureFlagConfig,
  }: VisualizeServices
 ) => {
  /**
@@ -234,6 +235,19 @@ export const getTopNavConfig = (
  return response;
  };
 
+ const createVisReference = () => {
+ if (!originatingApp) {
+ return;
+ }
+ const input = {
+ ...vis.serialize(),
+ id: uuid.v4(),
+ };
+ embeddable.getStateTransfer().navigateToWithEmbeddablePackage(originatingApp, {
+ state: { input, type: VISUALIZE_EMBEDDABLE_TYPE },
+ });
+ };
+
  const saveModal = (
  <SavedObjectSaveModalOrigin
  documentInfo={savedVis}
@@ -243,7 +257,11 @@ export const getTopNavConfig = (
  originatingApp={originatingApp}
  />
  );
- showSaveModal(saveModal, I18nContext);
+ if (originatingApp === 'dashboards' && featureFlagConfig.showNewVisualizeFlow) {
+ createVisReference();
+ } else {
+ showSaveModal(saveModal, I18nContext);
+ }
  },
  },
  ]

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> {
@@ -165,6 +169,7 @@ export class VisualizePlugin
  savedObjectsPublic: pluginsStart.savedObjects,
  scopedHistory: params.history,
  restorePreviousUrl,
+ featureFlagConfig: this.initializerContext.config.get<FeatureFlagConfig>(),
  };
 
  params.element.classList.add('visAppWrapper');

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

@@ -45,6 +45,8 @@ export function getFunctionalTestGroupRunConfigs({ kibanaInstallDir } = {}) {
  'test/functional/config.js',
  '--config',
  'test/ui_capabilities/newsfeed_err/config.ts',
+ '--config',
+ 'test/new_visualize_flow/config.js',
  // '--config', 'test/functional/config.firefox.js',
  '--bail',
  '--debug',

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');
+ }
  })();
 }