[8.x] [ML] Remove data frame analytics scss files (#199572) (#200639)

# Backport This will backport the following commits from `main` to `8.x`: - [[ML] Remove data frame analytics scss files (#199572)](#199572)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Melissa Alvarez <melissa.alvarez@elastic.co>
elastic · Nov 18, 2024 · 31144f5 · 31144f5
1 parent 852d6d9
commit 31144f5
Show file tree

Hide file tree

Showing 15 changed files with 113 additions and 128 deletions.
diff --git a/x-pack/plugins/ml/public/application/_index.scss b/x-pack/plugins/ml/public/application/_index.scss
@@ -5,7 +5,6 @@
 // SASSTODO: Prefix ml selectors instead
 .ml-app {
   // Sub applications
-  @import 'data_frame_analytics/index';
   @import 'explorer/index'; // SASSTODO: This file needs to be rewritten
 
   // Components
@@ -16,4 +15,4 @@
   @import 'components/job_selector/index';
   @import 'components/rule_editor/index'; // SASSTODO: This file overwrites EUI directly
 
-}
+}
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/_index.scss b/x-pack/plugins/ml/public/application/data_frame_analytics/_index.scss
diff --git a/...l/public/application/data_frame_analytics/pages/analytics_creation/components/_index.scss b/...l/public/application/data_frame_analytics/pages/analytics_creation/components/_index.scss
diff --git a/...e_analytics/pages/analytics_creation/components/back_to_list_panel/back_to_list_panel.tsx b/...e_analytics/pages/analytics_creation/components/back_to_list_panel/back_to_list_panel.tsx
@@ -20,7 +20,7 @@ export const BackToListPanel: FC = () => {
   return (
     <Fragment>
       <EuiCard
-        className="dfAnalyticsCreationWizard__card"
+        css={{ width: '300px' }}
         icon={<EuiIcon size="xxl" type="list" />}
         title={i18n.translate('xpack.ml.dataframe.analytics.create.analyticsListCardTitle', {
           defaultMessage: 'Data Frame Analytics',

diff --git a/...e_analytics/pages/analytics_creation/components/view_results_panel/view_results_panel.tsx b/...e_analytics/pages/analytics_creation/components/view_results_panel/view_results_panel.tsx
@@ -7,7 +7,7 @@
 
 import type { FC } from 'react';
 import React, { Fragment } from 'react';
-import { EuiCard, EuiIcon } from '@elastic/eui';
+import { EuiCard, EuiIcon, useEuiTheme } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import type { DataFrameAnalysisConfigType } from '@kbn/ml-data-frame-analytics-utils';
 import { useMlLink } from '../../../../../contexts/kibana';
@@ -26,10 +26,14 @@ export const ViewResultsPanel: FC<Props> = ({ jobId, analysisType }) => {
     },
   });
 
+  const {
+    euiTheme: { size },
+  } = useEuiTheme();
+
   return (
     <Fragment>
       <EuiCard
-        className="dfAnalyticsCreationWizard__card"
+        css={{ width: `calc(${size.xxl} * 7.5)` }}
         icon={<EuiIcon size="xxl" type="visTable" />}
         title={i18n.translate('xpack.ml.dataframe.analytics.create.viewResultsCardTitle', {
           defaultMessage: 'View Results',

diff --git a/...rame_analytics/pages/analytics_management/components/analytics_list/_analytics_table.scss b/...rame_analytics/pages/analytics_management/components/analytics_list/_analytics_table.scss
diff --git a/...ion/data_frame_analytics/pages/analytics_management/components/analytics_list/_index.scss b/...ion/data_frame_analytics/pages/analytics_management/components/analytics_list/_index.scss
diff --git a/...lytics/pages/analytics_management/components/analytics_list/expanded_row_details_pane.tsx b/...lytics/pages/analytics_management/components/analytics_list/expanded_row_details_pane.tsx
@@ -42,16 +42,17 @@ export const OverallDetails: FC<{
 }> = ({ overallDetails }) => (
   <EuiFlexGroup alignItems="center" wrap data-test-subj={overallDetails.dataTestSubj}>
     {overallDetails.items.map((item) => {
+      const key = item.title;
       if (item.title === 'badge') {
         return (
-          <EuiFlexItem grow={false}>
+          <EuiFlexItem grow={false} key={key}>
             <EuiBetaBadge label={item.description} color="subdued" title={item.title} />
           </EuiFlexItem>
         );
       }
 
       return (
-        <EuiFlexItem grow={false}>
+        <EuiFlexItem grow={false} key={key}>
           <EuiFlexGroup gutterSize="xs">
             <EuiFlexItem grow={false}>
               <EuiDescriptionListDescription className="descriptionListTitle">
@@ -82,7 +83,7 @@ export const Stats = ({ section }: { section: SectionConfig }) => (
     <EuiFlexItem grow={false}>
       <EuiFlexGroup>
         {section.items.map((item) => (
-          <EuiFlexItem grow={false}>
+          <EuiFlexItem grow={false} key={item.title}>
             <EuiDescriptionListDescription className="descriptionListTitle">
               <EuiText size="xs">{item.title}</EuiText>
             </EuiDescriptionListDescription>
@@ -200,10 +201,10 @@ export const ExpandedRowDetailsPane: FC<ExpandedRowDetailsPaneProps> = ({
               </EuiTitle>
               <EuiSpacer size="xs" />
               {progress.items.map((item) => (
-                <>
+                <span key={item.title}>
                   {item.description}
                   <EuiSpacer size="s" />
-                </>
+                </span>
               ))}
             </EuiFlexItem>
             <EuiFlexItem grow={3}>

diff --git a/...tics/pages/analytics_management/components/analytics_list/expanded_row_messages_pane.scss b/...tics/pages/analytics_management/components/analytics_list/expanded_row_messages_pane.scss
diff --git a/...ytics/pages/analytics_management/components/analytics_list/expanded_row_messages_pane.tsx b/...ytics/pages/analytics_management/components/analytics_list/expanded_row_messages_pane.tsx
@@ -5,11 +5,11 @@
  * 2.0.
  */
 
-import './expanded_row_messages_pane.scss';
-
 import type { FC } from 'react';
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import { useEuiTheme } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import { css } from '@emotion/react';
 import { useMlApi } from '../../../../../contexts/kibana';
 import { useRefreshAnalyticsList } from '../../../../common';
 import { JobMessages } from '../../../../../components/job_messages';
@@ -23,6 +23,21 @@ interface Props {
 
 export const ExpandedRowMessagesPane: FC<Props> = ({ analyticsId, dataTestSubj }) => {
   const mlApi = useMlApi();
+  const {
+    euiTheme: { size },
+  } = useEuiTheme();
+
+  const cssOverride = useMemo(
+    () =>
+      css({
+        padding: `0 ${size.s} ${size.s} ${size.s}`,
+        '.euiTable': {
+          backgroundColor: 'transparent',
+        },
+      }),
+    [size.s]
+  );
+
   const [messages, setMessages] = useState<JobMessage[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [errorMessage, setErrorMessage] = useState('');
@@ -63,7 +78,7 @@ export const ExpandedRowMessagesPane: FC<Props> = ({ analyticsId, dataTestSubj }
   useRefreshAnalyticsList({ onRefresh: getMessages });
 
   return (
-    <div className="mlExpandedRowJobMessages" data-test-subj={dataTestSubj}>
+    <div data-test-subj={dataTestSubj} css={cssOverride}>
       <JobMessages
         messages={messages}
         loading={isLoading}

diff --git a/...data_frame_analytics/pages/analytics_management/components/analytics_list/use_columns.tsx b/...data_frame_analytics/pages/analytics_management/components/analytics_list/use_columns.tsx
@@ -49,6 +49,10 @@ enum TASK_STATE_COLOR {
   stopping = 'hollow',
 }
 
+const badgeStyle = {
+  maxWidth: '100px',
+};
+
 export const getTaskStateBadge = (
   state: DataFrameAnalyticsStats['state'],
   failureReason?: DataFrameAnalyticsStats['failure_reason']
@@ -58,22 +62,22 @@ export const getTaskStateBadge = (
   if (isDataFrameAnalyticsFailed(state) && failureReason !== undefined) {
     return (
       <EuiToolTip content={failureReason}>
-        <EuiBadge className="mlTaskStateBadge" color={color}>
+        <EuiBadge css={badgeStyle} color={color}>
           {state}
         </EuiBadge>
       </EuiToolTip>
     );
   }
 
   return (
-    <EuiBadge className="mlTaskStateBadge" color={color}>
+    <EuiBadge css={badgeStyle} color={color}>
       {state}
     </EuiBadge>
   );
 };
 
 export const getJobTypeBadge = (jobType: string) => (
-  <EuiBadge className="mlTaskStateBadge" color="hollow">
+  <EuiBadge css={badgeStyle} color="hollow">
     {jobType}
   </EuiBadge>
 );

diff --git a/...k/plugins/ml/public/application/data_frame_analytics/pages/job_map/components/_index.scss b/...k/plugins/ml/public/application/data_frame_analytics/pages/job_map/components/_index.scss
diff --git a/.../plugins/ml/public/application/data_frame_analytics/pages/job_map/components/_legend.scss b/.../plugins/ml/public/application/data_frame_analytics/pages/job_map/components/_legend.scss