@zohodesk/library-platform 1.0.1 → 1.0.2-exp.4

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

@@ -1,17 +1,23 @@
 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,
+    columnWidth,
+    type = '',
     actions
   } = _ref;
 
+  // TODO: Need to fix the defaultValue from properties => CC
   if (hasActions) {
     return /*#__PURE__*/React.createElement(TableAction, {
-      $ui_size: "medium"
-    }, /*#__PURE__*/React.createElement(ActionLocation, {
-      actions: actions
+      $data_width: columnWidth
+    }, /*#__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,25 +1,36 @@
 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 {
     field,
-    size,
+    width,
     alignment,
-    resizedWidth,
     isFlexibleColumns
   } = _ref;
   let {
     type,
+    actions,
     ...props
   } = field;
+  const hasActions = Boolean(actions === null || actions === void 0 ? void 0 : actions.length);
   return /*#__PURE__*/React.createElement(TableData, {
-    $ui_size: size,
-    $ui_align: alignment,
-    $data_width: resizedWidth,
-    $flag_flexible: isFlexibleColumns
+    $ui_align: hasActions ? null : alignment,
+    $data_width: width,
+    $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

@@ -0,0 +1,27 @@
+import { createCustomComponent } from "../../../../../custom-component";
+import Properties from "../../../../../../cc/action-icon/Properties";
+import ActionIconView, { ButtonView, FilterDropdownView } from "./ActionIconView";
+const ActionIcon = createCustomComponent({
+  name: 'ActionIcon',
+  View: ActionIconView,
+  properties: Properties,
+  events: [],
+  eventHandlers: {}
+});
+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

@@ -0,0 +1,110 @@
+import React from 'react';
+import ActionIcon from '@zohodesk-private/desk-components/es/ActionIcon/ActionIcon';
+import Constants from "../../../../../../cc/action-icon/Constants"; // @ts-ignore
+
+import style from "./css/ActionIcon.module.css";
+export default function ActionIconView(_ref, ref) {
+  let {
+    state,
+    helpers
+  } = _ref;
+  const {
+    icon,
+    label,
+    hoverVariant,
+    isDisabled,
+    isVisible
+  } = state.properties;
+  const {
+    dispatch
+  } = helpers;
+  return /*#__PURE__*/React.createElement("span", {
+    ref: ref,
+    className: isVisible ? '' : style.hide
+  }, /*#__PURE__*/React.createElement(ActionIcon, {
+    $ui_iconName: icon,
+    $ui_hoverVariant: hoverVariant,
+    $flag_disabled: isDisabled,
+    $i18n_tooltip: label,
+    $event_onClick: !isDisabled ? () => {
+      dispatch({
+        type: Constants.ACTION_ICON_CLICKED
+      });
+    } : 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/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/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,31 @@
+Client Actions Behaviour
+
+This behaviour will allows your library components to fetch client actions for your users.
+
+# Implementation
+
+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 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
+
+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/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
+    });
+  }
+
+}

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

@@ -0,0 +1,25 @@
+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 default class MountController {
+  constructor(recordApis, service) {
+    this.recordApis = recordApis;
+    this.service = service;
+
+    _defineProperty(this, "handle", event => {
+      const {
+        state,
+        updateState,
+        dispatch
+      } = event;
+      const {
+        initializeUseCase
+      } = this.service;
+      initializeUseCase.updateDependency(state, updateState);
+      initializeUseCase.execute({
+        dispatch,
+        apiTemplates: this.recordApis
+      });
+    });
+  }
+
+}

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

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

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

@@ -0,0 +1,24 @@
+import AbstractController from "./AbstractController";
+export default class SetClientActionsController extends AbstractController {
+  handle(event) {
+    const {
+      state,
+      updateState,
+      action
+    } = event;
+    const {
+      payload
+    } = action;
+    const {
+      clientActions
+    } = payload;
+    const {
+      setClientActionsUseCase
+    } = this.service;
+    setClientActionsUseCase.updateDependency(state, updateState);
+    setClientActionsUseCase.execute({
+      clientActions
+    });
+  }
+
+}

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

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

package/es/platform/client-actions/behaviour/zclient-actions/adapters/gateways/Repository.js

@@ -0,0 +1,28 @@
+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; }
+
+import ClientActionManagerFactory from "../../applications/entities-factory/ClientActionManagerFactory";
+export default class Repository {
+  constructor() {
+    _defineProperty(this, "state", void 0);
+  }
+
+  init(state) {
+    this.state = state;
+  }
+
+  getClientActionsManagerEntity() {
+    const {
+      zclientAction
+    } = this.state.behaviours;
+    const {
+      clientActions = [],
+      isFetching
+    } = zclientAction;
+    const clientActionManager = ClientActionManagerFactory.create({
+      data: clientActions,
+      isFetching
+    });
+    return clientActionManager;
+  }
+
+}

package/es/platform/client-actions/behaviour/zclient-actions/adapters/gateways/Service.js

@@ -0,0 +1,35 @@
+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; }
+
+import InitializeUseCase from "../../applications/usecases/InitializeUseCase";
+import ExecuteActionBehaviourUseCase from "../../applications/usecases/ExecuteActionBehaviourUseCase";
+import FailureUseCase from "../../applications/usecases/FailureUseCase";
+import SuccessUseCase from "../../applications/usecases/SuccessUseCase";
+import NoContentUseCase from "../../applications/usecases/NoContentUseCase";
+import SetClientActionsUseCase from "../../applications/usecases/SetClientActionsUseCase";
+import FetchStateStopUseCase from "../../applications/usecases/FetchStateStopUseCase";
+export default class Service {
+  constructor(dependencies) {
+    _defineProperty(this, "initializeUseCase", void 0);
+
+    _defineProperty(this, "executeActionBehaviourUseCase", void 0);
+
+    _defineProperty(this, "failureUseCase", void 0);
+
+    _defineProperty(this, "successUseCase", void 0);
+
+    _defineProperty(this, "fetchStateStopUseCase", void 0);
+
+    _defineProperty(this, "noContentUseCase", void 0);
+
+    _defineProperty(this, "setClientActionsUseCase", void 0);
+
+    this.initializeUseCase = new InitializeUseCase(dependencies);
+    this.executeActionBehaviourUseCase = new ExecuteActionBehaviourUseCase(dependencies);
+    this.failureUseCase = new FailureUseCase(dependencies);
+    this.successUseCase = new SuccessUseCase(dependencies);
+    this.fetchStateStopUseCase = new FetchStateStopUseCase(dependencies);
+    this.noContentUseCase = new NoContentUseCase(dependencies);
+    this.setClientActionsUseCase = new SetClientActionsUseCase(dependencies);
+  }
+
+}

package/es/platform/client-actions/behaviour/zclient-actions/adapters/presenters/Presenter.js

@@ -0,0 +1,24 @@
+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 default class Presenter {
+  constructor() {
+    _defineProperty(this, "updateState", void 0);
+
+    _defineProperty(this, "state", void 0);
+  }
+
+  updateDependencies(state, updateState) {
+    this.updateState = updateState;
+    this.state = state;
+  }
+
+  updateClientAction(zclientAction) {
+    this.state = { ...this.state,
+      behaviours: { ...this.state.behaviours,
+        zclientAction
+      }
+    };
+    this.updateState(this.state);
+  }
+
+}

package/es/platform/client-actions/behaviour/zclient-actions/applications/entities-factory/ClientActionFactory.js

@@ -0,0 +1,12 @@
+import ClientAction from "../../domain/entities/ClientAction";
+export default class ClientActionFactory {
+  static createSingleClientAction(clientActionModel) {
+    const clientAction = new ClientAction(clientActionModel);
+    return clientAction;
+  }
+
+  static createMultipleClientActions(data) {
+    return data.map(clientActionModel => new ClientAction(clientActionModel));
+  }
+
+}

package/es/platform/client-actions/behaviour/zclient-actions/applications/entities-factory/ClientActionManagerFactory.js

@@ -0,0 +1,10 @@
+import ClientActionManager from "../../domain/entities/ClientActionManager";
+import ClientActions from "../../domain/entities/ClientActions";
+export default class ClientActionManagerFactory {
+  static create(clientActionsModel) {
+    const clientActions = new ClientActions(clientActionsModel);
+    const clientActionManager = new ClientActionManager(clientActions);
+    return clientActionManager;
+  }
+
+}

package/es/platform/client-actions/behaviour/zclient-actions/applications/usecases/ExecuteActionBehaviourUseCase.js

@@ -0,0 +1,33 @@
+import AbstractUseCase from "./AbstractUseCase";
+
+class ExecuteActionBehaviourUseCase extends AbstractUseCase {
+  execute(input) {
+    const {
+      repository,
+      presenter
+    } = this.dependencies;
+    const {
+      props,
+      dispatch,
+      apiName,
+      actionName
+    } = input;
+    const recordManager = repository.getClientActionsManagerEntity();
+
+    if (!recordManager.isClientActionApiName(apiName)) {
+      return;
+    }
+
+    const metaData = recordManager.createFetchClientActionMeta(actionName, apiName, props);
+
+    if (recordManager.isGetClientActionsApi(actionName)) {
+      recordManager.fetchingStarted();
+      presenter.updateClientAction(recordManager.toObject());
+    }
+
+    dispatch(recordManager.createDataSourceExecuteEvent(props, actionName, metaData));
+  }
+
+}
+
+export default ExecuteActionBehaviourUseCase;