feat: workflow/action hooks (aws-amplify#1276)

* feat: useAuthSignOutAction hook (aws-amplify#1209)

* feat: useNavigateAction hook (aws-amplify#1213)

* feat: adding useStateMutationHook (aws-amplify#1228)

* feat: adding useStateMutationHook

* feat: add data store action hooks (aws-amplify#1253)

* chore: Action/Workflow hooks e2e tests (aws-amplify#1291)

Co-authored-by: Chenwei Zhang <[email protected]>

.changeset/quick-donuts-admire.md

@@ -0,0 +1,5 @@
+---
+"@aws-amplify/ui-react": patch
+---
+
+feat: Add Action/Workflow hooks

.github/workflows/tests.yml

@@ -55,7 +55,7 @@ jobs:
         uses: actions/setup-node@v2
         with:
           node-version: lts/*
-          cache: 'yarn'
+          cache: "yarn"
       - name: Install packages
         run: yarn --no-lockfile
       - name: Build ui package
@@ -104,7 +104,7 @@ jobs:
         uses: actions/setup-node@v2
         with:
           node-version: lts/*
-          cache: 'yarn'
+          cache: "yarn"
 
       - name: Restore node_modules cache
         uses: actions/cache@v2
@@ -162,15 +162,15 @@ jobs:
         include:
           - example: angular
             package: angular
-            tags: '@angular and not (@skip or @todo-angular)'
+            tags: "@angular and not (@skip or @todo-angular)"
 
           - example: next
             package: react
-            tags: '@react and not (@skip or @todo-react)'
+            tags: "@react and not (@skip or @todo-react)"
 
           - example: vue
             package: vue
-            tags: '@vue and not (@skip or @todo-vue)'
+            tags: "@vue and not (@skip or @todo-vue)"
 
     steps:
       - name: Checkout Amplify UI
@@ -193,7 +193,7 @@ jobs:
         uses: actions/setup-node@v2
         with:
           node-version: lts/*
-          cache: 'yarn'
+          cache: "yarn"
 
       - name: Restore cypress runner Cache
         uses: actions/cache@v2
@@ -265,10 +265,10 @@ jobs:
         run: yarn workspace ${{ matrix.example }}-example start & npx wait-on -c waitOnConfig.json -t 20000 http-get://localhost:3000/ui/components/authenticator/sign-in-with-username
 
       - name: Run E2E tests against ${{ matrix.example }} example
-        run: yarn workspace e2e test:authenticator
+        run: yarn workspace e2e test:examples
         env:
           # Override on the default value in `cypress.json` with framework-specific tag
-          TAGS: '${{ matrix.tags }}'
+          TAGS: "${{ matrix.tags }}"
 
           # Env values for testing flows
           DOMAIN: ${{ secrets.DOMAIN }}
@@ -295,7 +295,7 @@ jobs:
         uses: actions/setup-node@v2
         with:
           node-version: lts/*
-          cache: 'yarn'
+          cache: "yarn"
 
       - name: Restore cypress runner Cache
         uses: actions/cache@v2

environments/action-hooks/.gitignore

@@ -0,0 +1,20 @@
+#amplify-do-not-edit-begin
+amplify/\#current-cloud-backend
+amplify/.config/local-*
+amplify/logs
+amplify/mock-data
+amplify/backend/amplify-meta.json
+amplify/backend/.temp
+build/
+dist/
+node_modules/
+aws-exports.js
+awsconfiguration.json
+amplifyconfiguration.json
+amplifyconfiguration.dart
+amplify-build-config.json
+amplify-gradle-config.json
+amplifytools.xcconfig
+.secret-*
+**.sample
+#amplify-do-not-edit-end

environments/action-hooks/README.md

@@ -0,0 +1,24 @@
+# Action Hooks
+
+This backend is configured with Amplify Admin UI:
+
+- Authentication
+
+      	- `Email` is a required attribute, if not using a social provider to sign in
+      	- No screenshots are included as they contain secret IDs for the web apps
+
+## Using this Backend
+
+External contributors can re-create this backend by running:
+
+```shell
+amplify pull
+```
+
+Internal (Amplify UI team) contributors can use this backend directly by running:
+
+- NOTE: do _not_ pass in the `--yes` flag, as that can sometimes cause issues with the CLI not recognizing certain existing environment variables
+
+```shell
+amplify pull --appId d1r9l08y32q5fb --envName dev
+```

environments/action-hooks/package.json

@@ -0,0 +1,8 @@
+{
+  "private": true,
+  "name": "action-hooks",
+  "version": "0.0.1",
+  "scripts": {
+    "pull": "amplify pull --appId d1r9l08y32q5fb --envName dev"
+  }
+}

examples/next/pages/ui/hooks/actions/AuthActions.tsx

@@ -0,0 +1,7 @@
+import { Button } from '@aws-amplify/ui-react';
+import { useAuthSignOutAction } from '@aws-amplify/ui-react/internal';
+
+export const AuthSignOutButton = ({ children }) => {
+  const authSignOutAction = useAuthSignOutAction({ global: true });
+  return <Button onClick={authSignOutAction}>{children}</Button>;
+};