EuiSuperDatePicker - safely handle negative relative times

CHANGELOG.md

@@ -5,6 +5,7 @@
 **Bug fixes**
 
 - Fixed `EuiSearchBar.Query` match_all query string must be `*` ([#1521](https://github.com/elastic/eui/pull/1521))
+- Fixed `EuiSuperDatePicker` crashing with negative relative value ([#1537](https://github.com/elastic/eui/pull/1537))
 
 ## [`6.10.0`](https://github.com/elastic/eui/tree/v6.10.0)
 

src/components/date_picker/super_date_picker/date_modes.js

@@ -21,7 +21,11 @@ export function getDateMode(value) {
 }
 
 export function toAbsoluteString(value, roundUp) {
-  return dateMath.parse(value, { roundUp }).toISOString();
+  const valueAsMoment = dateMath.parse(value, { roundUp });
+  if (!valueAsMoment) {
+    return value;
+  }
+  return valueAsMoment.toISOString();
 }
 
 

src/components/date_picker/super_date_picker/date_popover/absolute_tab.js

@@ -15,7 +15,8 @@ export class EuiAbsoluteTab extends Component {
   constructor(props) {
     super(props);
 
-    const valueAsMoment = dateMath.parse(props.value, { roundUp: props.roundUp });
+    const parsedValue = dateMath.parse(props.value, { roundUp: props.roundUp });
+    const valueAsMoment = parsedValue ? parsedValue : moment();
     this.state = {
       valueAsMoment,
       textInputValue: valueAsMoment.format(INPUT_DATE_FORMAT),

src/components/date_picker/super_date_picker/date_popover/relative_tab.js

@@ -47,23 +47,28 @@ export class EuiRelativeTab extends Component {
   };
 
   handleChange = () => {
-    if (this.state.count === '') {
+    if (this.state.count === '' || this.state.count < 0) {
       return;
     }
     this.props.onChange(toRelativeStringFromParts(this.state));
   }
 
   render() {
-    const formatedValue = dateMath.parse(this.props.value).format(this.props.dateFormat);
+    const isInvalid = this.state.count < 0;
+    const formatedValue = isInvalid ? '' : dateMath.parse(this.props.value).format(this.props.dateFormat);
     return (
       <EuiForm className="euiDatePopoverContent__padded">
         <EuiFlexGroup gutterSize="s" responsive={false}>
           <EuiFlexItem>
-            <EuiFormRow>
+            <EuiFormRow
+              isInvalid={isInvalid}
+              error={isInvalid ? 'Must be >= 0' : null}
+            >
               <EuiFieldNumber
                 aria-label="Count of"
                 value={this.state.count}
                 onChange={this.onCountChange}
+                isInvalid={isInvalid}
               />
             </EuiFormRow>
           </EuiFlexItem>

src/components/date_picker/super_date_picker/quick_select_popover/quick_select.js

@@ -80,9 +80,11 @@ export class EuiQuickSelect extends Component {
   }
 
   getBounds = () => {
+    const startMoment = dateMath.parse(this.props.start);
+    const endMoment = dateMath.parse(this.props.end, { roundUp: true });
     return {
-      min: dateMath.parse(this.props.start),
-      max: dateMath.parse(this.props.end, { roundUp: true }),
+      min: startMoment ? startMoment : moment().subtract(15, 'minute'),
+      max: endMoment ? endMoment : moment(),
     };
   }
 

src/components/date_picker/super_date_picker/super_date_picker.js

@@ -23,6 +23,9 @@ function isRangeInvalid(start, end) {
 
   const startMoment = dateMath.parse(start);
   const endMoment = dateMath.parse(end, { roundUp: true });
+  if (!startMoment || !endMoment) {
+    return true;
+  }
   if (startMoment.isAfter(endMoment)) {
     return true;
   }