[Fleet] Replace usages of EuiCodeEditor by CodeEditor (#107434) (#107778)

Co-authored-by: Nicolas Chaulet <nicolas.chaulet@elastic.co>

src/plugins/kibana_react/public/code_editor/languages/index.ts

@@ -9,5 +9,6 @@
 import { Lang as CssLang } from './css';
 import { Lang as HandlebarsLang } from './handlebars';
 import { Lang as MarkdownLang } from './markdown';
+import { Lang as YamlLang } from './yaml';
 
-export { CssLang, HandlebarsLang, MarkdownLang };
+export { CssLang, HandlebarsLang, MarkdownLang, YamlLang };

src/plugins/kibana_react/public/code_editor/languages/yaml/constants.ts

@@ -0,0 +1,9 @@
+/*
+ * 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.
+ */
+
+export const LANG = 'yaml';

src/plugins/kibana_react/public/code_editor/languages/yaml/index.ts

@@ -0,0 +1,12 @@
+/*
+ * 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 { LangModuleType } from '@kbn/monaco';
+import { languageConfiguration, lexerRules } from './language';
+import { LANG } from './constants';
+
+export const Lang: LangModuleType = { ID: LANG, languageConfiguration, lexerRules };

src/plugins/kibana_react/public/code_editor/languages/yaml/language.ts

@@ -0,0 +1,12 @@
+/*
+ * 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.
+ */
+
+/* eslint-disable @kbn/eslint/module_migration */
+import { conf, language } from 'monaco-editor/esm/vs/basic-languages/yaml/yaml';
+
+export { conf as languageConfiguration, language as lexerRules };

src/plugins/kibana_react/public/code_editor/register_languages.ts

@@ -6,8 +6,9 @@
  * Side Public License, v 1.
  */
 import { registerLanguage } from '@kbn/monaco';
-import { CssLang, HandlebarsLang, MarkdownLang } from './languages';
+import { CssLang, HandlebarsLang, MarkdownLang, YamlLang } from './languages';
 
 registerLanguage(CssLang);
 registerLanguage(HandlebarsLang);
 registerLanguage(MarkdownLang);
+registerLanguage(YamlLang);

typings/index.d.ts

@@ -37,3 +37,4 @@ declare module 'react-syntax-highlighter/dist/cjs/prism-light';
 // Monaco languages support
 declare module 'monaco-editor/esm/vs/basic-languages/markdown/markdown';
 declare module 'monaco-editor/esm/vs/basic-languages/css/css';
+declare module 'monaco-editor/esm/vs/basic-languages/yaml/yaml';

x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/package_policy_input_var_field.tsx

@@ -7,21 +7,20 @@
 
 import React, { useState, memo, useMemo } from 'react';
 import ReactMarkdown from 'react-markdown';
+import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import {
   EuiFormRow,
   EuiSwitch,
   EuiFieldText,
   EuiText,
-  EuiCodeEditor,
-  EuiTextArea,
   EuiFieldPassword,
+  EuiCodeBlock,
 } from '@elastic/eui';
 
 import type { RegistryVarsEntry } from '../../../../types';
+import { CodeEditor } from '../../../../../../../../../../src/plugins/kibana_react/public';
 
-import 'brace/mode/yaml';
-import 'brace/theme/textmate';
 import { MultiTextInput } from './multi_text_input';
 
 export const PackagePolicyInputVarField: React.FunctionComponent<{
@@ -52,26 +51,34 @@ export const PackagePolicyInputVarField: React.FunctionComponent<{
     switch (type) {
       case 'yaml':
         return frozen ? (
-          <EuiTextArea
-            className="ace_editor"
-            disabled
-            value={value}
-            style={{ height: '175px', padding: '4px', whiteSpace: 'pre', resize: 'none' }}
-          />
+          <EuiCodeBlock language="yaml" isCopyable={false} paddingSize="s">
+            <pre>{value}</pre>
+          </EuiCodeBlock>
         ) : (
-          <EuiCodeEditor
+          <CodeEditor
+            languageId="yaml"
             width="100%"
-            mode="yaml"
-            theme="textmate"
-            setOptions={{
-              minLines: 10,
-              maxLines: 30,
-              tabSize: 2,
-              showGutter: false,
-            }}
+            height="300px"
             value={value}
-            onChange={(newVal) => onChange(newVal)}
-            onBlur={() => setIsDirty(true)}
+            onChange={onChange}
+            options={{
+              minimap: {
+                enabled: false,
+              },
+              ariaLabel: i18n.translate('xpack.fleet.packagePolicyField.yamlCodeEditor', {
+                defaultMessage: 'YAML Code Editor',
+              }),
+              scrollBeyondLastLine: false,
+              wordWrap: 'off',
+              wrappingIndent: 'indent',
+              tabSize: 2,
+              // To avoid left margin
+              lineNumbers: 'off',
+              lineNumbersMinChars: 0,
+              glyphMargin: false,
+              folding: false,
+              lineDecorationsWidth: 0,
+            }}
           />
         );
       case 'bool':

x-pack/plugins/fleet/public/components/settings_flyout/index.tsx

@@ -6,6 +6,7 @@
  */
 
 import React, { useEffect, useCallback } from 'react';
+import styled from 'styled-components';
 import { i18n } from '@kbn/i18n';
 import {
   EuiFlyout,
@@ -21,9 +22,9 @@ import {
   EuiForm,
   EuiFormRow,
   EuiCode,
-  EuiCodeEditor,
   EuiLink,
   EuiPanel,
+  EuiTextColor,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiText } from '@elastic/eui';
@@ -39,13 +40,29 @@ import {
   sendPutOutput,
 } from '../../hooks';
 import { isDiffPathProtocol, normalizeHostsForAgents } from '../../../common';
+import { CodeEditor } from '../../../../../../src/plugins/kibana_react/public';
 
 import { SettingsConfirmModal } from './confirm_modal';
 import type { SettingsConfirmModalProps } from './confirm_modal';
 import { HostsInput } from './hosts_input';
 
-import 'brace/mode/yaml';
-import 'brace/theme/textmate';
+const CodeEditorContainer = styled.div`
+  min-height: 0;
+  position: relative;
+  height: 250px;
+`;
+
+const CodeEditorPlaceholder = styled(EuiTextColor).attrs((props) => ({
+  color: 'subdued',
+  size: 'xs',
+}))`
+  position: absolute;
+  top: 0;
+  right: 0;
+  // Matches monaco editor
+  font-family: Menlo, Monaco, 'Courier New', monospace;
+  pointer-events: none;
+`;
 
 const URL_REGEX = /^(https?):\/\/[^\s$.?#].[^\s]*$/gm;
 
@@ -361,21 +378,40 @@ export const SettingFlyout: React.FunctionComponent<Props> = ({ onClose }) => {
           })}
           fullWidth
         >
-          <EuiCodeEditor
-            width="100%"
-            mode="yaml"
-            theme="textmate"
-            placeholder="# YAML settings here will be added to the Elasticsearch output section of each policy"
-            setOptions={{
-              minLines: 10,
-              maxLines: 30,
-              tabSize: 2,
-              showGutter: false,
-              showPrintMargin: false,
-            }}
-            {...inputs.additionalYamlConfig.props}
-            onChange={inputs.additionalYamlConfig.setValue}
-          />
+          <CodeEditorContainer>
+            <CodeEditor
+              languageId="yaml"
+              width="100%"
+              height="250px"
+              value={inputs.additionalYamlConfig.value}
+              onChange={inputs.additionalYamlConfig.setValue}
+              options={{
+                minimap: {
+                  enabled: false,
+                },
+
+                ariaLabel: i18n.translate('xpack.fleet.settings.yamlCodeEditor', {
+                  defaultMessage: 'YAML Code Editor',
+                }),
+                scrollBeyondLastLine: false,
+                wordWrap: 'on',
+                wrappingIndent: 'indent',
+                automaticLayout: true,
+                tabSize: 2,
+                // To avoid left margin
+                lineNumbers: 'off',
+                lineNumbersMinChars: 0,
+                glyphMargin: false,
+                folding: false,
+                lineDecorationsWidth: 0,
+              }}
+            />
+            {(!inputs.additionalYamlConfig.value || inputs.additionalYamlConfig.value === '') && (
+              <CodeEditorPlaceholder>
+                {`# YAML settings here will be added to the Elasticsearch output section of each policy`}
+              </CodeEditorPlaceholder>
+            )}
+          </CodeEditorContainer>
         </EuiFormRow>
       </EuiPanel>
     </EuiForm>