[Console] Migrate SCSS to Emotion (#236377)

Addresses #205027

• Migrate Console + Embeddable UI to emotion

### Screenshots (Before | After)

<img width="3201" height="1401" alt="image"
src="https://github.com/user-attachments/assets/e48681f0-e356-4953-8884-6481bd59695e"
/>

<img width="3196" height="1398" alt="image"
src="https://github.com/user-attachments/assets/846d90bd-ca38-4f1f-8a80-bf7e6c082d7a"
/>

<img width="3199" height="1385" alt="image"
src="https://github.com/user-attachments/assets/b3a16f27-9dd5-4597-a913-6f285a0494da"
/>



<img width="3195" height="1398" alt="image"
src="https://github.com/user-attachments/assets/86fe78c9-aba2-4c70-ad4e-e5e5d4fe7f92"
/>

<img width="3203" height="1405" alt="image"
src="https://github.com/user-attachments/assets/ee2eb974-0809-467b-82f2-5d9b45c497d9"
/>

<img width="3204" height="1393" alt="image"
src="https://github.com/user-attachments/assets/45b38019-6288-4170-a7b3-7b9fae41327f"
/>

<img width="3205" height="1397" alt="image"
src="https://github.com/user-attachments/assets/e0af4f9e-46ae-4689-928a-85b50658fbfe"
/>

<img width="3199" height="1395" alt="image"
src="https://github.com/user-attachments/assets/4a3cdb9b-3649-4637-ac57-e50e763d6dd8"
/>

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

Author: kapral18

src/platform/plugins/shared/console/public/application/components/editor_content_spinner.tsx

@@ -9,11 +9,23 @@
 
 import type { FunctionComponent } from 'react';
 import React from 'react';
-import { EuiLoadingSpinner, EuiPageSection } from '@elastic/eui';
+import { EuiLoadingSpinner, EuiPageSection, useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
+
+const useStyles = () => {
+  const { euiTheme } = useEuiTheme();
+  return {
+    editorSpinner: css`
+      width: 100%;
+      background-color: ${euiTheme.colors.backgroundBaseSubdued};
+    `,
+  };
+};
 
 export const EditorContentSpinner: FunctionComponent = () => {
+  const styles = useStyles();
   return (
-    <EuiPageSection alignment="center" grow={true} className="conApp__editor__spinner">
+    <EuiPageSection alignment="center" grow={true} css={styles.editorSpinner}>
       <EuiLoadingSpinner size="xxl" />
     </EuiPageSection>
   );

src/platform/plugins/shared/console/public/application/components/help_popover.tsx

@@ -34,6 +34,10 @@ const styles = {
       background: transparent;
     }
   `,
+
+  fixedWidthText: css`
+    width: 300px;
+  `,
 };
 
 export const HelpPopover = ({ button, isOpen, closePopover, resetTour }: HelpPopoverProps) => {
@@ -117,7 +121,7 @@ export const HelpPopover = ({ button, isOpen, closePopover, resetTour }: HelpPop
 
         <EuiSpacer size="s" />
 
-        <EuiText css={{ width: 300 }} color="subdued" size="s">
+        <EuiText css={styles.fixedWidthText} color="subdued" size="s">
           <p>
             {i18n.translate('console.helpPopover.description', {
               defaultMessage:

src/platform/plugins/shared/console/public/application/components/settings/settings_editor.tsx

@@ -21,12 +21,19 @@ import {
   EuiSpacer,
   EuiText,
 } from '@elastic/eui';
+import { css } from '@emotion/react';
 
 import { SettingsGroup } from './settings_group';
 import { SettingsFormRow } from './settings_form_row';
 import type { DevToolsSettings } from '../../../services';
 import type { EsHostService } from '../../lib';
 
+const styles = {
+  minWidthControl: css`
+    min-width: 220px;
+  `,
+};
+
 const DEBOUNCE_DELAY = 500;
 const ON_LABEL = i18n.translate('console.settingsPage.onLabel', { defaultMessage: 'On' });
 const OFF_LABEL = i18n.translate('console.settingsPage.offLabel', { defaultMessage: 'Off' });
@@ -268,7 +275,7 @@ export const SettingsEditor = (props: Props) => {
         })}
       >
         <EuiSuperSelect
-          css={{ minWidth: '220px' }}
+          css={styles.minWidthControl}
           compressed
           disabled={availableHosts.length < 2}
           options={availableHosts.map((host) => ({
@@ -292,7 +299,7 @@ export const SettingsEditor = (props: Props) => {
         })}
       >
         <EuiFieldNumber
-          css={{ minWidth: '220px' }}
+          css={styles.minWidthControl}
           compressed
           data-test-subj="setting-font-size-input"
           value={fontSize}
@@ -370,7 +377,7 @@ export const SettingsEditor = (props: Props) => {
             })}
           >
             <EuiSuperSelect
-              css={{ minWidth: '220px' }}
+              css={styles.minWidthControl}
               compressed
               options={intervalOptions}
               valueOfSelected={pollInterval.toString()}

src/platform/plugins/shared/console/public/application/components/variables/variables_editor.tsx

@@ -25,6 +25,7 @@ import {
   EuiToolTip,
   type EuiBasicTableColumn,
 } from '@elastic/eui';
+import { css } from '@emotion/react';
 
 import type { NotificationsStart } from '@kbn/core/public';
 import { useServicesContext } from '../../contexts';
@@ -63,6 +64,14 @@ const copyToClipboard = async (text: string, notifications: Pick<NotificationsSt
   }
 };
 
+const styles = {
+  conVariablesTable: css`
+    .euiTableRow-isExpandedRow .euiTableCellContent {
+      padding: 0;
+    }
+  `,
+};
+
 export const VariablesEditor = (props: Props) => {
   const isMounted = useRef(false);
   const [isAddingVariable, setIsAddingVariable] = useState(false);
@@ -256,7 +265,7 @@ export const VariablesEditor = (props: Props) => {
         columns={columns}
         itemId="id"
         responsiveBreakpoint={false}
-        className="conVariablesTable"
+        css={styles.conVariablesTable}
         data-test-subj="variablesTable"
         itemIdToExpandedRowMap={itemIdToExpandedRowMap}
         noItemsMessage={i18n.translate('console.variablesPage.table.noItemsMessage', {

src/platform/plugins/shared/console/public/application/components/variables/variables_editor_form.tsx

@@ -21,13 +21,20 @@ import {
   EuiPanel,
   EuiButtonEmpty,
 } from '@elastic/eui';
+import { css } from '@emotion/react';
 
 import type { FieldConfig, FormConfig, ValidationFuncArg } from '../../../shared_imports';
 import { useForm, Form, UseField, TextField, fieldValidators } from '../../../shared_imports';
 
 import { type DevToolsVariable } from './types';
 import { isValidVariableName } from './utils';
 
+const styles = {
+  fullWidthPanel: css`
+    width: 100%;
+  `,
+};
+
 export interface VariableEditorFormProps {
   onSubmit: (data: DevToolsVariable) => void;
   onCancel: () => void;
@@ -98,7 +105,7 @@ export const VariableEditorForm = (props: VariableEditorFormProps) => {
         hasShadow={false}
         borderRadius="none"
         grow={false}
-        css={{ width: '100%' }}
+        css={styles.fullWidthPanel}
       >
         <EuiTitle size="xs">
           <h2>

src/platform/plugins/shared/console/public/application/containers/config/config.tsx

@@ -15,10 +15,17 @@ import {
   EuiSpacer,
   useIsWithinBreakpoints,
 } from '@elastic/eui';
+import { css } from '@emotion/react';
 
 import { Settings } from './settings';
 import { Variables } from './variables';
 
+const styles = {
+  fullHeightPanel: css`
+    height: 100%;
+  `,
+};
+
 export function Config() {
   const isVerticalLayout = useIsWithinBreakpoints(['xs', 's', 'm']);
 
@@ -28,7 +35,7 @@ export function Config() {
       paddingSize="l"
       hasShadow={false}
       borderRadius="none"
-      css={{ height: '100%' }}
+      css={styles.fullHeightPanel}
       data-test-subj="consoleConfigPanel"
     >
       <EuiFlexGroup

src/platform/plugins/shared/console/public/application/containers/editor/components/context_menu/context_menu.tsx

@@ -52,7 +52,9 @@ const styles = {
   button: css`
     &:hover {
       text-decoration: none !important;
-      .languageSelector {
+
+      /* Target the language selector when the button is hovered */
+      .consoleEditorContextMenu__languageSelector {
         text-decoration: underline;
       }
     }
@@ -251,7 +253,12 @@ export const ContextMenu = ({
     >
       <EuiFlexGroup alignItems="center">
         <EuiFlexItem>
-          <EuiFlexGroup gutterSize="xs" alignItems="center" className="languageSelector">
+          <EuiFlexGroup
+            gutterSize="xs"
+            alignItems="center"
+            className="consoleEditorContextMenu__languageSelector"
+            data-test-subj="language-selector"
+          >
             <EuiFlexItem grow={false}>
               <FormattedMessage
                 tagName="span"

src/platform/plugins/shared/console/public/application/containers/editor/components/context_menu/language_selector_modal.tsx

@@ -22,10 +22,17 @@ import {
   EuiLink,
   EuiTextColor,
 } from '@elastic/eui';
+import { css } from '@emotion/react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { AVAILABLE_LANGUAGES } from '../../../../../../common/constants';
 
+const styles = {
+  constrainedSelectable: css`
+    max-width: 550px;
+  `,
+};
+
 interface Props {
   closeModal: () => void;
   onSubmit: (language: string) => void;
@@ -113,7 +120,7 @@ export const LanguageSelectorModal = ({
 
       <EuiModalBody>
         <EuiSelectable
-          css={{ maxWidth: 550 }}
+          css={styles.constrainedSelectable}
           options={optionsList as EuiSelectableOption[]}
           onChange={(changedOptions) => setOptions(changedOptions)}
           singleSelection="always"

src/platform/plugins/shared/console/public/application/containers/editor/editor.tsx

@@ -8,6 +8,7 @@
  */
 
 import React, { useCallback, memo, useEffect, useState } from 'react';
+import { css } from '@emotion/react';
 import { debounce } from 'lodash';
 import {
   EuiProgress,
@@ -39,11 +40,47 @@ import {
 import { MonacoEditor } from './monaco_editor';
 import { MonacoEditorOutput } from './monaco_editor_output';
 import { getResponseWithMostSevereStatusCode } from '../../../lib/utils';
+import { consoleEditorPanelStyles, useResizerButtonStyles } from '../styles';
 
 const INITIAL_PANEL_SIZE = 50;
 const PANEL_MIN_SIZE = '20%';
 const DEBOUNCE_DELAY = 500;
 
+const useStyles = () => {
+  const { euiTheme } = useEuiTheme();
+
+  return {
+    consoleEditorPanel: consoleEditorPanelStyles,
+
+    requestProgressBarContainer: css`
+      position: relative;
+      z-index: ${euiTheme.levels.menu};
+    `,
+
+    resizerButton: useResizerButtonStyles(),
+
+    // Consolidated styles for editor panels with positioning
+    editorPanelPositioned: css`
+      top: 0;
+      height: calc(100% - 40px);
+    `,
+
+    outputPanelCentered: css`
+      align-content: center;
+      top: 0;
+      height: calc(100% - 40px);
+    `,
+
+    actionsPanelWithBackground: css`
+      background-color: ${euiTheme.colors.backgroundBasePlain};
+    `,
+
+    fullHeightPanel: css`
+      height: 100%;
+    `,
+  };
+};
+
 interface Props {
   loading: boolean;
   inputEditorValue: string;
@@ -54,7 +91,7 @@ export const Editor = memo(({ loading, inputEditorValue, setInputEditorValue }:
   const {
     services: { storage, objectStorageClient },
   } = useServicesContext();
-  const { euiTheme } = useEuiTheme();
+  const styles = useStyles();
 
   const { currentTextObject } = useEditorReadContext();
 
@@ -131,12 +168,12 @@ export const Editor = memo(({ loading, inputEditorValue, setInputEditorValue }:
   return (
     <>
       {fetchingAutocompleteEntities ? (
-        <div className="conApp__requestProgressBarContainer">
+        <div css={styles.requestProgressBarContainer}>
           <EuiProgress size="xs" color="accent" position="absolute" />
         </div>
       ) : null}
       <EuiResizableContainer
-        css={{ height: '100%' }}
+        css={styles.fullHeightPanel}
         direction={isVerticalLayout ? 'vertical' : 'horizontal'}
         onPanelWidthChange={(sizes) => onPanelSizeChange(sizes)}
         data-test-subj="consoleEditorContainer"
@@ -153,13 +190,12 @@ export const Editor = memo(({ loading, inputEditorValue, setInputEditorValue }:
                 grow={true}
                 borderRadius="none"
                 hasShadow={false}
-                css={{ height: '100%' }}
+                css={styles.fullHeightPanel}
               >
                 <EuiSplitPanel.Inner
                   paddingSize="none"
                   grow={true}
-                  className="consoleEditorPanel"
-                  css={{ top: 0, height: 'calc(100% - 40px)' }}
+                  css={[styles.consoleEditorPanel, styles.editorPanelPositioned]}
                 >
                   {loading ? (
                     <EditorContentSpinner />
@@ -177,7 +213,7 @@ export const Editor = memo(({ loading, inputEditorValue, setInputEditorValue }:
                     grow={false}
                     paddingSize="s"
                     color="subdued"
-                    className="consoleEditorPanel"
+                    css={styles.consoleEditorPanel}
                   >
                     <EuiButtonEmpty
                       size="xs"
@@ -197,7 +233,7 @@ export const Editor = memo(({ loading, inputEditorValue, setInputEditorValue }:
             </EuiResizablePanel>
 
             <EuiResizableButton
-              className="conApp__resizerButton"
+              css={styles.resizerButton}
               aria-label={i18n.translate('console.editor.adjustPanelSizeAriaLabel', {
                 defaultMessage: "Press left/right to adjust panels' sizes",
               })}
@@ -209,11 +245,14 @@ export const Editor = memo(({ loading, inputEditorValue, setInputEditorValue }:
               tabIndex={0}
               paddingSize="none"
             >
-              <EuiSplitPanel.Outer borderRadius="none" hasShadow={false} css={{ height: '100%' }}>
+              <EuiSplitPanel.Outer
+                borderRadius="none"
+                hasShadow={false}
+                css={styles.fullHeightPanel}
+              >
                 <EuiSplitPanel.Inner
                   paddingSize="none"
-                  css={{ alignContent: 'center', top: 0, height: 'calc(100% - 40px)' }}
-                  className="consoleEditorPanel"
+                  css={[styles.consoleEditorPanel, styles.outputPanelCentered]}
                 >
                   {data ? (
                     <MonacoEditorOutput />
@@ -228,10 +267,7 @@ export const Editor = memo(({ loading, inputEditorValue, setInputEditorValue }:
                   <EuiSplitPanel.Inner
                     grow={false}
                     paddingSize="s"
-                    css={{
-                      backgroundColor: euiTheme.colors.backgroundBasePlain,
-                    }}
-                    className="consoleEditorPanel"
+                    css={[styles.consoleEditorPanel, styles.actionsPanelWithBackground]}
                   >
                     <EuiFlexGroup gutterSize="none" responsive={false}>
                       <EuiFlexItem grow={false}>