Consolidate and deprecate Kibana Context

[clintandrewhall]

Pre-req for #56406

Background

There are a number of context-related issues that have existed for a while:

Kibana Context Provider "spaceships"

Kibana uses React Context to inject stateful dependencies from its plugins. The number of Context Providers a plugin can end up using can create a "spaceship" of descendents. So we've needed a Provider "composer"-- a quick way of combining Providers into a single React node-- for a while now.

Untyped contextual services when using KibanaContextProvider and useKibana hook

The KibanaContextProvider allows for untyped "storage" of a plugins dependencies. The hook, therefore, relies on regularly inconsistent usage, which creates runtime errors that cannot be caught in development.

Duplication of Theme and other core providers

The kibana_react plugin has been providing both a theme and untyped "services" provider, these utility Providers have been copied around quite a bit... and sometimes enhanced. We've needed to move these to a package for a while now.

Inability to set global context parameters consistently.

We've wanted to fix "global default" issues like #56406 for a while now, but we haven't had a universal context from which every plugin descends. By creating a single consumable provider, we can propagate uiSettings and other defaults consistently.

Inconsistent "dark mode" and other context issues

While plugins fairly consistently wrap their application renders with i18n and EuiProvider (or similar), async or lazy loads are inconsistent. As a result we get "light mode" renders in "dark mode" contexts. A base context that can be easily consumed in these async renders is needed.

Summary

This PR does a number of things:

• Consolidates theme Providers into a single package-based Provider, (removing circular dependencies).
• Creates a Provider composition utility for combining an array of Providers and enforcing a union of required prop types.
• Uses this utility to Combine I18nProvider and the new KibanaThemeProvider to create a base KibanaContextProvider.
• Deprecates and updates all other uses.

Pre-commit next steps

• Documentation

Post-commit next steps

• Replace usage of deprecated Providers and delete.
• Begin constructing replacement of createKibanaReactContext and useKibana.
• Fix Add a configuration setting for default "Rows Per Page" setting in Management #56406
• Add hooks for plugins to define and access their base Context compositions for each mounted application.

[elasticmachine]

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

[clintandrewhall]

@elastic/kibana-data-discovery Could you weigh in on this test failure? The tests are passing locally, curious if this one is ever flaky?

[kertal]

@elastic/kibana-data-discovery Could you weigh in on this test failure? The tests are passing locally, curious if this one is ever flaky?

I followed up on slack, and to summarize my finding: it seems this test now takes double the time to before those changes. that's why these tests seems to run into timeouts because they now take more than 5s to execute. So it's recommendable to check what causes this performance issue

[wayneseymour]

@clintandrewhall that spaceship bit cracked me up. I needed that laugh lol

[wayneseymour]

@dmlemeshko do you know anything about the snapshot serializers for jest?
@pheyos what about you Robert, any idea what this is.
I'll start googling now too

[kc13greiner]

interactive setup - LGTM!

[clintandrewhall]

I've update this PR in light of #159638 -- which demonstrates why we need a unified Context for Kibana. We should be using EuiProvider for all things theme related, even colorMode. The theme service and observable from core should be used to set up the EuiProvider, not accessed directly. The difference is subtle but important, as we're blending the two concepts and messing up dark mode in the process. Hat tip to @kc13greiner for the patience and context, (pun intended).

We need to get #159719 resolved, as well. We're maintaining two code editors, and need to mark the deprecation/export the packaged code editor as soon as possible.

[kibana-ci]

💔 Build Failed

• Buildkite Build
• Commit: 111baf0
• Interpreting CI Failures
• Storybooks Preview

Failed CI Steps

• Jest Tests #1
• Jest Tests #5
• Jest Tests #6
• Jest Tests #8
• Jest Tests #9
• Jest Tests #12
• Jest Tests #13
• Jest Tests #14
• Jest Tests #15
• FTR Configs #6
• FTR Configs #6
• FTR Configs #14
• FTR Configs #14
• FTR Configs #20
• FTR Configs #20
• FTR Configs #24
• FTR Configs #24
• FTR Configs #29
• FTR Configs #29
• FTR Configs #31
• FTR Configs #31
• FTR Configs #37
• FTR Configs #37
• FTR Configs #39
• FTR Configs #39
• FTR Configs #45
• FTR Configs #45
• FTR Configs #48
• FTR Configs #48
• FTR Configs #49
• FTR Configs #49
• FTR Configs #51
• FTR Configs #51
• FTR Configs #52
• FTR Configs #52
• FTR Configs #53
• FTR Configs #53
• FTR Configs #58
• FTR Configs #58
• FTR Configs #59
• FTR Configs #59
• Build Storybooks

