@reltio/components 1.4.2198 → 1.4.2200

package/cjs/features/workflow/ReviewDCRDialog/components/DCRChangesSummary/DCRChangesSummary.js

@@ -30,29 +30,15 @@ exports.DCRChangesSummary = void 0;
 var react_1 = __importStar(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var Skeleton_1 = __importDefault(require("@mui/material/Skeleton"));
-var ui_i18n_1 = __importDefault(require("ui-i18n"));
-var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var MdmModuleContext_1 = require("../../../../../contexts/MdmModuleContext");
 var helpers_1 = require("../../helpers");
+var common_1 = require("../../../helpers/common");
 var DCRChangesSummary_module_css_1 = __importDefault(require("./DCRChangesSummary.module.css"));
-var getOperationLabel = function (operation) {
-    var _a;
-    var labels = (_a = {},
-        _a[mdm_sdk_1.DCROperationTypes.ADDED] = ui_i18n_1.default.text('Added'),
-        _a[mdm_sdk_1.DCROperationTypes.EDITED] = ui_i18n_1.default.text('Edited'),
-        _a[mdm_sdk_1.DCROperationTypes.DELETED] = ui_i18n_1.default.text('Deleted'),
-        _a[mdm_sdk_1.DCROperationTypes.PINNED] = ui_i18n_1.default.text('Pinned'),
-        _a[mdm_sdk_1.DCROperationTypes.PIN_DELETED] = ui_i18n_1.default.text('Pin deleted'),
-        _a[mdm_sdk_1.DCROperationTypes.IGNORED] = ui_i18n_1.default.text('Ignored'),
-        _a[mdm_sdk_1.DCROperationTypes.IGNORE_DELETED] = ui_i18n_1.default.text('Ignore deleted'),
-        _a);
-    return labels[operation] || operation || '';
-};
 var ChangeItem = function (_a) {
     var count = _a.count, operation = _a.operation;
     return count > 0 && (react_1.default.createElement("div", { className: DCRChangesSummary_module_css_1.default.changeItem },
         react_1.default.createElement("div", { className: (0, classnames_1.default)(DCRChangesSummary_module_css_1.default.changeNumber, DCRChangesSummary_module_css_1.default[operation]) }, count),
-        react_1.default.createElement("div", { className: DCRChangesSummary_module_css_1.default.changeLabel }, getOperationLabel(operation))));
+        react_1.default.createElement("div", { className: DCRChangesSummary_module_css_1.default.changeLabel }, (0, common_1.getOperationLabel)(operation))));
 };
 var LoadingSkeleton = function () { return (react_1.default.createElement(react_1.default.Fragment, null, Array.from({ length: 4 }).map(function (_, index) { return (react_1.default.createElement("div", { key: "summary-changes-skeleton-".concat(index), className: DCRChangesSummary_module_css_1.default.changeItem },
     react_1.default.createElement(Skeleton_1.default, { variant: "text", width: 24, height: 16, className: DCRChangesSummary_module_css_1.default.changeNumber }),
@@ -61,7 +47,7 @@ var DCRChangesSummary = function (_a) {
     var changes = _a.changes, groupedObjects = _a.groupedObjects;
     var metadata = (0, MdmModuleContext_1.useMdmMetadata)();
     var dcrChanges = (0, react_1.useMemo)(function () { return (changes ? (0, helpers_1.calculateDCRChanges)(metadata, changes, groupedObjects) : null); }, [metadata, changes, groupedObjects]);
-    var changesLoaded = !!dcrChanges;
+    var changesLoaded = !!dcrChanges && groupedObjects.length > 0;
     return (react_1.default.createElement("div", { className: DCRChangesSummary_module_css_1.default.changesSummary, "data-reltio-id": "dcr-changes-summary" },
         !changesLoaded && react_1.default.createElement(LoadingSkeleton, null),
         changesLoaded &&

package/cjs/features/workflow/ReviewDCRDialog/components/DCRChangesSummary/DCRChangesSummary.module.css.js

@@ -3,7 +3,7 @@ if (typeof document !== 'undefined') {
     const head = document.head || document.getElementsByTagName('head')[0]
     const style = document.createElement('style');
     style.type = 'text/css'
-    style.innerHTML = `.DCRChangesSummary-changesSummary--31gR-{align-items:center;display:flex;gap:22px}.DCRChangesSummary-changeItem---XfYP{align-items:center;display:flex;flex-direction:column;gap:4px;position:relative}.DCRChangesSummary-changeItem---XfYP:not(:last-child):after{background-color:#d9d9d9;bottom:2px;content:"";height:20px;position:absolute;right:-12px;top:2px;width:1px}.DCRChangesSummary-changeNumber--vZxc4{font-size:16px;font-weight:500;line-height:1}.DCRChangesSummary-changeLabel--tDXS6{color:var(--mui-palette-text-primary);font-size:13px}.DCRChangesSummary-edited--KFivZ{color:#eb9d08}.DCRChangesSummary-added--KGdGw{color:#599e0e}.DCRChangesSummary-deleted--TWgS5{color:#eb5757}.DCRChangesSummary-ignored--Q2Q8R{color:var(--mui-palette-primary-light)}`;
+    style.innerHTML = `.DCRChangesSummary-changesSummary--31gR-{align-items:center;display:flex;gap:22px}.DCRChangesSummary-changeItem---XfYP{align-items:center;display:flex;flex-direction:column;gap:4px;position:relative}.DCRChangesSummary-changeItem---XfYP:not(:last-child):after{background-color:#d9d9d9;bottom:2px;content:"";height:20px;position:absolute;right:-12px;top:2px;width:1px}.DCRChangesSummary-changeNumber--vZxc4{font-size:16px;font-weight:500;line-height:1}.DCRChangesSummary-changeLabel--tDXS6{color:var(--mui-palette-text-primary);font-size:13px;text-transform:capitalize}.DCRChangesSummary-edited--KFivZ{color:#eb9d08}.DCRChangesSummary-added--KGdGw{color:#599e0e}.DCRChangesSummary-deleted--TWgS5{color:#eb5757}.DCRChangesSummary-ignored--Q2Q8R{color:var(--mui-palette-primary-light)}`;
     head.appendChild(style);
 }
 module.exports = styles;

package/cjs/features/workflow/ReviewDCRDialog/helpers/calculateDCRChanges.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.calculateDCRChanges = void 0;
-var merge_1 = require("../../AttributesChanges/helpers/merge");
+var merge_1 = require("../../helpers/merge");
 var calculateDCRChanges = function (metadata, changes, groupedObjects) {
     var mergedChanges = groupedObjects.reduce(function (mergedChanges, object) {
         var _a = (0, merge_1.mergeChanges)(metadata, changes, object.entity, object.relations), mergedEntityChanges = _a[0], mergedRelationsChanges = _a[1];

package/cjs/features/workflow/WorkflowComments/components/Comment/Comment.js

@@ -9,17 +9,16 @@ var ui_i18n_1 = __importDefault(require("ui-i18n"));
 var classnames_1 = __importDefault(require("classnames"));
 var Avatar_1 = __importDefault(require("@mui/material/Avatar"));
 var Person_1 = __importDefault(require("@mui/icons-material/Person"));
-var styles_1 = require("./styles");
+var Comment_module_css_1 = __importDefault(require("./Comment.module.css"));
 var Comment = function (_a) {
     var author = _a.author, message = _a.message, time = _a.time, _b = _a.classes, classes = _b === void 0 ? {} : _b;
-    var styles = (0, styles_1.useStyles)();
-    return (react_1.default.createElement("div", { className: styles.comment },
-        react_1.default.createElement(Avatar_1.default, { className: styles.avatar },
-            react_1.default.createElement(Person_1.default, { className: styles.icon })),
-        react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.info, classes.messageContainer) },
-            react_1.default.createElement("div", { className: styles.firstLine },
-                react_1.default.createElement("div", { className: styles.author }, author),
-                react_1.default.createElement("span", { className: styles.date }, ui_i18n_1.default.date(time, 'L LT'))),
-            react_1.default.createElement("div", { className: styles.text }, message))));
+    return (react_1.default.createElement("div", { className: Comment_module_css_1.default.comment },
+        react_1.default.createElement(Avatar_1.default, { className: Comment_module_css_1.default.avatar },
+            react_1.default.createElement(Person_1.default, { className: Comment_module_css_1.default.icon })),
+        react_1.default.createElement("div", { className: (0, classnames_1.default)(Comment_module_css_1.default.info, classes.messageContainer) },
+            react_1.default.createElement("div", { className: Comment_module_css_1.default.firstLine },
+                react_1.default.createElement("div", { className: Comment_module_css_1.default.author }, author),
+                react_1.default.createElement("span", { className: Comment_module_css_1.default.date }, ui_i18n_1.default.date(time, 'L LT'))),
+            react_1.default.createElement("div", { className: Comment_module_css_1.default.text }, message))));
 };
 exports.Comment = Comment;

package/cjs/features/workflow/WorkflowComments/components/Comment/Comment.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"comment":"Comment-comment--EbYOv","avatar":"Comment-avatar--zDzhi","icon":"Comment-icon--VXgD-","firstLine":"Comment-firstLine--16ocZ","info":"Comment-info--Z0Lgv","author":"Comment-author--xm-WD","date":"Comment-date--4aLvh","text":"Comment-text--a3pI0"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.Comment-comment--EbYOv{display:flex;flex:1;flex-direction:row;margin-left:6px}.Comment-avatar--zDzhi{height:24px;margin:3px 13px 0 0;width:24px}.Comment-icon--VXgD-{fill:#537280;background-color:#eaedee}.Comment-firstLine--16ocZ{display:flex;flex-direction:row;flex-wrap:wrap}.Comment-info--Z0Lgv{flex:1}.Comment-author--xm-WD{color:var(--mui-palette-text-primary);flex:1;font-size:13px;font-weight:500;line-height:15px;margin-right:10px}.Comment-date--4aLvh{color:var(--mui-palette-text-secondary);font-size:11px;line-height:15px;margin-right:17px}.Comment-text--a3pI0{color:rgba(0,0,0,.6);font-size:13px;word-wrap:break-word;padding-right:10px;white-space:pre-wrap;word-break:break-all}`;
+    head.appendChild(style);
+}
+module.exports = styles;

package/cjs/features/workflow/{AttributesChanges/helpers → helpers}/attributes.js

@@ -14,8 +14,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getRelationChanges = exports.getEntityChanges = void 0;
 var ramda_1 = require("ramda");
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
-var attributesView_1 = require("../../../../helpers/attributesView");
-var common_1 = require("../../helpers/common");
+var attributesView_1 = require("../../../helpers/attributesView");
+var common_1 = require("./common");
 var getValues = function (attributes, attrType) {
     if ('newValue' in attributes || 'oldValue' in attributes) {
         var newValue = attributes.newValue, oldValue = attributes.oldValue, type_1 = attributes.type;
@@ -34,13 +34,14 @@ var getValues = function (attributes, attrType) {
     var values = attributes[attrType.name];
     return values ? [values] : [];
 };
-var getAttributesList = function (metadata, attrTypes, attributes, level) {
+var getAttributesList = function (metadata, attrTypes, attributes, level, isReferenceSubAttribute) {
     if (level === void 0) { level = 0; }
+    if (isReferenceSubAttribute === void 0) { isReferenceSubAttribute = false; }
     return (0, ramda_1.flatten)(attrTypes
         .map(function (attrType) {
         return getValues(attributes, attrType).map(function (value) {
             return value.map(function (attributeValue) {
-                return dcrAttributesFactory(metadata, attrType, attributeValue, level);
+                return dcrAttributesFactory(metadata, attrType, attributeValue, level, isReferenceSubAttribute);
             });
         });
     })
@@ -50,7 +51,7 @@ var getSimpleAttributeValue = function (attributeType, attributeValue) {
     var value = (0, mdm_sdk_1.isSpecialAttribute)(attributeType) ? attributeValue : attributeValue.value;
     return (0, ramda_1.is)(Object, value) ? value : { newValue: attributeValue, type: mdm_sdk_1.DCRTypes.INSERT_ATTRIBUTE };
 };
-var dcrAttributesFactory = function (metadata, attributeType, attributeValue, level) {
+var dcrAttributesFactory = function (metadata, attributeType, attributeValue, level, isReferenceSubAttribute) {
     switch (attributeType.type) {
         case mdm_sdk_1.DataTypes.TYPE_NESTED:
         case mdm_sdk_1.DataTypes.TYPE_IMAGE:
@@ -59,7 +60,7 @@ var dcrAttributesFactory = function (metadata, attributeType, attributeValue, le
             return getReferenceAttributeChange(metadata, attributeType, attributeValue, level);
         default: {
             var value = getSimpleAttributeValue(attributeType, attributeValue);
-            return getSimpleAttributeChange(attributeType, value, level);
+            return getSimpleAttributeChange(attributeType, value, level, isReferenceSubAttribute);
         }
     }
 };
@@ -76,14 +77,15 @@ var getReferenceAttributeChange = function (metadata, attributeType, attributeVa
     var label = (attributeType === null || attributeType === void 0 ? void 0 : attributeType.label) || (attributeType === null || attributeType === void 0 ? void 0 : attributeType.name);
     return [
         { level: level, label: label, attributeType: attributeType, attributeValue: attributeValue },
-        getAttributesList(metadata, attributeTypeList, attributeValue.value, level + 1)
+        getAttributesList(metadata, attributeTypeList, attributeValue.value, level + 1, true)
     ];
 };
 var getDiffParameters = function (_a) {
     var newValue = _a.newValue, oldValue = _a.oldValue, type = _a.type;
     return type === mdm_sdk_1.DCRTypes.UPDATE_ATTRIBUTE ? { type: type, newValue: newValue, oldValue: oldValue } : { type: type, newValue: oldValue || newValue };
 };
-var getSimpleAttributeChange = function (attributeType, attributeValue, level) {
+var getSimpleAttributeChange = function (attributeType, attributeValue, level, isReferenceSubAttribute) {
+    if (isReferenceSubAttribute === void 0) { isReferenceSubAttribute = false; }
     var _a = getDiffParameters(attributeValue), newValue = _a.newValue, oldValue = _a.oldValue, type = _a.type;
     var operation = (0, common_1.getOperationType)(type, oldValue);
     var label = (attributeType === null || attributeType === void 0 ? void 0 : attributeType.label) || (attributeType === null || attributeType === void 0 ? void 0 : attributeType.name);
@@ -93,7 +95,8 @@ var getSimpleAttributeChange = function (attributeType, attributeValue, level) {
         oldValue: oldValue,
         operation: operation,
         label: label,
-        level: level
+        level: level,
+        isReferenceSubAttribute: isReferenceSubAttribute
     };
 };
 exports.getEntityChanges = (0, ramda_1.curry)(function (metadata, entityInfo, changes) {
@@ -111,7 +114,7 @@ exports.getRelationChanges = (0, ramda_1.curry)(function (metadata, relationInfo
     var relationType = (0, mdm_sdk_1.getRelationType)(metadata, relationInfo.type);
     var attrTypes = (0, mdm_sdk_1.getRelationAttributesList)(metadata, relationInfo.type);
     return (0, ramda_1.flatten)([
-        __assign({ level: 1, label: (0, ramda_1.propOr)('', 'label', relationType), attributeType: relationType, attributeValue: __assign(__assign({}, relationInfo), changes) }, addRelationOperationIfNeeded(changes, changeType)),
+        __assign({ level: 1, label: (0, ramda_1.propOr)('', 'label', relationType), attributeType: null, relationType: relationType, attributeValue: __assign(__assign({}, relationInfo), changes) }, addRelationOperationIfNeeded(changes, changeType)),
         getAttributesList(metadata, attrTypes, changes, 2)
     ]);
 });

package/cjs/features/workflow/{AttributesChanges/helpers → helpers}/attributes.test.js

@@ -77,14 +77,16 @@ describe('attributes helpers tests', function () {
                 label: 'Country Code',
                 level: 0,
                 newValue: changes.CountryCode[0].value.newValue,
-                operation: 'ignored'
+                operation: 'ignored',
+                isReferenceSubAttribute: false
             },
             {
                 attributeType: metadata_test_data_1.metadata.entityTypes[0].attributes[1],
                 label: 'Country Code',
                 level: 0,
                 newValue: changes.CountryCode[1].value.newValue,
-                operation: 'added'
+                operation: 'added',
+                isReferenceSubAttribute: false
             },
             {
                 attributeType: metadata_test_data_1.metadata.entityTypes[0].attributes[3],
@@ -97,7 +99,8 @@ describe('attributes helpers tests', function () {
                 label: 'Identity Type',
                 level: 1,
                 newValue: changes.Identifiers[0].value.Type[0].value.newValue,
-                operation: 'ignored'
+                operation: 'ignored',
+                isReferenceSubAttribute: false
             }
         ]);
     });
@@ -118,7 +121,8 @@ describe('attributes helpers tests', function () {
         it('should not show operation for relation title', function () {
             expect((0, attributes_1.getRelationChanges)(metadata_test_data_1.metadata, relationInfo, changes, mdm_sdk_1.DCRTypes.INSERT_ATTRIBUTE)).toEqual([
                 {
-                    attributeType: metadata_test_data_1.metadata.relationTypes[1],
+                    attributeType: null,
+                    relationType: metadata_test_data_1.metadata.relationTypes[1],
                     attributeValue: __assign(__assign({}, relationInfo), changes),
                     label: metadata_test_data_1.metadata.relationTypes[1].label,
                     level: 1
@@ -128,21 +132,24 @@ describe('attributes helpers tests', function () {
                     label: mdm_sdk_1.EntityAttrTypes.startDate.label,
                     level: 2,
                     newValue: { value: 1644001200000 },
-                    operation: mdm_sdk_1.DCROperationTypes.ADDED
+                    operation: mdm_sdk_1.DCROperationTypes.ADDED,
+                    isReferenceSubAttribute: false
                 },
                 {
                     attributeType: metadata_test_data_1.metadata.relationTypes[1].attributes[0],
                     label: metadata_test_data_1.metadata.relationTypes[1].attributes[0].label,
                     level: 2,
                     newValue: '123',
-                    operation: mdm_sdk_1.DCROperationTypes.ADDED
+                    operation: mdm_sdk_1.DCROperationTypes.ADDED,
+                    isReferenceSubAttribute: false
                 }
             ]);
         });
         it('should show operation for relation title if it is new', function () {
             expect((0, attributes_1.getRelationChanges)(metadata_test_data_1.metadata, relationInfo, changes, mdm_sdk_1.DCRTypes.CREATE_RELATIONSHIP)).toEqual([
                 {
-                    attributeType: metadata_test_data_1.metadata.relationTypes[1],
+                    attributeType: null,
+                    relationType: metadata_test_data_1.metadata.relationTypes[1],
                     attributeValue: __assign(__assign({}, relationInfo), changes),
                     label: metadata_test_data_1.metadata.relationTypes[1].label,
                     level: 1,
@@ -153,11 +160,13 @@ describe('attributes helpers tests', function () {
                     label: mdm_sdk_1.EntityAttrTypes.startDate.label,
                     level: 2,
                     newValue: { value: 1644001200000 },
-                    operation: mdm_sdk_1.DCROperationTypes.ADDED
+                    operation: mdm_sdk_1.DCROperationTypes.ADDED,
+                    isReferenceSubAttribute: false
                 },
                 {
                     attributeType: metadata_test_data_1.metadata.relationTypes[1].attributes[0],
                     label: metadata_test_data_1.metadata.relationTypes[1].attributes[0].label,
+                    isReferenceSubAttribute: false,
                     level: 2,
                     newValue: '123',
                     operation: mdm_sdk_1.DCROperationTypes.ADDED
@@ -167,7 +176,8 @@ describe('attributes helpers tests', function () {
         it('should show operation for relation title if it was deleted and changes are empty', function () {
             expect((0, attributes_1.getRelationChanges)(metadata_test_data_1.metadata, relationInfo, {}, mdm_sdk_1.DCRTypes.DELETE_RELATIONSHIP)).toEqual([
                 {
-                    attributeType: metadata_test_data_1.metadata.relationTypes[1],
+                    attributeType: null,
+                    relationType: metadata_test_data_1.metadata.relationTypes[1],
                     attributeValue: relationInfo,
                     label: metadata_test_data_1.metadata.relationTypes[1].label,
                     level: 1,

package/cjs/features/workflow/helpers/common.d.ts

@@ -1,4 +1,4 @@
-import { AttributeType, DCRAttributeValue, DCRObjectsInfo, DCROperationTypes, DCRValue, WorkflowTaskData, WorkflowDefinition } from '@reltio/mdm-sdk';
+import { AttributeType, DCRAttributeValue, DCRObjectsInfo, DCROperationTypes, DCRValue, Metadata, WorkflowDefinition, WorkflowTaskData } from '@reltio/mdm-sdk';
 export declare const getOperationType: (type: string, oldValue?: DCRAttributeValue) => DCROperationTypes;
 export declare const getOperationLabel: (operation: DCROperationTypes) => string;
 export declare const getAttributeDescription: (attrType: AttributeType, value: DCRAttributeValue, currentEntityUri: string, objectsInfo?: DCRObjectsInfo) => {
@@ -12,3 +12,4 @@ export declare const getDCRId: (objectUris?: string[]) => string;
 export declare const isOpenTask: (isOpen: WorkflowTaskData["isOpen"]) => boolean;
 export declare const isRequestedTask: (processTypes: string[], assignee: string) => (task: WorkflowTaskData) => boolean;
 export declare const findWorkflowDefinitionByType: (definitions: WorkflowDefinition[], type: string) => WorkflowDefinition | undefined;
+export declare const prepareRolesOrTagsValue: (metadata: Metadata, value: string[], type: string) => string;

package/cjs/features/workflow/helpers/common.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.findWorkflowDefinitionByType = exports.isRequestedTask = exports.isOpenTask = exports.getDCRId = exports.getDCRUri = exports.getSuggestionsCount = exports.getDataTypeDefinition = exports.getAttributeDescription = exports.getOperationLabel = exports.getOperationType = void 0;
+exports.prepareRolesOrTagsValue = exports.findWorkflowDefinitionByType = exports.isRequestedTask = exports.isOpenTask = exports.getDCRId = exports.getDCRUri = exports.getSuggestionsCount = exports.getDataTypeDefinition = exports.getAttributeDescription = exports.getOperationLabel = exports.getOperationType = void 0;
 var ramda_1 = require("ramda");
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
@@ -82,3 +82,8 @@ var isRequestedTask = function (processTypes, assignee) { return function (task)
 exports.isRequestedTask = isRequestedTask;
 var findWorkflowDefinitionByType = function (definitions, type) { return definitions.find((0, ramda_1.propEq)('type', type)); };
 exports.findWorkflowDefinitionByType = findWorkflowDefinitionByType;
+var prepareRolesOrTagsValue = function (metadata, value, type) {
+    var getLabel = type === mdm_sdk_1.EntityAttrTypes.roles.uri ? (0, mdm_sdk_1.getRoleLabel)(metadata) : ramda_1.identity;
+    return value.map(getLabel).join(', ');
+};
+exports.prepareRolesOrTagsValue = prepareRolesOrTagsValue;

package/cjs/features/workflow/{AttributesChanges/helpers → helpers}/merge.js

@@ -56,21 +56,20 @@ var prepareStartOrEndDate = function (_a) {
     }
 };
 var prepareRolesOrTags = function (metadata, change) {
-    var _a = change.newValue, newValue = _a === void 0 ? [] : _a, _b = change.oldValue, oldValue = _b === void 0 ? [] : _b, type = change.type;
-    var getLabel = type === mdm_sdk_1.DCRTypes.UPDATE_ROLES ? (0, mdm_sdk_1.getRoleLabel)(metadata) : ramda_1.identity;
+    var _a = change.newValue, newValue = _a === void 0 ? [] : _a, _b = change.oldValue, oldValue = _b === void 0 ? [] : _b;
     var diffNewValue = (0, ramda_1.difference)(newValue, oldValue);
     var diffOldValue = (0, ramda_1.difference)(oldValue, newValue);
     var items = [];
     if (diffNewValue.length) {
         items.push({
             type: mdm_sdk_1.DCRTypes.INSERT_ATTRIBUTE,
-            newValue: { value: diffNewValue.map(getLabel).join(', ') }
+            newValue: { value: diffNewValue }
         });
     }
     if (diffOldValue.length) {
         items.push({
             type: mdm_sdk_1.DCRTypes.DELETE_ATTRIBUTE,
-            oldValue: { value: diffOldValue.map(getLabel).join(', ') }
+            oldValue: { value: diffOldValue }
         });
     }
     return items;

package/cjs/features/workflow/{AttributesChanges/helpers → helpers}/merge.test.js

@@ -61,7 +61,8 @@ describe('mergeChanges tests', function () {
                     label: 'Identity Type',
                     level: 1,
                     newValue: changes[entityUri][0].newValue,
-                    operation: 'ignored'
+                    operation: 'ignored',
+                    isReferenceSubAttribute: false
                 }
             ],
             []
@@ -179,7 +180,7 @@ describe('mergeChanges tests', function () {
                 attributeType: mdm_sdk_1.EntityAttrTypes.tags,
                 label: mdm_sdk_1.EntityAttrTypes.tags.label,
                 level: 0,
-                newValue: { value: 'tag2' },
+                newValue: { value: ['tag2'] },
                 operation: mdm_sdk_1.DCROperationTypes.DELETED
             },
             {
@@ -227,7 +228,8 @@ describe('mergeChanges tests', function () {
         ];
         var mergedRelations = [
             {
-                attributeType: metadata_test_data_1.metadata.relationTypes[1],
+                attributeType: null,
+                relationType: metadata_test_data_1.metadata.relationTypes[1],
                 attributeValue: __assign(__assign({}, relationsInfo[0]), (_a = {}, _a[mdm_sdk_1.EntityAttrTypes.startDate.name] = [
                     {
                         newValue: { value: 1643742000000 },

package/cjs/features/workflow/hooks/useChangesList.d.ts

@@ -0,0 +1,9 @@
+import { DCRChanges, GroupedObjectsInfo } from '@reltio/mdm-sdk';
+import { Diff, Title } from '../types';
+type Props = {
+    changes: DCRChanges;
+    entityInfo: GroupedObjectsInfo['entity'];
+    relationsInfo: GroupedObjectsInfo['relations'];
+};
+export declare const useChangesList: ({ changes, entityInfo, relationsInfo }: Props) => (Diff | Title)[];
+export {};

package/cjs/features/workflow/hooks/useChangesList.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useChangesList = void 0;
+var react_1 = require("react");
+var ramda_1 = require("ramda");
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var merge_1 = require("../helpers/merge");
+var MdmModuleContext_1 = require("../../../contexts/MdmModuleContext");
+var useChangesList = function (_a) {
+    var changes = _a.changes, entityInfo = _a.entityInfo, relationsInfo = _a.relationsInfo;
+    var metadata = (0, MdmModuleContext_1.useMdmMetadata)();
+    var _b = (0, react_1.useMemo)(function () { return (0, merge_1.mergeChanges)(metadata, changes, entityInfo, relationsInfo); }, [metadata, changes, entityInfo, relationsInfo]), mergedEntityChanges = _b[0], mergedRelationsChanges = _b[1];
+    var changesList = (0, react_1.useMemo)(function () {
+        var relationshipTitle = { label: ui_i18n_1.default.text('Relationships') };
+        return mergedRelationsChanges.length > 0
+            ? (0, ramda_1.flatten)([mergedEntityChanges, relationshipTitle, mergedRelationsChanges])
+            : mergedEntityChanges;
+    }, [mergedEntityChanges, mergedRelationsChanges]);
+    return changesList;
+};
+exports.useChangesList = useChangesList;

package/cjs/features/workflow/types.d.ts

@@ -1,4 +1,20 @@
+import { AttributeType, ChangeValue, DCRAttributeValue, DCROperationTypes, DCRRelationInfo, TRelationType } from '@reltio/mdm-sdk';
 export type TaskAction = {
     text: string;
     onClick: (comment: string) => void;
 };
+export type RelationAttributeValue = DCRAttributeValue & DCRRelationInfo;
+export type Diff = {
+    level: number;
+    label: string;
+    attributeType: AttributeType | null;
+    relationType?: TRelationType;
+    attributeValue?: DCRAttributeValue | RelationAttributeValue;
+    newValue?: ChangeValue;
+    oldValue?: ChangeValue;
+    operation?: DCROperationTypes;
+    isReferenceSubAttribute?: boolean;
+};
+export type Title = {
+    label: string;
+};

package/cjs/hooks/useCssVariableStyles/useCssVariableStyles.js

@@ -23,6 +23,6 @@ var useCssVariableStyles = function (variables, additionalStyles) {
             return [key, verifiedValue];
         }));
     }, [variables]);
-    return __assign(__assign({}, style), additionalStyles);
+    return (0, react_1.useMemo)(function () { return (__assign(__assign({}, style), additionalStyles)); }, [style, additionalStyles]);
 };
 exports.useCssVariableStyles = useCssVariableStyles;

package/cjs/icons/SuggestedChanges.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const SvgSuggestedChanges: React.FC<React.SVGProps<SVGSVGElement>>;
+export default SvgSuggestedChanges;

package/cjs/icons/SuggestedChanges.js

@@ -0,0 +1,27 @@
+"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);
+};
+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 SvgSuggestedChanges = function (props) {
+    return (react_1.default.createElement("svg", __assign({ width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-reltio-id": "SvgSuggestedChanges" }, props),
+        react_1.default.createElement("g", { clipPath: "url(#clip0_536_106424)" },
+            react_1.default.createElement("path", { d: "M15.972 32C24.7931 32 31.9441 24.8366 31.9441 16C31.9441 7.16344 24.7931 0 15.972 0C7.15092 0 0 7.16344 0 16C0 24.8366 7.15092 32 15.972 32Z", fill: "#205191" }),
+            react_1.default.createElement("path", { opacity: "0.87", fillRule: "evenodd", clipRule: "evenodd", d: "M11.0288 23.5683C9.97918 23.5683 9.12695 22.718 9.12695 21.6689V10.2746C9.12695 9.22772 9.97918 8.37744 11.0288 8.37744H13.8193C13.9763 7.9316 14.2679 7.54575 14.6536 7.27339C15.0394 7.00103 15.5002 6.85566 15.9721 6.85744L16.1569 6.8643C16.5959 6.89826 17.0156 7.05924 17.365 7.32766C17.7143 7.59608 17.9784 7.96038 18.1249 8.3763H20.9155C21.965 8.3763 22.8173 9.22772 22.8173 10.2757V21.67C22.8173 22.718 21.965 23.5683 20.9155 23.5683H11.0288ZM21.2965 22.0483V9.89744H19.7746V12.1752H12.1696V9.89744H10.6477V22.0506H21.2965V22.0483ZM18.0941 16.526V18.014H12.1548V16.526H18.0941ZM19.7986 14.2403V15.7283H12.1548V14.2403H19.7986ZM15.9721 8.37744C16.3908 8.37744 16.7331 8.71801 16.7331 9.1363C16.7224 9.33125 16.6376 9.5147 16.496 9.64893C16.3545 9.78316 16.167 9.85797 15.9721 9.85797C15.7772 9.85797 15.5897 9.78316 15.4482 9.64893C15.3066 9.5147 15.2218 9.33125 15.2112 9.1363C15.2112 8.71801 15.5534 8.37744 15.9721 8.37744Z", fill: "white" })),
+        react_1.default.createElement("defs", null,
+            react_1.default.createElement("clipPath", { id: "clip0_536_106424" },
+                react_1.default.createElement("rect", { width: "31.9441", height: "32", fill: "white" })))));
+};
+exports.default = SvgSuggestedChanges;

package/features/workflow/AttributesChanges/AttributesChanges.js

@@ -1,34 +1,18 @@
-import React, { useMemo } from 'react';
-import i18n from 'ui-i18n';
-import { always, any, flatten, ifElse, propOr } from 'ramda';
-import { getEntityUriForLink, getLabel } from '@reltio/mdm-sdk';
-import { mergeChanges } from './helpers/merge';
+import React from 'react';
 import { ShowMoreLink } from './components/ShowMoreLink';
 import { DCRChangesList } from './components/DCRChangesList';
 import { AttributesChangesContext } from './AttributesChangesContext';
 import { useCollapsibleList } from './useCollapsibleList';
-import { EntityUriLink } from '../../../EntityUriLink';
-import { getEntityUriForChangeRequest, isCreateEntityOperation } from '../helpers/dcr';
-import { useMdmMetadata } from '../../../contexts/MdmModuleContext';
-import { useStyles } from './styles';
+import { DCREntityUriLink } from '../DCREntityUriLink/DCREntityUriLink';
+import { useChangesList } from '../hooks/useChangesList';
+import styles from './AttributesChanges.module.css';
 export var AttributesChanges = function (_a) {
     var changes = _a.changes, dcrUri = _a.dcrUri, objectsInfo = _a.objectsInfo, entityInfo = _a.entityInfo, relationsInfo = _a.relationsInfo, max = _a.max;
-    var styles = useStyles();
-    var metadata = useMdmMetadata();
-    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;
-    var entityUri = ifElse(any(isCreateEntityOperation), always(getEntityUriForChangeRequest(dcrUri, entityInfo.uri)), always(getEntityUriForLink(entityInfo)))(propOr([], entityInfo.uri, changes));
-    var screen = ifElse(any(isCreateEntityOperation), always('dcrReview'), always('profile'))(propOr([], entityInfo.uri, changes));
+    var changesList = useChangesList({ changes: changes, entityInfo: entityInfo, relationsInfo: relationsInfo });
+    var _b = useCollapsibleList(changesList, max), isExpanded = _b.isExpanded, onToggle = _b.onToggle, itemsToShow = _b.itemsToShow, collapsedSuggestionsCount = _b.collapsedSuggestionsCount;
     return (React.createElement(AttributesChangesContext.Provider, { value: objectsInfo },
         React.createElement("div", { className: styles.container, "data-reltio-id": "changes-container" },
-            React.createElement(EntityUriLink, { className: styles.uri, value: entityUri, screen: screen },
-                React.createElement("div", { className: styles.label }, getLabel(entityInfo.label))),
+            React.createElement(DCREntityUriLink, { entityInfo: entityInfo, changes: changes, dcrUri: dcrUri }),
             React.createElement(DCRChangesList, { changes: itemsToShow }),
             collapsedSuggestionsCount > 0 && (React.createElement(ShowMoreLink, { onClick: onToggle, suggestionsCount: collapsedSuggestionsCount, isExpanded: isExpanded, className: styles.showMoreLink })))));
 };

package/features/workflow/AttributesChanges/AttributesChanges.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"container":"AttributesChanges-container--bxfyh","showMoreLink":"AttributesChanges-showMoreLink--vgdjF"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.AttributesChanges-container--bxfyh{background-color:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.03);border-radius:3px;box-sizing:border-box;margin:12px 16px 12px 0;padding:10px}.AttributesChanges-showMoreLink--vgdjF{margin-top:8px}`;
+    head.appendChild(style);
+}
+export default styles;

package/features/workflow/AttributesChanges/components/ChangeView/ChangeView.js

@@ -2,12 +2,10 @@ import React from 'react';
 import classnames from 'classnames';
 import { isNil } from 'ramda';
 import ArrowRightAltIcon from '@mui/icons-material/ArrowRightAlt';
-import Chip from '@mui/material/Chip';
-import { getOperationLabel } from '../../../helpers/common';
-import { useStyles } from './styles';
+import { OperationChip } from '../../../OperationChip';
+import styles from './ChangeView.module.css';
 export var ChangeView = function (_a) {
     var label = _a.label, oldValue = _a.oldValue, newValue = _a.newValue, operation = _a.operation, className = _a.className;
-    var styles = useStyles();
     var value = oldValue || newValue;
     return (React.createElement("div", { className: classnames(styles.field, className) },
         React.createElement("span", { className: styles.fieldName },
@@ -18,5 +16,5 @@ export var ChangeView = function (_a) {
             newValue && oldValue && (React.createElement(React.Fragment, null,
                 React.createElement(ArrowRightAltIcon, { "data-reltio-id": "arrow-right", className: styles.arrow }),
                 newValue)))),
-        operation && (React.createElement(Chip, { variant: "outlined", label: getOperationLabel(operation), className: classnames(styles.chip, operation) }))));
+        operation && React.createElement(OperationChip, { operation: operation })));
 };

package/features/workflow/AttributesChanges/components/ChangeView/ChangeView.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"field":"ChangeView-field--HIW58","fieldName":"ChangeView-fieldName--jsab0","difference":"ChangeView-difference--dJqx0","arrow":"ChangeView-arrow--0Lel-"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.ChangeView-field--HIW58{color:var(--mui-palette-text-primary);font-size:12px;line-height:20px;margin-top:6px;overflow:hidden;word-break:break-word}.ChangeView-fieldName--jsab0{color:var(--mui-palette-text-secondary);margin-right:8px}.ChangeView-difference--dJqx0{margin-right:8px}.ChangeView-arrow--0Lel-{color:var(--mui-palette-text-primary);font-size:12px;margin:0 4px}`;
+    head.appendChild(style);
+}
+export default styles;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Diff, Title } from '../../types';
+import { Diff, Title } from '../../../types';
 type Props = {
     changes: (Diff | Title)[];
 };

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

@@ -1,3 +1,3 @@
 import React from 'react';
-import { Diff } from '../../types';
-export declare const DiffRenderer: ({ label, level, attributeType, attributeValue, oldValue, newValue, operation }: Diff) => React.JSX.Element;
+import { Diff } from '../../../types';
+export declare const DiffRenderer: ({ label, level, attributeType, relationType, attributeValue, oldValue, newValue, operation }: Diff) => React.JSX.Element;