[ES|QL] Use emotion instead of scss in the editor (#208003)

## Summary

Part of https://github.com/elastic/kibana-team/issues/1417

Replaces scss with emotion in the ES|QL editor

---------

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

src/platform/packages/private/kbn-esql-editor/src/editor_footer/errors_warnings_popover.tsx

@@ -17,6 +17,7 @@ import {
   EuiPopover,
   EuiDescriptionList,
   EuiDescriptionListDescription,
+  euiTextBreakWord,
 } from '@elastic/eui';
 import { css } from '@emotion/react';
 import { css as classNameCss } from '@emotion/css';
@@ -86,7 +87,7 @@ function ErrorsWarningsContent({
                     </EuiFlexItem>
                   </EuiFlexGroup>
                 </EuiFlexItem>
-                <EuiFlexItem grow={false} className="ESQLEditor_errorMessage">
+                <EuiFlexItem grow={false} css={euiTextBreakWord()}>
                   {item.message}
                 </EuiFlexItem>
               </EuiFlexGroup>

src/platform/packages/private/kbn-esql-editor/src/esql_editor.tsx

@@ -44,6 +44,7 @@ import {
   useDebounceWithOptions,
   onKeyDownResizeHandler,
   onMouseDownResizeHandler,
+  getEditorOverwrites,
   type MonacoMessage,
 } from './helpers';
 import { addQueriesToCache } from './history_local_storage';
@@ -56,8 +57,6 @@ import {
 } from './esql_editor.styles';
 import type { ESQLEditorProps, ESQLEditorDeps } from './types';
 
-import './overwrite.scss';
-
 // for editor width smaller than this value we want to start hiding some text
 const BREAKPOINT_WIDTH = 540;
 
@@ -106,7 +105,7 @@ export const ESQLEditor = memo(function ESQLEditor({
 }: ESQLEditorProps) {
   const popoverRef = useRef<HTMLDivElement>(null);
   const datePickerOpenStatusRef = useRef<boolean>(false);
-  const { euiTheme } = useEuiTheme();
+  const theme = useEuiTheme();
   const kibana = useKibana<ESQLEditorDeps>();
   const {
     dataViews,
@@ -314,7 +313,7 @@ export const ESQLEditor = memo(function ESQLEditor({
   });
 
   const styles = esqlEditorStyles(
-    euiTheme,
+    theme.euiTheme,
     editorHeight,
     Boolean(editorMessages.errors.length),
     Boolean(editorMessages.warnings.length),
@@ -686,7 +685,7 @@ export const ESQLEditor = memo(function ESQLEditor({
           responsive={false}
           justifyContent="flexEnd"
           css={css`
-            padding: ${euiTheme.size.s};
+            padding: ${theme.euiTheme.size.s};
           `}
         >
           <EuiFlexItem grow={false}>
@@ -730,6 +729,7 @@ export const ESQLEditor = memo(function ESQLEditor({
               <div css={styles.editorContainer}>
                 <CodeEditor
                   languageId={ESQL_LANG_ID}
+                  classNameCss={getEditorOverwrites(theme)}
                   value={code}
                   options={codeEditorOptions}
                   width="100%"
@@ -859,8 +859,8 @@ export const ESQLEditor = memo(function ESQLEditor({
             tabIndex={0}
             style={{
               ...popoverPosition,
-              backgroundColor: euiTheme.colors.emptyShade,
-              borderRadius: euiTheme.border.radius.small,
+              backgroundColor: theme.euiTheme.colors.emptyShade,
+              borderRadius: theme.euiTheme.border.radius.small,
               position: 'absolute',
               overflow: 'auto',
             }}

src/platform/packages/private/kbn-esql-editor/src/helpers.ts

@@ -9,6 +9,8 @@
 
 import { useRef } from 'react';
 import useDebounce from 'react-use/lib/useDebounce';
+import { UseEuiTheme, euiShadow } from '@elastic/eui';
+import { css } from '@emotion/react';
 import { monaco } from '@kbn/monaco';
 import type { CoreStart } from '@kbn/core/public';
 import { i18n } from '@kbn/i18n';
@@ -310,3 +312,34 @@ export const onKeyDownResizeHandler = (
     }
   }
 };
+
+export const getEditorOverwrites = (theme: UseEuiTheme<{}>) => {
+  return css`
+    .monaco-hover {
+      display: block !important;
+    }
+    .margin-view-overlays .line-numbers {
+      color: ${theme.euiTheme.colors.textDisabled};
+    }
+    .current-line ~ .line-numbers {
+      color: ${theme.euiTheme.colors.textSubdued};
+    }
+
+    .suggest-widget,
+    .suggest-details-container {
+      border-radius: ${theme.euiTheme.border.radius.medium};
+      ${euiShadow(theme, 'l')}
+    }
+
+    .suggest-details-container {
+      background-color: ${theme.euiTheme.colors.backgroundBasePlain};
+      line-height: 1.5rem;
+    }
+    .suggest-details {
+      padding-left: ${theme.euiTheme.size.s};
+    }
+    .monaco-list .monaco-scrollable-element .monaco-list-row.focused {
+      border-radius: ${theme.euiTheme.border.radius.medium};
+    }
+  `;
+};

src/platform/packages/private/kbn-esql-editor/src/overwrite.scss

@@ -1,39 +0,0 @@
-/* Editor styles for any layout mode */
-/* NOTE: Much of this is overriding Monaco styles so the specificity is intentional */
-
-.ESQLEditor .monaco-editor .monaco-hover {
-  display: block !important;
-}
-
-.ESQLEditor .monaco-editor .margin-view-overlays .line-numbers {
-  color: $euiColorDisabledText;
-}
-
-// Currently focused line(s)
-.ESQLEditor .monaco-editor .current-line ~ .line-numbers {
-  color: $euiTextSubduedColor;
-}
-
-// Suggest (autocomplete) menu
-.ESQLEditor .monaco-editor .suggest-widget, .ESQLEditor .monaco-editor .suggest-details-container {
-  @include euiBottomShadow;
-  border-radius: $euiBorderRadius;
-}
-
-.ESQLEditor .monaco-editor .suggest-details-container {
-  background-color: $euiColorEmptyShade;
-  line-height: 1.5rem;
-}
-
-.ESQLEditor_errorMessage {
-  @include euiTextBreakWord;
-}
-
-// Space between the autocomplete menu and expanded suggestion details
-.ESQLEditor .monaco-editor .suggest-details {
-  padding-left: $euiSizeS;
-}
-
-.ESQLEditor .monaco-editor .monaco-list .monaco-scrollable-element .monaco-list-row.focused {
-  border-radius: $euiBorderRadius;
-}

src/platform/packages/shared/shared-ux/code_editor/impl/code_editor.tsx

@@ -28,7 +28,7 @@ import {
 } from '@kbn/monaco';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { css } from '@emotion/react';
+import { css, Interpolation, Theme } from '@emotion/react';
 import {
   MonacoEditor as ReactMonacoEditor,
   type MonacoEditorProps as ReactMonacoEditorProps,
@@ -157,6 +157,11 @@ export interface CodeEditorProps {
   enableFindAction?: boolean;
 
   dataTestSubj?: string;
+
+  /**
+   * Custom CSS class to apply to the container
+   */
+  classNameCss?: Interpolation<Theme>;
 }
 
 export const CodeEditor: React.FC<CodeEditorProps> = ({
@@ -189,6 +194,7 @@ export const CodeEditor: React.FC<CodeEditorProps> = ({
   accessibilityOverlayEnabled = true,
   enableFindAction,
   dataTestSubj,
+  classNameCss,
 }) => {
   const { euiTheme } = useEuiTheme();
 
@@ -490,7 +496,7 @@ export const CodeEditor: React.FC<CodeEditorProps> = ({
 
   return (
     <div
-      css={styles.container}
+      css={[styles.container, classNameCss]}
       onKeyDown={onKeyDown}
       data-test-subj={dataTestSubj ?? 'kibanaCodeEditor'}
       className="kibanaCodeEditor"