From 65f36c4d2b043809d7e115c43b9aa254415a2dbb Mon Sep 17 00:00:00 2001
From: "miriam.aparicio" <miriam.aparicio@gmail.com>
Date: Tue, 17 Dec 2024 15:44:13 +0000
Subject: [PATCH] fix ts errors

---
 .../context_popover/field_stats_popover.tsx     |  5 ++++-
 .../failed_transactions_correlations.tsx        |  2 +-
 .../waterfall/responsive_flyout.tsx             | 17 ++++++++++++++---
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/correlations/context_popover/field_stats_popover.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/correlations/context_popover/field_stats_popover.tsx
index 4d4840e8c3ff7..13362c7975fc1 100644
--- a/x-pack/plugins/observability_solution/apm/public/components/app/correlations/context_popover/field_stats_popover.tsx
+++ b/x-pack/plugins/observability_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/x-pack/plugins/observability_solution/apm/public/components/app/correlations/failed_transactions_correlations.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/correlations/failed_transactions_correlations.tsx
index 3003a3e6aa016..e6c6ce65dfffd 100644
--- a/x-pack/plugins/observability_solution/apm/public/components/app/correlations/failed_transactions_correlations.tsx
+++ b/x-pack/plugins/observability_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/x-pack/plugins/observability_solution/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/responsive_flyout.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/responsive_flyout.tsx
index d0a805c566b91..3c3440b7833cf 100644
--- a/x-pack/plugins/observability_solution/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/responsive_flyout.tsx
+++ b/x-pack/plugins/observability_solution/apm/public/components/app/transaction_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) {