[8.19] [Console] Fix auto-indentation of requests with triple quotes (elastic#218305) (elastic#220679)

kibanamachine · ElenaStoeva · web-flow · commit 214d12fd4caf · 2025-05-09T13:26:56.000-04:00
# Backport This will backport the following commits from `main` to `8.19`: - [[Console] Fix auto-indentation of requests with triple quotes (elastic#218305)](elastic#218305)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport)  Co-authored-by: Elena Stoeva <59341489+ElenaStoeva@users.noreply.github.com>
diff --git a/src/platform/plugins/shared/console/public/application/containers/editor/utils/requests_utils.test.ts b/src/platform/plugins/shared/console/public/application/containers/editor/utils/requests_utils.test.ts
@@ -17,6 +17,9 @@ import {
   trackSentRequests,
   getRequestFromEditor,
   containsComments,
+  collapseTripleQuoteStrings,
+  expandTripleQuoteStrings,
+  TRIPLE_QUOTE_STRINGS_MARKER,
 } from './requests_utils';
 
 describe('requests_utils', () => {
@@ -203,6 +206,14 @@ describe('requests_utils', () => {
       '}                                   ', // line 30
       ' // some comment                    ', // line 31
       '                                    ', // line 32
+      'POST    _query                     ', // line 33
+      '{                                   ', // line 34
+      '  "query":     """', // line 35
+      '    FROM sample_data', // line 36
+      '    | WHERE message LIKE "Connected *"', // line 37
+      '    | SORT @timestamp DESC', // line 38
+      '  """                                 ', // line 39
+      '}                                   ', // line 40
     ];
 
     const TEST_REQUEST_1 = {
@@ -237,6 +248,18 @@ describe('requests_utils', () => {
       endOffset: 36,
     };
 
+    const TEST_REQUEST_5 = {
+      // Offsets are with respect to the sample editor text
+      startLineNumber: 33,
+      endLineNumber: 40,
+      startOffset: 1,
+      endOffset: 36,
+    };
+
+    afterEach(() => {
+      mockAddToastWarning.mockClear();
+    });
+
     it('correctly auto-indents a single request with data', () => {
       const formattedData = getAutoIndentedRequests(
         [TEST_REQUEST_1],
@@ -359,6 +382,31 @@ describe('requests_utils', () => {
           'Auto-indentation is currently not supported for requests containing comments. Please remove comments to enable formatting.'
         )
       );
+      mockAddToastWarning.mockReset();
+    });
+
+    it('correctly auto-indents a single request that contains triple quotes', () => {
+      const formattedData = getAutoIndentedRequests(
+        [TEST_REQUEST_5],
+        sampleEditorTextLines
+          .slice(TEST_REQUEST_5.startLineNumber - 1, TEST_REQUEST_5.endLineNumber)
+          .join('\n'),
+        sampleEditorTextLines.join('\n'),
+        mockAddToastWarning
+      );
+      const expectedResultLines = [
+        'POST _query',
+        '{',
+        '  "query": """',
+        '    FROM sample_data',
+        '    | WHERE message LIKE "Connected *"',
+        '    | SORT @timestamp DESC',
+        '  """',
+        '}',
+      ];
+
+      expect(formattedData).toBe(expectedResultLines.join('\n'));
+      expect(mockAddToastWarning).not.toHaveBeenCalled();
     });
   });
 
@@ -556,4 +604,49 @@ describe('requests_utils', () => {
       expect(containsComments(requestData)).toBe(true);
     });
   });
+
+  describe('collapseTripleQuoteStrings and expandTripleQuoteStrings', () => {
+    const input = `{
+  "query1": """FROM sample_data | LIMIT 3""",
+  "query2": """
+    FROM sample_data
+    | WHERE message LIKE "Connected*"
+    | SORT @timestamp DESC
+    """
+}`;
+
+    it('should collapse and re-expand both inline and multi-line triple-quote strings correctly', () => {
+      const { collapsedTripleQuotesData, tripleQuoteStrings } = collapseTripleQuoteStrings(input);
+
+      // Validate that both triple-quoted strings were replaced with the marker
+      expect(collapsedTripleQuotesData).toBe(`{
+  "query1": ${TRIPLE_QUOTE_STRINGS_MARKER},
+  "query2": ${TRIPLE_QUOTE_STRINGS_MARKER}
+}`);
+
+      // Validate extracted strings match expected format
+      expect(tripleQuoteStrings).toEqual([
+        `"""FROM sample_data | LIMIT 3"""`,
+        `"""
+    FROM sample_data
+    | WHERE message LIKE "Connected*"
+    | SORT @timestamp DESC
+    """`,
+      ]);
+
+      // Ensure re-expansion gives the original input back
+      const expanded = expandTripleQuoteStrings(collapsedTripleQuotesData, tripleQuoteStrings);
+      expect(expanded).toBe(input);
+    });
+
+    it('should be idempotent if run multiple times on collapsed data', () => {
+      const firstCollapse = collapseTripleQuoteStrings(input);
+      const secondCollapse = collapseTripleQuoteStrings(firstCollapse.collapsedTripleQuotesData);
+
+      expect(secondCollapse.tripleQuoteStrings).toEqual([]);
+      expect(secondCollapse.collapsedTripleQuotesData).toBe(
+        firstCollapse.collapsedTripleQuotesData
+      );
+    });
+  });
 });
diff --git a/src/platform/plugins/shared/console/public/application/containers/editor/utils/requests_utils.ts b/src/platform/plugins/shared/console/public/application/containers/editor/utils/requests_utils.ts
@@ -132,6 +132,36 @@ export const getRequestEndLineNumber = ({
   return endLineNumber;
 };
 
+export const TRIPLE_QUOTE_STRINGS_MARKER = '"{tripleQuoteString}"';
+
+/**
+ * This function replaces all triple-quote strings with {@link TRIPLE_QUOTE_STRINGS_MARKER}
+ */
+export function collapseTripleQuoteStrings(data: string) {
+  const splitData = data.split(`"""`);
+  const tripleQuoteStrings = [];
+  for (let i = 1; i < splitData.length - 1; i += 2) {
+    tripleQuoteStrings.push('"""' + splitData[i] + '"""');
+    splitData[i] = TRIPLE_QUOTE_STRINGS_MARKER;
+  }
+  return { collapsedTripleQuotesData: splitData.join(''), tripleQuoteStrings };
+}
+
+/**
+ * This function replaces all {@link TRIPLE_QUOTE_STRINGS_MARKER}s in the provided text with the corresponding provided triple-quote strings.
+ */
+export function expandTripleQuoteStrings(data: string, tripleQuoteStrings: string[]) {
+  const splitData = data.split(TRIPLE_QUOTE_STRINGS_MARKER);
+  const allData = [];
+  for (let i = 0; i < splitData.length; i++) {
+    allData.push(splitData[i]);
+    if (i < tripleQuoteStrings.length) {
+      allData.push(tripleQuoteStrings[i]);
+    }
+  }
+  return allData.join('');
+}
+
 /**
  * This function takes a string containing unformatted Console requests and
  * returns a text in which the requests are auto-indented.
@@ -179,7 +209,16 @@ export const getAutoIndentedRequests = (
         if (requestLines.length > 1) {
           const dataString = dataLines.join('\n');
           const dataJsons = splitDataIntoJsonObjects(dataString);
-          formattedTextLines.push(...dataJsons.map(indentData));
+          formattedTextLines.push(
+            ...dataJsons.map((data) => {
+              // Since triple-quote strings are not a valid JSON syntax, we need to first collapse them before indenting the data
+              const { collapsedTripleQuotesData, tripleQuoteStrings } =
+                collapseTripleQuoteStrings(data);
+              const indentedData = indentData(collapsedTripleQuotesData);
+              // Return any collapsed triple-quote strings
+              return expandTripleQuoteStrings(indentedData, tripleQuoteStrings);
+            })
+          );
         }
       }
 
@@ -319,17 +358,28 @@ const splitDataIntoJsonObjects = (dataString: string): string[] => {
   let currentObject = '';
   // Tracks whether the current position is inside a string
   let insideString = false;
+  // Tracks whether the current position is inside a triple-quote string
+  let insideTripleQuoteString = false;
 
+  let i = 0;
   // Iterate through each character in the input string
-  for (let i = 0; i < dataString.length; i++) {
+  while (i < dataString.length) {
     const char = dataString[i];
     // Append the character to the current JSON object string
     currentObject += char;
 
-    // If the character is a double quote and it is not escaped, toggle the `insideString` state
-    if (char === '"' && dataString[i - 1] !== '\\') {
+    if (char === '"' && dataString.substring(i + 1, i + 3) === '""') {
+      // If the character is a quote and the next two characters are also quotes,
+      // toggle the `insideString` state
+      insideTripleQuoteString = !insideTripleQuoteString;
+      currentObject += '""';
+      // Skip the next two quotes
+      i += 2;
+    } else if (!insideTripleQuoteString && char === '"' && dataString[i - 1] !== '\\') {
+      // If the character is a quote, it is not escaped, and it's not inside a triple-quote string,
+      // toggle the `insideString` state
       insideString = !insideString;
-    } else if (!insideString) {
+    } else if (!insideTripleQuoteString && !insideString) {
       // Only modify depth if not inside a string
 
       if (char === '{') {
@@ -344,6 +394,7 @@ const splitDataIntoJsonObjects = (dataString: string): string[] => {
         currentObject = '';
       }
     }
+    i++;
   }
 
   // If there's remaining data in currentObject, add it as the last JSON object
