@zohodesk/library-platform 1.1.0-exp.1 → 1.1.0-exp.2

package/es/bc/zclient-actions/Constants.js

@@ -0,0 +1,11 @@
+export const SET_CLIENTACTIONS = 'CLIENTACTION#SET_CLIENTACTIONS';
+export const CLIENTACTION_BEHAVIOUR_EXECUTE = 'CLIENTACTION_BEHAVIOUR#EXECUTE';
+export const CLIENTACTION_EXECUTE_SUCCEEDED = 'CLIENTACTION#EXECUTE_SUCCEEDED';
+export const CLIENTACTION_EXECUTE_FAILED = 'CLIENTACTION#EXECUTE_FAILED';
+export const CLIENTACTION_EXECUTE_SUCCEEDED_NO_CONTENT = 'CLIENTACTION#EXECUTE_SUCCEEDED_NO_CONTENT';
+export const CLIENTACTION_EXECUTE_SUCCESS_CALLBACK = 'CLIENTACTION#EXECUTE_SUCCESS_CALLBACK';
+export const CLIENTACTION_EXECUTE_SUCCESS_NO_CONTENT_CALLBACK = 'CLIENTACTION#EXECUTE_SUCCESS_NO_CONTENT_CALLBACK';
+export const CLIENTACTION_EXECUTE_FAIL_CALLBACK = 'CLIENTACTION#EXECUTE_FAIL_CALLBACK';
+export const ClientActionApiActionName = {
+  GET_CLIENTACTIONS: "getClientActions"
+};

package/es/bc/zclient-actions/EventHandlers.js

@@ -0,0 +1 @@
+import { CLIENTACTION_BEHAVIOUR_EXECUTE, CLIENTACTION_EXECUTE_FAIL_CALLBACK, CLIENTACTION_EXECUTE_FAILED, CLIENTACTION_EXECUTE_SUCCEEDED, CLIENTACTION_EXECUTE_SUCCEEDED_NO_CONTENT, CLIENTACTION_EXECUTE_SUCCESS_CALLBACK, CLIENTACTION_EXECUTE_SUCCESS_NO_CONTENT_CALLBACK } from "./Constants";

package/es/bc/zlist/Properties.js

@@ -38,6 +38,9 @@ export default {
           orgName: {
             type: 'string'
           },
+          servicePrefix: {
+            type: 'string'
+          },
           departmentName: {
             type: 'string'
           },

package/es/bc/zrecord/Constants.js

@@ -22,4 +22,6 @@ _defineProperty(RecordApiActionName, "DELETE_RECORDS", 'deleteRecords');
 
 _defineProperty(RecordApiActionName, "DELETE_RECORD", 'deleteRecord');
 
-_defineProperty(RecordApiActionName, "UPDATE_RECORD", 'updateRecord');
+_defineProperty(RecordApiActionName, "UPDATE_RECORD", 'updateRecord');
+
+_defineProperty(RecordApiActionName, "GET_CLIENTACTIONS", 'getClientActions');

package/es/cc/table-connected/Properties.js

@@ -23,6 +23,9 @@ export default {
           fields: {
             type: 'object'
           },
+          rowActionsComponentName: {
+            type: 'string'
+          },
           emptyState: {
             type: 'string'
           }

package/es/cc/table-list/Properties.js

@@ -1,3 +1,5 @@
+import { Alignment, SortedBy, Width } from "./data-types/Header";
+import RowCursor from "./data-types/RowCursor";
 import ResizerConfigSchema from "../../bc/table-column-resizer/Properties";
 import { actionsSchema } from "../action-location/Properties";
 import PropertiesConverter from "../component/properties/PropertiesConverter";
@@ -34,12 +36,24 @@ const TableListProperties = {
     },
     defaultValue: ''
   },
-  hasRowActions: {
+  rowActionsConfig: {
     required: false,
-    defaultValue: false,
+    defaultValue: {
+      hasActions: false,
+      columnWidth: Width.XSmall
+    },
     typeMetadata: {
       schema: {
-        type: 'boolean'
+        type: 'object',
+        properties: {
+          hasActions: {
+            type: 'boolean'
+          },
+          columnWidth: {
+            type: 'number',
+            enum: Object.values(Width)
+          }
+        }
       }
     }
   },
@@ -52,6 +66,16 @@ const TableListProperties = {
       }
     }
   },
