@reltio/components 1.4.1818 → 1.4.1820

package/esm/features/crosswalks/CrosswalkAttributes/CrosswalkAttributes.test.js

@@ -0,0 +1,263 @@
+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 React from 'react';
+import { mount } from 'enzyme';
+import { map, prop } from 'ramda';
+import moment from 'moment';
+import { act } from 'react-dom/test-utils';
+import DeleteIcon from '@mui/icons-material/Delete';
+import { CrosswalksAttrTypes, DataTypes, SortingStrategy, formatDateTime } from '@reltio/mdm-sdk';
+import { MdmModuleProvider } from '../../../contexts/MdmModuleContext';
+import { ConfirmDeleteDialog } from '../../../ConfirmDeleteDialog';
+import { MoreAttributesButton } from '../../../MoreAttributesButton';
+import SimpleDropDownSelector from '../../../components/SimpleDropDownSelector/SimpleDropDownSelector';
+import { SmallIconButtonWithTooltip } from '../../../SmallIconButton';
+import { TextEditor } from '../../../TextEditor';
+import { CopyableValueField } from '../CopyableValueField';
+import { CrosswalkDateEditor } from '../CrosswalkDateEditor';
+import { CrosswalkAttributes } from './CrosswalkAttributes';
+jest.mock('../CrosswalkDateEditor', function () { return ({
+    CrosswalkDateEditor: function () { return null; }
+}); });
+var metadata = {
+    sources: [
+        {
+            uri: 'configuration/sources/Reltio',
+            label: 'Reltio',
+            icon: 'images/source/reltio.png',
+            abbreviation: 'Reltio'
+        },
+        {
+            uri: 'configuration/sources/AHA',
+            label: 'AHA',
+            icon: 'images/source/source_s.png',
+            abbreviation: 'AHA'
+        }
+    ]
+};
+var attributesSortingStrategy = SortingStrategy.ASC_BY_NAME;
+var crosswalk = {
+    uri: 'entities/j8K1vc9/crosswalks/1kQ5cap2n',
+    type: 'configuration/sources/Reltio',
+    value: 'some value',
+    attributes: [],
+    singleAttributeUpdateDates: {},
+    createDate: '2021-05-14T05:21:14.532Z',
+    updateDate: '2021-06-12T17:27:39.758Z',
+    reltioLoadDate: '2021-07-14T05:21:14.532Z'
+};
+var newCrosswalk = {
+    type: '',
+    value: ''
+};
+var defaultProps = {
+    crosswalk: crosswalk,
+    onEditAttribute: jest.fn(),
+    onDeleteAttribute: jest.fn()
+};
+var setUp = function (props) {
+    if (props === void 0) { props = defaultProps; }
+    return mount(React.createElement(MdmModuleProvider, { values: { metadata: metadata, attributesSortingStrategy: attributesSortingStrategy } },
+        React.createElement(CrosswalkAttributes, __assign({}, props))));
+};
+describe('CrosswalkAttributes tests', function () {
+    afterEach(function () {
+        jest.clearAllMocks();
+    });
+    it('should render edit mode correctly', function () {
+        var wrapper = setUp();
+        var moreButton = wrapper.find(MoreAttributesButton);
+        expect(wrapper.find(MoreAttributesButton).prop('label')).toBe('Add attributes');
+        var extraAttributes = map(prop('label'), moreButton.prop('data'));
+        expect(extraAttributes).toEqual(['Delete Date']);
+        expect(wrapper.find('p.attributeTitle').at(0).text()).toBe('Source System Name:');
+        expect(wrapper.find('.attributeValue').at(0).text()).toBe(metadata.sources[0].label);
+        expect(wrapper.find('p.attributeTitle').at(1).text()).toBe('ID Value:');
+        expect(wrapper.find(CopyableValueField).prop('value')).toBe(crosswalk.value);
+        expect(wrapper.find('p.attributeTitle').at(2).text()).toBe('Create Date:');
+        expect(wrapper.find('.attributeValue').at(2).text()).toBe(formatDateTime(crosswalk.createDate));
+        expect(wrapper.find('p.attributeTitle').at(3).text()).toBe('Update Date:');
+        expect(wrapper.find('.attributeValue').at(3).text()).toBe(formatDateTime(crosswalk.updateDate));
+        expect(wrapper.find('p.attributeTitle').at(4).text()).toBe('Reltio Load Date:');
+        expect(wrapper.find('.attributeValue').at(4).text()).toBe(formatDateTime(crosswalk.reltioLoadDate));
+    });
+    it('should render create mode correctly', function () {
+        var wrapper = setUp(__assign(__assign({}, defaultProps), { crosswalk: newCrosswalk }));
+        var moreButton = wrapper.find(MoreAttributesButton);
+        expect(wrapper.find(MoreAttributesButton).prop('label')).toBe('Add attributes');
+        var extraAttributes = map(prop('label'), moreButton.prop('data'));
+        expect(extraAttributes).toEqual(['Source Table', 'Delete Date']);
+        expect(wrapper.find('p.attributeTitle').at(0).text()).toBe('Source System Name:');
+        expect(wrapper.find(SimpleDropDownSelector).props()).toMatchObject({
+            value: {
+                value: ''
+            },
+            options: [
+                {
+                    value: 'configuration/sources/AHA',
+                    label: 'AHA'
+                },
+                {
+                    value: 'configuration/sources/Reltio',
+                    label: 'Reltio'
+                }
+            ]
+        });
+        expect(wrapper.find('p.attributeTitle').at(1).text()).toBe('ID Value:');
+        expect(wrapper.find(TextEditor).prop('value')).toBe('');
+    });
+    it('should render deleteDate editor when it is added from MoreAttributesButton selector', function () {
+        var wrapper = setUp();
+        act(function () {
+            wrapper.find(MoreAttributesButton).prop('onApply')([
+                {
+                    label: CrosswalksAttrTypes.deleteDate.label,
+                    uri: 'deleteDate',
+                    name: 'crosswalks.deleteDate',
+                    type: DataTypes.TYPE_TIMESTAMP
+                }
+            ]);
+        });
+        wrapper.update();
+        expect(wrapper.find('p.attributeTitle').at(4).text()).toBe('Delete Date:');
+        expect(wrapper.find(CrosswalkDateEditor).prop('value')).toBeUndefined();
+        expect(wrapper.find(SmallIconButtonWithTooltip).props()).toMatchObject({
+            icon: DeleteIcon,
+            disabled: false,
+            tooltipTitle: 'Delete attribute'
+        });
+    });
+    it('should provide correct value to deleteDate editor and call props.onEditAttribute on editing', function () {
+        var deleteDate = '2021-02-02';
+        var wrapper = setUp(__assign(__assign({}, defaultProps), { crosswalk: __assign(__assign({}, crosswalk), { deleteDate: deleteDate }) }));
+        expect(wrapper.find(CrosswalkDateEditor).prop('value')).toBe(moment.utc(deleteDate).valueOf());
+        var newDeleteDate = new Date('2021-01-01').valueOf();
+        act(function () {
+            wrapper.find(CrosswalkDateEditor).prop('onChange')(newDeleteDate);
+        });
+        expect(defaultProps.onEditAttribute).toHaveBeenCalledWith('deleteDate', newDeleteDate.toString());
+    });
+    it('should work correctly with deleteDate timestamps', function () {
+        var deleteDate = '123456789';
+        var wrapper = setUp(__assign(__assign({}, defaultProps), { crosswalk: __assign(__assign({}, crosswalk), { deleteDate: deleteDate }) }));
+        expect(wrapper.find(CrosswalkDateEditor).prop('value')).toBe(123456789);
+    });
+    it('should render sourceTable editor when it is added from MoreAttributesButton selector', function () {
+        var wrapper = setUp(__assign(__assign({}, defaultProps), { crosswalk: newCrosswalk }));
+        act(function () {
+            wrapper.find(MoreAttributesButton).prop('onApply')([
+                {
+                    label: CrosswalksAttrTypes.sourceTable.label,
+                    uri: 'sourceTable',
+                    name: 'crosswalks.sourceTable',
+                    type: DataTypes.TYPE_STRING
+                }
+            ]);
+        });
+        wrapper.update();
+        expect(wrapper.find('p.attributeTitle').at(2).text()).toBe('Source Table:');
+        expect(wrapper.find(TextEditor).length).toBe(2);
+        expect(wrapper.find(TextEditor).at(1).prop('value')).toBeUndefined();
+        expect(wrapper.find(SmallIconButtonWithTooltip).props()).toMatchObject({
+            icon: DeleteIcon,
+            disabled: false,
+            tooltipTitle: 'Delete attribute'
+        });
+    });
+    it('should provide correct value to sourceTable editor and call props.onEditAttribute on editing', function () {
+        var wrapper = setUp(__assign(__assign({}, defaultProps), { crosswalk: newCrosswalk }));
+        act(function () {
+            wrapper.find(MoreAttributesButton).prop('onApply')([
+                {
+                    label: CrosswalksAttrTypes.sourceTable.label,
+                    uri: 'sourceTable',
+                    name: 'crosswalks.sourceTable',
+                    type: DataTypes.TYPE_STRING
+                }
+            ]);
+        });
+        wrapper.update();
+        act(function () {
+            wrapper.find(TextEditor).at(1).prop('onInput')({ target: { value: 'new sourceTable' } });
+        });
+        expect(defaultProps.onEditAttribute).toHaveBeenCalledWith('sourceTable', 'new sourceTable');
+    });
+    it('should provide correct value to sourceSystem editor and call props.onEditAttribute on editing', function () {
+        var wrapper = setUp(__assign(__assign({}, defaultProps), { crosswalk: newCrosswalk }));
+        act(function () {
+            wrapper.find(SimpleDropDownSelector).prop('onChange')({
+                value: 'configuration/sources/Reltio',
+                label: 'Reltio'
+            });
+        });
+        expect(defaultProps.onEditAttribute).toHaveBeenCalledWith('type', 'configuration/sources/Reltio');
+    });
+    it('should provide correct value to value editor and call props.onEditAttribute on editing', function () {
+        var wrapper = setUp(__assign(__assign({}, defaultProps), { crosswalk: newCrosswalk }));
+        act(function () {
+            wrapper.find(TextEditor).prop('onInput')({ target: { value: 'new id value' } });
+        });
+        expect(defaultProps.onEditAttribute).toHaveBeenCalledWith('value', 'new id value');
+    });
+    it('should call props.onDeleteAttribute when confirm deleting attribute', function () {
+        var deleteDate = '2021-02-02';
+        var wrapper = setUp(__assign(__assign({}, defaultProps), { crosswalk: __assign(__assign({}, crosswalk), { deleteDate: deleteDate }) }));
+        act(function () {
+            wrapper.find(SmallIconButtonWithTooltip).prop('onClick')({});
+        });
+        wrapper.update();
+        act(function () {
+            wrapper.find(ConfirmDeleteDialog).prop('onConfirm')();
+        });
+        expect(defaultProps.onDeleteAttribute).toHaveBeenCalledWith('deleteDate');
+    });
+    it('should not call props.onDeleteAttribute without confirmation of deleting attribute', function () {
+        var deleteDate = '2021-02-02';
+        var wrapper = setUp(__assign(__assign({}, defaultProps), { crosswalk: __assign(__assign({}, crosswalk), { deleteDate: deleteDate }) }));
+        act(function () {
+            wrapper.find(SmallIconButtonWithTooltip).prop('onClick')({});
+        });
+        wrapper.update();
+        act(function () {
+            wrapper.find(ConfirmDeleteDialog).prop('onClose')();
+        });
+        expect(defaultProps.onDeleteAttribute).not.toHaveBeenCalled();
+    });
+    it('should not call props.onDeleteAttribute when confirm deleting attribute if attribute is not set', function () {
+        var wrapper = setUp();
+        act(function () {
+            wrapper.find(MoreAttributesButton).prop('onApply')([
+                {
+                    label: CrosswalksAttrTypes.deleteDate.label,
+                    uri: 'deleteDate',
+                    name: 'crosswalks.deleteDate',
+                    type: DataTypes.TYPE_TIMESTAMP
+                }
+            ]);
+        });
+        wrapper.update();
+        act(function () {
+            wrapper.find(SmallIconButtonWithTooltip).prop('onClick')({});
+        });
+        wrapper.update();
+        act(function () {
+            wrapper.find(ConfirmDeleteDialog).prop('onConfirm')();
+        });
+        expect(defaultProps.onDeleteAttribute).not.toHaveBeenCalled();
+    });
+    it('should render correctly if props.canEditAttribute = false', function () {
+        var deleteDate = '2021-02-02';
+        var wrapper = setUp(__assign(__assign({}, defaultProps), { crosswalk: __assign(__assign({}, crosswalk), { deleteDate: deleteDate }), canEditAttribute: false }));
+        expect(wrapper.find(MoreAttributesButton).length).toBe(0);
+        expect(wrapper.find(SmallIconButtonWithTooltip).prop('disabled')).toBeTruthy();
+    });
+});

