feat: add mutations (#371)

* feat: add mutation types

* feat: mutations

* fix: add properties check to address failing integ test

* chore: update types and remove replacing flat call with flatMap

Co-authored-by: Alexander Harris <alharris@amazon.com>

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

@@ -5159,6 +5159,104 @@ export default function SocialA(props: SocialAProps): React.ReactElement {
 "
 `;
 
+exports[`amplify render tests mutations form 1`] = `
+Object {
+  "componentText": "/* eslint-disable */
+import React from \\"react\\";
+import {
+  EscapeHatchProps,
+  getOverrideProps,
+  useDataStoreUpdateAction,
+} from \\"@aws-amplify/ui-react/internal\\";
+import { Button, Flex, FlexProps, TextField } from \\"@aws-amplify/ui-react\\";
+import { Customer } from \\"../models\\";
+
+export type MyFormProps = React.PropsWithChildren<
+  Partial<FlexProps> & {
+    overrides?: EscapeHatchProps | undefined | null;
+  }
+>;
+export default function MyForm(props: MyFormProps): React.ReactElement {
+  const { overrides, ...rest } = props;
+  const [usernameTextFieldValue, setUsernameTextFieldValue] =
+    useStateMutationAction(\\"vizsla\\");
+  const submitButtonClick = useDataStoreUpdateAction({
+    model: Customer,
+    id: \\"d9887268-47dd-4899-9568-db5809218751\\",
+    fields: { username: usernameTextFieldValue },
+  });
+  return (
+    /* @ts-ignore: TS2322 */
+    <Flex {...rest} {...getOverrideProps(overrides, \\"MyForm\\")}>
+      <TextField
+        label=\\"Username\\"
+        value={usernameTextFieldValue}
+        onChange={setUsernameTextFieldValue}
+        {...getOverrideProps(overrides, \\"UsernameTextField\\")}
+      ></TextField>
+      <Button
+        children=\\"Submit\\"
+        onClick={() => {
+          submitButtonClick();
+        }}
+        {...getOverrideProps(overrides, \\"SubmitButton\\")}
+      ></Button>
+    </Flex>
+  );
+}
+",
+  "declaration": undefined,
+  "renderComponentToFilesystem": [Function],
+}
+`;
+
+exports[`amplify render tests mutations internal mutation 1`] = `
+Object {
+  "componentText": "/* eslint-disable */
+import React from \\"react\\";
+import {
+  EscapeHatchProps,
+  getOverrideProps,
+} from \\"@aws-amplify/ui-react/internal\\";
+import { Button, Flex, FlexProps } from \\"@aws-amplify/ui-react\\";
+
+export type ColorChangeOnClickProps = React.PropsWithChildren<
+  Partial<FlexProps> & {
+    overrides?: EscapeHatchProps | undefined | null;
+  }
+>;
+export default function ColorChangeOnClick(
+  props: ColorChangeOnClickProps
+): React.ReactElement {
+  const { overrides, ...rest } = props;
+  const [coloredBoxBackgroundColor, setColoredBoxBackgroundColor] =
+    useStateMutationAction(\\"red\\");
+  const colorChangerButtonClick = () => {
+    setColoredBoxBackgroundColor(\\"blue\\");
+  };
+  return (
+    /* @ts-ignore: TS2322 */
+    <Flex {...rest} {...getOverrideProps(overrides, \\"ColorChangeOnClick\\")}>
+      <Flex
+        backgroundColor={coloredBoxBackgroundColor}
+        {...getOverrideProps(overrides, \\"ColoredBox\\")}
+      ></Flex>
+      <Button
+        children=\\"Change Color\\"
+        onClick={() => {
+          colorChangerButtonClick();
+        }}
+        {...getOverrideProps(overrides, \\"ColorChangerButton\\")}
+      ></Button>
+    </Flex>
+  );
+}
+",
+  "declaration": undefined,
+  "renderComponentToFilesystem": [Function],
+}
+`;
+
 exports[`amplify render tests primitives Built-in Iconset 1`] = `
 "/* eslint-disable */
 import React from \\"react\\";

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

@@ -329,6 +329,16 @@ describe('amplify render tests', () => {
     expect(generateWithAmplifyRenderer('workflow/event')).toMatchSnapshot();
   });
 
+  describe('mutations', () => {
+    it('form', () => {
+      expect(generateWithAmplifyRenderer('workflow/form')).toMatchSnapshot();
+    });
+
+    it('internal mutation', () => {
+      expect(generateWithAmplifyRenderer('workflow/internalMutation')).toMatchSnapshot();
+    });
+  });
+
   describe('default value', () => {
     it('should render bound default value', () => {
       expect(generateWithAmplifyRenderer('default-value-components/boundDefaultValue')).toMatchSnapshot();

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

@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`getActionStateParameters basic 1`] = `
+Array [
+  Object {
+    "componentName": "ColoredBox",
+    "property": "backgroundColor",
+    "set": Object {
+      "value": "something",
+    },
+  },
+]
+`;
+
+exports[`getComponentStateReferences basic 1`] = `
+Array [
+  Object {
+    "componentName": "UserNameTextField",
+    "property": "value",
+  },
+]
+`;

packages/codegen-ui-react/lib/__tests__/workflow/mutation.test.ts

@@ -0,0 +1,95 @@
+/*
+  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+
+  Licensed under the Apache License, Version 2.0 (the "License").
+  You may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+ */
+import { MutationAction, DataStoreUpdateItemAction } from '@aws-amplify/codegen-ui';
+import { getComponentStateReferences, getActionStateParameters } from '../../workflow/mutation';
+
+describe('getComponentStateReferences', () => {
+  test('basic', () => {
+    const clickEvent: DataStoreUpdateItemAction = {
+      action: 'Amplify.DataStoreUpdateItemAction',
+      parameters: {
+        model: 'Customer',
+        id: {
+          value: 'd9887268-47dd-4899-9568-db5809218751',
+        },
+        fields: {
+          username: {
+            componentName: 'UserNameTextField',
+            property: 'value',
+          },
+        },
+      },
+    };
+
+    const component = {
+      id: '1234-5678-9010',
+      componentType: 'Flex',
+      name: 'MyForm',
+      properties: {},
+      bindingProperties: {},
+      children: [
+        {
+          componentType: 'TextField',
+          name: 'UsernameTextField',
+          properties: {
+            label: {
+              value: 'Username',
+            },
+            value: {
+              value: 'vizsla',
+            },
+          },
+          bindingProperties: {},
+        },
+        {
+          componentType: 'Button',
+          name: 'SubmitButton',
+          properties: {
+            label: {
+              value: 'Username',
+            },
+            value: {
+              value: 'vizsla',
+            },
+          },
+          bindingProperties: {},
+          events: {
+            click: clickEvent,
+          },
+        },
+      ],
+    };
+    expect(getComponentStateReferences(component)).toMatchSnapshot();
+  });
+});
+
+describe('getActionStateParameters', () => {
+  test('basic', () => {
+    const action: MutationAction = {
+      action: 'Amplify.Mutation',
+      parameters: {
+        state: {
+          componentName: 'ColoredBox',
+          property: 'backgroundColor',
+          set: {
+            value: 'something',
+          },
+        },
+      },
+    };
+    expect(getActionStateParameters(action)).toMatchSnapshot();
+  });
+});