fix: add state for state reference in set state param (#397)

aws-amplify · Feb 25, 2022 · 3a031b6 · 3a031b6
1 parent b676997
commit 3a031b6
Show file tree

Hide file tree

Showing 4 changed files with 112 additions and 1 deletion.
diff --git a/packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap b/packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap
@@ -5776,6 +5776,60 @@ export default function SetStateWithoutInitialValue(
 }
 `;
 
+exports[`amplify render tests mutations supports nested mutation 1`] = `
+Object {
+  "componentText": "/* eslint-disable */
+import React from \\"react\\";
+import {
+  EscapeHatchProps,
+  getOverrideProps,
+  useStateMutationAction,
+} from \\"@aws-amplify/ui-react/internal\\";
+import { Button, Flex, FlexProps, Text } from \\"@aws-amplify/ui-react\\";
+
+export type NestedMutationProps = React.PropsWithChildren<
+  Partial<FlexProps> & {
+    overrides?: EscapeHatchProps | undefined | null;
+  }
+>;
+export default function NestedMutation(
+  props: NestedMutationProps
+): React.ReactElement {
+  const { overrides, ...rest } = props;
+  const [mutatedValueChildren, setMutatedValueChildren] =
+    useStateMutationAction(\\"Default Value\\");
+  const [stateSourceChildren, setStateSourceChildren] =
+    useStateMutationAction(\\"State Value\\");
+  const statePropertyMutationClick = () => {
+    setMutatedValueChildren(stateSourceLabel);
+  };
+  return (
+    /* @ts-ignore: TS2322 */
+    <Flex {...rest} {...getOverrideProps(overrides, \\"NestedMutation\\")}>
+      <Text
+        children={mutatedValueChildren}
+        {...getOverrideProps(overrides, \\"MutatedValue\\")}
+      ></Text>
+      <Button
+        children=\\"Apply State Property Mutation\\"
+        onClick={() => {
+          statePropertyMutationClick();
+        }}
+        {...getOverrideProps(overrides, \\"StatePropertyMutation\\")}
+      ></Button>
+      <Text
+        children={stateSourceChildren}
+        {...getOverrideProps(overrides, \\"StateSource\\")}
+      ></Text>
+    </Flex>
+  );
+}
+",
+  "declaration": undefined,
+  "renderComponentToFilesystem": [Function],
+}
+`;
+
 exports[`amplify render tests mutations supports two-way data binding on form elements 1`] = `
 Object {
   "componentText": "/* eslint-disable */

diff --git a/packages/codegen-ui-react/lib/__tests__/studio-ui-codegen-react.test.ts b/packages/codegen-ui-react/lib/__tests__/studio-ui-codegen-react.test.ts
@@ -377,6 +377,10 @@ describe('amplify render tests', () => {
     it('controls an input that is modified by a button', () => {
       expect(generateWithAmplifyRenderer('workflow/inputMutationOnClick')).toMatchSnapshot();
     });
+
+    it('supports nested mutation', () => {
+      expect(generateWithAmplifyRenderer('workflow/nestedMutation')).toMatchSnapshot();
+    });
   });
 
   describe('default value', () => {

diff --git a/packages/codegen-ui-react/lib/workflow/mutation.ts b/packages/codegen-ui-react/lib/workflow/mutation.ts
@@ -107,6 +107,9 @@ export function getActionStateParameters(action: ActionStudioComponentEvent): St
         if (key === 'fields' || key === 'attributes') {
           return Object.values(parameter);
         }
+        if (isSetStateParameter(parameter)) {
+          return [parameter, parameter.set];
+        }
         return parameter;
       })
       .filter((parameter) => isStateProperty(parameter) || isSetStateParameter(parameter));
@@ -358,7 +361,7 @@ function mutationReferenceReducerWithComponentType(componentType: string) {
     return {
       ...mutationReferences,
       [stateReference.property]: propertyReferences.concat([
-        { addControlEvent: PrimitivesWithChangeEvent.has(componentType as Primitive) || !('set' in stateReference) },
+        { addControlEvent: PrimitivesWithChangeEvent.has(componentType as Primitive) },
       ]),
     };
   };

diff --git a/packages/codegen-ui/example-schemas/workflow/nestedMutation.json b/packages/codegen-ui/example-schemas/workflow/nestedMutation.json
@@ -0,0 +1,50 @@
+{
+  "id": "1234-5678-9010",
+  "componentType": "Flex",
+  "name": "NestedMutation",
+  "properties": {},
+  "children": [
+    {
+      "componentType": "Text",
+      "name": "MutatedValue",
+      "properties": {
+        "label": {
+          "value": "Default Value"
+        }
+      }
+    },
+    {
+      "componentType": "Button",
+      "name": "StatePropertyMutation",
+      "events": {
+        "click": {
+          "action": "Amplify.Mutation",
+          "parameters": {
+            "state": {
+              "componentName": "MutatedValue",
+              "property": "label",
+              "set": {
+                "componentName": "StateSource",
+                "property": "label"
+              }
+            }
+          }
+        }
+      },
+      "properties": {
+        "children": {
+          "value": "Apply State Property Mutation"
+        }
+      }
+    },
+    {
+      "componentType": "Text",
+      "name": "StateSource",
+      "properties": {
+        "label": {
+          "value": "State Value"
+        }
+      }
+    }
+  ]
+}