[8.x] chore(slo): remove deprecated theme provider and usage of styled-components (#200248) (#200969)

# Backport

This will backport the following commits from `main` to `8.x`:
- [chore(slo): remove deprecated theme provider and usage of
styled-components
(#200248)](https://github.com/elastic/kibana/pull/200248)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Kevin
Delemme","email":"kevin.delemme@elastic.co"},"sourceCommit":{"committedDate":"2024-11-20T15:37:32Z","message":"chore(slo):
remove deprecated theme provider and usage of styled-components
(#200248)","sha":"684a1308d279acbdff7f49bcce204854c2a95681","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","backport:prev-minor","ci:project-deploy-observability","Team:obs-ux-management","v8.17.0"],"title":"chore(slo):
remove deprecated theme provider and usage of
styled-components","number":200248,"url":"https://github.com/elastic/kibana/pull/200248","mergeCommit":{"message":"chore(slo):
remove deprecated theme provider and usage of styled-components
(#200248)","sha":"684a1308d279acbdff7f49bcce204854c2a95681"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/200248","number":200248,"mergeCommit":{"message":"chore(slo):
remove deprecated theme provider and usage of styled-components
(#200248)","sha":"684a1308d279acbdff7f49bcce204854c2a95681"}},{"branch":"8.x","label":"v8.17.0","branchLabelMappingKey":"^v8.17.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Kevin Delemme <kevin.delemme@elastic.co>

packages/kbn-babel-preset/styled_components_files.js

@@ -15,7 +15,7 @@ module.exports = {
   USES_STYLED_COMPONENTS: [
     /packages[\/\\]kbn-ui-shared-deps-(npm|src)[\/\\]/,
     /src[\/\\]plugins[\/\\](kibana_react)[\/\\]/,
-    /x-pack[\/\\]plugins[\/\\](observability_solution\/apm|beats_management|fleet|observability_solution\/infra|lists|observability_solution\/observability|observability_solution\/observability_shared|observability_solution\/exploratory_view|observability_solution\/slo|security_solution|timelines|observability_solution\/synthetics|observability_solution\/ux|observability_solution\/uptime)[\/\\]/,
+    /x-pack[\/\\]plugins[\/\\](observability_solution\/apm|beats_management|fleet|observability_solution\/infra|lists|observability_solution\/observability|observability_solution\/observability_shared|observability_solution\/exploratory_view|security_solution|timelines|observability_solution\/synthetics|observability_solution\/ux|observability_solution\/uptime)[\/\\]/,
     /x-pack[\/\\]test[\/\\]plugin_functional[\/\\]plugins[\/\\]resolver_test[\/\\]/,
     /x-pack[\/\\]packages[\/\\]elastic_assistant[\/\\]/,
     /x-pack[\/\\]packages[\/\\]security-solution[\/\\]ecs_data_quality_dashboard[\/\\]/,

x-pack/plugins/observability_solution/slo/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/slo/public/application.tsx

@@ -5,10 +5,9 @@
  * 2.0.
  */
 
-import { AppMountParameters, APP_WRAPPER_CLASS, CoreStart } from '@kbn/core/public';
+import { APP_WRAPPER_CLASS, AppMountParameters, CoreStart } from '@kbn/core/public';
 import { PerformanceContextProvider } from '@kbn/ebt-tools';
 import { i18n } from '@kbn/i18n';
-import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common';
 import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
 import { Storage } from '@kbn/kibana-utils-plugin/public';
 import { ObservabilityRuleTypeRegistry } from '@kbn/observability-plugin/public';
@@ -25,7 +24,7 @@ import { ExperimentalFeatures } from '../common/config';
 import { PluginContext } from './context/plugin_context';
 import { usePluginContext } from './hooks/use_plugin_context';
 import { getRoutes } from './routes/routes';
-import { SLORepositoryClient, SLOPublicPluginsStart } from './types';
+import { SLOPublicPluginsStart, SLORepositoryClient } from './types';
 
 interface Props {
   core: CoreStart;
@@ -55,7 +54,6 @@ export const renderApp = ({
   sloClient,
 }: Props) => {
   const { element, history, theme$ } = appMountParameters;
-  const isDarkMode = core.theme.getTheme().darkMode;
 
   // ensure all divs are .kbnAppWrappers
   element.classList.add(APP_WRAPPER_CLASS);
@@ -116,15 +114,13 @@ export const renderApp = ({
                 }}
               >
                 <Router history={history}>
-                  <EuiThemeProvider darkMode={isDarkMode}>
-                    <RedirectAppLinks coreStart={core} data-test-subj="observabilityMainContainer">
-                      <PerformanceContextProvider>
-                        <QueryClientProvider client={queryClient}>
-                          <App />
-                        </QueryClientProvider>
-                      </PerformanceContextProvider>
-                    </RedirectAppLinks>
-                  </EuiThemeProvider>
+                  <RedirectAppLinks coreStart={core} data-test-subj="observabilityMainContainer">
+                    <PerformanceContextProvider>
+                      <QueryClientProvider client={queryClient}>
+                        <App />
+                      </QueryClientProvider>
+                    </PerformanceContextProvider>
+                  </RedirectAppLinks>
                 </Router>
               </PluginContext.Provider>
             </KibanaContextProvider>

x-pack/plugins/observability_solution/slo/public/embeddable/slo/alerts/slo_alerts_wrapper.tsx

@@ -10,7 +10,7 @@ import { i18n } from '@kbn/i18n';
 import { EuiFlexGroup, EuiFlexItem, EuiLink } from '@elastic/eui';
 import type { TimeRange } from '@kbn/es-query';
 import { Subject } from 'rxjs';
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { observabilityPaths } from '@kbn/observability-plugin/common';
 import { FetchContext } from '@kbn/presentation-publishing';
 import { SloIncludedCount } from './components/slo_included_count';
@@ -72,14 +72,10 @@ export function SloAlertsWrapper({
     }
   }, [isSummaryLoaded, isTableLoaded, onRenderComplete]);
   const handleGoToAlertsClick = () => {
-    let kuery = '';
-    slos.map((slo, index) => {
-      const shouldAddOr = index < slos.length - 1;
-      kuery += `(slo.id:"${slo.id}" and slo.instanceId:"${slo.instanceId}")`;
-      if (shouldAddOr) {
-        kuery += ' or ';
-      }
-    });
+    const kuery = slos
+      .map((slo) => `(slo.id:"${slo.id}" and slo.instanceId:"${slo.instanceId}")`)
+      .join(' or ');
+
     navigateToUrl(
       `${basePath.prepend(observabilityPaths.alerts)}?_a=(kuery:'${kuery}',rangeFrom:${
         timeRange.from
@@ -87,12 +83,17 @@ export function SloAlertsWrapper({
     );
   };
   return (
-    <Wrapper>
+    <div
+      css={css`
+        width: 100%;
+        overflow: scroll;
+      `}
+    >
       <EuiFlexGroup
         data-shared-item=""
         justifyContent="flexEnd"
         wrap
-        css={`
+        css={css`
           margin: 0 35px;
         `}
       >
@@ -150,11 +151,6 @@ export function SloAlertsWrapper({
           />
         </EuiFlexItem>
       </EuiFlexGroup>
-    </Wrapper>
+    </div>
   );
 }
-
-const Wrapper = styled.div`
-  width: 100%;
-  overflow: scroll;
-`;

x-pack/plugins/observability_solution/slo/public/embeddable/slo/alerts/slo_configuration.tsx

@@ -5,24 +5,24 @@
  * 2.0.
  */
 
-import React, { useState } from 'react';
 import {
-  EuiFlyout,
-  EuiFlyoutHeader,
-  EuiFlyoutBody,
-  EuiFlyoutFooter,
-  EuiTitle,
   EuiButton,
   EuiButtonEmpty,
   EuiFlexGroup,
   EuiFlexItem,
+  EuiFlyout,
+  EuiFlyoutBody,
+  EuiFlyoutFooter,
+  EuiFlyoutHeader,
   EuiSpacer,
   EuiSwitch,
+  EuiTitle,
 } from '@elastic/eui';
-import { FormattedMessage } from '@kbn/i18n-react';
+import { css } from '@emotion/react';
 import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';
 import { ALL_VALUE } from '@kbn/slo-schema';
-
+import React, { useState } from 'react';
 import { SloSelector } from './slo_selector';
 import type { EmbeddableSloProps, SloItem } from './types';
 
@@ -47,7 +47,7 @@ export function SloConfiguration({ initialInput, onCreate, onCancel }: SloConfig
   return (
     <EuiFlyout
       onClose={onCancel}
-      css={`
+      css={css`
         min-width: 550px;
       `}
     >

x-pack/plugins/observability_solution/slo/public/embeddable/slo/burn_rate/burn_rate.tsx

@@ -5,8 +5,15 @@
  * 2.0.
  */
 
-import { EuiBadge, EuiFlexGroup, EuiFlexItem, EuiLink, EuiLoadingChart } from '@elastic/eui';
-import { css } from '@emotion/css';
+import {
+  EuiBadge,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiLink,
+  EuiLoadingChart,
+  UseEuiTheme,
+} from '@elastic/eui';
+import { css } from '@emotion/react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { SLOWithSummaryResponse } from '@kbn/slo-schema';
@@ -41,12 +48,7 @@ export function BurnRate({ sloId, sloInstanceId, duration, reloadSubject }: Embe
 
   if (isLoading || !slo) {
     return (
-      <EuiFlexGroup
-        direction="column"
-        alignItems="center"
-        justifyContent="center"
-        className={container}
-      >
+      <EuiFlexGroup direction="column" alignItems="center" justifyContent="center" css={container}>
         <EuiFlexItem grow={false}>
           <EuiLoadingChart />
         </EuiFlexItem>
@@ -56,12 +58,7 @@ export function BurnRate({ sloId, sloInstanceId, duration, reloadSubject }: Embe
 
   if (isSloNotFound) {
     return (
-      <EuiFlexGroup
-        direction="column"
-        alignItems="center"
-        justifyContent="center"
-        className={container}
-      >
+      <EuiFlexGroup direction="column" alignItems="center" justifyContent="center" css={container}>
         <EuiFlexItem grow={false}>
           {i18n.translate('xpack.slo.sloEmbeddable.overview.sloNotFoundText', {
             defaultMessage:
@@ -84,7 +81,7 @@ export function BurnRate({ sloId, sloInstanceId, duration, reloadSubject }: Embe
           <EuiFlexItem>
             <EuiLink
               data-test-subj="sloBurnRateLink"
-              className={link}
+              css={link}
               color="text"
               onClick={() => {
                 setSelectedSlo(slo);
@@ -146,7 +143,7 @@ const container = css`
   height: 100%;
 `;
 
-const link = css`
-  font-size: 16px;
-  font-weight: 700;
+const link = ({ euiTheme }: UseEuiTheme) => css`
+  font-size: ${euiTheme.size.base};
+  font-weight: ${euiTheme.font.weight.bold};
 `;

x-pack/plugins/observability_solution/slo/public/embeddable/slo/overview/slo_embeddable_factory.tsx

@@ -5,7 +5,8 @@
  * 2.0.
  */
 
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, UseEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
 import type { CoreStart } from '@kbn/core-lifecycle-browser';
 import { ReactEmbeddableFactory } from '@kbn/embeddable-plugin/public';
 import { i18n } from '@kbn/i18n';
@@ -21,7 +22,6 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { createBrowserHistory } from 'history';
 import React, { useEffect } from 'react';
 import { BehaviorSubject, Subject } from 'rxjs';
-import styled from 'styled-components';
 import { PluginContext } from '../../../context/plugin_context';
 import type { SLOPublicPluginsStart, SLORepositoryClient } from '../../../types';
 import { SLO_OVERVIEW_EMBEDDABLE_ID } from './constants';
@@ -165,11 +165,21 @@ export const getOverviewEmbeddableFactory = ({
               const kqlQuery = groupFilters?.kqlQuery ?? '';
               const groups = groupFilters?.groups ?? [];
               return (
-                <Wrapper>
+                <div
+                  css={({ euiTheme }: UseEuiTheme) => css`
+                    width: 100%;
+                    padding: ${euiTheme.size.xs} ${euiTheme.size.base};
+                    overflow: scroll;
+
+                    .euiAccordion__buttonContent {
+                      min-width: ${euiTheme.base * 6}px;
+                    }
+                  `}
+                >
                   <EuiFlexGroup data-test-subj="sloGroupOverviewPanel" data-shared-item="">
                     <EuiFlexItem
-                      css={`
-                        margin-top: 20px;
+                      css={({ euiTheme }: UseEuiTheme) => css`
+                        margin-top: ${euiTheme.base * 1.25}px;
                       `}
                     >
                       <GroupSloView
@@ -182,7 +192,7 @@ export const getOverviewEmbeddableFactory = ({
                       />
                     </EuiFlexItem>
                   </EuiFlexGroup>
-                </Wrapper>
+                </div>
               );
             } else {
               return (
@@ -230,13 +240,3 @@ export const getOverviewEmbeddableFactory = ({
   };
   return factory;
 };
-
-const Wrapper = styled.div`
-  width: 100%;
-  padding: 5px 15px;
-  overflow: scroll;
-
-  .euiAccordion__buttonContent {
-    min-width: 100px;
-  }
-`;

x-pack/plugins/observability_solution/slo/public/pages/slo_edit/components/common/query_search_bar.tsx

@@ -6,16 +6,16 @@
  */
 
 import { EuiFormRow } from '@elastic/eui';
-import { Controller, useFormContext } from 'react-hook-form';
-import { fromKueryExpression, Query, TimeRange, toElasticsearchQuery } from '@kbn/es-query';
+import { css } from '@emotion/react';
+import { Query, TimeRange, fromKueryExpression, toElasticsearchQuery } from '@kbn/es-query';
+import { observabilityAppId } from '@kbn/observability-shared-plugin/common';
 import { kqlQuerySchema, kqlWithFiltersSchema } from '@kbn/slo-schema';
 import React, { memo } from 'react';
-import styled from 'styled-components';
-import { observabilityAppId } from '@kbn/observability-shared-plugin/common';
-import { SearchBarProps } from './query_builder';
+import { Controller, useFormContext } from 'react-hook-form';
 import { useKibana } from '../../../../hooks/use_kibana';
 import { CreateSLOForm } from '../../types';
 import { OptionalText } from './optional_text';
+import { SearchBarProps } from './query_builder';
 
 export const QuerySearchBar = memo(
   ({
@@ -90,7 +90,13 @@ export const QuerySearchBar = memo(
               error={fieldState.error?.message}
               fullWidth
             >
-              <Container>
+              <div
+                css={css`
+                  .uniSearchBar {
+                    padding: 0;
+                  }
+                `}
+              >
                 <SearchBar
                   appName={observabilityAppId}
                   dataTestSubj={dataTestSubj}
@@ -153,7 +159,7 @@ export const QuerySearchBar = memo(
                   onClearSavedQuery={() => {}}
                   filters={kqlQuerySchema.is(field.value) ? [] : field.value?.filters ?? []}
                 />
-              </Container>
+              </div>
             </EuiFormRow>
           );
         }}
@@ -161,9 +167,3 @@ export const QuerySearchBar = memo(
     );
   }
 );
-
-const Container = styled.div`
-  .uniSearchBar {
-    padding: 0;
-  }
-`;

x-pack/plugins/observability_solution/slo/public/pages/slos/components/card_view/slo_card_item_actions.tsx

@@ -4,39 +4,14 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import React from 'react';
-import { SLOWithSummaryResponse } from '@kbn/slo-schema';
-import styled from 'styled-components';
 import { useEuiShadow } from '@elastic/eui';
+import { css } from '@emotion/react';
+import { SLOWithSummaryResponse } from '@kbn/slo-schema';
 import { Rule } from '@kbn/triggers-actions-ui-plugin/public';
+import React from 'react';
 import { BurnRateRuleParams } from '../../../../typings';
 import { SloItemActions } from '../slo_item_actions';
 
-type PopoverPosition = 'relative' | 'default';
-
-interface ActionContainerProps {
-  boxShadow: string;
-  position: PopoverPosition;
-}
-
-const Container = styled.div<ActionContainerProps>`
-  ${({ position }) =>
-    position === 'relative'
-      ? // custom styles used to overlay the popover button on `MetricItem`
-        `
-  display: inline-block;
-  position: relative;
-  bottom: 42px;
-  left: 12px;
-  z-index: 1;
-`
-      : // otherwise, no custom position needed
-        ''}
-
-  border-radius: ${({ theme }) => theme.eui.euiBorderRadius};
-  ${({ boxShadow, position }) => (position === 'relative' ? boxShadow : '')}
-`;
-
 interface Props {
   slo: SLOWithSummaryResponse;
   isActionsPopoverOpen: boolean;
@@ -50,10 +25,19 @@ interface Props {
 }
 
 export function SloCardItemActions(props: Props) {
-  const euiShadow = useEuiShadow('l');
-
+  const shadow = useEuiShadow('l');
   return (
-    <Container boxShadow={euiShadow} position={'relative'}>
+    <div
+      css={({ euiTheme }) => css`
+        display: inline-block;
+        position: relative;
+        bottom: ${euiTheme.size.xxl};
+        left: ${euiTheme.size.m};
+        z-index: 1;
+        border-radius: ${euiTheme.border.radius.medium};
+        ${shadow}
+      `}
+    >
       <SloItemActions
         {...props}
         btnProps={{
@@ -62,6 +46,6 @@ export function SloCardItemActions(props: Props) {
           display: 'empty',
         }}
       />
-    </Container>
+    </div>
   );
 }

x-pack/plugins/observability_solution/slo/public/pages/slos/components/card_view/slo_card_item_badges.tsx

@@ -9,7 +9,7 @@ import { EuiFlexGroup } from '@elastic/eui';
 import { SLOWithSummaryResponse } from '@kbn/slo-schema';
 import { Rule } from '@kbn/triggers-actions-ui-plugin/public';
 import React, { useCallback } from 'react';
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { SloIndicatorTypeBadge } from '../badges/slo_indicator_type_badge';
 import { SloActiveAlertsBadge } from '../../../../components/slo/slo_status_badge/slo_active_alerts_badge';
 import { BurnRateRuleParams } from '../../../../typings';
@@ -29,11 +29,6 @@ interface Props {
   handleCreateRule?: () => void;
 }
 
-const Container = styled.div`
-  display: inline-block;
-  margin-top: 5px;
-`;
-
 export function SloCardItemBadges({ slo, activeAlerts, rules, handleCreateRule }: Props) {
   const { onStateChange } = useUrlSearchState();
 
@@ -52,10 +47,15 @@ export function SloCardItemBadges({ slo, activeAlerts, rules, handleCreateRule }
   const numberOfTagsToDisplay = !isRemote || (rules ?? []).length > 0 ? 2 : 1;
 
   return (
-    <Container
+    <div
+      css={({ euiTheme }) => css`
+        display: inline-block;
+        margin-top: ${euiTheme.size.xs};
+      `}
       onClick={(evt) => {
         evt.stopPropagation();
       }}
+      aria-hidden="true"
     >
       <EuiFlexGroup direction="row" responsive={false} gutterSize="xs" alignItems="center" wrap>
         {!slo.summary ? (
@@ -78,6 +78,6 @@ export function SloCardItemBadges({ slo, activeAlerts, rules, handleCreateRule }
           </>
         )}
       </EuiFlexGroup>
-    </Container>
+    </div>
   );
 }

x-pack/plugins/observability_solution/slo/public/pages/slos/components/common/quick_filters.tsx

@@ -5,14 +5,14 @@
  * 2.0.
  */
 
-import { i18n } from '@kbn/i18n';
-import { skip } from 'rxjs';
-import React, { useEffect, useState } from 'react';
+import { css } from '@emotion/react';
 import { ControlGroupRenderer, ControlGroupRendererApi } from '@kbn/controls-plugin/public';
 import { DataView } from '@kbn/data-views-plugin/common';
-import styled from 'styled-components';
 import { Filter } from '@kbn/es-query';
+import { i18n } from '@kbn/i18n';
 import { isEmpty } from 'lodash';
+import React, { useEffect, useState } from 'react';
+import { skip } from 'rxjs';
 import { SearchState } from '../../hooks/use_url_search_state';
 
 interface Props {
@@ -53,7 +53,17 @@ export function QuickFilters({
   }
 
   return (
-    <Container>
+    <div
+      css={css`
+        .controlsWrapper {
+          align-items: flex-start;
+          min-height: initial;
+        }
+        .controlGroup {
+          min-height: initial;
+        }
+      `}
+    >
       <ControlGroupRenderer
         onApiAvailable={setControlGroupAPI}
         getCreationOptions={async (initialState, builder) => {
@@ -94,7 +104,7 @@ export function QuickFilters({
         timeRange={{ from: 'now-24h', to: 'now' }}
         compressed={false}
       />
-    </Container>
+    </div>
   );
 }
 
@@ -114,16 +124,6 @@ export const getSelectedOptions = (filter?: Filter) => {
   return [];
 };
 
-const Container = styled.div`
-  .controlsWrapper {
-    align-items: flex-start;
-    min-height: initial;
-  }
-  .controlGroup {
-    min-height: initial;
-  }
-`;
-
 const TAGS_LABEL = i18n.translate('xpack.slo.list.tags', {
   defaultMessage: 'Tags',
 });

x-pack/plugins/observability_solution/slo/public/pages/slos/components/slo_item_actions.tsx

@@ -14,15 +14,15 @@ import {
   EuiPopover,
   useEuiShadow,
 } from '@elastic/eui';
+import { css } from '@emotion/react';
 import { i18n } from '@kbn/i18n';
 import { SLOWithSummaryResponse } from '@kbn/slo-schema';
 import { Rule } from '@kbn/triggers-actions-ui-plugin/public';
 import React from 'react';
-import styled from 'styled-components';
-import { usePermissions } from '../../../hooks/use_permissions';
 import { useCloneSlo } from '../../../hooks/use_clone_slo';
-import { BurnRateRuleParams } from '../../../typings';
 import { useKibana } from '../../../hooks/use_kibana';
+import { usePermissions } from '../../../hooks/use_permissions';
+import { BurnRateRuleParams } from '../../../typings';
 import { useSloActions } from '../../slo_details/hooks/use_slo_actions';
 
 interface Props {
@@ -37,24 +37,22 @@ interface Props {
   btnProps?: Partial<EuiButtonIconProps>;
   rules?: Array<Rule<BurnRateRuleParams>>;
 }
-const CustomShadowPanel = styled(EuiPanel)<{ shadow: string }>`
-  ${(props) => props.shadow}
-`;
 
-function IconPanel({ children, hasPanel }: { children: JSX.Element; hasPanel: boolean }) {
+function IconPanel({ children }: { children: JSX.Element }) {
   const shadow = useEuiShadow('s');
-  if (!hasPanel) return children;
   return (
-    <CustomShadowPanel
+    <EuiPanel
       color="plain"
       element="button"
       grow={false}
       paddingSize="none"
       hasShadow={false}
-      shadow={shadow}
+      css={css`
+        ${shadow}
+      `}
     >
       {children}
-    </CustomShadowPanel>
+    </EuiPanel>
   );
 }
 
@@ -161,7 +159,7 @@ export function SloItemActions({
   return (
     <EuiPopover
       anchorPosition="downLeft"
-      button={btnProps ? <IconPanel hasPanel={true}>{btn}</IconPanel> : btn}
+      button={btnProps ? <IconPanel>{btn}</IconPanel> : btn}
       panelPaddingSize="m"
       closePopover={handleClickActions}
       isOpen={isActionsPopoverOpen}

x-pack/plugins/observability_solution/slo/public/pages/slos/components/slo_list_search_bar.tsx

@@ -5,11 +5,11 @@
  * 2.0.
  */
 
+import { css } from '@emotion/react';
 import { Query } from '@kbn/es-query';
 import { i18n } from '@kbn/i18n';
 import { observabilityAppId } from '@kbn/observability-plugin/public';
 import React, { useEffect } from 'react';
-import styled from 'styled-components';
 import { useKibana } from '../../../hooks/use_kibana';
 import { useSloCrudLoading } from '../hooks/use_crud_loading';
 import { useSloSummaryDataView } from '../hooks/use_summary_dataview';
@@ -42,7 +42,13 @@ export function SloListSearchBar() {
   }, [onStateChange, query]);
 
   return (
-    <Container>
+    <div
+      css={css`
+        .uniSearchBar {
+          padding: 0;
+        }
+      `}
+    >
       <SearchBar
         appName={observabilityAppId}
         placeholder={PLACEHOLDER}
@@ -77,16 +83,10 @@ export function SloListSearchBar() {
           });
         }}
       />
-    </Container>
+    </div>
   );
 }
 
-const Container = styled.div`
-  .uniSearchBar {
-    padding: 0;
-  }
-`;
-
 const PLACEHOLDER = i18n.translate('xpack.slo.list.search', {
   defaultMessage: 'Search your SLOs ...',
 });

x-pack/plugins/observability_solution/slo/public/utils/test_helper.tsx

@@ -9,16 +9,15 @@ import { AppMountParameters } from '@kbn/core/public';
 import { coreMock } from '@kbn/core/public/mocks';
 import { dataPluginMock } from '@kbn/data-plugin/public/mocks';
 import { __IntlProvider as IntlProvider } from '@kbn/i18n-react';
-import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common';
 import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
 import { createObservabilityRuleTypeRegistryMock } from '@kbn/observability-plugin/public';
+import { DefaultClientOptions, createRepositoryClient } from '@kbn/server-route-repository-client';
 import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { render as testLibRender } from '@testing-library/react';
 import React from 'react';
-import { DefaultClientOptions, createRepositoryClient } from '@kbn/server-route-repository-client';
-import { PluginContext } from '../context/plugin_context';
 import type { SLORouteRepository } from '../../server/routes/get_slo_server_route_repository';
+import { PluginContext } from '../context/plugin_context';
 
 const appMountParameters = { setHeaderActionMenu: () => {} } as unknown as AppMountParameters;
 const observabilityRuleTypeRegistry = createObservabilityRuleTypeRegistryMock();
@@ -67,9 +66,7 @@ export const render = (component: React.ReactNode) => {
             sloClient,
           }}
         >
-          <QueryClientProvider client={queryClient}>
-            <EuiThemeProvider>{component}</EuiThemeProvider>
-          </QueryClientProvider>
+          <QueryClientProvider client={queryClient}>{component}</QueryClientProvider>
         </PluginContext.Provider>
       </KibanaContextProvider>
     </IntlProvider>

x-pack/plugins/observability_solution/slo/tsconfig.json

@@ -7,7 +7,9 @@
     "common/**/*",
     "public/**/*",
     "server/**/*",
-    "../../../typings/**/*"
+    "../../../typings/**/*",
+    // Emotion theme typing
+    "./emotion.d.ts"
   ],
   "exclude": [
     "target/**/*"