@reltio/components 1.4.2199 → 1.4.2201

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 {};

package/features/workflow/ChangeRequestEditor/components/ChangeItemEditor/ChangeItemEditor.js

@@ -0,0 +1,42 @@
+import React, { useMemo } from 'react';
+import { isNil } from 'ramda';
+import { DCROperationTypes, EntityAttrTypes, getAttributeValue } from '@reltio/mdm-sdk';
+import { getDataTypeDefinition, prepareRolesOrTagsValue } from '../../../helpers/common';
+import { OperationChip } from '../../../OperationChip';
+import { DataTypeValue } from '../../../../../DataTypeValue';
+import { RelationEntityLink } from '../../../RelationEntityLink';
+import { ChangeItemLabel } from './ChangeItemLabel';
+import { DCRValueEditor } from './DCRValueEditor';
+import { useMdmMetadata } from '../../../../../contexts/MdmModuleContext';
+import styles from './ChangeItemEditor.module.css';
+export var ChangeItemEditor = function (_a) {
+    var _b, _c, _d;
+    var change = _a.change, onValueChange = _a.onValueChange, _e = _a.editable, editable = _e === void 0 ? true : _e;
+    var metadata = useMdmMetadata();
+    var isUpdateOperation = change.operation === DCROperationTypes.EDITED;
+    var isAddOperation = change.operation === DCROperationTypes.ADDED;
+    var hasAnyValue = Boolean(change.oldValue || change.newValue);
+    var oldValue = getAttributeValue(change.oldValue);
+    var newValue = getAttributeValue(change.newValue);
+    var hasNewValue = !isNil(newValue);
+    var dataTypeDefinition = useMemo(function () {
+        return change.attributeType && getDataTypeDefinition(change.attributeType, newValue || oldValue);
+    }, [change.attributeType, newValue, oldValue]);
+    var shouldShowValueEditor = (isUpdateOperation || isAddOperation) && editable;
+    var shouldShowOperationChip = hasAnyValue && change.operation;
+    var isRolesOrTags = ((_b = change === null || change === void 0 ? void 0 : change.attributeType) === null || _b === void 0 ? void 0 : _b.uri) === EntityAttrTypes.roles.uri ||
+        ((_c = change === null || change === void 0 ? void 0 : change.attributeType) === null || _c === void 0 ? void 0 : _c.uri) === EntityAttrTypes.tags.uri;
+    var preparedValue = useMemo(function () {
+        return isRolesOrTags
+            ? prepareRolesOrTagsValue(metadata, newValue, change.attributeType.uri)
+            : newValue;
+    }, [isRolesOrTags, metadata, newValue, (_d = change.attributeType) === null || _d === void 0 ? void 0 : _d.uri]);
+    return (React.createElement("div", { className: styles.attributeRow },
+        React.createElement(ChangeItemLabel, { change: change, className: styles.labelColumn, showLabel: !isUpdateOperation }),
+        React.createElement("div", { className: styles.valueColumn },
+            React.createElement(RelationEntityLink, { attributeOrRelationType: change.attributeType || change.relationType, attributeValue: change.attributeValue, className: styles.relationEntityLink }),
+            shouldShowValueEditor ? (React.createElement(DCRValueEditor, { attributeType: change.attributeType, value: change.newValue, onChange: onValueChange })) : (hasNewValue && (React.createElement("div", { className: styles.value },
+                React.createElement(DataTypeValue, { value: preparedValue, dataTypeDefinition: dataTypeDefinition }))))),
+        React.createElement("div", { className: styles.revertColumn }),
+        React.createElement("div", { className: styles.operationColumn }, shouldShowOperationChip && (React.createElement(OperationChip, { operation: change.operation, size: "small", variant: "outlined" })))));
+};

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

