[Ingest Pipelines] migrate from scss to emotion (elastic#234444)

Addresses elastic#205027

• Migrate Ingest Pipelines UI styling from SCSS to Emotion across
pipeline editor, processor form, processors tree,
and test pipeline components; remove SCSS files and inline styles in
TSX.
• Fixed related test file

## Screenshots (Before | After)

<img width="3271" height="1396" alt="image"
src="https://github.com/user-attachments/assets/d2e4c9d9-4964-46f9-8e36-57239af7b4cb"
/>

<img width="3263" height="1396" alt="image"
src="https://github.com/user-attachments/assets/18a3c7cd-115e-48a0-a46c-aec24eea5702"
/>

<img width="3263" height="1393" alt="image"
src="https://github.com/user-attachments/assets/2fa8a0a2-b8fa-4041-bdb6-33bd13a11e54"
/>

<img width="3266" height="1393" alt="image"
src="https://github.com/user-attachments/assets/1302d606-f9f3-4154-ac12-431daf887afa"
/>

<img width="3265" height="1396" alt="image"
src="https://github.com/user-attachments/assets/0a0fe8dd-b84d-4449-9e32-f275dafb8a22"
/>

<img width="3261" height="1392" alt="image"
src="https://github.com/user-attachments/assets/d1e57301-a87e-493c-8431-579e43cb2866"
/>

<img width="3264" height="1401" alt="image"
src="https://github.com/user-attachments/assets/afe80157-0162-47b7-bb1f-6f40a8636303"
/>

Author: kapral18

x-pack/platform/plugins/shared/ingest_pipelines/public/application/components/pipeline_editor/__jest__/pipeline_processors_editor.test.tsx

@@ -355,12 +355,22 @@ describe('Pipeline Editor', () => {
           expect(find(`processors>${processorIndex}.inlineTextInputNonEditableText`).text()).toBe(
             description
           );
-          expect(
-            (
-              find(`processors>${processorIndex}.pipelineProcessorItemDescriptionContainer`).props()
-                .className as string
-            ).includes('--displayNone')
-          ).toBe(!descriptionVisible);
+
+          const descriptionContainer = find(
+            `processors>${processorIndex}.pipelineProcessorItemDescriptionContainer`
+          );
+
+          expect(descriptionContainer.exists()).toBe(true);
+
+          if (descriptionVisible) {
+            expect(
+              window.getComputedStyle(descriptionContainer.getDOMNode()).getPropertyValue('display')
+            ).not.toBe('none');
+          } else {
+            expect(
+              window.getComputedStyle(descriptionContainer.getDOMNode()).getPropertyValue('display')
+            ).toBe('none');
+          }
         };
 
       const assertScriptProcessor = createAssertForProcessor('0');

x-pack/platform/plugins/shared/ingest_pipelines/public/application/components/pipeline_editor/components/_shared.scss

@@ -9,6 +9,8 @@ import type { FunctionComponent } from 'react';
 import React from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiButtonEmpty, EuiButton } from '@elastic/eui';
+import { css } from '@emotion/react';
+
 import { usePipelineProcessorsContext } from '../context';
 
 export interface Props {
@@ -23,6 +25,12 @@ const addProcessorButtonLabel = i18n.translate(
   }
 );
 
+const styles = {
+  button: css`
+    width: fit-content;
+  `,
+};
+
 export const AddProcessorButton: FunctionComponent<Props> = (props) => {
   const { onClick, renderButtonAsLink } = props;
   const {
@@ -46,7 +54,7 @@ export const AddProcessorButton: FunctionComponent<Props> = (props) => {
   return (
     <EuiButton
       data-test-subj="addProcessorButton"
-      className="pipelineProcessorsEditor__tree__addProcessorButton"
+      css={styles.button}
       disabled={editor.mode.id !== 'idle'}
       onClick={onClick}
     >

x-pack/platform/plugins/shared/ingest_pipelines/public/application/components/pipeline_editor/components/add_processor_button.tsx

@@ -5,19 +5,30 @@
  * 2.0.
  */
 
-import { EuiLink, EuiText, EuiTitle } from '@elastic/eui';
+import { EuiLink, EuiText, EuiTitle, useEuiTheme } from '@elastic/eui';
 import type { FunctionComponent } from 'react';
 import React from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
+import { css } from '@emotion/react';
 
 import { useKibana } from '../../../../shared_imports';
 
+const useStyles = () => {
+  const { euiTheme } = useEuiTheme();
+  return {
+    title: css`
+      padding-left: ${euiTheme.size.s};
+    `,
+  };
+};
+
 export const OnFailureProcessorsTitle: FunctionComponent = () => {
   const { services } = useKibana();
+  const styles = useStyles();
 
   return (
-    <div className="pipelineEditor__onFailureTitle">
+    <div css={styles.title}>
       <EuiTitle size="xs">
         <h4>
           <FormattedMessage

x-pack/platform/plugins/shared/ingest_pipelines/public/application/components/pipeline_editor/components/on_failure_processors_title.tsx

@@ -5,9 +5,9 @@
  * 2.0.
  */
 
-import classNames from 'classnames';
 import type { FunctionComponent } from 'react';
 import React, { useState } from 'react';
+import { css } from '@emotion/react';
 
 import { EuiContextMenuItem, EuiContextMenuPanel, EuiPopover, EuiButtonIcon } from '@elastic/eui';
 
@@ -23,14 +23,19 @@ interface Props {
   'data-test-subj'?: string;
 }
 
+const getStyles = ({ hidden }: { hidden?: boolean }) => ({
+  container: hidden
+    ? css`
+        display: none;
+      `
+    : undefined,
+});
+
 export const ContextMenu: FunctionComponent<Props> = (props) => {
   const { showAddOnFailure, onDuplicate, onAddOnFailure, onDelete, disabled, hidden } = props;
+  const styles = getStyles({ hidden });
   const [isOpen, setIsOpen] = useState<boolean>(false);
 
-  const containerClasses = classNames({
-    'pipelineProcessorsEditor__item--displayNone': hidden,
-  });
-
   const contextMenuItems = [
     <EuiContextMenuItem
       data-test-subj="duplicateButton"
@@ -71,7 +76,7 @@ export const ContextMenu: FunctionComponent<Props> = (props) => {
   ].filter(Boolean) as JSX.Element[];
 
   return (
-    <div className={containerClasses}>
+    <div css={styles.container}>
       <EuiPopover
         data-test-subj={props['data-test-subj']}
         anchorPosition="leftCenter"