[Console Monaco Migration] Fix variable replacement (elastic#188994)

Fixes elastic#185999 ## Summary This PR fixes the variable replacement when the variable contains an object value . **How to test:** 1. Go to Console and create the following variables: `var1`: `{"match_all": {}}` `var2`: `index` `var3`: `match_all` 2. Test using an object variable inside the request data: ``` GET _search { "query": "${var1}" } ``` should be sent as `query: {match_all: {}}` in the payload. 3. Test using a variable in the URL: `PUT /test-${var2}` should be sent as `PUT /test-index` in the payload. 4. Test using a string variable in the request data: ``` GET _search { "query": { "${var3}": {} } } ``` should be sent as `query: {match_all: {}}` in the payload. 5. Test using undefined variables: ``` GET _search { "query": { "${var4}": {} } } ``` or `PUT /test-${var5}` Both should be sent as they are.
lcawl · Jul 26, 2024 · 7e5907e · 7e5907e
1 parent 0395865
commit 7e5907e
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 10 deletions.
diff --git a/src/plugins/console/public/application/containers/editor/monaco/utils/constants.ts b/src/plugins/console/public/application/containers/editor/monaco/utils/constants.ts
@@ -19,7 +19,8 @@ export const slashRegex = /\//;
 export const ampersandRegex = /&/;
 export const equalsSignRegex = /=/;
 export const questionMarkRegex = /\?/;
-export const variableTemplateRegex = /\${(\w+)}/g;
+export const urlVariableTemplateRegex = /\${(\w+)}/g;
+export const dataVariableTemplateRegex = /"\${(\w+)}"/g;
 export const numberStartRegex = /[-\d]/;
 export const digitRegex = /[\d]/;
 export const lettersRegex = /[A-Za-z]/;

diff --git a/src/plugins/console/public/application/containers/editor/monaco/utils/requests_utils.test.ts b/src/plugins/console/public/application/containers/editor/monaco/utils/requests_utils.test.ts
@@ -64,6 +64,11 @@ describe('requests_utils', () => {
         name: 'variable2',
         value: 'test2',
       },
+      {
+        id: '3',
+        name: 'variable3',
+        value: '{"match_all": {}}',
+      },
     ];
 
     describe('replaces variables in the url', () => {
@@ -96,11 +101,20 @@ describe('requests_utils', () => {
       const request = {
         method: 'GET',
         url: '${variable1}',
-        data: [JSON.stringify({ '${variable1}': '${variable2}' }, null, 2)],
+        data: [
+          JSON.stringify(
+            { '${variable1}': '${variable2}', '${variable2}': '${variable3}' },
+            null,
+            2
+          ),
+        ],
       };
       it('works with several variables', () => {
         const result = replaceRequestVariables(request, variables);
-        expect(result.data[0]).toBe(JSON.stringify({ test1: 'test2' }, null, 2));
+        expect(JSON.parse(result.data[0])).toMatchObject({
+          test1: 'test2',
+          test2: { match_all: {} },
+        });
       });
     });
   });

diff --git a/src/plugins/console/public/application/containers/editor/monaco/utils/requests_utils.ts b/src/plugins/console/public/application/containers/editor/monaco/utils/requests_utils.ts
@@ -11,7 +11,7 @@ import { constructUrl } from '../../../../../lib/es';
 import { MetricsTracker } from '../../../../../types';
 import type { DevToolsVariable } from '../../../../components';
 import type { EditorRequest } from '../types';
-import { variableTemplateRegex } from './constants';
+import { urlVariableTemplateRegex, dataVariableTemplateRegex } from './constants';
 import { removeTrailingWhitespaces } from './tokens_utils';
 import { AdjustedParsedRequest } from '../types';
 
@@ -38,8 +38,8 @@ export const replaceRequestVariables = (
 ): EditorRequest => {
   return {
     method,
-    url: replaceVariables(url, variables),
-    data: data.map((dataObject) => replaceVariables(dataObject, variables)),
+    url: replaceVariables(url, variables, false),
+    data: data.map((dataObject) => replaceVariables(dataObject, variables, true)),
   };
 };
 
@@ -118,15 +118,35 @@ export const getRequestEndLineNumber = (
   return endLineNumber;
 };
 
+const isJsonString = (str: string) => {
+  try {
+    JSON.parse(str);
+  } catch (e) {
+    return false;
+  }
+  return true;
+};
+
 /*
  * Internal helpers
  */
-const replaceVariables = (text: string, variables: DevToolsVariable[]): string => {
-  if (variableTemplateRegex.test(text)) {
-    text = text.replaceAll(variableTemplateRegex, (match, key) => {
+const replaceVariables = (
+  text: string,
+  variables: DevToolsVariable[],
+  isDataVariable: boolean
+): string => {
+  const variableRegex = isDataVariable ? dataVariableTemplateRegex : urlVariableTemplateRegex;
+  if (variableRegex.test(text)) {
+    text = text.replaceAll(variableRegex, (match, key) => {
       const variable = variables.find(({ name }) => name === key);
+      const value = variable?.value;
+
+      if (isDataVariable && value) {
+        // If the variable value is an object, add it as it is. Otherwise, surround it with quotes.
+        return isJsonString(value) ? value : `"${value}"`;
+      }
 
-      return variable?.value ?? match;
+      return value ?? match;
     });
   }
   return text;