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

package/es/library/dot/legacy-to-new-arch/multi-select/frameworks/ui/css/MultiSelectView.module.css

@@ -1,19 +1,19 @@
 .actionContainer {
-    margin-top: var(--zd_size4) ;
+    margin-top: 4px;
 }
 
 .custmInputWrapper {
     position: absolute;
-    top: 0 ;
-    width: 100% ;
+    top: 0;
+    width: 100%;
 }
 
 [dir=ltr] .custmInputWrapper {
-    left: 0 ;
+    left: 0;
 }
 
 [dir=rtl] .custmInputWrapper {
-    right: 0 ;
+    right: 0;
 }
 
 .clearIconContainer {
@@ -21,17 +21,17 @@
 }
 
 [dir=ltr] .paddingRight64 {
-    padding-right: var(--zd_size64) ;
+    padding-right: 64px;
 }
 
 [dir=rtl] .paddingRight64 {
-    padding-left: var(--zd_size64) ;
+    padding-left: 64px;
 }
 
 [dir=ltr] .paddingRight96 {
-    padding-right: var(--zd_size96) ;
+    padding-right: 96px;
 }
 
 [dir=rtl] .paddingRight96 {
-    padding-left: var(--zd_size96) ;
+    padding-left: 96px;
 }

package/es/library/dot/legacy-to-new-arch/select/frameworks/ui/SelectView.js

@@ -1,7 +1,7 @@
 import React from "react";
 import Select from '@zohodesk/components/es/Select/Select';
 import SelectConstants from "../../../../../../cc/select/Constants";
