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

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import TableHeader from '@zohodesk-private/desk-components/es/table/TableHeader/TableHeader';
+import TableHeaderRow from '@zohodesk-private/desk-components/es/table/TableHeader/TableHeaderRow';
 import SelectAll from "./header/SelectAll";
 import Headers from "./header/Headers";
 import ActionColumn from "./header/ActionColumn";
@@ -10,12 +11,12 @@ function Header(_ref) {
     isSelectionEnabled,
     hasAllSelected,
     isResizerEnabled,
-    resizedColumnsWidth,
     currentlyResizingColumn,
     isCurrentlyResizing,
     resizerExtraWidth,
     isFlexibleColumns,
     hasRowActions,
+    rowActionsColumnWidth,
     headers,
     dispatch
   } = _ref;
@@ -26,7 +27,7 @@ function Header(_ref) {
 
   return /*#__PURE__*/React.createElement(TableHeader, {
     $flag_padding: !isSelectionEnabled
-  }, renderSelectAll(isSelectionEnabled, hasAllSelected, dispatch), renderHeaders(headers, resizedColumnsWidth, currentlyResizingColumn, isResizerEnabled, isFlexibleColumns, dispatch), renderActionColumn(hasRowActions), renderResizerExtraSpace(isCurrentlyResizing, resizerExtraWidth));
+  }, /*#__PURE__*/React.createElement(TableHeaderRow, null, renderSelectAll(isSelectionEnabled, hasAllSelected, dispatch), renderHeaders(headers, currentlyResizingColumn, isResizerEnabled, isFlexibleColumns, dispatch), renderActionColumn(hasRowActions, rowActionsColumnWidth), renderResizerExtraSpace(isCurrentlyResizing, resizerExtraWidth)));
 }
 
 function renderSelectAll(isSelectionEnabled, hasAllSelected, dispatch) {
@@ -37,10 +38,9 @@ function renderSelectAll(isSelectionEnabled, hasAllSelected, dispatch) {
   });
 }
 
