[Lens] Improve time shift's "custom" interval discoverability

[ghudgins]

Describe the feature:
Revise the timeshift interval UX to make it more obvious you can enter custom values

Describe a specific use case for the feature:
When I am setting up a time shift in Lens for the first time
I need a more obvious way of discovering you can enter your own interval
And a more clear understanding of the interval syntax options (days, weeks, etc)
So I can avoid a false belief that time shift only works with the options in the combo dropdown (today)

@MichaelMarcialis says

The first thing that comes to mind as a potential improvement to the time offset UI would be to change the offset field to two fields: one for numeric offset and another as a selector for unit type (minute, hour, day, week, month, etc.).

Could also use an EUI form input prepend to display a minus symbol before the numeric offset input to indicate that it will always be a negative time offset (since that question came up in the demo too).

[elasticmachine]

Pinging @elastic/kibana-app (Team:KibanaApp)

[flash1293]

The first thing that comes to mind as a potential improvement to the time offset UI would be to change the offset field to two fields: one for numeric offset and another as a selector for unit type (minute, hour, day, week, month, etc.).

I see how it would help with discoverability, but it's loosing two nice properties of the current design:

• Offer a list of "good" shifts - this list is not arbitrary, it's the intervals the date histogram will pick as well and it's a good idea to stick with them if possible. I'm not sure how a two input form could achieve that
• Allows the user to enter a shift with a single change - we are using the two input form for the date histogram interval and I think it's very cumbersome to use. This is what mostly happens to me:
  • I'm thinking - hmm, this chart should use daily buckets
  • Open date histogram dimension flyout
  • Toggle switch "Use custom interval"
  • It shows 3 hours
  • Click on hours
  • Select dropdown opens
  • Click days
  • Chart reloads with 3 day buckets
  • Click on 3
  • Press backspace
  • Type 1
  • Desired chart loads
• This is how it could work:
  • I'm thinking - hmm, this chart should use daily buckets
  • Open date histogram dimension flyout
  • Toggle switch "Use custom interval"
  • Click on 3 hours
  • Type "1d"
  • Enter
  • Desired chart loads

[flash1293]

This is how the EUI combo box looks like - the only affordance hinting at custom options is the blinking cursor:

Maybe there's something else we could do at this level to make it more obvious typing is possible?

[ghudgins]

brainstorming: here's a cheaper option Time shift --> Type anything placeholder

[flash1293]

I like that @ghudgins - it won't "work" for the cases where a value is set already, but by then they should have learned how it works anyway.

[MichaelMarcialis]

I like the direction that @ghudgins' suggestion is going. Perhaps we can tweak it slightly to also account for the case that @flash1293 mentions (where a value is already set) by putting such assistive text in the helpText prop on the parent EuiFormRow component. Doing so would show the text regardless if a value is selected, and would also provide space to link to or explain the syntax, if need be.

Alternatively, if we feel that is too verbose or that users may miss it, we could also make this field a standard EuiSelect with all the suggested time shift options, plus a new "custom" option. Selecting this new "custom" option could then reveal those two inputs (one for supplying a number and another to select a unit of time). It requires more logic, but may be more bulletproof usability wise.

Thoughts on either of these?

[ghudgins]

Perhaps we can tweak it slightly to also account for the case that @flash1293 mentions (where a value is already set) by putting such assistive text in the helpText prop on the parent EuiFormRow component. Doing so would show the text regardless if a value is selected, and would also provide space to link to or explain the syntax, if need be.
sounds really good.

Nice like "Enter a time shift. Type to specify custom values (e.g. 8w)"

I like the first option better than the second because it's fewer interactions for returning users who know it already. I don't think we have to be overly verbose on this text. A help link or popover could be useful to fulfill that need.