[ML] Removing anomaly detection scss files (#197447)

Removes last remaining scss files in favour of inline css with emotion. **Before** ![image](https://github.com/user-attachments/assets/16910734-8e28-459c-b798-d55d7ab10323) **After** ![image](https://github.com/user-attachments/assets/5f8a07b7-8796-4302-af24-6facebeb3b48) **Before** ![image](https://github.com/user-attachments/assets/06657e7f-b913-4393-aeaa-50fc0c53831c) **After** ![image](https://github.com/user-attachments/assets/fd9eab67-ab91-45c6-9ad9-5addce40a76e)
elastic · Oct 30, 2024 · e3f3e27 · e3f3e27
1 parent 0ee9684
commit e3f3e27
Show file tree

Hide file tree

Showing 5 changed files with 101 additions and 84 deletions.
diff --git a/...s/jobs_list/components/start_datafeed_modal/time_range_selector/_time_range_selector.scss b/...s/jobs_list/components/start_datafeed_modal/time_range_selector/_time_range_selector.scss
diff --git a/...jobs/jobs_list/components/start_datafeed_modal/time_range_selector/time_range_selector.js b/...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>
     );
   }
 }

diff --git a/..._list/components/start_datafeed_modal/time_range_selector/time_range_selector_wrapper.tsx b/..._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>;
+};
diff --git a/...ion/jobs/new_job/pages/components/pick_fields_step/components/split_cards/split_cards.tsx b/...ion/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]}

diff --git a/...lication/jobs/new_job/pages/components/pick_fields_step/components/split_cards/style.scss b/...lication/jobs/new_job/pages/components/pick_fields_step/components/split_cards/style.scss