[EuiSuperDatePicker] Allow the `Absolute` tab to accept standardized ISO 8601, RFC 2822, and Unix timestamps #7331

cee-chen · 2023-10-31T21:28:52Z

Summary

closes elastic/kibana#159098 (will take a week or two to reach Kibana main, however)

This PR uses Moment's String + Formats API to attempt to parse non-dateFormat user input with several standardized timestamp formats as a fallback. I recommend reviewing by commit as I added a few misc cleanup items along the way.

QA

Go to https://eui.elastic.co/pr_7331/#/templates/super-date-picker
Click the first example's Last 30 minutes text
Click the Absolute tab
Paste the following text into the start date input (sourced from https://www.unixtimestamp.com), and confirm they are all accepted and are correctly formatted to the expected output:
- 2023-10-31T23:12:10+00:00
- 2023-10-31T23:12:10Z
- Tue, 31 Oct 2023 23:12:10 +0000
- 1698793930
Type in gibberish (e.g. asdf) or an invalid date (e.g. Jan 1st) or an empty string, and confirm the input still flags these as invalid

General checklist

Browser QA
- Checked in Chrome, Safari, Edge, and Firefox
  ~~- [ ] Checked for accessibility including keyboard-only and screenreader modes~~
  ~~- [ ] Checked in both light and dark modes~~
  - [ ] Checked in mobile
Docs site QA - N/A - I skipped documenting this as there isn't really any existing docs in the first place for the input, and I think the error message covers this 🤔 But LMK if you disagree
Code quality checklist
- Added or updated jest ~~and cypress tests~~
Release checklist
- A changelog entry exists and is marked appropriately.
  ~~- [ ] If applicable, added the breaking change issue label (and filled out the breaking change checklist)~~
Designer checklist
~~- [ ] Updated the Figma library counterpart~~

…ndardized date formats

- per Moment's docs, the array API is significantly less performant, so let's avoid it unless there's no other option

tkajtoch · 2023-11-02T17:20:30Z

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

+const ALLOWED_USER_DATE_FORMATS = [
+  moment.ISO_8601,
+  moment.RFC_2822,
+  'X', // Unix timestamp in seconds


Could we also include 'x' here to support integer millisecond-precision timestamps? I'd say they're as common as floating point timestamps, and supporting them both when using moment is really easy

I tried adding both, and unfortunately Moment doesn't seem to be able to handle it :( It errors on one or the other depending on the order in which you put them in the array.

Oh no, that's unfortunate :( Let's leave it as is then!

tkajtoch

The code changes look great! I found one edge case I think we should address before merging this in: when typing a timestamp, RFC8601 or RFC2822 formatted dates by hand, they're converted to a moment date instance immediately and usually end up being interpreted as unix timestamps sometime around January 1970 (which is expected because the input contains a single digit that's being interpreted as a correct timestamp). I'm not sure we can rely on the change event for this anymore if we want to allow users to type the value manually instead of always pasting it into the field

cee-chen · 2023-11-02T17:59:33Z

Ahh good catch! I do wonder how many people are typing into that input by hand 😅

For unix timestamps, I'm tempted to add some logic that checks for a minimum number of digits in a row first before attempting to parse it as a timestamp. I highly doubt anyone is going to be trying to convert a timestamp for 1970

EDIT: Also I assume absolutely no one is going to be typing in unix timestamps by hand, or that will fail too unless we add some kind of debounce to wait until users are done typing. Maybe that's just the safer option all around

tkajtoch · 2023-11-02T18:09:38Z

@cee-chen lol yeah, typing unix timestamps seems a bit extreme, but typing ISO8601 is very realistic. I think we could omit interpreting values as timestamps if they're shorter than 10 digits. 1000000000 results in Sep 09 2001 which IMO is far enough to not be used frequently, even less so when typing the value by hand :D

cee-chen · 2023-11-02T18:27:39Z

I'm tempted to prefer the type debounce approach as it feels like it'll catch more edge cases around typing in general - e.g. for ISO 8601, the trailing +00:00 timezone is optional, but moment will immediately try to parse the non-timezone text (e.g. 2023-11-02T18:00:00) without waiting for the timezone to appear otherwise.

- it's being passed around for no reason when it's not even being used

cee-chen · 2023-11-02T19:33:31Z

Alrighty, d8c760a adds a 1 second debounce to typing. Feel free to pull the branch down or wait til staging updates to re-test. I went back and forth on the 1s timing but thought that felt like the best compromise for slower typers and not feeling like it wasn't responding at all 🤔

kibanamachine · 2023-11-02T19:58:57Z

Preview staging links for this PR:

Docs site: https://eui.elastic.co/pr_7331/
Storybook: https://eui.elastic.co/pr_7331/storybook

elasticmachine · 2023-11-02T19:59:00Z

💚 Build Succeeded

Buildkite Build
Commit: d8c760a

History

💚 Build #948 succeeded 1ade9f2
💔 Build #946 failed cd7e5b4

tkajtoch · 2023-11-02T20:50:11Z

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

@@ -84,26 +84,37 @@ export class EuiAbsoluteTab extends Component<
    });
  };

