[Visualize] Remove circular deps between KibanaApp team plugins (elas…

…tic#87994)

* [Visualize] Remove circular deps between KibanaApp team plugins

Part of elastic#84750

* Update use_vis_byvalue.ts

* Update use_saved_vis_instance.ts

* add types

* fix CI

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

src/plugins/vis_default_editor/public/default_editor.tsx

@@ -23,11 +23,8 @@ import 'brace/mode/json';
 import React, { useEffect, useRef, useState, useCallback } from 'react';
 import { EventEmitter } from 'events';
 
-import {
-  Vis,
-  VisualizeEmbeddableContract,
-  EditorRenderProps,
-} from 'src/plugins/visualizations/public';
+import { Vis, VisualizeEmbeddableContract } from 'src/plugins/visualizations/public';
+import { EditorRenderProps } from 'src/plugins/visualize/public';
 import { KibanaContextProvider, PanelsContainer, Panel } from '../../kibana_react/public';
 import { Storage } from '../../kibana_utils/public';
 

src/plugins/vis_default_editor/public/default_editor_controller.tsx

@@ -22,12 +22,8 @@ import { render, unmountComponentAtNode } from 'react-dom';
 import { EventEmitter } from 'events';
 import { EuiErrorBoundary, EuiLoadingChart } from '@elastic/eui';
 
-import {
-  Vis,
-  IEditorController,
-  EditorRenderProps,
-  VisualizeEmbeddableContract,
-} from 'src/plugins/visualizations/public';
+import { Vis, VisualizeEmbeddableContract } from 'src/plugins/visualizations/public';
+import { IEditorController, EditorRenderProps } from 'src/plugins/visualize/public';
 
 // @ts-ignore
 const DefaultEditor = lazy(() => import('./default_editor'));

src/plugins/vis_default_editor/public/plugin.ts

@@ -30,7 +30,7 @@ export class VisDefaultEditorPlugin
   implements Plugin<void, void, VisDefaultEditorSetupDependencies, {}> {
   public setup(core: CoreSetup, { visualize }: VisDefaultEditorSetupDependencies) {
     if (visualize) {
-      visualize.setDefaultEditor(DefaultEditorController);
+      visualize.visEditorsRegistry.registerDefault(DefaultEditorController);
     }
   }
 

src/plugins/vis_type_timeseries/kibana.json

@@ -4,7 +4,7 @@
   "kibanaVersion": "kibana",
   "server": true,
   "ui": true,
-  "requiredPlugins": ["charts", "data", "expressions", "visualizations"],
+  "requiredPlugins": ["charts", "data", "expressions", "visualizations", "visualize"],
   "optionalPlugins": ["usageCollection"],
   "requiredBundles": ["kibanaUtils", "kibanaReact"]
 }

src/plugins/vis_type_timeseries/public/application/editor_controller.js

@@ -22,6 +22,8 @@ import { render, unmountComponentAtNode } from 'react-dom';
 import { getUISettings, getI18n } from '../services';
 import { VisEditor } from './components/vis_editor_lazy';
 
+export const TSVB_EDITOR_NAME = 'tsvbEditor';
+
 export class EditorController {
   constructor(el, vis, eventEmitter, embeddableHandler) {
     this.el = el;

src/plugins/vis_type_timeseries/public/application/index.ts

@@ -18,5 +18,5 @@
  */
 
 // @ts-ignore
-export { EditorController } from './editor_controller';
+export { EditorController, TSVB_EDITOR_NAME } from './editor_controller';
 export * from './lib';

src/plugins/vis_type_timeseries/public/metrics_type.ts

@@ -19,7 +19,7 @@
 
 import { i18n } from '@kbn/i18n';
 
-import { EditorController } from './application';
+import { TSVB_EDITOR_NAME } from './application';
 import { PANEL_TYPES } from '../common/panel_types';
 import { toExpressionAst } from './to_ast';
 import { VIS_EVENT_TO_TRIGGER, VisGroups, VisParams } from '../../visualizations/public';
@@ -70,7 +70,9 @@ export const metricsVisDefinition = {
       tooltip_mode: 'show_all',
     },
   },
-  editor: EditorController,
+  editorConfig: {
+    editor: TSVB_EDITOR_NAME,
+  },
   options: {
     showQueryBar: false,
     showFilterBar: false,

src/plugins/vis_type_timeseries/public/plugin.ts

@@ -22,6 +22,8 @@ import './application/index.scss';
 import { PluginInitializerContext, CoreSetup, CoreStart, Plugin } from 'kibana/public';
 import { Plugin as ExpressionsPublicPlugin } from '../../expressions/public';
 import { VisualizationsSetup } from '../../visualizations/public';
+import { VisualizePluginSetup } from '../../visualize/public';
+import { EditorController, TSVB_EDITOR_NAME } from './application';
 
 import { createMetricsFn } from './metrics_fn';
 import { metricsVisDefinition } from './metrics_type';
@@ -43,6 +45,7 @@ export interface MetricsPluginSetupDependencies {
   expressions: ReturnType<ExpressionsPublicPlugin['setup']>;
   visualizations: VisualizationsSetup;
   charts: ChartsPluginSetup;
+  visualize: VisualizePluginSetup;
 }
 
 /** @internal */
@@ -60,8 +63,9 @@ export class MetricsPlugin implements Plugin<Promise<void>, void> {
 
   public async setup(
     core: CoreSetup,
-    { expressions, visualizations, charts }: MetricsPluginSetupDependencies
+    { expressions, visualizations, charts, visualize }: MetricsPluginSetupDependencies
   ) {
+    visualize.visEditorsRegistry.register(TSVB_EDITOR_NAME, EditorController);
     expressions.registerFunction(createMetricsFn);
     expressions.registerRenderer(
       getTimeseriesVisRenderer({

src/plugins/visualizations/public/index.ts

@@ -44,9 +44,6 @@ export type {
   ReactVisTypeOptions,
   Schema,
   ISchemas,
-  VisEditorConstructor,
-  IEditorController,
-  EditorRenderProps,
 } from './vis_types';
 export { VisParams, SerializedVis, SerializedVisData, VisData } from './vis';
 export type VisualizeEmbeddableFactoryContract = PublicContract<VisualizeEmbeddableFactory>;

src/plugins/visualizations/public/vis_types/base_vis_type.ts

@@ -27,7 +27,6 @@ interface CommonBaseVisTypeOptions<TVisParams>
   extends Pick<
       VisType<TVisParams>,
       | 'description'
-      | 'editor'
       | 'getInfoMessage'
       | 'getSupportedTriggers'
       | 'hierarchicalData'
@@ -91,7 +90,6 @@ export class BaseVisType<TVisParams = VisParams> implements VisType<TVisParams>
   public readonly options;
   public readonly visualization;
   public readonly visConfig;
-  public readonly editor;
   public readonly editorConfig;
   public hidden;
   public readonly requestHandler;
@@ -119,7 +117,6 @@ export class BaseVisType<TVisParams = VisParams> implements VisType<TVisParams>
     this.image = opts.image;
     this.visualization = opts.visualization;
     this.visConfig = defaultsDeep({}, opts.visConfig, { defaults: {} });
-    this.editor = opts.editor;
     this.editorConfig = defaultsDeep({}, opts.editorConfig, { collections: {} });
     this.options = defaultsDeep({}, opts.options, defaultOptions);
     this.stage = opts.stage ?? 'production';

src/plugins/visualizations/public/vis_types/index.ts

@@ -20,13 +20,6 @@
 export * from './types_service';
 export { Schemas } from './schemas';
 export { VisGroups } from './types';
-export type {
-  VisType,
-  ISchemas,
-  Schema,
-  IEditorController,
-  VisEditorConstructor,
-  EditorRenderProps,
-} from './types';
+export type { VisType, ISchemas, Schema } from './types';
 export type { BaseVisTypeOptions } from './base_vis_type';
 export type { ReactVisTypeOptions } from './react_vis_type';

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

@@ -16,24 +16,11 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { EventEmitter } from 'events';
 import { IconType } from '@elastic/eui';
 import React, { ReactNode } from 'react';
 import { Adapters } from 'src/plugins/inspector';
-import { CoreStart } from 'src/core/public';
-import { SavedObject } from 'src/plugins/saved_objects/public';
-import {
-  IndexPattern,
-  AggGroupNames,
-  AggParam,
-  AggGroupName,
-  DataPublicPluginStart,
-  Filter,
-  TimeRange,
-  Query,
-} from '../../../data/public';
+import { IndexPattern, AggGroupNames, AggParam, AggGroupName } from '../../../data/public';
 import { Vis, VisParams, VisToExpressionAst, VisualizationControllerConstructor } from '../types';
-import { PersistedState, VisualizeEmbeddableContract } from '../index';
 
 export interface VisTypeOptions {
   showTimePicker: boolean;
@@ -152,40 +139,7 @@ export interface VisType<TVisParams = unknown> {
 
   readonly options: VisTypeOptions;
 
-  /**
-   * The editor that should be used to edit visualizations of this type.
-   * If this is not specified the default visualize editor will be used (and should be configured via schemas)
-   * and editorConfig.
-   */
-  readonly editor?: VisEditorConstructor;
-
   // TODO: The following types still need to be refined properly.
   readonly editorConfig: Record<string, any>;
   readonly visConfig: Record<string, any>;
 }
-
-export type VisEditorConstructor = new (
-  element: HTMLElement,
-  vis: Vis,
-  eventEmitter: EventEmitter,
-  embeddableHandler: VisualizeEmbeddableContract
-) => IEditorController;
-
-export interface IEditorController {
-  render(props: EditorRenderProps): Promise<void> | void;
-  destroy(): void;
-}
-
-export interface EditorRenderProps {
-  core: CoreStart;
-  data: DataPublicPluginStart;
-  filters: Filter[];
-  timeRange: TimeRange;
-  query?: Query;
-  savedSearch?: SavedObject;
-  uiState: PersistedState;
-  /**
-   * Flag to determine if visualiztion is linked to the saved search
-   */
-  linked: boolean;
-}

src/plugins/visualize/public/application/types.ts

@@ -18,13 +18,14 @@
  */
 
 import { History } from 'history';
-import { Query, Filter, DataPublicPluginStart } from 'src/plugins/data/public';
+import { Query, Filter, DataPublicPluginStart, TimeRange } from 'src/plugins/data/public';
 import {
   SavedVisState,
   VisualizationsStart,
   Vis,
   VisualizeEmbeddableContract,
   VisSavedObject,
+  PersistedState,
 } from 'src/plugins/visualizations/public';
 import {
   CoreStart,
@@ -44,6 +45,7 @@ import { SharePluginStart } from 'src/plugins/share/public';
 import { SavedObjectsStart, SavedObject } from 'src/plugins/saved_objects/public';
 import { EmbeddableStart, EmbeddableStateTransfer } from 'src/plugins/embeddable/public';
 import { UrlForwardingStart } from 'src/plugins/url_forwarding/public';
+import { EventEmitter } from 'events';
 import { DashboardStart } from '../../../dashboard/public';
 import type { SavedObjectsTaggingApi } from '../../../saved_objects_tagging_oss/public';
 
@@ -119,3 +121,29 @@ export interface ByValueVisInstance {
 }
 
 export type VisualizeEditorVisInstance = SavedVisInstance | ByValueVisInstance;
+
+export type VisEditorConstructor = new (
+  element: HTMLElement,
+  vis: Vis,
+  eventEmitter: EventEmitter,
+  embeddableHandler: VisualizeEmbeddableContract
+) => IEditorController;
+
+export interface IEditorController {
+  render(props: EditorRenderProps): Promise<void> | void;
+  destroy(): void;
+}
+
+export interface EditorRenderProps {
+  core: CoreStart;
+  data: DataPublicPluginStart;
+  filters: Filter[];
+  timeRange: TimeRange;
+  query?: Query;
+  savedSearch?: SavedObject;
+  uiState: PersistedState;
+  /**
+   * Flag to determine if visualiztion is linked to the saved search
+   */
+  linked: boolean;
+}

src/plugins/visualize/public/application/utils/use/use_editor_updates.test.ts

@@ -22,7 +22,7 @@ import { EventEmitter } from 'events';
 
 import { useEditorUpdates } from './use_editor_updates';
 import { VisualizeServices, VisualizeAppStateContainer, SavedVisInstance } from '../../types';
-import type { IEditorController } from '../../../../../visualizations/public';
+import type { IEditorController } from '../../types';
 import { visualizeAppStateStub } from '../stubs';
 import { createVisualizeServicesMock } from '../mocks';
 

src/plugins/visualize/public/application/utils/use/use_editor_updates.ts

@@ -26,8 +26,8 @@ import {
   VisualizeAppState,
   VisualizeAppStateContainer,
   VisualizeEditorVisInstance,
+  IEditorController,
 } from '../../types';
-import type { IEditorController } from '../../../../../visualizations/public';
 
 export const useEditorUpdates = (
   services: VisualizeServices,

src/plugins/visualize/public/application/utils/use/use_saved_vis_instance.test.ts

@@ -26,7 +26,8 @@ import { redirectWhenMissing } from '../../../../../kibana_utils/public';
 import { getEditBreadcrumbs, getCreateBreadcrumbs } from '../breadcrumbs';
 import { VisualizeServices } from '../../types';
 import { VisualizeConstants } from '../../visualize_constants';
-import { setDefaultEditor } from '../../../services';
+import { setVisEditorsRegistry } from '../../../services';
+import { createVisEditorsRegistry } from '../../../vis_editors_registry';
 import { createEmbeddableStateTransferMock } from '../../../../../embeddable/public/mocks';
 
 const mockDefaultEditorControllerDestroy = jest.fn();
@@ -75,10 +76,14 @@ describe('useSavedVisInstance', () => {
   const eventEmitter = new EventEmitter();
 
   beforeEach(() => {
-    setDefaultEditor(
+    const registry = createVisEditorsRegistry();
+
+    registry.registerDefault(
       jest.fn().mockImplementation(() => ({ destroy: mockDefaultEditorControllerDestroy }))
     );
 
+    setVisEditorsRegistry(registry);
+
     mockServices = ({
       ...coreStartMock,
       toastNotifications,

src/plugins/visualize/public/application/utils/use/use_saved_vis_instance.ts

@@ -26,10 +26,9 @@ import { redirectWhenMissing } from '../../../../../kibana_utils/public';
 
 import { getVisualizationInstance } from '../get_visualization_instance';
 import { getEditBreadcrumbs, getCreateBreadcrumbs } from '../breadcrumbs';
-import { SavedVisInstance, VisualizeServices } from '../../types';
+import { SavedVisInstance, VisualizeServices, IEditorController } from '../../types';
 import { VisualizeConstants } from '../../visualize_constants';
-import { getDefaultEditor } from '../../../services';
-import type { IEditorController } from '../../../../../visualizations/public';
+import { getVisEditorsRegistry } from '../../../services';
 
 /**
  * This effect is responsible for instantiating a saved vis or creating a new one
@@ -123,13 +122,16 @@ export const useSavedVisInstance = (
         // do not create editor in embeded mode
         if (visEditorRef.current) {
           if (isChromeVisible) {
-            const Editor = vis.type.editor || getDefaultEditor();
-            visEditorController = new Editor(
-              visEditorRef.current,
-              vis,
-              eventEmitter,
-              embeddableHandler
-            );
+            const Editor = getVisEditorsRegistry().get(vis.type.editorConfig?.editor);
+
+            if (Editor) {
+              visEditorController = new Editor(
+                visEditorRef.current,
+                vis,
+                eventEmitter,
+                embeddableHandler
+              );
+            }
           } else {
             embeddableHandler.render(visEditorRef.current);
           }