@reltio/components 1.4.2199 → 1.4.2200

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

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

@@ -1,52 +1,31 @@
-import React, { useCallback, useContext, useMemo } from 'react';
-import { isNil } from 'ramda';
-import classnames from 'classnames';
-import { getAttributeValue, getLabel, isReference } from '@reltio/mdm-sdk';
+import React, { useCallback, useMemo } from 'react';
+import { EntityAttrTypes, getAttributeValue } from '@reltio/mdm-sdk';
 import { ChangeView } from '../ChangeView';
-import { AttributesChangesContext } from '../../AttributesChangesContext';
-import { getAttributeDescription, getDataTypeDefinition } from '../../../helpers/common';
+import { getDataTypeDefinition, prepareRolesOrTagsValue } from '../../../helpers/common';
+import { useCssVariableStyles } from '../../../../../hooks/useCssVariableStyles';
+import { useMdmMetadata } from '../../../../../contexts/MdmModuleContext';
 import { DataTypeValue } from '../../../../../DataTypeValue';
-import { EntityUriLink } from '../../../../../EntityUriLink';
-import { useMdmEntityUri } from '../../../../../contexts/MdmModuleContext';
-import { useStyles } from './styles';
+import { RelationEntityLink } from '../../../RelationEntityLink';
+import styles from './DiffRenderer.module.css';
 export 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 objectsInfo = useContext(AttributesChangesContext);
-    var entityUri = useMdmEntityUri();
-    var getLinkDescription = useCallback(function () {
-        var _a, _b, _c;
-        if (isReference(attributeType)) {
-            var value = (_b = (_a = attributeValue.value) === null || _a === void 0 ? void 0 : _a.newValue) !== null && _b !== void 0 ? _b : (_c = attributeValue.value) === null || _c === void 0 ? void 0 : _c.oldValue;
-            return getAttributeDescription(attributeType, value || attributeValue, entityUri, objectsInfo);
-        }
-        else if ('endObject' in attributeType) {
-            var _d = attributeValue, endObjectUri = _d.endObjectUri, endObjectLabel = _d.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;
-    }, [getLinkDescription, objectsInfo, styles]);
+    var label = _a.label, level = _a.level, attributeType = _a.attributeType, relationType = _a.relationType, attributeValue = _a.attributeValue, oldValue = _a.oldValue, newValue = _a.newValue, operation = _a.operation;
+    var variableStyles = useCssVariableStyles({
+        '--level': level
+    });
+    var metadata = useMdmMetadata();
     var changeLabel = useMemo(function () {
         return (React.createElement("span", null,
             label,
-            renderLink()));
-    }, [label, renderLink]);
+            React.createElement(RelationEntityLink, { attributeOrRelationType: attributeType || relationType, attributeValue: attributeValue })));
+    }, [label, attributeType, relationType, attributeValue]);
     var renderValue = useCallback(function (value) {
         var attrValue = getAttributeValue(value);
-        return (React.createElement(DataTypeValue, { value: attrValue, dataTypeDefinition: getDataTypeDefinition(attributeType, attrValue) }));
-    }, [attributeType]);
-    return (React.createElement(ChangeView, { className: styles.change, label: changeLabel, oldValue: oldValue && renderValue(oldValue), newValue: newValue && renderValue(newValue), operation: operation }));
+        var isRolesOrTags = attributeType.uri === EntityAttrTypes.roles.uri || attributeType.uri === EntityAttrTypes.tags.uri;
+        var preparedValue = isRolesOrTags
+            ? prepareRolesOrTagsValue(metadata, attrValue, attributeType.uri)
+            : attrValue;
+        return (React.createElement(DataTypeValue, { value: preparedValue, dataTypeDefinition: getDataTypeDefinition(attributeType, attrValue) }));
+    }, [attributeType, metadata]);
+    return (React.createElement("div", { className: styles.change, style: variableStyles },
+        React.createElement(ChangeView, { label: changeLabel, oldValue: oldValue && renderValue(oldValue), newValue: newValue && renderValue(newValue), operation: operation })));
 };

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

