@tsed/react-formio 2.3.1 → 2.3.3

package/package.json

@@ -1,16 +1,19 @@
 {
   "name": "@tsed/react-formio",
-  "version": "2.3.1",
+  "version": "2.3.3",
   "description": "Provide a react formio wrapper. Written in TypeScript.",
-  "main": "dist/index.js",
-  "module": "dist/index.modern.js",
+  "main": "./dist/index.js",
+  "module": "./dist/index.modern.js",
   "exports": {
-    "import": "dist/index.modern.js",
-    "require": "dist/index.js"
+    ".": {
+      "tsed-source": "./src/index.ts",
+      "import": "./dist/index.modern.js",
+      "require": "./dist/index.js",
+      "default": "./dist/index.modern.js"
+    }
   },
   "source": "src/index.ts",
   "scripts": {
-    "lint": "eslint \"**/*.{js,jsx,ts,tsx}\"",
     "lint:fix": "yarn lint --fix",
     "test": "cross-env NODE_ENV=test jest --coverage",
     "test:coverage:update": "write-coverage",
@@ -20,7 +23,7 @@
   "dependencies": {
     "classnames": "^2.3.1",
     "eventemitter2": "^6.4.3",
-    "prop-types": "^15.7.2"
+    "prop-types": "15.8.1"
   },
   "peerDependencies": {
     "@formio/choices.js": ">=9.0.1",
@@ -35,8 +38,9 @@
     "tooltip.js": ">=1.3.3"
   },
   "devDependencies": {
-    "@tsed/tailwind": "2.3.1",
-    "@tsed/tailwind-formio": "2.3.1"
+    "@tsed/tailwind": "2.3.3",
+    "@tsed/tailwind-formio": "2.3.3",
+    "microbundle": "0.13.0"
   },
   "repository": "https://github.com/TypedProject/tsed-formio",
   "bugs": {

package/src/components/__fixtures__/form-actions.json

@@ -0,0 +1,240 @@
+[
+  {
+    "name": "webhook",
+    "title": "Webhook (Premium)",
+    "description": "Allows you to trigger an external interface.",
+    "priority": 0,
+    "defaults": {
+      "handler": ["after"],
+      "method": ["create", "update", "delete"],
+      "priority": 0,
+      "name": "webhook",
+      "title": "Webhook (Premium)"
+    },
+    "premium": true
+  },
+  {
+    "name": "sql",
+    "title": "SQL Query",
+    "description": "Allows you to execute a remote SQL Query.",
+    "priority": 0,
+    "defaults": {
+      "handler": ["after"],
+      "method": ["create"],
+      "priority": 0,
+      "name": "sql",
+      "title": "SQL Query"
+    }
+  },
+  {
+    "name": "role",
+    "title": "Role Assignment",
+    "description": "Provides the Role Assignment capabilities.",
+    "priority": 1,
+    "defaults": {
+      "handler": ["after"],
+      "method": ["create"],
+      "priority": 1,
+      "name": "role",
+      "title": "Role Assignment"
+    },
+    "access": {
+      "handler": false,
+      "method": false
+    }
+  },
+  {
+    "name": "resetpass",
+    "title": "Reset Password",
+    "description": "Provides a way to reset a password field.",
+    "defaults": {
+      "handler": ["after", "before"],
+      "method": ["form", "create"],
+      "priority": 0,
+      "name": "resetpass",
+      "title": "Reset Password"
+    },
+    "access": {
+      "handler": false,
+      "method": false
+    }
+  },
+  {
+    "name": "save",
+    "title": "Save Submission",
+    "description": "Saves the submission into the database.",
+    "priority": 10,
+    "defaults": {
+      "handler": ["before"],
+      "method": ["create", "update"],
+      "priority": 10,
+      "name": "save",
+      "title": "Save Submission"
+    },
+    "access": {
+      "handler": false,
+      "method": false
+    }
+  },
+  {
+    "name": "login",
+    "title": "Login",
+    "description": "Provides a way to login to the application.",
+    "priority": 2,
+    "defaults": {
+      "handler": ["before"],
+      "method": ["create"],
+      "priority": 2,
+      "name": "login",
+      "title": "Login"
+    },
+    "access": {
+      "handler": false,
+      "method": false
+    }
+  },
+  {
+    "name": "office365contact",
+    "title": "Office 365 Contacts (Premium)",
+    "description": "Allows you to integrate into your Office 365 Contacts.",
+    "priority": 0,
+    "defaults": {
+      "handler": ["after"],
+      "method": ["create", "update", "delete"],
+      "priority": 0,
+      "name": "office365contact",
+      "title": "Office 365 Contacts (Premium)"
+    },
+    "premium": true
+  },
+  {
+    "name": "office365calendar",
+    "title": "Office 365 Calendar (Premium)",
+    "description": "Allows you to integrate into your Office 365 Calendar.",
+    "premium": true,
+    "priority": 0,
+    "defaults": {
+      "handler": ["after"],
+      "method": ["create", "update", "delete"],
+      "priority": 0,
+      "name": "office365calendar",
+      "title": "Office 365 Calendar (Premium)"
+    }
+  },
+  {
+    "name": "hubspotContact",
+    "title": "Hubspot Contact (Premium)",
+    "description": "Allows you to change contact fields in hubspot.",
+    "priority": 0,
+    "defaults": {
+      "handler": ["after"],
+      "method": ["create"],
+      "priority": 0,
+      "name": "hubspotContact",
+      "title": "Hubspot Contact (Premium)"
+    },
+    "premium": true
+  },
+  {
+    "name": "oauth",
+    "title": "OAuth (Premium)",
+    "description": "Provides OAuth authentication behavior to this form.",
+    "priority": 20,
+    "defaults": {
+      "handler": ["after"],
+      "method": ["form", "create"],
+      "priority": 20,
+      "name": "oauth",
+      "title": "OAuth (Premium)"
+    },
+    "premium": true
+  },
+  {
+    "name": "ldap",
+    "title": "LDAP Login (Premium)",
+    "description": "Provides ldap login.",
+    "priority": 3,
+    "defaults": {
+      "handler": ["before"],
+      "method": ["create"],
+      "priority": 3,
+      "name": "ldap",
+      "title": "LDAP Login (Premium)"
+    },
+    "premium": true
+  },
+  {
+    "name": "googlesheet",
+    "title": "Google Sheets (Premium)",
+    "description": "Allows you to integrate data into Google sheets.",
+    "priority": 0,
+    "defaults": {
+      "handler": ["after"],
+      "method": ["create", "update", "delete"],
+      "priority": 0,
+      "name": "googlesheet",
+      "title": "Google Sheets (Premium)"
+    },
+    "premium": true
+  },
+  {
+    "name": "sqlconnector",
+    "title": "SQL Connector (Premium)",
+    "description": "Allows you to execute a remote SQL Query via Resquel.",
+    "priority": 0,
+    "defaults": {
+      "handler": ["after"],
+      "method": ["create", "update", "delete"],
+      "priority": 0,
+      "name": "sqlconnector",
+      "title": "SQL Connector (Premium)"
+    },
+    "premium": true
+  },
+  {
+    "name": "jira",
+    "title": "Jira (Premium)",
+    "description": "Allows you to create issues within Jira.",
+    "priority": 0,
+    "defaults": {
+      "handler": ["after"],
+      "method": ["create", "update", "delete"],
+      "priority": 0,
+      "name": "jira",
+      "title": "Jira (Premium)"
+    },
+    "premium": true
+  },
+  {
+    "name": "group",
+    "title": "Group Assignment (Premium)",
+    "premium": true,
+    "description": "Provides the Group Assignment capabilities.",
+    "priority": 5,
+    "defaults": {
+      "handler": ["after"],
+      "method": ["create", "update", "delete"],
+      "priority": 5,
+      "name": "group",
+      "title": "Group Assignment (Premium)"
+    },
+    "access": {
+      "handler": false,
+      "method": false
+    }
+  },
+  {
+    "name": "twilioSMS",
+    "title": "Twilio SMS (Premium)",
+    "premium": true,
+    "description": "Allows you to send SMS to phone numbers.",
+    "priority": 0,
+    "defaults": {
+      "handler": ["after"],
+      "method": ["create"],
+      "priority": 0,
+      "name": "twilioSMS",
+      "title": "Twilio SMS (Premium)"
+    }
+  }
+]

package/src/components/actions-table/__fixtures__/data.json

@@ -0,0 +1,12 @@
+[
+  {
+    "_id": "602967600685b2158b24e99a",
+    "handler": ["before"],
+    "method": ["create", "update"],
+    "priority": 10,
+    "name": "save",
+    "title": "Save Submission",
+    "form": "602967600685b24dbe24e999",
+    "machineName": "tcspjwhsevrzpcd:testForm:save"
+  }
+]

package/src/components/actions-table/actionsTable.component.spec.tsx

@@ -2,49 +2,80 @@ import { fireEvent, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import React from "react";
 
-import { Sandbox } from "./actionsTable.stories";
+import availableActions from "../__fixtures__/form-actions.json";
+import data from "./__fixtures__/data.json";
+import { ActionsTable } from "./actionsTable.component";
+
+const args: any = {
+  data: data,
+  availableActions: availableActions.map(({ name, title }) => ({
+    label: title,
+    value: name
+  })),
+  operations: [
+    {
+      title: "Edit",
+      action: "edit",
+      alias: "row",
+      path: "/resources/:resourceId/submissions/:submissionId",
+      icon: "edit",
+      permissionsResolver() {
+        return true;
+      }
+    },
+    {
+      action: "delete",
+      path: "/resources/:resourceId/submissions/:submissionId/delete",
+      icon: "trash",
+      buttonType: "danger",
+      permissionsResolver() {
+        return true;
+      }
+    }
+  ]
+};
 
 describe("ActionsTable", () => {
   it("should render the table actions", async () => {
     const onAddAction = jest.fn();
 
-    render(<Sandbox {...Sandbox.args} onAddAction={onAddAction} />);
+    render(<ActionsTable {...args} onAddAction={onAddAction} />);
 
-    const btn = screen.getByRole("button", { name: /add action/i });
+    const btn = screen.getByTestId("action-table-add");
     const cells = screen.getAllByRole("cell");
     const options = screen.getAllByRole("option");
 
     expect(btn).toHaveProperty("disabled");
     expect(btn.innerHTML).toMatch("Add action");
     expect(cells[0].innerHTML).toMatch("Save Submission");
-    expect(options.length).toEqual(Sandbox.args.availableActions.length + 1);
+    expect(options.length).toEqual(availableActions.length + 1);
 
     expect(options[0].innerHTML).toMatch("Select an action");
-    expect(options[1].innerHTML).toMatch("Email");
+    expect(options[1].innerHTML).toMatch("Webhook (Premium)");
   });
   it("should not call addAction when the default item is selected", async () => {
     const onAddAction = jest.fn();
 
-    render(<Sandbox {...Sandbox.args} onAddAction={onAddAction} />);
+    render(<ActionsTable {...args} onAddAction={onAddAction} />);
 
-    const btn = screen.getByRole("button", { name: /add action/i });
+    const btn = screen.getByTestId("action-table-add");
 
-    await fireEvent.click(btn);
+    fireEvent.click(btn);
     expect(onAddAction).not.toHaveBeenCalled();
   });
   it("should call addAction with the selected action", async () => {
     const onAddAction = jest.fn();
 
-    render(<Sandbox {...Sandbox.args} onAddAction={onAddAction} />);
+    render(<ActionsTable {...args} onAddAction={onAddAction} />);
 
-    const btn = screen.getByRole("button", { name: /add action/i });
+    const btn = screen.getByTestId("action-table-add");
     const select = screen.getByRole("combobox");
 
-    await userEvent.selectOptions(select, String(Sandbox.args.availableActions[1].value));
+    await userEvent.selectOptions(select, String(args.availableActions[1].value));
 
-    await fireEvent.click(btn);
+    fireEvent.click(btn);
 
     expect(btn).not.toHaveProperty("disabled", true);
-    expect(onAddAction).toHaveBeenCalledWith("webhook");
+    expect(onAddAction).toHaveBeenCalledWith("sql");
   });
 });

package/src/components/actions-table/actionsTable.component.tsx

@@ -35,6 +35,7 @@ export function ActionsTable({
     <Table {...props} disableFilters={disableFilters} disablePagination={disablePagination} columns={columns}>
       <div className={"pagination-group"}>
         <Select
+          data-testid={"action-table-select"}
           name={"actions"}
           value={currentAction}
           choices={[{ label: i18n("Select an action"), value: "" }].concat(availableActions)}
@@ -42,7 +43,7 @@ export function ActionsTable({
         />
         <div className={"pl-3"}>
           <button
-            data-testid={"submit"}
+            data-testid={"action-table-add"}
             disabled={currentAction === ""}
             className={"btn btn-success"}
             onClick={() => currentAction && onAddAction(currentAction)}