@reltio/components 1.4.2202 → 1.4.2204

package/features/activity-log/types.js

@@ -42,3 +42,9 @@ export var DeltaTypes;
     DeltaTypes["ATTRIBUTE_ADDED"] = "added";
     DeltaTypes["ATTRIBUTE_REMOVED"] = "deleted";
 })(DeltaTypes || (DeltaTypes = {}));
+export var MemberDeltaTypes;
+(function (MemberDeltaTypes) {
+    MemberDeltaTypes["MEMBER_CHANGED"] = "edited";
+    MemberDeltaTypes["MEMBER_ADDED"] = "added";
+    MemberDeltaTypes["MEMBER_REMOVED"] = "deleted";
+})(MemberDeltaTypes || (MemberDeltaTypes = {}));

package/features/workflow/ChangeRequestEditor/ChangeRequestEditor.js

@@ -5,6 +5,7 @@ import Typography from '@mui/material/Typography';
 import { addLineIdToValue } from './helpers/helpers';
 import SvgSuggestedChanges from '../../../icons/SuggestedChanges';
 import { EntityChangesGroup, SkeletonEntityChangesGroupLoader } from './components/EntityChangesGroup';
+import { ChangeRequestEditorProvider } from './context';
 import styles from './ChangeRequestEditor.module.css';
 export var ChangeRequestEditor = function (_a) {
     var dcr = _a.dcr, task = _a.task, groupedObjects = _a.groupedObjects;
@@ -22,5 +23,5 @@ export var ChangeRequestEditor = function (_a) {
             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: enrichedDCR })); })) : (React.createElement(SkeletonEntityChangesGroupLoader, null))));
+        dcrLoaded ? (React.createElement(ChangeRequestEditorProvider, null, groupedObjects.map(function (object, index) { return (React.createElement(EntityChangesGroup, { key: "entity-".concat(index), entityInfo: object.entity, relationsInfo: object.relations, task: task, dcr: enrichedDCR })); }))) : (React.createElement(SkeletonEntityChangesGroupLoader, null))));
 };

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

@@ -3,6 +3,9 @@ import { Diff } from '../../../types';
 type Props = {
     change: Diff;
     editable?: boolean;
+    classes?: {
+        rejectButton?: string;
+    };
 };
-export declare const ChangeItemEditor: ({ change, editable }: Props) => React.JSX.Element;
+export declare const ChangeItemEditor: ({ change, editable, classes }: Props) => React.JSX.Element;
 export {};

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

@@ -1,32 +1,32 @@
+import React, { useMemo } from 'react';
 import { isNil } from 'ramda';
-import React, { useCallback, useMemo } from 'react';
-import { useContextSelector } from '@fluentui/react-context-selector';
+import classnames from 'classnames';
+import ReplayIcon from '@mui/icons-material/Replay';
+import Button from '@mui/material/Button';
+import i18n from 'ui-i18n';
 import { DCROperationTypes, EntityAttrTypes, getAttributeValue } from '@reltio/mdm-sdk';
 import { useMdmMetadata } from '../../../../../contexts/MdmModuleContext';
 import { DataTypeValue } from '../../../../../DataTypeValue';
 import { getDataTypeDefinition, prepareRolesOrTagsValue } from '../../../helpers/common';
 import { OperationChip } from '../../../OperationChip';
 import { RelationEntityLink } from '../../../RelationEntityLink';
