feat: add support for DataStore actions (#365)

* test: move workflow test to example schemas * feat: add support for DataStore actions
aws-amplify · Feb 24, 2022 · 63a3067 · 63a3067
1 parent 6ac08d2
commit 63a3067
Show file tree

Hide file tree

Showing 7 changed files with 192 additions and 6 deletions.
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
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`amplify render tests actions DataStore DataStoreCreate action 1`] = `
+exports[`amplify render tests actions DataStore DataStoreCreateItem 1`] = `
 Object {
   "componentText": "/* eslint-disable */
 import React from \\"react\\";
@@ -29,7 +29,7 @@ export default function CreateCustomerButton(
   return (
     /* @ts-ignore: TS2322 */
     <Button
-      children=\\"Save\\"
+      children=\\"Create\\"
       onClick={() => {
         action.run();
       }}
@@ -44,6 +44,95 @@ export default function CreateCustomerButton(
 }
 `;
 
+exports[`amplify render tests actions DataStore DataStoreDeleteItem 1`] = `
+Object {
+  "componentText": "/* eslint-disable */
+import React from \\"react\\";
+import {
+  EscapeHatchProps,
+  getOverrideProps,
+  useDataStoreDeleteAction,
+} from \\"@aws-amplify/ui-react/internal\\";
+import { Button, ButtonProps } from \\"@aws-amplify/ui-react\\";
+import { Customer } from \\"../models\\";
+
+export type DeleteCustomerButtonProps = React.PropsWithChildren<
+  Partial<ButtonProps> & {
+    overrides?: EscapeHatchProps | undefined | null;
+  }
+>;
+export default function DeleteCustomerButton(
+  props: DeleteCustomerButtonProps
+): React.ReactElement {
+  const { overrides: overridesProp, ...rest } = props;
+  const overrides = { ...overridesProp };
+  const action = useDataStoreDeleteAction({
+    model: Customer,
+    id: \\"d9887268-47dd-4899-9568-db5809218751\\",
+  });
+  return (
+    /* @ts-ignore: TS2322 */
+    <Button
+      children=\\"Delete\\"
+      onClick={() => {
+        action.run();
+      }}
+      {...rest}
+      {...getOverrideProps(overrides, \\"DeleteCustomerButton\\")}
+    ></Button>
+  );
+}
+",
+  "declaration": undefined,
+  "renderComponentToFilesystem": [Function],
+}
+`;
+
+exports[`amplify render tests actions DataStore DataStoreUpdateItem 1`] = `
+Object {
+  "componentText": "/* eslint-disable */
+import React from \\"react\\";
+import {
+  EscapeHatchProps,
+  getOverrideProps,
+  useDataStoreUpdateAction,
+} from \\"@aws-amplify/ui-react/internal\\";
+import { Button, ButtonProps } from \\"@aws-amplify/ui-react\\";
+import { Customer } from \\"../models\\";
+
+export type UpdateCustomerButtonProps = React.PropsWithChildren<
+  Partial<ButtonProps> & {
+    overrides?: EscapeHatchProps | undefined | null;
+  }
+>;
+export default function UpdateCustomerButton(
+  props: UpdateCustomerButtonProps
+): React.ReactElement {
+  const { overrides: overridesProp, ...rest } = props;
+  const overrides = { ...overridesProp };
+  const action = useDataStoreUpdateAction({
+    model: Customer,
+    id: \\"d9887268-47dd-4899-9568-db5809218751\\",
+    fields: { firstName: \\"Din\\", lastName: \\"Djarin\\" },
+  });
+  return (
+    /* @ts-ignore: TS2322 */
+    <Button
+      children=\\"Update\\"
+      onClick={() => {
+        action.run();
+      }}
+      {...rest}
+      {...getOverrideProps(overrides, \\"UpdateCustomerButton\\")}
+    ></Button>
+  );
+}
+",
+  "declaration": undefined,
+  "renderComponentToFilesystem": [Function],
+}
+`;
+
 exports[`amplify render tests actions auth signs out 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
@@ -311,8 +311,16 @@ describe('amplify render tests', () => {
     });
 
     describe('DataStore', () => {
-      it('DataStoreCreate action', () => {
-        expect(generateWithAmplifyRenderer('workflow/dataStoreCreateAction')).toMatchSnapshot();
+      it('DataStoreCreateItem', () => {
+        expect(generateWithAmplifyRenderer('workflow/dataStoreCreateItem')).toMatchSnapshot();
+      });
+
+      it('DataStoreUpdateItem', () => {
+        expect(generateWithAmplifyRenderer('workflow/dataStoreUpdateItem')).toMatchSnapshot();
+      });
+
+      it('DataStoreDeleteItem', () => {
+        expect(generateWithAmplifyRenderer('workflow/dataStoreDeleteItem')).toMatchSnapshot();
       });
     });
   });

diff --git a/packages/codegen-ui-react/lib/action.ts b/packages/codegen-ui-react/lib/action.ts
@@ -39,6 +39,8 @@ import { ImportCollection, ImportSource } from './imports';
 enum Action {
   'Amplify.Navigate' = 'Amplify.Navigate',
   'Amplify.DataStoreCreateItem' = 'Amplify.DataStoreCreateItem',
+  'Amplify.DataStoreUpdateItem' = 'Amplify.DataStoreUpdateItem',
+  'Amplify.DataStoreDeleteItem' = 'Amplify.DataStoreDeleteItem',
   'Amplify.AuthSignOut' = 'Amplify.AuthSignOut',
   'Amplify.AuthUpdateUserAttributes' = 'Amplify.AuthUpdateUserAttributes',
 }
@@ -48,6 +50,8 @@ export default Action;
 export const ActionNameMapping: Partial<Record<Action, string>> = {
   [Action['Amplify.Navigate']]: 'useNavigateAction',
   [Action['Amplify.DataStoreCreateItem']]: 'useDataStoreCreateAction',
+  [Action['Amplify.DataStoreUpdateItem']]: 'useDataStoreUpdateAction',
+  [Action['Amplify.DataStoreDeleteItem']]: 'useDataStoreDeleteAction',
   [Action['Amplify.AuthSignOut']]: 'useAuthSignOutAction',
   [Action['Amplify.AuthUpdateUserAttributes']]: 'updateUserAttributesAction',
 };

diff --git a/...hemas/workflow/dataStoreCreateAction.json → ...schemas/workflow/dataStoreCreateItem.json b/...hemas/workflow/dataStoreCreateAction.json → ...schemas/workflow/dataStoreCreateItem.json
@@ -20,7 +20,7 @@
   },
   "properties": {
     "children": {
-      "value": "Save"
+      "value": "Create"
     }
   }
 }
diff --git a/packages/codegen-ui/example-schemas/workflow/dataStoreDeleteItem.json b/packages/codegen-ui/example-schemas/workflow/dataStoreDeleteItem.json
@@ -0,0 +1,21 @@
+{
+  "componentType": "Button",
+  "name": "DeleteCustomerButton",
+  "properties": {},
+  "events": {
+    "click": {
+      "action": "Amplify.DataStoreDeleteItem",
+      "parameters": {
+        "model": "Customer",
+        "id": {
+          "value": "d9887268-47dd-4899-9568-db5809218751"
+        }
+      }
+    }
+  },
+  "properties": {
+    "children": {
+      "value": "Delete"
+    }
+  }
+}
diff --git a/packages/codegen-ui/example-schemas/workflow/dataStoreUpdateItem.json b/packages/codegen-ui/example-schemas/workflow/dataStoreUpdateItem.json
@@ -0,0 +1,29 @@
+{
+  "componentType": "Button",
+  "name": "UpdateCustomerButton",
+  "properties": {},
+  "events": {
+    "click": {
+      "action": "Amplify.DataStoreUpdateItem",
+      "parameters": {
+        "model": "Customer",
+        "id": {
+          "value": "d9887268-47dd-4899-9568-db5809218751"
+        },
+        "fields": {
+          "firstName": {
+            "value": "Din"
+          },
+          "lastName": {
+            "value": "Djarin"
+          }
+        }
+      }
+    }
+  },
+  "properties": {
+    "children": {
+      "value": "Update"
+    }
+  }
+}
diff --git a/packages/codegen-ui/lib/types/studio-types.ts b/packages/codegen-ui/lib/types/studio-types.ts
@@ -503,7 +503,13 @@ export type BoundStudioComponentEvent = {
   bindingEvent: string;
 };
 
-export type ActionStudioComponentEvent = NavigationAction | AuthSignOutAction | AuthUpdateUserAttributesAction;
+export type ActionStudioComponentEvent =
+  | NavigationAction
+  | AuthSignOutAction
+  | AuthUpdateUserAttributesAction
+  | DataStoreCreateItemAction
+  | DataStoreUpdateItemAction
+  | DataStoreDeleteItemAction;
 
 export type NavigationAction = {
   action: 'Amplify.Navigation';
@@ -531,6 +537,35 @@ export type AuthUpdateUserAttributesAction = {
   };
 };
 
+export type DataStoreCreateItemAction = {
+  action: 'Amplify.DataStoreCreateItemAction';
+  parameters: {
+    model: string;
+    fields: {
+      [propertyName: string]: StudioComponentProperty;
+    };
+  };
+};
+
+export type DataStoreUpdateItemAction = {
+  action: 'Amplify.DataStoreUpdateItemAction';
+  parameters: {
+    model: string;
+    id: StudioComponentProperty;
+    fields: {
+      [propertyName: string]: StudioComponentProperty;
+    };
+  };
+};
+
+export type DataStoreDeleteItemAction = {
+  action: 'Amplify.DataStoreDeleteItemAction';
+  parameters: {
+    model: string;
+    id: StudioComponentProperty;
+  };
+};
+
 export type StudioComponentEvents = {
   [eventName: string]: StudioComponentEvent;
 };