-  handleTextChange: ChangeEventHandler<HTMLInputElement> = (event) => {
+  debouncedTypeTimeout: ReturnType<typeof setTimeout> | undefined;


What a neat solution to the dual setTimeout typing issue :D

tkajtoch

Thank you for addressing the edge case! It looks and works great now 🎉

cee-chen · 2023-11-02T21:00:07Z

Thanks for the awesome review Tomasz!! ❤️

mjaggard · 2023-11-03T07:53:42Z

@cee-chen thanks, I'll look out for it.

By the way, my mother probably types slower than 1 character per second sometimes! Would it be possible to make sure that the number is long enough to look like a relatively modern timestamp? For example ensuring that it has more than 8 digits would only prevent converting dates before 1973.

I'm also concerned that a long debounce might prevent people from picking up on this feature.

mjaggard · 2023-11-03T07:56:46Z

Sorry I just read your comment around the other case of users not having finished typing the timezone when it suddenly converts so I agree the debounce is needed. Although maybe also avoiding converting dates before 1973 might be good too.

cee-chen · 2023-11-03T16:50:32Z

Those are some excellent points @mjaggard - after thinking about it a bit more, I think I lean away towards the need for a debounce at all and only attempting to parse dates on Enter keypress as opposed to on every input change. We can accomplish this well enough with text hints:

This approach should accommodate both slow and fast typers as well as copy/paste use cases well enough with just a single keypress, and additionally has the advantage of telling users the expected formats ahead of time instead of after error. Will open a new PR here for that shortly.

mjaggard · 2023-11-03T17:11:39Z

Sounds good. Can you also detect a paste event so that it's a single action to get a timestamp from a log file?

cee-chen · 2023-11-03T17:27:54Z

Sure, why not!

`v90.0.0`⏩`v91.0.0-backport.0` ⚠️ While this upgrade pings many teams and has a large code diff, **the majority of the changes are snapshots or tests-related** and do not touch source code, so should theoretically only need a code review and not dedicated QA. The changes in EUI that required a large swathe of these updates are: - **EuiPopover** removed an extra unnecessary `<div>` wrapper on its anchors, which affected many snapshots and a few CSS overrides, which should have been updated - **EuiButtonGroup** now renders `<button>` elements instead of `<input type="radio">` elements for single selection, which affected both snapshots and E2E tests - **EuiSuperDatePicker**'s absolute date input now requires an `Enter` keypress when parsing dates (affected E2E tests) - **EuiComboBox**, when rendered with `singleSelection={{ plainText: 'true' }}`, no longer renders a pill (i.e. text). This combobox type now behaves more like an `EuiFieldText`, where the selection is rendered via input `value` instead. This affected a high amount of E2E tests (both FTR and Cypress), both in terms of updating assertions and changing selections, but should **not** significantly affect user experience - see elastic/eui#7332 for more. --- ## [`v91.0.0-backport.0`](https://github.com/elastic/eui/tree/v91.0.0-backport.0) **This is a backport release only intended for use by Kibana.** - Added `esqlVis`, `pipeBreaks`, and `pipeNoBreaks` icon glyphs. - `EuiSelectable` now allows configurable text truncation via `listProps.truncationProps` ([#7388](elastic/eui#7388)) - `EuiTextTruncate` now supports a new `calculationDelayMs` prop for working around font loading or layout shifting scenarios ([#7388](elastic/eui#7388)) **Bug fixes** - Fixed a bug with `EuiSelectable`s with custom `truncationProps`, where scrollbar widths were not being accounted for ([#7392](elastic/eui#7392)) ## [`91.0.0`](https://github.com/elastic/eui/tree/v91.0.0) - Updated the background color of `EuiPopover`s in dark mode to increase visibility & contrast against other page/panel backgrounds ([#7310](elastic/eui#7310)) - Memoized `EuiDataGrid` to prevent unneeded re-renders ([#7324](elastic/eui#7324)) - Added a configurable `role` prop to `EuiAccordion` ([#7326](elastic/eui#7326)) - Added a configurable `role` prop to `EuiGlobalToastList` ([#7328](elastic/eui#7328)) - For greater flexibility, `EuiSuperDatePicker` now allows users to paste ISO 8601, RFC 2822, and Unix timestamps in the `Absolute` tab input, in addition to timestamps in the `dateFormat` prop ([#7331](elastic/eui#7331)) - Plain text `EuiComboBox`es now behave more like a normal text field/input. Backspacing will no longer delete the entire value, and selected values can now be double clicked and copied. ([#7332](elastic/eui#7332)) - `EuiDataGrid`'s display settings popover now allows users to clear the "Lines per row" input before typing in a new number ([#7338](elastic/eui#7338)) - Improved the UX of `EuiSuperDatePicker`'s Absolute tab for users manually typing in timestamps ([#7341](elastic/eui#7341)) - Updated `EuiI18n`s with multiple `tokens` to accept dynamic `values` ([#7341](elastic/eui#7341)) **Bug fixes** - Fixed `EuiComboBox`'s `onSearchChange` callback to pass the correct `hasMatchingOptions` value ([#7334](elastic/eui#7334)) - Fixed an `EuiSelectableTemplateSitewide` bug where the `popoverButton` behavior would break if passed a non-DOM React wrapper ([#7339](elastic/eui#7339)) **Deprecations** - `EuiPopover`: deprecated `anchorClassName`. Use `className` instead ([#7311](elastic/eui#7311)) - `EuiPopover`: deprecated `buttonRef`. Use `popoverRef` instead ([#7311](elastic/eui#7311)) - `EuiPopover`: removed extra `.euiPopover__anchor` div wrapper. Target `.euiPopover` instead if necessary ([#7311](elastic/eui#7311)) - Deprecated `EuiButtonGroup`'s `name` prop. This can safely be removed. ([#7325](elastic/eui#7325)) **Breaking changes** - Removed deprecated `euiPaletteComplimentary` - use `euiPaletteComplementary` Instead ([#7333](elastic/eui#7333)) **Accessibility** - Updated `type="single"` `EuiButtonGroup`s to render standard buttons instead of radio buttons under the hood, per recent a11y recommendations ([#7325](elastic/eui#7325)) - `EuiAccordion` now defaults to a less screenreader-noisy `group` role instead of `region`. If your accordion contains significant enough content to be a document landmark role, you may re-configure it back to `region`. ([#7326](elastic/eui#7326)) - Reduced screen reader noisiness when sorting `EuiDataGrid` columns via toolbar ([#7327](elastic/eui#7327)) - `EuiGlobalToastList` now defaults to a `log` role. If your toasts will always require immediate user action, consider (with caution) using the `alert` role instead. ([#7328](elastic/eui#7328)) **CSS-in-JS conversions** - Updated `$euiFontFamily` and `$euiCodeFontFamily` to match Emotion fonts ([#7332](elastic/eui#7332)) --------- Co-authored-by: Cee Chen <constance.chen@elastic.co> Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com> Co-authored-by: Stratoula Kalafateli <efstratia.kalafateli@elastic.co>

cee-chen added 5 commits October 31, 2023 16:37

[EuiSuperDatePicker] Allow the absolute tab to accept a few other sta…

f9732c5

…ndardized date formats

[perf][refactor] Avoid fallback formats earlier if possible

abb1648

- per Moment's docs, the array API is significantly less performant, so let's avoid it unless there's no other option

[misc] cleanup/nits

074bd86

Changelog

c3980ca

Fix tests failing on CI due to local timezone differences 🤦

b2b206f

cee-chen force-pushed the super-date-picker/format branch from cd7e5b4 to b2b206f Compare October 31, 2023 23:44

[docs] Add jsdoc defaults missing in props table

1ade9f2

cee-chen marked this pull request as ready for review November 1, 2023 00:14

cee-chen requested a review from a team as a code owner November 1, 2023 00:14

cee-chen requested a review from tkajtoch November 1, 2023 00:14

tkajtoch reviewed Nov 2, 2023

View reviewed changes

tkajtoch requested changes Nov 2, 2023

View reviewed changes

cee-chen added 3 commits November 2, 2023 11:33

Merge branch 'main' into super-date-picker/format

1aa1649

[misc types cleanup] Remove unnecessary event arg

a7eac5f

- it's being passed around for no reason when it's not even being used

Add debounce timeout to account for user typing

d8c760a

tkajtoch reviewed Nov 2, 2023

View reviewed changes

tkajtoch approved these changes Nov 2, 2023

View reviewed changes

cee-chen merged commit 3e26532 into elastic:main Nov 2, 2023
7 checks passed

cee-chen deleted the super-date-picker/format branch November 2, 2023 21:00

cee-chen mentioned this pull request Nov 2, 2023

Allow pasting timestamps into Start Date and End Date on discover page elastic/kibana#159098

Closed

cee-chen added the help wanted The EUI team is looking for community members to pick up and implement this issue label Nov 3, 2023

cee-chen mentioned this pull request Nov 3, 2023

[EuiSuperDatePicker] Improve Absolute tab input UX further #7341

Merged

11 tasks

cee-chen removed the help wanted The EUI team is looking for community members to pick up and implement this issue label Nov 5, 2023

tkajtoch mentioned this pull request Nov 7, 2023

Upgrade EUI to v91.0.0 (with backports) elastic/kibana#170716

Merged

cee-chen mentioned this pull request Nov 27, 2023

WIP elastic/kibana#172021

Closed

cee-chen mentioned this pull request Dec 7, 2023

[Unified search] Manually changing the date in the timepicker in JP errors out elastic/kibana#172340

Closed

This was referenced May 3, 2024

[EuiSuperDatePicker] Allow setting absolute dates without Enter key #7731

Closed

[EuiSuperDatePicker] Allow setting absolute dates without Enter key #7732

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[EuiSuperDatePicker] Allow the `Absolute` tab to accept standardized ISO 8601, RFC 2822, and Unix timestamps #7331

[EuiSuperDatePicker] Allow the `Absolute` tab to accept standardized ISO 8601, RFC 2822, and Unix timestamps #7331

cee-chen commented Oct 31, 2023 •

edited by tkajtoch

Loading

tkajtoch Nov 2, 2023

cee-chen Nov 2, 2023

tkajtoch Nov 2, 2023

tkajtoch left a comment

cee-chen commented Nov 2, 2023 •

edited

Loading

tkajtoch commented Nov 2, 2023

cee-chen commented Nov 2, 2023 •

edited

Loading

cee-chen commented Nov 2, 2023 •

edited

Loading

kibanamachine commented Nov 2, 2023

elasticmachine commented Nov 2, 2023

tkajtoch Nov 2, 2023

tkajtoch left a comment

cee-chen commented Nov 2, 2023

mjaggard commented Nov 3, 2023

mjaggard commented Nov 3, 2023

cee-chen commented Nov 3, 2023

mjaggard commented Nov 3, 2023

cee-chen commented Nov 3, 2023

[EuiSuperDatePicker] Allow the Absolute tab to accept standardized ISO 8601, RFC 2822, and Unix timestamps #7331

[EuiSuperDatePicker] Allow the Absolute tab to accept standardized ISO 8601, RFC 2822, and Unix timestamps #7331

Conversation

cee-chen commented Oct 31, 2023 • edited by tkajtoch Loading

Summary

QA

General checklist

tkajtoch Nov 2, 2023

Choose a reason for hiding this comment

cee-chen Nov 2, 2023

Choose a reason for hiding this comment

tkajtoch Nov 2, 2023

Choose a reason for hiding this comment

tkajtoch left a comment

Choose a reason for hiding this comment

cee-chen commented Nov 2, 2023 • edited Loading

tkajtoch commented Nov 2, 2023

cee-chen commented Nov 2, 2023 • edited Loading

cee-chen commented Nov 2, 2023 • edited Loading

kibanamachine commented Nov 2, 2023

elasticmachine commented Nov 2, 2023

💚 Build Succeeded

History

tkajtoch Nov 2, 2023

Choose a reason for hiding this comment

tkajtoch left a comment

Choose a reason for hiding this comment

cee-chen commented Nov 2, 2023

mjaggard commented Nov 3, 2023

mjaggard commented Nov 3, 2023

cee-chen commented Nov 3, 2023

mjaggard commented Nov 3, 2023

cee-chen commented Nov 3, 2023

[EuiSuperDatePicker] Allow the `Absolute` tab to accept standardized ISO 8601, RFC 2822, and Unix timestamps #7331

[EuiSuperDatePicker] Allow the `Absolute` tab to accept standardized ISO 8601, RFC 2822, and Unix timestamps #7331

cee-chen commented Oct 31, 2023 •

edited by tkajtoch

Loading

cee-chen commented Nov 2, 2023 •

edited

Loading

cee-chen commented Nov 2, 2023 •

edited

Loading

cee-chen commented Nov 2, 2023 •

edited

Loading