[8.x] [Lens/SCSS] Replace expression legacy metric scss (#209546) (#212884)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Lens/SCSS] Replace expression legacy metric scss
(#209546)](https://github.com/elastic/kibana/pull/209546)

<!--- Backport version: 9.6.6 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Maria
Iriarte","email":"106958839+mariairiartef@users.noreply.github.com"},"sourceCommit":{"committedDate":"2025-03-03T11:34:35Z","message":"[Lens/SCSS]
Replace expression legacy metric scss (#209546)\n\n## Summary\n\nPart of
https://github.com/elastic/kibana/issues/208908\n\nReplaces scss to
css-in-js.\n\n### Checklist\n\n- [x] The PR description includes the
appropriate Release Notes section,\nand the correct `release_note:*`
label is applied per
the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\n\n---------\n\nCo-authored-by:
Marta Bondyra
<4283304+mbondyra@users.noreply.github.com>","sha":"8cb484cb8da605a3fbd3b11a7e89a2a921091c9d","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["technical
debt","Team:Visualizations","release_note:skip","Feature:Lens","v9.0.0","backport:version","v8.18.0","v9.1.0","v8.19.0"],"title":"[Lens/SCSS]
Replace expression legacy metric
scss","number":209546,"url":"https://github.com/elastic/kibana/pull/209546","mergeCommit":{"message":"[Lens/SCSS]
Replace expression legacy metric scss (#209546)\n\n## Summary\n\nPart of
https://github.com/elastic/kibana/issues/208908\n\nReplaces scss to
css-in-js.\n\n### Checklist\n\n- [x] The PR description includes the
appropriate Release Notes section,\nand the correct `release_note:*`
label is applied per
the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\n\n---------\n\nCo-authored-by:
Marta Bondyra
<4283304+mbondyra@users.noreply.github.com>","sha":"8cb484cb8da605a3fbd3b11a7e89a2a921091c9d"}},"sourceBranch":"main","suggestedTargetBranches":["9.0","8.18","8.x"],"targetPullRequestStates":[{"branch":"9.0","label":"v9.0.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.18","label":"v8.18.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/209546","number":209546,"mergeCommit":{"message":"[Lens/SCSS]
Replace expression legacy metric scss (#209546)\n\n## Summary\n\nPart of
https://github.com/elastic/kibana/issues/208908\n\nReplaces scss to
css-in-js.\n\n### Checklist\n\n- [x] The PR description includes the
appropriate Release Notes section,\nand the correct `release_note:*`
label is applied per
the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\n\n---------\n\nCo-authored-by:
Marta Bondyra
<4283304+mbondyra@users.noreply.github.com>","sha":"8cb484cb8da605a3fbd3b11a7e89a2a921091c9d"}},{"branch":"8.x","label":"v8.19.0","branchLabelMappingKey":"^v8.19.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Maria Iriarte <106958839+mariairiartef@users.noreply.github.com>

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);
-  }
-}

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

@@ -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)',
+        },
+      },
+    }),
+};

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',
+});

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" },

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();