[kibana_react] Extract `<FieldButton />` and `<FieldIcon/>` to a package #115377

Dosant · 2021-10-18T14:17:36Z

We would like to clean up kibana_react and kibana_utils by moving some of shared stateless code that isn't tightly coupled to core's APIs into packages. This will not only allow us to declutter these plugins which became a place for putting code that is shared between plugins, but will also allow us to reduce initial bundle size because code from packages can be imported in async chunks only! (read on packages vs plugins).

This is an initial "example" pr which moves <FieldButton /> and <FieldIcon/> to a package. It also resolves some missing pieces we had that would allow having a react component with scss in a @kbn/ package (thanks to operations team Dosant#6)
This will serve as a blueprint for moving other components.

p.s. initially, I started with KibanaPageTemplate component but decided to hold off and keep it in a plugin: #114990 (comment)

…scss-in-packages

Dosant · 2021-10-19T15:05:15Z

@elasticmachine merge upstream

Dosant · 2021-10-20T09:11:22Z

@elasticmachine merge upstream

Dosant · 2021-10-20T15:13:07Z

@elasticmachine merge upstream

kibanamachine · 2021-10-20T17:32:55Z

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`discover`	400	415	+15
`graph`	154	158	+4
`kibanaReact`	354	341	-13
`lens`	834	849	+15
`maps`	839	843	+4
`osquery`	239	243	+4
`securitySolution`	2769	2771	+2
`stackAlerts`	50	55	+5
total			+36

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/react-field`	-	10	+10
`kibanaReact`	245	204	-41
total			-31

Async chunks

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

id	before	after	diff
`discover`	332.9KB	343.9KB	+11.0KB
`graph`	403.3KB	404.7KB	+1.4KB
`lens`	1.0MB	1.0MB	+9.4KB
`maps`	2.7MB	2.7MB	+1.3KB
`osquery`	866.3KB	870.6KB	+4.3KB
`securitySolution`	4.6MB	4.6MB	+882.0B
`stackAlerts`	159.0KB	160.7KB	+1.7KB
total			+29.9KB

Page load bundle

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

id	before	after	diff
`kibanaReact`	80.9KB	72.2KB	-8.7KB
`osquery`	7.5KB	7.5KB	+54.0B
`stackAlerts`	12.0KB	12.1KB	+54.0B
total			-8.6KB

Unknown metric groups

API count

id	before	after	diff
`@kbn/react-field`	-	21	+21
`kibanaReact`	282	228	-54
total			-33

History

💔 Build #163142 failed 84d8328
💔 Build #162765 failed 60ae39f
💔 Build #162638 failed eb5ac44
💚 Build #162571 succeeded b4a1520
💚 Build #162092 succeeded 45698bb

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

patrykkopycinski

Asset management LGTM

stratoula · 2021-10-25T07:45:55Z

@elasticmachine merge upstream

stratoula · 2021-10-25T08:59:08Z

@Dosant I see that it fails on yarn kbn bootstrap with this failure

Dosant · 2021-10-25T09:27:41Z

@stratoula, thanks, looks like new usage of a component with merging main, I'll fix

stratoula

VisEditors code changes LGTM. I tested Lens and everything seems to work as expected :)

spalger

Operations LGTM

jloleysens

Great work @Dosant , code changes LGTM. Happy to merge with passing CI 👍🏻

packages/kbn-react-field/README.md

Co-authored-by: Jean-Louis Leysens <[email protected]>

…scss-in-packages # Conflicts: # src/plugins/presentation_util/public/components/field_picker/field_picker.tsx

Dosant · 2021-10-28T09:31:01Z

@elasticmachine merge upstream

Dosant · 2021-10-29T08:58:11Z

@elasticmachine merge upstream

Dosant · 2021-10-30T07:35:25Z

@elasticmachine merge upstream

…ss-in-packages

kibanamachine · 2021-11-08T16:20:58Z

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`discover`	345	355	+10
`graph`	148	151	+3
`kibanaReact`	307	298	-9
`lens`	672	682	+10
`maps`	797	800	+3
`osquery`	238	241	+3
`presentationUtil`	263	273	+10
`securitySolution`	2752	2754	+2
`stackAlerts`	45	48	+3
total			+35

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/react-field`	-	10	+10
`kibanaReact`	245	204	-41
total			-31

Async chunks

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

id	before	after	diff
`discover`	303.3KB	310.7KB	+7.4KB
`graph`	392.2KB	393.4KB	+1.2KB
`kibanaReact`	206.7KB	206.7KB	-10.0B
`lens`	947.7KB	953.7KB	+6.0KB
`maps`	2.6MB	2.6MB	+1.2KB
`osquery`	934.9KB	938.7KB	+3.8KB
`presentationUtil`	210.1KB	210.1KB	+12.0B
`securitySolution`	4.5MB	4.5MB	+879.0B
`stackAlerts`	158.4KB	159.7KB	+1.3KB
total			+21.6KB

Page load bundle

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

id	before	after	diff
`kibanaReact`	62.8KB	57.3KB	-5.5KB
`osquery`	6.8KB	6.9KB	+54.0B
`presentationUtil`	62.5KB	68.4KB	+5.9KB
`stackAlerts`	11.9KB	11.9KB	+54.0B
total			+578.0B

Unknown metric groups

API count

id	before	after	diff
`@kbn/react-field`	-	21	+21
`kibanaReact`	282	228	-54
total			-33

History

💔 Build #4982 failed 605da9f
💚 Build #3027 succeeded 3106fcb
💛 Build #2757 was flaky 269d319
💔 Build #2399 failed f61f811
💛 Build #2018 was flaky 7b72692
💚 Build #1327 succeeded 0c0eec1

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

Dosant · 2021-11-08T16:37:35Z

This will serve as an example of react components in a package for #114990 and others, but unfortunately, no initial bundle size improvement for this one at all because since recently @elastic/kibana-presentation started importing these components to presentation_utils plugins forcing them into Kibana's initial bundle

@elastic/kibana-presentation, fyi, you can read up on plugins vs packges here to see if you it would make sense to move some of presentation_utils code into a package similar to kibana_react

kibanamachine · 2021-11-10T16:39:50Z

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create backports run node scripts/backport --pr 115377 or prevent reminders by adding the backport:skip label.

Dosant added 5 commits October 18, 2021 16:12

extract field components to pacakge

a9783c3

extract field components to a package

45698bb

Merge branch 'master' of github.com:elastic/kibana into d/2021-10-18-…

6aca6be

…scss-in-packages

update codeowners & limits

b4a1520

improve code splitting

eb5ac44

Dosant mentioned this pull request Oct 19, 2021

[KibanaReact] Reduce kibanaReact bundle size #114990

Open

Merge branch 'master' into d/2021-10-18-scss-in-packages

60ae39f

Merge branch 'master' into d/2021-10-18-scss-in-packages

84d8328

Merge branch 'master' into d/2021-10-18-scss-in-packages

dabea01

Dosant added Feature:kibana-react performance release_note:skip Skip the PR/issue when compiling release notes Team:AppServicesUx technical debt Improvement of the software architecture and operational architecture v8.0.0 labels Oct 21, 2021

Dosant marked this pull request as ready for review October 21, 2021 10:05

Dosant requested review from a team as code owners October 21, 2021 10:05

patrykkopycinski approved these changes Oct 21, 2021

View reviewed changes

Merge branch 'master' into d/2021-10-18-scss-in-packages

4563dcd

fix imports

0c0eec1

stratoula approved these changes Oct 25, 2021

View reviewed changes

spalger approved these changes Oct 25, 2021

View reviewed changes

jloleysens approved these changes Oct 26, 2021

View reviewed changes

packages/kbn-react-field/README.md Outdated Show resolved Hide resolved

Dosant and others added 2 commits October 27, 2021 11:44

Update packages/kbn-react-field/README.md

261d35b

Co-authored-by: Jean-Louis Leysens <[email protected]>

Merge branch 'master' of github.com:elastic/kibana into d/2021-10-18-…

7b72692

…scss-in-packages # Conflicts: # src/plugins/presentation_util/public/components/field_picker/field_picker.tsx

Dosant added v8.1.0 and removed v8.0.0 labels Oct 28, 2021

Merge branch 'master' into d/2021-10-18-scss-in-packages

f61f811

timroes approved these changes Oct 28, 2021

View reviewed changes

Merge branch 'master' into d/2021-10-18-scss-in-packages

269d319

kibanamachine and others added 3 commits October 30, 2021 03:35

Merge branch 'main' into d/2021-10-18-scss-in-packages

3106fcb

Merge branch 'main' of github.com:elastic/kibana into d/2021-10-18-sc…

605da9f

…ss-in-packages

fix exports

110bb87

Dosant merged commit bc56e60 into elastic:main Nov 8, 2021

kibanamachine added the backport missing Added to PRs automatically when the are determined to be missing a backport. label Nov 10, 2021

Dosant added backport:skip This commit does not require backporting and removed backport missing Added to PRs automatically when the are determined to be missing a backport. labels Nov 11, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[kibana_react] Extract `<FieldButton />` and `<FieldIcon/>` to a package #115377

[kibana_react] Extract `<FieldButton />` and `<FieldIcon/>` to a package #115377

Dosant commented Oct 18, 2021 •

edited

Loading

Dosant commented Oct 19, 2021

Dosant commented Oct 20, 2021

Dosant commented Oct 20, 2021

kibanamachine commented Oct 20, 2021

API count

patrykkopycinski left a comment

stratoula commented Oct 25, 2021

stratoula commented Oct 25, 2021

Dosant commented Oct 25, 2021

stratoula left a comment

spalger left a comment

jloleysens left a comment

Dosant commented Oct 28, 2021

Dosant commented Oct 29, 2021

Dosant commented Oct 30, 2021

kibanamachine commented Nov 8, 2021

API count

Dosant commented Nov 8, 2021

kibanamachine commented Nov 10, 2021

[kibana_react] Extract <FieldButton /> and <FieldIcon/> to a package #115377

[kibana_react] Extract <FieldButton /> and <FieldIcon/> to a package #115377

Conversation

Dosant commented Oct 18, 2021 • edited Loading

Dosant commented Oct 19, 2021

Dosant commented Oct 20, 2021

Dosant commented Oct 20, 2021

kibanamachine commented Oct 20, 2021

💚 Build Succeeded

Metrics [docs]

Module Count

Public APIs missing comments

Async chunks

Page load bundle

API count

History

patrykkopycinski left a comment

Choose a reason for hiding this comment

stratoula commented Oct 25, 2021

stratoula commented Oct 25, 2021

Dosant commented Oct 25, 2021

stratoula left a comment

Choose a reason for hiding this comment

spalger left a comment

Choose a reason for hiding this comment

jloleysens left a comment

Choose a reason for hiding this comment

Dosant commented Oct 28, 2021

Dosant commented Oct 29, 2021

Dosant commented Oct 30, 2021

kibanamachine commented Nov 8, 2021

💚 Build Succeeded

Metrics [docs]

Module Count

Public APIs missing comments

Async chunks

Page load bundle

API count

History

Dosant commented Nov 8, 2021

kibanamachine commented Nov 10, 2021

[kibana_react] Extract `<FieldButton />` and `<FieldIcon/>` to a package #115377

[kibana_react] Extract `<FieldButton />` and `<FieldIcon/>` to a package #115377

Dosant commented Oct 18, 2021 •

edited

Loading