@zohodesk/library-platform 1.1.12 → 1.2.0

package/es/platform/components/smart-action-band/adapters/presenters/ActionBandTranslator.js

@@ -0,0 +1,132 @@
+import ClientActionsTranslator from "../../../../client-actions/translators/client-actions-translator";
+import DefaultClientActions from "./utils/DefaultClientActions";
+import { ActionBandLocations } from "../../../../../bc/action-band/Constants";
+import { i18NProviderUtils } from '@zohodesk/i18n';
+export default class ActionBandTranslator {
+  static transformState(state) {
+    const {
+      instanceName,
+      moduleName,
+      reloadConfig,
+      searchConfig,
+      sortConfig,
+      columnChooserConfig,
+      textOverflowConfig
+    } = state.properties;
+    const {
+      zclientAction,
+      zclientScriptsEventMapping,
+      zfield,
+      sortBy,
+      textOverflow,
+      columnChooser
+    } = state.behaviours;
+    const {
+      context
+    } = state.behaviours.appContext;
+    const {
+      clientActions,
+      isFetching: isClientActionsFetching
+    } = zclientAction || {};
+    let sorttableFields = zfield.fields.filter(field => field.isSortable === true);
+    const combinedClientActions = Array.isArray(clientActions) ? [...clientActions] : [];
+    const availableFields = zfield.fields;
+    const columnChooserProps = getColumnChooserProps(columnChooser, availableFields, context, moduleName, columnChooserConfig);
+
+    if (columnChooserConfig?.isEnabled) {
+      combinedClientActions.push(DefaultClientActions.createColumnChooserAction({ ...columnChooserProps,
+        textOverflowConfig: {
+          isEnabled: textOverflowConfig.isEnabled,
+          mode: textOverflow.mode
+        }
+      }));
+    }
+
+    if (searchConfig?.isEnabled) {
+      combinedClientActions.push(DefaultClientActions.createSearchAction());
+    }
+
+    if (reloadConfig?.isEnabled) {
+      combinedClientActions.push(DefaultClientActions.createReloadAction());
+    }
+
+    if (sortConfig?.isEnabled) {
+      combinedClientActions.push(DefaultClientActions.createSortByAction(sortBy, sortConfig, sorttableFields));
+    }
+
+    const mappedClientActions = mapper(combinedClientActions || []);
+    const transformedClientActions = {};
+    Object.entries(mappedClientActions).forEach(_ref => {
+      let [key, value] = _ref;
+      let bandActions = ClientActionsTranslator.transform(value, instanceName, moduleName, { ...context,
+        defaultSortField: sortConfig.defaultSortField
+      });
+      transformedClientActions[key] = bandActions;
+    });
+    const {
+      clientScripts,
+      isFetching: isClientScriptsFetching
+    } = zclientScriptsEventMapping;
+    const {
+      actionBandLeftActions,
+      actionBandRightActions
+    } = transformedClientActions;
+    return { ...state,
+      ...zclientAction,
+      viewModel: {
+        actionBandLeftActions,
+        actionBandRightActions,
+        clientScripts
+      }
+    };
+  }
+
+}
+
+const mapper = clientAction => ({
+  actionBandLeftActions: clientAction.filter(action => action.location === ActionBandLocations.LEFT_ACTIONS),
+  actionBandRightActions: clientAction.filter(action => action.location === ActionBandLocations.RIGHT_ACTIONS)
+});
+
+function getColumnChooserProps(columnChooser) {
+  let availableFields = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  let context = arguments.length > 2 ? arguments[2] : undefined;
+  let moduleName = arguments.length > 3 ? arguments[3] : undefined;
+  let columnChooserConfig = arguments.length > 4 ? arguments[4] : undefined;
+  const {
+    searchText: searchString,
+    fieldsOrder,
+    selected,
+    isMaxSelectionReached
+  } = columnChooser;
+  const fieldMap = mapFieldsToObject(availableFields);
+  const moduleConfig = context.modules?.find(module => module.apiKey === moduleName);
+  const disabledFieldName = moduleConfig?.nameField;
+  const restrictedFields = columnChooserConfig?.fieldRestrictionConfig || [];
+  const hasRestrictions = Array.isArray(restrictedFields) && restrictedFields.length > 0;
+  const columnChooserOptions = fieldsOrder.map(fieldName => getOption(fieldMap[fieldName], restrictedFields.includes(fieldName) || !!selected[fieldName], restrictedFields.includes(fieldName) || !hasRestrictions && disabledFieldName === fieldName));
+  return {
+    options: columnChooserOptions,
+    searchString,
+    hasSearch: searchString !== '' || columnChooserOptions.length > 3,
+    errorMessage: isMaxSelectionReached ? i18NProviderUtils.getI18NValue("support.ticket.table.max.colmun") : ''
+  };
+}
+
+function getOption(field, checked, disabled) {
+  return {
+    id: field?.name || '',
+    disabled,
+    locked: false,
+    // TODO - field.isLocked,
+    value: field?.i18NLabel || '',
+    checked
+  };
+}
+
+function mapFieldsToObject(availableFields) {
+  return availableFields.reduce((acc, field) => {
+    acc[field.name] = field;
+    return acc;
+  }, {});
+}

