[8.x] [ML] Removing anomaly detection scss files (#197447) (#198293)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[ML] Removing anomaly detection scss files
(#197447)](https://github.com/elastic/kibana/pull/197447)

<!--- Backport version: 9.4.3 -->

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

<!--BACKPORT [{"author":{"name":"James
Gowdy","email":"jgowdy@elastic.co"},"sourceCommit":{"committedDate":"2024-10-30T10:55:10Z","message":"[ML]
Removing anomaly detection scss files (#197447)\n\nRemoves last
remaining scss files in favour of inline css with
emotion.\r\n\r\n**Before**\r\n\r\n![image](fd9eab67-ab91-45c6-9ad9-5addce40a76e)","sha":"e3f3e27fdf6dd7ce369ce52ef937ef839e08233f","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":[":ml","Feature:Anomaly
Detection","release_note:skip","v9.0.0","backport:version","v8.17.0"],"title":"[ML]
Removing anomaly detection scss
files","number":197447,"url":"https://github.com/elastic/kibana/pull/197447","mergeCommit":{"message":"[ML]
Removing anomaly detection scss files (#197447)\n\nRemoves last
remaining scss files in favour of inline css with
emotion.\r\n\r\n**Before**\r\n\r\n![image](fd9eab67-ab91-45c6-9ad9-5addce40a76e)","sha":"e3f3e27fdf6dd7ce369ce52ef937ef839e08233f"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/197447","number":197447,"mergeCommit":{"message":"[ML]
Removing anomaly detection scss files (#197447)\n\nRemoves last
remaining scss files in favour of inline css with
emotion.\r\n\r\n**Before**\r\n\r\n![image](fd9eab67-ab91-45c6-9ad9-5addce40a76e)","sha":"e3f3e27fdf6dd7ce369ce52ef937ef839e08233f"}},{"branch":"8.x","label":"v8.17.0","branchLabelMappingKey":"^v8.17.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: James Gowdy <jgowdy@elastic.co>

x-pack/plugins/ml/public/application/jobs/jobs_list/components/start_datafeed_modal/time_range_selector/_time_range_selector.scss

@@ -1,61 +0,0 @@
-// stylelint-disable selector-no-qualifying-type
-// SASSTODO: Looks like this could use a rewrite. Needs selectors
-.time-range-selector {
-  .time-range-section-title {
-    font-weight: bold;
-    margin-bottom: $euiSizeS;
-  }
-  .time-range-section {
-    flex: 50%;
-    padding: 0 $euiSizeS;
-    border-right: $euiBorderThin;
-  }
-
-  .tab-stack {
-    margin-bottom: 0;
-    padding-left: 0;
-    list-style: none;
-
-    & > li {
-      float: none;
-      position: relative;
-      display: block;
-      margin-bottom: $euiSizeXS;
-
-      & > a {
-        position: relative;
-        display: block;
-        padding: $euiSizeS $euiSize;
-        border-radius: $euiSizeXS;
-      }
-      & > a:hover {
-        background-color: $euiColorLightestShade;
-      }
-      .body {
-        display: none;
-      }
-    }
-    & > li.active {
-      & > a {
-        color: $euiColorEmptyShade;
-        background-color: $euiColorPrimary;
-
-      }
-      .body {
-        display: block;
-      }
-    }
-    & > li.has-body.active {
-      & > a {
-        border-radius: $euiBorderRadius $euiBorderRadius 0 0;
-      }
-      .react-datepicker {
-        border-radius: 0 0 $euiBorderRadius $euiBorderRadius;
-        border-top: none;
-      }
-    }
-  }
-  .time-range-section:last-child {
-    border-right: none;
-  }
-}

x-pack/plugins/ml/public/application/jobs/jobs_list/components/start_datafeed_modal/time_range_selector/time_range_selector.js

@@ -5,7 +5,6 @@
  * 2.0.
  */
 
-import './_time_range_selector.scss';
 import PropTypes from 'prop-types';
 import React, { Component, useState, useEffect } from 'react';
 
@@ -16,6 +15,7 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { TIME_FORMAT } from '@kbn/ml-date-utils';
 import { ManagedJobsWarningCallout } from '../../confirm_modals/managed_jobs_warning_callout';
+import { TimeRangeSelectorWrapper } from './time_range_selector_wrapper';
 
 export class TimeRangeSelector extends Component {
   constructor(props) {
@@ -166,7 +166,7 @@ export class TimeRangeSelector extends Component {
   render() {
     const { startItems, endItems } = this.getTabItems();
     return (
-      <div className="time-range-selector">
+      <TimeRangeSelectorWrapper>
         {this.props.hasManagedJob === true && this.state.endTab !== 0 ? (
           <>
             <ManagedJobsWarningCallout
@@ -213,7 +213,7 @@ export class TimeRangeSelector extends Component {
             />
           </EuiFlexItem>
         </EuiFlexGroup>
-      </div>
+      </TimeRangeSelectorWrapper>
     );
   }
 }

x-pack/plugins/ml/public/application/jobs/jobs_list/components/start_datafeed_modal/time_range_selector/time_range_selector_wrapper.tsx

@@ -0,0 +1,78 @@
+/*
+ * 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 type { FC, PropsWithChildren } from 'react';
+import React from 'react';
+import { useEuiTheme } from '@elastic/eui';
+
+export const TimeRangeSelectorWrapper: FC<PropsWithChildren> = ({ children }) => {
+  const { euiTheme } = useEuiTheme();
+  const style = {
+    '.time-range-section-title': {
+      fontWeight: 'bold',
+      marginBottom: euiTheme.size.s,
+    },
+    '.time-range-section': {
+      flex: '50%',
+      padding: `0 ${euiTheme.size.s}`,
+      borderRight: euiTheme.border.thin,
+    },
+
+    '.tab-stack': {
+      marginBottom: 0,
+      paddingLeft: 0,
+      listStyle: 'none',
+
+      '& > li': {
+        float: 'none',
+        position: 'relative',
+        display: 'block',
+        marginBottom: euiTheme.size.xs,
+
+        '& > a': {
+          position: 'relative',
+          display: 'block',
+          padding: `${euiTheme.size.s} ${euiTheme.size.base}`,
+          borderRadius: euiTheme.border.radius.medium,
+        },
+        '& > a:hover': {
+          backgroundColor: euiTheme.colors.lightestShade,
+        },
+        '.body': {
+          display: 'none',
+        },
+      },
+      '& > li.active': {
+        '& > a': {
+          color: euiTheme.colors.emptyShade,
+          backgroundColor: euiTheme.colors.primary,
+        },
+        '.body': {
+          display: 'block',
+          '.euiFieldText': {
+            borderRadius: `0 0 ${euiTheme.border.radius.medium} ${euiTheme.border.radius.medium}`,
+          },
+        },
+      },
+      '& > li.has-body.active': {
+        '& > a': {
+          borderRadius: `${euiTheme.border.radius.medium} ${euiTheme.border.radius.medium} 0 0`,
+        },
+        '.react-datepicker': {
+          borderRadius: `0 0 ${euiTheme.border.radius.medium} ${euiTheme.border.radius.medium}`,
+          borderTop: 'none',
+        },
+      },
+    },
+    '.time-range-section:last-child': {
+      borderRight: 'none',
+    },
+  };
+
+  // @ts-expect-error style object strings cause a type error
+  return <div css={style}>{children}</div>;
+};

x-pack/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/split_cards/split_cards.tsx

@@ -8,10 +8,16 @@
 import type { FC, PropsWithChildren } from 'react';
 import React, { memo, Fragment } from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiHorizontalRule, EuiSpacer } from '@elastic/eui';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiPanel,
+  EuiHorizontalRule,
+  EuiSpacer,
+  useEuiTheme,
+} from '@elastic/eui';
 import type { SplitField } from '@kbn/ml-anomaly-utils';
 import { JOB_TYPE } from '../../../../../../../../../common/constants/new_job';
-import './style.scss';
 
 interface Props {
   fieldValues: string[];
@@ -28,8 +34,14 @@ interface Panel {
 
 export const SplitCards: FC<PropsWithChildren<Props>> = memo(
   ({ fieldValues, splitField, children, numberOfDetectors, jobType, animate = false }) => {
+    const { euiTheme } = useEuiTheme();
     const panels: Panel[] = [];
 
+    const splitCardStyle = {
+      border: euiTheme.border.thin,
+      paddingTop: euiTheme.size.xs,
+    };
+
     function storePanels(panel: HTMLDivElement | null, marginBottom: number) {
       if (panel !== null) {
         if (animate === false) {
@@ -70,14 +82,10 @@ export const SplitCards: FC<PropsWithChildren<Props>> = memo(
           ...(animate ? { transition: 'margin 0.5s' } : {}),
         };
         return (
-          <div key={fieldName} ref={(ref) => storePanels(ref, marginBottom)} style={style}>
-            <EuiPanel
-              paddingSize="m"
-              className="mlPickFields__splitCard"
-              data-test-subj="mlSplitCard back"
-            >
+          <div key={fieldName} ref={(ref) => storePanels(ref, marginBottom)} css={style}>
+            <EuiPanel paddingSize="m" css={splitCardStyle} data-test-subj="mlSplitCard back">
               <div
-                style={{ fontWeight: 'bold', fontSize: 'small' }}
+                css={{ fontWeight: 'bold', fontSize: 'small' }}
                 data-test-subj="mlSplitCardTitle"
               >
                 {fieldName}
@@ -97,7 +105,7 @@ export const SplitCards: FC<PropsWithChildren<Props>> = memo(
               {(jobType === JOB_TYPE.MULTI_METRIC || jobType === JOB_TYPE.GEO) && (
                 <Fragment>
                   <div
-                    style={{ fontSize: 'small' }}
+                    css={{ fontSize: 'small' }}
                     data-test-subj={`mlDataSplitTitle ${splitField.name}`}
                   >
                     <FormattedMessage
@@ -111,13 +119,9 @@ export const SplitCards: FC<PropsWithChildren<Props>> = memo(
               )}
 
               {getBackPanels()}
-              <EuiPanel
-                paddingSize="m"
-                className="mlPickFields__splitCard"
-                data-test-subj="mlSplitCard front"
-              >
+              <EuiPanel paddingSize="m" css={splitCardStyle} data-test-subj="mlSplitCard front">
                 <div
-                  style={{ fontWeight: 'bold', fontSize: 'small' }}
+                  css={{ fontWeight: 'bold', fontSize: 'small' }}
                   data-test-subj="mlSplitCardTitle"
                 >
                   {fieldValues[0]}

x-pack/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/split_cards/style.scss

@@ -1,4 +0,0 @@
-.mlPickFields__splitCard {
-  padding-top: $euiSizeXS;
-  border: $euiBorderThin;
-}