@@ -0,0 +1,9 @@
+const styles = {"attributeRow":"ChangeItemEditor-attributeRow--bITG5","labelColumn":"ChangeItemEditor-labelColumn--6B4w4","changeLabel":"ChangeItemEditor-changeLabel--C7s6T","valueColumn":"ChangeItemEditor-valueColumn--q9456","revertColumn":"ChangeItemEditor-revertColumn--T5mVE","operationColumn":"ChangeItemEditor-operationColumn--me-4D","previousValue":"ChangeItemEditor-previousValue--lTOVp","previousValueText":"ChangeItemEditor-previousValueText--gAnge","editor":"ChangeItemEditor-editor--hyLPa","arrow":"ChangeItemEditor-arrow--IXZ6i","value":"ChangeItemEditor-value--GxSUf","columnSkeleton":"ChangeItemEditor-columnSkeleton---iGmr","relationEntityLink":"ChangeItemEditor-relationEntityLink--Vr7Z-"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.ChangeItemEditor-attributeRow--bITG5{align-items:center;display:flex;font-size:16px;gap:16px}.ChangeItemEditor-labelColumn--6B4w4{box-sizing:border-box;min-height:21px;width:170px}.ChangeItemEditor-changeLabel--C7s6T{color:var(--mui-palette-text-secondary);font-size:14px;font-weight:400;letter-spacing:.24px;padding-left:calc(var(--level, 0)*16px)}.ChangeItemEditor-valueColumn--q9456{display:flex;flex:1;flex-direction:column;gap:4px}.ChangeItemEditor-revertColumn--T5mVE{margin-left:-9px;width:24px}.ChangeItemEditor-operationColumn--me-4D{width:145px}.ChangeItemEditor-previousValue--lTOVp{align-items:center;display:flex;line-height:16px;padding:6px 12px 7px}.ChangeItemEditor-previousValueText--gAnge{color:var(--mui-palette-text-primary);letter-spacing:.24px}.ChangeItemEditor-editor--hyLPa{min-height:40px}.ChangeItemEditor-arrow--IXZ6i{color:var(--mui-palette-text-secondary);font-weight:700;margin:0 5px}.ChangeItemEditor-value--GxSUf{font-size:16px;padding:8px}.ChangeItemEditor-columnSkeleton---iGmr{transform:none}.ChangeItemEditor-relationEntityLink--Vr7Z-{font-size:16px}`;
+    head.appendChild(style);
+}
+export default styles;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Diff } from '../../../types';
+type Props = {
+    change: Diff;
+    showLabel?: boolean;
+    className?: string;
+};
+export declare const ChangeItemLabel: ({ change, className, showLabel }: Props) => React.JSX.Element;
+export {};

package/features/workflow/ChangeRequestEditor/components/ChangeItemEditor/ChangeItemLabel.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import classnames from 'classnames';
+import { useCssVariableStyles } from '../../../../../hooks/useCssVariableStyles';
+import styles from './ChangeItemEditor.module.css';
+export var ChangeItemLabel = function (_a) {
+    var change = _a.change, className = _a.className, _b = _a.showLabel, showLabel = _b === void 0 ? true : _b;
+    var _c = change.level, level = _c === void 0 ? 0 : _c, label = change.label;
+    var variableStyles = useCssVariableStyles({
+        '--level': level
+    });
+    return (React.createElement("div", { className: classnames(styles.changeLabel, className), style: variableStyles }, showLabel && label));
+};

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { Diff } from '../../../types';
+type Props = {
+    change: Diff;
+};
+export declare const ChangeItemOldValue: ({ change }: Props) => React.JSX.Element;
+export {};

package/features/workflow/ChangeRequestEditor/components/ChangeItemEditor/ChangeItemOldValue.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { isNil } from 'ramda';
+import EastIcon from '@mui/icons-material/East';
+import { DCROperationTypes, getAttributeValue } from '@reltio/mdm-sdk';
+import { getDataTypeDefinition } from '../../../helpers/common';
+import { DataTypeValue } from '../../../../../DataTypeValue';
+import { ChangeItemLabel } from './ChangeItemLabel';
+import styles from './ChangeItemEditor.module.css';
+export var ChangeItemOldValue = function (_a) {
+    var change = _a.change;
+    var isUpdateOperation = change.operation === DCROperationTypes.EDITED;
+    var oldValue = getAttributeValue(change.oldValue);
+    var newValue = getAttributeValue(change.newValue);
+    var dataTypeDefinition = change.attributeType && getDataTypeDefinition(change.attributeType, newValue !== null && newValue !== void 0 ? newValue : oldValue);
+    var hasOldValue = !isNil(oldValue);
+    return (React.createElement("div", { className: styles.attributeRow },
+        React.createElement(ChangeItemLabel, { change: change, className: styles.labelColumn }),
+        React.createElement("div", { className: styles.valueColumn }, isUpdateOperation && hasOldValue && (React.createElement("div", { className: styles.previousValue },
+            React.createElement("span", { className: styles.previousValueText },
+                React.createElement(DataTypeValue, { value: oldValue, dataTypeDefinition: dataTypeDefinition })),
+            React.createElement("span", { className: styles.arrow },
+                React.createElement(EastIcon, null))))),
+        React.createElement("div", { className: styles.revertColumn }),
+        React.createElement("div", { className: styles.operationColumn })));
+};

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { AttributeType, DCRValue, ChangeValue } from '@reltio/mdm-sdk';
+type Props = {
+    attributeType: AttributeType;
+    value: ChangeValue;
+    onChange: (id: string, newValue: DCRValue) => void;
+};
+export declare const DCRValueEditor: ({ attributeType, value, onChange }: Props) => React.JSX.Element;
+export {};

package/features/workflow/ChangeRequestEditor/components/ChangeItemEditor/DCRValueEditor.js

@@ -0,0 +1,14 @@
+import React, { useCallback } from 'react';
+import { DCRValueEditorFactory } from './DCRValueEditorFactory';
+import styles from './ChangeItemEditor.module.css';
+export var DCRValueEditor = function (_a) {
+    var attributeType = _a.attributeType, value = _a.value, onChange = _a.onChange;
+    var handleChange = useCallback(function (updatedValue) {
+        onChange(attributeType.uri, updatedValue);
+    }, [attributeType.uri, onChange]);
+    return (React.createElement("div", { className: styles.editor }, DCRValueEditorFactory.build({
+        attributeType: attributeType,
+        value: value,
+        onChange: handleChange
+    })));
+};

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { AttributeType, DCRValue, DataTypeDefinition, ChangeValue } from '@reltio/mdm-sdk';
+type Props = {
+    attributeType: AttributeType;
+    value: ChangeValue;
+    onChange: (value: DCRValue) => void;
+    dataTypeDefinition?: DataTypeDefinition;
+};
+export declare class DCRValueEditorFactory {
+    static build({ attributeType, value, onChange }: Props): React.JSX.Element;
+}
+export {};

package/features/workflow/ChangeRequestEditor/components/ChangeItemEditor/DCRValueEditorFactory.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { EntityAttrTypes, wrapInArrayIfNeeded, getAttributeValue } from '@reltio/mdm-sdk';
+import { DataTypeValueEditor } from '../../../../../DataTypeValueEditor';
+import { attributeValueToEditorValue } from '../../../../../helpers/attributesView';
+import { getDataTypeDefinition } from '../../../helpers/common';
+import { RolesInput } from '../../../../../RolesInput/RolesInput';
+import { TagsInput } from '../../../../../TagsInput/TagsInput';
+var DCRValueEditorFactory = /** @class */ (function () {
+    function DCRValueEditorFactory() {
+    }
+    DCRValueEditorFactory.build = function (_a) {
+        var attributeType = _a.attributeType, value = _a.value, onChange = _a.onChange;
+        var dcrValue = getAttributeValue(value);
+        switch (attributeType.uri) {
+            case EntityAttrTypes.roles.uri: {
+                return React.createElement(RolesInput, { value: wrapInArrayIfNeeded(dcrValue), onChange: onChange });
+            }
+            case EntityAttrTypes.tags.uri: {
+                return React.createElement(TagsInput, { value: wrapInArrayIfNeeded(dcrValue), onChange: onChange });
+            }
+            default: {
+                var dataTypeDefinition = getDataTypeDefinition(attributeType, dcrValue);
+                var editorValue = value && dataTypeDefinition
+                    ? attributeValueToEditorValue(value, dataTypeDefinition)
+                    : null;
+                return (React.createElement(DataTypeValueEditor, { fieldName: attributeType.uri, value: editorValue, dataTypeDefinition: dataTypeDefinition, onChange: onChange, fullWidth: true }));
+            }
+        }
+    };
+    return DCRValueEditorFactory;
+}());
+export { DCRValueEditorFactory };

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const SkeletonChangeItemEditorLoader: () => React.JSX.Element;

package/features/workflow/ChangeRequestEditor/components/ChangeItemEditor/SkeletonChangeItemEditorLoader.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import Skeleton from '@mui/material/Skeleton';
+import styles from './ChangeItemEditor.module.css';
+export var SkeletonChangeItemEditorLoader = function () {
+    return (React.createElement("div", { className: styles.attributeRow },
+        React.createElement("div", { className: styles.labelColumn },
+            React.createElement(Skeleton, { variant: "text", width: "90%", height: 18, className: styles.columnSkeleton })),
+        React.createElement("div", { className: styles.valueColumn },
+            React.createElement(Skeleton, { variant: "text", height: 40, className: styles.columnSkeleton })),
+        React.createElement("div", { className: styles.revertColumn }),
+        React.createElement("div", { className: styles.operationColumn },
+            React.createElement(Skeleton, { variant: "rectangular", width: 60, height: 20, className: styles.columnSkeleton }))));
+};

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

@@ -0,0 +1,3 @@
+export { ChangeItemEditor } from './ChangeItemEditor';
+export { ChangeItemOldValue } from './ChangeItemOldValue';
+export { SkeletonChangeItemEditorLoader } from './SkeletonChangeItemEditorLoader';

package/features/workflow/ChangeRequestEditor/components/ChangeItemEditor/index.js

@@ -0,0 +1,3 @@
+export { ChangeItemEditor } from './ChangeItemEditor';
+export { ChangeItemOldValue } from './ChangeItemOldValue';
+export { SkeletonChangeItemEditorLoader } from './SkeletonChangeItemEditorLoader';

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { GroupedObjectsInfo, DCRValue } from '@reltio/mdm-sdk';
+import { Diff, Title } from '../../../types';
+type Props = {
+    item: Diff | Title;
+    onValueChange: (id: string, newValue: DCRValue) => void;
+    entityInfo: GroupedObjectsInfo['entity'];
+};
+export declare const ChangeItemRow: ({ item, onValueChange, entityInfo }: Props) => React.JSX.Element;
+export {};

package/features/workflow/ChangeRequestEditor/components/ChangeItemRow/ChangeItemRow.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { has } from 'ramda';
+import classnames from 'classnames';
+import { DCROperationTypes } from '@reltio/mdm-sdk';
+import { isEditableChange } from '../../helpers';
+import { ChangeItemOldValue, ChangeItemEditor } from '../ChangeItemEditor';
+import styles from './ChangeItemRow.module.css';
+export var ChangeItemRow = function (_a) {
+    var _b;
+    var item = _a.item, onValueChange = _a.onValueChange, entityInfo = _a.entityInfo;
+    if (!has('level', item)) {
+        return React.createElement("div", { className: styles.title }, item.label);
+    }
+    var change = item;
+    var isEditedOperation = change.operation === DCROperationTypes.EDITED;
+    var editable = isEditableChange(change, entityInfo);
+    return (React.createElement("div", { className: classnames(styles.changeItemRow, (_b = {}, _b[styles.editableRow] = editable, _b)) },
+        isEditedOperation && React.createElement(ChangeItemOldValue, { change: change }),
+        React.createElement(ChangeItemEditor, { change: change, onValueChange: onValueChange, editable: editable })));
+};

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

@@ -0,0 +1,9 @@
+const styles = {"changeItemRow":"ChangeItemRow-changeItemRow--oF9hn","editableRow":"ChangeItemRow-editableRow--ZQzGk","title":"ChangeItemRow-title--G8iV2"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.ChangeItemRow-changeItemRow--oF9hn{display:flex;flex-direction:column;gap:8px}.ChangeItemRow-editableRow--ZQzGk:hover{background:var(--mui-palette-action-hover)}.ChangeItemRow-title--G8iV2{color:var(--mui-palette-text-primary);font-size:14px;font-weight:600;margin:0 0 12px}`;
+    head.appendChild(style);
+}
+export default styles;

