use theme values

elastic · Jan 2, 2025 · 2001eb0 · 2001eb0
1 parent a921224
commit 2001eb0
Show file tree

Hide file tree

Showing 15 changed files with 82 additions and 79 deletions.
diff --git a/...ic/apps/synthetics/components/monitor_details/monitor_summary/availability_sparklines.tsx b/...ic/apps/synthetics/components/monitor_details/monitor_summary/availability_sparklines.tsx
@@ -7,8 +7,8 @@
 
 import React from 'react';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
-import { useTheme } from '@kbn/observability-shared-plugin/public';
 import { ReportTypes } from '@kbn/exploratory-view-plugin/public';
+import { useEuiTheme } from '@elastic/eui';
 import { AVAILABILITY_LABEL } from './availability_panel';
 import { ClientPluginsStart } from '../../../../../plugin';
 import { useMonitorQueryFilters } from '../hooks/use_monitor_query_filters';
@@ -27,7 +27,7 @@ export const AvailabilitySparklines = (props: AvailabilitySparklinesProps) => {
   } = useKibana<ClientPluginsStart>();
   const { queryIdFilter, locationFilter } = useMonitorQueryFilters();
 
-  const theme = useTheme();
+  const theme = useEuiTheme();
 
   if (!queryIdFilter) {
     return null;
@@ -50,7 +50,7 @@ export const AvailabilitySparklines = (props: AvailabilitySparklinesProps) => {
           selectedMetricField: 'monitor_availability',
           reportDefinitions: queryIdFilter,
           filters: locationFilter,
-          color: theme.eui.euiColorVis1,
+          color: theme.euiTheme.colors.vis.euiColorVis1,
         },
       ]}
     />

diff --git a/...public/apps/synthetics/components/monitor_details/monitor_summary/duration_sparklines.tsx b/...public/apps/synthetics/components/monitor_details/monitor_summary/duration_sparklines.tsx
@@ -8,7 +8,7 @@
 import React from 'react';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { ReportTypes } from '@kbn/exploratory-view-plugin/public';
-import { useTheme } from '@kbn/observability-shared-plugin/public';
+import { useEuiTheme } from '@elastic/eui';
 import { MEDIAN_DURATION_LABEL } from './duration_panel';
 import { useMonitorQueryFilters } from '../hooks/use_monitor_query_filters';
 import { ClientPluginsStart } from '../../../../../plugin';
@@ -26,7 +26,7 @@ export const DurationSparklines = (props: DurationSparklinesProps) => {
     },
   } = useKibana<ClientPluginsStart>();
   const { queryIdFilter, locationFilter } = useMonitorQueryFilters();
-  const theme = useTheme();
+  const theme = useEuiTheme();
 
   if (!queryIdFilter) {
     return null;
@@ -49,7 +49,7 @@ export const DurationSparklines = (props: DurationSparklinesProps) => {
             selectedMetricField: 'monitor.duration.us',
             reportDefinitions: queryIdFilter,
             filters: locationFilter,
-            color: theme.eui.euiColorVis1,
+            color: theme.euiTheme.colors.vis.euiColorVis1,
           },
         ]}
       />

diff --git a/...tics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_alerts.tsx b/...tics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_alerts.tsx
@@ -13,10 +13,10 @@ import {
   EuiPanel,
   EuiText,
   EuiTitle,
+  useEuiTheme,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { RECORDS_FIELD } from '@kbn/exploratory-view-plugin/public';
-import { useTheme } from '@kbn/observability-shared-plugin/public';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { useSelectedLocation } from '../hooks/use_selected_location';
 import { useMonitorQueryFilters } from '../hooks/use_monitor_query_filters';
@@ -40,7 +40,7 @@ export const MonitorAlerts = ({
     exploratoryView: { ExploratoryViewEmbeddable },
   } = useKibana<ClientPluginsStart>().services;
 
-  const theme = useTheme();
+  const theme = useEuiTheme();
 
   const { queryIdFilter, locationFilter } = useMonitorQueryFilters();
   const selectedLocation = useSelectedLocation();
@@ -145,7 +145,7 @@ export const MonitorAlerts = ({
                   { field: 'kibana.alert.status', values: ['active'] },
                   ...(locationFilter ?? []),
                 ],
-                color: theme.eui.euiColorVis7_behindText,
+                color: theme.euiTheme.colors.vis.euiColorVis7,
               },
             ]}
           />
