@tsed/react-formio 1.11.2 → 1.13.1

package/src/components/alert/alert.component.spec.tsx

@@ -0,0 +1,97 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import { Sandbox } from "./alert.stories";
+
+describe("Alert component", () => {
+  it("should NOT display the alert component when no error is received.", () => {
+    const { container } = render(<Sandbox {...Sandbox.args} error={null} />);
+
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it("should display an error when the error is in string format", () => {
+    const error = "error in string format";
+    const { getByRole } = render(<Sandbox {...Sandbox.args} error={error} />);
+
+    const alert = getByRole("alert") as HTMLDivElement;
+
+    expect(alert).toBeInTheDocument();
+    expect(alert).toHaveClass("alert alert-danger");
+    expect(alert).toHaveTextContent(error);
+  });
+
+  it("should display error(s) when the error is an array", () => {
+    const arrayOfErrors = ["first error", "second error", "third error"];
+    const joinedErrors = arrayOfErrors.map((error) => error).join("");
+    const { getByRole, getByText } = render(<Sandbox {...Sandbox.args} error={arrayOfErrors} />);
+
+    const alert = getByRole("alert") as HTMLDivElement;
+
+    expect(alert).toBeInTheDocument();
+    expect(alert).toHaveClass("alert alert-danger");
+    expect(getByText(joinedErrors)).toBeInTheDocument();
+  });
+
+  it("should display error's names paths and messages when the error is an object that has an 'errors' property that contains an array of error objects", () => {
+    const arrayOfErrors = {
+      errors: [
+        { name: "first error", path: "/path", message: "message" },
+        { name: "second error", path: "/path", message: "message" },
+        { name: "third error", path: "/path", message: "message" }
+      ]
+    };
+    const { getByRole } = render(<Sandbox {...Sandbox.args} error={arrayOfErrors} />);
+
+    const alert = getByRole("alert") as HTMLDivElement;
+
+    expect(alert).toBeInTheDocument();
+    expect(alert).toHaveClass("alert alert-danger");
+    expect(alert).toHaveTextContent(arrayOfErrors.errors.map((error) => `${error.name} (${error.path}) - ${error.message}`).join(""));
+  });
+
+  it("should display an error message when the error is a standard error", () => {
+    const standardError = { message: "first error" };
+    const { getByRole, getByText } = render(<Sandbox {...Sandbox.args} error={standardError} />);
+
+    const alert = getByRole("alert") as HTMLDivElement;
+
+    expect(alert).toBeInTheDocument();
+    expect(alert).toHaveClass("alert alert-danger");
+    expect(getByText(standardError.message)).toBeInTheDocument();
+  });
+
+  it("should display error(s) message(s) when the error is a joi validation error", () => {
+    const joiValidationError = { name: "ValidationError", details: [{ message: "message 1" }, { message: "message 2" }] };
+    const { getByRole, getByText } = render(<Sandbox {...Sandbox.args} error={joiValidationError} />);
+
+    const alert = getByRole("alert") as HTMLDivElement;
+
+    expect(alert).toBeInTheDocument();
+    expect(alert).toHaveClass("alert alert-danger");
+    expect(getByText("message 1")).toBeInTheDocument();
+    expect(getByText("message 2")).toBeInTheDocument();
+  });
+
+  it("should display a custom error message that asks to reload the form when a conflict error occurs in a form", () => {
+    const error = { _id: "some id", display: "some value" };
+    const messageReturned = "Another user has saved this form already. Please reload and re-apply your changes.";
+    const { getByRole } = render(<Sandbox {...Sandbox.args} error={error} />);
+
+    const alert = getByRole("alert") as HTMLDivElement;
+
+    expect(alert).toBeInTheDocument();
+    expect(alert).toHaveClass("alert alert-danger");
+    expect(alert).toHaveTextContent(messageReturned);
+  });
+
+  it("should display an error message by default when the error format does not match any of the conditions of the formatError() handler", () => {
+    const messageError: string = "An error occurred. See console logs for details.";
+    const { getByRole } = render(<Sandbox {...Sandbox.args} error={true} />);
+
+    const alert = getByRole("alert") as HTMLDivElement;
+
+    expect(alert).toBeInTheDocument();
+    expect(alert).toHaveClass("alert alert-danger");
+    expect(alert).toHaveTextContent(messageError);
+  });
+});

package/src/components/alert/alert.component.tsx

@@ -29,20 +29,14 @@ function formatError(error: any): any {
   }
 
   // If this is a joy validation error.
-  if (
-    Object.prototype.hasOwnProperty.call(error, "name") &&
-    error.name === "ValidationError"
-  ) {
+  if (Object.prototype.hasOwnProperty.call(error, "name") && error.name === "ValidationError") {
     return error.details.map((item: any, index: number) => {
       return <div key={index}>{item.message}</div>;
     });
   }
 
   // If a conflict error occurs on a form, the form is returned.
-  if (
-    Object.prototype.hasOwnProperty.call(error, "_id") &&
-    Object.prototype.hasOwnProperty.call(error, "display")
-  ) {
+  if (Object.prototype.hasOwnProperty.call(error, "_id") && Object.prototype.hasOwnProperty.call(error, "display")) {
     return "Another user has saved this form already. Please reload and re-apply your changes.";
   }
 

package/src/components/alert/alert.stories.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { Alert } from "./alert.component";
+
+export default {
+  title: "ReactFormio/Alert",
+  component: Alert,
+  argTypes: {},
+  parameters: {}
+};
+
+export const Sandbox = (args: any) => {
+  return <Alert {...args} />;
+};
+
+Sandbox.args = {
+  error: "error placeholder"
+};

package/src/components/card/card.component.tsx

@@ -7,11 +7,7 @@ export interface CardProps {
   className?: string;
 }
 
-export function Card({
-  children,
-  label,
-  className
-}: PropsWithChildren<CardProps>) {
+export function Card({ children, label, className }: PropsWithChildren<CardProps>) {
   return (
     <div className={classnames("card", className)}>
       <div className={"card-header "}>

package/src/components/form/form.component.tsx

@@ -17,13 +17,7 @@ export interface FormProps<Data = any> extends UseFormHookProps<Data> {
 export function Form(props: Partial<FormProps>) {
   const { element } = useForm(props);
 
-  return (
-    <div
-      data-testid={"formioContainer" + (props.name || "")}
-      ref={element}
-      className={props.className}
-    />
-  );
+  return <div data-testid={"formioContainer" + (props.name || "")} ref={element} className={props.className} />;
 }
 
 Form.propTypes = {
@@ -53,7 +47,8 @@ Form.propTypes = {
     noAlerts: PropTypes.bool,
     i18n: PropTypes.any,
     template: PropTypes.string,
-    saveDraft: PropTypes.bool
+    saveDraft: PropTypes.bool,
+    hooks: PropTypes.any
   }),
   onPrevPage: PropTypes.func,
   onNextPage: PropTypes.func,
@@ -62,6 +57,7 @@ Form.propTypes = {
   onCustomEvent: PropTypes.func,
   onComponentChange: PropTypes.func,
   onSubmit: PropTypes.func,
+  onAsyncSubmit: PropTypes.func,
   onSubmitDone: PropTypes.func,
   onFormLoad: PropTypes.func,
   onError: PropTypes.func,

package/src/components/form/form.stories.tsx

@@ -1,6 +1,7 @@
 import React from "react";
-import { Form } from "./form.component";
+import {Form} from "./form.component";
 import form from "../__fixtures__/form.fixture.json";
+import {Submission} from "../../interfaces";
 
 export default {
   title: "ReactFormio/Form",
@@ -25,7 +26,7 @@ export const Sandbox = (args: any) => {
       onFormReady={(formio) => {
         console.log("ready", formio);
       }}
-      options={{ template: "tailwind", iconset: "bx" }}
+      options={{template: "tailwind", iconset: "bx"}}
     />
   );
 };
@@ -33,3 +34,66 @@ export const Sandbox = (args: any) => {
 Sandbox.args = {
   form
 };
+
+export const TriggerError = (args: any) => {
+  delete args.onRender;
+  delete args.onComponentChange;
+
+  return (
+    <Form
+      {...args}
+      form={args.form}
+      onAsyncSubmit={(submission: Submission) => {
+        return new Promise((resolve, reject) => {
+          setTimeout(() => {
+            reject(new Error("server error"));
+          }, 500);
+        }).catch((error) => {
+          error.errors = {
+            "message": "My custom message about this field",
+            "type": "custom",
+            "path": ["firstName"],
+            "level": "error"
+          }
+          throw error
+        });
+      }}
+      options={{
+        hooks: {
+          template: "tailwind",
+          iconset: "bx"
+        }
+      }}
+    />
+  );
+};
+
+TriggerError.args = {
+  form: {
+    "type": "form",
+    "display": "form",
+    "tags": [],
+    "components": [
+      {
+        "label": "First name",
+        "widget": {
+          "type": "input"
+        },
+        "errorLabel": "",
+        "key": "firstName",
+        "inputType": "text",
+        "type": "textfield",
+        "id": "eqb1o4r",
+        "defaultValue": ""
+      },
+      {
+        "label": "Submit",
+        "showValidations": false,
+        "tableView": false,
+        "key": "submit",
+        "type": "button",
+        "input": true
+      }
+    ]
+  }
+};

package/src/components/form/useForm.hook.ts

@@ -38,14 +38,10 @@ export interface UseFormHookProps<Data = any> extends Record<string, any> {
   onNextPage?: (obj: FormPageChangeProps<Data>) => void;
   onCancel?: Function;
   onChange?: (submission: ChangedSubmission) => void;
-  onCustomEvent?: (obj: {
-    type: string;
-    event: string;
-    component: ExtendedComponentSchema;
-    data: any;
-  }) => void;
+  onCustomEvent?: (obj: { type: string; event: string; component: ExtendedComponentSchema; data: any }) => void;
   onComponentChange?: (component: ExtendedComponentSchema) => void;
   onSubmit?: (submission: Submission<Data>) => void;
+  onAsyncSubmit?: (submission: Submission<Data>) => Promise<void>;
   onSubmitDone?: (submission: Submission<Data>) => void;
   onFormLoad?: Function;
   onError?: (errors: any) => void;
@@ -66,13 +62,29 @@ export function useForm<Data = any>(props: UseFormHookProps<Data>) {
   const instance = useRef<Form>();
   const events = useRef<Map<string, any>>(new Map());
 
+  async function customValidation(submission: Submission, callback: (err: Error | null) => void) {
+    if (events.current.has("onAsyncSubmit")) {
+      try {
+        await events.current.get("onAsyncSubmit")(submission);
+      } catch (err) {
+        callback(err?.errors || err);
+      }
+    } else {
+      callback(null);
+    }
+  }
+
   const createWebForm = (srcOrForm: any, options: any) => {
     options = Object.assign({}, options);
-    srcOrForm =
-      typeof srcOrForm === "string" ? srcOrForm : cloneDeep(srcOrForm);
+    srcOrForm = typeof srcOrForm === "string" ? srcOrForm : cloneDeep(srcOrForm);
 
     if (!instance.current) {
       isLoaded.current = false;
+      options.hooks = {
+        ...(options.hooks || {}),
+        customValidation: options?.hooks?.customValidation || customValidation
+      };
+
       instance.current = new Form(element.current, srcOrForm, options);
 
       instance.current.onAny((event: string, ...args: any[]): void => {
@@ -81,9 +93,7 @@ export function useForm<Data = any>(props: UseFormHookProps<Data>) {
         }
 
         if (event.startsWith("formio.")) {
-          const funcName = `on${event.charAt(7).toUpperCase()}${event.slice(
-            8
-          )}`;
+          const funcName = `on${event.charAt(7).toUpperCase()}${event.slice(8)}`;
 
           if (funcName === "onChange") {
             if (isEqual(get(submission, "data"), args[0].data)) {
@@ -100,7 +110,9 @@ export function useForm<Data = any>(props: UseFormHookProps<Data>) {
               const fn = callLast(funcs[funcName], 100);
               events.current.set(funcName, fn);
             }
-            events.current.get(funcName)(...args);
+
+            instance.current.instance.setAlert("success", "");
+            events.current.get(funcName)(...args, instance.current);
           }
         }
       });
@@ -165,8 +177,11 @@ export function useForm<Data = any>(props: UseFormHookProps<Data>) {
   }, [props.onSubmit, events]);
 
   useEffect(() => {
-    props.onSubmitDone &&
-      events.current.set("onSubmitDone", props.onSubmitDone);
+    props.onAsyncSubmit && events.current.set("onAsyncSubmit", props.onAsyncSubmit);
+  }, [props.onAsyncSubmit, events]);
+
+  useEffect(() => {
+    props.onSubmitDone && events.current.set("onSubmitDone", props.onSubmitDone);
   }, [props.onSubmitDone, events]);
 
   return {

package/src/components/form-access/formAccess.component.tsx

@@ -1,12 +1,5 @@
 import PropTypes from "prop-types";
-import React, {
-  PropsWithChildren,
-  ReactElement,
-  useCallback,
-  useEffect,
-  useMemo,
-  useState
-} from "react";
+import React, { PropsWithChildren, ReactElement, useCallback, useEffect, useMemo, useState } from "react";
 import { FormOptions, FormSchema, Submission } from "../../interfaces";
 import { Card } from "../card/card.component";
 import { Form } from "../form/form.component";
@@ -29,18 +22,11 @@ export interface FormAccessProps {
   options?: FormOptions;
 }
 
-function useFormAccess({
-  form: formDefinition,
-  roles,
-  onSubmit,
-  options
-}: FormAccessProps) {
+function useFormAccess({ form: formDefinition, roles, onSubmit, options }: FormAccessProps) {
   // eslint-disable-next-line no-undef
   const form = useMemo(() => getFormAccess(roles), [roles]);
 
-  const [submissions, setSubmissions] = useState(() =>
-    dataAccessToSubmissions(formDefinition, form)
-  );
+  const [submissions, setSubmissions] = useState(() => dataAccessToSubmissions(formDefinition, form));
 
   const onChange = useCallback(
     (type: string, submission: Submission<AccessRoles>) => {
@@ -52,10 +38,7 @@ function useFormAccess({
   useEffect(() => {
     const input = dataAccessToSubmissions(formDefinition, form);
     if (formDefinition?._id) {
-      if (
-        shouldUpdate("access", submissions.access, input) ||
-        shouldUpdate("submissionAccess", submissions.submissionAccess, input)
-      ) {
+      if (shouldUpdate("access", submissions.access, input) || shouldUpdate("submissionAccess", submissions.submissionAccess, input)) {
         setSubmissions(input);
       }
     }
@@ -80,21 +63,10 @@ interface NamedFormAccessProps {
   options: any;
   onSubmit: any;
 
-  onChange(
-    name: "access" | "submissionAccess",
-    submission: Submission<AccessRoles>
-  ): void;
+  onChange(name: "access" | "submissionAccess", submission: Submission<AccessRoles>): void;
 }
 
-function NamedFormAccess({
-  name,
-  form,
-  submissions,
-  options,
-  onChange,
-  onSubmit,
-  children
-}: PropsWithChildren<NamedFormAccessProps>) {
+function NamedFormAccess({ name, form, submissions, options, onChange, onSubmit, children }: PropsWithChildren<NamedFormAccessProps>) {
   const [isValid, setIsValid] = useState(true);
 
   return (
@@ -110,35 +82,21 @@ function NamedFormAccess({
         options={options}
       />
 
-      <button
-        disabled={!isValid}
-        className={"mt-5 btn btn-primary"}
-        onClick={onSubmit}
-      >
+      <button disabled={!isValid} className={"mt-5 btn btn-primary"} onClick={onSubmit}>
         Save access
       </button>
 
       {children}
 
       <div className={"alert alert-warning mt-5"}>
-        Elevated permissions allow users to access and modify other user's
-        entities. Assign with caution.
+        Elevated permissions allow users to access and modify other user's entities. Assign with caution.
       </div>
     </>
   );
 }
 
-export function FormAccess(
-  props: PropsWithChildren<FormAccessProps>
-): ReactElement {
-  const {
-    type,
-    form,
-    submissions,
-    options,
-    onChange,
-    onSubmit
-  } = useFormAccess(props);
+export function FormAccess(props: PropsWithChildren<FormAccessProps>): ReactElement {
+  const { type, form, submissions, options, onChange, onSubmit } = useFormAccess(props);
 
   return (
     <div>
@@ -158,22 +116,16 @@ export function FormAccess(
         </Card>
         <div className={"w-1/4 pl-4"}>
           <Card label={"About Submission Data Permissions"}>
-            <p>
-              Submission Data Permissions allow you to control who can create,
-              view, and modify form submission data.
-            </p>
+            <p>Submission Data Permissions allow you to control who can create, view, and modify form submission data.</p>
 
             <ul className={"mt-5 pl-7 list-disc"}>
               <li className={"pb-2"}>
-                <strong>Own Permissions</strong> - These permissions apply if
-                the user is the original creator of the submission data and is
-                listed as the owner of the submission in submission.owner. This
-                allows users to create and edit their own submission data
+                <strong>Own Permissions</strong> - These permissions apply if the user is the original creator of the submission data and is
+                listed as the owner of the submission in submission.owner. This allows users to create and edit their own submission data
                 without seeing other user's data.
               </li>
               <li>
-                <strong>All Permissions</strong> - These permissions apply to
-                all submission data regardless of who owns it.
+                <strong>All Permissions</strong> - These permissions apply to all submission data regardless of who owns it.
               </li>
             </ul>
           </Card>
@@ -181,35 +133,20 @@ export function FormAccess(
       </div>
       <div className={"flex mb-5"}>
         <Card label={`Manage ${type} definition access`} className={"flex-1"}>
-          <NamedFormAccess
-            name={"access"}
-            form={form}
-            submissions={submissions}
-            onChange={onChange}
-            onSubmit={onSubmit}
-            options={options}
-          >
+          <NamedFormAccess name={"access"} form={form} submissions={submissions} onChange={onChange} onSubmit={onSubmit} options={options}>
             {props.children}
           </NamedFormAccess>
         </Card>
 
         <div className={"w-1/4 pl-4"}>
           <Card label={"About Form Definition Access"}>
-            <p>
-              These permissions allow you to give access to a single form's JSON
-              definition so they can render the form.
-            </p>
+            <p>These permissions allow you to give access to a single form's JSON definition so they can render the form.</p>
 
-            <p>
-              Typically you will want to allow all of your roles to be able to
-              Read the form definition.
-            </p>
+            <p>Typically you will want to allow all of your roles to be able to Read the form definition.</p>
 
             <p>
-              Each form also has an owner at <strong>form.owner</strong> which
-              is the user who created the form. In some applications users are
-              allowed to create their own forms. In those cases it is helpful to
-              have Owner based permissions as well.
+              Each form also has an owner at <strong>form.owner</strong> which is the user who created the form. In some applications users
+              are allowed to create their own forms. In those cases it is helpful to have Owner based permissions as well.
             </p>
           </Card>
         </div>

package/src/components/form-access/formAccess.schema.ts

@@ -1,13 +1,7 @@
 import { ExtendedComponentSchema } from "formiojs";
 import { FormSchema } from "../../interfaces/FormSchema";
 
-export function getRoleComponent({
-  label,
-  key,
-  description,
-  choices,
-  data
-}: any): ExtendedComponentSchema {
+export function getRoleComponent({ label, key, description, choices, data }: any): ExtendedComponentSchema {
   return {
     label,
     key,
@@ -36,18 +30,12 @@ export function getRoleComponent({
 }
 
 function toDescription(description: string, hr = true): string {
-  return (
-    '<span class="text-sm">' +
-    description +
-    "</span> " +
-    (hr ? '<hr class="mt-6 mb-5 border-gray-200 mx-20"/>' : "")
-  );
+  return '<span class="text-sm">' + description + "</span> " + (hr ? '<hr class="mt-6 mb-5 border-gray-200 mx-20"/>' : "");
 }
 
 export function getSubmissionPermissionForm({ choices }: any): FormSchema {
   return {
-    description:
-      "<strong>Elevated permissions allow users to access and modify other user's entities. Assign with caution.</strong>",
+    description: "<strong>Elevated permissions allow users to access and modify other user's entities. Assign with caution.</strong>",
     components: [
       getRoleComponent({
         key: "create_own",
@@ -120,13 +108,11 @@ export function getSubmissionPermissionForm({ choices }: any): FormSchema {
 
 export function getAccessPermissionForm({ choices }: any): FormSchema {
   return {
-    description:
-      "<strong>Elevated permissions allow users to access and modify other user's entities. Assign with caution.</strong>",
+    description: "<strong>Elevated permissions allow users to access and modify other user's entities. Assign with caution.</strong>",
     components: [
       getRoleComponent({
         key: "read_own",
-        label:
-          '<h4 class="text-gray-800">Read Form Definition (Restricted to owner)</h4>',
+        label: '<h4 class="text-gray-800">Read Form Definition (Restricted to owner)</h4>',
         description: toDescription(
           "The Read Own permission will allow a user, with one of the given Roles, to read a form. A user can only read a form if they are defined as its owner."
         ),
@@ -142,8 +128,7 @@ export function getAccessPermissionForm({ choices }: any): FormSchema {
       }),
       getRoleComponent({
         key: "update_own",
-        label:
-          '<h4 class="text-gray-800">Update Form Definition (Restricted to owner)</h4>',
+        label: '<h4 class="text-gray-800">Update Form Definition (Restricted to owner)</h4>',
         description: toDescription(
           "The Update Own permission will allow a user, with one of the given Roles, to update a form. A user can only update a form if they are defined as its owner."
         ),
@@ -159,8 +144,7 @@ export function getAccessPermissionForm({ choices }: any): FormSchema {
       }),
       getRoleComponent({
         key: "delete_own",
-        label:
-          '<h4 class="text-gray-800">Delete Form Definition (Restricted to owner)</h4>',
+        label: '<h4 class="text-gray-800">Delete Form Definition (Restricted to owner)</h4>',
         description: toDescription(
           "The Delete Own permission will allow a user, with one of the given Roles, to delete a form. A user can only delete a form if they are defined as its owner."
         ),

package/src/components/form-access/formAccess.stories.tsx

@@ -27,11 +27,8 @@ export default {
 };
 
 export const Sandbox = (args: any) => {
-  // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
   // @ts-ignore
-  return (
-    <FormAccess {...args} options={{ template: "tailwind", iconset: "bx" }} />
-  );
+  return <FormAccess {...args} options={{ template: "tailwind", iconset: "bx" }} />;
 };
 
 Sandbox.args = {
@@ -42,11 +39,7 @@ Sandbox.args = {
     owner: "5d0797a382461b6656d2c790",
     access: [
       {
-        roles: [
-          "5d0797bc872fc747da559858",
-          "5d0797bc872fc71d05559859",
-          "5d0797bc872fc7da3b55985a"
-        ],
+        roles: ["5d0797bc872fc747da559858", "5d0797bc872fc71d05559859", "5d0797bc872fc7da3b55985a"],
         type: "read_all"
       }
     ],

package/src/components/form-access/formAccess.utils.spec.ts

@@ -1,11 +1,5 @@
 import { FormSchema } from "../../interfaces";
-import {
-  dataAccessToSubmissions,
-  getFormAccess,
-  SubmissionAccess,
-  submissionsToDataAccess,
-  updateSubmissions
-} from "./formAccess.utils";
+import { dataAccessToSubmissions, getFormAccess, SubmissionAccess, submissionsToDataAccess, updateSubmissions } from "./formAccess.utils";
 
 const roles: any[] = [
   {
@@ -24,11 +18,7 @@ describe("formAccess.utils", () => {
         components: [],
         access: [
           {
-            roles: [
-              "5d0797bc872fc747da559858",
-              "5d0797bc872fc71d05559859",
-              "5d0797bc872fc7da3b55985a"
-            ],
+            roles: ["5d0797bc872fc747da559858", "5d0797bc872fc71d05559859", "5d0797bc872fc7da3b55985a"],
             type: "read_all"
           }
         ],
@@ -47,11 +37,7 @@ describe("formAccess.utils", () => {
         data: {
           delete_all: [],
           delete_own: [],
-          read_all: [
-            "5d0797bc872fc747da559858",
-            "5d0797bc872fc71d05559859",
-            "5d0797bc872fc7da3b55985a"
-          ],
+          read_all: ["5d0797bc872fc747da559858", "5d0797bc872fc71d05559859", "5d0797bc872fc7da3b55985a"],
           read_own: [],
           update_all: [],
           update_own: []
@@ -104,11 +90,7 @@ describe("formAccess.utils", () => {
         components: [],
         access: [
           {
-            roles: [
-              "5d0797bc872fc747da559858",
-              "5d0797bc872fc71d05559859",
-              "5d0797bc872fc7da3b55985a"
-            ],
+            roles: ["5d0797bc872fc747da559858", "5d0797bc872fc71d05559859", "5d0797bc872fc7da3b55985a"],
             type: "read_all"
           }
         ],