-import ActionEventMediator from "../../../../../../platform/client-actions/components/action-event-mediator/frameworks/ui/ActionEventMediator";
+import RowActionsRenderer from "../../../../../../platform/client-actions/components/row-actions-renderer/frameworks/ui/RowActions/RowActionsRenderer";
 
 function SelectView(_ref, ref) {
   let {
@@ -27,7 +27,7 @@ function SelectView(_ref, ref) {
   }));
 
   const renderRightFieldActions = () => {
-    return actions?.length ? /*#__PURE__*/React.createElement(ActionEventMediator, {
+    return actions?.length ? /*#__PURE__*/React.createElement(RowActionsRenderer, {
       actions: actions
     }) : null;
   };

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

@@ -19,6 +19,7 @@ import MultiSelectField from "./multiselect-field/frameworks/ui/MultiSelectField
 const FieldComponents = {
   [FieldTypes.CheckboxField]: CheckboxField,
   [FieldTypes.SwitchField]: SwitchField,
+  // TODO: Need to register SwitchField
   [FieldTypes.SingleLineField]: SingleLineField,
   [FieldTypes.EmailField]: EmailField,
   [FieldTypes.URLField]: UrlField,

package/es/library/dot/legacy-to-new-arch/text/frameworks/ui/TextView.js

@@ -1,5 +1,5 @@
 import React from "react";
-import Typography from "@zohodesk/components/es/v1/Typography/Typography";
+import Typography from "@zohodesk/components/es/Typography/Typography";
 import { TextConstants } from "../../../../../../cc";
 
 function TextView(_ref, ref) {

package/es/library/dot/legacy-to-new-arch/text-area/frameworks/ui/TextAreaView.js

@@ -1,9 +1,9 @@
 import React from "react";
-import ActionEventMediator from "../../../../../../platform/client-actions/components/action-event-mediator/frameworks/ui/ActionEventMediator";
 import Textarea from '@zohodesk/components/es/Textarea/Textarea';
 import TextAreaConstants from "../../../../../../cc/textarea/Constants"; // @ts-ignore
 
 import style from "./css/TextAreaView.module.css";
+import RowActionsRenderer from "../../../../../../platform/client-actions/components/row-actions-renderer/frameworks/ui/RowActions/RowActionsRenderer";
 
 function TextAreaView(_ref, ref) {
   let {
@@ -62,7 +62,7 @@ function TextAreaView(_ref, ref) {
     className: style.hasChildren
   }, textAreaRenderer, /*#__PURE__*/React.createElement("div", {
     className: style.rightPlaceholder
-  }, /*#__PURE__*/React.createElement(ActionEventMediator, {
+  }, /*#__PURE__*/React.createElement(RowActionsRenderer, {
     actions: actions
   })));
 }

package/es/library/dot/legacy-to-new-arch/text-area/frameworks/ui/css/TextAreaView.module.css

@@ -4,37 +4,37 @@
 
 .rightPlaceholder {
     position: absolute;
-    bottom: var(--zd_size4) ;
+    bottom: 4px;
 }
 
 [dir=ltr] .rightPlaceholder {
-    right: var(--zd_size12) ;
+    right: 12px;
 }
 
 [dir=rtl] .rightPlaceholder {
-    left: var(--zd_size12) ;
+    left: 12px;
 }
 
 [dir=ltr] .paddingRight32 {
-    padding-right: var(--zd_size32) ;
+    padding-right: 32px;
 }
 
 [dir=rtl] .paddingRight32 {
-    padding-left: var(--zd_size32) ;
+    padding-left: 32px;
 }
 
 [dir=ltr] .paddingRight64 {
-    padding-right: var(--zd_size64) ;
+    padding-right: 64px;
 }
 
 [dir=rtl] .paddingRight64 {
-    padding-left: var(--zd_size64) ;
+    padding-left: 64px;
 }
 
 [dir=ltr] .paddingRight96 {
-    padding-right: var(--zd_size96) ;
+    padding-right: 96px;
 }
 
 [dir=rtl] .paddingRight96 {
-    padding-left: var(--zd_size96) ;
+    padding-left: 96px;
 }

package/es/library/dot/legacy-to-new-arch/textbox/frameworks/ui/TextBoxView.js

@@ -1,7 +1,7 @@
 import React from "react";
-import ActionEventMediator from "../../../../../../platform/client-actions/components/action-event-mediator/frameworks/ui/ActionEventMediator";
 import TextBox from "@zohodesk/components/es/TextBoxIcon/TextBoxIcon";
 import TextBoxConstants from "../../../../../../cc/textbox/Constants";
+import RowActionsRenderer from "../../../../../../platform/client-actions/components/row-actions-renderer/frameworks/ui/RowActions/RowActionsRenderer";
 
 function TextBoxView(_ref, ref) {
   let {
@@ -25,7 +25,7 @@ function TextBoxView(_ref, ref) {
   } = state.properties;
 
   const renderRightFieldActions = () => {
-    return actions?.length ? /*#__PURE__*/React.createElement(ActionEventMediator, {
+    return actions?.length ? /*#__PURE__*/React.createElement(RowActionsRenderer, {
       actions: actions
     }) : null;
   };

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

@@ -10,9 +10,14 @@ class SetClientActionsUseCase extends AbstractUseCase {
     const {
       clientActions
     } = input;
+
+    if (!clientActions) {
+      return;
+    }
+
     const recordManager = repository.getClientActionsManagerEntity();
     const recordsEntity = ClientActionFactory.createMultipleClientActions(clientActions);
-    recordManager.setClientActions(recordsEntity);
+    recordManager.setData(recordsEntity);
     presenter.updateClientAction(recordManager.toObject());
   }
 

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

@@ -2,12 +2,15 @@ import { DATA_SOURCE_FAILURE, DATA_SOURCE_NO_CONTENT, DATA_SOURCE_SUCCESS } from
 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";
+import { CLIENTSCRIPT_FETCH_FAILURE_CALLBACK, CLIENTSCRIPT_FETCH_SUCCESS_CALLBACK, CLIENTSCRIPT_FETCH_SUCCESS_NO_CONTENT_CALLBACK, ClientScriptAPIs } from "../../../../../client-scripts/bc/zclient-scripts-fetch/Constants";
+import GetClientScriptsStrategy from "../../../../../client-scripts/behaviour/zclient-scripts-fetch/domain/entities/GetClientScriptsStrategy";
 const clientActionExecuteStrategiesMap = {
-  [ClientActionApiActionName.GET_CLIENTACTIONS]: new GetClientActionsStrategy()
+  [ClientActionApiActionName.GET_CLIENTACTIONS]: new GetClientActionsStrategy(),
+  [ClientScriptAPIs.GET_CLIENTSCRIPTS]: new GetClientScriptsStrategy()
 };
 export default class ClientActionManager {
-  constructor(clientActions) {
-    this.clientActions = clientActions;
+  constructor(clientActionResponse) {
+    this.clientActionResponse = clientActionResponse;
   }
 
   createDataSourceMeta(_ref) {
@@ -67,6 +70,37 @@ export default class ClientActionManager {
     });
   }
 
+  createFetchClientScriptMeta(actionName, apiName, props) {
+    const clientActionExecuteStrategyMeta = {
+      actionName,
+      apiName,
+      props
+    };
+
+    if (this.isGetClientScriptsApi(actionName)) {
+      clientActionExecuteStrategyMeta.props.from = 1;
+    }
+
+    const successMeta = {
+      type: CLIENTSCRIPT_FETCH_SUCCESS_CALLBACK,
+      metaData: clientActionExecuteStrategyMeta
+    };
+    const successNoContentMeta = {
+      type: CLIENTSCRIPT_FETCH_SUCCESS_NO_CONTENT_CALLBACK,
+      metaData: clientActionExecuteStrategyMeta
+    };
+    const failureMeta = {
+      type: CLIENTSCRIPT_FETCH_FAILURE_CALLBACK,
+      metaData: clientActionExecuteStrategyMeta
+    };
+    return this.createDataSourceMeta({
+      actionName,
+      successNoContentMeta,
+      failureMeta,
+      successMeta
+    });
+  }
+
   createSuccessEvents(response, metaData) {
     const {
       actionName
@@ -107,20 +141,25 @@ export default class ClientActionManager {
   }
 
   fetchingStarted() {
-    this.clientActions.setIsFetching(true);
+    this.clientActionResponse.setIsFetching(true);
   }
 
   fetchingFinished() {
-    this.clientActions.setIsFetching(false);
+    this.clientActionResponse.setIsFetching(false);
+  }
+
+  setData(data) {
+    this.clientActionResponse.setData(data);
   }
 
   getClientAction(id) {
-    return this.clientActions.getClientAction(id);
+    const clientActions = this.clientActionResponse;
+    return clientActions.getClientAction(id);
   }
 
   getClientActionModels() {
-    const clientActionModels = this.clientActions.toObject();
-    return clientActionModels.data;
+    const clientActionModels = this.clientActionResponse.toObject();
+    return clientActionModels.clientActions;
   }
 
   updateClientActionComponentProperties(id, newComponentProperties) {
@@ -140,16 +179,16 @@ export default class ClientActionManager {
     };
   }
 
-  setClientActions(clientActions) {
-    this.clientActions.setClientActions(clientActions);
-  }
-
   isGetClientActionsApi(actionName) {
     return ClientActionApiActionName.GET_CLIENTACTIONS === actionName;
   }
 
-  isClientActionsFetching() {
-    return this.clientActions.isClientActionsFetching();
+  isGetClientScriptsApi(actionName) {
+    return ClientScriptAPIs.GET_CLIENTSCRIPTS === actionName;
+  }
+
+  isFetching() {
+    return this.clientActionResponse.isFetching();
   }
 
   isClientActionApiName(apiName) {
@@ -175,12 +214,12 @@ export default class ClientActionManager {
     }
   }
 
+  isClientScriptApiName(apiName) {
+    return apiName === 'clientScripts';
+  }
+
   toObject() {
-    const clientActionsObj = this.clientActions.toObject();
-    return {
-      clientActions: clientActionsObj.data,
-      isFetching: clientActionsObj.isFetching
-    };
+    return this.clientActionResponse.toObject();
   }
 
 }

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

@@ -8,22 +8,22 @@ export default class ClientActions {
     let fetchLimit = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 100;
     this.clientActions = data.map(obj => new ClientAction(obj));
     this.fetchLimit = fetchLimit;
-    this.isFetching = isFetching;
+    this.isDataBeingFetched = isFetching;
   }
 
   setIsFetching(isFetching) {
-    this.isFetching = isFetching;
+    this.isDataBeingFetched = isFetching;
   }
 
-  setClientActions(clientActions) {
+  setData(clientActions) {
     this.clientActions = clientActions;
   }
 
-  isClientActionsFetching() {
-    return this.isFetching;
+  isFetching() {
+    return this.isDataBeingFetched;
   }
 
-  getClientActionsLength() {
+  getLength() {
     return this.clientActions.length;
   }
 
@@ -33,8 +33,8 @@ export default class ClientActions {
 
   toObject() {
     return {
-      data: this.clientActions.map(action => action.toObject()),
-      isFetching: this.isFetching
+      clientActions: this.clientActions.map(action => action.toObject()),
+      isFetching: this.isFetching()
     };
   }
 

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
 });