[Observability plugin] Audit new EUI Borealis theme

packages/kbn-babel-preset/styled_components_files.js

@@ -21,15 +21,7 @@ module.exports = {
     /x-pack[\/\\]plugins[\/\\]observability_solution[\/\\]observability_shared[\/\\]/,
     /x-pack[\/\\]plugins[\/\\]security_solution[\/\\]/,
     /x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\]exploratory_view[\/\\]/,
-    /x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\]investigate_app[\/\\]/,
-    /x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\]investigate[\/\\]/,
-    /x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\]observability_ai_assistant_app[\/\\]/,
-    /x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\]observability_ai_assistant_management[\/\\]/,
-    /x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\]observability_solution[\/\\]/,
     /x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\]observability[\/\\]/,
-    /x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\]serverless_observability[\/\\]/,
-    /x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\]streams_app[\/\\]/,
-    /x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\]streams[\/\\]/,
     /x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\]synthetics[\/\\]/,
     /x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\]uptime[\/\\]/,
     /x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\]ux[\/\\]/,

x-pack/plugins/observability_solution/observability_shared/public/components/field_value_suggestions/field_value_selection.test.tsx

@@ -8,8 +8,7 @@
 import React from 'react';
 import { mount, render } from 'enzyme';
 import { FieldValueSelection } from './field_value_selection';
