De-angularize and EUI-ficate Discover Context control elements

[kertal]

Summary

Convert Discover's Context control elements to React, introducing EUI elements

Old Layout

New Layout

Note: I might adapt structure a bit when also the containing page is deangularized

Checklist

Use strikethroughs to remove checklist items you don't feel are applicable to this PR.

• This was checked for cross-browser compatibility, including a check against IE11
  - [ ] Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
  - [ ] Documentation was added for features that require explanation or tutorials
• Unit or functional tests were updated or added to match the most common scenarios
• This was checked for keyboard-only and screenreader accessibility

For maintainers

- [ ] This was checked for breaking API changes and was labeled appropriately

• This includes a feature addition or change that requires a release note and was labeled appropriately

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request

[elasticmachine]

Pinging @elastic/kibana-app

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request

[kertal]

there's another thing to be considered, every time you change the number, I request is triggered. but changing this would need a different design, like: you change the number, press return or another button is displayed to start the request

You could debounce the propagation of the input change, e.g. only fire a request if the user stopped typing for 500ms. But this is probably out of scope for this PR.

This should be done! But I think in another PR

no, let's debounce it, I've committed a suggestion. however, in the old version, the value was submitted, via RETURN or by leaving the field.

[elasticmachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request

[kertal]

The debouncing input approach would ease the problem of unwanted requests , but it would not solve it. this is especially a problem for the input at the bottom of the page, you start to type, pause a little, it just came to you mind that you don't need 10.000 records, to late, they were already requested. In the original version, the request was submitted on enter key or by leaving the input. I'd suggest to go with that pattern, and improve it a little by adding a button to submit the change (that's only displayed when the value was changed)

[flash1293]

I would prefer the user experience of a debounced input field, but that's a subjective opinion. Also as these requests just do a simple search fetching documents (no costly aggregations), it feels like this should be fine.

@ryankeairns what do you think?

[kertal]

@flash1293 I do agree that these are light requests, I just think the 'I changed my mind' situation on the bottom bar can't happen with the submit button solution:

Also like using enter keys :). But I think both ways of solving this problem are practicable.

[ryankeairns]

In this situation, I feel the 'on submit' (press enter or leave the input) is the expected trigger.

Unlike a search ahead (autocomplete) where I would expect each keystroke to refine the search, this feels like an instance where I want to type a number with certainty prior to submitting. I don't feel the extra icon button is necessary, either.

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request

[flash1293]

Really like your solution, @kertal 👍 Great work!

Just one little thing that should be fixed - if you clear the input and submit it, you get hit with a bunch of errors:

Should be a small fix.

[kertal]

Should be a small fix.

thx @flash1293! yes, I've added better checking for valid input between the range of MAX_CONTEXT_SIZE & MIN_CONTEXT_SIZE, and improved / deduplicated jest tests

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request

[flash1293]

LGTM, tested and works as expected. Great improvement! 👍