fix: escape arguments containing spaces

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,18 @@ 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) || [];
+  // Above
+  const prettifiedArgs = useMemo(() => prettifyArguments(currentArgs), [currentArgs]); // and replace `isPrettified` to not use `useMemo`
+  const currentArgsInline = useMemo(() => prettifiedArgs.replace(/\n+/g, ' '), [prettifiedArgs]);
+
+  const isPrettified = Boolean(currentArgs === prettifyArguments(currentArgs));
+
+  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 +72,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,29 @@
+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"']);
+    });
+  });
+});

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}"` : escapedArg;
+  });
+};