@zohodesk/library-platform 1.2.2-exp.2 → 1.2.2-exp.6

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: false,
+    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/interfaces/ActionViewModel";
+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/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 @@
+export {};

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: 4px
+}
+
+.gap_xmedium {
+    gap: 6px
+}
+
+.gap_medium {
+    gap: 8px
+}
+
+.gap_large {
+    gap: 10px
+}
+
+.gap_xlarge {
+    gap: 12px
+}

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,
+    location,
+    instanceName
+  } = state.properties;
+  const customView = location !== '' && instanceName !== '' ? ComponentRegistry.get(`${instanceName}_${location}_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
+  }));
+}

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

@@ -0,0 +1,66 @@
+import ActionEventMediator from "../../../../../action-event-mediator/frameworks/ui/ActionEventMediator";
+import { findMappedClientScripts } from "../../../../../../../client-scripts/behaviour/zclient-scripts-execution/frameworks/ClientScriptsUtils";
+import { ActionViewGap } from "../../../../../interfaces/ActionViewModel"; //@ts-ignore
+
+import style from "../ClientActionsRenderer.module.css";
+import MoreActionsRenderer from "../../more-actions-renderer/MoreActionsRenderer";
+import Flex from '@zohodesk/layout/es/Flex/Flex';
+import React from 'react';
+import { Layout } from "../../../../../interfaces/ActionViewModel";
+const HORIZONTAL_LAYOUTS = [Layout.HORIZONTAL, Layout.HORIZONTAL_WITH_MORE_ACTIONS];
+const MORE_ACTIONS_LAYOUTS = [Layout.VERTICAL_WITH_MORE_ACTIONS, Layout.HORIZONTAL_WITH_MORE_ACTIONS];
+
+function renderAction(action, clientScripts) {
+  return /*#__PURE__*/React.createElement(ActionEventMediator, {
+    key: action.id //@ts-ignore - action property defined using ACA pattern
+    ,
+    action: action,
+    clientScripts: findMappedClientScripts(action, clientScripts),
+    instanceName: action.instanceName
+  });
+}
+
+function getFlexDirection(layout) {
+  return HORIZONTAL_LAYOUTS.includes(layout) ? 'row' : 'column';
+}
+
+function getGapClassName(gap) {
+  return gap !== ActionViewGap.NONE ? style[`gap_${gap}`] : '';
+}
+
+function shouldShowMoreActions(actionsCount, layout) {
+  return actionsCount > 3 && MORE_ACTIONS_LAYOUTS.includes(layout);
+}
+
+function getVisibleActions(showMore, firstAction, secondAction, allActions) {
+  return showMore ? [firstAction, secondAction] : allActions;
+}
+
+export default function DefaultActionsRendererView(_ref) {
+  let {
+    clientActions,
+    clientScripts,
+    viewMeta,
+    getRef,
+    testId = ''
+  } = _ref;
+  const [firstAction, secondAction, ...moreActions] = clientActions;
+  const layout = viewMeta?.layout ?? Layout.HORIZONTAL;
+  const gap = viewMeta?.gap ?? ActionViewGap.NONE;
+  const showMore = shouldShowMoreActions(clientActions.length, layout);
+  const actionsList = getVisibleActions(showMore, firstAction, secondAction, clientActions);
+  return /*#__PURE__*/React.createElement(Flex, {
+    ref: getRef,
+    testId: testId,
+    $ui_direction: getFlexDirection(layout),
+    $ui_className: `${style.wrapper} ${getGapClassName(gap)}`,
+    $ui_displayMode: "inline",
+    $ui_alignItems: "center"
+  }, actionsList.map(action => renderAction(action, clientScripts)), showMore &&
+  /*#__PURE__*/
+  //@ts-ignore - action property defined using ACA pattern
+  React.createElement(MoreActionsRenderer, {
+    actions: moreActions,
+    clientScripts: clientScripts
+  }));
+}

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

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

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

@@ -4,7 +4,8 @@ import CustomDropdown from '@zohodesk-private/desk-components/es/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 => {
+export function ListItemConvertor(action) {
+  // @ts-ignore - properties from ActionViewModel are being used to convert the action to ListItem compatible action, which is then used for rendering the ListItem in MoreActionsRenderer
   const {
     id,
     properties: {
@@ -12,7 +13,8 @@ export const ListItemConvertor = action => {
     },
     eventMappings,
     instanceName
-  } = action;
+  } = action; // @ts-ignore - properties from ActionViewModel are being used to convert the action to ListItem compatible action, which is then used for rendering the ListItem in MoreActionsRenderer
+
   const label = action.properties.label ? action.properties.label : action.properties.text;
   const updatedEventMappings = eventMappings.map(eventMapping => {
     return { ...eventMapping,
@@ -31,34 +33,40 @@ export const ListItemConvertor = action => {
     id,
     instanceName
   };
-};
+}
 
-function MoreActionsRendererView(_ref, ref) {
+function renderTargetElement(_ref) {
   let {
-    state,
-    helpers
+    handleTogglePopup,
+    isPopupOpen
   } = _ref;
+  return /*#__PURE__*/React.createElement(IconButton, {
+    iconName: "ZD-GN-more",
+    iconSize: "16",
+    isActive: isPopupOpen,
+    onClick: handleTogglePopup
+  });
+}
+
+function renderAction(action, clientScripts, instanceName) {
+  const mappedClientScripts = findMappedClientScripts(action, clientScripts);
+  return /*#__PURE__*/React.createElement(ActionEventMediator //@ts-ignore - property defined in ACA component
+  , {
+    action: action,
+    clientScripts: mappedClientScripts,
+    instanceName: instanceName
+  });
+}
+
+function MoreActionsRendererView(_ref2, ref) {
+  let {
+    state
+  } = _ref2;
   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
-    });
-  };
-
+  const listItemActions = actions.map(action => ListItemConvertor(action));
   return /*#__PURE__*/React.createElement(CustomDropdown, {
     $ui_boxSize: "medium",
     $flag_padding: true,
@@ -67,13 +75,7 @@ function MoreActionsRendererView(_ref, 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}
-
-  })));
+  }, listItemActions.map(action => renderAction(action, clientScripts, action.instanceName)));
 }
 
 export default MoreActionsRendererView;

package/es/platform/client-actions/components/interfaces/ActionViewModel.js

@@ -6,4 +6,11 @@ export let ActionViewGap = /*#__PURE__*/function (ActionViewGap) {
   ActionViewGap["LARGE"] = "large";
   ActionViewGap["XLARGE"] = "xlarge";
   return ActionViewGap;
+}({});
+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;
 }({});