fix ts errors

elastic · Dec 17, 2024 · 65f36c4 · 65f36c4
1 parent 5b4630b
commit 65f36c4
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 5 deletions.
diff --git a/...y_solution/apm/public/components/app/correlations/context_popover/field_stats_popover.tsx b/...y_solution/apm/public/components/app/correlations/context_popover/field_stats_popover.tsx
@@ -29,6 +29,7 @@ import { FormattedMessage } from '@kbn/i18n-react';
 import * as estypes from '@elastic/elasticsearch/lib/api/typesWithBodyKey';
 import { fromKueryExpression, toElasticsearchQuery } from '@kbn/es-query';
 import numeral from '@elastic/numeral';
+import { css } from '@emotion/react';
 import { termQuery } from '../../../../../common/utils/term_query';
 import {
   SERVICE_NAME,
@@ -279,7 +280,9 @@ export function FieldStatsPopover({
           }
         )}
         data-test-subj={'apmCorrelationsContextPopoverButton'}
-        style={{ marginLeft: euiTheme.size.xs }}
+        css={css`
+          marginleft: ${euiTheme.size.xs};
+        `}
       />
     </EuiToolTip>
   );

diff --git a/...lity_solution/apm/public/components/app/correlations/failed_transactions_correlations.tsx b/...lity_solution/apm/public/components/app/correlations/failed_transactions_correlations.tsx
@@ -473,7 +473,7 @@ export function FailedTransactionsCorrelations({ onFilter }: { onFilter: () => v
           <EuiIconTip
             size="m"
             iconProps={{
-              style: { marginLeft: euiTheme.size.xs },
+              css: { marginLeft: euiTheme.size.xs },
             }}
             content={i18n.translate(
               'xpack.apm.correlations.latencyCorrelations.advancedStatisticsTooltipContent',

diff --git a/...action_details/waterfall_with_summary/waterfall_container/waterfall/responsive_flyout.tsx b/...action_details/waterfall_with_summary/waterfall_container/waterfall/responsive_flyout.tsx
@@ -5,10 +5,21 @@
  * 2.0.
  */
 
-import { EuiFlyout } from '@elastic/eui';
-import styled from '@emotion/styled';
+import React from 'react';
+import { EuiFlyout, EuiFlyoutProps } from '@elastic/eui';
+import styled, { type StyledComponent } from '@emotion/styled';
 
-export const ResponsiveFlyout = styled(EuiFlyout)`
+// 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 ResponsiveFlyout: StyledComponent<EuiFlyoutProps> = styled(
+  ({
+    className,
+    ...flyoutProps
+  }: {
+    className?: string;
+  } & EuiFlyoutProps) => <EuiFlyout {...flyoutProps} className={className} />
+)`
   width: 100%;
 
   @media (min-width: 800px) {