@reltio/components 1.4.2016 → 1.4.2018

package/SimpleAttribute/IntegrationSimpleAttribute.test.js

@@ -63,21 +63,25 @@ describe('masking/unmasking behaviour', function () {
     });
     var defaultAttributeType = { type: 'String', name: 'Name', uri: 'URI', masking: { regexPattern: '.*' } };
     var defaultAttributeValue = { value: 'Masked value', uri: 'entities/16U21B8f/attributes/Name/2sAfjGOIh' };
-    var setUp = function (isMaskingNeeded) {
-        if (isMaskingNeeded === void 0) { isMaskingNeeded = true; }
-        var attributeType = isMaskingNeeded ? defaultAttributeType : dissoc('masking', defaultAttributeType);
+    var defaultProps = {
+        attributeType: defaultAttributeType,
+        attributeValue: defaultAttributeValue
+    };
+    var setUp = function (props) {
+        if (props === void 0) { props = defaultProps; }
         var Providers = function (_a) {
             var children = _a.children;
             return (React.createElement(MdmModuleProvider, { values: { mode: Mode.Viewing } },
                 React.createElement(MaskedAttributesProvider, null, children)));
         };
         var user = userEvent.setup();
-        return __assign({ user: user }, render(React.createElement(SimpleAttribute, { attributeType: attributeType, attributeValue: defaultAttributeValue }), {
+        return __assign({ user: user }, render(React.createElement(SimpleAttribute, __assign({}, props)), {
             wrapper: Providers
         }));
     };
     it('should not render MaskingSwitcher if attribute should not be masked', function () {
-        var container = setUp(false).container;
+        var attributeType = dissoc('masking', defaultAttributeType);
+        var container = setUp(__assign(__assign({}, defaultProps), { attributeType: attributeType })).container;
         expect(container.querySelector('.switcherWrapper')).not.toBeInTheDocument();
     });
     it('should render MaskingSwitcher if attribute should be masked', function () {
@@ -168,4 +172,16 @@ describe('masking/unmasking behaviour', function () {
             }
         });
     }); });
+    it('should not format date attribute if it is masked', function () {
+        var attributeType = { type: 'Date', name: 'lastUpdateTime', uri: 'URI', masking: { regexPattern: '.*' } };
+        var attributeValue = { value: '******0-16', uri: 'entities/16U21B8f/attributes/lastUpdateTime/1qWvQglW' };
+        setUp({ attributeType: attributeType, attributeValue: attributeValue });
+        expect(screen.getByText('******0-16')).toBeInTheDocument();
+    });
+    it('should not format timestamp attribute if it is masked', function () {
+        var attributeType = { type: 'Timestamp', name: 'Timestamp', uri: 'URI', masking: { regexPattern: '.*' } };
+        var attributeValue = { value: '**********0000', uri: 'entities/16U21B8f/attributes/Timestamp/1qWvQglW' };
+        setUp({ attributeType: attributeType, attributeValue: attributeValue });
+        expect(screen.getByText('**********0000')).toBeInTheDocument();
+    });
 });

package/cjs/SimpleAttribute/IntegrationSimpleAttribute.test.js

@@ -68,21 +68,25 @@ describe('masking/unmasking behaviour', function () {
     });
     var defaultAttributeType = { type: 'String', name: 'Name', uri: 'URI', masking: { regexPattern: '.*' } };
     var defaultAttributeValue = { value: 'Masked value', uri: 'entities/16U21B8f/attributes/Name/2sAfjGOIh' };
