chore(slo): remove deprecated theme provider and usage of styled-components

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,27 +72,28 @@ 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
       },rangeTo:${timeRange.to})`
     );
   };
   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,17 +159,11 @@ export const QuerySearchBar = memo(
                   onClearSavedQuery={() => {}}
                   filters={kqlQuerySchema.is(field.value) ? [] : field.value?.filters ?? []}
                 />
-              </Container>
+              </div>
             </EuiFormRow>
           );
         }}
       />
     );
   }
 );
-
-const Container = styled.div`
-  .uniSearchBar {
-    padding: 0;
-  }
-`;