Test Failures

• [job] [logs] Jest Tests #6 / index actions should be able to unfreeze a frozen index
• [job] [logs] FTR Configs #52 / a11y tests not using sample data Management data views Index pattern field editor - all options shown
• [job] [logs] FTR Configs #52 / a11y tests not using sample data Management data views Index pattern field editor - all options shown
• [job] [logs] FTR Configs #6 / Canvas Canvas app smoke test loads workpage when clicked
• [job] [logs] FTR Configs #20 / Canvas Canvas app smoke test loads workpage when clicked
• [job] [logs] FTR Configs #31 / Canvas Canvas app smoke test loads workpage when clicked
• [job] [logs] FTR Configs #31 / Canvas Canvas app smoke test loads workpage when clicked
• [job] [logs] FTR Configs #6 / Canvas Canvas app smoke test loads workpage when clicked
• [job] [logs] FTR Configs #20 / Canvas Canvas app smoke test loads workpage when clicked
• [job] [logs] Jest Tests #15 / Header should render normally
• [job] [logs] Jest Tests #13 / LandingPageComponent renders the get started component
• [job] [logs] FTR Configs #37 / lens app - group 2 lens fields formatters tests keyword formatters "after all" hook for "should display truncate string formatter correctly"
• [job] [logs] FTR Configs #37 / lens app - group 2 lens fields formatters tests keyword formatters "after all" hook for "should display truncate string formatter correctly"
• [job] [logs] FTR Configs #37 / lens app - group 2 lens fields formatters tests keyword formatters should display url formatter correctly
• [job] [logs] FTR Configs #37 / lens app - group 2 lens fields formatters tests keyword formatters should display url formatter correctly
• [job] [logs] FTR Configs #49 / machine learning - anomaly detection anomaly charts in dashboard with multi metric job create new anomaly charts panel
• [job] [logs] FTR Configs #49 / machine learning - anomaly detection anomaly charts in dashboard with multi metric job create new anomaly charts panel
• [job] [logs] FTR Configs #39 / machine learning - anomaly detection anomaly explorer with farequote based multi metric job Anomaly Swim Lane as embeddable adds swim lane embeddable to a dashboard
• [job] [logs] FTR Configs #39 / machine learning - anomaly detection anomaly explorer with farequote based multi metric job Anomaly Swim Lane as embeddable adds swim lane embeddable to a dashboard
• [job] [logs] FTR Configs #51 / machine learning embeddables anomaly charts Accessibility with multi metric job create new anomaly charts panel
• [job] [logs] FTR Configs #51 / machine learning embeddables anomaly charts Accessibility with multi metric job create new anomaly charts panel
• [job] [logs] FTR Configs #58 / maps app documents source geo top hits split on string field should display top hits per entity
• [job] [logs] FTR Configs #58 / maps app documents source geo top hits split on string field should display top hits per entity
• [job] [logs] FTR Configs #59 / maps app geojson vector layer - es geo grid source geo_point should decorate feature properties with metrics properterties
• [job] [logs] FTR Configs #59 / maps app geojson vector layer - es geo grid source geo_point should decorate feature properties with metrics properterties
• [job] [logs] FTR Configs #14 / maps app point to point source should render lines
• [job] [logs] FTR Configs #14 / maps app point to point source should render lines
• [job] [logs] FTR Configs #58 / Reporting Functional Tests with Deprecated Security configuration enabled Security with reporting_user built-in role Canvas: Generate PDF does not allow user that does not have reporting_user role
• [job] [logs] FTR Configs #58 / Reporting Functional Tests with Deprecated Security configuration enabled Security with reporting_user built-in role Canvas: Generate PDF does not allow user that does not have reporting_user role
• [job] [logs] FTR Configs #48 / Reporting Functional Tests with Security enabled Security with reporting_user built-in role Canvas: Generate PDF does not allow user that does not have reporting privileges
• [job] [logs] FTR Configs #48 / Reporting Functional Tests with Security enabled Security with reporting_user built-in role Canvas: Generate PDF does not allow user that does not have reporting privileges
• [job] [logs] Jest Tests #15 / ScriptingWarningCallOut should render normally
• [job] [logs] Jest Tests #15 / spacesManagementApp mount() works for the create space page
• [job] [logs] Jest Tests #15 / spacesManagementApp mount() works for the edit space page
• [job] [logs] Jest Tests #15 / spacesManagementApp mount() works for the grid page
• [job] [logs] Jest Tests #6 / take action dropdown for Endpoint related actions should correctly enable/disable the "Respond" button should disable the button if host status is unenrolled
• [job] [logs] Jest Tests #14 / UrlFormatEditor should render normally
• [job] [logs] Jest Tests #13 / useAggregatedAnomaliesByJob does not throw error when aggregations is undefined
• [job] [logs] Jest Tests #13 / useAggregatedAnomaliesByJob returns formated data
• [job] [logs] Jest Tests #13 / useAggregatedAnomaliesByJob returns jobs sorted by name
• [job] [logs] Jest Tests #9 / useCasesMttr finds negative percentage change
• [job] [logs] Jest Tests #9 / useCasesMttr finds positive percentage change
• [job] [logs] Jest Tests #9 / useCasesMttr finds zero percentage change
• [job] [logs] Jest Tests #9 / useCasesMttr handles null mttr - compare time range
• [job] [logs] Jest Tests #9 / useCasesMttr handles null mttr - current & compare time range
• [job] [logs] Jest Tests #9 / useCasesMttr handles null mttr - current time range
• [job] [logs] Jest Tests #9 / useCasesMttr handles undefined mttr - current & compare time range
• [job] [logs] Jest Tests #9 / useCasesMttr loads initial state
• [job] [logs] Jest Tests #9 / useCriticalAlerts finds negative percentage change
• [job] [logs] Jest Tests #9 / useCriticalAlerts finds positive percentage change
• [job] [logs] Jest Tests #9 / useCriticalAlerts finds zero percentage change
• [job] [logs] Jest Tests #9 / useCriticalAlerts handles null data - compare time range
• [job] [logs] Jest Tests #9 / useCriticalAlerts handles null data - current & compare time range
• [job] [logs] Jest Tests #9 / useCriticalAlerts handles null data - current time range
• [job] [logs] Jest Tests #9 / useCriticalAlerts handles undefined data - current & compare time range
• [job] [logs] Jest Tests #9 / useCriticalAlerts loads initial state
• [job] [logs] Jest Tests #6 / useSignalIndex fetch alerts info
• [job] [logs] Jest Tests #6 / useSignalIndex if there is an error during createSignalIndex, we should get back signalIndexExists === false && signalIndexName == null
• [job] [logs] Jest Tests #6 / useSignalIndex if there is an error when fetching alerts info, signalIndexExists === false && signalIndexName == null
• [job] [logs] Jest Tests #6 / useSignalIndex init
• [job] [logs] Jest Tests #6 / useSignalIndex make sure that createSignalIndex have been called when trying to create signal index
• [job] [logs] Jest Tests #6 / useSignalIndex make sure that createSignalIndex is giving back the signal info
• [job] [logs] Jest Tests #9 / useSocTrends loads initial state
• [job] [logs] Jest Tests #1 / useUiSetting$ subscribes to observable using useObservable
• [job] [logs] Jest Tests #6 / useUserInfo returns default state
• [job] [logs] FTR Configs #45 / visualize app - new charts library visualize area charts should show correct chart
• [job] [logs] FTR Configs #45 / visualize app - new charts library visualize area charts should show correct chart
• [job] [logs] FTR Configs #29 / visualize app gauge chart should show Count
• [job] [logs] FTR Configs #29 / visualize app gauge chart should show Count
• [job] [logs] FTR Configs #53 / visualize app pie chart should show correct data
• [job] [logs] FTR Configs #53 / visualize app pie chart should show correct data
• [job] [logs] FTR Configs #48 / visualize app tag cloud chart should show correct tag cloud data
• [job] [logs] FTR Configs #48 / visualize app tag cloud chart should show correct tag cloud data
• [job] [logs] FTR Configs #24 / Visualize hybrid index pattern should render histogram line chart
• [job] [logs] FTR Configs #24 / Visualize hybrid index pattern should render histogram line chart
• [job] [logs] Jest Tests #12 / When using the ResponseActionFileDownloadLink component should show nothing if action is not complete
• [job] [logs] Jest Tests #12 / When using the ResponseActionFileDownloadLink component should show nothing if action was not successful
• [job] [logs] Jest Tests #12 / When using the ResponseActionFileDownloadLink component should show nothing if user does not have permission

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
core	449	452	+3
interactiveSetup	50	55	+5
kibanaReact	310	313	+3
kibanaUtils	168	174	+6
total			+17

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/code-editor-mocks	36	32	-4
@kbn/react-kibana-context	-	11	+11
@kbn/react-kibana-mount	-	8	+8
kibanaReact	154	155	+1
total			+16

