@tsed/react-formio 2.3.1 → 3.0.0-alpha.1

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

@@ -1,50 +1,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();
+    const onAddAction = vi.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();
+    const onAddAction = vi.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();
+    const onAddAction = vi.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

@@ -1,6 +1,6 @@
 import classnames from "classnames";
 import noop from "lodash/noop";
-import React, { useState } from "react";
+import { useState } from "react";
 
 import { ActionSchema } from "../../interfaces";
 import { iconClass } from "../../utils/iconClass";
@@ -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)}