fixes after review

elastic · Dec 4, 2024 · 30f592a · 30f592a
1 parent bd7a67a
commit 30f592a
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 21 deletions.
diff --git a/x-pack/plugins/observability_solution/infra/public/alerting/common/components/threshold.tsx b/x-pack/plugins/observability_solution/infra/public/alerting/common/components/threshold.tsx
@@ -7,7 +7,7 @@
 
 import React from 'react';
 import { Chart, Metric, Settings } from '@elastic/charts';
-import { EuiIcon, EuiPanel, UseEuiTheme, useEuiTheme } from '@elastic/eui';
+import { EuiIcon, EuiPanel, type UseEuiTheme, useEuiTheme } from '@elastic/eui';
 import type { PartialTheme, Theme } from '@elastic/charts';
 import { i18n } from '@kbn/i18n';
 import { COMPARATORS } from '@kbn/alerting-comparators';

diff --git a/x-pack/plugins/observability_solution/infra/public/apps/common_providers.tsx b/x-pack/plugins/observability_solution/infra/public/apps/common_providers.tsx
@@ -7,7 +7,7 @@
 
 import { AppMountParameters, CoreStart } from '@kbn/core/public';
 import React, { FC, PropsWithChildren } from 'react';
-import { EuiThemeProvider } from '@elastic/eui';
+import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common';
 import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
 import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
 import { Storage } from '@kbn/kibana-utils-plugin/public';
@@ -34,11 +34,10 @@ export const CommonInfraProviders: FC<
   }>
 > = ({ children, triggersActionsUI, setHeaderActionMenu, appName, storage, theme$ }) => {
   const darkMode = useIsDarkMode();
-  const colorMode = darkMode ? 'DARK' : 'LIGHT';
 
   return (
     <TriggersActionsProvider triggersActionsUI={triggersActionsUI}>
-      <EuiThemeProvider colorMode={colorMode}>
+      <EuiThemeProvider darkMode={darkMode}>
         <DataUIProviders appName={appName} storage={storage}>
           <HeaderActionMenuProvider setHeaderActionMenu={setHeaderActionMenu} theme$={theme$}>
             <NavigationWarningPromptProvider>{children}</NavigationWarningPromptProvider>

diff --git a/...ins/observability_solution/infra/public/components/autocomplete_field/suggestion_item.tsx b/...ins/observability_solution/infra/public/components/autocomplete_field/suggestion_item.tsx
@@ -8,7 +8,7 @@
 import React from 'react';
 import { EuiIcon } from '@elastic/eui';
 import styled from '@emotion/styled';
-import { Theme } from '@emotion/react';
+import type { Theme } from '@emotion/react';
 import { QuerySuggestion, QuerySuggestionTypes } from '@kbn/unified-search-plugin/public';
 import { transparentize } from 'polished';
 

diff --git a/x-pack/plugins/observability_solution/infra/public/components/fixed_datepicker.tsx b/x-pack/plugins/observability_solution/infra/public/components/fixed_datepicker.tsx
@@ -5,11 +5,14 @@
  * 2.0.
  */
 
-import React from 'react';
 import { EuiDatePicker, EuiDatePickerProps } from '@elastic/eui';
-import styled from '@emotion/styled';
+import React from 'react';
+import styled, { type StyledComponent } from '@emotion/styled';
 
-export const FixedDatePicker = styled(
+// The return type of this component needs to be specified because the inferred
+// return type depends on types that are not exported from EUI. You get a TS4023
+// error if the return type is not specified.
+export const FixedDatePicker: StyledComponent<EuiDatePickerProps> = styled(
   ({
     className,
     inputClassName,

diff --git a/x-pack/plugins/observability_solution/infra/public/components/logging/log_statusbar.tsx b/x-pack/plugins/observability_solution/infra/public/components/logging/log_statusbar.tsx
@@ -5,18 +5,29 @@
  * 2.0.
  */
 
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import styled from '@emotion/styled';
+import { EuiFlexGroup, type EuiFlexGroupProps, EuiFlexItem, useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/css';
+import React from 'react';
 
-export const LogStatusbar = styled(EuiFlexGroup)`
-  padding: ${(props) => props.theme.euiTheme.size.s};
-  border-top: ${(props) => props.theme.euiTheme.border.thin};
-  max-height: 48px;
-  min-height: 48px;
-  background-color: ${(props) => props.theme.euiTheme.colors.emptyShade};
-  flex-direction: row;
-`;
+export const LogStatusbar = (props: EuiFlexGroupProps) => {
+  const { euiTheme } = useEuiTheme();
 
-LogStatusbar.defaultProps = { alignItems: 'center', gutterSize: 'none', justifyContent: 'flexEnd' };
+  return (
+    <EuiFlexGroup
+      alignItems="center"
+      gutterSize="none"
+      justifyContent="flexEnd"
+      css={css`
+        padding: ${euiTheme.size.s};
+        border-top: ${euiTheme.border.thin};
+        max-height: 48px;
+        min-height: 48px;
+        background-color: ${euiTheme.colors.emptyShade};
+        flex-direction: row;
+      `}
+      {...props}
+    />
+  );
+};
 
 export const LogStatusbarItem = EuiFlexItem;
diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/types.ts b/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/types.ts
@@ -7,7 +7,7 @@
 
 import rt from 'io-ts';
 import { PropsWithChildren } from 'react';
-import { WithEuiThemeProps } from '@elastic/eui';
+import type { WithEuiThemeProps } from '@elastic/eui';
 import { InventoryFormatterTypeRT } from '@kbn/metrics-data-access-plugin/common';
 import { MetricsTimeInput } from './hooks/use_metrics_time';
 import { NodeDetailsMetricData } from '../../../../common/http_api/node_details_api';

diff --git a/x-pack/plugins/observability_solution/infra/tsconfig.json b/x-pack/plugins/observability_solution/infra/tsconfig.json
@@ -9,7 +9,6 @@
     "public/**/*",
     "server/**/*",
     "types/**/*",
-    // Emotion theme typing
     "./emotion.d.ts"
   ],
   "kbn_references": [