From e4624549646bf718db915d52685548ae4e8d5fa3 Mon Sep 17 00:00:00 2001
From: Nathan Reese <reese.nathan@gmail.com>
Date: Thu, 7 Feb 2019 07:43:57 -0700
Subject: [PATCH] EuiSuperDatePicker handle invalid start and end property
 values (#1544)

* EuiSuperDatePicker handle invalid start and end property values

* change log
---
 CHANGELOG.md                                   |  5 +----
 .../src/views/date_picker/super_date_picker.js | 18 ++++++++++++++++--
 .../date_popover/absolute_tab.js               |  2 +-
 .../date_popover/relative_tab.js               |  5 ++++-
 .../quick_select_popover/quick_select.js       |  4 ++--
 .../super_date_picker/super_date_picker.js     |  2 +-
 6 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 25a76adc31f..68933df4ace 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,14 +1,11 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `6.10.1`.
-
-## [`6.10.11`](https://github.com/elastic/eui/tree/6.10.11)
-
 **Note: this release is a backport containing changes originally made in `6.11.0`**
 
 **Bug fixes**
 
 - Fixed `EuiSuperDatePicker` crashing with negative relative value ([#1537](https://github.com/elastic/eui/pull/1537))
+- Fixed `EuiSuperDatePicker` crashing with invalid start and end prop values ([#1544](https://github.com/elastic/eui/pull/1544))
 
 ## [`6.10.0`](https://github.com/elastic/eui/tree/v6.10.0)
 
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 76d10cac7e6..d2ce91c4bbd 100644
--- a/src-docs/src/views/date_picker/super_date_picker.js
+++ b/src-docs/src/views/date_picker/super_date_picker.js
@@ -36,6 +36,18 @@ export default class extends Component {
     }, this.startLoading);
   }
 
+  onStartInputChange = e => {
+    this.setState({
+      start: e.target.value,
+    });
+  };
+
+  onEndInputChange = e => {
+    this.setState({
+      end: e.target.value,
+    });
+  };
+
   startLoading = () => {
     setTimeout(
       this.stopLoading,
@@ -74,17 +86,19 @@ export default class extends Component {
       <Fragment>
         <EuiFormRow
           label="start"
+          helpText="EuiSuperDatePicker should be resilient to invalid start values. Try to break it with unexpected values"
         >
           <EuiFieldText
-            readOnly
+            onChange={this.onStartInputChange}
             value={this.state.start}
           />
         </EuiFormRow>
         <EuiFormRow
           label="end"
+          helpText="EuiSuperDatePicker should be resilient to invalid end values. Try to break it with unexpected values"
         >
           <EuiFieldText
-            readOnly
+            onChange={this.onEndInputChange}
             value={this.state.end}
           />
         </EuiFormRow>
diff --git a/src/components/date_picker/super_date_picker/date_popover/absolute_tab.js b/src/components/date_picker/super_date_picker/date_popover/absolute_tab.js
index 2d76e942812..9be90b642eb 100644
--- a/src/components/date_picker/super_date_picker/date_popover/absolute_tab.js
+++ b/src/components/date_picker/super_date_picker/date_popover/absolute_tab.js
@@ -16,7 +16,7 @@ export class EuiAbsoluteTab extends Component {
     super(props);
 
     const parsedValue = dateMath.parse(props.value, { roundUp: props.roundUp });
-    const valueAsMoment = parsedValue ? parsedValue : moment();
+    const valueAsMoment = parsedValue && parsedValue.isValid() ? parsedValue : moment();
     this.state = {
       valueAsMoment,
       textInputValue: valueAsMoment.format(INPUT_DATE_FORMAT),
diff --git a/src/components/date_picker/super_date_picker/date_popover/relative_tab.js b/src/components/date_picker/super_date_picker/date_popover/relative_tab.js
index 240bc105e43..a6eec3617ec 100644
--- a/src/components/date_picker/super_date_picker/date_popover/relative_tab.js
+++ b/src/components/date_picker/super_date_picker/date_popover/relative_tab.js
@@ -55,7 +55,10 @@ export class EuiRelativeTab extends Component {
 
   render() {
     const isInvalid = this.state.count < 0;
-    const formatedValue = isInvalid ? '' : dateMath.parse(this.props.value).format(this.props.dateFormat);
+    const parsedValue = dateMath.parse(this.props.value);
+    const formatedValue = isInvalid || !parsedValue || !parsedValue.isValid()
+      ? ''
+      : parsedValue.format(this.props.dateFormat);
     return (
       <EuiForm className="euiDatePopoverContent__padded">
         <EuiFlexGroup gutterSize="s" responsive={false}>
diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/quick_select.js b/src/components/date_picker/super_date_picker/quick_select_popover/quick_select.js
index f86cd73f748..235803c4415 100644
--- a/src/components/date_picker/super_date_picker/quick_select_popover/quick_select.js
+++ b/src/components/date_picker/super_date_picker/quick_select_popover/quick_select.js
@@ -83,8 +83,8 @@ export class EuiQuickSelect extends Component {
     const startMoment = dateMath.parse(this.props.start);
     const endMoment = dateMath.parse(this.props.end, { roundUp: true });
     return {
-      min: startMoment ? startMoment : moment().subtract(15, 'minute'),
-      max: endMoment ? endMoment : moment(),
+      min: startMoment && startMoment.isValid() ? startMoment : moment().subtract(15, 'minute'),
+      max: endMoment && endMoment.isValid() ? endMoment : moment(),
     };
   }
 
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 6b987d6153c..8f4e1401c26 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
@@ -23,7 +23,7 @@ function isRangeInvalid(start, end) {
 
   const startMoment = dateMath.parse(start);
   const endMoment = dateMath.parse(end, { roundUp: true });
-  if (!startMoment || !endMoment) {
+  if (!startMoment || !endMoment || !startMoment.isValid() || !endMoment.isValid()) {
     return true;
   }
   if (startMoment.isAfter(endMoment)) {