npm - @reltio/components - Versions diffs - 1.4.912 → 1.4.916 - Mend

@reltio/components 1.4.912 → 1.4.916

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (61) hide show

package/cjs/components/MergeButton/MergeButton.d.ts CHANGED Viewed

@@ -10,6 +10,7 @@ declare type Props = {
     disabled?: boolean;
     onStartRequest?: () => void;
     onFinishRequest?: () => void;
+    onError?: () => void;
 };
 export declare const MergeButton: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLLIElement>>;
 export {};

package/cjs/components/MergeButton/MergeButton.js CHANGED Viewed

@@ -52,12 +52,13 @@ var core_1 = require("../../core");
 var ActionButton_1 = require("../ActionButton/ActionButton");
 var hooks_1 = require("../../hooks");
 exports.MergeButton = react_1.forwardRef(function (_a, ref) {
-    var className = _a.className, _b = _a.mode, mode = _b === void 0 ? ActionButton_1.ActionButtonMode.iconButton : _b, _c = _a.onMenuClose, onMenuClose = _c === void 0 ? core_1.noop : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, entity = _a.entity, entities = _a.entities, onStartRequest = _a.onStartRequest, onFinishRequest = _a.onFinishRequest, otherProps = __rest(_a, ["className", "mode", "onMenuClose", "disabled", "entity", "entities", "onStartRequest", "onFinishRequest"]);
+    var className = _a.className, _b = _a.mode, mode = _b === void 0 ? ActionButton_1.ActionButtonMode.iconButton : _b, _c = _a.onMenuClose, onMenuClose = _c === void 0 ? core_1.noop : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, entity = _a.entity, entities = _a.entities, onStartRequest = _a.onStartRequest, onFinishRequest = _a.onFinishRequest, onError = _a.onError, otherProps = __rest(_a, ["className", "mode", "onMenuClose", "disabled", "entity", "entities", "onStartRequest", "onFinishRequest", "onError"]);
     var sendMergeAllRequest = hooks_1.useMergeAllRequest({
         entity: entity,
         entities: entities,
         onStartRequest: onStartRequest,
-        onFinishRequest: onFinishRequest
+        onFinishRequest: onFinishRequest,
+        onError: onError
     }).sendMergeAllRequest;
     return (react_1.default.createElement(ActionButton_1.ActionButton, __assign({ className: className, disabled: disabled, mode: mode, label: ui_i18n_1.default.text('Merge'), icon: mergeIcon_svg_1.default, onClick: sendMergeAllRequest, onMenuClose: onMenuClose, ref: ref }, otherProps)));
 });

package/cjs/components/SideIconPanel/SideButtonsPanel.d.ts CHANGED Viewed

@@ -3,11 +3,11 @@ declare type Props = {
     buttonsProps: {
         icon: ElementType;
         tooltipTitle: string;
-        id: string;
+        id: number;
     }[];
-    activeIndex: number;
+    activeIndexId: number;
     className?: string;
-    onButtonClick: (index: number) => void;
+    onButtonClick: (id: number) => void;
 };
 export declare const SideButtonsPanel: VFC<Props>;
 export {};

package/cjs/components/SideIconPanel/SideButtonsPanel.js CHANGED Viewed