-    var setUp = function (isMaskingNeeded) {
-        if (isMaskingNeeded === void 0) { isMaskingNeeded = true; }
-        var attributeType = isMaskingNeeded ? defaultAttributeType : (0, ramda_1.dissoc)('masking', defaultAttributeType);
+    var defaultProps = {
+        attributeType: defaultAttributeType,
+        attributeValue: defaultAttributeValue
+    };
+    var setUp = function (props) {
+        if (props === void 0) { props = defaultProps; }
         var Providers = function (_a) {
             var children = _a.children;
             return (react_1.default.createElement(MdmModuleContext_1.MdmModuleProvider, { values: { mode: mdm_sdk_1.Mode.Viewing } },
                 react_1.default.createElement(MaskedAttributesContext_1.MaskedAttributesProvider, null, children)));
         };
         var user = user_event_1.default.setup();
-        return __assign({ user: user }, (0, react_2.render)(react_1.default.createElement(SimpleAttribute_1.SimpleAttribute, { attributeType: attributeType, attributeValue: defaultAttributeValue }), {
+        return __assign({ user: user }, (0, react_2.render)(react_1.default.createElement(SimpleAttribute_1.SimpleAttribute, __assign({}, props)), {
             wrapper: Providers
         }));
     };
     it('should not render MaskingSwitcher if attribute should not be masked', function () {
-        var container = setUp(false).container;
+        var attributeType = (0, ramda_1.dissoc)('masking', defaultAttributeType);
+        var container = setUp(__assign(__assign({}, defaultProps), { attributeType: attributeType })).container;
         expect(container.querySelector('.switcherWrapper')).not.toBeInTheDocument();
     });
     it('should render MaskingSwitcher if attribute should be masked', function () {
@@ -173,4 +177,16 @@ describe('masking/unmasking behaviour', function () {
             }
         });
     }); });
+    it('should not format date attribute if it is masked', function () {
+        var attributeType = { type: 'Date', name: 'lastUpdateTime', uri: 'URI', masking: { regexPattern: '.*' } };
+        var attributeValue = { value: '******0-16', uri: 'entities/16U21B8f/attributes/lastUpdateTime/1qWvQglW' };
+        setUp({ attributeType: attributeType, attributeValue: attributeValue });
+        expect(react_2.screen.getByText('******0-16')).toBeInTheDocument();
+    });
+    it('should not format timestamp attribute if it is masked', function () {
+        var attributeType = { type: 'Timestamp', name: 'Timestamp', uri: 'URI', masking: { regexPattern: '.*' } };
+        var attributeValue = { value: '**********0000', uri: 'entities/16U21B8f/attributes/Timestamp/1qWvQglW' };
+        setUp({ attributeType: attributeType, attributeValue: attributeValue });
+        expect(react_2.screen.getByText('**********0000')).toBeInTheDocument();
+    });
 });

package/cjs/features/workflow/AssigneeSelector/AssigneeSelector.spec.js

@@ -272,4 +272,84 @@ describe('AssigneeSelector tests', function () {
             }
         });
     }); });
+    it('should make a single request on load, show loading state, and not re-fetch if assignees are already loaded', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user, input;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp().user;
+                    return [4 /*yield*/, react_2.screen.findByText('Assigned to')];
+                case 1:
+                    _a.sent();
+                    expect(mdm_sdk_1.getAssigneeForTask).toHaveBeenCalledTimes(1);
+                    input = react_2.screen.getByRole('combobox');
+                    return [4 /*yield*/, user.click(input)];
+                case 2:
+                    _a.sent();
+                    expect(react_2.screen.getByText('Loading...')).toBeInTheDocument();
+                    (0, react_2.act)(function () {
+                        resolveAssigneeForTask(response);
+                    });
+                    return [4 /*yield*/, (0, react_2.waitForElementToBeRemoved)(react_2.screen.queryByText('Loading...'))];
+                case 3:
+                    _a.sent();
+                    return [4 /*yield*/, react_2.screen.findByText('user1')];
+                case 4:
+                    _a.sent();
+                    return [4 /*yield*/, react_2.screen.findByText('user2')];
+                case 5:
+                    _a.sent();
+                    return [4 /*yield*/, react_2.screen.findByText('firstUser')];
+                case 6:
+                    _a.sent();
+                    return [4 /*yield*/, user.type(input, 'user')];
+                case 7:
+                    _a.sent();
+                    expect(mdm_sdk_1.getAssigneeForTask).toHaveBeenCalledTimes(1);
+                    return [4 /*yield*/, user.clear(input)];
+                case 8:
+                    _a.sent();
+                    return [4 /*yield*/, user.type(input, 'first')];
+                case 9:
+                    _a.sent();
+                    expect(mdm_sdk_1.getAssigneeForTask).toHaveBeenCalledTimes(1);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should correctly filter options based on user input', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user, input;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp().user;
+                    return [4 /*yield*/, react_2.screen.findByText('Assigned to')];
+                case 1:
+                    _a.sent();
+                    input = react_2.screen.getByRole('combobox');
+                    return [4 /*yield*/, user.click(input)];
+                case 2:
+                    _a.sent();
+                    (0, react_2.act)(function () {
+                        resolveAssigneeForTask(response);
+                    });
+                    return [4 /*yield*/, react_2.screen.findByText('user2')];
+                case 3:
+                    _a.sent();
+                    return [4 /*yield*/, user.type(input, 'user2')];
+                case 4:
+                    _a.sent();
+                    expect(react_2.screen.getByText('user2')).toBeInTheDocument();
+                    expect(react_2.screen.queryByText('user1')).not.toBeInTheDocument();
+                    expect(react_2.screen.queryByText('firstUser')).not.toBeInTheDocument();
+                    return [4 /*yield*/, user.clear(input)];
+                case 5:
+                    _a.sent();
+                    expect(react_2.screen.getByText('user1')).toBeInTheDocument();
+                    expect(react_2.screen.getByText('user2')).toBeInTheDocument();
+                    expect(react_2.screen.getByText('firstUser')).toBeInTheDocument();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
 });

