[Infra] Migrate infra from styled-components to @emotion

[MiriamAparicio]

Closes #202255

Summary

While working on the visual refresh for the new EUI theme Borealis we figured that was a good time to do the recommended migration from styled-components to @emotion

What has been done

• Migrate infra plugin from styled-components to @emotion
• Eui Visual Refresh for Borealis new theme
• All usage of color palette tokens and functions now pull from the theme, and correctly update to use new colors when the theme changes from Borealis to Amsterdam and vice versa
• All references to renamed tokens have been updated to use the new token name
• Remove usage of deprecated useEuiBackgroundColor
• All usages of "success" colors have been updated to accentSecondary and textAccentSecondary as needed

How to test

Running Kibana with the Borealis theme

In order to run Kibana with Borealis, you'll need to do the following:

• Set the following in kibana.dev.yml: uiSettings.experimental.themeSwitcherEnabled: true
• Run Kibana with the following environment variable set: KBN_OPTIMIZER_THEMES="borealislight,borealisdark,v8light,v8dark" yarn start
• This will expose a toggle under Stack Management > Advanced Settings > Theme version, which you can use to toggle between Amsterdam and Borealis.

[elasticmachine]

Pinging @elastic/obs-ux-infra_services-team (Team:obs-ux-infra_services)

[github-actions]

🤖 GitHub comments

Expand to view the GitHub comments

Just comment with:

• /oblt-deploy : Deploy a Kibana instance using the Observability test environments.
• run docs-build : Re-trigger the docs validation. (use unformatted text in the comment!)

[maryam-saeidi]

Why do we need to use as PartialTheme here?

[MiriamAparicio]

The types coming from the emotion Theme and the type requested for Settings theme doesn't match, we need to cast it as PartialTheme to work, I'm open to suggestions on how to fix it in a different way

[Bluefinger]

Won't this potentially be an issue for flakiness should there be any further changes to the design system or theming?

[MiriamAparicio]

I thought so, I will check if we can actually not pass the color for the test, or another option

[jennypavlova]

I added some nits but haven't tested it yet ( I will add a separate comment if I find issues while testing but the code looks good 💯 )

[rmyz]

LGTM

[tonyghiani]

nit: this is a deprecated React feature, prefer switching over a function react component if you need default props.

[MiriamAparicio]

Found this as a suggestion to replace the attrs on styled components but you're right it's a bit old, I'll see if I found something else

[tonyghiani]

Hope this helps, it should make the trick for this case (coded only, check if everything works fine on Kibana please):

export const LogStatusbar = (props: EuiFlexGroupProps) => {
  const { euiTheme } = useEuiTheme();

  return (
    <EuiFlexGroup
      alignItems="center"
      gutterSize="none"
      justifyContent="flexEnd"
      css={css`
        padding: ${euiTheme.size.s};
        border-top: ${euiTheme.border.thin};
        max-height: 48px;
        min-height: 48px;
        background-color: ${euiTheme.colors.emptyShade};
        flex-direction: row;
      `}
      {...props}
    />
  );
};

[tonyghiani]

