Refactor time_filter (#31641) (#31852)

Fixes time_filter state

Removed console logs

Cleaned up changes

Removed unused prop in time_filter

Moved propTypes

Fixed bug with changing columns

Added comment

x-pack/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_filter/index.js

@@ -4,9 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { compose, withState } from 'recompose';
-import { TimeFilter as Component } from './time_filter';
-
-export const TimeFilter = compose(withState('filter', 'setFilter', ({ filter }) => filter))(
-  Component
-);
+export { TimeFilter } from './time_filter';

x-pack/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_filter/time_filter.js

@@ -4,38 +4,62 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { get } from 'lodash';
 import { fromExpression } from '@kbn/interpreter/common';
 import { TimePicker } from '../time_picker';
 import { TimePickerMini } from '../time_picker_mini';
 
-export const TimeFilter = ({ compact, filter, setFilter, commit }) => {
-  const ast = fromExpression(filter);
+export class TimeFilter extends Component {
+  static propTypes = {
+    filter: PropTypes.string,
+    commit: PropTypes.func, // Canvas filter
+    compact: PropTypes.bool,
+  };
 
-  const from = get(ast, 'chain[0].arguments.from[0]');
-  const to = get(ast, 'chain[0].arguments.to[0]');
-  const column = get(ast, 'chain[0].arguments.column[0]');
+  state = {
+    filter: this.props.filter,
+  };
 
-  function doSetFilter(from, to) {
+  shouldComponentUpdate(nextProps, nextState) {
+    const nextPropsColumn = get(fromExpression(nextProps.filter), 'chain[0].arguments.column[0]');
+    const ast = fromExpression(this.state.filter);
+    const from = get(ast, 'chain[0].arguments.from[0]');
+    const to = get(ast, 'chain[0].arguments.to[0]');
+    const column = get(ast, 'chain[0].arguments.column[0]');
+
+    // if the column in the prop filter changes, we need to update the column in state
+    // while preserving the date ranges in state
+    if (column !== nextPropsColumn) {
+      this.setFilter(nextPropsColumn)(from, to);
+      return true;
+    }
+
+    return this.state.filter !== nextState.filter;
+  }
+
+  setFilter = column => (from, to) => {
+    const { commit } = this.props;
     const filter = `timefilter from="${from}" to=${to} column=${column}`;
 
     // TODO: Changes to element.filter do not cause a re-render
-    setFilter(filter);
-    commit(filter);
-  }
+    if (filter !== this.state.filter) {
+      this.setState({ filter });
+      commit(filter);
+    }
+  };
 
-  if (compact) {
-    return <TimePickerMini from={from} to={to} onSelect={doSetFilter} />;
-  } else {
-    return <TimePicker from={from} to={to} onSelect={doSetFilter} />;
-  }
-};
+  render() {
+    const ast = fromExpression(this.state.filter);
+    const from = get(ast, 'chain[0].arguments.from[0]');
+    const to = get(ast, 'chain[0].arguments.to[0]');
+    const column = get(ast, 'chain[0].arguments.column[0]');
 
-TimeFilter.propTypes = {
-  filter: PropTypes.string,
-  setFilter: PropTypes.func, // Local state
-  commit: PropTypes.func, // Canvas filter
-  compact: PropTypes.bool,
-};
+    if (this.props.compact) {
+      return <TimePickerMini from={from} to={to} onSelect={this.setFilter(column)} />;
+    } else {
+      return <TimePicker from={from} to={to} onSelect={this.setFilter(column)} />;
+    }
+  }
+}

x-pack/plugins/canvas/canvas_plugin_src/renderers/time_filter/index.js

@@ -14,7 +14,7 @@ export const timeFilter = () => ({
   name: 'time_filter',
   displayName: 'Time filter',
   help: 'Set a time window',
-  reuseDomNode: false,
+  reuseDomNode: true, // must be true, otherwise filters get reset when re-rendered
   render(domNode, config, handlers) {
     const ast = fromExpression(handlers.getFilter());