@reltio/components 1.4.910 → 1.4.914

package/cjs/components/workflow/hooks/useChangeRequest.js

@@ -0,0 +1,58 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useChangeRequest = void 0;
+var react_1 = require("react");
+var ramda_1 = require("ramda");
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var hooks_1 = require("../../../hooks");
+var dcrHelpers_1 = require("../helpers/dcrHelpers");
+var errors_1 = require("../helpers/errors");
+var useChangeRequest = function (dcrUri) {
+    var _a = react_1.useState([]), groupedObjects = _a[0], setGroupedObjects = _a[1];
+    var _b = react_1.useState(null), dcr = _b[0], setDcr = _b[1];
+    var safePromise = hooks_1.useSafePromise();
+    var requestEntities = react_1.useCallback(function (entityUris) {
+        if (ramda_1.isEmpty(entityUris)) {
+            return Promise.resolve([]);
+        }
+        return safePromise(mdm_sdk_1.getEntitiesByUris(entityUris, { searchOptions: 'ovOnly', defaultMaxValues: 1 }));
+    }, []); // eslint-disable-line
+    react_1.useEffect(function () {
+        mdm_sdk_1.getDataChangeRequest(dcrUri)
+            .then(function (dcr) {
+            var changes = dcr.changes, objectsInfo = dcr.objectsInfo;
+            var objectsWithChanges = dcrHelpers_1.extractObjectsFromChangeRequest(changes, objectsInfo);
+            var entityObjectsWithRelations = ramda_1.pipe(dcrHelpers_1.getEntitiesObjects, ramda_1.map(dcrHelpers_1.createEntityRelationsObjectByEntity(objectsWithChanges)))(objectsWithChanges);
+            var relationsObjects = ramda_1.pipe(dcrHelpers_1.getRelationsObjects, ramda_1.map(dcrHelpers_1.createEntityRelationsObjectByRelation(objectsInfo)))(objectsWithChanges);
+            var _a = ramda_1.partition(ramda_1.has('entity'), relationsObjects), relationsObjectsWithEntity = _a[0], relationsObjectsWithoutEntity = _a[1];
+            var entityUris = relationsObjectsWithoutEntity.map(ramda_1.path(['relations', 0, 'startObjectUri']));
+            requestEntities(entityUris)
+                .then(function (entities) {
+                var relationsObjectsWithRequestedEntities = relationsObjectsWithoutEntity.map(function (relationsObject, index) {
+                    return __assign(__assign({}, relationsObject), { entity: entities[index] });
+                });
+                ramda_1.pipe(ramda_1.flatten, ramda_1.reduce(dcrHelpers_1.concatEntityRelationsObjects, {}), ramda_1.values, setGroupedObjects)([
+                    entityObjectsWithRelations,
+                    relationsObjectsWithEntity,
+                    relationsObjectsWithRequestedEntities
+                ]);
+            })
+                .catch(errors_1.showWorkflowError);
+            setDcr(dcr);
+        })
+            .catch(errors_1.showWorkflowError);
+    }, [dcrUri, requestEntities]);
+    return { dcr: dcr, groupedObjects: groupedObjects };
+};
+exports.useChangeRequest = useChangeRequest;

package/{esm/components/workflow/components/AttributesChanges/types/DCRTypes.d.ts → cjs/components/workflow/types/dcrTypes.d.ts}

@@ -1,10 +1,26 @@
-import { Crosswalk, NestedAttributeValue, ReferenceAttributeValue, SimpleAttributeValue } from '@reltio/mdm-sdk';
+import { Crosswalk, Entity, NestedAttributeValue, ReferenceAttributeValue, Relation, SimpleAttributeValue } from '@reltio/mdm-sdk';
 import { DCRTypes } from '../constants/operations';
+export declare type ChangeRequest = {
+    changes: DCRChanges;
+    createdBy: string;
+    createdTime: number;
+    objectsInfo: DCRObjectsInfo;
+    state: string;
+    type: string;
+    updatedBy: string;
+    updatedTime: number;
+    uri: string;
+};
+export declare type GroupedObjectsInfo = {
+    entity: EntityInfo;
+    relations: RelationInfo[];
+};
 export declare type EntityInfo = {
     isExist: boolean;
     label: string;
     secondaryLabel: string;
     type: string;
+    uri?: string;
 };
 export declare type RelationInfo = {
     type: string;
@@ -13,11 +29,15 @@ export declare type RelationInfo = {
     endObjectLabel: string;
     endObjectUri: string;
     isExist: boolean;
+    uri?: string;
 };
 export declare type DCRObjectInfo = EntityInfo | RelationInfo;
 export declare type DCRObjectsInfo = {
     [key: string]: DCRObjectInfo;
 };
+export declare type DCRAttributes = {
+    [attributeName: string]: (ChangeValue | DCRChange)[];
+};
 export declare type Value = DCRAttributes | DCRChange | string | boolean | number;
 export declare type DCRAttributeValue = Omit<SimpleAttributeValue | NestedAttributeValue | ReferenceAttributeValue, 'uri' | 'value'> & {
     value: Value;
@@ -27,10 +47,7 @@ export declare type DCRAttributeValue = Omit<SimpleAttributeValue | NestedAttrib
     };
     uri?: string;
 };
