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

package/es/library/dot/legacy-to-new-arch/table-field-components/highlighted-value-field/frameworks/ui/HighlightedValueFieldView.js

@@ -10,7 +10,10 @@ export default function HighlightedValueFieldView(_ref, ref) {
     tooltip,
     weight,
     isDotted,
-    cursor
+    cursor,
+    iconName,
+    iconSize,
+    iconPosition
   } = state.properties;
   return /*#__PURE__*/React.createElement(HighlightedValue, {
     getRef: ref,
@@ -19,6 +22,9 @@ export default function HighlightedValueFieldView(_ref, ref) {
     tooltip: tooltip,
     cursor: cursor,
     weight: weight,
-    isDotted: isDotted
+    isDotted: isDotted,
+    iconName: iconName,
+    iconSize: iconSize,
+    iconPosition: iconPosition
   });
 }

package/es/library/dot/legacy-to-new-arch/table-field-components/radio-dropdown-field/frameworks/ui/EventHandlersFactory.js

@@ -15,13 +15,15 @@ export class EventHandlersFactory {
         fieldType
       } = state.properties;
       const {
-        id
+        id,
+        previousId
       } = action.payload;
       dispatch({
         type: FieldConstants.FIELD_CHANGED,
         payload: {
           fieldName,
-          value: fieldType === 'Boolean' ? id === 'true' : id
+          value: fieldType === 'Boolean' ? id === 'true' : id,
+          previousValue: fieldType === 'Boolean' ? previousId === 'true' : previousId
         }
       });
     };

package/es/library/dot/legacy-to-new-arch/table-field-components/switch-field/frameworks/ui/EventHandlersFactory.js

@@ -16,7 +16,8 @@ export class EventHandlersFactory {
         type: FieldConstants.FIELD_CHANGED,
         payload: {
           fieldName,
-          value: toggledValue
+          value: toggledValue,
+          previousValue: checked
         }
       });
     };

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/interfaces/ActionViewModel";
 
 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";
+// eslint-disable-next-line @zohodesk/architecturerules/import-contract
+import { ActionViewGap, Layout } from "../../../../../../platform/client-actions/components/interfaces/ActionViewModel";
+import ClientActionsRenderer from "../../../../../../platform/client-actions/components/client-actions-renderer/frameworks/ui/client-actions-renderer/ClientActionsRenderer";
 
 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: 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/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 @@
+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: 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,
+    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/client-actions-renderer/frameworks/ui/more-actions-renderer/MoreActionsRenderer.js

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