-import { ChangeRequestEditorContext } from '../../context';
-import { ChangeItemLabel } from './ChangeItemLabel';
-import { DCRValueEditor } from './DCRValueEditor';
-import { extractLineIds } from '../../../helpers/merge';
+import { ChangeItemLabel } from '../ChangeItemLabel';
+import { DCRValueEditor } from '../DCRValueEditor';
+import { StatusChips } from '../StatusChips';
+import { SmallIconButton } from '../../../../../SmallIconButton';
+import { useChangeRequestEditor } from '../../hooks/useChangeRequestEditor';
 import styles from './ChangeItemEditor.module.css';
 export var ChangeItemEditor = function (_a) {
     var _b, _c, _d;
-    var change = _a.change, _e = _a.editable, editable = _e === void 0 ? true : _e;
+    var change = _a.change, _e = _a.editable, editable = _e === void 0 ? true : _e, classes = _a.classes;
     var metadata = useMdmMetadata();
-    var lineIds = change.lineIds || extractLineIds(change === null || change === void 0 ? void 0 : change.newValue);
-    var lineData = useContextSelector(ChangeRequestEditorContext, function (context) { return lineIds && context.getLineData(lineIds[0]); });
-    var updateChange = useContextSelector(ChangeRequestEditorContext, function (context) { return context.updateChange; });
-    var onValueChange = useCallback(function (newValue) {
-        updateChange(lineIds, typeof newValue === 'object' && 'value' in newValue ? newValue : { value: newValue });
-    }, [lineIds, updateChange]);
+    var _f = useChangeRequestEditor({ change: change }), handleChange = _f.handleChange, handleReject = _f.handleReject, handleRevert = _f.handleRevert, lineData = _f.lineData, isLineRejected = _f.isLineRejected, isParentLineRejected = _f.isParentLineRejected, isUpdated = _f.isUpdated, hasChangeId = _f.hasChangeId;
     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(isNil(lineData === null || lineData === void 0 ? void 0 : lineData.value) ? change.newValue : lineData.value);
+    var currentNewValue = !isNil(lineData === null || lineData === void 0 ? void 0 : lineData.value) && !isParentLineRejected ? lineData.value : change.newValue;
+    var newValue = getAttributeValue(currentNewValue);
     var hasNewValue = !isNil(newValue);
     var dataTypeDefinition = useMemo(function () {
         return change.attributeType && getDataTypeDefinition(change.attributeType, newValue || oldValue);
@@ -40,12 +40,22 @@ export var ChangeItemEditor = function (_a) {
             ? 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 },
+    var showUndoButton = (isUpdated || isLineRejected) && !isParentLineRejected;
+    var showRejectButton = !isLineRejected &&
+        !isUpdated &&
+        !isParentLineRejected &&
+        hasChangeId &&
+        !(change.isReferenceSubAttribute && !editable);
+    var showStatusChips = !isParentLineRejected;
+    var isRejected = isLineRejected || isParentLineRejected;
+    return (React.createElement("div", { className: styles.attributeRow, "data-reltio-id": "change-item-editor" },
         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: isNil(lineData === null || lineData === void 0 ? void 0 : lineData.value) ? change.newValue : lineData.value, onChange: onValueChange })) : (hasNewValue && (React.createElement("div", { className: styles.value },
+            shouldShowValueEditor ? (React.createElement(DCRValueEditor, { attributeType: change.attributeType, value: currentNewValue, onChange: handleChange, disabled: !editable || isRejected })) : (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" })))));
+        React.createElement("div", { className: styles.revertColumn }, showUndoButton && (React.createElement(SmallIconButton, { icon: ReplayIcon, onClick: handleRevert, className: styles.revertButton, title: i18n.text('Undo'), size: "S" }))),
+        React.createElement("div", { className: styles.operationColumn }, shouldShowOperationChip && (React.createElement(OperationChip, { operation: change.operation, size: "small", variant: "outlined" }))),
+        React.createElement("div", { className: styles.statusColumn }, showStatusChips && React.createElement(StatusChips, { showUpdatedChip: isUpdated, showRejectedChip: isLineRejected })),
+        React.createElement("div", { className: styles.rejectColumn }, showRejectButton && (React.createElement(Button, { onClick: handleReject, className: classnames(styles.rejectButton, classes === null || classes === void 0 ? void 0 : classes.rejectButton), title: i18n.text('Reject'), size: "medium" }, i18n.text('Reject'))))));
 };

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

@@ -1,9 +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-"};
+const styles = {"attributeRow":"ChangeItemEditor-attributeRow--bITG5","labelColumn":"ChangeItemEditor-labelColumn--6B4w4","valueColumn":"ChangeItemEditor-valueColumn--q9456","revertColumn":"ChangeItemEditor-revertColumn--T5mVE","operationColumn":"ChangeItemEditor-operationColumn--me-4D","statusColumn":"ChangeItemEditor-statusColumn--GEF2N","rejectColumn":"ChangeItemEditor-rejectColumn--ap8hp","previousValue":"ChangeItemEditor-previousValue--lTOVp","previousValueText":"ChangeItemEditor-previousValueText--gAnge","arrow":"ChangeItemEditor-arrow--IXZ6i","value":"ChangeItemEditor-value--GxSUf","columnSkeleton":"ChangeItemEditor-columnSkeleton---iGmr","relationEntityLink":"ChangeItemEditor-relationEntityLink--Vr7Z-","rejectButton":"ChangeItemEditor-rejectButton--cEIBC","revertButton":"ChangeItemEditor-revertButton--hSt3m"};
 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}`;
+    style.innerHTML = `.ChangeItemEditor-attributeRow--bITG5{align-items:center;display:flex;font-size:16px;gap:16px;max-width:1000px;min-height:37px}.ChangeItemEditor-labelColumn--6B4w4{box-sizing:border-box;min-height:21px;width:170px}.ChangeItemEditor-valueColumn--q9456{display:flex;flex:1;flex-direction:column;gap:4px}.ChangeItemEditor-revertColumn--T5mVE{align-items:flex-start;display:flex;margin-left:-8px;width:16px}.ChangeItemEditor-operationColumn--me-4D{align-items:flex-start;display:flex;width:84px}.ChangeItemEditor-statusColumn--GEF2N{align-items:flex-start;display:flex;width:57px}.ChangeItemEditor-rejectColumn--ap8hp{align-items:flex-start;display:flex;width:80px}.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-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}.ChangeItemEditor-rejectButton--cEIBC{background-color:#eb5757;border-radius:8px;color:#fff}.ChangeItemEditor-rejectButton--cEIBC:hover{background-color:rgba(235,87,87,.8)}.ChangeItemEditor-revertButton--hSt3m{color:var(--mui-palette-text-secondary)}`;
     head.appendChild(style);
 }
 export default styles;

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

@@ -4,7 +4,7 @@ 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 { ChangeItemLabel } from '../ChangeItemLabel';
 import styles from './ChangeItemEditor.module.css';
 export var ChangeItemOldValue = function (_a) {
     var change = _a.change;

package/features/workflow/ChangeRequestEditor/components/{ChangeItemEditor → ChangeItemLabel}/ChangeItemLabel.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import classnames from 'classnames';
 import { useCssVariableStyles } from '../../../../../hooks/useCssVariableStyles';
-import styles from './ChangeItemEditor.module.css';
+import styles from './ChangeItemLabel.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;

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

@@ -0,0 +1,9 @@
+const styles = {"changeLabel":"ChangeItemLabel-changeLabel--L-2ks"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.ChangeItemLabel-changeLabel--L-2ks{color:var(--mui-palette-text-secondary);font-size:14px;font-weight:400;letter-spacing:.24px;padding-left:calc(var(--level, 0)*16px)}`;
+    head.appendChild(style);
+}
+export default styles;

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

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

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

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

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

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

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

@@ -1,20 +1,32 @@
 import classnames from 'classnames';
-import { has } from 'ramda';
 import React from 'react';
+import { useContextSelector } from '@fluentui/react-context-selector';
 import { DCROperationTypes } from '@reltio/mdm-sdk';
 import { isEditableChange } from '../../helpers/helpers';
+import { ChangeRequestEditorContext } from '../../context';
 import { ChangeItemEditor, ChangeItemOldValue } from '../ChangeItemEditor';
+import { extractLineIds } from '../../../helpers/merge';
 import styles from './ChangeItemRow.module.css';
 export var ChangeItemRow = function (_a) {
     var _b;
-    var item = _a.item, entityInfo = _a.entityInfo;
-    if (!has('level', item)) {
-        return React.createElement("div", { className: styles.title }, item.label);
-    }
-    var change = item;
+    var change = _a.change, entityInfo = _a.entityInfo;
+    var lineIds = change.lineIds || extractLineIds(change === null || change === void 0 ? void 0 : change.newValue);
+    var isParentLineRejected = useContextSelector(ChangeRequestEditorContext, function (context) {
+        return context.getIsParentLineRejected(lineIds === null || lineIds === void 0 ? void 0 : lineIds[0]);
+    });
+    var isLineRejected = useContextSelector(ChangeRequestEditorContext, function (context) {
+        return context.getIsLineRejected(lineIds === null || lineIds === void 0 ? void 0 : lineIds[0]);
+    });
+    var isUpdated = useContextSelector(ChangeRequestEditorContext, function (context) {
+        return context.getIsLineUpdated(lineIds === null || lineIds === void 0 ? void 0 : lineIds[0]);
+    });
     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)) },
+    return (React.createElement("div", { className: classnames(styles.changeItemRow, (_b = {},
+            _b[styles.editableRow] = editable,
+            _b[styles.changedRow] = isUpdated,
+            _b[styles.rejectedRow] = isLineRejected || isParentLineRejected,
+            _b)) },
         isEditedOperation && React.createElement(ChangeItemOldValue, { change: change }),
-        React.createElement(ChangeItemEditor, { change: change, editable: editable })));
+        React.createElement(ChangeItemEditor, { change: change, editable: editable, classes: { rejectButton: styles.rejectButton } })));
 };

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

@@ -1,9 +1,9 @@
-const styles = {"changeItemRow":"ChangeItemRow-changeItemRow--oF9hn","editableRow":"ChangeItemRow-editableRow--ZQzGk","title":"ChangeItemRow-title--G8iV2"};
+const styles = {"changeItemRow":"ChangeItemRow-changeItemRow--oF9hn","rejectButton":"ChangeItemRow-rejectButton--iNbfM","changedRow":"ChangeItemRow-changedRow--32zBa","rejectedRow":"ChangeItemRow-rejectedRow--RqKQc"};
 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}`;
+    style.innerHTML = `.ChangeItemRow-changeItemRow--oF9hn{display:flex;flex-direction:column;gap:8px;transition:background-color .2s ease}.ChangeItemRow-rejectButton--iNbfM{opacity:0}.ChangeItemRow-changeItemRow--oF9hn:hover{background:var(--mui-palette-action-hover)}.ChangeItemRow-changeItemRow--oF9hn:hover .ChangeItemRow-rejectButton--iNbfM{opacity:1}.ChangeItemRow-changedRow--32zBa{background-color:#e5eff7}.ChangeItemRow-changedRow--32zBa:hover{background-color:rgba(229,239,247,.8)}.ChangeItemRow-rejectedRow--RqKQc{background-color:#f6e7e7}.ChangeItemRow-rejectedRow--RqKQc:hover{background-color:hsla(0,45%,94%,.8)}`;
     head.appendChild(style);
 }
 export default styles;

package/features/workflow/ChangeRequestEditor/components/{ChangeItemEditor → DCRValueEditor}/DCRValueEditor.d.ts

@@ -5,6 +5,7 @@ type Props = {
     attributeType: AttributeType;
     value: LineDataValue | ChangeValue;
     onChange: (value: SimpleAttributeValue | string[] | PrimitiveValue) => void;
+    disabled?: boolean;
 };
-export declare const DCRValueEditor: ({ attributeType, value, onChange }: Props) => React.JSX.Element;
+export declare const DCRValueEditor: ({ attributeType, value, onChange, disabled }: Props) => React.JSX.Element;
 export {};

package/features/workflow/ChangeRequestEditor/components/{ChangeItemEditor → DCRValueEditor}/DCRValueEditor.js

@@ -1,11 +1,12 @@
 import React from 'react';
-import { DCRValueEditorFactory } from './DCRValueEditorFactory';
-import styles from './ChangeItemEditor.module.css';
+import { DCRValueEditorFactory } from '../DCRValueEditorFactory';
+import styles from './DCRValueEditor.module.css';
 export var DCRValueEditor = function (_a) {
-    var attributeType = _a.attributeType, value = _a.value, onChange = _a.onChange;
+    var attributeType = _a.attributeType, value = _a.value, onChange = _a.onChange, _b = _a.disabled, disabled = _b === void 0 ? false : _b;
     return (React.createElement("div", { className: styles.editor }, DCRValueEditorFactory.build({
         attributeType: attributeType,
         value: value,
-        onChange: onChange
+        onChange: onChange,
+        disabled: disabled
     })));
 };

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

@@ -0,0 +1,9 @@
+const styles = {"editor":"DCRValueEditor-editor--H9Gz7"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.DCRValueEditor-editor--H9Gz7{min-height:40px}`;
+    head.appendChild(style);
+}
+export default styles;

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

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

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

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

package/features/workflow/ChangeRequestEditor/components/{ChangeItemEditor → DCRValueEditorFactory}/DCRValueEditorFactory.d.ts

@@ -6,8 +6,9 @@ type Props = {
     value: LineDataValue | ChangeValue;
     onChange: (value: SimpleAttributeValue | string[] | PrimitiveValue) => void;
     dataTypeDefinition?: DataTypeDefinition;
+    disabled?: boolean;
 };
 export declare class DCRValueEditorFactory {
-    static build({ attributeType, value, onChange }: Props): React.JSX.Element;
+    static build({ attributeType, value, onChange, disabled }: Props): React.JSX.Element;
 }
 export {};

package/features/workflow/ChangeRequestEditor/components/{ChangeItemEditor → DCRValueEditorFactory}/DCRValueEditorFactory.js

@@ -10,17 +10,17 @@ var DCRValueEditorFactory = /** @class */ (function () {
     function DCRValueEditorFactory() {
     }
     DCRValueEditorFactory.build = function (_a) {
-        var attributeType = _a.attributeType, value = _a.value, onChange = _a.onChange;
+        var attributeType = _a.attributeType, value = _a.value, onChange = _a.onChange, _b = _a.disabled, disabled = _b === void 0 ? false : _b;
         var dcrValue = getAttributeValue(value);
         switch (attributeType.uri) {
             case EntityAttrTypes.roles.uri: {
                 var handleChange = function (values) {
                     onChange((values === null || values === void 0 ? void 0 : values.map(prop('value'))) || []);
                 };
-                return React.createElement(RolesInput, { value: wrapInArrayIfNeeded(dcrValue), onChange: handleChange });
+                return (React.createElement(RolesInput, { value: wrapInArrayIfNeeded(dcrValue), onChange: handleChange, disabled: disabled }));
             }
             case EntityAttrTypes.tags.uri: {
-                return React.createElement(TagsInput, { value: wrapInArrayIfNeeded(dcrValue), onChange: onChange });
+                return (React.createElement(TagsInput, { value: wrapInArrayIfNeeded(dcrValue), onChange: onChange, disabled: disabled }));
             }
             default: {
                 var dataTypeDefinition = getDataTypeDefinition(attributeType, dcrValue);
@@ -31,7 +31,7 @@ var DCRValueEditorFactory = /** @class */ (function () {
                     var valueConvertedToAttributeValue = editorValueToAttributeValue(attributeType, value);
                     onChange(valueConvertedToAttributeValue);
                 };
-                return (React.createElement(DataTypeValueEditor, { fieldName: attributeType.uri, value: editorValue, dataTypeDefinition: dataTypeDefinition, onChange: handleChange, fullWidth: true }));
+                return (React.createElement(DataTypeValueEditor, { fieldName: attributeType.uri, value: editorValue, dataTypeDefinition: dataTypeDefinition, onChange: handleChange, fullWidth: true, disabled: disabled }));
             }
         }
     };

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

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

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

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

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

@@ -8,6 +8,7 @@ import { DCREntityUriLink } from '../../../DCREntityUriLink/DCREntityUriLink';
 import { ChangeItemRow } from '../ChangeItemRow/ChangeItemRow';
 import { AttributesChangesContext } from '../../../AttributesChanges/AttributesChangesContext';
 import { getDCRUri } from '../../../helpers/common';
+import { isDiffChange } from '../../helpers/helpers';
 import styles from './EntityChangesGroup.module.css';
 export var EntityChangesGroup = function (_a) {
     var task = _a.task, dcr = _a.dcr, entityInfo = _a.entityInfo, relationsInfo = _a.relationsInfo;
@@ -24,5 +25,7 @@ export var EntityChangesGroup = function (_a) {
                     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, entityInfo: entityInfo })); })))));
+            React.createElement(AccordionDetails, { className: styles.attributesList }, changesList.map(function (item, index) {
+                return isDiffChange(item) ? (React.createElement(ChangeItemRow, { key: "change-".concat(index), change: item, entityInfo: entityInfo })) : (React.createElement("div", { key: "title-".concat(index), className: styles.titleChangeItem }, item.label));
+            })))));
 };

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

@@ -1,9 +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"};
+const styles = {"entityGroup":"EntityChangesGroup-entityGroup--KmWaa","entityHeader":"EntityChangesGroup-entityHeader--hf8-J","entityTitle":"EntityChangesGroup-entityTitle--caeZE","accordionContent":"EntityChangesGroup-accordionContent--N7C6Y","attributesList":"EntityChangesGroup-attributesList--7Tmk6","titleChangeItem":"EntityChangesGroup-titleChangeItem--4s7tA","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}`;
+    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;min-width:750px;padding:16px}.EntityChangesGroup-titleChangeItem--4s7tA{color:var(--mui-palette-text-primary);font-size:14px;font-weight:600;margin:0 0 12px}.EntityChangesGroup-skeletonEntityGroupDisabled--qFGAK.Mui-disabled{background-color:#f7f7f7}`;
     head.appendChild(style);
 }
 export default styles;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+type Props = {
+    showUpdatedChip: boolean;
+    showRejectedChip: boolean;
+};
+export declare const StatusChips: ({ showUpdatedChip, showRejectedChip }: Props) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import classnames from 'classnames';
+import i18n from 'ui-i18n';
+import Chip from '@mui/material/Chip';
+import styles from './StatusChips.module.css';
+export var StatusChips = function (_a) {
+    var showUpdatedChip = _a.showUpdatedChip, showRejectedChip = _a.showRejectedChip;
+    if (!showUpdatedChip && !showRejectedChip) {
+        return null;
+    }
+    var label = showUpdatedChip ? i18n.text('Updated') : i18n.text('Rejected');
+    var chipClass = showUpdatedChip ? styles.updatedChip : styles.rejectedChip;
+    return (React.createElement(Chip, { label: label, size: "small", color: "primary", variant: "outlined", className: classnames(styles.statusChip, chipClass), "data-testid": "status-chips" }));
+};

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

@@ -0,0 +1,9 @@
+const styles = {"statusChip":"StatusChips-statusChip--ws380","updatedChip":"StatusChips-updatedChip--5mTfA","rejectedChip":"StatusChips-rejectedChip--EHx3y"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.StatusChips-statusChip--ws380{color:#fff;font-size:10px;height:20px}.StatusChips-updatedChip--5mTfA{background:#2f80ed;border:1px solid rgba(0,114,206,.3)}.StatusChips-rejectedChip--EHx3y{background:#eb5757;border:1px solid rgba(235,87,87,.3)}`;
+    head.appendChild(style);
+}
+export default styles;

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

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

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

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

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

@@ -1,5 +1,5 @@
-import { SimpleAttributeValue, PrimitiveValue } from '@reltio/mdm-sdk';
 import React from 'react';
+import { SimpleAttributeValue, PrimitiveValue } from '@reltio/mdm-sdk';
 export type LineDataValue = SimpleAttributeValue | {
     value: string[] | PrimitiveValue;
 };
@@ -12,6 +12,9 @@ type ChangeRequestEditorContextType = {
     getLineData: (lineId: string) => LineData | undefined;
     rejectChange: (lineIds: string[]) => void;
     revertChangeUpdateOrReject: (lineIds: string[]) => void;
+    getIsParentLineRejected: (lineId: string) => boolean;
+    getIsLineRejected: (lineId: string) => boolean;
+    getIsLineUpdated: (lineId: string) => boolean;
 };
 export declare const ChangeRequestEditorContext: import("@fluentui/react-context-selector").Context<ChangeRequestEditorContextType>;
 export declare const ChangeRequestEditorProvider: ({ children }: {

package/features/workflow/ChangeRequestEditor/context/index.js

@@ -1,10 +1,14 @@
-import { createContext } from '@fluentui/react-context-selector';
 import React, { useCallback, useState } from 'react';
+import { isNil } from 'ramda';
+import { createContext } from '@fluentui/react-context-selector';
 export var ChangeRequestEditorContext = createContext({
     updateChange: undefined,
     getLineData: undefined,
     rejectChange: undefined,
-    revertChangeUpdateOrReject: undefined
+    revertChangeUpdateOrReject: undefined,
+    getIsParentLineRejected: undefined,
+    getIsLineRejected: undefined,
+    getIsLineUpdated: undefined
 });
 export var ChangeRequestEditorProvider = function (_a) {
     var children = _a.children;
@@ -31,7 +35,11 @@ export var ChangeRequestEditorProvider = function (_a) {
         setLineDataMap(function (prevMap) {
             var newMap = new Map(prevMap);
             lineIds.forEach(function (id) {
-                newMap.delete(id);
+                newMap.forEach(function (_, key) {
+                    if (key.startsWith("".concat(id, "/")) || key === id) {
+                        newMap.delete(key);
+                    }
+                });
             });
             return newMap;
         });
@@ -39,11 +47,29 @@ export var ChangeRequestEditorProvider = function (_a) {
     var getLineData = useCallback(function (lineId) {
         return lineDataMap.get(lineId);
     }, [lineDataMap]);
+    var getIsLineRejected = useCallback(function (lineId) {
+        var _a;
+        return ((_a = lineDataMap.get(lineId)) === null || _a === void 0 ? void 0 : _a.isRejected) || false;
+    }, [lineDataMap]);
+    var getIsParentLineRejected = useCallback(function (lineId) {
+        var lineIdParts = (lineId || '').split('/');
+        var possibleRejectedIds = Array.from({ length: lineIdParts.length - 1 }).reduce(function (ids, _, index) {
+            return ids.concat(lineIdParts.slice(0, index + 1).join('/'));
+        }, []);
+        return possibleRejectedIds.some(function (lineId) { var _a; return (_a = lineDataMap.get(lineId)) === null || _a === void 0 ? void 0 : _a.isRejected; });
+    }, [lineDataMap]);
+    var getIsLineUpdated = useCallback(function (lineId) {
+        var _a;
+        return !isNil((_a = lineDataMap.get(lineId)) === null || _a === void 0 ? void 0 : _a.value);
+    }, [lineDataMap]);
     var contextValue = {
         updateChange: updateChange,
         getLineData: getLineData,
         rejectChange: rejectChange,
-        revertChangeUpdateOrReject: revertChangeUpdateOrReject
+        revertChangeUpdateOrReject: revertChangeUpdateOrReject,
+        getIsParentLineRejected: getIsParentLineRejected,
+        getIsLineRejected: getIsLineRejected,
+        getIsLineUpdated: getIsLineUpdated
     };
     return React.createElement(ChangeRequestEditorContext.Provider, { value: contextValue }, children);
 };

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

@@ -1,4 +1,5 @@
 import { DCRChanges, GroupedObjectsInfo, EnrichedDCRChanges } from '@reltio/mdm-sdk';
-import { Diff } from '../../types';
+import { Diff, Title } from '../../types';
 export declare const isEditableChange: (change: Diff, entityInfo: GroupedObjectsInfo["entity"]) => boolean;
 export declare const addLineIdToValue: (data: DCRChanges) => EnrichedDCRChanges;
+export declare const isDiffChange: (change: Diff | Title) => change is Diff;

package/features/workflow/ChangeRequestEditor/helpers/helpers.js

@@ -9,7 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { clone, isNil } from 'ramda';
+import { clone, has, isNil } from 'ramda';
 import { DCROperationTypes, DCRTypes, isRelationTypeUri } from '@reltio/mdm-sdk';
 export var isEditableChange = function (change, entityInfo) {
     var _a;
@@ -98,3 +98,6 @@ export var addLineIdToValue = function (data) {
     }
     return enrichedData;
 };
+export var isDiffChange = function (change) {
+    return has('level', change);
+};

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

@@ -0,0 +1,16 @@
+import { PrimitiveValue, SimpleAttributeValue } from '@reltio/mdm-sdk';
+import { Diff } from '../../types';
+type Props = {
+    change: Diff;
+};
+export declare const useChangeRequestEditor: ({ change }: Props) => {
+    handleChange: (newValue: SimpleAttributeValue | string[] | PrimitiveValue) => void;
+    handleReject: () => void;
+    handleRevert: () => void;
+    lineData: import("../context").LineData;
+    isLineRejected: boolean;
+    isParentLineRejected: boolean;
+    isUpdated: boolean;
+    hasChangeId: boolean;
+};
+export {};

package/features/workflow/ChangeRequestEditor/hooks/useChangeRequestEditor.js

@@ -0,0 +1,38 @@
+import { useCallback } from 'react';
+import { useContextSelector } from '@fluentui/react-context-selector';
+import { ChangeRequestEditorContext } from '../context';
+import { extractLineIds } from '../../helpers/merge';
+var emptyLineIds = [];
+export var useChangeRequestEditor = function (_a) {
+    var change = _a.change;
+    var lineIds = change.lineIds || extractLineIds(change === null || change === void 0 ? void 0 : change.newValue) || emptyLineIds;
+    var lineData = useContextSelector(ChangeRequestEditorContext, function (context) { return context.getLineData(lineIds[0]); });
+    var updateChange = useContextSelector(ChangeRequestEditorContext, function (context) { return context.updateChange; });
+    var rejectChange = useContextSelector(ChangeRequestEditorContext, function (context) { return context.rejectChange; });
+    var revertChangeUpdateOrReject = useContextSelector(ChangeRequestEditorContext, function (context) { return context.revertChangeUpdateOrReject; });
+    var isParentLineRejected = useContextSelector(ChangeRequestEditorContext, function (context) {
+        return context.getIsParentLineRejected(lineIds[0]);
+    });
+    var isUpdated = useContextSelector(ChangeRequestEditorContext, function (context) { return context.getIsLineUpdated(lineIds[0]); });
+    var isLineRejected = lineData === null || lineData === void 0 ? void 0 : lineData.isRejected;
+    var hasChangeId = lineIds.length > 0;
+    var handleChange = useCallback(function (newValue) {
+        updateChange(lineIds, typeof newValue === 'object' && 'value' in newValue ? newValue : { value: newValue });
+    }, [lineIds, updateChange]);
+    var handleReject = useCallback(function () {
+        rejectChange(lineIds);
+    }, [rejectChange, lineIds]);
+    var handleRevert = useCallback(function () {
+        revertChangeUpdateOrReject(lineIds);
+    }, [revertChangeUpdateOrReject, lineIds]);
+    return {
+        handleChange: handleChange,
+        handleReject: handleReject,
+        handleRevert: handleRevert,
+        lineData: lineData,
+        isLineRejected: isLineRejected,
+        isParentLineRejected: isParentLineRejected,
+        isUpdated: isUpdated,
+        hasChangeId: hasChangeId
+    };
+};

package/features/workflow/OperationChip/OperationChip.js

@@ -5,5 +5,5 @@ 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) }));
+    return (React.createElement(Chip, { variant: variant, label: getOperationLabel(operation), size: size, className: classnames(styles.chip, styles[operation], className), classes: { label: styles.label } }));
 };

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

@@ -1,9 +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"};
+const styles = {"chip":"OperationChip-chip--1GvDu","label":"OperationChip-label--OCDk2","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}`;
+    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}.OperationChip-label--OCDk2:first-letter{text-transform:uppercase}.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;