@reltio/components 1.4.1102 → 1.4.1105

package/esm/hooks/useAPI/useAPI.js

@@ -0,0 +1,169 @@
+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 { useContext, useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import mdmModule, { ui } from '@reltio/mdm-module';
+import { initializeWebWorker } from '@reltio/mdm-sdk';
+import { useWorkflowCheckPermission } from '../../components/workflow';
+import { SandboxAPIContext } from '../../contexts';
+import { processRequest } from './API';
+import { getWorkerURL } from './helpers';
+import { CustomAction } from './types';
+export var useAPI = function (config) {
+    var _a = config.action, files = _a.files, permissions = _a.permissions;
+    var _b = useState(), html = _b[0], setHtml = _b[1];
+    var _c = useState([]), listenersToReset = _c[0], setListenersToReset = _c[1];
+    var _d = useState(true), visible = _d[0], setVisible = _d[1];
+    var _e = useState(null), tooltip = _e[0], setTooltip = _e[1];
+    var _f = useState(null), customStyles = _f[0], setCustomStyles = _f[1];
+    var _g = useState(''), message = _g[0], setMessage = _g[1];
+    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 apiPath = useSelector(mdmModule.selectors.getApiPath);
+    var workflowPath = useSelector(mdmModule.selectors.getWorkflowPath);
+    var user = useSelector(mdmModule.selectors.getUser);
+    var entityUri = useSelector(mdmModule.selectors.getEntityUri);
+    var environment = useSelector(mdmModule.selectors.getWorkflowEnvironmentUrl);
+    var qxApi = useContext(SandboxAPIContext);
+    var workflowCheckPermission = useWorkflowCheckPermission();
+    var _h = useSelector(mdmModule.selectors.getSearchProviderData) || {}, typeSearch = _h.type, search = _h.data;
+    var openSearch = function (search) { return dispatch(ui.actions.openSearch(search)); };
+    var process = function (task, worker, innerText) {
+        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);
+            };
+            if (task.action === CustomAction.SET_HTML && innerText !== task.params.html) {
+                resetHtml(task.params.html);
+            }
+            switch (task.action) {
+                case CustomAction.LOG: {
+                    console.log(task.params); //eslint-disable-line no-console
+                    break;
+                }
+                case CustomAction.SET_VISIBILITY: {
+                    if (task.params === 'visible') {
+                        setVisible(true);
+                        resetHtml();
+                    }
+                    else {
+                        setVisible(false);
+                    }
+                    break;
+                }
+                case CustomAction.SET_TOOLTIP: {
+                    setTooltip(task.params);
+                    resetHtml();
+                    break;
+                }
+                case CustomAction.SET_HEIGHT: {
+                    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 })); });
+                    break;
+                }
+                case CustomAction.SET_ENABLED: {
+                    setCustomStyles(function (prev) {
+                        var newStyles = __assign({}, (prev || {}));
+                        if (!task.params) {
+                            newStyles['pointer-events'] = 'none';
+                        }
+                        else {
+                            delete newStyles['pointer-events'];
+                        }
+                        return newStyles;
+                    });
+                    break;
+                }
+                case CustomAction.MESSAGE: {
+                    setMessage(task.params);
+                    break;
+                }
+                case CustomAction.REQUEST: {
+                    processRequest(__assign({ name: task.params.name, paramObject: task, permissions: permissions,
+                        worker: worker,
+                        metadata: metadata, config: config, user: user,
+                        apiPath: apiPath,
+                        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));
+                    break;
+                }
+            }
+        }
+    };
+    useEffect(function () {
+        var worker = initializeWebWorker(workerUrl, files, process);
+        return function () {
+            worker.terminate();
+        };
+    }, []);
+    useEffect(function () { return function () {
+        listenersToReset.forEach(function (listener) { return listener(); });
+    }; }, [listenersToReset]);
+    return {
+        html: html,
+        visible: visible,
+        tooltip: tooltip,
+        customStyles: customStyles,
+        message: message,
+        onClosePopup: function () { return setMessage(''); }
+    };
+};

package/esm/hooks/useCustomScripts.d.ts

