Migrate styles from styled-components to emotion

[maryam-saeidi]

Summary

There is a plan to migrate from styled-components to emotion, and this ticket focuses on styled-components usages for obs-ux-management related plugins and related information for this migration. This migration helps to avoid issues related to sharing components with platform plugins, as they have already started this migration. (Avoiding issues such as #186969)

Here is a comment from EUI team about this migration.

Reference point for migration: #199715 (comment)

Here are hooks that can be used instead of styled-components ThemeContext: (comment)

• useEuiTheme() (https://eui.elastic.co/#/theming/theme-provider#consuming-with-the-react-hook)

  const { euiTheme } = useEuiTheme();
  <div
    css={css`
      background: ${euiTheme.colors.lightShade};
      padding: calc(${euiTheme.size.base} * 2);
    `}
  />
  

• Or, you can use Emotion's built-in theming: https://eui.elastic.co/#/theming/theme-provider#consuming-with-emotions-theming

  <div
    css={({ euiTheme }) => css`
      background-color: ${euiTheme.colors.lightestShade};
      padding: ${euiTheme.size.l};
    `}
  />
  

Plugin	Number of imports from styled-components	Ticket
Observability	7
SLO	8	Fixed in #200247
Investigate	0	-
Investigate-app	0	-
Synthetics	16
Uptime	29

[For inspiration] Here are some PRs that tried to migrate some components :

• [OBX-UX-MNGMT][BUG]APM creation rules flyout is broken when it's accessed from Stack Management  #186970
• [Custom threshold/Metric threshold] Use emotion instead of styled component for auto suggestion #186422
• [Infra] Migrate infra from styled-components to @emotion #202405
• [Synthetics] Fix styled components usage !! #204981
• synthetics - switch to emotion #205015

[elasticmachine]

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