@zohodesk/library-platform 1.2.0-exp.3 → 1.2.0-exp.4

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

@@ -1,10 +1,11 @@
 import React from "react";
 import MultiSelect from "@zohodesk/components/es/MultiSelect/MultiSelect";
 import { MultiSelectConstants } from "../../../../../../cc/multi-select";
-import RowActionsRenderer from "../../../../../../platform/client-actions/components/row-actions-renderer/frameworks/ui/RowActions/RowActionsRenderer";
 import { ActionViewGap } from "../../../../../../platform/client-actions/components/interfaces/ActionViewModel"; // @ts-ignore
 
 import style from "./css/MultiSelectView.module.css";
+import ClientActionsRenderer from "../../../../../../platform/client-actions/components/client-actions-renderer/frameworks/ui/client-actions-renderer/ClientActionsRenderer";
+import { Layout } from "../../../../../../platform/client-actions/components/client-actions-renderer/domain/entities/State";
 
 function MultiSelectView(_ref, ref) {
   let {
@@ -24,18 +25,26 @@ function MultiSelectView(_ref, ref) {
     disabled,
     readonly,
     actions,
-    clientScripts
+    clientScripts,
+    context
   } = state.properties;
   const transformedOptions = options.map(option => {
+    const {
+      context
+    } = option;
     const baseOption = option;
 
     if (option.optionActions && option.optionActions.length !== 0) {
       return { ...option,
         listItemCustomProps: {
-          renderValueRightPlaceholderNode: () => /*#__PURE__*/React.createElement(RowActionsRenderer, {
+          renderValueRightPlaceholderNode: () => /*#__PURE__*/React.createElement(ClientActionsRenderer, {
             actions: option.optionActions,
-            gap: ActionViewGap.SMALL,
-            clientScripts: clientScripts
+            clientScripts: clientScripts,
+            context: context,
+            viewMeta: {
+              layout: Layout.HORIZONTAL,
+              gap: ActionViewGap.SMALL
+            }
           }),
           customClass: {
             customValueRightPlaceholder: style.optionActionsContainer
@@ -51,10 +60,14 @@ function MultiSelectView(_ref, ref) {
     if (!actions?.length) return null;
     return /*#__PURE__*/React.createElement("div", {
       className: style.fieldActionsContainer
-    }, /*#__PURE__*/React.createElement(RowActionsRenderer, {
+    }, /*#__PURE__*/React.createElement(ClientActionsRenderer, {
       actions: actions,
-      gap: ActionViewGap.SMALL,
-      clientScripts: clientScripts
+      clientScripts: clientScripts,
+      context: context,
+      viewMeta: {
+        layout: Layout.HORIZONTAL,
+        gap: ActionViewGap.SMALL
+      }
     }));
   };
 

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

@@ -1,10 +1,11 @@
 import React from "react";
 import Select from '@zohodesk/components/es/Select/Select';
 import SelectConstants from "../../../../../../cc/select/Constants";
-import RowActionsRenderer from "../../../../../../platform/client-actions/components/row-actions-renderer/frameworks/ui/RowActions/RowActionsRenderer";
 import { ActionViewGap } from "../../../../../../platform/client-actions/components/interfaces/ActionViewModel"; // @ts-ignore
 
 import style from "./css/Select.module.css";
+import ClientActionsRenderer from "../../../../../../platform/client-actions/components/client-actions-renderer/frameworks/ui/client-actions-renderer/ClientActionsRenderer";
+import { Layout } from "../../../../../../platform/client-actions/components/client-actions-renderer/domain/entities/State";
 
 function SelectView(_ref, ref) {
   let {
@@ -23,7 +24,8 @@ function SelectView(_ref, ref) {
     disabled,
     readonly,
     actions,
-    clientScripts
+    clientScripts,
+    context
   } = state.properties;
   const transformedOptions = options.map(option => {
     const baseOption = {
@@ -34,10 +36,14 @@ function SelectView(_ref, ref) {
     if (option.optionActions && option.optionActions.length !== 0) {
       return { ...baseOption,
         listItemCustomProps: {
-          renderValueRightPlaceholderNode: () => /*#__PURE__*/React.createElement(RowActionsRenderer, {
+          renderValueRightPlaceholderNode: () => /*#__PURE__*/React.createElement(ClientActionsRenderer, {
             actions: option.optionActions,
-            gap: ActionViewGap.SMALL,
-            clientScripts: clientScripts
+            clientScripts: clientScripts,
+            context: context,
+            viewMeta: {
+              layout: Layout.HORIZONTAL,
+              gap: ActionViewGap.SMALL
+            }
           }),
           customClass: {
             customValueRightPlaceholder: style.optionActionsContainer
@@ -50,10 +56,14 @@ function SelectView(_ref, ref) {
   });
 
   const renderRightFieldActions = () => {
-    return actions?.length ? /*#__PURE__*/React.createElement(RowActionsRenderer, {
+    return actions?.length ? /*#__PURE__*/React.createElement(ClientActionsRenderer, {
       actions: actions,
-      gap: ActionViewGap.SMALL,
-      clientScripts: clientScripts
+      clientScripts: clientScripts,
+      context: context,
+      viewMeta: {
+        layout: Layout.HORIZONTAL,
+        gap: ActionViewGap.SMALL
+      }
     }) : null;
   };
 

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

@@ -3,8 +3,9 @@ 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";
 import { ActionViewGap } from "../../../../../../platform/client-actions/components/interfaces/ActionViewModel";
+import ClientActionsRenderer from "../../../../../../platform/client-actions/components/client-actions-renderer/frameworks/ui/client-actions-renderer/ClientActionsRenderer";
+import { Layout } from "../../../../../../platform/client-actions/components/client-actions-renderer/domain/entities/State";
 
 function TextAreaView(_ref, ref) {
   let {
@@ -23,7 +24,8 @@ function TextAreaView(_ref, ref) {
     disabled,
     readonly,
     actions,
-    clientScripts
+    clientScripts,
+    context
   } = state.properties;
   const textAreaRenderer = /*#__PURE__*/React.createElement(Textarea, {
     getRef: ref,
@@ -64,10 +66,14 @@ function TextAreaView(_ref, ref) {
     className: style.hasChildren
   }, textAreaRenderer, /*#__PURE__*/React.createElement("div", {
     className: style.rightPlaceholder
-  }, /*#__PURE__*/React.createElement(RowActionsRenderer, {
+  }, /*#__PURE__*/React.createElement(ClientActionsRenderer, {
     actions: actions,
     clientScripts: clientScripts,
-    gap: ActionViewGap.SMALL
+    context: context,
+    viewMeta: {
+      layout: Layout.HORIZONTAL,
+      gap: ActionViewGap.SMALL
+    }
   })));
 }
 

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

@@ -1,8 +1,9 @@
 import React from "react";
 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";
 import { ActionViewGap } from "../../../../../../platform/client-actions/components/interfaces/ActionViewModel";
+import ClientActionsRenderer from "../../../../../../platform/client-actions/components/client-actions-renderer/frameworks/ui/client-actions-renderer/ClientActionsRenderer";
+import { Layout } from "../../../../../../platform/client-actions/components/client-actions-renderer/domain/entities/State";
 
 function TextBoxView(_ref, ref) {
   let {
@@ -23,14 +24,19 @@ function TextBoxView(_ref, ref) {
     disabled,
     readonly,
     actions,
-    clientScripts
+    clientScripts,
+    context
   } = state.properties;
 
   const renderRightFieldActions = () => {
-    return actions?.length ? /*#__PURE__*/React.createElement(RowActionsRenderer, {
+    return actions?.length ? /*#__PURE__*/React.createElement(ClientActionsRenderer, {
       actions: actions,
       clientScripts: clientScripts,
-      gap: ActionViewGap.SMALL
+      context: context,
+      viewMeta: {
+        layout: Layout.HORIZONTAL,
+        gap: ActionViewGap.SMALL
+      }
     }) : null;
   };
 

package/es/platform/client-actions/behaviour/zclient-actions/adapters/resources/__test__/ClientActionsFetchSDK.test.js

@@ -0,0 +1,183 @@
+import ClientActionsFetchSDK from "../ClientActionsFetchSDK";
+const getApiDetailsMock = jest.fn();
+jest.mock("../../../../../../zdata-source/domain/entities/APITemplate", () => ({
+  __esModule: true,
+  default: jest.fn().mockImplementation(() => ({
+    getApiDetails: getApiDetailsMock
+  }))
+}));
+
+const createAction = function () {
+  let overrides = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return {
+    id: 'action-1',
+    name: 'test-action',
+    location: 'module.instance.header_actions',
+    component: 'smartTable',
+    ...overrides
+  };
+};
+
+describe('ClientActionsFetchSDK', () => {
+  let sdk;
+  const originalWindow = global.window;
+  beforeEach(() => {
+    getApiDetailsMock.mockReturnValue({
+      url: '/supportapi/zd/acme/api/v1/clientActions?from=0&limit=50',
+      method: 'GET',
+      options: {
+        method: 'GET'
+      }
+    });
+    global.window = {
+      currentOrg: {
+        portalName: 'acme',
+        id: '1001'
+      },
+      fetch: jest.fn()
+    };
+    sdk = new ClientActionsFetchSDK();
+  });
+  afterEach(() => {
+    jest.clearAllMocks();
+    global.window = originalWindow;
+  });
+  describe('getClientActionsAPIDetails', () => {
+    test('builds API details with org context and headers', () => {
+      const details = sdk.getClientActionsAPIDetails({
+        from: 0,
+        limit: 50
+      });
+      expect(getApiDetailsMock).toHaveBeenCalledWith(expect.objectContaining({
+        from: 0,
+        limit: 50,
+        servicePrefix: 'supportapi/zd',
+        orgName: 'acme'
+      }));
+      expect(details.url).toContain('/supportapi/zd/acme/api/v1/clientActions');
+      expect(details.method).toBe('GET');
+      expect(details.options.method).toBe('GET');
+      expect(details.options.headers.orgId).toBe('1001');
+    });
+    test('handles boundary pagination values without failing', () => {
+      const details = sdk.getClientActionsAPIDetails({
+        from: 0,
+        limit: 0
+      });
+      expect(details.url).toContain('/supportapi/zd/acme/api/v1/clientActions');
+      expect(details.options.method).toBe(details.method);
+    });
+    test('throws when currentOrg is missing', () => {
+      delete global.window.currentOrg;
+      expect(() => sdk.getClientActionsAPIDetails({
+        from: 0,
+        limit: 50
+      })).toThrow();
+    });
+  });
+  describe('mapClientActionsByInstanceLocation', () => {
+    test('returns empty map for empty list', () => {
+      const result = sdk.mapClientActionsByInstanceLocation([]);
+      expect(result.size).toBe(0);
+    });
+    test('groups actions by instance and location for dotted location path', () => {
+      const action = createAction({
+        location: 'module.table.header_actions',
+        component: 'smartTable'
+      });
+      const result = sdk.mapClientActionsByInstanceLocation([action]);
+      expect(result.has('table')).toBe(true);
+      expect(result.get('table')?.header_actions).toEqual([action]);
+    });
+    test('falls back to component and full location when location has no dot path', () => {
+      const action = createAction({
+        location: 'row_actions',
+        component: 'smartTable'
+      });
+      const result = sdk.mapClientActionsByInstanceLocation([action]);
+      expect(result.has('smartTable')).toBe(true);
+      expect(result.get('smartTable')?.row_actions).toEqual([action]);
+    });
+    test('keeps duplicates under same instance/location', () => {
+      const first = createAction({
+        id: '1',
+        location: 'module.table.row_actions'
+      });
+      const second = createAction({
+        id: '2',
+        location: 'module.table.row_actions'
+      });
+      const result = sdk.mapClientActionsByInstanceLocation([first, second]);
+      expect(result.get('table')?.row_actions).toHaveLength(2);
+      expect(result.get('table')?.row_actions).toEqual([first, second]);
+    });
+    test('uses second and third segments for multi-segment location', () => {
+      const action = createAction({
+        location: 'a.b.c.d',
+        component: 'fallbackComponent'
+      });
+      const result = sdk.mapClientActionsByInstanceLocation([action]);
+      expect(result.has('b')).toBe(true);
+      expect(result.get('b')?.c).toEqual([action]);
+    });
+    test('throws for malformed action location', () => {
+      const malformed = createAction({
+        location: undefined
+      });
+      expect(() => sdk.mapClientActionsByInstanceLocation([malformed])).toThrow();
+    });
+  });
+  describe('fetchClientActions', () => {
+    const validParams = {
+      from: 0,
+      limit: 50,
+      components: 'smartTable',
+      modules: 'tickets',
+      page: 'list'
+    };
+    test('resolves grouped map on successful fetch', async () => {
+      const payload = [createAction({
+        location: 'module.table.header_actions',
+        component: 'smartTable'
+      }), createAction({
+        id: '2',
+        location: 'row_actions',
+        component: 'smartTable'
+      })];
+      global.window.fetch.mockResolvedValue({
+        json: jest.fn().mockResolvedValue(payload)
+      });
+      const result = await sdk.fetchClientActions(validParams);
+      expect(global.window.fetch).toHaveBeenCalledTimes(1);
+      const [url, options] = global.window.fetch.mock.calls[0];
+      expect(url).toContain('/supportapi/zd/acme/api/v1/clientActions');
+      expect(options.headers.orgId).toBe('1001');
+      expect(result.get('table')?.header_actions).toHaveLength(1);
+      expect(result.get('smartTable')?.row_actions).toHaveLength(1);
+    });
+    test('resolves empty map when response payload is empty list', async () => {
+      global.window.fetch.mockResolvedValue({
+        json: jest.fn().mockResolvedValue([])
+      });
+      const result = await sdk.fetchClientActions(validParams);
+      expect(result.size).toBe(0);
+    });
+    test('rejects when fetch fails', async () => {
+      const networkError = new Error('Network down');
+      global.window.fetch.mockRejectedValue(networkError);
+      await expect(sdk.fetchClientActions(validParams)).rejects.toThrow('Network down');
+    });
+    test('rejects when response json parsing fails', async () => {
+      global.window.fetch.mockResolvedValue({
+        json: jest.fn().mockRejectedValue(new Error('Invalid JSON'))
+      });
+      await expect(sdk.fetchClientActions(validParams)).rejects.toThrow('Invalid JSON');
+    });
+    test('rejects when json payload is non-iterable', async () => {
+      global.window.fetch.mockResolvedValue({
+        json: jest.fn().mockResolvedValue(null)
+      });
+      await expect(sdk.fetchClientActions(validParams)).rejects.toThrow();
+    });
+  });
+});

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

@@ -1,4 +1,3 @@
-import { ActionViewGap } from "../../components/interfaces/ActionViewModel";
 import { clientScriptsSchema } from "../../../client-scripts/cc/zclient-scripts-execution/clientScriptsSchema";
 export const actionSchema = {
   type: 'object',
@@ -70,46 +69,4 @@ export const ActionEventMediatorProperties = {
       }
     }
   }
-};
-export default {
-  testId: {
-    required: false,
-    typeMetadata: {
-      schema: {
-        type: 'string'
-      }
-    },
-    defaultValue: ''
-  },
-  actions: {
-    required: true,
-    typeMetadata: {
-      schema: actionsSchema
-    }
-  },
-  clientScripts: {
-    required: false,
-    typeMetadata: {
-      schema: clientScriptsSchema
-    }
-  },
-  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/client-actions-renderer/Properties.js

@@ -0,0 +1,58 @@
+import { clientScriptsSchema } from "../../../client-scripts/cc/zclient-scripts-execution/clientScriptsSchema";
+import { actionsSchema } from "../action-event-mediator/Properties";
+import viewMetaSchema from "./ViewMetaSchema";
+export default {
+  location: {
+    required: false,
+    typeMetadata: {
+      schema: {
+        type: 'string'
+      }
+    },
+    defaultValue: ''
+  },
+  instanceName: {
+    required: false,
+    typeMetadata: {
+      schema: {
+        type: 'string'
+      }
+    },
+    defaultValue: ''
+  },
+  testId: {
+    required: false,
+    typeMetadata: {
+      schema: {
+        type: 'string'
+      }
+    },
+    defaultValue: ''
+  },
+  actions: {
+    required: true,
+    typeMetadata: {
+      schema: actionsSchema
+    }
+  },
+  clientScripts: {
+    required: false,
+    typeMetadata: {
+      schema: clientScriptsSchema
+    }
+  },
+  context: {
+    required: false,
+    typeMetadata: {
+      schema: {
+        type: 'object'
+      }
+    }
+  },
+  viewMeta: {
+    required: false,
+    typeMetadata: {
+      schema: viewMetaSchema
+    }
+  }
+};

package/es/platform/client-actions/cc/client-actions-renderer/ViewMetaSchema.js

@@ -0,0 +1,17 @@
+import { Layout } from "../../components/client-actions-renderer/domain/entities/State";
+import { ActionViewGap } from "../../components/interfaces/ActionViewModel";
+export default {
+  type: 'object',
+  properties: {
+    layout: {
+      type: 'string',
+      enum: [Layout.HORIZONTAL, Layout.VERTICAL, Layout.HORIZONTAL_WITH_MORE_ACTIONS, Layout.VERTICAL_WITH_MORE_ACTIONS],
+      default: Layout.HORIZONTAL
+    },
+    gap: {
+      type: 'string',
+      enum: [ActionViewGap.NONE, ActionViewGap.SMALL, ActionViewGap.MEDIUM, ActionViewGap.LARGE, ActionViewGap.XLARGE, ActionViewGap.XMEDIUM],
+      default: ActionViewGap.NONE
+    }
+  }
+};

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

@@ -40,8 +40,7 @@ const ClientActionsAdapter = {
       if (response.errorCode) {
         return Promise.reject(response);
       } else {
-        const actions = ClientActionsAdapterUtils.transform(response);
-        return Promise.resolve(actions);
+        return Promise.resolve(response);
       }
     });
   }

package/es/platform/client-actions/components/client-actions-renderer/adapters/presenters/ClientActionsRendererTranslator.js

@@ -0,0 +1,24 @@
+import ClientActionsTranslator from "../../../../translators/client-actions-translator";
+export default class ClientActionsRendererTranslator {
+  // eslint-disable-next-line complexity -- Need this complexity to transform client actions to action view model which is used for rendering client actions in UI
+  static transformState(state) {
+    let actions = state.properties.actions;
+    const {
+      context,
+      location,
+      instanceName
+    } = state.properties;
+
+    if ((!actions || actions.length === 0) && location && instanceName) {
+      actions = []; //TODO: Need to update this logic to use platformBridge SDK to use fetched client actions at page level
+    }
+
+    const resolvedActions = ClientActionsTranslator.transform(actions, context.instanceName, context.moduleName, context);
+    return { ...state,
+      properties: { ...state.properties,
+        actions: resolvedActions
+      }
+    };
+  }
+
+}

package/es/platform/client-actions/components/client-actions-renderer/domain/entities/ClientActionsRendererDatatype.js

@@ -0,0 +1 @@
+export {};

package/es/platform/client-actions/components/client-actions-renderer/domain/entities/ClientActionsRendererViewProps.js

@@ -0,0 +1 @@
+export {};

package/es/platform/client-actions/components/client-actions-renderer/domain/entities/Context.js

@@ -0,0 +1 @@
+export {};

package/es/platform/client-actions/components/client-actions-renderer/domain/entities/State.js

@@ -0,0 +1,8 @@
+export let Layout = /*#__PURE__*/function (Layout) {
+  Layout["HORIZONTAL"] = "horizontal";
+  Layout["VERTICAL"] = "vertical";
+  Layout["HORIZONTAL_WITH_MORE_ACTIONS"] = "horizontal-with-more-actions";
+  Layout["VERTICAL_WITH_MORE_ACTIONS"] = "vertical-with-more-actions";
+  return Layout;
+}({});
+;

package/es/platform/client-actions/components/client-actions-renderer/frameworks/ui/client-actions-renderer/ClientActionsRenderer.js

@@ -0,0 +1,11 @@
+import { createCustomComponent } from "../../../../../../../library/custom-component";
+import ClientActionsRendererProperties from "../../../../../cc/client-actions-renderer/Properties";
+import ClientActionsRendererTranslator from "../../../adapters/presenters/ClientActionsRendererTranslator";
+import ClientActionsRendererView from "./ClientActionsRendererView";
+export default createCustomComponent({
+  name: 'ClientActionsRenderer',
+  properties: ClientActionsRendererProperties,
+  transformState: ClientActionsRendererTranslator.transformState,
+  eventHandlers: {},
+  View: ClientActionsRendererView
+});

package/es/platform/client-actions/components/client-actions-renderer/frameworks/ui/client-actions-renderer/ClientActionsRenderer.module.css

@@ -0,0 +1,23 @@
+.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) 
+}
+
+.gap_xlarge {
+    gap: var(--zd_size12) 
+}

package/es/platform/client-actions/components/client-actions-renderer/frameworks/ui/client-actions-renderer/ClientActionsRendererView.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import DefaultActionsRendererView from "./views/DefaultActionsRendererView";
+import ComponentRegistry from "../../../../../../../library/custom-component/frameworks/ui/ComponentRegistry";
+export default function ClientActionsRendererView(_ref, ref) {
+  let {
+    state
+  } = _ref;
+  const {
+    actions,
+    clientScripts,
+    viewMeta,
+    testId,
+    slotName,
+    instanceName
+  } = state.properties;
+  const customView = slotName !== '' && instanceName !== '' ? ComponentRegistry.get(`${instanceName}_${slotName}_renderer`) : null;
+  const View = customView ? customView : DefaultActionsRendererView;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
+    clientActions: actions,
+    clientScripts: clientScripts,
+    viewMeta: viewMeta,
+    getRef: ref,
+    testId: testId
+  }));
+}