diff --git a/src/plugins/vis_default_editor/public/default_editor.tsx b/src/plugins/vis_default_editor/public/default_editor.tsx index 8088921ba7fda..43d097345001e 100644 --- a/src/plugins/vis_default_editor/public/default_editor.tsx +++ b/src/plugins/vis_default_editor/public/default_editor.tsx @@ -17,16 +17,23 @@ * under the License. */ +import './index.scss'; + import React, { useEffect, useRef, useState, useCallback } from 'react'; import { EditorRenderProps } from 'src/plugins/visualize/public'; -import { PanelsContainer, Panel } from '../../kibana_react/public'; +import { KibanaContextProvider, PanelsContainer, Panel } from '../../kibana_react/public'; +import { Storage } from '../../kibana_utils/public'; import { DefaultEditorSideBar } from './components/sidebar'; import { DefaultEditorControllerState } from './default_editor_controller'; import { getInitialWidth } from './editor_size'; +const localStorage = new Storage(window.localStorage); + function DefaultEditor({ + core, + data, vis, uiState, timeRange, @@ -37,7 +44,7 @@ function DefaultEditor({ eventEmitter, linked, savedSearch, -}: DefaultEditorControllerState & Omit) { +}: DefaultEditorControllerState & EditorRenderProps) { const visRef = useRef(null); const [isCollapsed, setIsCollapsed] = useState(false); @@ -69,34 +76,49 @@ function DefaultEditor({ const editorInitialWidth = getInitialWidth(vis.type.editorConfig.defaultSize); return ( - - -
- - - + - - - + + +
+ + + + + + + + ); } -export { DefaultEditor }; +// default export required for React.Lazy +// eslint-disable-next-line import/no-default-export +export { DefaultEditor as default }; diff --git a/src/plugins/vis_default_editor/public/default_editor_controller.tsx b/src/plugins/vis_default_editor/public/default_editor_controller.tsx index 014c69f50d558..3158582438558 100644 --- a/src/plugins/vis_default_editor/public/default_editor_controller.tsx +++ b/src/plugins/vis_default_editor/public/default_editor_controller.tsx @@ -17,19 +17,17 @@ * under the License. */ -import React from 'react'; +import React, { Suspense, lazy } from 'react'; import { render, unmountComponentAtNode } from 'react-dom'; import { i18n } from '@kbn/i18n'; import { EventEmitter } from 'events'; +import { EuiErrorBoundary, EuiLoadingChart } from '@elastic/eui'; import { EditorRenderProps } from 'src/plugins/visualize/public'; import { Vis, VisualizeEmbeddableContract } from 'src/plugins/visualizations/public'; -import { Storage } from '../../kibana_utils/public'; -import { KibanaContextProvider } from '../../kibana_react/public'; -import { DefaultEditor } from './default_editor'; import { DefaultEditorDataTab, OptionTab } from './components/sidebar'; -const localStorage = new Storage(window.localStorage); +const DefaultEditor = lazy(() => import('./default_editor')); export interface DefaultEditorControllerState { vis: Vis; @@ -80,20 +78,26 @@ class DefaultEditorController { }; } - render({ data, core, ...props }: EditorRenderProps) { + render(props: EditorRenderProps) { render( - - + + +
+ } > - - , + + , this.el ); } diff --git a/src/plugins/vis_default_editor/public/index.scss b/src/plugins/vis_default_editor/public/index.scss index ec51ee8bd5780..6abb45dc546a3 100644 --- a/src/plugins/vis_default_editor/public/index.scss +++ b/src/plugins/vis_default_editor/public/index.scss @@ -1,5 +1,3 @@ -@import 'src/legacy/ui/public/styles/styling_constants'; - $vis-editor-sidebar-min-width: 350px; // Main layout diff --git a/src/plugins/vis_default_editor/public/index.ts b/src/plugins/vis_default_editor/public/index.ts index 6c58c6df26b00..156d50f451b57 100644 --- a/src/plugins/vis_default_editor/public/index.ts +++ b/src/plugins/vis_default_editor/public/index.ts @@ -17,8 +17,6 @@ * under the License. */ -import './index.scss'; - export { DefaultEditorController } from './default_editor_controller'; export { useValidation } from './components/controls/utils'; export { RangesParamEditor, RangeValues } from './components/controls/ranges'; diff --git a/src/plugins/visualize/public/application/editor/visualization_editor.js b/src/plugins/visualize/public/application/editor/visualization_editor.js index 874b69532ec11..381148651a46b 100644 --- a/src/plugins/visualize/public/application/editor/visualization_editor.js +++ b/src/plugins/visualize/public/application/editor/visualization_editor.js @@ -17,6 +17,8 @@ * under the License. */ +import { DefaultEditorController } from '../../../../vis_default_editor/public'; + export function initVisEditorDirective(app, deps) { app.directive('visualizationEditor', function($timeout) { return { @@ -32,7 +34,7 @@ export function initVisEditorDirective(app, deps) { eventEmitter: '=', }, link: function($scope, element) { - const Editor = $scope.vis.type.editor || deps.DefaultVisualizationEditor; + const Editor = $scope.vis.type.editor || DefaultEditorController; const editor = new Editor( element[0], $scope.vis, diff --git a/src/plugins/visualize/public/kibana_services.ts b/src/plugins/visualize/public/kibana_services.ts index ace9e50d400c5..8d714f1844345 100644 --- a/src/plugins/visualize/public/kibana_services.ts +++ b/src/plugins/visualize/public/kibana_services.ts @@ -34,7 +34,6 @@ import { DataPublicPluginStart } from '../../data/public'; import { VisualizationsStart } from '../../visualizations/public'; import { SavedVisualizations } from './application/types'; import { KibanaLegacyStart } from '../../kibana_legacy/public'; -import { DefaultEditorController } from '../../vis_default_editor/public'; import { DashboardStart } from '../../dashboard/public'; import { SavedObjectsStart } from '../../saved_objects/public'; @@ -56,7 +55,6 @@ export interface VisualizeKibanaServices { dashboard: DashboardStart; I18nContext: I18nStart['Context']; setActiveUrl: (newUrl: string) => void; - DefaultVisualizationEditor: typeof DefaultEditorController; createVisEmbeddableFromObject: VisualizationsStart['__LEGACY']['createVisEmbeddableFromObject']; scopedHistory: () => ScopedHistory; savedObjects: SavedObjectsStart; diff --git a/src/plugins/visualize/public/plugin.ts b/src/plugins/visualize/public/plugin.ts index 9d1e89a024b61..8a104dc51feb4 100644 --- a/src/plugins/visualize/public/plugin.ts +++ b/src/plugins/visualize/public/plugin.ts @@ -40,7 +40,6 @@ import { VisualizationsStart } from '../../visualizations/public'; import { VisualizeConstants } from './application/visualize_constants'; import { setServices, VisualizeKibanaServices } from './kibana_services'; import { FeatureCatalogueCategory, HomePublicPluginSetup } from '../../home/public'; -import { DefaultEditorController } from '../../vis_default_editor/public'; import { DashboardStart } from '../../dashboard/public'; import { DEFAULT_APP_CATEGORIES } from '../../../core/public'; import { SavedObjectsStart } from '../../saved_objects/public'; @@ -132,7 +131,6 @@ export class VisualizePlugin visualizations: pluginsStart.visualizations, I18nContext: coreStart.i18n.Context, setActiveUrl, - DefaultVisualizationEditor: DefaultEditorController, createVisEmbeddableFromObject: pluginsStart.visualizations.__LEGACY.createVisEmbeddableFromObject, dashboard: pluginsStart.dashboard,