package/cjs/features/workflow/hooks/useWorkflowAssignee.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useWorkflowAssignee = void 0;
 var react_1 = require("react");
-var ramda_1 = require("ramda");
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var useSafePromise_1 = require("../../../hooks/useSafePromise");
 var WorkflowTasksContext_1 = require("../../../contexts/WorkflowTasksContext");
@@ -14,6 +13,9 @@ var assigneeToValue = function (assignee) { return ({
     label: assignee,
     value: assignee
 }); };
+var filterAssignees = function (assignees, text) {
+    return assignees.filter(function (item) { return item.value.toLowerCase().includes(text === null || text === void 0 ? void 0 : text.toLowerCase()); });
+};
 var useWorkflowAssignee = function (_a) {
     var assignee = _a.assignee, _b = _a.showCurrentAssignee, showCurrentAssignee = _b === void 0 ? true : _b, taskId = _a.taskId, isOpen = _a.isOpen, onChange = _a.onChange;
     var updateTaskState = ((0, react_1.useContext)(WorkflowTasksContext_1.WorkflowTasksContext) || {}).updateTaskState;
@@ -21,56 +23,42 @@ var useWorkflowAssignee = function (_a) {
     var environment = (0, MdmModuleContext_1.useMdmWorkflowEnvironmentUrl)();
     var tenant = (0, MdmModuleContext_1.useMdmTenant)();
     var updateSafePromise = (0, useSafePromise_1.useSafePromise)();
-    var getSafePromise = (0, useSafePromise_1.useSafePromise)();
     var _c = (0, react_1.useState)(null), currentAssignee = _c[0], setCurrentAssignee = _c[1];
-    var _d = (0, react_1.useState)(), assignees = _d[0], setAssignees = _d[1];
-    var _e = (0, react_1.useState)(false), updateRequestIsInProgress = _e[0], setUpdateRequestIsInProgress = _e[1];
+    var _d = (0, react_1.useState)(false), updateRequestIsInProgress = _d[0], setUpdateRequestIsInProgress = _d[1];
     var checkWorkflowPermission = (0, useWorkflowCheckPermission_1.useWorkflowCheckPermission)();
     var canUpdateTask = checkWorkflowPermission('UPDATE_TASK') && (0, common_1.isOpenTask)(isOpen);
+    var assigneesRequestRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(function () {
         if (showCurrentAssignee)
             setCurrentAssignee(assigneeToValue(assignee));
-    }, [assignee]);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [assignee]);
     var getAssignees = (0, react_1.useCallback)(function (text) {
         if (workflowPath && canUpdateTask && taskId) {
-            var filterOutRest_1 = (0, ramda_1.filter)(function (item) {
-                return item.value.toLowerCase().includes(text === null || text === void 0 ? void 0 : text.toLowerCase());
-            });
-            if (assignees) {
-                return Promise.resolve(filterOutRest_1(assignees));
+            if (!assigneesRequestRef.current) {
+                assigneesRequestRef.current = (0, mdm_sdk_1.getAssigneeForTask)({
+                    taskId: taskId,
+                    workflowPath: workflowPath,
+                    environment: environment,
+                    tenant: tenant
+                });
             }
-            return getSafePromise((0, mdm_sdk_1.getAssigneeForTask)({
-                taskId: taskId,
-                workflowPath: workflowPath,
-                environment: environment,
-                tenant: tenant
-            }))
+            return assigneesRequestRef.current
                 .then(function (result) {
                 var data = result.data;
-                var assignees = data
+                var fetchedAssignees = data
                     .filter(function (a) { return (showCurrentAssignee ? true : a !== assignee); })
-                    .sort(function (a, b) {
-                    return mdm_sdk_1.utils.strings.sort('asc', a, b);
-                })
+                    .sort(function (a, b) { return mdm_sdk_1.utils.strings.sort('asc', a, b); })
                     .map(assigneeToValue);
-                setAssignees(assignees);
-                return filterOutRest_1(assignees);
+                return filterAssignees(fetchedAssignees, text);
             })
-                .catch(errors_1.showWorkflowError);
+                .catch(function (e) {
+                (0, errors_1.showWorkflowError)(e);
+                assigneesRequestRef.current = null;
+            });
         }
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [
-        workflowPath,
-        taskId,
-        environment,
-        tenant,
-        assignees,
-        setAssignees,
-        canUpdateTask,
-        assignee,
-        showCurrentAssignee
-    ]);
+    }, [workflowPath, taskId, environment, tenant, canUpdateTask, assignee, showCurrentAssignee]);
     var updateAssignee = (0, react_1.useCallback)(function (newValue) {
         var assignee = newValue.value;
         if (onChange) {

package/features/workflow/AssigneeSelector/AssigneeSelector.spec.js

@@ -46,7 +46,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 import React from 'react';
-import { render, screen, act } from '@testing-library/react';
+import { render, screen, act, waitForElementToBeRemoved } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { getAssigneeForTask, updateAssigneeForTask } from '@reltio/mdm-sdk';
 import { MdmModuleProvider } from '../../../contexts/MdmModuleContext';
@@ -267,4 +267,84 @@ describe('AssigneeSelector tests', function () {
             }
         });
     }); });
