[ObsUX][Logs] Update logs use of styled componets to use @emotion and EuiTheme (#207753)

Closes https://github.com/elastic/kibana/issues/207363

### What was done

Changed components from styled components to `@emotion` to use EuiTheme
Just changed the components that might cause error in APM, and left the
rest, as some of these components will be deprecated and are not a
potential cause of errors currently

x-pack/platform/plugins/shared/logs_shared/public/components/centered_flyout_body.tsx

@@ -6,9 +6,9 @@
  */
 
 import { EuiFlyoutBody } from '@elastic/eui';
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
 
-export const CenteredEuiFlyoutBody = euiStyled(EuiFlyoutBody)`
+export const CenteredEuiFlyoutBody = styled(EuiFlyoutBody)`
   & .euiFlyoutBody__overflow {
     display: flex;
     flex-direction: column;

x-pack/platform/plugins/shared/logs_shared/public/components/logging/log_text_stream/column_headers.tsx

@@ -8,7 +8,9 @@
 import { i18n } from '@kbn/i18n';
 import React, { FC, PropsWithChildren } from 'react';
 
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
+
+import { useEuiFontSize } from '@elastic/eui';
 import {
   LogEntryColumn,
   LogEntryColumnContent,
@@ -113,7 +115,7 @@ export const LogColumnHeader: FC<
   </LogColumnHeaderWrapper>
 );
 
-const LogColumnHeaderWrapper = euiStyled(LogEntryColumn)`
+const LogColumnHeaderWrapper = styled(LogEntryColumn)`
   align-items: center;
   display: flex;
   flex-direction: row;
@@ -121,11 +123,11 @@ const LogColumnHeaderWrapper = euiStyled(LogEntryColumn)`
   overflow: hidden;
 `;
 
-const LogColumnHeaderContent = euiStyled(LogEntryColumnContent)`
-  color: ${(props) => props.theme.eui.euiTitleColor};
-  font-size: ${(props) => props.theme.eui.euiFontSizeS};
-  font-weight: ${(props) => props.theme.eui.euiFontWeightSemiBold};
-  line-height: ${(props) => props.theme.eui.euiLineHeight};
+const LogColumnHeaderContent = styled(LogEntryColumnContent)`
+  color: ${(props) => props.theme.euiTheme.colors.textParagraph};
+  font-size: ${() => useEuiFontSize('s').fontSize};
+  font-weight: ${(props) => props.theme.euiTheme.font.weight.semiBold};
+  line-height: ${() => useEuiFontSize('s').lineHeight};
   text-overflow: clip;
   white-space: pre;
 `;

x-pack/platform/plugins/shared/logs_shared/public/components/logging/log_text_stream/jump_to_tail.tsx

@@ -9,7 +9,7 @@ import { EuiButtonEmpty, EuiText } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import * as React from 'react';
 
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
 
 interface LogTextStreamJumpToTailProps {
   onClickJump?: () => void;
@@ -45,16 +45,16 @@ export class LogTextStreamJumpToTail extends React.PureComponent<LogTextStreamJu
   }
 }
 
-const JumpToTailWrapper = euiStyled.div<{ width: number }>`
+const JumpToTailWrapper = styled.div<{ width: number }>`
   align-items: center;
   display: flex;
-  min-height: ${(props) => props.theme.eui.euiSizeXXL};
+  min-height: ${(props) => props.theme.euiTheme.size.xxl};
   width: ${(props) => props.width}px;
   position: fixed;
   bottom: 0;
-  background-color: ${(props) => props.theme.eui.euiColorEmptyShade};
+  background-color: ${(props) => props.theme.euiTheme.colors.emptyShade};
 `;
 
-const MessageWrapper = euiStyled.div`
+const MessageWrapper = styled.div`
   padding: 8px 16px;
 `;

x-pack/platform/plugins/shared/logs_shared/public/components/logging/log_text_stream/log_entry_column.tsx

@@ -7,8 +7,9 @@
 
 import { useMemo } from 'react';
 
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
 import moment from 'moment';
+import { withAttrs } from '../../../utils/theme_utils/with_attrs';
 import { TextScale } from '../../../../common/log_text_scale';
 import {
   LogColumnRenderConfiguration,
@@ -30,24 +31,30 @@ export interface LogEntryColumnProps {
   shrinkWeight: number;
 }
 
-export const LogEntryColumn = euiStyled.div.attrs((props) => ({
-  role: props.role ?? 'cell',
-}))<LogEntryColumnProps>`
-  align-items: stretch;
-  display: flex;
-  flex-basis: ${(props) => props.baseWidth || '0%'};
-  flex-direction: row;
-  flex-grow: ${(props) => props.growWeight || 0};
-  flex-shrink: ${(props) => props.shrinkWeight || 0};
-  overflow: hidden;
-`;
+export const LogEntryColumn = withAttrs(
+  styled.div<LogEntryColumnProps>`
+    align-items: stretch;
+    display: flex;
+    flex-basis: ${(props) => props.baseWidth || '0%'};
+    flex-direction: row;
+    flex-grow: ${(props) => props.growWeight || 0};
+    flex-shrink: ${(props) => props.shrinkWeight || 0};
+    overflow: hidden;
+  `,
+  (props) => ({
+    role: props.props.role ?? 'cell',
+  })
+);
 
-export const LogEntryColumnContent = euiStyled.div.attrs({
-  'data-test-subj': 'LogEntryColumnContent',
-})`
-  flex: 1 0 0%;
-  padding: 2px ${COLUMN_PADDING}px;
-`;
+export const LogEntryColumnContent = withAttrs(
+  styled.div`
+    flex: 1 0 0%;
+    padding: 2px ${COLUMN_PADDING}px;
+  `,
+  () => ({
+    'data-test-subj': 'LogEntryColumnContent',
+  })
+);
 
 export type LogEntryColumnWidth = Pick<
   LogEntryColumnProps,

x-pack/platform/plugins/shared/logs_shared/public/components/logging/log_text_stream/log_entry_context_menu.tsx

@@ -16,7 +16,7 @@ import {
   EuiContextMenuItemProps,
 } from '@elastic/eui';
 
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
 import { LogEntryColumnContent } from './log_entry_column';
 
 export interface LogEntryContextMenuItem {
@@ -108,16 +108,16 @@ export const LogEntryContextMenu: React.FC<LogEntryContextMenuProps> = ({
   );
 };
 
-const LogEntryContextMenuContent = euiStyled(LogEntryColumnContent)`
+const LogEntryContextMenuContent = styled(LogEntryColumnContent)`
   overflow: hidden;
   user-select: none;
 `;
 
-const AbsoluteWrapper = euiStyled.div`
+const AbsoluteWrapper = styled.div`
   position: absolute;
 `;
 
-const ButtonWrapper = euiStyled.div`
+const ButtonWrapper = styled.div`
   transform: translate(-6px, -6px);
 `;
 

x-pack/platform/plugins/shared/logs_shared/public/components/logging/log_text_stream/log_entry_field_column.tsx

@@ -6,8 +6,8 @@
  */
 
 import React from 'react';
+import styled from '@emotion/styled';
 import { JsonValue } from '@kbn/utility-types';
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
 import { LogColumn } from '../../../../common/log_entry';
 import { isFieldColumn, isHighlightFieldColumn } from '../../../utils/log_entry';
 import { FieldValue } from './field_value';
@@ -54,7 +54,7 @@ interface LogEntryColumnContentProps {
   wrapMode: WrapMode;
 }
 
-const FieldColumnContent = euiStyled(LogEntryColumnContent)<LogEntryColumnContentProps>`
+const FieldColumnContent = styled(LogEntryColumnContent)<LogEntryColumnContentProps>`
   text-overflow: ellipsis;
 
   ${(props) =>

x-pack/platform/plugins/shared/logs_shared/public/components/logging/log_text_stream/log_entry_message_column.tsx

@@ -6,7 +6,7 @@
  */
 
 import React, { memo, useMemo } from 'react';
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
 import { LogColumn, LogMessagePart } from '../../../../common/log_entry';
 import {
   isConstantSegment,
@@ -59,7 +59,7 @@ interface MessageColumnContentProps {
   wrapMode: WrapMode;
 }
 
-const MessageColumnContent = euiStyled(LogEntryColumnContent)<MessageColumnContentProps>`
+const MessageColumnContent = styled(LogEntryColumnContent)<MessageColumnContentProps>`
   text-overflow: ellipsis;
   ${(props) =>
     props.wrapMode === 'long'

x-pack/platform/plugins/shared/logs_shared/public/components/logging/log_text_stream/log_entry_row_wrapper.tsx

@@ -5,28 +5,32 @@
  * 2.0.
  */
 
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
+import { withAttrs } from '../../../utils/theme_utils/with_attrs';
 import { TextScale } from '../../../../common/log_text_scale';
-import { highlightedContentStyle, hoveredContentStyle, monospaceTextStyle } from './text_styles';
+import { highlightedContentStyle, hoveredContentStyle, useMonospaceTextStyle } from './text_styles';
 
-export const LogEntryRowWrapper = euiStyled.div.attrs(() => ({
-  role: 'row',
-}))<LogEntryRowWrapperProps>`
+export const LogEntryRowWrapper = withAttrs(
+  styled.div<LogEntryRowWrapperProps>`
     align-items: stretch;
-    color: ${(props) => props.theme.eui.euiTextColor};
+    color: ${(props) => props.theme.euiTheme.colors.textParagraph};
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
     justify-content: flex-start;
     overflow: hidden;
-  
-    ${(props) => monospaceTextStyle(props.scale)};
-    ${(props) => (props.isHighlighted ? highlightedContentStyle : '')}
-  
+
+    ${(props) => useMonospaceTextStyle(props.scale, props.theme.euiTheme)};
+    ${(props) => (props.isHighlighted ? highlightedContentStyle(props.theme.euiTheme) : '')}
+
     &:hover {
-      ${hoveredContentStyle}
+      ${(props) => hoveredContentStyle(props.theme.euiTheme)}
     }
-  `;
+  `,
+  () => ({
+    role: 'row',
+  })
+);
 
 export interface LogEntryRowWrapperProps {
   scale: TextScale;

x-pack/platform/plugins/shared/logs_shared/public/components/logging/log_text_stream/log_entry_timestamp_column.tsx

@@ -6,8 +6,7 @@
  */
 
 import React, { memo } from 'react';
-
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
 import { TimeFormat, useFormattedTime } from '../../formatted_time';
 import { LogEntryColumnContent } from './log_entry_column';
 
@@ -25,8 +24,8 @@ export const LogEntryTimestampColumn = memo<LogEntryTimestampColumnProps>(
   }
 );
 
-const TimestampColumnContent = euiStyled(LogEntryColumnContent)`
-  color: ${(props) => props.theme.eui.euiColorDarkShade};
+const TimestampColumnContent = styled(LogEntryColumnContent)`
+  color: ${(props) => props.theme.euiTheme.colors.darkShade};
   overflow: hidden;
   text-overflow: clip;
   white-space: pre;

x-pack/platform/plugins/shared/logs_shared/public/components/logging/log_text_stream/text_styles.tsx

@@ -6,35 +6,39 @@
  */
 
 import React, { useMemo, useState, useCallback } from 'react';
-
-import { euiStyled, css } from '@kbn/kibana-react-plugin/common';
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { EuiThemeComputed, useEuiFontSize } from '@elastic/eui';
+import { withAttrs } from '../../../utils/theme_utils/with_attrs';
 import { TextScale } from '../../../../common/log_text_scale';
 
 export type WrapMode = 'none' | 'pre-wrapped' | 'long';
 
-export const monospaceTextStyle = (scale: TextScale) => css`
-  font-family: ${(props) => props.theme.eui.euiCodeFontFamily};
-  font-size: ${(props) => {
-    switch (scale) {
-      case 'large':
-        return props.theme.eui.euiFontSizeM;
-      case 'medium':
-        return props.theme.eui.euiFontSizeS;
-      case 'small':
-        return props.theme.eui.euiFontSizeXS;
-      default:
-        return props.theme.eui.euiFontSize;
-    }
-  }};
-  line-height: ${(props) => props.theme.eui.euiLineHeight};
+const getFontSize = (textscale: TextScale) => {
+  switch (textscale) {
+    case 'large':
+      return 'm';
+    case 'medium':
+      return 's';
+    case 'small':
+      return 'xs';
+    default:
+      return 's';
+  }
+};
+
+export const useMonospaceTextStyle = (scale: TextScale, euiTheme: EuiThemeComputed) => css`
+  font-family: ${euiTheme.font.familyCode};
+  font-size: ${useEuiFontSize(getFontSize(scale))};
+  line-height: ${euiTheme.font.lineHeightMultiplier};
 `;
 
-export const hoveredContentStyle = css`
-  background-color: ${(props) => props.theme.eui.euiFocusBackgroundColor};
+export const hoveredContentStyle = (euiTheme: EuiThemeComputed) => css`
+  background-color: ${euiTheme.focus.backgroundColor};
 `;
 
-export const highlightedContentStyle = css`
-  background-color: ${(props) => props.theme.eui.euiColorHighlight};
+export const highlightedContentStyle = (euiTheme: EuiThemeComputed) => css`
+  background-color: ${euiTheme.colors.highlight};
 `;
 
 export const longWrappedContentStyle = css`
@@ -96,15 +100,18 @@ interface MonospaceCharacterDimensionsProbe {
   scale: TextScale;
 }
 
-const MonospaceCharacterDimensionsProbe = euiStyled.div.attrs(() => ({
-  'aria-hidden': true,
-}))<MonospaceCharacterDimensionsProbe>`
-  visibility: hidden;
-  position: absolute;
-  height: auto;
-  width: auto;
-  padding: 0;
-  margin: 0;
+const MonospaceCharacterDimensionsProbe = withAttrs(
+  styled.div<MonospaceCharacterDimensionsProbe>`
+    visibility: hidden;
+    position: absolute;
+    height: auto;
+    width: auto;
+    padding: 0;
+    margin: 0;
 
-  ${(props) => monospaceTextStyle(props.scale)};
-`;
+    ${(props) => useMonospaceTextStyle(props.scale, props.theme.euiTheme)};
+  `,
+  () => ({
+    'aria-hidden': true,
+  })
+);

x-pack/platform/plugins/shared/logs_shared/public/utils/theme_utils/with_attrs.tsx

@@ -0,0 +1,19 @@
+/*
+ * 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 { type Theme, useTheme } from '@emotion/react';
+import React, { forwardRef } from 'react';
+
+export const withAttrs = (
+  Component: React.ComponentType<any>,
+  fn: (args: { theme: Theme; props: any }) => any
+) =>
+  forwardRef((props: any, ref) => {
+    const theme = useTheme();
+    const attrs = fn({ theme, props });
+
+    return <Component {...props} {...attrs} ref={ref} />;
+  });