@reltio/components 1.4.913 → 1.4.917

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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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/HistoryFilterButton/HistoryFilterButton.js

@@ -41,6 +41,7 @@ var Button_1 = __importDefault(require("@material-ui/core/Button"));
 var Popover_1 = __importDefault(require("@material-ui/core/Popover"));
 var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
 var SmallIconButton_1 = require("../../SmallIconButton");
+var filters_1 = require("../utils/filters");
 var UserSelector_1 = __importDefault(require("../../UserSelector/UserSelector"));
 var AttributeSelector_1 = __importDefault(require("../../AttributeSelector/AttributeSelector"));
 var DateRangeSelector_1 = __importDefault(require("../DateRangeSelector/DateRangeSelector"));
@@ -80,7 +81,12 @@ var HistoryFilterButton = function (_a) {
                 react_1.default.createElement(Button_1.default, { onClick: clearCurrentValue, className: styles.clearButton }, ui_i18n_1.default.text('Clear all')),
                 react_1.default.createElement(Button_1.default, { onClick: closePopup }, ui_i18n_1.default.text('Cancel')),
                 react_1.default.createElement(Button_1.default, { color: "primary", onClick: function () {
-                        onApplyFilter(currentValue);
+                        if (dateRange && filters_1.isDateRangeValid(dateRange)) {
+                            onApplyFilter(currentValue);
+                        }
+                        else {
+                            onApplyFilter(ramda_1.dissoc('dateRange', currentValue));
+                        }
                         closePopup();
                     } }, ui_i18n_1.default.text('Apply'))))));
 };

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

