[Fleet] Fix styled component theme lookup issue by nickofthyme · Pull Request #221979 · elastic/kibana

nickofthyme · 2025-05-29T20:17:36Z

Summary

This fixes an issue caused by changes in #220141, specifically here, which prevented the style components from receiving the correct colorMode.

Before

After

This is likely due to how we still use the deprecated EuiThemeProvider which needs to be passed the current colorMode. See code here...

kibana/x-pack/platform/plugins/shared/fleet/public/applications/integrations/app.tsx

Lines 105 to 107 in 088e80a

    
                           {/* This should be removed since theme is passed to `KibanaRenderContextProvider`, 
        
                           however, removing this breaks usages of `props.theme.eui` in styled components */} 
        
                           <EuiThemeProvider darkMode={isDarkMode}>

elasticmachine · 2025-05-29T20:17:42Z

Pinging @elastic/fleet (Team:Fleet)

jen-huang

Thanks for the fix! Would you also mind applying the same to the file at x-pack/platform/plugins/shared/fleet/public/applications/fleet/app.tsx? This plugin exports two apps (Integrations and Fleet) and we are seeing the same happening in both places. TIA :)

…-integrations-theme

nickofthyme · 2025-05-29T22:55:09Z

@jen-huang done

jen-huang

Thanks!!

elasticmachine · 2025-05-30T00:27:26Z

💔 Build Failed

Buildkite Build
Commit: e17c48e

Failed CI Steps

Test Failures

[job] [logs] FTR Configs #45 / Embeddable Alerts Table Embeddable alerts panel "before all" hook for "should only show alerts from the observability area (o11y+stack) when selecting it"
[job] [logs] FTR Configs #45 / Embeddable Alerts Table Embeddable alerts panel "before all" hook for "should only show alerts from the observability area (o11y+stack) when selecting it"
[job] [logs] FTR Configs #27 / lens serverless - group 1 - subgroup 1 lens smokescreen tests should transition from a multi-layer stacked bar to a multi-layer line chart and correctly remove all layers
[job] [logs] Fleet Cypress Tests #2 / View agents list Agent status filter should filter on healthy and unhealthy
[job] [logs] Fleet Cypress Tests #2 / View agents list Agent status filter should filter on unhealthy (1 result)
[job] [logs] Fleet Cypress Tests #2 / View agents list Bulk actions should allow to bulk upgrade agents and cancel that upgrade

Metrics [docs]

Async chunks

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

id	before	after	diff
`fleet`	1.7MB	1.7MB	+48.0B

History

💔 Build #303523 failed e2445d5

kibanamachine · 2025-05-30T01:43:27Z

Starting backport for target branches: 8.19

https://github.com/elastic/kibana/actions/runs/15337328202

kibanamachine · 2025-05-30T01:49:20Z

💔 All backports failed

