add faker argument validation for large numbers and add sample function call display

Author: ncarbon

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

@@ -2,12 +2,13 @@ import {
   Banner,
   BannerVariant,
   Body,
+  Code,
   css,
+  Label,
   Option,
   palette,
   Select,
   spacing,
-  TextInput,
 } from '@mongodb-js/compass-components';
 import React from 'react';
 import { UNRECOGNIZED_FAKER_METHOD } from '../../modules/collection-tab';
@@ -26,92 +27,11 @@ const labelStyles = css({
   fontWeight: 600,
 });
 
-/**
- * Renders read-only TextInput components for each key-value pair in a faker arguments object.
- */
-const getFakerArgsInputFromObject = (fakerArgsObject: Record<string, any>) => {
-  return Object.entries(fakerArgsObject).map(([key, item]: [string, any]) => {
-    if (typeof item === 'string' || typeof item === 'boolean') {
-      return (
-        <TextInput
-          key={`faker-arg-${key}`}
-          type="text"
-          label={key}
-          aria-label={`Faker Arg ${key}`}
-          readOnly
-          value={item.toString()}
-        />
-      );
-    } else if (typeof item === 'number') {
-      return (
-        <TextInput
-          key={`faker-arg-${key}`}
-          type="number"
-          label={key}
-          aria-label={`Faker Arg ${key}`}
-          readOnly
-          value={item.toString()}
-        />
-      );
-    } else if (
-      Array.isArray(item) &&
-      item.length > 0 &&
-      typeof item[0] === 'string'
-    ) {
-      return (
-        <TextInput
-          key={`faker-arg-${key}`}
-          type="text"
-          label={key}
-          aria-label={`Faker Arg ${key}`}
-          readOnly
-          value={item.join(', ')}
-        />
-      );
-    }
-    return null;
-  });
-};
-
-/**
- * Renders TextInput components for each faker argument based on its type.
- */
-const getFakerArgsInput = (fakerArgs: FakerArg[]) => {
-  return fakerArgs.map((arg, idx) => {
-    if (typeof arg === 'string' || typeof arg === 'boolean') {
-      return (
-        <TextInput
-          key={`faker-arg-${idx}`}
-          type="text"
-          label="Faker Arg"
-          readOnly
-          value={arg.toString()}
-        />
-      );
-    } else if (typeof arg === 'number') {
-      return (
-        <TextInput
-          key={`faker-arg-${idx}`}
-          type="number"
-          label="Faker Arg"
-          readOnly
-          value={arg.toString()}
-        />
-      );
-    } else if (typeof arg === 'object' && 'json' in arg) {
-      // parse the object
-      let parsedArg;
-      try {
-        parsedArg = JSON.parse(arg.json);
-      } catch {
-        // If parsing fails, skip rendering this arg
-        return null;
-      }
-      if (typeof parsedArg === 'object') {
-        return getFakerArgsInputFromObject(parsedArg);
-      }
-    }
-  });
+const formatFakerFunctionCallWithArgs = (
+  fakerFunction: string,
+  fakerArgs: FakerArg[]
+) => {
+  return `faker.${fakerFunction}(${fakerArgs.join(', ')})`;
 };
 
 interface Props {
@@ -158,13 +78,28 @@ const FakerMappingSelector = ({
           </Option>
         ))}
       </Select>
-      {activeFakerFunction === UNRECOGNIZED_FAKER_METHOD && (
+      {activeFakerFunction === UNRECOGNIZED_FAKER_METHOD ? (
         <Banner variant={BannerVariant.Warning}>
           Please select a function or we will default fill this field with the
           string &quot;Unrecognized&quot;
         </Banner>
+      ) : (
+        <>
+          <Label htmlFor="sample-faker-function-call">
+            Sample Faker Function Call
+          </Label>
+          <Code
+            id="sample-faker-function-call"
+            language="javascript"
+            copyable={false}
+          >
+            {formatFakerFunctionCallWithArgs(
+              activeFakerFunction,
+              activeFakerArgs
+            )}
+          </Code>
+        </>
       )}
-      {getFakerArgsInput(activeFakerArgs)}
     </div>
   );
 };

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

@@ -37,6 +37,18 @@ describe('Mock Data Generator Utils', () => {
       expect(areFakerArgsValid([longStr])).to.be.false;
     });
 
+    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
+        .false;
+      expect(areFakerArgsValid([{ json: { length: -1001 } } as any])).to.be
+        .false;
+      expect(
+        areFakerArgsValid([{ json: { width: 1001, height: 1001 } } as any])
+      ).to.be.false;
+    });
+
     it('returns true for nested valid arrays', () => {
       expect(
         areFakerArgsValid([

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

@@ -5,6 +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;
 
 /**
  * Checks if the provided faker arguments are valid.
@@ -30,23 +31,28 @@ export function areFakerArgsValid(
     if (arg === null || arg === undefined) {
       return false;
     }
-    if (typeof arg === 'number') {
-      if (!Number.isFinite(arg)) {
+    if (typeof arg === 'boolean') {
+      // booleans are always valid, continue
+      continue;
+    } else if (typeof arg === 'number') {
+      if (!Number.isFinite(arg) || Math.abs(arg) > MAX_FAKER_NUMBER_SIZE) {
         return false;
       }
     } else if (typeof arg === 'string') {
       if (arg.length > MAX_FAKER_STRING_LENGTH) {
         return false;
       }
-    } else if (typeof arg === 'boolean') {
-      // booleans are always valid, continue
     } else if (Array.isArray(arg)) {
       if (!areFakerArgsValid(arg, depth + 1)) {
         return false;
       }
-    } else if (typeof arg === 'object' && typeof arg.json === 'string') {
+    } else if (
+      typeof arg === 'object' &&
+      arg !== null &&
+      typeof (arg as { json?: unknown }).json === 'string'
+    ) {
       try {
-        const parsedJson = JSON.parse(arg.json);
+        const parsedJson = JSON.parse((arg as { json: string }).json);
         if (!areFakerArgsValid(Object.values(parsedJson), depth + 1)) {
           return false;
         }