package/es/platform/components/smart-action-band/adapters/presenters/translators/interfaces/ActionBandTranslatorState.js

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

package/es/platform/components/smart-action-band/adapters/presenters/utils/DefaultClientActions.js

@@ -0,0 +1,179 @@
+/* eslint-disable max-lines-per-function */
+import { i18NProviderUtils } from '@zohodesk/i18n';
+import { SORT_BY_UPDATE_REQUESTED } from "../../../../../../bc/sort-by/Constants";
+import { SortOrder } from "../../../../../../bc/zlist/Types";
+import { SmartActionBandConstants } from "../../../../../../cc/action-band";
+import { SortDropdownConstants } from "../../../../../../cc/sort-dropdown";
+import ClientAction from "../../../../../client-actions/behaviour/zclient-actions/domain/entities/ClientAction";
+import { SortModelOrder } from "../../../../../zlist/domain/entities/interfaces/Properties";
+import { IconButtonConstants } from "../../../../../../cc/icon-button";
+import { SEARCH_TYPE_UPDATED } from "../../../../../../bc/search-box/Constants";
+import { ActionBandLocations } from "../../../../../../bc/action-band/Constants";
+import { getFieldTypeSortLabels } from "../../../../../zlist/adapters/presenters/utils/fieldSortLabels";
+import { SMART_ACTION_BAND_COMPONENT_NAME } from "../../../../../../cc/action-band/constants/ExternalConstants"; // import SortDropdownConstants from "@cc/sort-dropdown/Constants";
+
+class DefaultClientActions {
+  static constructAction(clientAction) {
+    return new ClientAction({ ...clientAction,
+      modules: ['MODULE'],
+      component: SMART_ACTION_BAND_COMPONENT_NAME,
+      modifiedTime: '2024-11-21T06:11:59.000Z',
+      createdTime: '2024-11-21T06:11:59.000Z'
+    }).toObject();
+  }
+
+  static createSearchAction() {
+    return this.constructAction({
+      uiComponentMapping: {
+        component: 'Search',
+        name: 'Action Band Search Action',
+        id: '4000000080003',
+        propertiesValueMapping: {},
+        eventMappings: [{
+          payloadValueMapping: {
+            searchQuery: '{{@payload.searchQuery}}'
+          },
+          sourceEvent: SEARCH_TYPE_UPDATED,
+          id: '4000000080005',
+          targetEvent: SmartActionBandConstants.ExternalConstants.SMART_ACTION_BAND_SEARCH_ON_TYPE
+        }]
+      },
+      conditions: {
+        fields: [],
+        pattern: '1'
+      },
+      location: ActionBandLocations.LEFT_ACTIONS,
+      id: '4000000080009',
+      name: 'SEARCH ACTION'
+    });
+  }
+
+  static createReloadAction() {
+    return this.constructAction({
+      uiComponentMapping: {
+        component: 'IconButton',
+        name: 'Action Band Reload Action',
+        id: '4000000080003',
+        propertiesValueMapping: {
+          iconName: 'ZD-reload',
+          iconSize: '12',
+          title: 'Refresh'
+        },
+        eventMappings: [{
+          payloadValueMapping: {},
+          sourceEvent: IconButtonConstants.ICON_BUTTON_CLICKED,
+          id: '4000000080005',
+          targetEvent: SmartActionBandConstants.ExternalConstants.SMART_ACTION_BAND_RELOAD_CLICKED
+        }]
+      },
+      conditions: {
+        fields: [],
+        pattern: '1'
+      },
+      location: ActionBandLocations.RIGHT_ACTIONS,
+      id: '4000000080009',
+      name: 'RELOAD ACTION'
+    });
+  }
+
+  static createSortByAction(sortBy, sortConfigFromProps, sorttableFields) {
+    const {
+      defaultSortField,
+      defaultSortOrder,
+      sortI18NLabels
+    } = sortConfigFromProps;
+    const {
+      order,
+      fieldName
+    } = sortBy;
+    const currentSortOrder = order === SortOrder.DES ? SortModelOrder.DES : SortModelOrder.ASC;
+    const currentSortFieldName = fieldName !== undefined ? fieldName : defaultSortField;
+    const defaultFieldObj = sorttableFields.find(field => field.name === defaultSortField);
+    const currentSortField = sorttableFields.find(field => field.name === currentSortFieldName);
+    const fieldOptions = sorttableFields.map(field => ({
+      name: field.name,
+      label: field.i18NLabel
+    }));
+    const fieldLabels = sortI18NLabels?.find(fieldObj => fieldObj.fieldName === currentSortFieldName);
+    const defaultSortLabels = getFieldTypeSortLabels(currentSortField?.type);
+    const ascendingLabel = (fieldLabels?.ascending === undefined ? fieldLabels?.ascending : i18NProviderUtils.getI18NValue('support.platform.smart.libraries.sort.tooltip', fieldLabels.ascending)) ?? defaultSortLabels?.ascendLabel;
+    const descendingLabel = (fieldLabels?.descending === undefined ? fieldLabels?.descending : i18NProviderUtils.getI18NValue('support.platform.smart.libraries.sort.tooltip', fieldLabels.descending)) ?? defaultSortLabels?.descendLabel;
+    return this.constructAction({
+      uiComponentMapping: {
+        component: 'SortDropdown',
+        name: 'Action Band Sort Action',
+        id: '4000000080003',
+        propertiesValueMapping: {
+          options: fieldOptions,
+          selectedOption: {
+            name: currentSortFieldName,
+            label: currentSortField?.i18NLabel || currentSortFieldName,
+            order: currentSortOrder
+          },
+          taggedOption: defaultSortField,
+          isResetDisabled: currentSortFieldName === defaultSortField && currentSortOrder === defaultSortOrder ? true : false,
+          iconTooltip: currentSortOrder === SortModelOrder.ASC ? descendingLabel : ascendingLabel
+        },
+        eventMappings: [{
+          payloadValueMapping: {
+            fieldName: '{{@payload.name}}',
+            order: '{{@payload.order}}'
+          },
+          sourceEvent: SortDropdownConstants.SORT_DROPDOWN_SORT_REQUESTED,
+          id: '4000000080005',
+          targetEvent: SORT_BY_UPDATE_REQUESTED
+        }, {
+          payloadValueMapping: {
+            fieldName: defaultSortField,
+            order: defaultSortOrder
+          },
+          sourceEvent: SortDropdownConstants.SORT_DROPDOWN_RESET_REQUESTED,
+          id: '4000000080005',
+          targetEvent: SORT_BY_UPDATE_REQUESTED
+        }]
+      },
+      conditions: {
+        fields: [],
+        pattern: '1'
+      },
+      location: ActionBandLocations.LEFT_ACTIONS,
+      id: '4000000080009',
+      name: 'SORT ACTION'
+    });
+  }
+
+  static createColumnChooserAction(_ref) {
+    let {
+      options,
+      searchString,
+      hasSearch,
+      errorMessage,
+      textOverflowConfig
+    } = _ref;
+    return this.constructAction({
+      uiComponentMapping: {
+        component: 'TableColumnChooser',
+        name: 'ColumnChooser',
+        propertiesValueMapping: {
+          options,
+          searchString,
+          hasSearch,
+          errorMessage,
+          textOverflowConfig
+        },
+        eventMappings: [],
+        id: '4000000080013'
+      },
+      conditions: {
+        fields: [],
+        pattern: '1'
+      },
+      location: ActionBandLocations.LEFT_ACTIONS,
+      id: '4000000080019',
+      name: 'ColumnChooser Action'
+    });
+  }
+
+}
+
+export default DefaultClientActions;