@@ -31,12 +31,12 @@ var classnames_1 = __importDefault(require("classnames"));
 var SmallIconButton_1 = require("../SmallIconButton");
 var styles_1 = require("./styles");
 var SideButtonsPanel = function (_a) {
-    var buttonsProps = _a.buttonsProps, activeIndex = _a.activeIndex, className = _a.className, onButtonClick = _a.onButtonClick;
+    var buttonsProps = _a.buttonsProps, activeIndexId = _a.activeIndexId, className = _a.className, onButtonClick = _a.onButtonClick;
     var styles = styles_1.useStyles();
-    return (react_1.default.createElement("div", { className: classnames_1.default(styles.container, className) }, buttonsProps.map(function (_a, index) {
+    return (react_1.default.createElement("div", { className: classnames_1.default(styles.container, className) }, buttonsProps.map(function (_a) {
         var _b;
         var id = _a.id, buttonProps = __rest(_a, ["id"]);
-        return (react_1.default.createElement(SmallIconButton_1.SmallIconButtonWithTooltip, __assign({}, buttonProps, { size: "S", key: id, className: classnames_1.default((_b = {}, _b[styles.active] = activeIndex === index, _b), styles.buttonWrapper), onClick: function () { return onButtonClick(index); }, "data-reltio-id": "reltio-profile-right-side-button-" + id })));
+        return (react_1.default.createElement(SmallIconButton_1.SmallIconButtonWithTooltip, __assign({}, buttonProps, { size: "S", key: id, className: classnames_1.default((_b = {}, _b[styles.active] = activeIndexId === id, _b), styles.buttonWrapper), onClick: function () { return onButtonClick(id); }, "data-reltio-id": "reltio-profile-right-side-button-" + id })));
     })));
 };
 exports.SideButtonsPanel = SideButtonsPanel;

package/cjs/components/SidePanel/SidePanelContentHeader/SidePanelContentHeader.d.ts CHANGED Viewed

@@ -1,7 +1,8 @@
 import { ReactNode, VFC } from 'react';
 declare type HeaderProps = {
-    mainTitle: string;
-    secondTitle: string;
+    mainTitle?: string;
+    secondTitle?: string;
+    content?: ReactNode;
     rightContent?: ReactNode;
 };
 declare type Props = HeaderProps & {

package/cjs/components/SidePanel/SidePanelContentHeader/SidePanelContentHeader.js CHANGED Viewed

@@ -12,13 +12,14 @@ var Divider_1 = __importDefault(require("@material-ui/core/Divider"));
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
 var SmallIconButton_1 = require("../../SmallIconButton");
 var SidePanelContentHeader = function (_a) {
-    var onClose = _a.onClose, mainTitle = _a.mainTitle, secondTitle = _a.secondTitle, rightContent = _a.rightContent;
+    var onClose = _a.onClose, mainTitle = _a.mainTitle, secondTitle = _a.secondTitle, content = _a.content, rightContent = _a.rightContent;
     var styles = styles_1.useStyles();
     return (react_1.default.createElement("div", { className: styles.container },
         react_1.default.createElement(SmallIconButton_1.SmallIconButtonWithTooltip, { size: "S", icon: Close_1.default, onClick: onClose, className: styles.icon, tooltipTitle: ui_i18n_1.default.text('Close') }),
-        react_1.default.createElement(Typography_1.default, { variant: "h6" }, mainTitle),
-        react_1.default.createElement(Divider_1.default, { orientation: "vertical", flexItem: true, className: styles.divider }),
-        react_1.default.createElement(Typography_1.default, { variant: "body1", color: "textSecondary", className: styles.secondTitle }, secondTitle),
-        rightContent));
+        content || (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(Typography_1.default, { variant: "h6" }, mainTitle),
+            react_1.default.createElement(Divider_1.default, { orientation: "vertical", flexItem: true, className: styles.divider }),
+            react_1.default.createElement(Typography_1.default, { variant: "body1", color: "textSecondary", className: styles.secondTitle }, secondTitle),
+            rightContent))));
 };
 exports.SidePanelContentHeader = SidePanelContentHeader;

package/cjs/components/attributes/AttributesView/index.js CHANGED Viewed

@@ -9,7 +9,7 @@ var mdm_module_1 = __importDefault(require("@reltio/mdm-module"));
 var AttributesView_1 = __importDefault(require("./AttributesView"));
 exports.AttributesView = AttributesView_1.default;
 var mapStateToProps = function (state, ownProps) { return ({
-    entity: ownProps.entity || mdm_module_1.default.selectors.getEntity(state),
+    entity: ownProps.entity || mdm_module_1.default.selectors.getEntityWithDiff(state),
     mode: ownProps.mode || mdm_module_1.default.selectors.getMode(state)
 }); };
 exports.default = react_redux_1.connect(mapStateToProps)(AttributesView_1.default);

package/cjs/components/attributes/ImageAttributesLine/ImageAttributesLine.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 import React from 'react';
-import { AttributeType, ImageAttributeValue } from '@reltio/mdm-sdk';
+import { RequestNextPageOfAttributeValuesPayload } from '@reltio/mdm-module';
+import { AttributeType, ImageAttributeValue, Paging } from '@reltio/mdm-sdk';
 import { AttributeItem } from '../editMode/AttributesPager';
 import { SIZES_TYPE } from './styles';
 export declare type ImageRenderProps = {
@@ -19,6 +20,10 @@ declare type Props = {
     onUpload?: () => void;
     onDeleteAttribute?: (param: AttributeItem) => void;
     imageSize?: SIZES_TYPE;
+    paging?: Paging;
+    requestNextPageOfAttributeValues?: (payload: RequestNextPageOfAttributeValuesPayload) => void;
+    parentUri?: string;
+    showNonOv?: boolean;
 };
-declare const ImageAttributesLine: ({ attributeType, attributeValues, renderImage, overlay, countFixedItems, children, onUpload, onDeleteAttribute, imageSize }: Props) => JSX.Element;
+declare const ImageAttributesLine: ({ attributeType, attributeValues, renderImage, overlay, countFixedItems, children, onUpload, onDeleteAttribute, imageSize, paging, parentUri, showNonOv, requestNextPageOfAttributeValues }: Props) => JSX.Element;
 export default ImageAttributesLine;

package/cjs/components/attributes/ImageAttributesLine/ImageAttributesLine.js CHANGED Viewed

@@ -45,11 +45,25 @@ var imageAttributes_1 = require("../helpers/imageAttributes");
 var constants_1 = require("./constants");
 var styles_1 = require("./styles");
 var ImageAttributesLine = function (_a) {
-    var attributeType = _a.attributeType, _b = _a.attributeValues, attributeValues = _b === void 0 ? [] : _b, renderImage = _a.renderImage, _c = _a.overlay, overlay = _c === void 0 ? false : _c, _d = _a.countFixedItems, countFixedItems = _d === void 0 ? 0 : _d, children = _a.children, onUpload = _a.onUpload, onDeleteAttribute = _a.onDeleteAttribute, _e = _a.imageSize, imageSize = _e === void 0 ? constants_1.DEFAULT_IMAGE_SIZE : _e;
+    var attributeType = _a.attributeType, _b = _a.attributeValues, attributeValues = _b === void 0 ? [] : _b, renderImage = _a.renderImage, _c = _a.overlay, overlay = _c === void 0 ? false : _c, _d = _a.countFixedItems, countFixedItems = _d === void 0 ? 0 : _d, children = _a.children, onUpload = _a.onUpload, onDeleteAttribute = _a.onDeleteAttribute, _e = _a.imageSize, imageSize = _e === void 0 ? constants_1.DEFAULT_IMAGE_SIZE : _e, paging = _a.paging, parentUri = _a.parentUri, showNonOv = _a.showNonOv, requestNextPageOfAttributeValues = _a.requestNextPageOfAttributeValues;
     var entity = react_redux_1.useSelector(mdm_module_1.default.selectors.getEntity) || {};
     var isViewMode = react_redux_1.useSelector(mdm_module_1.default.selectors.getIsViewMode);
     var dispatch = react_redux_1.useDispatch();
     var styles = styles_1.useStyles(imageSize);
+    react_1.useEffect(function () {
+        if (paging && requestNextPageOfAttributeValues) {
+            var totalVisibleValues = showNonOv ? paging.totalOvValues : paging.totalValues;
+            if (totalVisibleValues > attributeValues.length) {
+                requestNextPageOfAttributeValues({
+                    parentUri: parentUri,
+                    attributeTypeUri: attributeType.uri,
+                    attributeTypeName: attributeType.name,
+                    values: [],
+                    defaultMaxValues: totalVisibleValues
+                });
+            }
+        }
+    }, [paging, requestNextPageOfAttributeValues, attributeType, parentUri, attributeValues.length, showNonOv]);
     var lastWidth = react_1.useRef();
     var _f = react_1.useState(0), maxItems = _f[0], setMaxItems = _f[1];
     var _g = react_1.useState(0), hiddenItemsLength = _g[0], setHiddenItemsLength = _g[1];

package/cjs/components/attributes/editMode/AttributesPager/AttributesPager.js CHANGED Viewed

@@ -80,7 +80,7 @@ var AttributesPager = function (_a) {
                 return (react_1.default.createElement(BranchDecorator_1.default, { enabled: drawLines },
                     react_1.default.createElement("div", { className: styles.wrapper },
                         react_1.default.createElement(Title_1.default, { label: attributeType === null || attributeType === void 0 ? void 0 : attributeType.label, attributeType: attributeType }),
-                        react_1.default.createElement(ImageAttributesLine_1.default, { attributeValues: visibleValues, attributeType: attributeType, onDeleteAttribute: onDeleteAttribute, parentUri: parentUri, onChangeAttribute: onChangeAttribute }))));
+                        react_1.default.createElement(ImageAttributesLine_1.default, { attributeValues: visibleValues, attributeType: attributeType, paging: paging, onDeleteAttribute: onDeleteAttribute, parentUri: parentUri, onChangeAttribute: onChangeAttribute, requestNextPageOfAttributeValues: requestNextPageOfAttributeValues, showNonOv: showNonOv }))));
             default:
                 return (react_1.default.createElement(AttributeRenderer_1.default, __assign({ values: visibleValues, attributeType: attributeType, max: max, paging: paging, crosswalks: crosswalks, showEmptyEditors: showEmptyEditors, drawLines: drawLines, requestNextPageOfAttributeValues: requestNextPageOfAttributeValues, showNonOv: showNonOv }, commonProps)));
         }

package/cjs/components/attributes/editMode/ImageAttributesLine/ImageAttributesLine.d.ts CHANGED Viewed

@@ -1,12 +1,18 @@
 /// <reference types="react" />
-import { AttributeType, ImageAttributeValue } from '@reltio/mdm-sdk';
+import { RequestNextPageOfAttributeValuesPayload } from '@reltio/mdm-module';
+import { AttributeType, ImageAttributeValue, Paging } from '@reltio/mdm-sdk';
 import { AttributeItem } from '../AttributesPager';
+import { SIZES_TYPE } from '../../ImageAttributesLine/styles';
 declare type Props = {
     attributeType: AttributeType;
     attributeValues: ImageAttributeValue[];
     onDeleteAttribute: (param: AttributeItem) => void;
     onChangeAttribute: (param: AttributeItem) => void;
     parentUri: string;
+    imageSize?: SIZES_TYPE;
+    paging?: Paging;
+    requestNextPageOfAttributeValues?: (payload: RequestNextPageOfAttributeValuesPayload) => void;
+    showNonOv?: boolean;
 };
-declare const ImageAttributesLine: ({ attributeType, attributeValues, onDeleteAttribute, onChangeAttribute, parentUri }: Props) => JSX.Element;
+declare const ImageAttributesLine: ({ attributeType, attributeValues, onDeleteAttribute, onChangeAttribute, requestNextPageOfAttributeValues, parentUri, paging, showNonOv, imageSize }: Props) => JSX.Element;
 export default ImageAttributesLine;

package/cjs/components/attributes/editMode/ImageAttributesLine/ImageAttributesLine.js CHANGED Viewed

@@ -35,14 +35,14 @@ var ImageAttributesLine_1 = __importDefault(require("../../ImageAttributesLine")
 var constants_1 = require("../../ImageAttributesLine/constants");
 var styles_1 = require("./styles");
 var ImageAttributesLine = function (_a) {
-    var _b = _a.attributeType, attributeType = _b === void 0 ? {} : _b, _c = _a.attributeValues, attributeValues = _c === void 0 ? [] : _c, onDeleteAttribute = _a.onDeleteAttribute, onChangeAttribute = _a.onChangeAttribute, parentUri = _a.parentUri;
-    var styles = styles_1.useStyles({ imageMargin: constants_1.IMAGE_MARGIN, imageWidth: constants_1.IMAGE_WIDTH, imageHeight: constants_1.IMAGE_HEIGHT });
+    var _b = _a.attributeType, attributeType = _b === void 0 ? {} : _b, _c = _a.attributeValues, attributeValues = _c === void 0 ? [] : _c, onDeleteAttribute = _a.onDeleteAttribute, onChangeAttribute = _a.onChangeAttribute, requestNextPageOfAttributeValues = _a.requestNextPageOfAttributeValues, parentUri = _a.parentUri, paging = _a.paging, showNonOv = _a.showNonOv, _d = _a.imageSize, imageSize = _d === void 0 ? constants_1.DEFAULT_IMAGE_SIZE : _d;
+    var styles = styles_1.useStyles(imageSize);
     var entity = react_redux_1.useSelector(mdm_module_1.default.selectors.getEntity) || {};
     var defaultProfilePic = react_redux_1.useSelector(function (state) {
         return mdm_module_1.default.selectors.getModifiedEntityDefaultProfilePic(state, entity.uri);
     });
     var dispatch = react_redux_1.useDispatch();
-    var _d = react_1.useState(false), isVisibleUploadDialog = _d[0], setIsVisibleUploadDialog = _d[1];
+    var _e = react_1.useState(false), isVisibleUploadDialog = _e[0], setIsVisibleUploadDialog = _e[1];
     var toggleVisibilityUploadDialog = react_1.useCallback(function () {
         setIsVisibleUploadDialog(function (visible) { return !visible; });
     }, []);
@@ -94,12 +94,12 @@ var ImageAttributesLine = function (_a) {
             var uri = attribute.uri;
             var onOpenImageGalleryDialog = methods.onOpenImageGalleryDialog;
             return (react_1.default.createElement("div", { className: styles.image, key: uri },
-                react_1.default.createElement(Image_1.default, { src: src, overlay: renderImageActionsOverlay(methods, attribute), onClick: function () { return onOpenImageGalleryDialog(uri); } })));
+                react_1.default.createElement(Image_1.default, { src: src, overlay: renderImageActionsOverlay(methods, attribute), onClick: function () { return onOpenImageGalleryDialog(uri); }, size: { imageWidth: imageSize.imageWidth, imageHeight: imageSize.imageHeight } })));
         };
         return renderImage;
     };
     return (react_1.default.createElement("div", { className: styles.root },
-        react_1.default.createElement(ImageAttributesLine_1.default, { attributeValues: attributeValues, attributeType: attributeType, renderImage: renderImage, overlay: true, countFixedItems: 1, onUpload: toggleVisibilityUploadDialog, onDeleteAttribute: handleDeleteAttribute },
+        react_1.default.createElement(ImageAttributesLine_1.default, { attributeValues: attributeValues, attributeType: attributeType, renderImage: renderImage, overlay: true, countFixedItems: 1, onUpload: toggleVisibilityUploadDialog, onDeleteAttribute: handleDeleteAttribute, imageSize: imageSize, requestNextPageOfAttributeValues: requestNextPageOfAttributeValues, paging: paging, parentUri: parentUri, showNonOv: showNonOv },
             react_1.default.createElement("div", { className: styles.uploadContainer, onClick: toggleVisibilityUploadDialog },
                 react_1.default.createElement(SmallIconButton_1.SmallIconButton, { className: styles.uploadButton, iconClassName: styles.uploadIcon, icon: CloudUpload_1.default }))),
         react_1.default.createElement(UploadImageDialog_1.UploadImageDialog, { open: isVisibleUploadDialog, onUpload: handleAddAttributes, onClose: toggleVisibilityUploadDialog })));

package/cjs/components/attributes/editMode/SimpleAttributeEditor/selectors/helpers/parents.js CHANGED Viewed

@@ -30,11 +30,13 @@ var getParents = function (state, valueUri, node) {
     });
     var modifiedEntities = mdm_module_1.default.selectors.getModifiedEntities(state);
     var entityUri = mdm_module_1.default.selectors.getEntityUri(state);
+    var connections = mdm_module_1.default.selectors.getAllRelationsToAddAndEdit(state);
     var ownParentNodesValues = mdm_sdk_1.filterRelatedParentValuesForDependentLookupValueUri({
         parentValues: parentNodesValues,
         valueUri: valueUri,
         entityUri: entityUri,
-        modifiedEntities: modifiedEntities
+        modifiedEntities: modifiedEntities,
+        connections: connections
     });
     var neededParentsAttributeTypes = node.parents.map(function (type) {
         var parentNode = mdm_module_1.default.selectors.getDependentLookupsStructureNode(state, type);

package/cjs/components/attributes/readMode/AttributesPager/AttributesPager.js CHANGED Viewed

@@ -71,7 +71,7 @@ var AttributesPager = function (_a) {
             case RENDERER_TYPES.imageLine:
                 return (react_1.default.createElement(react_1.default.Fragment, null,
                     showTitle && react_1.default.createElement(Title_1.default, { label: attributeType === null || attributeType === void 0 ? void 0 : attributeType.label, attributeType: attributeType }),
-                    react_1.default.createElement(ImageAttributesLine_1.default, { attributeValues: visibleValues, attributeType: attributeType })));
+                    react_1.default.createElement(ImageAttributesLine_1.default, { attributeValues: visibleValues, attributeType: attributeType, paging: paging, parentUri: parentUri, requestNextPageOfAttributeValues: requestNextPageOfAttributeValues, showNonOv: showNonOv })));
             case RENDERER_TYPES.special:
                 return react_1.default.createElement(SpecialRenderer_1.default, { values: visibleValues, attributeType: attributeType, showTitle: showTitle });
         }

