Upgrade EUI to v63.0.6 - updates to new EuiPageTemplate and deprecates old page components #139524
Conversation
cee-chen
force-pushed
the
test/page_template
branch
13 times, most recently
from
9f94033
to
fb7ecee
Compare
cee-chen
changed the title
cee-chen
added
EUI
v8.5.0
release_note:skip
- `withSolutionNav` not yet handled
- Pushes existing `pageHeader` prompts onto created EuiPageTemplate.PageHeader - Uses `isEmptyState` to push `pageHeader` props to EuiPageTemplate.EmptyPrompt instead (if `children` are not supplied)
- Collapsing isn’t working (minWidth isn’t updating)
|
@elasticmachine merge upstream |
There was a problem hiding this comment.
LGTM - I opened #140149 for @elastic/infra-monitoring-ui to clean up.
Is there a specific migration guide? If so can you point it out? I didn't see anything that looked quite like a step by step from old to new. Would be helpful to have specific instructions I think.
|
Enterprise Search lgtm |
| @@ -226,7 +226,9 @@ describe('Service Overview', () => { | |||
| 'suggestionsRequest' | |||
| ); | |||
|
|
|||
| cy.get('[data-test-subj="environmentFilter"]').type('production'); | |||
| cy.get('[data-test-subj="environmentFilter"] input').type('production', { | |||
There was a problem hiding this comment.
Is this change needed? If the test is flaky we could raise an issue to fix it.
There was a problem hiding this comment.
The APM Cypress tests failed 4 times in a row without it, which technically I can ask KibanaOps to skip the tests for us, but the failure looked solvable and the fix looked reasonable so I figured I'd add it in. The test is flaky, but I think this resolves that.
There was a problem hiding this comment.
I see, thanks for doing that!
There was a problem hiding this comment.
Thanks a lot for working on this EUI update @constancecchen!
Platform Onboarding changes LGTM, tested locally 👍
Thanks a million @matschaffer! There's not a step-by-step migration guide for the old For the other granular components, the migration looks like:
Please feel free to ping me or the EUI team either in Slack or in your issue for assistance, we'd be super happy to help. |
|
@elastic/kibana-design @elastic/uptime @dasansol92 As a heads up, since the major affected solutions/plugins have approved this PR at this point, I'll be asking KibanaOps to admin merge this PR by EOD today. Please do take a look / speak up if you see any issues! |
|
@elasticmachine merge upstream |
💔 Build FailedFailed CI StepsTest Failures
Metrics [docs]Module Count
Public APIs missing comments
Async chunks
Page load bundle
Unknown metric groupsAPI count
ESLint disabled in files
miscellaneous assets size
References to deprecated APIs
Total ESLint disabled count
Unreferenced deprecated APIs
History
To update your PR or re-run it, just comment with: |
|
Merging - the osquery failures seem to be unrelated, caused by elastic-agent setup failures followed by missing index patterns. |
Summary
eui@62.2.4⏩eui@63.0.663.0.1⏩63.0.6Patch releases containing bugfixes for EuiPageTemplate and release fixes already present in the previous EUI PR
63.0.6componentprop toEuiPageSection, allowing overriding of the defaultsectiontag (#6192)Deprecations
@deprecatedflags toEuiPageContent_Deprecated,EuiPageContentBody_Deprecated,EuiPageContentHeader_Deprecated,EuiPageContentHeaderSection_Deprecated,EuiPageSideBar_DeprecatedandEuiPageTemplate_Deprecated, which will provide helpful hints to IDEs that support jsdoc flags. Consumers will have until August 2023 to migrate from these deprecated components. (#6194)63.0.5Bug fixes
data-fixed-headersproperty in some layout configurations usingEuiPageTemplate. (#6140)EuiPageSidebarbug where inline styles were not correctly updating (#6191)63.0.4Bug fixes
EuiDescriptionListTitlewhenEuiDescriptionListis compressed (#6160)63.0.3Bug fixes
CollapsedItemActionsref callback not accounting fornullvalue (#6145)63.0.2Bug fixes
eui.d.tscontaining@testing-librarytype definitions (#6142)63.0.1Bug fixes
useCurrentEuiBreakpoint(#6117)63.0.0- Main EuiPageTemplate release changelog63.0.0EuiPageTemplatenamespaced component that uses context to pass through props (#5768)EuiPageSectioncomponent for easier section stacking (#5768)EuiPageSidebarcomponent that is an upgrade toEuiPageSideBar(#5768)bottomBorderprop to add'extended'onEuiPageHeader(#5768)paddingSizeandrestrictWidthdirectly onEuiPageHeaderContent(#5768)data-fixed-headersattribute to<body>with the count of fixedEuiHeadercomponents (#5768)usePortalprop onEuiBottomBarto acceptEuiPortalProps(#5768)paddingSizesupport byEuiPageforxlandxssizes (#5768)restrictWidthdefaulttruestyle tostyleattribute onEuiPageandEuiPageBody(#5768)heightparameter toeuiYScroll(),useEuiYScroll,euiYScrollWithShadows(), anduseEuiYScrollWithShadows(#5768)repositionOnScrolldirectly toEuiPopoverrendered by mobile version ofEuiHeaderLinks(#5768)Bug fixes
breadcrumbsonEuiPageHeaderwhenalignItems = 'top'(#5768)logicalStyle()to return the same value type as was passed in (instead of converting to string) (#5768)Deprecations
EuiPageTemplatecomponent and renamed toEuiPageTemplate_Deprecated(#5768)EuiPageContentandEuiPageContentBodyin favor of newEuiPageSection(#5768)EuiPageContentand renamed toEuiPageContent_Deprecated(#5768)EuiPageContentBodyand renamed toEuiPageContentBody_Deprecated(#5768)EuiPageContentHeaderand renamed toEuiPageContentHeader_Deprecated(#5768)EuiPageContentHeaderSectionand renamed toEuiPageContentHeaderSection_Deprecated(#5768)EuiPageSideBarand renamed toEuiPageSideBar_Deprecated(#5768)Breaking changes
EuiPageHeaderstyles when a child ofEuiPageBody(#5768)paddingSizeofEuiPagefrommtonone(#5768)CSS-in-JS conversion
EuiPageandEuiPageBodyto Emotion (#5768)EuiPageHeaderandEuiPageHeaderContentto Emotion (#5768)euiPageRestrictWidth()Sass mixin (#5768)EuiPageTemplate
This component has been replaced (in EUI) with a new flexible namespaced component that utilizes React context to pass through top level props and a new sectioning component that makes it easier to stack page contents including headers in any order.
👉 New component docs: https://elastic.github.io/eui/#/templates/page-template
👉 EUI PR with details: elastic/eui#5768
👉 Guidelines: https://elastic.github.io/eui/#/templates/page-template/guidelines
In addition, the latest update deprecates a lot of (now defunct) page components like EuiPageContent and renames then with
_Deprecated. This will hopefully alert owners that they should be switching to the latest template paradigm.Tasks performed
✅ Updated deprecated page component imports
Example:
import { - EuiPageContent, - EuiPageContentBody, + EuiPageContent_Deprecated as EuiPageContent, + EuiPageContentBody_Deprecated as EuiPageContentBody, } from '@elastic/eui';✅ Updated the
@kbn/shared-ux-page-kibana-templateversion of KibanaPageTemplateThis is mostly done and even re-exports the namespaced components so that consumers in Kibana don't have to mis-match Kibana vs EUI prefixed components.
kibana/packages/kbn-shared-ux-components/src/page_template/page_template.tsx
Lines 64 to 70 in 2829dea
✅ Updated the tutorial documentation page
New version found here: https://github.com/elastic/kibana/blob/2829dea45c970ef21188e399c4004ca40a02dca9/dev_docs/tutorials/kibana_page_template.mdx
✅ Fixed current usages of the Shared-UX KibanaPageTemplate
Only those consuming
KibanaPageTemplatefrom@kbn/shared-ux-page-kibana-templatehave been fixed / updated to the new paradigm.✅ Converted a few examples from old template to new
For changes affected by 9812251, see Caroline's comment review in her original PR: #138546 (review)
✅ Updated snapshots and FTR tests
The snapshots and tests caught some amount of bugs, but can't catch every possible UI bug or regression. Please take the time to manually QA/regression test your app.
🚨 Affected apps/teams 🚨
If your app/solution is in the below list list, it was affected by the new
EuiPageTemplate/KibanaPageTemplateupdates. Please take the time to manually QA/UI regression test your app.Apps importing
KibanaPageTemplatefrom@kbn/kibana-react-plugin/publicare using the old/deprecatedEuiPageTemplateand should convert to theKibanaPageTemplatefrom@kbn/shared-ux-page-kibana-templateas soon as possible. This applies to the following apps:Teams that were directly using the now-deprecated
EuiPageTemplate/EuiPageContentcomponents (as noted by an_Deprecatedimport from EUI) should generally convert to using KibanaPageTemplate, or at minimum the new non-deprecated EuiPage* equivalents. There are too many applications to list of these usages (222 files total), so we cannot call these teams out individually, but please consider doing a grep for_Deprecated asin your team codebase to check for them and start planning to migrate over.The deprecated page components will be removed by August 2023.