+    it('should make a single request on load, show loading state, and not re-fetch if assignees are already loaded', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user, input;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp().user;
+                    return [4 /*yield*/, screen.findByText('Assigned to')];
+                case 1:
+                    _a.sent();
+                    expect(getAssigneeForTask).toHaveBeenCalledTimes(1);
+                    input = screen.getByRole('combobox');
+                    return [4 /*yield*/, user.click(input)];
+                case 2:
+                    _a.sent();
+                    expect(screen.getByText('Loading...')).toBeInTheDocument();
+                    act(function () {
+                        resolveAssigneeForTask(response);
+                    });
+                    return [4 /*yield*/, waitForElementToBeRemoved(screen.queryByText('Loading...'))];
+                case 3:
+                    _a.sent();
+                    return [4 /*yield*/, screen.findByText('user1')];
+                case 4:
+                    _a.sent();
+                    return [4 /*yield*/, screen.findByText('user2')];
+                case 5:
+                    _a.sent();
+                    return [4 /*yield*/, screen.findByText('firstUser')];
+                case 6:
+                    _a.sent();
+                    return [4 /*yield*/, user.type(input, 'user')];
+                case 7:
+                    _a.sent();
+                    expect(getAssigneeForTask).toHaveBeenCalledTimes(1);
+                    return [4 /*yield*/, user.clear(input)];
+                case 8:
+                    _a.sent();
+                    return [4 /*yield*/, user.type(input, 'first')];
+                case 9:
+                    _a.sent();
+                    expect(getAssigneeForTask).toHaveBeenCalledTimes(1);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should correctly filter options based on user input', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user, input;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp().user;
+                    return [4 /*yield*/, screen.findByText('Assigned to')];
+                case 1:
+                    _a.sent();
+                    input = screen.getByRole('combobox');
+                    return [4 /*yield*/, user.click(input)];
+                case 2:
+                    _a.sent();
+                    act(function () {
+                        resolveAssigneeForTask(response);
+                    });
+                    return [4 /*yield*/, screen.findByText('user2')];
+                case 3:
+                    _a.sent();
+                    return [4 /*yield*/, user.type(input, 'user2')];
+                case 4:
+                    _a.sent();
+                    expect(screen.getByText('user2')).toBeInTheDocument();
+                    expect(screen.queryByText('user1')).not.toBeInTheDocument();
+                    expect(screen.queryByText('firstUser')).not.toBeInTheDocument();
+                    return [4 /*yield*/, user.clear(input)];
+                case 5:
+                    _a.sent();
+                    expect(screen.getByText('user1')).toBeInTheDocument();
+                    expect(screen.getByText('user2')).toBeInTheDocument();
+                    expect(screen.getByText('firstUser')).toBeInTheDocument();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
 });

package/features/workflow/hooks/useWorkflowAssignee.js

@@ -1,5 +1,4 @@
-import { useState, useEffect, useCallback, useContext } from 'react';
-import { filter } from 'ramda';
+import { useState, useEffect, useCallback, useContext, useRef } from 'react';
 import { getAssigneeForTask, updateAssigneeForTask, utils } from '@reltio/mdm-sdk';
 import { useSafePromise } from '../../../hooks/useSafePromise';
 import { WorkflowTasksContext } from '../../../contexts/WorkflowTasksContext';
