@reltio/components 1.4.910 → 1.4.914

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

@@ -1,14 +1,59 @@
 "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;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
+var react_redux_1 = require("react-redux");
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
 var MoreVert_1 = __importDefault(require("@material-ui/icons/MoreVert"));
+var mdm_module_1 = __importStar(require("@reltio/mdm-module"));
 var SmallIconButton_1 = require("../../SmallIconButton");
+var DropDownMenuButton_1 = __importDefault(require("../../DropDownMenuButton/DropDownMenuButton"));
+var MenuItemRenderer_1 = __importDefault(require("./MenuItemRenderer"));
 var styles_1 = require("./styles");
 var HistoryMenuButton = function () {
     var styles = styles_1.useStyles();
-    return react_1.default.createElement(SmallIconButton_1.SmallIconButton, { icon: MoreVert_1.default, size: "XS", onClick: function () { }, className: styles.icon });
+    var mode = react_redux_1.useSelector(mdm_module_1.default.selectors.getHistoryMode);
+    var dispatch = react_redux_1.useDispatch();
+    var handleModeChange = function (selectedMode) {
+        dispatch(mdm_module_1.profile.history.actions.setHistoryMode(selectedMode));
+    };
+    var menuItems = [
+        {
+            text: ui_i18n_1.default.text('Compare to Current view'),
+            selected: mode === mdm_module_1.HistoryMode.Current,
+            onClick: function () { return handleModeChange(mdm_module_1.HistoryMode.Current); }
+        },
+        {
+            text: ui_i18n_1.default.text('Compare to Previous view'),
+            selected: mode === mdm_module_1.HistoryMode.Previous,
+            onClick: function () { return handleModeChange(mdm_module_1.HistoryMode.Previous); }
+        }
+    ];
+    return (react_1.default.createElement(DropDownMenuButton_1.default, { MenuItemRenderer: MenuItemRenderer_1.default, buttonComponent: SmallIconButton_1.SmallIconButton, buttonProps: {
+            icon: MoreVert_1.default,
+            size: 'L',
+            className: styles.icon
+        }, menuId: 'history-menu', menuItems: menuItems }));
 };
 exports.default = HistoryMenuButton;

package/cjs/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/cjs/components/history/HistoryMenuButton/MenuItemRenderer.js

@@ -0,0 +1,44 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var MenuItem_1 = __importDefault(require("@material-ui/core/MenuItem"));
+var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
+var Check_1 = __importDefault(require("@material-ui/icons/Check"));
+var core_1 = require("../../../core");
+var styles_1 = require("./styles");
+var MenuItemRenderer = react_1.forwardRef(function (_a, ref) {
+    var item = _a.item, _b = _a.onMenuClose, onMenuClose = _b === void 0 ? core_1.noop : _b;
+    var styles = styles_1.useStyles();
+    var text = item.text, selected = item.selected, onClick = item.onClick;
+    var handleClick = function (e) {
+        onMenuClose();
+        onClick(e);
+    };
+    return (react_1.default.createElement(MenuItem_1.default, { classes: { root: styles.menuItem }, onClick: handleClick, ref: ref },
+        selected && react_1.default.createElement(Check_1.default, { className: styles.checkIcon }),
+        react_1.default.createElement(Typography_1.default, { classes: { root: styles.menuText } }, text)));
+});
+MenuItemRenderer.displayName = 'MenuItemRenderer';
+exports.default = MenuItemRenderer;

package/cjs/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/cjs/components/history/HistoryMenuButton/styles.js

@@ -5,5 +5,18 @@ var styles_1 = require("@material-ui/core/styles");
 exports.useStyles = styles_1.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/cjs/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/cjs/components/index.js

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

package/cjs/components/workflow/cards/DataChangeRequestTaskCard/DataChangeRequestTaskCard.js

@@ -1,46 +1,22 @@
 "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;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
-var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var react_1 = __importDefault(require("react"));
 var GenericWorkflowTaskCard_1 = __importDefault(require("../GenericWorkflowTaskCard/GenericWorkflowTaskCard"));
 var LineDecorator_1 = __importDefault(require("../../components/LineDecorator/LineDecorator"));
 var helpers_1 = require("../../helpers");
 var DcrTaskIcon_1 = __importDefault(require("../../../../icons/DcrTaskIcon"));
