[EuiSuperDatePicker] relative tab, timestamp: Use roundUp, switch pos with "Round To" btn

[kertal]

Summary

So when you set e.g. 70 years ago in the To field of the date
range with "Round to the year" active, the To field's value is rounded
up. So instead of:

Jan 1, 1949 @ 00:00:00.000

It's

Jan 1, 1949 @ 23:59:59.999

Since now this date is less then 70 years in the past, moment.js fromNow
displays 69 years

Checklist

• This was checked in mobile
• This was checked in IE11
• This was checked in dark mode
  - [ ] Any props added have proper autodocs
  - [ ] Documentation examples were added
• A changelog entry exists and is marked appropriately
  - [ ] This was checked for breaking changes and labeled appropriately
  - [ ] Jest tests were updated or added to match the most common scenarios
  - [ ] This was checked against keyboard-only and screenreader scenarios
  - [ ] This required updates to Framer X components

[chandlerprall]

The text is displayed as _~ 69 years ago_ which is accurate, and better reflects the value after the Round to year modifier is applied. I think it would be disingenuous to users if we modify the display value.

@nreese any thoughts here?

[chandlerprall]

@cchaos your thoughts as well

[kertal]

Maybe it would be clearer if the rounding of the displayed date in the popover would equal the rounding of the To button's string

there was some user's confusion that led to this PR, here's the original issue in the kibana repo:
elastic/kibana#33432

[cchaos]

Making them the same I think it the most obvious step here. Also, I'd mov the rounding switch above the calculated date.

[nreese]

Rounding the to string is required. One example of where this is necessary is for date math strings. The quick range today is from: now/d and to: now/d. Without the round up on the to string, they are both the same time values.

https://github.com/elastic/kibana/blob/master/src/legacy/core_plugins/kibana/ui_setting_defaults.js#L797

[kertal]

So i've adapted the displayed timestamp in the Relative Tab. With the usage of the roundup prop it should be correct:

[kertal]

@cchaos that's the way it would look like when rounding switch would be rendered above calculated date.

[cchaos]

I'll defer to @nreese and @chandlerprall on the code side, but yes, I think it's worthwhile to move the switch to above the rendered(read only) date/time input. That way in both the absolute and relative, the rendered date/time is always at the bottom.

However it looks like the spacing is a bit off in your screenshot. If you push the code, I can tell you how to fix the spacing.

[cchaos]

Can you remove the EuiFormRow's from wrapping the readonly text and the switch? They're not providing anything but messing up some spacing. Then you can just some spacers like so:

<EuiSpacer size="s" />

<EuiSwitch ... />

<EuiSpacer size="m" />

<EuiFieldText ... />

Which should end up looking like this:

[cchaos]

LGTM, waiting for engineer to approve. You'll also need to add a CHANGELOG.md entry (just follow the pattern that is there and use past tense).

[nreese]

lgtm
code review, tested changes in chrome

[kertal]

retest

[kertal]

so i've added changelog, went over the checklist, so we're ready to merge?