@@ -11,6 +10,9 @@ var assigneeToValue = function (assignee) { return ({
     label: assignee,
     value: assignee
 }); };
+var filterAssignees = function (assignees, text) {
+    return assignees.filter(function (item) { return item.value.toLowerCase().includes(text === null || text === void 0 ? void 0 : text.toLowerCase()); });
+};
 export var useWorkflowAssignee = function (_a) {
     var assignee = _a.assignee, _b = _a.showCurrentAssignee, showCurrentAssignee = _b === void 0 ? true : _b, taskId = _a.taskId, isOpen = _a.isOpen, onChange = _a.onChange;
     var updateTaskState = (useContext(WorkflowTasksContext) || {}).updateTaskState;
@@ -18,56 +20,42 @@ export var useWorkflowAssignee = function (_a) {
     var environment = useMdmWorkflowEnvironmentUrl();
     var tenant = useMdmTenant();
     var updateSafePromise = useSafePromise();
-    var getSafePromise = useSafePromise();
     var _c = useState(null), currentAssignee = _c[0], setCurrentAssignee = _c[1];
-    var _d = useState(), assignees = _d[0], setAssignees = _d[1];
-    var _e = useState(false), updateRequestIsInProgress = _e[0], setUpdateRequestIsInProgress = _e[1];
+    var _d = useState(false), updateRequestIsInProgress = _d[0], setUpdateRequestIsInProgress = _d[1];
     var checkWorkflowPermission = useWorkflowCheckPermission();
     var canUpdateTask = checkWorkflowPermission('UPDATE_TASK') && isOpenTask(isOpen);
+    var assigneesRequestRef = useRef(null);
     useEffect(function () {
         if (showCurrentAssignee)
             setCurrentAssignee(assigneeToValue(assignee));
-    }, [assignee]);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [assignee]);
     var getAssignees = useCallback(function (text) {
         if (workflowPath && canUpdateTask && taskId) {
-            var filterOutRest_1 = filter(function (item) {
-                return item.value.toLowerCase().includes(text === null || text === void 0 ? void 0 : text.toLowerCase());
-            });
-            if (assignees) {
-                return Promise.resolve(filterOutRest_1(assignees));
+            if (!assigneesRequestRef.current) {
+                assigneesRequestRef.current = getAssigneeForTask({
+                    taskId: taskId,
+                    workflowPath: workflowPath,
+                    environment: environment,
+                    tenant: tenant
+                });
             }
-            return getSafePromise(getAssigneeForTask({
-                taskId: taskId,
-                workflowPath: workflowPath,
-                environment: environment,
-                tenant: tenant
-            }))
+            return assigneesRequestRef.current
                 .then(function (result) {
                 var data = result.data;
-                var assignees = data
+                var fetchedAssignees = data
                     .filter(function (a) { return (showCurrentAssignee ? true : a !== assignee); })
-                    .sort(function (a, b) {
-                    return utils.strings.sort('asc', a, b);
-                })
+                    .sort(function (a, b) { return utils.strings.sort('asc', a, b); })
                     .map(assigneeToValue);
-                setAssignees(assignees);
-                return filterOutRest_1(assignees);
+                return filterAssignees(fetchedAssignees, text);
             })
-                .catch(showWorkflowError);
+                .catch(function (e) {
+                showWorkflowError(e);
+                assigneesRequestRef.current = null;
+            });
         }
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [
-        workflowPath,
-        taskId,
-        environment,
-        tenant,
-        assignees,
-        setAssignees,
-        canUpdateTask,
-        assignee,
-        showCurrentAssignee
-    ]);
+    }, [workflowPath, taskId, environment, tenant, canUpdateTask, assignee, showCurrentAssignee]);
     var updateAssignee = useCallback(function (newValue) {
         var assignee = newValue.value;
         if (onChange) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.2016",
+  "version": "1.4.2018",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "./cjs/index.js",
   "module": "./index.js",
@@ -8,7 +8,7 @@
     "@fluentui/react-context-selector": "^9.1.26",
     "@googlemaps/markerclusterer": "^2.5.3",
     "@react-sigma/core": "3.4.0",
-    "@reltio/mdm-sdk": "^1.4.1895",
+    "@reltio/mdm-sdk": "^1.4.1896",
     "@vis.gl/react-google-maps": "^1.3.0",
     "d3-cloud": "^1.2.5",
     "d3-geo": "^2.0.1",