[Synthetics] Remove usage of @emotion (#148275)

2025-04-24 09:48:58 -04:00 · 2023-01-04 08:24:56 +01:00 · 2023-01-04 08:24:56 +01:00 · 9509c35abd
commit 9509c35abd
parent 296025b1e7
10 changed files with 153 additions and 142 deletions
--- a/x-pack/plugins/observability/public/components/shared/exploratory_view/embeddable/embeddable.tsx
+++ b/x-pack/plugins/observability/public/components/shared/exploratory_view/embeddable/embeddable.tsx
@ -8,7 +8,6 @@
 import { Position } from '@elastic/charts';
 import React, { useState } from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiText, EuiTitle } from '@elastic/eui';
-import styled from '@emotion/styled';
 import {
  FormulaPublicApi,
  LensEmbeddableInput,
@ -16,6 +15,7 @@ import {
  XYState,
 } from '@kbn/lens-plugin/public';
 import { ViewMode } from '@kbn/embeddable-plugin/common';
+import styled from 'styled-components';
 import { HeatMapLensAttributes } from '../configurations/lens_attributes/heatmap_attributes';
 import { SingleMetricLensAttributes } from '../configurations/lens_attributes/single_metric_attributes';
 import { AllSeries, ReportTypes, useTheme } from '../../../..';
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/common/monitor_test_result/empty_thumbnail.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/common/monitor_test_result/empty_thumbnail.tsx
@ -6,24 +6,24 @@
 */

 import React from 'react';
-import { css } from '@emotion/react';
 import { i18n } from '@kbn/i18n';
 import { useEuiTheme, useEuiBackgroundColor, EuiIcon, EuiLoadingContent } from '@elastic/eui';
+import styled from 'styled-components';

 export const THUMBNAIL_WIDTH = 96;
 export const THUMBNAIL_HEIGHT = 64;

-export const thumbnailStyle = `
-  padding: 0;
-  margin: auto;
-  width: ${THUMBNAIL_WIDTH}px;
-  height: ${THUMBNAIL_HEIGHT}px;
-  object-fit: contain;
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
+export const thumbnailStyle = {
+  padding: 0,
+  margin: 'auto',
+  width: THUMBNAIL_WIDTH,
+  height: THUMBNAIL_HEIGHT,
+  objectFit: 'contain' as const,
+  overflow: 'hidden',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+};

 export const EmptyThumbnail = ({
  isLoading = false,
@ -42,23 +42,16 @@ export const EmptyThumbnail = ({
      role="img"
      aria-label={isLoading ? SCREENSHOT_LOADING_ARIA_LABEL : SCREENSHOT_NOT_AVAILABLE}
      title={isLoading ? SCREENSHOT_LOADING_ARIA_LABEL : SCREENSHOT_NOT_AVAILABLE}
-      css={css`
-        ${thumbnailStyle};
-        width: ${width}px;
-        height: ${height}px;
-        background: ${useEuiBackgroundColor('subdued')};
-        border: ${euiTheme.border.thin};
-      `}
+      style={{
+        ...thumbnailStyle,
+        width,
+        height,
+        background: useEuiBackgroundColor('subdued'),
+        border: euiTheme.border.thin,
+      }}
    >
      {isLoading ? (
-        <EuiLoadingContent
-          data-test-subj="stepScreenshotPlaceholderLoading"
-          css={css`
-            width: 100%;
-            height: 100%;
-            transform: scale(1, 100); // To create a skeleton loading effect
-          `}
-        />
+        <LoadingContentWrapper data-test-subj="stepScreenshotPlaceholderLoading" />
      ) : (
        <EuiIcon
          data-test-subj="stepScreenshotNotAvailable"
@ -70,6 +63,12 @@ export const EmptyThumbnail = ({
  );
 };

+const LoadingContentWrapper = styled(EuiLoadingContent)`
+  width: 100%;
+  height: 100%;
+  transform: scale(1, 100); // To create a skeleton loading effect
+`;
+
 export const SCREENSHOT_LOADING_ARIA_LABEL = i18n.translate(
  'xpack.synthetics.monitor.step.screenshot.ariaLabel',
  {
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/common/monitor_test_result/journey_step_image_popover.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/common/monitor_test_result/journey_step_image_popover.tsx
@ -6,14 +6,14 @@
 */

 import React, { useCallback, useEffect, useState } from 'react';
-import { css } from '@emotion/react';
-import { EuiImage, EuiPopover, useEuiTheme } from '@elastic/eui';
+import { EuiImage, EuiPopover } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import { euiStyled } from '@kbn/kibana-react-plugin/common';
 import { EmptyImage } from '../screenshot/empty_image';
 import { ScreenshotRefImageData } from '../../../../../../common/runtime_types';
 import { useCompositeImage } from '../../../hooks/use_composite_image';

-import { EmptyThumbnail, thumbnailStyle } from './empty_thumbnail';
+import { EmptyThumbnail, THUMBNAIL_HEIGHT, THUMBNAIL_WIDTH } from './empty_thumbnail';

 const POPOVER_IMG_HEIGHT = 360;
 const POPOVER_IMG_WIDTH = 640;
@ -161,8 +161,6 @@ export const JourneyStepImagePopover: React.FC<StepImagePopoverProps> = ({
  asThumbnail = true,
  size,
 }) => {
-  const { euiTheme } = useEuiTheme();
-
  const [imageData, setImageData] = useState<string | undefined>(imgSrc || undefined);

  useEffect(() => {
@ -179,56 +177,71 @@ export const JourneyStepImagePopover: React.FC<StepImagePopoverProps> = ({

  const isImageLoading = isLoading || (!!imgRef && !imageData);

-  const thumbnailS = asThumbnail ? thumbnailStyle : null;
-
  return (
-    <EuiPopover
-      css={css`
-        figure {
-          img {
-            ${thumbnailS};
-            border: ${euiTheme.border.thin};
-            ${isStepFailed ? `border-color: ${euiTheme.colors.danger}` : ``};
-          }
+    <PopoverWrapper isStepFailed={isStepFailed} asThumbnail={asThumbnail}>
+      <EuiPopover
+        anchorPosition="leftDown"
+        button={
+          <JourneyStepImage
+            captionContent={captionContent}
+            imageCaption={imageCaption}
+            imgRef={imgRef}
+            imgSrc={imgSrc}
+            setImageData={setImageDataCallback}
+            imageData={imageData}
+            isStepFailed={isStepFailed}
+            isLoading={isImageLoading}
+            asThumbnail={asThumbnail}
+            size={size}
+          />
        }
-      `}
-      anchorPosition="leftDown"
-      button={
-        <JourneyStepImage
-          captionContent={captionContent}
-          imageCaption={imageCaption}
-          imgRef={imgRef}
-          imgSrc={imgSrc}
-          setImageData={setImageDataCallback}
-          imageData={imageData}
-          isStepFailed={isStepFailed}
-          isLoading={isImageLoading}
-          asThumbnail={asThumbnail}
-          size={size}
-        />
-      }
-      isOpen={isImagePopoverOpen}
-      closePopover={() => {}}
-    >
-      {imageData && !isLoading ? (
-        <EuiImage
-          alt={fullSizeImageAlt}
-          url={imageData}
-          css={css`
-            width: ${POPOVER_IMG_WIDTH}px;
-            height: ${POPOVER_IMG_HEIGHT}px;
-            object-fit: contain;
-          `}
-        />
-      ) : asThumbnail ? (
-        <EmptyThumbnail isLoading={isLoading} />
-      ) : (
-        <EmptyImage isLoading={isLoading} />
-      )}
-    </EuiPopover>
+        isOpen={isImagePopoverOpen}
+        closePopover={() => {}}
+      >
+        {imageData && !isLoading ? (
+          <EuiImage
+            alt={fullSizeImageAlt}
+            url={imageData}
+            style={{
+              width: POPOVER_IMG_WIDTH,
+              height: POPOVER_IMG_HEIGHT,
+              objectFit: 'contain',
+            }}
+          />
+        ) : asThumbnail ? (
+          <EmptyThumbnail isLoading={isLoading} />
+        ) : (
+          <EmptyImage isLoading={isLoading} />
+        )}
+      </EuiPopover>
+    </PopoverWrapper>
  );
 };

+const PopoverWrapper = euiStyled.div<{ isStepFailed: boolean; asThumbnail: boolean }>`
+  &&& {
+    figure {
+      img {
+        border: ${({ theme }) => theme.eui.euiBorderThin};
+        border-color: ${({ theme, isStepFailed }) =>
+          isStepFailed ? theme.eui.euiColorDanger : ''};
+        ${({ asThumbnail }) =>
+          asThumbnail &&
+          ` padding: 0;
+            margin: auto;
+            width: ${THUMBNAIL_WIDTH}px;
+            height: ${THUMBNAIL_HEIGHT}px;
+            object-fit: contain;
+            overflow: hidden;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        `}
+      }
+    }
+  }
+`;
+
 export const fullSizeImageAlt = i18n.translate('xpack.synthetics.monitor.step.thumbnail.alt', {
  defaultMessage: `A larger version of the screenshot for this journey step's thumbnail.`,
 });
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/common/monitor_test_result/screenshot_overlay_footer.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/common/monitor_test_result/screenshot_overlay_footer.tsx
@ -6,7 +6,6 @@
 */

 import React, { MouseEvent, useEffect } from 'react';
