feat: have Autocomplete props support composite keys

aws-amplify · Dec 13, 2022 · 9b197c1 · 9b197c1
1 parent daf5a0b
commit 9b197c1
Show file tree

Hide file tree

Showing 21 changed files with 2,726 additions and 664 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
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
@@ -97,7 +97,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: (r) => r?.name');
 
       expect(componentText).toMatchSnapshot();
       expect(declaration).toMatchSnapshot();
@@ -115,7 +115,7 @@ describe('amplify form renderer tests', () => {
       expect(componentText).toContain('const postRecords = useDataStoreBinding({');
 
       // check custom display value is set
-      expect(componentText).toContain('Posts: (record) => record?.title');
+      expect(componentText).toContain('Posts: (r) => r?.title');
 
       expect(componentText).toMatchSnapshot();
       expect(declaration).toMatchSnapshot();
@@ -136,7 +136,7 @@ describe('amplify form renderer tests', () => {
       expect(componentText).toContain('await record.Posts.toArray()');
 
       // check custom display value is set
-      expect(componentText).toContain('Posts: (record) => record?.title');
+      expect(componentText).toContain('Posts: (r) => r?.title');
 
       // check linked data useState is generate
       expect(componentText).toContain('const [linkedPosts, setLinkedPosts] = React.useState([]);');
@@ -154,8 +154,8 @@ describe('amplify form renderer tests', () => {
         'datastore/tag-post',
       );
       // get displayValue function
-      expect(componentText).toContain('statuses: (record) => {');
-      expect(componentText).toContain('return enumDisplayValueMap[record];');
+      expect(componentText).toContain('statuses: (r) => {');
+      expect(componentText).toContain('return enumDisplayValueMap[r];');
       // ArrayField returns the item on a badge click
       expect(componentText).toContain('setFieldValue(items[index]);');
       // set the badgeText param
@@ -178,7 +178,7 @@ describe('amplify form renderer tests', () => {
       expect(componentText).toContain('const studentRecords = useDataStoreBinding({');
 
       // check custom display value is set
-      expect(componentText).toContain('Students: (record) => record?.name');
+      expect(componentText).toContain('Students: (r) => r?.name');
 
       expect(componentText).toMatchSnapshot();
       expect(declaration).toMatchSnapshot();
@@ -199,7 +199,7 @@ describe('amplify form renderer tests', () => {
       expect(componentText).toContain('const linkedStudents = record ? await record.Students.toArray() : [];');
 
       // check custom display value is set
-      expect(componentText).toContain('Students: (record) => record?.name');
+      expect(componentText).toContain('Students: (r) => r?.name');
 
       // check linked data useState is generate
       expect(componentText).toContain('const [linkedStudents, setLinkedStudents] = React.useState([]);');
@@ -385,8 +385,8 @@ describe('amplify form renderer tests', () => {
         // hasOne
         expect(componentText).toContain('specialTeacherId: specialTeacherIdProp');
         expect(componentText).toContain('await DataStore.query(CPKTeacher, specialTeacherIdProp)');
-        expect(componentText).toContain('Student: (record) => record?.specialStudentId');
-        expect(componentText).toContain('id: r.specialStudentId');
+        expect(componentText).toContain('Student: (r) => r?.specialStudentId');
+        expect(componentText).toContain('JSON.stringify({ specialStudentId: r?.specialStudentId })');
 
         // manyToMany
         expect(componentText).toContain('const count = cPKClassesMap.get(r.specialClassId)');
@@ -404,6 +404,16 @@ describe('amplify form renderer tests', () => {
         expect(componentText).toMatchSnapshot();
         expect(declaration).toMatchSnapshot();
       });
+
+      it('should render an update form for model with composite keys', () => {
+        const { componentText, declaration } = generateWithAmplifyFormRenderer(
+          'forms/composite-dog-datastore-update',
+          'datastore/composite-relationships',
+        );
+
+        expect(componentText).toMatchSnapshot();
+        expect(declaration).toMatchSnapshot();
+      });
     });
   });
 });
diff --git a/packages/codegen-ui-react/lib/forms/form-renderer-helper/all-props.ts b/packages/codegen-ui-react/lib/forms/form-renderer-helper/all-props.ts
@@ -25,7 +25,7 @@ import {
 } from './event-handler-props';
 import { getArrayChildRefName, resetValuesName } from './form-state';
 import { shouldWrapInArrayField } from './render-checkers';
-import { getAutocompleteOptionsProp } from './display-value';
+import { getAutocompleteOptionsProp } from './model-values';
 import { buildCtaLayoutProperties } from '../../react-component-render-helper';
 
 export const addFormAttributes = (component: StudioComponent | StudioComponentChild, formMetadata: FormMetadata) => {

diff --git a/packages/codegen-ui-react/lib/forms/form-renderer-helper/cta-props.ts b/packages/codegen-ui-react/lib/forms/form-renderer-helper/cta-props.ts
@@ -24,7 +24,7 @@ import {
   ExpressionStatement,
 } from 'typescript';
 import { lowerCaseFirst } from '../../helpers';
-import { getDisplayValueObjectName } from './display-value';
+import { getDisplayValueObjectName } from './model-values';
 import { getSetNameIdentifier } from './form-state';
 import {
   buildHasManyRelationshipDataStoreStatements,