[Watcher] Migrate SCSS to Emotion (#236649)

Addresses #205027

• Migrate Watcher to emotion

### Screenshots (Before | After)

<img width="3196" height="1398" alt="image"
src="https://github.com/user-attachments/assets/018cdae2-134c-44b6-a2fe-adeb2f175335"
/>

Author: kapral18

x-pack/platform/plugins/private/watcher/public/application/sections/watch_edit_page/components/threshold_watch_edit/threshold_watch_action_accordion.tsx

@@ -49,6 +49,25 @@ import { executeWatch } from '../../../../lib/api';
 import { SectionError } from '../../../../components';
 import { useAppContext } from '../../../../app_context';
 
+const useStyles = () => {
+  const { euiTheme } = useEuiTheme();
+
+  return {
+    watcherThresholdDeleteButton: css`
+      opacity: 0;
+
+      &:focus,
+      .euiAccordion:hover & {
+        opacity: 1;
+      }
+
+      ${euiCanAnimate} {
+        transition: opacity ${euiTheme.animation.normal} ${euiTheme.animation.resistance};
+      }
+    `,
+  };
+};
+
 const actionFieldsComponentMap = {
   [ACTION_TYPES.LOGGING]: LoggingActionFields,
   [ACTION_TYPES.SLACK]: SlackActionFields,
@@ -78,7 +97,7 @@ export const WatchActionsAccordion: React.FunctionComponent<Props> = ({
   settings,
   actionErrors,
 }) => {
-  const { euiTheme } = useEuiTheme();
+  const styles = useStyles();
   const {
     links: { watchActionsConfigurationMap },
     toasts,
@@ -126,18 +145,7 @@ export const WatchActionsAccordion: React.FunctionComponent<Props> = ({
             <EuiButtonIcon
               iconType="cross"
               color="danger"
-              css={css`
-                opacity: 0;
-
-                &:focus,
-                .euiAccordion:hover & {
-                  opacity: 1;
-                }
-
-                ${euiCanAnimate} {
-                  transition: opacity ${euiTheme.animation.normal} ${euiTheme.animation.resistance};
-                }
-              `}
+              css={styles.watcherThresholdDeleteButton}
               aria-label={i18n.translate(
                 'xpack.watcher.sections.watchEdit.threshold.accordion.deleteIconAriaLabel',
                 {
@@ -189,6 +197,7 @@ export const WatchActionsAccordion: React.FunctionComponent<Props> = ({
               {settings && settings.actionTypes[action.type].enabled === false ? (
                 <Fragment>
                   <EuiCallOut
+                    announceOnMount
                     title={i18n.translate(
                       'xpack.watcher.sections.watchEdit.threshold.actions.actionConfigurationWarningTitleText',
                       {

x-pack/platform/plugins/private/watcher/public/application/sections/watch_edit_page/components/threshold_watch_edit/threshold_watch_action_dropdown.tsx

@@ -16,6 +16,7 @@ import {
   EuiContextMenuPanel,
   EuiContextMenuItem,
 } from '@elastic/eui';
+import { css } from '@emotion/react';
 import { i18n } from '@kbn/i18n';
 import React, { useContext, useState } from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
@@ -24,6 +25,12 @@ import { Action } from '../../../../models/action';
 import { ACTION_TYPES } from '../../../../../../common/constants';
 import { WatchContext } from '../../watch_context';
 
+const styles = {
+  watcherTresholdActionContextMenuItem: css`
+    align-self: center;
+  `,
+};
+
 const disabledMessage = i18n.translate(
   'xpack.watcher.sections.watchEdit.actions.disabledOptionLabel',
   {
@@ -106,7 +113,7 @@ export const WatchActionsDropdown: React.FunctionComponent<Props> = ({ settings,
               }}
             >
               <EuiFlexGroup responsive={false}>
-                <EuiFlexItem grow={false} className="watcherThresholdWatchActionContextMenuItem">
+                <EuiFlexItem grow={false} css={styles.watcherTresholdActionContextMenuItem}>
                   <EuiIcon type={action.iconClass} />
                 </EuiFlexItem>
                 <EuiFlexItem grow={false}>

x-pack/platform/plugins/private/watcher/public/application/sections/watch_edit_page/components/threshold_watch_edit/threshold_watch_action_panel.tsx

@@ -6,13 +6,21 @@
  */
 
 import { EuiFlexGroup, EuiFlexItem, EuiTitle, EuiSpacer } from '@elastic/eui';
+import { css } from '@emotion/react';
 import { i18n } from '@kbn/i18n';
 import React, { useContext } from 'react';
 import { useLoadSettings } from '../../../../lib/api';
 import { WatchActionsDropdown } from './threshold_watch_action_dropdown';
 import { WatchActionsAccordion } from './threshold_watch_action_accordion';
 import { WatchContext } from '../../watch_context';
 
+const styles = {
+  watcherThresholdActionDropdownContainer: css`
+    justify-content: flex-end;
+    flex-direction: row;
+  `,
+};
+
 interface Props {
   actionErrors: {
     [key: string]: {
@@ -42,7 +50,7 @@ export const WatchActionsPanel: React.FunctionComponent<Props> = ({ actionErrors
             </h2>
           </EuiTitle>
         </EuiFlexItem>
-        <EuiFlexItem className="watcherThresholdWatchActionDropdownContainer">
+        <EuiFlexItem css={styles.watcherThresholdActionDropdownContainer}>
           <WatchActionsDropdown settings={settings} isLoading={isLoading} />
         </EuiFlexItem>
       </EuiFlexGroup>

x-pack/platform/plugins/private/watcher/public/application/sections/watch_edit_page/components/threshold_watch_edit/threshold_watch_edit.tsx

@@ -27,6 +27,7 @@ import {
   EuiPageHeader,
   EuiPageSection,
 } from '@elastic/eui';
+import { css } from '@emotion/react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { TIME_UNITS } from '../../../../../../common/constants';
@@ -46,6 +47,15 @@ import { goToWatchList } from '../../../../lib/navigation';
 import { RequestFlyout } from '../request_flyout';
 import { useAppContext } from '../../../../app_context';
 
+const styles = {
+  watcherThresholdAlertAggFieldContainer: css`
+    width: 300px;
+  `,
+  watcherThresholdInBetweenComparatorText: css`
+    align-self: center;
+  `,
+};
+
 const expressionFieldsWithValidation = [
   'aggField',
   'termSize',
@@ -544,7 +554,7 @@ export const ThresholdWatchEdit = ({ pageTitle }: { pageTitle: string }) => {
                       <EuiFlexGroup>
                         <EuiFlexItem
                           grow={false}
-                          className="watcherThresholdAlertAggFieldContainer"
+                          css={styles.watcherThresholdAlertAggFieldContainer}
                         >
                           <ErrableFormRow
                             errorKey="aggField"
@@ -762,7 +772,7 @@ export const ThresholdWatchEdit = ({ pageTitle }: { pageTitle: string }) => {
                               {i > 0 ? (
                                 <EuiFlexItem
                                   grow={false}
-                                  className="watcherThresholdWatchInBetweenComparatorText"
+                                  css={styles.watcherThresholdInBetweenComparatorText}
                                 >
                                   <EuiText>{andThresholdText}</EuiText>
                                   {hasErrors && <EuiSpacer />}

x-pack/platform/plugins/private/watcher/public/index.scss

@@ -5,7 +5,6 @@
  * 2.0.
  */
 
-import './index.scss';
 import { WatcherUIPlugin } from './plugin';
 
 export const plugin = () => new WatcherUIPlugin();