apm migration to emotion

elastic · Dec 16, 2024 · 145d376 · 145d376
1 parent 4d26785
commit 145d376
Show file tree

Hide file tree

Showing 38 changed files with 250 additions and 288 deletions.
diff --git a/...y_solution/apm/public/components/app/correlations/context_popover/field_stats_popover.tsx b/...y_solution/apm/public/components/app/correlations/context_popover/field_stats_popover.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EuiButtonIcon, EuiToolTip } from '@elastic/eui';
+import { EuiButtonIcon, EuiToolTip, useEuiTheme } from '@elastic/eui';
 import React, { useCallback, useMemo, useState } from 'react';
 import { i18n } from '@kbn/i18n';
 import {
@@ -40,7 +40,6 @@ import { useApmPluginContext } from '../../../../context/apm_plugin/use_apm_plug
 import { useFetchParams } from '../use_fetch_params';
 import type { ApmPluginStartDeps } from '../../../../plugin';
 import { useAdHocApmDataView } from '../../../../hooks/use_adhoc_apm_data_view';
-import { useTheme } from '../../../../hooks/use_theme';
 import { FETCH_STATUS, useFetcher } from '../../../../hooks/use_fetcher';
 
 const HIGHLIGHTED_BUCKET_PROPS = {
@@ -205,7 +204,7 @@ export function FieldStatsPopover({
   const field = dataView?.getFieldByName(fieldName);
 
   const closePopover = useCallback(() => setInfoOpen(false), []);
-  const theme = useTheme();
+  const { euiTheme } = useEuiTheme();
 
   const params = useFetchParams();
 
@@ -280,7 +279,7 @@ export function FieldStatsPopover({
           }
         )}
         data-test-subj={'apmCorrelationsContextPopoverButton'}
-        style={{ marginLeft: theme.eui.euiSizeXS }}
+        style={{ marginLeft: euiTheme.size.xs }}
       />
     </EuiToolTip>
   );

diff --git a/...gins/observability_solution/apm/public/components/app/correlations/correlations_table.tsx b/...gins/observability_solution/apm/public/components/app/correlations/correlations_table.tsx
@@ -7,13 +7,12 @@
 
 import React, { useCallback, useMemo, useState } from 'react';
 import { debounce } from 'lodash';
-import { EuiBasicTable, EuiBasicTableColumn } from '@elastic/eui';
+import { EuiBasicTable, EuiBasicTableColumn, useEuiTheme } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import type { EuiTableSortingType } from '@elastic/eui/src/components/basic_table/table_types';
 import type { Criteria } from '@elastic/eui/src/components/basic_table/basic_table';
 import { useUiTracker } from '@kbn/observability-shared-plugin/public';
 import { FETCH_STATUS } from '../../../hooks/use_fetcher';
-import { useTheme } from '../../../hooks/use_theme';
 import type { FieldValuePair } from '../../../../common/correlations/types';
 
 const PAGINATION_SIZE_OPTIONS = [5, 10, 20, 50];
@@ -43,7 +42,7 @@ export function CorrelationsTable<T extends FieldValuePair>({
   sorting,
   rowHeader,
 }: CorrelationsTableProps<T>) {
-  const euiTheme = useTheme();
+  const { euiTheme } = useEuiTheme();
   const trackApmEvent = useUiTracker({ app: 'apm' });
   const trackSelectSignificantCorrelationTerm = useCallback(
     () => debounce(() => trackApmEvent({ metric: 'select_significant_term' }), 1000),
@@ -105,7 +104,7 @@ export function CorrelationsTable<T extends FieldValuePair>({
             selectedTerm.fieldValue === term.fieldValue &&
             selectedTerm.fieldName === term.fieldName
               ? {
-                  backgroundColor: euiTheme.eui.euiColorLightestShade,
+                  backgroundColor: euiTheme.colors.lightestShade,
                 }
               : null,
         };

diff --git a/...k/plugins/observability_solution/apm/public/components/app/entities/entity_link/index.tsx b/...k/plugins/observability_solution/apm/public/components/app/entities/entity_link/index.tsx
@@ -5,7 +5,14 @@
  * 2.0.
  */
 
-import { EuiButtonEmpty, EuiEmptyPrompt, EuiImage, EuiLink, EuiLoadingSpinner } from '@elastic/eui';
+import {
+  EuiButtonEmpty,
+  EuiEmptyPrompt,
+  EuiImage,
+  EuiLink,
+  EuiLoadingSpinner,
+  useEuiTheme,
+} from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
@@ -18,7 +25,6 @@ import { useApmParams } from '../../../../hooks/use_apm_params';
 import { useApmRouter } from '../../../../hooks/use_apm_router';
 import { useEntityCentricExperienceSetting } from '../../../../hooks/use_entity_centric_experience_setting';
 import { FETCH_STATUS, isPending, useFetcher } from '../../../../hooks/use_fetcher';
-import { useTheme } from '../../../../hooks/use_theme';
 import { ApmPluginStartDeps } from '../../../../plugin';
 
 const pageHeader = {
@@ -27,7 +33,7 @@ const pageHeader = {
 
 export function EntityLink() {
   const router = useApmRouter({ prependBasePath: false });
-  const theme = useTheme();
+  const { colorMode } = useEuiTheme();
   const { services } = useKibana<ApmPluginStartDeps>();
   const { observabilityShared, data } = services;
   const timeRange = data.query.timefilter.timefilter.getTime();
@@ -65,7 +71,7 @@ export function EntityLink() {
           icon={
             <EuiImage
               size="fullWidth"
-              src={theme.darkMode ? dashboardsDark : dashboardsLight}
+              src={colorMode === 'DARK' ? dashboardsDark : dashboardsLight}
               alt=""
             />
           }

diff --git a/...servability_solution/apm/public/components/app/error_group_details/distribution/index.tsx b/...servability_solution/apm/public/components/app/error_group_details/distribution/index.tsx
@@ -18,14 +18,13 @@ import {
   DARK_THEME,
   LegendValue,
 } from '@elastic/charts';
-import { EuiTitle } from '@elastic/eui';
+import { EuiTitle, useEuiTheme } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { useApmPluginContext } from '../../../../context/apm_plugin/use_apm_plugin_context';
 import { useLegacyUrlParams } from '../../../../context/url_params_context/use_url_params';
 import { FETCH_STATUS } from '../../../../hooks/use_fetcher';
 import { usePreviousPeriodLabel } from '../../../../hooks/use_previous_period_text';
-import { useTheme } from '../../../../hooks/use_theme';
 import { APIReturnType } from '../../../../services/rest/create_call_apm_api';
 import { ChartContainer } from '../../../shared/charts/chart_container';
 import { ChartType, getTimeSeriesColor } from '../../../shared/charts/helper/get_timeseries_color';
@@ -42,7 +41,7 @@ interface Props {
 
 export function ErrorDistribution({ distribution, title, fetchStatus }: Props) {
   const { core } = useApmPluginContext();
-  const theme = useTheme();
+  const { colorMode } = useEuiTheme();
 
   const { urlParams } = useLegacyUrlParams();
   const { comparisonEnabled } = urlParams;
@@ -97,7 +96,7 @@ export function ErrorDistribution({ distribution, title, fetchStatus }: Props) {
             showLegend
             legendValues={[LegendValue.CurrentAndLastValue]}
             legendPosition={Position.Bottom}
-            theme={theme.darkMode ? DARK_THEME : LIGHT_THEME}
+            theme={colorMode === 'DARK' ? DARK_THEME : LIGHT_THEME}
             locale={i18n.getLocale()}
           />
           <Axis

diff --git a/...servability_solution/apm/public/components/app/infra_overview/infra_tabs/empty_prompt.tsx b/...servability_solution/apm/public/components/app/infra_overview/infra_tabs/empty_prompt.tsx
@@ -11,12 +11,12 @@ import {
   EuiDescriptionListTitle,
   EuiEmptyPrompt,
   EuiImage,
+  useEuiTheme,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import noResultsIllustrationDark from '../../../../assets/no_results_dark.svg';
 import noResultsIllustrationLight from '../../../../assets/no_results_light.svg';
-import { useTheme } from '../../../../hooks/use_theme';
 
 export function EmptyPrompt() {
   return (
@@ -52,9 +52,10 @@ export function EmptyPrompt() {
 }
 
 function NoResultsIllustration() {
-  const theme = useTheme();
+  const { colorMode } = useEuiTheme();
 
-  const illustration = theme.darkMode ? noResultsIllustrationDark : noResultsIllustrationLight;
+  const illustration =
+    colorMode === 'DARK' ? noResultsIllustrationDark : noResultsIllustrationLight;
 
   return (
     <EuiImage alt={noResultsIllustrationAlternativeText} size="fullWidth" src={illustration} />

diff --git a/...ility_solution/apm/public/components/app/mobile/service_overview/stats/location_stats.tsx b/...ility_solution/apm/public/components/app/mobile/service_overview/stats/location_stats.tsx
@@ -6,9 +6,8 @@
  */
 import { MetricDatum, MetricTrendShape } from '@elastic/charts';
 import { i18n } from '@kbn/i18n';
-import { EuiIcon, EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner } from '@elastic/eui';
+import { EuiIcon, EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner, useEuiTheme } from '@elastic/eui';
 import React, { useCallback } from 'react';
-import { useTheme } from '@kbn/observability-shared-plugin/public';
 import { useFetcher, isPending, FETCH_STATUS } from '../../../../../hooks/use_fetcher';
 import { CLIENT_GEO_COUNTRY_NAME } from '../../../../../../common/es_fields/apm';
 import { NOT_AVAILABLE_LABEL } from '../../../../../../common/i18n';
@@ -45,7 +44,7 @@ export function MobileLocationStats({
   environment: string;
   comparisonEnabled: boolean;
 }) {
-  const euiTheme = useTheme();
+  const { euiTheme } = useEuiTheme();
 
   const previousPeriodLabel = usePreviousPeriodLabel();
 
@@ -107,7 +106,7 @@ export function MobileLocationStats({
 
   const metrics: MetricDatum[] = [
     {
-      color: euiTheme.eui.euiColorLightestShade,
+      color: euiTheme.colors.lightestShade,
       title: i18n.translate('xpack.apm.mobile.location.metrics.http.requests.title', {
         defaultMessage: 'Most used in',
       }),
@@ -121,7 +120,7 @@ export function MobileLocationStats({
       trendShape: MetricTrendShape.Area,
     },
     {
-      color: euiTheme.eui.euiColorLightestShade,
+      color: euiTheme.colors.lightestShade,
       title: i18n.translate('xpack.apm.mobile.location.metrics.mostCrashes', {
         defaultMessage: 'Most crashes',
       }),
@@ -135,7 +134,7 @@ export function MobileLocationStats({
       trendShape: MetricTrendShape.Area,
     },
     {
-      color: euiTheme.eui.euiColorLightestShade,
+      color: euiTheme.colors.lightestShade,
       title: i18n.translate('xpack.apm.mobile.location.metrics.sessions', {
         defaultMessage: 'Most sessions',
       }),
@@ -149,7 +148,7 @@ export function MobileLocationStats({
       trendShape: MetricTrendShape.Area,
     },
     {
-      color: euiTheme.eui.euiColorLightestShade,
+      color: euiTheme.colors.lightestShade,
       title: i18n.translate('xpack.apm.mobile.location.metrics.launches', {
         defaultMessage: 'Most launches',
       }),

diff --git a/.../observability_solution/apm/public/components/app/mobile/service_overview/stats/stats.tsx b/.../observability_solution/apm/public/components/app/mobile/service_overview/stats/stats.tsx
@@ -6,9 +6,8 @@
  */
 import { MetricDatum, MetricTrendShape } from '@elastic/charts';
 import { i18n } from '@kbn/i18n';
-import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiLoadingSpinner } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiLoadingSpinner, useEuiTheme } from '@elastic/eui';
 import React, { useCallback } from 'react';
-import { useTheme } from '@kbn/observability-shared-plugin/public';
 import { NOT_AVAILABLE_LABEL } from '../../../../../../common/i18n';
 import { useAnyOfApmParams } from '../../../../../hooks/use_apm_params';
 import { FETCH_STATUS, isPending, useFetcher } from '../../../../../hooks/use_fetcher';
@@ -20,7 +19,7 @@ const valueFormatter = (value: number, suffix = '') => {
 };
 
 export function MobileStats({ start, end, kuery }: { start: string; end: string; kuery: string }) {
-  const euiTheme = useTheme();
+  const { euiTheme } = useEuiTheme();
 
   const {
     path: { serviceName },
@@ -77,7 +76,7 @@ export function MobileStats({ start, end, kuery }: { start: string; end: string;
 
   const metrics: MetricDatum[] = [
     {
-      color: euiTheme.eui.euiColorLightestShade,
+      color: euiTheme.colors.lightestShade,
       title: i18n.translate('xpack.apm.mobile.metrics.crash.rate', {
         defaultMessage: 'Crash rate',
       }),
@@ -92,7 +91,7 @@ export function MobileStats({ start, end, kuery }: { start: string; end: string;
       trendShape: MetricTrendShape.Area,
     },
     {
-      color: euiTheme.eui.euiColorLightestShade,
+      color: euiTheme.colors.lightestShade,
       title: i18n.translate('xpack.apm.mobile.metrics.load.time', {
         defaultMessage: 'Average app load time',
       }),
@@ -105,7 +104,7 @@ export function MobileStats({ start, end, kuery }: { start: string; end: string;
       trendShape: MetricTrendShape.Area,
     },
     {
-      color: euiTheme.eui.euiColorLightestShade,
+      color: euiTheme.colors.lightestShade,
       title: i18n.translate('xpack.apm.mobile.metrics.sessions', {
         defaultMessage: 'Sessions',
       }),
@@ -118,7 +117,7 @@ export function MobileStats({ start, end, kuery }: { start: string; end: string;
       trendShape: MetricTrendShape.Area,
     },
     {
-      color: euiTheme.eui.euiColorLightestShade,
+      color: euiTheme.colors.lightestShade,
       title: i18n.translate('xpack.apm.mobile.metrics.http.requests', {
         defaultMessage: 'HTTP requests',
       }),

diff --git a/.../observability_solution/apm/public/components/app/service_dashboards/empty_dashboards.tsx b/.../observability_solution/apm/public/components/app/service_dashboards/empty_dashboards.tsx
@@ -5,17 +5,16 @@
  * 2.0.
  */
 import React from 'react';
-import { EuiEmptyPrompt, EuiImage } from '@elastic/eui';
+import { EuiEmptyPrompt, EuiImage, useEuiTheme } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { dashboardsDark, dashboardsLight } from '@kbn/shared-svg';
-import { useTheme } from '../../../hooks/use_theme';
 
 interface Props {
   actions: React.ReactNode;
 }
 
 export function EmptyDashboards({ actions }: Props) {
-  const theme = useTheme();
+  const { colorMode } = useEuiTheme();
 
   return (
     <>
@@ -25,7 +24,7 @@ export function EmptyDashboards({ actions }: Props) {
         icon={
           <EuiImage
             size="fullWidth"
-            src={theme.darkMode ? dashboardsDark : dashboardsLight}
+            src={colorMode === 'DARK' ? dashboardsDark : dashboardsLight}
             alt=""
           />
         }

diff --git a/...bility_solution/apm/public/components/app/service_inventory/service_list/health_badge.tsx b/...bility_solution/apm/public/components/app/service_inventory/service_list/health_badge.tsx
@@ -6,19 +6,18 @@
  */
 
 import React from 'react';
-import { EuiBadge } from '@elastic/eui';
+import { EuiBadge, useEuiTheme } from '@elastic/eui';
 import {
   getServiceHealthStatusBadgeColor,
   getServiceHealthStatusLabel,
   ServiceHealthStatus,
 } from '../../../../../common/service_health_status';
-import { useTheme } from '../../../../hooks/use_theme';
 
 export function HealthBadge({ healthStatus }: { healthStatus: ServiceHealthStatus }) {
-  const theme = useTheme();
+  const { euiTheme } = useEuiTheme();
 
   return (
-    <EuiBadge color={getServiceHealthStatusBadgeColor(theme, healthStatus)}>
+    <EuiBadge color={getServiceHealthStatusBadgeColor(euiTheme, healthStatus)}>
       {getServiceHealthStatusLabel(healthStatus)}
     </EuiBadge>
   );

diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/service_map/controls.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/service_map/controls.tsx
@@ -5,12 +5,11 @@
  * 2.0.
  */
 
-import { EuiButtonIcon, EuiPanel, EuiToolTip } from '@elastic/eui';
+import { EuiButtonIcon, EuiPanel, EuiToolTip, useEuiTheme } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React, { useContext, useEffect, useState } from 'react';
 import styled from '@emotion/styled';
 import { useApmPluginContext } from '../../../context/apm_plugin/use_apm_plugin_context';
-import { useTheme } from '../../../hooks/use_theme';
 import { getLegacyApmHref } from '../../shared/links/apm/apm_link';
 import { useLegacyUrlParams } from '../../../context/url_params_context/use_url_params';
 import { APMQueryParams } from '../../shared/links/url_helpers';
@@ -97,7 +96,7 @@ function useDebugDownloadUrl(cy?: cytoscape.Core) {
 export function Controls() {
   const { core } = useApmPluginContext();
   const { basePath } = core.http;
-  const theme = useTheme();
+  const { euiTheme } = useEuiTheme();
   const cy = useContext(CytoscapeContext);
   const { urlParams } = useLegacyUrlParams();
 
@@ -110,7 +109,8 @@ export function Controls() {
   );
 
   const [zoom, setZoom] = useState((cy && cy.zoom()) || 1);
-  const duration = parseInt(theme.eui.euiAnimSpeedFast, 10);
+  // @ts-expect-error
+  const duration = parseInt(euiTheme.animation.fast, 10);
   const downloadUrl = useDebugDownloadUrl(cy);
   const viewFullMapUrl = getLegacyApmHref({
     basePath,
@@ -140,9 +140,9 @@ export function Controls() {
     if (cy) {
       const eles = cy.nodes();
       cy.animate({
-        ...getAnimationOptions(theme),
+        ...getAnimationOptions(euiTheme),
         center: { eles },
-        fit: { eles, padding: getNodeHeight(theme) },
+        fit: { eles, padding: getNodeHeight(euiTheme) },
       });
     }
   }