[sharedUX] Move to Package-based Architecture by clintandrewhall · Pull Request #127546 · elastic/kibana

clintandrewhall · 2022-03-11T21:23:17Z

Summary

This was a subset of the work in #127419 for ease of review and commit history. The other three PRs were individually reviewed and then merged into this services PR.

This PR moves portions of the SharedUX plugin out of the plugin and into packages.

Why?

With only a few components, we've run into issues with circular dependencies. The reason being our plugin is consuming code and types from other plugins, and once we do, that plugin can't use our plugin or its components. To mitigate this, we need to keep Shared UX as dependency free as possible.

One of the approaches @majagrubic explored was moving pure components to another plugin to be consumed by dependency plugins. While it worked, we all agreed it wasn't ideal.

Talking with ops, it became clear our assets don't actually need a plugin lifecycle to operate. So I took some time this evening to decouple our components, services and utilities to packages.

Packages

@kbn/sharedux-services - Our base service abstraction definitions and mocks.
@kbn/sharedux-storybook - All storybook-related code, including a SB-impl of our service layer.
@kbn/sharedux-utility - A home for utility code.
@kbn/sharedux-components - React components
- As @spalger has pointed out, this package likely needs to be split apart into smaller packages. At present, we don't have a good sense of how components might be divided, so I'm opting to K.I.S.S. in the immediate term.

Code from src/plugins/shared_ux was refactored and moved to these packages.

Plugin

Now that most of the stateless code has been moved out of the Shared UX plugin, what is its purpose?

The Shared UX plugin provides stateful, Kibana-specific implementations of the services in @kbn/sharedux-services and a React context provider that wires components from @kbn/sharedux-components. Any plugin that is not a dependency for our services can make src/plugins/shared_ux a dependency and consume a pre-wired context that will make components from @kbn/sharedux-components "just work". To make life even easier, the Shared UX plugin re-exports these components, so this becomes an implementation detail.