-import { EuiSelectableList } from '@elastic/eui';
-import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common';
+import { EuiSelectableList, EuiThemeProvider } from '@elastic/eui';
 
 const values = [
   { label: 'elastic co frontend', count: 1 },
@@ -56,23 +55,23 @@ describe('FieldValueSelection', () => {
     expect((list.props() as any).visibleOptions).toMatchInlineSnapshot(`
       Array [
         Object {
-          "append": <styled.div>
+          "append": <Styled(div)>
             <EuiText
               size="xs"
             >
               1
             </EuiText>
-          </styled.div>,
+          </Styled(div)>,
           "label": "elastic co frontend",
         },
         Object {
-          "append": <styled.div>
+          "append": <Styled(div)>
             <EuiText
               size="xs"
             >
               2
             </EuiText>
-          </styled.div>,
+          </Styled(div)>,
           "label": "apm server",
         },
       ]

x-pack/plugins/observability_solution/observability_shared/public/components/field_value_suggestions/field_value_selection.tsx

@@ -21,15 +21,13 @@ import {
   useEuiTheme,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import styled from 'styled-components';
 import { isEqual, map } from 'lodash';
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
 import { FieldValueSelectionProps, ListItem } from './types';
-
-const Counter = euiStyled.div`
-  border-radius: ${({ theme }) => theme.eui.euiBorderRadius};
-  background: ${({ theme }) => theme.eui.euiColorLightShade};
-  padding: 0 ${({ theme }) => theme.eui.euiSizeXS};
+const Counter = styled.div`
+  border-radius: ${({ theme }) => theme.euiTheme.border.radius.medium};
+  background: ${({ theme }) => theme.euiTheme.colors.lightShade};
+  padding: 0 ${({ theme }) => theme.euiTheme.size.xs};
 `;
 
 const formatOptions = (
@@ -221,7 +219,7 @@ export function FieldValueSelection({
                         css={{
                           flexDirection: 'row-reverse',
                           gap: euiTheme.size.s,
-                          color: euiTheme.colors.subduedText,
+                          color: euiTheme.colors.textSubdued,
                         }}
                         label={i18n.translate(
                           'xpack.observabilityShared.fieldValueSelection.logicalAnd',

x-pack/plugins/observability_solution/observability_shared/public/components/field_value_suggestions/index.test.tsx

@@ -8,7 +8,7 @@
 import React from 'react';
 import { FieldValueSuggestions } from '.';
 import { render, screen, fireEvent, waitForElementToBeRemoved } from '@testing-library/react';
-import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common';
+import { EuiThemeProvider } from '@elastic/eui';
 import * as obsHooks from '../../hooks/use_es_search';
 
 jest.setTimeout(30000);
@@ -45,7 +45,7 @@ describe('FieldValueSuggestions', () => {
     ]);
 
     render(
-      <EuiThemeProvider darkMode={false}>
+      <EuiThemeProvider>
         <FieldValueSuggestions
           label="Service name"
           sourceField={'service'}
@@ -87,7 +87,7 @@ describe('FieldValueSuggestions', () => {
     const onChange = jest.fn();
 
     const { rerender } = render(
-      <EuiThemeProvider darkMode={false}>
+      <EuiThemeProvider>
         <FieldValueSuggestions
           label="Service name"
           sourceField={'service'}
@@ -111,7 +111,7 @@ describe('FieldValueSuggestions', () => {
     await waitForElementToBeRemoved(() => screen.queryByText('Apply'));
 
     rerender(
-      <EuiThemeProvider darkMode={false}>
+      <EuiThemeProvider>
         <FieldValueSuggestions
           label="Service name"
           sourceField={'service'}

x-pack/solutions/observability/plugins/observability_solution/entity_manager_app/public/application.tsx

@@ -6,7 +6,7 @@
  */
 import { AppMountParameters, APP_WRAPPER_CLASS, CoreStart } from '@kbn/core/public';
 import { PerformanceContextProvider } from '@kbn/ebt-tools';
-import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common';
+import { EuiThemeProvider } from '@elastic/eui';
 import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
 import { Storage } from '@kbn/kibana-utils-plugin/public';
 import type { LazyObservabilityPageTemplateProps } from '@kbn/observability-shared-plugin/public';
@@ -44,7 +44,6 @@ export function renderApp({
   entityClient: EntityClient;
 }) {
   const { element, history, theme$ } = appMountParameters;
-  const isDarkMode = core.theme.getTheme().darkMode;
 
   // ensure all divs are .kbnAppWrappers
   element.classList.add(APP_WRAPPER_CLASS);
@@ -80,7 +79,7 @@ export function renderApp({
                 }}
               >
                 <Router history={history}>
-                  <EuiThemeProvider darkMode={isDarkMode}>
+                  <EuiThemeProvider>
                     <RedirectAppLinks coreStart={core} data-test-subj="observabilityMainContainer">
                       <PerformanceContextProvider>
                         <EntityManagerOverviewPage />

x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/common/monitor_test_result/status_badge.tsx

@@ -47,7 +47,7 @@ export const getBadgeColorForMonitorStatus = (status: MonitorStatus): IconColor
 export const getTextColorForMonitorStatus = (
   status: MonitorStatus
 ): keyof EuiThemeComputed['colors'] => {
-  return status === 'skipped' ? 'disabledText' : 'text';
+  return status === 'skipped' ? 'textDisabled' : 'textParagraph';
 };
 
 export const COMPLETE_LABEL = i18n.translate('xpack.synthetics.monitorStatus.complete', {

x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/common/screenshot/empty_thumbnail.tsx

@@ -7,13 +7,7 @@
 
 import React from 'react';
 import { i18n } from '@kbn/i18n';
-import {
-  useEuiTheme,
-  useEuiBackgroundColor,
-  EuiIcon,
-  EuiText,
-  EuiSkeletonRectangle,
-} from '@elastic/eui';
+import { useEuiTheme, EuiIcon, EuiText, EuiSkeletonRectangle } from '@elastic/eui';
 
 import {
   getConfinedScreenshotSize,
@@ -59,7 +53,7 @@ export const EmptyThumbnail = ({
         ...thumbnailStyle,
         width,
         height,
-        background: useEuiBackgroundColor('subdued'),
+        background: euiTheme.colors.backgroundBaseSubdued,
         border: euiTheme.border.thin,
         ...(borderRadius ? { borderRadius } : {}),
       }}
@@ -103,11 +97,11 @@ export const EmptyThumbnail = ({
           <EuiIcon
             data-test-subj="stepScreenshotNotAvailable"
             type="eyeClosed"
-            color={euiTheme.colors.disabledText}
+            color={euiTheme.colors.textDisabled}
           />
 
           {unavailableMessage ? (
-            <EuiText color={euiTheme.colors.disabledText}>{unavailableMessage}</EuiText>
+            <EuiText color={euiTheme.colors.textDisabled}>{unavailableMessage}</EuiText>
           ) : null}
         </div>
       )}

x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/common/screenshot/journey_screenshot_dialog.tsx

@@ -27,8 +27,7 @@ import {
   EuiOutsideClickDetector,
   useIsWithinMaxBreakpoint,
 } from '@elastic/eui';
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
-
+import styled from '@emotion/styled';
 import { SYNTHETICS_API_URLS } from '../../../../../../common/constants';
 import { SyntheticsSettingsContext } from '../../../contexts';
 import { useRetrieveStepImage } from '../monitor_test_result/use_retrieve_step_image';
@@ -173,7 +172,7 @@ export const JourneyScreenshotDialog = ({
               </EuiButtonEmpty>
             </EuiFlexItem>
             <EuiFlexItem grow={false} css={{ flexBasis: 'fit-content' }}>
-              <EuiText color={euiTheme.colors.text}>
+              <EuiText color={euiTheme.colors.textParagraph}>
                 {i18n.translate('xpack.synthetics.monitor.stepOfSteps', {
                   defaultMessage: 'Step: {stepNumber} of {totalSteps}',
                   values: {
@@ -201,7 +200,7 @@ export const JourneyScreenshotDialog = ({
             </EuiFlexItem>
           </EuiFlexGroup>
           <EuiText
-            color={euiTheme.colors.text}
+            color={euiTheme.colors.textParagraph}
             css={{
               outline: 0,
               padding: euiTheme.size.m,
@@ -221,7 +220,7 @@ export const JourneyScreenshotDialog = ({
   ) : null;
 };
 
-const ModalBodyStyled = euiStyled(EuiModalBody)`
+const ModalBodyStyled = styled(EuiModalBody)`
   &&& {
     & > div {
       display: flex;

x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_status/monitor_status_legend.tsx

@@ -52,7 +52,7 @@ export const MonitorStatusLegend = ({ brushable }: { brushable: boolean }) => {
         <>
           <EuiFlexItem aria-hidden={true} grow={true} />
           <EuiFlexItem grow={false}>
-            <EuiText size="xs" color={euiTheme.colors.subduedText}>
+            <EuiText size="xs" color={euiTheme.colors.textSubdued}>
               {labels.BRUSH_AREA_MESSAGE}
             </EuiText>
           </EuiFlexItem>

x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/step_details_page/step_waterfall_chart/waterfall/waterfall_header/waterfall_tick_axis.tsx

@@ -61,7 +61,7 @@ export const WaterfallTickAxis = ({
                         marginBottom: euiTheme.size.s,
                         whiteSpace: 'nowrap',
                         cursor: 'pointer',
-                        color: euiTheme.colors.primaryText,
+                        color: euiTheme.colors.textPrimary,
                       }}
                       onClick={() => {
                         setOnlyHighlighted(!showOnlyHighlightedNetworkRequests);

x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/overview/alerts/monitor_expressions/filters_expression_select.test.tsx

@@ -11,6 +11,7 @@ import { FiltersExpressionsSelect } from './filters_expression_select';
 import { render } from '../../../../lib/helper/rtl_helpers';
 import { filterAriaLabels as aria } from './translations';
 import * as Hooks from '@kbn/observability-shared-plugin/public/hooks/use_values_list';
+import { EuiThemeProvider } from '@elastic/eui';
 
 describe('FiltersExpressionSelect', () => {
   const LOCATION_FIELD_NAME = 'observer.geo.name';
@@ -114,13 +115,15 @@ describe('FiltersExpressionSelect', () => {
       const spy = jest.spyOn(Hooks, 'useValuesList');
       spy.mockReturnValue({ loading: false, values: [{ label: 'test-label', count: 3 }] });
       const { getByLabelText, getByText } = render(
-        <FiltersExpressionsSelect
-          ruleParams={{}}
-          newFilters={newFilters}
-          onRemoveFilter={jest.fn()}
-          setRuleParams={jest.fn()}
-          shouldUpdateUrl={false}
-        />
+        <EuiThemeProvider>
+          <FiltersExpressionsSelect
+            ruleParams={{}}
+            newFilters={newFilters}
+            onRemoveFilter={jest.fn()}
+            setRuleParams={jest.fn()}
+            shouldUpdateUrl={false}
+          />
+        </EuiThemeProvider>
       );
 
       const filterButton = getByLabelText(expectedFilterButtonAriaLabel);

x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/overview/filter_group/filter_group.test.tsx

@@ -10,6 +10,7 @@ import { fireEvent, waitFor } from '@testing-library/react';
 import { render } from '../../../lib/helper/rtl_helpers';
 import { FilterGroup } from './filter_group';
 import * as Hooks from '@kbn/observability-shared-plugin/public/hooks/use_values_list';
+import { EuiThemeProvider } from '@elastic/eui';
 
 describe('FilterGroup', () => {
   it.each([
@@ -97,7 +98,11 @@ describe('FilterGroup', () => {
       });
     }
 
-    const { getByLabelText, getAllByLabelText } = render(<FilterGroup />);
+    const { getByLabelText, getAllByLabelText } = render(
+      <EuiThemeProvider>
+        <FilterGroup />
+      </EuiThemeProvider>
+    );
 
     await waitFor(() => {
       const popoverButton = getByLabelText(popoverButtonLabel);