@@ -198,7 +198,7 @@ export const MonitorAlerts = ({
                   { field: 'kibana.alert.status', values: ['recovered'] },
                   ...(locationFilter ?? []),
                 ],
-                color: theme.eui.euiColorVis0_behindText,
+                color: theme.euiTheme.colors.vis.euiColorVis0,
               },
             ]}
           />

diff --git a/...s/synthetics/components/monitors_page/management/monitor_list_table/monitor_locations.tsx b/...s/synthetics/components/monitors_page/management/monitor_list_table/monitor_locations.tsx
@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import { useTheme } from '@kbn/observability-shared-plugin/public';
+import { useEuiTheme } from '@elastic/eui';
 import { LocationStatusBadges } from '../../../common/components/location_status_badges';
 import { ServiceLocations, OverviewStatusState } from '../../../../../../../common/runtime_types';
 
@@ -17,15 +17,14 @@ interface Props {
 }
 
 export const MonitorLocations = ({ locations, monitorId, overviewStatus }: Props) => {
-  const {
-    eui: { euiColorVis9, euiColorVis0, euiColorDisabled },
-  } = useTheme();
+  const theme = useEuiTheme();
+  const { euiColorVis9, euiColorVis0 } = theme.euiTheme.colors.vis;
 
   const locationsToDisplay = locations.map((loc) => {
     const locById = `${monitorId}-${loc.id}`;
 
     let status: string = 'unknown';
-    let color = euiColorDisabled;
+    let color = theme.euiTheme.colors.disabled;
 
     if (overviewStatus?.downConfigs[locById]) {
       status = 'down';

diff --git a/...c/apps/synthetics/components/monitors_page/management/monitor_stats/monitor_test_runs.tsx b/...c/apps/synthetics/components/monitors_page/management/monitor_stats/monitor_test_runs.tsx
@@ -8,9 +8,9 @@
 import React from 'react';
 
 import { useKibana } from '@kbn/kibana-react-plugin/public';
-import { useTheme } from '@kbn/observability-shared-plugin/public';
 import { ReportTypes } from '@kbn/exploratory-view-plugin/public';
 
+import { useEuiTheme } from '@elastic/eui';
 import { useMonitorFilters } from '../../hooks/use_monitor_filters';
 import { useRefreshedRange } from '../../../../hooks';
 import { ClientPluginsStart } from '../../../../../../plugin';
@@ -21,12 +21,12 @@ export const MonitorTestRunsCount = () => {
   const {
     exploratoryView: { ExploratoryViewEmbeddable },
   } = useKibana<ClientPluginsStart>().services;
-  const theme = useTheme();
-
   const { from, to } = useRefreshedRange(30, 'days');
   const filters = useMonitorFilters({});
   const queryFilter = useMonitorQueryFilters();
 
+  const theme = useEuiTheme();
+
   return (
     <ExploratoryViewEmbeddable
       dslFilters={queryFilter}
@@ -42,7 +42,7 @@ export const MonitorTestRunsCount = () => {
           dataType: 'synthetics',
           selectedMetricField: 'monitor_total_runs',
           name: labels.TEST_RUNS_LABEL,
-          color: theme.eui.euiColorVis1,
+          color: theme.euiTheme.colors.vis.euiColorVis1,
         },
       ]}
     />

diff --git a/...thetics/components/monitors_page/management/monitor_stats/monitor_test_runs_sparkline.tsx b/...thetics/components/monitors_page/management/monitor_stats/monitor_test_runs_sparkline.tsx
@@ -8,8 +8,8 @@
 import React, { useMemo } from 'react';
 
 import { useKibana } from '@kbn/kibana-react-plugin/public';
-import { useTheme } from '@kbn/observability-shared-plugin/public';
 
+import { useEuiTheme } from '@elastic/eui';
 import { useMonitorQueryFilters } from '../../hooks/use_monitor_query_filters';
 import { useMonitorFilters } from '../../hooks/use_monitor_filters';
 import { useRefreshedRange } from '../../../../hooks';
@@ -21,7 +21,7 @@ export const MonitorTestRunsSparkline = () => {
     exploratoryView: { ExploratoryViewEmbeddable },
   } = useKibana<ClientPluginsStart>().services;
 
-  const theme = useTheme();
+  const theme = useEuiTheme();
 
   const { from, to } = useRefreshedRange(30, 'days');
   const filters = useMonitorFilters({});
@@ -39,12 +39,12 @@ export const MonitorTestRunsSparkline = () => {
         selectedMetricField: 'total_test_runs',
         filters,
         name: labels.TEST_RUNS_LABEL,
-        color: theme.eui.euiColorVis1,
+        color: theme.euiTheme.colors.vis.euiColorVis1,
         operationType: 'count',
       },
     ];
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [from, theme.eui.euiColorVis1, to]);
+  }, [from, theme.euiTheme.colors.vis.euiColorVis1, to]);
 
   return (
     <ExploratoryViewEmbeddable

diff --git a/...thetics/public/apps/synthetics/components/monitors_page/overview/overview/metric_item.tsx b/...thetics/public/apps/synthetics/components/monitors_page/overview/overview/metric_item.tsx
@@ -9,9 +9,8 @@ import React, { useState } from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { css } from '@emotion/react';
 import { Chart, Settings, Metric, MetricTrendShape } from '@elastic/charts';
-import { EuiPanel, EuiSpacer } from '@elastic/eui';
+import { EuiPanel, EuiSpacer, useEuiTheme, EuiThemeComputed } from '@elastic/eui';
 import { useElasticChartsTheme } from '@kbn/charts-theme';
-import { useTheme } from '@kbn/observability-shared-plugin/public';
 import moment from 'moment';
 import { useSelector, useDispatch } from 'react-redux';
 
@@ -36,23 +35,19 @@ import { MetricItemExtra } from './metric_item/metric_item_extra';
 
 const METRIC_ITEM_HEIGHT = 160;
 
-export const getColor = (
-  theme: ReturnType<typeof useTheme>,
-  isEnabled: boolean,
-  status?: string
-) => {
+export const getColor = (theme: EuiThemeComputed, isEnabled: boolean, status?: string) => {
   if (!isEnabled) {
-    return theme.eui.euiColorLightestShade;
+    return theme.colors.disabled;
   }
   switch (status) {
     case 'down':
-      return theme.eui.euiColorVis9_behindText;
+      return theme.colors.danger;
     case 'up':
-      return theme.eui.euiColorVis0_behindText;
+      return theme.colors.success;
     case 'unknown':
-      return theme.eui.euiColorGhost;
+      return theme.colors.ghost;
     default:
-      return theme.eui.euiColorVis0_behindText;
+      return theme.colors.success;
   }
 };
 
@@ -73,12 +68,13 @@ export const MetricItem = ({
     configId: monitor.configId,
     locationId: monitor.locationId,
   });
-  const theme = useTheme();
 
   const testInProgress = useSelector(manualTestRunInProgressSelector(monitor.configId));
 
   const dispatch = useDispatch();
 
+  const theme = useEuiTheme();
+
   return (
     <div
       data-test-subj={`${monitor.name}-${monitor.locationId}-metric-item`}
@@ -164,7 +160,7 @@ export const MetricItem = ({
                       </div>
                     ) : undefined,
                   valueFormatter: (d: number) => formatDuration(d),
-                  color: getColor(theme, monitor.isEnabled, status),
+                  color: getColor(theme.euiTheme, monitor.isEnabled, status),
                   body: <MetricItemBody monitor={monitor} />,
                 },
               ],

diff --git a/...apps/synthetics/components/monitors_page/overview/overview/monitor_detail_flyout.test.tsx b/...apps/synthetics/components/monitors_page/overview/overview/monitor_detail_flyout.test.tsx
@@ -9,7 +9,6 @@ import React from 'react';
 import { render } from '../../../../utils/testing/rtl_helpers';
 import { fireEvent } from '@testing-library/react';
 import { MonitorDetailFlyout } from './monitor_detail_flyout';
-import * as observabilitySharedPublic from '@kbn/observability-shared-plugin/public';
 import * as monitorDetail from '../../../../hooks/use_monitor_detail';
 import * as statusByLocation from '../../../../hooks/use_status_by_location';
 import * as monitorDetailLocator from '../../../../hooks/use_monitor_detail_locator';
@@ -31,9 +30,6 @@ useFetcherMock.mockReturnValue({
 
 describe('Monitor Detail Flyout', () => {
   beforeEach(() => {
-    jest
-      .spyOn(observabilitySharedPublic, 'useTheme')
-      .mockReturnValue({ eui: { euiColorVis0: 'red', euiColorVis9: 'red' } } as any);
     jest.spyOn(monitorDetail, 'useMonitorDetail').mockReturnValue({
       data: {
         docId: 'docId',

diff --git a/...blic/apps/synthetics/components/monitors_page/overview/overview/monitor_detail_flyout.tsx b/...blic/apps/synthetics/components/monitors_page/overview/overview/monitor_detail_flyout.tsx
@@ -23,13 +23,13 @@ import {
   EuiPanel,
   EuiSpacer,
   EuiTitle,
+  useEuiTheme,
   useIsWithinMaxBreakpoint,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { useTheme } from '@kbn/observability-shared-plugin/public';
 import { FlyoutParamProps } from './types';
 import { useKibanaSpace } from '../../../../../../hooks/use_kibana_space';
 import { useOverviewStatus } from '../../hooks/use_overview_status';
@@ -89,7 +89,7 @@ function DetailFlyoutDurationChart({
   | 'previousDurationChartFrom'
   | 'previousDurationChartTo'
 >) {
-  const theme = useTheme();
+  const theme = useEuiTheme();
 
   const {
     exploratoryView: { ExploratoryViewEmbeddable },
@@ -108,7 +108,7 @@ function DetailFlyoutDurationChart({
         attributes={[
           {
             seriesType: 'area',
-            color: theme?.eui?.euiColorVis1,
+            color: theme.euiTheme.colors.vis.euiColorVis1,
             time: {
               from: currentDurationChartFrom ?? DEFAULT_DURATION_CHART_FROM,
               to: currentDurationChartTo ?? DEFAULT_CURRENT_DURATION_CHART_TO,
@@ -130,7 +130,7 @@ function DetailFlyoutDurationChart({
           },
           {
             seriesType: 'line',
-            color: theme?.eui?.euiColorVis7,
+            color: theme.euiTheme.colors.vis.euiColorVis7,
             time: {
               from: previousDurationChartFrom ?? DEFAULT_PREVIOUS_DURATION_CHART_FROM,
               to: previousDurationChartTo ?? DEFAULT_PREVIOUS_DURATION_CHART_TO,

diff --git a/...ics/public/apps/synthetics/components/monitors_page/overview/overview/overview_alerts.tsx b/...ics/public/apps/synthetics/components/monitors_page/overview/overview/overview_alerts.tsx
@@ -6,9 +6,15 @@
  */
 
 import React, { useMemo } from 'react';
-import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiSpacer, EuiTitle } from '@elastic/eui';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiPanel,
+  EuiSpacer,
+  EuiTitle,
+  useEuiTheme,
+} from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { useTheme } from '@kbn/observability-shared-plugin/public';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { useSelector } from 'react-redux';
 import { RECORDS_FIELD } from '@kbn/exploratory-view-plugin/public';
@@ -62,7 +68,7 @@ export const OverviewAlerts = () => {
     exploratoryView: { ExploratoryViewEmbeddable },
   } = useKibana<ClientPluginsStart>().services;
 
-  const theme = useTheme();
+  const theme = useEuiTheme();
   const filters = useMonitorFilters({ forAlerts: true });
 
   const { locations } = useGetUrlParams();
@@ -99,7 +105,7 @@ export const OverviewAlerts = () => {
                   { field: 'kibana.alert.status', values: ['active', 'recovered'] },
                   ...filters,
                 ],
-                color: theme.eui.euiColorVis1,
+                color: theme.euiTheme.colors.vis.euiColorVis1,
               },
             ]}
           />
@@ -129,7 +135,7 @@ export const OverviewAlerts = () => {
                   { field: 'kibana.alert.status', values: ['active', 'recovered'] },
                   ...filters,
                 ],
-                color: theme.eui.euiColorVis1_behindText,
+                color: theme.euiTheme.colors.vis.euiColorVis1,
               },
             ]}
           />

diff --git a/...hetics/public/apps/synthetics/components/step_details_page/step_objects/color_palette.tsx b/...hetics/public/apps/synthetics/components/step_details_page/step_objects/color_palette.tsx
@@ -13,8 +13,8 @@ import {
   EuiSkeletonRectangle,
   EuiIcon,
   EuiToolTip,
+  useEuiTheme,
 } from '@elastic/eui';
-import { useTheme } from '@kbn/observability-shared-plugin/public';
 import { i18n } from '@kbn/i18n';
 import { colourPalette } from '../common/network_data/data_formatting';
 
@@ -116,7 +116,7 @@ export const ColorPaletteFlexItem = ({
   percent: number;
   loading: boolean;
 }) => {
-  const { eui } = useTheme();
+  const theme = useEuiTheme();
 
   const [value, setVal] = useState(0);
 
@@ -146,7 +146,7 @@ export const ColorPaletteFlexItem = ({
         overflow: 'hidden',
       }}
     >
-      <EuiFlexItem grow={true} style={{ backgroundColor: eui.euiColorLightShade }}>
+      <EuiFlexItem grow={true} style={{ backgroundColor: theme.euiTheme.colors.lightShade }}>
         <span
           style={{
             backgroundColor: (colourPalette as Record<string, string>)[mimeType],