github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source
This commit is contained in:
Nicolas Chaulet 2021-08-05 11:40:40 -04:00 • committed by GitHub
parent 39bd188818
commit 3438a70ec3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 120 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/plugins/kibana_react/public/code_editor/languages/index.ts
View file

@ -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 };

9
src/plugins/kibana_react/public/code_editor/languages/yaml/constants.ts Normal file
View file

@ -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';

12
src/plugins/kibana_react/public/code_editor/languages/yaml/index.ts Normal file
View file

@ -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 };

12
src/plugins/kibana_react/public/code_editor/languages/yaml/language.ts Normal file
View file

@ -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 };

3
src/plugins/kibana_react/public/code_editor/register_languages.ts
View file

@ -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);

1
typings/index.d.ts vendored
View file

@ -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';

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

@ -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':

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

@ -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>