-function renderHeaders(headers, resizedColumnsWidth, currentlyResizingColumn, isResizerEnabled, isFlexibleColumns, dispatch) {
+function renderHeaders(headers, currentlyResizingColumn, isResizerEnabled, isFlexibleColumns, dispatch) {
   return /*#__PURE__*/React.createElement(Headers, {
     headers: headers,
-    resizedColumnsWidth: resizedColumnsWidth,
     currentlyResizingColumn: currentlyResizingColumn,
     isResizerEnabled: isResizerEnabled,
     isFlexibleColumns: isFlexibleColumns,
@@ -48,9 +48,10 @@ function renderHeaders(headers, resizedColumnsWidth, currentlyResizingColumn, is
   });
 }
 
-function renderActionColumn(hasRowActions) {
+function renderActionColumn(hasRowActions, columnWidth) {
   return /*#__PURE__*/React.createElement(ActionColumn, {
-    hasRowActions: hasRowActions
+    hasRowActions: hasRowActions,
+    columnWidth: columnWidth
   });
 }
 

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

@@ -1,7 +1,5 @@
 import React from 'react';
 import Row from "./row/Row";
-const emptyArray = Object.freeze([]);
-const emptyObject = {};
 
 function Rows(_ref) {
   let {
@@ -9,44 +7,44 @@ function Rows(_ref) {
     rows,
     isFlexibleColumns,
     isSelectionEnabled,
-    resizedColumnsWidth,
-    hasRowActions
+    rowCursor,
+    hasRowActions,
+    rowActionsColumnWidth
   } = _ref;
   return rows.map((row, index) => /*#__PURE__*/React.createElement(Row, {
     key: index,
-    ...getRowProps(row, headers, isFlexibleColumns, isSelectionEnabled, resizedColumnsWidth, hasRowActions)
+    ...getRowProps(row, headers, isFlexibleColumns, isSelectionEnabled, rowCursor, hasRowActions, rowActionsColumnWidth)
   }));
 }
 
-function getRowProps(row, headers, isFlexibleColumns, isSelectionEnabled, resizedColumnsWidth, hasRowActions) {
+function getRowProps(row, headers, isFlexibleColumns, isSelectionEnabled, rowCursor, hasRowActions, rowActionsColumnWidth) {
   const {
     id,
     columns,
     isSelected,
     isSelectable,
     selectionTooltip,
-    clickAction,
-    rowActions
+    rowActionLocation
   } = row;
   const updatedColumns = getUpdatedColumns(columns, headers);
   return {
     id,
-    columns: updatedColumns || emptyArray,
-    clickAction: clickAction || emptyObject,
-    rowActions: rowActions || emptyArray,
+    columns: updatedColumns,
+    rowActionLocation,
     isSelected,
     isSelectable,
     selectionTooltip,
     isFlexibleColumns,
     isSelectionEnabled,
-    resizedColumnsWidth,
-    hasActions: hasRowActions
+    cursor: rowCursor,
+    hasActions: hasRowActions,
+    rowActionsColumnWidth
   };
 }
 
 function getUpdatedColumns(columns, headers) {
   return columns.map((column, index) => ({
-    size: headers[index].size,
+    width: headers[index].width,
     field: column,
     alignment: headers[index].alignment
   }));

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

@@ -2,12 +2,13 @@ import React from 'react';
 import TableHead from '@zohodesk-private/desk-components/es/table/TableHead/TableHead';
 export default function ActionColumn(_ref) {
   let {
-    hasRowActions
+    hasRowActions,
+    columnWidth
   } = _ref;
 
   if (hasRowActions) {
     return /*#__PURE__*/React.createElement(TableHead, {
-      $ui_size: "medium"
+      $data_width: columnWidth
     }, /*#__PURE__*/React.createElement(React.Fragment, null));
   }
 

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

@@ -10,7 +10,6 @@ function HeaderData(_ref) {
     sortTooltip,
     isResizing,
     isResizerEnabled,
-    resizedWidth,
     isFlexibleColumns,
     dispatch
   } = _ref;
@@ -19,25 +18,26 @@ function HeaderData(_ref) {
     name,
     text,
     sortable,
-    size,
+    width,
     alignment
   } = header;
   return (
     /*#__PURE__*/
     // @ts-ignore
     React.createElement(TableHead, {
-      $ui_size: size,
       $ui_align: alignment,
-      $data_width: resizedWidth,
-      $flag_flexible: isFlexibleColumns
+      $data_width: width,
+      $flag_flexible: isFlexibleColumns,
+      $a11yAttributes_container: {
+        'aria-sort': sortable ? sortedBy : 'none'
+      }
     }, /*#__PURE__*/React.createElement(HeaderText, {
       id: id,
       name: name,
       text: text,
       sortable: sortable,
       sortedBy: sortedBy,
-      sortTooltip: sortTooltip // Yet to be implemented
-      ,
+      sortTooltip: sortTooltip,
       dispatch: dispatch
     }), /*#__PURE__*/React.createElement(ColumnResizer, {
       isResizerEnabled: isResizerEnabled,

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

@@ -4,7 +4,6 @@ import HeaderData from "./HeaderData";
 function Headers(_ref) {
   let {
     headers,
-    resizedColumnsWidth,
     currentlyResizingColumn,
     isResizerEnabled,
     isFlexibleColumns,
@@ -17,12 +16,9 @@ function Headers(_ref) {
     } = header;
     let isResizing = currentlyResizingColumn === header.id; // TODO: To be adopted with properties
 
-    let resizedWidth = resizedColumnsWidth[header.id]; // TODO: To be adopted with properties
-
     return /*#__PURE__*/React.createElement(HeaderData, {
       key: index,
       header: header,
-      resizedWidth: resizedWidth,
       sortedBy: sortOrder,
       sortTooltip: sortTooltip,
       isResizing: isResizing,

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

@@ -1,6 +1,6 @@
 import React from 'react';
+import CheckBox from '@zohodesk/components/es/CheckBox/CheckBox';
 import TableHeadFirstNode from '@zohodesk-private/desk-components/es/table/TableHeadFirstNode/TableHeadFirstNode';
-import TableCheckBox from '@zohodesk-private/desk-components/es/table/TableCheckBox/TableCheckBox';
 import { TableListConstants } from "../../../../../../../../cc/table-list";
 
 function SelectAll(_ref) {
@@ -14,9 +14,9 @@ function SelectAll(_ref) {
     return null;
   }
 
-  return /*#__PURE__*/React.createElement(TableHeadFirstNode, null, /*#__PURE__*/React.createElement(TableCheckBox, {
-    $flag_checked: hasAllSelected,
-    $event_onChange: () => dispatch({
+  return /*#__PURE__*/React.createElement(TableHeadFirstNode, null, /*#__PURE__*/React.createElement(CheckBox, {
+    checked: hasAllSelected,
+    onChange: () => dispatch({
       type: TableListConstants.TABLE_LIST_TOGGLE_ALL_SELECTION
     })
   }));

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

@@ -3,23 +3,19 @@ import RowData from "./RowData";
 
 function Columns(_ref) {
   let {
-    resizedColumnsWidth,
     data,
     isFlexibleColumns
   } = _ref;
   return data.map((column, index) => {
     const {
-      size,
+      width,
       alignment,
       field
     } = column;
-    const resizedWidth = resizedColumnsWidth[field.id]; // Will be adopted with properties
-
     return /*#__PURE__*/React.createElement(RowData, {
       key: index,
       field: field,
-      resizedWidth: resizedWidth,
-      size: size,
+      width: width,
       alignment: alignment,
       isFlexibleColumns: isFlexibleColumns
     });

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

@@ -6,7 +6,9 @@ import RowActions from "./RowActions";
 import { createCustomComponent } from "../../../../../../../custom-component";
 import { RowEventHandlersFactory } from "./RowEventHandlersFactory";
 import TableRowProperties from "../../../../../../../../cc/table-list/row/Properties";
-import TableRowConstants from "../../../../../../../../cc/table-list/row/Constants";
+import TableRowConstants from "../../../../../../../../cc/table-list/row/Constants"; // @ts-ignore
+
+import style from "../../css/TableList.module.css";
 
 function RowView(_ref, ref) {
   let {
@@ -25,11 +27,16 @@ function RowView(_ref, ref) {
   const {
     id,
     columns,
-    rowActions,
+    rowActionLocation,
     isFlexibleColumns,
-    resizedColumnsWidth,
-    hasActions
+    cursor,
+    hasActions,
+    rowActionsColumnWidth
   } = state.properties;
+  const {
+    type,
+    actions
+  } = rowActionLocation;
   return /*#__PURE__*/React.createElement(TableRow, {
     key: id,
     ref: ref,
@@ -40,7 +47,10 @@ function RowView(_ref, ref) {
       payload: {
         id
       }
-    })
+    }),
+    customStyle: {
+      $pointer: style[`rowCursor_${cursor}`]
+    }
   }, renderRowSelection({
     isSelectionEnabled,
     id,
@@ -50,12 +60,12 @@ function RowView(_ref, ref) {
     dispatch
   }), renderColumns({
     columns,
-    resizedColumnsWidth,
     isFlexibleColumns
   }), renderRowActions({
     hasActions,
-    rowActions,
-    dispatch
+    columnWidth: rowActionsColumnWidth,
+    type,
+    actions
   }));
 }
 
@@ -81,12 +91,10 @@ function renderRowSelection(_ref2) {
 function renderColumns(_ref3) {
   let {
     columns,
-    resizedColumnsWidth,
     isFlexibleColumns
   } = _ref3;
   return /*#__PURE__*/React.createElement(Columns, {
     data: columns,
-    resizedColumnsWidth: resizedColumnsWidth,
     isFlexibleColumns: isFlexibleColumns
   });
 }
@@ -94,13 +102,15 @@ function renderColumns(_ref3) {
 function renderRowActions(_ref4) {
   let {
     hasActions,
-    rowActions,
-    dispatch
+    columnWidth,
+    actions,
+    type
   } = _ref4;
   return /*#__PURE__*/React.createElement(RowActions, {
     hasActions: hasActions,
-    actions: rowActions,
-    dispatch: dispatch
+    columnWidth: columnWidth,
+    type: type,
+    actions: actions
   });
 }
 

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

@@ -4,13 +4,17 @@ import ActionLocation from "../../../../../action-location/frameworks/ui/ActionL
 export default function RowActions(_ref) {
   let {
     hasActions,
+    columnWidth,
+    type = '',
     actions
   } = _ref;
 
+  // TODO: Need to fix the defaultValue from properties => CC
   if (hasActions) {
     return /*#__PURE__*/React.createElement(TableAction, {
-      $ui_size: "medium"
+      $data_width: columnWidth
     }, /*#__PURE__*/React.createElement(ActionLocation, {
+      type: type,
       actions: actions
     }));
   }

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

@@ -4,9 +4,8 @@ import FieldComponent from "../field/FieldComponent";
 export default function RowData(_ref) {
   let {
     field,
-    size,
+    width,
     alignment,
-    resizedWidth,
     isFlexibleColumns
   } = _ref;
   let {
@@ -14,9 +13,8 @@ export default function RowData(_ref) {
     ...props
   } = field;
   return /*#__PURE__*/React.createElement(TableData, {
-    $ui_size: size,
     $ui_align: alignment,
-    $data_width: resizedWidth,
+    $data_width: width,
     $flag_flexible: isFlexibleColumns
   }, /*#__PURE__*/React.createElement(FieldComponent, {
     type: type,

package/es/library/dot/legacy-to-new-arch/action-icon/{ActionIcon.js → frameworks/ui/ActionIcon.js}

@@ -1,5 +1,5 @@
-import { createCustomComponent } from "../../../custom-component";
-import Properties from "../../../../cc/action-icon/Properties";
+import { createCustomComponent } from "../../../../../custom-component";
+import Properties from "../../../../../../cc/action-icon/Properties";
 import ActionIconView from "./ActionIconView";
 const ActionIcon = createCustomComponent({
   name: 'ActionIcon',

package/es/library/dot/legacy-to-new-arch/action-icon/{ActionIconView.js → frameworks/ui/ActionIconView.js}

@@ -1,6 +1,8 @@
 import React from 'react';
 import ActionIcon from '@zohodesk-private/desk-components/es/ActionIcon/ActionIcon';
-import Constants from "../../../../cc/action-icon/Constants";
+import Constants from "../../../../../../cc/action-icon/Constants"; // @ts-ignore
+
+import style from "./css/ActionIcon.module.css";
 export default function ActionIconView(_ref, ref) {
   let {
     state,
@@ -9,22 +11,26 @@ export default function ActionIconView(_ref, ref) {
   const {
     icon,
     label,
-    hoverVariant
+    hoverVariant,
+    isDisabled,
+    isVisible
   } = state.properties;
   const {
     dispatch
   } = helpers;
   return /*#__PURE__*/React.createElement("span", {
-    ref: ref
+    ref: ref,
+    className: isVisible ? '' : style.hide
   }, /*#__PURE__*/React.createElement(ActionIcon, {
     $ui_iconName: icon,
     $ui_hoverVariant: hoverVariant,
     $flag_gap: true,
+    $flag_disabled: isDisabled,
     $i18n_tooltip: label,
-    $event_onClick: () => {
+    $event_onClick: !isDisabled ? () => {
       dispatch({
         type: Constants.ACTION_ICON_CLICKED
       });
-    }
+    } : null
   }));
 }

package/es/library/dot/legacy-to-new-arch/action-icon/frameworks/ui/css/ActionIcon.module.css

@@ -0,0 +1,3 @@
+.hide {
+    display: none
+}

package/es/library/dot/legacy-to-new-arch/index.js

@@ -6,4 +6,4 @@ export { default as Link } from "./link/frameworks/ui/Link";
 export { default as Switch } from "./switch/frameworks/ui/Switch";
 export { default as Tags } from "./tags/frameworks/ui/Tags";
 export { default as Text } from "./text/frameworks/ui/Text";
-export { default as ActionIcon } from "./action-icon/ActionIcon";
+export { default as ActionIcon } from "./action-icon/frameworks/ui/ActionIcon";

package/es/platform/data-broker/http-template/deleteRecord.js

@@ -1,6 +1,6 @@
 const deleteRecord = {
   name: 'records',
-  api: '/api/v1/{{moduleName}}/moveToTrash',
+  api: '/{{servicePrefix}}/{{orgName}}/api/v1/{{moduleName}}/moveToTrash',
   parameters: `{}`,
   type: 'POST',
   transformer: data => data,

package/es/platform/data-broker/http-template/deleteRecords.js

@@ -1,6 +1,6 @@
 const deleteRecords = {
   name: 'records',
-  api: '/api/v1/{{moduleName}}/moveToTrash',
+  api: '/{{servicePrefix}}/{{orgName}}/api/v1/{{moduleName}}/moveToTrash',
   parameters: `{}`,
   type: 'POST',
   transformer: data => data,

package/es/platform/data-broker/http-template/getAvailableFields.js

@@ -1,6 +1,6 @@
 let getAvailableFields = {
   name: "availableFields",
-  api: "/api/v1/views/availableFields",
+  api: "/{{servicePrefix}}/{{orgName}}/api/v1/views/availableFields",
   parameters: `{
         "departmentId":"{{departmentId}}",
         "module":"{{moduleName}}"

package/es/platform/data-broker/http-template/getClientActions.js

@@ -0,0 +1,23 @@
+let getClientActions = {
+  name: "uiActions",
+  api: "/{{servicePrefix}}/{{orgName}}/api/v1/clientActions",
+  parameters: `{
+        "from":{{from}},
+        "limit":{{limit}},
+        "library": "{{library}}",
+        "module": "{{moduleName}}"
+    }`,
+  type: "GET",
+  transformer: data => data,
+  properties: {
+    modelName: {
+      required: true,
+      typeMetadata: {
+        schema: {
+          type: "string"
+        }
+      }
+    }
+  }
+};
+export default getClientActions;

package/es/platform/data-broker/http-template/getRecords.js

@@ -1,6 +1,6 @@
 let getRecords = {
   name: 'records',
-  api: '/api/v1/{{moduleName}}',
+  api: '/{{servicePrefix}}/{{orgName}}/api/v1/{{moduleName}}',
   parameters: `{
         "viewId":"{{viewId}}",
         "from":{{from}},

package/es/platform/data-broker/http-template/getSelectedFields.js

@@ -1,6 +1,6 @@
 let getSelectedFields = {
   name: "selectedFields",
-  api: "/api/v1/views/{{viewId}}/selectedFields",
+  api: "/{{servicePrefix}}/{{orgName}}/api/v1/views/{{viewId}}/selectedFields",
   parameters: `{
         "departmentId":"{{departmentId}}"
     }`,

package/es/platform/data-broker/http-template/updateRecord.js

@@ -1,6 +1,6 @@
 const updateRecord = {
   name: 'records',
-  api: '/api/v1/{{moduleName}}/{{recordId}}',
+  api: '/{{servicePrefix}}/{{orgName}}/api/v1/{{moduleName}}/{{recordId}}',
   parameters: `{}`,
   type: 'PATCH',
   transformer: data => data,

package/es/platform/data-broker/index.js

@@ -4,7 +4,7 @@ import updateRecord from "./http-template/updateRecord";
 import deleteRecords from "./http-template/deleteRecords";
 import getAvailableFields from "./http-template/getAvailableFields";
 import getSelectedFields from "./http-template/getSelectedFields";
-import getUIActions from "./http-template/getUIActions";
+import getClientActions from "./http-template/getClientActions";
 import { RecordApiActionName } from "../../bc/zrecord/Constants";
 import deleteRecord from "./http-template/deleteRecord";
 let record = {
@@ -13,9 +13,9 @@ let record = {
     [RecordApiActionName.UPDATE_RECORD]: updateRecord,
     [RecordApiActionName.DELETE_RECORDS]: deleteRecords,
     [RecordApiActionName.DELETE_RECORD]: deleteRecord,
+    [RecordApiActionName.GET_CLIENTACTIONS]: getClientActions,
     getAvailableFields,
-    getSelectedFields,
-    getUIActions
+    getSelectedFields
   }
 };
 export default record; // let ticketsRecordSerice = createRecord(tickets, () => {});

package/es/platform/zclient-actions/Readme.md

@@ -0,0 +1,38 @@
+Client Actions Behaviour
+
+
+This behaviour will allows your library components to fetch client actions for your users.
+
+# Implementation
+
+ClientActionBehaviourFactory.create({ getClientActions: dataBroker.httpTemplates.getClientActions })
+
+This above class should be implemeted in the behaviour props of your library components
+
+The user needs to passdown the databroker into the behaviour in the format,
+
+1. getClientActions => Client Actions GET data broker template
+
+
+
+# Integration inside component
+
+We need to initialize or mount our behaviour with the component. Refer the eg used in List component below 
+
+  private createClientActionsFetchAction(): ActionModel {
+    const props = this.createApiProps();
+    return {
+      type: CLIENTACTION_BEHAVIOUR_EXECUTE,
+      payload: {
+        actionName: 'getClientActions',
+        props,
+        apiName: 'clientActions'
+      }
+    };
+  }
+
+The function createClientActionsFetchAction is called at Library component mount, which will mount client action behaviour and do the necessary processing.
+
+
+
+

package/es/platform/zclient-actions/adapters/controllers/AbstractController.js

@@ -0,0 +1,8 @@
+export default class AbstractController {
+  constructor(service) {
+    this.service = service;
+    this.service = service;
+    this.handle = this.handle.bind(this);
+  }
+
+}

package/es/platform/zclient-actions/adapters/controllers/ClientActionBehaviourExecutorController.js

@@ -0,0 +1,27 @@
+import AbstractController from "./AbstractController";
+export default class ClientActionBehaviourExecutorController extends AbstractController {
+  handle(event) {
+    const {
+      state,
+      updateState,
+      action,
+      dispatch
+    } = event;
+    const {
+      actionName,
+      props,
+      apiName
+    } = action.payload;
+    const {
+      executeActionBehaviourUseCase
+    } = this.service;
+    executeActionBehaviourUseCase.updateDependency(state, updateState);
+    executeActionBehaviourUseCase.execute({
+      dispatch,
+      apiName,
+      actionName,
+      props
+    });
+  }
+
+}

package/es/platform/zclient-actions/adapters/controllers/FailureController.js

@@ -0,0 +1,28 @@
+import AbstractController from "./AbstractController";
+export default class FailureController extends AbstractController {
+  handle(event) {
+    const {
+      state,
+      updateState,
+      action,
+      dispatch
+    } = event;
+    const {
+      metaData,
+      payload
+    } = action;
+    const {
+      error
+    } = payload;
+    const {
+      failureUseCase
+    } = this.service;
+    failureUseCase.updateDependency(state, updateState);
+    failureUseCase.execute({
+      dispatch,
+      error,
+      metaData
+    });
+  }
+
+}