package/cjs/components/attributes/readMode/ImageAttributesLine/ImageAttributesLine.d.ts CHANGED Viewed

@@ -1,10 +1,15 @@
 /// <reference types="react" />
-import { AttributeType, ImageAttributeValue } from '@reltio/mdm-sdk';
+import { AttributeType, ImageAttributeValue, Paging } from '@reltio/mdm-sdk';
+import { RequestNextPageOfAttributeValuesPayload } from '@reltio/mdm-module';
 import { SIZES_TYPE } from '../../ImageAttributesLine/styles';
 declare type Props = {
     attributeValues: ImageAttributeValue[];
     attributeType: AttributeType;
     imageSize?: SIZES_TYPE;
+    paging?: Paging;
+    parentUri?: string;
+    showNonOv?: boolean;
+    requestNextPageOfAttributeValues?: (payload: RequestNextPageOfAttributeValuesPayload) => void;
 };
-declare const ImageAttributesLine: ({ attributeType, attributeValues, imageSize }: Props) => JSX.Element;
+declare const ImageAttributesLine: ({ attributeType, attributeValues, paging, parentUri, requestNextPageOfAttributeValues, showNonOv, imageSize }: Props) => JSX.Element;
 export default ImageAttributesLine;

package/cjs/components/attributes/readMode/ImageAttributesLine/ImageAttributesLine.js CHANGED Viewed

@@ -32,7 +32,7 @@ var constants_1 = require("../../ImageAttributesLine/constants");
 var historyAppearance_1 = require("../helpers/historyAppearance");
 var styles_1 = require("./styles");
 var ImageAttributesLine = function (_a) {
-    var attributeType = _a.attributeType, _b = _a.attributeValues, attributeValues = _b === void 0 ? [] : _b, _c = _a.imageSize, imageSize = _c === void 0 ? constants_1.DEFAULT_IMAGE_SIZE : _c;
+    var attributeType = _a.attributeType, _b = _a.attributeValues, attributeValues = _b === void 0 ? [] : _b, paging = _a.paging, parentUri = _a.parentUri, requestNextPageOfAttributeValues = _a.requestNextPageOfAttributeValues, showNonOv = _a.showNonOv, _c = _a.imageSize, imageSize = _c === void 0 ? constants_1.DEFAULT_IMAGE_SIZE : _c;
     var styles = styles_1.useStyles(imageSize);
     var appearance = react_1.useContext(contexts_1.HistoryDiffContext).appearance;
     var renderImage = function (_a) {
@@ -50,6 +50,6 @@ var ImageAttributesLine = function (_a) {
         };
         return renderImage;
     };
-    return (react_1.default.createElement(ImageAttributesLine_1.default, { attributeValues: attributeValues, attributeType: attributeType, renderImage: renderImage, imageSize: imageSize }));
+    return (react_1.default.createElement(ImageAttributesLine_1.default, { attributeValues: attributeValues, attributeType: attributeType, renderImage: renderImage, imageSize: imageSize, requestNextPageOfAttributeValues: requestNextPageOfAttributeValues, paging: paging, parentUri: parentUri, showNonOv: showNonOv }));
 };
 exports.default = ImageAttributesLine;

package/cjs/components/history/HistoryTree/HistoryTree.js CHANGED Viewed

@@ -39,7 +39,8 @@ var react_resize_detector_1 = __importDefault(require("react-resize-detector"));
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
 var ramda_1 = require("ramda");
 var classnames_1 = __importDefault(require("classnames"));
-var mdm_module_1 = require("@reltio/mdm-module");
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var mdm_module_1 = __importStar(require("@reltio/mdm-module"));
 var Button_1 = __importDefault(require("@material-ui/core/Button"));
 var HistoryRow_1 = __importDefault(require("../HistoryRow/HistoryRow"));
 var HistoryGraph_1 = __importDefault(require("../HistoryGraph/HistoryGraph"));
@@ -50,6 +51,7 @@ var HistoryTree = function (_a) {
     var historyData = _a.historyData, isLoading = _a.isLoading, canLoadMore = _a.canLoadMore, onLoadMore = _a.onLoadMore, entityUri = _a.entityUri, historyEvent = _a.historyEvent, findPreviousChange = _a.findPreviousChange;
     var styles = styles_1.useStyles();
     var dispatch = react_redux_1.useDispatch();
+    var isEditableMode = react_redux_1.useSelector(mdm_module_1.default.selectors.getIsEditableMode);
     var _c = react_1.useState({ historyLanes: {}, rows: [] }), graphData = _c[0], setGraphData = _c[1];
     var _d = react_1.useState(false), isScrollable = _d[0], setIsScrollable = _d[1];
     var _e = react_1.useState(-1), selectedIndex = _e[0], setSelectedIndex = _e[1];
@@ -78,6 +80,14 @@ var HistoryTree = function (_a) {
         setIsScrollable(scrollLeft < scrollWidth - clientWidth);
     };
     var handleHistoryRowClick = function (index, change, isSelected, isCurrent) {
+        if (isEditableMode) {
+            if (window.confirm(ui_i18n_1.default.text('Are you sure you want to go in history mode? All your changes will be lost.'))) {
+                dispatch(mdm_module_1.profile.mode.actions.modeUpdated(mdm_sdk_1.Mode.Viewing));
+            }
+            else {
+                return;
+            }
+        }
         if ((isCurrent && !isSelected) || (!isCurrent && isSelected)) {
             dispatch(mdm_module_1.profile.history.actions.clearHistoryEvent());
             setSelectedIndex(0);

package/cjs/components/history/hooks/useHistory.d.ts CHANGED Viewed

@@ -12,5 +12,6 @@ export declare const useHistory: ({ entityUri, enabled }: Props) => {
     historyWithTotal: import("@reltio/mdm-sdk").HistoryWithTotal;
     historyFilter: HistoryFilter;
     setHistoryFilter: import("react").Dispatch<import("react").SetStateAction<HistoryFilter>>;
+    reloadHistory: () => void;
 };
 export {};

package/cjs/components/history/hooks/useHistory.js CHANGED Viewed

@@ -21,7 +21,7 @@ var useHistory = function (_a) {
         offset: historyPage * MAX_HISTORY_ROWS,
         order: 'desc',
         showAll: true
-    }), isHistoryLoading = _e.isLoading, historyWithTotal = _e.historyWithTotal, loadMore = _e.loadMore;
+    }), isHistoryLoading = _e.isLoading, historyWithTotal = _e.historyWithTotal, loadMore = _e.loadMore, loadData = _e.loadData;
     var canLoadMore = react_1.useMemo(function () { return (historyPage + 1) * MAX_HISTORY_ROWS <= (historyWithTotal === null || historyWithTotal === void 0 ? void 0 : historyWithTotal.total); }, [
         historyWithTotal,
         historyPage
@@ -32,6 +32,10 @@ var useHistory = function (_a) {
         loadMore((historyPage + 1) * MAX_HISTORY_ROWS);
         setHistoryPage(historyPage + 1);
     }, [loadMore, historyPage, canLoadMore]);
+    var reloadHistory = react_1.useCallback(function () {
+        loadData();
+        setHistoryPage(0);
+    }, [loadData]);
     return {
         isLoading: isHistoryLoading || isHistoricUrisLoading,
         canLoadMore: canLoadMore,
@@ -39,7 +43,8 @@ var useHistory = function (_a) {
         historicUris: historicUris,
         historyWithTotal: historyWithTotal,
         historyFilter: historyFilter,
-        setHistoryFilter: setHistoryFilter
+        setHistoryFilter: setHistoryFilter,
+        reloadHistory: reloadHistory
     };
 };
 exports.useHistory = useHistory;

package/cjs/components/history/hooks/useHistoryDiff.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { HistoryDiff } from '@reltio/mdm-sdk';
2	+ export declare const useHistoryDiff: () => HistoryDiff;

package/cjs/components/history/hooks/useHistoryDiff.js ADDED Viewed

@@ -0,0 +1,62 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useHistoryDiff = void 0;
+var react_1 = require("react");
+var react_redux_1 = require("react-redux");
+var ramda_1 = require("ramda");
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var mdm_module_1 = __importStar(require("@reltio/mdm-module"));
+var defaultHistoryDiff = {
+    appearance: {},
+    attributes: {},
+    roles: [],
+    tags: []
+};
+var fixRefEntity = ramda_1.evolve({
+    refEntity: mdm_sdk_1.wrapInArrayIfNeeded,
+    refRelation: mdm_sdk_1.wrapInArrayIfNeeded
+});
+var prepareHistorySlice = function (historySlice) {
+    if (historySlice) {
+        return ramda_1.evolve({
+            attributes: ramda_1.map(ramda_1.map(fixRefEntity))
+        })(historySlice);
+    }
+    return historySlice;
+};
+var useHistoryDiff = function () {
+    var dispatch = react_redux_1.useDispatch();
+    var historySlice = react_redux_1.useSelector(mdm_module_1.default.selectors.getHistorySlice);
+    var historyDiff = react_redux_1.useSelector(mdm_module_1.default.selectors.getHistoryDiff);
+    var historyMode = react_redux_1.useSelector(mdm_module_1.default.selectors.getHistoryMode);
+    var entity = react_redux_1.useSelector(mdm_module_1.default.selectors.getEntity);
+    react_1.useEffect(function () {
+        if (historySlice) {
+            var aEntity = historySlice.aEntity, bEntity = historySlice.bEntity;
+            var historyManager = mdm_sdk_1.entity.HistoryManager.createHistoryManager(mdm_sdk_1.entity.AttributesDiff);
+            var historyDiff_1 = historyManager.computeEntityHistoryDiff(prepareHistorySlice(historyMode === mdm_module_1.HistoryMode.Current ? entity : bEntity), prepareHistorySlice(aEntity));
+            dispatch(mdm_module_1.profile.history.actions.setHistoryDiff(historyDiff_1));
+        }
+    }, [historySlice, historyMode, dispatch, entity]);
+    return historyDiff || defaultHistoryDiff;
+};
+exports.useHistoryDiff = useHistoryDiff;

package/cjs/components/history/hooks/useHistoryWithTotal.d.ts CHANGED Viewed

@@ -13,5 +13,6 @@ export declare const useHistoryWithTotal: ({ entityUri, enabled, historicUris, .
     isLoading: boolean;
     historyWithTotal: HistoryWithTotal;
     loadMore: (offset: number) => void;
+    loadData: () => void;
 };
 export {};

package/cjs/components/history/hooks/useHistoryWithTotal.js CHANGED Viewed

@@ -74,6 +74,6 @@ var useHistoryWithTotal = function (_a) {
             loadData();
         }
     }, [loadData, enabled]);