package/es/platform/components/smart-action-band/adapters/resources/SmartActionBandResource.js

@@ -0,0 +1,46 @@
+import { AbstractResource } from "../../../../sdk/application/interfaces/gateways/AbstractResource";
+import SortByRepository from "../../../../../library/behaviours/sort-by/adapters/gateway/Repository";
+import SortByPresenters from "../../../../../library/behaviours/sort-by/adapters/presenter/Presenter";
+import { SdkContracts } from "../../../../../cc/action-band/SdkContract";
+import UpdateSortByUseCase from "../../../../../library/behaviours/sort-by/applications/usecases/UpdateSortByUseCase";
+export class SmartActionBandResource extends AbstractResource {
+  initialize() {}
+
+  destroy() {}
+
+  getSortByDependencies() {
+    const dependencies = {
+      repository: new SortByRepository(),
+      presenter: new SortByPresenters()
+    };
+    return dependencies;
+  }
+
+  createUseCase(dependencies, UseCaseClass) {
+    const {
+      state,
+      updateState
+    } = this.dependencies;
+    const usecase = new UseCaseClass(dependencies);
+    usecase.updateDependency?.(state, updateState);
+    usecase.updateDependencies?.(state, updateState);
+    return usecase;
+  }
+
+  updateSortBy(sortBy) {
+    this.validateInput('updateSortBy', {
+      sortBy
+    }, SdkContracts.updateSortByInputMeta);
+    const {
+      dispatch
+    } = this.dependencies;
+    const dependencies = this.getSortByDependencies();
+    const usecase = this.createUseCase(dependencies, UpdateSortByUseCase);
+    usecase.execute({
+      fieldName: sortBy.fieldName,
+      order: sortBy.order,
+      dispatch
+    });
+  }
+
+}

