diff --git a/packages/kbn-babel-preset/styled_components_files.js b/packages/kbn-babel-preset/styled_components_files.js index bcfbc7824ce4b..89b71c06d9e84 100644 --- a/packages/kbn-babel-preset/styled_components_files.js +++ b/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[\/\\]/, diff --git a/x-pack/plugins/observability_solution/slo/emotion.d.ts b/x-pack/plugins/observability_solution/slo/emotion.d.ts new file mode 100644 index 0000000000000..213178080e536 --- /dev/null +++ b/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 {} +} diff --git a/x-pack/plugins/observability_solution/slo/public/application.tsx b/x-pack/plugins/observability_solution/slo/public/application.tsx index 79160de114cd5..abd85fc712c0e 100644 --- a/x-pack/plugins/observability_solution/slo/public/application.tsx +++ b/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 = ({ }} > - - - - - - - - - + + + + + + + diff --git a/x-pack/plugins/observability_solution/slo/public/embeddable/slo/alerts/slo_alerts_wrapper.tsx b/x-pack/plugins/observability_solution/slo/public/embeddable/slo/alerts/slo_alerts_wrapper.tsx index d6c58315cc1ad..b46506ea73d9e 100644 --- a/x-pack/plugins/observability_solution/slo/public/embeddable/slo/alerts/slo_alerts_wrapper.tsx +++ b/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 ( - +
@@ -150,11 +151,6 @@ export function SloAlertsWrapper({ /> - +
); } - -const Wrapper = styled.div` - width: 100%; - overflow: scroll; -`; diff --git a/x-pack/plugins/observability_solution/slo/public/embeddable/slo/alerts/slo_configuration.tsx b/x-pack/plugins/observability_solution/slo/public/embeddable/slo/alerts/slo_configuration.tsx index 979162aee40b2..07d55b02fb270 100644 --- a/x-pack/plugins/observability_solution/slo/public/embeddable/slo/alerts/slo_configuration.tsx +++ b/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 ( diff --git a/x-pack/plugins/observability_solution/slo/public/embeddable/slo/burn_rate/burn_rate.tsx b/x-pack/plugins/observability_solution/slo/public/embeddable/slo/burn_rate/burn_rate.tsx index bb92363359112..43491ff036a33 100644 --- a/x-pack/plugins/observability_solution/slo/public/embeddable/slo/burn_rate/burn_rate.tsx +++ b/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 ( - + @@ -56,12 +58,7 @@ export function BurnRate({ sloId, sloInstanceId, duration, reloadSubject }: Embe if (isSloNotFound) { return ( - + {i18n.translate('xpack.slo.sloEmbeddable.overview.sloNotFoundText', { defaultMessage: @@ -84,7 +81,7 @@ export function BurnRate({ sloId, sloInstanceId, duration, reloadSubject }: Embe { 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}; `; diff --git a/x-pack/plugins/observability_solution/slo/public/embeddable/slo/overview/slo_embeddable_factory.tsx b/x-pack/plugins/observability_solution/slo/public/embeddable/slo/overview/slo_embeddable_factory.tsx index e74ba591e7166..57de174194976 100644 --- a/x-pack/plugins/observability_solution/slo/public/embeddable/slo/overview/slo_embeddable_factory.tsx +++ b/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 ( - +
css` + width: 100%; + padding: ${euiTheme.size.xs} ${euiTheme.size.base}; + overflow: scroll; + + .euiAccordion__buttonContent { + min-width: ${euiTheme.base * 6}px; + } + `} + > css` + margin-top: ${euiTheme.base * 1.25}px; `} > - +
); } 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; - } -`; diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slo_edit/components/common/query_search_bar.tsx b/x-pack/plugins/observability_solution/slo/public/pages/slo_edit/components/common/query_search_bar.tsx index e7e61adfc1cc5..629d6e9ec4598 100644 --- a/x-pack/plugins/observability_solution/slo/public/pages/slo_edit/components/common/query_search_bar.tsx +++ b/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 > - +
{}} filters={kqlQuerySchema.is(field.value) ? [] : field.value?.filters ?? []} /> - +
); }} @@ -161,9 +167,3 @@ export const QuerySearchBar = memo( ); } ); - -const Container = styled.div` - .uniSearchBar { - padding: 0; - } -`; diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slos/components/card_view/slo_card_item_actions.tsx b/x-pack/plugins/observability_solution/slo/public/pages/slos/components/card_view/slo_card_item_actions.tsx index 53a8da22db2a7..9df624edc1e60 100644 --- a/x-pack/plugins/observability_solution/slo/public/pages/slos/components/card_view/slo_card_item_actions.tsx +++ b/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` - ${({ 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 ( - +
css` + display: inline-block; + position: relative; + bottom: ${euiTheme.size.xxl}; + left: ${euiTheme.size.m}; + z-index: 1; + border-radius: ${euiTheme.border.radius.medium}; + ${shadow} + `} + > - +
); } diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slos/components/card_view/slo_card_item_badges.tsx b/x-pack/plugins/observability_solution/slo/public/pages/slos/components/card_view/slo_card_item_badges.tsx index 5166baaf7d311..7f1888e182f38 100644 --- a/x-pack/plugins/observability_solution/slo/public/pages/slos/components/card_view/slo_card_item_badges.tsx +++ b/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 ( - css` + display: inline-block; + margin-top: ${euiTheme.size.xs}; + `} onClick={(evt) => { evt.stopPropagation(); }} + aria-hidden="true" > {!slo.summary ? ( @@ -78,6 +78,6 @@ export function SloCardItemBadges({ slo, activeAlerts, rules, handleCreateRule } )} - + ); } diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slos/components/common/quick_filters.tsx b/x-pack/plugins/observability_solution/slo/public/pages/slos/components/common/quick_filters.tsx index ad350a3d17fbe..3924b55c0f096 100644 --- a/x-pack/plugins/observability_solution/slo/public/pages/slos/components/common/quick_filters.tsx +++ b/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 ( - +
{ @@ -94,7 +104,7 @@ export function QuickFilters({ timeRange={{ from: 'now-24h', to: 'now' }} compressed={false} /> - +
); } @@ -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', }); diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slos/components/slo_item_actions.tsx b/x-pack/plugins/observability_solution/slo/public/pages/slos/components/slo_item_actions.tsx index 1a99f8ff354d9..37c48b2bf8881 100644 --- a/x-pack/plugins/observability_solution/slo/public/pages/slos/components/slo_item_actions.tsx +++ b/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; rules?: Array>; } -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 ( - {children} - + ); } @@ -161,7 +159,7 @@ export function SloItemActions({ return ( {btn} : btn} + button={btnProps ? {btn} : btn} panelPaddingSize="m" closePopover={handleClickActions} isOpen={isActionsPopoverOpen} diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slos/components/slo_list_search_bar.tsx b/x-pack/plugins/observability_solution/slo/public/pages/slos/components/slo_list_search_bar.tsx index 16c635a2da20c..d6d501494bc4f 100644 --- a/x-pack/plugins/observability_solution/slo/public/pages/slos/components/slo_list_search_bar.tsx +++ b/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 ( - +
- +
); } -const Container = styled.div` - .uniSearchBar { - padding: 0; - } -`; - const PLACEHOLDER = i18n.translate('xpack.slo.list.search', { defaultMessage: 'Search your SLOs ...', }); diff --git a/x-pack/plugins/observability_solution/slo/public/utils/test_helper.tsx b/x-pack/plugins/observability_solution/slo/public/utils/test_helper.tsx index fd735d94c4a98..44cd0abceded4 100644 --- a/x-pack/plugins/observability_solution/slo/public/utils/test_helper.tsx +++ b/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, }} > - - {component} - + {component} diff --git a/x-pack/plugins/observability_solution/slo/tsconfig.json b/x-pack/plugins/observability_solution/slo/tsconfig.json index 23efcc39698b1..be74e370a1fc1 100644 --- a/x-pack/plugins/observability_solution/slo/tsconfig.json +++ b/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/**/*"