feat: add support for auth actions

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`amplify render tests actions DataStoreCreate action 1`] = `
+exports[`amplify render tests actions DataStore DataStoreCreate action 1`] = `
 Object {
   "componentText": "/* eslint-disable */
 import React from \\"react\\";
@@ -44,7 +44,172 @@ export default function CreateCustomerButton(
 }
 `;
 
-exports[`amplify render tests actions navigation action 1`] = `
+exports[`amplify render tests actions auth signs out 1`] = `
+Object {
+  "componentText": "/* eslint-disable */
+import React from \\"react\\";
+import {
+  EscapeHatchProps,
+  getOverrideProps,
+  useAuthSignOutAction,
+} from \\"@aws-amplify/ui-react/internal\\";
+import { Button, ButtonProps } from \\"@aws-amplify/ui-react\\";
+
+export type SignOutButtonProps = React.PropsWithChildren<
+  Partial<ButtonProps> & {
+    overrides?: EscapeHatchProps | undefined | null;
+  }
+>;
+export default function SignOutButton(
+  props: SignOutButtonProps
+): React.ReactElement {
+  const { overrides: overridesProp, ...rest } = props;
+  const overrides = { ...overridesProp };
+  const action = useAuthSignOutAction({ global: false });
+  return (
+    /* @ts-ignore: TS2322 */
+    <Button
+      children=\\"Sign out\\"
+      onClick={() => {
+        action.run();
+      }}
+      {...rest}
+      {...getOverrideProps(overrides, \\"SignOutButton\\")}
+    ></Button>
+  );
+}
+",
+  "declaration": undefined,
+  "renderComponentToFilesystem": [Function],
+}
+`;
+
+exports[`amplify render tests actions auth updates user attributes 1`] = `
+Object {
+  "componentText": "/* eslint-disable */
+import React from \\"react\\";
+import {
+  EscapeHatchProps,
+  getOverrideProps,
+  updateUserAttributesAction,
+} from \\"@aws-amplify/ui-react/internal\\";
+import { Button, ButtonProps } from \\"@aws-amplify/ui-react\\";
+
+export type UpdateUserAttributeButtonProps = React.PropsWithChildren<
+  Partial<ButtonProps> & {
+    overrides?: EscapeHatchProps | undefined | null;
+  }
+>;
+export default function UpdateUserAttributeButton(
+  props: UpdateUserAttributeButtonProps
+): React.ReactElement {
+  const { overrides: overridesProp, ...rest } = props;
+  const overrides = { ...overridesProp };
+  const action = updateUserAttributesAction({
+    attributes: { email: \\"newemail@domain.com\\", displayname: \\"newdisplayname\\" },
+  });
+  return (
+    /* @ts-ignore: TS2322 */
+    <Button
+      children=\\"Sign out\\"
+      onClick={() => {
+        action.run();
+      }}
+      {...rest}
+      {...getOverrideProps(overrides, \\"UpdateUserAttributeButton\\")}
+    ></Button>
+  );
+}
+",
+  "declaration": undefined,
+  "renderComponentToFilesystem": [Function],
+}
+`;
+
+exports[`amplify render tests actions navigation anchor navigation action 1`] = `
+Object {
+  "componentText": "/* eslint-disable */
+import React from \\"react\\";
+import {
+  EscapeHatchProps,
+  getOverrideProps,
+  useNavigateAction,
+} from \\"@aws-amplify/ui-react/internal\\";
+import { Button, ButtonProps } from \\"@aws-amplify/ui-react\\";
+
+export type NavigateButtonProps = React.PropsWithChildren<
+  Partial<ButtonProps> & {
+    overrides?: EscapeHatchProps | undefined | null;
+  }
+>;
+export default function NavigateButton(
+  props: NavigateButtonProps
+): React.ReactElement {
+  const { overrides: overridesProp, ...rest } = props;
+  const overrides = { ...overridesProp };
+  const action = useNavigateAction({ type: \\"anchor\\", about: \\"#about\\" });
+  return (
+    /* @ts-ignore: TS2322 */
+    <Button
+      children=\\"Go to About section\\"
+      onClick={() => {
+        action.run();
+      }}
+      {...rest}
+      {...getOverrideProps(overrides, \\"NavigateButton\\")}
+    ></Button>
+  );
+}
+",
+  "declaration": undefined,
+  "renderComponentToFilesystem": [Function],
+}
+`;
+
+exports[`amplify render tests actions navigation hard navigation action 1`] = `
+Object {
+  "componentText": "/* eslint-disable */
+import React from \\"react\\";
+import {
+  EscapeHatchProps,
+  getOverrideProps,
+  useNavigateAction,
+} from \\"@aws-amplify/ui-react/internal\\";
+import { Button, ButtonProps } from \\"@aws-amplify/ui-react\\";
+
+export type NavigateButtonProps = React.PropsWithChildren<
+  Partial<ButtonProps> & {
+    overrides?: EscapeHatchProps | undefined | null;
+  }
+>;
+export default function NavigateButton(
+  props: NavigateButtonProps
+): React.ReactElement {
+  const { overrides: overridesProp, ...rest } = props;
+  const overrides = { ...overridesProp };
+  const action = useNavigateAction({
+    type: \\"url\\",
+    url: \\"https://www.amazon.com/\\",
+  });
+  return (
+    /* @ts-ignore: TS2322 */
+    <Button
+      children=\\"Go to Amazon.com\\"
+      onClick={() => {
+        action.run();
+      }}
+      {...rest}
+      {...getOverrideProps(overrides, \\"NavigateButton\\")}
+    ></Button>
+  );
+}
+",
+  "declaration": undefined,
+  "renderComponentToFilesystem": [Function],
+}
+`;
+
+exports[`amplify render tests actions navigation new tab navigation action 1`] = `
 Object {
   "componentText": "/* eslint-disable */
 import React from \\"react\\";

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

@@ -294,12 +294,34 @@ describe('amplify render tests', () => {
   });
 
   describe('actions', () => {
-    it('navigation action', () => {
-      expect(generateWithAmplifyRenderer('workflow/navigationAction')).toMatchSnapshot();
+    describe('navigation', () => {
+      it('hard navigation action', () => {
+        expect(generateWithAmplifyRenderer('workflow/hardNavigationAction')).toMatchSnapshot();
+      });
+
+      it('new tab navigation action', () => {
+        expect(generateWithAmplifyRenderer('workflow/newTabNavigationAction')).toMatchSnapshot();
+      });
+
+      it('anchor navigation action', () => {
+        expect(generateWithAmplifyRenderer('workflow/anchorNavigationAction')).toMatchSnapshot();
+      });
     });
 
-    it('DataStoreCreate action', () => {
-      expect(generateWithAmplifyRenderer('workflow/dataStoreCreateAction')).toMatchSnapshot();
+    describe('auth', () => {
+      it('signs out', () => {
+        expect(generateWithAmplifyRenderer('workflow/authSignOutAction')).toMatchSnapshot();
+      });
+
+      it('updates user attributes', () => {
+        expect(generateWithAmplifyRenderer('workflow/authUpdateUserAttributesAction')).toMatchSnapshot();
+      });
+    });
+
+    describe('DataStore', () => {
+      it('DataStoreCreate action', () => {
+        expect(generateWithAmplifyRenderer('workflow/dataStoreCreateAction')).toMatchSnapshot();
+      });
     });
   });
 

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

@@ -0,0 +1,23 @@
+{
+    "componentType": "Button",
+    "name": "NavigateButton",
+    "properties": {
+      "children": {
+        "value": "Go to About section"
+      }
+    },
+    "events": {
+      "click": {
+        "action": "Amplify.Navigate",
+        "parameters": {
+          "type": {
+            "value": "anchor"
+          },
+          "about": {
+            "value": "#about"
+          }
+        }
+      }
+    }
+  }
+

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

@@ -0,0 +1,20 @@
+{
+    "componentType": "Button",
+    "name": "SignOutButton",
+    "properties": {
+      "label": {
+        "value": "Sign out"
+      }
+    },
+    "events": {
+      "click": {
+        "action": "Amplify.AuthSignOut",
+        "parameters": {
+          "global": {
+            "value": false
+          }
+        }
+      }
+    }
+  }
+

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

@@ -0,0 +1,25 @@
+{
+    "componentType": "Button",
+    "name": "UpdateUserAttributeButton",
+    "properties": {
+      "label": {
+        "value": "Sign out"
+      }
+    },
+    "events": {
+      "click": {
+        "action": "Amplify.AuthUpdateUserAttributes",
+        "parameters": {
+          "attributes": {
+            "email": {
+              "value": "newemail@domain.com"
+            },
+            "displayname": {
+              "value": "newdisplayname"
+            }
+          }
+        }
+      }
+    }
+  }
+

packages/codegen-ui-react/lib/__tests__/studio-ui-json/workflow/navigationAction.json → packages/codegen-ui-react/lib/__tests__/studio-ui-json/workflow/hardNavigationAction.json

@@ -1,7 +1,11 @@
 {
   "componentType": "Button",
   "name": "NavigateButton",
-  "properties": {},
+  "properties": {
+    "children": {
+      "value": "Go to Amazon.com"
+    }
+  },
   "events": {
     "click": {
       "action": "Amplify.Navigate",
@@ -11,16 +15,8 @@
         },
         "url": {
           "value": "https://www.amazon.com/"
-        },
-        "target": {
-          "value": "newtab"
         }
       }
     }
-  },
-  "properties": {
-    "children": {
-      "value": "Go to Amazon.com (Open in new tab)"
-    }
   }
 }

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

@@ -0,0 +1,26 @@
+{
+    "componentType": "Button",
+    "name": "NavigateButton",
+    "properties": {
+      "children": {
+        "value": "Go to Amazon.com (Open in new tab)"
+      }
+    },
+    "events": {
+      "click": {
+        "action": "Amplify.Navigate",
+        "parameters": {
+          "type": {
+            "value": "url"
+          },
+          "url": {
+            "value": "https://www.amazon.com/"
+          },
+          "target": {
+            "value": "newtab"
+          }
+        }
+      }
+    }
+  }
+

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

@@ -39,13 +39,17 @@ import { ImportCollection, ImportSource } from './imports';
 enum Action {
   'Amplify.Navigate' = 'Amplify.Navigate',
   'Amplify.DataStoreCreateItem' = 'Amplify.DataStoreCreateItem',
+  'Amplify.AuthSignOut' = 'Amplify.AuthSignOut',
+  'Amplify.AuthUpdateUserAttributes' = 'Amplify.AuthUpdateUserAttributes',
 }
 
 export default Action;
 
 export const ActionNameMapping: Partial<Record<Action, string>> = {
   [Action['Amplify.Navigate']]: 'useNavigateAction',
   [Action['Amplify.DataStoreCreateItem']]: 'useDataStoreCreateAction',
+  [Action['Amplify.AuthSignOut']]: 'useAuthSignOutAction',
+  [Action['Amplify.AuthUpdateUserAttributes']]: 'updateUserAttributesAction',
 };
 
 export function isAction(action: string): action is Action {
@@ -130,12 +134,12 @@ export function getActionParameterValue(
     importCollection.addImport(ImportSource.LOCAL_MODELS, value as string);
     return factory.createIdentifier(value as string);
   }
-  if (key === 'fields') {
+  if (key === 'fields' || key === 'attributes') {
     return factory.createObjectLiteralExpression(
-      Object.entries(value).map(([fieldsKey, fieldsValue]) =>
+      Object.entries(value).map(([nestedKey, nestedValue]) =>
         factory.createPropertyAssignment(
-          factory.createIdentifier(fieldsKey),
-          getActionParameterValue(fieldsKey, fieldsValue, importCollection),
+          factory.createIdentifier(nestedKey),
+          getActionParameterValue(nestedKey, nestedValue, importCollection),
         ),
       ),
       false,