Create a state reducer and a state context

elastic · Oct 31, 2019 · fcd0c40 · fcd0c40
1 parent abb59f0
commit fcd0c40
Show file tree

Hide file tree

Showing 18 changed files with 402 additions and 204 deletions.
diff --git a/...legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/index.tsx b/...legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/index.tsx
@@ -22,6 +22,7 @@ import { cloneDeep, uniq, get } from 'lodash';
 import { EuiSpacer } from '@elastic/eui';
 
 import { AggConfig } from 'ui/vis';
+import { useEditorState } from 'ui/vis/editors/default/state';
 import { BasicVislibParams, ValueAxis, SeriesParam, Axis } from '../../../types';
 import { ValidationVisOptionsProps } from '../../common';
 import { SeriesPanel } from './series_panel';
@@ -52,7 +53,7 @@ export type ChangeValueAxis = (
 const VALUE_AXIS_PREFIX = 'ValueAxis-';
 
 function MetricsAxisOptions(props: ValidationVisOptionsProps<BasicVislibParams>) {
-  const { stateParams, setValue, aggs, aggsLabels, setVisType, vis } = props;
+  const { stateParams, setValue, aggs, setVisType, vis } = props;
 
   const [isCategoryAxisHorizontal, setIsCategoryAxisHorizontal] = useState(true);
 
@@ -240,11 +241,17 @@ function MetricsAxisOptions(props: ValidationVisOptionsProps<BasicVislibParams>)
   const metrics = useMemo(() => {
     const schemaName = vis.type.schemas.metrics[0].name;
     return aggs.bySchemaName(schemaName);
-  }, [vis.type.schemas.metrics[0].name, aggs, aggsLabels]);
+  }, [vis.type.schemas.metrics[0].name, aggs]);
 
   const firstValueAxesId = stateParams.valueAxes[0].id;
 
+  const { isDirty } = useEditorState();
+
   useEffect(() => {
+    if (!isDirty) {
+      return;
+    }
+
     const updatedSeries = metrics.map(agg => {
       const params = stateParams.seriesParams.find(param => param.data.id === agg.id);
       const label = agg.makeLabel();
@@ -270,7 +277,7 @@ function MetricsAxisOptions(props: ValidationVisOptionsProps<BasicVislibParams>)
     });
 
     setValue('seriesParams', updatedSeries);
-  }, [aggsLabels, metrics, firstValueAxesId]);
+  }, [isDirty, metrics, firstValueAxesId]);
 
   const visType = useMemo(() => {
     const types = uniq(stateParams.seriesParams.map(({ type }) => type));
@@ -282,8 +289,12 @@ function MetricsAxisOptions(props: ValidationVisOptionsProps<BasicVislibParams>)
   }, [visType]);
 
   useEffect(() => {
+    if (!isDirty) {
+      return;
+    }
+
     updateAxisTitle();
-  }, [aggsLabels]);
+  }, [aggs, isDirty]);
 
   return (
     <>

diff --git a/src/legacy/ui/public/vis/editors/default/_sidebar.scss b/src/legacy/ui/public/vis/editors/default/_sidebar.scss
@@ -60,11 +60,6 @@
   }
 }
 
-.visEditorSidebar__navButtonLink {
-  // Make the line-height the same size as the icon for better alignment
-  line-height: $euiSize;
-}
-
 //
 // SECTIONS
 //

