Upgrade EUI to v60.0.0 #134919

cee-chen · 2022-06-22T16:00:12Z

Summary

[email protected] ⏩ [email protected]

In this PR, we've added an Emotion snapshot serializer change that changes the dynamic css-{hash} emotion className prefixes to a static emotion-. The long-term goal of this is to reduce thrashing on downstream Kibana snapshots whenever EUI CSS changes.
Added .render() calls to snapshot tests are intended to reduce the output of EUI components that use Emotion for styling. If you prefer the more verbose snapshot output in your plugin, we can remove the call.

Emotion cache & meta/style tag details

There are two types of styling conflict issues in Kibana that this PR fixes:
- Emotion styles in Kibana targeting/overriding EUI components using Sass
- Sass styles in Kibana targeting EUI components using Emotion
Depending on selector specificity, the incorrect styles could be applied because of style tag source order. To solve this, EUI implements a way to better handle style tag injection which allows for the following ordering:
1. EUI global styles
2. EUI compiled Sass
3. Emotion styles (both EUI and Kibana)
4. Kibana compiled Sass
This commit has the changes to Kibana to make this happen. The gist is that we need to target another tag in the and a second Emotion cache to bundle styles together. EUI takes care of the rest.

This is only necessary while EUI is in transition to Emotion and we have to manage two types of styling.

`60.0.0`

