@reltio/components 1.4.2199 → 1.4.2201

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

@@ -28,55 +28,34 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DiffRenderer = void 0;
 var react_1 = __importStar(require("react"));
-var ramda_1 = require("ramda");
-var classnames_1 = __importDefault(require("classnames"));
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var ChangeView_1 = require("../ChangeView");
-var AttributesChangesContext_1 = require("../../AttributesChangesContext");
 var common_1 = require("../../../helpers/common");
-var DataTypeValue_1 = require("../../../../../DataTypeValue");
-var EntityUriLink_1 = require("../../../../../EntityUriLink");
+var useCssVariableStyles_1 = require("../../../../../hooks/useCssVariableStyles");
 var MdmModuleContext_1 = require("../../../../../contexts/MdmModuleContext");
-var styles_1 = require("./styles");
+var DataTypeValue_1 = require("../../../../../DataTypeValue");
+var RelationEntityLink_1 = require("../../../RelationEntityLink");
+var DiffRenderer_module_css_1 = __importDefault(require("./DiffRenderer.module.css"));
 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 = (0, styles_1.useStyles)({ level: level });
-    var objectsInfo = (0, react_1.useContext)(AttributesChangesContext_1.AttributesChangesContext);
-    var entityUri = (0, MdmModuleContext_1.useMdmEntityUri)();
-    var getLinkDescription = (0, react_1.useCallback)(function () {
-        var _a, _b, _c;
-        if ((0, mdm_sdk_1.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 (0, common_1.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 = (0, react_1.useCallback)(function () {
-        var _a, _b;
-        var _c;
-        var _d = getLinkDescription() || {}, objectUri = _d.objectUri, objectLabel = _d.objectLabel;
-        if (!(0, ramda_1.isNil)(objectUri) && !(0, ramda_1.isNil)(objectLabel)) {
-            var isNotExist = ((_c = objectsInfo[objectUri]) === null || _c === void 0 ? void 0 : _c.isExist) === false;
-            return (react_1.default.createElement(EntityUriLink_1.EntityUriLink, { value: objectUri, className: (0, classnames_1.default)(styles.linkContainer, (_a = {}, _a[styles.disabledLink] = isNotExist, _a)) },
-                react_1.default.createElement("span", { className: (0, classnames_1.default)(styles.linkLabel, (_b = {}, _b[styles.label] = isNotExist, _b)) }, (0, mdm_sdk_1.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 = (0, useCssVariableStyles_1.useCssVariableStyles)({
+        '--level': level
+    });
+    var metadata = (0, MdmModuleContext_1.useMdmMetadata)();
     var changeLabel = (0, react_1.useMemo)(function () {
         return (react_1.default.createElement("span", null,
             label,
-            renderLink()));
-    }, [label, renderLink]);
+            react_1.default.createElement(RelationEntityLink_1.RelationEntityLink, { attributeOrRelationType: attributeType || relationType, attributeValue: attributeValue })));
+    }, [label, attributeType, relationType, attributeValue]);
     var renderValue = (0, react_1.useCallback)(function (value) {
         var attrValue = (0, mdm_sdk_1.getAttributeValue)(value);
-        return (react_1.default.createElement(DataTypeValue_1.DataTypeValue, { value: attrValue, dataTypeDefinition: (0, common_1.getDataTypeDefinition)(attributeType, attrValue) }));
-    }, [attributeType]);
-    return (react_1.default.createElement(ChangeView_1.ChangeView, { className: styles.change, label: changeLabel, oldValue: oldValue && renderValue(oldValue), newValue: newValue && renderValue(newValue), operation: operation }));
+        var isRolesOrTags = attributeType.uri === mdm_sdk_1.EntityAttrTypes.roles.uri || attributeType.uri === mdm_sdk_1.EntityAttrTypes.tags.uri;
+        var preparedValue = isRolesOrTags
+            ? (0, common_1.prepareRolesOrTagsValue)(metadata, attrValue, attributeType.uri)
+            : attrValue;
+        return (react_1.default.createElement(DataTypeValue_1.DataTypeValue, { value: preparedValue, dataTypeDefinition: (0, common_1.getDataTypeDefinition)(attributeType, attrValue) }));
+    }, [attributeType, metadata]);
+    return (react_1.default.createElement("div", { className: DiffRenderer_module_css_1.default.change, style: variableStyles },
+        react_1.default.createElement(ChangeView_1.ChangeView, { label: changeLabel, oldValue: oldValue && renderValue(oldValue), newValue: newValue && renderValue(newValue), operation: operation })));
 };
 exports.DiffRenderer = DiffRenderer;

package/cjs/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);
+}
+module.exports = styles;

package/cjs/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/cjs/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/cjs/features/workflow/ChangeRequestEditor/ChangeRequestEditor.js

@@ -6,13 +6,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ChangeRequestEditor = void 0;
 var react_1 = __importDefault(require("react"));
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var Typography_1 = __importDefault(require("@mui/material/Typography"));
+var SuggestedChanges_1 = __importDefault(require("../../../icons/SuggestedChanges"));
+var EntityChangesGroup_1 = require("./components/EntityChangesGroup");
 var ChangeRequestEditor_module_css_1 = __importDefault(require("./ChangeRequestEditor.module.css"));
 var ChangeRequestEditor = function (_a) {
-    var dcr = _a.dcr, _task = _a.task;
-    var dcrLoaded = !!dcr;
-    if (!dcrLoaded) {
-        return null;
-    }
-    return react_1.default.createElement("div", { className: ChangeRequestEditor_module_css_1.default.container }, ui_i18n_1.default.text('DCR changes'));
+    var dcr = _a.dcr, task = _a.task, groupedObjects = _a.groupedObjects;
+    var dcrLoaded = !!dcr && groupedObjects.length > 0;
+    return (react_1.default.createElement("div", { className: ChangeRequestEditor_module_css_1.default.container },
+        react_1.default.createElement("div", { className: ChangeRequestEditor_module_css_1.default.header },
+            react_1.default.createElement("div", { className: ChangeRequestEditor_module_css_1.default.suggestedChangesIcon },
+                react_1.default.createElement(SuggestedChanges_1.default, null)),
+            react_1.default.createElement(Typography_1.default, { variant: "h6", className: ChangeRequestEditor_module_css_1.default.suggestedChangesTitle }, ui_i18n_1.default.text('Suggested changes'))),
+        dcrLoaded ? (groupedObjects.map(function (object, index) { return (react_1.default.createElement(EntityChangesGroup_1.EntityChangesGroup, { key: "entity-".concat(index), entityInfo: object.entity, relationsInfo: object.relations, task: task, dcr: dcr })); })) : (react_1.default.createElement(EntityChangesGroup_1.SkeletonEntityChangesGroupLoader, null))));
 };
 exports.ChangeRequestEditor = ChangeRequestEditor;

package/cjs/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);
 }
 module.exports = styles;

package/cjs/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/cjs/features/workflow/ChangeRequestEditor/components/ChangeItemEditor/ChangeItemEditor.js

@@ -0,0 +1,72 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChangeItemEditor = void 0;
+var react_1 = __importStar(require("react"));
+var ramda_1 = require("ramda");
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var common_1 = require("../../../helpers/common");
+var OperationChip_1 = require("../../../OperationChip");
+var DataTypeValue_1 = require("../../../../../DataTypeValue");
+var RelationEntityLink_1 = require("../../../RelationEntityLink");
+var ChangeItemLabel_1 = require("./ChangeItemLabel");
+var DCRValueEditor_1 = require("./DCRValueEditor");
+var MdmModuleContext_1 = require("../../../../../contexts/MdmModuleContext");
+var ChangeItemEditor_module_css_1 = __importDefault(require("./ChangeItemEditor.module.css"));
+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 = (0, MdmModuleContext_1.useMdmMetadata)();
+    var isUpdateOperation = change.operation === mdm_sdk_1.DCROperationTypes.EDITED;
+    var isAddOperation = change.operation === mdm_sdk_1.DCROperationTypes.ADDED;
+    var hasAnyValue = Boolean(change.oldValue || change.newValue);
+    var oldValue = (0, mdm_sdk_1.getAttributeValue)(change.oldValue);
+    var newValue = (0, mdm_sdk_1.getAttributeValue)(change.newValue);
+    var hasNewValue = !(0, ramda_1.isNil)(newValue);
+    var dataTypeDefinition = (0, react_1.useMemo)(function () {
+        return change.attributeType && (0, common_1.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) === mdm_sdk_1.EntityAttrTypes.roles.uri ||
+        ((_c = change === null || change === void 0 ? void 0 : change.attributeType) === null || _c === void 0 ? void 0 : _c.uri) === mdm_sdk_1.EntityAttrTypes.tags.uri;
+    var preparedValue = (0, react_1.useMemo)(function () {
+        return isRolesOrTags
+            ? (0, common_1.prepareRolesOrTagsValue)(metadata, newValue, change.attributeType.uri)
+            : newValue;
+    }, [isRolesOrTags, metadata, newValue, (_d = change.attributeType) === null || _d === void 0 ? void 0 : _d.uri]);
+    return (react_1.default.createElement("div", { className: ChangeItemEditor_module_css_1.default.attributeRow },
+        react_1.default.createElement(ChangeItemLabel_1.ChangeItemLabel, { change: change, className: ChangeItemEditor_module_css_1.default.labelColumn, showLabel: !isUpdateOperation }),
+        react_1.default.createElement("div", { className: ChangeItemEditor_module_css_1.default.valueColumn },
+            react_1.default.createElement(RelationEntityLink_1.RelationEntityLink, { attributeOrRelationType: change.attributeType || change.relationType, attributeValue: change.attributeValue, className: ChangeItemEditor_module_css_1.default.relationEntityLink }),
+            shouldShowValueEditor ? (react_1.default.createElement(DCRValueEditor_1.DCRValueEditor, { attributeType: change.attributeType, value: change.newValue, onChange: onValueChange })) : (hasNewValue && (react_1.default.createElement("div", { className: ChangeItemEditor_module_css_1.default.value },
+                react_1.default.createElement(DataTypeValue_1.DataTypeValue, { value: preparedValue, dataTypeDefinition: dataTypeDefinition }))))),
+        react_1.default.createElement("div", { className: ChangeItemEditor_module_css_1.default.revertColumn }),
+        react_1.default.createElement("div", { className: ChangeItemEditor_module_css_1.default.operationColumn }, shouldShowOperationChip && (react_1.default.createElement(OperationChip_1.OperationChip, { operation: change.operation, size: "small", variant: "outlined" })))));
+};
+exports.ChangeItemEditor = ChangeItemEditor;

package/cjs/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);
+}
+module.exports = styles;