@@ -0,0 +1,9 @@
+import { createRequestProvider, CustomScript } from '@reltio/mdm-sdk';
+declare type InterceptHandlers = {
+    addInternalRequestInterceptor: ReturnType<typeof createRequestProvider>['addRequestInterceptor'];
+    addInternalResponseInterceptor: ReturnType<typeof createRequestProvider>['addResponseInterceptor'];
+    removeInternalRequestInterceptor: ReturnType<typeof createRequestProvider>['removeRequestInterceptor'];
+    removeInternalResponseInterceptor: ReturnType<typeof createRequestProvider>['removeResponseInterceptor'];
+};
+export declare const useCustomScripts: (config: CustomScript[], { addInternalRequestInterceptor, addInternalResponseInterceptor, removeInternalRequestInterceptor, removeInternalResponseInterceptor }: InterceptHandlers) => void;
+export {};

package/esm/hooks/useCustomScripts.js

@@ -0,0 +1,189 @@
+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 { useContext, useEffect, useRef } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import mdmModule, { ui } from '@reltio/mdm-module';
+import { initializeWebWorker, isEmptyValue } from '@reltio/mdm-sdk';
+import nanoid from 'nanoid';
+import { find, map, pick, pipe, prop, omit } from 'ramda';
+import { useWorkflowCheckPermission } from '../components/workflow';
+import { SandboxAPIContext } from '../contexts';
+import { CustomAction, getWorkerURL, processRequest } from './useAPI';
+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 useCustomScripts = function (config, _a) {
+    var addInternalRequestInterceptor = _a.addInternalRequestInterceptor, addInternalResponseInterceptor = _a.addInternalResponseInterceptor, removeInternalRequestInterceptor = _a.removeInternalRequestInterceptor, removeInternalResponseInterceptor = _a.removeInternalResponseInterceptor;
+    var customScripts = config.map(function (customScript) { return (__assign(__assign({}, customScript), { actionId: nanoid() })); });
+    var dispatch = useDispatch();
+    var metadata = useSelector(mdmModule.selectors.getMetadata) || {};
+    var entity = useSelector(mdmModule.selectors.getEntity) || {};
+    var uiPath = useSelector(mdmModule.selectors.getUIPath);
+    var reltioPath = useSelector(mdmModule.selectors.getReltioPath);
+    var tenant = useSelector(mdmModule.selectors.getTenant);
+    var workerUrl = getWorkerURL(uiPath, tenant);
+    var apiPath = useSelector(mdmModule.selectors.getApiPath);
+    var workflowPath = useSelector(mdmModule.selectors.getWorkflowPath);
+    var user = useSelector(mdmModule.selectors.getUser);
+    var entityUri = useSelector(mdmModule.selectors.getEntityUri);
+    var environment = useSelector(mdmModule.selectors.getWorkflowEnvironmentUrl);
+    var qxApi = useContext(SandboxAPIContext);
+    var workflowCheckPermission = useWorkflowCheckPermission();
+    var _b = useSelector(mdmModule.selectors.getSearchProviderData) || {}, typeSearch = _b.type, search = _b.data;
+    var openSearch = function (search) { return dispatch(ui.actions.openSearch(search)); };
+    var requestListeners = useRef({});
+    var responseListeners = useRef({});
+    var workers = useRef({});
+    var process = function (task, worker) {
+        var _a, _b;
+        if (task) {
+            switch (task.action) {
+                case CustomAction.REQUEST: {
+                    if (((_b = (_a = task.params) === null || _a === void 0 ? void 0 : _a.headers) === null || _b === void 0 ? void 0 : _b.origin) !== 'ui') {
+                        processRequest(__assign({ name: task.params.name, paramObject: task, permissions: customScripts[0].permissions, worker: worker,
+                            metadata: metadata, config: { action: customScripts[0] }, user: user,
+                            apiPath: apiPath,
+                            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 _c = task.params, headers = _c.headers, id = _c.id, fakeURL = _c.url, method = _c.method, data = _c.data;
+                        var url = fakeURL.replace(reltioPath, apiPath);
+                        if (requestListeners.current[headers.requestId]) {
+                            requestListeners.current[headers.requestId].next(url, __assign(__assign({}, 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 _d = task.params, id = _d.id, data = _d.data;
+                    if (responseListeners.current[id]) {
+                        responseListeners.current[id].next(data);
+                        responseListeners.current = omit([id], responseListeners.current);
+                    }
+                    break;
+                }
+            }
+        }
+    };
+    useEffect(function () {
+        workers.current = customScripts.reduce(function (acc, customScript) {
+            var _a;
+            acc = __assign(__assign({}, acc), (_a = {}, _a[customScript.actionId] = initializeWebWorker(workerUrl, customScript.files, process), _a));
+            return acc;
+        }, workers.current);
+        return function () {
+            Object.keys(workers.current).forEach(function (actionId) {
+                workers.current[actionId].terminate();
+            });
+        };
+    }, [config]);
+    var customScriptRequestInterceptor = function (_a) {
+        var _b;
+        var _c = _a.options, options = _c === void 0 ? {} : _c, url = _a.url, next = _a.next;
+        var fakeURL = url.startsWith('/') && !url.startsWith(apiPath)
+            ? reltioPath + "/api/" + tenant + url
+            : "" + reltioPath + url.replace(apiPath, '');
+        var actionId = pipe(map(pick(['actionId', 'processApiRequest'])), find(function (_a) {
+            var processApiRequest = _a.processApiRequest;
+            return isURLtoProcess(processApiRequest, fakeURL);
+        }), prop('actionId'))(customScripts);
+        if (actionId) {
+            var requestId = nanoid();
+            requestListeners.current = __assign(__assign({}, requestListeners.current), (_b = {}, _b[requestId] = { options: options, next: next, id: requestId }, _b));
+            workers.current[actionId].postMessage({
+                action: 'apiRequest',
+                id: requestId,
+                url: fakeURL,
+                method: options.method,
+                headers: __assign(__assign({}, options.headers), { origin: 'ui', requestId: requestId, actionId: actionId }),
+                data: options
+            });
+        }
+        else {
+            next(url, options);
+        }
+    };
+    var customScriptResponseInterceptor = 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;
+                var _b, _c, _d;
+                responseListeners.current = __assign(__assign({}, responseListeners.current), (_a = {}, _a[options.headers.requestId] = { next: next }, _a));
+                workers.current[(_b = options.headers) === null || _b === void 0 ? void 0 : _b.actionId].postMessage({
+                    action: 'response',
+                    result: { data: data },
+                    id: options === null || options === void 0 ? void 0 : options.id,
+                    name: (_d = (_c = options === null || options === void 0 ? void 0 : options.task) === null || _c === void 0 ? void 0 : _c.params) === null || _d === void 0 ? void 0 : _d.name
+                });
+            })
+                .catch(function (error) {
+                abort(error);
+            });
+        }
+        else {
+            var fakeURL_1 = "" + reltioPath + url.replace(apiPath, '');
+            var actionId_1 = pipe(map(pick(['actionId', 'processApiResponse'])), find(function (_a) {
+                var processApiResponse = _a.processApiResponse;
+                return isURLtoProcess(processApiResponse, fakeURL_1);
+            }), prop('actionId'))(customScripts);
+            if (actionId_1) {
+                var responseId_1 = nanoid();
+                response
+                    .json()
+                    .then(function (data) {
+                    var _a;
+                    responseListeners.current = __assign(__assign({}, responseListeners.current), (_a = {}, _a[responseId_1] = { next: next }, _a));
+                    workers.current[actionId_1].postMessage({
+                        action: 'apiResponse',
+                        id: responseId_1,
+                        url: fakeURL_1,
+                        method: options.method,
+                        data: data
+                    });
+                })
+                    .catch(function (error) {
+                    abort(error);
+                });
+            }
+            else {
+                next(response);
+            }
+        }
+    };
+    useEffect(function () {
+        if (!isEmptyValue(config)) {
+            addInternalRequestInterceptor(customScriptRequestInterceptor);
+            addInternalResponseInterceptor(customScriptResponseInterceptor);
+            return function () {
+                removeInternalRequestInterceptor(customScriptRequestInterceptor);
+                removeInternalResponseInterceptor(customScriptResponseInterceptor);
+            };
+        }
+    }, [config]);
+};

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.1102",
+  "version": "1.4.1105",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "./cjs/index.js",
   "module": "./esm/index.js",
   "dependencies": {
     "@date-io/moment": "^1.3.5",
     "@react-google-maps/api": "2.7.0",
-    "@reltio/mdm-module": "^1.4.1102",
-    "@reltio/mdm-sdk": "^1.4.1102",
+    "@reltio/mdm-module": "^1.4.1105",
+    "@reltio/mdm-sdk": "^1.4.1105",
     "classnames": "^2.2.5",
     "d3-cloud": "^1.2.5",
     "d3-geo": "^2.0.1",