package/esm/features/crosswalks/CrosswalkAttributes/index.d.ts

@@ -0,0 +1 @@
+export { CrosswalkAttributes } from './CrosswalkAttributes';

package/esm/features/crosswalks/CrosswalkAttributes/index.js

@@ -0,0 +1 @@
+export { CrosswalkAttributes } from './CrosswalkAttributes';

package/esm/features/crosswalks/CrosswalkAttributes/styles.d.ts

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"text" | "input" | "attributeValue" | "moreButton" | "editor" | "sourceIcon" | "attributeTitle" | "attributeWrapper">;

package/esm/features/crosswalks/CrosswalkDateEditor/CrosswalkDateEditor.d.ts

@@ -0,0 +1,10 @@
+type Props = {
+    value?: number;
+    classes?: {
+        root?: string;
+    };
+    disabled?: boolean;
+    onChange: (value: number) => void;
+};
+export declare const CrosswalkDateEditor: ({ value: currentValue, classes, disabled, onChange }: Props) => JSX.Element;
+export {};

package/esm/features/crosswalks/CrosswalkDateEditor/CrosswalkDateEditor.js

@@ -0,0 +1,31 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import classnames from 'classnames';
+import { TimestampEditor } from '../../../TimestampEditor';
+import { useStyles } from './styles';
+export var CrosswalkDateEditor = function (_a) {
+    var currentValue = _a.value, _b = _a.classes, classes = _b === void 0 ? {} : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, onChange = _a.onChange;
+    var styles = useStyles();
+    var _d = useState(currentValue), value = _d[0], setValue = _d[1];
+    useEffect(function () {
+        setValue(currentValue);
+    }, [currentValue]);
+    var handleChange = useCallback(function () {
+        var newValue = value === null || value === void 0 ? void 0 : value.valueOf();
+        if (currentValue !== newValue) {
+            onChange(newValue);
+        }
+    }, [onChange, value, currentValue]);
+    return (React.createElement(TimestampEditor, { slotProps: {
+            textField: {
+                variant: 'filled',
+                InputProps: {
+                    disableUnderline: true,
+                    classes: {
+                        input: styles.timestampEditorInput,
+                        root: classnames(styles.timestampEditor, classes.root)
+                    },
+                    onBlur: handleChange
+                }
+            }
+        }, value: value || null, disabled: disabled, onChange: setValue, onClose: handleChange }));
+};

