[Alerting][UI] Using KibanaThemeProvider

[ymao1]

Resolves #118880

Summary

Wrapping triggers_actions_ui app render with KibanaThemeProvider. KibanaThemeProvider wraps EuiThemeProvider so removed usage of EuiThemeProvider

[kibana-ci]

💚 Build Succeeded

• Buildkite Build
• Commit: 149aabc
• Storybooks Preview

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
triggersActionsUi	332	330	-2

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
triggersActionsUi	236	237	+1

Async chunks

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

id	before	after	diff
triggersActionsUi	780.8KB	780.3KB	-513.0B

Page load bundle

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

id	before	after	diff
triggersActionsUi	53.9KB	53.8KB	-33.0B

Unknown metric groups

API count

id	before	after	diff
triggersActionsUi	245	246	+1

History

• 💔 Build #13664 failed a3d29ee

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

cc @ymao1

[elasticmachine]

Pinging @elastic/kibana-alerting-services (Team:Alerting Services)

[YulNaumenko]

LGTM

[chrisronline]

LGTM!

[claudiopro]

KibanaThemeProvider wraps EuiThemeProvider (1) so removed usage of EuiThemeProvider (2)

Not quite, unfortunately! The two context providers are different, despite they have the same name. EuiThemeProvider (1) comes from @elastic/eui:

kibana/src/plugins/kibana_react/public/theme/kibana_theme_provider.tsx

Line 12 in e5b279f

import { EuiThemeProvider } from '@elastic/eui';

while EuiThemeProvider (2), the one in use in Triggers Actions UI ,was defined here:

kibana/src/plugins/kibana_react/common/eui_styled_components.tsx

Lines 20 to 36 in 4681a80

	const EuiThemeProvider = <
	OuterTheme extends styledComponents.DefaultTheme = styledComponents.DefaultTheme
	>({
	darkMode = false,
	...otherProps
	}: Omit<ThemeProviderProps<OuterTheme, OuterTheme & EuiTheme>, 'theme'> & {
	darkMode?: boolean;
	}) => (
	<ThemeProvider
	{...otherProps}
	theme={(outerTheme?: OuterTheme) => ({
	...outerTheme,
	eui: darkMode ? euiDarkVars : euiLightVars,
	darkMode,
	})}
	/>
	);

kibana/src/plugins/kibana_react/common/eui_styled_components.tsx

Line 56 in 4681a80

export { css, euiStyled, EuiThemeProvider, createGlobalStyle, keyframes, withTheme };

cc @pgayvallet FYI this may be misleading

[pgayvallet]

Not quite, unfortunately! The two context providers are different

Well well... That's the first time I'm hearing about this ThemeProvider used for styled-component. But that's right, this one is not the EUI's one, so if it was previously used by apps, it needs to be preserved in addition to KibanaThemeProvider.

Thanks for the heads up