fix: alias form model names so we do not get naming collisions (#771)

* fix: alias form model names so we do not get naming collisions * chore: update snapshots and fix model import
aws-amplify · Nov 18, 2022 · 2746004 · 2746004
1 parent 5433d47
commit 2746004
Show file tree

Hide file tree

Showing 8 changed files with 98 additions and 86 deletions.
diff --git a/...s/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react-forms.test.ts.snap b/...s/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react-forms.test.ts.snap
@@ -3445,7 +3445,7 @@ exports[`amplify form renderer tests datastore form tests should generate a crea
 "/* eslint-disable */
 import * as React from \\"react\\";
 import { fetchByPath, validateField } from \\"./utils\\";
-import { Member, Team } from \\"../models\\";
+import { Member, Team as Team0 } from \\"../models\\";
 import {
   getOverrideProps,
   useDataStoreBinding,
@@ -3622,32 +3622,32 @@ export default function MyMemberForm(props) {
   } = props;
   const initialValues = {
     name: undefined,
-    team: undefined,
+    Team: undefined,
   };
   const [name, setName] = React.useState(initialValues.name);
-  const [team, setTeam] = React.useState(initialValues.team);
+  const [Team, setTeam] = React.useState(initialValues.Team);
   const [errors, setErrors] = React.useState({});
   const resetStateValues = () => {
     setName(initialValues.name);
-    setTeam(initialValues.team);
+    setTeam(initialValues.Team);
     setCurrentTeamValue(undefined);
     setCurrentTeamDisplayValue(\\"\\");
     setErrors({});
   };
   const [currentTeamDisplayValue, setCurrentTeamDisplayValue] =
     React.useState(\\"\\");
   const [currentTeamValue, setCurrentTeamValue] = React.useState(undefined);
-  const teamRef = React.createRef();
+  const TeamRef = React.createRef();
   const teamRecords = useDataStoreBinding({
     type: \\"collection\\",
-    model: Team,
+    model: Team0,
   }).items;
   const getDisplayValue = {
-    team: (record) => record?.name,
+    Team: (record) => record?.name,
   };
   const validations = {
     name: [],
-    team: [],
+    Team: [],
   };
   const runValidationTasks = async (
     fieldName,
@@ -3675,7 +3675,7 @@ export default function MyMemberForm(props) {
         event.preventDefault();
         let modelFields = {
           name,
-          team,
+          Team,
         };
         const validationResponses = await Promise.all(
           Object.keys(validations).reduce((promises, fieldName) => {
@@ -3761,7 +3761,7 @@ export default function MyMemberForm(props) {
           if (onChange) {
             const modelFields = {
               name: value,
-              team,
+              Team,
             };
             const result = onChange(modelFields);
             value = result?.name ?? value;
@@ -3783,22 +3783,22 @@ export default function MyMemberForm(props) {
           if (onChange) {
             const modelFields = {
               name,
-              team: value,
+              Team: value,
             };
             const result = onChange(modelFields);
-            value = result?.team ?? value;
+            value = result?.Team ?? value;
           }
           setTeam(value);
           setCurrentTeamValue(undefined);
           setCurrentTeamDisplayValue(\\"\\");
         }}
         currentFieldValue={currentTeamValue}
         label={\\"Team Label\\"}
-        items={team ? [team] : []}
-        hasError={errors.team?.hasError}
-        getBadgeText={getDisplayValue.team}
+        items={Team ? [Team] : []}
+        hasError={errors.Team?.hasError}
+        getBadgeText={getDisplayValue.Team}
         setFieldValue={setCurrentTeamDisplayValue}
-        inputFieldRef={teamRef}
+        inputFieldRef={TeamRef}
         defaultFieldValue={\\"\\"}
       >
         <Autocomplete
@@ -3808,7 +3808,7 @@ export default function MyMemberForm(props) {
           value={currentTeamDisplayValue}
           options={teamRecords.map((r) => ({
             id: r.id,
-            label: getDisplayValue.team?.(r) ?? r.id,
+            label: getDisplayValue.Team?.(r) ?? r.id,
           }))}
           onSelect={({ id, label }) => {
             setCurrentTeamValue(teamRecords.find((r) => r.id === id));
@@ -3819,17 +3819,17 @@ export default function MyMemberForm(props) {
           }}
           onChange={(e) => {
             let { value } = e.target;
-            if (errors.team?.hasError) {
-              runValidationTasks(\\"team\\", value);
+            if (errors.Team?.hasError) {
+              runValidationTasks(\\"Team\\", value);
             }
             setCurrentTeamDisplayValue(value);
             setCurrentTeamValue(undefined);
           }}
-          onBlur={() => runValidationTasks(\\"team\\", team)}
-          errorMessage={errors.team?.errorMessage}
-          hasError={errors.team?.hasError}
-          ref={teamRef}
-          {...getOverrideProps(overrides, \\"team\\")}
+          onBlur={() => runValidationTasks(\\"Team\\", Team)}
+          errorMessage={errors.Team?.errorMessage}
+          hasError={errors.Team?.hasError}
+          ref={TeamRef}
+          {...getOverrideProps(overrides, \\"Team\\")}
         ></Autocomplete>
       </ArrayField>
     </Grid>
@@ -3840,7 +3840,7 @@ export default function MyMemberForm(props) {
 
 exports[`amplify form renderer tests datastore form tests should generate a create form with belongsTo relationship 2`] = `
 "import * as React from \\"react\\";
-import { Team } from \\"../models\\";
+import { Team as Team0 } from \\"../models\\";
 import { EscapeHatchProps } from \\"@aws-amplify/ui-react/internal\\";
 import { AutocompleteProps, GridProps, TextFieldProps } from \\"@aws-amplify/ui-react\\";
 export declare type ValidationResponse = {
@@ -3850,17 +3850,17 @@ export declare type ValidationResponse = {
 export declare type ValidationFunction<T> = (value: T, validationResponse: ValidationResponse) => ValidationResponse | Promise<ValidationResponse>;
 export declare type MyMemberFormInputValues = {
     name?: string;
-    team?: Team;
+    Team?: Team0;
 };
 export declare type MyMemberFormValidationValues = {
     name?: ValidationFunction<string>;
-    team?: ValidationFunction<Team>;
+    Team?: ValidationFunction<Team0>;
 };
 export declare type FormProps<T> = Partial<T> & React.DOMAttributes<HTMLDivElement>;
 export declare type MyMemberFormOverridesProps = {
     MyMemberFormGrid?: FormProps<GridProps>;
     name?: FormProps<TextFieldProps>;
-    team?: FormProps<AutocompleteProps>;
+    Team?: FormProps<AutocompleteProps>;
 } & EscapeHatchProps;
 export declare type MyMemberFormProps = React.PropsWithChildren<{
     overrides?: MyMemberFormOverridesProps | undefined | null;
@@ -9575,7 +9575,7 @@ exports[`amplify form renderer tests datastore form tests should use proper fiel
 "/* eslint-disable */
 import * as React from \\"react\\";
 import { fetchByPath, validateField } from \\"./utils\\";
-import { Member, Team } from \\"../models\\";
+import { Member, Team as Team0 } from \\"../models\\";
 import {
   getOverrideProps,
   useDataStoreBinding,
@@ -9752,32 +9752,32 @@ export default function MyMemberForm(props) {
   } = props;
   const initialValues = {
     name: undefined,
-    team: undefined,
+    Team: undefined,
   };
   const [name, setName] = React.useState(initialValues.name);
-  const [team, setTeam] = React.useState(initialValues.team);
+  const [Team, setTeam] = React.useState(initialValues.Team);
   const [errors, setErrors] = React.useState({});
   const resetStateValues = () => {
     setName(initialValues.name);
-    setTeam(initialValues.team);
+    setTeam(initialValues.Team);
     setCurrentTeamValue(undefined);
     setCurrentTeamDisplayValue(\\"\\");
     setErrors({});
   };
   const [currentTeamDisplayValue, setCurrentTeamDisplayValue] =
     React.useState(\\"\\");
   const [currentTeamValue, setCurrentTeamValue] = React.useState(undefined);
-  const teamRef = React.createRef();
+  const TeamRef = React.createRef();
   const teamRecords = useDataStoreBinding({
     type: \\"collection\\",
-    model: Team,
+    model: Team0,
   }).items;
   const getDisplayValue = {
-    team: (record) => record?.name,
+    Team: (record) => record?.name,
   };
   const validations = {
     name: [],
-    team: [],
+    Team: [],
   };
   const runValidationTasks = async (
     fieldName,
@@ -9805,7 +9805,7 @@ export default function MyMemberForm(props) {
         event.preventDefault();
         let modelFields = {
           name,
-          team,
+          Team,
         };
         const validationResponses = await Promise.all(
           Object.keys(validations).reduce((promises, fieldName) => {
@@ -9891,7 +9891,7 @@ export default function MyMemberForm(props) {
           if (onChange) {
             const modelFields = {
               name: value,
-              team,
+              Team,
             };
             const result = onChange(modelFields);
             value = result?.name ?? value;
@@ -9913,22 +9913,22 @@ export default function MyMemberForm(props) {
           if (onChange) {
             const modelFields = {
               name,
-              team: value,
+              Team: value,
             };
             const result = onChange(modelFields);
-            value = result?.team ?? value;
+            value = result?.Team ?? value;
           }
           setTeam(value);
           setCurrentTeamValue(undefined);
           setCurrentTeamDisplayValue(\\"\\");
         }}
         currentFieldValue={currentTeamValue}
         label={\\"Team Label\\"}
-        items={team ? [team] : []}
-        hasError={errors.team?.hasError}
-        getBadgeText={getDisplayValue.team}
+        items={Team ? [Team] : []}
+        hasError={errors.Team?.hasError}
+        getBadgeText={getDisplayValue.Team}
         setFieldValue={setCurrentTeamDisplayValue}
-        inputFieldRef={teamRef}
+        inputFieldRef={TeamRef}
         defaultFieldValue={\\"\\"}
       >
         <Autocomplete
@@ -9938,7 +9938,7 @@ export default function MyMemberForm(props) {
           value={currentTeamDisplayValue}
           options={teamRecords.map((r) => ({
             id: r.id,
-            label: getDisplayValue.team?.(r) ?? r.id,
+            label: getDisplayValue.Team?.(r) ?? r.id,
           }))}
           onSelect={({ id, label }) => {
             setCurrentTeamValue(teamRecords.find((r) => r.id === id));
@@ -9949,17 +9949,17 @@ export default function MyMemberForm(props) {
           }}
           onChange={(e) => {
             let { value } = e.target;
-            if (errors.team?.hasError) {
-              runValidationTasks(\\"team\\", value);
+            if (errors.Team?.hasError) {
+              runValidationTasks(\\"Team\\", value);
             }
             setCurrentTeamDisplayValue(value);
             setCurrentTeamValue(undefined);
           }}
-          onBlur={() => runValidationTasks(\\"team\\", team)}
-          errorMessage={errors.team?.errorMessage}
-          hasError={errors.team?.hasError}
-          ref={teamRef}
-          {...getOverrideProps(overrides, \\"team\\")}
+          onBlur={() => runValidationTasks(\\"Team\\", Team)}
+          errorMessage={errors.Team?.errorMessage}
+          hasError={errors.Team?.hasError}
+          ref={TeamRef}
+          {...getOverrideProps(overrides, \\"Team\\")}
         ></Autocomplete>
       </ArrayField>
     </Grid>
@@ -9970,7 +9970,7 @@ export default function MyMemberForm(props) {
 
 exports[`amplify form renderer tests datastore form tests should use proper field overrides for belongsTo relationship 2`] = `
 "import * as React from \\"react\\";
-import { Team } from \\"../models\\";
+import { Team as Team0 } from \\"../models\\";
 import { EscapeHatchProps } from \\"@aws-amplify/ui-react/internal\\";
 import { AutocompleteProps, GridProps, TextFieldProps } from \\"@aws-amplify/ui-react\\";
 export declare type ValidationResponse = {
@@ -9980,17 +9980,17 @@ export declare type ValidationResponse = {
 export declare type ValidationFunction<T> = (value: T, validationResponse: ValidationResponse) => ValidationResponse | Promise<ValidationResponse>;
 export declare type MyMemberFormInputValues = {
     name?: string;
-    team?: Team;
+    Team?: Team0;
 };
 export declare type MyMemberFormValidationValues = {
     name?: ValidationFunction<string>;
-    team?: ValidationFunction<Team>;
+    Team?: ValidationFunction<Team0>;
 };
 export declare type FormProps<T> = Partial<T> & React.DOMAttributes<HTMLDivElement>;
 export declare type MyMemberFormOverridesProps = {
     MyMemberFormGrid?: FormProps<GridProps>;
     name?: FormProps<TextFieldProps>;
-    team?: FormProps<AutocompleteProps>;
+    Team?: FormProps<AutocompleteProps>;
 } & EscapeHatchProps;
 export declare type MyMemberFormProps = React.PropsWithChildren<{
     overrides?: MyMemberFormOverridesProps | undefined | null;

diff --git a/packages/codegen-ui-react/lib/__tests__/studio-ui-codegen-react-forms.test.ts b/packages/codegen-ui-react/lib/__tests__/studio-ui-codegen-react-forms.test.ts
@@ -64,7 +64,7 @@ describe('amplify form renderer tests', () => {
         'datastore/project-team-model',
       );
       // check nested model is imported
-      expect(componentText).toContain('import { Member, Team } from "../models";');
+      expect(componentText).toContain('import { Member, Team as Team0 } from "../models";');
 
       // check binding call is generated
       expect(componentText).toContain('const teamRecords = useDataStoreBinding({');
@@ -81,7 +81,7 @@ describe('amplify form renderer tests', () => {
       // Check that custom field label is working as expected
       expect(componentText).toContain('Team Label');
       // Check that Autocomplete custom display value is set
-      expect(componentText).toContain('team: (record) => record?.name');
+      expect(componentText).toContain('Team: (record) => record?.name');
 
       expect(componentText).toMatchSnapshot();
       expect(declaration).toMatchSnapshot();

diff --git a/packages/codegen-ui-react/lib/forms/form-renderer-helper/relationship.ts b/packages/codegen-ui-react/lib/forms/form-renderer-helper/relationship.ts
@@ -17,13 +17,20 @@ import { factory, NodeFlags, SyntaxKind } from 'typescript';
 import { FieldConfigMetadata, GenericDataRelationshipType, HasManyRelationshipType } from '@aws-amplify/codegen-ui';
 import { getRecordsName } from './form-state';
 import { buildBaseCollectionVariableStatement } from '../../react-studio-template-renderer-helper';
+import { ImportCollection, ImportSource } from '../../imports';
 
-export const buildRelationshipQuery = (relationship: GenericDataRelationshipType) => {
+export const buildRelationshipQuery = (
+  relationship: GenericDataRelationshipType,
+  importCollection: ImportCollection,
+) => {
   const { relatedModelName } = relationship;
   const itemsName = getRecordsName(relatedModelName);
   const objectProperties = [
     factory.createPropertyAssignment(factory.createIdentifier('type'), factory.createStringLiteral('collection')),
-    factory.createPropertyAssignment(factory.createIdentifier('model'), factory.createIdentifier(relatedModelName)),
+    factory.createPropertyAssignment(
+      factory.createIdentifier('model'),
+      factory.createIdentifier(importCollection.getMappedAlias(ImportSource.LOCAL_MODELS, relatedModelName)),
+    ),
   ];
   return buildBaseCollectionVariableStatement(
     itemsName,

diff --git a/packages/codegen-ui-react/lib/forms/form-renderer-helper/type-helper.ts b/packages/codegen-ui-react/lib/forms/form-renderer-helper/type-helper.ts
@@ -67,8 +67,8 @@ const getTypeNode = ({ componentType, dataType, isArray, isValidation, importCol
 
   if (dataType && typeof dataType === 'object' && 'model' in dataType) {
     const modelName = dataType.model;
-    importCollection?.addImport(ImportSource.LOCAL_MODELS, modelName);
-    typeNode = factory.createTypeReferenceNode(factory.createIdentifier(modelName));
+    const aliasedModel = importCollection?.addImport(ImportSource.LOCAL_MODELS, modelName);
+    typeNode = factory.createTypeReferenceNode(factory.createIdentifier(aliasedModel || modelName));
   }
 
   if (isValidation) {