[ML] Migrate SCSS to emotion for data grid (#155349)

Migrate SCSS to emotion for data grid mini histograms.

x-pack/plugins/ml/public/application/components/data_grid/column_chart.scss

@@ -1,27 +0,0 @@
-.mlDataGridChart__histogram {
-  width: 100%;
-  height: $euiSizeXL + $euiSizeXXL;
-}
-
-.mlDataGridChart__legend {
-  @include euiTextTruncate;
-  @include euiFontSizeXS;
-
-  color: $euiColorMediumShade;
-  display: block;
-  overflow-x: hidden;
-  margin: $euiSizeXS 0 0 0;
-  font-style: italic;
-  font-weight: normal;
-  text-align: left;
-}
-
-.mlDataGridChart__legend--numeric {
-  text-align: right;
-}
-
-.mlDataGridChart__legendBoolean {
-  width: 100%;
-  min-width: $euiButtonMinWidth;
-  td { text-align: center }
-}

x-pack/plugins/ml/public/application/components/data_grid/column_chart.tsx

@@ -5,18 +5,41 @@
  * 2.0.
  */
 
-import React, { FC } from 'react';
-import classNames from 'classnames';
+import React, { type FC } from 'react';
+import { css } from '@emotion/react';
 
 import { BarSeries, Chart, Settings, ScaleType } from '@elastic/charts';
-import { EuiDataGridColumn } from '@elastic/eui';
+import { euiTextTruncate, type EuiDataGridColumn } from '@elastic/eui';
 
-import './column_chart.scss';
+import { euiThemeVars } from '@kbn/ui-theme';
 
 import { isUnsupportedChartData, ChartData } from '../../../../common/types/field_histograms';
 
 import { useColumnChart } from './use_column_chart';
 
+const cssHistogram = css({
+  width: '100%',
+  height: `calc(${euiThemeVars.euiSizeXL} + ${euiThemeVars.euiSizeXXL})`,
+});
+
+const cssHistogramLegend = css([
+  css`
+    ${euiTextTruncate()}
+  `,
+  {
+    color: euiThemeVars.euiColorMediumShade,
+    display: 'block',
+    overflowX: 'hidden',
+    margin: `${euiThemeVars.euiSizeXS} 0 0 0`,
+    fontSize: euiThemeVars.euiFontSizeXS,
+    fontStyle: 'italic',
+    fontWeight: 'normal',
+    textAlign: 'left',
+  },
+]);
+
+const cssHistogramLegendNumeric = css([cssHistogramLegend, { textAlign: 'right' }]);
+
 interface Props {
   chartData: ChartData;
   columnType: EuiDataGridColumn;
@@ -41,6 +64,7 @@ const columnChartTheme = {
   },
   scales: { barsPadding: 0.1 },
 };
+
 export const ColumnChart: FC<Props> = ({
   chartData,
   columnType,
@@ -53,7 +77,7 @@ export const ColumnChart: FC<Props> = ({
   return (
     <div data-test-subj={dataTestSubj}>
       {!isUnsupportedChartData(chartData) && data.length > 0 && (
-        <div className="mlDataGridChart__histogram" data-test-subj={`${dataTestSubj}-histogram`}>
+        <div css={cssHistogram} data-test-subj={`${dataTestSubj}-histogram`}>
           <Chart>
             <Settings
               // TODO use the EUI charts theme see src/plugins/charts/public/services/theme/README.md
@@ -73,9 +97,7 @@ export const ColumnChart: FC<Props> = ({
         </div>
       )}
       <div
-        className={classNames('mlDataGridChart__legend', {
-          'mlDataGridChart__legend--numeric': columnType.schema === 'number',
-        })}
+        css={columnType.schema === 'number' ? cssHistogramLegendNumeric : cssHistogramLegend}
         data-test-subj={`${dataTestSubj}-legend`}
       >
         {legendText}

x-pack/plugins/ml/public/application/components/data_grid/data_grid.scss

@@ -1,18 +0,0 @@
-.mlDataGrid {
-
-  .euiDataGridRowCell--boolean {
-    text-transform: none;
-  }
-
-  // Overrides to align the sorting arrow, actions icon and the column header when no chart is available,
-  // to the bottom of the cell when histogram charts are enabled.
-  // Note that overrides have to be used as currently it is not possible to add a custom class name
-  // for the EuiDataGridHeaderCell - see https://github.com/elastic/eui/issues/5106
-  .euiDataGridHeaderCell {
-    .euiDataGridHeaderCell__sortingArrow,
-    .euiDataGridHeaderCell__icon,
-    .euiPopover {
-      margin-top: auto;
-    }
-  }
-}

x-pack/plugins/ml/public/application/components/data_grid/data_grid.tsx

@@ -7,8 +7,7 @@
 
 import { isEqual } from 'lodash';
 import React, { memo, useEffect, useCallback, useRef, FC } from 'react';
-import { i18n } from '@kbn/i18n';
-import { FormattedMessage } from '@kbn/i18n-react';
+import { css } from '@emotion/react';
 
 import {
   EuiButtonEmpty,
@@ -27,8 +26,11 @@ import {
   EuiToolTip,
 } from '@elastic/eui';
 
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';
 import { CoreSetup } from '@kbn/core/public';
 import { isPopulatedObject } from '@kbn/ml-is-populated-object';
+
 import { DEFAULT_SAMPLER_SHARD_SIZE } from '../../../../common/constants/field_histograms';
 
 import { ANALYSIS_CONFIG_TYPE, INDEX_STATUS } from '../../data_frame_analytics/common';
@@ -49,10 +51,22 @@ import {
 import { DEFAULT_RESULTS_FIELD } from '../../../../common/constants/data_frame_analytics';
 import { DataFrameAnalysisConfigType } from '../../../../common/types/data_frame_analytics';
 
-import './data_grid.scss';
 // TODO Fix row hovering + bar highlighting
 // import { hoveredRow$ } from './column_chart';
 
+const cssOverride = css({
+  '.euiDataGridRowCell--boolean': { textTransform: 'none' },
+  // Overrides to align the sorting arrow, actions icon and the column header when no chart is available,
+  // to the bottom of the cell when histogram charts are enabled.
+  // Note that overrides have to be used as currently it is not possible to add a custom class name
+  // for the EuiDataGridHeaderCell - see https://github.com/elastic/eui/issues/5106
+  '.euiDataGridHeaderCell': {
+    '.euiDataGridHeaderCell__sortingArrow,.euiDataGridHeaderCell__icon,.euiPopover': {
+      marginTop: 'auto',
+    },
+  },
+});
+
 export const DataGridTitle: FC<{ title: string }> = ({ title }) => (
   <EuiTitle size="xs">
     <span>{title}</span>
@@ -337,7 +351,7 @@ export const DataGrid: FC<Props> = memo(
           onMutation={onMutation}
         >
           {(mutationRef) => (
-            <div className="mlDataGrid" ref={mutationRef}>
+            <div css={cssOverride} ref={mutationRef}>
               <EuiDataGrid
                 aria-label={isWithHeader(props) ? props.title : ''}
                 columns={columnsWithCharts.map((c) => {

x-pack/plugins/ml/public/application/components/data_grid/use_column_chart.tsx

@@ -8,13 +8,14 @@
 import moment from 'moment';
 import { BehaviorSubject } from 'rxjs';
 import React from 'react';
+import { css } from '@emotion/react';
 
 import useObservable from 'react-use/lib/useObservable';
 
-import { euiPaletteColorBlind, EuiDataGridColumn } from '@elastic/eui';
+import { euiPaletteColorBlind, type EuiDataGridColumn } from '@elastic/eui';
 
+import { euiThemeVars } from '@kbn/ui-theme';
 import { i18n } from '@kbn/i18n';
-
 import { KBN_FIELD_TYPES } from '@kbn/field-types';
 
 import {
@@ -28,6 +29,18 @@ import {
 
 import { NON_AGGREGATABLE } from './common';
 
+const cssHistogramLegendBoolean = css({
+  width: '100%',
+  // This was originally $euiButtonMinWidth, but that
+  // is no longer exported from the EUI package,
+  // so we're replicating it here inline.
+  minWidth: `calc(${euiThemeVars.euiSize} * 7)`,
+});
+
+const cssTextAlignCenter = css({
+  textAlign: 'center',
+});
+
 export const hoveredRow$ = new BehaviorSubject<any | null>(null);
 
 export const BAR_COLOR = euiPaletteColorBlind()[0];
@@ -94,11 +107,15 @@ export const getLegendText = (
 
   if (chartData.type === 'boolean') {
     return (
-      <table className="mlDataGridChart__legendBoolean">
+      <table css={cssHistogramLegendBoolean}>
         <tbody>
           <tr>
-            {chartData.data[0] !== undefined && <td>{chartData.data[0].key_as_string}</td>}
-            {chartData.data[1] !== undefined && <td>{chartData.data[1].key_as_string}</td>}
+            {chartData.data[0] !== undefined && (
+              <td css={cssTextAlignCenter}>{chartData.data[0].key_as_string}</td>
+            )}
+            {chartData.data[1] !== undefined && (
+              <td css={cssTextAlignCenter}>{chartData.data[1].key_as_string}</td>
+            )}
           </tr>
         </tbody>
       </table>