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

x-pack/plugins/observability_solution/infra/emotion.d.ts

@@ -0,0 +1,14 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import '@emotion/react';
+import type { UseEuiTheme } from '@elastic/eui';
+
+declare module '@emotion/react' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface Theme extends UseEuiTheme {}
+}

x-pack/plugins/observability_solution/infra/public/alerting/common/components/threshold.test.tsx

@@ -64,7 +64,7 @@ describe('Threshold', () => {
 
     expect((Metric as jest.Mock).mock.calls[0][0].data[0][0]).toMatchInlineSnapshot(`
       Object {
-        "color": "#f8e9e9",
+        "color": "#BD271E",
         "extra": <React.Fragment>
           Alert when &gt;= 7%
           <br />

x-pack/plugins/observability_solution/infra/public/alerting/common/components/threshold.tsx

@@ -7,13 +7,13 @@
 
 import React from 'react';
 import { Chart, Metric, Settings } from '@elastic/charts';
-import { EuiIcon, EuiPanel, useEuiBackgroundColor } from '@elastic/eui';
+import { EuiIcon, EuiPanel, UseEuiTheme, useEuiTheme } from '@elastic/eui';
 import type { PartialTheme, Theme } from '@elastic/charts';
 import { i18n } from '@kbn/i18n';
 import { COMPARATORS } from '@kbn/alerting-comparators';
 
 export interface ChartProps {
-  theme?: PartialTheme;
+  theme?: UseEuiTheme<{}>;
   baseTheme: Theme;
 }
 
@@ -41,7 +41,8 @@ export const Threshold = ({
   valueFormatter,
   warning,
 }: Props) => {
-  const color = useEuiBackgroundColor('danger');
+  const { euiTheme } = useEuiTheme();
+  const color = euiTheme.colors.danger;
 
   return (
     <EuiPanel
@@ -56,7 +57,7 @@ export const Threshold = ({
       data-test-subj={`threshold-${thresholds.join('-')}-${value}`}
     >
       <Chart>
-        <Settings theme={theme} baseTheme={baseTheme} locale={i18n.getLocale()} />
+        <Settings theme={theme as PartialTheme} baseTheme={baseTheme} locale={i18n.getLocale()} />
         <Metric
           id={id}
           data={[

x-pack/plugins/observability_solution/infra/public/alerting/log_threshold/components/alert_details_app_section/components/alert_annotation.tsx

@@ -8,13 +8,14 @@
 import React from 'react';
 import { AnnotationDomainType, LineAnnotation, Position } from '@elastic/charts';
 import moment from 'moment';
-import { EuiIcon } from '@elastic/eui';
+import { EuiIcon, useEuiTheme } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { euiThemeVars } from '@kbn/ui-theme';
 import { UI_SETTINGS } from '@kbn/data-plugin/public';
 import { useKibanaContextForPlugin } from '../../../../../hooks/use_kibana';
+
 export function AlertAnnotation({ alertStarted }: { alertStarted: number }) {
   const { uiSettings } = useKibanaContextForPlugin().services;
+  const { euiTheme } = useEuiTheme();
 
   return (
     <LineAnnotation
@@ -32,7 +33,7 @@ export function AlertAnnotation({ alertStarted }: { alertStarted: number }) {
       style={{
         line: {
           strokeWidth: 3,
-          stroke: euiThemeVars.euiColorDangerText,
+          stroke: euiTheme.colors.textDanger,
           opacity: 1,
         },
       }}

x-pack/plugins/observability_solution/infra/public/alerting/log_threshold/components/alert_details_app_section/index.tsx

@@ -6,7 +6,7 @@
  */
 import React from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
-import { LEGACY_LIGHT_THEME } from '@elastic/charts';
+import { LIGHT_THEME } from '@elastic/charts';
 import { EuiPanel } from '@elastic/eui';
 import {
   ALERT_CONTEXT,
@@ -93,7 +93,7 @@ const AlertDetailsAppSection = ({ rule, alert }: AlertDetailsAppSectionProps) =>
               <EuiSpacer size="s" />
               <Threshold
                 title={`Threshold breached`}
-                chartProps={{ theme, baseTheme: LEGACY_LIGHT_THEME }}
+                chartProps={{ theme, baseTheme: LIGHT_THEME }}
                 comparator={ComparatorToi18nSymbolsMap[rule.params.count.comparator]}
                 id={'threshold-ratio-chart'}
                 thresholds={[rule.params.count.value]}
@@ -160,7 +160,7 @@ const AlertDetailsAppSection = ({ rule, alert }: AlertDetailsAppSectionProps) =>
               <EuiSpacer size="s" />
               <Threshold
                 title={`Threshold breached`}
-                chartProps={{ theme, baseTheme: LEGACY_LIGHT_THEME }}
+                chartProps={{ theme, baseTheme: LIGHT_THEME }}
                 comparator={ComparatorToi18nSymbolsMap[rule.params.count.comparator]}
                 id="logCountThreshold"
                 thresholds={[rule.params.count.value]}

x-pack/plugins/observability_solution/infra/public/alerting/metric_threshold/components/expression_row.tsx

@@ -18,7 +18,7 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { omit } from 'lodash';
 import React, { PropsWithChildren, useCallback, useMemo, useState } from 'react';
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
 import {
   AggregationType,
   IErrorObject,
@@ -46,13 +46,15 @@ interface ExpressionRowProps {
   setRuleParams(id: number, params: MetricExpression): void;
 }
 
-const NegativeHorizontalMarginDiv = euiStyled.div`margin: 0 -4px;`;
+const NegativeHorizontalMarginDiv = styled.div`
+  margin: 0 -4px;
+`;
 
-const StyledExpression = euiStyled.div`
+const StyledExpression = styled.div`
   padding: 0 4px;
 `;
 
-const StyledHealth = euiStyled(EuiHealth)`
+const StyledHealth = styled(EuiHealth)`
   margin-left: 4px;
 `;
 

x-pack/plugins/observability_solution/infra/public/apps/common_providers.tsx

@@ -7,7 +7,7 @@
 
 import { AppMountParameters, CoreStart } from '@kbn/core/public';
 import React, { FC, PropsWithChildren } from 'react';
-import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common';
+import { EuiThemeProvider } from '@elastic/eui';
 import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
 import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
 import { Storage } from '@kbn/kibana-utils-plugin/public';
@@ -34,10 +34,11 @@ export const CommonInfraProviders: FC<
   }>
 > = ({ children, triggersActionsUI, setHeaderActionMenu, appName, storage, theme$ }) => {
   const darkMode = useIsDarkMode();
+  const colorMode = darkMode ? 'DARK' : 'LIGHT';
 
   return (
     <TriggersActionsProvider triggersActionsUI={triggersActionsUI}>
-      <EuiThemeProvider darkMode={darkMode}>
+      <EuiThemeProvider colorMode={colorMode}>
         <DataUIProviders appName={appName} storage={storage}>
           <HeaderActionMenuProvider setHeaderActionMenu={setHeaderActionMenu} theme$={theme$}>
             <NavigationWarningPromptProvider>{children}</NavigationWarningPromptProvider>

x-pack/plugins/observability_solution/infra/public/components/asset_details/tabs/processes/process_row.tsx

@@ -21,7 +21,7 @@ import {
   EuiButton,
   EuiSpacer,
 } from '@elastic/eui';
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
 import useToggle from 'react-use/lib/useToggle';
 import { type Message } from '@kbn/observability-ai-assistant-plugin/public';
 import { useKibanaContextForPlugin } from '../../../../hooks/use_kibana';
@@ -199,34 +199,33 @@ const explainProcessMessageTitle = i18n.translate(
   }
 );
 
-const ExpandedRowDescriptionList = euiStyled(EuiDescriptionList).attrs({
-  compressed: true,
-})`
+const ExpandedRowDescriptionList = styled(EuiDescriptionList)`
   width: 100%;
 `;
 
-const CodeListItem = euiStyled(EuiCode).attrs({
-  transparentBackground: true,
-})`
+ExpandedRowDescriptionList.defaultProps = { compressed: true };
+
+const CodeListItem = styled(EuiCode)`
   padding: 0 !important;
   & code.euiCodeBlock__code {
     white-space: nowrap !important;
     vertical-align: middle;
   }
 `;
 
-const ExpandedCommandLine = euiStyled(EuiCode).attrs({
-  transparentBackground: true,
-})`
+CodeListItem.defaultProps = { transparentBackground: true };
+
+const ExpandedCommandLine = styled(EuiCode)`
   padding: 0 !important;
-  margin-bottom: ${(props) => props.theme.eui.euiSizeS};
+  margin-bottom: ${(props) => props.theme.euiTheme.size.s};
 `;
 
-const ExpandedRowCell = euiStyled(EuiTableRowCell).attrs({
-  textOnly: false,
-  colSpan: 6,
-})`
-  padding-top: ${(props) => props.theme.eui.euiSizeM} !important;
-  padding-bottom: ${(props) => props.theme.eui.euiSizeM} !important;
-  background-color: ${(props) => props.theme.eui.euiColorLightestShade};
+ExpandedCommandLine.defaultProps = { transparentBackground: true };
+
+const ExpandedRowCell = styled(EuiTableRowCell)`
+  padding-top: ${(props) => props.theme.euiTheme.size.m} !important;
+  padding-bottom: ${(props) => props.theme.euiTheme.size.m} !important;
+  background-color: ${(props) => props.theme.euiTheme.colors.lightestShade};
 `;
+
+ExpandedRowCell.defaultProps = { textOnly: false, colSpan: 6 };

x-pack/plugins/observability_solution/infra/public/components/asset_details/tabs/processes/processes_table.tsx

@@ -367,7 +367,7 @@ const columns: Array<{
 ];
 
 const CodeLine = ({ command }: { command: string }) => {
-  const euiTheme = useEuiTheme();
+  const { euiTheme } = useEuiTheme();
   return (
     <div
       css={css`
@@ -379,8 +379,8 @@ const CodeLine = ({ command }: { command: string }) => {
       <EuiCode
         transparentBackground
         css={css`
-          color: ${euiTheme.euiTheme.colors.text};
-          font-weight: ${euiTheme.euiTheme.font.weight.medium};
+          color: ${euiTheme.colors.textParagraph};
+          font-weight: ${euiTheme.font.weight.medium};
         `}
       >
         {command}

x-pack/plugins/observability_solution/infra/public/components/autocomplete_field/autocomplete_field.tsx

@@ -8,7 +8,7 @@
 import { EuiFieldSearch, EuiOutsideClickDetector, EuiPanel } from '@elastic/eui';
 import React from 'react';
 import { QuerySuggestion } from '@kbn/unified-search-plugin/public';
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
 import { composeStateUpdaters } from '../../utils/typed_react';
 import { SuggestionItem } from './suggestion_item';
 
@@ -302,19 +302,18 @@ const withUnfocused = (state: AutocompleteFieldState) => ({
   isFocused: false,
 });
 
-const AutocompleteContainer = euiStyled.div`
+const AutocompleteContainer = styled.div`
   position: relative;
 `;
 
-const SuggestionsPanel = euiStyled(EuiPanel).attrs(() => ({
-  paddingSize: 'none',
-  hasShadow: true,
-}))`
+const SuggestionsPanel = styled(EuiPanel)`
   position: absolute;
   width: 100%;
   margin-top: 2px;
   overflow-x: hidden;
   overflow-y: scroll;
-  z-index: ${(props) => props.theme.eui.euiZLevel1};
+  z-index: ${(props) => props.theme.euiTheme.levels.maskBelowHeader};
   max-height: 322px;
 `;
+
+SuggestionsPanel.defaultProps = { paddingSize: 'none', hasShadow: true };

x-pack/plugins/observability_solution/infra/public/components/autocomplete_field/suggestion_item.tsx

@@ -7,7 +7,8 @@
 
 import React from 'react';
 import { EuiIcon } from '@elastic/eui';
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
+import { Theme } from '@emotion/react';
 import { QuerySuggestion, QuerySuggestionTypes } from '@kbn/unified-search-plugin/public';
 import { transparentize } from 'polished';
 
@@ -36,51 +37,51 @@ SuggestionItem.defaultProps = {
   isSelected: false,
 };
 
-const SuggestionItemContainer = euiStyled.div<{
+const SuggestionItemContainer = styled.div<{
   isSelected?: boolean;
 }>`
   display: flex;
   flex-direction: row;
-  font-size: ${(props) => props.theme.eui.euiFontSizeS};
-  height: ${(props) => props.theme.eui.euiSizeXL};
+  font-size: ${({ theme }) => theme.euiTheme.size.m};
+  height: ${({ theme }) => theme.euiTheme.size.xl};
   white-space: nowrap;
   background-color: ${(props) =>
-    props.isSelected ? props.theme.eui.euiColorLightestShade : 'transparent'};
+    props.isSelected ? props.theme.euiTheme.colors.lightestShade : 'transparent'};
 `;
 
-const SuggestionItemField = euiStyled.div`
+const SuggestionItemField = styled.div`
   align-items: center;
   cursor: pointer;
   display: flex;
   flex-direction: row;
-  height: ${(props) => props.theme.eui.euiSizeXL};
-  padding: ${(props) => props.theme.eui.euiSizeXS};
+  height: ${({ theme }) => theme.euiTheme.size.xl};
+  padding: ${({ theme }) => theme.euiTheme.size.xs};
 `;
 
-const SuggestionItemIconField = euiStyled(SuggestionItemField)<{
+const SuggestionItemIconField = styled(SuggestionItemField)<{
   suggestionType: QuerySuggestionTypes;
 }>`
-  background-color: ${(props) =>
-    transparentize(0.9, getEuiIconColor(props.theme, props.suggestionType))};
-  color: ${(props) => getEuiIconColor(props.theme, props.suggestionType)};
+  background-color: ${({ theme, suggestionType }) =>
+    transparentize(0.9, getEuiIconColor(theme, suggestionType))};
+  color: ${({ theme, suggestionType }) => getEuiIconColor(theme, suggestionType)};
   flex: 0 0 auto;
   justify-content: center;
-  width: ${(props) => props.theme.eui.euiSizeXL};
+  width: ${({ theme }) => theme.euiTheme.size.xl};
 `;
 
-const SuggestionItemTextField = euiStyled(SuggestionItemField)`
+const SuggestionItemTextField = styled(SuggestionItemField)`
   flex: 2 0 0;
-  font-family: ${(props) => props.theme.eui.euiCodeFontFamily};
+  font-family: ${({ theme }) => theme.euiTheme.font.familyCode};
 `;
 
-const SuggestionItemDescriptionField = euiStyled(SuggestionItemField)`
+const SuggestionItemDescriptionField = styled(SuggestionItemField)`
   flex: 3 0 0;
 
   p {
     display: inline;
 
     span {
-      font-family: ${(props) => props.theme.eui.euiCodeFontFamily};
+      font-family: ${({ theme }) => theme.euiTheme.font.familyCode};
     }
   }
 `;
@@ -102,18 +103,18 @@ const getEuiIconType = (suggestionType: QuerySuggestionTypes) => {
   }
 };
 
-const getEuiIconColor = (theme: any, suggestionType: QuerySuggestionTypes): string => {
+const getEuiIconColor = (theme: Theme, suggestionType: QuerySuggestionTypes): string => {
   switch (suggestionType) {
     case QuerySuggestionTypes.Field:
-      return theme?.eui.euiColorVis7;
+      return theme?.euiTheme.colors.vis.euiColorVis7;
     case QuerySuggestionTypes.Value:
-      return theme?.eui.euiColorVis0;
+      return theme?.euiTheme.colors.vis.euiColorVis0;
     case QuerySuggestionTypes.Operator:
-      return theme?.eui.euiColorVis1;
+      return theme?.euiTheme.colors.vis.euiColorVis1;
     case QuerySuggestionTypes.Conjunction:
-      return theme?.eui.euiColorVis2;
+      return theme?.euiTheme.colors.vis.euiColorVis2;
     case QuerySuggestionTypes.RecentSearch:
     default:
-      return theme?.eui.euiColorMediumShade;
+      return theme?.euiTheme.colors.mediumShade;
   }
 };

x-pack/plugins/observability_solution/infra/public/components/empty_states/no_data.tsx

@@ -7,8 +7,7 @@
 
 import { EuiButton, EuiEmptyPrompt } from '@elastic/eui';
 import React from 'react';
-
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
 
 interface NoDataProps {
   titleText: string;
@@ -44,6 +43,6 @@ export const NoData: React.FC<NoDataProps> = ({
   />
 );
 
-const CenteredEmptyPrompt = euiStyled(EuiEmptyPrompt)`
+const CenteredEmptyPrompt = styled(EuiEmptyPrompt)`
   align-self: center;
 `;