@reltio/components 1.4.1219 → 1.4.1228

package/cjs/hooks/useCustomScripts.js

@@ -69,8 +69,7 @@ var getCustomViewConfig = function (config) {
     var processApiResponse = config.processApiResponse, processApiRequest = config.processApiRequest, permissions = config.permissions, files = config.files, otherProps = __rest(config, ["processApiResponse", "processApiRequest", "permissions", "files"]);
     return __assign({ action: { processApiResponse: processApiResponse, processApiRequest: processApiRequest, permissions: permissions, files: files } }, otherProps);
 };
-var useCustomScripts = function (config, _a) {
-    var addInternalRequestInterceptor = _a.addInternalRequestInterceptor, addInternalResponseInterceptor = _a.addInternalResponseInterceptor, removeInternalRequestInterceptor = _a.removeInternalRequestInterceptor, removeInternalResponseInterceptor = _a.removeInternalResponseInterceptor;
+var useCustomScripts = function (config) {
     var customScripts = config.reduce(function (acc, customScript) {
         if (customScript.platform !== mdm_sdk_1.CustomScriptPlatform.CLASSIC) {
             return __spreadArray(__spreadArray([], acc), [__assign(__assign({}, customScript), { actionId: nanoid_1.default() })]);
@@ -78,6 +77,8 @@ var useCustomScripts = function (config, _a) {
         return acc;
     }, []);
     var showSnackbarMessage = react_1.useContext(contexts_1.SnackbarContext);
+    var _a = react_1.useContext(contexts_1.InterceptHandlersContext), addInternalRequestInterceptor = _a.addInternalRequestInterceptor, addInternalResponseInterceptor = _a.addInternalResponseInterceptor, removeInternalRequestInterceptor = _a.removeInternalRequestInterceptor, removeInternalResponseInterceptor = _a.removeInternalResponseInterceptor;
+    var qxApi = react_1.useContext(contexts_1.SandboxAPIContext);
     var dispatch = react_redux_1.useDispatch();
     var metadata = react_redux_1.useSelector(mdm_module_1.default.selectors.getMetadata) || {};
     var entity = react_redux_1.useSelector(mdm_module_1.default.selectors.getEntity) || {};
@@ -91,7 +92,6 @@ var useCustomScripts = function (config, _a) {
     var user = react_redux_1.useSelector(mdm_module_1.default.selectors.getUser);
     var entityUri = react_redux_1.useSelector(mdm_module_1.default.selectors.getEntityUri);
     var environment = react_redux_1.useSelector(mdm_module_1.default.selectors.getWorkflowEnvironmentUrl);
-    var qxApi = react_1.useContext(contexts_1.SandboxAPIContext);
     var workflowCheckPermission = workflow_1.useWorkflowCheckPermission();
     var _b = react_redux_1.useSelector(mdm_module_1.default.selectors.getSearchProviderData) || {}, typeSearch = _b.type, search = _b.data;
     var openSearch = function (search) { return dispatch(mdm_module_1.ui.actions.openSearch(search)); };
@@ -130,10 +130,13 @@ var useCustomScripts = function (config, _a) {
                         var _d = task.params, headers = _d.headers, id = _d.id, fakeURL = _d.url, method = _d.method, data = _d.data;
                         var url = fakeURL.replace(reltioPath, apiPath);
                         if (requestListeners.current[headers.requestId]) {
-                            requestListeners.current[headers.requestId].next(url, __assign(__assign({}, data), { id: id,
+                            requestListeners.current[headers.requestId].next(url, {
+                                body: data,
+                                id: id,
                                 task: task,
                                 headers: headers,
-                                method: method }));
+                                method: method
+                            });
                             requestListeners.current = ramda_1.omit([headers.requestId], requestListeners.current);
                         }
                     }
@@ -155,7 +158,7 @@ var useCustomScripts = function (config, _a) {
         workers.current = customScripts.reduce(function (acc, customScript) {
             var _a;
             var customViewConfig = getCustomViewConfig(customScript);
-            return __assign(__assign({}, acc), (_a = {}, _a[customScript.actionId] = mdm_sdk_1.initializeWebWorker(workerUrl, customScript.files, process, customViewConfig), _a));
+            return __assign(__assign({}, acc), (_a = {}, _a[customScript.actionId] = mdm_sdk_1.initializeWebWorker(workerUrl, process, customViewConfig), _a));
         }, workers.current);
         return function () {
             Object.keys(workers.current).forEach(function (actionId) {

package/esm/contexts/InterceptHandlersContext/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { InterceptHandlers } from '@reltio/mdm-sdk';
+export declare const InterceptHandlersContext: React.Context<InterceptHandlers>;

package/esm/contexts/InterceptHandlersContext/index.js

@@ -0,0 +1,3 @@
+import React from 'react';
+export var InterceptHandlersContext = React.createContext({});
+InterceptHandlersContext.displayName = 'InterceptHandlersContext';

package/esm/contexts/SandboxAPIContext/index.d.ts

@@ -1,6 +1,10 @@
 import React from 'react';
-export declare const SandboxAPIContext: React.Context<{
+import { InterceptHandlers } from '@reltio/mdm-sdk';
+declare type SandboxAPI = {
+    interceptors?: InterceptHandlers;
     getCurrentPerspectiveId: () => string;
     showPerspective: (perspective: any) => void;
     setEntityUri: (entityUri: string, listener: () => void) => void;
-}>;
+};
+export declare const SandboxAPIContext: React.Context<SandboxAPI>;
+export {};

package/esm/contexts/index.d.ts

@@ -20,3 +20,4 @@ export { useReloadAllFacets, ReloadFacetProvider, useReloadFacet } from './Reloa
 export { SearchFiltersContext } from './SearchFiltersContext';
 export { SnackbarContext } from './SnackbarContext';
 export { HighlightedValuesContext } from './HighlightedValuesContext';
+export { InterceptHandlersContext } from './InterceptHandlersContext';

package/esm/contexts/index.js

@@ -20,3 +20,4 @@ export { useReloadAllFacets, ReloadFacetProvider, useReloadFacet } from './Reloa
 export { SearchFiltersContext } from './SearchFiltersContext';
 export { SnackbarContext } from './SnackbarContext';
 export { HighlightedValuesContext } from './HighlightedValuesContext';
+export { InterceptHandlersContext } from './InterceptHandlersContext';

package/esm/hooks/useAPI/API.js

@@ -126,7 +126,8 @@ var sendApiRequest = function (params, permissions, signHandler) { return __awai
                         url: params.url,
                         method: params.method,
                         data: params.data,
-                        headers: headers
+                        headers: headers,
+                        noRequestProcessor: true
                     })];
             case 2: return [2 /*return*/, _a.sent()];
         }
@@ -159,10 +160,10 @@ export var processRequest = function (_a) {
     var handleRequest = function (request) {
         request
             .then(function (data) {
-            worker.postMessage(__assign({ action: 'response', result: { data: data } }, paramObject.params));
+            worker.postMessage(__assign({ action: 'response', result: { data: data, headers: paramObject.params.headers, status: 200 } }, paramObject.params));
         })
             .catch(function (error) {
-            worker.postMessage(__assign({ action: 'response', result: { data: error, headers: '', status: 0 } }, paramObject.params));
+            worker.postMessage(__assign({ action: 'response', result: { data: error, headers: paramObject.params.headers, status: 0 } }, paramObject.params));
         });
     };
     var shouldSignRequest = isNewUI(servicesPath);
@@ -222,7 +223,7 @@ export var processRequest = function (_a) {
             break;
         }
         case RequestAction.OPEN_SEARCH: {
-            openSearch({ viewId: config.id, searchState: paramObject.params.searchState });
+            openSearch({ viewId: config.id, searchState: paramObject.params.searchState || {} });
             break;
         }
         case RequestAction.GET_ENTITY_URI: {

package/esm/hooks/useAPI/helpers.d.ts

@@ -1,2 +1,51 @@
 export declare const isNewUI: (path?: string) => boolean;
 export declare const getWorkerURL: (uiPath: string, tenant: string) => string;
+export declare const getFilesWithArrayBuffer: (files: FileList) => Promise<unknown[]>;
+declare type ResetHTMLParams = {
+    worker: Worker;
+    setTooltip: any;
+    html?: string;
+    innerText?: string;
+    setListenersToReset: any;
+    setHtml: any;
+};
+export declare const resetHtml: ({ worker, setTooltip, innerText, html, setListenersToReset, setHtml }: ResetHTMLParams) => void;
+export declare const setUpQooxdooRequestInterceptor: ({ workerRef, setRequestListeners }: {
+    workerRef: any;
+    setRequestListeners: any;
+}) => {
+    processApiRequest: (url: any, method: any, headers: any, data: any, next: any) => void;
+};
+export declare const setUpQooxdooResponseInterceptor: ({ workerRef, setResponseListeners }: {
+    workerRef: any;
+    setResponseListeners: any;
+}) => {
+    processApiResponse: (url: any, method: any, data: any, next: any) => void;
+};
+export declare const setUpRequestInterceptor: ({ apiPath, reltioPath, tenant, processApiRequest, workerRef, setRequestListeners }: {
+    apiPath: any;
+    reltioPath: any;
+    tenant: any;
+    processApiRequest: any;
+    workerRef: any;
+    setRequestListeners: any;
+}) => ({ options, url, next }: {
+    next: (url: string, options: RequestInit) => void;
+    abort?: (error: Error) => void;
+    url: string;
+    options: RequestInit;
+}) => void;
+export declare const setUpResponseInterceptor: ({ reltioPath, apiPath, processApiResponse, workerRef, setResponseListeners }: {
+    reltioPath: any;
+    apiPath: any;
+    processApiResponse: any;
+    workerRef: any;
+    setResponseListeners: any;
+}) => ({ url, response, next, options, abort }: {
+    url: any;
+    response: any;
+    next: any;
+    options: any;
+    abort: any;
+}) => void;
+export {};

package/esm/hooks/useAPI/helpers.js

@@ -1,3 +1,15 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import nanoid from 'nanoid';
 export var isNewUI = function (path) {
     return path === null || path === void 0 ? void 0 : path.includes('/nui');
 };
@@ -9,3 +21,184 @@ export var getWorkerURL = function (uiPath, tenant) {
         return uiPath + "worker_api.js";
     }
 };
+export var getFilesWithArrayBuffer = function (files) {
+    var readFilePromises = Array.from(files).map(function (file) {
+        return new Promise(function (resolve, reject) {
+            var reader = new FileReader();
+            reader.onload = function (event) {
+                var content = event.target.result;
+                var lastModified = file.lastModified, name = file.name, size = file.size, type = file.type;
+                resolve({ lastModified: lastModified, name: name, size: size, type: type, content: content });
+            };
+            reader.onerror = function (error) {
+                reject(error);
+            };
+            reader.readAsArrayBuffer(file);
+        });
+    });
+    return Promise.all(readFilePromises);
+};
+var processInnerHtml = function (parent, worker, setTooltip) {
+    var handlersToReset = [];
+    var uiActions = parent.getAttribute('ui-actions');
+    var uiTooltip = parent.getAttribute('ui-tooltip');
+    var id = parent.getAttribute('id') || parent.getAttribute('name');
+    if (uiActions) {
+        uiActions.split(',').forEach(function (uiAction) {
+            var handler = function (event) {
+                var _a;
+                var target = event.target;
+                var postEventMessage = function (files) {
+                    worker.postMessage({
+                        action: 'event',
+                        type: 'uiAction',
+                        data: { type: uiAction, id: id, event: __assign(__assign({}, event), { files: files }) }
+                    });
+                };
+                if ((_a = target.files) === null || _a === void 0 ? void 0 : _a.length) {
+                    getFilesWithArrayBuffer(target.files).then(postEventMessage);
+                }
+                else {
+                    postEventMessage();
+                }
+            };
+            parent.addEventListener(uiAction, handler);
+            handlersToReset.push(function () {
+                parent.removeEventListener(uiAction, handler);
+            });
+        });
+        parent.removeAttribute('ui-actions');
+    }
+    if (uiTooltip) {
+        setTooltip(uiTooltip);
+    }
+    parent.childNodes.forEach(function (child) {
+        if (child.nodeType === 1) {
+            //Node.ELEMENT_NODE
+            handlersToReset = handlersToReset.concat(processInnerHtml(child, worker, setTooltip));
+        }
+    });
+    return handlersToReset;
+};
+export var resetHtml = function (_a) {
+    var worker = _a.worker, setTooltip = _a.setTooltip, innerText = _a.innerText, html = _a.html, setListenersToReset = _a.setListenersToReset, setHtml = _a.setHtml;
+    var docBlock = document.createElement('div');
+    docBlock.innerHTML = html || innerText;
+    var handlersToReset = processInnerHtml(docBlock, worker, setTooltip);
+    setListenersToReset(handlersToReset);
+    setHtml(docBlock);
+};
+var isURLtoProcess = function (processApi, url) {
+    return (processApi || []).some(function (request) {
+        var regExp = new RegExp("^" + request + "$");
+        return request.replace(/\/*$/, '') === url || (request && regExp.test(url));
+    });
+};
+export var setUpQooxdooRequestInterceptor = function (_a) {
+    var workerRef = _a.workerRef, setRequestListeners = _a.setRequestListeners;
+    return ({
+        processApiRequest: function (url, method, headers, data, next) {
+            var requestId = nanoid();
+            var options = { url: url, method: method, headers: headers, noRequestProcessor: true };
+            setRequestListeners(options, next, requestId);
+            workerRef.current.postMessage({
+                action: 'apiRequest',
+                id: requestId,
+                url: url,
+                method: method,
+                headers: headers,
+                data: data
+            });
+        }
+    });
+};
+export var setUpQooxdooResponseInterceptor = function (_a) {
+    var workerRef = _a.workerRef, setResponseListeners = _a.setResponseListeners;
+    return ({
+        processApiResponse: function (url, method, data, next) {
+            var responseId = nanoid();
+            setResponseListeners(next, responseId);
+            workerRef.current.postMessage({
+                action: 'apiResponse',
+                id: responseId,
+                url: url,
+                method: method,
+                data: data
+            });
+        }
+    });
+};
+export var setUpRequestInterceptor = function (_a) {
+    var apiPath = _a.apiPath, reltioPath = _a.reltioPath, tenant = _a.tenant, processApiRequest = _a.processApiRequest, workerRef = _a.workerRef, setRequestListeners = _a.setRequestListeners;
+    return function (_a) {
+        var _b = _a.options, options = _b === void 0 ? {} : _b, url = _a.url, next = _a.next;
+        var fakeURL = url.startsWith('/') && !url.startsWith(apiPath)
+            ? reltioPath + "/api/" + tenant + url
+            : "" + reltioPath + url.replace(apiPath, '');
+        var isProcessableUrl = isURLtoProcess(processApiRequest, fakeURL);
+        if (isProcessableUrl) {
+            var requestId = nanoid();
+            setRequestListeners(options, next, requestId);
+            workerRef.current.postMessage({
+                action: 'apiRequest',
+                id: requestId,
+                url: fakeURL,
+                method: options.method,
+                headers: __assign(__assign({}, options.headers), { origin: 'ui', requestId: requestId }),
+                data: options.body
+            });
+        }
+        else {
+            next(url, options);
+        }
+    };
+};
+export var setUpResponseInterceptor = function (_a) {
+    var reltioPath = _a.reltioPath, apiPath = _a.apiPath, processApiResponse = _a.processApiResponse, workerRef = _a.workerRef, setResponseListeners = _a.setResponseListeners;
+    return function (_a) {
+        var _b;
+        var url = _a.url, response = _a.response, next = _a.next, options = _a.options, abort = _a.abort;
+        if (((_b = options === null || options === void 0 ? void 0 : options.headers) === null || _b === void 0 ? void 0 : _b.origin) === 'ui') {
+            response
+                .json()
+                .then(function (data) {
+                var _a, _b;
+                setResponseListeners(next, options.headers.requestId);
+                workerRef.current.postMessage({
+                    action: 'response',
+                    result: { data: data, status: response.status },
+                    id: options === null || options === void 0 ? void 0 : options.id,
+                    name: (_b = (_a = options === null || options === void 0 ? void 0 : options.task) === null || _a === void 0 ? void 0 : _a.params) === null || _b === void 0 ? void 0 : _b.name
+                });
+            })
+                .catch(function (error) {
+                abort(error);
+            });
+        }
+        else {
+            var fakeURL_1 = "" + reltioPath + url.replace(apiPath, '');
+            var isProcessableUrl = isURLtoProcess(processApiResponse, fakeURL_1);
+            if (isProcessableUrl) {
+                var responseId_1 = nanoid();
+                response
+                    .json()
+                    .then(function (data) {
+                    setResponseListeners(next, responseId_1);
+                    workerRef.current.postMessage({
+                        action: 'apiResponse',
+                        id: responseId_1,
+                        url: fakeURL_1,
+                        method: options.method,
+                        data: data
+                    });
+                })
+                    .catch(function (error) {
+                    abort(error);
+                });
+            }
+            else {
+                next(response);
+            }
+        }
+    };
+};

package/esm/hooks/useAPI/useAPI.js

@@ -13,80 +13,48 @@ import { useCallback, useContext, useEffect, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import mdmModule, { ui } from '@reltio/mdm-module';
 import { CustomAction, CustomScriptPlatform, initializeWebWorker, isEmptyValue } from '@reltio/mdm-sdk';
+import { omit } from 'ramda';
 import { useWorkflowCheckPermission } from '../../components/workflow';
-import { SandboxAPIContext, SnackbarContext } from '../../contexts';
+import { InterceptHandlersContext, SandboxAPIContext, SnackbarContext } from '../../contexts';
 import { processRequest } from './API';
-import { getWorkerURL } from './helpers';
+import { getWorkerURL, resetHtml, isNewUI, setUpResponseInterceptor, setUpRequestInterceptor, setUpQooxdooRequestInterceptor, setUpQooxdooResponseInterceptor } from './helpers';
 export var useAPI = function (config) {
+    var _a, _b;
     if (config === void 0) { config = {}; }
-    var _a = useState(), html = _a[0], setHtml = _a[1];
-    var _b = useState([]), listenersToReset = _b[0], setListenersToReset = _b[1];
-    var _c = useState(true), visible = _c[0], setVisible = _c[1];
-    var _d = useState(null), tooltip = _d[0], setTooltip = _d[1];
-    var _e = useState(null), customStyles = _e[0], setCustomStyles = _e[1];
-    var showSnackbarMessage = useContext(SnackbarContext);
+    var _c = useState(), html = _c[0], setHtml = _c[1];
+    var _d = useState([]), listenersToReset = _d[0], setListenersToReset = _d[1];
+    var _e = useState(true), visible = _e[0], setVisible = _e[1];
+    var _f = useState(null), tooltip = _f[0], setTooltip = _f[1];
+    var _g = useState({}), customStyles = _g[0], setCustomStyles = _g[1];
+    var workerRef = useRef();
+    var requestListeners = useRef({});
+    var responseListeners = useRef({});
     var dispatch = useDispatch();
-    var metadata = useSelector(mdmModule.selectors.getMetadata) || {};
-    var entity = useSelector(mdmModule.selectors.getEntity) || {};
     var uiPath = useSelector(mdmModule.selectors.getUIPath);
     var tenant = useSelector(mdmModule.selectors.getTenant);
     var workerUrl = getWorkerURL(uiPath, tenant);
+    var showSnackbarMessage = useContext(SnackbarContext);
+    var qxApi = useContext(SandboxAPIContext);
+    var interceptHandlers = useContext(InterceptHandlersContext);
+    var workflowCheckPermission = useWorkflowCheckPermission();
+    var metadata = useSelector(mdmModule.selectors.getMetadata) || {};
+    var entity = useSelector(mdmModule.selectors.getEntity) || {};
+    var apiPath = useSelector(mdmModule.selectors.getApiPath);
+    var servicesPath = useSelector(mdmModule.selectors.getServicesPath);
     var reltioPath = useSelector(mdmModule.selectors.getReltioPath);
     var workflowPath = useSelector(mdmModule.selectors.getWorkflowPath);
     var user = useSelector(mdmModule.selectors.getUser);
-    var servicesPath = useSelector(mdmModule.selectors.getServicesPath);
     var entityUri = useSelector(mdmModule.selectors.getEntityUri);
     var environment = useSelector(mdmModule.selectors.getWorkflowEnvironmentUrl);
-    var qxApi = useContext(SandboxAPIContext);
-    var workflowCheckPermission = useWorkflowCheckPermission();
-    var _f = useSelector(mdmModule.selectors.getSearchProviderData) || {}, typeSearch = _f.type, search = _f.data;
+    var _h = useSelector(mdmModule.selectors.getSearchProviderData) || {}, typeSearch = _h.type, search = _h.data;
+    var isOldUI = !isNewUI(servicesPath);
+    var supportedInterceptHandlers = isOldUI ? qxApi.interceptors : interceptHandlers;
     var openSearch = function (search) { return dispatch(ui.actions.openSearch(search)); };
-    var workerRef = useRef();
+    var innerText = '';
     var process = function (_a) {
-        var task = _a.task, worker = _a.worker, innerText = _a.innerText;
+        var _b, _c;
+        var task = _a.task, worker = _a.worker;
         if (task) {
-            var handlersToReset_1 = [];
-            var processInnerHtml_1 = function (parent) {
-                var uiActions = parent.getAttribute('ui-actions');
-                var uiTooltip = parent.getAttribute('ui-tooltip');
-                var id = parent.getAttribute('id') || parent.getAttribute('name');
-                if (uiActions) {
-                    uiActions.split(',').forEach(function (uiAction) {
-                        var handler = function () {
-                            var data = {
-                                action: 'event',
-                                type: 'uiAction',
-                                data: {
-                                    type: uiAction,
-                                    id: id
-                                }
-                            };
-                            worker.postMessage(data);
-                        };
-                        parent.addEventListener(uiAction, handler);
-                        handlersToReset_1.push(function () {
-                            parent.removeEventListener(uiAction, handler);
-                        });
-                    });
-                    parent.removeAttribute('ui-actions');
-                }
-                if (uiTooltip) {
-                    setTooltip(uiTooltip);
-                }
-                parent.childNodes.forEach(function (child) {
-                    if (child.nodeType === 1) {
-                        //Node.ELEMENT_NODE
-                        processInnerHtml_1(child);
-                    }
-                });
-            };
-            var resetHtml = function (html) {
-                var docBlock = document.createElement('div');
-                docBlock.innerHTML = html || innerText;
-                processInnerHtml_1(docBlock);
-                setListenersToReset(handlersToReset_1);
-                setHtml(docBlock);
-            };
             switch (task.action) {
                 case CustomAction.SET_HTML: {
                     if (task.params.id) {
@@ -94,18 +62,22 @@ export var useAPI = function (config) {
                         elem.innerHTML = task.params.html;
                     }
                     else if (innerText !== task.params.html) {
-                        resetHtml(task.params.html);
+                        innerText = task.params.html;
+                        resetHtml({
+                            worker: worker,
+                            setTooltip: setTooltip,
+                            html: task.params.html,
+                            innerText: innerText,
+                            setListenersToReset: setListenersToReset,
+                            setHtml: setHtml
+                        });
                     }
                     break;
                 }
-                case CustomAction.LOG: {
-                    console.log(task.params); //eslint-disable-line no-console
-                    break;
-                }
                 case CustomAction.SET_VISIBILITY: {
                     if (task.params === 'visible') {
                         setVisible(true);
-                        resetHtml();
+                        resetHtml({ worker: worker, setTooltip: setTooltip, innerText: innerText, setListenersToReset: setListenersToReset, setHtml: setHtml });
                     }
                     else {
                         setVisible(false);
@@ -114,56 +86,99 @@ export var useAPI = function (config) {
                 }
                 case CustomAction.SET_TOOLTIP: {
                     setTooltip(task.params);
-                    resetHtml();
                     break;
                 }
                 case CustomAction.SET_HEIGHT: {
-                    setCustomStyles(function (prev) { return (__assign(__assign({}, (prev || {})), { height: task.params })); });
+                    setCustomStyles(function (prev) { return (__assign(__assign({}, prev), { height: task.params })); });
                     break;
                 }
                 case CustomAction.SET_WIDTH: {
-                    setCustomStyles(function (prev) { return (__assign(__assign({}, (prev || {})), { width: task.params })); });
+                    setCustomStyles(function (prev) { return (__assign(__assign({}, prev), { width: task.params })); });
                     break;
                 }
                 case CustomAction.SET_ENABLED: {
                     setCustomStyles(function (prev) {
-                        var newStyles = __assign({}, (prev || {}));
-                        if (!task.params) {
-                            newStyles['pointerEvents'] = 'none';
-                        }
-                        else {
-                            delete newStyles['pointerEvents'];
-                        }
-                        return newStyles;
+                        return task.params ? omit(['pointer-events'], prev) : __assign(__assign({}, prev), { 'pointer-events': 'none' });
                     });
                     break;
                 }
+                case CustomAction.LOG: {
+                    console.log(task.params); //eslint-disable-line no-console
+                    break;
+                }
                 case CustomAction.MESSAGE: {
                     showSnackbarMessage(task.params);
                     break;
                 }
                 case CustomAction.REQUEST: {
-                    processRequest(__assign({ name: task.params.name, paramObject: task, permissions: config.action.permissions, worker: worker,
-                        metadata: metadata, config: config, user: user,
-                        servicesPath: servicesPath, apiPath: reltioPath, tenant: tenant,
-                        workflowPath: workflowPath,
-                        entity: entity,
-                        entityUri: entityUri,
-                        environment: environment, query: typeSearch === 'search' ? search === null || search === void 0 ? void 0 : search.query : null, openSearch: openSearch,
-                        workflowCheckPermission: workflowCheckPermission }, qxApi));
+                    if (((_c = (_b = task.params) === null || _b === void 0 ? void 0 : _b.headers) === null || _c === void 0 ? void 0 : _c.origin) !== 'ui') {
+                        processRequest(__assign({ name: task.params.name, paramObject: task, permissions: config.action.permissions, worker: worker,
+                            metadata: metadata, config: config, user: user,
+                            servicesPath: servicesPath, apiPath: isOldUI ? apiPath : reltioPath, tenant: tenant,
+                            workflowPath: workflowPath,
+                            entity: entity,
+                            entityUri: entityUri,
+                            environment: environment, query: typeSearch === 'search' ? search === null || search === void 0 ? void 0 : search.query : null, openSearch: openSearch,
+                            workflowCheckPermission: workflowCheckPermission }, qxApi));
+                    }
+                    else {
+                        var _d = task.params, headers = _d.headers, id = _d.id, fakeURL = _d.url, method = _d.method, data = _d.data;
+                        var url = fakeURL.replace(reltioPath, apiPath);
+                        if (requestListeners.current[headers.requestId]) {
+                            requestListeners.current[headers.requestId].next(url, {
+                                body: data,
+                                id: id,
+                                task: task,
+                                headers: headers,
+                                method: method
+                            });
+                            requestListeners.current = omit([headers.requestId], requestListeners.current);
+                        }
+                    }
+                    break;
+                }
+                case CustomAction.RETURN_PROCESSED_API_RESPONSE:
+                case CustomAction.RETURN_PROCESSED_API_REQUEST: {
+                    var _e = task.params, id = _e.id, data = _e.data;
+                    if (responseListeners.current[id]) {
+                        responseListeners.current[id].next(data);
+                        responseListeners.current = omit([id], responseListeners.current);
+                    }
                     break;
                 }
             }
         }
     };
+    var setRequestListeners = function (options, next, requestId) {
+        var _a;
+        requestListeners.current = __assign(__assign({}, requestListeners.current), (_a = {}, _a[requestId] = { options: options, next: next, id: requestId }, _a));
+    };
+    var setResponseListeners = function (next, responseId) {
+        var _a;
+        responseListeners.current = __assign(__assign({}, responseListeners.current), (_a = {}, _a[responseId] = { next: next }, _a));
+    };
+    var qooxdooRequestInterceptor = setUpQooxdooRequestInterceptor({ workerRef: workerRef, setRequestListeners: setRequestListeners });
+    var qooxdooResponseInterceptor = setUpQooxdooResponseInterceptor({ workerRef: workerRef, setResponseListeners: setResponseListeners });
+    var requestInterceptor = setUpRequestInterceptor({
+        apiPath: apiPath,
+        reltioPath: reltioPath,
+        tenant: tenant,
+        processApiRequest: (_a = config === null || config === void 0 ? void 0 : config.action) === null || _a === void 0 ? void 0 : _a.processApiRequest,
+        workerRef: workerRef,
+        setRequestListeners: setRequestListeners
+    });
+    var responseInterceptor = setUpResponseInterceptor({
+        reltioPath: reltioPath,
+        apiPath: apiPath,
+        processApiResponse: (_b = config === null || config === void 0 ? void 0 : config.action) === null || _b === void 0 ? void 0 : _b.processApiResponse,
+        workerRef: workerRef,
+        setResponseListeners: setResponseListeners
+    });
     useEffect(function () {
         if (!isEmptyValue(config.action) && config.action.platform !== CustomScriptPlatform.CLASSIC) {
-            workerRef.current = initializeWebWorker(workerUrl, config.action.files, process);
-            return function () {
-                workerRef.current.terminate();
-            };
+            workerRef.current = initializeWebWorker(workerUrl, process, config);
         }
-    }, [config]);
+    }, [entity]);
     useEffect(function () { return function () {
         listenersToReset.forEach(function (listener) { return listener(); });
     }; }, [listenersToReset]);
@@ -175,5 +190,28 @@ export var useAPI = function (config) {
             data: null
         });
     }, [config]);
+    useEffect(function () {
+        var _a, _b, _c, _d;
+        if (!isEmptyValue(supportedInterceptHandlers) &&
+            (((_a = config === null || config === void 0 ? void 0 : config.action) === null || _a === void 0 ? void 0 : _a.processApiRequest) || ((_b = config === null || config === void 0 ? void 0 : config.action) === null || _b === void 0 ? void 0 : _b.processApiResponse))) {
+            var addInternalRequestInterceptor = supportedInterceptHandlers.addInternalRequestInterceptor, addInternalResponseInterceptor = supportedInterceptHandlers.addInternalResponseInterceptor, removeInternalRequestInterceptor_1 = supportedInterceptHandlers.removeInternalRequestInterceptor, removeInternalResponseInterceptor_1 = supportedInterceptHandlers.removeInternalResponseInterceptor;
+            if (isOldUI) {
+                addInternalRequestInterceptor((_c = config === null || config === void 0 ? void 0 : config.action) === null || _c === void 0 ? void 0 : _c.processApiRequest, qooxdooRequestInterceptor);
+                addInternalResponseInterceptor((_d = config === null || config === void 0 ? void 0 : config.action) === null || _d === void 0 ? void 0 : _d.processApiResponse, qooxdooResponseInterceptor);
+                return function () {
+                    removeInternalRequestInterceptor_1(qooxdooRequestInterceptor);
+                    removeInternalResponseInterceptor_1(qooxdooResponseInterceptor);
+                };
+            }
+            else {
+                addInternalRequestInterceptor(requestInterceptor);
+                addInternalResponseInterceptor(responseInterceptor);
+                return function () {
+                    removeInternalRequestInterceptor_1(requestInterceptor);
+                    removeInternalResponseInterceptor_1(responseInterceptor);
+                };
+            }
+        }
+    }, [config]);
     return { html: html, visible: visible, tooltip: tooltip, customStyles: customStyles, onClick: onClick };
 };