Reactify visualize app (#67848)

* Reactify visualize app

* Fix typescript failures after merging master

* Make sure refresh button works

* Subscribe filter manager fetches

* Use redirect to landing page

* Update savedSearch type

* Add check for TSVB is loaded

* Fix comments

* Fix uiState persistence on vis load

* Remove extra div around TableListView

* Update DTS selectors

* Add error handling for embeddable

* Remove extra argument from useEditorUpdates effect

* Update comments, fix typos

* Remove extra div wrapper

* Apply design suggestions

* Revert accidental config changes

* Apply navigating to dashboard

* Apply redirect legacy urls

* Apply incoming changes

* Apply incoming changes

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

Author: sulemanof

src/plugins/input_control_vis/public/input_control_vis_type.ts

@@ -23,7 +23,6 @@ import { createInputControlVisController } from './vis_controller';
 import { getControlsTab } from './components/editor/controls_tab';
 import { OptionsTab } from './components/editor/options_tab';
 import { InputControlVisDependencies } from './plugin';
-import { defaultFeedbackMessage } from '../../kibana_utils/public';
 
 export function createInputControlVisTypeDefinition(deps: InputControlVisDependencies) {
   const InputControlVisController = createInputControlVisController(deps);
@@ -39,7 +38,6 @@ export function createInputControlVisTypeDefinition(deps: InputControlVisDepende
       defaultMessage: 'Create interactive controls for easy dashboard manipulation.',
     }),
     stage: 'experimental',
-    feedbackMessage: defaultFeedbackMessage,
     visualization: InputControlVisController,
     visConfig: {
       defaults: {

src/plugins/kibana_utils/common/index.ts

@@ -28,4 +28,3 @@ export { distinctUntilChangedWithInitialValue } from './distinct_until_changed_w
 export { url } from './url';
 export { now } from './now';
 export { calculateObjectHash } from './calculate_object_hash';
-export { defaultFeedbackMessage } from './default_feedback_message';

src/plugins/kibana_utils/public/index.ts

@@ -31,7 +31,6 @@ export {
   UiComponentInstance,
   url,
   createGetterSetter,
-  defaultFeedbackMessage,
 } from '../common';
 export * from './core';
 export * from '../common/errors';

src/plugins/navigation/public/top_nav_menu/top_nav_menu_data.tsx

@@ -19,7 +19,7 @@
 
 import { ButtonIconSide } from '@elastic/eui';
 
-export type TopNavMenuAction = (anchorElement: EventTarget) => void;
+export type TopNavMenuAction = (anchorElement: HTMLElement) => void;
 
 export interface TopNavMenuData {
   id?: string;
@@ -29,7 +29,7 @@ export interface TopNavMenuData {
   testId?: string;
   className?: string;
   disableButton?: boolean | (() => boolean);
-  tooltip?: string | (() => string);
+  tooltip?: string | (() => string | undefined);
   emphasize?: boolean;
   iconType?: string;
   iconSide?: ButtonIconSide;

src/plugins/saved_objects/public/saved_object/saved_object_loader.ts

@@ -51,14 +51,17 @@ export class SavedObjectLoader {
   }
 
   /**
-   * Retrieve a saved object by id. Returns a promise that completes when the object finishes
+   * Retrieve a saved object by id or create new one.
+   * Returns a promise that completes when the object finishes
    * initializing.
-   * @param id
+   * @param opts
    * @returns {Promise<SavedObject>}
    */
-  async get(id?: string) {
+  async get(opts?: Record<string, unknown> | string) {
+    // can accept object as argument in accordance to SavedVis class
+    // see src/plugins/saved_objects/public/saved_object/saved_object_loader.ts
     // @ts-ignore
-    const obj = new this.Class(id);
+    const obj = new this.Class(opts);
     return obj.init();
   }
 

src/plugins/saved_objects/public/types.ts

@@ -63,6 +63,7 @@ export interface SavedObjectSaveOpts {
   confirmOverwrite?: boolean;
   isTitleDuplicateConfirmed?: boolean;
   onTitleDuplicate?: () => void;
+  returnToOrigin?: boolean;
 }
 
 export interface SavedObjectCreationOpts {

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

@@ -23,9 +23,13 @@ import { i18n } from '@kbn/i18n';
 import { keyCodes, EuiButtonIcon, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { EventEmitter } from 'events';
 
-import { Vis, PersistedState } from 'src/plugins/visualizations/public';
-import { SavedSearch } from 'src/plugins/discover/public';
+import {
+  Vis,
+  PersistedState,
+  VisualizeEmbeddableContract,
+} 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 { DefaultEditorControls } from './controls';
 import { setStateParamValue, useEditorReducer, useEditorFormState, discardChanges } from './state';
@@ -34,18 +38,20 @@ import { SidebarTitle } from './sidebar_title';
 import { Schema } from '../../schemas';
 
 interface DefaultEditorSideBarProps {
+  embeddableHandler: VisualizeEmbeddableContract;
   isCollapsed: boolean;
   onClickCollapse: () => void;
   optionTabs: OptionTab[];
   uiState: PersistedState;
   vis: Vis;
   isLinkedSearch: boolean;
   eventEmitter: EventEmitter;
-  savedSearch?: SavedSearch;
+  savedSearch?: SavedObject;
   timeRange: TimeRange;
 }
 
 function DefaultEditorSideBar({
+  embeddableHandler,
   isCollapsed,
   onClickCollapse,
   optionTabs,
@@ -104,12 +110,12 @@ function DefaultEditorSideBar({
         aggs: state.data.aggs ? (state.data.aggs.aggs.map((agg) => agg.toJSON()) as any) : [],
       },
     });
-    eventEmitter.emit('updateVis');
+    embeddableHandler.reload();
     eventEmitter.emit('dirtyStateChange', {
       isDirty: false,
     });
     setTouched(false);
-  }, [vis, state, formState.invalid, setTouched, isDirty, eventEmitter]);
+  }, [vis, state, formState.invalid, setTouched, isDirty, eventEmitter, embeddableHandler]);
 
   const onSubmit: KeyboardEventHandler<HTMLFormElement> = useCallback(
     (event) => {

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

@@ -36,17 +36,17 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 
 import { Vis } from 'src/plugins/visualizations/public';
-import { SavedSearch } from 'src/plugins/discover/public';
+import { SavedObject } from 'src/plugins/saved_objects/public';
 import { useKibana } from '../../../../kibana_react/public';
 
 interface LinkedSearchProps {
-  savedSearch: SavedSearch;
+  savedSearch: SavedObject;
   eventEmitter: EventEmitter;
 }
 
 interface SidebarTitleProps {
   isLinkedSearch: boolean;
-  savedSearch?: SavedSearch;
+  savedSearch?: SavedObject;
   vis: Vis;
   eventEmitter: EventEmitter;
 }

src/plugins/vis_default_editor/public/default_editor.tsx

@@ -59,7 +59,7 @@ function DefaultEditor({
 
     embeddableHandler.render(visRef.current);
     setTimeout(() => {
-      eventEmitter.emit('apply');
+      eventEmitter.emit('embeddableRendered');
     });
 
     return () => embeddableHandler.destroy();
@@ -102,6 +102,7 @@ function DefaultEditor({
             initialWidth={editorInitialWidth}
           >
             <DefaultEditorSideBar
+              embeddableHandler={embeddableHandler}
               isCollapsed={isCollapsed}
               onClickCollapse={onClickCollapse}
               optionTabs={optionTabs}

src/plugins/vis_type_timeseries/public/application/components/vis_editor.js

@@ -80,7 +80,7 @@ export class VisEditor extends Component {
 
   updateVisState = debounce(() => {
     this.props.vis.params = this.state.model;
-    this.props.eventEmitter.emit('updateVis');
+    this.props.embeddableHandler.reload();
     this.props.eventEmitter.emit('dirtyStateChange', {
       isDirty: false,
     });
@@ -187,6 +187,7 @@ export class VisEditor extends Component {
               autoApply={this.state.autoApply}
               model={model}
               embeddableHandler={this.props.embeddableHandler}
+              eventEmitter={this.props.eventEmitter}
               vis={this.props.vis}
               timeRange={this.props.timeRange}
               uiState={this.uiState}