-var AttributesChangesContext_1 = require("../../components/AttributesChanges/contexts/AttributesChangesContext");
-var helpers_2 = require("../../components/AttributesChanges/helpers/helpers");
 var AttributesChanges_1 = __importDefault(require("../../components/AttributesChanges/AttributesChanges"));
+var useChangeRequest_1 = require("../../hooks/useChangeRequest");
 var DataChangeRequestTaskCard = function (_a) {
     var task = _a.task;
     var objectURIs = task.objectURIs;
     var dcrUri = helpers_1.getDCRUri(objectURIs);
-    var _b = react_1.useState(null), dcr = _b[0], setDcr = _b[1];
-    react_1.useEffect(function () {
-        mdm_sdk_1.getDataChangeRequest(dcrUri).then(setDcr);
-    }, [dcrUri]);
-    var objectsWithChanges = react_1.useMemo(function () { return (dcr ? helpers_2.extractObjectsFromChangeRequest(dcr) : []); }, [dcr]);
-    return (react_1.default.createElement(GenericWorkflowTaskCard_1.default, { task: task, Icon: DcrTaskIcon_1.default }, dcr && (react_1.default.createElement(AttributesChangesContext_1.AttributesChangesContext.Provider, { value: dcr.objectsInfo },
-        react_1.default.createElement(LineDecorator_1.default, { last: true }, objectsWithChanges.map(function (object) { return (react_1.default.createElement(AttributesChanges_1.default, { key: object.uri, changes: dcr.changes[object.uri], objectInfo: object })); }))))));
+    var _b = useChangeRequest_1.useChangeRequest(dcrUri), dcr = _b.dcr, groupedObjects = _b.groupedObjects;
+    return (react_1.default.createElement(GenericWorkflowTaskCard_1.default, { task: task, Icon: DcrTaskIcon_1.default }, dcr &&
+        groupedObjects.map(function (object, index) { return (react_1.default.createElement(LineDecorator_1.default, { key: index, last: index === groupedObjects.length - 1, divider: true },
+            react_1.default.createElement(AttributesChanges_1.default, { entityInfo: object.entity, relationsInfo: object.relations, changes: dcr.changes, objectsInfo: dcr.objectsInfo }))); })));
 };
 exports.default = DataChangeRequestTaskCard;

package/cjs/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/cjs/components/workflow/components/AttributesChanges/AttributesChanges.js

@@ -24,24 +24,34 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var react_redux_1 = require("react-redux");
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var ramda_1 = require("ramda");
 var mdm_module_1 = __importDefault(require("@reltio/mdm-module"));
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var mergeHelpers_1 = require("./helpers/mergeHelpers");
-var EntityUriLink_1 = __importDefault(require("../../../EntityUriLink/EntityUriLink"));
 var ShowMoreLink_1 = __importDefault(require("./components/ShowMoreLink/ShowMoreLink"));
 var DCRChangesList_1 = __importDefault(require("./components/DCRChangesList/DCRChangesList"));
+var AttributesChangesContext_1 = require("./contexts/AttributesChangesContext");
 var useCollapsibleList_1 = require("./hooks/useCollapsibleList");