@@ -0,0 +1,9 @@
+const styles = {"change":"DiffRenderer-change--ep0bt"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.DiffRenderer-change--ep0bt{margin-left:calc(var(--level, 0)*16px)}`;
+    head.appendChild(style);
+}
+export default styles;

package/features/workflow/AttributesChanges/useCollapsibleList.d.ts

@@ -1,4 +1,4 @@
-import { Diff, Title } from './types';
+import { Diff, Title } from '../types';
 export declare const useCollapsibleList: (items: (Diff | Title)[], limit?: number) => {
     isExpanded: boolean;
     onToggle: () => void;

package/features/workflow/ChangeRequestEditor/ChangeRequestEditor.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
-import { ChangeRequest, WorkflowTaskData } from '@reltio/mdm-sdk';
+import { ChangeRequest, WorkflowTaskData, GroupedObjectsInfo } from '@reltio/mdm-sdk';
 type Props = {
     dcr: ChangeRequest;
     task: WorkflowTaskData;
+    groupedObjects: GroupedObjectsInfo[];
 };
-export declare const ChangeRequestEditor: ({ dcr, task: _task }: Props) => React.JSX.Element;
+export declare const ChangeRequestEditor: ({ dcr, task, groupedObjects }: Props) => React.JSX.Element;
 export {};

package/features/workflow/ChangeRequestEditor/ChangeRequestEditor.js

@@ -1,11 +1,16 @@
 import React from 'react';
 import i18n from 'ui-i18n';
+import Typography from '@mui/material/Typography';
+import SvgSuggestedChanges from '../../../icons/SuggestedChanges';
+import { EntityChangesGroup, SkeletonEntityChangesGroupLoader } from './components/EntityChangesGroup';
 import styles from './ChangeRequestEditor.module.css';
 export var ChangeRequestEditor = function (_a) {
-    var dcr = _a.dcr, _task = _a.task;
-    var dcrLoaded = !!dcr;
-    if (!dcrLoaded) {
-        return null;
-    }
-    return React.createElement("div", { className: styles.container }, i18n.text('DCR changes'));
+    var dcr = _a.dcr, task = _a.task, groupedObjects = _a.groupedObjects;
+    var dcrLoaded = !!dcr && groupedObjects.length > 0;
+    return (React.createElement("div", { className: styles.container },
+        React.createElement("div", { className: styles.header },
+            React.createElement("div", { className: styles.suggestedChangesIcon },
+                React.createElement(SvgSuggestedChanges, null)),
+            React.createElement(Typography, { variant: "h6", className: styles.suggestedChangesTitle }, i18n.text('Suggested changes'))),
+        dcrLoaded ? (groupedObjects.map(function (object, index) { return (React.createElement(EntityChangesGroup, { key: "entity-".concat(index), entityInfo: object.entity, relationsInfo: object.relations, task: task, dcr: dcr })); })) : (React.createElement(SkeletonEntityChangesGroupLoader, null))));
 };

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

@@ -1,9 +1,9 @@
-const styles = {"container":"ChangeRequestEditor-container--pOvfN"};
+const styles = {"container":"ChangeRequestEditor-container--pOvfN","suggestedChangesTitle":"ChangeRequestEditor-suggestedChangesTitle--Vln-y","header":"ChangeRequestEditor-header--ZS-Cs","showBorderOnScroll":"ChangeRequestEditor-showBorderOnScroll--CiFhA","suggestedChangesIcon":"ChangeRequestEditor-suggestedChangesIcon--pIDL-"};
 if (typeof document !== 'undefined') {
     const head = document.head || document.getElementsByTagName('head')[0]
     const style = document.createElement('style');
     style.type = 'text/css'
-    style.innerHTML = `.ChangeRequestEditor-container--pOvfN{border:1px solid rgba(0,0,0,.03);border-radius:8px;padding:16px}`;
+    style.innerHTML = `.ChangeRequestEditor-container--pOvfN{background-color:#fff;border:1px solid rgba(0,0,0,.12);border-radius:8px;bottom:0;display:flex;flex-direction:column;gap:16px;left:0;overflow:auto;padding-bottom:16px;position:absolute;right:0;top:0;scroll-timeline-name:--changes-scroll;scroll-timeline-axis:block}.ChangeRequestEditor-suggestedChangesTitle--Vln-y{color:var(--mui-palette-text-primary);font-size:16px;font-weight:500}.ChangeRequestEditor-header--ZS-Cs{align-items:center;animation:ChangeRequestEditor-showBorderOnScroll--CiFhA 1s linear both;background:#fff;border-bottom:1px solid transparent;box-shadow:none;display:flex;gap:16px;margin-bottom:-16px;padding:16px;position:sticky;top:0;z-index:1;animation-timeline:--changes-scroll;animation-range:0 16px}.ChangeRequestEditor-suggestedChangesIcon--pIDL-{height:32px;width:32px}@keyframes ChangeRequestEditor-showBorderOnScroll--CiFhA{0%{border-bottom-color:transparent;box-shadow:none}to{border-bottom-color:rgba(0,0,0,.12);box-shadow:0 2px 6px rgba(0,0,0,.06)}}`;
     head.appendChild(style);
 }
 export default styles;

package/features/workflow/ChangeRequestEditor/components/ChangeItemEditor/ChangeItemEditor.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { DCRValue } from '@reltio/mdm-sdk';
+import { Diff } from '../../../types';
+type Props = {
+    change: Diff;
+    onValueChange: (id: string, newValue: DCRValue) => void;
+    editable?: boolean;
+};
+export declare const ChangeItemEditor: ({ change, onValueChange, editable }: Props) => React.JSX.Element;
+export {};