fix: escape arguments containing spaces (#982)

* fix: escape arguments containing spaces

* fix: format args

* fix: check if arg starts and ends with quotes

* fix: restore functionality for inline

* refactor: changes

* refactor: changes

* refactor: unit tests + inline args

* refactor: rename

* refactor: escape quotes

* fix: add single quote and backtick

* chore: import directly from utils

* fix: unit tests

* refactor: changes

* feat: add unit test

* fix: github warning

packages/web/src/components/pages/Tests/TestDetails/TestSettings/SettingsVariables/Arguments.tsx

@@ -22,6 +22,7 @@ import {useEntityDetailsPick} from '@store/entityDetails';
 
 import Colors from '@styles/Colors';
 
+import {escapeArguments} from '@utils/escapeArguments';
 import {externalLinks} from '@utils/externalLinks';
 import {displayDefaultNotificationFlow} from '@utils/notification';
 import {prettifyArguments} from '@utils/prettifyArguments';
@@ -45,15 +46,17 @@ const Arguments: React.FC<ArgumentsProps> = ({readOnly}) => {
   const [updateTest] = useUpdateTestMutation();
 
   const entityArgs = details.executionRequest?.args || [];
-  const initialArgs = useMemo(() => entityArgs?.join('\n') || '', [entityArgs]);
+  const initialArgs = useMemo(() => escapeArguments(entityArgs)?.join('\n') || '', [entityArgs]);
 
   const currentArgs = Form.useWatch('args', form) || '';
-  const currentArgsInline = currentArgs.replace(/\s+/g, ' ').trim();
-  const isPrettified = useMemo(() => currentArgs === prettifyArguments(currentArgs), [currentArgs]);
 
-  const onSaveForm = () => {
-    const values = form.getFieldsValue();
-    const argVal = values.args?.trim().split('\n').filter(Boolean) || [];
+  const prettifiedArgs = useMemo(() => prettifyArguments(currentArgs), [currentArgs]);
+  const currentArgsInline = useMemo(() => prettifiedArgs.replace(/\n+/g, ' '), [prettifiedArgs]);
+
+  const isPrettified = currentArgs === prettifiedArgs;
+
+  const onSaveForm = async () => {
+    const argVal = currentArgs?.trim().split('\n').filter(Boolean) || [];
 
     // Reset the form when there is no actual change
     if (argVal.join('\n') === initialArgs) {
@@ -68,14 +71,13 @@ const Arguments: React.FC<ArgumentsProps> = ({readOnly}) => {
       },
     };
 
-    return updateTest({
+    const res = await updateTest({
       id: details.name,
       data: successRecord,
-    })
-      .then(displayDefaultNotificationFlow)
-      .then(() => {
-        notificationCall('passed', 'Variables were successfully updated.');
-      });
+    });
+
+    displayDefaultNotificationFlow(res);
+    notificationCall('passed', 'Variables were successfully updated.');
   };
 
   const onPrettify = useLastCallback(() => form.setFieldValue('args', prettifyArguments(currentArgs)));

packages/web/src/utils/escapeArguments.spec.ts

@@ -0,0 +1,33 @@
+import {escapeArguments} from './escapeArguments';
+
+describe('utils', () => {
+  describe('escapeArguments', () => {
+    it('should handle empty array', () => {
+      expect(escapeArguments([])).toEqual([]);
+    });
+
+    it('should handle array with one argument', () => {
+      expect(escapeArguments(['abc'])).toEqual(['abc']);
+    });
+
+    it('should handle array with multiple arguments', () => {
+      expect(escapeArguments(['abc', 'def'])).toEqual(['abc', 'def']);
+    });
+
+    it('should handle array with multiple arguments with spaces', () => {
+      expect(escapeArguments(['ab c', 'de f'])).toEqual(['"ab c"', '"de f"']);
+    });
+
+    it('should handle array with multiple arguments with quotes', () => {
+      expect(escapeArguments(['ab"c', 'de"f'])).toEqual(['ab\\"c', 'de\\"f']);
+    });
+
+    it('should handle array with multiple arguments with spaces and quotes', () => {
+      expect(escapeArguments(['ab"c', 'de f'])).toEqual(['ab\\"c', '"de f"']);
+    });
+
+    it('should not escape single quotes', () => {
+      expect(escapeArguments(["abc' def"])).toEqual([`"abc' def"`]);
+    });
+  });
+});

packages/web/src/utils/escapeArguments.ts

@@ -0,0 +1,7 @@
+export const escapeArguments = (args: string[]) => {
+  return args.map(arg => {
+    const escapedArg = arg.replace(/(["'`\\])/g, '\\$1');
+
+    return /\s/.test(escapedArg) ? `"${escapedArg.replace(/\\'/g, "'")}"` : escapedArg;
+  });
+};