package/es/platform/components/smart-action-band/applications/interfaces/ISmartActionBandResource.js

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

package/es/platform/components/smart-action-band/applications/interfaces/State.js

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

package/es/platform/components/smart-action-band/applications/interfaces/UseCaseDependencies.js

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

package/es/platform/components/smart-action-band/applications/interfaces/output/IPresenter.js

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

package/es/platform/components/smart-action-band/applications/usecases/AbstractUseCase.js

@@ -0,0 +1,18 @@
+class AbstractUseCase {
+  constructor(dependencies) {
+    this.dependencies = dependencies;
+    this.execute = this.execute.bind(this);
+  }
+
+  updateDependency(state, updateState) {
+    const {
+      repository,
+      presenter
+    } = this.dependencies;
+    repository.init(state);
+    presenter.updateDependencies(state, updateState);
+  }
+
+}
+
+export default AbstractUseCase;

package/es/platform/components/smart-action-band/domain/entities/interfaces/Properties.js

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

package/es/platform/components/smart-action-band/frameworks/EventHandlersFactory.js

@@ -0,0 +1,147 @@
+// import Repository from '../adapters/gateways/Repository';
+// import Presenter from '../adapters/presenters/Presenters';
+// import Service from '../adapters/gateways/Service';
+import { platformSDK } from "../../../sdk/frameworks/Sdk";
+import ActionBandSdkFactory from "./SmartActionBandSdkFactory";
+import { SEARCH_TYPE_CLEARED } from "../../../../bc/search-box/Constants";
+import { SmartActionBandConstants } from "../../../../cc/action-band";
+import { SORT_BY_UPDATED } from "../../../../bc/sort-by/Constants";
+import { TableTextOverflowConstants } from "../../../../cc/table-text-overflow";
+import { TEXT_OVERFLOW_BEHAVIOUR_UPDATE_REQUESTED, TEXT_OVERFLOW_BEHAVIOUR_UPDATED } from "../../../../bc/clip-wrap/Constants";
+import { COLUMN_CHOOSER_SAVED } from "../../../../cc/table-column-chooser/Constants"; // NOTE: Remove unused import
+// import SortByInitializeController from '@platform/components/smart-action-band/adapters/controllers/SortByInitializeController';
+
+function createHandlerWithSdk(handler) {
+  return input => {
+    const {
+      state
+    } = input;
+    const instanceName = state.properties.instanceName;
+    handler({ ...input,
+      platformSDK
+    }, ActionBandSdkFactory.create({
+      instanceName
+    }));
+  };
+}
+
+export default class EventHandlersFactory {
+  static getSdkWrappedEventHandler(eventHandlers) {
+    return Object.fromEntries(Object.keys(eventHandlers).map(eventName => {
+      const handler = createHandlerWithSdk(eventHandlers[eventName]);
+      return [eventName, handler];
+    }));
+  }
+
+  static create(eventHandlers, name) {
+    const wrapped = EventHandlersFactory.getSdkWrappedEventHandler(eventHandlers); // TODO: Remove unused code
+    // const repository = new Repository();
+    // const presenter = new Presenter();
+    // const service = new Service({ repository, presenter });
+
+    const textOverFlowUpdate = args => {
+      const {
+        action,
+        dispatch
+      } = args;
+      dispatch({
+        type: TEXT_OVERFLOW_BEHAVIOUR_UPDATE_REQUESTED,
+        payload: action.payload
+      });
+    };
+
+    const defaultEventHandlers = {
+      // [SEARCH_TYPE_UPDATED]: ({ action, dispatch }) => {
+      //   const { payload } = action;
+      //   dispatch({ type: SmartActionBandConstants.ExternalConstants.SMART_ACTION_BAND_SEARCH_ON_TYPE, payload });
+      // },
+      // [`${name}#MOUNT`]: new SortByInitializeController(service).handle,
+      [SEARCH_TYPE_CLEARED]: _ref => {
+        let {
+          action,
+          dispatch
+        } = _ref;
+        const {
+          payload
+        } = action;
+        dispatch({
+          type: SmartActionBandConstants.ExternalConstants.SMART_ACTION_BAND_SEARCH_CLEARED,
+          payload
+        });
+      },
+      [SORT_BY_UPDATED]: _ref2 => {
+        let {
+          action,
+          dispatch
+        } = _ref2;
+        const {
+          payload
+        } = action;
+        dispatch({
+          type: SmartActionBandConstants.ExternalConstants.SMART_ACTION_BAND_SORT_APPLIED,
+          payload
+        });
+      },
+      [TableTextOverflowConstants.TEXT_OVERFLOW_UPDATED]: textOverFlowUpdate,
+      [TEXT_OVERFLOW_BEHAVIOUR_UPDATED]: _ref3 => {
+        let {
+          action,
+          dispatch
+        } = _ref3;
+        const {
+          payload
+        } = action;
+        dispatch({
+          type: SmartActionBandConstants.ExternalConstants.SMART_ACTION_BAND_TEXT_OVERFLOW_UPDATED,
+          payload
+        });
+      },
+      [COLUMN_CHOOSER_SAVED]: _ref4 => {
+        let {
+          action,
+          dispatch
+        } = _ref4;
+        const {
+          payload
+        } = action;
+        dispatch({
+          type: SmartActionBandConstants.ExternalConstants.SMART_ACTION_BAND_COLUMN_CHOOSER_SAVED,
+          payload
+        });
+      }
+    };
+    return mergeEventHandlers([defaultEventHandlers, wrapped]);
+  }
+
+}
+
+function mergeEventHandlers(eventHandlersList) {
+  const mergedEventHandlers = {};
+  const allEventNames = new Set();
+
+  for (const handlers of eventHandlersList) {
+    Object.keys(handlers).forEach(eventName => allEventNames.add(eventName));
+  }
+
+  for (const eventName of allEventNames) {
+    mergedEventHandlers[eventName] = createMergedHandler(eventHandlersList, eventName);
+  }
+
+  return mergedEventHandlers;
+}
+
+function createMergedHandler(eventHandlersList, eventName) {
+  return function () {
+    for (const handlers of eventHandlersList) {
+      const handler = handlers[eventName];
+
+      if (typeof handler === 'function') {
+        try {
+          handler(...arguments);
+        } catch (error) {
+          __DEVELOPMENT__ && console.error(error);
+        }
+      }
+    }
+  };
+}