package/esm/features/crosswalks/CrosswalkDateEditor/CrosswalkDateEditor.test.d.ts

@@ -0,0 +1 @@
+export {};

package/esm/features/crosswalks/CrosswalkDateEditor/CrosswalkDateEditor.test.js

@@ -0,0 +1,39 @@
+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 React from 'react';
+import { shallow } from 'enzyme';
+import { TimestampEditor } from '../../../TimestampEditor';
+import { CrosswalkDateEditor } from './CrosswalkDateEditor';
+describe('CrosswalkDateEditor tests', function () {
+    afterEach(function () {
+        jest.clearAllMocks();
+    });
+    var date = new Date('01/01/2021').valueOf();
+    var props = {
+        value: date,
+        classes: { root: 'someClass' },
+        onChange: jest.fn()
+    };
+    it('should render CrosswalkDateEditor correctly', function () {
+        var _a;
+        var wrapper = shallow(React.createElement(CrosswalkDateEditor, __assign({}, props)));
+        var dateEditor = wrapper.find(TimestampEditor);
+        expect(dateEditor.prop('disabled')).toBeFalsy();
+        expect(dateEditor.prop('value')).toEqual(date);
+        expect(((_a = dateEditor.prop('slotProps')) === null || _a === void 0 ? void 0 : _a.textField).InputProps.classes.root).toContain('someClass');
+    });
+    it('should disable TimestampEditor if props.disabled = true', function () {
+        var wrapper = shallow(React.createElement(CrosswalkDateEditor, __assign({}, props, { disabled: true })));
+        var dateEditor = wrapper.find(TimestampEditor);
+        expect(dateEditor.prop('disabled')).toBeTruthy();
+    });
+});