package/features/workflow/ChangeRequestEditor/components/ChangeItemRow/index.d.ts

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

package/features/workflow/ChangeRequestEditor/components/ChangeItemRow/index.js

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

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { GroupedObjectsInfo, WorkflowTaskData, ChangeRequest } from '@reltio/mdm-sdk';
+type Props = {
+    task: WorkflowTaskData;
+    dcr: ChangeRequest;
+    entityInfo: GroupedObjectsInfo['entity'];
+    relationsInfo: GroupedObjectsInfo['relations'];
+};
+export declare const EntityChangesGroup: ({ task, dcr, entityInfo, relationsInfo }: Props) => React.JSX.Element;
+export {};

package/features/workflow/ChangeRequestEditor/components/EntityChangesGroup/EntityChangesGroup.js

@@ -0,0 +1,31 @@
+import React, { useCallback } from 'react';
+import Accordion from '@mui/material/Accordion';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { useChangesList } from '../../../hooks/useChangesList';
+import { DCREntityUriLink } from '../../../DCREntityUriLink/DCREntityUriLink';
+import { ChangeItemRow } from '../ChangeItemRow/ChangeItemRow';
+import { AttributesChangesContext } from '../../../AttributesChanges/AttributesChangesContext';
+import { getDCRUri } from '../../../helpers/common';
+import styles from './EntityChangesGroup.module.css';
+export var EntityChangesGroup = function (_a) {
+    var task = _a.task, dcr = _a.dcr, entityInfo = _a.entityInfo, relationsInfo = _a.relationsInfo;
+    var dcrUri = getDCRUri(task.objectURIs);
+    var _b = dcr || {}, changes = _b.changes, objectsInfo = _b.objectsInfo;
+    var changesList = useChangesList({
+        changes: changes,
+        entityInfo: entityInfo,
+        relationsInfo: relationsInfo
+    });
+    var handleValueChange = useCallback(function () {
+        // TODO: Implement value change logic
+    }, []);
+    return (React.createElement(AttributesChangesContext.Provider, { value: objectsInfo },
+        React.createElement(Accordion, { className: styles.entityGroup, defaultExpanded: true, "data-reltio-id": "entity-changes-group" },
+            React.createElement(AccordionSummary, { expandIcon: React.createElement(ExpandMoreIcon, null), className: styles.entityHeader, classes: {
+                    content: styles.accordionContent
+                } },
+                React.createElement(DCREntityUriLink, { entityInfo: entityInfo, changes: changes, dcrUri: dcrUri, className: styles.entityTitle })),
+            React.createElement(AccordionDetails, { className: styles.attributesList }, changesList.map(function (item, index) { return (React.createElement(ChangeItemRow, { key: "".concat('label' in item ? 'title' : 'change', "-").concat(index), item: item, onValueChange: handleValueChange, entityInfo: entityInfo })); })))));
+};

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

