@zohodesk/library-platform 1.1.10-exp.1 → 1.1.10-exp.3

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

@@ -1,9 +1,75 @@
 import { ActionViewGap } from "../../components/interfaces/ActionViewModel";
-import { actionSchema } from "../dynamic-action-component/Properties";
+import { clientScriptsSchema } from "../../../client-scripts/cc/zclient-scripts-execution/clientScriptsSchema";
+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: ['id']
+      }
+    }
+  },
+  required: ['component', 'properties']
+};
 export const actionsSchema = {
   type: 'array',
-  minItems: 0,
-  items: actionSchema
+  minItems: 0
+};
+export const ActionEventMediatorProperties = {
+  action: {
+    required: true,
+    typeMetadata: {
+      schema: actionSchema
+    }
+  },
+  clientScripts: {
+    required: false,
+    defaultValue: [],
+    typeMetadata: {
+      schema: clientScriptsSchema
+    }
+  },
+  instanceName: {
+    required: false,
+    defaultValue: 'non-module',
+    typeMetadata: {
+      schema: {
+        type: 'string'
+      }
+    }
+  }
 };
 export default {
   testId: {
@@ -21,6 +87,12 @@ export default {
       schema: actionsSchema
     }
   },
+  clientScripts: {
+    required: false,
+    typeMetadata: {
+      schema: clientScriptsSchema
+    }
+  },
   renderComponentType: {
     required: false,
     typeMetadata: {

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

@@ -12,7 +12,7 @@ export default class MountController {
       updateState
     } = input;
     this.initializeUseCase.updateDependencies(host, state, dispatch, updateState);
-    this.initializeUseCase.execute();
+    this.initializeUseCase.execute(input);
   }
 
 }

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

@@ -18,8 +18,8 @@ export default class PropertiesChangeController {
     } = action.payload;
     this.propertiesChangeUseCase.updateDependencies(host, state, dispatch, updateState);
     this.propertiesChangeUseCase.execute({
-      currentActions: currentProperties.actions,
-      previousActions: previousProperties.actions
+      currentAction: currentProperties.action,
+      previousAction: previousProperties.action
     });
   }
 

package/es/platform/client-actions/components/action-event-mediator/adapters/gateway/Repository.js