+  rowCursor: {
+    required: false,
+    defaultValue: 'pointer',
+    typeMetadata: {
+      schema: {
+        type: 'string',
+        enum: Object.values(RowCursor)
+      }
+    }
+  },
   resizerConfig: {
     required: false,
     defaultValue: {
@@ -86,20 +110,20 @@ const TableListProperties = {
               text: {
                 type: 'string'
               },
-              size: {
-                type: 'string',
-                enum: ['xsmall', 'small', 'medium', 'large', 'xlarge']
+              width: {
+                type: 'number',
+                enum: Object.values(Width)
               },
               alignment: {
                 type: 'string',
-                enum: ['left', 'center', 'right']
+                enum: Object.values(Alignment)
               },
               sortable: {
                 type: 'boolean'
               },
               sortOrder: {
                 type: 'string',
-                enum: ['none', 'ascending', 'descending']
+                enum: Object.values(SortedBy)
               },
               sortTooltip: {
                 type: 'string'

package/es/cc/table-list/data-types/Header.js

@@ -4,13 +4,14 @@ export let SortedBy = /*#__PURE__*/function (SortedBy) {
   SortedBy["Descending"] = "descending";
   return SortedBy;
 }({});
-export let Size = /*#__PURE__*/function (Size) {
-  Size["XSmall"] = "xsmall";
-  Size["Small"] = "small";
-  Size["Medium"] = "medium";
-  Size["Large"] = "large";
-  Size["XLarge"] = "xlarge";
-  return Size;
+export let Width = /*#__PURE__*/function (Width) {
+  Width[Width["XSmall"] = 120] = "XSmall";
+  Width[Width["Small"] = 160] = "Small";
+  Width[Width["Medium"] = 200] = "Medium";
+  Width[Width["Large"] = 240] = "Large";
+  Width[Width["XLarge"] = 280] = "XLarge";
+  Width[Width["XXLarge"] = 320] = "XXLarge";
+  return Width;
 }({});
 export let Alignment = /*#__PURE__*/function (Alignment) {
   Alignment["Left"] = "left";

package/es/cc/table-list/data-types/RowActionsConfig.js

@@ -0,0 +1 @@
+export {};

package/es/cc/table-list/data-types/RowCursor.js

@@ -0,0 +1,8 @@
+var RowCursor = /*#__PURE__*/function (RowCursor) {
+  RowCursor["Default"] = "default";
+  RowCursor["Pointer"] = "pointer";
+  RowCursor["NotAllowed"] = "not-allowed";
+  return RowCursor;
+}(RowCursor || {});
+
+export default RowCursor;

package/es/cc/table-list/row/Properties.js

@@ -1,3 +1,5 @@
+import { Width } from "../data-types/Header";
+import RowCursor from "../data-types/RowCursor";
 const TableRowProperties = {
   isSelectionEnabled: {
     required: false,
@@ -53,6 +55,16 @@ const TableRowProperties = {
       }
     }
   },
+  cursor: {
+    required: false,
+    defaultValue: 'pointer',
+    typeMetadata: {
+      schema: {
+        type: 'string',
+        enum: Object.values(RowCursor)
+      }
+    }
+  },
   rowActionLocation: {
     required: false,
     defaultValue: {},
@@ -71,12 +83,13 @@ const TableRowProperties = {
       }
     }
   },
-  resizedColumnsWidth: {
+  rowActionsColumnWidth: {
     required: false,
-    defaultValue: false,
+    defaultValue: Width.XSmall,
     typeMetadata: {
       schema: {
-        type: 'object'
+        type: 'number',
+        enum: Object.values(Width)
       }
     }
   },

package/es/desk-frameworks/table-connected/frameworks/TableConnectedFactory.js

@@ -9,6 +9,7 @@ import EventHandlersFactory from "./EventHandlersFactory";
 import TableConnectedView from "./TableConnectedView";
 import defaultDataBroker from "../../../platform/data-broker";
 import DataBrokerBehaviourFactory from "../../../platform/zdata-broker/frameworks/DataBrokerBehaviourFactory";
+import ClientActionBehaviourFactory from "../../../platform/zclient-actions/frameworks/ClientActionBehaviourFactory";
 export default class TableConnectedFactory {
   static create(_ref) {
     let {
@@ -23,7 +24,9 @@ export default class TableConnectedFactory {
       properties: Properties,
       eventHandlers: EventHandlersFactory.create(eventHandlers),
       transformState: TableTranslator.transformState,
-      behaviours: [ZHttpBehaviourFactory.create(), DataBrokerBehaviourFactory.create(), RecordBehaviourFactory.create(dataBroker.httpTemplates), ZFieldBehaviourFactory.create({
+      behaviours: [ZHttpBehaviourFactory.create(), DataBrokerBehaviourFactory.create(), RecordBehaviourFactory.create(dataBroker.httpTemplates), ClientActionBehaviourFactory.create({
+        getClientActions: dataBroker.httpTemplates.getClientActions
+      }), ZFieldBehaviourFactory.create({
         availableFields: dataBroker.httpTemplates.getAvailableFields,
         selectedFields: dataBroker.httpTemplates.getSelectedFields
       }), ZListBehaviourFactory.create()]

package/es/desk-frameworks/table-connected/frameworks/TableConnectedView.js

@@ -9,7 +9,8 @@ function View(_ref, ref) {
   const {
     isLoading,
     data = [],
-    hasRowActions,
+    rowActionsConfig,
+    rowCursor,
     properties,
     emptyStateUiType
   } = state;
@@ -19,9 +20,10 @@ function View(_ref, ref) {
   } = properties;
   return /*#__PURE__*/React.createElement(TableList, {
     data: data,
+    rowCursor: rowCursor,
     getRef: ref,
     isFlexibleColumns: isFlexibleColumns,
-    hasRowActions: hasRowActions,
+    rowActionsConfig: rowActionsConfig,
     isLoading: isLoading,
     emptyStateUiType: emptyStateUiType,
     selectionConfig: selectionConfig

package/es/desk-frameworks/table-connected/frameworks/__tests__/TableConnectedFactory.spec.js

@@ -0,0 +1,453 @@
+import fetchMock from 'jest-fetch-mock';
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import TableConnectedFactory from "../TableConnectedFactory";
+import dataBroker from "./mock/data-broker";
+describe('Table Connected Factory', () => {
+  fetchMock.enableMocks();
+  it('should mount the component and check the rendering', () => {
+    const TableConnected = TableConnectedFactory.create({
+      name: 'TableConnected'
+    });
+    let {
+      container
+    } = render( /*#__PURE__*/React.createElement(TableConnected, null));
+    expect(container).toBeInTheDocument();
+  });
+});
+describe('Table header', () => {
+  fetchMock.enableMocks();
+  it('Number of Columns', async () => {
+    const TableConnected = TableConnectedFactory.create({
+      name: 'TableConnected',
+      dataBroker
+    });
+    const filter = {
+      viewId: '',
+      orgId: '',
+      departmentId: ''
+    };
+    let {
+      container
+    } = render( /*#__PURE__*/React.createElement(TableConnected, {
+      filter: filter,
+      limit: 25
+    }));
+    await waitFor(() => {
+      const rows = container.querySelectorAll('th');
+      expect(rows.length).toBe(8);
+    });
+  });
+  it('Field names', async () => {
+    const TableConnected = TableConnectedFactory.create({
+      name: 'TableConnected',
+      dataBroker
+    });
+    const filter = {
+      viewId: '',
+      orgId: '',
+      departmentId: ''
+    };
+    let {
+      container
+    } = render( /*#__PURE__*/React.createElement(TableConnected, {
+      filter: filter,
+      limit: 25
+    }));
+    await waitFor(() => {
+      const rows = container.querySelectorAll('th');
+      const columnName = rows[3];
+      expect(columnName.textContent).toBe("Is Admin");
+    });
+  });
+  it('Field order', async () => {
+    const TableConnected = TableConnectedFactory.create({
+      name: 'TableConnected',
+      dataBroker
+    });
+    const filter = {
+      viewId: '',
+      orgId: '',
+      departmentId: ''
+    };
+    let {
+      container
+    } = render( /*#__PURE__*/React.createElement(TableConnected, {
+      filter: filter,
+      limit: 25
+    }));
+    await waitFor(() => {
+      const rows = container.querySelectorAll('th');
+      const rowsText = [];
+      rows.forEach(row => {
+        rowsText.push(row.textContent);
+      });
+      const columnOrder = ['ID', 'Name', 'Email', 'Is Admin', 'Created Time', 'Created By', 'Owner', 'URL'];
+      expect(rowsText).toStrictEqual(columnOrder);
+    });
+  });
+});
+describe('Table body', () => {
+  fetchMock.enableMocks();
+  it('The Table should have 5 records after fetch', async () => {
+    const TableConnected = TableConnectedFactory.create({
+      name: 'TableConnected',
+      dataBroker
+    });
+    const filter = {
+      viewId: '',
+      orgId: '',
+      departmentId: ''
+    };
+    let {
+      container
+    } = render( /*#__PURE__*/React.createElement(TableConnected, {
+      filter: filter,
+      limit: 5
+    }));
+    await waitFor(() => {
+      var _container$querySelec;
+
+      const rows = (_container$querySelec = container.querySelector('tbody')) === null || _container$querySelec === void 0 ? void 0 : _container$querySelec.childNodes;
+      expect(rows.length).toBe(5);
+    });
+  }); // fit('The Table should render 5 records on scroll to the end', async () => {
+  //     const TableConnected = TableConnectedFactory.create({ name: 'TableConnected', dataBroker });
+  //     const filter = { viewId: '', orgId: '', departmentId: '' };
+  //     let { container } = render(
+  //         <div id="tableContainer" style={{ height: '300px', width: '100%' }}>
+  //             <TableConnected filter={filter} limit={15} />
+  //         </div>
+  //     );
+  //     await waitFor(() => {
+  //         const rows = container.querySelector('tbody')?.childNodes;
+  //         expect(rows?.length).toBe(15);
+  //     });
+  //     const scrollableElement = container.querySelector('table');
+  //     if (scrollableElement) {
+  //         Object.defineProperty(scrollableElement, 'scrollHeight', { value: 2000, writable: true });
+  //         Object.defineProperty(scrollableElement, 'clientHeight', { value: 300, writable: true });
+  //         // fireEvent.scroll(scrollableElement, { target: { scrollTop: 2000 } });
+  //         // fireEvent.scroll(scrollableElement, new Event('scroll'));
+  //         scrollableElement.scrollTop = 2000;
+  //         scrollableElement.dispatchEvent(new Event('scroll'));
+  //     }
+  //     });
+  // });
+});
+describe('Field cases', () => {
+  fetchMock.enableMocks();
+  it('Field type order', async () => {
+    const TableConnected = TableConnectedFactory.create({
+      name: 'TableConnected',
+      dataBroker
+    });
+    const uiMapping = {
+      fields: {
+        "cf_isAdmin": "Switch"
+      }
+    };
+    const filter = {
+      viewId: '',
+      orgId: '',
+      departmentId: ''
+    };
+    let {
+      container
+    } = render( /*#__PURE__*/React.createElement(TableConnected, {
+      uiMapping: uiMapping,
+      filter: filter,
+      limit: 1
+    }));
+    await waitFor(() => {
+      const rows = container.querySelectorAll('td');
+      const rowsText = [];
+      rows.forEach(row => {
+        rowsText.push(row.textContent);
+      });
+      const columnOrder = ['1', 'Record 1', 'odin@asgard@thundermail.com', "", '2025-01-13T07:01:50.686Z', 'ODOdin ', 'GodSpecies', 'https://en.wikipedia.org/wiki/Asgard'];
+      expect(rowsText).toStrictEqual(columnOrder);
+    });
+  });
+  it('Text rendered', async () => {
+    const TableConnected = TableConnectedFactory.create({
+      name: 'TableConnected',
+      dataBroker: dataBroker
+    });
+    const uiMapping = {
+      fields: {
+        "cf_isAdmin": "Switch"
+      }
+    };
+    const filter = {
+      viewId: '',
+      orgId: '',
+      departmentId: ''
+    };
+    let {
+      container
+    } = render( /*#__PURE__*/React.createElement(TableConnected, {
+      uiMapping: uiMapping,
+      filter: filter,
+      limit: 1
+    }));
+    await waitFor(() => {
+      const rows = container.querySelectorAll('td');
+      const rowsText = [];
+      rows.forEach(row => {
+        rowsText.push(row.textContent);
+      });
+      const textEle = "ODOdin ";
+      expect(rowsText[5]).toStrictEqual(textEle);
+    });
+  });
+  it('Switch rendered', async () => {
+    const TableConnected = TableConnectedFactory.create({
+      name: 'TableConnected',
+      dataBroker: dataBroker
+    });
+    const uiMapping = {
+      fields: {
+        "cf_isAdmin": "Switch"
+      }
+    };
+    const filter = {
+      viewId: '',
+      orgId: '',
+      departmentId: ''
+    };
+    let {
+      container
+    } = render( /*#__PURE__*/React.createElement(TableConnected, {
+      uiMapping: uiMapping,
+      filter: filter,
+      limit: 25
+    }));
+    await waitFor(() => {
+      expect(screen.getByText('Is Admin')).toBeInTheDocument();
+      const switchField = screen.getAllByRole('switch');
+      const firstSwitch = switchField[0];
+      expect(firstSwitch).toBeInTheDocument();
+    });
+  });
+  it('Switch checked', async () => {
+    const TableConnected = TableConnectedFactory.create({
+      name: 'TableConnected',
+      dataBroker: dataBroker
+    });
+    const uiMapping = {
+      fields: {
+        "cf_isAdmin": "Switch"
+      }
+    };
+    const filter = {
+      viewId: '',
+      orgId: '',
+      departmentId: ''
+    };
+    let {
+      container
+    } = render( /*#__PURE__*/React.createElement(TableConnected, {
+      uiMapping: uiMapping,
+      filter: filter,
+      limit: 25
+    }));
+    await waitFor(() => {
+      expect(screen.getByText('Is Admin')).toBeInTheDocument();
+      const switchField = screen.getAllByRole('switch');
+      const firstSwitch = switchField[1];
+      const isChecked = firstSwitch.getAttribute('aria-checked');
+      expect(isChecked).toBe('true');
+    });
+  });
+  it('Switch unchecked', async () => {
+    const TableConnected = TableConnectedFactory.create({
+      name: 'TableConnected',
+      dataBroker: dataBroker
+    });
+    const uiMapping = {
+      fields: {
+        "cf_isAdmin": "Switch"
+      }
+    };
+    const filter = {
+      viewId: '',
+      orgId: '',
+      departmentId: ''
+    };
+    let {
+      container
+    } = render( /*#__PURE__*/React.createElement(TableConnected, {
+      uiMapping: uiMapping,
+      filter: filter,
+      limit: 25
+    }));
+    await waitFor(() => {
+      expect(screen.getByText('Is Admin')).toBeInTheDocument();
+      const switchField = screen.getAllByRole('switch');
+      const firstSwitch = switchField[0];
+      const isChecked = firstSwitch.getAttribute('aria-checked');
+      expect(isChecked).toBe('false');
+    });
+  });
+  it('Checkbox rendered', async () => {
+    const TableConnected = TableConnectedFactory.create({
+      name: 'TableConnected',
+      dataBroker: dataBroker
+    });
+    const filter = {
+      viewId: '',
+      orgId: '',
+      departmentId: ''
+    };
+    let {
+      container
+    } = render( /*#__PURE__*/React.createElement(TableConnected, {
+      filter: filter,
+      limit: 25
+    }));
+    await waitFor(() => {
+      expect(screen.getByText('Is Admin')).toBeInTheDocument();
+      const checkboxField = screen.getAllByRole('checkbox');
+      const firstCheckbox = checkboxField[0];
+      expect(firstCheckbox).toBeInTheDocument();
+    });
+  });
+  it('Checkbox checked', async () => {
+    const TableConnected = TableConnectedFactory.create({
+      name: 'TableConnected',
+      dataBroker: dataBroker
+    });
+    const filter = {
+      viewId: '',
+      orgId: '',
+      departmentId: ''
+    };
+    let {
+      container
+    } = render( /*#__PURE__*/React.createElement(TableConnected, {
+      filter: filter,
+      limit: 25
+    }));
+    await waitFor(() => {
+      expect(screen.getByText('Is Admin')).toBeInTheDocument();
+      const checkboxField = screen.getAllByRole('checkbox');
+      const firstCheckbox = checkboxField[1];
+      const isChecked = firstCheckbox.checked;
+      expect(isChecked).toBe(true);
+    });
+  });
+  it('Checkbox unchecked', async () => {
+    const TableConnected = TableConnectedFactory.create({
+      name: 'TableConnected',
+      dataBroker: dataBroker
+    });
+    const filter = {
+      viewId: '',
+      orgId: '',
+      departmentId: ''
+    };
+    let {
+      container
+    } = render( /*#__PURE__*/React.createElement(TableConnected, {
+      filter: filter,
+      limit: 25
+    }));
+    await waitFor(() => {
+      expect(screen.getByText('Is Admin')).toBeInTheDocument();
+      const checkboxField = screen.getAllByRole('checkbox');
+      const firstCheckbox = checkboxField[0];
+      const isChecked = firstCheckbox.checked;
+      expect(isChecked).toBe(false);
+    });
+  });
+  it('Tags rendered', async () => {
+    const TableConnected = TableConnectedFactory.create({
+      name: 'TableConnected',
+      dataBroker: dataBroker
+    });
+    const filter = {
+      viewId: '',
+      orgId: '',
+      departmentId: ''
+    };
+    let {
+      container
+    } = render( /*#__PURE__*/React.createElement(TableConnected, {
+      filter: filter,
+      limit: 25
+    }));
+    await waitFor(() => {
+      expect(screen.getByText('Owner')).toBeInTheDocument();
+      const rows = container.querySelectorAll('[data-title="God"]');
+      expect(rows[0]).toBeInTheDocument();
+    });
+  });
+  it('Avatar rendered', async () => {
+    const TableConnected = TableConnectedFactory.create({
+      name: 'TableConnected',
+      dataBroker: dataBroker
+    });
+    const filter = {
+      viewId: '',
+      orgId: '',
+      departmentId: ''
+    };
+    let {
+      container
+    } = render( /*#__PURE__*/React.createElement(TableConnected, {
+      filter: filter,
+      limit: 25
+    }));
+    await waitFor(() => {
+      expect(screen.getByText('Created By')).toBeInTheDocument();
+      const rows = container.querySelectorAll('[data-title="Odin "]');
+      expect(rows[0]).toBeInTheDocument();
+    });
+  });
+  it('Email rendered', async () => {
+    const TableConnected = TableConnectedFactory.create({
+      name: 'TableConnected',
+      dataBroker: dataBroker
+    });
+    const filter = {
+      viewId: '',
+      orgId: '',
+      departmentId: ''
+    };
+    let {
+      container
+    } = render( /*#__PURE__*/React.createElement(TableConnected, {
+      filter: filter,
+      limit: 25
+    }));
+    await waitFor(() => {
+      expect(screen.getByText('Email')).toBeInTheDocument();
+      const rows = container.querySelectorAll('[data-title="odin@asgard@thundermail.com"]');
+      expect(rows[0]).toBeInTheDocument();
+    });
+  });
+  it('URL rendered', async () => {
+    const TableConnected = TableConnectedFactory.create({
+      name: 'TableConnected',
+      dataBroker: dataBroker
+    });
+    const filter = {
+      viewId: '',
+      orgId: '',
+      departmentId: ''
+    };
+    let {
+      container
+    } = render( /*#__PURE__*/React.createElement(TableConnected, {
+      filter: filter,
+      limit: 25
+    }));
+    await waitFor(() => {
+      expect(screen.getByText('URL')).toBeInTheDocument();
+      const rows = container.querySelectorAll('[data-title="https://en.wikipedia.org/wiki/Asgard"]');
+      expect(rows[0]).toBeInTheDocument();
+    });
+  });
+});