@reltio/components 1.4.911 → 1.4.915

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/editMode/SimpleAttributeEditor/selectors/helpers/parents.js

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

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

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { Props as Change } from '../DiffRenderer/DiffRenderer';
+import { Diff, Title } from '../../types/diffTypes';
 declare type Props = {
-    changes: Change[];
+    changes: (Diff | Title)[];
 };
 declare const DCRChangesList: ({ changes }: Props) => JSX.Element;
 export default DCRChangesList;

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

@@ -10,11 +10,14 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import React from 'react';
+import { has } from 'ramda';
 import DiffRenderer from '../DiffRenderer/DiffRenderer';
+import { useStyles } from './styles';
 var DCRChangesList = function (_a) {
     var changes = _a.changes;
+    var styles = useStyles();
     return (React.createElement(React.Fragment, null, changes.map(function (change, index) {
-        return React.createElement(DiffRenderer, __assign({}, change, { key: index }));
+        return has('level', change) ? (React.createElement(DiffRenderer, __assign({}, change, { key: index }))) : (React.createElement("div", { className: styles.title, key: index }, change.label));
     })));
 };
 export default DCRChangesList;

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

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"title">;

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

@@ -0,0 +1,10 @@
+import { makeStyles } from '@material-ui/core/styles';
+export var useStyles = makeStyles({
+    title: {
+        fontSize: '12px',
+        letterSpacing: 0,
+        lineHeight: '16px',
+        fontWeight: 500,
+        marginTop: '8px'
+    }
+});

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

@@ -1,15 +1,4 @@
 /// <reference types="react" />
-import { AttributeType } from '@reltio/mdm-sdk';
-import { OperationTypes } from '../../constants/operations';
-import { ChangeValue, DCRAttributeValue } from '../../types/DCRTypes';
-export declare type Props = {
-    level: number;
-    label: string;
-    attributeType: AttributeType;
-    attributeValue?: DCRAttributeValue;
-    newValue?: ChangeValue;
-    oldValue?: ChangeValue;
-    operation?: OperationTypes;
-};
-declare const DiffRenderer: ({ label, level, attributeType, attributeValue, oldValue, newValue, operation }: Props) => JSX.Element;
+import { Diff } from '../../types/diffTypes';
+declare const DiffRenderer: ({ label, level, attributeType, attributeValue, oldValue, newValue, operation }: Diff) => JSX.Element;
 export default DiffRenderer;

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

@@ -1,30 +1,46 @@
 import React, { useCallback, useContext, useMemo } from 'react';
 import { useSelector } from 'react-redux';
-import { anyPass, ifElse, hasPath, path, when } from 'ramda';
+import { anyPass, ifElse, isNil, hasPath, path, when } from 'ramda';
+import classnames from 'classnames';
 import { getAttributeValue, getLabel, isReference } from '@reltio/mdm-sdk';
 import mdmModule from '@reltio/mdm-module';
 import ChangeView from '../ChangeView/ChangeView';
-import { getAttributeDescription, getDataTypeDefinition } from '../../helpers/helpers';
-import EntityUriLink from '../../../../../EntityUriLink/EntityUriLink';
 import { AttributesChangesContext } from '../../contexts/AttributesChangesContext';
+import { getAttributeDescription, getDataTypeDefinition } from '../../helpers/helpers';
 import DataTypeValue from '../../../../../DataTypeValue/DataTypeValue';
+import EntityUriLink from '../../../../../EntityUriLink/EntityUriLink';
 import { useStyles } from './styles';
 var DiffRenderer = function (_a) {
     var label = _a.label, level = _a.level, attributeType = _a.attributeType, attributeValue = _a.attributeValue, oldValue = _a.oldValue, newValue = _a.newValue, operation = _a.operation;
     var styles = useStyles({ level: level });
-    var entity = useSelector(mdmModule.selectors.getEntity);
+    var entityUri = useSelector(mdmModule.selectors.getEntityUri);
     var objectsInfo = useContext(AttributesChangesContext);
-    var renderLink = useCallback(function () {
+    var getLinkDescription = useCallback(function () {
         if (isReference(attributeType)) {
             var value = when(anyPass([hasPath(['value', 'newValue']), hasPath(['value', 'oldValue'])]), ifElse(hasPath(['value', 'newValue']), path(['value', 'newValue']), path(['value', 'oldValue'])))(attributeValue);
-            var _a = getAttributeDescription(attributeType, value, entity.uri, objectsInfo), objectUri = _a.objectUri, objectLabel = _a.objectLabel;
-            return (React.createElement(EntityUriLink, { value: objectUri, className: styles.uri },
-                React.createElement("span", null, getLabel(objectLabel))));
+            return getAttributeDescription(attributeType, value, entityUri, objectsInfo);
+        }
+        else if ('endObject' in attributeType) {
+            var _a = attributeValue, endObjectUri = _a.endObjectUri, endObjectLabel = _a.endObjectLabel;
+            return {
+                objectUri: endObjectUri,
+                objectLabel: endObjectLabel
+            };
+        }
+    }, [attributeType, attributeValue, entityUri, objectsInfo]);
+    var renderLink = useCallback(function () {
+        var _a, _b;
+        var _c;
+        var _d = getLinkDescription() || {}, objectUri = _d.objectUri, objectLabel = _d.objectLabel;
+        if (!isNil(objectUri) && !isNil(objectLabel)) {
+            var isNotExist = ((_c = objectsInfo[objectUri]) === null || _c === void 0 ? void 0 : _c.isExist) === false;
+            return (React.createElement(EntityUriLink, { value: objectUri, className: classnames(styles.linkContainer, (_a = {}, _a[styles.disabledLink] = isNotExist, _a)) },
+                React.createElement("span", { className: classnames(styles.linkLabel, (_b = {}, _b[styles.label] = isNotExist, _b)) }, getLabel(objectLabel))));
         }
         return null;
-    }, [attributeType, attributeValue, entity.uri, objectsInfo, styles.uri]);
+    }, [getLinkDescription, objectsInfo, styles]);
     var changeLabel = useMemo(function () {
-        return (React.createElement("div", null,
+        return (React.createElement("span", null,
             label,
             renderLink()));
     }, [label, renderLink]);

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

@@ -1,5 +1,5 @@
 declare type StylesProps = {
     level: number;
 };
-export declare const useStyles: (props: StylesProps) => import("@material-ui/core/styles/withStyles").ClassNameMap<"uri" | "change">;
+export declare const useStyles: (props: StylesProps) => import("@material-ui/core/styles/withStyles").ClassNameMap<"label" | "change" | "linkLabel" | "linkContainer" | "disabledLink">;
 export {};