-export declare type DCRAttributes = {
-    [attributeName: string]: DCRAttributeValue[];
-};
-export declare type ChangeValue = DCRAttributeValue | string[];
+export declare type ChangeValue = DCRAttributeValue | string[] | Entity | Relation;
 export declare type DCRChange = {
     attributePath?: string;
     attributeType?: string;
@@ -50,14 +67,3 @@ export declare type DCRChange = {
 export declare type DCRChanges = {
     [key: string]: DCRChange[];
 };
-export declare type ChangeRequest = {
-    changes: DCRChanges;
-    createdBy: string;
-    createdTime: number;
-    objectsInfo: DCRObjectsInfo;
-    state: string;
-    type: string;
-    updatedBy: string;
-    updatedTime: number;
-    uri: string;
-};

package/cjs/components/workflow/types/dcrTypes.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/cjs/hooks/useMergeAllRequest.d.ts

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

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

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

@@ -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/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/esm/components/attributes/ImageAttributesLine/ImageAttributesLine.js

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

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

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

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

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

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

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

@@ -1,9 +1,35 @@
 import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import i18n from 'ui-i18n';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
+import mdmModule, { HistoryMode, profile } from '@reltio/mdm-module';
 import { SmallIconButton } from '../../SmallIconButton';
+import DropDownMenuButton from '../../DropDownMenuButton/DropDownMenuButton';
+import MenuItemRenderer from './MenuItemRenderer';
 import { useStyles } from './styles';
 var HistoryMenuButton = function () {
     var styles = useStyles();
-    return React.createElement(SmallIconButton, { icon: MoreVertIcon, size: "XS", onClick: function () { }, className: styles.icon });
+    var mode = useSelector(mdmModule.selectors.getHistoryMode);
+    var dispatch = useDispatch();
+    var handleModeChange = function (selectedMode) {
+        dispatch(profile.history.actions.setHistoryMode(selectedMode));
+    };
+    var menuItems = [
+        {
+            text: i18n.text('Compare to Current view'),
+            selected: mode === HistoryMode.Current,
+            onClick: function () { return handleModeChange(HistoryMode.Current); }
+        },
+        {
+            text: i18n.text('Compare to Previous view'),
+            selected: mode === HistoryMode.Previous,
+            onClick: function () { return handleModeChange(HistoryMode.Previous); }
+        }
+    ];
+    return (React.createElement(DropDownMenuButton, { MenuItemRenderer: MenuItemRenderer, buttonComponent: SmallIconButton, buttonProps: {
+            icon: MoreVertIcon,
+            size: 'L',
+            className: styles.icon
+        }, menuId: 'history-menu', menuItems: menuItems }));
 };
 export default HistoryMenuButton;

package/esm/components/history/HistoryMenuButton/MenuItemRenderer.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+declare type Item = {
+    text: string;
+    selected: boolean;
+    onClick: (e: any) => void;
+};
+declare type Props = {
+    item: Item;
+    onMenuClose?: () => void;
+};
+declare const MenuItemRenderer: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLLIElement>>;
+export default MenuItemRenderer;

package/esm/components/history/HistoryMenuButton/MenuItemRenderer.js

@@ -0,0 +1,20 @@
+import React, { forwardRef } from 'react';
+import MenuItem from '@material-ui/core/MenuItem';
+import Typography from '@material-ui/core/Typography';
+import CheckIcon from '@material-ui/icons/Check';
+import { noop } from '../../../core';
+import { useStyles } from './styles';
+var MenuItemRenderer = forwardRef(function (_a, ref) {
+    var item = _a.item, _b = _a.onMenuClose, onMenuClose = _b === void 0 ? noop : _b;
+    var styles = useStyles();
+    var text = item.text, selected = item.selected, onClick = item.onClick;
+    var handleClick = function (e) {
+        onMenuClose();
+        onClick(e);
+    };
+    return (React.createElement(MenuItem, { classes: { root: styles.menuItem }, onClick: handleClick, ref: ref },
+        selected && React.createElement(CheckIcon, { className: styles.checkIcon }),
+        React.createElement(Typography, { classes: { root: styles.menuText } }, text)));
+});
+MenuItemRenderer.displayName = 'MenuItemRenderer';
+export default MenuItemRenderer;

package/esm/components/history/HistoryMenuButton/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"icon">;
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"icon" | "menuItem" | "menuText" | "checkIcon">;

package/esm/components/history/HistoryMenuButton/styles.js

@@ -2,5 +2,18 @@ import { makeStyles } from '@material-ui/core/styles';
 export var useStyles = makeStyles({
     icon: {
         margin: 5
+    },
+    menuItem: {
+        minHeight: '32px'
+    },
+    menuText: {
+        fontSize: '13px',
+        lineHeight: '15px',
+        letterSpacing: 0,
+        marginLeft: '30px'
+    },
+    checkIcon: {
+        position: 'absolute',
+        color: 'rgba(0, 0, 0, 0.54)'
     }
 });

package/esm/components/index.d.ts

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

@@ -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/components/workflow/cards/DataChangeRequestTaskCard/DataChangeRequestTaskCard.js

@@ -1,22 +1,17 @@
-import React, { useState, useEffect, useMemo } from 'react';
-import { getDataChangeRequest } from '@reltio/mdm-sdk';
+import React from 'react';
 import GenericWorkflowTaskCard from '../GenericWorkflowTaskCard/GenericWorkflowTaskCard';
 import LineDecorator from '../../components/LineDecorator/LineDecorator';
 import { getDCRUri } from '../../helpers';
 import DcrTaskIcon from '../../../../icons/DcrTaskIcon';
-import { AttributesChangesContext } from '../../components/AttributesChanges/contexts/AttributesChangesContext';
-import { extractObjectsFromChangeRequest } from '../../components/AttributesChanges/helpers/helpers';
 import AttributesChanges from '../../components/AttributesChanges/AttributesChanges';
+import { useChangeRequest } from '../../hooks/useChangeRequest';
 var DataChangeRequestTaskCard = function (_a) {
     var task = _a.task;
     var objectURIs = task.objectURIs;
     var dcrUri = getDCRUri(objectURIs);
-    var _b = useState(null), dcr = _b[0], setDcr = _b[1];
-    useEffect(function () {
-        getDataChangeRequest(dcrUri).then(setDcr);
-    }, [dcrUri]);
-    var objectsWithChanges = useMemo(function () { return (dcr ? extractObjectsFromChangeRequest(dcr) : []); }, [dcr]);
-    return (React.createElement(GenericWorkflowTaskCard, { task: task, Icon: DcrTaskIcon }, dcr && (React.createElement(AttributesChangesContext.Provider, { value: dcr.objectsInfo },
-        React.createElement(LineDecorator, { last: true }, objectsWithChanges.map(function (object) { return (React.createElement(AttributesChanges, { key: object.uri, changes: dcr.changes[object.uri], objectInfo: object })); }))))));
+    var _b = useChangeRequest(dcrUri), dcr = _b.dcr, groupedObjects = _b.groupedObjects;
+    return (React.createElement(GenericWorkflowTaskCard, { task: task, Icon: DcrTaskIcon }, dcr &&
+        groupedObjects.map(function (object, index) { return (React.createElement(LineDecorator, { key: index, last: index === groupedObjects.length - 1, divider: true },
+            React.createElement(AttributesChanges, { entityInfo: object.entity, relationsInfo: object.relations, changes: dcr.changes, objectsInfo: dcr.objectsInfo }))); })));
 };
 export default DataChangeRequestTaskCard;

package/esm/components/workflow/components/AttributesChanges/AttributesChanges.d.ts

@@ -1,8 +1,11 @@
 /// <reference types="react" />
-import { DCRChange, EntityInfo } from './types/DCRTypes';
+import { DCRChanges, DCRObjectsInfo, EntityInfo, RelationInfo } from '../../types/dcrTypes';
 declare type Props = {
-    changes: DCRChange[];
-    objectInfo: EntityInfo;
+    changes: DCRChanges;
+    objectsInfo: DCRObjectsInfo;
+    entityInfo: EntityInfo;
+    relationsInfo?: RelationInfo[];
+    max?: number;
 };
-declare const AttributesChanges: ({ changes, objectInfo }: Props) => JSX.Element;
+declare const AttributesChanges: ({ changes, objectsInfo, entityInfo, relationsInfo, max }: Props) => JSX.Element;
 export default AttributesChanges;

package/esm/components/workflow/components/AttributesChanges/AttributesChanges.js

@@ -1,23 +1,33 @@
 import React, { useMemo } from 'react';
 import { useSelector } from 'react-redux';
+import i18n from 'ui-i18n';
+import { flatten } from 'ramda';
 import mdmModule from '@reltio/mdm-module';
 import { getEntityUriForLink, getLabel } from '@reltio/mdm-sdk';
 import { mergeChanges } from './helpers/mergeHelpers';
-import EntityUriLink from '../../../EntityUriLink/EntityUriLink';
 import ShowMoreLink from './components/ShowMoreLink/ShowMoreLink';
 import DCRChangesList from './components/DCRChangesList/DCRChangesList';
+import { AttributesChangesContext } from './contexts/AttributesChangesContext';
 import { useCollapsibleList } from './hooks/useCollapsibleList';
+import EntityUriLink from '../../../EntityUriLink/EntityUriLink';
 import { useStyles } from './styles';
 var AttributesChanges = function (_a) {
-    var changes = _a.changes, objectInfo = _a.objectInfo;
+    var changes = _a.changes, objectsInfo = _a.objectsInfo, entityInfo = _a.entityInfo, relationsInfo = _a.relationsInfo, max = _a.max;
     var styles = useStyles();
     var metadata = useSelector(mdmModule.selectors.getMetadata);
-    var mergedChanges = useMemo(function () { return mergeChanges(metadata, changes, objectInfo); }, [metadata, changes, objectInfo]);
-    var _b = useCollapsibleList(mergedChanges), isExpanded = _b.isExpanded, onToggle = _b.onToggle, itemsToShow = _b.itemsToShow, collapsedSuggestionsCount = _b.collapsedSuggestionsCount;
-    return (React.createElement("div", { className: styles.container },
-        React.createElement(EntityUriLink, { className: styles.uri, value: getEntityUriForLink(objectInfo) },
-            React.createElement("div", { className: styles.label }, getLabel(objectInfo.label))),
-        React.createElement(DCRChangesList, { changes: itemsToShow }),
-        collapsedSuggestionsCount > 0 && (React.createElement(ShowMoreLink, { onClick: onToggle, suggestionsCount: collapsedSuggestionsCount, isExpanded: isExpanded, className: styles.showMoreLink }))));
+    var _b = useMemo(function () { return mergeChanges(metadata, changes, entityInfo, relationsInfo); }, [metadata, changes, entityInfo, relationsInfo]), mergedEntityChanges = _b[0], mergedRelationsChanges = _b[1];
+    var changesList = useMemo(function () {
+        var relationshipTitle = { label: i18n.text('Relationships') };
+        return mergedRelationsChanges.length > 0
+            ? flatten([mergedEntityChanges, relationshipTitle, mergedRelationsChanges])
+            : mergedEntityChanges;
+    }, [mergedEntityChanges, mergedRelationsChanges]);
+    var _c = useCollapsibleList(changesList, max), isExpanded = _c.isExpanded, onToggle = _c.onToggle, itemsToShow = _c.itemsToShow, collapsedSuggestionsCount = _c.collapsedSuggestionsCount;
+    return (React.createElement(AttributesChangesContext.Provider, { value: objectsInfo },
+        React.createElement("div", { className: styles.container },
+            React.createElement(EntityUriLink, { className: styles.uri, value: getEntityUriForLink(entityInfo) },
+                React.createElement("div", { className: styles.label }, getLabel(entityInfo.label))),
+            React.createElement(DCRChangesList, { changes: itemsToShow }),
+            collapsedSuggestionsCount > 0 && (React.createElement(ShowMoreLink, { onClick: onToggle, suggestionsCount: collapsedSuggestionsCount, isExpanded: isExpanded, className: styles.showMoreLink })))));
 };
 export default AttributesChanges;

package/esm/components/workflow/components/AttributesChanges/components/ChangeView/ChangeView.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
-import { OperationTypes } from '../../constants/operations';
+import { OperationTypes } from '../../../../constants/operations';
 declare type Props = {
-    label: React.ReactElement;
-    oldValue?: React.ReactElement;
-    newValue?: React.ReactElement;
+    label: React.ReactNode;
+    oldValue?: React.ReactNode;
+    newValue?: React.ReactNode;
     operation?: OperationTypes;
     className?: string;
 };

package/esm/components/workflow/components/AttributesChanges/components/ChangeView/styles.js

@@ -5,20 +5,15 @@ export var useStyles = makeStyles(function (theme) { return ({
         lineHeight: '20px',
         color: theme.palette.text.primary,
         marginTop: '6px',
-        display: 'flex',
-        flexWrap: 'wrap',
-        overflow: 'hidden'
+        overflow: 'hidden',
+        wordBreak: 'break-word'
     },
     fieldName: {
-        display: 'flex',
-        alignItems: 'center',
         color: theme.palette.text.secondary,
         marginRight: '8px'
     },
     difference: {
-        display: 'flex',
-        alignItems: 'center',
-        flexDirection: 'row'
+        marginRight: '8px'
     },
     arrow: {
         margin: '0 4px',
@@ -31,7 +26,6 @@ export var useStyles = makeStyles(function (theme) { return ({
         fontWeight: 500,
         lineHeight: '16px',
         letterSpacing: 0,
-        marginLeft: '8px',
         flexShrink: 0,
         textTransform: 'capitalize',
         color: theme.palette.primary.main,