[POC] Migrate infra from styled-components to @emotion (elastic#202405)

Closes elastic#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.
cnasikas · Dec 10, 2024 · 6bc8c27 · 6bc8c27
1 parent 68b9df0
commit 6bc8c27
Show file tree

Hide file tree

Showing 83 changed files with 762 additions and 699 deletions.
diff --git a/...applications/enterprise_search_content/components/new_index/new_search_index_template.tsx b/...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()}

diff --git a/x-pack/plugins/observability_solution/infra/emotion.d.ts b/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 {}
+}
diff --git a/x-pack/plugins/observability_solution/infra/public/alerting/common/components/threshold.tsx b/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={[

diff --git a/...erting/log_threshold/components/alert_details_app_section/components/alert_annotation.tsx b/...erting/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,
         },
       }}

diff --git a/...lution/infra/public/alerting/log_threshold/components/alert_details_app_section/index.tsx b/...lution/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]}

diff --git a/...servability_solution/infra/public/alerting/metric_threshold/components/expression_row.tsx b/...servability_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;
 `;
 

diff --git a/...servability_solution/infra/public/components/asset_details/tabs/processes/process_row.tsx b/...servability_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 };
diff --git a/...ability_solution/infra/public/components/asset_details/tabs/processes/processes_table.tsx b/...ability_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}

diff --git a/.../observability_solution/infra/public/components/autocomplete_field/autocomplete_field.tsx b/.../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 };