[Stack Management] Converted to use KibanaPageTemplate (sort of) #101335

cchaos · 2021-06-03T21:24:48Z

Replaces #100085 and supports [META] 7.14 Solution Nav implementation #98359. This is not a feature branch.

The background

KibanaPageTemplate wraps EuiPageTemplate which contains both the side bar and page content and provides several "templates". Unfortunately, Stack Management is setup in a way that is plugin-agnostic until that plugin loads, which causes some complications when trying to use a single component to render both the side (solution) nav and the page contents.

In #100837, we attempted to push the rendering of the template component down to the Router switch mechanism. This forced plugins to reuse a ManagmentPageTemplate (yet another wrapper), but allowed usage of all the template props for consistency and ease. However, this way caused flashes of content while the plugin was loading because it now was also in charge of rendering the side nav.

The solution

The easiest solution that gets us to a point where we can update Stack Management in 7.14 alongside the other solutions, was to keep the solution nav being rendered where it was before by wrapping the router, in ManagementApp, with KibanaPageTemplate which gets us the right layout for most pages in Stack Management.

Unfortunately, we still can't hoist template props up to this component, so any contents within the plugins/pages, will still have to be manually created. This means using the component EuiPageHeader directly instead of simply passing KibanaPageTemplat.pageHeader={}. It also means not being able to change the actual template type.

In this PR I've done the setup for all of Stack Management which will cause most pages to look like a panel within the page.

Examples

There will be a meta ticket setup to help push along the fixes for all these pages, but in this PR I've done some example conversions that are, hopefully, copy-pasteable.

Empty states

<EuiPageContent verticalPosition="center" horizontalPosition="center" color="subdued">
  <EuiEmptyPrompt iconType="" title={<h2></h2>} body={<p></p>} actions={[]} />
</EuiPageContent>

Example commit: bbb74b7

Error states

<EuiPageContent verticalPosition="center" horizontalPosition="center" color="danger">
  <EuiEmptyPrompt iconType="" title={<h2></h2>} body={<p></p>} actions={[]} />
</EuiPageContent>

Example commit: 56cf855

If you are having trouble centering your content ensure that any blank divs around your content have the APP_WRAPPER_CLASS.

Normal page with page header

To be sure the page header renders correctly always add bottomBorder and add a l (large) size spacer between it and the content.

<EuiPageHeader
  pageTitle=""
  bottomBorder
  rightSideItems={[
    <EuiButton fill iconType="iconInCircleFilled">
      Create ___
    </EuiButton>,
  ]}
  tabs={[]}
/>

<EuiSpacer size="l" />

Example commit: ebc33a2

Panels & Split panels

Be sure that any internal EuiPanel doesn't contain a shadow. You can turn off shadows with hasShadow={false} or use borders instead with hasBorder={true}.

EuiSplitPanel is a new component that can be used in some of the unique patterns we see throughout management. Mainly the panels that have headings like in Advanced Settings.

Example commit: bc3b85b

Checklist

Delete any items that are not applicable to this PR.

Unit or functional tests were updated or added to match the most common scenarios
Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)
This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
This was checked for cross-browser compatibility

…_management/setup

cchaos · 2021-06-07T19:07:33Z

@elasticmachine merge upstream

cchaos · 2021-06-07T19:08:17Z

This PR is ready for review, though I'm just double-checking the axe stuff locally at the same time.

cjcenizal

Changes to the Index Management header look good!

kibanamachine · 2021-06-07T21:14:43Z

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`management`	43	34	-9

Async chunks

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

id	before	after	diff
`advancedSettings`	912.7KB	913.0KB	+288.0B
`indexManagement`	1.3MB	1.3MB	-708.0B
`management`	20.0KB	17.0KB	-3.1KB
`security`	767.0KB	766.7KB	-278.0B
total			-3.7KB

Page load bundle

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

id	before	after	diff
`core`	408.1KB	408.6KB	+488.0B

History

💚 Build #129556 succeeded 72c7d56
💔 Build #129540 failed 6983c35
💔 Build #129157 failed 71be6f1
💔 Build #129049 failed bc3b85b

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

myasonik

Tested in browser and code looks good!

myasonik · 2021-06-07T19:45:55Z

...gins/security/public/management/role_mappings/role_mappings_grid/role_mappings_grid_page.tsx

