feat: add special case for fields and model action parameters (#358)

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

@@ -1,5 +1,49 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`amplify render tests actions DataStoreCreate action 1`] = `
+Object {
+  "componentText": "/* eslint-disable */
+import React from \\"react\\";
+import {
+  EscapeHatchProps,
+  getOverrideProps,
+  useDataStoreCreateAction,
+} from \\"@aws-amplify/ui-react/internal\\";
+import { Button, ButtonProps } from \\"@aws-amplify/ui-react\\";
+import { Customer } from \\"../models\\";
+
+export type CreateCustomerButtonProps = React.PropsWithChildren<
+  Partial<ButtonProps> & {
+    overrides?: EscapeHatchProps | undefined | null;
+  }
+>;
+export default function CreateCustomerButton(
+  props: CreateCustomerButtonProps
+): React.ReactElement {
+  const { overrides: overridesProp, ...rest } = props;
+  const overrides = { ...overridesProp };
+  const action = useDataStoreCreateAction({
+    model: Customer,
+    fields: { firstName: \\"Din\\", lastName: \\"Djarin\\" },
+  });
+  return (
+    /* @ts-ignore: TS2322 */
+    <Button
+      children=\\"Save\\"
+      onClick={() => {
+        action.run();
+      }}
+      {...rest}
+      {...getOverrideProps(overrides, \\"CreateCustomerButton\\")}
+    ></Button>
+  );
+}
+",
+  "declaration": undefined,
+  "renderComponentToFilesystem": [Function],
+}
+`;
+
 exports[`amplify render tests actions navigation action 1`] = `
 Object {
   "componentText": "/* eslint-disable */

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

@@ -297,6 +297,10 @@ describe('amplify render tests', () => {
     it('navigation action', () => {
       expect(generateWithAmplifyRenderer('workflow/navigationAction')).toMatchSnapshot();
     });
+
+    it('DataStoreCreate action', () => {
+      expect(generateWithAmplifyRenderer('workflow/dataStoreCreateAction')).toMatchSnapshot();
+    });
   });
 
   it('should render events', () => {

packages/codegen-ui-react/lib/__tests__/studio-ui-json/workflow/dataStoreCreateAction.json

@@ -0,0 +1,26 @@
+{
+  "componentType": "Button",
+  "name": "CreateCustomerButton",
+  "properties": {},
+  "events": {
+    "click": {
+      "action": "Amplify.DataStoreCreateItem",
+      "parameters": {
+        "model": "Customer",
+        "fields": {
+          "firstName": {
+            "value": "Din"
+          },
+          "lastName": {
+            "value": "Djarin"
+          }
+        }
+      }
+    }
+  },
+  "properties": {
+    "children": {
+      "value": "Save"
+    }
+  }
+}

packages/codegen-ui-react/lib/action.ts

@@ -38,12 +38,14 @@ import { ImportCollection, ImportSource } from './imports';
 
 enum Action {
   'Amplify.Navigate' = 'Amplify.Navigate',
+  'Amplify.DataStoreCreateItem' = 'Amplify.DataStoreCreateItem',
 }
 
 export default Action;
 
 export const ActionNameMapping: Partial<Record<Action, string>> = {
   [Action['Amplify.Navigate']]: 'useNavigateAction',
+  [Action['Amplify.DataStoreCreateItem']]: 'useDataStoreCreateAction',
 };
 
 export function isAction(action: string): action is Action {
@@ -86,7 +88,7 @@ export function buildUseActionStatement(
           undefined,
           undefined,
           factory.createCallExpression(factory.createIdentifier(actionHookName), undefined, [
-            buildActionParameters(action),
+            buildActionParameters(action, importCollection),
           ]),
         ),
       ],
@@ -99,24 +101,49 @@ export function buildUseActionStatement(
  *
  * model and fields are special cases. All other fields are StudioComponentProperty
  */
-export function buildActionParameters(action: ActionStudioComponentEvent): ObjectLiteralExpression {
+export function buildActionParameters(
+  action: ActionStudioComponentEvent,
+  importCollection: ImportCollection,
+): ObjectLiteralExpression {
   if (action.parameters) {
     // TODO: add special case for model and fields
     return factory.createObjectLiteralExpression(
-      Object.entries(action.parameters).map(
-        ([key, value]) =>
-          factory.createPropertyAssignment(
-            factory.createIdentifier(key),
-            actionParameterToExpression(value as StudioComponentProperty),
-          ),
-        false,
+      Object.entries(action.parameters).map(([key, value]) =>
+        factory.createPropertyAssignment(
+          factory.createIdentifier(key),
+          getActionParameterValue(key, value, importCollection),
+        ),
       ),
+      false,
     );
   }
   // TODO: determine what should be used when no parameters
   return factory.createObjectLiteralExpression([], false);
 }
 
+export function getActionParameterValue(
+  key: string,
+  value: StudioComponentProperty | { [key: string]: StudioComponentProperty } | string,
+  importCollection: ImportCollection,
+): Expression {
+  if (key === 'model') {
+    importCollection.addImport(ImportSource.LOCAL_MODELS, value as string);
+    return factory.createIdentifier(value as string);
+  }
+  if (key === 'fields') {
+    return factory.createObjectLiteralExpression(
+      Object.entries(value).map(([fieldsKey, fieldsValue]) =>
+        factory.createPropertyAssignment(
+          factory.createIdentifier(fieldsKey),
+          getActionParameterValue(fieldsKey, fieldsValue, importCollection),
+        ),
+      ),
+      false,
+    );
+  }
+  return actionParameterToExpression(value as StudioComponentProperty);
+}
+
 export function actionParameterToExpression(parameter: StudioComponentProperty): Expression {
   if (isFixedPropertyWithValue(parameter)) {
     return buildFixedLiteralExpression(parameter);