[Lens/SCSS] Replace expression legacy metric scss

src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric_component.tsx

@@ -24,8 +24,6 @@ import { formatValue, shouldApplyColor } from '../utils';
 import { needsLightText } from '../utils/palette';
 import { withAutoScale } from './with_auto_scale';
 
-import './metric.scss';
-
 export interface MetricVisComponentProps {
   visParams: Pick<VisParams, 'metric' | 'dimensions'>;
   visData: Datatable;

src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric_value.tsx

@@ -8,10 +8,52 @@
  */
 
 import React, { CSSProperties, useLayoutEffect } from 'react';
-import classNames from 'classnames';
 import { i18n } from '@kbn/i18n';
+import { UseEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
+import { euiTextTruncate } from '@elastic/eui';
 import type { MetricOptions, MetricStyle, MetricVisParam } from '../../common/types';
 
+const legacyMtrVisValueCss = ({ euiTheme }: UseEuiTheme) =>
+  css({
+    fontWeight: euiTheme.font.weight.bold,
+  });
+
+const legacyMtrVisContainerCss = ({ euiTheme }: UseEuiTheme) =>
+  css({
+    textAlign: 'center',
+    padding: euiTheme.size.base,
+    display: 'flex',
+    flexDirection: 'column',
+  });
+
+const legacyMtrVisContainerLightCss = ({ euiTheme }: UseEuiTheme) =>
+  css({
+    color: euiTheme.colors.emptyShade,
+  });
+
+const legacyMtrVisContainerIsFilterableCss = ({ euiTheme }: UseEuiTheme) =>
+  css({
+    cursor: 'pointer',
+    transition: `transform ${euiTheme.animation.normal} ${euiTheme.animation.resistance}`,
+    transform: 'translate(0, 0)',
+    '&:hover, &:focus': {
+      boxShadow: 'none',
+      transform: 'translate(0, -2px)',
+    },
+  });
+
+const legacyMtrVisContainerIsFullCss = () =>
+  css({
+    minHeight: '100%',
+    minWidth: 'max-content',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    flex: '1 0 100%',
+  });
+
 interface MetricVisValueProps {
   metric: MetricOptions;
   onFilter?: () => void;
@@ -24,11 +66,6 @@ interface MetricVisValueProps {
 
 export const MetricVisValue = (props: MetricVisValueProps) => {
   const { style, metric, onFilter, labelConfig, colorFullBackground, autoScale } = props;
-  const containerClassName = classNames('legacyMtrVis__container', {
-    'legacyMtrVis__container--light': metric.lightText,
-    'legacyMtrVis__container-isfilterable': onFilter,
-    'legacyMtrVis__container-isfull': !autoScale && colorFullBackground,
-  });
 
   useLayoutEffect(() => {
     props.renderComplete?.();
@@ -37,12 +74,17 @@ export const MetricVisValue = (props: MetricVisValueProps) => {
   // for autoScale true we should add background to upper level so that correct colorize full container
   const metricComponent = (
     <div
-      className={containerClassName}
+      css={[
+        legacyMtrVisContainerCss,
+        metric.lightText && legacyMtrVisContainerLightCss,
+        onFilter && legacyMtrVisContainerIsFilterableCss,
+        !autoScale && colorFullBackground && legacyMtrVisContainerIsFullCss,
+      ]}
       style={autoScale && colorFullBackground ? {} : { backgroundColor: metric.bgColor }}
     >
       <div
         data-test-subj="metric_value"
-        className="legacyMtrVis__value"
+        css={[legacyMtrVisValueCss, euiTextTruncate()]}
         style={{
           ...(style.spec as CSSProperties),
           ...(metric.color ? { color: metric.color } : {}),

src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/expression_renderers/metric_vis_renderer.tsx

@@ -27,9 +27,23 @@ import {
   extractContainerType,
   extractVisualizationType,
 } from '@kbn/chart-expressions-common';
+import { UseEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
 import { ExpressionLegacyMetricPluginStart } from '../plugin';
 import { EXPRESSION_METRIC_NAME, MetricVisRenderConfig, VisParams } from '../../common';
 
+const legacyMtrVisCss = ({ euiTheme }: UseEuiTheme) =>
+  css({
+    height: '100%',
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexWrap: 'wrap',
+    overflow: 'auto',
+  });
+
 // @ts-ignore
 const MetricVisComponent = lazy(() => import('../components/metric_component'));
 
@@ -113,10 +127,11 @@ export const getMetricVisRenderer: (
       <KibanaRenderContextProvider {...core}>
         <VisualizationContainer
           data-test-subj="legacyMtrVis"
-          className="legacyMtrVis"
+          className="eui-scrollBar"
           showNoResult={!visData.rows?.length}
           renderComplete={renderComplete}
           handlers={handlers}
+          css={legacyMtrVisCss}
         >
           <MetricVisComponent
             visData={visData}

src/platform/plugins/shared/chart_expressions/expression_legacy_metric/tsconfig.json

@@ -8,6 +8,7 @@
     "common/**/*",
     "public/**/*",
     "server/**/*",
+    "../../../../../../typings/emotion.d.ts"
   ],
   "kbn_references": [
     { "path": "../tsconfig.json" },