feat: mutations

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.run();
+        }}
+        {...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.run();
+        }}
+        {...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();
+  });
+});

packages/codegen-ui-react/lib/react-component-render-helper.ts

@@ -19,6 +19,7 @@ import {
   ConcatenatedStudioComponentProperty,
   ConditionalStudioComponentProperty,
   FixedStudioComponentProperty,
+  StateStudioComponentProperty,
   isAuthProperty,
   RelationalOperator,
   StudioComponent,
@@ -28,6 +29,7 @@ import {
   StudioComponentEvent,
   BoundStudioComponentEvent,
   ActionStudioComponentEvent,
+  MutationActionSetStateParameter,
 } from '@aws-amplify/codegen-ui';
 
 import {
@@ -50,6 +52,7 @@ import {
 
 import { ImportCollection, ImportSource } from './imports';
 import { jsonToLiteral } from './react-studio-template-renderer-helper';
+import { getStateName } from './workflow/mutation';
 
 export function getFixedComponentPropValueExpression(prop: FixedStudioComponentProperty): StringLiteral {
   return factory.createStringLiteral(prop.value.toString(), true);
@@ -84,6 +87,14 @@ export function isConditionalProperty(prop: StudioComponentProperty): prop is Co
   return 'condition' in prop;
 }
 
+export function isStateProperty(property: StudioComponentProperty): property is StateStudioComponentProperty {
+  return 'componentName' in property && 'property' in property;
+}
+
+export function isSetStateParameter(parameter: StudioComponentProperty): parameter is MutationActionSetStateParameter {
+  return 'componentName' in parameter && 'property' in parameter && 'set' in parameter;
+}
+
 export function isDefaultValueOnly(
   prop: StudioComponentProperty,
 ): prop is CollectionStudioComponentProperty | BoundStudioComponentProperty {
@@ -304,6 +315,45 @@ export function buildConcatAttr(prop: ConcatenatedStudioComponentProperty, propN
   return factory.createJsxAttribute(factory.createIdentifier(propName), factory.createJsxExpression(undefined, expr));
 }
 
+export function buildStateExpression(prop: StateStudioComponentProperty): Expression {
+  return factory.createIdentifier(getStateName(prop));
+}
+
+export function buildStateAttr(prop: StateStudioComponentProperty, propName: string): JsxAttribute {
+  const expr = buildStateExpression(prop);
+  return factory.createJsxAttribute(factory.createIdentifier(propName), factory.createJsxExpression(undefined, expr));
+}
+
+export function propertyToExpression(property: StudioComponentProperty): Expression {
+  if (isFixedPropertyWithValue(property)) {
+    return buildFixedLiteralExpression(property);
+  }
+
+  if (isBoundProperty(property)) {
+    return property.defaultValue === undefined
+      ? buildBindingExpression(property)
+      : buildBindingWithDefaultExpression(property, property.defaultValue);
+  }
+
+  if (isConcatenatedProperty(property)) {
+    return buildConcatExpression(property);
+  }
+
+  if (isConditionalProperty(property)) {
+    return buildConditionalExpression(property);
+  }
+
+  if (isStateProperty(property)) {
+    return buildStateExpression(property);
+  }
+
+  if (isAuthProperty(property)) {
+    return buildAuthExpression(property);
+  }
+
+  throw new Error(`Invalid property: ${JSON.stringify(property)}.`);
+}
+
 export function resolvePropToExpression(prop: StudioComponentProperty): Expression {
   if (isFixedPropertyWithValue(prop)) {
     const propValue = prop.value;

packages/codegen-ui-react/lib/react-studio-template-renderer.ts

@@ -76,7 +76,7 @@ import Primitive, {
   PrimitiveChildrenPropMapping,
 } from './primitive';
 import { RequiredKeys } from './utils/type-utils';
-import { getComponentActions, buildUseActionStatement } from './workflow';
+import { getComponentActions, buildUseActionStatement, buildStateStatements } from './workflow';
 
 export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer<
   string,
@@ -580,6 +580,11 @@ export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer
       statements.push(this.buildOverridesFromVariantsAndProp());
     }
 
+    const stateStatements = buildStateStatements(component);
+    stateStatements.forEach((entry) => {
+      statements.push(entry);
+    });
+
     const authStatement = this.buildUseAuthenticatedUserStatement(component);
     if (authStatement !== undefined) {
       this.importCollection.addMappedImport(ImportValue.USE_AUTH);