[8.x] [ML] Migrate influencers list from SCSS to Emotion (#200019)

x-pack/plugins/ml/public/application/_index.scss

@@ -11,7 +11,6 @@
   @import 'components/annotations/annotation_description_list/index'; // SASSTODO: This file overwrites EUI directly
   @import 'components/anomalies_table/index'; // SASSTODO: This file overwrites EUI directly
   @import 'components/entity_cell/index';
-  @import 'components/influencers_list/index';
   @import 'components/job_selector/index';
   @import 'components/rule_editor/index'; // SASSTODO: This file overwrites EUI directly
 

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

@@ -19,6 +19,7 @@ import { getSeverity, getFormattedSeverityScore } from '@kbn/ml-anomaly-utils';
 import { abbreviateWholeNumber } from '../../formatters/abbreviate_whole_number';
 import type { EntityCellFilter } from '../entity_cell';
 import { EntityCell } from '../entity_cell';
+import { useInfluencersListStyles } from './influencers_list_styles';
 
 export interface InfluencerValueData {
   influencerFieldValue: string;
@@ -65,6 +66,7 @@ function getTooltipContent(maxScoreLabel: string, totalScoreLabel: string) {
 }
 
 const Influencer: FC<InfluencerProps> = ({ influencerFieldName, influencerFilter, valueData }) => {
+  const styles = useInfluencersListStyles();
   const maxScore = Math.floor(valueData.maxAnomalyScore);
   const maxScoreLabel = getFormattedSeverityScore(valueData.maxAnomalyScore);
   const severity = getSeverity(maxScore);
@@ -73,40 +75,35 @@ const Influencer: FC<InfluencerProps> = ({ influencerFieldName, influencerFilter
 
   // Ensure the bar has some width for 0 scores.
   const barScore = maxScore !== 0 ? maxScore : 1;
-  const barStyle = {
-    width: `${barScore}%`,
-  };
 
   const tooltipContent = getTooltipContent(maxScoreLabel, totalScoreLabel);
 
   return (
     <div data-test-subj={`mlInfluencerEntry field-${influencerFieldName}`}>
-      <div className="field-label" data-test-subj="mlInfluencerEntryFieldLabel">
+      <div css={styles.fieldLabel} data-test-subj="mlInfluencerEntryFieldLabel">
         <EntityCell
           entityName={influencerFieldName}
           entityValue={valueData.influencerFieldValue}
           filter={influencerFilter}
         />
       </div>
-      <div className={`progress ${severity.id}`}>
-        <div className="progress-bar-holder">
-          <div className="progress-bar" style={barStyle} />
+      <div css={styles.progress}>
+        <div css={styles.progressBarHolder}>
+          <div css={styles.progressBar(severity.id, barScore)} />
         </div>
-        <div className="score-label">
+        <div css={styles.scoreLabel(severity.id)}>
           <EuiToolTip
             position="right"
-            className="ml-influencers-list-tooltip"
             title={`${influencerFieldName}: ${valueData.influencerFieldValue}`}
             content={tooltipContent}
           >
             <span>{maxScoreLabel}</span>
           </EuiToolTip>
         </div>
       </div>
-      <div className="total-score-label">
+      <div css={styles.totalScoreLabel}>
         <EuiToolTip
           position="right"
-          className="ml-influencers-list-tooltip"
           title={`${influencerFieldName}: ${valueData.influencerFieldValue}`}
           content={tooltipContent}
         >
@@ -145,12 +142,14 @@ const InfluencersByName: FC<InfluencersByNameProps> = ({
 };
 
 export const InfluencersList: FC<InfluencersListProps> = ({ influencers, influencerFilter }) => {
+  const styles = useInfluencersListStyles();
+
   if (influencers === undefined || Object.keys(influencers).length === 0) {
     return (
-      <EuiFlexGroup justifyContent="spaceAround" className="ml-influencers-list">
+      <EuiFlexGroup justifyContent="spaceAround" css={styles.influencersList}>
         <EuiFlexItem grow={false}>
           <EuiSpacer size="xxl" />
-          <EuiTitle size="xxs" className="influencer-title">
+          <EuiTitle size="xxs">
             <h3>
               <FormattedMessage
                 id="xpack.ml.influencersList.noInfluencersFoundTitle"
@@ -172,5 +171,5 @@ export const InfluencersList: FC<InfluencersListProps> = ({ influencers, influen
     />
   ));
 
-  return <div className="ml-influencers-list">{influencersByName}</div>;
+  return <div css={styles.influencersList}>{influencersByName}</div>;
 };

x-pack/plugins/ml/public/application/components/influencers_list/influencers_list_styles.ts

@@ -0,0 +1,90 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { css } from '@emotion/react';
+import { useCurrentEuiThemeVars } from '@kbn/ml-kibana-theme';
+import { mlColors } from '../../styles';
+import { useMlKibana } from '../../contexts/kibana';
+
+export const useInfluencersListStyles = () => {
+  const {
+    services: { theme },
+  } = useMlKibana();
+  const { euiTheme } = useCurrentEuiThemeVars(theme);
+
+  return {
+    influencersList: css({
+      lineHeight: 1.45,
+    }),
+    fieldLabel: css({
+      fontSize: euiTheme.euiFontSizeXS,
+      textAlign: 'left',
+      maxHeight: euiTheme.euiFontSizeS,
+      maxWidth: 'calc(100% - 102px)',
+    }),
+    progress: css({
+      display: 'inline-block',
+      width: 'calc(100% - 34px)',
+      height: '22px',
+      minWidth: '70px',
+      marginBottom: 0,
+      color: euiTheme.euiColorDarkShade,
+      backgroundColor: 'transparent',
+    }),
+    progressBarHolder: css({
+      width: `calc(100% - 28px)`,
+    }),
+    progressBar: (severity: string, barScore: number) =>
+      css({
+        height: `calc(${euiTheme.euiSizeXS} / 2)`,
+        float: 'left',
+        marginTop: euiTheme.euiSizeM,
+        textAlign: 'right',
+        lineHeight: '18px',
+        display: 'inline-block',
+        transition: 'none',
+        width: `${barScore}%`,
+        backgroundColor:
+          severity === 'critical'
+            ? mlColors.critical
+            : severity === 'major'
+            ? mlColors.major
+            : severity === 'minor'
+            ? mlColors.minor
+            : mlColors.warning,
+      }),
+    scoreLabel: (severity: string) =>
+      css({
+        textAlign: 'center',
+        lineHeight: '14px',
+        whiteSpace: 'nowrap',
+        fontSize: euiTheme.euiFontSizeXS,
+        marginLeft: euiTheme.euiSizeXS,
+        display: 'inline',
+        borderColor:
+          severity === 'critical'
+            ? mlColors.critical
+            : severity === 'major'
+            ? mlColors.major
+            : severity === 'minor'
+            ? mlColors.minor
+            : mlColors.warning,
+      }),
+    totalScoreLabel: css({
+      width: euiTheme.euiSizeXL,
+      verticalAlign: 'top',
+      textAlign: 'center',
+      color: euiTheme.euiColorDarkShade,
+      fontSize: '11px',
+      lineHeight: '14px',
+      borderRadius: euiTheme.euiBorderRadius,
+      padding: `calc(${euiTheme.euiSizeXS} / 2)`,
+      display: 'inline-block',
+      border: euiTheme.euiBorderThin,
+    }),
+  };
+};