From 87f944cd89f63b2888e010d192f9a54fd5975aab Mon Sep 17 00:00:00 2001
From: Matthias Wilhelm <matthias.wilhelm@elastic.co>
Date: Fri, 26 Apr 2019 09:22:46 +0200
Subject: [PATCH] [EuiSuperDatePicker] relative tab, timestamp: Use roundUp,
 switch pos with "Round To"  btn (#1827)

Add roundUp flag to displayed value of timestamp in relative tab to sync displayed value with the value displayed in the popover button

Switch position of "Round to the X" button and timestamp string
---
 CHANGELOG.md                                  |  2 ++
 .../date_popover/date_popover_content.js      |  1 +
 .../date_popover/relative_tab.js              | 24 +++++++++----------
 3 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 319fa5a9a7c..7c1e99ef036 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,8 @@
 - Converted `EuiOverlayMask` to TS ([#1858](https://github.com/elastic/eui/pull/1858))
 - Converted `EuiStat` to TS ([#1848](https://github.com/elastic/eui/pull/1848))
 - Added `isLoading` prop to `EuiStat` ([#1848](https://github.com/elastic/eui/pull/1848))
+- Added `roundUp` prop to relative tab of `EuiSuperDatePicker` ([#1827](https://github.com/elastic/eui/pull/1827))
+- Changed position of `EuiSwitch` for date rounding used at relative tab of `EuiSuperDatePicker` ([#1827](https://github.com/elastic/eui/pull/1827))
 
 **Bug fixes**
 
diff --git a/src/components/date_picker/super_date_picker/date_popover/date_popover_content.js b/src/components/date_picker/super_date_picker/date_popover/date_popover_content.js
index 75e6482da3f..0ea4c7a56c2 100644
--- a/src/components/date_picker/super_date_picker/date_popover/date_popover_content.js
+++ b/src/components/date_picker/super_date_picker/date_popover/date_popover_content.js
@@ -52,6 +52,7 @@ export function EuiDatePopoverContent({ value, roundUp, onChange, dateFormat })
             dateFormat={dateFormat}
             value={value}
             onChange={onChange}
+            roundUp={roundUp}
           />
         ),
         'data-test-subj': 'superDatePickerRelativeTab',
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 311838443f8..c810b5baa09 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
@@ -12,6 +12,7 @@ import {
   EuiFieldText,
   EuiSwitch
 } from '../../../form';
+import { EuiSpacer } from '../../../spacer';
 
 import { timeUnits } from '../time_units';
 import { relativeOptions } from '../relative_options';
@@ -55,7 +56,7 @@ export class EuiRelativeTab extends Component {
 
   render() {
     const isInvalid = this.state.count < 0;
-    const parsedValue = dateMath.parse(this.props.value);
+    const parsedValue = dateMath.parse(this.props.value, { roundUp: this.props.roundUp });
     const formatedValue = isInvalid || !parsedValue || !parsedValue.isValid()
       ? ''
       : parsedValue.format(this.props.dateFormat);
@@ -87,17 +88,15 @@ export class EuiRelativeTab extends Component {
             </EuiFormRow>
           </EuiFlexItem>
         </EuiFlexGroup>
-        <EuiFormRow>
-          <EuiFieldText value={formatedValue} readOnly />
-        </EuiFormRow>
-        <EuiFormRow>
-          <EuiSwitch
-            data-test-subj={`superDatePickerRelativeDateRoundSwitch`}
-            label={`Round to the ${timeUnits[this.state.unit.substring(0, 1)]}`}
-            checked={this.state.round}
-            onChange={this.onRoundChange}
-          />
-        </EuiFormRow>
+        <EuiSpacer size="s" />
+        <EuiSwitch
+          data-test-subj={`superDatePickerRelativeDateRoundSwitch`}
+          label={`Round to the ${timeUnits[this.state.unit.substring(0, 1)]}`}
+          checked={this.state.round}
+          onChange={this.onRoundChange}
+        />
+        <EuiSpacer size="m" />
+        <EuiFieldText value={formatedValue} readOnly />
       </EuiForm>
     );
   }
@@ -107,4 +106,5 @@ EuiRelativeTab.propTypes = {
   dateFormat: PropTypes.string.isRequired,
   value: PropTypes.string.isRequired,
   onChange: PropTypes.func.isRequired,
+  roundUp: PropTypes.bool,
 };