@@ -0,0 +1,9 @@
+const styles = {"entityGroup":"EntityChangesGroup-entityGroup--KmWaa","entityHeader":"EntityChangesGroup-entityHeader--hf8-J","entityTitle":"EntityChangesGroup-entityTitle--caeZE","accordionContent":"EntityChangesGroup-accordionContent--N7C6Y","attributesList":"EntityChangesGroup-attributesList--7Tmk6","skeletonEntityGroupDisabled":"EntityChangesGroup-skeletonEntityGroupDisabled--qFGAK"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.EntityChangesGroup-entityGroup--KmWaa{background-color:#f7f7f7;border:1px solid #f0f0f0;border-radius:8px;box-shadow:none;margin:0 16px}.EntityChangesGroup-entityGroup--KmWaa.Mui-expanded{margin:0 16px}.EntityChangesGroup-entityGroup--KmWaa:before{display:none}.EntityChangesGroup-entityHeader--hf8-J{border-bottom:1px solid #f0f0f0;min-height:auto;padding:8px 16px}.EntityChangesGroup-entityHeader--hf8-J.Mui-expanded{min-height:auto}.EntityChangesGroup-entityTitle--caeZE{font-size:14px}.EntityChangesGroup-accordionContent--N7C6Y,.EntityChangesGroup-accordionContent--N7C6Y.Mui-expanded{margin:0}.EntityChangesGroup-attributesList--7Tmk6{display:flex;flex-direction:column;gap:8px;max-width:1000px;min-width:750px;padding:16px}.EntityChangesGroup-skeletonEntityGroupDisabled--qFGAK.Mui-disabled{background-color:#f7f7f7}`;
+    head.appendChild(style);
+}
+export default styles;

package/features/workflow/ChangeRequestEditor/components/EntityChangesGroup/SkeletonEntityChangesGroupLoader.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const SkeletonEntityChangesGroupLoader: () => React.JSX.Element;

package/features/workflow/ChangeRequestEditor/components/EntityChangesGroup/SkeletonEntityChangesGroupLoader.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import Accordion from '@mui/material/Accordion';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import Skeleton from '@mui/material/Skeleton';
+import { SkeletonChangeItemEditorLoader } from '../ChangeItemEditor';
+import styles from './EntityChangesGroup.module.css';
+export var SkeletonEntityChangesGroupLoader = function () {
+    return (React.createElement(Accordion, { className: styles.entityGroup, classes: { disabled: styles.skeletonEntityGroupDisabled }, defaultExpanded: true, disabled: true },
+        React.createElement(AccordionSummary, { expandIcon: React.createElement(ExpandMoreIcon, null), className: styles.entityHeader, classes: {
+                content: styles.accordionContent
+            } },
+            React.createElement(Skeleton, { variant: "text", width: "150px", height: 30 })),
+        React.createElement(AccordionDetails, { className: styles.attributesList }, Array.from({ length: 3 }).map(function (_, index) { return (React.createElement(SkeletonChangeItemEditorLoader, { key: "change-list-item-loader-".concat(index) })); }))));
+};

package/features/workflow/ChangeRequestEditor/components/EntityChangesGroup/index.d.ts

@@ -0,0 +1,2 @@
+export { EntityChangesGroup } from './EntityChangesGroup';
+export { SkeletonEntityChangesGroupLoader } from './SkeletonEntityChangesGroupLoader';

package/features/workflow/ChangeRequestEditor/components/EntityChangesGroup/index.js

@@ -0,0 +1,2 @@
+export { EntityChangesGroup } from './EntityChangesGroup';
+export { SkeletonEntityChangesGroupLoader } from './SkeletonEntityChangesGroupLoader';

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

@@ -0,0 +1,3 @@
+import { GroupedObjectsInfo } from '@reltio/mdm-sdk';
+import { Diff } from '../types';
+export declare const isEditableChange: (change: Diff, entityInfo: GroupedObjectsInfo["entity"]) => boolean;

package/features/workflow/ChangeRequestEditor/helpers.js

@@ -0,0 +1,12 @@
+import { isNil } from 'ramda';
+import { DCROperationTypes, isRelationTypeUri } from '@reltio/mdm-sdk';
+export var isEditableChange = function (change, entityInfo) {
+    var _a;
+    var currentAttributeTypeUri = (_a = change.attributeType) === null || _a === void 0 ? void 0 : _a.uri;
+    var isExistingReferenceEntityChange = entityInfo.isExist &&
+        currentAttributeTypeUri &&
+        change.isReferenceSubAttribute &&
+        change.operation === DCROperationTypes.ADDED &&
+        !isRelationTypeUri(currentAttributeTypeUri);
+    return !!currentAttributeTypeUri && !isExistingReferenceEntityChange && !isNil(change.newValue);
+};

package/features/workflow/DCREntityUriLink/DCREntityUriLink.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { DCRChanges, GroupedObjectsInfo } from '@reltio/mdm-sdk';
+type Props = {
+    entityInfo: GroupedObjectsInfo['entity'];
+    changes: DCRChanges;
+    dcrUri: string;
+    className?: string;
+};
+export declare const DCREntityUriLink: ({ entityInfo, changes, dcrUri, className }: Props) => React.JSX.Element;
+export {};

package/features/workflow/DCREntityUriLink/DCREntityUriLink.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { always, any, ifElse, propOr } from 'ramda';
+import classnames from 'classnames';
+import { getEntityUriForLink, getLabel } from '@reltio/mdm-sdk';
+import { EntityUriLink } from '../../../EntityUriLink';
+import { getEntityUriForChangeRequest, isCreateEntityOperation } from '../helpers/dcr';
+import classes from './DCREntityUriLink.module.css';
+export var DCREntityUriLink = function (_a) {
+    var entityInfo = _a.entityInfo, changes = _a.changes, dcrUri = _a.dcrUri, className = _a.className;
+    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));
+    return (React.createElement(EntityUriLink, { className: classnames(classes.link, className), value: entityUri, screen: screen },
+        React.createElement("div", { className: classes.label }, getLabel(entityInfo.label))));
+};

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

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

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { DCROperationTypes } from '@reltio/mdm-sdk';
+type Props = {
+    operation: DCROperationTypes;
+    className?: string;
+    size?: 'small' | 'medium';
+    variant?: 'filled' | 'outlined';
+};
+export declare const OperationChip: ({ operation, className, size, variant }: Props) => React.JSX.Element;
+export {};

package/features/workflow/OperationChip/OperationChip.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import classnames from 'classnames';
+import Chip from '@mui/material/Chip';
+import { getOperationLabel } from '../helpers/common';
+import styles from './OperationChip.module.css';
+export var OperationChip = function (_a) {
+    var operation = _a.operation, className = _a.className, _b = _a.size, size = _b === void 0 ? 'small' : _b, _c = _a.variant, variant = _c === void 0 ? 'outlined' : _c;
+    return (React.createElement(Chip, { variant: variant, label: getOperationLabel(operation), size: size, className: classnames(styles.chip, styles[operation], className) }));
+};

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;