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

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');
+    });
+  });
 });

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| ');
+};

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<MonacoError[]>([]);
   const [editorWarning, setEditorWarning] = useState<MonacoError[]>([]);
 
@@ -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);
+                  }
                 }}
               />
             </EuiToolTip>