package/es/platform/components/smart-action-band/frameworks/SmartActionBand.js

@@ -0,0 +1,5 @@
+import SmartActionBandFactory from "./SmartActionBandFactory";
+const SmartActionBand = SmartActionBandFactory.create({
+  name: 'ActionBandConnected'
+});
+export default SmartActionBand;

package/es/platform/components/smart-action-band/frameworks/SmartActionBandFactory.js

@@ -0,0 +1,58 @@
+import Properties from "../../../../cc/action-band/Properties";
+import defaultDataSource from "../../../data-source";
+import { createCustomComponent } from "../../../../library/custom-component";
+import EventHandlersFactory from "./EventHandlersFactory";
+import DataBrokerBehaviourFactory from "../../../zdata-source/frameworks/DataBrokerBehaviourFactory";
+import ActionBandConnectedView from "./SmartActionBandView";
+import SdkBehaviourFactory from "../../../sdk-behaviour/frameworks/SdkBehaviourFactory";
+import ResourceNamesEnum from "../../../../bc/sdk/ResourceNamesEnum";
+import ActionBandTranslator from "../adapters/presenters/ActionBandTranslator";
+import ClientActionsBehaviourFactory from "../../../client-actions/behaviour/zclient-actions/frameworks/ClientActionsBehaviourFactory";
+import ClientScriptsBehaviourFactory from "../../../client-scripts/behaviour/zclient-scripts-fetch/frameworks/ClientScriptsBehaviourFactory";
+import AppContextBehaviourFactory from "../../../app-context-behaviour/frameworks/AppContextBehaviourFactory";
+import ZHttpBehaviourFactory from "../../../zhttp/frameworks/ZHttpBehaviourFactory";
+import ActionBandBehaviourFactory from "../../../../library/behaviours/action-band/frameworks/ActionBandBehaviourFactory";
+import ZFieldBehaviourFactory from "../../../zfield/frameworks/ZFieldBehaviourFactory";
+import SortByBehaviourFactory from "../../../../library/behaviours/sort-by/frameworks/ui/SortByBehaviourFactory";
+import ClipWrapBehaviourFactory from "../../../../library/behaviours/clip-wrap/frameworks/ui/ClipWrapBehaviourFactory";
+import ColumnChooserBehaviourFactory from "../../../column-chooser/frameworks/ColumnChooserBehaviourFactory";
+
+function combineDataSourceWithDefault(dataSource) {
+  return { ...defaultDataSource,
+    ...dataSource,
+    httpTemplates: { ...defaultDataSource.httpTemplates,
+      ...dataSource?.httpTemplates
+    }
+  };
+}
+
+export default class SmartActionBandFactory {
+  static create(_ref) {
+    let {
+      name,
+      dataSource,
+      eventHandlers = {},
+      View = ActionBandConnectedView
+    } = _ref;
+
+    const _dataSource = combineDataSourceWithDefault(dataSource);
+
+    return createCustomComponent({
+      name: name,
+      View: View,
+      properties: Properties,
+      eventHandlers: EventHandlersFactory.create(eventHandlers, name),
+      transformState: ActionBandTranslator.transformState,
+      behaviours: [SdkBehaviourFactory.create([ResourceNamesEnum.SMART_ACTION_BAND, ResourceNamesEnum.SMART_TABLE]), ZHttpBehaviourFactory.create(), DataBrokerBehaviourFactory.create(), AppContextBehaviourFactory.create(), ClientActionsBehaviourFactory.create({
+        getClientActions: _dataSource.httpTemplates.getClientActions
+      }), ClientScriptsBehaviourFactory.create({
+        getClientScripts: _dataSource.httpTemplates.getClientScripts
+      }), ZFieldBehaviourFactory.create({
+        availableFields: _dataSource.httpTemplates.getAvailableFields,
+        updateSelectedFields: _dataSource.httpTemplates.updateSelectedFields,
+        selectedFields: _dataSource.httpTemplates.getSelectedFields
+      }), ActionBandBehaviourFactory.create(), ClipWrapBehaviourFactory.create(), SortByBehaviourFactory.create(), ColumnChooserBehaviourFactory.create()]
+    });
+  }
+
+}

