fix: store selected relationship data for scalar fields

aws-amplify · Aug 16, 2023 · 841abf5 · 841abf5
1 parent a3ba324
commit 841abf5
Show file tree

Hide file tree

Showing 10 changed files with 1,726 additions and 206 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
@@ -1184,6 +1184,30 @@ describe('amplify form renderer tests', () => {
       expect(componentText).toMatchSnapshot();
       expect(declaration).toMatchSnapshot();
     });
+
+    it('should render an update form with child field', () => {
+      const { componentText, declaration } = generateWithAmplifyFormRenderer(
+        'models/custom-key-model/forms/ChildItemUpdateForm',
+        'models/custom-key-model/schema',
+        { ...defaultCLIRenderConfig, ...rendererConfigWithGraphQL },
+        { isNonModelSupported: true, isRelationshipSupported: true },
+      );
+
+      expect(componentText).toMatchSnapshot();
+      expect(declaration).toMatchSnapshot();
+    });
+
+    it('should render an update form with id field instead of belongsTo', () => {
+      const { componentText, declaration } = generateWithAmplifyFormRenderer(
+        'models/comment-with-postID/forms/PostUpdateForm',
+        'models/comment-with-postID/schema',
+        { ...defaultCLIRenderConfig, ...rendererConfigWithGraphQL },
+        { isNonModelSupported: true, isRelationshipSupported: true },
+      );
+
+      expect(componentText).toMatchSnapshot();
+      expect(declaration).toMatchSnapshot();
+    });
   });
 
   describe('NoApi form tests', () => {

diff --git a/packages/codegen-ui-react/lib/forms/form-renderer-helper/form-state.ts b/packages/codegen-ui-react/lib/forms/form-renderer-helper/form-state.ts
@@ -20,6 +20,7 @@ import {
   isValidVariableName,
   isNonModelDataType,
   StudioForm,
+  StudioFormActionType,
 } from '@aws-amplify/codegen-ui';
 import {
   factory,
@@ -49,7 +50,7 @@ import {
   buildInitConstVariableExpression,
 } from '../../helpers';
 import { getElementAccessExpression } from './invalid-variable-helpers';
-import { shouldWrapInArrayField } from './render-checkers';
+import { isModelDataType, shouldWrapInArrayField } from './render-checkers';
 import { DataApiKind } from '../../react-render-config';
 
 // used just to sanitize nested array field names
@@ -237,10 +238,13 @@ export const getInitialValues = (
  */
 export const getUseStateHooks = (
   fieldConfigs: Record<string, FieldConfigMetadata>,
+  formActionType: StudioFormActionType,
   dataApi?: DataApiKind,
+  hasAutoComplete?: boolean,
 ): Statement[] => {
   const stateNames = new Set();
-  return Object.entries(fieldConfigs).reduce<Statement[]>((acc, [name, { sanitizedFieldName, relationship }]) => {
+  return Object.entries(fieldConfigs).reduce<Statement[]>((acc, fieldConfig) => {
+    const [name, { sanitizedFieldName, relationship }] = fieldConfig;
     const fieldName = name.split('.')[0];
     const renderedFieldName = sanitizedFieldName || fieldName;
 
@@ -268,6 +272,14 @@ export const getUseStateHooks = (
     if (dataApi === 'GraphQL' && relationship) {
       acc.push(buildUseStateExpression(`${renderedFieldName}Loading`, factory.createFalse()));
       acc.push(buildUseStateExpression(`${renderedFieldName}Records`, factory.createArrayLiteralExpression([], false)));
+      if (formActionType === 'update' && hasAutoComplete && !isModelDataType(fieldConfig[1])) {
+        acc.push(
+          buildUseStateExpression(
+            `selected${capitalizeFirstLetter(renderedFieldName)}Records`,
+            factory.createArrayLiteralExpression([], false),
+          ),
+        );
+      }
     }
     return acc;
   }, []);

diff --git a/packages/codegen-ui-react/lib/forms/form-renderer-helper/model-values.ts b/packages/codegen-ui-react/lib/forms/form-renderer-helper/model-values.ts
@@ -19,6 +19,7 @@ import {
   InternalError,
   ConcatenatedStudioComponentProperty,
   HasManyRelationshipType,
+  StudioFormActionType,
 } from '@aws-amplify/codegen-ui';
 import { StudioFormInputFieldProperty } from '@aws-amplify/codegen-ui/lib/types/form/input-config';
 import {
@@ -46,6 +47,7 @@ import { buildAccessChain, getRecordsName } from './form-state';
 import { getElementAccessExpression, getValidProperty } from './invalid-variable-helpers';
 import { isEnumDataType, isModelDataType } from './render-checkers';
 import { DataApiKind } from '../../react-render-config';
+import { capitalizeFirstLetter } from '../../helpers';
 
 export const getDisplayValueObjectName = 'getDisplayValue';
 
@@ -74,7 +76,13 @@ const getDisplayValueCallChain = ({ fieldName, recordString }: { fieldName: stri
     compositeDogRecords.find((r) => r.description === value)
   )
  */
-export function getDisplayValueScalar(fieldName: string, model: string, key: string) {
+export function getDisplayValueScalar(
+  fieldName: string,
+  model: string,
+  key: string,
+  dataApi?: DataApiKind,
+  formActionType?: StudioFormActionType,
+) {
   const recordString = 'r';
 
   return factory.createConditionalExpression(
@@ -87,39 +95,110 @@ export function getDisplayValueScalar(fieldName: string, model: string, key: str
       ),
       undefined,
       [
-        factory.createCallExpression(
-          factory.createPropertyAccessExpression(
-            factory.createIdentifier(getRecordsName(model)),
-            factory.createIdentifier('find'),
-          ),
-          undefined,
-          [
-            factory.createArrowFunction(
-              undefined,
+        dataApi === 'GraphQL' && formActionType === 'update'
+          ? factory.createBinaryExpression(
+              factory.createCallExpression(
+                factory.createPropertyAccessExpression(
+                  factory.createIdentifier(`selected${capitalizeFirstLetter(fieldName)}Records`),
+                  factory.createIdentifier('find'),
+                ),
+                undefined,
+                [
+                  factory.createArrowFunction(
+                    undefined,
+                    undefined,
+                    [
+                      factory.createParameterDeclaration(
+                        undefined,
+                        undefined,
+                        undefined,
+                        factory.createIdentifier(recordString),
+                        undefined,
+                        undefined,
+                        undefined,
+                      ),
+                    ],
+                    undefined,
+                    factory.createToken(SyntaxKind.EqualsGreaterThanToken),
+                    factory.createBinaryExpression(
+                      factory.createPropertyAccessExpression(
+                        factory.createIdentifier(recordString),
+                        factory.createIdentifier('id'),
+                      ),
+                      factory.createToken(SyntaxKind.EqualsEqualsEqualsToken),
+                      factory.createIdentifier('value'),
+                    ),
+                  ),
+                ],
+              ),
+              factory.createToken(SyntaxKind.QuestionQuestionToken),
+              factory.createCallExpression(
+                factory.createPropertyAccessExpression(
+                  factory.createIdentifier(getRecordsName(model)),
+                  factory.createIdentifier('find'),
+                ),
+                undefined,
+                [
+                  factory.createArrowFunction(
+                    undefined,
+                    undefined,
+                    [
+                      factory.createParameterDeclaration(
+                        undefined,
+                        undefined,
+                        undefined,
+                        factory.createIdentifier(recordString),
+                        undefined,
+                        undefined,
+                      ),
+                    ],
+                    undefined,
+                    factory.createToken(SyntaxKind.EqualsGreaterThanToken),
+                    factory.createBinaryExpression(
+                      factory.createPropertyAccessExpression(
+                        factory.createIdentifier(recordString),
+                        factory.createIdentifier(key),
+                      ),
+                      factory.createToken(SyntaxKind.EqualsEqualsEqualsToken),
+                      factory.createIdentifier('value'),
+                    ),
+                  ),
+                ],
+              ),
+            )
+          : factory.createCallExpression(
+              factory.createPropertyAccessExpression(
+                factory.createIdentifier(getRecordsName(model)),
+                factory.createIdentifier('find'),
+              ),
               undefined,
               [
-                factory.createParameterDeclaration(
+                factory.createArrowFunction(
                   undefined,
                   undefined,
+                  [
+                    factory.createParameterDeclaration(
+                      undefined,
+                      undefined,
+                      undefined,
+                      factory.createIdentifier(recordString),
+                      undefined,
+                      undefined,
+                    ),
+                  ],
                   undefined,
-                  factory.createIdentifier(recordString),
-                  undefined,
-                  undefined,
+                  factory.createToken(SyntaxKind.EqualsGreaterThanToken),
+                  factory.createBinaryExpression(
+                    factory.createPropertyAccessExpression(
+                      factory.createIdentifier(recordString),
+                      factory.createIdentifier(key),
+                    ),
+                    factory.createToken(SyntaxKind.EqualsEqualsEqualsToken),
+                    factory.createIdentifier('value'),
+                  ),
                 ),
               ],
-              undefined,
-              factory.createToken(SyntaxKind.EqualsGreaterThanToken),
-              factory.createBinaryExpression(
-                factory.createPropertyAccessExpression(
-                  factory.createIdentifier(recordString),
-                  factory.createIdentifier(key),
-                ),
-                factory.createToken(SyntaxKind.EqualsEqualsEqualsToken),
-                factory.createIdentifier('value'),
-              ),
             ),
-          ],
-        ),
       ],
     ),
     factory.createToken(SyntaxKind.ColonToken),

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
@@ -30,6 +30,7 @@ import {
   GenericDataModel,
   GenericDataField,
   GenericDataSchema,
+  StudioFormActionType,
 } from '@aws-amplify/codegen-ui';
 import { plural } from 'pluralize';
 import {
@@ -1070,6 +1071,7 @@ export const buildGetRelationshipModels = (
   primaryKeys: string[],
   importCollection: ImportCollection,
   dataApi?: DataApiKind,
+  formActionType?: StudioFormActionType,
 ) => {
   const recordIdentifier = factory.createIdentifier('record');
 
@@ -1370,11 +1372,19 @@ export const buildGetRelationshipModels = (
           factory.createIdentifier(`${fieldName}Record`),
         ]),
       ),
-      factory.createExpressionStatement(
-        factory.createCallExpression(getSetNameIdentifier(`${fieldName}Records`), undefined, [
-          factory.createArrayLiteralExpression([factory.createIdentifier(`${relatedModelName}Record`)]),
-        ]),
-      ),
+      formActionType === 'update'
+        ? factory.createExpressionStatement(
+            factory.createCallExpression(
+              getSetNameIdentifier(`selected${capitalizeFirstLetter(fieldName)}Records`),
+              undefined,
+              [factory.createArrayLiteralExpression([factory.createIdentifier(`${relatedModelName}Record`)])],
+            ),
+          )
+        : factory.createExpressionStatement(
+            factory.createCallExpression(getSetNameIdentifier(`${fieldName}Records`), undefined, [
+              factory.createArrayLiteralExpression([factory.createIdentifier(`${relatedModelName}Record`)]),
+            ]),
+          ),
     ];
   }
 

diff --git a/packages/codegen-ui-react/lib/forms/form-renderer-helper/render-array-field.ts b/packages/codegen-ui-react/lib/forms/form-renderer-helper/render-array-field.ts
@@ -13,7 +13,7 @@
   See the License for the specific language governing permissions and
   limitations under the License.
  */
-import { FieldConfigMetadata, LabelDecorator } from '@aws-amplify/codegen-ui';
+import { FieldConfigMetadata, LabelDecorator, StudioFormActionType } from '@aws-amplify/codegen-ui';
 import { Expression, factory, Identifier, JsxAttribute, JsxChild, NodeFlags, SyntaxKind } from 'typescript';
 import {
   buildAccessChain,
@@ -132,6 +132,7 @@ export const renderArrayFieldComponent = (
   labelDecorator?: LabelDecorator,
   isRequired?: boolean,
   dataApi: DataApiKind = 'DataStore',
+  formActionType?: StudioFormActionType,
 ) => {
   const fieldConfig = fieldConfigs[fieldName];
   const { sanitizedFieldName, dataType, componentType } = fieldConfig;
@@ -264,8 +265,8 @@ export const renderArrayFieldComponent = (
       undefined,
       factory.createToken(SyntaxKind.EqualsGreaterThanToken),
       dataApi === 'GraphQL' && !isModelDataType(fieldConfig)
-        ? getDisplayValueScalar(fieldName, fieldName, scalarKey)
-        : getDisplayValueScalar(fieldName, scalarModel, scalarKey),
+        ? getDisplayValueScalar(fieldName, fieldName, scalarKey, dataApi, formActionType)
+        : getDisplayValueScalar(fieldName, scalarModel, scalarKey, dataApi, formActionType),
     );
   }
 
@@ -375,8 +376,8 @@ export const renderArrayFieldComponent = (
                   factory.createExpressionStatement(
                     factory.createCallExpression(setFieldValueIdentifier, undefined, [
                       dataApi === 'GraphQL'
-                        ? getDisplayValueScalar(fieldName, fieldName, scalarKey)
-                        : getDisplayValueScalar(fieldName, scalarModel, scalarKey),
+                        ? getDisplayValueScalar(fieldName, fieldName, scalarKey, dataApi, formActionType)
+                        : getDisplayValueScalar(fieldName, scalarModel, scalarKey, dataApi, formActionType),
                     ]),
                   ),
                   factory.createExpressionStatement(

diff --git a/packages/codegen-ui-react/lib/forms/react-form-renderer.ts b/packages/codegen-ui-react/lib/forms/react-form-renderer.ts
@@ -478,7 +478,7 @@ export abstract class ReactFormTemplateRenderer extends StudioTemplateRenderer<
 
     statements.push(getInitialValues(formMetadata.fieldConfigs, this.component));
 
-    statements.push(...getUseStateHooks(formMetadata.fieldConfigs, dataApi));
+    statements.push(...getUseStateHooks(formMetadata.fieldConfigs, formActionType, dataApi, hasAutoComplete));
 
     statements.push(...getAutocompleteOptions(formMetadata.fieldConfigs, hasAutoComplete, dataApi));
 
@@ -532,6 +532,7 @@ export abstract class ReactFormTemplateRenderer extends StudioTemplateRenderer<
               this.primaryKeys!,
               this.importCollection,
               dataApi,
+              formActionType,
             ),
           );
         }

diff --git a/packages/codegen-ui-react/lib/react-component-renderer.ts b/packages/codegen-ui-react/lib/react-component-renderer.ts
@@ -118,6 +118,7 @@ export class ReactComponentRenderer<TPropIn> extends ComponentRendererBase<
           labelDecorator,
           isRequired,
           this.importCollection.rendererConfig?.apiConfiguration?.dataApi,
+          this.componentMetadata.formMetadata?.formActionType,
         );
       }
     }

diff --git a/packages/codegen-ui/example-schemas/models/comment-with-postID/forms/PostUpdateForm.json b/packages/codegen-ui/example-schemas/models/comment-with-postID/forms/PostUpdateForm.json
@@ -0,0 +1,12 @@
+{
+    "name": "PostUpdateForm",
+    "dataType": {
+        "dataSourceType": "DataStore",
+        "dataTypeName": "Post"
+    },
+    "formActionType": "update",
+    "fields": {},
+    "sectionalElements": {},
+    "style": {},
+    "cta": {}
+  }
diff --git a/packages/codegen-ui/example-schemas/models/custom-key-model/forms/ChildItemUpdateForm.json b/packages/codegen-ui/example-schemas/models/custom-key-model/forms/ChildItemUpdateForm.json
@@ -0,0 +1,12 @@
+{
+    "name": "ChildItemUpdateForm",
+    "dataType": {
+        "dataSourceType": "DataStore",
+        "dataTypeName": "ChildItem"
+    },
+    "formActionType": "update",
+    "fields": {},
+    "sectionalElements": {},
+    "style": {},
+    "cta": {}
+  }