+var EntityUriLink_1 = __importDefault(require("../../../EntityUriLink/EntityUriLink"));
 var styles_1 = require("./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 = styles_1.useStyles();
     var metadata = react_redux_1.useSelector(mdm_module_1.default.selectors.getMetadata);
-    var mergedChanges = react_1.useMemo(function () { return mergeHelpers_1.mergeChanges(metadata, changes, objectInfo); }, [metadata, changes, objectInfo]);
-    var _b = useCollapsibleList_1.useCollapsibleList(mergedChanges), isExpanded = _b.isExpanded, onToggle = _b.onToggle, itemsToShow = _b.itemsToShow, collapsedSuggestionsCount = _b.collapsedSuggestionsCount;
-    return (react_1.default.createElement("div", { className: styles.container },
-        react_1.default.createElement(EntityUriLink_1.default, { className: styles.uri, value: mdm_sdk_1.getEntityUriForLink(objectInfo) },
-            react_1.default.createElement("div", { className: styles.label }, mdm_sdk_1.getLabel(objectInfo.label))),
-        react_1.default.createElement(DCRChangesList_1.default, { changes: itemsToShow }),
-        collapsedSuggestionsCount > 0 && (react_1.default.createElement(ShowMoreLink_1.default, { onClick: onToggle, suggestionsCount: collapsedSuggestionsCount, isExpanded: isExpanded, className: styles.showMoreLink }))));
+    var _b = react_1.useMemo(function () { return mergeHelpers_1.mergeChanges(metadata, changes, entityInfo, relationsInfo); }, [metadata, changes, entityInfo, relationsInfo]), mergedEntityChanges = _b[0], mergedRelationsChanges = _b[1];
+    var changesList = react_1.useMemo(function () {
+        var relationshipTitle = { label: ui_i18n_1.default.text('Relationships') };
+        return mergedRelationsChanges.length > 0
+            ? ramda_1.flatten([mergedEntityChanges, relationshipTitle, mergedRelationsChanges])
+            : mergedEntityChanges;
+    }, [mergedEntityChanges, mergedRelationsChanges]);
+    var _c = useCollapsibleList_1.useCollapsibleList(changesList, max), isExpanded = _c.isExpanded, onToggle = _c.onToggle, itemsToShow = _c.itemsToShow, collapsedSuggestionsCount = _c.collapsedSuggestionsCount;
+    return (react_1.default.createElement(AttributesChangesContext_1.AttributesChangesContext.Provider, { value: objectsInfo },
+        react_1.default.createElement("div", { className: styles.container },
+            react_1.default.createElement(EntityUriLink_1.default, { className: styles.uri, value: mdm_sdk_1.getEntityUriForLink(entityInfo) },
+                react_1.default.createElement("div", { className: styles.label }, mdm_sdk_1.getLabel(entityInfo.label))),
+            react_1.default.createElement(DCRChangesList_1.default, { changes: itemsToShow }),
+            collapsedSuggestionsCount > 0 && (react_1.default.createElement(ShowMoreLink_1.default, { onClick: onToggle, suggestionsCount: collapsedSuggestionsCount, isExpanded: isExpanded, className: styles.showMoreLink })))));
 };
 exports.default = AttributesChanges;

package/cjs/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/cjs/components/workflow/components/AttributesChanges/components/ChangeView/styles.js

@@ -8,20 +8,15 @@ exports.useStyles = styles_1.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',
@@ -34,7 +29,6 @@ exports.useStyles = styles_1.makeStyles(function (theme) { return ({
         fontWeight: 500,
         lineHeight: '16px',
         letterSpacing: 0,
-        marginLeft: '8px',
         flexShrink: 0,
         textTransform: 'capitalize',
         color: theme.palette.primary.main,

package/cjs/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/cjs/components/workflow/components/AttributesChanges/components/DCRChangesList/DCRChangesList.js

@@ -15,11 +15,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
+var ramda_1 = require("ramda");
 var DiffRenderer_1 = __importDefault(require("../DiffRenderer/DiffRenderer"));
+var styles_1 = require("./styles");
 var DCRChangesList = function (_a) {
     var changes = _a.changes;
+    var styles = styles_1.useStyles();
     return (react_1.default.createElement(react_1.default.Fragment, null, changes.map(function (change, index) {
-        return react_1.default.createElement(DiffRenderer_1.default, __assign({}, change, { key: index }));
+        return ramda_1.has('level', change) ? (react_1.default.createElement(DiffRenderer_1.default, __assign({}, change, { key: index }))) : (react_1.default.createElement("div", { className: styles.title, key: index }, change.label));
     })));
 };
 exports.default = DCRChangesList;

package/cjs/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/cjs/components/workflow/components/AttributesChanges/components/DCRChangesList/styles.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+exports.useStyles = styles_1.makeStyles({
+    title: {
+        fontSize: '12px',
+        letterSpacing: 0,
+        lineHeight: '16px',
+        fontWeight: 500,
+        marginTop: '8px'
+    }
+});

package/cjs/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;