-    return { isLoading: isLoading, historyWithTotal: historyWithTotal, loadMore: loadMore };
+    return { isLoading: isLoading, historyWithTotal: historyWithTotal, loadMore: loadMore, loadData: loadData };
 };
 exports.useHistoryWithTotal = useHistoryWithTotal;

package/cjs/components/history/index.d.ts CHANGED Viewed

@@ -2,6 +2,7 @@ export { useHistoricUris } from './hooks/useHistoricUris';
 export { useHistoryWithTotal } from './hooks/useHistoryWithTotal';
 export { useHistorySlice } from './hooks/useHistorySlice';
 export { useHistory } from './hooks/useHistory';
+export { useHistoryDiff } from './hooks/useHistoryDiff';
 export { default as HistoryView } from './HistoryView/HistoryView';
 export { default as HistoryHeader } from './HistoryHeader/HistoryHeader';
 export { default as ProfileBandHistory } from './ProfileBandHistory/ProfileBandHistory';

package/cjs/components/history/index.js CHANGED Viewed

@@ -13,7 +13,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ProfileBandHistory = exports.HistoryHeader = exports.HistoryView = exports.useHistory = exports.useHistorySlice = exports.useHistoryWithTotal = exports.useHistoricUris = void 0;
+exports.ProfileBandHistory = exports.HistoryHeader = exports.HistoryView = exports.useHistoryDiff = exports.useHistory = exports.useHistorySlice = exports.useHistoryWithTotal = exports.useHistoricUris = void 0;
 var useHistoricUris_1 = require("./hooks/useHistoricUris");
 Object.defineProperty(exports, "useHistoricUris", { enumerable: true, get: function () { return useHistoricUris_1.useHistoricUris; } });
 var useHistoryWithTotal_1 = require("./hooks/useHistoryWithTotal");
@@ -22,6 +22,8 @@ var useHistorySlice_1 = require("./hooks/useHistorySlice");
 Object.defineProperty(exports, "useHistorySlice", { enumerable: true, get: function () { return useHistorySlice_1.useHistorySlice; } });
 var useHistory_1 = require("./hooks/useHistory");
 Object.defineProperty(exports, "useHistory", { enumerable: true, get: function () { return useHistory_1.useHistory; } });
+var useHistoryDiff_1 = require("./hooks/useHistoryDiff");
+Object.defineProperty(exports, "useHistoryDiff", { enumerable: true, get: function () { return useHistoryDiff_1.useHistoryDiff; } });
 var HistoryView_1 = require("./HistoryView/HistoryView");
 Object.defineProperty(exports, "HistoryView", { enumerable: true, get: function () { return __importDefault(HistoryView_1).default; } });
 var HistoryHeader_1 = require("./HistoryHeader/HistoryHeader");

package/cjs/components/index.d.ts CHANGED Viewed

@@ -17,6 +17,7 @@ export { default as EditableAttribute } from './attributes/editMode/AttributesFa
 export { default as ReadOnlyAttributeValuesBlock } from './attributes/readMode/AttributeValuesBlock/AttributeValuesBlock';
 export { default as ReadOnlyAttributesList } from './attributes/readMode/AttributesList';
 export { default as ImageAttributesLine } from './attributes/readMode/ImageAttributesLine';
+export { default as EditableImageAttributesLine } from './attributes/editMode/ImageAttributesLine';
 export { default as NestedAttribute } from './attributes/readMode/NestedAttribute';
 export { default as ReferenceAttribute } from './attributes/readMode/ReferenceAttribute';
 export { default as SimpleAttribute } from './attributes/readMode/SimpleAttribute';

package/cjs/components/index.js CHANGED Viewed

@@ -13,9 +13,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.EntityTypeIcon = exports.EntityTypeBadge = exports.EntityAvatar = exports.EMPTY_STATE_VARIANTS = exports.EMPTY_STATE_ICONS = exports.EmptyState = exports.NoResults = exports.NoData = exports.DropDownSelector = exports.DropDownMenuButton = exports.Drawer = exports.DataTypeValue = exports.ConnectionRelationTypeSelector = exports.ConfigureColumnsPopup = exports.MenuWithPopper = exports.DropdownIndicatorWithIconButton = exports.DropdownIndicator = exports.CommentsContainer = exports.ColorBar = exports.CollapseButton = exports.CollaborationItem = exports.ClickAwayProvider = exports.BasicViewHeader = exports.BasicViewContent = exports.BasicView = exports.ProfileBandNavigation = exports.AvatarWithFallback = exports.AutoSizeList = exports.ReadOnlyAttributesPager = exports.SimpleAttribute = exports.ReferenceAttribute = exports.NestedAttribute = exports.ImageAttributesLine = exports.ReadOnlyAttributesList = exports.ReadOnlyAttributeValuesBlock = exports.EditableAttribute = exports.ReadOnlyAttribute = exports.CardinalityMessage = exports.AttributesPager = exports.SimpleAttributeEditor = exports.RelationTypeSelector = exports.ReferenceAttributeEditor = exports.NestedAttributeEditor = exports.MoreAttributesButton = exports.EntitySelector = exports.EntityCreator = exports.AttributesList = exports.BranchDecorator = exports.AttributesView = exports.AttributeListItem = void 0;
-exports.SimpleDropDownSelector = exports.SidePanelContentHeader = exports.SidePanel = exports.SideButtonsPanel = exports.SelectorWithOnlyOptionAutoSelect = exports.SelectionPopupPopper = exports.SelectionPopup = exports.useKeyboardNavigation = exports.WhiteSearchInput = exports.SearchInput = exports.ScoreLabel = exports.Score = exports.ResizablePanes = exports.ReltioGridLayout = exports.ReactSortableTreeUtils = exports.ReactSortableTreeHandlers = exports.ReactSortableTree = exports.ReactSelectOptionFilters = exports.MultiSelect = exports.QueryBuilderRowsGroup = exports.QueryBuilderRow = exports.ProfileCard = exports.ProfileBand = exports.PotentialMatchReviewCard = exports.PopupWithArrow = exports.Popper = exports.MultipleInput = exports.ModeSwitcherSelect = exports.ModeSwitcher = exports.TransitiveMatchBlock = exports.SimpleMatchRulesBuilder = exports.SimpleMatchRulesBlock = exports.MatchRulesBlock = exports.LoadingSpinner = exports.Link = exports.LinearLoadIndicator = exports.ImportModes = exports.ImportButton = exports.ImageGalleryDialog = exports.Highlighter = exports.HierarchicalAttributeTooltip = exports.HideOnShrink = exports.FlipCard = exports.FacetViewHeader = exports.ExpandedValueTooltip = exports.ErrorWrapper = exports.ErrorPopup = exports.ErrorBoundary = exports.EntityUriLink = exports.EntityTypesSelector = void 0;
-exports.ActionButtonMode = exports.ActionButton = exports.NotMatchButton = exports.MergeButton = exports.ProfileMatchCard = exports.RelationEditor = exports.OvIcon = exports.ErrorMessage = exports.ReltioMap = exports.ConfirmDeleteDialog = exports.ConfirmationDialog = exports.Marginator = exports.LightArrowTooltip = exports.ArrowExpandButton = exports.ScrollableTabs = exports.ExpandableSearchInput = exports.VirtualGroupedList = exports.ViewMoreToggle = exports.VerticalHeadingsTable = exports.VerticalDivider = exports.AttributeTitle = exports.Spacer = exports.SourceIcon = exports.SmallIconButtonWithTooltip = exports.SmallIconButton = void 0;
+exports.EntityTypeBadge = exports.EntityAvatar = exports.EMPTY_STATE_VARIANTS = exports.EMPTY_STATE_ICONS = exports.EmptyState = exports.NoResults = exports.NoData = exports.DropDownSelector = exports.DropDownMenuButton = exports.Drawer = exports.DataTypeValue = exports.ConnectionRelationTypeSelector = exports.ConfigureColumnsPopup = exports.MenuWithPopper = exports.DropdownIndicatorWithIconButton = exports.DropdownIndicator = exports.CommentsContainer = exports.ColorBar = exports.CollapseButton = exports.CollaborationItem = exports.ClickAwayProvider = exports.BasicViewHeader = exports.BasicViewContent = exports.BasicView = exports.ProfileBandNavigation = exports.AvatarWithFallback = exports.AutoSizeList = exports.ReadOnlyAttributesPager = exports.SimpleAttribute = exports.ReferenceAttribute = exports.NestedAttribute = exports.EditableImageAttributesLine = exports.ImageAttributesLine = exports.ReadOnlyAttributesList = exports.ReadOnlyAttributeValuesBlock = exports.EditableAttribute = exports.ReadOnlyAttribute = exports.CardinalityMessage = exports.AttributesPager = exports.SimpleAttributeEditor = exports.RelationTypeSelector = exports.ReferenceAttributeEditor = exports.NestedAttributeEditor = exports.MoreAttributesButton = exports.EntitySelector = exports.EntityCreator = exports.AttributesList = exports.BranchDecorator = exports.AttributesView = exports.AttributeListItem = void 0;
+exports.SidePanelContentHeader = exports.SidePanel = exports.SideButtonsPanel = exports.SelectorWithOnlyOptionAutoSelect = exports.SelectionPopupPopper = exports.SelectionPopup = exports.useKeyboardNavigation = exports.WhiteSearchInput = exports.SearchInput = exports.ScoreLabel = exports.Score = exports.ResizablePanes = exports.ReltioGridLayout = exports.ReactSortableTreeUtils = exports.ReactSortableTreeHandlers = exports.ReactSortableTree = exports.ReactSelectOptionFilters = exports.MultiSelect = exports.QueryBuilderRowsGroup = exports.QueryBuilderRow = exports.ProfileCard = exports.ProfileBand = exports.PotentialMatchReviewCard = exports.PopupWithArrow = exports.Popper = exports.MultipleInput = exports.ModeSwitcherSelect = exports.ModeSwitcher = exports.TransitiveMatchBlock = exports.SimpleMatchRulesBuilder = exports.SimpleMatchRulesBlock = exports.MatchRulesBlock = exports.LoadingSpinner = exports.Link = exports.LinearLoadIndicator = exports.ImportModes = exports.ImportButton = exports.ImageGalleryDialog = exports.Highlighter = exports.HierarchicalAttributeTooltip = exports.HideOnShrink = exports.FlipCard = exports.FacetViewHeader = exports.ExpandedValueTooltip = exports.ErrorWrapper = exports.ErrorPopup = exports.ErrorBoundary = exports.EntityUriLink = exports.EntityTypesSelector = exports.EntityTypeIcon = void 0;
+exports.ActionButtonMode = exports.ActionButton = exports.NotMatchButton = exports.MergeButton = exports.ProfileMatchCard = exports.RelationEditor = exports.OvIcon = exports.ErrorMessage = exports.ReltioMap = exports.ConfirmDeleteDialog = exports.ConfirmationDialog = exports.Marginator = exports.LightArrowTooltip = exports.ArrowExpandButton = exports.ScrollableTabs = exports.ExpandableSearchInput = exports.VirtualGroupedList = exports.ViewMoreToggle = exports.VerticalHeadingsTable = exports.VerticalDivider = exports.AttributeTitle = exports.Spacer = exports.SourceIcon = exports.SmallIconButtonWithTooltip = exports.SmallIconButton = exports.SimpleDropDownSelector = void 0;
 __exportStar(require("./activityLog"), exports);
 var AttributeListItem_1 = require("./AttributeListItem/AttributeListItem");
 Object.defineProperty(exports, "AttributeListItem", { enumerable: true, get: function () { return __importDefault(AttributeListItem_1).default; } });
