From 1b0c095ad3d6bf814a928898346cfd6483777794 Mon Sep 17 00:00:00 2001 From: Stratoula Kalafateli Date: Wed, 6 Sep 2023 10:44:30 +0300 Subject: [PATCH] ES|QL wrap with pipes (#165598) ## Summary Atm the wrap button is not very useful on the extended mode of the ES|QL editor. We would like to give the user the ability to wrap/unwrap based on the pipes. ![esql](https://github.com/elastic/kibana/assets/17003240/6db92dea-69b1-4344-b67e-a44759e8b2e6) ### Checklist - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios --- .../kbn-text-based-editor/src/helpers.test.ts | 25 ++++++++++++++++- packages/kbn-text-based-editor/src/helpers.ts | 8 ++++++ .../src/text_based_languages_editor.tsx | 27 +++++++++++++++---- 3 files changed, 54 insertions(+), 6 deletions(-) diff --git a/packages/kbn-text-based-editor/src/helpers.test.ts b/packages/kbn-text-based-editor/src/helpers.test.ts index 74c2387fde2fa..5f1546ccc138e 100644 --- a/packages/kbn-text-based-editor/src/helpers.test.ts +++ b/packages/kbn-text-based-editor/src/helpers.test.ts @@ -6,7 +6,7 @@ * Side Public License, v 1. */ -import { parseErrors, parseWarning, getInlineEditorText } from './helpers'; +import { parseErrors, parseWarning, getInlineEditorText, getWrappedInPipesCode } from './helpers'; describe('helpers', function () { describe('parseErrors', function () { @@ -136,4 +136,27 @@ describe('helpers', function () { ); }); }); + + describe('getWrappedInPipesCode', function () { + it('should return the code wrapped', function () { + const code = getWrappedInPipesCode('FROM index1 | keep field1, field2 | order field1', false); + expect(code).toEqual('FROM index1\n| keep field1, field2\n| order field1'); + }); + + it('should return the code unwrapped', function () { + const code = getWrappedInPipesCode( + 'FROM index1 \n| keep field1, field2 \n| order field1', + true + ); + expect(code).toEqual('FROM index1 | keep field1, field2 | order field1'); + }); + + it('should return the code unwrapped and trimmed', function () { + const code = getWrappedInPipesCode( + 'FROM index1 \n| keep field1, field2 \n| order field1', + true + ); + expect(code).toEqual('FROM index1 | keep field1, field2 | order field1'); + }); + }); }); diff --git a/packages/kbn-text-based-editor/src/helpers.ts b/packages/kbn-text-based-editor/src/helpers.ts index ca5e3d2fca663..fd7c9c2f9406d 100644 --- a/packages/kbn-text-based-editor/src/helpers.ts +++ b/packages/kbn-text-based-editor/src/helpers.ts @@ -158,3 +158,11 @@ export const getDocumentationSections = async (language: string) => { export const getInlineEditorText = (queryString: string, isMultiLine: boolean) => { return isMultiLine ? queryString.replace(/\r?\n|\r/g, ' ').replace(/ +/g, ' ') : queryString; }; + +export const getWrappedInPipesCode = (code: string, isWrapped: boolean): string => { + const pipes = code?.split('|'); + const codeNoLines = pipes?.map((pipe) => { + return pipe.replaceAll('\n', '').trim(); + }); + return codeNoLines.join(isWrapped ? ' | ' : '\n| '); +}; diff --git a/packages/kbn-text-based-editor/src/text_based_languages_editor.tsx b/packages/kbn-text-based-editor/src/text_based_languages_editor.tsx index 3aada71f81ab0..d8b8530f7cd37 100644 --- a/packages/kbn-text-based-editor/src/text_based_languages_editor.tsx +++ b/packages/kbn-text-based-editor/src/text_based_languages_editor.tsx @@ -55,6 +55,7 @@ import { getInlineEditorText, getDocumentationSections, MonacoError, + getWrappedInPipesCode, } from './helpers'; import { EditorFooter } from './editor_footer'; import { ResizableButton } from './resizable_button'; @@ -138,7 +139,7 @@ export const TextBasedLanguagesEditor = memo(function TextBasedLanguagesEditor({ const [showLineNumbers, setShowLineNumbers] = useState(isCodeEditorExpanded); const [isCompactFocused, setIsCompactFocused] = useState(isCodeEditorExpanded); const [isCodeEditorExpandedFocused, setIsCodeEditorExpandedFocused] = useState(false); - const [isWordWrapped, setIsWordWrapped] = useState(true); + const [isWordWrapped, setIsWordWrapped] = useState(false); const [editorErrors, setEditorErrors] = useState([]); const [editorWarning, setEditorWarning] = useState([]); @@ -359,6 +360,16 @@ export const TextBasedLanguagesEditor = memo(function TextBasedLanguagesEditor({ } }, [calculateVisibleCode, code, isCompactFocused, queryString]); + useEffect(() => { + if (isCodeEditorExpanded && !isWordWrapped) { + const pipes = code?.split('|'); + const pipesWithNewLine = code?.split('\n|'); + if (pipes?.length === pipesWithNewLine?.length) { + setIsWordWrapped(true); + } + } + }, [code, isCodeEditorExpanded, isWordWrapped]); + const onResize = ({ width }: { width: number }) => { calculateVisibleCode(width); if (editor1.current) { @@ -369,6 +380,7 @@ export const TextBasedLanguagesEditor = memo(function TextBasedLanguagesEditor({ const onQueryUpdate = useCallback( (value: string) => { setCode(value); + setIsWordWrapped(false); onTextLangQueryChange({ [language]: value } as AggregateQuery); }, [language, onTextLangQueryChange] @@ -509,13 +521,13 @@ export const TextBasedLanguagesEditor = memo(function TextBasedLanguagesEditor({ ? i18n.translate( 'textBasedEditor.query.textBasedLanguagesEditor.disableWordWrapLabel', { - defaultMessage: 'Disable word wrap', + defaultMessage: 'Disable wrap with pipes', } ) : i18n.translate( 'textBasedEditor.query.textBasedLanguagesEditor.EnableWordWrapLabel', { - defaultMessage: 'Enable word wrap', + defaultMessage: 'Wrap with pipes', } ) } @@ -529,13 +541,13 @@ export const TextBasedLanguagesEditor = memo(function TextBasedLanguagesEditor({ ? i18n.translate( 'textBasedEditor.query.textBasedLanguagesEditor.disableWordWrapLabel', { - defaultMessage: 'Disable word wrap', + defaultMessage: 'Disable wrap with pipes', } ) : i18n.translate( 'textBasedEditor.query.textBasedLanguagesEditor.EnableWordWrapLabel', { - defaultMessage: 'Enable word wrap', + defaultMessage: 'Wrap with pipes', } ) } @@ -545,6 +557,11 @@ export const TextBasedLanguagesEditor = memo(function TextBasedLanguagesEditor({ wordWrap: isWordWrapped ? 'off' : 'on', }); setIsWordWrapped(!isWordWrapped); + const updatedCode = getWrappedInPipesCode(code, isWordWrapped); + if (code !== updatedCode) { + setCode(updatedCode); + onTextLangQueryChange({ [language]: updatedCode } as AggregateQuery); + } }} />