@reltio/components 1.4.2070 → 1.4.2072

package/AttributesView/AttributesView.js

@@ -26,7 +26,7 @@ import { ReadOnlyAttributesView } from '../ReadOnlyAttributesView';
 import { EditModeAttributesView } from '../EditModeAttributesView';
 import { EntityContext } from '../contexts/EntityContext';
 import { useMdmEntityWithDiff, useMdmMode } from '../contexts/MdmModuleContext';
-import { AlwaysVisibleAttributesContext } from '../contexts/AllwaysVisibleAttributesContext';
+import { AlwaysVisibleAttributesContext } from '../contexts/AlwaysVisibleAttributesContext';
 export var AttributesView = function (_a) {
     var attributesCount = _a.attributesCount, pinnedAttributes = _a.pinnedAttributes, _b = _a.alwaysVisible, alwaysVisible = _b === void 0 ? [] : _b, restProps = __rest(_a, ["attributesCount", "pinnedAttributes", "alwaysVisible"]);
     var mdmEntity = useMdmEntityWithDiff();

package/ColumnsSettings/components/ColumnsSettingsPopup/ColumnsSettingsPopup.d.ts

@@ -1,14 +1,13 @@
 import React from 'react';
 import { GroupedColumnsData } from '../../../types/basicTable';
+import { ListItem } from '../../types';
 type Props = {
     anchorEl: HTMLElement;
     onClose: () => void;
     title?: string;
     inputPlaceholder?: string;
     columnsData: GroupedColumnsData[];
-    onColumnClick: (column: {
-        id: string;
-    }) => void;
+    onColumnClick: (column: ListItem) => void;
     selectedColumns: string[];
     hideCheckBox?: boolean;
 };

package/ColumnsSettings/helpers.d.ts

@@ -1,6 +1,8 @@
 import { ColumnData, GroupedColumnsData } from '../types/basicTable';
+import { VirtualGroupedListItem } from '../VirtualGroupedList/types';
+import { ListItem } from './types';
 declare const isGroupColumn: (column: ColumnData) => boolean;
-declare const buildColumnItems: (columnsData: GroupedColumnsData[], filterText: string) => ColumnData[];
+declare const buildColumnItems: (columnsData: GroupedColumnsData[], filterText: string) => VirtualGroupedListItem<ListItem>[];
 declare const getChildColumns: (column: ColumnData) => ColumnData[];
 declare const isColumnSelected: (selectedColumns: string[], column: ColumnData) => boolean;
 export { buildColumnItems, getChildColumns, isGroupColumn, isColumnSelected };

package/ColumnsSettings/types.d.ts

@@ -0,0 +1,8 @@
+import { DataTypeDefinition } from '@reltio/mdm-sdk';
+export type ListItem = {
+    id: string;
+    label: string;
+    groupId?: string;
+    filterText?: string;
+    attrType?: DataTypeDefinition;
+};

package/CommentsContainer/CommentsContainer.js

@@ -53,7 +53,7 @@ export var CommentsContainer = function (_a) {
     var allRelatedObjectUris = useMemo(function () {
         return additionalRelatedObjectUris ? __spreadArray(__spreadArray([], relatedObjectUris, true), additionalRelatedObjectUris, true) : relatedObjectUris;
     }, [additionalRelatedObjectUris, relatedObjectUris]);
-    return (showComments && (React.createElement("div", { className: classnames(styles.root, className) },
+    return (showComments && (React.createElement("div", { "data-reltio-id": "comments-container", className: classnames(styles.root, className) },
         shouldShowAddCommentButton && (React.createElement(AddCommentButton, { className: classnames(styles.addButton, (_b = {},
                 _b[styles.showAlways] = showAlways || isOpenPopupWithNewComment,
                 _b)), onClick: handleClickAddCommentButton })),

package/ConfigureColumnsPopup/ConfigureColumnsPopup.d.ts

@@ -1,41 +1,24 @@
-export function ConfigureColumnsPopup({ open, anchorEl, data, onSearch, onClose, titleText, filterText, onListItemClick, selected, hideCheckBox, renderGroupTitle, ...otherProps }: {
-    [x: string]: any;
-    open: any;
-    anchorEl: any;
-    data: any;
-    onSearch: any;
-    onClose: any;
-    titleText: any;
-    filterText: any;
-    onListItemClick: any;
-    selected: any;
-    hideCheckBox: any;
-    renderGroupTitle: any;
-}): React.JSX.Element;
-export namespace ConfigureColumnsPopup {
-    namespace propTypes {
-        let open: PropTypes.Requireable<boolean>;
-        let hideCheckBox: PropTypes.Requireable<boolean>;
-        let anchorEl: PropTypes.Requireable<any>;
-        let selected: PropTypes.Requireable<any[]>;
-        let data: PropTypes.Requireable<any[]>;
-        let filterText: PropTypes.Requireable<string>;
-        let titleText: PropTypes.Requireable<string>;
-        let onClose: PropTypes.Requireable<(...args: any[]) => any>;
-        let onListItemClick: PropTypes.Requireable<(...args: any[]) => any>;
-        let onSearch: PropTypes.Requireable<(...args: any[]) => any>;
-        let renderGroupTitle: PropTypes.Requireable<(...args: any[]) => any>;
-    }
-    namespace defaultProps {
-        let data_1: any[];
-        export { data_1 as data };
-        let selected_1: any[];
-        export { selected_1 as selected };
-        let titleText_1: string;
-        export { titleText_1 as titleText };
-        let filterText_1: string;
-        export { filterText_1 as filterText };
-    }
-}
 import React from 'react';
-import PropTypes from 'prop-types';
+import { SelectionPopup } from '../SelectionPopup';
+import { VirtualGroupedListRenderGroupTitle } from '../VirtualGroupedList';
+import { AttributeOption } from '../types';
+type Item = AttributeOption & {
+    id: string;
+    groupId: string;
+    filterText?: string;
+    notSelectable?: boolean;
+    LogoIcon?: React.ElementType;
+    children?: Item[];
+    attributes?: Item[];
+};
+type Props = Omit<React.ComponentProps<typeof SelectionPopup>, 'title'> & {
+    hideCheckBox: boolean;
+    titleText?: string;
+    filterText?: string;
+    selected: Item[];
+    data: Item[];
+    onListItemClick: (item: Item, checked: boolean) => void;
+    renderGroupTitle: VirtualGroupedListRenderGroupTitle<Item>;
+};
+export declare const ConfigureColumnsPopup: ({ open, anchorEl, data, onSearch, onClose, titleText, filterText, onListItemClick, selected, hideCheckBox, renderGroupTitle, ...otherProps }: Props) => React.JSX.Element;
+export {};

package/ConfigureColumnsPopup/ConfigureColumnsPopup.js

@@ -30,22 +30,21 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import React, { useCallback, useMemo, useRef } from 'react';
-import PropTypes from 'prop-types';
 import i18n from 'ui-i18n';
 import classnames from 'classnames';
 import { chain, curry, map } from 'ramda';
 import { getMaxItemWidth } from '@reltio/mdm-sdk';
+import { Highlighter } from '../Highlighter';
 import { SelectionPopup } from '../SelectionPopup';
+import { AttributeListItem } from '../AttributeListItem';
 import { VirtualGroupedList, flattenGroupedItemsData } from '../VirtualGroupedList';
 import { useKeyboardNavigation } from '../hooks/useKeyboardNavigation';
-import { AttributeListItem } from '../AttributeListItem';
-import { Highlighter } from '../Highlighter';
 import { useStyles } from './styles';
 var ITEM_HEIGHT = 32;
 var LIST_CONTAINER_HEIGHT = 300;
 var DEFAULT_MIN_CONTAINER_WIDTH = 308;
 export var ConfigureColumnsPopup = function (_a) {
-    var open = _a.open, anchorEl = _a.anchorEl, data = _a.data, onSearch = _a.onSearch, onClose = _a.onClose, titleText = _a.titleText, filterText = _a.filterText, onListItemClick = _a.onListItemClick, selected = _a.selected, hideCheckBox = _a.hideCheckBox, renderGroupTitle = _a.renderGroupTitle, otherProps = __rest(_a, ["open", "anchorEl", "data", "onSearch", "onClose", "titleText", "filterText", "onListItemClick", "selected", "hideCheckBox", "renderGroupTitle"]);
+    var open = _a.open, anchorEl = _a.anchorEl, _b = _a.data, data = _b === void 0 ? [] : _b, onSearch = _a.onSearch, onClose = _a.onClose, _c = _a.titleText, titleText = _c === void 0 ? i18n.text('Show/hide columns') : _c, _d = _a.filterText, filterText = _d === void 0 ? '' : _d, onListItemClick = _a.onListItemClick, _e = _a.selected, selected = _e === void 0 ? [] : _e, hideCheckBox = _a.hideCheckBox, renderGroupTitle = _a.renderGroupTitle, otherProps = __rest(_a, ["open", "anchorEl", "data", "onSearch", "onClose", "titleText", "filterText", "onListItemClick", "selected", "hideCheckBox", "renderGroupTitle"]);
     var filterItem = useCallback(function (item) {
         return item.label.toLowerCase().includes(filterText.toLowerCase());
     }, [filterText]);
@@ -82,12 +81,12 @@ export var ConfigureColumnsPopup = function (_a) {
     }, [onListItemClick, selected]);
     var groupedItems = useMemo(function () { return (renderGroupTitle ? getGroupsData : getAttributesData)(data); }, [data, renderGroupTitle, getGroupsData, getAttributesData]);
     var items = useMemo(function () { return flattenGroupedItemsData(groupedItems); }, [groupedItems]);
-    var _b = useKeyboardNavigation({
+    var _f = useKeyboardNavigation({
         items: items,
         open: open,
         onSelectFocusedItem: handleSearchOnEnter,
         selectedItems: selected
-    }), focusIndex = _b.focusIndex, handleKeyDown = _b.handleKeyDown;
+    }), focusIndex = _f.focusIndex, handleKeyDown = _f.handleKeyDown;
     var focusIndexRef = useRef(null);
     focusIndexRef.current = focusIndex;
     var renderListItem = useCallback(function (style, _a, index) {
@@ -99,24 +98,5 @@ export var ConfigureColumnsPopup = function (_a) {
     var containerWidth = getMaxItemWidth('label')(groupedItems) || DEFAULT_MIN_CONTAINER_WIDTH;
     var classes = useStyles();
     return (React.createElement(SelectionPopup, __assign({ open: open, className: classnames(classes.container, classes.popupContainer), anchorEl: anchorEl, onClose: onClose, onSearch: onSearch, title: titleText, containerWidth: containerWidth, searchInputOnKeyDown: handleKeyDown }, otherProps),
-        React.createElement(VirtualGroupedList, { height: LIST_CONTAINER_HEIGHT, renderItem: renderListItem, items: items, hideSubtitles: true, getItemSize: getItemSize, containerWidth: containerWidth, focusIndex: focusIndex, renderGroupTitle: renderGroupTitle })));
-};
-ConfigureColumnsPopup.propTypes = {
-    open: PropTypes.bool,
-    hideCheckBox: PropTypes.bool,
-    anchorEl: PropTypes.any,
-    selected: PropTypes.array,
-    data: PropTypes.array,
-    filterText: PropTypes.string,
-    titleText: PropTypes.string,
-    onClose: PropTypes.func,
-    onListItemClick: PropTypes.func,
-    onSearch: PropTypes.func,
-    renderGroupTitle: PropTypes.func
-};
-ConfigureColumnsPopup.defaultProps = {
-    data: [],
-    selected: [],
-    titleText: i18n.text('Show/hide columns'),
-    filterText: ''
+        React.createElement(VirtualGroupedList, { height: LIST_CONTAINER_HEIGHT, renderItem: renderListItem, items: items, hideSubtitles: true, getItemSize: getItemSize, focusIndex: focusIndex, renderGroupTitle: renderGroupTitle })));
 };

package/EditModeAttributesList/EditModeAttributesList.js

@@ -25,7 +25,7 @@ import { withContext } from '../HOCs/withContext';
 import { ConfigPermissionsContext } from '../contexts/ConfigPermissionsContext';
 import { ScrollType, ScrollToElementContext } from '../contexts/ScrollToElementContext';
 import { HiddenAttributesContext } from '../contexts/HiddenAttributesContext';
-import { AlwaysVisibleAttributesContext } from '../contexts/AllwaysVisibleAttributesContext';
+import { AlwaysVisibleAttributesContext } from '../contexts/AlwaysVisibleAttributesContext';
 var EditModeAttributesList = function (_a) {
     var parentAttributeType = _a.parentAttributeType, attrTypes = _a.attrTypes, entity = _a.entity, parentUri = _a.parentUri, showEmptyEditors = _a.showEmptyEditors, mode = _a.mode, crosswalks = _a.crosswalks, drawLines = _a.drawLines, children = _a.children, className = _a.className, _b = _a.fixedTypeUris, fixedTypeUris = _b === void 0 ? FIXED_TYPE_URIS : _b, onAddAttributes = _a.onAddAttributes, onChangeAttribute = _a.onChangeAttribute, onDeleteAttribute = _a.onDeleteAttribute, additionalControlsRenderer = _a.additionalControlsRenderer, showNonOv = _a.showNonOv, highlightAttribute = _a.highlightAttribute;
     var hiddenAttributes = useContext(HiddenAttributesContext);

package/EditModeAttributesPager/EditModeAttributesPager.test.js

@@ -59,7 +59,7 @@ import React from 'react';
 import { mockResizeObserver } from 'jsdom-testing-mocks';
 import { act, render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { LocalizationProvider } from '@mui/x-date-pickers';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
 import { DataTypes, EntityAttrTypes, ErrorSource, ErrorType, Mode } from '@reltio/mdm-sdk';
 import { MdmModuleProvider } from '../contexts/MdmModuleContext';

package/EditModeAttributesPager/components/AttributeRenderer/AttributeRenderer.js

@@ -11,7 +11,7 @@ import { ShowMore } from '../../../ShowMore';
 import { EditModeAttribute } from '../../../EditModeAttributesFactory';
 import { CardinalityMessage } from '../../../CardinalityMessage';
 import { PinnedAttributesContext } from '../../../contexts/PinnedAttributesContext';
-import { AlwaysVisibleAttributesContext } from '../../../contexts/AllwaysVisibleAttributesContext';
+import { AlwaysVisibleAttributesContext } from '../../../contexts/AlwaysVisibleAttributesContext';
 import { DescriptionIcon } from '../../../DescriptionIcon';
 import { ControlAttributeIcon } from '../../../ControlAttributeIcon';
 import { useScrollToAttribute } from '../../../hooks/useScrollToAttribute';

package/FacetViewHeader/FacetViewHeader.js

@@ -5,5 +5,5 @@ import { useStyles } from './styles';
 export var FacetViewHeader = function (_a) {
     var className = _a.className, title = _a.title, children = _a.children;
     var styles = useStyles();
-    return (React.createElement(BasicViewHeader, { title: title, classes: { root: classnames(styles.container, className), title: styles.title } }, children));
+    return (React.createElement(BasicViewHeader, { "data-reltio-id": "facet-view-header", title: title, classes: { root: classnames(styles.container, className), title: styles.title } }, children));
 };

package/ImageAttributesLine/imageAttributeValues.test-data.js

@@ -46,6 +46,14 @@ export var imageAttributeValues = [
                     value: '/test.jpg',
                     uri: 'entities/1Rd2I9Mt/attributes/ImageGallery/39V5GWJZv/CdnUrlThumbnail/39V5GWj9T'
                 }
+            ],
+            UrlPreview: [
+                {
+                    type: 'configuration/entityTypes/Series/attributes/ImageGallery/attributes/UrlPreview',
+                    ov: true,
+                    value: '/test.jpg',
+                    uri: 'entities/1Rd2I9Mt/attributes/ImageGallery/39V5GWJZv/UrlPreview/38Man0dAs'
+                }
             ]
         },
         ov: true,

package/ImageAttributesLine/index.d.ts

@@ -2,4 +2,4 @@ export { ImageAttributesLine } from './ImageAttributesLine';
 export type { RenderImage, ImageRenderProps } from './types';
 export { DEFAULT_IMAGE_SIZE } from './constants';
 export { downloadImagesByURLs } from './helpers';
-export { imageAttributeValues } from './imageAttributeValues.test-data';
+export { imageAttributeValues, attributeType } from './imageAttributeValues.test-data';

package/ImageAttributesLine/index.js

@@ -1,4 +1,4 @@
 export { ImageAttributesLine } from './ImageAttributesLine';
 export { DEFAULT_IMAGE_SIZE } from './constants';
 export { downloadImagesByURLs } from './helpers';
-export { imageAttributeValues } from './imageAttributeValues.test-data';
+export { imageAttributeValues, attributeType } from './imageAttributeValues.test-data';

package/ImageDetailsView/components/ImageDetailsViewCarousel/ImageDetailsViewCarousel.js

@@ -21,7 +21,7 @@ export var ImageDetailsViewCarousel = function (_a) {
     return (React.createElement("div", { className: classnames(styles.root, className) },
         React.createElement("div", { className: styles.main },
             attributeValueIndex > 0 && (React.createElement(SmallIconButton, { "data-reltio-id": "prev-image-button", icon: NavigateBeforeIcon, className: classnames(styles.arrowButton, styles.arrowButtonPrev), onClick: onPrevImageButtonClick, size: "XL" })),
-            React.createElement(Image, { containerClassName: styles.mainImageContainer, className: styles.mainImage, size: mainImageSrc && ImageSizesStyles.OVERRIDE, src: mainImageSrc }),
+            React.createElement(Image, { "data-reltio-id": "main-image", containerClassName: styles.mainImageContainer, className: styles.mainImage, size: mainImageSrc && ImageSizesStyles.OVERRIDE, src: mainImageSrc }),
             attributeValueIndex !== attributeValues.length - 1 && (React.createElement(SmallIconButton, { "data-reltio-id": "next-image-button", icon: NavigateNextIcon, className: classnames(styles.arrowButton, styles.arrowButtonNext), onClick: onNextImageButtonClick, size: "XL" }))),
         React.createElement(Thumbnails, { attributeValues: attributeValues, attributeValueIndex: attributeValueIndex, setAttributeValueIndex: setAttributeValueIndex })));
 };

package/MergeButton/MergeButton.spec.js

@@ -55,27 +55,32 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import React from 'react';
-import { mount } from 'enzyme';
-import { act } from 'react-dom/test-utils';
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { mergeCustomerTenantEntityWithMixedEntities, mergeDataTenantEntity } from '@reltio/mdm-sdk';
+import { MdmModuleProvider } from '../contexts/MdmModuleContext';
 import { MergeButton } from './MergeButton';
-import MergeIcon from '../icons/MergeDark';
-import { ActionButton } from '../ActionButton';
 import { ActionButtonMode } from '../types';
-import { MdmModuleProvider } from '../contexts/MdmModuleContext';
 jest.mock('@reltio/mdm-sdk', function () { return (__assign(__assign({}, jest.requireActual('@reltio/mdm-sdk')), { mergeCustomerTenantEntityWithMixedEntities: jest.fn(), mergeDataTenantEntity: jest.fn() })); });
-var mdmValues = {
-    tenant: { id: 'test', name: 'test' },
-    dtssPath: 'dtssPath/'
-};
-var updateSearchNavigationDataOnMerge = jest.fn();
+var mdmValues = { tenant: { id: 'test', name: 'test' }, dtssPath: 'dtssPath/' };
+var mdmActions = { updateSearchNavigationDataOnMerge: jest.fn() };
+var defaultEntity = { uri: 'entities/123', type: 'entityType' };
+var defaultEntities = [
+    { uri: 'entities/345', type: 'entityType' },
+    { uri: 'entities/567', type: 'entityType' }
+];
+var defaultProps = { entity: defaultEntity, entities: defaultEntities };
 var setUp = function (props) {
-    return mount(React.createElement(MdmModuleProvider, { values: mdmValues, actions: { updateSearchNavigationDataOnMerge: updateSearchNavigationDataOnMerge } },
-        React.createElement(MergeButton, __assign({}, props))));
+    if (props === void 0) { props = defaultProps; }
+    var user = userEvent.setup();
+    var Providers = function (_a) {
+        var children = _a.children;
+        return (React.createElement(MdmModuleProvider, { values: mdmValues, actions: mdmActions }, children));
+    };
+    return __assign(__assign({}, render(React.createElement(MergeButton, __assign({}, props)), { wrapper: Providers })), { user: user });
 };
-describe('MergeButton component test', function () {
+describe('Merge button tests', function () {
     beforeEach(function () {
-        jest.clearAllMocks();
         mergeCustomerTenantEntityWithMixedEntities.mockImplementation(function () {
             return Promise.all([
                 Promise.resolve(),
@@ -83,89 +88,51 @@ describe('MergeButton component test', function () {
                 Promise.resolve({ uris: ['entities/1234'] })
             ]);
         });
-        mergeDataTenantEntity.mockImplementation(function () { return Promise.resolve({ status: 'success' }); });
+        mergeDataTenantEntity.mockResolvedValue({ status: 'success' });
     });
     afterEach(function () {
         jest.clearAllMocks();
     });
-    var entity = { uri: 'entities/123', type: 'entityType' };
-    var entities = [
-        {
-            uri: 'entities/345',
-            type: 'entityType'
-        },
-        {
-            uri: 'entities/567',
-            type: 'entityType'
-        }
-    ];
     it('should render initial state correctly', function () {
-        var mode = ActionButtonMode.button;
-        var wrapper = setUp({ entity: entity, entities: entities, mode: mode });
-        var button = wrapper.find(ActionButton);
-        expect(button).toHaveLength(1);
-        expect(button.props()).toMatchObject({
-            disabled: false,
-            mode: mode,
-            label: 'Merge',
-            icon: MergeIcon
-        });
+        var props = __assign(__assign({}, defaultProps), { mode: ActionButtonMode.button });
+        setUp(props);
+        var button = screen.getByRole('button');
+        expect(button).not.toBeDisabled();
+        within(button).getByTestId('SvgMergeDark');
+        within(button).getByText('Merge');
     });
     it('should merge entities with customer tenant entity on button click', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var wrapper, button;
+        var user;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    wrapper = setUp({ entity: entity, entities: entities });
-                    button = wrapper.find(ActionButton);
-                    expect(button).toHaveLength(1);
-                    return [4 /*yield*/, act(function () { return __awaiter(void 0, void 0, void 0, function () {
-                            return __generator(this, function (_a) {
-                                button.prop('onClick')();
-                                return [2 /*return*/];
-                            });
-                        }); })];
+                    user = setUp().user;
+                    return [4 /*yield*/, user.click(screen.getByRole('button'))];
                 case 1:
                     _a.sent();
                     expect(mergeCustomerTenantEntityWithMixedEntities).toHaveBeenCalledWith({
-                        dtssPath: 'dtssPath/',
                         customerTenant: 'test',
-                        entity: entity,
-                        entities: entities
+                        dtssPath: 'dtssPath/',
+                        entities: defaultEntities,
+                        entity: defaultEntity
                     });
                     return [2 /*return*/];
             }
         });
     }); });
     it('should merge entities with data tenant entity on button click', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var entity, entities, wrapper, button;
+        var entity, entities, props, user;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    entity = {
-                        uri: 'entities/dt123',
-                        type: 'entityType',
-                        dataTenant: 'dt1'
-                    };
+                    entity = { uri: 'entities/dt123', type: 'entityType', dataTenant: 'dt1' };
                     entities = [
-                        {
-                            uri: 'entities/ct345',
-                            type: 'entityType'
-                        },
-                        {
-                            uri: 'entities/ct567',
-                            type: 'entityType'
-                        }
+                        { uri: 'entities/ct345', type: 'entityType' },
+                        { uri: 'entities/ct567', type: 'entityType' }
                     ];
-                    wrapper = setUp({ entity: entity, entities: entities });
-                    button = wrapper.find(ActionButton);
-                    expect(button).toHaveLength(1);
-                    return [4 /*yield*/, act(function () { return __awaiter(void 0, void 0, void 0, function () {
-                            return __generator(this, function (_a) {
-                                button.prop('onClick')();
-                                return [2 /*return*/];
-                            });
-                        }); })];
+                    props = { entity: entity, entities: entities };
+                    user = setUp(props).user;
+                    return [4 /*yield*/, user.click(screen.getByRole('button'))];
                 case 1:
                     _a.sent();
                     expect(mergeDataTenantEntity).toHaveBeenCalledWith({
@@ -179,70 +146,39 @@ describe('MergeButton component test', function () {
         });
     }); });
     it('should call props.onError on merge error', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var entity, entities, error, onError, wrapper, button;
+        var entity, entities, props, user;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    entity = {
-                        uri: 'entities/dt123',
-                        type: 'entityType',
-                        dataTenant: 'dt1'
-                    };
+                    mergeDataTenantEntity.mockRejectedValue({ errorMessage: 'merge failed' });
+                    entity = { uri: 'entities/dt123', type: 'entityType', dataTenant: 'dt1' };
                     entities = [
-                        {
-                            uri: 'entities/ct345',
-                            type: 'entityType'
-                        },
-                        {
-                            uri: 'entities/ct567',
-                            type: 'entityType'
-                        }
+                        { uri: 'entities/ct345', type: 'entityType' },
+                        { uri: 'entities/ct567', type: 'entityType' }
                     ];
-                    error = { errorMessage: 'merge failed' };
-                    mergeDataTenantEntity.mockImplementation(function () { return Promise.reject(error); });
-                    onError = jest.fn();
-                    wrapper = setUp({ entity: entity, entities: entities, onError: onError });
-                    button = wrapper.find(ActionButton);
-                    expect(button).toHaveLength(1);
-                    return [4 /*yield*/, act(function () { return __awaiter(void 0, void 0, void 0, function () {
-                            return __generator(this, function (_a) {
-                                button.prop('onClick')();
-                                return [2 /*return*/];
-                            });
-                        }); })];
+                    props = { entity: entity, entities: entities, onError: jest.fn() };
+                    user = setUp(props).user;
+                    return [4 /*yield*/, user.click(screen.getByRole('button'))];
                 case 1:
                     _a.sent();
-                    expect(onError).toHaveBeenCalledWith(error);
+                    expect(props.onError).toHaveBeenCalledWith({ errorMessage: 'merge failed' });
                     return [2 /*return*/];
             }
         });
     }); });
     it('should call props.onSuccess on merge success', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var onSuccess, otherEntities, wrapper, button;
+        var entities, props, user;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    onSuccess = jest.fn();
-                    otherEntities = __spreadArray(__spreadArray([], entities, true), [
-                        {
-                            uri: 'entities/1234',
-                            type: 'entityType',
-                            dataTenant: 'dt1'
-                        }
-                    ], false);
-                    wrapper = setUp({ entity: entity, entities: otherEntities, onSuccess: onSuccess });
-                    button = wrapper.find(ActionButton);
-                    expect(button).toHaveLength(1);
-                    return [4 /*yield*/, act(function () { return __awaiter(void 0, void 0, void 0, function () {
-                            return __generator(this, function (_a) {
-                                button.prop('onClick')();
-                                return [2 /*return*/];
-                            });
-                        }); })];
+                    entities = __spreadArray(__spreadArray([], defaultEntities, true), [{ uri: 'entities/1234', type: 'entityType', dataTenant: 'dt1' }], false);
+                    props = { entity: defaultEntity, entities: entities, onSuccess: jest.fn() };
+                    user = setUp(props).user;
+                    return [4 /*yield*/, user.click(screen.getByRole('button'))];
                 case 1:
                     _a.sent();
-                    expect(onSuccess).toHaveBeenCalled();
-                    expect(updateSearchNavigationDataOnMerge).toHaveBeenCalledWith({
+                    expect(props.onSuccess).toHaveBeenCalled();
+                    expect(mdmActions.updateSearchNavigationDataOnMerge).toHaveBeenCalledWith({
                         winnerUri: 'entities/123',
                         losersUris: ['entities/345', 'entities/567']
                     });
@@ -250,9 +186,4 @@ describe('MergeButton component test', function () {
             }
         });
     }); });