-import { css } from '@emotion/react';
 import {
  EuiButtonEmpty,
  EuiFlexGroup,
@ -57,12 +56,12 @@ export const ScreenshotOverlayFooter: React.FC<ScreenshotOverlayFooterProps> = (

  return (
    <div
-      css={css`
-        background-color: ${euiTheme.colors.lightShade};
-        display: inline-block;
-        width: 100%;
-        text-decoration: none;
-      `}
+      style={{
+        backgroundColor: euiTheme.colors.lightShade,
+        display: 'inline-block',
+        width: '100%',
+        textDecoration: 'none',
+      }}
      onClick={(evt) => {
        // we don't want this to be captured by row click which leads to step list page
        evt.stopPropagation();
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/common/screenshot/empty_image.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/common/screenshot/empty_image.tsx
@ -6,7 +6,6 @@
 */

 import React from 'react';
-import { css } from '@emotion/react';
 import { i18n } from '@kbn/i18n';
 import {
  useEuiTheme,
@ -22,17 +21,17 @@ export const IMAGE_HEIGHT = 203;
 export const IMAGE_WIDTH_M = 200;
 export const IMAGE_HEIGHT_M = 114;

-export const imageStyle = css`
-  padding: 0;
-  margin: auto;
-  width: ${IMAGE_WIDTH}px;
-  height: ${IMAGE_HEIGHT}px;
-  object-fit: contain;
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
+export const imageStyle = {
+  padding: 0,
+  margin: 'auto',
+  width: IMAGE_WIDTH,
+  height: IMAGE_HEIGHT,
+  objectFit: 'contain' as const,
+  overflow: 'hidden',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+};

 export const EmptyImage = ({ size, isLoading = false }: { isLoading: boolean; size?: 'm' }) => {
  const { euiTheme } = useEuiTheme();
@ -46,32 +45,32 @@ export const EmptyImage = ({ size, isLoading = false }: { isLoading: boolean; si
      role="img"
      aria-label={isLoading ? SCREENSHOT_LOADING_ARIA_LABEL : SCREENSHOT_NOT_AVAILABLE}
      title={isLoading ? SCREENSHOT_LOADING_ARIA_LABEL : SCREENSHOT_NOT_AVAILABLE}
-      css={css`
-        ${imageStyle};
-        width: ${imgWidth}px;
-        height: ${imgHeight}px;
-        background: ${useEuiBackgroundColor('subdued')};
-        border: ${euiTheme.border.thin};
-      `}
+      style={{
+        ...imageStyle,
+        width: imgWidth,
+        height: imgHeight,
+        background: useEuiBackgroundColor('subdued'),
+        border: euiTheme.border.thin,
+      }}
    >
      {isLoading ? (
        <EuiLoadingContent
          lines={1}
          data-test-subj="stepScreenshotPlaceholderLoading"
-          css={css`
-            width: 100%;
-            height: 8%;
-            transform: scale(1, 13); // To create a skeleton loading effect
-          `}
+          css={{
+            width: '100%',
+            height: '8%',
+            transform: 'scale(1, 13)', // To create a skeleton loading effect
+          }}
        />
      ) : (
        <div
-          css={css({
+          style={{
            border: 'none',
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
-          })}
+          }}
        >
          <EuiIcon
            data-test-subj="stepScreenshotNotAvailable"
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/common/screenshot/journey_step_screenshot_container.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/common/screenshot/journey_step_screenshot_container.tsx
@ -6,10 +6,10 @@
 */

 import React, { useContext, useEffect, useState } from 'react';
-import { css } from '@emotion/react';
 import useIntersection from 'react-use/lib/useIntersection';
 import { i18n } from '@kbn/i18n';

+import styled from 'styled-components';
 import { EmptyImage } from './empty_image';
 import {
  isScreenshotImageBlob,
@ -121,12 +121,7 @@ export const JourneyStepScreenshotContainer = ({
  }, [numberOfCaptions, initialStepNo, stepNumber]);

  return (
-    <div
-      css={css`
-        figcaption {
-          display: none; // Do not show the OverlayFooter under thumbnails
-        }
-      `}
+    <Wrapper
      onMouseEnter={() => setIsImagePopoverOpen(true)}
      onMouseLeave={() => setIsImagePopoverOpen(false)}
      ref={intersectionRef}
@ -148,10 +143,16 @@ export const JourneyStepScreenshotContainer = ({
      ) : (
        <EmptyImage isLoading={loading || !allStepsLoaded} size={size} />
      )}
-    </div>
+    </Wrapper>
  );
 };

+const Wrapper = styled.div`
+  figcaption {
+    display: none; // Do not show the OverlayFooter under thumbnails
+  }
+`;
+
 export const formatCaptionContent = (stepNumber: number, totalSteps?: number) =>
  i18n.translate('xpack.synthetics.monitor.stepOfSteps', {
    defaultMessage: 'Step: {stepNumber} of {totalSteps}',
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_status/monitor_status_header.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_status/monitor_status_header.tsx
@ -7,7 +7,6 @@

 import React from 'react';
 import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiText, EuiTitle } from '@elastic/eui';
-import { css } from '@emotion/css';
 import { useHistory } from 'react-router-dom';

 import { ConfigKey } from '../../../../../../common/runtime_types';
@ -41,9 +40,9 @@ export const MonitorStatusHeader = ({
    <EuiFlexGroup
      direction="row"
      alignItems="baseline"
-      css={css`
-        margin-bottom: 0;
-      `}
+      css={{
+        marginBottom: 0,
+      }}
    >
      <EuiFlexItem grow={false}>
        <EuiTitle size="xs">
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_status/monitor_status_legend.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_status/monitor_status_legend.tsx
@ -6,7 +6,6 @@
 */

 import React, { useMemo } from 'react';
-import { css } from '@emotion/css';
 import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiText, useEuiTheme } from '@elastic/eui';
 import * as labels from './labels';
 import { DANGER_VIZ_COLOR, getSkippedVizColor, SUCCESS_VIZ_COLOR } from './monitor_status_data';
@ -25,11 +24,11 @@ export const MonitorStatusLegend = ({ brushable }: { brushable: boolean }) => {
      iconType?: string;
    }) => (
      <EuiFlexItem
-        css={css`
-          display: flex;
-          flex-direction: row;
-          gap: 2px;
-        `}
+        css={{
+          display: 'flex',
+          flexDirection: 'row',
+          gap: 2,
+        }}
        grow={false}
      >
        <EuiIcon type={iconType} color={color} />
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_status/monitor_status_panel.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_status/monitor_status_panel.tsx
@ -52,7 +52,11 @@ export const MonitorStatusPanel = ({
      <EuiResizeObserver onResize={handleResize}>
        {(resizeRef) => (
          <div ref={resizeRef}>
-            <Chart css={{ height: 60 }}>
+            <Chart
+              size={{
+                height: 60,
+              }}
+            >
              <Settings
                showLegend={false}
                xDomain={xDomain}
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_details_panel.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_details_panel.tsx
@ -6,7 +6,6 @@
 */

 import React from 'react';
-import { css } from '@emotion/react';
 import {
  EuiDescriptionList,
  EuiDescriptionListTitle,
@ -15,7 +14,6 @@ import {
  EuiSpacer,
  EuiLink,
  EuiLoadingContent,
-  useEuiTheme,
  EuiTitle,
  EuiPanel,
 } from '@elastic/eui';
@ -23,6 +21,7 @@ import { capitalize } from 'lodash';
 import { i18n } from '@kbn/i18n';
 import { useDispatch } from 'react-redux';
 import { useParams } from 'react-router-dom';
+import { euiStyled } from '@kbn/kibana-react-plugin/common';
 import { frequencyStr } from '../../monitors_page/overview/overview/monitor_detail_flyout';
 import { useSelectedMonitor } from '../hooks/use_selected_monitor';
 import { MonitorTags } from './monitor_tags';
@ -33,7 +32,6 @@ import { ConfigKey } from '../../../../../../common/runtime_types';
 import { useMonitorLatestPing } from '../hooks/use_monitor_latest_ping';

 export const MonitorDetailsPanel = () => {
-  const { euiTheme } = useEuiTheme();
  const { latestPing } = useMonitorLatestPing();

  const { monitorId: configId } = useParams<{ monitorId: string }>();
@ -49,19 +47,12 @@ export const MonitorDetailsPanel = () => {
    return <EuiLoadingContent lines={6} />;
  }

-  const wrapperStyle = css`
-    .euiDescriptionList.euiDescriptionList--column > *,
-    .euiDescriptionList.euiDescriptionList--responsiveColumn > * {
-      margin-top: ${euiTheme.size.s};
-    }
-  `;
-
  return (
    <EuiPanel hasShadow={false} hasBorder paddingSize="m">
      <EuiTitle size="xs">
        <h3>{MONITOR_DETAILS_LABEL}</h3>
      </EuiTitle>
-      <div css={wrapperStyle}>
+      <WrapperStyle>
        <EuiSpacer size="s" />
        <EuiDescriptionList type="column" compressed={true}>
          <EuiDescriptionListTitle>{ENABLED_LABEL}</EuiDescriptionListTitle>
@ -100,11 +91,18 @@ export const MonitorDetailsPanel = () => {
            {monitor && <MonitorTags tags={monitor[ConfigKey.TAGS]} />}
          </EuiDescriptionListDescription>
        </EuiDescriptionList>
-      </div>
+      </WrapperStyle>
    </EuiPanel>
  );
 };

+export const WrapperStyle = euiStyled.div`
+  .euiDescriptionList.euiDescriptionList--column > *,
+  .euiDescriptionList.euiDescriptionList--responsiveColumn > * {
+    margin-top: ${({ theme }) => theme.eui.euiSizeS};
+  }
+`;
+
 const FREQUENCY_LABEL = i18n.translate('xpack.synthetics.management.monitorList.frequency', {
  defaultMessage: 'Frequency',
 });