[Chrome Next] Add AppHeader to dashboards listing page

[kowalczyk-krzysztof]

Summary

This PR migrates dashboard listing page to use the new AppHeader component as part Chrome Next project. The Create <variant> button that was previously one of the table action buttons, has been moved into app menu.

Variant	Before	After
Solution
Classic

Closes: https://github.com/elastic/kibana-team/issues/3421

[github-actions]

@kowalczyk-krzysztof, this PR increases one or more page-load bundle sizes by 15% or more:

Plugin	Before (bytes)	After (bytes)	Change
visualizationListing	5,148	6,021	+17.0%

Large bundle size increases can affect page load performance. Consider whether dependencies can be lazy-loaded or code split to reduce the bundle.

See the bundle optimization guide for tips.

[Dosant]

q: Curious why we aren't upgrading the header inside the TabbedTableListView

[kowalczyk-krzysztof]

No reason really. I picked the first component that had tabs defined already. We could move it one level down or even up but I think it's best for presentation team to decide on that.

[Dosant]

Oh, I thought there was a good reason. because otherwise more 1-to-1 migration would be putting it into TabbedTableListView where PageTemplate wraps the header, so it would be my default choice

[Dosant]

nit: Hehe, I still think it is weird that the API requires order for the array of items :D
The array is the natural order in this case.

[kowalczyk-krzysztof]

It won't always be the case that you will define all items in one file and having an if branch "if there's order, use it if not then use the order items were passed in" seems confusing.

[Dosant]

I wonder what an example of this is and what it looks like in code.

I understand order for registry like api - registerItem({}) when you register from multiple places. There it makes sense.

But when it is a place where we pass the final order into the component, this seems confusing.

[kowalczyk-krzysztof]

Take a look at how discover defines app menu - each button is defined in a separate file. It's easier to understand which button has which position when you see order in that case. Also discover has a functionality built on-top of app menu (discover profiles) that lets you register custom app menu buttons, which is even more of a reason to keep order.

[infra-vault-gh-plugin-prod]

Pinging @elastic/appex-sharedux (Team:SharedUX)

[kibanamachine]

💛 Build succeeded, but was flaky

• Buildkite Build
• Commit: 646750e
• Build duration: 59 mins

Failed CI Steps

• x-pack/platform/test/api_integration_deployment_agnostic/configs/serverless/oblt.streams.serverless.config.ts
• FTR Configs #196

Test Failures

• [job] [logs] FTR Configs #196 / Serverless Common UI - Home Page Sample data in serverless "after all" hook for "Sample data loads"

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
dashboard	1097	1135	+38

Async chunks

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

id	before	after	diff
dashboard	1.1MB	1.1MB	+29.0KB
visualizationListing	97.7KB	98.2KB	+516.0B
visualizations	335.3KB	335.4KB	+52.0B
total			+29.6KB

Page load bundle

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

id	before	after	diff
dashboard	18.8KB	18.8KB	+79.0B
eventAnnotationListing	12.3KB	12.8KB	+482.0B
visualizationListing	4.9KB	5.0KB	+143.0B
total			+704.0B

Unknown metric groups

async chunk count

id	before	after	diff
dashboard	13	14	+1

History

• 💛 Build #450598 was flaky 157b19f
• 💔 Build #450570 failed 6a0d4a9
• 💔 Build #450437 failed c45c855
• 💔 Build #450412 failed ac655f9

cc @kowalczyk-krzysztof