Async chunks

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

id	before	after	diff
kibanaReact	209.3KB	209.3KB	+70.0B
kibanaUtils	60.8KB	60.8KB	+1.0B
total			+71.0B

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/react-kibana-context	-	1	+1

Page load bundle

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

id	before	after	diff
core	360.9KB	360.8KB	-32.0B
interactiveSetup	58.6KB	58.7KB	+97.0B
kibanaReact	51.3KB	51.5KB	+222.0B
kibanaUtils	70.8KB	71.0KB	+166.0B
total			+453.0B

Unknown metric groups

API count

id	before	after	diff
@kbn/code-editor-mocks	37	33	-4
@kbn/react-kibana-context	-	13	+13
@kbn/react-kibana-mount	-	11	+11
total			+20

ESLint disabled line counts

id	before	after	diff
enterpriseSearch	14	16	+2
securitySolution	409	413	+4
total			+6

References to deprecated APIs

id	before	after	diff
@kbn/ml-date-picker	0	1	+1
advancedSettings	3	5	+2
aiops	12	23	+11
banners	0	2	+2
cases	13	20	+7
console	1	4	+3
controls	27	33	+6
dashboard	16	28	+12
dashboardEnhanced	9	13	+4
data	74	92	+18
dataViewEditor	0	3	+3
dataViewFieldEditor	0	5	+5
dataViewManagement	65	69	+4
dataVisualizer	18	22	+4
discover	19	33	+14
embeddable	22	33	+11
eventAnnotation	15	17	+2
exploratoryView	66	68	+2
filesManagement	1	3	+2
fleet	58	80	+22
graph	79	85	+6
imageEmbeddable	1	3	+2
indexManagement	0	2	+2
inspector	0	2	+2
lens	82	90	+8
licensing	0	2	+2
maps	27	29	+2
ml	144	164	+20
monitoring	3	13	+10
navigation	0	3	+3
observability	38	40	+2
observabilityShared	0	2	+2
reporting	0	19	+19
runtimeFields	0	3	+3
savedObjects	100	102	+2
savedObjectsTagging	37	42	+5
security	37	41	+4
securitySolution	599	616	+17
synthetics	12	28	+16
telemetry	0	2	+2
timelines	10	12	+2
transform	30	61	+31
triggersActionsUi	9	17	+8
uiActions	0	2	+2
unifiedSearch	25	29	+4
uptime	23	28	+5
visTypeVislib	0	2	+2
visualizations	54	62	+8
total			+326

Total ESLint disabled count

id	before	after	diff
enterpriseSearch	15	17	+2
securitySolution	488	492	+4
total			+6

Unreferenced deprecated APIs

id	before	after	diff
kibanaReact	2	3	+1

History

• 💔 Build #141776 failed 0eb891c
• 💔 Build #141714 failed 13ee154
• 💔 Build #141305 failed 18dd4a7b675f789250771438ac6257120a376752
• 💔 Build #131934 failed 08b819e

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

[clintandrewhall]

I'm going to have to close this PR and start a new one... there's been way too much churn, and I need to adjust the strategy to a Root context, rather than a portable one. Thanks for the help, all.