[Discover] Create field_button and add popovers to sidebar #73226

andreadelrio · 2020-07-25T20:58:38Z

Summary

Created new shared component based on Lens' field_item called field_button. Includes improvements to a11y navigation
[Discover] Replaced accordions on sidebar with popovers. Implemented field_button.
[Lens] Implemented field_button.

Related to #41108

Checklist

Delete any items that are not applicable to this PR.

~~- [ ] 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
This renders correctly on smaller devices using a responsive layout. (You can test this in your browser
This was checked for cross-browser compatibility

For maintainers

This was checked for breaking API changes and was labeled appropriately

elasticmachine · 2020-07-28T15:55:19Z

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

kertal · 2020-07-30T13:12:18Z

@elasticmachine merge upstream

andreadelrio · 2020-08-12T18:08:08Z

@cchaos This currently breaks when the index pattern has fields of type unknown and I'll likely need Matthias help to fix it properly but this is how the design looks with icon buttons. You can use kibana_sample_data_logs to see it locally.

cchaos · 2020-08-13T17:19:15Z

@elasticmachine merge upstream

cchaos

Looks great to me! 🎉

I only had one comment on the state of showing the add/remove button when the button is active. Other than that and then getting CI to pass 👍

src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss

andreadelrio · 2020-08-16T23:52:40Z

@elasticmachine merge upstream

src/plugins/discover/public/application/components/sidebar/discover_field.tsx

…ibana into discover-popovers

andreadelrio · 2020-08-18T03:37:54Z

jenkins test this

src/plugins/discover/public/application/components/sidebar/discover_field.tsx

src/plugins/discover/public/application/components/sidebar/discover_field.test.tsx

kertal

Code LGTM, great work 🥳 , added some minor comments. Tested in Chrome 83, Firefox 79, Safari 13.1.2, no regression detected. there's a minor change in Lens that I've noticed, navigating the field list with tabs doesn't show the info icon:

cchaos · 2020-08-18T15:07:39Z

in Lens that I've noticed, navigating the field list with tabs doesn't show the info icon

I actually think that is ok. When purely focused, the info icon doesn't help much because it's based on a hover action. It would then just cause noise. I'm happy with it only appearing on hover.

kibanamachine · 2020-08-18T20:44:04Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: c2de18d

Build metrics

@kbn/optimizer bundle module count

id	value	diff	baseline
discover	265	+18	247
kibanaReact	294	+11	283
total		+29

async chunks size

id	value	diff	baseline
discover	436.4KB	+4.8KB	431.6KB

page load bundle size

id	value	diff	baseline
kibanaReact	642.1KB	+12.7KB	629.4KB
lens	853.5KB	-4.7KB	858.1KB
total		+8.0KB

History

💚 Build #68642 succeeded 26c46af
💔 Build #68326 failed cb2a892
💔 Build #68325 failed bc516d4
💔 Build #68228 failed 6aa13ee
💔 Build #67981 failed eda738e

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

…3226) Co-authored-by: Michail Yasonik <[email protected]> Co-authored-by: cchaos <[email protected]> Co-authored-by: Joe Reuter <[email protected]>

…75389) Co-authored-by: Andrea Del Rio <[email protected]> Co-authored-by: Michail Yasonik <[email protected]> Co-authored-by: cchaos <[email protected]> Co-authored-by: Joe Reuter <[email protected]>

