[7.x] Improve vis editor typings (#80004)

src/plugins/vis_default_editor/public/default_editor_controller.tsx

@@ -22,12 +22,12 @@ import { render, unmountComponentAtNode } from 'react-dom';
 import { EventEmitter } from 'events';
 import { EuiErrorBoundary, EuiLoadingChart } from '@elastic/eui';
 
-import { EditorRenderProps } from 'src/plugins/visualize/public';
+import { EditorRenderProps, IEditorController } from 'src/plugins/visualize/public';
 import { Vis, VisualizeEmbeddableContract } from 'src/plugins/visualizations/public';
 
 const DefaultEditor = lazy(() => import('./default_editor'));
 
-class DefaultEditorController {
+class DefaultEditorController implements IEditorController {
   constructor(
     private el: HTMLElement,
     private vis: Vis,

src/plugins/visualizations/public/index.ts

@@ -36,7 +36,7 @@ export { getSchemas as getVisSchemas } from './legacy/build_pipeline';
 
 /** @public types */
 export { VisualizationsSetup, VisualizationsStart };
-export { VisTypeAlias, VisType, BaseVisTypeOptions, ReactVisTypeOptions } from './vis_types';
+export type { VisTypeAlias, VisType, BaseVisTypeOptions, ReactVisTypeOptions } from './vis_types';
 export { VisParams, SerializedVis, SerializedVisData, VisData } from './vis';
 export type VisualizeEmbeddableFactoryContract = PublicContract<VisualizeEmbeddableFactory>;
 export type VisualizeEmbeddableContract = PublicContract<VisualizeEmbeddable>;

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

@@ -18,6 +18,6 @@
  */
 
 export * from './types_service';
-export { VisType } from './types';
+export type { VisType } from './types';
 export type { BaseVisTypeOptions } from './base_vis_type';
 export type { ReactVisTypeOptions } from './react_vis_type';

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

@@ -20,6 +20,7 @@
 import { IconType } from '@elastic/eui';
 import React from 'react';
 import { Adapters } from 'src/plugins/inspector';
+import { VisEditorConstructor } from 'src/plugins/visualize/public';
 import { ISchemas } from 'src/plugins/vis_default_editor/public';
 import { TriggerContextMapping } from '../../../ui_actions/public';
 import { Vis, VisToExpressionAst, VisualizationControllerConstructor } from '../types';
@@ -69,12 +70,14 @@ export interface VisType<TVisParams = unknown> {
 
   readonly options: VisTypeOptions;
 
-  // TODO: The following types still need to be refined properly.
-
   /**
    * 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?: any;
+  readonly editor?: VisEditorConstructor;
+
+  // TODO: The following types still need to be refined properly.
   readonly editorConfig: Record<string, any>;
   readonly visConfig: Record<string, any>;
 }

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

@@ -45,6 +45,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 { UrlForwardingStart } from 'src/plugins/url_forwarding/public';
+import { EventEmitter } from 'events';
 import { DashboardStart } from '../../../dashboard/public';
 
 export type PureVisState = SavedVisState;
@@ -131,7 +132,14 @@ 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): void;
+  render(props: EditorRenderProps): Promise<void> | void;
   destroy(): void;
 }

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

@@ -116,6 +116,7 @@ describe('useSavedVisInstance', () => {
         useSavedVisInstance(mockServices, eventEmitter, true, savedVisId)
       );
 
+      result.current.visEditorRef.current = document.createElement('div');
       expect(mockGetVisualizationInstance).toHaveBeenCalledWith(mockServices, savedVisId);
       expect(mockGetVisualizationInstance.mock.calls.length).toBe(1);
 
@@ -129,10 +130,12 @@ describe('useSavedVisInstance', () => {
     });
 
     test('should destroy the editor and the savedVis on unmount if chrome exists', async () => {
-      const { unmount, waitForNextUpdate } = renderHook(() =>
+      const { result, unmount, waitForNextUpdate } = renderHook(() =>
         useSavedVisInstance(mockServices, eventEmitter, true, savedVisId)
       );
 
+      result.current.visEditorRef.current = document.createElement('div');
+
       await waitForNextUpdate();
       unmount();
 
@@ -158,6 +161,8 @@ describe('useSavedVisInstance', () => {
         useSavedVisInstance(mockServices, eventEmitter, true, undefined)
       );
 
+      result.current.visEditorRef.current = document.createElement('div');
+
       expect(mockGetVisualizationInstance).toHaveBeenCalledWith(mockServices, {
         indexPattern: '1a2b3c4d',
         type: 'area',

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

@@ -44,7 +44,7 @@ export const useSavedVisInstance = (
     savedVisInstance?: SavedVisInstance;
     visEditorController?: IEditorController;
   }>({});
-  const visEditorRef = useRef<HTMLDivElement>(null);
+  const visEditorRef = useRef<HTMLDivElement | null>(null);
   const visId = useRef('');
 
   useEffect(() => {
@@ -102,16 +102,18 @@ export const useSavedVisInstance = (
 
         let visEditorController;
         // do not create editor in embeded mode
-        if (isChromeVisible) {
-          const Editor = vis.type.editor || DefaultEditorController;
-          visEditorController = new Editor(
-            visEditorRef.current,
-            vis,
-            eventEmitter,
-            embeddableHandler
-          );
-        } else if (visEditorRef.current) {
-          embeddableHandler.render(visEditorRef.current);
+        if (visEditorRef.current) {
+          if (isChromeVisible) {
+            const Editor = vis.type.editor || DefaultEditorController;
+            visEditorController = new Editor(
+              visEditorRef.current,
+              vis,
+              eventEmitter,
+              embeddableHandler
+            );
+          } else {
+            embeddableHandler.render(visEditorRef.current);
+          }
         }
 
         setState({

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

@@ -41,7 +41,7 @@ export const useVisByValue = (
   useEffect(() => {
     const { chrome } = services;
     const getVisInstance = async () => {
-      if (!valueInput || loaded.current) {
+      if (!valueInput || loaded.current || !visEditorRef.current) {
         return;
       }
       const byValueVisInstance = await getVisualizationInstanceFromInput(services, valueInput);

src/plugins/visualize/public/index.ts

@@ -20,7 +20,11 @@
 import { PluginInitializerContext } from 'kibana/public';
 import { VisualizePlugin } from './plugin';
 
-export { EditorRenderProps } from './application/types';
+export type {
+  EditorRenderProps,
+  IEditorController,
+  VisEditorConstructor,
+} from './application/types';
 export { VisualizeConstants } from './application/visualize_constants';
 
 export const plugin = (context: PluginInitializerContext) => {