Status	Branch	Result
❌	8.19	Backport failed because of merge conflicts You might need to backport the following PRs to 8.19: - [Theme] fix `theme$` usage when used with `useObservable` (#220141)

Manual backport

To create the backport manually run:

node scripts/backport --pr 221979

Questions ?

Please refer to the Backport tool documentation

nickofthyme · 2025-05-30T03:44:47Z

These Cypress tests are sooooo flaky! https://buildkite.com/elastic/kibana-pull-request/builds/303547#01971e5e-865b-408d-b586-d467da6776ac

## Summary This fixes an issue caused by changes in elastic#220141, specifically [here](https://github.com/elastic/kibana/pull/220141/files#diff-90215c9231256571f4b7369e58505a234b7f7b4082cf7c9fda47692787b52222L80-L83), which prevented the style components from receiving the correct `colorMode`.

## Summary This fixes an issue caused by changes in #220141, specifically [here](https://github.com/elastic/kibana/pull/220141/files#diff-e5bb3127661b2bd4a13f88f8793ee5e7cfdabe3a6deb5332064d28f7363eeb13L49-L51), which prevented the style components from receiving the correct `colorMode`. Similar issue fixed in #221979. In short we cannot call `useKibanaIsDarkMode` outside of the global theme provider. This usage of the `useDarkMode` utility is needed in this one case, hopefully soon to be removed with styled-components.

…0141) (#221708) # Backport This will backport the following commits from `main` to `8.19`: - #220141 - #221979 - #222099 --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

## Summary This fixes an issue caused by changes in elastic#220141, specifically [here](https://github.com/elastic/kibana/pull/220141/files#diff-90215c9231256571f4b7369e58505a234b7f7b4082cf7c9fda47692787b52222L80-L83), which prevented the style components from receiving the correct `colorMode`.

## Summary This fixes an issue caused by changes in elastic#220141, specifically [here](https://github.com/elastic/kibana/pull/220141/files#diff-e5bb3127661b2bd4a13f88f8793ee5e7cfdabe3a6deb5332064d28f7363eeb13L49-L51), which prevented the style components from receiving the correct `colorMode`. Similar issue fixed in elastic#221979. In short we cannot call `useKibanaIsDarkMode` outside of the global theme provider. This usage of the `useDarkMode` utility is needed in this one case, hopefully soon to be removed with styled-components.

## Summary This fixes an issue caused by changes in elastic#220141, specifically [here](https://github.com/elastic/kibana/pull/220141/files#diff-90215c9231256571f4b7369e58505a234b7f7b4082cf7c9fda47692787b52222L80-L83), which prevented the style components from receiving the correct `colorMode`.

## Summary This fixes an issue caused by changes in elastic#220141, specifically [here](https://github.com/elastic/kibana/pull/220141/files#diff-e5bb3127661b2bd4a13f88f8793ee5e7cfdabe3a6deb5332064d28f7363eeb13L49-L51), which prevented the style components from receiving the correct `colorMode`. Similar issue fixed in elastic#221979. In short we cannot call `useKibanaIsDarkMode` outside of the global theme provider. This usage of the `useDarkMode` utility is needed in this one case, hopefully soon to be removed with styled-components.

fix: styled component theme lookup in integrations

e2445d5

nickofthyme requested a review from a team as a code owner May 29, 2025 20:17

botelastic bot added the Team:Fleet Team label for Observability Data Collection Fleet team label May 29, 2025

nickofthyme added release_note:fix backport:version Backport to applied version labels v9.1.0 v8.19.0 and removed Team:Fleet Team label for Observability Data Collection Fleet team labels May 29, 2025

nickofthyme enabled auto-merge (squash) May 29, 2025 20:22

Merge branch 'main' into fix-integrations-theme

6c47d40

botelastic bot added the Team:Fleet Team label for Observability Data Collection Fleet team label May 29, 2025

jen-huang reviewed May 29, 2025

View reviewed changes

nickofthyme added 2 commits May 29, 2025 15:54

chore: revert changes to fleet/app, add default to prevent re-renders

e386bec

Merge remote-tracking branch 'origin/fix-integrations-theme' into fix…

e17c48e

…-integrations-theme

nickofthyme requested a review from jen-huang May 29, 2025 22:55

jen-huang approved these changes May 29, 2025

View reviewed changes

nickofthyme changed the title ~~[Integrations] Fix styled component theme lookup issue~~ May 30, 2025

nickofthyme merged commit f021985 into elastic:main May 30, 2025
10 checks passed

nickofthyme deleted the fix-integrations-theme branch May 30, 2025 01:43

nickofthyme mentioned this pull request May 30, 2025

[8.19] [Theme] fix theme$ usage when used with useObservable (#220141) #221708

Merged

nickofthyme added the backported label May 30, 2025

kibanamachine mentioned this pull request May 30, 2025

[TSVB/SCSS] Migrate all remaining .scss styles to Emotion CSS-in-JS #221484

Merged

1 task

nickofthyme mentioned this pull request May 30, 2025

[Security] Fix styled-components theming #222099

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Fleet] Fix styled component theme lookup issue#221979

[Fleet] Fix styled component theme lookup issue#221979
nickofthyme merged 4 commits intoelastic:mainfrom
nickofthyme:fix-integrations-theme

nickofthyme commented May 29, 2025 •

edited by kibanamachine

Loading

elasticmachine commented May 29, 2025

jen-huang left a comment

nickofthyme commented May 29, 2025

jen-huang left a comment

elasticmachine commented May 30, 2025 •

edited

Loading

Uh oh!

kibanamachine commented May 30, 2025

kibanamachine commented May 30, 2025

nickofthyme commented May 30, 2025

Labels

4 participants

	{/* This should be removed since theme is passed to `KibanaRenderContextProvider`,
	however, removing this breaks usages of `props.theme.eui` in styled components */}
	<EuiThemeProvider darkMode={isDarkMode}>

Conversation

nickofthyme commented May 29, 2025 • edited by kibanamachine Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Before

After

elasticmachine commented May 29, 2025

jen-huang left a comment

Choose a reason for hiding this comment

nickofthyme commented May 29, 2025

jen-huang left a comment

Choose a reason for hiding this comment

elasticmachine commented May 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

💔 Build Failed

Failed CI Steps

Test Failures

Metrics [docs]

Async chunks

History

Uh oh!

kibanamachine commented May 30, 2025

kibanamachine commented May 30, 2025

💔 All backports failed

Manual backport

Questions ?

nickofthyme commented May 30, 2025

Labels

4 participants

nickofthyme commented May 29, 2025 •

edited by kibanamachine

Loading

elasticmachine commented May 30, 2025 •

edited

Loading