[ResponseOps][Alerting] Elasticsearch Query Rule doesn't have 'dark mode' view for query (#138631)

* Changing code editor component

* Fixing test failures

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

x-pack/plugins/stack_alerts/public/alert_types/es_query/expression/es_query_expression.test.tsx

@@ -23,18 +23,11 @@ import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { EsQueryAlertParams, SearchType } from '../types';
 import { EsQueryExpression } from './es_query_expression';
 
-jest.mock('@kbn/kibana-react-plugin/public');
-jest.mock('@kbn/es-ui-shared-plugin/public', () => ({
-  XJson: {
-    useXJsonMode: jest.fn().mockReturnValue({
-      convertToJson: jest.fn(),
-      setXJson: jest.fn(),
-      xJson: jest.fn(),
-    }),
-  },
-  // Mocking EuiCodeEditor, which uses React Ace under the hood
+jest.mock('@kbn/kibana-react-plugin/public', () => ({
+  useKibana: jest.fn(),
+  // Mocking CodeEditor
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  EuiCodeEditor: (props: any) => (
+  CodeEditor: (props: any) => (
     <input
       data-test-subj="mockCodeEditor"
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -44,6 +37,15 @@ jest.mock('@kbn/es-ui-shared-plugin/public', () => ({
     />
   ),
 }));
+jest.mock('@kbn/es-ui-shared-plugin/public', () => ({
+  XJson: {
+    useXJsonMode: jest.fn().mockReturnValue({
+      convertToJson: jest.fn(),
+      setXJson: jest.fn(),
+      xJson: jest.fn(),
+    }),
+  },
+}));
 jest.mock('@kbn/triggers-actions-ui-plugin/public', () => {
   const original = jest.requireActual('@kbn/triggers-actions-ui-plugin/public');
   return {

x-pack/plugins/stack_alerts/public/alert_types/es_query/expression/es_query_expression.tsx

@@ -10,14 +10,11 @@ import { lastValueFrom } from 'rxjs';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 
-import { XJsonMode } from '@kbn/ace';
-import 'brace/theme/github';
-
 import { EuiFormRow, EuiLink, EuiSpacer, EuiTitle } from '@elastic/eui';
 import { DocLinksStart, HttpSetup } from '@kbn/core/public';
 
-import { EuiCodeEditor, XJson } from '@kbn/es-ui-shared-plugin/public';
-import { useKibana } from '@kbn/kibana-react-plugin/public';
+import { XJson } from '@kbn/es-ui-shared-plugin/public';
+import { CodeEditor, useKibana } from '@kbn/kibana-react-plugin/public';
 import { getFields, RuleTypeParamsExpressionProps } from '@kbn/triggers-actions-ui-plugin/public';
 import { parseDuration } from '@kbn/alerting-plugin/common';
 import { hasExpressionValidationErrors } from '../validation';
@@ -29,7 +26,6 @@ import { RuleCommonExpressions } from '../rule_common_expressions';
 import { totalHitsToNumber } from '../test_query_row';
 
 const { useXJsonMode } = XJson;
-const xJsonMode = new XJsonMode();
 
 interface KibanaDeps {
   http: HttpSetup;
@@ -206,20 +202,28 @@ export const EsQueryExpression: React.FC<
           </EuiLink>
         }
       >
-        <EuiCodeEditor
-          mode={xJsonMode}
+        <CodeEditor
+          languageId="xjson"
           width="100%"
           height="200px"
-          theme="github"
           data-test-subj="queryJsonEditor"
-          aria-label={i18n.translate('xpack.stackAlerts.esQuery.ui.queryEditor', {
-            defaultMessage: 'Elasticsearch query editor',
-          })}
           value={xJson}
           onChange={(xjson: string) => {
             setXJson(xjson);
             setParam('esQuery', convertToJson(xjson));
           }}
+          options={{
+            ariaLabel: i18n.translate('xpack.stackAlerts.esQuery.ui.queryEditor', {
+              defaultMessage: 'Elasticsearch query editor',
+            }),
+            wordWrap: 'off',
+            tabSize: 2,
+            lineNumbers: 'off',
+            lineNumbersMinChars: 0,
+            folding: false,
+            lineDecorationsWidth: 0,
+            overviewRulerBorder: false,
+          }}
         />
       </EuiFormRow>
 

x-pack/plugins/stack_alerts/public/alert_types/es_query/expression/expression.test.tsx

@@ -24,6 +24,24 @@ import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
 import { act } from 'react-dom/test-utils';
 import { ReactWrapper } from 'enzyme';
 
+jest.mock('@kbn/kibana-react-plugin/public', () => {
+  const original = jest.requireActual('@kbn/kibana-react-plugin/public');
+  return {
+    ...original,
+    // Mocking CodeEditor
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    CodeEditor: (props: any) => (
+      <input
+        data-test-subj="mockCodeEditor"
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        onChange={(syntheticEvent: any) => {
+          props.onChange(syntheticEvent.jsonString);
+        }}
+      />
+    ),
+  };
+});
+
 const defaultEsQueryRuleParams: EsQueryAlertParams<SearchType.esQuery> = {
   size: 100,
   thresholdComparator: '>',
@@ -188,7 +206,7 @@ describe('EsQueryAlertTypeExpression', () => {
     wrapper = await wrapper.update();
 
     expect(findTestSubject(wrapper, 'queryFormTypeChooserTitle').exists()).toBeFalsy();
-    expect(findTestSubject(wrapper, 'queryJsonEditor').exists()).toBeTruthy();
+    expect(wrapper.exists('[data-test-subj="queryJsonEditor"]')).toBeTruthy();
     expect(findTestSubject(wrapper, 'selectIndexExpression').exists()).toBeTruthy();
 
     await act(async () => {