package/es/platform/components/smart-action-band/frameworks/SmartActionBandSdkFactory.js

@@ -0,0 +1,24 @@
+// /* eslint-disable max-lines-per-function */
+import { platformSDK_old } from "../../../sdk/frameworks/Sdk";
+import ResourceNamesEnum from "../../../../bc/sdk/ResourceNamesEnum";
+export default class ActionBandSdkFactory {
+  static getActionBandSdks(smartActionBand) {
+    return {
+      updateSortBy: sortBy => smartActionBand.updateSortBy(sortBy)
+    };
+  }
+
+  static create(_ref) {
+    let {
+      instanceName
+    } = _ref;
+    const smartActionBand = platformSDK_old[ResourceNamesEnum.SMART_ACTION_BAND](instanceName);
+    const actionBandSdks = ActionBandSdkFactory.getActionBandSdks(smartActionBand);
+    return {
+      actionBand: {
+        updateSortBy: actionBandSdks.updateSortBy
+      }
+    };
+  }
+
+}

package/es/platform/components/smart-action-band/frameworks/SmartActionBandView.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ActionBand from '@zohodesk-private/desk-components/es/ActionBand/ActionBand';
+import RowActionsRenderer from "../../../client-actions/components/row-actions-renderer/frameworks/ui/RowActions/RowActionsRenderer";
+
+function View(_ref, ref) {
+  let {
+    state
+  } = _ref;
+  const {
+    actionBandLeftActions,
+    actionBandRightActions,
+    clientScripts
+  } = state.viewModel;
+
+  const renderLeftActions = () => {
+    return /*#__PURE__*/React.createElement(RowActionsRenderer, {
+      actions: actionBandLeftActions,
+      clientScripts: clientScripts,
+      gap: "xlarge"
+    });
+  };
+
+  const renderRightActions = () => {
+    return /*#__PURE__*/React.createElement(RowActionsRenderer, {
+      actions: actionBandRightActions,
+      clientScripts: clientScripts,
+      gap: "xlarge"
+    });
+  };
+
+  return /*#__PURE__*/React.createElement(ActionBand, {
+    customProps: {
+      container: {
+        ref: ref
+      }
+    },
+    customId: "actionBand",
+    testId: "actionBand",
+    renderPrimaryActions: renderLeftActions,
+    renderSecondaryActions: renderRightActions
+  });
+}
+
+export default View;
+View.propTypes = {
+  state: PropTypes.object
+};