@reltio/components 1.4.2198 → 1.4.2200

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

@@ -0,0 +1,9 @@
+const styles = {"chip":"OperationChip-chip--1GvDu","edited":"OperationChip-edited--szKT3","added":"OperationChip-added--LBI82","deleted":"OperationChip-deleted--3-a9r","ignored":"OperationChip-ignored--xwl3i"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.OperationChip-chip--1GvDu{border-color:var(--mui-palette-primary-main);color:var(--mui-palette-primary-main);flex-shrink:0;font-size:10px;font-weight:500;height:20px;letter-spacing:0;line-height:16px;text-transform:capitalize}.OperationChip-chip--1GvDu.OperationChip-edited--szKT3{border-color:#cc7500;color:#cc7500}.OperationChip-chip--1GvDu.OperationChip-added--LBI82{border-color:#599e0e;color:#599e0e}.OperationChip-chip--1GvDu.OperationChip-deleted--3-a9r{border-color:#cf0e26;color:#cf0e26}.OperationChip-chip--1GvDu.OperationChip-ignored--xwl3i{border-color:#3075c9;color:#3075c9}`;
+    head.appendChild(style);
+}
+export default styles;

package/features/workflow/OperationChip/index.d.ts

@@ -0,0 +1 @@
+export { OperationChip } from './OperationChip';

package/features/workflow/OperationChip/index.js

@@ -0,0 +1 @@
+export { OperationChip } from './OperationChip';

package/features/workflow/RelationEntityLink/RelationEntityLink.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { AttributeType, DCRAttributeValue, TRelationType } from '@reltio/mdm-sdk';
+type Props = {
+    attributeOrRelationType: AttributeType | TRelationType;
+    attributeValue: DCRAttributeValue;
+    className?: string;
+};
+export declare const RelationEntityLink: ({ attributeOrRelationType, attributeValue, className }: Props) => React.JSX.Element;
+export {};

package/features/workflow/RelationEntityLink/RelationEntityLink.js

@@ -0,0 +1,37 @@
+import React, { useCallback, useContext } from 'react';
+import { isNil } from 'ramda';
+import classnames from 'classnames';
+import { getLabel, isReference } from '@reltio/mdm-sdk';
+import { getAttributeDescription } from '../helpers/common';
+import { EntityUriLink } from '../../../EntityUriLink';
+import { useMdmEntityUri } from '../../../contexts/MdmModuleContext';
+import { AttributesChangesContext } from '../AttributesChanges/AttributesChangesContext';
+import styles from './RelationEntityLink.module.css';
+export var RelationEntityLink = function (_a) {
+    var _b, _c;
+    var _d;
+    var attributeOrRelationType = _a.attributeOrRelationType, attributeValue = _a.attributeValue, className = _a.className;
+    var objectsInfo = useContext(AttributesChangesContext);
+    var entityUri = useMdmEntityUri();
+    var getLinkDescription = useCallback(function () {
+        var _a, _b, _c;
+        if (isReference(attributeOrRelationType)) {
+            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(attributeOrRelationType, value || attributeValue, entityUri, objectsInfo);
+        }
+        else if ('endObject' in attributeOrRelationType) {
+            var _d = attributeValue, endObjectUri = _d.endObjectUri, endObjectLabel = _d.endObjectLabel;
+            return {
+                objectUri: endObjectUri,
+                objectLabel: endObjectLabel
+            };
+        }
+    }, [attributeOrRelationType, attributeValue, entityUri, objectsInfo]);
+    var _e = getLinkDescription() || {}, objectUri = _e.objectUri, objectLabel = _e.objectLabel;
+    if (isNil(objectUri) || isNil(objectLabel)) {
+        return null;
+    }
+    var isNotExist = ((_d = objectsInfo[objectUri]) === null || _d === void 0 ? void 0 : _d.isExist) === false;
+    return (React.createElement(EntityUriLink, { value: objectUri, className: classnames(styles.linkContainer, (_b = {}, _b[styles.disabledLink] = isNotExist, _b), className) },
+        React.createElement("span", { className: classnames(styles.linkLabel, (_c = {}, _c[styles.label] = isNotExist, _c)) }, getLabel(objectLabel))));
+};

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

@@ -0,0 +1,9 @@
+const styles = {"linkContainer":"RelationEntityLink-linkContainer--lrgwy","linkLabel":"RelationEntityLink-linkLabel--1-dRa","disabledLink":"RelationEntityLink-disabledLink--r8PS0","label":"RelationEntityLink-label--0---g"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.RelationEntityLink-linkContainer--lrgwy{cursor:pointer;font-size:12px;margin-left:4px;text-decoration:none}.RelationEntityLink-linkLabel--1-dRa{color:var(--mui-palette-primary-main);letter-spacing:0;line-height:16px;white-space:break-spaces}.RelationEntityLink-disabledLink--r8PS0{cursor:default;pointer-events:none}.RelationEntityLink-label--0---g{color:var(--mui-palette-text-primary)}`;
+    head.appendChild(style);
+}
+export default styles;

package/features/workflow/RelationEntityLink/index.d.ts

@@ -0,0 +1 @@
+export { RelationEntityLink } from './RelationEntityLink';

package/features/workflow/RelationEntityLink/index.js

@@ -0,0 +1 @@
+export { RelationEntityLink } from './RelationEntityLink';

package/features/workflow/ReviewDCRDialog/ReviewDCRDialog.js

@@ -48,7 +48,7 @@ export var ReviewDCRDialog = function (_a) {
                         React.createElement("div", { className: styles.editableItem },
                             React.createElement(AssigneeSelector, { taskId: task.taskId, assignee: task.assignee, isTaskOpen: task.isOpen })))),
                 React.createElement("div", { className: styles.changesSection },
-                    React.createElement(ChangeRequestEditor, { dcr: dcr, task: task }))),
+                    React.createElement(ChangeRequestEditor, { dcr: dcr, task: task, groupedObjects: groupedObjects }))),
             canViewComments && (React.createElement(WorkflowComments, { workflowActions: workflowActions, actionRequestIsInProgress: actionRequestIsInProgress, preferredAction: task.preferredAction, taskId: task.taskId, processInstanceComments: task.processInstanceComments, isTaskOpen: task.isOpen, showActionButtons: false, alwaysExpanded: true, classes: {
                     container: styles.commentsRootContainer,
                     commentsContainer: styles.commentsContainer

package/features/workflow/ReviewDCRDialog/ReviewDCRDialog.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 = `.ReviewDCRDialog-dialogTitle--xCXtj{align-items:center;border-bottom:1px solid #e0e0e0;display:flex;justify-content:space-between;padding:12px 16px 8px}.ReviewDCRDialog-titleContent--Hh2KH{align-items:center;display:flex;flex:1;justify-content:space-between;position:relative}.ReviewDCRDialog-titleText--ME8s4{flex:1;margin:0;padding-left:48px}.ReviewDCRDialog-closeButton--YMAEf{color:#666;left:15px;position:absolute}.ReviewDCRDialog-closeButton--YMAEf:hover{background-color:rgba(0,0,0,.04);color:#333}.ReviewDCRDialog-content--qvUva{display:flex;min-height:400px;padding:0!important;width:100%}.ReviewDCRDialog-leftSection--5MELW{border-right:1px solid #e0e0e0;padding:0 16px;width:100%}.ReviewDCRDialog-profileBand--7r6Xy{margin-left:-16px}.ReviewDCRDialog-profileBandRoot--G7p1m{box-shadow:none;margin-bottom:0}.ReviewDCRDialog-editableSection--v-D7a{border:1px solid #d9d9d9;border-radius:0 0 8px 8px;margin-bottom:32px;padding:8px 16px 14px}.ReviewDCRDialog-editableGrid--auc-d{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-bottom:12px}.ReviewDCRDialog-editableItem--isGwv{display:flex;flex-direction:column}.ReviewDCRDialog-priorityField--LQ1n3{min-width:200px}.ReviewDCRDialog-changesSection--qj2OK{margin-bottom:24px}.ReviewDCRDialog-commentsRootContainer--g2f7m{margin:10px 0 16px 10px;min-width:323px;width:323px}.ReviewDCRDialog-commentsContainer--OApOx{flex-grow:1;max-height:100%}`;
+    style.innerHTML = `.ReviewDCRDialog-dialogTitle--xCXtj{align-items:center;border-bottom:1px solid #e0e0e0;display:flex;justify-content:space-between;padding:12px 16px 8px}.ReviewDCRDialog-titleContent--Hh2KH{align-items:center;display:flex;flex:1;justify-content:space-between;position:relative}.ReviewDCRDialog-titleText--ME8s4{flex:1;margin:0;padding-left:48px}.ReviewDCRDialog-closeButton--YMAEf{color:#666;left:15px;position:absolute}.ReviewDCRDialog-closeButton--YMAEf:hover{background-color:var(--mui-palette-action-hover);color:var(--mui-palette-text-primary)}.ReviewDCRDialog-content--qvUva{display:flex;min-height:400px;padding:0!important;width:100%}.ReviewDCRDialog-leftSection--5MELW{border-right:1px solid #e0e0e0;display:flex;flex-direction:column;padding:0 16px;width:100%}.ReviewDCRDialog-profileBand--7r6Xy{margin-left:-16px}.ReviewDCRDialog-profileBandRoot--G7p1m{box-shadow:none;margin-bottom:0}.ReviewDCRDialog-editableSection--v-D7a{border:1px solid #d9d9d9;border-radius:0 0 8px 8px;margin-bottom:16px;padding:8px 16px 14px}.ReviewDCRDialog-editableGrid--auc-d{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-bottom:12px}.ReviewDCRDialog-editableItem--isGwv{display:flex;flex-direction:column}.ReviewDCRDialog-priorityField--LQ1n3{min-width:200px}.ReviewDCRDialog-changesSection--qj2OK{flex-grow:1;margin-bottom:16px;position:relative}.ReviewDCRDialog-commentsRootContainer--g2f7m{margin:10px 0 16px 10px;min-width:323px;width:323px}.ReviewDCRDialog-commentsContainer--OApOx{flex-grow:1;max-height:100%}`;
     head.appendChild(style);
 }
 export default styles;

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

@@ -1,24 +1,10 @@
 import React, { useMemo } from 'react';
 import classnames from 'classnames';
 import Skeleton from '@mui/material/Skeleton';
-import i18n from 'ui-i18n';
-import { DCROperationTypes } from '@reltio/mdm-sdk';
 import { useMdmMetadata } from '../../../../../contexts/MdmModuleContext';
 import { calculateDCRChanges } from '../../helpers';
+import { getOperationLabel } from '../../../helpers/common';
 import styles from './DCRChangesSummary.module.css';
-var getOperationLabel = function (operation) {
-    var _a;
-    var labels = (_a = {},
-        _a[DCROperationTypes.ADDED] = i18n.text('Added'),
-        _a[DCROperationTypes.EDITED] = i18n.text('Edited'),
-        _a[DCROperationTypes.DELETED] = i18n.text('Deleted'),
-        _a[DCROperationTypes.PINNED] = i18n.text('Pinned'),
-        _a[DCROperationTypes.PIN_DELETED] = i18n.text('Pin deleted'),
-        _a[DCROperationTypes.IGNORED] = i18n.text('Ignored'),
-        _a[DCROperationTypes.IGNORE_DELETED] = i18n.text('Ignore deleted'),
-        _a);
-    return labels[operation] || operation || '';
-};
 var ChangeItem = function (_a) {
     var count = _a.count, operation = _a.operation;
     return count > 0 && (React.createElement("div", { className: styles.changeItem },
@@ -32,7 +18,7 @@ export var DCRChangesSummary = function (_a) {
     var changes = _a.changes, groupedObjects = _a.groupedObjects;
     var metadata = useMdmMetadata();
     var dcrChanges = useMemo(function () { return (changes ? calculateDCRChanges(metadata, changes, groupedObjects) : null); }, [metadata, changes, groupedObjects]);
-    var changesLoaded = !!dcrChanges;
+    var changesLoaded = !!dcrChanges && groupedObjects.length > 0;
     return (React.createElement("div", { className: styles.changesSummary, "data-reltio-id": "dcr-changes-summary" },
         !changesLoaded && React.createElement(LoadingSkeleton, null),
         changesLoaded &&

package/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);
 }
 export default styles;

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

@@ -1,4 +1,4 @@
-import { mergeChanges } from '../../AttributesChanges/helpers/merge';
+import { mergeChanges } from '../../helpers/merge';
 export var calculateDCRChanges = function (metadata, changes, groupedObjects) {
     var mergedChanges = groupedObjects.reduce(function (mergedChanges, object) {
         var _a = mergeChanges(metadata, changes, object.entity, object.relations), mergedEntityChanges = _a[0], mergedRelationsChanges = _a[1];

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

@@ -3,10 +3,9 @@ import i18n from 'ui-i18n';
 import classnames from 'classnames';
 import Avatar from '@mui/material/Avatar';
 import Person from '@mui/icons-material/Person';
-import { useStyles } from './styles';
+import styles from './Comment.module.css';
 export var Comment = function (_a) {
     var author = _a.author, message = _a.message, time = _a.time, _b = _a.classes, classes = _b === void 0 ? {} : _b;
-    var styles = useStyles();
     return (React.createElement("div", { className: styles.comment },
         React.createElement(Avatar, { className: styles.avatar },
             React.createElement(Person, { className: styles.icon })),

package/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);
+}
+export default styles;

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

@@ -11,8 +11,8 @@ var __assign = (this && this.__assign) || function () {
 };
 import { complement, curry, flatten, is, isEmpty, pathOr, propOr, times } from 'ramda';
 import { DataTypes, DCRTypes, getAttributeTypeSubAttributes, getLabel, getRelationAttributesList, getRelationType, isEmptyValue, isSpecialAttribute } from '@reltio/mdm-sdk';
-import { getFilteredAttrTypes } from '../../../../helpers/attributesView';
-import { getOperationType } from '../../helpers/common';
+import { getFilteredAttrTypes } from '../../../helpers/attributesView';
+import { getOperationType } from './common';
 var getValues = function (attributes, attrType) {
     if ('newValue' in attributes || 'oldValue' in attributes) {
         var newValue = attributes.newValue, oldValue = attributes.oldValue, type_1 = attributes.type;
@@ -31,13 +31,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 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);
             });
         });
     })
@@ -47,7 +48,7 @@ var getSimpleAttributeValue = function (attributeType, attributeValue) {
     var value = isSpecialAttribute(attributeType) ? attributeValue : attributeValue.value;
     return is(Object, value) ? value : { newValue: attributeValue, type: DCRTypes.INSERT_ATTRIBUTE };
 };
-var dcrAttributesFactory = function (metadata, attributeType, attributeValue, level) {
+var dcrAttributesFactory = function (metadata, attributeType, attributeValue, level, isReferenceSubAttribute) {
     switch (attributeType.type) {
         case DataTypes.TYPE_NESTED:
         case DataTypes.TYPE_IMAGE:
@@ -56,7 +57,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);
         }
     }
 };
@@ -73,14 +74,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 === 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 = getOperationType(type, oldValue);
     var label = (attributeType === null || attributeType === void 0 ? void 0 : attributeType.label) || (attributeType === null || attributeType === void 0 ? void 0 : attributeType.name);
@@ -90,7 +92,8 @@ var getSimpleAttributeChange = function (attributeType, attributeValue, level) {
         oldValue: oldValue,
         operation: operation,
         label: label,
-        level: level
+        level: level,
+        isReferenceSubAttribute: isReferenceSubAttribute
     };
 };
 export var getEntityChanges = curry(function (metadata, entityInfo, changes) {
@@ -108,7 +111,7 @@ export var getRelationChanges = curry(function (metadata, relationInfo, changes,
     var relationType = getRelationType(metadata, relationInfo.type);
     var attrTypes = getRelationAttributesList(metadata, relationInfo.type);
     return flatten([
-        __assign({ level: 1, label: propOr('', 'label', relationType), attributeType: relationType, attributeValue: __assign(__assign({}, relationInfo), changes) }, addRelationOperationIfNeeded(changes, changeType)),
+        __assign({ level: 1, label: propOr('', 'label', relationType), attributeType: null, relationType: relationType, attributeValue: __assign(__assign({}, relationInfo), changes) }, addRelationOperationIfNeeded(changes, changeType)),
         getAttributesList(metadata, attrTypes, changes, 2)
     ]);
 });

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

@@ -75,14 +75,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.entityTypes[0].attributes[1],
                 label: 'Country Code',
                 level: 0,
                 newValue: changes.CountryCode[1].value.newValue,
-                operation: 'added'
+                operation: 'added',
+                isReferenceSubAttribute: false
             },
             {
                 attributeType: metadata.entityTypes[0].attributes[3],
@@ -95,7 +97,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
             }
         ]);
     });