@@ -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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { HistoryFilter } from '../types';
 declare type Props = {
     entityUri: string;
@@ -8,9 +7,10 @@ export declare const useHistory: ({ entityUri, enabled }: Props) => {
     isLoading: boolean;
     canLoadMore: boolean;
     onLoadMore: () => void;
+    onApplyFilter: (filter: HistoryFilter) => void;
     historicUris: string[];
     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

@@ -4,11 +4,16 @@ exports.useHistory = void 0;
 var react_1 = require("react");
 var useHistoricUris_1 = require("./useHistoricUris");
 var useHistoryWithTotal_1 = require("./useHistoryWithTotal");
+var types_1 = require("../types");
+var filters_1 = require("../utils/filters");
 var MAX_HISTORY_ROWS = 32;
 var useHistory = function (_a) {
     var entityUri = _a.entityUri, enabled = _a.enabled;
-    var _b = react_1.useState(null), historyFilter = _b[0], setHistoryFilter = _b[1];
+    var _b = react_1.useState({
+        activities: [types_1.HistoryActivityType.MERGE, types_1.HistoryActivityType.UNMERGE, types_1.HistoryActivityType.UPDATE]
+    }), historyFilter = _b[0], setHistoryFilter = _b[1];
     var _c = react_1.useState(0), historyPage = _c[0], setHistoryPage = _c[1];
+    var historyFilterString = react_1.useMemo(function () { return filters_1.buildHistoryFilterString(historyFilter); }, [historyFilter]);
     var _d = useHistoricUris_1.useHistoricUris({
         entityUri: entityUri,
         enabled: enabled
@@ -16,30 +21,39 @@ var useHistory = function (_a) {
     var _e = useHistoryWithTotal_1.useHistoryWithTotal({
         entityUri: entityUri,
         enabled: enabled && !!historicUris,
+        filter: historyFilterString,
         historicUris: historicUris,
         max: MAX_HISTORY_ROWS,
         offset: historyPage * MAX_HISTORY_ROWS,
-        order: 'desc',
-        showAll: true
-    }), isHistoryLoading = _e.isLoading, historyWithTotal = _e.historyWithTotal, loadMore = _e.loadMore;
-    var canLoadMore = react_1.useMemo(function () { return (historyPage + 1) * MAX_HISTORY_ROWS <= (historyWithTotal === null || historyWithTotal === void 0 ? void 0 : historyWithTotal.total); }, [
+        order: 'desc'
+    }), 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
     ]);
+    var onApplyFilter = react_1.useCallback(function (filter) {
+        setHistoryPage(0);
+        setHistoryFilter(filter);
+    }, []);
     var onLoadMore = react_1.useCallback(function () {
         if (!canLoadMore)
             return;
         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,
         onLoadMore: onLoadMore,
+        onApplyFilter: onApplyFilter,
         historicUris: historicUris,
         historyWithTotal: historyWithTotal,
         historyFilter: historyFilter,
-        setHistoryFilter: setHistoryFilter
+        reloadHistory: reloadHistory
     };
 };
 exports.useHistory = useHistory;

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

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

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

@@ -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

@@ -7,11 +7,12 @@ declare type Props = {
     max?: number;
     offset?: number;
     order?: string;
-    filter?: any;
+    filter?: string;
 };
-export declare const useHistoryWithTotal: ({ entityUri, enabled, historicUris, ...options }: Props) => {
+export declare const useHistoryWithTotal: ({ entityUri, enabled, historicUris, filter, ...options }: Props) => {
     isLoading: boolean;
     historyWithTotal: HistoryWithTotal;
     loadMore: (offset: number) => void;
+    loadData: () => void;
 };
 export {};

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

@@ -32,7 +32,7 @@ var react_1 = require("react");
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var hooks_1 = require("../../../hooks");
 var useHistoryWithTotal = function (_a) {
-    var entityUri = _a.entityUri, _b = _a.enabled, enabled = _b === void 0 ? true : _b, historicUris = _a.historicUris, options = __rest(_a, ["entityUri", "enabled", "historicUris"]);
+    var entityUri = _a.entityUri, _b = _a.enabled, enabled = _b === void 0 ? true : _b, historicUris = _a.historicUris, filter = _a.filter, options = __rest(_a, ["entityUri", "enabled", "historicUris", "filter"]);
     var _c = react_1.useState(null), historyWithTotal = _c[0], setHistoryWithTotal = _c[1];
     var _d = react_1.useState(false), isLoading = _d[0], setIsLoading = _d[1];
     var safePromise = hooks_1.useSafePromise();
@@ -43,7 +43,7 @@ var useHistoryWithTotal = function (_a) {
     var loadData = react_1.useCallback(function () {
         if (entityUri && historicUris) {
             setIsLoading(true);
-            safePromise(mdm_sdk_1.getHistoryWithTotal(__assign({ entityUri: entityUri, historicUris: historicUris }, options)))
+            safePromise(mdm_sdk_1.getHistoryWithTotal(__assign({ entityUri: entityUri, historicUris: historicUris, filter: filter }, options)))
                 .then(function (results) {
                 setHistoryWithTotal(results);
             })
@@ -55,11 +55,11 @@ var useHistoryWithTotal = function (_a) {
         else {
             setHistoryWithTotal(null);
         }
-    }, [entityUri, historicUris]);
+    }, [entityUri, historicUris, filter]);
     var loadMore = react_1.useCallback(function (offset) {
         if (entityUri && historicUris) {
             setIsLoading(true);
-            safePromise(mdm_sdk_1.getHistoryWithTotal(__assign(__assign({ entityUri: entityUri, historicUris: historicUris }, options), { offset: offset })))
+            safePromise(mdm_sdk_1.getHistoryWithTotal(__assign(__assign({ entityUri: entityUri, historicUris: historicUris, filter: filter }, options), { offset: offset })))
                 .then(function (results) {
                 setHistoryWithTotal(function (prev) { return (__assign(__assign({}, prev), { changes: __spreadArray(__spreadArray([], prev === null || prev === void 0 ? void 0 : prev.changes), results.changes) })); });
             })
@@ -68,12 +68,12 @@ var useHistoryWithTotal = function (_a) {
                 setIsLoading(false);
             });
         }
-    }, [entityUri, historicUris]);
+    }, [entityUri, historicUris, filter]);
     react_1.useEffect(function () {
         if (enabled) {
             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

@@ -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

@@ -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/history/utils/filters.d.ts

@@ -0,0 +1,3 @@
+import { DateRangeFilter } from '../../../types';
+export declare const buildHistoryFilterString: any;
+export declare const isDateRangeValid: (value: DateRangeFilter) => boolean;