+ defaultMessage="Role mappings define which roles are assigned to users from an external identity provider. {learnMoreLink}"
+ values={{
+ learnMoreLink: (
+ <EuiLink href={this.props.docLinks.links.security.mappingRoles} external={true}>


Nit: The link here is super vague ("Learn more"), we can give it a better aria-label

Maybe something like this?

Suggested change

<EuiLink href={this.props.docLinks.links.security.mappingRoles} external={true}>

<EuiLink href={this.props.docLinks.links.security.mappingRoles} external={true} aria-label={<FormattedMessage

id="xpack.security.management.roleMappings.learnMoreLinkAriaLabel"

defaultMessage="Learn more about Role mappings."

/>}>

I'll nit @myasonik's nit and suggest a slight casing change. I'm happy to make this in a followup when I convert the rest of the pages if that's easier too:

Suggested change

<EuiLink href={this.props.docLinks.links.security.mappingRoles} external={true}>

<EuiLink href={this.props.docLinks.links.security.mappingRoles} external={true} aria-label={<FormattedMessage

id="xpack.security.management.roleMappings.learnMoreLinkAriaLabel"

defaultMessage="Learn more about role mappings."

/>}>

Thanks @myasonik & @legrego , Yeah I'd like to push that decision down to @legrego's conversion. This one I want to try to keep to the basic setup. Changing those links is a slippery slope since they're all over management not just this one.

legrego

Security changes LGTM - thanks for using some of our screens as an example!

legrego · 2021-06-08T12:33:36Z

...gins/security/public/management/role_mappings/role_mappings_grid/role_mappings_grid_page.tsx

+ defaultMessage="Role mappings define which roles are assigned to users from an external identity provider. {learnMoreLink}"
+ values={{
+ learnMoreLink: (
+ <EuiLink href={this.props.docLinks.links.security.mappingRoles} external={true}>


I'll nit @myasonik's nit and suggest a slight casing change. I'm happy to make this in a followup when I convert the rest of the pages if that's easier too:

Suggested change

<EuiLink href={this.props.docLinks.links.security.mappingRoles} external={true}>

<EuiLink href={this.props.docLinks.links.security.mappingRoles} external={true} aria-label={<FormattedMessage

id="xpack.security.management.roleMappings.learnMoreLinkAriaLabel"

defaultMessage="Learn more about role mappings."

/>}>

mbondyra · 2021-06-08T14:47:39Z

When running this PR and going to http://localhost:5601/vzy/app/management/insightsAndAlerting/jobsListLink, I get an error in console

mbondyra

The console error I mentioned doesn't come from this PR - overall KibanaApp changes look good! tested on chrome.

cchaos · 2021-06-08T15:24:41Z

Thanks @mbondyra for double checking on that console error!! I'll pass that along to the Arch team to see if they know the cause.

…stic#101335) * Just replace the old wrapper and uses the `solutionNav` prop * Examples of: Empty Page, Error state, Page Header, and Split Panel

mbondyra · 2021-06-08T16:24:56Z

Thanks @cchaos, I've created an issue: #101621

…1335) (#101617) * Just replace the old wrapper and uses the `solutionNav` prop * Examples of: Empty Page, Error state, Page Header, and Split Panel

cchaos added 8 commits May 28, 2021 18:20

Just replace the old wrapper….

1c9a81c

Using solutionNav prop

96e8fe3

Merge remote-tracking branch 'upstream/master' into pageLayouts/stack…

8756fc4

…_management/setup

Cleanup

f24ac5d

Example: Empty Page

bbb74b7

Example: Error state

56cf855

Example: Page Header

ebc33a2

Example: Split Panel

bc3b85b

This was referenced Jun 3, 2021

[Meta] Stack Management page conversions for new layout #101336

Closed

[WIP] Migrate Stack Management plugins to use new solutions nav #100837

Closed

i18n

4fe6df6

cjcenizal mentioned this pull request Jun 4, 2021

Convert Stack Management apps to new Management nav structure #100748

Closed

10 tasks

cchaos and others added 3 commits June 4, 2021 08:30

Snaps

71be6f1

Fix TS errors.

6983c35

Fix functional tests.

72c7d56

Merge branch 'master' into pageLayouts/stack_management/setup

133edba

cchaos marked this pull request as ready for review June 7, 2021 19:08

cchaos requested a review from a team June 7, 2021 19:08

cchaos requested review from a team as code owners June 7, 2021 19:08

cchaos added release_note:skip Skip the PR/issue when compiling release notes v7.14.0 labels Jun 7, 2021

cjcenizal approved these changes Jun 7, 2021

View reviewed changes

myasonik approved these changes Jun 7, 2021

View reviewed changes

YulNaumenko mentioned this pull request Jun 7, 2021

[Alerting UI] Convert triggersActionsUi plugin to the new Management app structure. #101546

Closed

legrego approved these changes Jun 8, 2021

View reviewed changes

pgayvallet mentioned this pull request Jun 8, 2021

Convert Saved Objects Management and Tagging to the new management layout #101605

Closed

2 tasks

mbondyra approved these changes Jun 8, 2021

View reviewed changes

cchaos merged commit 51e2da9 into elastic:master Jun 8, 2021

cchaos mentioned this pull request Jun 8, 2021

[7.x] [Stack Management] Converted to use KibanaPageTemplate (sort of) (#101335) #101617

Merged

Dosant mentioned this pull request Jun 8, 2021

Convert search sessions and index patterns to new management layout #101625

Closed

3 tasks

cchaos mentioned this pull request Jun 8, 2021

[META] 7.14 Solution Nav implementation #98359

Closed

22 tasks

alisonelizabeth mentioned this pull request Jun 9, 2021

[Upgrade Assistant] Migrate to new page layout #101691

Merged

timroes mentioned this pull request Jun 30, 2021

Fix telemetry advanced setting style #103838

Merged

cchaos deleted the pageLayouts/stack_management/setup branch March 11, 2022 17:02

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Stack Management] Converted to use KibanaPageTemplate (sort of) #101335

[Stack Management] Converted to use KibanaPageTemplate (sort of) #101335

cchaos commented Jun 3, 2021 •

edited

Loading

cchaos commented Jun 7, 2021

cchaos commented Jun 7, 2021

cjcenizal left a comment

kibanamachine commented Jun 7, 2021

myasonik left a comment

myasonik Jun 7, 2021

legrego Jun 8, 2021 •

edited

Loading

cchaos Jun 8, 2021

legrego left a comment

legrego Jun 8, 2021 •

edited

Loading

mbondyra commented Jun 8, 2021 •

edited

Loading

mbondyra left a comment

cchaos commented Jun 8, 2021

mbondyra commented Jun 8, 2021

- <EuiLink href={this.props.docLinks.links.security.mappingRoles} external={true}>
+ <EuiLink href={this.props.docLinks.links.security.mappingRoles} external={true} aria-label={<FormattedMessage
+ id="xpack.security.management.roleMappings.learnMoreLinkAriaLabel"
+ defaultMessage="Learn more about Role mappings."
+ />}>

[Stack Management] Converted to use KibanaPageTemplate (sort of) #101335

[Stack Management] Converted to use KibanaPageTemplate (sort of) #101335

Conversation

cchaos commented Jun 3, 2021 • edited Loading

The background

The solution

Examples

Empty states

Error states

Normal page with page header

Panels & Split panels

Checklist

cchaos commented Jun 7, 2021

cchaos commented Jun 7, 2021

cjcenizal left a comment

Choose a reason for hiding this comment

kibanamachine commented Jun 7, 2021

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

Page load bundle

History

myasonik left a comment

Choose a reason for hiding this comment

myasonik Jun 7, 2021

Choose a reason for hiding this comment

legrego Jun 8, 2021 • edited Loading

Choose a reason for hiding this comment

cchaos Jun 8, 2021

Choose a reason for hiding this comment

legrego left a comment

Choose a reason for hiding this comment

legrego Jun 8, 2021 • edited Loading

Choose a reason for hiding this comment

mbondyra commented Jun 8, 2021 • edited Loading

mbondyra left a comment

Choose a reason for hiding this comment

cchaos commented Jun 8, 2021

mbondyra commented Jun 8, 2021

cchaos commented Jun 3, 2021 •

edited

Loading

legrego Jun 8, 2021 •

edited

Loading

legrego Jun 8, 2021 •

edited

Loading

mbondyra commented Jun 8, 2021 •

edited

Loading