Reactify visualize app (elastic#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>

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}

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

@@ -73,6 +73,7 @@ class VisEditorVisualizationUI extends Component {
 
     this._handler = embeddableHandler;
     await this._handler.render(this._visEl.current);
+    this.props.eventEmitter.emit('embeddableRendered');
 
     this._subscription = this._handler.handler.data$.subscribe((data) => {
       this.setPanelInterval(data.value.visData);
@@ -279,6 +280,7 @@ VisEditorVisualizationUI.propTypes = {
   uiState: PropTypes.object,
   onToggleAutoApply: PropTypes.func,
   embeddableHandler: PropTypes.object,
+  eventEmitter: PropTypes.object,
   timeRange: PropTypes.object,
   dirty: PropTypes.bool,
   autoApply: PropTypes.bool,

src/plugins/vis_type_timeseries/public/metrics_type.ts

@@ -24,7 +24,6 @@ import { metricsRequestHandler } from './request_handler';
 import { EditorController } from './application';
 // @ts-ignore
 import { PANEL_TYPES } from '../common/panel_types';
-import { defaultFeedbackMessage } from '../../kibana_utils/public';
 import { VisEditor } from './application/components/vis_editor_lazy';
 
 export const metricsVisDefinition = {
@@ -34,7 +33,6 @@ export const metricsVisDefinition = {
     defaultMessage: 'Build time-series using a visual pipeline interface',
   }),
   icon: 'visVisualBuilder',
-  feedbackMessage: defaultFeedbackMessage,
   visConfig: {
     defaults: {
       id: '61ca57f0-469d-11e7-af02-69e470af7417',

src/plugins/vis_type_vega/public/vega_type.ts

@@ -21,7 +21,6 @@ import { i18n } from '@kbn/i18n';
 import { DefaultEditorSize } from '../../vis_default_editor/public';
 import { VegaVisualizationDependencies } from './plugin';
 import { VegaVisEditor } from './components';
-import { defaultFeedbackMessage } from '../../kibana_utils/public';
 
 import { createVegaRequestHandler } from './vega_request_handler';
 // @ts-ignore
@@ -56,6 +55,5 @@ export const createVegaTypeDefinition = (dependencies: VegaVisualizationDependen
       showFilterBar: true,
     },
     stage: 'experimental',
-    feedbackMessage: defaultFeedbackMessage,
   };
 };

src/plugins/visualizations/public/index.ts

@@ -51,4 +51,5 @@ export {
   VisSavedObject,
   VisResponseValue,
 } from './types';
+export { VisualizationListItem } from './vis_types/vis_type_alias_registry';
 export { VISUALIZE_ENABLE_LABS_SETTING } from '../common/constants';

src/plugins/visualizations/public/saved_visualizations/_saved_vis.ts

@@ -62,6 +62,7 @@ export const convertFromSerializedVis = (vis: SerializedVis): ISavedVis => {
     title: vis.title,
     description: vis.description,
     visState: {
+      title: vis.title,
       type: vis.type,
       aggs: vis.data.aggs,
       params: vis.params,

src/plugins/visualizations/public/saved_visualizations/saved_visualizations.ts

@@ -56,7 +56,7 @@ export function createSavedVisLoader(services: SavedObjectKibanaServicesWithVisu
       source.icon = source.type.icon;
       source.image = source.type.image;
       source.typeTitle = source.type.title;
-      source.editUrl = `#/edit/${id}`;
+      source.editUrl = `/edit/${id}`;
 
       return source;
     };

src/plugins/visualizations/public/types.ts

@@ -35,6 +35,7 @@ export type VisualizationControllerConstructor = new (
 ) => VisualizationController;
 
 export interface SavedVisState {
+  title: string;
   type: string;
   params: VisParams;
   aggs: AggConfigOptions[];

src/plugins/visualizations/public/vis.ts

@@ -29,6 +29,7 @@
 
 import { isFunction, defaults, cloneDeep } from 'lodash';
 import { Assign } from '@kbn/utility-types';
+import { i18n } from '@kbn/i18n';
 import { PersistedState } from './persisted_state';
 import { getTypes, getAggs, getSearch, getSavedSearchLoader } from './services';
 import { VisType } from './vis_types';
@@ -105,7 +106,13 @@ export class Vis {
   private getType(visType: string) {
     const type = getTypes().get(visType);
     if (!type) {
-      throw new Error(`Invalid type "${visType}"`);
+      const errorMessage = i18n.translate('visualizations.visualizationTypeInvalidMessage', {
+        defaultMessage: 'Invalid visualization type "{visType}"',
+        values: {
+          visType,
+        },
+      });
+      throw new Error(errorMessage);
     }
     return type;
   }
@@ -150,7 +157,13 @@ export class Vis {
       const configStates = this.initializeDefaultsFromSchemas(aggs, this.type.schemas.all || []);
       if (!this.data.indexPattern) {
         if (aggs.length) {
-          throw new Error('trying to initialize aggs without index pattern');
+          const errorMessage = i18n.translate(
+            'visualizations.initializeWithoutIndexPatternErrorMessage',
+            {
+              defaultMessage: 'Trying to initialize aggs without index pattern',
+            }
+          );
+          throw new Error(errorMessage);
         }
         return;
       }

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

@@ -27,7 +27,6 @@ export interface BaseVisTypeOptions {
   icon?: string;
   image?: string;
   stage?: 'experimental' | 'beta' | 'production';
-  feedbackMessage?: string;
   options?: Record<string, any>;
   visualization: VisualizationControllerConstructor;
   visConfig?: Record<string, any>;
@@ -48,7 +47,7 @@ export class BaseVisType {
   icon?: string;
   image?: string;
   stage: 'experimental' | 'beta' | 'production';
-  feedbackMessage: string;
+  isExperimental: boolean;
   options: Record<string, any>;
   visualization: VisualizationControllerConstructor;
   visConfig: Record<string, any>;
@@ -87,7 +86,7 @@ export class BaseVisType {
     this.editorConfig = _.defaultsDeep({}, opts.editorConfig, { collections: {} });
     this.options = _.defaultsDeep({}, opts.options, defaultOptions);
     this.stage = opts.stage || 'production';
-    this.feedbackMessage = opts.feedbackMessage || '';
+    this.isExperimental = opts.stage === 'experimental';
     this.hidden = opts.hidden || false;
     this.requestHandler = opts.requestHandler || 'courier';
     this.responseHandler = opts.responseHandler || 'none';
@@ -97,10 +96,6 @@ export class BaseVisType {
     this.useCustomNoDataScreen = opts.useCustomNoDataScreen || false;
   }
 
-  shouldMarkAsExperimentalInUI() {
-    return this.stage === 'experimental';
-  }
-
   public get schemas() {
     if (this.editorConfig && this.editorConfig.schemas) {
       return this.editorConfig.schemas;

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

@@ -27,6 +27,7 @@ export interface VisualizationListItem {
   title: string;
   description?: string;
   typeTitle: string;
+  image?: string;
 }
 
 export interface VisualizationsAppExtension {

src/plugins/visualize/kibana.json

@@ -9,7 +9,6 @@
     "navigation",
     "savedObjects",
     "visualizations",
-    "dashboard",
     "embeddable"
   ],
   "optionalPlugins": ["home", "share"]

src/plugins/visualize/public/application/index.scss → src/plugins/visualize/public/application/app.scss

@@ -5,6 +5,8 @@
 //   visChart__legend--small
 //   visChart__legend-isLoading
 
-@import 'app';
-@import 'editor/index';
-@import 'listing/index';
+.visAppWrapper {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}