@@ -52,6 +52,8 @@ var AttributesList_2 = require("./attributes/readMode/AttributesList");
 Object.defineProperty(exports, "ReadOnlyAttributesList", { enumerable: true, get: function () { return __importDefault(AttributesList_2).default; } });
 var ImageAttributesLine_1 = require("./attributes/readMode/ImageAttributesLine");
 Object.defineProperty(exports, "ImageAttributesLine", { enumerable: true, get: function () { return __importDefault(ImageAttributesLine_1).default; } });
+var ImageAttributesLine_2 = require("./attributes/editMode/ImageAttributesLine");
+Object.defineProperty(exports, "EditableImageAttributesLine", { enumerable: true, get: function () { return __importDefault(ImageAttributesLine_2).default; } });
 var NestedAttribute_2 = require("./attributes/readMode/NestedAttribute");
 Object.defineProperty(exports, "NestedAttribute", { enumerable: true, get: function () { return __importDefault(NestedAttribute_2).default; } });
 var ReferenceAttribute_2 = require("./attributes/readMode/ReferenceAttribute");

package/cjs/contexts/HistoryAppearanceContext/index.js CHANGED Viewed

@@ -7,6 +7,8 @@ exports.HistoryDiffContext = void 0;
 var react_1 = __importDefault(require("react"));
 exports.HistoryDiffContext = react_1.default.createContext({
     appearance: undefined,
-    attributes: undefined
+    attributes: undefined,
+    roles: undefined,
+    tags: undefined
 });
 exports.HistoryDiffContext.displayName = 'HistoryDiffContext';

package/cjs/hooks/useMergeAllRequest.d.ts CHANGED Viewed

@@ -4,8 +4,9 @@ declare type Props = {
     entity: Entity;
     onFinishRequest?: () => void;
     onStartRequest?: () => void;
+    onError?: () => void;
 };
