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

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/new_index/new_search_index_template.tsx

@@ -154,7 +154,11 @@ export const NewSearchIndexTemplate: React.FC<Props> = ({
                 optionally set a default {language_analyzer} for the index."
                   values={{
                     language_analyzer: (
-                      <EuiLink target="_blank" href={docLinks.languageAnalyzers}>
+                      <EuiLink
+                        data-test-subj="enterpriseSearchNewSearchIndexTemplateLanguageAnalyzerLink"
+                        target="_blank"
+                        href={docLinks.languageAnalyzers}
+                      >
                         {i18n.translate(
                           'xpack.enterpriseSearch.content.newIndex.newSearchIndexTemplate.formDescription.linkText',
                           {
@@ -247,6 +251,7 @@ export const NewSearchIndexTemplate: React.FC<Props> = ({
                   )}
                 >
                   <EuiSelect
+                    data-test-subj="enterpriseSearchNewSearchIndexTemplateSelect"
                     data-telemetry-id={`entSearchContent-${type}-newIndex-languageAnalyzer`}
                     disabled={disabled}
                     options={SUPPORTED_LANGUAGES}
@@ -261,7 +266,11 @@ export const NewSearchIndexTemplate: React.FC<Props> = ({
         <EuiSpacer />
         <EuiFlexGroup direction="column" gutterSize="xs">
           <EuiFlexItem>
-            <EuiLink target="_blank" href={docLinks.elasticsearchGettingStarted}>
+            <EuiLink
+              data-test-subj="enterpriseSearchNewSearchIndexTemplateLearnMoreAboutIndicesLink"
+              target="_blank"
+              href={docLinks.elasticsearchGettingStarted}
+            >
               {i18n.translate(
                 'xpack.enterpriseSearch.content.newIndex.newSearchIndexTemplate.learnMoreIndices.linkText',
                 {
@@ -273,7 +282,11 @@ export const NewSearchIndexTemplate: React.FC<Props> = ({
 
           {type === INGESTION_METHOD_IDS.CONNECTOR && (
             <EuiFlexItem grow={false}>
-              <EuiLink target="_blank" href={docLinks.connectors}>
+              <EuiLink
+                data-test-subj="enterpriseSearchNewSearchIndexTemplateLearnMoreAboutConnectorsLink"
+                target="_blank"
+                href={docLinks.connectors}
+              >
                 {i18n.translate(
                   'xpack.enterpriseSearch.content.newIndex.newSearchIndexTemplate.learnMoreConnectors.linkText',
                   {
@@ -285,7 +298,11 @@ export const NewSearchIndexTemplate: React.FC<Props> = ({
           )}
           {type === INGESTION_METHOD_IDS.CRAWLER && (
             <EuiFlexItem grow={false}>
-              <EuiLink target="_blank" href={docLinks.crawlerOverview}>
+              <EuiLink
+                data-test-subj="enterpriseSearchNewSearchIndexTemplateLearnMoreAboutTheElasticWebCrawlerLink"
+                target="_blank"
+                href={docLinks.crawlerOverview}
+              >
                 {i18n.translate(
                   'xpack.enterpriseSearch.content.newIndex.newSearchIndexTemplate.learnMoreCrawler.linkText',
                   {
@@ -297,7 +314,11 @@ export const NewSearchIndexTemplate: React.FC<Props> = ({
           )}
           {type === INGESTION_METHOD_IDS.API && (
             <EuiFlexItem grow={false}>
-              <EuiLink target="_blank" href={docLinks.ingestionApis}>
+              <EuiLink
+                data-test-subj="enterpriseSearchNewSearchIndexTemplateLearnMoreAboutIngestionApIsLink"
+                target="_blank"
+                href={docLinks.ingestionApis}
+              >
                 {i18n.translate(
                   'xpack.enterpriseSearch.content.newIndex.newSearchIndexTemplate.learnMoreApis.linkText',
                   {
@@ -312,6 +333,7 @@ export const NewSearchIndexTemplate: React.FC<Props> = ({
         <EuiFlexGroup direction="row" alignItems="center" justifyContent="spaceBetween">
           <EuiFlexItem grow={false}>
             <EuiButton
+              data-test-subj="enterpriseSearchNewSearchIndexTemplateButton"
               data-telemetry-id={`entSearchContent-${type}-newIndex-goBack`}
               isDisabled={buttonLoading}
               onClick={() => history.back()}

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.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, type 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.backgroundBaseDanger;
 
   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,8 +93,7 @@ const AlertDetailsAppSection = ({ rule, alert }: AlertDetailsAppSectionProps) =>
               <EuiSpacer size="s" />
               <Threshold
                 title={`Threshold breached`}
-                // @ts-expect-error this chart needs to be migrated to the new chart theming system, comment should be removed once https://github.com/elastic/kibana/issues/202138 is resolved
-                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]}
@@ -161,8 +160,7 @@ const AlertDetailsAppSection = ({ rule, alert }: AlertDetailsAppSectionProps) =>
               <EuiSpacer size="s" />
               <Threshold
                 title={`Threshold breached`}
-                // @ts-expect-error this chart needs to be migrated to the new chart theming system, comment should be removed once https://github.com/elastic/kibana/issues/202138 is resolved
-                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/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 };