@zohodesk/library-platform 1.0.0 → 1.0.2-exp.3

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;
@@ -25,8 +26,9 @@ function Header(_ref) {
   }
 
   return /*#__PURE__*/React.createElement(TableHeader, {
+    $flag_isColumnsFlexible: isFlexibleColumns,
     $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 +39,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 +49,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

@@ -5,4 +5,5 @@ export { default as HighlightedValue } from "./highlighted-value/frameworks/ui/H
 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 Text } from "./text/frameworks/ui/Text";
+export { default as ActionIcon } from "./action-icon/frameworks/ui/ActionIcon";

package/es/library/dot/legacy-to-new-arch/table-field-components/lookup-field/frameworks/ui/LookupFieldView.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Avatar } from "../../../..";
+import Tag from '@zohodesk/components/es/Tag/Tag';
 export function LookupFieldView(_ref, ref) {
   let {
     state
@@ -8,11 +8,12 @@ export function LookupFieldView(_ref, ref) {
     name,
     photoURL
   } = state.properties.value;
-  return /*#__PURE__*/React.createElement(Avatar, {
+  return /*#__PURE__*/React.createElement(Tag, {
     getRef: ref,
-    name: name,
-    label: name,
-    imageSrc: photoURL,
-    tooltip: ""
+    text: name,
+    hasAvatar: true,
+    initial: name,
+    imageURL: photoURL,
+    tooltip: name
   });
 }

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

@@ -0,0 +1,31 @@
+This package contains all elements regarding the CLIENT ACTIONS module.
+
+The module contains three main parts
+
+1. Behaviour - Contains the behaviours exposed by Client Actions
+
+2. Components - Contains the component exposed by Client Actions
+
+3. Translator - Contains the translators exposed by Client Actions
+ 
+ -----------------------------------------------------------------------------
+
+1. Behaviour
+    a. ClientActionBehaviour -> This behaviour is used to fetch the required client actions and returns the value to state
+
+2. Components
+    a. ActionEventMediator -> The main component that is exposed and need to be used by the components in order to render and execute client actions
+        - Inputs :  actions, renderComponentType
+        - Renders the rendercomponent based on the value (default renders row actions)
+
+    b. RowActionsRenderer -> This component renders the actions in Row wise.
+
+    c. DynamicActionComponent -> Renders the action component dynamically
+
+
+3. Translators 
+    a. action-translator -> the main translator the is used to translate the client actions, resolve them and get them in component action object format
+    
+    b. condition-resolver -> Resolved the conditions cases in the client actiosn. Returns only the actions that are passed
+
+    c. context-resover -> Resolved the context in all keys of client actions. 

package/es/platform/client-actions/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/platform/client-actions/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/platform/client-actions/behaviour/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
+
+ClientActionsBehaviourFactory.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/client-actions/behaviour/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/client-actions/behaviour/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/client-actions/behaviour/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
+    });
+  }
+
+}

package/es/platform/client-actions/behaviour/zclient-actions/adapters/controllers/FetchStateStopController.js

@@ -0,0 +1,21 @@
+import AbstractController from "./AbstractController";
+export default class FetchStateStopController extends AbstractController {
+  handle(event) {
+    const {
+      state,
+      updateState,
+      action
+    } = event;
+    const {
+      metaData
+    } = action;
+    const {
+      fetchStateStopUseCase
+    } = this.service;
+    fetchStateStopUseCase.updateDependency(state, updateState);
+    fetchStateStopUseCase.execute({
+      metaData
+    });
+  }
+
+}