Reduce bundle size of the default editor (#78938)

* Reduce bundle size

* Remove useless line of code

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

src/plugins/vis_default_editor/public/components/sidebar/index.ts

@@ -18,5 +18,3 @@
  */
 
 export { DefaultEditorSideBar } from './sidebar';
-export { DefaultEditorDataTab } from './data_tab';
-export { OptionTab } from './navbar';

src/plugins/vis_default_editor/public/components/sidebar/navbar.tsx

@@ -20,32 +20,20 @@
 import React from 'react';
 import { EuiTabs, EuiTab } from '@elastic/eui';
 
-import { VisOptionsProps } from '../../vis_options_props';
-import { DefaultEditorDataTabProps } from './data_tab';
-
-export interface OptionTab {
-  editor: React.ComponentType<VisOptionsProps | DefaultEditorDataTabProps>;
-  name: string;
-  title: string;
-}
+import { OptionTab } from './use_option_tabs';
 
 interface DefaultEditorNavBarProps {
   optionTabs: OptionTab[];
-  selectedTab: string;
   setSelectedTab(name: string): void;
 }
 
-function DefaultEditorNavBar({
-  selectedTab,
-  setSelectedTab,
-  optionTabs,
-}: DefaultEditorNavBarProps) {
+function DefaultEditorNavBar({ setSelectedTab, optionTabs }: DefaultEditorNavBarProps) {
   return (
     <EuiTabs className="visEditorSidebar__nav" size="s">
-      {optionTabs.map(({ name, title }) => (
+      {optionTabs.map(({ name, title, isSelected = false }) => (
         <EuiTab
           key={name}
-          isSelected={selectedTab === name}
+          isSelected={isSelected}
           data-test-subj={`visEditorTab__${name}`}
           onClick={() => setSelectedTab(name)}
         >

src/plugins/vis_default_editor/public/components/sidebar/sidebar.tsx

@@ -30,18 +30,18 @@ import {
 } from 'src/plugins/visualizations/public';
 import { TimeRange } from 'src/plugins/data/public';
 import { SavedObject } from 'src/plugins/saved_objects/public';
-import { DefaultEditorNavBar, OptionTab } from './navbar';
+import { DefaultEditorNavBar } from './navbar';
 import { DefaultEditorControls } from './controls';
 import { setStateParamValue, useEditorReducer, useEditorFormState, discardChanges } from './state';
 import { DefaultEditorAggCommonProps } from '../agg_common_props';
 import { SidebarTitle } from './sidebar_title';
 import { Schema } from '../../schemas';
+import { useOptionTabs } from './use_option_tabs';
 
 interface DefaultEditorSideBarProps {
   embeddableHandler: VisualizeEmbeddableContract;
   isCollapsed: boolean;
   onClickCollapse: () => void;
-  optionTabs: OptionTab[];
   uiState: PersistedState;
   vis: Vis;
   isLinkedSearch: boolean;
@@ -54,18 +54,17 @@ function DefaultEditorSideBar({
   embeddableHandler,
   isCollapsed,
   onClickCollapse,
-  optionTabs,
   uiState,
   vis,
   isLinkedSearch,
   eventEmitter,
   savedSearch,
   timeRange,
 }: DefaultEditorSideBarProps) {
-  const [selectedTab, setSelectedTab] = useState(optionTabs[0].name);
   const [isDirty, setDirty] = useState(false);
   const [state, dispatch] = useEditorReducer(vis, eventEmitter);
   const { formState, setTouched, setValidity, resetValidity } = useEditorFormState();
+  const [optionTabs, setSelectedTab] = useOptionTabs(vis);
 
   const responseAggs = useMemo(() => (state.data.aggs ? state.data.aggs.getResponseAggs() : []), [
     state.data.aggs,
@@ -201,31 +200,23 @@ function DefaultEditorSideBar({
             )}
 
             {optionTabs.length > 1 && (
-              <DefaultEditorNavBar
-                optionTabs={optionTabs}
-                selectedTab={selectedTab}
-                setSelectedTab={setSelectedTab}
-              />
+              <DefaultEditorNavBar optionTabs={optionTabs} setSelectedTab={setSelectedTab} />
             )}
 
-            {optionTabs.map(({ editor: Editor, name }) => {
-              const isTabSelected = selectedTab === name;
-
-              return (
-                <div
-                  key={name}
-                  className={`visEditorSidebar__config ${
-                    isTabSelected ? '' : 'visEditorSidebar__config-isHidden'
-                  }`}
-                >
-                  <Editor
-                    isTabSelected={isTabSelected}
-                    {...(name === 'data' ? dataTabProps : optionTabProps)}
-                    timeRange={timeRange}
-                  />
-                </div>
-              );
-            })}
+            {optionTabs.map(({ editor: Editor, name, isSelected = false }) => (
+              <div
+                key={name}
+                className={`visEditorSidebar__config ${
+                  isSelected ? '' : 'visEditorSidebar__config-isHidden'
+                }`}
+              >
+                <Editor
+                  isTabSelected={isSelected}
+                  {...(name === 'data' ? dataTabProps : optionTabProps)}
+                  timeRange={timeRange}
+                />
+              </div>
+            ))}
           </form>
         </EuiFlexItem>
 

src/plugins/vis_default_editor/public/components/sidebar/use_option_tabs.ts

@@ -0,0 +1,72 @@
+/*
+ * 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 { useCallback, useState } from 'react';
+import { i18n } from '@kbn/i18n';
+
+import { Vis } from 'src/plugins/visualizations/public';
+import { DefaultEditorDataTab, DefaultEditorDataTabProps } from './data_tab';
+import { VisOptionsProps } from '../../vis_options_props';
+
+export interface OptionTab {
+  editor: React.ComponentType<VisOptionsProps | DefaultEditorDataTabProps>;
+  name: string;
+  title: string;
+  isSelected?: boolean;
+}
+
+export const useOptionTabs = ({ type: visType }: Vis): [OptionTab[], (name: string) => void] => {
+  const [optionTabs, setOptionTabs] = useState<OptionTab[]>(() => {
+    const tabs = [
+      ...(visType.schemas.buckets || visType.schemas.metrics
+        ? [
+            {
+              name: 'data',
+              title: i18n.translate('visDefaultEditor.sidebar.tabs.dataLabel', {
+                defaultMessage: 'Data',
+              }),
+              editor: DefaultEditorDataTab,
+            },
+          ]
+        : []),
+
+      ...(!visType.editorConfig.optionTabs && visType.editorConfig.optionsTemplate
+        ? [
+            {
+              name: 'options',
+              title: i18n.translate('visDefaultEditor.sidebar.tabs.optionsLabel', {
+                defaultMessage: 'Options',
+              }),
+              editor: visType.editorConfig.optionsTemplate,
+            },
+          ]
+        : visType.editorConfig.optionTabs),
+    ];
+    // set up the first tab as selected
+    tabs[0].isSelected = true;
+
+    return tabs;
+  });
+
+  const setSelectedTab = useCallback((name: string) => {
+    setOptionTabs((tabs) => tabs.map((tab) => ({ ...tab, isSelected: tab.name === name })));
+  }, []);
+
+  return [optionTabs, setSelectedTab];
+};

src/plugins/vis_default_editor/public/default_editor.tsx

@@ -20,13 +20,14 @@
 import './index.scss';
 
 import React, { useEffect, useRef, useState, useCallback } from 'react';
+import { EventEmitter } from 'events';
 
 import { EditorRenderProps } from 'src/plugins/visualize/public';
+import { Vis, VisualizeEmbeddableContract } from 'src/plugins/visualizations/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);
@@ -38,13 +39,16 @@ function DefaultEditor({
   uiState,
   timeRange,
   filters,
-  optionTabs,
   query,
   embeddableHandler,
   eventEmitter,
   linked,
   savedSearch,
-}: DefaultEditorControllerState & EditorRenderProps) {
+}: EditorRenderProps & {
+  vis: Vis;
+  eventEmitter: EventEmitter;
+  embeddableHandler: VisualizeEmbeddableContract;
+}) {
   const visRef = useRef<HTMLDivElement>(null);
   const [isCollapsed, setIsCollapsed] = useState(false);
 
@@ -105,7 +109,6 @@ function DefaultEditor({
               embeddableHandler={embeddableHandler}
               isCollapsed={isCollapsed}
               onClickCollapse={onClickCollapse}
-              optionTabs={optionTabs}
               vis={vis}
               uiState={uiState}
               isLinkedSearch={linked}

src/plugins/vis_default_editor/public/default_editor_controller.tsx

@@ -19,63 +19,21 @@
 
 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 { DefaultEditorDataTab, OptionTab } from './components/sidebar';
 
 const DefaultEditor = lazy(() => import('./default_editor'));
 
-export interface DefaultEditorControllerState {
-  vis: Vis;
-  eventEmitter: EventEmitter;
-  embeddableHandler: VisualizeEmbeddableContract;
-  optionTabs: OptionTab[];
-}
-
 class DefaultEditorController {
-  private el: HTMLElement;
-  private state: DefaultEditorControllerState;
-
-  constructor(el: HTMLElement, vis: Vis, eventEmitter: EventEmitter, embeddableHandler: any) {
-    this.el = el;
-    const { type: visType } = vis;
-
-    const optionTabs = [
-      ...(visType.schemas.buckets || visType.schemas.metrics
-        ? [
-            {
-              name: 'data',
-              title: i18n.translate('visDefaultEditor.sidebar.tabs.dataLabel', {
-                defaultMessage: 'Data',
-              }),
-              editor: DefaultEditorDataTab,
-            },
-          ]
-        : []),
-
-      ...(!visType.editorConfig.optionTabs && visType.editorConfig.optionsTemplate
-        ? [
-            {
-              name: 'options',
-              title: i18n.translate('visDefaultEditor.sidebar.tabs.optionsLabel', {
-                defaultMessage: 'Options',
-              }),
-              editor: visType.editorConfig.optionsTemplate,
-            },
-          ]
-        : visType.editorConfig.optionTabs),
-    ];
-    this.state = {
-      vis,
-      optionTabs,
-      eventEmitter,
-      embeddableHandler,
-    };
-  }
+  constructor(
+    private el: HTMLElement,
+    private vis: Vis,
+    private eventEmitter: EventEmitter,
+    private embeddableHandler: VisualizeEmbeddableContract
+  ) {}
 
   render(props: EditorRenderProps) {
     render(
@@ -94,7 +52,12 @@ class DefaultEditorController {
             </div>
           }
         >
-          <DefaultEditor {...this.state} {...props} />
+          <DefaultEditor
+            eventEmitter={this.eventEmitter}
+            embeddableHandler={this.embeddableHandler}
+            vis={this.vis}
+            {...props}
+          />
         </Suspense>
       </EuiErrorBoundary>,
       this.el