-    it('button should have right label', function () {
-        var wrapper = setUp({ entity: entity, entities: entities });
-        var button = wrapper.find(ActionButton);
-        expect(button.prop('label')).toBe('Merge');
-    });
 });

package/MetadataTypesSelector/MetadataTypesSelector.d.ts

@@ -8,8 +8,9 @@ type Classes = {
     root?: string;
     label?: string;
 };
+type Item = TEntityType | TRelationType;
 type Props = {
-    items: (TEntityType | TRelationType)[];
+    items: Item[];
     selectedItemsUris: string[];
     onChange: (values: string[]) => void;
     label: string;

package/MetadataTypesSelector/MetadataTypesSelector.js

@@ -73,7 +73,7 @@ export var MetadataTypesSelector = memo(function (_a) {
     var noTypesSelected = selectedItemsUris.length === 0;
     return (React.createElement(React.Fragment, null,
         React.createElement(TextField, { label: label, ref: rootRef, InputProps: {
-                startAdornment: noTypesSelected && !placeholder ? null : (React.createElement("div", { className: classnames(styles.inputText, classes.inputText) }, noTypesSelected ? (React.createElement("div", null, placeholder)) : (React.createElement(ListLabel, __assign({}, ListLabelProps, { list: selectedLabels }))))),
+                startAdornment: noTypesSelected && !placeholder ? null : (React.createElement("div", { "data-reltio-id": "metadata-types-selector-start-adornment", className: classnames(styles.inputText, classes.inputText) }, noTypesSelected ? (React.createElement("div", null, placeholder)) : (React.createElement(ListLabel, __assign({}, ListLabelProps, { list: selectedLabels }))))),
                 classes: {
                     root: styles.inputRoot,
                     input: classnames(styles.input, classes.input, (_b = {},