@@ -116,7 +119,8 @@ describe('attributes helpers tests', function () {
         it('should not show operation for relation title', function () {
             expect(getRelationChanges(metadata, relationInfo, changes, DCRTypes.INSERT_ATTRIBUTE)).toEqual([
                 {
-                    attributeType: metadata.relationTypes[1],
+                    attributeType: null,
+                    relationType: metadata.relationTypes[1],
                     attributeValue: __assign(__assign({}, relationInfo), changes),
                     label: metadata.relationTypes[1].label,
                     level: 1
@@ -126,21 +130,24 @@ describe('attributes helpers tests', function () {
                     label: EntityAttrTypes.startDate.label,
                     level: 2,
                     newValue: { value: 1644001200000 },
-                    operation: DCROperationTypes.ADDED
+                    operation: DCROperationTypes.ADDED,
+                    isReferenceSubAttribute: false
                 },
                 {
                     attributeType: metadata.relationTypes[1].attributes[0],
                     label: metadata.relationTypes[1].attributes[0].label,
                     level: 2,
                     newValue: '123',
-                    operation: DCROperationTypes.ADDED
+                    operation: DCROperationTypes.ADDED,
+                    isReferenceSubAttribute: false
                 }
             ]);
         });
         it('should show operation for relation title if it is new', function () {
             expect(getRelationChanges(metadata, relationInfo, changes, DCRTypes.CREATE_RELATIONSHIP)).toEqual([
                 {
-                    attributeType: metadata.relationTypes[1],
+                    attributeType: null,
+                    relationType: metadata.relationTypes[1],
                     attributeValue: __assign(__assign({}, relationInfo), changes),
                     label: metadata.relationTypes[1].label,
                     level: 1,
@@ -151,11 +158,13 @@ describe('attributes helpers tests', function () {
                     label: EntityAttrTypes.startDate.label,
                     level: 2,
                     newValue: { value: 1644001200000 },
-                    operation: DCROperationTypes.ADDED
+                    operation: DCROperationTypes.ADDED,
+                    isReferenceSubAttribute: false
                 },
                 {
                     attributeType: metadata.relationTypes[1].attributes[0],
                     label: metadata.relationTypes[1].attributes[0].label,
+                    isReferenceSubAttribute: false,
                     level: 2,
                     newValue: '123',
                     operation: DCROperationTypes.ADDED
@@ -165,7 +174,8 @@ describe('attributes helpers tests', function () {
         it('should show operation for relation title if it was deleted and changes are empty', function () {
             expect(getRelationChanges(metadata, relationInfo, {}, DCRTypes.DELETE_RELATIONSHIP)).toEqual([
                 {
-                    attributeType: metadata.relationTypes[1],
+                    attributeType: null,
+                    relationType: metadata.relationTypes[1],
                     attributeValue: relationInfo,
                     label: metadata.relationTypes[1].label,
                     level: 1,

package/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/features/workflow/helpers/common.js

@@ -1,6 +1,6 @@
-import { pipe, startsWith, isNil, unless, split, nth, allPass, always, equals, evolve, prop, when, filter, has, length, propEq } from 'ramda';
+import { allPass, always, equals, evolve, filter, has, identity, isNil, length, nth, pipe, prop, propEq, split, startsWith, unless, when } from 'ramda';
 import i18n from 'ui-i18n';
-import { DataTypes, DCRTypes, getAttrDataTypeDefinition, isUrl, DCROperationTypes } from '@reltio/mdm-sdk';
+import { DataTypes, DCROperationTypes, DCRTypes, EntityAttrTypes, getAttrDataTypeDefinition, getRoleLabel, isUrl } from '@reltio/mdm-sdk';
 export var getOperationType = function (type, oldValue) {
     switch (type) {
         case DCRTypes.CREATE_RELATIONSHIP:
@@ -67,3 +67,7 @@ export var isRequestedTask = function (processTypes, assignee) { return function
     return (!processTypes || processTypes.includes(task.processType)) && (!assignee || assignee === task.assignee);
 }; };
 export var findWorkflowDefinitionByType = function (definitions, type) { return definitions.find(propEq('type', type)); };
+export var prepareRolesOrTagsValue = function (metadata, value, type) {
+    var getLabel = type === EntityAttrTypes.roles.uri ? getRoleLabel(metadata) : identity;
+    return value.map(getLabel).join(', ');
+};

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

@@ -9,7 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { concat, curry, difference, flatten, identity, isNil, omit, path, pick, pipe, propEq, propOr, reduce } from 'ramda';
+import { concat, curry, difference, flatten, isNil, omit, path, pick, pipe, propEq, propOr, reduce } from 'ramda';
 import { DCRTypes, EntityAttrTypes, generateTempUri, getRoleLabel, isEmptyValue } from '@reltio/mdm-sdk';
 import { getEntityChanges, getRelationChanges } from './attributes';
 var ATTRIBUTE_DELIMITER = '/';
@@ -53,21 +53,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 === DCRTypes.UPDATE_ROLES ? getRoleLabel(metadata) : identity;
+    var _a = change.newValue, newValue = _a === void 0 ? [] : _a, _b = change.oldValue, oldValue = _b === void 0 ? [] : _b;
     var diffNewValue = difference(newValue, oldValue);
     var diffOldValue = difference(oldValue, newValue);
     var items = [];
     if (diffNewValue.length) {
         items.push({
             type: DCRTypes.INSERT_ATTRIBUTE,
-            newValue: { value: diffNewValue.map(getLabel).join(', ') }
+            newValue: { value: diffNewValue }
         });
     }
     if (diffOldValue.length) {
         items.push({
             type: DCRTypes.DELETE_ATTRIBUTE,
-            oldValue: { value: diffOldValue.map(getLabel).join(', ') }
+            oldValue: { value: diffOldValue }
         });
     }
     return items;

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

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

package/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/features/workflow/hooks/useChangesList.js

@@ -0,0 +1,17 @@
+import { useMemo } from 'react';
+import { flatten } from 'ramda';
+import i18n from 'ui-i18n';
+import { mergeChanges } from '../helpers/merge';
+import { useMdmMetadata } from '../../../contexts/MdmModuleContext';
+export var useChangesList = function (_a) {
+    var changes = _a.changes, entityInfo = _a.entityInfo, relationsInfo = _a.relationsInfo;
+    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]);
+    return changesList;
+};

package/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/hooks/useCssVariableStyles/useCssVariableStyles.js

@@ -20,5 +20,5 @@ export var useCssVariableStyles = function (variables, additionalStyles) {
             return [key, verifiedValue];
         }));
     }, [variables]);
-    return __assign(__assign({}, style), additionalStyles);
+    return useMemo(function () { return (__assign(__assign({}, style), additionalStyles)); }, [style, additionalStyles]);
 };

package/icons/SuggestedChanges.d.ts

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

package/icons/SuggestedChanges.js

@@ -0,0 +1,22 @@
+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);
+};
+import React from 'react';
+var SvgSuggestedChanges = function (props) {
+    return (React.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.createElement("g", { clipPath: "url(#clip0_536_106424)" },
+            React.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.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.createElement("defs", null,
+            React.createElement("clipPath", { id: "clip0_536_106424" },
+                React.createElement("rect", { width: "31.9441", height: "32", fill: "white" })))));
+};
+export default SvgSuggestedChanges;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.2198",
+  "version": "1.4.2200",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "./cjs/index.js",
   "module": "./index.js",
@@ -11,7 +11,7 @@
     "@fluentui/react-context-selector": "^9.1.26",
     "@googlemaps/markerclusterer": "^2.5.3",
     "@react-sigma/core": "3.4.0",
-    "@reltio/mdm-sdk": "^1.4.2001",
+    "@reltio/mdm-sdk": "^1.4.2003",
     "@vis.gl/react-google-maps": "^1.3.0",
     "d3-cloud": "^1.2.5",
     "d3-geo": "^2.0.1",

package/cjs/features/workflow/AttributesChanges/components/ChangeView/styles.d.ts

@@ -1 +0,0 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"difference" | "arrow" | "fieldName" | "field" | "chip">;

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

@@ -1,49 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useStyles = void 0;
-var styles_1 = require("@mui/styles");
-exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
-    field: {
-        fontSize: '12px',
-        lineHeight: '20px',
-        color: theme.palette.text.primary,
-        marginTop: '6px',
-        overflow: 'hidden',
-        wordBreak: 'break-word'
-    },
-    fieldName: {
-        color: theme.palette.text.secondary,
-        marginRight: '8px'
-    },
-    difference: {
-        marginRight: '8px'
-    },
-    arrow: {
-        margin: '0 4px',
-        fontSize: '12px',
-        color: theme.palette.text.primary
-    },
-    chip: {
-        height: '20px',
-        fontSize: '10px',
-        fontWeight: 500,
-        lineHeight: '16px',
-        letterSpacing: 0,
-        flexShrink: 0,
-        textTransform: 'capitalize',
-        color: theme.palette.primary.main,
-        borderColor: theme.palette.primary.main,
-        '&.edited': {
-            color: '#CC7500',
-            borderColor: '#CC7500'
-        },
-        '&.added': {
-            color: '#599E0E',
-            borderColor: '#599E0E'
-        },
-        '&.deleted': {
-            color: '#CF0E26',
-            borderColor: '#CF0E26'
-        }
-    }
-}); });

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

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