Fix SuperDatePicker isPaused prop update. (elastic#2250)

Fixes a bug where a prop change of isPaused for SuperDatePicker is not reflected in the refresh interval.

CHANGELOG.md

@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `13.5.0`.
+- Fixed `EuiSuperDatePicker` to update `asyncInterval.isStopped` on a `isPaused` prop change. ([#2250](https://github.com/elastic/eui/pull/2250))
 
 ## [`13.5.0`](https://github.com/elastic/eui/tree/v13.5.0)
 

src/components/date_picker/super_date_picker/super_date_picker.js

@@ -192,6 +192,14 @@ export class EuiSuperDatePicker extends Component {
     }
   };
 
+  componentDidUpdate = () => {
+    if (this.props.isPaused) {
+      this.stopInterval();
+    } else {
+      this.startInterval(this.props.refreshInterval);
+    }
+  };
+
   componentWillUnmount = () => {
     this.stopInterval();
   };

src/components/date_picker/super_date_picker/super_date_picker.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { mount, shallow } from 'enzyme';
 
 import { EuiSuperDatePicker } from './super_date_picker';
 
@@ -11,4 +11,43 @@ describe('EuiSuperDatePicker', () => {
 
     expect(component).toMatchSnapshot();
   });
+
+  test('refresh is disabled by default', () => {
+    // By default we expect `asyncInterval` to be not set.
+    const componentPaused = mount(<EuiSuperDatePicker onTimeChange={noop} />);
+    const instancePaused = componentPaused.instance();
+    expect(instancePaused.asyncInterval).toBe(undefined);
+    expect(componentPaused.prop('isPaused')).toBe(true);
+  });
+
+  test('updates refresh interval on isPaused prop update', () => {
+    // If refresh is enabled via `isPaused/onRefresh` we expect
+    // `asyncInterval` to be present and `asyncInterval.isStopped` to be `false`.
+    const onRefresh = jest.fn();
+    const componentRefresh = mount(
+      <EuiSuperDatePicker
+        onTimeChange={noop}
+        isPaused={false}
+        onRefresh={onRefresh}
+      />
+    );
+    const instanceRefresh = componentRefresh.instance();
+    expect(typeof instanceRefresh.asyncInterval).toBe('object');
+    expect(instanceRefresh.asyncInterval.isStopped).toBe(false);
+    expect(componentRefresh.prop('isPaused')).toBe(false);
+
+    // If we update the prop `isPaused` we expect the interval to be stopped too.
+    componentRefresh.setProps({ isPaused: true });
+    const instanceUpdatedPaused = componentRefresh.instance();
+    expect(typeof instanceUpdatedPaused.asyncInterval).toBe('object');
+    expect(instanceUpdatedPaused.asyncInterval.isStopped).toBe(true);
+    expect(componentRefresh.prop('isPaused')).toBe(true);
+
+    // Let's start refresh again for a final sanity check.
+    componentRefresh.setProps({ isPaused: false });
+    const instanceUpdatedRefresh = componentRefresh.instance();
+    expect(typeof instanceUpdatedRefresh.asyncInterval).toBe('object');
+    expect(instanceUpdatedRefresh.asyncInterval.isStopped).toBe(false);
+    expect(componentRefresh.prop('isPaused')).toBe(false);
+  });
 });