[Console] Enable monaco by default

.buildkite/ftr_configs.yml

@@ -98,7 +98,8 @@ enabled:
   - test/api_integration/config.js
   - test/examples/config.js
   - test/functional/apps/bundles/config.ts
-  - test/functional/apps/console/config.ts
+  - test/functional/apps/console/monaco/config.ts
+  - test/functional/apps/console/ace/config.ts
   - test/functional/apps/context/config.ts
   - test/functional/apps/dashboard_elements/controls/common/config.ts
   - test/functional/apps/dashboard_elements/controls/options_list/config.ts

config/serverless.yml

@@ -105,6 +105,8 @@ xpack.index_management.enableDataStreamsStorageColumn: false
 xpack.index_management.enableMappingsSourceFieldSection: false
 # Disable toggle for enabling data retention in DSL form from Index Management UI
 xpack.index_management.enableTogglingDataRetention: false
+# Disable the Monaco migration in Console
+console.dev.enableMonaco: false
 
 # Keep deeplinks visible so that they are shown in the sidenav
 dev_tools.deeplinks.navLinkStatus: visible

packages/kbn-monaco/src/console/types.ts

@@ -15,7 +15,7 @@ export interface ParsedRequest {
   startOffset: number;
   endOffset?: number;
   method: string;
-  url: string;
+  url?: string;
   data?: Array<Record<string, unknown>>;
 }
 export interface ConsoleParserResult {

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

@@ -155,6 +155,8 @@ export interface CodeEditorProps {
    * Enables the editor to get disabled when pressing ESC to resolve focus trapping for accessibility.
    */
   accessibilityOverlayEnabled?: boolean;
+
+  dataTestSubj?: string;
 }
 
 export const CodeEditor: React.FC<CodeEditorProps> = ({
@@ -186,6 +188,7 @@ export const CodeEditor: React.FC<CodeEditorProps> = ({
   }),
   fitToContent,
   accessibilityOverlayEnabled = true,
+  dataTestSubj,
 }) => {
   const { colorMode, euiTheme } = useEuiTheme();
   const useDarkTheme = useDarkThemeProp ?? colorMode === 'DARK';
@@ -280,6 +283,7 @@ export const CodeEditor: React.FC<CodeEditorProps> = ({
 
     return (
       <EuiToolTip
+        data-test-subj="codeEditorAccessibilityOverlay"
         display="block"
         content={
           <>
@@ -485,7 +489,7 @@ export const CodeEditor: React.FC<CodeEditorProps> = ({
     <div
       css={styles.container}
       onKeyDown={onKeyDown}
-      data-test-subj="kibanaCodeEditor"
+      data-test-subj={dataTestSubj ?? 'kibanaCodeEditor'}
       className="kibanaCodeEditor"
     >
       {accessibilityOverlayEnabled && renderPrompt()}

src/plugins/console/public/application/containers/editor/monaco/monaco_editor.tsx

@@ -115,6 +115,7 @@ export const MonacoEditor = ({ initialTextValue }: EditorProps) => {
         width: 100%;
       `}
       ref={divRef}
+      data-test-subj="consoleMonacoEditorContainer"
     >
       <EuiFlexGroup
         className="conApp__editorActions"
@@ -151,6 +152,7 @@ export const MonacoEditor = ({ initialTextValue }: EditorProps) => {
         </EuiFlexItem>
       </EuiFlexGroup>
       <CodeEditor
+        dataTestSubj={'consoleMonacoEditor'}
         languageId={CONSOLE_LANG_ID}
         value={value}
         onChange={setValue}

src/plugins/console/public/application/containers/editor/monaco/monaco_editor_output.tsx

@@ -93,6 +93,7 @@ export const MonacoEditorOutput: FunctionComponent = () => {
         </label>
       </EuiScreenReaderOnly>
       <CodeEditor
+        dataTestSubj={'consoleMonacoOutput'}
         languageId={mode}
         value={value}
         fullWidth={true}

src/plugins/console/public/application/containers/editor/monaco/utils/requests_utils.ts

@@ -22,8 +22,8 @@ import { AdjustedParsedRequest } from '../types';
  * - the request body is stringified from an object using JSON.stringify
  */
 export const stringifyRequest = (parsedRequest: ParsedRequest): EditorRequest => {
-  const url = removeTrailingWhitespaces(parsedRequest.url);
-  const method = parsedRequest.method.toUpperCase();
+  const url = parsedRequest.url ? removeTrailingWhitespaces(parsedRequest.url) : '';
+  const method = parsedRequest.method?.toUpperCase() ?? '';
   const data = parsedRequest.data?.map((parsedData) => JSON.stringify(parsedData, null, 2));
   return { url, method, data: data ?? [] };
 };

src/plugins/console/public/application/containers/editor/monaco/utils/tokens_utils.ts

@@ -25,7 +25,7 @@ export const parseLine = (line: string): ParsedLineTokens => {
   // try to parse into method and url (split on whitespace)
   const parts = line.split(whitespacesRegex);
   // 1st part is the method
-  const method = parts[0];
+  const method = parts[0].toUpperCase();
   // 2nd part is the url
   const url = parts[1];
   // try to parse into url path and url params (split on question mark)

src/plugins/console/server/config.ts

@@ -31,7 +31,7 @@ const schemaLatest = schema.object(
         defaultValue: 'stack',
       }),
     }),
-    dev: schema.object({ enableMonaco: schema.boolean({ defaultValue: false }) }),
+    dev: schema.object({ enableMonaco: schema.boolean({ defaultValue: true }) }),
   },
   { defaultValue: undefined }
 );

test/functional/apps/console/_autocomplete.ts → test/functional/apps/console/ace/_autocomplete.ts

@@ -9,7 +9,7 @@
 import _ from 'lodash';
 import expect from '@kbn/expect';
 import { asyncForEach } from '@kbn/std';
-import { FtrProviderContext } from '../../ftr_provider_context';
+import { FtrProviderContext } from '../../../ftr_provider_context';
 
 export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const log = getService('log');

test/functional/apps/console/_comments.ts → test/functional/apps/console/ace/_comments.ts

@@ -8,7 +8,7 @@
 
 import expect from '@kbn/expect';
 import { asyncForEach } from '@kbn/std';
-import { FtrProviderContext } from '../../ftr_provider_context';
+import { FtrProviderContext } from '../../../ftr_provider_context';
 
 export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const log = getService('log');

test/functional/apps/console/_console.ts → test/functional/apps/console/ace/_console.ts

@@ -8,33 +8,8 @@
 
 import expect from '@kbn/expect';
 import { asyncForEach } from '@kbn/std';
-import { FtrProviderContext } from '../../ftr_provider_context';
-
-const DEFAULT_REQUEST = `
-# Welcome to the Dev Tools Console!
-#
-# You can use Console to explore the Elasticsearch API. See the \n  Elasticsearch API reference to learn more:
-# https://www.elastic.co/guide/en/elasticsearch/reference/current\n  /rest-apis.html
-#
-# Here are a few examples to get you started.
-
-
-# Create an index
-PUT /my-index
-
-
-# Add a document to my-index
-POST /my-index/_doc
-{
-    "id": "park_rocky-mountain",
-    "title": "Rocky Mountain",
-    "description": "Bisected north to south by the Continental \n      Divide, this portion of the Rockies has ecosystems varying \n      from over 150 riparian lakes to montane and subalpine forests \n      to treeless alpine tundra."
-}
-
-
-# Perform a search in my-index
-GET /my-index/_search?q="rocky mountain"
-`.trim();
+import { DEFAULT_INPUT_VALUE } from '@kbn/console-plugin/common/constants';
+import { FtrProviderContext } from '../../../ftr_provider_context';
 
 export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const retry = getService('retry');
@@ -58,7 +33,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await retry.try(async () => {
         const actualRequest = await PageObjects.console.getRequest();
         log.debug(actualRequest);
-        expect(actualRequest.trim()).to.eql(DEFAULT_REQUEST);
+        expect(actualRequest.replace(/\s/g, '')).to.eql(DEFAULT_INPUT_VALUE.replace(/\s/g, ''));
       });
     });
 

test/functional/apps/console/_console_ccs.ts → test/functional/apps/console/ace/_console_ccs.ts

@@ -7,7 +7,7 @@
  */
 
 import expect from '@kbn/expect';
-import { FtrProviderContext } from '../../ftr_provider_context';
+import { FtrProviderContext } from '../../../ftr_provider_context';
 
 export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const retry = getService('retry');

test/functional/apps/console/_context_menu.ts → test/functional/apps/console/ace/_context_menu.ts

@@ -7,7 +7,7 @@
  */
 
 import expect from '@kbn/expect';
-import { FtrProviderContext } from '../../ftr_provider_context';
+import { FtrProviderContext } from '../../../ftr_provider_context';
 
 export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const log = getService('log');

test/functional/apps/console/_misc_console_behavior.ts → test/functional/apps/console/ace/_misc_console_behavior.ts

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 import expect from '@kbn/expect';
-import { FtrProviderContext } from '../../ftr_provider_context';
+import { FtrProviderContext } from '../../../ftr_provider_context';
 
 export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const retry = getService('retry');

test/functional/apps/console/_settings.ts → test/functional/apps/console/ace/_settings.ts

@@ -7,7 +7,7 @@
  */
 
 import expect from '@kbn/expect';
-import { FtrProviderContext } from '../../ftr_provider_context';
+import { FtrProviderContext } from '../../../ftr_provider_context';
 
 export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const log = getService('log');

test/functional/apps/console/_text_input.ts → test/functional/apps/console/ace/_text_input.ts

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 import expect from '@kbn/expect';
-import { FtrProviderContext } from '../../ftr_provider_context';
+import { FtrProviderContext } from '../../../ftr_provider_context';
 
 export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const retry = getService('retry');

test/functional/apps/console/_variables.ts → test/functional/apps/console/ace/_variables.ts

@@ -7,7 +7,7 @@
  */
 
 import expect from '@kbn/expect';
-import { FtrProviderContext } from '../../ftr_provider_context';
+import { FtrProviderContext } from '../../../ftr_provider_context';
 
 export default ({ getService, getPageObjects }: FtrProviderContext) => {
   const retry = getService('retry');

test/functional/apps/console/_vector_tile.ts → test/functional/apps/console/ace/_vector_tile.ts

@@ -7,7 +7,7 @@
  */
 
 import expect from '@kbn/expect';
-import { FtrProviderContext } from '../../ftr_provider_context';
+import { FtrProviderContext } from '../../../ftr_provider_context';
 
 export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const PageObjects = getPageObjects(['common', 'console', 'header', 'home']);

test/functional/apps/console/_xjson.ts → test/functional/apps/console/ace/_xjson.ts

@@ -8,7 +8,7 @@
 
 import expect from '@kbn/expect';
 import { rgbToHex } from '@elastic/eui';
-import { FtrProviderContext } from '../../ftr_provider_context';
+import { FtrProviderContext } from '../../../ftr_provider_context';
 
 export default ({ getService, getPageObjects }: FtrProviderContext) => {
   const retry = getService('retry');

test/functional/apps/console/ace/config.ts

@@ -0,0 +1,27 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { FtrConfigProviderContext } from '@kbn/test';
+import { configureHTTP2 } from '../../../../common/configure_http2';
+
+export default async function ({ readConfigFile }: FtrConfigProviderContext) {
+  const functionalConfig = await readConfigFile(require.resolve('../../../config.base.js'));
+
+  return configureHTTP2({
+    ...functionalConfig.getAll(),
+    testFiles: [require.resolve('.')],
+    kbnTestServer: {
+      ...functionalConfig.get('kbnTestServer'),
+      serverArgs: [
+        ...functionalConfig.get('kbnTestServer.serverArgs'),
+        // disabling the monaco editor to run tests for ace
+        `--console.dev.enableMonaco=false`,
+      ],
+    },
+  });
+}

test/functional/apps/console/index.js → test/functional/apps/console/ace/index.ts

@@ -6,7 +6,9 @@
  * Side Public License, v 1.
  */
 
-export default function ({ getService, loadTestFile }) {
+import { FtrProviderContext } from '../../../ftr_provider_context';
+
+export default function ({ getService, loadTestFile }: FtrProviderContext) {
   const browser = getService('browser');
   const config = getService('config');