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

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import TableAction from '@zohodesk-private/desk-components/es/table/TableAction/TableAction';
-import ActionLocation from "../../../../../action-location/frameworks/ui/ActionLocation";
+import ActionEventMediator from "../../../../../../../../platform/client-actions/components/action-event-mediator/frameworks/ui/ActionEventMediator";
+import { ActionViewGap } from "../../../../../../../../platform/client-actions/components/interfaces/ActionViewModel";
 export default function RowActions(_ref) {
   let {
     hasActions,
@@ -13,9 +14,10 @@ export default function RowActions(_ref) {
   if (hasActions) {
     return /*#__PURE__*/React.createElement(TableAction, {
       $data_width: columnWidth
-    }, /*#__PURE__*/React.createElement(ActionLocation, {
-      type: type,
-      actions: actions
+    }, /*#__PURE__*/React.createElement(ActionEventMediator, {
+      actions: actions,
+      renderComponentType: type,
+      gap: ActionViewGap.MEDIUM
     }));
   }
 

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

@@ -1,5 +1,8 @@
 import React from 'react';
 import TableData from '@zohodesk-private/desk-components/es/table/TableData/TableData';
+import ActionEventMediator from "../../../../../../../../platform/client-actions/components/action-event-mediator/frameworks/ui/ActionEventMediator";
+import { ActionViewGap } from "../../../../../../../../platform/client-actions/components/interfaces/ActionViewModel";
+import { AlignmentOfFlex } from "../../../../../../../../cc/table-list/data-types/Header";
 import FieldComponent from "../field/FieldComponent";
 export default function RowData(_ref) {
   let {
@@ -10,14 +13,24 @@ export default function RowData(_ref) {
   } = _ref;
   let {
     type,
+    actions,
     ...props
   } = field;
+  const hasActions = Boolean(actions === null || actions === void 0 ? void 0 : actions.length);
   return /*#__PURE__*/React.createElement(TableData, {
-    $ui_align: alignment,
+    $ui_align: hasActions ? null : alignment,
     $data_width: width,
-    $flag_flexible: isFlexibleColumns
+    $flag_flexible: isFlexibleColumns,
+    $customProps_container: hasActions ? {
+      $ui_displayMode: 'flex',
+      $ui_alignItems: 'center',
+      $ui_justifyContent: AlignmentOfFlex[alignment]
+    } : null
   }, /*#__PURE__*/React.createElement(FieldComponent, {
     type: type,
     fieldProps: props
-  }));
+  }), hasActions ? /*#__PURE__*/React.createElement(ActionEventMediator, {
+    actions: actions,
+    gap: ActionViewGap.SMALL
+  }) : null);
 }

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

@@ -1,6 +1,6 @@
 import { createCustomComponent } from "../../../../../custom-component";
 import Properties from "../../../../../../cc/action-icon/Properties";
-import ActionIconView from "./ActionIconView";
+import ActionIconView, { ButtonView, FilterDropdownView } from "./ActionIconView";
 const ActionIcon = createCustomComponent({
   name: 'ActionIcon',
   View: ActionIconView,
@@ -8,4 +8,20 @@ const ActionIcon = createCustomComponent({
   events: [],
   eventHandlers: {}
 });
-export default ActionIcon;
+export default ActionIcon; // NOTE: This is a sample of Button action component
+
+export const Button = createCustomComponent({
+  name: 'Button',
+  View: ButtonView,
+  properties: Properties,
+  events: [],
+  eventHandlers: {}
+}); // NOTE: This is a sample of FilterDropdown action component
+
+export const FilterDropdown = createCustomComponent({
+  name: 'FilterDropdown',
+  View: FilterDropdownView,
+  properties: Properties,
+  events: [],
+  eventHandlers: {}
+});

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

@@ -24,7 +24,6 @@ export default function ActionIconView(_ref, ref) {
   }, /*#__PURE__*/React.createElement(ActionIcon, {
     $ui_iconName: icon,
     $ui_hoverVariant: hoverVariant,
-    $flag_gap: true,
     $flag_disabled: isDisabled,
     $i18n_tooltip: label,
     $event_onClick: !isDisabled ? () => {
@@ -33,4 +32,79 @@ export default function ActionIconView(_ref, ref) {
       });
     } : null
   }));
+} // NOTE: This is a sample of Button action component
+
+export function ButtonView(_ref2, ref) {
+  let {
+    state,
+    helpers
+  } = _ref2;
+  const {
+    dispatch
+  } = helpers;
+  const {
+    sourceEvent,
+    payload
+  } = state.properties.appendToActionPayload.eventMappings[0];
+  const {
+    value
+  } = payload;
+  return /*#__PURE__*/React.createElement("span", {
+    "data-title": value,
+    onClick: () => dispatch({
+      type: sourceEvent
+    }),
+    ref: ref
+  }, value);
+  return /*#__PURE__*/React.createElement("button", {
+    ref: ref,
+    onClick: () => {
+      dispatch({
+        type: sourceEvent
+      });
+    }
+  }, value);
+} // NOTE: This is a sample of FilterDropdown action component
+
+export function FilterDropdownView(_ref3, ref) {
+  let {
+    state,
+    helpers
+  } = _ref3;
+  const {
+    dispatch
+  } = helpers;
+  const {
+    options,
+    isMultiselectable
+  } = state.properties;
+  const {
+    sourceEvent,
+    payload
+  } = state.properties.appendToActionPayload.eventMappings[0];
+  const {
+    fieldName: value
+  } = payload;
+  return /*#__PURE__*/React.createElement("span", {
+    "data-title": value,
+    onClick: () => dispatch({
+      type: sourceEvent
+    }),
+    ref: ref
+  }, value);
+  return /*#__PURE__*/React.createElement("select", {
+    "data-title": '',
+    ref: ref,
+    onChange: e => dispatch({
+      type: sourceEvent,
+      payload: {
+        sourcePayload: {
+          selectedValue: e.target.value
+        }
+      }
+    })
+  }, options.map((option, index) => /*#__PURE__*/React.createElement("option", {
+    key: index,
+    value: option.value
+  }, option.label)));
 }

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/{zclient-actions → client-actions/behaviour/zclient-actions}/Readme.md

@@ -1,38 +1,31 @@
 Client Actions Behaviour
 
-
 This behaviour will allows your library components to fetch client actions for your users.
 
 # Implementation
 
-ClientActionBehaviourFactory.create({ getClientActions: dataBroker.httpTemplates.getClientActions })
+ClientActionsBehaviourFactory.create({ getClientActions: dataSource.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,
+The user needs to passdown the dataSource 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 
+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'
-      }
-    };
-  }
+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 → client-actions/behaviour/zclient-actions}/applications/usecases/ExecuteActionBehaviourUseCase.js