Added configuration options to EuiProvider.cache to enable more granular style insertion (#5853)
Added a utility classes component (#5853)
Added utility classes configuration options to EuiProvider (#5853)
Added gutterSize prop to EuiTimeline (#5955)
Added optional onActiveOptionChange callback to EuiSelectable (#5978)

Bug fixes

Fixed bug in EuiTimelineItem where the vertical line was not showing on the last item when verticalAlign was set to center (#5955)
Fixed bug in logicalCSS() where the left and right logicalPositions were wrong (#5955)
Fixed a maximum call stack error in EuiComboBox when an option group contains hundreds of thousands of options (#5976)

Breaking changes

Removed component prop from EuiTimelineItem, which now defaults to li. Consequently, a EuiTimeline (ol) is required to wrap the timeline items (#5955)

CSS-in-JS conversions

Converted EuiStat to Emotion (#5968)

`59.1.0`

Added new color prop to EuiLoadingSpinner (#5878)
Added the overrideLinkBehavior prop to EuiSkipLink for applications that use hash routers (#5957)

Bug fixes

Fixed EuiSelectableMessage flex layout when containing multiple children nodes (#5966)
Fixed export location of JS based shadow mixins (#5970)

CSS-in-JS

Converted EuiFacetGroup and EuiFacetButton to Emotion and removed $euiFacetGutterSizes (#5878)

Closes #134908

…n-` prefix instead of a dynamic hash - The goal of this is to reduce thrashing on downstream Kibana snapshots whenever EUI CSS changes + Add serializer to Canvas' storyshots tests as well + Switch several .html() snapshots to .render() - render uses the new serializer logic, but .html() does not and will still output CSS hashes, plus is more difficult to read

…cated

fkanout

Actionable Observability changes LGTM.

ogupte

APM changes LGTM!

justinkambic

Uptime changes LGTM

- the Cypress query/command being used wasn't working correctly

YulNaumenko

LGTM

paul-tavares

👍 on behalf of Security Solution Onboarding and Lifecycle Management team

azasypkin

Security and Interactive Setup changes LGTM.

Kerry350

Monitoring changes LGTM

cee-chen · 2022-06-28T17:15:01Z

@elasticmachine merge upstream

kibana-ci · 2022-06-28T18:23:59Z

💛 Build succeeded, but was flaky

Failed CI Steps

Test Failures

[job] [logs] Security Solution Tests #3 / Inspect Network stats and tables "before all" hook for "inspects the Source IPs Table"

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`core`	354	349	-5
`dashboard`	421	416	-5
`dataViewManagement`	212	207	-5
`discover`	593	588	-5
`kibanaOverview`	175	170	-5
`lens`	922	917	-5
`visualizations`	373	368	-5
total			-35

Async chunks

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

id	before	after	diff
`core`	136.3KB	136.3KB	-11.0B
`dashboard`	392.7KB	380.7KB	-12.1KB
`dataViewManagement`	192.9KB	180.8KB	-12.1KB
`discover`	491.2KB	491.1KB	-15.0B
`kibanaOverview`	95.9KB	83.8KB	-12.1KB
`kibanaReact`	209.6KB	209.6KB	+2.0B
`kibanaUtils`	51.6KB	51.6KB	+1.0B
`lens`	1.2MB	1.2MB	-12.1KB
`visualizations`	254.6KB	242.6KB	-12.1KB
total			-60.4KB

Canvas Sharable Runtime

The Canvas "shareable runtime" is an bundle produced to enable running Canvas workpads outside of Kibana. This bundle is included in third-party webpages that embed canvas and therefor should be as slim as possible.

id	before	after	diff
`module count`	4955	4967	+12
`total size`	7.7MB	7.7MB	+583.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`	310.5KB	298.7KB	-11.9KB
`dashboard`	65.9KB	65.9KB	+56.0B
`dataViewManagement`	4.5KB	4.6KB	+56.0B
`discover`	40.7KB	28.7KB	-12.0KB
`interactiveSetup`	58.3KB	58.6KB	+312.0B
`kbnUiSharedDeps-css`	547.7KB	543.5KB	-4.2KB
`kbnUiSharedDeps-npmDll`	5.0MB	5.0MB	+13.6KB
`kbnUiSharedDeps-srcJs`	3.8MB	3.8MB	+93.0B
`kibanaOverview`	15.4KB	15.5KB	+56.0B
`kibanaReact`	62.2KB	62.5KB	+310.0B
`kibanaUtils`	65.4KB	65.7KB	+312.0B
`lens`	32.9KB	32.9KB	+56.0B
`visualizations`	47.0KB	47.0KB	+56.0B
total			-13.2KB

History

💔 Build #53970 failed ed28df2
💔 Build #53935 failed c3f329b
💛 Build #53610 was flaky 69957f8
💔 Build #53549 failed f81f920
💔 Build #53246 failed c0dec4d
💔 Build #53221 failed 36700d1

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

## Summary fixes #161441 fixes #161464 The recent `EuiButtonEmpty`/`EuiButtonIcon` Emotion conversions have highlighted a CSS order/specificity flaw in Kibana compared to EUI - EUI orders its Sass _after_ its Emotion styles (see https://elastic.github.io/eui/#/), and Kibana orders Sass _before_ Emotion styles. I'm not totally sure why Greg set up Kibana's style order the way he did in #134919, but at this point, EUI has enough of its baseline atom components converted to Emotion that remaining components in Sass are all generally molecules or higher level components that need to come after Emotion. ### QA - [x] Test as many pages in Kibana as possible to ensure no visual regressions 🤞 --------- Co-authored-by: Kibana Machine <[email protected]>

## Summary fixes elastic#161441 fixes elastic#161464 The recent `EuiButtonEmpty`/`EuiButtonIcon` Emotion conversions have highlighted a CSS order/specificity flaw in Kibana compared to EUI - EUI orders its Sass _after_ its Emotion styles (see https://elastic.github.io/eui/#/), and Kibana orders Sass _before_ Emotion styles. I'm not totally sure why Greg set up Kibana's style order the way he did in elastic#134919, but at this point, EUI has enough of its baseline atom components converted to Emotion that remaining components in Sass are all generally molecules or higher level components that need to come after Emotion. ### QA - [x] Test as many pages in Kibana as possible to ensure no visual regressions 🤞 --------- Co-authored-by: Kibana Machine <[email protected]> (cherry picked from commit b9eae62)

cee-chen added release_note:skip Skip the PR/issue when compiling release notes EUI backport:skip This PR does not require backporting ci:deploy-cloud v8.4.0 labels Jun 22, 2022

cee-chen force-pushed the eui-60.0.0 branch 9 times, most recently from b75a6a5 to 6e3500b Compare June 23, 2022 02:35

cee-chen and others added 7 commits June 22, 2022 22:52

Upgrade EUI to v60.0.0

64c6cad

reorganize style tag injection using EuiProvider.cache options

a416fd6

Update downstream tests for EuiStat Emotion/className changes

1a26e30

Fix WithEuiTheme(EuiAccordionClass) references

1a730c8

Rename mounted snapshots of EuiButtonContent to EuiButtonContentDepre…

a96cec0

…cated

Increase kibanaReact page load bundle size limit

32e73ae

cee-chen force-pushed the eui-60.0.0 branch from 6e3500b to 32e73ae Compare June 23, 2022 05:53

cchaos mentioned this pull request Jun 23, 2022

[Global search] No results view does not render correctly #134908

Closed

cee-chen marked this pull request as ready for review June 23, 2022 15:32

cee-chen requested a review from a team June 23, 2022 15:32

cee-chen requested review from a team as code owners June 23, 2022 15:32

cee-chen requested a review from a team June 23, 2022 15:32

cee-chen requested review from a team as code owners June 23, 2022 15:32

fkanout approved these changes Jun 27, 2022

View reviewed changes

Merge branch 'main' into eui-60.0.0

f81f920

ogupte approved these changes Jun 27, 2022

View reviewed changes

justinkambic approved these changes Jun 27, 2022

View reviewed changes

vadimkibana approved these changes Jun 27, 2022

View reviewed changes

Fix failing Security Cypress test

69957f8

- the Cypress query/command being used wasn't working correctly

kqualters-elastic approved these changes Jun 27, 2022

View reviewed changes

yctercero approved these changes Jun 27, 2022

View reviewed changes

paul-tavares mentioned this pull request Jun 27, 2022

[Security solution][endpoint] Improvements to the Console input area, including ability to access prior entered command and select them for re-execute (UP arrow) #134287

Merged

8 tasks

YulNaumenko approved these changes Jun 27, 2022

View reviewed changes

paul-tavares approved these changes Jun 27, 2022

View reviewed changes

azasypkin approved these changes Jun 28, 2022

View reviewed changes

azasypkin mentioned this pull request Jun 28, 2022

Add screenshot-based integration tests for the security screens rendered on the server-side #135281

Closed

Kerry350 approved these changes Jun 28, 2022

View reviewed changes

Merge branch 'main' into eui-60.0.0

c3f329b

cee-chen enabled auto-merge (squash) June 28, 2022 15:18

Merge branch 'main' into eui-60.0.0

ed28df2

Merge branch 'main' into eui-60.0.0

b31619a

cee-chen merged commit de20876 into elastic:main Jun 28, 2022

cee-chen deleted the eui-60.0.0 branch June 28, 2022 18:24

paul-tavares mentioned this pull request Jun 29, 2022

[Security Solution][Endpoint] Remove EuiSelectable workaround for capturing active list item from Response Actions Console #135457

Merged

cjcenizal mentioned this pull request Jul 27, 2022

Fix ILM timeline styles. #137336

Merged

tylersmalley added ci:cloud-deploy Create or update a Cloud deployment and removed ci:deploy-cloud labels Aug 17, 2022

cee-chen mentioned this pull request Oct 4, 2022

Use @emotion/server for server-side security prompts #142662

Merged

cee-chen mentioned this pull request Jul 10, 2023

Order Emotion styles before Sass styles #161592

Merged

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Upgrade EUI to v60.0.0 #134919

Upgrade EUI to v60.0.0 #134919

Uh oh!

cee-chen commented Jun 22, 2022 •

edited by cchaos

Loading

Uh oh!

fkanout left a comment

Uh oh!

ogupte left a comment

Uh oh!

justinkambic left a comment

Uh oh!

YulNaumenko left a comment

Uh oh!

paul-tavares left a comment

Uh oh!

azasypkin left a comment

Uh oh!

Kerry350 left a comment

Uh oh!

cee-chen commented Jun 28, 2022

Uh oh!

kibana-ci commented Jun 28, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

26 participants

Upgrade EUI to v60.0.0 #134919

Upgrade EUI to v60.0.0 #134919

Uh oh!

Conversation

cee-chen commented Jun 22, 2022 • edited by cchaos Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

60.0.0

59.1.0

Uh oh!

fkanout left a comment

Choose a reason for hiding this comment

Uh oh!

ogupte left a comment

Choose a reason for hiding this comment

Uh oh!

justinkambic left a comment

Choose a reason for hiding this comment

Uh oh!

YulNaumenko left a comment

Choose a reason for hiding this comment

Uh oh!

paul-tavares left a comment

Choose a reason for hiding this comment

Uh oh!

azasypkin left a comment

Choose a reason for hiding this comment

Uh oh!

Kerry350 left a comment

Choose a reason for hiding this comment

Uh oh!

cee-chen commented Jun 28, 2022

Uh oh!

kibana-ci commented Jun 28, 2022

💛 Build succeeded, but was flaky

Failed CI Steps

Test Failures

Metrics [docs]

Module Count

Async chunks

Canvas Sharable Runtime

Page load bundle

History

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

26 participants

cee-chen commented Jun 22, 2022 •

edited by cchaos

Loading

`60.0.0`

`59.1.0`