The nice thing is, dependency plugins that still need to use components from Shared UX but need to avoid the circular dependency can either work with us to hoist the dependency, or consume the pure component from @kbn/sharedux-components, (as we attempted with #126491). I have no doubt there is a better work-around in the medium term, but we need to start somewhere.

I'll flesh out the rest of the details shortly, but I wanted to get this architecture out for feedback before we create more components. I know there's a pressing need to get NoDataView decoupled, so this PR becomes pressing, as well.

How to use services and components after this change

When a consumer of our components and services wants to use them, they have two choices:

use the pre-wired Context from the Shared UX plugin, or
wire it up themselves with their own services value.

Pre-wired Context

The Shared UX plugin imports the SharedUxServicesProvider and populates the services using a servicesFactory that uses Kibana dependencies to fulfill the contract. This is how consumers of the hooks get to the Kibana version of these services: the SharedUxServicesProvider provides the API to those hooks, (and thus the components).

Wiring Manually

You can consider the code in the Shared UX plugin to be a manual wiring of the Provider for components, but Storybook and Jest are also examples:

majagrubic · 2022-03-14T15:54:23Z

I didn't mean to "request changes", just wrote some comments 😬 But since it's already there, it can read as "no merging until Maja understands how are the services wired" 😅

clintandrewhall · 2022-03-14T16:52:52Z

@elasticmachine merge upstream

majagrubic · 2022-03-14T18:23:04Z

+ * plugins-- we have to set this to `unknown`.  If and when `DataView` is exported from a
+ * stateless package, we can remove this.
+ */
+type DataView = unknown;


I accidentally left a comment in the PoC PR, so I'll just leave it here 😅
https://github.com/elastic/kibana/pull/127419/files#r826252775

This should really be prioritized imho.

majagrubic

The architectural change looks good. I would just suggest moving that comment to my question to the PR description itself, for easier reference later on.

* [shared-ux][packages] 2. Create Storybook Package * [shared-ux][packages] 3. Create Utility Package (#127549) * [shared-ux][packages] 3. Create Utility Package * [shared-ux][packages] 4. Create Components Package (#127551) Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

spalger

LGTM, thanks for moving more to packages!

…services

clintandrewhall · 2022-03-15T04:56:11Z

@elasticmachine merge upstream

…ervices

clintandrewhall · 2022-03-16T18:27:10Z

@elasticmachine merge upstream

kibana-ci · 2022-03-16T21:09:21Z

💛 Build succeeded, but was flaky

Test Failures

[job] [logs] Default CI Group #2 / Canvas app security feature controls no canvas privileges "before all" hook for "returns a 403"

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`sharedUX`	61	28	-33

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
`@kbn/shared-ux-components`	-	2	+2
`@kbn/shared-ux-services`	-	43	+43
`@kbn/shared-ux-storybook`	-	2	+2
`@kbn/shared-ux-utility`	-	3	+3
total			+50

Async chunks

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

id	before	after	diff
`sharedUX`	102.9KB	0.0B	-102.9KB

Public APIs missing exports

Total count of every type that is part of your API that should be exported but is not. This will cause broken links in the API documentation system. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats exports for more detailed information.

id	before	after	diff
`@kbn/shared-ux-components`	-	2	+2
`kibana`	302	309	+7
`sharedUX`	1	0	-1
total			+8

Page load bundle

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

id	before	after	diff
`sharedUX`	5.5KB	2.4KB	-3.1KB

Unknown metric groups

API count

id	before	after	diff
`@kbn/shared-ux-components`	-	18	+18
`@kbn/shared-ux-services`	-	67	+67
`@kbn/shared-ux-storybook`	-	10	+10
`@kbn/shared-ux-utility`	-	9	+9
`sharedUX`	16	6	-10
total			+94

async chunk count

id	before	after	diff
`sharedUX`	5	0	-5

ESLint disabled in files

id	before	after	diff
`@kbn/shared-ux-components`	-	2	+2
`sharedUX`	4	2	-2
total			-0

ESLint disabled line counts

id	before	after	diff
`@kbn/shared-ux-components`	-	3	+3
`@kbn/shared-ux-services`	-	1	+1
`@kbn/shared-ux-storybook`	-	1	+1
`sharedUX`	3	0	-3
total			+2

Total ESLint disabled count

id	before	after	diff
`@kbn/shared-ux-components`	-	5	+5
`@kbn/shared-ux-services`	-	1	+1
`@kbn/shared-ux-storybook`	-	1	+1
`sharedUX`	7	2	-5
total			+2

History

💔 Build #31096 failed 0bb9bb2
💔 Build #31042 failed 7e027c7
💚 Build #30534 succeeded 0f7b1cc
💔 Build #30303 failed 645ab34
💔 Build #30292 failed 2cf8743
💔 Build #30278 failed 87a0ea7

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

cchaos

Sass file move LGTM 😉

* [shared-ux][packages] 1. Create Services Package * Address review feedback * [shared-ux][packages] 2. Create Storybook Package (elastic#127548) * [shared-ux][packages] 2. Create Storybook Package * [shared-ux][packages] 3. Create Utility Package (elastic#127549) * [shared-ux][packages] 3. Create Utility Package * [shared-ux][packages] 4. Create Components Package (elastic#127551) Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> * Merging * Adding docs * A few fixes * Fix TS types * Fix TS types * Fix i18n Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

clintandrewhall requested a review from a team March 11, 2022 21:23

This was referenced Mar 11, 2022

[shared-ux][packages] 2. Create Storybook Package #127547

Closed

[shared-ux][packages] 1. Create Services Package #127544

Closed

[shared-ux][packages] 2. Create Storybook Package #127548

Merged

clintandrewhall added the backport:skip This PR does not require backporting label Mar 11, 2022

clintandrewhall mentioned this pull request Mar 11, 2022

[shared-ux][packages] 3. Create Utility Package #127549

Merged

1 task

[shared-ux][packages] 1. Create Services Package

13efeb8

clintandrewhall force-pushed the shared_ux/packages/services branch from d27684c to 13efeb8 Compare March 11, 2022 21:51

This was referenced Mar 11, 2022

[shared-ux][packages] 4. Create Components Package #127551

Merged

[SharedUX][PoC] Move to a package architecture #127419

Closed

majagrubic suggested changes Mar 14, 2022

View reviewed changes

Merge branch 'main' into shared_ux/packages/services

e990d54

spalger reviewed Mar 14, 2022

View reviewed changes

Comment thread packages/kbn-shared-ux-services/src/services/editors.ts

Address review feedback

dddafc0

clintandrewhall force-pushed the shared_ux/packages/services branch from 15785cb to dddafc0 Compare March 14, 2022 17:39

clintandrewhall requested a review from majagrubic March 14, 2022 17:41

majagrubic reviewed Mar 14, 2022

View reviewed changes

majagrubic approved these changes Mar 14, 2022

View reviewed changes

clintandrewhall requested review from a team as code owners March 14, 2022 21:25

spalger approved these changes Mar 14, 2022

View reviewed changes

clintandrewhall added 2 commits March 14, 2022 16:33

Merge remote-tracking branch 'upstream/main' into shared_ux/packages/…

aa97305

…services

Merging

87a0ea7

clintandrewhall changed the title ~~[shared-ux][packages] 1. Create Services Package~~ [shared-ux] Move to Package-based Architecture Mar 15, 2022

Adding docs

26b25e3

clintandrewhall force-pushed the shared_ux/packages/services branch from beda172 to 26b25e3 Compare March 15, 2022 04:56

Merge branch 'main' into shared_ux/packages/services

2cf8743

clintandrewhall mentioned this pull request Mar 15, 2022

[meta] Track plugin dependency workarounds in Shared UX packages #127695

Open

clintandrewhall added 4 commits March 15, 2022 00:38

A few fixes

645ab34

Fix TS types

0f7b1cc

Merge remote-tracking branch 'upstream' into shared_ux/packages/services

70b1661

Merge remote-tracking branch 'elastic/main' into shared_ux/packages/s…

7e027c7

…ervices

clintandrewhall changed the title ~~[shared-ux] Move to Package-based Architecture~~ [sharedUX] Move to Package-based Architecture Mar 16, 2022

Fix TS types

9be7c74

clintandrewhall and others added 3 commits March 16, 2022 13:32

Merge branch 'main' into shared_ux/packages/services

d3786b2

Merge branch 'main' into shared_ux/packages/services

0bb9bb2

Fix i18n

3494d5e

clintandrewhall enabled auto-merge (squash) March 16, 2022 21:13

cchaos approved these changes Mar 16, 2022

View reviewed changes

clintandrewhall merged commit 71af73c into main Mar 16, 2022

clintandrewhall deleted the shared_ux/packages/services branch March 16, 2022 21:13

clintandrewhall self-assigned this Mar 17, 2022

clintandrewhall mentioned this pull request Mar 17, 2022

[SharedUX] Fix issue with services package; fix ExitFullScreenButton #127988

Merged

Uh oh!

Conversation

clintandrewhall commented Mar 11, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Why?

Packages

Plugin

How to use services and components after this change

Pre-wired Context

Wiring Manually

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

majagrubic commented Mar 14, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

clintandrewhall commented Mar 14, 2022

Uh oh!

Uh oh!

majagrubic Mar 14, 2022

Choose a reason for hiding this comment

Uh oh!

majagrubic Mar 14, 2022

Choose a reason for hiding this comment

Uh oh!

majagrubic left a comment

Choose a reason for hiding this comment

Uh oh!

spalger left a comment

Choose a reason for hiding this comment

Uh oh!

clintandrewhall commented Mar 15, 2022

Uh oh!

clintandrewhall commented Mar 16, 2022

Uh oh!

kibana-ci commented Mar 16, 2022

💛 Build succeeded, but was flaky

Test Failures

Metrics [docs]

Module Count

Public APIs missing comments

Async chunks

Public APIs missing exports

Page load bundle

API count

async chunk count

ESLint disabled in files

ESLint disabled line counts

Total ESLint disabled count

History

Uh oh!

cchaos left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

clintandrewhall commented Mar 11, 2022 •

edited

Loading

majagrubic commented Mar 14, 2022 •

edited

Loading