@tsed/react-formio 1.11.2 → 1.12.0

package/src/components/table/utils/useOperations.hook.tsx

@@ -29,18 +29,8 @@ export function useOperations<D extends object = {}>({
         {
           id: "operations",
           groupByBoundary: true,
-          Header: () => (
-            <div className={"text-center"}>{i18n("Operations")}</div>
-          ),
-          Cell: (props: any) => (
-            <CellOperations
-              {...props}
-              operations={operations}
-              onClick={onClick}
-              ctx={ctx}
-              i18n={i18n}
-            />
-          )
+          Header: () => <div className={"text-center"}>{i18n("Operations")}</div>,
+          Cell: (props: any) => <CellOperations {...props} operations={operations} onClick={onClick} ctx={ctx} i18n={i18n} />
         }
       ];
     });

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

@@ -0,0 +1,86 @@
+import * as React from "react";
+import {fireEvent, render, screen} from "@testing-library/react";
+import {Sandbox} from "./tabs.component.stories";
+import {Tabs} from "./tabs.component";
+
+describe("tabs", () => {
+  it("should display the tabs component and children", () => {
+    const items = [
+      {
+        action: "back",
+        exact: true,
+        icon: "chevron-left",
+        back: true
+      },
+      {
+        action: "edit",
+        exact: true,
+        icon: "edit",
+        label: "Edit"
+      }
+    ];
+
+    render(<Sandbox {...Sandbox.args} items={items}/>);
+
+    const tabsComponent = screen.getByTestId("tabs-comp");
+
+    const buttonsTabWrapper = screen.getAllByTitle("button-wrapper");
+    const chevronLeftButtonTabWrapper = buttonsTabWrapper[0];
+    const editButtonTabWrapper = buttonsTabWrapper[1];
+
+    const buttonsTab = screen.getAllByTitle("button-tab");
+    const chevronLeftButtonTab = buttonsTab[0];
+    const editButtonTab = buttonsTab[1];
+
+    const fontAwsomeChevronLeftIcon = "fa fa-chevron-left";
+    const fontAwsomeEditIcon = "fa fa-edit";
+
+    expect(tabsComponent).toBeInTheDocument();
+
+    expect(chevronLeftButtonTabWrapper).toContainElement(chevronLeftButtonTab);
+    expect(chevronLeftButtonTabWrapper).toContainHTML("-back");
+    expect(chevronLeftButtonTab).toBeInTheDocument();
+    expect(chevronLeftButtonTab).toContainHTML(fontAwsomeChevronLeftIcon);
+    expect(chevronLeftButtonTab).toHaveTextContent("");
+
+    expect(editButtonTabWrapper).toContainElement(editButtonTab);
+    expect(editButtonTabWrapper).not.toContainHTML("-back");
+    expect(editButtonTab).toBeInTheDocument();
+    expect(editButtonTab).toContainHTML(fontAwsomeEditIcon);
+    expect(editButtonTab).toHaveTextContent("Edit");
+  });
+
+  it("should call dispatcher when clicking on a button tab", () => {
+    const items = [
+      {
+        action: "back",
+        exact: true,
+        icon: "chevron-left",
+        back: true
+      },
+      {
+        action: "edit",
+        exact: true,
+        icon: "edit",
+        label: "Edit"
+      }
+    ];
+    const onClick = jest.fn();
+
+    render(<Tabs items={items} onClick={onClick}/>);
+
+    const buttonsTab = screen.getAllByTitle("button-tab");
+    const chevronLeftButtonTab = buttonsTab[0];
+    const editButtonTab = buttonsTab[1];
+
+    fireEvent.click(chevronLeftButtonTab);
+
+    expect(onClick).toHaveBeenCalledTimes(1);
+    expect(onClick).toHaveBeenCalledWith(items[0]);
+
+    fireEvent.click(editButtonTab);
+
+    expect(onClick).toHaveBeenCalledTimes(2);
+    expect(onClick).toHaveBeenCalledWith(items[1]);
+  });
+});

package/src/components/tabs/tabs.component.stories.tsx