@@ -16,12 +16,12 @@ export default class Repository {
 
   getActionEventMediator() {
     const {
-      actions
+      action
     } = this.state.properties;
     const {
       handlers
     } = this.state;
-    const actionEventMediator = new ActionEventMediatorEntity(handlers, actions, this.element, this.dispatch);
+    const actionEventMediator = new ActionEventMediatorEntity(handlers, action, this.element, this.dispatch);
     return actionEventMediator;
   }
 

package/es/platform/client-actions/components/action-event-mediator/applications/usecases/InitializeUseCase.js

@@ -1,12 +1,26 @@
 import { AbstractUseCase } from "./AbstractUseCase";
+import { SET_CLIENT_SCRIPTS } from "../../../../../client-scripts/bc/zclient-scripts-execution/Constants";
 export default class InitializeUseCase extends AbstractUseCase {
-  execute() {
+  execute(input) {
     const {
       repository,
       presenter
     } = this.dependencies;
+    const {
+      dispatch,
+      state
+    } = input;
+    const {
+      clientScripts
+    } = state.properties;
     const actionLocation = repository.getActionEventMediator();
     actionLocation.initialize();
+    dispatch({
+      type: SET_CLIENT_SCRIPTS,
+      payload: {
+        clientScripts
+      }
+    });
     presenter.updateActionEventMediator(actionLocation.toObject());
   }
 

package/es/platform/client-actions/components/action-event-mediator/applications/usecases/PropertiesChangeUseCase.js

@@ -7,10 +7,10 @@ export default class PropertiesChangeUseCase extends AbstractUseCase {
     } = this.dependencies;
     const actionLocation = repository.getActionEventMediator();
     const {
-      currentActions,
-      previousActions
+      currentAction,
+      previousAction
     } = input;
-    actionLocation.processActionsChange(previousActions, currentActions);
+    actionLocation.processActionsChange(previousAction, currentAction);
     presenter.updateActionEventMediator(actionLocation.toObject());
   }
 

package/es/platform/client-actions/components/action-event-mediator/domain/entities/ActionEventMediatorEntity.js

@@ -1,8 +1,9 @@
 import TemplateResolver from "../../../../template-resolver";
+import { EXECUTE_CLIENT_SCRIPTS } from "../../../../../client-scripts/bc/zclient-scripts-execution/Constants";
 export default class ActionEventMediatorEntity {
-  constructor(handlers, actions, element, dispatch) {
+  constructor(handlers, action, element, dispatch) {
     this.handlers = handlers;
-    this.actions = actions;
+    this.action = action;
     this.element = element;
     this.dispatch = dispatch;
   }
@@ -15,21 +16,32 @@ export default class ActionEventMediatorEntity {
         actionId,
         ...payloadItems
       } = e.detail.payload;
-      const eventMapping = eventMappings.find(eventMapping => eventMapping.sourceEvent === event);
+      const targetEventMappings = eventMappings.filter(eventMapping => eventMapping.sourceEvent === event);
 
-      if (!eventMapping) {
+      if (!targetEventMappings || targetEventMappings.length === 0) {
         return;
       }
 
-      const dispatchEvent = eventMapping.targetEvent;
-      const eventMappingPayload = eventMapping.payload;
-      const replacementContext = {
-        "@payload": payloadItems
-      };
-      const resolvedPayload = TemplateResolver.replaceContextVariablesInObject(eventMappingPayload, replacementContext);
+      const eventsContext = [];
+      targetEventMappings.forEach(eventMapping => {
+        const {
+          targetEvent,
+          payload
+        } = eventMapping;
+        const replacementContext = {
+          "@payload": payloadItems
+        };
+        const resolvedPayload = TemplateResolver.replaceContextVariablesInObject(payload, replacementContext);
+        eventsContext.push({
+          targetEvent,
+          resolvedPayload
+        });
+      });
       this.dispatch({
-        type: dispatchEvent,
-        payload: resolvedPayload,
+        type: EXECUTE_CLIENT_SCRIPTS,
+        payload: {
+          clientScriptsEventContext: eventsContext
+        },
         metaData: {
           clientActionId: actionId
         }
@@ -37,14 +49,19 @@ export default class ActionEventMediatorEntity {
     };
   }
 
-  getEventNames(actions) {
+  getEventNames(action) {
     const eventNames = [];
-    actions.forEach(action => {
-      action.eventMappings.forEach(eventMapping => {
-        if (!eventNames.includes(eventMapping.sourceEvent)) {
-          eventNames.push(eventMapping.sourceEvent);
-        }
-      });
+    const {
+      eventMappings
+    } = action;
+    eventMappings.forEach(eventMapping => {
+      const {
+        sourceEvent
+      } = eventMapping;
+
+      if (!eventNames.includes(sourceEvent)) {
+        eventNames.push(sourceEvent);
+      }
     });
     return eventNames;
   }
@@ -66,15 +83,15 @@ export default class ActionEventMediatorEntity {
   }
 
   initialize() {
-    const eventNames = this.getEventNames(this.actions);
+    const eventNames = this.getEventNames(this.action);
     eventNames.forEach(eventName => {
       this.listen(eventName);
     });
   }
 
-  processActionsChange(previousActions, currentActions) {
-    const previousEventNames = this.getEventNames(previousActions).sort();
-    const currentEventNames = this.getEventNames(currentActions).sort();
+  processActionsChange(previousAction, currentAction) {
+    const previousEventNames = this.getEventNames(previousAction).sort();
+    const currentEventNames = this.getEventNames(currentAction).sort();
 
     if (this.compareEventNames(previousEventNames, currentEventNames)) {
       return;
@@ -89,7 +106,7 @@ export default class ActionEventMediatorEntity {
   }
 
   destroy() {
-    const eventNames = this.getEventNames(this.actions);
+    const eventNames = this.getEventNames(this.action);
     eventNames.forEach(eventName => {
       this.unListen(eventName);
     });

package/es/platform/client-actions/components/action-event-mediator/frameworks/ui/ActionEventMediator.js

@@ -1,7 +1,8 @@
 import { createCustomComponent } from "../../../../../../library/custom-component";
-import ActionEventMediatorProperties from "../../../../cc/action-event-mediator/Properties";
+import { ActionEventMediatorProperties } from "../../../../cc/action-event-mediator/Properties";
 import EventHandlersFactory from "./EventHandlersFactory";
 import ActionEventMediatorView from "./ActionEventMediatorView";
+import ClientScriptsExecutionBehaviourFactory from "../../../../../client-scripts/behaviour/zclient-scripts-execution/frameworks/ClientScriptsExecutionBehaviourFactory";
 export default createCustomComponent({
   name: 'ActionEventMediator',
   properties: ActionEventMediatorProperties,
@@ -9,5 +10,6 @@ export default createCustomComponent({
     handlers: {}
   }),
   eventHandlers: EventHandlersFactory.create(),
+  behaviours: [ClientScriptsExecutionBehaviourFactory.create()],
   View: ActionEventMediatorView
 });

package/es/platform/client-actions/components/action-event-mediator/frameworks/ui/ActionEventMediatorView.js

@@ -1,21 +1,38 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import React from 'react';
-import RowActionsRenderer from "../../../row-actions-renderer/frameworks/ui/RowActionsRenderer";
-import { ComponentRegistry } from "../../../../../../library";
-export default function ActionEventMediatorView(_ref, ref) {
+import ComponentRegistry from "../../../../../../library/custom-component/frameworks/ui/ComponentRegistry";
+import ActionComponentMapping from "../../../../../../library/dot/components/action-location/frameworks/ui/ActionComponentMapping";
+
+function ActionEventMediatorView(_ref, ref) {
   let {
     state
   } = _ref;
   const {
-    actions,
-    renderComponentType,
-    gap,
-    testId
+    action
   } = state.properties;
-  const ActionRenderComponent = ComponentRegistry.get(renderComponentType) || RowActionsRenderer;
-  return /*#__PURE__*/React.createElement(ActionRenderComponent, {
-    testId: testId,
-    actions: actions,
-    gap: gap,
+  const {
+    component,
+    properties,
+    eventMappings,
+    id: actionId
+  } = action;
+  const Component = ComponentRegistry.get(component) || ActionComponentMapping[component];
+
+  if (!Component) {
+    return /*#__PURE__*/React.createElement("div", {
+      ref: ref
+    }, "Error");
+  }
+
+  return /*#__PURE__*/React.createElement(Component, _extends({
     getRef: ref
-  });
-}
+  }, properties, {
+    appendToActionPayload: {
+      eventMappings,
+      actionId
+    }
+  }));
+}
+
+export default ActionEventMediatorView;

package/es/platform/client-actions/components/action-event-mediator/frameworks/ui/ClientActionsAdapter.js

@@ -1,9 +1,3 @@
-import { createCustomComponent } from "../../../../../../library/custom-component";
-import ActionEventMediatorProperties from "../../../../cc/action-event-mediator/Properties";
-import EventHandlersFactory from "./EventHandlersFactory";
-import ActionEventMediatorView from "./ActionEventMediatorView"; // import ClientActionsSDKFactory from '../../../../behaviour/zclient-actions/frameworks/sdk/ClientActionsSDKFactory'; TODO: Add support for returning clientActionsSDK factory when client actions SDK is merged to V2
-
-import ClientActionsBehaviourFactory from "../../../../behaviour/zclient-actions/frameworks/ClientActionsBehaviourFactory";
 import getClientActions from "../../../../../data-source/http-template/getClientActions";
 import ClientActionsTranslator from "../../../../translators/client-actions-translator";
 import FetchGateWay from "../../../../../zhttp/adapters/gateway/FetchGateWay";
@@ -27,7 +21,7 @@ const ClientActionsAdapterUtils = {
   },
 
   transform(input) {
-    return ClientActionsTranslator.transform(input, {
+    return ClientActionsTranslator.transform(input, "Adapter", "Adapter", {
       departmentName: windowWrapper.currentDepartment.sanitizedName,
       orgId: windowWrapper.currentOrg.id,
       orgName: windowWrapper.currentOrg.portalName,
@@ -37,29 +31,6 @@ const ClientActionsAdapterUtils = {
 
 };
 const ClientActionsAdapter = {
-  createEventHandler(clientScript) {
-    return event => {
-      let response = {
-        event: event,
-        sdk: {}
-      }; // response.sdks.clientActions = ClientActionsSDKFactory.create({ TODO: Add support for returning clientActionsSDK factory when client actions SDK is merged to V2
-      //     state: event.state,
-      //     dispatch: event.dispatch
-      // });
-
-      clientScript(response);
-    };
-  },
-
-  createActionToEventHandlers(clientScripts) {
-    const actionEventHandlers = {};
-    Object.keys(clientScripts).map(targetEvent => {
-      const clientScript = clientScripts[targetEvent];
-      actionEventHandlers[targetEvent] = ClientActionsAdapter.createEventHandler(clientScript);
-    });
-    return actionEventHandlers;
-  },
-
   fetchClientActions(args) {
     const apiDetails = ClientActionsAdapterUtils.getClientActionsAPIDetails(args);
     const fetchGateway = new FetchGateWay(window.fetch.bind(window));
@@ -73,24 +44,7 @@ const ClientActionsAdapter = {
         return Promise.resolve(actions);
       }
     });
-  },
-
-  getClientActionComponent: clientScripts => {
-    return createCustomComponent({
-      name: 'ClientActionsAdapter',
-      properties: ActionEventMediatorProperties,
-      setInitialState: () => ({
-        handlers: {}
-      }),
-      eventHandlers: { ...EventHandlersFactory.createClientActionsAdapterEventHandlers(),
-        ...ClientActionsAdapter.createActionToEventHandlers(clientScripts)
-      },
-      behaviours: [ClientActionsBehaviourFactory.create({
-        getClientActions: getClientActions
-      })],
-      View: ActionEventMediatorView
-    });
   }
+
 };
-export const getClientActionsAdapter = ClientActionsAdapter.getClientActionComponent;
 export const fetchClientActions = ClientActionsAdapter.fetchClientActions;

package/es/platform/client-actions/components/action-event-mediator/frameworks/ui/EventHandlersFactory.js

@@ -9,14 +9,6 @@ import PropertiesChangeController from "../../adapters/controllers/PropertiesCha
 import LifeCycleEvents from "../../../../../../cc/component/LifeCycleEventsEnum";
 export default class EventHandlersFactory {
   static create() {
-    return EventHandlersFactory.createClientActionsLifeCycleEventHandlers('ActionEventMediator');
-  }
-
-  static createClientActionsAdapterEventHandlers() {
-    return EventHandlersFactory.createClientActionsLifeCycleEventHandlers('ClientActionsAdapter');
-  }
-
-  static createClientActionsLifeCycleEventHandlers(componentName) {
     const repository = new Repository();
     const presenter = new Presenter();
     const dependencies = {
@@ -30,9 +22,9 @@ export default class EventHandlersFactory {
     const unmountController = new UnmountController(destroyUseCase);
     const propertiesChangeController = new PropertiesChangeController(propertiesChangeUseCase);
     return {
-      [`${componentName}#${LifeCycleEvents.MOUNT}`]: initializeController.handle,
-      [`${componentName}#${LifeCycleEvents.UPDATE_PROPERTIES}`]: propertiesChangeController.handle,
-      [`${componentName}#${LifeCycleEvents.UN_MOUNT}`]: unmountController.handle
+      [`ActionEventMediator#${LifeCycleEvents.MOUNT}`]: initializeController.handle,
+      [`ActionEventMediator#${LifeCycleEvents.UPDATE_PROPERTIES}`]: propertiesChangeController.handle,
+      [`ActionEventMediator#${LifeCycleEvents.UN_MOUNT}`]: unmountController.handle
     };
   }
 

package/es/platform/client-actions/components/row-actions-renderer/frameworks/ui/AdaptiveRowActions/AdaptiveRowActionsRenderer.js

@@ -0,0 +1,12 @@
+import { createCustomComponent } from "../../../../../../../library/custom-component";
+import RowActionsRendererProperties from "../../../../../cc/action-event-mediator/Properties";
+import { ComponentRegistry } from "../../../../../../../library";
+import AdaptiveRowActionsRendererView from "./AdaptiveRowActionsRendererView";
+const AdaptiveRowActionsRendererComponent = createCustomComponent({
+  name: 'AdaptiveRowActionsRenderer',
+  properties: RowActionsRendererProperties,
+  eventHandlers: {},
+  View: AdaptiveRowActionsRendererView
+});
+ComponentRegistry.register("AdaptiveRowActionsRenderer", AdaptiveRowActionsRendererComponent);
+export default AdaptiveRowActionsRendererComponent;

package/es/platform/client-actions/components/row-actions-renderer/frameworks/ui/AdaptiveRowActions/AdaptiveRowActionsRendererView.js

@@ -0,0 +1,42 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import Flex from '@zohodesk/layout/es/Flex/Flex';
+import { ActionViewGap } from "../../../../interfaces/ActionViewModel";
+import ActionEventMediator from "../../../../action-event-mediator/frameworks/ui/ActionEventMediator";
+import MoreActionsRenderer from "../MoreActions/MoreActionsRenderer";
+import { findMappedClientScripts } from "../../../../../../client-scripts/behaviour/zclient-scripts-execution/frameworks/ClientScriptsUtils"; // @ts-ignore
+
+import style from "../RowActions/RowActionsRenderer.module.css";
+export default function AdaptiveRowActionsRendererView(_ref, ref) {
+  let {
+    state,
+    helpers
+  } = _ref;
+  const {
+    actions,
+    gap,
+    testId,
+    clientScripts
+  } = state.properties;
+  const [firstAction, secondAction, ...moreActions] = actions;
+  const showMore = actions.length > 3;
+  const actionsList = showMore ? [firstAction, secondAction] : actions;
+
+  const renderAction = action => /*#__PURE__*/React.createElement(ActionEventMediator, {
+    key: action.id,
+    action: action,
+    clientScripts: findMappedClientScripts(action, clientScripts),
+    instanceName: action.instanceName
+  });
+
+  return /*#__PURE__*/React.createElement(Flex, {
+    ref: ref,
+    testId: testId ? testId : '',
+    $ui_className: gap !== ActionViewGap.NONE ? style[`gap_${gap}`] : '',
+    $ui_displayMode: "inline",
+    $ui_alignItems: "center"
+  }, showMore ? /*#__PURE__*/React.createElement(React.Fragment, null, actionsList.map(renderAction), /*#__PURE__*/React.createElement(MoreActionsRenderer, {
+    actions: moreActions,
+    clientScripts: clientScripts
+  })) : actionsList.map(renderAction));
+}

package/es/platform/client-actions/components/row-actions-renderer/frameworks/ui/MoreActions/MoreActionsRenderer.js

@@ -0,0 +1,10 @@
+import { createCustomComponent } from "../../../../../../../library/custom-component";
+import RowActionsRendererProperties from "../../../../../cc/action-event-mediator/Properties";
+import MoreActionsRendererView from "./MoreActionsRendererView";
+const MoreActionsRenderer = createCustomComponent({
+  name: "MoreActionsRenderer",
+  eventHandlers: {},
+  properties: RowActionsRendererProperties,
+  View: MoreActionsRendererView
+});
+export default MoreActionsRenderer;

package/es/platform/client-actions/components/row-actions-renderer/frameworks/ui/MoreActions/MoreActionsRendererView.js

@@ -0,0 +1,79 @@
+import React from 'react';
+import ActionEventMediator from "../../../../action-event-mediator/frameworks/ui/ActionEventMediator";
+import CustomDropdown from '@zohodesk-private/desk-components/es/CustomDropdown/CustomDropdown';
+import ListItemConstants from "../../../../../../../cc/list-item/Constants";
+import IconButton from '@zohodesk/dot/es/IconButton/IconButton';
+import { findMappedClientScripts } from "../../../../../../client-scripts/behaviour/zclient-scripts-execution/frameworks/ClientScriptsUtils";
+export const ListItemConvertor = action => {
+  const {
+    id,
+    properties: {
+      icon
+    },
+    eventMappings,
+    instanceName
+  } = action;
+  const label = action.properties.label ? action.properties.label : action.properties.text;
+  const updatedEventMappings = eventMappings.map(eventMapping => {
+    return { ...eventMapping,
+      sourceEvent: ListItemConstants.LISTITEM_CLICKED
+    };
+  });
+  return {
+    component: 'ListItem',
+    properties: {
+      text: label,
+      tooltip: label,
+      icon,
+      id
+    },
+    eventMappings: updatedEventMappings,
+    id,
+    instanceName
+  };
+};
+
+function MoreActionsRendererView(_ref, ref) {
+  let {
+    state,
+    helpers
+  } = _ref;
+  const {
+    actions,
+    clientScripts
+  } = state.properties;
+  const listItemActions = actions.map(action => {
+    return ListItemConvertor(action);
+  });
+
+  const renderTargetElement = _ref2 => {
+    let {
+      handleTogglePopup,
+      isPopupOpen
+    } = _ref2;
+    return /*#__PURE__*/React.createElement(IconButton, {
+      iconName: "ZD-GN-more",
+      iconSize: "16",
+      isActive: isPopupOpen,
+      onClick: handleTogglePopup
+    });
+  };
+
+  return /*#__PURE__*/React.createElement(CustomDropdown, {
+    $ui_boxSize: "medium",
+    $flag_padding: true,
+    $render_targetElement: renderTargetElement,
+    $method_getRef: ref,
+    $customProps_dropbox: {
+      onClick: undefined
+    }
+  }, listItemActions.map(action => /*#__PURE__*/React.createElement(ActionEventMediator, {
+    key: action.id,
+    action: action,
+    clientScripts: findMappedClientScripts(action, clientScripts),
+    instanceName: action.instanceName // getRef={ref}
+
+  })));
+}
+
+export default MoreActionsRendererView;

package/es/platform/client-actions/components/row-actions-renderer/frameworks/ui/RowActions/RowActionsRenderer.js

@@ -0,0 +1,12 @@
+import { createCustomComponent } from "../../../../../../../library/custom-component";
+import RowActionsRendererProperties from "../../../../../cc/action-event-mediator/Properties";
+import RowActionsRendererView from "./RowActionsRendererView";
+import { ComponentRegistry } from "../../../../../../../library";
+const RowActionsRendererComponent = createCustomComponent({
+  name: 'RowActionsRenderer',
+  properties: RowActionsRendererProperties,
+  eventHandlers: {},
+  View: RowActionsRendererView
+});
+ComponentRegistry.register("RowActionsRenderer", RowActionsRendererComponent);
+export default RowActionsRendererComponent;

package/es/platform/client-actions/components/row-actions-renderer/frameworks/ui/RowActions/RowActionsRenderer.module.css

@@ -0,0 +1,19 @@
+.wrapper {
+    max-width: 100% 
+}
+
+.gap_small {
+    gap: var(--zd_size4) 
+}
+
+.gap_xmedium {
+    gap: var(--zd_size6) 
+}
+
+.gap_medium {
+    gap: var(--zd_size8) 
+}
+
+.gap_large {
+    gap: var(--zd_size10) 
+}