Update actions and reducers

src/legacy/ui/public/vis/editors/config/editor_config_providers.test.ts

@@ -51,7 +51,7 @@ describe('EditorConfigProvider', () => {
     expect(provider).not.toHaveBeenCalled();
     const aggType = {} as AggType;
     const aggConfig = {} as AggConfig;
-    registry.getConfigForAgg(aggType, indexPattern, aggConfig);
+    registry.getConfigForAgg(indexPattern, aggConfig);
     expect(provider).toHaveBeenCalledWith(aggType, indexPattern, aggConfig);
   });
 
@@ -64,7 +64,7 @@ describe('EditorConfigProvider', () => {
     expect(provider2).not.toHaveBeenCalled();
     const aggType = {} as AggType;
     const aggConfig = {} as AggConfig;
-    registry.getConfigForAgg(aggType, indexPattern, aggConfig);
+    registry.getConfigForAgg(indexPattern, aggConfig);
     expect(provider).toHaveBeenCalledWith(aggType, indexPattern, aggConfig);
     expect(provider2).toHaveBeenCalledWith(aggType, indexPattern, aggConfig);
   });
@@ -75,7 +75,7 @@ describe('EditorConfigProvider', () => {
     }
 
     function getOutputConfig(reg: EditorConfigProviderRegistry) {
-      return reg.getConfigForAgg({} as AggType, indexPattern, {} as AggConfig).singleParam;
+      return reg.getConfigForAgg(indexPattern, {} as AggConfig).singleParam;
     }
 
     it('should have hidden true if at least one config was hidden true', () => {

src/legacy/ui/public/vis/editors/default/components/agg_common_props.ts

@@ -18,25 +18,31 @@
  */
 
 import { AggType } from 'ui/agg_types';
-import { AggConfig, VisState } from 'ui/vis';
+import { AggConfig, VisState, VisParams } from 'ui/vis';
 import { AggGroupNames } from '../agg_groups';
-import { EditorActions } from '../state/actions';
+import { Schema } from '../schemas';
+
+type AggId = AggConfig['id'];
+type AggParams = AggConfig['params'];
+
+export type AddSchema = (schemas: Schema) => void;
+export type ReorderAggs = (sourceAgg: AggConfig, destinationAgg: AggConfig) => void;
 
 export interface DefaultEditorAggCommonProps {
   formIsTouched: boolean;
   groupName: AggGroupNames;
   lastParentPipelineAggTitle?: string;
   metricAggs: AggConfig[];
   state: VisState;
-  setAggParamValue: <T extends keyof AggConfig['params']>(
-    aggId: AggConfig['id'],
+  setAggParamValue: <T extends keyof AggParams>(
+    aggId: AggId,
     paramName: T,
-    value: AggConfig['params'][T]
+    value: AggParams[T]
   ) => void;
-  setStateParamValue: EditorActions['setStateParamValue'];
-  onAggTypeChange: (aggId: AggConfig['id'], aggType: AggType) => void;
-  onToggleEnableAgg: (aggId: AggConfig['id'], isEnable: boolean) => void;
-  removeAgg: (aggId: AggConfig['id']) => void;
+  setStateParamValue: <T extends keyof VisParams>(paramName: T, value: VisParams[T]) => void;
+  onAggTypeChange: (aggId: AggId, aggType: AggType) => void;
+  onToggleEnableAgg: (aggId: AggId, isEnable: boolean) => void;
+  removeAgg: (aggId: AggId) => void;
   setTouched: (isTouched: boolean) => void;
   setValidity: (isValid: boolean) => void;
 }

src/legacy/ui/public/vis/editors/default/components/agg_group.tsx

@@ -34,7 +34,7 @@ import { AggConfig } from '../../../../agg_types/agg_config';
 import { aggGroupNamesMap, AggGroupNames } from '../agg_groups';
 import { DefaultEditorAgg } from './agg';
 import { DefaultEditorAggAdd } from './agg_add';
-import { DefaultEditorAggCommonProps } from './agg_common_props';
+import { AddSchema, ReorderAggs, DefaultEditorAggCommonProps } from './agg_common_props';
 import {
   isInvalidAggsTouched,
   isAggRemovable,
@@ -43,12 +43,11 @@ import {
 } from './agg_group_helper';
 import { aggGroupReducer, initAggsState, AGGS_ACTION_KEYS } from './agg_group_state';
 import { Schema } from '../schemas';
-import { EditorActions } from '../state/actions';
 
 export interface DefaultEditorAggGroupProps extends DefaultEditorAggCommonProps {
   schemas: Schema[];
-  addSchema: (schemas: Schema) => void;
-  reorderAggs: EditorActions['reorderAggs'];
+  addSchema: AddSchema;
+  reorderAggs: ReorderAggs;
 }
 
 function DefaultEditorAggGroup({

src/legacy/ui/public/vis/editors/default/components/agg_param.tsx

@@ -20,11 +20,11 @@
 import React, { useCallback, useEffect } from 'react';
 
 import { AggParamEditorProps, AggParamCommonProps } from './agg_param_props';
-import { EditorActions } from '../state/actions';
+import { DefaultEditorAggCommonProps } from './agg_common_props';
 
 interface DefaultEditorAggParamProps<T> extends AggParamCommonProps<T> {
   paramEditor: React.ComponentType<AggParamEditorProps<T>>;
-  setAggParamValue: EditorActions['setAggParamValue'];
+  setAggParamValue: DefaultEditorAggCommonProps['setAggParamValue'];
 }
 
 function DefaultEditorAggParam<T>(props: DefaultEditorAggParamProps<T>) {

src/legacy/ui/public/vis/editors/default/components/bottom_bar.tsx

@@ -23,16 +23,17 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 import { Vis } from 'ui/vis';
 import { useEditorContext } from '../state';
+import { discardChanges, EditorAction } from '../state/actions';
 
 interface DefaultEditorBottomBarProps {
   vis: Vis;
   state: any;
-  discardChanges(vis: Vis): void;
+  dispatch: React.Dispatch<EditorAction>;
 }
 
-function DefaultEditorBottomBar({ discardChanges, vis, state }: DefaultEditorBottomBarProps) {
+function DefaultEditorBottomBar({ dispatch, vis, state }: DefaultEditorBottomBarProps) {
   const { enableAutoApply } = vis.type.editorConfig;
-  const onClickDiscard = useCallback(() => discardChanges(vis), [discardChanges, vis]);
+  const onClickDiscard = useCallback(() => dispatch(discardChanges(vis)), [dispatch, vis]);
   const { isDirty, setDirty } = useEditorContext();
 
   const applyChanges = useCallback(() => {

src/legacy/ui/public/vis/editors/default/components/sidebar/data_tab.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import React, { useMemo } from 'react';
+import React, { useMemo, useCallback } from 'react';
 import { findLast } from 'lodash';
 import { EuiSpacer } from '@elastic/eui';
 
@@ -27,25 +27,36 @@ import { MetricAggType } from 'ui/agg_types/metrics/metric_agg_type';
 import { VisState } from 'ui/vis';
 import { DefaultEditorAggGroup } from '../agg_group';
 import { AggGroupNames } from '../../agg_groups';
-import { EditorActions } from '../../state/actions';
+import {
+  EditorAction,
+  addNewAgg,
+  removeAgg,
+  reorderAggs,
+  setAggParamValue,
+  changeAggType,
+  toggleEnabledAgg,
+} from '../../state/actions';
 import { ISchemas } from '../../schemas';
+import { AddSchema, ReorderAggs, DefaultEditorAggCommonProps } from '../agg_common_props';
 
 export interface DefaultEditorDataTabProps {
-  actions: EditorActions;
+  dispatch: React.Dispatch<EditorAction>;
   metricAggs: AggConfig[];
   schemas: ISchemas;
   state: VisState;
   setTouched(isTouched: boolean): void;
   setValidity(isValid: boolean): void;
+  setStateValue: DefaultEditorAggCommonProps['setStateParamValue'];
 }
 
 function DefaultEditorDataTab({
-  actions,
+  dispatch,
   metricAggs,
   schemas,
   state,
   setTouched,
   setValidity,
+  setStateValue,
 }: DefaultEditorDataTabProps) {
   const lastParentPipelineAgg = useMemo(
     () =>
@@ -57,19 +68,45 @@ function DefaultEditorDataTab({
   );
   const lastParentPipelineAggTitle = lastParentPipelineAgg && lastParentPipelineAgg.type.title;
 
+  const addSchema: AddSchema = useCallback(schema => dispatch(addNewAgg(schema)), [dispatch]);
+
+  const onAggRemove: DefaultEditorAggCommonProps['removeAgg'] = useCallback(
+    aggId => dispatch(removeAgg(aggId)),
+    [dispatch]
+  );
+
+  const onReorderAggs: ReorderAggs = useCallback((...props) => dispatch(reorderAggs(...props)), [
+    dispatch,
+  ]);
+
+  const onAggParamValueChange: DefaultEditorAggCommonProps['setAggParamValue'] = useCallback(
+    (...props) => dispatch(setAggParamValue(...props)),
+    [dispatch]
+  );
+
+  const onAggTypeChange: DefaultEditorAggCommonProps['onAggTypeChange'] = useCallback(
+    (...props) => dispatch(changeAggType(...props)),
+    [dispatch]
+  );
+
+  const onToggleEnableAgg: DefaultEditorAggCommonProps['onToggleEnableAgg'] = useCallback(
+    (...props) => dispatch(toggleEnabledAgg(...props)),
+    [dispatch]
+  );
+
   const commonProps = {
-    addSchema: actions.addNewAgg,
+    addSchema,
     lastParentPipelineAggTitle,
     metricAggs,
     state,
-    reorderAggs: actions.reorderAggs,
-    setAggParamValue: actions.setAggParamValue,
-    setStateParamValue: actions.setStateParamValue,
-    onAggTypeChange: actions.changeAggType,
-    onToggleEnableAgg: actions.toggleEnabledAgg,
+    reorderAggs: onReorderAggs,
+    setAggParamValue: onAggParamValueChange,
+    setStateParamValue: setStateValue,
+    onAggTypeChange,
+    onToggleEnableAgg,
     setValidity,
     setTouched,
-    removeAgg: actions.removeAgg,
+    removeAgg: onAggRemove,
   };
 
   return (

src/legacy/ui/public/vis/editors/default/components/sidebar/sidebar.tsx

@@ -17,26 +17,27 @@
  * under the License.
  */
 
-import React, { useMemo, useState } from 'react';
+import React, { useMemo, useState, useCallback } from 'react';
 import { i18n } from '@kbn/i18n';
-import { get } from 'lodash';
+import { get, isEqual } from 'lodash';
 
 import { Vis, VisState } from 'ui/vis';
 import { PersistedState } from 'ui/persisted_state';
 import { DefaultEditorNavBar, OptionTab } from './navbar';
-import { EditorActions } from '../../state/actions';
+import { setStateParamValue, EditorAction } from '../../state/actions';
 import { AggGroupNames } from '../../agg_groups';
+import { DefaultEditorAggCommonProps } from '../agg_common_props';
 
 interface DefaultEditorSideBarProps {
-  actions: EditorActions;
+  dispatch: React.Dispatch<EditorAction>;
   optionTabs: OptionTab[];
   state: VisState;
   uiState: PersistedState;
   vis: Vis;
 }
 
 function DefaultEditorSideBar({
-  actions,
+  dispatch,
   optionTabs,
   state,
   uiState,
@@ -56,13 +57,25 @@ function DefaultEditorSideBar({
   const setValidity = () => {};
   const setTouched = () => {};
 
+  const setStateValue: DefaultEditorAggCommonProps['setStateParamValue'] = useCallback(
+    (paramName, value) => {
+      const shouldUpdate = !isEqual(state.params[paramName], value);
+
+      if (shouldUpdate) {
+        dispatch(setStateParamValue(paramName, value));
+      }
+    },
+    [dispatch]
+  );
+
   const dataTabProps = {
-    actions,
+    dispatch,
     metricAggs,
     state,
     schemas: vis.type.schemas,
     setValidity,
     setTouched,
+    setStateValue,
   };
 
   const optionTabProps = {
@@ -71,7 +84,7 @@ function DefaultEditorSideBar({
     stateParams: state.params,
     vis,
     uiState,
-    setValue: actions.setStateParamValue,
+    setValue: setStateValue,
     setValidity,
     setTouched,
   };

src/legacy/ui/public/vis/editors/default/controls/agg_control_props.tsx

@@ -18,11 +18,11 @@
  */
 
 import { AggConfig, VisParams } from 'ui/vis';
-import { EditorActions } from '../state/actions';
+import { DefaultEditorAggCommonProps } from '../components/agg_common_props';
 
 export interface AggControlProps {
   agg: AggConfig;
   editorStateParams: VisParams;
-  setAggParamValue: EditorActions['setAggParamValue'];
-  setStateParamValue: EditorActions['setStateParamValue'];
+  setAggParamValue: DefaultEditorAggCommonProps['setAggParamValue'];
+  setStateParamValue: DefaultEditorAggCommonProps['setStateParamValue'];
 }

src/legacy/ui/public/vis/editors/default/default_editor.tsx

@@ -44,7 +44,7 @@ function DefaultEditor({
   const [visHandler, setVisHandler] = useState<EmbeddedVisualizeHandler | null>(null);
   // const [sidebarStyle, setSidebarStyle] = useState({});
   const { vis } = savedObj;
-  const [state, actions] = useEditorReducer(vis);
+  const [state, dispatch] = useEditorReducer(vis);
 
   useEffect(() => {
     async function visualize() {
@@ -104,11 +104,11 @@ function DefaultEditor({
           vis={vis}
           state={state}
           uiState={uiState}
-          actions={actions}
+          dispatch={dispatch}
         />
       </div>
 
-      <DefaultEditorBottomBar discardChanges={actions.discardChanges} state={state} vis={vis} />
+      <DefaultEditorBottomBar dispatch={dispatch} state={state} vis={vis} />
     </div>
   );
 }

src/legacy/ui/public/vis/editors/default/state/actions.ts

@@ -35,15 +35,15 @@ type ChangeAggType = ActionType<
   EditorStateActionTypes.CHANGE_AGG_TYPE,
   { aggId: AggId; value: AggConfig['type'] }
 >;
-type SetAggParamValue<T extends AggParams = string> = ActionType<
+type SetAggParamValue<T extends AggParams = any> = ActionType<
   EditorStateActionTypes.SET_AGG_PARAM_VALUE,
   {
     aggId: AggId;
     paramName: T;
     value: AggParams[T];
   }
 >;
-type SetStateParamValue<T extends keyof AggParams = string> = ActionType<
+type SetStateParamValue<T extends keyof AggParams = any> = ActionType<
   EditorStateActionTypes.SET_STATE_PARAM_VALUE,
   { paramName: T; value: AggParams[T] }
 >;
@@ -145,7 +145,7 @@ const toggleEnabledAgg: EditorActions['toggleEnabledAgg'] = (aggId, enabled) =>
   },
 });
 
-export const editorActions = {
+export {
   addNewAgg,
   discardChanges,
   changeAggType,