reset filter state whenever split_mode changed (#118953)

elastic · Nov 18, 2021 · 8377a87 · 8377a87
1 parent 12104d5
commit 8377a87
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 7 deletions.
diff --git a/src/plugins/vis_types/timeseries/public/application/components/splits/filter.js b/src/plugins/vis_types/timeseries/public/application/components/splits/filter.js
@@ -6,7 +6,6 @@
  * Side Public License, v 1.
  */
 
-import { createSelectHandler } from '../lib/create_select_handler';
 import { GroupBySelect } from './group_by_select';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -15,12 +14,16 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import { getDefaultQueryLanguage } from '../lib/get_default_query_language';
 import { QueryBarWrapper } from '../query_bar_wrapper';
 
+const RESET_STATE = {
+  filter: undefined,
+};
+
 export const SplitByFilter = (props) => {
   const { onChange, uiRestrictions, indexPattern } = props;
   const defaults = { filter: { language: getDefaultQueryLanguage(), query: '' } };
   const model = { ...defaults, ...props.model };
   const htmlId = htmlIdGenerator();
-  const handleSelectChange = createSelectHandler(onChange);
+
   return (
     <EuiFlexGroup alignItems="center">
       <EuiFlexItem>
@@ -35,7 +38,12 @@ export const SplitByFilter = (props) => {
         >
           <GroupBySelect
             value={model.split_mode}
-            onChange={handleSelectChange('split_mode')}
+            onChange={([{ value: newSplitMode = null }]) => {
+              onChange({
+                split_mode: newSplitMode,
+                ...RESET_STATE,
+              });
+            }}
             uiRestrictions={uiRestrictions}
           />
         </EuiFormRow>

diff --git a/src/plugins/vis_types/timeseries/public/application/components/splits/filters.js b/src/plugins/vis_types/timeseries/public/application/components/splits/filters.js
@@ -6,18 +6,20 @@
  * Side Public License, v 1.
  */
 
-import { createSelectHandler } from '../lib/create_select_handler';
 import { GroupBySelect } from './group_by_select';
 import { FilterItems } from './filter_items';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { htmlIdGenerator, EuiFlexGroup, EuiFlexItem, EuiFormRow } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 
+const RESET_STATE = {
+  split_filters: undefined,
+};
+
 export const SplitByFilters = (props) => {
   const { onChange, model, uiRestrictions, indexPattern } = props;
   const htmlId = htmlIdGenerator();
-  const handleSelectChange = createSelectHandler(onChange);
   return (
     <div>
       <EuiFlexGroup alignItems="center">
@@ -33,7 +35,12 @@ export const SplitByFilters = (props) => {
           >
             <GroupBySelect
               value={model.split_mode}
-              onChange={handleSelectChange('split_mode')}
+              onChange={([{ value: newSplitMode = null }]) => {
+                onChange({
+                  split_mode: newSplitMode,
+                  ...RESET_STATE,
+                });
+              }}
               uiRestrictions={uiRestrictions}
             />
           </EuiFormRow>

diff --git a/src/plugins/vis_types/timeseries/public/application/components/splits/terms.js b/src/plugins/vis_types/timeseries/public/application/components/splits/terms.js
@@ -30,6 +30,14 @@ import { STACKED_OPTIONS } from '../../visualizations/constants';
 import { getIndexPatternKey } from '../../../../common/index_patterns_utils';
 
 const DEFAULTS = { terms_direction: 'desc', terms_size: 10, terms_order_by: '_count' };
+const RESET_STATE = {
+  terms_field: undefined,
+  terms_include: undefined,
+  terms_exclude: undefined,
+  terms_direction: undefined,
+  terms_size: undefined,
+  terms_order_by: undefined,
+};
 
 export const SplitByTermsUI = ({
   onChange,
@@ -106,7 +114,12 @@ export const SplitByTermsUI = ({
           >
             <GroupBySelect
               value={model.split_mode}
-              onChange={handleSelectChange('split_mode')}
+              onChange={([{ value: newSplitMode = null }]) => {
+                onChange({
+                  split_mode: newSplitMode,
+                  ...RESET_STATE,
+                });
+              }}
               uiRestrictions={uiRestrictions}
             />
           </EuiFormRow>