-export declare const useMergeAllRequest: ({ entities, entity, onFinishRequest, onStartRequest }: Props) => {
+export declare const useMergeAllRequest: ({ entities, entity, onFinishRequest, onStartRequest, onError }: Props) => {
     isPending: boolean;
     sendMergeAllRequest: () => void;
 };

package/cjs/hooks/useMergeAllRequest.js CHANGED Viewed

@@ -8,18 +8,21 @@ var react_1 = require("react");
 var react_redux_1 = require("react-redux");
 var mdm_module_1 = __importDefault(require("@reltio/mdm-module"));
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var core_1 = require("../core");
 var useMergeAllRequest = function (_a) {
-    var entities = _a.entities, entity = _a.entity, onFinishRequest = _a.onFinishRequest, onStartRequest = _a.onStartRequest;
+    var entities = _a.entities, entity = _a.entity, onFinishRequest = _a.onFinishRequest, onStartRequest = _a.onStartRequest, _b = _a.onError, onError = _b === void 0 ? core_1.noop : _b;
     var tenant = react_redux_1.useSelector(mdm_module_1.default.selectors.getTenant);
     var dtssPath = react_redux_1.useSelector(mdm_module_1.default.selectors.getDtssPath);
-    var _b = react_1.useState(false), isPending = _b[0], setIsPending = _b[1];
+    var _c = react_1.useState(false), isPending = _c[0], setIsPending = _c[1];
     var sendMergeAllRequest = react_1.useCallback(function () {
         onStartRequest === null || onStartRequest === void 0 ? void 0 : onStartRequest();
         setIsPending(true);
         var params = { dtssPath: dtssPath, customerTenant: tenant, entity: entity, entities: entities };
         (mdm_sdk_1.isDataTenantEntity(entity)
             ? mdm_sdk_1.mergeDataTenantEntity(params)
-            : mdm_sdk_1.mergeCustomerTenantEntityWithMixedEntities(params)).finally(function () {
+            : mdm_sdk_1.mergeCustomerTenantEntityWithMixedEntities(params))
+            .catch(onError)
+            .finally(function () {
             onFinishRequest === null || onFinishRequest === void 0 ? void 0 : onFinishRequest();
             setIsPending(false);
         });

package/esm/components/MergeButton/MergeButton.d.ts CHANGED Viewed

@@ -10,6 +10,7 @@ declare type Props = {
     disabled?: boolean;
     onStartRequest?: () => void;
     onFinishRequest?: () => void;
+    onError?: () => void;
 };
 export declare const MergeButton: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLLIElement>>;
 export {};

package/esm/components/MergeButton/MergeButton.js CHANGED Viewed

@@ -27,12 +27,13 @@ import { noop } from '../../core';
 import { ActionButton, ActionButtonMode } from '../ActionButton/ActionButton';
 import { useMergeAllRequest } from '../../hooks';
 export var MergeButton = forwardRef(function (_a, ref) {
-    var className = _a.className, _b = _a.mode, mode = _b === void 0 ? ActionButtonMode.iconButton : _b, _c = _a.onMenuClose, onMenuClose = _c === void 0 ? noop : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, entity = _a.entity, entities = _a.entities, onStartRequest = _a.onStartRequest, onFinishRequest = _a.onFinishRequest, otherProps = __rest(_a, ["className", "mode", "onMenuClose", "disabled", "entity", "entities", "onStartRequest", "onFinishRequest"]);
+    var className = _a.className, _b = _a.mode, mode = _b === void 0 ? ActionButtonMode.iconButton : _b, _c = _a.onMenuClose, onMenuClose = _c === void 0 ? noop : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, entity = _a.entity, entities = _a.entities, onStartRequest = _a.onStartRequest, onFinishRequest = _a.onFinishRequest, onError = _a.onError, otherProps = __rest(_a, ["className", "mode", "onMenuClose", "disabled", "entity", "entities", "onStartRequest", "onFinishRequest", "onError"]);
     var sendMergeAllRequest = useMergeAllRequest({
         entity: entity,
         entities: entities,
         onStartRequest: onStartRequest,
-        onFinishRequest: onFinishRequest
+        onFinishRequest: onFinishRequest,
+        onError: onError
     }).sendMergeAllRequest;
     return (React.createElement(ActionButton, __assign({ className: className, disabled: disabled, mode: mode, label: i18n.text('Merge'), icon: MergeIcon, onClick: sendMergeAllRequest, onMenuClose: onMenuClose, ref: ref }, otherProps)));
 });

package/esm/components/SideIconPanel/SideButtonsPanel.d.ts CHANGED Viewed

@@ -3,11 +3,11 @@ declare type Props = {
     buttonsProps: {
         icon: ElementType;
         tooltipTitle: string;
-        id: string;
+        id: number;
     }[];
-    activeIndex: number;
+    activeIndexId: number;
     className?: string;
-    onButtonClick: (index: number) => void;
+    onButtonClick: (id: number) => void;
 };
 export declare const SideButtonsPanel: VFC<Props>;
 export {};

package/esm/components/SideIconPanel/SideButtonsPanel.js CHANGED Viewed

@@ -25,11 +25,11 @@ import classnames from 'classnames';
 import { SmallIconButtonWithTooltip } from '../SmallIconButton';
 import { useStyles } from './styles';
 export var SideButtonsPanel = function (_a) {
-    var buttonsProps = _a.buttonsProps, activeIndex = _a.activeIndex, className = _a.className, onButtonClick = _a.onButtonClick;
+    var buttonsProps = _a.buttonsProps, activeIndexId = _a.activeIndexId, className = _a.className, onButtonClick = _a.onButtonClick;
     var styles = useStyles();
-    return (React.createElement("div", { className: classnames(styles.container, className) }, buttonsProps.map(function (_a, index) {
+    return (React.createElement("div", { className: classnames(styles.container, className) }, buttonsProps.map(function (_a) {
         var _b;
         var id = _a.id, buttonProps = __rest(_a, ["id"]);
-        return (React.createElement(SmallIconButtonWithTooltip, __assign({}, buttonProps, { size: "S", key: id, className: classnames((_b = {}, _b[styles.active] = activeIndex === index, _b), styles.buttonWrapper), onClick: function () { return onButtonClick(index); }, "data-reltio-id": "reltio-profile-right-side-button-" + id })));
+        return (React.createElement(SmallIconButtonWithTooltip, __assign({}, buttonProps, { size: "S", key: id, className: classnames((_b = {}, _b[styles.active] = activeIndexId === id, _b), styles.buttonWrapper), onClick: function () { return onButtonClick(id); }, "data-reltio-id": "reltio-profile-right-side-button-" + id })));
     })));
 };

package/esm/components/SidePanel/SidePanelContentHeader/SidePanelContentHeader.d.ts CHANGED Viewed

@@ -1,7 +1,8 @@
 import { ReactNode, VFC } from 'react';
 declare type HeaderProps = {
-    mainTitle: string;
-    secondTitle: string;
+    mainTitle?: string;
+    secondTitle?: string;
+    content?: ReactNode;
     rightContent?: ReactNode;
 };
 declare type Props = HeaderProps & {

package/esm/components/SidePanel/SidePanelContentHeader/SidePanelContentHeader.js CHANGED Viewed

@@ -6,12 +6,13 @@ import Divider from '@material-ui/core/Divider';
 import i18n from 'ui-i18n';
 import { SmallIconButtonWithTooltip } from '../../SmallIconButton';
 export var SidePanelContentHeader = function (_a) {
-    var onClose = _a.onClose, mainTitle = _a.mainTitle, secondTitle = _a.secondTitle, rightContent = _a.rightContent;
+    var onClose = _a.onClose, mainTitle = _a.mainTitle, secondTitle = _a.secondTitle, content = _a.content, rightContent = _a.rightContent;
     var styles = useStyles();
     return (React.createElement("div", { className: styles.container },
         React.createElement(SmallIconButtonWithTooltip, { size: "S", icon: CloseIcon, onClick: onClose, className: styles.icon, tooltipTitle: i18n.text('Close') }),
-        React.createElement(Typography, { variant: "h6" }, mainTitle),
-        React.createElement(Divider, { orientation: "vertical", flexItem: true, className: styles.divider }),
-        React.createElement(Typography, { variant: "body1", color: "textSecondary", className: styles.secondTitle }, secondTitle),
-        rightContent));
+        content || (React.createElement(React.Fragment, null,
+            React.createElement(Typography, { variant: "h6" }, mainTitle),
+            React.createElement(Divider, { orientation: "vertical", flexItem: true, className: styles.divider }),
+            React.createElement(Typography, { variant: "body1", color: "textSecondary", className: styles.secondTitle }, secondTitle),
+            rightContent))));
 };

package/esm/components/attributes/AttributesView/index.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { connect } from 'react-redux';
 import mdm from '@reltio/mdm-module';
 import AttributesView from './AttributesView';
 var mapStateToProps = function (state, ownProps) { return ({
-    entity: ownProps.entity || mdm.selectors.getEntity(state),
+    entity: ownProps.entity || mdm.selectors.getEntityWithDiff(state),
     mode: ownProps.mode || mdm.selectors.getMode(state)
 }); };
 export { AttributesView };

package/esm/components/attributes/ImageAttributesLine/ImageAttributesLine.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 import React from 'react';
-import { AttributeType, ImageAttributeValue } from '@reltio/mdm-sdk';
+import { RequestNextPageOfAttributeValuesPayload } from '@reltio/mdm-module';
+import { AttributeType, ImageAttributeValue, Paging } from '@reltio/mdm-sdk';
 import { AttributeItem } from '../editMode/AttributesPager';
 import { SIZES_TYPE } from './styles';
 export declare type ImageRenderProps = {
@@ -19,6 +20,10 @@ declare type Props = {
     onUpload?: () => void;
     onDeleteAttribute?: (param: AttributeItem) => void;
     imageSize?: SIZES_TYPE;
+    paging?: Paging;
+    requestNextPageOfAttributeValues?: (payload: RequestNextPageOfAttributeValuesPayload) => void;
+    parentUri?: string;
+    showNonOv?: boolean;
 };
-declare const ImageAttributesLine: ({ attributeType, attributeValues, renderImage, overlay, countFixedItems, children, onUpload, onDeleteAttribute, imageSize }: Props) => JSX.Element;
+declare const ImageAttributesLine: ({ attributeType, attributeValues, renderImage, overlay, countFixedItems, children, onUpload, onDeleteAttribute, imageSize, paging, parentUri, showNonOv, requestNextPageOfAttributeValues }: Props) => JSX.Element;
 export default ImageAttributesLine;

package/esm/components/attributes/ImageAttributesLine/ImageAttributesLine.js CHANGED Viewed

@@ -21,11 +21,25 @@ import { downloadImagesByURLs } from '../helpers/imageAttributes';
 import { DEFAULT_IMAGE_SIZE, IMAGE_MIN_VISIBLE_WIDTH } from './constants';
 import { useStyles } from './styles';
 var ImageAttributesLine = function (_a) {
-    var attributeType = _a.attributeType, _b = _a.attributeValues, attributeValues = _b === void 0 ? [] : _b, renderImage = _a.renderImage, _c = _a.overlay, overlay = _c === void 0 ? false : _c, _d = _a.countFixedItems, countFixedItems = _d === void 0 ? 0 : _d, children = _a.children, onUpload = _a.onUpload, onDeleteAttribute = _a.onDeleteAttribute, _e = _a.imageSize, imageSize = _e === void 0 ? DEFAULT_IMAGE_SIZE : _e;
+    var attributeType = _a.attributeType, _b = _a.attributeValues, attributeValues = _b === void 0 ? [] : _b, renderImage = _a.renderImage, _c = _a.overlay, overlay = _c === void 0 ? false : _c, _d = _a.countFixedItems, countFixedItems = _d === void 0 ? 0 : _d, children = _a.children, onUpload = _a.onUpload, onDeleteAttribute = _a.onDeleteAttribute, _e = _a.imageSize, imageSize = _e === void 0 ? DEFAULT_IMAGE_SIZE : _e, paging = _a.paging, parentUri = _a.parentUri, showNonOv = _a.showNonOv, requestNextPageOfAttributeValues = _a.requestNextPageOfAttributeValues;
     var entity = useSelector(mdm.selectors.getEntity) || {};
     var isViewMode = useSelector(mdm.selectors.getIsViewMode);
     var dispatch = useDispatch();
     var styles = useStyles(imageSize);
+    useEffect(function () {
+        if (paging && requestNextPageOfAttributeValues) {
+            var totalVisibleValues = showNonOv ? paging.totalOvValues : paging.totalValues;
+            if (totalVisibleValues > attributeValues.length) {
+                requestNextPageOfAttributeValues({
+                    parentUri: parentUri,
+                    attributeTypeUri: attributeType.uri,
+                    attributeTypeName: attributeType.name,
+                    values: [],
+                    defaultMaxValues: totalVisibleValues
+                });
+            }
+        }
+    }, [paging, requestNextPageOfAttributeValues, attributeType, parentUri, attributeValues.length, showNonOv]);
     var lastWidth = useRef();
     var _f = useState(0), maxItems = _f[0], setMaxItems = _f[1];
     var _g = useState(0), hiddenItemsLength = _g[0], setHiddenItemsLength = _g[1];

package/esm/components/attributes/editMode/AttributesPager/AttributesPager.js CHANGED Viewed

@@ -56,7 +56,7 @@ var AttributesPager = function (_a) {
                 return (React.createElement(BranchDecorator, { enabled: drawLines },
                     React.createElement("div", { className: styles.wrapper },
                         React.createElement(Title, { label: attributeType === null || attributeType === void 0 ? void 0 : attributeType.label, attributeType: attributeType }),
-                        React.createElement(ImageAttributesLine, { attributeValues: visibleValues, attributeType: attributeType, onDeleteAttribute: onDeleteAttribute, parentUri: parentUri, onChangeAttribute: onChangeAttribute }))));
+                        React.createElement(ImageAttributesLine, { attributeValues: visibleValues, attributeType: attributeType, paging: paging, onDeleteAttribute: onDeleteAttribute, parentUri: parentUri, onChangeAttribute: onChangeAttribute, requestNextPageOfAttributeValues: requestNextPageOfAttributeValues, showNonOv: showNonOv }))));
             default:
                 return (React.createElement(AttributeRenderer, __assign({ values: visibleValues, attributeType: attributeType, max: max, paging: paging, crosswalks: crosswalks, showEmptyEditors: showEmptyEditors, drawLines: drawLines, requestNextPageOfAttributeValues: requestNextPageOfAttributeValues, showNonOv: showNonOv }, commonProps)));
         }

package/esm/components/attributes/editMode/ImageAttributesLine/ImageAttributesLine.d.ts CHANGED Viewed

@@ -1,12 +1,18 @@
 /// <reference types="react" />
-import { AttributeType, ImageAttributeValue } from '@reltio/mdm-sdk';
+import { RequestNextPageOfAttributeValuesPayload } from '@reltio/mdm-module';
+import { AttributeType, ImageAttributeValue, Paging } from '@reltio/mdm-sdk';
 import { AttributeItem } from '../AttributesPager';
+import { SIZES_TYPE } from '../../ImageAttributesLine/styles';
 declare type Props = {
     attributeType: AttributeType;
     attributeValues: ImageAttributeValue[];
     onDeleteAttribute: (param: AttributeItem) => void;
     onChangeAttribute: (param: AttributeItem) => void;
     parentUri: string;
+    imageSize?: SIZES_TYPE;
+    paging?: Paging;
+    requestNextPageOfAttributeValues?: (payload: RequestNextPageOfAttributeValuesPayload) => void;
+    showNonOv?: boolean;
 };
-declare const ImageAttributesLine: ({ attributeType, attributeValues, onDeleteAttribute, onChangeAttribute, parentUri }: Props) => JSX.Element;
+declare const ImageAttributesLine: ({ attributeType, attributeValues, onDeleteAttribute, onChangeAttribute, requestNextPageOfAttributeValues, parentUri, paging, showNonOv, imageSize }: Props) => JSX.Element;
 export default ImageAttributesLine;

package/esm/components/attributes/editMode/ImageAttributesLine/ImageAttributesLine.js CHANGED Viewed

@@ -8,17 +8,17 @@ import ImageActionsOverlay from '../../../Image/ImageActionsOverlay/ImageActions
 import { SmallIconButton } from '../../../SmallIconButton';
 import { UploadImageDialog } from '../../../UploadImageDialog/UploadImageDialog';
 import ImageAttributesLineCommon from '../../ImageAttributesLine';
-import { IMAGE_HEIGHT, IMAGE_MARGIN, IMAGE_WIDTH } from '../../ImageAttributesLine/constants';
+import { DEFAULT_IMAGE_SIZE } from '../../ImageAttributesLine/constants';
 import { useStyles } from './styles';
 var ImageAttributesLine = function (_a) {
-    var _b = _a.attributeType, attributeType = _b === void 0 ? {} : _b, _c = _a.attributeValues, attributeValues = _c === void 0 ? [] : _c, onDeleteAttribute = _a.onDeleteAttribute, onChangeAttribute = _a.onChangeAttribute, parentUri = _a.parentUri;
-    var styles = useStyles({ imageMargin: IMAGE_MARGIN, imageWidth: IMAGE_WIDTH, imageHeight: IMAGE_HEIGHT });
+    var _b = _a.attributeType, attributeType = _b === void 0 ? {} : _b, _c = _a.attributeValues, attributeValues = _c === void 0 ? [] : _c, onDeleteAttribute = _a.onDeleteAttribute, onChangeAttribute = _a.onChangeAttribute, requestNextPageOfAttributeValues = _a.requestNextPageOfAttributeValues, parentUri = _a.parentUri, paging = _a.paging, showNonOv = _a.showNonOv, _d = _a.imageSize, imageSize = _d === void 0 ? DEFAULT_IMAGE_SIZE : _d;
+    var styles = useStyles(imageSize);
     var entity = useSelector(mdmModule.selectors.getEntity) || {};
     var defaultProfilePic = useSelector(function (state) {
         return mdmModule.selectors.getModifiedEntityDefaultProfilePic(state, entity.uri);
     });
     var dispatch = useDispatch();
-    var _d = useState(false), isVisibleUploadDialog = _d[0], setIsVisibleUploadDialog = _d[1];
+    var _e = useState(false), isVisibleUploadDialog = _e[0], setIsVisibleUploadDialog = _e[1];
     var toggleVisibilityUploadDialog = useCallback(function () {
         setIsVisibleUploadDialog(function (visible) { return !visible; });
     }, []);
@@ -70,12 +70,12 @@ var ImageAttributesLine = function (_a) {
             var uri = attribute.uri;
             var onOpenImageGalleryDialog = methods.onOpenImageGalleryDialog;
             return (React.createElement("div", { className: styles.image, key: uri },
-                React.createElement(Image, { src: src, overlay: renderImageActionsOverlay(methods, attribute), onClick: function () { return onOpenImageGalleryDialog(uri); } })));
+                React.createElement(Image, { src: src, overlay: renderImageActionsOverlay(methods, attribute), onClick: function () { return onOpenImageGalleryDialog(uri); }, size: { imageWidth: imageSize.imageWidth, imageHeight: imageSize.imageHeight } })));
         };
         return renderImage;
     };
     return (React.createElement("div", { className: styles.root },
-        React.createElement(ImageAttributesLineCommon, { attributeValues: attributeValues, attributeType: attributeType, renderImage: renderImage, overlay: true, countFixedItems: 1, onUpload: toggleVisibilityUploadDialog, onDeleteAttribute: handleDeleteAttribute },
+        React.createElement(ImageAttributesLineCommon, { attributeValues: attributeValues, attributeType: attributeType, renderImage: renderImage, overlay: true, countFixedItems: 1, onUpload: toggleVisibilityUploadDialog, onDeleteAttribute: handleDeleteAttribute, imageSize: imageSize, requestNextPageOfAttributeValues: requestNextPageOfAttributeValues, paging: paging, parentUri: parentUri, showNonOv: showNonOv },
             React.createElement("div", { className: styles.uploadContainer, onClick: toggleVisibilityUploadDialog },
                 React.createElement(SmallIconButton, { className: styles.uploadButton, iconClassName: styles.uploadIcon, icon: CloudUploadIcon }))),
         React.createElement(UploadImageDialog, { open: isVisibleUploadDialog, onUpload: handleAddAttributes, onClose: toggleVisibilityUploadDialog })));

package/esm/components/attributes/editMode/SimpleAttributeEditor/selectors/helpers/parents.js CHANGED Viewed

@@ -24,11 +24,13 @@ export var getParents = function (state, valueUri, node) {
     });
     var modifiedEntities = mdmModule.selectors.getModifiedEntities(state);
     var entityUri = mdmModule.selectors.getEntityUri(state);
+    var connections = mdmModule.selectors.getAllRelationsToAddAndEdit(state);
     var ownParentNodesValues = filterRelatedParentValuesForDependentLookupValueUri({
         parentValues: parentNodesValues,
         valueUri: valueUri,
         entityUri: entityUri,
-        modifiedEntities: modifiedEntities
+        modifiedEntities: modifiedEntities,
+        connections: connections
     });
     var neededParentsAttributeTypes = node.parents.map(function (type) {
         var parentNode = mdmModule.selectors.getDependentLookupsStructureNode(state, type);

package/esm/components/attributes/readMode/AttributesPager/AttributesPager.js CHANGED Viewed

@@ -47,7 +47,7 @@ var AttributesPager = function (_a) {
             case RENDERER_TYPES.imageLine:
                 return (React.createElement(React.Fragment, null,
                     showTitle && React.createElement(Title, { label: attributeType === null || attributeType === void 0 ? void 0 : attributeType.label, attributeType: attributeType }),
-                    React.createElement(ImageAttributesLine, { attributeValues: visibleValues, attributeType: attributeType })));
+                    React.createElement(ImageAttributesLine, { attributeValues: visibleValues, attributeType: attributeType, paging: paging, parentUri: parentUri, requestNextPageOfAttributeValues: requestNextPageOfAttributeValues, showNonOv: showNonOv })));
             case RENDERER_TYPES.special:
                 return React.createElement(SpecialRenderer, { values: visibleValues, attributeType: attributeType, showTitle: showTitle });
         }

package/esm/components/attributes/readMode/ImageAttributesLine/ImageAttributesLine.d.ts CHANGED Viewed

@@ -1,10 +1,15 @@
 /// <reference types="react" />
-import { AttributeType, ImageAttributeValue } from '@reltio/mdm-sdk';
+import { AttributeType, ImageAttributeValue, Paging } from '@reltio/mdm-sdk';
+import { RequestNextPageOfAttributeValuesPayload } from '@reltio/mdm-module';
 import { SIZES_TYPE } from '../../ImageAttributesLine/styles';
 declare type Props = {
     attributeValues: ImageAttributeValue[];
     attributeType: AttributeType;
     imageSize?: SIZES_TYPE;
+    paging?: Paging;
+    parentUri?: string;
+    showNonOv?: boolean;
+    requestNextPageOfAttributeValues?: (payload: RequestNextPageOfAttributeValuesPayload) => void;
 };
-declare const ImageAttributesLine: ({ attributeType, attributeValues, imageSize }: Props) => JSX.Element;
+declare const ImageAttributesLine: ({ attributeType, attributeValues, paging, parentUri, requestNextPageOfAttributeValues, showNonOv, imageSize }: Props) => JSX.Element;
 export default ImageAttributesLine;

package/esm/components/attributes/readMode/ImageAttributesLine/ImageAttributesLine.js CHANGED Viewed

@@ -8,7 +8,7 @@ import { DEFAULT_IMAGE_SIZE } from '../../ImageAttributesLine/constants';
 import { getHistoryAppearanceByUri, getHistoryAttributeClassName } from '../helpers/historyAppearance';
 import { useStyles } from './styles';
 var ImageAttributesLine = function (_a) {
-    var attributeType = _a.attributeType, _b = _a.attributeValues, attributeValues = _b === void 0 ? [] : _b, _c = _a.imageSize, imageSize = _c === void 0 ? DEFAULT_IMAGE_SIZE : _c;
+    var attributeType = _a.attributeType, _b = _a.attributeValues, attributeValues = _b === void 0 ? [] : _b, paging = _a.paging, parentUri = _a.parentUri, requestNextPageOfAttributeValues = _a.requestNextPageOfAttributeValues, showNonOv = _a.showNonOv, _c = _a.imageSize, imageSize = _c === void 0 ? DEFAULT_IMAGE_SIZE : _c;
     var styles = useStyles(imageSize);
     var appearance = useContext(HistoryDiffContext).appearance;
     var renderImage = function (_a) {
@@ -26,6 +26,6 @@ var ImageAttributesLine = function (_a) {
         };
         return renderImage;
     };
-    return (React.createElement(ImageAttributesLineCommon, { attributeValues: attributeValues, attributeType: attributeType, renderImage: renderImage, imageSize: imageSize }));
+    return (React.createElement(ImageAttributesLineCommon, { attributeValues: attributeValues, attributeType: attributeType, renderImage: renderImage, imageSize: imageSize, requestNextPageOfAttributeValues: requestNextPageOfAttributeValues, paging: paging, parentUri: parentUri, showNonOv: showNonOv }));
 };
 export default ImageAttributesLine;

package/esm/components/history/HistoryTree/HistoryTree.js CHANGED Viewed

@@ -10,12 +10,13 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import ReactResizeDetector from 'react-resize-detector';
 import i18n from 'ui-i18n';
 import { isNil } from 'ramda';
 import classnames from 'classnames';
-import { profile } from '@reltio/mdm-module';
+import { Mode } from '@reltio/mdm-sdk';
+import mdm, { profile } from '@reltio/mdm-module';
 import Button from '@material-ui/core/Button';
 import HistoryRow from '../HistoryRow/HistoryRow';
 import HistoryGraph from '../HistoryGraph/HistoryGraph';
@@ -26,6 +27,7 @@ var HistoryTree = function (_a) {
     var historyData = _a.historyData, isLoading = _a.isLoading, canLoadMore = _a.canLoadMore, onLoadMore = _a.onLoadMore, entityUri = _a.entityUri, historyEvent = _a.historyEvent, findPreviousChange = _a.findPreviousChange;
     var styles = useStyles();
     var dispatch = useDispatch();
+    var isEditableMode = useSelector(mdm.selectors.getIsEditableMode);
     var _c = useState({ historyLanes: {}, rows: [] }), graphData = _c[0], setGraphData = _c[1];
     var _d = useState(false), isScrollable = _d[0], setIsScrollable = _d[1];
     var _e = useState(-1), selectedIndex = _e[0], setSelectedIndex = _e[1];
@@ -54,6 +56,14 @@ var HistoryTree = function (_a) {
         setIsScrollable(scrollLeft < scrollWidth - clientWidth);
     };
     var handleHistoryRowClick = function (index, change, isSelected, isCurrent) {
+        if (isEditableMode) {
+            if (window.confirm(i18n.text('Are you sure you want to go in history mode? All your changes will be lost.'))) {
+                dispatch(profile.mode.actions.modeUpdated(Mode.Viewing));
+            }
+            else {
+                return;
+            }
+        }
         if ((isCurrent && !isSelected) || (!isCurrent && isSelected)) {
             dispatch(profile.history.actions.clearHistoryEvent());
             setSelectedIndex(0);

package/esm/components/history/hooks/useHistory.d.ts CHANGED Viewed

@@ -12,5 +12,6 @@ export declare const useHistory: ({ entityUri, enabled }: Props) => {
     historyWithTotal: import("@reltio/mdm-sdk").HistoryWithTotal;
     historyFilter: HistoryFilter;
     setHistoryFilter: import("react").Dispatch<import("react").SetStateAction<HistoryFilter>>;
+    reloadHistory: () => void;
 };
 export {};

package/esm/components/history/hooks/useHistory.js CHANGED Viewed

@@ -18,7 +18,7 @@ export var useHistory = function (_a) {
         offset: historyPage * MAX_HISTORY_ROWS,
         order: 'desc',
         showAll: true
-    }), isHistoryLoading = _e.isLoading, historyWithTotal = _e.historyWithTotal, loadMore = _e.loadMore;
+    }), isHistoryLoading = _e.isLoading, historyWithTotal = _e.historyWithTotal, loadMore = _e.loadMore, loadData = _e.loadData;
     var canLoadMore = useMemo(function () { return (historyPage + 1) * MAX_HISTORY_ROWS <= (historyWithTotal === null || historyWithTotal === void 0 ? void 0 : historyWithTotal.total); }, [
         historyWithTotal,
         historyPage
@@ -29,6 +29,10 @@ export var useHistory = function (_a) {
         loadMore((historyPage + 1) * MAX_HISTORY_ROWS);
         setHistoryPage(historyPage + 1);
     }, [loadMore, historyPage, canLoadMore]);
+    var reloadHistory = useCallback(function () {
+        loadData();
+        setHistoryPage(0);
+    }, [loadData]);
     return {
         isLoading: isHistoryLoading || isHistoricUrisLoading,
         canLoadMore: canLoadMore,
@@ -36,6 +40,7 @@ export var useHistory = function (_a) {
         historicUris: historicUris,
         historyWithTotal: historyWithTotal,
         historyFilter: historyFilter,
-        setHistoryFilter: setHistoryFilter
+        setHistoryFilter: setHistoryFilter,
+        reloadHistory: reloadHistory
     };
 };

package/esm/components/history/hooks/useHistoryDiff.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { HistoryDiff } from '@reltio/mdm-sdk';
2	+ export declare const useHistoryDiff: () => HistoryDiff;

package/esm/components/history/hooks/useHistoryDiff.js ADDED Viewed

@@ -0,0 +1,39 @@
+import { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { evolve, map } from 'ramda';
+import { entity as History, wrapInArrayIfNeeded } from '@reltio/mdm-sdk';
+import mdmModule, { HistoryMode, profile } from '@reltio/mdm-module';
+var defaultHistoryDiff = {
+    appearance: {},
+    attributes: {},
+    roles: [],
+    tags: []
+};
+var fixRefEntity = evolve({
+    refEntity: wrapInArrayIfNeeded,
+    refRelation: wrapInArrayIfNeeded
+});
+var prepareHistorySlice = function (historySlice) {
+    if (historySlice) {
+        return evolve({
+            attributes: map(map(fixRefEntity))
+        })(historySlice);
+    }
+    return historySlice;
+};
+export var useHistoryDiff = function () {
+    var dispatch = useDispatch();
+    var historySlice = useSelector(mdmModule.selectors.getHistorySlice);
+    var historyDiff = useSelector(mdmModule.selectors.getHistoryDiff);
+    var historyMode = useSelector(mdmModule.selectors.getHistoryMode);
+    var entity = useSelector(mdmModule.selectors.getEntity);
+    useEffect(function () {
+        if (historySlice) {
+            var aEntity = historySlice.aEntity, bEntity = historySlice.bEntity;
+            var historyManager = History.HistoryManager.createHistoryManager(History.AttributesDiff);
+            var historyDiff_1 = historyManager.computeEntityHistoryDiff(prepareHistorySlice(historyMode === HistoryMode.Current ? entity : bEntity), prepareHistorySlice(aEntity));
+            dispatch(profile.history.actions.setHistoryDiff(historyDiff_1));
+        }
+    }, [historySlice, historyMode, dispatch, entity]);
+    return historyDiff || defaultHistoryDiff;
+};

package/esm/components/history/hooks/useHistoryWithTotal.d.ts CHANGED Viewed

@@ -13,5 +13,6 @@ export declare const useHistoryWithTotal: ({ entityUri, enabled, historicUris, .
     isLoading: boolean;
     historyWithTotal: HistoryWithTotal;
     loadMore: (offset: number) => void;
+    loadData: () => void;
 };
 export {};

package/esm/components/history/hooks/useHistoryWithTotal.js CHANGED Viewed

@@ -71,5 +71,5 @@ export var useHistoryWithTotal = function (_a) {
             loadData();
         }
     }, [loadData, enabled]);
-    return { isLoading: isLoading, historyWithTotal: historyWithTotal, loadMore: loadMore };
+    return { isLoading: isLoading, historyWithTotal: historyWithTotal, loadMore: loadMore, loadData: loadData };
 };

package/esm/components/history/index.d.ts CHANGED Viewed

@@ -2,6 +2,7 @@ export { useHistoricUris } from './hooks/useHistoricUris';
 export { useHistoryWithTotal } from './hooks/useHistoryWithTotal';
 export { useHistorySlice } from './hooks/useHistorySlice';
 export { useHistory } from './hooks/useHistory';
+export { useHistoryDiff } from './hooks/useHistoryDiff';
 export { default as HistoryView } from './HistoryView/HistoryView';
 export { default as HistoryHeader } from './HistoryHeader/HistoryHeader';
 export { default as ProfileBandHistory } from './ProfileBandHistory/ProfileBandHistory';

package/esm/components/history/index.js CHANGED Viewed

@@ -2,6 +2,7 @@ export { useHistoricUris } from './hooks/useHistoricUris';
 export { useHistoryWithTotal } from './hooks/useHistoryWithTotal';
 export { useHistorySlice } from './hooks/useHistorySlice';
 export { useHistory } from './hooks/useHistory';
+export { useHistoryDiff } from './hooks/useHistoryDiff';
 export { default as HistoryView } from './HistoryView/HistoryView';
 export { default as HistoryHeader } from './HistoryHeader/HistoryHeader';
 export { default as ProfileBandHistory } from './ProfileBandHistory/ProfileBandHistory';

package/esm/components/index.d.ts CHANGED Viewed

@@ -17,6 +17,7 @@ export { default as EditableAttribute } from './attributes/editMode/AttributesFa
 export { default as ReadOnlyAttributeValuesBlock } from './attributes/readMode/AttributeValuesBlock/AttributeValuesBlock';
 export { default as ReadOnlyAttributesList } from './attributes/readMode/AttributesList';
 export { default as ImageAttributesLine } from './attributes/readMode/ImageAttributesLine';
+export { default as EditableImageAttributesLine } from './attributes/editMode/ImageAttributesLine';
 export { default as NestedAttribute } from './attributes/readMode/NestedAttribute';
 export { default as ReferenceAttribute } from './attributes/readMode/ReferenceAttribute';
 export { default as SimpleAttribute } from './attributes/readMode/SimpleAttribute';

package/esm/components/index.js CHANGED Viewed

@@ -16,6 +16,7 @@ export { default as EditableAttribute } from './attributes/editMode/AttributesFa
 export { default as ReadOnlyAttributeValuesBlock } from './attributes/readMode/AttributeValuesBlock/AttributeValuesBlock';
 export { default as ReadOnlyAttributesList } from './attributes/readMode/AttributesList';
 export { default as ImageAttributesLine } from './attributes/readMode/ImageAttributesLine';
+export { default as EditableImageAttributesLine } from './attributes/editMode/ImageAttributesLine';
 export { default as NestedAttribute } from './attributes/readMode/NestedAttribute';
 export { default as ReferenceAttribute } from './attributes/readMode/ReferenceAttribute';
 export { default as SimpleAttribute } from './attributes/readMode/SimpleAttribute';

package/esm/contexts/HistoryAppearanceContext/index.js CHANGED Viewed

@@ -1,6 +1,8 @@
 import React from 'react';
 export var HistoryDiffContext = React.createContext({
     appearance: undefined,
-    attributes: undefined
+    attributes: undefined,
+    roles: undefined,
+    tags: undefined
 });
 HistoryDiffContext.displayName = 'HistoryDiffContext';

package/esm/hooks/useMergeAllRequest.d.ts CHANGED Viewed

@@ -4,8 +4,9 @@ declare type Props = {
     entity: Entity;
     onFinishRequest?: () => void;
     onStartRequest?: () => void;
+    onError?: () => void;
 };
-export declare const useMergeAllRequest: ({ entities, entity, onFinishRequest, onStartRequest }: Props) => {
+export declare const useMergeAllRequest: ({ entities, entity, onFinishRequest, onStartRequest, onError }: Props) => {
     isPending: boolean;
     sendMergeAllRequest: () => void;
 };

package/esm/hooks/useMergeAllRequest.js CHANGED Viewed

@@ -2,18 +2,21 @@ import { useCallback, useState } from 'react';
 import { useSelector } from 'react-redux';
 import mdmModule from '@reltio/mdm-module';
 import { isDataTenantEntity, mergeCustomerTenantEntityWithMixedEntities, mergeDataTenantEntity } from '@reltio/mdm-sdk';
+import { noop } from '../core';
 export var useMergeAllRequest = function (_a) {
-    var entities = _a.entities, entity = _a.entity, onFinishRequest = _a.onFinishRequest, onStartRequest = _a.onStartRequest;
+    var entities = _a.entities, entity = _a.entity, onFinishRequest = _a.onFinishRequest, onStartRequest = _a.onStartRequest, _b = _a.onError, onError = _b === void 0 ? noop : _b;
     var tenant = useSelector(mdmModule.selectors.getTenant);
     var dtssPath = useSelector(mdmModule.selectors.getDtssPath);
-    var _b = useState(false), isPending = _b[0], setIsPending = _b[1];
+    var _c = useState(false), isPending = _c[0], setIsPending = _c[1];
     var sendMergeAllRequest = useCallback(function () {
         onStartRequest === null || onStartRequest === void 0 ? void 0 : onStartRequest();
         setIsPending(true);
         var params = { dtssPath: dtssPath, customerTenant: tenant, entity: entity, entities: entities };
         (isDataTenantEntity(entity)
             ? mergeDataTenantEntity(params)
-            : mergeCustomerTenantEntityWithMixedEntities(params)).finally(function () {
+            : mergeCustomerTenantEntityWithMixedEntities(params))
+            .catch(onError)
+            .finally(function () {
             onFinishRequest === null || onFinishRequest === void 0 ? void 0 : onFinishRequest();
             setIsPending(false);
         });

package/package.json CHANGED Viewed

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