package/esm/features/crosswalks/CrosswalkDateEditor/IntegrationCrosswalkDateEditor.test.d.ts

@@ -0,0 +1 @@
+export {};

package/esm/features/crosswalks/CrosswalkDateEditor/IntegrationCrosswalkDateEditor.test.js

@@ -0,0 +1,132 @@
+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);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
+import { CrosswalkDateEditor } from './CrosswalkDateEditor';
+describe('CrosswalkDateEditor tests', function () {
+    afterEach(function () {
+        jest.clearAllMocks();
+    });
+    var date = new Date('01/01/2021').valueOf();
+    var defaultProps = {
+        value: date,
+        classes: { root: 'someClass' },
+        onChange: jest.fn()
+    };
+    var setUp = function (props) {
+        if (props === void 0) { props = defaultProps; }
+        var user = userEvent.setup();
+        var Providers = function (_a) {
+            var children = _a.children;
+            return React.createElement(LocalizationProvider, { dateAdapter: AdapterMoment }, children);
+        };
+        return __assign(__assign({}, render(React.createElement(CrosswalkDateEditor, __assign({}, props)), { wrapper: Providers })), { user: user });
+    };
+    it('new should call props.onChange when calling TimestampEditor onClose prop', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp().user;
+                    return [4 /*yield*/, user.click(screen.getByRole('button'))];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, user.click(screen.getByText('5'))];
+                case 2:
+                    _a.sent();
+                    expect(screen.getByDisplayValue('01/05/2021 12:00:00 AM')).toBeInTheDocument();
+                    return [4 /*yield*/, user.click(screen.getAllByRole('button')[0])];
+                case 3:
+                    _a.sent();
+                    expect(defaultProps.onChange).toHaveBeenCalledWith(new Date('01/05/2021 12:00:00 AM').valueOf());
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should call props.onChange when calling TimestampEditor onBlur for input', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user, newDate;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp().user;
+                    newDate = '10/10/2021';
+                    return [4 /*yield*/, user.type(screen.getByRole('textbox'), '01/01/2020')];
+                case 1:
+                    _a.sent();
+                    expect(screen.getByDisplayValue('01/01/2020 12:00:00 AM')).toBeInTheDocument();
+                    return [4 /*yield*/, user.type(screen.getByRole('textbox'), newDate)];
+                case 2:
+                    _a.sent();
+                    expect(screen.getByDisplayValue('10/10/2021 12:00:00 AM')).toBeInTheDocument();
+                    expect(defaultProps.onChange).not.toHaveBeenCalled();
+                    return [4 /*yield*/, user.tab()];
+                case 3:
+                    _a.sent();
+                    expect(defaultProps.onChange).toHaveBeenCalledWith(new Date(newDate).valueOf());
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should change value of component when value property updated', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var rerender;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    rerender = setUp().rerender;
+                    return [4 /*yield*/, rerender(React.createElement(CrosswalkDateEditor, __assign({}, defaultProps, { value: new Date('10/10/2021').valueOf() })))];
+                case 1:
+                    _a.sent();
+                    expect(screen.getByDisplayValue('10/10/2021 12:00:00 AM')).toBeInTheDocument();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+});

