diff --git a/src/platform/plugins/shared/workflows_management/public/widgets/workflow_yaml_editor/ui/editor_settings_popover.tsx b/src/platform/plugins/shared/workflows_management/public/widgets/workflow_yaml_editor/ui/editor_settings_popover.tsx new file mode 100644 index 0000000000000..5e7a070f7a453 --- /dev/null +++ b/src/platform/plugins/shared/workflows_management/public/widgets/workflow_yaml_editor/ui/editor_settings_popover.tsx @@ -0,0 +1,119 @@ +/* + * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public + * License v3.0 only", or the "Server Side Public License, v 1". + */ + +import { + EuiButtonIcon, + EuiCheckbox, + EuiFlexGroup, + EuiFlexItem, + EuiPopover, + EuiPopoverTitle, + EuiToolTip, + useEuiTheme, + useGeneratedHtmlId, +} from '@elastic/eui'; +import React, { useCallback, useState } from 'react'; +import { i18n } from '@kbn/i18n'; +import type { monaco } from '@kbn/monaco'; + +interface EditorSettingsPopoverProps { + editorRef: React.MutableRefObject; +} + +export function EditorSettingsPopover({ editorRef }: EditorSettingsPopoverProps) { + const { euiTheme } = useEuiTheme(); + const [isOpen, setIsOpen] = useState(false); + const [showIndentGuides, setShowIndentGuides] = useState(true); + const [showWhitespace, setShowWhitespace] = useState(false); + + const indentGuidesCheckboxId = useGeneratedHtmlId({ prefix: 'wf-editor-setting-indent-guides' }); + const whitespaceCheckboxId = useGeneratedHtmlId({ prefix: 'wf-editor-setting-whitespace' }); + const popoverTitleId = useGeneratedHtmlId({ prefix: 'wf-editor-settings-title' }); + + const handleIndentGuidesChange = useCallback( + (e: React.ChangeEvent) => { + const enabled = e.target.checked; + setShowIndentGuides(enabled); + editorRef.current?.updateOptions({ + guides: { indentation: enabled }, + }); + }, + [editorRef] + ); + + const handleWhitespaceChange = useCallback( + (e: React.ChangeEvent) => { + const enabled = e.target.checked; + setShowWhitespace(enabled); + editorRef.current?.updateOptions({ + renderWhitespace: enabled ? 'all' : 'none', + }); + }, + [editorRef] + ); + + const label = i18n.translate('workflows.yamlEditor.editorSettings.label', { + defaultMessage: 'Editor settings', + }); + + return ( + setIsOpen(false)} + anchorPosition="upRight" + panelPaddingSize="none" + button={ + + setIsOpen(!isOpen)} + aria-label={label} + color="primary" + /> + + } + > + + {label} + + + + + + + + + + + ); +} diff --git a/src/platform/plugins/shared/workflows_management/public/widgets/workflow_yaml_editor/ui/workflow_yaml_editor.tsx b/src/platform/plugins/shared/workflows_management/public/widgets/workflow_yaml_editor/ui/workflow_yaml_editor.tsx index c49c32807b8b8..f69b89db18a86 100644 --- a/src/platform/plugins/shared/workflows_management/public/widgets/workflow_yaml_editor/ui/workflow_yaml_editor.tsx +++ b/src/platform/plugins/shared/workflows_management/public/widgets/workflow_yaml_editor/ui/workflow_yaml_editor.tsx @@ -30,6 +30,7 @@ import { useWorkflowIdDecorations, } from './decorations'; import { DocumentationLink } from './documentation_link'; +import { EditorSettingsPopover } from './editor_settings_popover'; import type { ExtraAction } from './extra_actions_bar'; import { ExtraActionsBar } from './extra_actions_bar'; import { useAgentBuilderIntegration } from './hooks/use_agent_builder_integration'; @@ -120,6 +121,7 @@ const editorOptions: monaco.editor.IStandaloneEditorConstructionOptions = { lineHeight: 23, // default ~21px + 2px renderWhitespace: 'none', roundedSelection: false, + guides: { indentation: true }, wordWrap: 'on', wordWrapColumn: 80, wrappingIndent: 'indent', @@ -650,8 +652,13 @@ export const WorkflowYAMLEditor = ({ content: , showInReadOnly: true, }, + { + id: 'editor-settings', + content: , + showInReadOnly: true, + }, ], - [openActionsPopover] + [openActionsPopover, editorRef] ); // These were triggering rerendering of the actions containers on every scroll, because they were