Upgrade EUI to v92.1.1 by cee-chen · Pull Request #174955 · elastic/kibana

cee-chen · 2024-01-16T19:32:02Z

v92.0.0-backport.0⏩ v92.1.1

`v92.1.1`

Bug fixes

Minor EuiDataGrid cell performance fixes (#7465)

`v92.1.0`

Updated EuiResizableButton to allow customizing the indicator style with either handle (default) or border (#7455)
Enhanced EuiResizableContainer to preserve the drag/resize event when the user's mouse leaves the parent container and re-enters (#7456)

Bug fixes

Fixed an EuiTreeView JSX Typescript error (#7452)
Fixed a color console warning being generated by disabled EuiSteps (#7454)

Accessibility

EuiDataGrid's keyboard/screenreader experience has been tweaked to be more consistent for varying complex data: (#7448)
- Headers are now always navigable by arrow key, regardless of whether the header cells contain interactive content
- Non-expandable cells containing any amount of interactive content now must be entered via Enter or F2 keypress
- Expandable cells continue to be toggled via Enter or F2 keypress
EuiDataGrid now provides a direct screen reader hint for Enter key behavior for expandable & interactive cells (#7448)

- replace event to make grid row cell visible - focus event now handled by a separate subcomponent, which enzyme simulate doesn't know about

- Cypress is now being flaky about these clicks

- flex was being weird, `height: auto` was needed instead of `100%` - use `alignIndicator="start"` to keep the drag handle nearish to the collapse button

+ rename hack - The behavior works fine now with the event listeners, but it's a bit smoother even with the overlay, so I think keeping it makes sense

Request from Davis - use useLatest to make callback gotcha clearer to Kibana devs

patrykkopycinski · 2024-01-22T19:41:10Z

/ci

cee-chen · 2024-01-22T19:54:32Z

@patrykkopycinski going to rebase latest to drop an unrelated commit as a heads up!

- not sure why they're failing/timing out with the previous clicks, likely same Cypress race condition weirdness as previous commits

cee-chen · 2024-01-22T21:16:16Z

/ci

cee-chen · 2024-01-22T23:23:50Z

packages/kbn-resizable-layout/src/panels_resizable.tsx

-    }
+  // The resize overlay makes it so that other mouse events (e.g. tooltip hovers, etc)
+  // don't occur when mouse dragging
+  const [isResizing, setIsResizing] = useState(false);


@davismcphee I'm hoping you can approve/review these changes to the package/Discover layout since we've been discussing this last week! 🙏 Please do let me know if you find any issues or aren't a huge fan of the renames, etc.

The changes look and work great, thanks! The renames/cleanups look good too, and I like that the window listener approach means we no longer have to work around react-reverse-portal swallowing our events (but keeping the overlay for tooltips, etc. makes sense).

cee-chen · 2024-01-22T23:34:46Z

src/plugins/vis_default_editor/public/default_editor.tsx

              </EuiResizablePanel>

              <EuiResizableButton
+                alignIndicator="start"


@elastic/kibana-visualizations I noticed while doing a quick grep through Kibana for <EuiResizableButton> usages that this button was slightly broken in production due to flex display issues. I fixed this with a height .scss change and added this indicator alignment prop to match production.

Before After

Thanx Cee! I really appreciate it

stratoula

Vis team changes LGTM!

tomsonpl

Thanks for the changes, I love the dataGrid so I am very excited to see the improvements ❤️
Left a few questions :)

tomsonpl · 2024-01-23T10:35:50Z

x-pack/plugins/osquery/cypress/tasks/saved_queries.ts

-        cy.getBySel('dataGridHeaderCell-osquery.disk_bytes_written.number').click();
-
-        cy.contains(/Hide column$/).click();
+        cy.getBySel('dataGridColumnSelectorButton').click();


So the current behavior doesn't require clicking the header first then 'Hide column' button ? But instead using a specific selector?

Yes, see above - for some reason trying to click the header cell actions was timing out Cypress (I could reproduce this locally, although I honestly have no idea why it was happening) and causing Chrome Renderer crashes. So I opted to use the selector toolbar button instead. EUI already has its own component Cypress tests for hiding columns via the header actions buttons, so hopefully we would catch any regressions around that UX ourselves before they ever reach Kibana.

tomsonpl · 2024-01-23T10:35:59Z

x-pack/plugins/osquery/cypress/tasks/saved_queries.ts

        // sorting
-        cy.getBySel('dataGridHeaderCell-osquery.egid').click();
-
+        cy.getBySel('dataGridHeaderCellActionButton-osquery.egid').click({ force: true });


Why do we need force ?

Cypress was being really flaky about these clicks (I'm not totally sure why as they work just fine in production, I think it's either layout settling or rerenders due to how fast it "clicks" things). CI was consistently failing for me without the force: true. If you can get it working in the future with another approach (e.g. a wait or a real click?) feel free to refactor this in the future!

davismcphee

Tested locally, and the Data Discovery changes LGTM 👍 It's great that the border resize indicator is officially supported by EUI now.

davismcphee · 2024-01-24T03:10:31Z

packages/kbn-resizable-layout/src/panels_resizable.tsx

-    }
+  // The resize overlay makes it so that other mouse events (e.g. tooltip hovers, etc)
+  // don't occur when mouse dragging
+  const [isResizing, setIsResizing] = useState(false);


The changes look and work great, thanks! The renames/cleanups look good too, and I like that the window listener approach means we no longer have to work around react-reverse-portal swallowing our events (but keeping the overlay for tooltips, etc. makes sense).

kibana-ci · 2024-01-24T21:29:44Z

💛 Build succeeded, but was flaky

Buildkite Build
Commit: 54262d0

Failed CI Steps

Investigations - Security Solution Cypress Tests #7

Test Failures

[job] [logs] Investigations - Security Solution Cypress Tests #7 / Basic esql search and filter operations "before each" hook for "should remove the query when the back button is pressed after adding a query" "before each" hook for "should remove the query when the back button is pressed after adding a query"

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`discover`	699	700	+1
`unifiedHistogram`	109	110	+1
total			+2

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`discover`	564.6KB	564.8KB	+201.0B
`unifiedHistogram`	69.4KB	69.6KB	+199.0B
`visDefaultEditor`	142.2KB	142.3KB	+87.0B
total			+487.0B

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
`core`	384.1KB	384.4KB	+340.0B
`kbnUiSharedDeps-css`	250.4KB	250.3KB	-125.0B
`kbnUiSharedDeps-npmDll`	6.2MB	6.2MB	-655.0B
`kbnUiSharedDeps-srcJs`	2.3MB	2.3MB	+1.0B
total			-439.0B

History

💔 Build #189082 failed 71ef042
💔 Build #189071 failed 8435765
💔 Build #189043 failed 7fd36a9
💛 Build #188621 was flaky c63770e
💚 Build #188613 succeeded f4f209f

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

* main: (520 commits) Update Kibana code editor dependencies (#171720) [SLOs] Hide view in app in slo alerts table in slo details page (#175441) [api-docs] 2024-01-25 Daily api_docs build (#175502) [DOCS] Add buildkite links to doc preview comments (#175463) skip flaky suite (#175443) [Security Solution][Timeline] refactor timeline modal save timeline button (#175343) [RAM] Stack Management::Rules loses user selections when navigating back (#174954) [Security Solution][Timeline] refactor timeline modal attach to case button (#175163) Upgrade EUI to v92.1.1 (#174955) [Fleet]: Beta label is shown inconsistently while selecting proxy under Fleet settings. (#170634) [Cloud Security] Rules Combo Box filters Custom component (#175175) skip flaky suite (#175407) [Security Solution][Timeline] refactor timeline modal open timeline button (#175335) [Embedded Console] Introduce kbnSolutionNavOffset CSS variable (#175348) [Console] disable access to embedded console without dev tools capability (#175321) fix(x-pack/reporting): use FIPS-compliant ID generator `uuidv4` in Reporting plugin (#174809) [Security Solution] Data quality dashboard persistence (#173185) [RAM][Observability] Add alert fields table to Observability flyout (#174685) test: add missing await for connector table disappearance (#175430) [RAM][Maintenance Window] Fix maintenance window FE types and transforms (#173888) ...

…76030) ## Summary This PR reverts the `onResizeEnd` stable callback workaround introduced in #174955 to account for an EUI bug now that elastic/eui#7468 has been merged and Kibana was upgraded to v92.2.1 in #175849. ### Checklist - [ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [ ] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [ ] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)) - [ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker) - [ ] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [ ] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) ### For maintainers - [ ] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

…astic#176030) ## Summary This PR reverts the `onResizeEnd` stable callback workaround introduced in elastic#174955 to account for an EUI bug now that elastic/eui#7468 has been merged and Kibana was upgraded to v92.2.1 in elastic#175849. ### Checklist - [ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [ ] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [ ] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)) - [ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker) - [ ] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [ ] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) ### For maintainers - [ ] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

`v92.0.0-backport.0`⏩ `v92.1.1` --- ## [`v92.1.1`](https://github.com/elastic/eui/releases/v92.1.1) **Bug fixes** - Minor `EuiDataGrid` cell performance fixes ([elastic#7465](elastic/eui#7465)) ## [`v92.1.0`](https://github.com/elastic/eui/releases/v92.1.0) - Updated `EuiResizableButton` to allow customizing the `indicator` style with either `handle` (default) or `border` ([elastic#7455](elastic/eui#7455)) - Enhanced `EuiResizableContainer` to preserve the drag/resize event when the user's mouse leaves the parent container and re-enters ([elastic#7456](elastic/eui#7456)) **Bug fixes** - Fixed an `EuiTreeView` JSX Typescript error ([elastic#7452](elastic/eui#7452)) - Fixed a color console warning being generated by disabled `EuiStep`s ([elastic#7454](elastic/eui#7454)) **Accessibility** - `EuiDataGrid`'s keyboard/screenreader experience has been tweaked to be more consistent for varying complex data: ([elastic#7448](elastic/eui#7448)) - Headers are now always navigable by arrow key, regardless of whether the header cells contain interactive content - Non-expandable cells containing any amount of interactive content now must be entered via Enter or F2 keypress - Expandable cells continue to be toggled via Enter or F2 keypress - `EuiDataGrid` now provides a direct screen reader hint for Enter key behavior for expandable & interactive cells ([elastic#7448](elastic/eui#7448))

…astic#176030) ## Summary This PR reverts the `onResizeEnd` stable callback workaround introduced in elastic#174955 to account for an EUI bug now that elastic/eui#7468 has been merged and Kibana was upgraded to v92.2.1 in elastic#175849. ### Checklist - [ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [ ] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [ ] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)) - [ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker) - [ ] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [ ] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) ### For maintainers - [ ] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

cee-chen changed the title ~~Upgrade EUI to v92.1.0~~ Upgrade EUI to v92.1.1 Jan 17, 2024

cee-chen force-pushed the eui-v92.1.0 branch 9 times, most recently from 2d94572 to 3d385ce Compare January 19, 2024 01:33

cee-chen added 3 commits January 22, 2024 08:24

Upgrade EUI to v92.1.1

c049395

i18n updates

a9b3350

[EuiDataGrid] Update Jest tests

8af1233

- replace event to make grid row cell visible - focus event now handled by a separate subcomponent, which enzyme simulate doesn't know about

cee-chen force-pushed the eui-v92.1.0 branch from 3d385ce to cc6ccfc Compare January 22, 2024 16:25

cee-chen added ci:skip-cypress-osquery Skips osquery cypress checks release_note:skip Skip the PR/issue when compiling release notes EUI v8.13.0 labels Jan 22, 2024

cee-chen added 5 commits January 22, 2024 10:59

[EuiDataGrid] Harden Cypress cell click tasks

abe9c31

- Cypress is now being flaky about these clicks

[VisEditor] Fix buggy resizable indicator

fefb099

- flex was being weird, `height: auto` was needed instead of `100%` - use `alignIndicator="start"` to keep the drag handle nearish to the collapse button

[Discover] Update resizable layout to use new button prop

6b5aace

[Discover] Fix re-rendering onResizeEnd callback

443396e

+ rename hack - The behavior works fine now with the event listeners, but it's a bit smoother even with the overlay, so I think keeping it makes sense

[Discover] PR feedback

f4f209f

Request from Davis - use useLatest to make callback gotcha clearer to Kibana devs

cee-chen force-pushed the eui-v92.1.0 branch from cc6ccfc to f4f209f Compare January 22, 2024 19:54

[EuiDataGrid] Harden osquery Cypress tests

c63770e

- not sure why they're failing/timing out with the previous clicks, likely same Cypress race condition weirdness as previous commits

cee-chen removed the ci:skip-cypress-osquery Skips osquery cypress checks label Jan 22, 2024

cee-chen marked this pull request as ready for review January 22, 2024 23:16

cee-chen requested a review from davismcphee January 22, 2024 23:20

cee-chen commented Jan 22, 2024

View reviewed changes

Ikuni17 approved these changes Jan 23, 2024

View reviewed changes

ryankeairns approved these changes Jan 23, 2024

View reviewed changes

stratoula approved these changes Jan 23, 2024

View reviewed changes

pgayvallet approved these changes Jan 23, 2024

View reviewed changes

tomsonpl reviewed Jan 23, 2024

View reviewed changes

davismcphee approved these changes Jan 24, 2024

View reviewed changes

tomsonpl approved these changes Jan 24, 2024

View reviewed changes

Merge branch 'main' into eui-v92.1.0

7fd36a9

cee-chen enabled auto-merge (squash) January 24, 2024 16:06

cee-chen added 3 commits January 24, 2024 09:28

Merge branch 'main' into eui-v92.1.0

8435765

Merge branch 'main' into eui-v92.1.0

71ef042

Merge branch 'main' into eui-v92.1.0

54262d0

cee-chen merged commit 2f8825d into elastic:main Jan 24, 2024

cee-chen deleted the eui-v92.1.0 branch January 24, 2024 21:29

kibanamachine added the backport:skip This PR does not require backporting label Jan 24, 2024

davismcphee mentioned this pull request Feb 1, 2024

[ResizableLayout] Remove onResizeEnd stable callback workaround #176030

Merged

10 tasks

Conversation

cee-chen commented Jan 16, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

patrykkopycinski commented Jan 22, 2024

Uh oh!

cee-chen commented Jan 22, 2024

Uh oh!

cee-chen commented Jan 22, 2024

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

stratoula left a comment

Choose a reason for hiding this comment

Uh oh!

tomsonpl left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

davismcphee left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kibana-ci commented Jan 24, 2024

💛 Build succeeded, but was flaky

Failed CI Steps

Test Failures

Metrics [docs]

Module Count

Async chunks

Page load bundle

History

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

11 participants

cee-chen commented Jan 16, 2024 •

edited

Loading