package/cjs/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/cjs/features/workflow/ChangeRequestEditor/components/ChangeItemEditor/ChangeItemLabel.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChangeItemLabel = void 0;
+var react_1 = __importDefault(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var useCssVariableStyles_1 = require("../../../../../hooks/useCssVariableStyles");
+var ChangeItemEditor_module_css_1 = __importDefault(require("./ChangeItemEditor.module.css"));
+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 = (0, useCssVariableStyles_1.useCssVariableStyles)({
+        '--level': level
+    });
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(ChangeItemEditor_module_css_1.default.changeLabel, className), style: variableStyles }, showLabel && label));
+};
+exports.ChangeItemLabel = ChangeItemLabel;

package/cjs/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/cjs/features/workflow/ChangeRequestEditor/components/ChangeItemEditor/ChangeItemOldValue.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChangeItemOldValue = void 0;
+var react_1 = __importDefault(require("react"));
+var ramda_1 = require("ramda");
+var East_1 = __importDefault(require("@mui/icons-material/East"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var common_1 = require("../../../helpers/common");
+var DataTypeValue_1 = require("../../../../../DataTypeValue");
+var ChangeItemLabel_1 = require("./ChangeItemLabel");
+var ChangeItemEditor_module_css_1 = __importDefault(require("./ChangeItemEditor.module.css"));
+var ChangeItemOldValue = function (_a) {
+    var change = _a.change;
+    var isUpdateOperation = change.operation === mdm_sdk_1.DCROperationTypes.EDITED;
+    var oldValue = (0, mdm_sdk_1.getAttributeValue)(change.oldValue);
+    var newValue = (0, mdm_sdk_1.getAttributeValue)(change.newValue);
+    var dataTypeDefinition = change.attributeType && (0, common_1.getDataTypeDefinition)(change.attributeType, newValue !== null && newValue !== void 0 ? newValue : oldValue);
+    var hasOldValue = !(0, ramda_1.isNil)(oldValue);
+    return (react_1.default.createElement("div", { className: ChangeItemEditor_module_css_1.default.attributeRow },
+        react_1.default.createElement(ChangeItemLabel_1.ChangeItemLabel, { change: change, className: ChangeItemEditor_module_css_1.default.labelColumn }),
+        react_1.default.createElement("div", { className: ChangeItemEditor_module_css_1.default.valueColumn }, isUpdateOperation && hasOldValue && (react_1.default.createElement("div", { className: ChangeItemEditor_module_css_1.default.previousValue },
+            react_1.default.createElement("span", { className: ChangeItemEditor_module_css_1.default.previousValueText },
+                react_1.default.createElement(DataTypeValue_1.DataTypeValue, { value: oldValue, dataTypeDefinition: dataTypeDefinition })),
+            react_1.default.createElement("span", { className: ChangeItemEditor_module_css_1.default.arrow },
+                react_1.default.createElement(East_1.default, null))))),
+        react_1.default.createElement("div", { className: ChangeItemEditor_module_css_1.default.revertColumn }),
+        react_1.default.createElement("div", { className: ChangeItemEditor_module_css_1.default.operationColumn })));
+};
+exports.ChangeItemOldValue = ChangeItemOldValue;

package/cjs/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/cjs/features/workflow/ChangeRequestEditor/components/ChangeItemEditor/DCRValueEditor.js

@@ -0,0 +1,44 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DCRValueEditor = void 0;
+var react_1 = __importStar(require("react"));
+var DCRValueEditorFactory_1 = require("./DCRValueEditorFactory");
+var ChangeItemEditor_module_css_1 = __importDefault(require("./ChangeItemEditor.module.css"));
+var DCRValueEditor = function (_a) {
+    var attributeType = _a.attributeType, value = _a.value, onChange = _a.onChange;
+    var handleChange = (0, react_1.useCallback)(function (updatedValue) {
+        onChange(attributeType.uri, updatedValue);
+    }, [attributeType.uri, onChange]);
+    return (react_1.default.createElement("div", { className: ChangeItemEditor_module_css_1.default.editor }, DCRValueEditorFactory_1.DCRValueEditorFactory.build({
+        attributeType: attributeType,
+        value: value,
+        onChange: handleChange
+    })));
+};
+exports.DCRValueEditor = DCRValueEditor;

package/cjs/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/cjs/features/workflow/ChangeRequestEditor/components/ChangeItemEditor/DCRValueEditorFactory.js

@@ -0,0 +1,38 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DCRValueEditorFactory = void 0;
+var react_1 = __importDefault(require("react"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var DataTypeValueEditor_1 = require("../../../../../DataTypeValueEditor");
+var attributesView_1 = require("../../../../../helpers/attributesView");
+var common_1 = require("../../../helpers/common");
+var RolesInput_1 = require("../../../../../RolesInput/RolesInput");
+var TagsInput_1 = require("../../../../../TagsInput/TagsInput");
+var DCRValueEditorFactory = /** @class */ (function () {
+    function DCRValueEditorFactory() {
+    }
+    DCRValueEditorFactory.build = function (_a) {
+        var attributeType = _a.attributeType, value = _a.value, onChange = _a.onChange;
+        var dcrValue = (0, mdm_sdk_1.getAttributeValue)(value);
+        switch (attributeType.uri) {
+            case mdm_sdk_1.EntityAttrTypes.roles.uri: {
+                return react_1.default.createElement(RolesInput_1.RolesInput, { value: (0, mdm_sdk_1.wrapInArrayIfNeeded)(dcrValue), onChange: onChange });
+            }
+            case mdm_sdk_1.EntityAttrTypes.tags.uri: {
+                return react_1.default.createElement(TagsInput_1.TagsInput, { value: (0, mdm_sdk_1.wrapInArrayIfNeeded)(dcrValue), onChange: onChange });
+            }
+            default: {
+                var dataTypeDefinition = (0, common_1.getDataTypeDefinition)(attributeType, dcrValue);
+                var editorValue = value && dataTypeDefinition
+                    ? (0, attributesView_1.attributeValueToEditorValue)(value, dataTypeDefinition)
+                    : null;
+                return (react_1.default.createElement(DataTypeValueEditor_1.DataTypeValueEditor, { fieldName: attributeType.uri, value: editorValue, dataTypeDefinition: dataTypeDefinition, onChange: onChange, fullWidth: true }));
+            }
+        }
+    };
+    return DCRValueEditorFactory;
+}());
+exports.DCRValueEditorFactory = DCRValueEditorFactory;

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

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

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

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SkeletonChangeItemEditorLoader = void 0;
+var react_1 = __importDefault(require("react"));
+var Skeleton_1 = __importDefault(require("@mui/material/Skeleton"));
+var ChangeItemEditor_module_css_1 = __importDefault(require("./ChangeItemEditor.module.css"));
+var SkeletonChangeItemEditorLoader = function () {
+    return (react_1.default.createElement("div", { className: ChangeItemEditor_module_css_1.default.attributeRow },
+        react_1.default.createElement("div", { className: ChangeItemEditor_module_css_1.default.labelColumn },
+            react_1.default.createElement(Skeleton_1.default, { variant: "text", width: "90%", height: 18, className: ChangeItemEditor_module_css_1.default.columnSkeleton })),
+        react_1.default.createElement("div", { className: ChangeItemEditor_module_css_1.default.valueColumn },
+            react_1.default.createElement(Skeleton_1.default, { variant: "text", height: 40, className: ChangeItemEditor_module_css_1.default.columnSkeleton })),
+        react_1.default.createElement("div", { className: ChangeItemEditor_module_css_1.default.revertColumn }),
+        react_1.default.createElement("div", { className: ChangeItemEditor_module_css_1.default.operationColumn },
+            react_1.default.createElement(Skeleton_1.default, { variant: "rectangular", width: 60, height: 20, className: ChangeItemEditor_module_css_1.default.columnSkeleton }))));
+};
+exports.SkeletonChangeItemEditorLoader = SkeletonChangeItemEditorLoader;

package/cjs/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/cjs/features/workflow/ChangeRequestEditor/components/ChangeItemEditor/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SkeletonChangeItemEditorLoader = exports.ChangeItemOldValue = exports.ChangeItemEditor = void 0;
+var ChangeItemEditor_1 = require("./ChangeItemEditor");
+Object.defineProperty(exports, "ChangeItemEditor", { enumerable: true, get: function () { return ChangeItemEditor_1.ChangeItemEditor; } });
+var ChangeItemOldValue_1 = require("./ChangeItemOldValue");
+Object.defineProperty(exports, "ChangeItemOldValue", { enumerable: true, get: function () { return ChangeItemOldValue_1.ChangeItemOldValue; } });
+var SkeletonChangeItemEditorLoader_1 = require("./SkeletonChangeItemEditorLoader");
+Object.defineProperty(exports, "SkeletonChangeItemEditorLoader", { enumerable: true, get: function () { return SkeletonChangeItemEditorLoader_1.SkeletonChangeItemEditorLoader; } });

package/cjs/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/cjs/features/workflow/ChangeRequestEditor/components/ChangeItemRow/ChangeItemRow.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChangeItemRow = void 0;
+var react_1 = __importDefault(require("react"));
+var ramda_1 = require("ramda");
+var classnames_1 = __importDefault(require("classnames"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var helpers_1 = require("../../helpers");
+var ChangeItemEditor_1 = require("../ChangeItemEditor");
+var ChangeItemRow_module_css_1 = __importDefault(require("./ChangeItemRow.module.css"));
+var ChangeItemRow = function (_a) {
+    var _b;
+    var item = _a.item, onValueChange = _a.onValueChange, entityInfo = _a.entityInfo;
+    if (!(0, ramda_1.has)('level', item)) {
+        return react_1.default.createElement("div", { className: ChangeItemRow_module_css_1.default.title }, item.label);
+    }
+    var change = item;
+    var isEditedOperation = change.operation === mdm_sdk_1.DCROperationTypes.EDITED;
+    var editable = (0, helpers_1.isEditableChange)(change, entityInfo);
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(ChangeItemRow_module_css_1.default.changeItemRow, (_b = {}, _b[ChangeItemRow_module_css_1.default.editableRow] = editable, _b)) },
+        isEditedOperation && react_1.default.createElement(ChangeItemEditor_1.ChangeItemOldValue, { change: change }),
+        react_1.default.createElement(ChangeItemEditor_1.ChangeItemEditor, { change: change, onValueChange: onValueChange, editable: editable })));
+};
+exports.ChangeItemRow = ChangeItemRow;

package/cjs/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);
+}
+module.exports = styles;

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

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

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChangeItemRow = void 0;
+var ChangeItemRow_1 = require("./ChangeItemRow");
+Object.defineProperty(exports, "ChangeItemRow", { enumerable: true, get: function () { return ChangeItemRow_1.ChangeItemRow; } });

package/cjs/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/cjs/features/workflow/ChangeRequestEditor/components/EntityChangesGroup/EntityChangesGroup.js

@@ -0,0 +1,61 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EntityChangesGroup = void 0;
+var react_1 = __importStar(require("react"));
+var Accordion_1 = __importDefault(require("@mui/material/Accordion"));
+var AccordionSummary_1 = __importDefault(require("@mui/material/AccordionSummary"));
+var AccordionDetails_1 = __importDefault(require("@mui/material/AccordionDetails"));
+var ExpandMore_1 = __importDefault(require("@mui/icons-material/ExpandMore"));
+var useChangesList_1 = require("../../../hooks/useChangesList");
+var DCREntityUriLink_1 = require("../../../DCREntityUriLink/DCREntityUriLink");
+var ChangeItemRow_1 = require("../ChangeItemRow/ChangeItemRow");
+var AttributesChangesContext_1 = require("../../../AttributesChanges/AttributesChangesContext");
+var common_1 = require("../../../helpers/common");
+var EntityChangesGroup_module_css_1 = __importDefault(require("./EntityChangesGroup.module.css"));
+var EntityChangesGroup = function (_a) {
+    var task = _a.task, dcr = _a.dcr, entityInfo = _a.entityInfo, relationsInfo = _a.relationsInfo;
+    var dcrUri = (0, common_1.getDCRUri)(task.objectURIs);
+    var _b = dcr || {}, changes = _b.changes, objectsInfo = _b.objectsInfo;
+    var changesList = (0, useChangesList_1.useChangesList)({
+        changes: changes,
+        entityInfo: entityInfo,
+        relationsInfo: relationsInfo
+    });
+    var handleValueChange = (0, react_1.useCallback)(function () {
+        // TODO: Implement value change logic
+    }, []);
+    return (react_1.default.createElement(AttributesChangesContext_1.AttributesChangesContext.Provider, { value: objectsInfo },
+        react_1.default.createElement(Accordion_1.default, { className: EntityChangesGroup_module_css_1.default.entityGroup, defaultExpanded: true, "data-reltio-id": "entity-changes-group" },
+            react_1.default.createElement(AccordionSummary_1.default, { expandIcon: react_1.default.createElement(ExpandMore_1.default, null), className: EntityChangesGroup_module_css_1.default.entityHeader, classes: {
+                    content: EntityChangesGroup_module_css_1.default.accordionContent
+                } },
+                react_1.default.createElement(DCREntityUriLink_1.DCREntityUriLink, { entityInfo: entityInfo, changes: changes, dcrUri: dcrUri, className: EntityChangesGroup_module_css_1.default.entityTitle })),
+            react_1.default.createElement(AccordionDetails_1.default, { className: EntityChangesGroup_module_css_1.default.attributesList }, changesList.map(function (item, index) { return (react_1.default.createElement(ChangeItemRow_1.ChangeItemRow, { key: "".concat('label' in item ? 'title' : 'change', "-").concat(index), item: item, onValueChange: handleValueChange, entityInfo: entityInfo })); })))));
+};
+exports.EntityChangesGroup = EntityChangesGroup;