@@ -25,7 +25,7 @@ class ExecuteActionBehaviourUseCase extends AbstractUseCase {
       presenter.updateClientAction(recordManager.toObject());
     }
 
-    dispatch(recordManager.createDataBrokerExecuteEvent(props, actionName, metaData));
+    dispatch(recordManager.createDataSourceExecuteEvent(props, actionName, metaData));
   }
 
 }

package/es/platform/{zclient-actions → client-actions/behaviour/zclient-actions}/applications/usecases/InitializeUseCase.js

@@ -1,5 +1,5 @@
 import AbstractUseCase from "./AbstractUseCase";
-import { DATA_BROKER_REGISTER } from "../../../../bc/zdata-broker/Constants";
+import { DATA_SOURCE_REGISTER } from "../../../../../../bc/zdata-source/Constants";
 export default class InitializeUseCase extends AbstractUseCase {
   execute(input) {
     const {
@@ -7,7 +7,7 @@ export default class InitializeUseCase extends AbstractUseCase {
       dispatch
     } = input;
     dispatch({
-      type: DATA_BROKER_REGISTER,
+      type: DATA_SOURCE_REGISTER,
       payload: {
         apiTemplates
       }

package/es/platform/{zclient-actions → client-actions/behaviour/zclient-actions}/domain/entities/ClientAction.js

@@ -7,7 +7,7 @@ export default class ClientAction {
 
     _defineProperty(this, "name", void 0);
 
-    _defineProperty(this, "library", void 0);
+    _defineProperty(this, "component", void 0);
 
     _defineProperty(this, "location", void 0);
 
@@ -23,9 +23,13 @@ export default class ClientAction {
 
     _defineProperty(this, "createdBy", void 0);
 
+    _defineProperty(this, "conditions", void 0);
+
+    _defineProperty(this, "conditionMeta", void 0);
+
     this.id = clientActionObj.id;
     this.name = clientActionObj.name;
-    this.library = clientActionObj.library;
+    this.component = clientActionObj.component;
     this.location = clientActionObj.location;
     this.uiComponentMapping = new UIComponentMapping(clientActionObj.uiComponentMapping);
     this.modules = clientActionObj.modules;
@@ -33,20 +37,24 @@ export default class ClientAction {
     this.createdTime = clientActionObj.createdTime;
     this.modifiedBy = clientActionObj.modifiedBy;
     this.createdBy = clientActionObj.createdBy;
+    this.conditions = clientActionObj.conditions;
+    this.conditionMeta = clientActionObj.conditions;
   }
 
   toObject() {
     return {
       id: this.id,
       name: this.name,
-      library: this.library,
+      component: this.component,
       location: this.location,
       uiComponentMapping: this.uiComponentMapping.toObject(),
       modules: this.modules,
       modifiedTime: this.modifiedTime,
       createdTime: this.createdTime,
       modifiedBy: this.modifiedBy,
-      createdBy: this.createdBy
+      createdBy: this.createdBy,
+      conditions: this.conditions,
+      conditionsMeta: this.conditionMeta
     };
   }
 

package/es/platform/{zclient-actions → client-actions/behaviour/zclient-actions}/domain/entities/ClientActionManager.js

@@ -1,5 +1,5 @@
-import { DATA_BROKER_FAILURE, DATA_BROKER_NO_CONTENT, DATA_BROKER_SUCCESS } from "../../../../bc/zdata-broker/Symbols";
-import { DATA_BROKER_EXECUTE } from "../../../../bc/zdata-broker/Constants";
+import { DATA_SOURCE_FAILURE, DATA_SOURCE_NO_CONTENT, DATA_SOURCE_SUCCESS } from "../../../../../../bc/zdata-source/Symbols";
+import { DATA_SOURCE_EXECUTE } from "../../../../../../bc/zdata-source/Constants";
 import { CLIENTACTION_EXECUTE_FAIL_CALLBACK, CLIENTACTION_EXECUTE_SUCCESS_CALLBACK, CLIENTACTION_EXECUTE_SUCCESS_NO_CONTENT_CALLBACK, ClientActionApiActionName } from "../../../../bc/zclient-actions/Constants";
 import GetClientActionsStrategy from "./GetClientActionsStrategy";
 const clientActionExecuteStrategiesMap = {
@@ -10,7 +10,7 @@ export default class ClientActionManager {
     this.clientActions = clientActions;
   }
 
-  createDataBrokerMeta(_ref) {
+  createDataSourceMeta(_ref) {
     let {
       actionName,
       successMeta,
@@ -19,15 +19,15 @@ export default class ClientActionManager {
     } = _ref;
     return {
       actionName,
-      [DATA_BROKER_NO_CONTENT]: successNoContentMeta,
-      [DATA_BROKER_FAILURE]: failureMeta,
-      [DATA_BROKER_SUCCESS]: successMeta
+      [DATA_SOURCE_NO_CONTENT]: successNoContentMeta,
+      [DATA_SOURCE_FAILURE]: failureMeta,
+      [DATA_SOURCE_SUCCESS]: successMeta
     };
   }
 
-  createDataBrokerExecuteEvent(props, actionName, metaData) {
+  createDataSourceExecuteEvent(props, actionName, metaData) {
     return {
-      type: DATA_BROKER_EXECUTE,
+      type: DATA_SOURCE_EXECUTE,
       payload: {
         props,
         actionName
@@ -59,7 +59,7 @@ export default class ClientActionManager {
       type: CLIENTACTION_EXECUTE_FAIL_CALLBACK,
       metaData: clientActionExecuteStrategyMeta
     };
-    return this.createDataBrokerMeta({
+    return this.createDataSourceMeta({
       actionName,
       successNoContentMeta,
       failureMeta,

package/es/platform/{zclient-actions → client-actions/behaviour/zclient-actions}/domain/entities/ClientActions.js

@@ -20,10 +20,6 @@ export default class ClientActions {
     this.isFetching = isFetching;
   }
 
-  getIsFetching() {
-    return this.isFetching;
-  }
-
   setIsFetching(isFetching) {
     this.isFetching = isFetching;
   }

package/es/platform/{zclient-actions → client-actions/behaviour/zclient-actions}/domain/entities/EventMapping.js

@@ -10,10 +10,13 @@ export default class EventMapping {
 
     _defineProperty(this, "payloadValueMapping", void 0);
 
+    _defineProperty(this, "payloadValueMappingMeta", void 0);
+
     this.id = eventMappingObj.id;
     this.sourceEvent = eventMappingObj.sourceEvent;
     this.targetEvent = eventMappingObj.targetEvent;
     this.payloadValueMapping = eventMappingObj.payloadValueMapping;
+    this.payloadValueMappingMeta = eventMappingObj.payloadValueMapping;
   }
 
   toObject() {
@@ -21,7 +24,8 @@ export default class EventMapping {
       id: this.id,
       sourceEvent: this.sourceEvent,
       targetEvent: this.targetEvent,
-      payloadValueMapping: this.payloadValueMapping
+      payloadValueMapping: this.payloadValueMapping,
+      payloadValueMappingMeta: this.payloadValueMappingMeta
     };
   }
 

package/es/platform/{zclient-actions → client-actions/behaviour/zclient-actions}/domain/entities/UIComponentMapping.js

@@ -9,14 +9,17 @@ export default class UIComponentMapping {
 
     _defineProperty(this, "component", void 0);
 
-    _defineProperty(this, "properties", void 0);
+    _defineProperty(this, "propertiesValueMapping", void 0);
+
+    _defineProperty(this, "propertiesValueMappingMeta", void 0);
 
     _defineProperty(this, "eventMappings", void 0);
 
     this.id = uiComponentMappingObj.id;
     this.name = uiComponentMappingObj.name;
     this.component = uiComponentMappingObj.component;
-    this.properties = uiComponentMappingObj.properties;
+    this.propertiesValueMapping = uiComponentMappingObj.propertiesValueMapping;
+    this.propertiesValueMappingMeta = uiComponentMappingObj.propertiesValueMapping;
     this.eventMappings = new EventMappings(uiComponentMappingObj.eventMappings);
   }
 
@@ -25,7 +28,8 @@ export default class UIComponentMapping {
       id: this.id,
       name: this.name,
       component: this.component,
-      properties: this.properties,
+      propertiesValueMapping: this.propertiesValueMapping,
+      propertiesValueMappingMeta: this.propertiesValueMappingMeta,
       eventMappings: this.eventMappings.toArray().map(eventMapping => eventMapping.toObject())
     };
   }

package/es/platform/{zclient-actions/frameworks/ClientActionBehaviourFactory.js → client-actions/behaviour/zclient-actions/frameworks/ClientActionsBehaviourFactory.js}

@@ -1,5 +1,5 @@
 import ActionsHandlersFactory from "./ActionsHandlersFactory";
-export default class ClientActionBehaviourFactory {
+export default class ClientActionsBehaviourFactory {
   static create(apiDetails) {
     return {
       name: 'zclientAction',

package/es/platform/client-actions/cc/action-event-mediator/Properties.js

@@ -0,0 +1,34 @@
+import { ActionViewGap } from "../../components/interfaces/ActionViewModel";
+import { actionSchema } from "../dynamic-action-component/Properties";
+export const actionsSchema = {
+  type: 'array',
+  minItems: 0,
+  items: actionSchema
+};
+export default {
+  actions: {
+    required: true,
+    typeMetadata: {
+      schema: actionsSchema
+    }
+  },
+  renderComponentType: {
+    required: false,
+    typeMetadata: {
+      schema: {
+        type: 'string'
+      }
+    },
+    defaultValue: ''
+  },
+  gap: {
+    required: false,
+    defaultValue: ActionViewGap.NONE,
+    typeMetadata: {
+      schema: {
+        type: 'string',
+        enum: Object.values(ActionViewGap)
+      }
+    }
+  }
+};

package/es/platform/client-actions/cc/dynamic-action-component/Properties.js

@@ -0,0 +1,51 @@
+export const actionSchema = {
+  type: 'object',
+  properties: {
+    component: {
+      type: 'string'
+    },
+    id: {
+      type: 'string'
+    },
+    properties: {
+      type: 'object'
+    },
+    eventMappings: {
+      type: 'array',
+      minItems: 0,
+      items: {
+        type: 'object',
+        properties: {
+          action: {
+            type: 'object',
+            properties: {
+              event: {
+                type: 'string'
+              },
+              payload: {
+                type: 'object'
+              }
+            },
+            required: ['event', 'payload']
+          },
+          id: {
+            type: 'string'
+          },
+          sourceEvent: {
+            type: 'string'
+          }
+        },
+        required: ['sourceEvent', 'id']
+      }
+    }
+  },
+  required: ['component', 'properties']
+};
+export default {
+  action: {
+    required: true,
+    typeMetadata: {
+      schema: actionSchema
+    }
+  }
+};

package/es/platform/client-actions/components/action-event-mediator/adapters/controllers/MountController.js

@@ -0,0 +1,18 @@
+export default class MountController {
+  constructor(initializeUseCase) {
+    this.initializeUseCase = initializeUseCase;
+    this.handle = this.handle.bind(this);
+  }
+
+  handle(input) {
+    const {
+      host,
+      dispatch,
+      state,
+      updateState
+    } = input;
+    this.initializeUseCase.updateDependencies(host, state, dispatch, updateState);
+    this.initializeUseCase.execute();
+  }
+
+}

package/es/platform/client-actions/components/action-event-mediator/adapters/controllers/PropertiesChangeController.js

@@ -0,0 +1,26 @@
+export default class PropertiesChangeController {
+  constructor(propertiesChangeUseCase) {
+    this.propertiesChangeUseCase = propertiesChangeUseCase;
+    this.handle = this.handle.bind(this);
+  }
+
+  handle(input) {
+    const {
+      host,
+      dispatch,
+      state,
+      action,
+      updateState
+    } = input;
+    const {
+      currentProperties,
+      previousProperties
+    } = action.payload;
+    this.propertiesChangeUseCase.updateDependencies(host, state, dispatch, updateState);
+    this.propertiesChangeUseCase.execute({
+      currentActions: currentProperties.actions,
+      previousActions: previousProperties.actions
+    });
+  }
+
+}

package/es/platform/client-actions/components/action-event-mediator/adapters/controllers/UnmountController.js

@@ -0,0 +1,18 @@
+export default class UnmountController {
+  constructor(destroyUseCase) {
+    this.destroyUseCase = destroyUseCase;
+    this.handle = this.handle.bind(this);
+  }
+
+  handle(input) {
+    const {
+      host,
+      dispatch,
+      state,
+      updateState
+    } = input;
+    this.destroyUseCase.updateDependencies(host, state, dispatch, updateState);
+    this.destroyUseCase.execute();
+  }
+
+}