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

package/README.md

@@ -21,7 +21,7 @@ import TableConnectedFactory from '@zohodesk/library-platform/TableConnectedFact
 
 const myTableComponent = TableConnectedFactory.create({
   name: 'MyTableComponent',
-  dataBroker: myDataBroker,
+  dataSource: myDataSource,
   eventHandlers: {
     onRowSelect: row => {
       console.log('Selected row:', row);
@@ -69,7 +69,7 @@ const myComponent = ComponentRegistry.get('MyComponent');
 The `TableConnectedFactory.create` method accepts the following parameters:
 
 - **name**: `string` - The name of the component.
-- **dataBroker**: `object` - The data broker instance to manage data fetching and manipulation.
+- **dataSource**: `object` - The data broker instance to manage data fetching and manipulation.
 - **eventHandlers**: `object` - An object containing event handler functions.
 - **View**: `React.Component` - Custom view component to render the table.
 

package/es/bc/{zdata-broker → zdata-source}/Actions.js

@@ -1,7 +1,7 @@
-import { DATA_BROKER_EXECUTE } from "./Constants";
-import { DATA_BROKER_FAILURE, DATA_BROKER_SUCCESS } from "./Symbols";
+import { DATA_SOURCE_EXECUTE } from "./Constants";
+import { DATA_SOURCE_FAILURE, DATA_SOURCE_SUCCESS } from "./Symbols";
 const Actions = [{
-  type: DATA_BROKER_EXECUTE,
+  type: DATA_SOURCE_EXECUTE,
   payload: {
     apiName: {
       name: 'apiName',
@@ -34,7 +34,7 @@ const Actions = [{
       schema: {
         type: 'object',
         properties: {
-          [DATA_BROKER_SUCCESS]: {
+          [DATA_SOURCE_SUCCESS]: {
             type: 'object',
             properties: {
               type: {
@@ -46,7 +46,7 @@ const Actions = [{
             },
             required: ['type', 'payload']
           },
-          [DATA_BROKER_FAILURE]: {
+          [DATA_SOURCE_FAILURE]: {
             type: 'object',
             properties: {
               type: {
@@ -59,7 +59,7 @@ const Actions = [{
             required: ['type', 'payload']
           }
         },
-        required: [DATA_BROKER_SUCCESS, DATA_BROKER_FAILURE]
+        required: [DATA_SOURCE_SUCCESS, DATA_SOURCE_FAILURE]
       }
     }
   }

package/es/bc/{zdata-broker → zdata-source}/Constants.js

@@ -1,10 +1,11 @@
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-export const DATA_BROKER_REGISTER = 'DATA_BROKER#REGISTER';
-export const DATA_BROKER_EXECUTE = 'DATA_BROKER#EXECUTE';
-export const DATA_BROKER_EXECUTE_SUCCEEDED = 'DATA_BROKER#EXECUTE_SUCCEEDED';
-export const DATA_BROKER_EXECUTE_NO_CONTENT_SUCCEEDED = 'DATA_BROKER#EXECUTE_NO_CONTENT_SUCCEEDED';
-export const DATA_BROKER_EXECUTE_FAILED = 'DATA_BROKER#EXECUTE_FAILED';
+export const DATA_SOURCE_REGISTER = 'DATA_SOURCE#REGISTER';
+export const DATA_SOURCE_EXECUTE = 'DATA_SOURCE#EXECUTE';
+export const DATA_SOURCE_EXECUTE_SUCCEEDED = 'DATA_SOURCE#EXECUTE_SUCCEEDED';
+export const DATA_SOURCE_EXECUTE_NO_CONTENT_SUCCEEDED = 'DATA_SOURCE#EXECUTE_NO_CONTENT_SUCCEEDED';
+export const DATA_SOURCE_EXECUTE_FAILED = 'DATA_SOURCE#EXECUTE_FAILED'; // REVIEW: This class is not used anywhere in the codebase.
+
 export class DataBrokerActionName {}
 
 _defineProperty(DataBrokerActionName, "GET_RECORDS", 'getRecords');

package/es/bc/zdata-source/EventHandlers.js

@@ -0,0 +1,2 @@
+import { DATA_SOURCE_EXECUTE, DATA_SOURCE_REGISTER } from "./Constants";
+import { FETCH_FAILED, FETCH_SUCCESS, FETCH_SUCCESS_NO_CONTENT } from "../zhttp/Constants";

package/es/bc/zdata-source/Symbols.js

@@ -0,0 +1,5 @@
+// Note: We need to properly handle uniqueness, because it is not api response
+export const DATA_SOURCE_SIGNATURE = 'DATA_SOURCE#SIGNATURE';
+export const DATA_SOURCE_FAILURE = 'DATA_SOURCE#FAILURE';
+export const DATA_SOURCE_SUCCESS = 'DATA_SOURCE#SUCCESS';
+export const DATA_SOURCE_NO_CONTENT = 'DATA_SOURCE#NO_CONTENT';

package/es/bc/zfield/ActionHandlers.js

@@ -1,2 +1,2 @@
 import { FIELD_EXECUTE, FIELD_REFETCH } from "./Constants";
-import { DATA_BROKER_EXECUTE_FAILED, DATA_BROKER_EXECUTE_NO_CONTENT_SUCCEEDED, DATA_BROKER_EXECUTE_SUCCEEDED } from "../zdata-broker/Constants";
+import { DATA_SOURCE_EXECUTE_FAILED, DATA_SOURCE_EXECUTE_NO_CONTENT_SUCCEEDED, DATA_SOURCE_EXECUTE_SUCCEEDED } from "../zdata-source/Constants";

package/es/bc/zlist/EventHandlers.js

@@ -1 +1 @@
-import { ZLIST_FETCH_MORE } from "./Constants";
+import { ZLIST_FETCH_MORE, ZLIST_RECORD_DELETE_SUCCEEDED, ZLIST_RECORD_UPDATE_SUCCEEDED } from "./Constants";

package/es/bc/zlist/Properties.js

@@ -7,50 +7,43 @@ export default {
       }
     }
   },
-  filter: {
+  departmentId: {
     required: true,
     typeMetadata: {
       schema: {
-        type: 'object',
-        properties: {
-          viewId: {
-            type: 'string'
-          },
-          orgId: {
-            type: 'string'
-          },
-          departmentId: {
-            type: 'string'
-          }
-        },
-        additionalProperties: {
-          type: 'string'
-        }
+        type: 'string'
       }
     }
   },
-  pageContext: {
+  viewId: {
+    required: true,
+    typeMetadata: {
+      schema: {
+        type: 'string'
+      }
+    }
+  },
+  context: {
     required: true,
     typeMetadata: {
       schema: {
         type: 'object',
         properties: {
-          orgName: {
+          orgId: {
             type: 'string'
           },
-          servicePrefix: {
+          orgName: {
             type: 'string'
           },
           departmentName: {
             type: 'string'
           },
-          moduleSanitatedName: {
+          servicePrefix: {
             type: 'string'
           }
         },
-        additionalProperties: {
-          type: 'string'
-        }
+        required: ['orgId', 'orgName', 'departmentName'],
+        additionalProperties: false
       }
     }
   },
@@ -69,14 +62,5 @@ export default {
         }]
       }
     }
-  },
-  limit: {
-    required: false,
-    defaultValue: 50,
-    typeMetadata: {
-      schema: {
-        type: 'number'
-      }
-    }
   }
 };

package/es/cc/action-icon/Properties.js

@@ -34,6 +34,37 @@ export default {
       }
     }
   },
+  options: {
+    // NOTE: This is only a sample for FilterDropdown action component
+    required: false,
+    defaultValue: [],
+    typeMetadata: {
+      schema: {
+        type: "array",
+        items: {
+          type: "object",
+          properties: {
+            label: {
+              type: "string"
+            },
+            value: {
+              type: "string"
+            }
+          }
+        }
+      }
+    }
+  },
+  isMultiselectable: {
+    // NOTE: This is only a sample for FilterDropdown action component
+    required: false,
+    defaultValue: false,
+    typeMetadata: {
+      schema: {
+        type: "boolean"
+      }
+    }
+  },
   isVisible: {
     required: false,
     defaultValue: true,

package/es/cc/action-location/Properties.js

@@ -4,7 +4,10 @@ export const actionsSchema = {
   items: {
     type: 'object',
     properties: {
-      type: {
+      component: {
+        type: 'string'
+      },
+      id: {
         type: 'string'
       },
       properties: {
@@ -16,42 +19,24 @@ export const actionsSchema = {
         items: {
           type: 'object',
           properties: {
-            action: {
-              type: 'object',
-              properties: {
-                id: {
-                  type: 'string'
-                },
-                dispatchType: {
-                  type: 'string'
-                }
-              },
-              required: ['id', 'dispatchType']
+            id: {
+              type: 'string'
             },
-            eventType: {
+            sourceEvent: {
               type: 'string'
             },
             payload: {
               type: 'object'
             }
           },
-          required: ['action', 'payload', 'eventType']
+          required: ['sourceEvent', 'id']
         }
       }
     },
-    required: ['type', 'properties']
+    required: ['component', 'properties']
   }
 };
 export default {
-  type: {
-    required: false,
-    typeMetadata: {
-      schema: {
-        type: 'string'
-      }
-    },
-    defaultValue: ''
-  },
   actions: {
     required: true,
     typeMetadata: {

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

@@ -0,0 +1,4 @@
+export const SMART_TABLE_EVENTS = {
+  DELETE_RECORDS_SUCCESS: 'SMART_TABLE#RECORD_DELETED',
+  UPDATE_RECORDS_SUCCESS: 'SMART_TABLE#RECORD_UPDATED'
+};

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

@@ -1,16 +1,23 @@
 import SelectionConfigSchema from "../../bc/list-selection/Properties";
 export default {
-  isFlexibleColumns: {
+  preferences: {
     required: false,
-    defaultValue: false,
+    defaultValue: {
+      autoColumnSizing: false
+    },
     typeMetadata: {
       schema: {
-        type: 'boolean'
+        type: 'object',
+        properties: {
+          autoColumnSizing: {
+            type: 'boolean'
+          }
+        }
       }
     }
   },
   ...SelectionConfigSchema,
-  uiMapping: {
+  componentMapping: {
     required: false,
     defaultValue: {
       fields: {},
@@ -40,58 +47,5 @@ export default {
         type: 'string'
       }
     }
-  },
-  rowActions: {
-    required: false,
-    defaultValue: [],
-    typeMetadata: {
-      schema: {
-        type: 'array',
-        minItems: 0,
-        items: {
-          type: 'object',
-          properties: {
-            uiType: {
-              type: 'string'
-            },
-            properties: {
-              type: 'object'
-            },
-            eventMappings: {
-              type: 'array',
-              minItems: 0,
-              items: {
-                type: 'object',
-                properties: {
-                  id: {
-                    type: 'string'
-                  },
-                  action: {
-                    type: 'object',
-                    properties: {
-                      id: {
-                        type: 'string'
-                      },
-                      dispatchType: {
-                        type: 'string'
-                      }
-                    },
-                    required: ['id', 'dispatchType']
-                  },
-                  eventType: {
-                    type: 'string'
-                  },
-                  payloadMapping: {
-                    type: 'string'
-                  }
-                },
-                required: ['id', 'action', 'payloadMapping', 'eventType']
-              }
-            }
-          },
-          required: ['uiType', 'properties']
-        }
-      }
-    }
   }
 };

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

@@ -1,7 +1,7 @@
 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 { actionsSchema } from "../../platform/client-actions/cc/action-event-mediator/Properties";
 import PropertiesConverter from "../component/properties/PropertiesConverter";
 import BooleanProperties from "../fields/boolean/Properties";
 import CurrencyProperties from "../fields/currency/Properties";
@@ -147,7 +147,7 @@ const TableListProperties = {
             }]
           },
           ActionLocation: {
-            type: 'object',
+            renderComponentType: 'object',
             properties: {
               type: {
                 type: 'string'

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

@@ -18,4 +18,10 @@ export let Alignment = /*#__PURE__*/function (Alignment) {
   Alignment["Center"] = "center";
   Alignment["Right"] = "right";
   return Alignment;
+}({});
+export let AlignmentOfFlex = /*#__PURE__*/function (AlignmentOfFlex) {
+  AlignmentOfFlex["left"] = "start";
+  AlignmentOfFlex["center"] = "center";
+  AlignmentOfFlex["right"] = "end";
+  return AlignmentOfFlex;
 }({});

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

@@ -1,4 +1,5 @@
 import { ZLIST_DELETE_RECORD, ZLIST_DELETE_RECORDS, ZLIST_RECORD_UPDATE } from "../../../bc/zlist/Constants";
+import { RECORD_LOCAL_MULTIPLE_DELETE, RECORD_LOCAL_UPDATE } from "../../../bc/zrecord/Constants";
 /* eslint-disable max-lines-per-function */
 
 export default class ListSdkFactory {
@@ -21,25 +22,84 @@ export default class ListSdkFactory {
           return (_state$behaviours2 = state.behaviours) === null || _state$behaviours2 === void 0 ? void 0 : (_state$behaviours2$zr = _state$behaviours2.zrecord.records) === null || _state$behaviours2$zr === void 0 ? void 0 : _state$behaviours2$zr.find(r => r.id === recordId);
         },
 
+        getContext(variableName) {
+          var _state$properties;
+
+          const {
+            departmentId,
+            viewId,
+            moduleName
+          } = state.properties;
+          const {
+            servicePrefix,
+            ...context
+          } = (_state$properties = state.properties) === null || _state$properties === void 0 ? void 0 : _state$properties.context;
+          const updatedContext = { ...context,
+            departmentId,
+            viewId,
+            moduleName
+          };
+          return variableName ? context === null || context === void 0 ? void 0 : context[variableName] : updatedContext;
+        },
+
         deleteRecord(recordId) {
+          let output = {
+            "data": [{
+              "id": recordId,
+              "Success": true,
+              "error": null
+            }]
+          };
           dispatch({
             type: ZLIST_DELETE_RECORD,
             payload: {
               recordId
             }
           });
+          return output;
         },
 
+        // deleteRecords(recordIds) {
+        //   dispatch({
+        //     type: ZLIST_DELETE_RECORDS,
+        //     payload: {
+        //       recordIds
+        //     }
+        //   });
+        // },
         deleteRecords(recordIds) {
+          let shouldFetch = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+          let output = {
+            "data": []
+          };
+          let DELETE_ACTION = shouldFetch ? ZLIST_DELETE_RECORDS : RECORD_LOCAL_MULTIPLE_DELETE;
           dispatch({
-            type: ZLIST_DELETE_RECORDS,
+            type: DELETE_ACTION,
             payload: {
               recordIds
             }
           });
+
+          for (let recordId of recordIds) {
+            let recordUpdateDetail = {
+              "id": recordId,
+              "Success": true,
+              "error": null
+            };
+            output.data.push(recordUpdateDetail);
+          }
+
+          return output;
         },
 
         updateRecord(recordId, record) {
+          let output = {
+            "results": [{
+              "id": recordId,
+              "Success": true,
+              "error": null
+            }]
+          };
           dispatch({
             type: ZLIST_RECORD_UPDATE,
             payload: {
@@ -47,6 +107,33 @@ export default class ListSdkFactory {
               record
             }
           });
+          return output;
+        },
+
+        updateRecords(recordsMap) {
+          let shouldFetch = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+          let output = {
+            "results": []
+          };
+          let UPDATE_ACTION = shouldFetch ? ZLIST_RECORD_UPDATE : RECORD_LOCAL_UPDATE;
+
+          for (let record of recordsMap) {
+            dispatch({
+              type: UPDATE_ACTION,
+              payload: {
+                recordId: record.id,
+                record: record
+              }
+            });
+            let recordUpdateDetail = {
+              "id": record.id,
+              "Success": true,
+              "error": null
+            };
+            output.results.push(recordUpdateDetail);
+          }
+
+          return output;
         }
 
       }

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

@@ -7,28 +7,42 @@ import ZListBehaviourFactory from "../../../platform/zlist/frameworks/ZListBehav
 import RecordBehaviourFactory from "../../../platform/zrecord/frameworks/RecordBehaviourFactory";
 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";
+import defaultDataSource from "../../../platform/data-source";
+import DataSourceBehaviourFactory from "../../../platform/zdata-source/frameworks/DataBrokerBehaviourFactory";
+import ClientActionsBehaviourFactory from "../../../platform/client-actions/behaviour/zclient-actions/frameworks/ClientActionsBehaviourFactory";
 export default class TableConnectedFactory {
   static create(_ref) {
+    var _dataSource2;
+
     let {
       name,
-      dataBroker = defaultDataBroker,
+      dataBroker,
+      dataSource,
       eventHandlers = {},
       View = TableConnectedView
     } = _ref;
+
+    if (!dataSource) {
+      console.warn('Desk Platform Warning: dataBroker is deprecated, use dataSource instead');
+      dataSource = dataBroker;
+    }
+
+    const _dataSource = { ...dataSource,
+      httpTemplates: { ...defaultDataSource.httpTemplates,
+        ...((_dataSource2 = dataSource) === null || _dataSource2 === void 0 ? void 0 : _dataSource2.httpTemplates)
+      }
+    };
     return createCustomComponent({
       name: name,
       View: View,
       properties: Properties,
       eventHandlers: EventHandlersFactory.create(eventHandlers),
       transformState: TableTranslator.transformState,
-      behaviours: [ZHttpBehaviourFactory.create(), DataBrokerBehaviourFactory.create(), RecordBehaviourFactory.create(dataBroker.httpTemplates), ClientActionBehaviourFactory.create({
-        getClientActions: dataBroker.httpTemplates.getClientActions
+      behaviours: [ZHttpBehaviourFactory.create(), DataSourceBehaviourFactory.create(), RecordBehaviourFactory.create(_dataSource.httpTemplates), ClientActionsBehaviourFactory.create({
+        getClientActions: _dataSource.httpTemplates.getClientActions
       }), ZFieldBehaviourFactory.create({
-        availableFields: dataBroker.httpTemplates.getAvailableFields,
-        selectedFields: dataBroker.httpTemplates.getSelectedFields
+        availableFields: _dataSource.httpTemplates.getAvailableFields,
+        selectedFields: _dataSource.httpTemplates.getSelectedFields
       }), ZListBehaviourFactory.create()]
     });
   }

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

@@ -15,14 +15,17 @@ function View(_ref, ref) {
     emptyStateUiType
   } = state;
   const {
-    isFlexibleColumns,
+    preferences,
     selectionConfig
   } = properties;
+  const {
+    autoColumnSizing
+  } = preferences || {};
   return /*#__PURE__*/React.createElement(TableList, {
     data: data,
     rowCursor: rowCursor,
     getRef: ref,
-    isFlexibleColumns: isFlexibleColumns,
+    isFlexibleColumns: autoColumnSizing,
     rowActionsConfig: rowActionsConfig,
     isLoading: isLoading,
     emptyStateUiType: emptyStateUiType,

package/es/library/dot/components/action-location/frameworks/ui/ActionComponentMapping.js

@@ -1,5 +1,7 @@
-import ActionIcon from "../../../../legacy-to-new-arch/action-icon/frameworks/ui/ActionIcon";
+import ActionIcon, { Button, FilterDropdown } from "../../../../legacy-to-new-arch/action-icon/frameworks/ui/ActionIcon";
 const ActionComponentMapping = {
-  'ActionIcon': ActionIcon
+  'ActionIcon': ActionIcon,
+  'Button': Button,
+  'TableFilterDropdown': FilterDropdown
 };
 export default ActionComponentMapping;

package/es/library/dot/components/table-list/frameworks/ui/sub-components/Header.js

@@ -26,6 +26,7 @@ function Header(_ref) {
   }
 
   return /*#__PURE__*/React.createElement(TableHeader, {
+    $flag_isColumnsFlexible: isFlexibleColumns,
     $flag_padding: !isSelectionEnabled
   }, /*#__PURE__*/React.createElement(TableHeaderRow, null, renderSelectAll(isSelectionEnabled, hasAllSelected, dispatch), renderHeaders(headers, currentlyResizingColumn, isResizerEnabled, isFlexibleColumns, dispatch), renderActionColumn(hasRowActions, rowActionsColumnWidth), renderResizerExtraSpace(isCurrentlyResizing, resizerExtraWidth)));
 }

package/es/library/dot/components/table-list/frameworks/ui/sub-components/header/HeaderData.js

@@ -1,5 +1,8 @@
 import React from 'react';
 import TableHead from '@zohodesk-private/desk-components/es/table/TableHead/TableHead';
+import { AlignmentOfFlex } from "../../../../../../../../cc/table-list/data-types/Header";
+import ActionEventMediator from "../../../../../../../../platform/client-actions/components/action-event-mediator/frameworks/ui/ActionEventMediator";
+import { ActionViewGap } from "../../../../../../../../platform/client-actions/components/interfaces/ActionViewModel";
 import HeaderText from "./HeaderText";
 import ColumnResizer from "./ColumnResizer";
 
@@ -19,8 +22,10 @@ function HeaderData(_ref) {
     text,
     sortable,
     width,
-    alignment
+    alignment,
+    actions
   } = header;
+  const hasActions = Boolean(actions === null || actions === void 0 ? void 0 : actions.length);
   return (
     /*#__PURE__*/
     // @ts-ignore
@@ -30,7 +35,12 @@ function HeaderData(_ref) {
       $flag_flexible: isFlexibleColumns,
       $a11yAttributes_container: {
         'aria-sort': sortable ? sortedBy : 'none'
-      }
+      },
+      $customProps_container: hasActions ? {
+        $ui_displayMode: 'flex',
+        $ui_alignItems: 'center',
+        $ui_justifyContent: AlignmentOfFlex[alignment]
+      } : null
     }, /*#__PURE__*/React.createElement(HeaderText, {
       id: id,
       name: name,
@@ -39,7 +49,10 @@ function HeaderData(_ref) {
       sortedBy: sortedBy,
       sortTooltip: sortTooltip,
       dispatch: dispatch
-    }), /*#__PURE__*/React.createElement(ColumnResizer, {
+    }), hasActions ? /*#__PURE__*/React.createElement(ActionEventMediator, {
+      actions: actions,
+      gap: ActionViewGap.SMALL
+    }) : null, /*#__PURE__*/React.createElement(ColumnResizer, {
       isResizerEnabled: isResizerEnabled,
       isResizing: isResizing
     }))