Upgrade EUI to v63.0.6 - updates to new EuiPageTemplate and deprecates old page components #138546
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
cchaos
commented
Aug 11, 2022
| solutionNav={solution} | ||
| // @ts-expect-error Techincally `paddingSize` isn't supported but it is passed through, | ||
| // this is a stop-gap for Stack managmement specifically until page components can be converted to template components | ||
| mainProps={{ paddingSize: 'l' }} |
There was a problem hiding this comment.
Typically the paddingSize is passed to the sections and header elements so each can be tweaked individually, however, Since most of the page contents don't contain padding themselves, we need to force it until all pages are updated.
| @@ -118,14 +115,12 @@ export class APIKeysGridPage extends Component<Props, State> { | |||
| if (!apiKeys) { | |||
| if (isLoadingApp) { | |||
| return ( | |||
| <EuiPageContent verticalPosition="center" horizontalPosition="center" color="subdued"> | |||
There was a problem hiding this comment.
The KibanaPageTemplate.EmptyPrompt now takes care default coloring based on overall layout and centering.
| ); | ||
| } | ||
|
|
||
| const concatenated = `${this.state.createdApiKey?.id}:${this.state.createdApiKey?.api_key}`; | ||
|
|
||
| return ( | ||
| <> | ||
| <EuiPageHeader | ||
| <KibanaPageTemplate.Header | ||
| paddingSize="none" |
There was a problem hiding this comment.
paddingSize is another temporary fix here for the addition of the padding at the top level
| <EuiPageContentBody>{this.renderTable()}</EuiPageContentBody> | ||
| <EuiSpacer size="l" /> | ||
|
|
||
| <KibanaPageTemplate.Section paddingSize="none"> |
There was a problem hiding this comment.
paddingSize is another temporary fix here for the addition of the padding at the top level
cchaos
commented
Aug 11, 2022
|
💚 CLA has been signed |
cee-chen
force-pushed
the
test/page_template
branch
2 times, most recently
from
7096f8f
to
4dfe7dc
Compare
2 tasks
cee-chen
force-pushed
the
test/page_template
branch
from
4dfe7dc
to
3043763
Compare
cee-chen
changed the title
- `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)
- Moved `bottomBar` to EuiPageTemplate.BottomBar (now contained in just the page contents) - Change EuiPanel children wrapper with EuiPageTemplate.Section
- Updated `docs/tutorials` mdx page - Fixed SolutionNav prop types
- Some temporary props applied for BWC until all other pages can be converted - Converted `API Keys` page’s layout (and especially prompt usags) to new paradigm
- copying and pasting types from KibanaPageTemplateProps, but ah well
…na/EuiPageTemplate
- converts pageBodyProps - fixes non-centered loading template
- fix layouts by auto-wrapping an EuiPageSection for padding, while adding a `customPageSections` prop for more custom sections/layouts - re-center 404 errors - update tests
- drop shadow changed slightly in EUI
- Modifies ObservabilityPageTemplate to accept a `bottomBar` prop (a la the old EuiPageTemplate behavior) NOTE: This opinionated page layout structure is starting to feel like it could be potentially limiting / have all the same pitfalls the previous EuiPageTemplate did. If so, consider something closer to the Enterprise Search page template conversion (`customPageSections`). - Misc cleanup: Use `KibanaPageTemplate` over `EuiPageTemplate`
- Since theObservabilityPageTemplate is using the new Eui/KibanaPageTemplate, its child templates and types need to be updated accordingly
- was an EUI issue that required a patch release + update snapshots
- Fix empty state logic removed in a previous commit - bogarts KibanaPageTemplate's `isEmptyState` prop instead of using `template="noData"` - extend template wrappers to past ...rest to underlying Kibana/EuiPageTemplate + replace EuiPageTemplate with KibanaPageTemplate for consistency
- for deprecation tags and section tag support
cee-chen
force-pushed
the
test/page_template
branch
from
3043763
to
9f94033
Compare
|
Closing this PR on recommendation of Kibana Ops - unfortunately kibana-ci is no longer making reports on this PR 😢 |
2 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
[email protected]⏩[email protected]63.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
See comment review below: #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.