fix: check if import name is a primitive and needs aliasing (#1142)

Co-authored-by: David Lopez <[email protected]>

Author: letsbelopez

packages/codegen-ui-react/lib/__tests__/__utils__/amplify-renderer-generator.ts

@@ -77,14 +77,15 @@ export const generateComponentOnlyWithAmplifyFormRenderer = (
   formJsonFile: string,
   dataSchemaJsonFile: string | undefined,
   renderConfig: ReactRenderConfig = defaultCLIRenderConfig,
+  featureFlags?: FormFeatureFlags,
 ) => {
   let dataSchema: GenericDataSchema | undefined;
   if (dataSchemaJsonFile) {
     const dataStoreSchema = loadSchemaFromJSONFile<DataStoreSchema | ModelIntrospectionSchema>(dataSchemaJsonFile);
     dataSchema = getGenericFromDataStore(dataStoreSchema);
   }
   const rendererFactory = new StudioTemplateRendererFactory(
-    (component: StudioForm) => new AmplifyFormRenderer(component, dataSchema, renderConfig),
+    (component: StudioForm) => new AmplifyFormRenderer(component, dataSchema, renderConfig, featureFlags),
   );
 
   const renderer = rendererFactory.buildRenderer(loadSchemaFromJSONFile<StudioForm>(formJsonFile));

packages/codegen-ui-react/lib/__tests__/studio-ui-codegen-react-forms.test.ts

@@ -383,6 +383,18 @@ describe('amplify form renderer tests', () => {
       expect(importCollection).toBeDefined();
     });
 
+    it('should contain Text as alias map because its a primitive component name', () => {
+      const { importCollection } = generateComponentOnlyWithAmplifyFormRenderer(
+        'forms/games',
+        'datastore/games',
+        { ...defaultCLIRenderConfig, dependencies: { 'aws-amplify': '^6.0.0' } },
+        { isNonModelSupported: true, isRelationshipSupported: true },
+      );
+
+      const aliasMap = importCollection.getAliasMap();
+      expect(aliasMap.model.Text).toBe('Text0');
+    });
+
     it('should 1:1 relationships without types file path - Create amplify js v6', () => {
       const { componentText, declaration } = generateWithAmplifyFormRenderer(
         'forms/owner-dog-create',

packages/codegen-ui-react/lib/imports/import-collection.ts

@@ -113,7 +113,12 @@ export class ImportCollection {
       const modelAlias = createUniqueName(
         importName,
         (input) =>
-          this.importedNames.has(input) || (input.endsWith('Props') && isPrimitive(input.replace(/Props/g, ''))),
+          // Testing if the name is not unique.
+          // Props is for testing the primitive types e.g. "TextProps".
+          // And test for a matching primitive name value e.g. "Text"
+          this.importedNames.has(input) ||
+          (input.endsWith('Props') && isPrimitive(input.replace(/Props/g, ''))) ||
+          isPrimitive(input),
       );
       if (existingPackageAlias) {
         existingPackageAlias.set(importName, modelAlias);

packages/codegen-ui/example-schemas/datastore/games.json

@@ -0,0 +1,101 @@
+{
+  "models": {
+      "Text": {
+          "name": "Text",
+          "fields": {
+              "id": {
+                  "name": "id",
+                  "isArray": false,
+                  "type": "ID",
+                  "isRequired": true,
+                  "attributes": []
+              },
+              "message": {
+                  "name": "message",
+                  "isArray": false,
+                  "type": "String",
+                  "isRequired": false,
+                  "attributes": []
+              },
+              "createdAt": {
+                  "name": "createdAt",
+                  "isArray": false,
+                  "type": "AWSDateTime",
+                  "isRequired": false,
+                  "attributes": [],
+                  "isReadOnly": true
+              },
+              "updatedAt": {
+                  "name": "updatedAt",
+                  "isArray": false,
+                  "type": "AWSDateTime",
+                  "isRequired": false,
+                  "attributes": [],
+                  "isReadOnly": true
+              }
+          },
+          "syncable": true,
+          "pluralName": "Texts",
+          "attributes": [
+              {
+                  "type": "model",
+                  "properties": {}
+              }
+          ]
+      },
+      "Games": {
+          "name": "Games",
+          "fields": {
+              "id": {
+                  "name": "id",
+                  "isArray": false,
+                  "type": "ID",
+                  "isRequired": true,
+                  "attributes": []
+              },
+              "Texts": {
+                  "name": "Texts",
+                  "isArray": true,
+                  "type": {
+                      "model": "Text"
+                  },
+                  "isRequired": false,
+                  "attributes": [],
+                  "isArrayNullable": true,
+                  "association": {
+                      "connectionType": "HAS_MANY",
+                      "associatedWith": "gamesID"
+                  }
+              },
+              "createdAt": {
+                  "name": "createdAt",
+                  "isArray": false,
+                  "type": "AWSDateTime",
+                  "isRequired": false,
+                  "attributes": [],
+                  "isReadOnly": true
+              },
+              "updatedAt": {
+                  "name": "updatedAt",
+                  "isArray": false,
+                  "type": "AWSDateTime",
+                  "isRequired": false,
+                  "attributes": [],
+                  "isReadOnly": true
+              }
+          },
+          "syncable": true,
+          "pluralName": "Games",
+          "attributes": [
+              {
+                  "type": "model",
+                  "properties": {}
+              }
+          ]
+      }
+  },
+  "enums": {},
+  "nonModels": {},
+  "codegenVersion": "3.4.4",
+  "version": "4515c51947749e6e168199ab64837ed3"
+}

packages/codegen-ui/example-schemas/forms/games.json

@@ -0,0 +1,16 @@
+{
+  "name": "GamesCreateForm",
+  "formActionType": "create",
+  "dataType": {
+    "dataSourceType": "DataStore",
+    "dataTypeName": "Games"
+  },
+  "fields": {},
+  "sectionalElements": {},
+  "style": {},
+  "cta": {
+    "clear": {},
+    "cancel": {},
+    "submit": {}
+  }
+}