@reltio/components 1.4.2045 → 1.4.2047

package/EditModeAttributesPager/helpers.test.js

@@ -1,16 +1,6 @@
-import { filterNewValues } from './helpers';
 import { generateNewRelationUri } from '@reltio/mdm-sdk';
-var values = [
-    {
-        uri: generateNewRelationUri()
-    },
-    {
-        uri: 'ui/kl/io/89'
-    },
-    {
-        uri: 'relations/yuyi/attributes/uiouoi'
-    }
-];
+import { filterNewValues } from './helpers';
+var values = [{ uri: generateNewRelationUri() }, { uri: 'ui/kl/io/89' }, { uri: 'relations/yuyi/attributes/uiouoi' }];
 describe('Attribute pager utils', function () {
     describe('filterNewValues', function () {
         it('should return only new attribute', function () {

package/EditModeAttributesView/EditModeAttributesView.test.js

@@ -45,211 +45,317 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
+var _a;
 import React from 'react';
-import { shallow } from 'enzyme';
-import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { PinnedAttributesContext } from '../contexts/PinnedAttributesContext';
-import { useMdmAction, useMdmMetadata, useMdmModifiedEntity, useMdmUserRoles } from '../contexts/MdmModuleContext';
-import { EditModeAttributesView } from './EditModeAttributesView';
+import { render, screen, act, within } from '@testing-library/react';
+import { assocPath } from 'ramda';
+import { ErrorType, Mode, uploadImage } from '@reltio/mdm-sdk';
+import { MdmModuleProvider } from '../contexts/MdmModuleContext';
+import { ScrollToElementProvider } from '../contexts/ScrollToElementContext';
 import { HiddenAttributesContext } from '../contexts/HiddenAttributesContext';
-jest.mock('../contexts/MdmModuleContext', function () { return (__assign(__assign({}, jest.requireActual('../contexts/MdmModuleContext')), { useMdmAction: jest.fn(), useMdmMetadata: jest.fn(), useMdmUserRoles: jest.fn(), useMdmModifiedEntity: jest.fn(), useMdmDependentLookupEditorState: jest.fn() })); });
-var metadata = {
-    entityTypes: []
+import { EditModeAttributesView } from './EditModeAttributesView';
+jest.mock('@reltio/mdm-sdk', function () { return (__assign(__assign({}, jest.requireActual('@reltio/mdm-sdk')), { uploadImage: jest.fn() })); });
+var defaultEntity = {
+    uri: 'entities/1E4APrQW',
+    type: 'configuration/entityTypes/HCP'
 };
-var pinnedAttributes = [
-    {
-        roles: ['ROLE_ADMIN'],
-        attributes: [
-            'configuration/entityTypes/HCA/attributes/SubTypeCode',
-            'configuration/entityTypes/HCA/attributes/Department'
-        ]
-    }
-];
-var entity = { uri: 'entities/123' };
-var setUp = function (props) { return shallow(React.createElement(EditModeAttributesView, __assign({ entity: entity }, props))); };
-describe('EditModeAttributesView', function () {
-    describe('PinnedAttributesContext', function () {
-        beforeEach(function () {
-            useMdmMetadata.mockReturnValue(metadata);
-            useMdmUserRoles.mockReturnValue([]);
-            useMdmModifiedEntity.mockReturnValue(null);
-            useMdmAction.mockReturnValue(jest.fn());
-        });
-        afterEach(function () {
-            jest.clearAllMocks();
-        });
-        it('should render PinnedAttributesContext.Provider with passing pinnedAttributes for this user', function () {
-            useMdmUserRoles.mockReturnValue(['ROLE_ADMIN']);
-            var component = setUp({ pinnedAttributes: pinnedAttributes });
-            expect(component.find(PinnedAttributesContext.Provider)).toHaveLength(1);
-            expect(component.find(PinnedAttributesContext.Provider).prop('value')).toEqual(pinnedAttributes[0].attributes);
-        });
-        it('should render PinnedAttributesContext.Provider with passing pinnedAttributes as empty array for user without roles', function () {
-            var component = setUp({ pinnedAttributes: pinnedAttributes });
-            expect(component.find(PinnedAttributesContext.Provider)).toHaveLength(1);
-            expect(component.find(PinnedAttributesContext.Provider).prop('value')).toEqual([]);
-        });
-        it('should render PinnedAttributesContext.Provider with passing pinnedAttributes as empty array if no pinnedAttributes', function () {
-            var component = setUp({});
-            expect(component.find(PinnedAttributesContext.Provider)).toHaveLength(1);
-            expect(component.find(PinnedAttributesContext.Provider).prop('value')).toEqual([]);
-        });
-    });
-    describe('rule based attributes', function () {
-        var metadata = {
-            entityTypes: [
+var defaultModifiedEntities = (_a = {}, _a[defaultEntity.uri] = defaultEntity, _a);
+var defaultMetadata = {
+    uri: 'configuration',
+    entityTypes: [
+        {
+            uri: 'configuration/entityTypes/HCP',
+            attributes: [
                 {
-                    uri: 'configuration/entityTypes/HCP',
+                    uri: 'configuration/entityTypes/HCP/attributes/FirstLevelNested',
+                    name: 'FirstLevelNested',
+                    type: 'Nested',
                     attributes: [
                         {
-                            name: 'Category1',
+                            label: 'FirstLevelNestedSub1_HCP',
+                            name: 'FirstLevelNestedSub1',
+                            uri: 'configuration/entityTypes/HCP/attributes/FirstLevelNested/attributes/FirstLevelNestedSub1',
                             type: 'String',
-                            uri: 'configuration/entityTypes/HCP/attributes/Category1'
+                            required: true
                         },
                         {
-                            name: 'Category2',
-                            type: 'String',
-                            uri: 'configuration/entityTypes/HCP/attributes/Category2'
-                        },
-                        {
-                            name: 'Category3',
-                            type: 'String',
-                            uri: 'configuration/entityTypes/HCP/attributes/Category3'
-                        },
-                        {
-                            name: 'Category4',
-                            type: 'String',
-                            uri: 'configuration/entityTypes/HCP/attributes/Category4'
-                        },
-                        {
-                            name: 'Nested1',
-                            label: 'Nested1',
-                            type: 'Nested',
-                            uri: 'configuration/entityTypes/HCP/attributes/Nested1',
-                            attributes: [
-                                {
-                                    name: 'NestedCategory1',
-                                    type: 'String',
-                                    uri: 'configuration/entityTypes/HCP/attributes/Nested1/attributes/NestedCategory1'
-                                },
-                                {
-                                    name: 'NestedCategory2',
-                                    type: 'String',
-                                    uri: 'configuration/entityTypes/HCP/attributes/Nested1/attributes/NestedCategory2'
-                                }
-                            ]
+                            label: 'Int',
+                            name: 'Int',
+                            uri: 'configuration/entityTypes/HCP/attributes/FirstLevelNested/attributes/Int',
+                            type: 'Int'
                         }
                     ]
+                },
+                {
+                    label: 'First Name',
+                    name: 'FirstName',
+                    type: 'String',
+                    uri: 'configuration/entityTypes/HCP/attributes/FirstName'
+                },
+                {
+                    label: 'Middle Name',
+                    name: 'MiddleName',
+                    type: 'String',
+                    uri: 'configuration/entityTypes/HCP/attributes/MiddleName'
+                },
+                {
+                    label: 'Last Name',
+                    name: 'LastName',
+                    type: 'String',
+                    uri: 'configuration/entityTypes/HCP/attributes/LastName'
+                },
+                {
+                    label: 'Image Gallery',
+                    name: 'ImageGallery',
+                    required: true,
+                    type: 'Image',
+                    uri: 'configuration/entityTypes/HCP/attributes/ImageGallery'
                 }
             ]
+        }
+    ]
+};
+var defaultMdmValues = {
+    modifiedEntities: defaultModifiedEntities,
+    metadata: defaultMetadata,
+    dependentLookups: { editors: {}, structure: {}, initedTypeUris: [] },
+    profileErrors: [],
+    user: { roles: [] }
+};
+var mdmActions = {
+    addAttributes: jest.fn(),
+    modifyAttribute: jest.fn(),
+    removeAttribute: jest.fn(),
+    errorDeactivated: jest.fn()
+};
+var defaultProps = { entity: defaultEntity, mode: Mode.Editing };
+describe('Edit mode attributes view tests', function () {
+    var scrollSpy = jest.fn();
+    window.HTMLElement.prototype.scrollIntoView = scrollSpy;
+    var setUp = function (_a) {
+        var _b = _a === void 0 ? {} : _a, _c = _b.props, props = _c === void 0 ? defaultProps : _c, _d = _b.mdmValues, mdmValues = _d === void 0 ? defaultMdmValues : _d, _e = _b.hiddenAttributesContextValue, hiddenAttributesContextValue = _e === void 0 ? {} : _e, _f = _b.userOptions, userOptions = _f === void 0 ? {} : _f;
+        var user = userEvent.setup(userOptions);
+        var Providers = function (_a) {
+            var children = _a.children;
+            return (React.createElement(MdmModuleProvider, { values: mdmValues, actions: mdmActions },
+                React.createElement(HiddenAttributesContext.Provider, { value: hiddenAttributesContextValue },
+                    React.createElement(ScrollToElementProvider, null, children))));
         };
-        var setUp = function (props, hiddenAttributes) {
-            var user = userEvent.setup();
-            var Providers = function (_a) {
-                var children = _a.children;
-                return (React.createElement(HiddenAttributesContext.Provider, { value: hiddenAttributes }, children));
-            };
-            return __assign(__assign({}, render(React.createElement(EditModeAttributesView, __assign({}, props)), { wrapper: Providers })), { user: user });
-        };
-        beforeAll(function () {
-            useMdmUserRoles.mockReturnValue([]);
-            useMdmAction.mockReturnValue(jest.fn());
-            useMdmMetadata.mockReturnValue(metadata);
+        return __assign({ user: user }, render(React.createElement(EditModeAttributesView, __assign({}, props)), { wrapper: Providers }));
+    };
+    beforeAll(function () {
+        jest.useFakeTimers();
+    });
+    afterEach(function () {
+        jest.runOnlyPendingTimers();
+    });
+    it('should highlight last added attribute', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var metadata, mdmValues, user, moreAttributesButton, popover, attributes;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    metadata = assocPath(['entityTypes', 0, 'attributes', 0, 'required'], true, defaultMetadata);
+                    mdmValues = __assign(__assign({}, defaultMdmValues), { metadata: metadata });
+                    user = setUp({ mdmValues: mdmValues, userOptions: { delay: null } }).user;
+                    moreAttributesButton = screen.getAllByRole('button', { name: 'More attributes' })[0];
+                    return [4 /*yield*/, user.click(moreAttributesButton)];
+                case 1:
+                    _a.sent();
+                    popover = screen.getByRole('presentation');
+                    return [4 /*yield*/, user.click(within(popover).getByText('FirstLevelNested'))];
+                case 2:
+                    _a.sent();
+                    return [4 /*yield*/, user.click(popover.firstChild)];
+                case 3:
+                    _a.sent(); // click on backdrop
+                    act(function () {
+                        jest.runOnlyPendingTimers();
+                    });
+                    attributes = screen.getAllByTestId('reltio-edit-attribute');
+                    expect(attributes[0]).toHaveClass('highlighted');
+                    expect(scrollSpy).toHaveBeenCalledTimes(1);
+                    act(function () {
+                        jest.runOnlyPendingTimers();
+                    });
+                    expect(attributes[0]).not.toHaveClass('highlighted');
+                    return [2 /*return*/];
+            }
         });
+    }); });
+    describe('image attribute behaviour', function () {
+        var profileErrors = [
+            {
+                parentUri: 'entities/1E4APrQW',
+                uri: '',
+                attributeTypeUri: 'configuration/entityTypes/HCP/attributes/ImageGallery',
+                message: 'Attribute is required',
+                type: ErrorType.missed
+            }
+        ];
+        it('should render required and missed image attribute in edit mode correctly', function () { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                setUp({ mdmValues: __assign(__assign({}, defaultMdmValues), { profileErrors: profileErrors }) });
+                expect(screen.getByText('*')).toBeInTheDocument();
+                expect(screen.getByText('Attribute is required')).toBeInTheDocument();
+                return [2 /*return*/];
+            });
+        }); });
+        it('should deactivate error for required and missed image attribute after image was added', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var resolveUploadImage, user, file;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        uploadImage.mockImplementation(function () {
+                            return new Promise(function (resolve) {
+                                resolveUploadImage = resolve;
+                            });
+                        });
+                        user = setUp({
+                            mdmValues: __assign(__assign({}, defaultMdmValues), { profileErrors: profileErrors }),
+                            userOptions: { delay: null, applyAccept: false }
+                        }).user;
+                        return [4 /*yield*/, user.click(screen.getByTestId('reltio-upload-image-button'))];
+                    case 1:
+                        _a.sent();
+                        file = new File(['test file content'], 'test.png', { type: 'image/png' });
+                        return [4 /*yield*/, user.upload(screen.getByTestId('upload-image-button'), file)];
+                    case 2:
+                        _a.sent();
+                        return [4 /*yield*/, screen.findByTestId('reltio-linear-load-indicator')];
+                    case 3:
+                        _a.sent();
+                        return [4 /*yield*/, act(function () { return __awaiter(void 0, void 0, void 0, function () {
+                                return __generator(this, function (_a) {
+                                    switch (_a.label) {
+                                        case 0: return [4 /*yield*/, resolveUploadImage('Image')];
+                                        case 1:
+                                            _a.sent();
+                                            return [2 /*return*/];
+                                    }
+                                });
+                            }); })];
+                    case 4:
+                        _a.sent();
+                        expect(screen.queryByTestId('reltio-linear-load-indicator')).not.toBeInTheDocument();
+                        expect(mdmActions.errorDeactivated).toHaveBeenCalledWith('configuration/entityTypes/HCP/attributes/ImageGallery--entities/1E4APrQW');
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
+    describe('pinned attributes', function () {
+        var pinnedAttributes = [
+            {
+                roles: ['ROLE_ADMIN'],
+                attributes: [
+                    'configuration/entityTypes/HCP/attributes/LastName',
+                    'configuration/entityTypes/HCP/attributes/FirstName'
+                ]
+            }
+        ];
+        it('should render pinned attributes correctly with passing pinnedAttributes for this user', function () {
+            var mdmValues = __assign(__assign({}, defaultMdmValues), { user: { roles: ['ROLE_ADMIN'] } });
+            var props = __assign(__assign({}, defaultProps), { pinnedAttributes: pinnedAttributes });
+            setUp({ props: props, mdmValues: mdmValues });
+            var labels = screen.getAllByTestId('reltio-attribute-label');
+            expect(labels).toHaveLength(3);
+            expect(labels[0]).toHaveTextContent('First Name');
+            expect(labels[1]).toHaveTextContent('Last Name');
+            expect(labels[2]).toHaveTextContent('Image Gallery*');
+        });
+        it('should not render pinned attributes with passing pinnedAttributes as empty array for user without roles', function () {
+            var props = __assign(__assign({}, defaultProps), { pinnedAttributes: pinnedAttributes });
+            setUp({ props: props });
+            var labels = screen.getAllByTestId('reltio-attribute-label');
+            expect(labels).toHaveLength(1);
+            expect(labels[0]).toHaveTextContent('Image Gallery*');
+        });
+        it('should not render pinned attributes with passing pinnedAttributes as empty array if no pinnedAttributes', function () {
+            setUp();
+            var labels = screen.getAllByTestId('reltio-attribute-label');
+            expect(labels).toHaveLength(1);
+            expect(labels[0]).toHaveTextContent('Image Gallery*');
+        });
+    });
+    describe('rule based attributes', function () {
         it('should hide attributes if there are no rules allow to show the attribute', function () {
-            var entity = {
-                type: 'configuration/entityTypes/HCP',
-                uri: 'entities/uri_e'
+            var _a;
+            var defaultEntity = {
+                uri: 'entities/1E4APrQW',
+                type: 'configuration/entityTypes/HCP'
             };
-            useMdmModifiedEntity.mockReturnValue({
-                type: 'configuration/entityTypes/HCP',
-                uri: 'entities/uri_e',
-                attributes: {
-                    Category1: [
+            var modifiedEntities = __assign(__assign({}, defaultModifiedEntities), (_a = {}, _a[defaultEntity.uri] = __assign(__assign({}, defaultEntity), { attributes: {
+                    FirstName: [
                         {
-                            uri: 'entities/uri_e/attributes/uri1',
-                            value: 'category1_value1'
+                            uri: 'entities/1E4APrQW/attributes/FirstName/uri1',
+                            value: 'first name value'
                         }
                     ],
-                    Category2: [
+                    MiddleName: [
                         {
-                            uri: 'entities/uri_e/attributes/uri2',
-                            value: 'category2_value1'
+                            uri: 'entities/1E4APrQW/attributes/MiddleName/uri2',
+                            value: 'middle name value'
                         }
                     ],
-                    Category3: [
+                    LastName: [
                         {
-                            uri: 'entities/uri_e/attributes/uri3',
-                            value: 'category3_value1'
-                        }
-                    ],
-                    Category4: [
-                        {
-                            uri: 'entities/uri_e/attributes/uri4',
-                            value: 'category4_value1'
+                            uri: 'entities/1E4APrQW/attributes/LastName/uri3',
+                            value: 'last name value'
                         }
                     ]
-                }
-            });
-            var hiddenAttributes = {
-                'entities/uri_e': [
-                    'configuration/entityTypes/HCP/attributes/Category2',
-                    'configuration/entityTypes/HCP/attributes/Category3',
-                    'configuration/entityTypes/HCP/attributes/Category4'
+                } }), _a));
+            var mdmValues = __assign(__assign({}, defaultMdmValues), { modifiedEntities: modifiedEntities });
+            var hiddenAttributesContextValue = {
+                'entities/1E4APrQW': [
+                    'configuration/entityTypes/HCP/attributes/FirstName',
+                    'configuration/entityTypes/HCP/attributes/LastName'
                 ]
             };
-            setUp({ entity: entity }, hiddenAttributes);
-            expect(screen.getByText('category1_value1')).toBeInTheDocument();
-            expect(screen.queryByText('category2_value1')).not.toBeInTheDocument();
-            expect(screen.queryByText('category3_value1')).not.toBeInTheDocument();
-            expect(screen.queryByText('category4_value1')).not.toBeInTheDocument();
+            setUp({ mdmValues: mdmValues, hiddenAttributesContextValue: hiddenAttributesContextValue });
+            screen.getByText('Middle Name');
+            expect(screen.queryByText('First Name')).not.toBeInTheDocument();
+            expect(screen.queryByText('Last Name')).not.toBeInTheDocument();
         });
         it('should hide nested attributes if there are no rules allow to show the attribute', function () { return __awaiter(void 0, void 0, void 0, function () {
-            var entity, hiddenAttributes, user;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
+            var modifiedEntities, mdmValues, hiddenAttributesContextValue, user;
+            var _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
                     case 0:
-                        entity = {
-                            type: 'configuration/entityTypes/HCP',
-                            uri: 'entities/uri_e'
-                        };
-                        useMdmModifiedEntity.mockReturnValue({
-                            type: 'configuration/entityTypes/HCP',
-                            uri: 'entities/uri_e',
-                            attributes: {
-                                Nested1: [
+                        modifiedEntities = __assign(__assign({}, defaultModifiedEntities), (_a = {}, _a[defaultEntity.uri] = __assign(__assign({}, defaultEntity), { attributes: {
+                                FirstLevelNested: [
                                     {
-                                        uri: 'entities/uri_e/attributes/nesteduri1',
+                                        uri: 'entities/1E4APrQW/attributes/uri1',
                                         value: {
-                                            NestedCategory1: [
+                                            FirstLevelNestedSub1: [
                                                 {
                                                     ov: true,
-                                                    uri: 'entities/uri_e/attributes/nesteduri1/attributes/nestedcaturi1',
-                                                    value: 'nested_category1_value1'
+                                                    uri: 'entities/1E4APrQW/attributes/uri1/attributes/nesteduri1',
+                                                    value: 'first level nested sub value'
                                                 }
                                             ],
-                                            NestedCategory2: [
+                                            Int: [
                                                 {
                                                     ov: true,
-                                                    uri: 'entities/uri_e/attributes/nesteduri1/attributes/nestedcaturi2',
-                                                    value: 'nested_category2_value1'
+                                                    uri: 'entities/1E4APrQW/attributes/uri1/attributes/nesteduri2',
+                                                    value: '3456'
                                                 }
                                             ]
                                         }
                                     }
                                 ]
-                            }
-                        });
-                        hiddenAttributes = {
-                            'entities/uri_e': ['configuration/entityTypes/HCP/attributes/Nested1/attributes/NestedCategory2']
+                            } }), _a));
+                        mdmValues = __assign(__assign({}, defaultMdmValues), { modifiedEntities: modifiedEntities });
+                        hiddenAttributesContextValue = {
+                            'entities/1E4APrQW': ['configuration/entityTypes/HCP/attributes/FirstLevelNested/attributes/Int']
                         };
-                        user = setUp({ entity: entity }, hiddenAttributes).user;
+                        user = setUp({ mdmValues: mdmValues, hiddenAttributesContextValue: hiddenAttributesContextValue, userOptions: { delay: null } }).user;
                         return [4 /*yield*/, user.click(screen.getByTestId('arrow-expand-button'))];
                     case 1:
-                        _a.sent();
-                        expect(screen.getByText('nested_category1_value1')).toBeInTheDocument();
-                        expect(screen.queryByText('nested_category2_value1')).not.toBeInTheDocument();
+                        _b.sent();
+                        screen.getByText('FirstLevelNestedSub1_HCP');
+                        expect(screen.queryByText('Int')).not.toBeInTheDocument();
                         return [2 /*return*/];
                 }
             });

package/EditModeComplexAttribute/EditModeComplexAttribute.js

@@ -78,7 +78,7 @@ var EditModeComplexAttribute = function (_a) {
                 React.createElement(ArrowExpandButton, { onClick: function () { return setExpanded(function (value) { return !value; }); }, expanded: expanded, className: styles.expandButton, disabled: deleted }),
                 React.createElement(ErrorWrapper, { errorMessage: errorMessage, classes: { helperText: styles.errorWrapperHelperText } },
                     React.createElement("div", { className: classnames(styles.label, (_b = {}, _b[styles.deleted] = deleted, _b)), "data-reltio-id": "reltio-attribute-complex-label" }, label))),
-            React.createElement("div", { className: styles.actions },
+            React.createElement("div", { "data-reltio-id": "reltio-complex-attribute-actions", className: styles.actions },
                 edited && (React.createElement(Typography, { variant: "caption", className: styles.editedLabel },
                     "(",
                     i18n.text('edited'),