@@ -93,9 +93,7 @@ function AddButton({ onCreate }: any) {
 }
 
 function HeaderChildren() {
-  return (
-    <div className={"px-3 bg-gray-100 border-b-1 border-gray-light"}>test</div>
-  );
+  return <div className={"px-3 bg-gray-100 border-b-1 border-gray-light"}>test</div>;
 }
 
 export const WithCloseable = (args: any) => {
@@ -104,12 +102,7 @@ export const WithCloseable = (args: any) => {
 
   return (
     <div className={"border-gray-300 border-1 shadow"}>
-      <Tabs
-        {...tabs}
-        i18n={(f) => f}
-        AddButton={AddButton}
-        HeaderChildren={HeaderChildren}
-      >
+      <Tabs {...tabs} i18n={(f) => f} AddButton={AddButton} HeaderChildren={HeaderChildren}>
         <div className={"p-5"}>{tabs?.current?.action}</div>
       </Tabs>
     </div>

package/src/components/tabs/tabs.component.tsx

@@ -2,51 +2,19 @@ import classnames from "classnames";
 import React, { PropsWithChildren } from "react";
 import { iconClass } from "../../utils/iconClass";
 
-export function ButtonTab({
-  icon,
-  back,
-  onClick,
-  isActive,
-  reverse,
-  children,
-  className,
-  after
-}: PropsWithChildren<any>) {
+export function ButtonTab({ icon, back, onClick, isActive, reverse, children, className, after }: PropsWithChildren<any>) {
   return (
-    <div
-      className={classnames(
-        "tw-tabs__button-wrapper",
-        isActive ? "-active" : "",
-        back ? "-back" : "",
-        className
-      )}
-    >
+    <div title={'button-wrapper'} className={classnames("tw-tabs__button-wrapper", isActive ? "-active" : "", back ? "-back" : "", className)}>
       <button
-        className={classnames(
-          "tw-tabs__button",
-          reverse ? "-reverse" : "",
-          isActive ? "-active" : "",
-          back ? "-back" : ""
-        )}
+        title={'button-tab'}
+        className={classnames("tw-tabs__button", reverse ? "-reverse" : "", isActive ? "-active" : "", back ? "-back" : "")}
         onClick={onClick}
       >
-        {icon && (
-          <i
-            className={classnames(
-              iconClass(undefined, icon),
-              "tw-tabs__button-icon"
-            )}
-          />
-        )}
+        {icon && <i className={classnames(iconClass(undefined, icon), "tw-tabs__button-icon")} />}
         <span className={"tw-tabs__button-label"}>{children}</span>
         {after}
       </button>
-      <div
-        className={classnames(
-          "tw-tabs__button-border",
-          isActive ? "-active" : ""
-        )}
-      />
+      <div className={classnames("tw-tabs__button-border", isActive ? "-active" : "")} />
     </div>
   );
 }
@@ -83,7 +51,7 @@ export function Tabs({
   ...additionalProps
 }: PropsWithChildren<TabsProps>) {
   return (
-    <div className={`tw-tabs ${className}`} style={style}>
+    <div data-testid={'tabs-comp'} className={`tw-tabs ${className}`} style={style}>
       <div>
         <nav className='tw-tabs__header'>
           <div className='tw-tabs__header-wrapper'>
@@ -110,11 +78,9 @@ export function Tabs({
             {AddButton && <AddButton {...additionalProps} current={current} />}
           </div>
         </nav>
-        {HeaderChildren && (
-          <HeaderChildren {...additionalProps} current={current} />
-        )}
+        {HeaderChildren && <HeaderChildren {...additionalProps} current={current} />}
       </div>
-      <div className={"tw-tabs__body"}>{children}</div>
+      <div title={"tab-body"} className={"tw-tabs__body"}>{children}</div>
     </div>
   );
 }

package/src/interfaces/Operation.ts

@@ -2,10 +2,7 @@ import React from "react";
 import { OperationButtonProps } from "../components/table/components/defaultOperationButton.component";
 
 export type PermissionsResolver<Data = any> = (data: Data, ctx: any) => void;
-export type OnClickOperation<Data = any> = (
-  data: Data,
-  operation: Operation
-) => void;
+export type OnClickOperation<Data = any> = (data: Data, operation: Operation) => void;
 
 export interface Operation<Data = any> {
   /**

package/src/react-table.d.ts

@@ -45,9 +45,7 @@ import {
 } from "react-table";
 
 declare module "react-table" {
-  export interface UseFlexLayoutInstanceProps<
-    D extends Record<string, unknown>
-  > {
+  export interface UseFlexLayoutInstanceProps<D extends Record<string, unknown>> {
     totalColumnsMinWidth: number;
   }
 
@@ -66,17 +64,13 @@ declare module "react-table" {
       UseRowSelectOptions<D>,
       UseSortByOptions<D> {}
 
-  export interface Hooks<
-    D extends Record<string, unknown> = Record<string, unknown>
-  >
+  export interface Hooks<D extends Record<string, unknown> = Record<string, unknown>>
     extends UseExpandedHooks<D>,
       UseGroupByHooks<D>,
       UseRowSelectHooks<D>,
       UseSortByHooks<D> {}
 
-  export interface TableInstance<
-    D extends Record<string, unknown> = Record<string, unknown>
-  >
+  export interface TableInstance<D extends Record<string, unknown> = Record<string, unknown>>
     extends UseColumnOrderInstanceProps<D>,
       UseExpandedInstanceProps<D>,
       UseFiltersInstanceProps<D>,
@@ -88,9 +82,7 @@ declare module "react-table" {
       UsePaginationInstanceProps<D>,
       UseSortByInstanceProps<D> {}
 
-  export interface TableState<
-    D extends Record<string, unknown> = Record<string, unknown>
-  >
+  export interface TableState<D extends Record<string, unknown> = Record<string, unknown>>
     extends UseColumnOrderState<D>,
       UseExpandedState<D>,
       UseFiltersState<D>,
@@ -103,9 +95,7 @@ declare module "react-table" {
     rowCount: number;
   }
 
-  export interface ColumnInterface<
-    D extends Record<string, unknown> = Record<string, unknown>
-  >
+  export interface ColumnInterface<D extends Record<string, unknown> = Record<string, unknown>>
     extends UseFiltersColumnOptions<D>,
       UseGroupByColumnOptions<D>,
       UseResizeColumnsColumnOptions<D>,
@@ -113,25 +103,16 @@ declare module "react-table" {
     align?: string;
   }
 
-  export interface ColumnInstance<
-    D extends Record<string, unknown> = Record<string, unknown>
-  >
+  export interface ColumnInstance<D extends Record<string, unknown> = Record<string, unknown>>
     extends UseFiltersColumnProps<D>,
       UseGroupByColumnProps<D>,
       UseResizeColumnsColumnProps<D>,
       UseFlexLayoutColumnProps<D>,
       UseSortByColumnProps<D> {}
 
-  export type Cell<
-    D extends Record<string, unknown> = Record<string, unknown>
-  > = UseGroupByCellProps<D>;
+  export type Cell<D extends Record<string, unknown> = Record<string, unknown>> = UseGroupByCellProps<D>;
 
-  export interface Row<D extends object = {}>
-    extends UseExpandedRowProps<D>,
-      UseGroupByRowProps<D>,
-      UseRowSelectRowProps<D> {}
+  export interface Row<D extends object = {}> extends UseExpandedRowProps<D>, UseGroupByRowProps<D>, UseRowSelectRowProps<D> {}
 }
 
-export type TableMouseEventHandler = (
-  instance: TableInstance<T>
-) => MouseEventHandler;
+export type TableMouseEventHandler = (instance: TableInstance<T>) => MouseEventHandler;

package/src/stores/action/action.actions.ts

@@ -18,45 +18,43 @@ function getFormio(formId: string, id: string) {
   return new Formio(url);
 }
 
-export const getAction = (
-  formId: string,
-  actionId: string,
-  done = noop
-) => async (dispatch: any) => {
-  dispatch(clearActionError(ACTION));
-  dispatch(requestAction(ACTION));
+export const getAction =
+  (formId: string, actionId: string, done = noop) =>
+  async (dispatch: any) => {
+    dispatch(clearActionError(ACTION));
+    dispatch(requestAction(ACTION));
 
-  const formio = getFormio(formId, actionId);
+    const formio = getFormio(formId, actionId);
 
-  try {
-    const action = await formio.loadAction();
+    try {
+      const action = await formio.loadAction();
 
-    dispatch(getActionInfo(formId, action.name));
-    dispatch(receiveAction(ACTION, { action }));
-    done(null, action);
-  } catch (error) {
-    dispatch(failAction(ACTION, { error }));
-    done(error);
-  }
-};
+      dispatch(getActionInfo(formId, action.name));
+      dispatch(receiveAction(ACTION, { action }));
+      done(null, action);
+    } catch (error) {
+      dispatch(failAction(ACTION, { error }));
+      done(error);
+    }
+  };
 
-export const saveAction = (formId: string, action: any, done = noop) => async (
-  dispatch: any
-) => {
-  dispatch(clearActionError(ACTION));
-  dispatch(sendAction(ACTION, { action }));
+export const saveAction =
+  (formId: string, action: any, done = noop) =>
+  async (dispatch: any) => {
+    dispatch(clearActionError(ACTION));
+    dispatch(sendAction(ACTION, { action }));
 
-  const formio = getFormio(formId, get(action, "data._id", ""));
+    const formio = getFormio(formId, get(action, "data._id", ""));
 
-  try {
-    const result = await formio.saveAction(action);
-    dispatch(receiveAction(ACTION, { action: result }));
-    done(null, result);
-  } catch (error) {
-    dispatch(failAction(ACTION, { error }));
-    done(error);
-  }
-};
+    try {
+      const result = await formio.saveAction(action);
+      dispatch(receiveAction(ACTION, { action: result }));
+      done(null, result);
+    } catch (error) {
+      dispatch(failAction(ACTION, { error }));
+      done(error);
+    }
+  };
 
 export const deleteAction = (formId: string, actionId: string, done = noop) => {
   return async (dispatch: any) => {

package/src/stores/action/action.reducers.spec.ts

@@ -1,11 +1,4 @@
-import {
-  clearActionError,
-  failAction,
-  receiveAction,
-  requestAction,
-  resetAction,
-  sendAction
-} from "./action.actions";
+import { clearActionError, failAction, receiveAction, requestAction, resetAction, sendAction } from "./action.actions";
 import { ACTION } from "./action.constant";
 import { actionReducer } from "./action.reducers";
 

package/src/stores/action/action.reducers.ts

@@ -1,14 +1,7 @@
 import { createReducer, InitialStateCreator } from "@tsed/redux-utils";
 import { ActionSchema } from "../../interfaces";
 
-import {
-  clearActionError,
-  failAction,
-  receiveAction,
-  requestAction,
-  resetAction,
-  sendAction
-} from "./action.actions";
+import { clearActionError, failAction, receiveAction, requestAction, resetAction, sendAction } from "./action.actions";
 import { ACTION } from "./action.constant";
 
 export interface ActionState {

package/src/stores/action/action.selectors.ts

@@ -3,5 +3,4 @@ import { selectRoot } from "../root";
 import { ACTION } from "./action.constant";
 import { ActionState } from "./action.reducers";
 
-export const selectAction = (state: Record<string, any>): ActionSchema =>
-  selectRoot<ActionState>(ACTION, state).data;
+export const selectAction = (state: Record<string, any>): ActionSchema => selectRoot<ActionState>(ACTION, state).data;

package/src/stores/action-info/action-info.actions.spec.ts

@@ -1,9 +1,5 @@
 import { Formio } from "formiojs";
-import {
-  getActionInfo,
-  receiveActionInfo,
-  requestActionInfo
-} from "./action-info.actions";
+import { getActionInfo, receiveActionInfo, requestActionInfo } from "./action-info.actions";
 
 jest.mock("formiojs/Formio");
 

package/src/stores/action-info/action-info.actions.ts

@@ -9,26 +9,23 @@ export const requestActionInfo = createAction();
 export const receiveActionInfo = createAction();
 export const failActionInfo = createAction();
 
-export const getActionInfo = (
-  formId: string,
-  actionType: string,
-  done = noop
-) => async (dispatch: any) => {
-  dispatch(requestActionInfo(ACTION_INFO));
+export const getActionInfo =
+  (formId: string, actionType: string, done = noop) =>
+  async (dispatch: any) => {
+    dispatch(requestActionInfo(ACTION_INFO));
 
-  const url = getFormUrl(formId);
-  const formio = new Formio(url);
+    const url = getFormUrl(formId);
+    const formio = new Formio(url);
 
-  try {
-    const actionInfo = await formio.actionInfo(actionType);
+    try {
+      const actionInfo = await formio.actionInfo(actionType);
 
-    actionInfo.settingsForm.action =
-      Formio.getProjectUrl() + actionInfo.settingsForm.action;
+      actionInfo.settingsForm.action = Formio.getProjectUrl() + actionInfo.settingsForm.action;
 
-    dispatch(receiveActionInfo(ACTION_INFO, { actionInfo }));
-    done(null, actionInfo);
-  } catch (error) {
-    dispatch(failActionInfo(ACTION_INFO, { error }));
-    done(error);
-  }
-};
+      dispatch(receiveActionInfo(ACTION_INFO, { actionInfo }));
+      done(null, actionInfo);
+    } catch (error) {
+      dispatch(failActionInfo(ACTION_INFO, { error }));
+      done(error);
+    }
+  };

package/src/stores/action-info/action-info.reducers.spec.ts

@@ -1,9 +1,4 @@
-import {
-  failActionInfo,
-  receiveActionInfo,
-  requestActionInfo,
-  resetActionInfo
-} from "./action-info.actions";
+import { failActionInfo, receiveActionInfo, requestActionInfo, resetActionInfo } from "./action-info.actions";
 import { ACTION_INFO } from "./action-info.constant";
 import { actionInfoReducer } from "./action-info.reducers";
 

package/src/stores/action-info/action-info.reducers.ts

@@ -1,11 +1,6 @@
 import { InitialStateCreator, createReducer } from "@tsed/redux-utils";
 import { ActionSchema } from "../../interfaces";
-import {
-  failActionInfo,
-  receiveActionInfo,
-  requestActionInfo,
-  resetActionInfo
-} from "./action-info.actions";
+import { failActionInfo, receiveActionInfo, requestActionInfo, resetActionInfo } from "./action-info.actions";
 import { ACTION_INFO } from "./action-info.constant";
 
 export interface ActionInfoState {

package/src/stores/action-info/action-info.selectors.ts

@@ -3,7 +3,4 @@ import { selectRoot } from "../root";
 import { ACTION_INFO } from "./action-info.constant";
 import { ActionInfoState } from "./action-info.reducers";
 
-export const selectActionInfo = (
-  state: Record<string, any>
-): Partial<ActionSchema> =>
-  selectRoot<ActionInfoState>(ACTION_INFO, state).data;
+export const selectActionInfo = (state: Record<string, any>): Partial<ActionSchema> => selectRoot<ActionInfoState>(ACTION_INFO, state).data;

package/src/stores/actions/actions.actions.spec.ts

@@ -1,10 +1,5 @@
 import { Formio } from "formiojs";
-import {
-  getActions,
-  receiveActions,
-  requestActions,
-  resetActions
-} from "./actions.actions";
+import { getActions, receiveActions, requestActions, resetActions } from "./actions.actions";
 
 jest.mock("formiojs");
 

package/src/stores/actions/actions.actions.ts

@@ -12,25 +12,22 @@ export const receiveActions = createAction<{
 }>();
 export const failActions = createAction<{ error: Error }>();
 
-export const getActions = (id: string, done = noop) => async (
-  dispatch: any
-) => {
-  dispatch(resetActions(ACTIONS));
-  dispatch(requestActions(ACTIONS));
+export const getActions =
+  (id: string, done = noop) =>
+  async (dispatch: any) => {
+    dispatch(resetActions(ACTIONS));
+    dispatch(requestActions(ACTIONS));
 
-  const url = getFormUrl(id);
-  const formio = new Formio(url);
+    const url = getFormUrl(id);
+    const formio = new Formio(url);
 
-  try {
-    const [actions, availableActions] = await Promise.all([
-      formio.loadActions({ params: {} }),
-      formio.availableActions()
-    ]);
+    try {
+      const [actions, availableActions] = await Promise.all([formio.loadActions({ params: {} }), formio.availableActions()]);
 
-    dispatch(receiveActions(ACTIONS, { actions, availableActions }));
-    done(null, actions, availableActions);
-  } catch (error) {
-    dispatch(failActions(ACTIONS, { error }));
-    done(error);
-  }
-};
+      dispatch(receiveActions(ACTIONS, { actions, availableActions }));
+      done(null, actions, availableActions);
+    } catch (error) {
+      dispatch(failActions(ACTIONS, { error }));
+      done(error);
+    }
+  };

package/src/stores/actions/actions.reducers.spec.ts

@@ -1,9 +1,4 @@
-import {
-  failActions,
-  receiveActions,
-  requestActions,
-  resetActions
-} from "./actions.actions";
+import { failActions, receiveActions, requestActions, resetActions } from "./actions.actions";
 import { ACTIONS } from "./actions.constant";
 import { actionsReducer } from "./actions.reducers";
 

package/src/stores/actions/actions.reducers.ts

@@ -1,11 +1,6 @@
 import { createReducer, InitialStateCreator } from "@tsed/redux-utils";
 import { ActionInfoSchema, ActionSchema } from "../../interfaces";
-import {
-  failActions,
-  receiveActions,
-  requestActions,
-  resetActions
-} from "./actions.actions";
+import { failActions, receiveActions, requestActions, resetActions } from "./actions.actions";
 import { ACTIONS } from "./actions.constant";
 
 export interface ActionsState {

package/src/stores/actions/actions.selectors.ts

@@ -2,8 +2,6 @@ import { selectRoot } from "../root";
 import { ACTIONS } from "./actions.constant";
 import { ActionsState } from "./actions.reducers";
 
-export const selectActions = (state: Record<string, any>) =>
-  selectRoot<ActionsState>(ACTIONS, state).data;
+export const selectActions = (state: Record<string, any>) => selectRoot<ActionsState>(ACTIONS, state).data;
 
-export const selectAvailableActions = (state: Record<string, any>) =>
-  selectRoot<ActionsState>(ACTIONS, state).availableActions;
+export const selectAvailableActions = (state: Record<string, any>) => selectRoot<ActionsState>(ACTIONS, state).availableActions;

package/src/stores/auth/auth.reducers.ts

@@ -44,10 +44,7 @@ function createInitialState(): AuthState {
   };
 }
 
-function mapProjectRolesToUserRoles(
-  projectRoles: Record<string, any>,
-  userRoles: any[]
-) {
+function mapProjectRolesToUserRoles(projectRoles: Record<string, any>, userRoles: any[]) {
   return Object.entries(projectRoles).reduce(
     (result, [name, role]) => ({
       ...result,

package/src/stores/auth/auth.selectors.spec.ts

@@ -1,8 +1,4 @@
-import {
-  selectIsAuthenticated,
-  selectRoles,
-  selectUser
-} from "./auth.selectors";
+import { selectIsAuthenticated, selectRoles, selectUser } from "./auth.selectors";
 
 describe("auth Selectors", () => {
   describe("selectIsAuthenticated()", () => {

package/src/stores/auth/auth.selectors.ts

@@ -6,11 +6,8 @@ import { AuthState } from "./auth.reducers";
 
 export const selectAuth = (state: any) => selectRoot<AuthState>(AUTH, state);
 
-export const selectUser = <User = any>(state: any): null | Submission<User> =>
-  get(selectAuth(state), "user");
+export const selectUser = <User = any>(state: any): null | Submission<User> => get(selectAuth(state), "user");
 
-export const selectRoles = (state: any): Record<string, RoleSchema> =>
-  get(selectAuth(state), "roles");
+export const selectRoles = (state: any): Record<string, RoleSchema> => get(selectAuth(state), "roles");
 
-export const selectIsAuthenticated = (state: any): boolean =>
-  get(selectAuth(state), "authenticated");
+export const selectIsAuthenticated = (state: any): boolean => get(selectAuth(state), "authenticated");