feat(compass-collection): Add descriptions to FakerJS methods - CLOUDP-358516

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

@@ -52,85 +52,178 @@ export const MongoDBFieldTypeValues: MongoDBFieldType[] = [
  */
 export const MONGO_TYPE_TO_FAKER_METHODS: Record<
   MongoDBFieldType,
-  Array<string>
+  Array<{ method: string; description?: string }>
 > = {
   String: [
-    'lorem.word',
-    'lorem.words',
-    'lorem.sentence',
-    'lorem.paragraph',
-    'person.firstName',
-    'person.lastName',
-    'person.fullName',
-    'person.jobTitle',
-    'internet.displayName',
-    'internet.email',
-    'internet.emoji',
-    'internet.password',
-    'internet.url',
-    'internet.domainName',
-    'internet.userName',
-    'phone.number',
-    'location.city',
-    'location.country',
-    'location.streetAddress',
-    'location.zipCode',
-    'location.state',
-    'company.name',
-    'company.catchPhrase',
-    'color.human',
-    'commerce.productName',
-    'commerce.department',
-    'finance.accountName',
-    'finance.currencyCode',
-    'git.commitSha',
-    'string.uuid',
-    'string.alpha',
-    'string.alphanumeric',
-    'system.fileName',
-    'system.filePath',
-    'system.mimeType',
-    'book.title',
-    'music.songName',
-    'food.dish',
-    'animal.type',
-    'vehicle.model',
-    'hacker.phrase',
-    'science.chemicalElement',
+    { method: 'lorem.word', description: 'Single word' },
+    { method: 'lorem.words', description: 'Multiple words' },
+    { method: 'lorem.sentence', description: 'Short sentence' },
+    { method: 'lorem.paragraph', description: 'Paragraph of text' },
+    { method: 'person.firstName' },
+    { method: 'person.lastName' },
+    { method: 'person.fullName' },
+    { method: 'person.jobTitle' },
+    {
+      method: 'internet.displayName',
+      description: 'Username-style display name',
+    },
+    { method: 'internet.email' },
+    { method: 'internet.emoji' },
+    { method: 'internet.password', description: 'Randomly generated password' },
+    { method: 'internet.url' },
+    { method: 'internet.domainName' },
+    { method: 'internet.userName' },
+    { method: 'phone.number' },
+    { method: 'location.city' },
+    { method: 'location.country' },
+    { method: 'location.streetAddress' },
+    { method: 'location.zipCode' },
+    { method: 'location.state' },
+    { method: 'company.name' },
+    {
+      method: 'company.catchPhrase',
+      description: 'Corporate-style marketing slogan',
+    },
+    { method: 'color.human', description: 'Human-readable color name' },
+    {
+      method: 'commerce.productName',
+      description: 'Product name from a commerce catalog',
+    },
+    {
+      method: 'commerce.department',
+      description: 'Commerce category or department name',
+    },
+    {
+      method: 'finance.accountName',
+      description: 'Financial account type or name',
+    },
+    {
+      method: 'finance.currencyCode',
+      description: 'ISO 4217 currency code like USD or EUR',
+    },
+    { method: 'git.commitSha', description: 'Git commit SHA hash' },
+    { method: 'string.uuid' },
+    { method: 'string.alpha', description: 'Alphabetic string' },
+    { method: 'string.alphanumeric', description: 'Alphanumeric string' },
+    {
+      method: 'system.fileName',
+      description: 'File name with optional extension',
+    },
+    { method: 'system.filePath', description: 'System-like file path' },
+    {
+      method: 'system.mimeType',
+      description: 'MIME type string like image/png',
+    },
+    { method: 'book.title' },
+    { method: 'music.songName' },
+    { method: 'food.dish' },
+    { method: 'animal.type' },
+    { method: 'vehicle.model' },
+    { method: 'hacker.phrase', description: 'Hacker-style phrase' },
+    {
+      method: 'science.chemicalElement',
+      description: 'Chemical element with name and symbol',
+    },
   ],
+
   Number: [
-    'number.binary',
-    'number.octal',
-    'number.hex',
-    'commerce.price',
-    'date.weekday',
-    'internet.port',
-    'number.int',
-    'number.float',
-    'finance.amount',
-    'location.latitude',
-    'location.longitude',
+    { method: 'number.binary', description: 'Binary number string' },
+    { method: 'number.octal', description: 'Octal number string' },
+    { method: 'number.hex', description: 'Hexadecimal number string' },
+    { method: 'commerce.price', description: 'Monetary price with decimals' },
+    { method: 'date.weekday', description: 'Day of the week' },
+    { method: 'internet.port', description: 'Network port number' },
+    { method: 'number.int' },
+    { method: 'number.float' },
+    {
+      method: 'finance.amount',
+      description: 'Monetary amount as number or string',
+    },
+    { method: 'location.latitude' },
+    { method: 'location.longitude' },
+  ],
+
+  Int32: [
+    { method: 'number.int' },
+    { method: 'finance.amount', description: 'Monetary amount as integer' },
+  ],
+
+  Long: [
+    { method: 'number.int' },
+    { method: 'number.bigInt', description: 'Large integer value as bigint' },
+  ],
+
+  Decimal128: [
+    { method: 'number.float' },
+    { method: 'finance.amount', description: 'Decimal-style monetary amount' },
   ],
-  Int32: ['number.int', 'finance.amount'],
-  Long: ['number.int', 'number.bigInt'],
-  Decimal128: ['number.float', 'finance.amount'],
-  Boolean: ['datatype.boolean'],
+
+  Boolean: [{ method: 'datatype.boolean' }],
+
   Date: [
-    'date.recent',
-    'date.past',
-    'date.future',
-    'date.anytime',
-    'date.birthdate',
+    { method: 'date.recent', description: 'Date within the last few days' },
+    { method: 'date.past', description: 'Past date relative to now' },
+    { method: 'date.future', description: 'Future date relative to now' },
+    { method: 'date.anytime', description: 'Date at any time in history' },
+    { method: 'date.birthdate' },
+  ],
+
+  Timestamp: [
+    { method: 'date.recent' },
+    { method: 'date.past' },
+    { method: 'date.future' },
+    { method: 'date.anytime' },
+  ],
+
+  ObjectId: [
+    {
+      method: 'database.mongodbObjectId',
+      description: 'Valid MongoDB ObjectId string',
+    },
   ],
-  Timestamp: ['date.recent', 'date.past', 'date.future', 'date.anytime'],
-  ObjectId: ['database.mongodbObjectId'],
-  Binary: ['string.hexadecimal', 'string.binary'],
-  RegExp: ['lorem.word', 'string.alpha'],
-  Code: ['lorem.sentence', 'lorem.paragraph', 'git.commitMessage'],
-  MinKey: ['number.int'],
-  MaxKey: ['number.int'],
-  Symbol: ['lorem.word', 'string.symbol'],
-  DBRef: ['database.mongodbObjectId'],
+
+  Binary: [
+    {
+      method: 'string.hexadecimal',
+      description: 'Hexadecimal string representation',
+    },
+    { method: 'string.binary', description: 'Binary string representation' },
+  ],
+
+  RegExp: [{ method: 'lorem.word' }, { method: 'string.alpha' }],
+
+  Code: [
+    {
+      method: 'lorem.sentence',
+      description: 'Short line of code',
+    },
+    { method: 'lorem.paragraph', description: 'Block of placeholder code' },
+    { method: 'git.commitMessage', description: 'Git-style commit message' },
+  ],
+
+  MinKey: [
+    {
+      method: 'number.int',
+      description: 'Integer representing minimal key value',
+    },
+  ],
+
+  MaxKey: [
+    {
+      method: 'number.int',
+      description: 'Integer representing maximal key value',
+    },
+  ],
+
+  Symbol: [
+    { method: 'lorem.word' },
+    {
+      method: 'string.symbol',
+      description: 'Symbol character such as punctuation or currency',
+    },
+  ],
+
+  DBRef: [{ method: 'database.mongodbObjectId' }],
 };
 
 export const DEFAULT_CONNECTION_STRING_FALLBACK = '<connection-string>';

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

@@ -53,7 +53,7 @@ describe('FakerMappingSelector', () => {
       MONGO_TYPE_TO_FAKER_METHODS
     )) {
       it(`should display faker methods for ${mongoType}`, () => {
-        const firstMethod = methods[0];
+        const firstMethod = methods[0].method;
 
         render(
           <FakerMappingSelector
@@ -70,7 +70,7 @@ describe('FakerMappingSelector', () => {
         const fakerFunctionSelect = screen.getByLabelText('Faker Function');
         userEvent.click(fakerFunctionSelect);
 
-        methods.forEach((method) => {
+        methods.forEach(({ method }) => {
           expect(screen.getByRole('option', { name: method })).to.exist;
         });
       });

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

@@ -75,10 +75,14 @@ const FakerMappingSelector = ({
 }: Props) => {
   const fakerMethodOptions = useMemo(() => {
     const methods = MONGO_TYPE_TO_FAKER_METHODS[activeJsonType] || [];
+    const methodNames = methods.map((m) => m.method);
 
     // Include original LLM method if it's not already in the list of methods
-    if (originalLlmFakerMethod && !methods.includes(originalLlmFakerMethod)) {
-      return [originalLlmFakerMethod, ...methods];
+    if (
+      originalLlmFakerMethod &&
+      !methodNames.includes(originalLlmFakerMethod)
+    ) {
+      return [{ method: originalLlmFakerMethod }, ...methods];
     }
 
     return methods;
@@ -105,8 +109,8 @@ const FakerMappingSelector = ({
         value={activeFakerFunction}
         onChange={onFakerFunctionSelect}
       >
-        {fakerMethodOptions.map((method) => (
-          <Option key={method} value={method}>
+        {fakerMethodOptions.map(({ method, description }) => (
+          <Option key={method} value={method} description={description}>
             {method}
           </Option>
         ))}