* master: (112 commits) [Ingest Manager] Fix agent config rollout rate limit to use constants (elastic#75364) Update Node.js to version 10.22.0 (elastic#75254) [ML] Anomaly Explorer / Single Metric Viewer: Fix error reporting for annotations. (elastic#74953) [Discover] Fix histogram cloud tests (elastic#75268) Uiactions to navigate to visualize or maps (elastic#74121) Use prefix search invis editor field/agg combo box (elastic#75290) Fix docs in trigger alerting UI (elastic#75363) [SIEM] Fixes search bar Cypress test (elastic#74833) Add libnss3.so to Dockerfile template (reporting) (elastic#75370) [Discover] Create field_button and add popovers to sidebar (elastic#73226) [Reporting] Network Policy: Do not throw from the intercept handler (elastic#75105) [Reporting] Increase capture.timeouts.openUrl to 1 minute (elastic#75207) Allow routes to specify the idle socket timeout in addition to the payload timeout (elastic#73730) [src/dev/build] remove node-version from snapshots (elastic#75303) [ENDPOINT] Reintroduced tabs to endpoint management and migrated pages to use common security components (elastic#74886) [Canvas] Remove dependency on legacy expressions APIs (elastic#74885) Skip failing test in CI (elastic#75266) [Task Manager] time out work when it overruns in poller (elastic#74980) [Drilldowns] misc improvements & fixes (elastic#75276) Small README note on bumping memory for builds (elastic#75247) ...

* Add Jest test removed in #73226

* Add Jest test removed in elastic#73226

* Add Jest test removed in #73226

andreadelrio added 15 commits July 7, 2020 16:07

cleanup of fielditem with accordions

19747a5

clean sass and update tests

19ccf91

bring back useShortDots, accidentally deleted

447c72d

first pass on making the switch to popovers

0350653

popover title

21d9901

fix conflicts

2d489fc

Merge remote-tracking branch 'upstream/master' into discover-popovers

550869f

field button in progress

4ff26c8

moving styles around

eec4031

will add size to field_button

7a6bfad

added size to field_button

c2d8ea2

some progress on tests

e72dfb1

more tests

b02a777

cleanup

bec896f

fixing some tests

81a70ea

andreadelrio changed the title ~~[Discover] Add popovers to sidebar~~ [Discover] Create field_button and add popovers to sidebar Jul 28, 2020

andreadelrio marked this pull request as ready for review July 28, 2020 15:53

andreadelrio requested a review from a team July 28, 2020 15:53

andreadelrio requested review from a team as code owners July 28, 2020 15:53

andreadelrio added release_note:skip Skip the PR/issue when compiling release notes v8.0.0 v7.10.0 Feature:Discover Discover Application Team:Visualizations Visualization editors, elastic-charts and infrastructure labels Jul 28, 2020

andreadelrio added the Feature:Lens label Jul 28, 2020

kertal self-requested a review July 29, 2020 06:28

add EuiKeyboardAccessible to Discover's sidebar

388ff29

andreadelrio force-pushed the discover-popovers branch from 1350666 to c390b71 Compare August 11, 2020 21:07

elasticmachine and others added 3 commits August 13, 2020 11:19

Merge branch 'master' into discover-popovers

eda738e

fix aria-labels and add tooltips

eee6c07

Merge remote-tracking branch 'upstream/master' into discover-popovers

6aa13ee

cchaos approved these changes Aug 14, 2020

View reviewed changes

src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss Outdated Show resolved Hide resolved

show add icon for active items in Discover

bc516d4

Merge branch 'master' into discover-popovers

cb2a892

kertal reviewed Aug 17, 2020

View reviewed changes

src/plugins/discover/public/application/components/sidebar/discover_field.tsx Show resolved Hide resolved

andreadelrio added 2 commits August 17, 2020 11:00

show DiscoverFieldDetails only when infoIsOpen

e1bbcdb

Merge branch 'discover-popovers' of https://github.com/andreadelrio/k…

26c46af

…ibana into discover-popovers

kertal mentioned this pull request Aug 18, 2020

Uiactions to navigate to visualize or maps #74121

Merged

3 tasks

kertal reviewed Aug 18, 2020

View reviewed changes

src/plugins/discover/public/application/components/sidebar/discover_field.tsx Outdated Show resolved Hide resolved

kertal reviewed Aug 18, 2020

View reviewed changes

src/plugins/discover/public/application/components/sidebar/discover_field.test.tsx Show resolved Hide resolved

kertal approved these changes Aug 18, 2020

View reviewed changes

remove extra markup

c2de18d

andreadelrio merged commit 245c0a3 into elastic:master Aug 18, 2020

kertal mentioned this pull request Aug 19, 2020

[7.x] [Discover] Create field_button and add popovers to sidebar (#73226) #75389

Merged

kertal mentioned this pull request Aug 31, 2020

[Discover] Add sidebar jest test #76286

Merged

1 task

kertal added a commit that referenced this pull request Sep 1, 2020

[Discover] Add sidebar jest test (#76286)

27bdc88

* Add Jest test removed in #73226

kertal added a commit to kertal/kibana that referenced this pull request Sep 1, 2020

[Discover] Add sidebar jest test (elastic#76286)

d561245

* Add Jest test removed in elastic#73226

kertal added a commit that referenced this pull request Sep 1, 2020

[Discover] Add sidebar jest test (#76286) (#76370)

1ba225f

* Add Jest test removed in #73226

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Discover] Create field_button and add popovers to sidebar #73226

[Discover] Create field_button and add popovers to sidebar #73226

andreadelrio commented Jul 25, 2020 •

edited

Loading

elasticmachine commented Jul 28, 2020

kertal commented Jul 30, 2020

andreadelrio commented Aug 12, 2020

cchaos commented Aug 13, 2020

cchaos left a comment

andreadelrio commented Aug 16, 2020

andreadelrio commented Aug 18, 2020

kertal left a comment

cchaos commented Aug 18, 2020

kibanamachine commented Aug 18, 2020

[Discover] Create field_button and add popovers to sidebar #73226

[Discover] Create field_button and add popovers to sidebar #73226

Conversation

andreadelrio commented Jul 25, 2020 • edited Loading

Summary

Checklist

For maintainers

elasticmachine commented Jul 28, 2020

kertal commented Jul 30, 2020

andreadelrio commented Aug 12, 2020

cchaos commented Aug 13, 2020

cchaos left a comment

Choose a reason for hiding this comment

andreadelrio commented Aug 16, 2020

andreadelrio commented Aug 18, 2020

kertal left a comment

Choose a reason for hiding this comment

cchaos commented Aug 18, 2020

kibanamachine commented Aug 18, 2020

💚 Build Succeeded

Build metrics

@kbn/optimizer bundle module count

async chunks size

page load bundle size

History

andreadelrio commented Jul 25, 2020 •

edited

Loading