package/esm/features/crosswalks/CrosswalkDateEditor/index.d.ts

@@ -0,0 +1 @@
+export { CrosswalkDateEditor } from './CrosswalkDateEditor';

package/esm/features/crosswalks/CrosswalkDateEditor/index.js

@@ -0,0 +1 @@
+export { CrosswalkDateEditor } from './CrosswalkDateEditor';

package/esm/features/crosswalks/CrosswalkDragLayer/CrosswalkDragLayer.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const CrosswalkDragLayer: React.MemoExoticComponent<() => JSX.Element>;

package/esm/features/crosswalks/CrosswalkDragLayer/CrosswalkDragLayer.js

@@ -0,0 +1,25 @@
+import React, { memo, useRef } from 'react';
+import { useDragLayer } from 'react-dnd';
+import { CrosswalkDragPreview } from './components/CrosswalkDragPreview';
+import { useStyles } from './styles';
+export var CrosswalkDragLayer = memo(function () {
+    var _a;
+    var styles = useStyles();
+    var _b = useDragLayer(function (monitor) { return ({
+        isDragging: monitor.isDragging(),
+        clientOffset: monitor.getClientOffset(),
+        item: monitor.getItem()
+    }); }), isDragging = _b.isDragging, clientOffset = _b.clientOffset, item = _b.item;
+    var dragLayerRef = useRef();
+    var dragLayerRect = ((_a = dragLayerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || { x: 0, y: 0 };
+    var dragItemX = (clientOffset === null || clientOffset === void 0 ? void 0 : clientOffset.x) - (dragLayerRect === null || dragLayerRect === void 0 ? void 0 : dragLayerRect.x);
+    var dragItemY = (clientOffset === null || clientOffset === void 0 ? void 0 : clientOffset.y) - (dragLayerRect === null || dragLayerRect === void 0 ? void 0 : dragLayerRect.y);
+    var dragItemTransform = "translate(".concat(dragItemX, "px, ").concat(dragItemY, "px");
+    return (isDragging && (React.createElement("div", { ref: dragLayerRef, className: styles.dragLayer },
+        React.createElement("div", { style: {
+                display: 'flex',
+                transform: dragItemTransform,
+                WebkitTransform: dragItemTransform
+            } }, item.type === 'Crosswalk' && React.createElement(CrosswalkDragPreview, { crosswalk: item.crosswalk })))));
+});
+CrosswalkDragLayer.displayName = 'CrosswalkDragLayer';

package/esm/features/crosswalks/CrosswalkDragLayer/CrosswalkDragLayer.test.d.ts

@@ -0,0 +1 @@
+export {};

package/esm/features/crosswalks/CrosswalkDragLayer/CrosswalkDragLayer.test.js

@@ -0,0 +1,53 @@
+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 React from 'react';
+import { shallow } from 'enzyme';
+import * as reactDnd from 'react-dnd';
+import { CrosswalkDragPreview } from './components/CrosswalkDragPreview';
+import { CrosswalkDragLayer } from './CrosswalkDragLayer';
+jest.mock('react-dnd', function () { return (__assign(__assign({}, jest.requireActual('react-dnd')), { useDragLayer: jest.fn() })); });
+describe('CrosswalkDragLayer tests', function () {
+    var monitor = {};
+    jest.spyOn(reactDnd, 'useDragLayer').mockImplementation(function (fn) { return fn(monitor); });
+    it('should not render drag layer if nothing is being dragged', function () {
+        monitor = {
+            isDragging: function () { return false; },
+            getClientOffset: function () { return null; },
+            getItem: function () { return null; }
+        };
+        var wrapper = shallow(React.createElement(CrosswalkDragLayer, null));
+        expect(wrapper.find('.dragLayer')).toHaveLength(0);
+    });
+    it('should render drag item with correct offset', function () {
+        monitor = {
+            isDragging: function () { return true; },
+            getClientOffset: function () { return ({ x: 100, y: 200 }); },
+            getItem: function () { return ({ type: 'Some Item' }); }
+        };
+        var wrapper = shallow(React.createElement(CrosswalkDragLayer, null));
+        expect(wrapper.find('.dragLayer')).toHaveLength(1);
+        expect(wrapper.find('.dragLayer > div').prop('style').transform).toBe('translate(100px, 200px');
+    });
+    it('should render CrosswalkDragPreview for crosswalk item', function () {
+        var crosswalk = { uri: 'entities/1/crosswalks/1', type: 'configuration/sources/FB', value: '123' };
+        monitor = {
+            isDragging: function () { return true; },
+            getClientOffset: function () { return ({ x: 100, y: 200 }); },
+            getItem: function () { return ({
+                type: 'Crosswalk',
+                crosswalk: crosswalk
+            }); }
+        };
+        var wrapper = shallow(React.createElement(CrosswalkDragLayer, null));
+        expect(wrapper.find(CrosswalkDragPreview).prop('crosswalk')).toEqual(crosswalk);
+    });
+});

package/esm/features/crosswalks/CrosswalkDragLayer/components/CrosswalkDragPreview/CrosswalkDragPreview.d.ts

@@ -0,0 +1,6 @@
+import { CrosswalkBase } from '@reltio/mdm-sdk';
+type Props = {
+    crosswalk: CrosswalkBase;
+};
+export declare const CrosswalkDragPreview: ({ crosswalk }: Props) => JSX.Element;
+export {};

package/esm/features/crosswalks/CrosswalkDragLayer/components/CrosswalkDragPreview/CrosswalkDragPreview.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { getSourceSystemLabel } from '@reltio/mdm-sdk';
+import Typography from '@mui/material/Typography';
+import { useMdmMetadata } from '../../../../../contexts/MdmModuleContext';
+import { useCrosswalkColor } from '../../../../../contexts/CrosswalksDisplayContext';
+import { SourceIcon } from '../../../../../SourceIcon';
+import { ColoredBlock } from '../../../ColoredBlock';
+import { useStyles } from './styles';
+export var CrosswalkDragPreview = function (_a) {
+    var crosswalk = _a.crosswalk;
+    var styles = useStyles();
+    var metadata = useMdmMetadata();
+    var color = useCrosswalkColor(crosswalk);
+    var sourceSystemLabel = getSourceSystemLabel(metadata, crosswalk.type);
+    return (React.createElement(ColoredBlock, { color: color, className: styles.crosswalkPreview },
+        React.createElement(SourceIcon, { className: styles.sourceIcon, sourceType: crosswalk.type }),
+        React.createElement(Typography, { className: styles.sourceLabel, variant: 'body2' }, sourceSystemLabel)));
+};

package/esm/features/crosswalks/CrosswalkDragLayer/components/CrosswalkDragPreview/CrosswalkDragPreview.test.d.ts

@@ -0,0 +1 @@
+export {};

package/esm/features/crosswalks/CrosswalkDragLayer/components/CrosswalkDragPreview/CrosswalkDragPreview.test.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import * as CrosswalksDisplay from '../../../../../contexts/CrosswalksDisplayContext';
+import { MdmModuleProvider } from '../../../../../contexts/MdmModuleContext';
+import { SourceIcon } from '../../../../../SourceIcon';
+import { ColoredBlock } from '../../../ColoredBlock/ColoredBlock';
+import { CrosswalkDragPreview } from './CrosswalkDragPreview';
+describe('CrosswalkDragPreview tests', function () {
+    beforeAll(function () {
+        jest.spyOn(CrosswalksDisplay, 'useCrosswalkColor').mockImplementation(function (crosswalks) { return crosswalks === null || crosswalks === void 0 ? void 0 : crosswalks.value; });
+    });
+    it('should render correctly', function () {
+        var metadata = {
+            sources: [
+                {
+                    uri: 'configuration/sources/FB',
+                    label: 'Facebook'
+                }
+            ]
+        };
+        var crosswalk = { uri: 'entities/1/crosswalks/1', type: 'configuration/sources/FB', value: '123' };
+        var wrapper = mount(React.createElement(MdmModuleProvider, { values: { metadata: metadata } },
+            React.createElement(CrosswalkDragPreview, { crosswalk: crosswalk })));
+        expect(wrapper.find(ColoredBlock).prop('color')).toBe('123');
+        expect(wrapper.find(SourceIcon).prop('sourceType')).toBe(crosswalk.type);
+        expect(wrapper.find('p.sourceLabel').text()).toBe('Facebook');
+    });
+});

package/esm/features/crosswalks/CrosswalkDragLayer/components/CrosswalkDragPreview/index.d.ts

@@ -0,0 +1 @@
+export { CrosswalkDragPreview } from './CrosswalkDragPreview';