From 65e032ba4f56002892b191d4ee3a00989743dac4 Mon Sep 17 00:00:00 2001
From: Nathan Reese <reese.nathan@gmail.com>
Date: Wed, 23 Jan 2019 15:58:39 -0700
Subject: [PATCH] EuiSuperDatePicker small changes (#1464)

* reset showPrettyDuration on new props

* pass interval on toogleRefresh

* clean up

* cleanup

* change log

* allow decimals in refreshInterval input

* avoid lodash round dependency

* merge with master
---
 CHANGELOG.md                                  |  6 +++++
 .../views/date_picker/super_date_picker.js    |  8 +++----
 .../quick_select_popover/refresh_interval.js  | 24 ++++++++++++-------
 .../super_date_picker/super_date_picker.js    |  1 +
 4 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 957cdce5275..d2abe1ffc91 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,12 @@
 - Re-added EuiI18n, EuiI18nNumber, and EuiContext for localization ([#1466](https://github.com/elastic/eui/pull/1466))
 - Set `type="button"` on accordion buttons ([#1468](https://github.com/elastic/eui/pull/1468))
 
+**Bug fixes**
+
+- Fixed `EuiSuperDatePicker` not updating derived `showPrettyDuration` state on prop update ([#1464](https://github.com/elastic/eui/pull/1464))
+- Fixed `EuiSuperDatePicker` not passing `refreshInterval` to callback when refresh internval start/stop toggle button clicked ([#1464](https://github.com/elastic/eui/pull/1464))
+- Fixed `EuiSuperDatePicker` `refreshInterval` input not allowing decimals ([#1464](https://github.com/elastic/eui/pull/1464))
+
 ## [`6.6.0`](https://github.com/elastic/eui/tree/v6.6.0)
 
 - Added `uptimeApp` icon ([#1445](https://github.com/elastic/eui/pull/1463))
diff --git a/src-docs/src/views/date_picker/super_date_picker.js b/src-docs/src/views/date_picker/super_date_picker.js
index b9bd254b90f..76d10cac7e6 100644
--- a/src-docs/src/views/date_picker/super_date_picker.js
+++ b/src-docs/src/views/date_picker/super_date_picker.js
@@ -47,11 +47,9 @@ export default class extends Component {
   }
 
   onRefreshChange = ({ isPaused, refreshInterval }) => {
-    this.setState((prevState) => {
-      return {
-        isPaused: isPaused == null ? prevState.isPaused : isPaused,
-        refreshInterval: refreshInterval == null ? prevState.refreshInterval : refreshInterval,
-      };
+    this.setState({
+      isPaused,
+      refreshInterval,
     });
   }
 
diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/refresh_interval.js b/src/components/date_picker/super_date_picker/quick_select_popover/refresh_interval.js
index 92ffa01bc8a..369bd2ce351 100644
--- a/src/components/date_picker/super_date_picker/quick_select_popover/refresh_interval.js
+++ b/src/components/date_picker/super_date_picker/quick_select_popover/refresh_interval.js
@@ -19,26 +19,35 @@ const refreshUnitsOptions = Object.keys(timeUnits)
 const MILLISECONDS_IN_MINUTE = 1000 * 60;
 const MILLISECONDS_IN_HOUR = MILLISECONDS_IN_MINUTE * 60;
 
-function convertMilliseconds(milliseconds) {
+function fromMilliseconds(milliseconds) {
+  function round(value) {
+    return parseFloat(value.toFixed(2));
+  }
   if (milliseconds > MILLISECONDS_IN_HOUR) {
     return {
       units: 'h',
-      value: milliseconds / MILLISECONDS_IN_HOUR
+      value: round(milliseconds / MILLISECONDS_IN_HOUR)
     };
   }
 
   return {
     units: 'm',
-    value: milliseconds / MILLISECONDS_IN_MINUTE
+    value: round(milliseconds / MILLISECONDS_IN_MINUTE)
   };
 }
 
+function toMilliseconds(units, value) {
+  return units === 'h'
+    ? Math.round(value * MILLISECONDS_IN_HOUR)
+    : Math.round(value * MILLISECONDS_IN_MINUTE);
+}
+
 export class EuiRefreshInterval extends Component {
 
   constructor(props) {
     super(props);
 
-    const { value, units } = convertMilliseconds(props.refreshInterval);
+    const { value, units } = fromMilliseconds(props.refreshInterval);
     this.state = {
       value,
       units,
@@ -46,7 +55,7 @@ export class EuiRefreshInterval extends Component {
   }
 
   onValueChange = (evt) => {
-    const sanitizedValue = parseInt(evt.target.value, 10);
+    const sanitizedValue = parseFloat(evt.target.value);
     this.setState({
       value: isNaN(sanitizedValue) ? '' : sanitizedValue,
     }, this.applyRefreshInterval);
@@ -63,9 +72,7 @@ export class EuiRefreshInterval extends Component {
       return;
     }
 
-    const valueInMilliSeconds = this.state.units === 'h'
-      ? this.state.value * MILLISECONDS_IN_HOUR
-      : this.state.value * MILLISECONDS_IN_MINUTE;
+    const valueInMilliSeconds = toMilliseconds(this.state.units, this.state.value);
 
     this.props.applyRefreshInterval({
       refreshInterval: valueInMilliSeconds,
@@ -75,6 +82,7 @@ export class EuiRefreshInterval extends Component {
 
   toogleRefresh = () => {
     this.props.applyRefreshInterval({
+      refreshInterval: toMilliseconds(this.state.units, this.state.value),
       isPaused: !this.props.isPaused
     });
   }
diff --git a/src/components/date_picker/super_date_picker/super_date_picker.js b/src/components/date_picker/super_date_picker/super_date_picker.js
index 444bc7dcf37..6d3123621d1 100644
--- a/src/components/date_picker/super_date_picker/super_date_picker.js
+++ b/src/components/date_picker/super_date_picker/super_date_picker.js
@@ -99,6 +99,7 @@ export class EuiSuperDatePicker extends Component {
         end: nextProps.end,
         isInvalid: false,
         hasChanged: false,
+        showPrettyDuration: showPrettyDuration(nextProps.start, nextProps.end, nextProps.commonlyUsedRanges),
       };
     }