@MiriamAparicio I left some notes but there are more similar across the PR, the color tokens used as shades (emptyShade, 'darkShade`, etc...) are all deprecated and should change with other colors from the palette, this internal guide might help you picking the right color.

Just seen your comment here, if the EUI team is ok keeping those around, I'm 👌

[MiriamAparicio]

@tonyghiani the comment wasn't in slack but in another PR related with the visual refresh, #200814 (comment)

[jennypavlova]

I saw some errors while testing (And added some questions about some background colors):

• Undefined values:

  • [ Dark Mode | Amsterdam ] Host details view -> Logs tab ('euiColorEmptyShade'):
    
  • [Dark Mode | Borealis] Container -> Metrics ('darkMode')

  

• Colors:

  • [Light Mode | Borealis] Host Details -> Processes tab -> Process charts: With the new background the chart lines are barely visible:
  - Q: Is the background of the charts the correct color 🤔 ?

  

Not sure if related to the PR (probably not):

[mgadewoll]

Question: Is it expected that this container always has a white background, also in dark mode?
If it should update the background based on colorMode (having a dark background in dark mode) then this should rather use backgroundBasePlain.

[MiriamAparicio]

Yeah, makes sense, it already looks dark in dark mode though

[MiriamAparicio]

I will change it as ghost is deprecated already

[mgadewoll]

it already looks dark in dark mode though

I had a look and it is white on dark mode but it's using an EuiPanel as content which actually updates colors.

If this background color for the sticky container is not needed, we could also remove it.

[jennypavlova]

Tested again and it looks good now 💯

[mgadewoll]

Thanks for the updates! Awesome job migrating off styled components! 🎉
Changes LGTM from EUI side 👍

[patpscal]

Hi @miriam

Using https://tkajtoch-pr-202405-202255-poc-migration-to-emotion.kbndev.co/

• Inventory: Couldn't load any data
• Infrastructure inventory: Couldn't load any data

But I was able to check

Metrics Explorer & Hosts:

Visualizations background won't work correctly, but I think updating them is not included in this iteration. Is that correct?

Hosts:

In the condition builder syntax, when creating an alert, the text (FOR, WHEN) should use textAccentSecondary (teal) instead of success (pure green)

Also, pending confirmation from EUI from misusage on the tour component Context

[MiriamAparicio]

@patpscal

Inventory: Couldn't load any data
Infrastructure inventory: Couldn't load any data

Yeah, I thought it will lack some data, there was a deployment made by @kuisathaverat but I think it's not available anymore

Visualizations background won't work correctly, but I think updating them is not included in this iteration. Is that correct?

Correct, that should be fixed by the Charts team

In the condition builder syntax, when creating an alert, the text (FOR, WHEN) should use textAccentSecondary (teal) instead of success (pure green)

I'll take a look

[MiriamAparicio]

@patpscal
Regarding this:

In the condition builder syntax, when creating an alert, the text (FOR, WHEN) should use textAccentSecondary (teal) instead of success (pure green)

The component from eui EuiExpression doesn't accept the new tokens, the color prop just accepts success or danger

Please @mgadewoll correct me if I'm wrong

[elasticmachine]

⏳ Build in-progress

• Buildkite Build
• Commit: 2223eeb
• Kibana Serverless Image: docker.elastic.co/kibana-ci/kibana-serverless:pr-202405-2223eeba53bd

History

• 💛 Build #257579 was flaky 12d44a4
• 💔 Build #257477 failed 0f155cf
• 💔 Build #257357 failed 9c2af1b
• 💚 Build #257262 succeeded 8deb498
• 💔 Build #257009 failed 78a8981

[MiriamAparicio]

No idea why this file ended up in my PR after the merge, can you check if it's ok and approve? @elastic/search-kibana

[crespocarlos]

Would this work? {} is the default value of the generic parameter

Suggested change

	theme?: UseEuiTheme<{}>;
	theme?: UseEuiTheme;

[MiriamAparicio]

I think so, i'll fix it on the next PR

[patpscal]

Hi @MiriamAparicio, got it. I just learned the EUI team will review their definition here https://github.com/orgs/elastic/projects/1150/views/12?pane=issue&itemId=90262619
So no changes required on our end for now, thank you!

[gvnmagni]

Apologies for getting into the conversation late, but I saw that you were describing an issue with a chart color that used to be blue and now with Borealis appears light teal.

How to deal with these cases is explained in this document, within the Datavis section.

To make it simple, the issue is that the order of colors within the datavis palette is now changed and Blue is now in a different place than before. Therefore, you just need to use euiTheme.colors.vis.euiColorVis2 to point to the desired blue

I hope this could help clarifying the issue, please feel free to ping me in case of need!

[MiriamAparicio]

Hi @gvnmagni
Thanks for pointing that out, I will have a look at the charts background in a follow-up PR

[kibanamachine]

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create automatically backports add a backport:* label or prevent reminders by adding the backport:skip label.
You can also create backports manually by running node scripts/backport --pr 202405 locally