[8.18] [Lens/SCSS] Replace expression legacy metric scss (#209546) (#212883)

# Backport This will backport the following commits from `main` to `8.18`: - [[Lens/SCSS] Replace expression legacy metric scss (#209546)](https://github.com/elastic/kibana/pull/209546)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport)  Co-authored-by: Maria Iriarte <106958839+mariairiartef@users.noreply.github.com>
2025-04-23 17:28:26 -04:00 · 2025-03-04 00:26:59 +11:00 · 2025-03-04 00:26:59 +11:00 · 625fba329f
commit 625fba329f
parent 53c6c4469f
6 changed files with 60 additions and 60 deletions
--- a/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric.scss
+++ b/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric.scss
@ -1,56 +0,0 @@
-// Prefix all styles with "mtr" to avoid conflicts.
-// Examples
-//   mtrChart
-//   mtrChart__legend
-//   mtrChart__legend--small
-//   mtrChart__legend-isLoading
-
-.legacyMtrVis {
-  height: 100%;
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  flex-wrap: wrap;
-  overflow: auto;
-  @include euiScrollBar;
-}
-
-.legacyMtrVis__value {
-  @include euiTextTruncate;
-  font-weight: $euiFontWeightBold;
-}
-
-.legacyMtrVis__container {
-  text-align: center;
-  padding: $euiSize;
-  display: flex;
-  flex-direction: column;
-}
-
-.legacyMtrVis__container--light {
-  color: $euiColorEmptyShade;
-}
-
-.legacyMtrVis__container-isfull {
-  min-height: 100%;
-  min-width: max-content;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  flex: 1 0 100%;
-}
-
-.legacyMtrVis__container-isFilterable {
-  cursor: pointer;
-  transition: transform $euiAnimSpeedNormal $euiAnimSlightResistance;
-  transform: translate(0, 0);
-
-  &:hover,
-  &:focus {
-    box-shadow: none;
-    transform: translate(0, -2px);
-  }
-}
--- a/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric_component.tsx
+++ b/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;
--- a/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric_value.tsx
+++ b/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric_value.tsx
@ -10,6 +10,8 @@
 import React, { CSSProperties, useLayoutEffect } from 'react';
 import classNames from 'classnames';
 import { i18n } from '@kbn/i18n';
+import { UseEuiTheme, euiTextTruncate } from '@elastic/eui';
+import { css } from '@emotion/react';
 import type { MetricOptions, MetricStyle, MetricVisParam } from '../../common/types';

 interface MetricVisValueProps {
@ -24,6 +26,7 @@ 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,
@ -38,11 +41,13 @@ export const MetricVisValue = (props: MetricVisValueProps) => {
  const metricComponent = (
    <div
      className={containerClassName}
+      css={styles.legacyMtrVisContainer}
      style={autoScale && colorFullBackground ? {} : { backgroundColor: metric.bgColor }}
    >
      <div
        data-test-subj="metric_value"
        className="legacyMtrVis__value"
+        css={styles.legacyMtrVisValue}
        style={{
          ...(style.spec as CSSProperties),
          ...(metric.color ? { color: metric.color } : {}),
@ -87,3 +92,42 @@ export const MetricVisValue = (props: MetricVisValueProps) => {

  return metricComponent;
 };
+
+const styles = {
+  legacyMtrVisValue: ({ euiTheme }: UseEuiTheme) =>
+    css`
+      ${euiTextTruncate()};
+      font-weight: ${euiTheme.font.weight.bold};
+    `,
+  legacyMtrVisContainer: ({ euiTheme }: UseEuiTheme) =>
+    css({
+      '&.legacyMtrVis__container': {
+        textAlign: 'center',
+        padding: euiTheme.size.base,
+        display: 'flex',
+        flexDirection: 'column',
+      },
+      '&.legacyMtrVis__container--light': {
+        color: euiTheme.colors.emptyShade,
+      },
+      '&.legacyMtrVis__container-isfull': {
+        minHeight: '100%',
+        minWidth: 'max-content',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+        flex: '1 0 100%',
+      },
+      '&.legacyMtrVis__container-isfilterable': {
+        cursor: 'pointer',
+        transition: `transform ${euiTheme.animation.normal} ${euiTheme.animation.resistance}`,
+        transform: 'translate(0, 0)',
+
+        '&:hover, &:focus': {
+          boxShadow: 'none',
+          transform: 'translate(0, -2px)',
+        },
+      },
+    }),
+};
--- a/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/expression_renderers/metric_vis_renderer.tsx
+++ b/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/expression_renderers/metric_vis_renderer.tsx
@ -27,6 +27,7 @@ import {
  extractContainerType,
  extractVisualizationType,
 } from '@kbn/chart-expressions-common';
+import { css } from '@emotion/react';
 import { ExpressionLegacyMetricPluginStart } from '../plugin';
 import { EXPRESSION_METRIC_NAME, MetricVisRenderConfig, VisParams } from '../../common';

@ -113,10 +114,11 @@ export const getMetricVisRenderer: (
      <KibanaRenderContextProvider {...core}>
        <VisualizationContainer
          data-test-subj="legacyMtrVis"
-          className="legacyMtrVis"
+          className="eui-scrollBar legacyMtrVis"
          showNoResult={!visData.rows?.length}
          renderComplete={renderComplete}
          handlers={handlers}
+          css={legacyMtrVisCss}
        >
          <MetricVisComponent
            visData={visData}
@ -131,3 +133,14 @@ export const getMetricVisRenderer: (
    );
  },
 });
+
+const legacyMtrVisCss = css({
+  height: '100%',
+  width: '100%',
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'center',
+  alignItems: 'center',
+  flexWrap: 'wrap',
+  overflow: 'auto',
+});
--- a/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/tsconfig.json
+++ b/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" },
--- a/test/functional/page_objects/visualize_editor_page.ts
+++ b/test/functional/page_objects/visualize_editor_page.ts
@ -504,7 +504,7 @@ export class VisualizeEditorPageObject extends FtrService {

  public async clickMetricByIndex(index: number) {
    const metrics = await this.find.allByCssSelector(
-      '[data-test-subj="visualizationLoader"] .legacyMtrVis .legacyMtrVis__container'
+      '[data-test-subj="visualizationLoader"] [data-test-subj="legacyMtrVis"] .legacyMtrVis__container'
    );
    expect(metrics.length).greaterThan(index);
    await metrics[index].click();