diff --git a/src/legacy/ui/public/vis/editors/default/components/agg.tsx b/src/legacy/ui/public/vis/editors/default/components/agg.tsx
@@ -58,6 +58,7 @@ function DefaultEditorAgg({
   lastParentPipelineAggTitle,
   state,
   onAggParamsChange,
+  onAggTypeChange,
   onToggleEnableAgg,
   removeAgg,
   setTouched,
@@ -264,6 +265,7 @@ function DefaultEditorAgg({
           metricAggs={metricAggs}
           state={state}
           onAggParamsChange={onAggParamsChange}
+          onAggTypeChange={onAggTypeChange}
           setTouched={setTouched}
           setValidity={onSetValidity}
         />

diff --git a/src/legacy/ui/public/vis/editors/default/components/agg_common_props.ts b/src/legacy/ui/public/vis/editors/default/components/agg_common_props.ts
@@ -35,6 +35,7 @@ export interface DefaultEditorAggCommonProps {
   metricAggs: AggConfig[];
   state: VisState;
   onAggParamsChange: OnParamChange;
+  onAggTypeChange: (aggId: AggConfig['id'], aggType: AggType) => void;
   onToggleEnableAgg: (agg: AggConfig, isEnable: boolean) => void;
   removeAgg: (agg: AggConfig) => void;
   setTouched: (isTouched: boolean) => void;

diff --git a/src/legacy/ui/public/vis/editors/default/components/agg_group.tsx b/src/legacy/ui/public/vis/editors/default/components/agg_group.tsx
@@ -57,6 +57,7 @@ function DefaultEditorAggGroup({
   schemas = [],
   addSchema,
   onAggParamsChange,
+  onAggTypeChange,
   onToggleEnableAgg,
   removeAgg,
   reorderAggs,
@@ -168,6 +169,7 @@ function DefaultEditorAggGroup({
                     metricAggs={metricAggs}
                     state={state}
                     onAggParamsChange={onAggParamsChange}
+                    onAggTypeChange={onAggTypeChange}
                     onToggleEnableAgg={onToggleEnableAgg}
                     removeAgg={removeAgg}
                     setTouched={isTouched => setTouchedHandler(agg.id, isTouched)}

diff --git a/src/legacy/ui/public/vis/editors/default/components/agg_params.tsx b/src/legacy/ui/public/vis/editors/default/components/agg_params.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import React, { useReducer, useEffect, useMemo, useCallback } from 'react';
+import React, { useReducer, useEffect, useMemo } from 'react';
 import { EuiForm, EuiAccordion, EuiSpacer, EuiFormRow } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
@@ -58,7 +58,7 @@ type EditorParamConfigType = EditorParamConfig & {
 export interface SubAggParamsProp {
   formIsTouched: boolean;
   onAggParamsChange: OnParamChange;
-  onAggTypeChange: (agg: AggConfig, aggType: AggType) => void;
+  onAggTypeChange: (aggId: AggConfig['id'], aggType: AggType) => void;
 }
 export interface DefaultEditorAggParamsProps extends SubAggParamsProp {
   agg: AggConfig;
@@ -88,6 +88,7 @@ function DefaultEditorAggParams({
   metricAggs,
   state = {} as VisState,
   onAggParamsChange,
+  onAggTypeChange,
   setTouched,
   setValidity,
 }: DefaultEditorAggParamsProps) {
@@ -115,12 +116,6 @@ function DefaultEditorAggParams({
   const isAllInvalidParamsTouched =
     !!errors.length || isInvalidParamsTouched(agg.type, aggType, paramsState);
 
-  const onAggTypeChange = useCallback((aggr, value) => {
-    if (aggr.type !== value) {
-      aggr.type = value;
-    }
-  }, []);
-
   // reset validity before component destroyed
   useUnmount(() => setValidity(true));
 
@@ -215,7 +210,7 @@ function DefaultEditorAggParams({
         isSubAggregation={aggIndex >= 1 && groupName === AggGroupNames.Buckets}
         showValidation={formIsTouched || aggType.touched}
         setValue={value => {
-          onAggTypeChange(agg, value);
+          onAggTypeChange(agg.id, value);
           // reset touched and valid of params
           onChangeParamsState({ type: AGG_PARAMS_ACTION_KEYS.RESET });
         }}

diff --git a/src/legacy/ui/public/vis/editors/default/components/bottom_bar.tsx b/src/legacy/ui/public/vis/editors/default/components/bottom_bar.tsx
@@ -19,34 +19,66 @@
 
 import React, { useCallback } from 'react';
 import { EuiBottomBar, EuiFlexGroup, EuiFlexItem, EuiButton, EuiButtonEmpty } from '@elastic/eui';
-import { visDimension } from 'src/legacy/core_plugins/interpreter/public/functions/vis_dimension';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { i18n } from '@kbn/i18n';
+import { discardChanges } from '../state';
 
-function DefaultEditorBottomBar({ dispatch, vis }) {
-  const discardChanges = useCallback(
-    () =>
-      dispatch({
-        type: 'discardChanges',
-        payload: vis,
-      }),
-    [dispatch, vis]
-  );
+function DefaultEditorBottomBar({ dispatch, isDirty, vis }) {
+  const onClickDiscard = useCallback(() => dispatch(discardChanges(vis)), [dispatch, vis]);
+  const { enableAutoApply } = vis.type.editorConfig;
 
   return (
     <EuiBottomBar>
       <EuiFlexGroup justifyContent="spaceBetween">
         <EuiFlexItem grow={false}></EuiFlexItem>
         <EuiFlexItem grow={false}>
           <EuiFlexGroup gutterSize="s">
-            <EuiFlexItem grow={false}>
-              <EuiButtonEmpty color="ghost" size="s" iconType="cross" onClick={discardChanges}>
-                Discard changes
-              </EuiButtonEmpty>
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <EuiButton color="ghost" fill size="s" iconType="play">
-                Update chart
-              </EuiButton>
-            </EuiFlexItem>
+            {!enableAutoApply && (
+              <>
+                <EuiFlexItem grow={false}>
+                  <EuiButtonEmpty
+                    aria-label={i18n.translate(
+                      'common.ui.vis.editors.sidebar.discardChangesAriaLabel',
+                      {
+                        defaultMessage: 'Reset the visualization',
+                      }
+                    )}
+                    color="ghost"
+                    data-test-subj="visualizeEditorResetButton"
+                    disabled={!isDirty}
+                    iconType="cross"
+                    onClick={onClickDiscard}
+                    size="s"
+                  >
+                    <FormattedMessage
+                      id="common.ui.vis.editors.sidebar.discardChangesButtonLabel"
+                      defaultMessage="Discard changes"
+                    />
+                  </EuiButtonEmpty>
+                </EuiFlexItem>
+
+                <EuiFlexItem grow={false}>
+                  <EuiButton
+                    aria-label={i18n.translate(
+                      'common.ui.vis.editors.sidebar.applyChangesAriaLabel',
+                      {
+                        defaultMessage: 'Update the visualization with your changes',
+                      }
+                    )}
+                    color="ghost"
+                    disabled={!isDirty || enableAutoApply}
+                    fill
+                    iconType="play"
+                    size="s"
+                  >
+                    <FormattedMessage
+                      id="common.ui.vis.editors.sidebar.updateChartButtonLabel"
+                      defaultMessage="Update chart"
+                    />
+                  </EuiButton>
+                </EuiFlexItem>
+              </>
+            )}
           </EuiFlexGroup>
         </EuiFlexItem>
       </EuiFlexGroup>

diff --git a/src/legacy/ui/public/vis/editors/default/components/data_tab.tsx b/src/legacy/ui/public/vis/editors/default/components/data_tab.tsx
@@ -21,12 +21,12 @@ import React, { useCallback } from 'react';
 import { EuiSpacer } from '@elastic/eui';
 import { DefaultEditorAggGroup } from './agg_group';
 import { AggGroupNames } from '../agg_groups';
+import { addNewAgg, changeAggType, setAggParamValue } from '../state';
 
 function DefaultEditorDataTab({
   metricAggs,
   state,
   schemas,
-  onParamChange,
   onToggleEnableAgg,
   removeAgg,
   reorderAggs,
@@ -41,35 +41,24 @@ function DefaultEditorDataTab({
 
   const onAggParamsChange = useCallback(
     (aggId, paramName, value) => {
-      dispatch({
-        type: 'setAggParamValue',
-        payload: {
-          aggId,
-          paramName,
-          value,
-        },
-      });
+      dispatch(setAggParamValue(aggId, paramName, value));
     },
     [dispatch]
   );
 
-  const addSchema = useCallback(
-    schema =>
-      dispatch({
-        type: 'addNewAgg',
-        payload: {
-          schema,
-        },
-      }),
-    [dispatch]
-  );
+  const addSchema = useCallback(schema => dispatch(addNewAgg(schema)), [dispatch]);
+
+  const onAggTypeChange = useCallback((aggId, value) => dispatch(changeAggType(aggId, value)), [
+    dispatch,
+  ]);
 
   const commonProps = {
     addSchema,
     metricAggs,
     state,
     reorderAggs,
     onAggParamsChange,
+    onAggTypeChange,
     onToggleEnableAgg,
     setValidity,
     setTouched,

diff --git a/src/legacy/ui/public/vis/editors/default/default.js b/src/legacy/ui/public/vis/editors/default/default.js
@@ -21,7 +21,6 @@ import 'ui/angular-bootstrap';
 import './fancy_forms';
 import './sidebar';
 import { i18n } from '@kbn/i18n';
-import './vis_editor_resizer';
 import './vis_type_agg_filter';
 import $ from 'jquery';