increase max number size, allow faker.helpers.arrayElements, parse args before call, update ui label

Author: ncarbon

packages/compass-collection/src/components/mock-data-generator-modal/faker-mapping-selector.tsx

@@ -27,11 +27,23 @@ const labelStyles = css({
   fontWeight: 600,
 });
 
+const parseFakerArg = (arg: FakerArg): string => {
+  if (typeof arg === 'object' && arg !== null && 'json' in arg) {
+    try {
+      return JSON.stringify(JSON.parse(arg.json));
+    } catch {
+      return '';
+    }
+  }
+  return arg.toString();
+};
+
 const formatFakerFunctionCallWithArgs = (
   fakerFunction: string,
   fakerArgs: FakerArg[]
 ) => {
-  return `faker.${fakerFunction}(${fakerArgs.join(', ')})`;
+  const parsedFakerArgs = fakerArgs.map(parseFakerArg);
+  return `faker.${fakerFunction}(${parsedFakerArgs.join(', ')})`;
 };
 
 interface Props {
@@ -85,11 +97,11 @@ const FakerMappingSelector = ({
         </Banner>
       ) : (
         <>
-          <Label htmlFor="sample-faker-function-call">
-            Sample Faker Function Call
+          <Label htmlFor="preview-faker-function-call">
+            Preview Faker Function Call
           </Label>
           <Code
-            id="sample-faker-function-call"
+            id="preview-faker-function-call"
             language="javascript"
             copyable={false}
           >

packages/compass-collection/src/components/mock-data-generator-modal/utils.spec.ts

@@ -38,14 +38,14 @@ describe('Mock Data Generator Utils', () => {
     });
 
     it('returns false for numbers that are too large', () => {
-      expect(areFakerArgsValid([1001])).to.be.false;
-      expect(areFakerArgsValid([-1001])).to.be.false;
-      expect(areFakerArgsValid([{ json: { length: 1001 } } as any])).to.be
+      expect(areFakerArgsValid([10001])).to.be.false;
+      expect(areFakerArgsValid([-10001])).to.be.false;
+      expect(areFakerArgsValid([{ json: { length: 10001 } } as any])).to.be
         .false;
-      expect(areFakerArgsValid([{ json: { length: -1001 } } as any])).to.be
+      expect(areFakerArgsValid([{ json: { length: -10001 } } as any])).to.be
         .false;
       expect(
-        areFakerArgsValid([{ json: { width: 1001, height: 1001 } } as any])
+        areFakerArgsValid([{ json: { width: 10001, height: 10001 } } as any])
       ).to.be.false;
     });
 

packages/compass-collection/src/components/mock-data-generator-modal/utils.ts

@@ -5,7 +5,7 @@ import { faker } from '@faker-js/faker/locale/en';
 const MAX_FAKER_ARGS_LENGTH = 10;
 const MAX_FAKER_STRING_LENGTH = 1000;
 const MAX_FAKER_ARGS_DEPTH = 3;
-const MAX_FAKER_NUMBER_SIZE = 1000;
+const MAX_FAKER_NUMBER_SIZE = 10000;
 
 /**
  * Checks if the provided faker arguments are valid.
@@ -30,8 +30,7 @@ export function areFakerArgsValid(
   for (const arg of fakerArgs) {
     if (arg === null || arg === undefined) {
       return false;
-    }
-    if (typeof arg === 'boolean') {
+    } else if (typeof arg === 'boolean') {
       // booleans are always valid, continue
       continue;
     } else if (typeof arg === 'number') {
@@ -120,7 +119,11 @@ function getFakerModuleAndMethod(method: string) {
 }
 
 function isAllowedHelper(moduleName: string, methodName: string) {
-  return moduleName !== 'helpers' || methodName === 'arrayElement';
+  return (
+    moduleName !== 'helpers' ||
+    methodName === 'arrayElement' ||
+    methodName === 'arrayElements'
+  );
 }
 
 function canInvokeFakerMethod(fakerModule: unknown, methodName: string) {
@@ -141,7 +144,8 @@ function tryInvokeFakerMethod(
   // If args are present and safe, try calling with args
   if (args.length > 0 && areFakerArgsValid(args)) {
     try {
-      callable(...args);
+      const parsedArgs = parseFakerArgs(args);
+      callable(...parsedArgs);
       return { isValid: true, fakerArgs: args };
     } catch {
       // Call with args failed. Fall through to trying without args
@@ -163,3 +167,13 @@ function tryInvokeFakerMethod(
     return { isValid: false, fakerArgs: [] };
   }
 }
+
+// Parse the faker args to ensure we can call the method with the args
+function parseFakerArgs(args: FakerArg[]): FakerArg[] {
+  return args.map((arg) => {
+    if (typeof arg === 'object' && arg !== null && 'json' in arg) {
+      return JSON.parse((arg as { json: string }).json);
+    }
+    return arg;
+  });
+}