@reltio/components 1.4.2243 → 1.4.2244

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

@@ -0,0 +1,49 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import i18n from 'ui-i18n';
+import CloudUploadIcon from '@mui/icons-material/CloudUpload';
+import { DCROperationTypes, getImageAttributeThumbnailUrl } from '@reltio/mdm-sdk';
+import { SmallIconButton } from '../../../../../SmallIconButton';
+import { UploadImageDialog } from '../../../../../UploadImageDialog';
+export var DCRImageEditor = function (_a) {
+    var change = _a.change, onUpload = _a.onUpload, disabled = _a.disabled;
+    var attributeType = change.attributeType;
+    var isDeleted = change.operation === DCROperationTypes.DELETED;
+    var thumbnailUrl = useMemo(function () {
+        var _a, _b;
+        var innerChange = (_a = change.attributeValue) === null || _a === void 0 ? void 0 : _a.value;
+        var imageSource = (_b = innerChange === null || innerChange === void 0 ? void 0 : innerChange.newValue) !== null && _b !== void 0 ? _b : change.attributeValue;
+        return getImageAttributeThumbnailUrl((imageSource !== null && imageSource !== void 0 ? imageSource : {}));
+    }, [change.attributeValue]);
+    var _b = useState(false), isDialogOpen = _b[0], setIsDialogOpen = _b[1];
+    var _c = useState(null), uploadedThumbnailUrl = _c[0], setUploadedThumbnailUrl = _c[1];
+    var toggleDialog = useCallback(function () {
+        setIsDialogOpen(function (prev) { return !prev; });
+    }, []);
+    var handleUpload = useCallback(function (image) {
+        var imageValue = {};
+        var subAttributes = (attributeType === null || attributeType === void 0 ? void 0 : attributeType.attributes) || [];
+        var _loop_1 = function (key) {
+            if (subAttributes.some(function (_a) {
+                var name = _a.name;
+                return name === key;
+            })) {
+                imageValue[key] = [{ value: image[key] }];
+            }
+        };
+        for (var key in image) {
+            _loop_1(key);
+        }
+        onUpload({ value: imageValue });
+        setUploadedThumbnailUrl(image.CdnUrlThumbnail || image.CdnUrl || null);
+    }, [attributeType, onUpload]);
+    var isDisabled = disabled || isDeleted;
+    var displayUrl = uploadedThumbnailUrl || thumbnailUrl;
+    return (React.createElement(React.Fragment, null,
+        displayUrl ? (React.createElement("img", { src: displayUrl, alt: "", style: {
+                maxWidth: 80,
+                maxHeight: 80,
+                objectFit: 'cover',
+                cursor: isDisabled ? 'default' : 'pointer'
+            }, onClick: isDisabled ? undefined : toggleDialog })) : (React.createElement(SmallIconButton, { icon: CloudUploadIcon, onClick: toggleDialog, title: i18n.text('Upload image'), disabled: isDisabled })),
+        React.createElement(UploadImageDialog, { open: isDialogOpen, onUpload: handleUpload, onClose: toggleDialog })));
+};

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

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

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

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

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import { AttributeType, ChangeValue, DataTypeDefinition, PrimitiveValue, SimpleAttributeValue } from '@reltio/mdm-sdk';
-import { LineDataValue } from '../../../types';
+import { type AttributeType, type ChangeValue, type DataTypeDefinition, type PrimitiveValue, type SimpleAttributeValue } from '@reltio/mdm-sdk';
+import type { LineDataValue } from '../../../types';
 type Props = {
     attributeType: AttributeType;
     value: LineDataValue | ChangeValue;

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

@@ -17,10 +17,10 @@ var DCRValueEditorFactory = /** @class */ (function () {
                 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, disabled: disabled }));
+                return (React.createElement(RolesInput, { value: dcrValue ? wrapInArrayIfNeeded(dcrValue) : [], onChange: handleChange, disabled: disabled }));
             }
             case EntityAttrTypes.tags.uri: {
-                return (React.createElement(TagsInput, { value: wrapInArrayIfNeeded(dcrValue), onChange: onChange, disabled: disabled }));
+                return (React.createElement(TagsInput, { value: dcrValue ? wrapInArrayIfNeeded(dcrValue) : [], onChange: onChange, disabled: disabled }));
             }
             default: {
                 var dataTypeDefinition = getDataTypeDefinition(attributeType, dcrValue);

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

@@ -0,0 +1,11 @@
+import React from 'react';
+export declare enum EditorStatus {
+    UPDATED = "updated",
+    REJECTED = "rejected",
+    RECENTLY_ADDED = "recentlyAdded"
+}
+type Props = {
+    status?: EditorStatus;
+};
+export declare const EditorStatusChip: ({ status }: Props) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,34 @@
+var _a;
+import React from 'react';
+import classnames from 'classnames';
+import i18n from 'ui-i18n';
+import Chip from '@mui/material/Chip';
+import styles from './EditorStatusChip.module.css';
+export var EditorStatus;
+(function (EditorStatus) {
+    EditorStatus["UPDATED"] = "updated";
+    EditorStatus["REJECTED"] = "rejected";
+    EditorStatus["RECENTLY_ADDED"] = "recentlyAdded";
+})(EditorStatus || (EditorStatus = {}));
+var STATUS_CLASS = (_a = {},
+    _a[EditorStatus.UPDATED] = styles.updatedChip,
+    _a[EditorStatus.REJECTED] = styles.rejectedChip,
+    _a[EditorStatus.RECENTLY_ADDED] = styles.recentlyAddedChip,
+    _a);
+var getStatusLabel = function (status) {
+    switch (status) {
+        case EditorStatus.UPDATED:
+            return i18n.text('Updated');
+        case EditorStatus.REJECTED:
+            return i18n.text('Rejected');
+        case EditorStatus.RECENTLY_ADDED:
+            return i18n.text('Recently Added');
+    }
+};
+export var EditorStatusChip = function (_a) {
+    var status = _a.status;
+    if (!status) {
+        return null;
+    }
+    return (React.createElement(Chip, { label: getStatusLabel(status), size: "small", className: classnames(styles.statusChip, STATUS_CLASS[status]), "data-testid": "editor-status-chip" }));
+};

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

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

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

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

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

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

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { GroupedObjectsInfo, WorkflowTaskData, EnrichedChangeRequest } from '@reltio/mdm-sdk';
+import { type GroupedObjectsInfo, type WorkflowTaskData, type EnrichedChangeRequest } from '@reltio/mdm-sdk';
 type Props = {
     task: WorkflowTaskData;
     dcr: EnrichedChangeRequest;

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

@@ -1,4 +1,6 @@
-import React from 'react';
+import React, { useMemo, useCallback, useContext } from 'react';
+import { useContextSelector } from '@fluentui/react-context-selector';
+import { isNil } from 'ramda';
 import Accordion from '@mui/material/Accordion';
 import AccordionSummary from '@mui/material/AccordionSummary';
 import AccordionDetails from '@mui/material/AccordionDetails';
@@ -6,26 +8,130 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import { useChangesList } from '../../../hooks/useChangesList';
 import { DCREntityUriLink } from '../../../DCREntityUriLink/DCREntityUriLink';
 import { ChangeItemRow } from '../ChangeItemRow/ChangeItemRow';
+import { useMdmMetadata } from '../../../../../contexts/MdmModuleContext';
+import { AddedAttributesContext } from '../../../contexts/AddedAttributesContext';
+import { ScrollToAddedAttributeContext } from '../../../contexts/ScrollToAddedAttributeContext';
 import { AttributesChangesContext } from '../../../AttributesChanges/AttributesChangesContext';
 import { getDCRUri } from '../../../helpers/common';
-import { isDiffChange } from '../../helpers/helpers';
+import { getAvailableAttributeTypesForEntity, getAvailableAttributeTypesForRelation, getAvailableSubAttributesForNestedOrReference } from '../../../helpers/moreAttributesScope';
+import { isDiffChange, isRelationRow, isNestedOrReferenceParent } from '../../helpers/helpers';
+import { prepareChangesList } from '../../helpers/changesList';
+import { extractChangeOverrides, getAddedId, getObjectIdFromLineId, getParentAddedId, getParentChangeOverrides, getParentLineId, isRootAddedAttribute } from '../../helpers/addedAttributes';
+import { extractLineIds } from '../../../helpers/merge';
+import { MoreAttributesEditor } from '../editors';
 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 metadata = useMdmMetadata();
     var dcrUri = getDCRUri(task.objectURIs);
     var _b = dcr || {}, changes = _b.changes, objectsInfo = _b.objectsInfo;
-    var changesList = useChangesList({
+    var addAddedAttributes = useContextSelector(AddedAttributesContext, function (ctx) { return ctx.addAddedAttributes; });
+    var highlight = useContext(ScrollToAddedAttributeContext).highlight;
+    var rawChangesList = useChangesList({
         changes: changes,
         entityInfo: entityInfo,
         relationsInfo: relationsInfo
     });
+    var changesList = useMemo(function () { return prepareChangesList(rawChangesList); }, [rawChangesList]);
+    var entityAttributeTypes = useMemo(function () {
+        if (!isNil(entityInfo.isExist)) {
+            return getAvailableAttributeTypesForEntity(metadata, entityInfo.type);
+        }
+        return [];
+    }, [metadata, entityInfo.type, entityInfo.isExist]);
+    var relationAttributeTypesMap = useMemo(function () {
+        var map = new Map();
+        for (var _i = 0, relationsInfo_1 = relationsInfo; _i < relationsInfo_1.length; _i++) {
+            var relationInfo = relationsInfo_1[_i];
+            if (!map.has(relationInfo.type)) {
+                map.set(relationInfo.type, getAvailableAttributeTypesForRelation(metadata, relationInfo.type));
+            }
+        }
+        return map;
+    }, [metadata, relationsInfo]);
+    var handleAddAttributes = useCallback(function (_a) {
+        var objectUri = _a.objectUri, parentLineId = _a.parentLineId, parentId = _a.parentId, changeOverrides = _a.changeOverrides;
+        return function (attributeTypes) {
+            var addedIds = addAddedAttributes({
+                attributeTypes: attributeTypes,
+                objectUri: objectUri,
+                parentLineId: parentLineId,
+                parentId: parentId,
+                changeOverrides: changeOverrides
+            });
+            highlight(addedIds);
+        };
+    }, [addAddedAttributes, highlight]);
+    var handleAddNestedAttributes = useCallback(function (change) { return function (attributeTypes) {
+        var _a, _b, _c, _d, _e;
+        var parentUri = (_a = change.attributeType) === null || _a === void 0 ? void 0 : _a.uri;
+        var parentAttrs = attributeTypes.filter(function (attr) { return attr.uri === parentUri; });
+        var subAttrs = attributeTypes.filter(function (attr) { return attr.uri !== parentUri; });
+        var childOverrides = extractChangeOverrides(change);
+        var siblingOverrides = getParentChangeOverrides(change);
+        if (parentAttrs.length > 0) {
+            var lineId = (_c = (_b = change.lineIds) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : (_d = extractLineIds(change.newValue)) === null || _d === void 0 ? void 0 : _d[0];
+            var addedId = getAddedId(change);
+            if (lineId && isRootAddedAttribute(lineId)) {
+                handleAddAttributes({
+                    objectUri: getObjectIdFromLineId(lineId),
+                    changeOverrides: siblingOverrides
+                })(parentAttrs);
+            }
+            else if (lineId) {
+                handleAddAttributes({
+                    parentLineId: getParentLineId(lineId),
+                    parentId: addedId ? getParentAddedId(addedId) : undefined,
+                    changeOverrides: siblingOverrides
+                })(parentAttrs);
+            }
+            else {
+                handleAddAttributes({
+                    objectUri: entityInfo.uri,
+                    changeOverrides: siblingOverrides
+                })(parentAttrs);
+            }
+        }
+        if (subAttrs.length > 0) {
+            var parentLineId = (_e = change.lineIds) === null || _e === void 0 ? void 0 : _e[0];
+            var parentId = change.addedId;
+            if (parentLineId || parentId) {
+                handleAddAttributes({ parentLineId: parentLineId, parentId: parentId, changeOverrides: childOverrides })(subAttrs);
+            }
+            else {
+                handleAddAttributes({
+                    objectUri: entityInfo.uri,
+                    changeOverrides: childOverrides
+                })(subAttrs);
+            }
+        }
+    }; }, [handleAddAttributes, entityInfo.uri]);
     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 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));
-            })))));
+            React.createElement(AccordionDetails, { className: styles.attributesList },
+                entityAttributeTypes.length > 0 && (React.createElement(MoreAttributesEditor, { data: entityAttributeTypes, onApply: handleAddAttributes({ objectUri: entityInfo.uri }) })),
+                changesList.map(function (item, index) {
+                    var _a, _b, _c, _d, _e, _f;
+                    if (!isDiffChange(item)) {
+                        return (React.createElement("div", { key: "title-".concat(index), className: styles.titleChangeItem }, item.label));
+                    }
+                    var relationAttrs = item.relationType
+                        ? ((_a = relationAttributeTypesMap.get(item.relationType.uri)) !== null && _a !== void 0 ? _a : [])
+                        : [];
+                    var nestedAttrs = isNestedOrReferenceParent(item)
+                        ? getAvailableSubAttributesForNestedOrReference(metadata, item.attributeType)
+                        : [];
+                    var changeKey = (_d = (_b = item.addedId) !== null && _b !== void 0 ? _b : (_c = item.attributeValue) === null || _c === void 0 ? void 0 : _c.uri) !== null && _d !== void 0 ? _d : "change-".concat(index);
+                    return (React.createElement(React.Fragment, { key: changeKey },
+                        React.createElement(ChangeItemRow, { change: item, entityInfo: entityInfo }),
+                        isRelationRow(item) && (React.createElement(MoreAttributesEditor, { data: relationAttrs, change: item, onApply: handleAddAttributes({
+                                objectUri: (_e = item === null || item === void 0 ? void 0 : item.attributeValue) === null || _e === void 0 ? void 0 : _e.uri,
+                                parentLineId: (_f = item.lineIds) === null || _f === void 0 ? void 0 : _f[0]
+                            }) })),
+                        isNestedOrReferenceParent(item) && (React.createElement(MoreAttributesEditor, { data: nestedAttrs, change: item, parent: item.attributeType, onApply: handleAddNestedAttributes(item) }))));
+                })))));
 };

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

@@ -4,7 +4,7 @@ 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 { SkeletonChangeItemEditorLoader } from '../editors';
 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 },

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Diff } from '../../../types';
+import type { Diff } from '../../../../types';
 type Props = {
     change: Diff;
     editable?: boolean;

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

@@ -0,0 +1,80 @@
+import React, { useMemo } from 'react';
+import classnames from 'classnames';
+import { isNil } from 'ramda';
+import i18n from 'ui-i18n';
+import ReplayIcon from '@mui/icons-material/Replay';
+import Button from '@mui/material/Button';
+import { DCROperationTypes, EntityAttrTypes, getAttributeValue, getEntityType, isImage } from '@reltio/mdm-sdk';
+import { useMdmEntity, useMdmMetadata } from '../../../../../../contexts/MdmModuleContext';
+import { DataTypeValue } from '../../../../../../DataTypeValue';
+import { SmallIconButton } from '../../../../../../SmallIconButton';
+import { getDataTypeDefinition, prepareRolesOrTagsValue } from '../../../../helpers/common';
+import { checkCanInitiateChangeRequest } from '../../../helpers/helpers';
+import { OperationChip } from '../../../../OperationChip';
+import { RelationEntityLink } from '../../../../RelationEntityLink';
+import { useChangeRequestEditor } from '../../../hooks/useChangeRequestEditor';
+import { ChangeItemLabel } from '../../ChangeItemLabel';
+import { DCRValueEditor } from '../../DCRValueEditor';
+import { EditorStatus, EditorStatusChip } from '../../EditorStatusChip';
+import { AddSameAttributeButton } from '../../AddSameAttributeButton/AddSameAttributeButton';
+import { DCRImageEditor } from '../../DCRImageEditor';
+import editorStyles from '../editors.module.css';
+import styles from './ChangeItemEditor.module.css';
+export var ChangeItemEditor = function (_a) {
+    var _b, _c, _d, _e, _f;
+    var change = _a.change, _g = _a.editable, editable = _g === void 0 ? true : _g, classes = _a.classes;
+    var metadata = useMdmMetadata();
+    var _h = useChangeRequestEditor({ change: change }), handleChange = _h.handleChange, handleReject = _h.handleReject, handleRevert = _h.handleRevert, handleImageUpload = _h.handleImageUpload, lineData = _h.lineData, isLineRejected = _h.isLineRejected, isParentLineRejected = _h.isParentLineRejected, isUpdated = _h.isUpdated, hasChangeId = _h.hasChangeId, isSubAttributeOfDeletedAttribute = _h.isSubAttributeOfDeletedAttribute;
+    var entity = useMdmEntity();
+    var entityType = getEntityType(metadata, entity === null || entity === void 0 ? void 0 : entity.type);
+    var isUpdateOperation = change.operation === DCROperationTypes.EDITED;
+    var isAddOperation = change.operation === DCROperationTypes.ADDED;
+    var isDeletedOperation = change.operation === DCROperationTypes.DELETED;
+    var oldValue = getAttributeValue(change.oldValue);
+    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);
+    }, [change.attributeType, newValue, oldValue]);
+    var isImageType = isImage(change === null || change === void 0 ? void 0 : change.attributeType);
+    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 canEdit = checkCanInitiateChangeRequest(metadata, entityType, change);
+    var shouldShowValueEditor = (isUpdateOperation || isAddOperation) && editable && canEdit;
+    var isRejected = isLineRejected || isParentLineRejected;
+    var shouldShowAddButton = shouldShowValueEditor && ((_d = change.displayOptions) === null || _d === void 0 ? void 0 : _d.showAddButton) && !isRejected;
+    var preparedValue = useMemo(function () {
+        return isRolesOrTags
+            ? prepareRolesOrTagsValue(metadata, newValue, change.attributeType.uri)
+            : newValue;
+    }, [isRolesOrTags, metadata, newValue, (_e = change.attributeType) === null || _e === void 0 ? void 0 : _e.uri]);
+    var showUndoButton = (isUpdated || isLineRejected) && !isParentLineRejected;
+    var showRejectButton = canEdit &&
+        !isLineRejected &&
+        !isUpdated &&
+        !isParentLineRejected &&
+        hasChangeId &&
+        !isSubAttributeOfDeletedAttribute &&
+        !(change.isReferenceSubAttribute && !editable);
+    var showStatusChips = !isParentLineRejected;
+    var isImageEditorDisabled = isRejected || isDeletedOperation;
+    var getEditorStatus = function () {
+        if (isLineRejected)
+            return EditorStatus.REJECTED;
+        if (isUpdated)
+            return EditorStatus.UPDATED;
+        return undefined;
+    };
+    return (React.createElement("div", { className: editorStyles.attributeRow, "data-reltio-id": "change-item-editor" },
+        React.createElement(ChangeItemLabel, { change: change, className: editorStyles.labelColumn, showLabel: (_f = change.displayOptions) === null || _f === void 0 ? void 0 : _f.showLabel }),
+        React.createElement("div", { className: editorStyles.valueColumn },
+            React.createElement(RelationEntityLink, { attributeOrRelationType: change.attributeType || change.relationType, attributeValue: change.attributeValue, className: styles.relationEntityLink }),
+            isImageType ? (React.createElement(DCRImageEditor, { change: change, onUpload: handleImageUpload, disabled: isImageEditorDisabled })) : 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: editorStyles.addSameAttributeColumn }, shouldShowAddButton && React.createElement(AddSameAttributeButton, { change: change })),
+        React.createElement("div", { className: editorStyles.revertColumn }, showUndoButton && (React.createElement(SmallIconButton, { icon: ReplayIcon, onClick: handleRevert, className: styles.revertButton, title: i18n.text('Undo'), size: "S" }))),
+        React.createElement("div", { className: editorStyles.operationColumn }, change.operation && React.createElement(OperationChip, { operation: change.operation, size: "small", variant: "outlined" })),
+        React.createElement("div", { className: editorStyles.statusColumn }, showStatusChips && React.createElement(EditorStatusChip, { status: getEditorStatus() })),
+        React.createElement("div", { className: editorStyles.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/editors/ChangeItemEditor/ChangeItemEditor.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"value":"ChangeItemEditor-value--x6RmR","columnSkeleton":"ChangeItemEditor-columnSkeleton--d4Sxa","relationEntityLink":"ChangeItemEditor-relationEntityLink--a9i3v","rejectButton":"ChangeItemEditor-rejectButton--z-3SA","revertButton":"ChangeItemEditor-revertButton--fkWOD"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.ChangeItemEditor-value--x6RmR{font-size:16px;padding:8px}.ChangeItemEditor-columnSkeleton--d4Sxa{transform:none}.ChangeItemEditor-relationEntityLink--a9i3v{font-size:16px}.ChangeItemEditor-rejectButton--z-3SA{background-color:#eb5757;border-radius:8px;color:#fff}.ChangeItemEditor-rejectButton--z-3SA:hover{background-color:rgba(235,87,87,.8)}.ChangeItemEditor-revertButton--fkWOD{color:var(--mui-palette-text-secondary)}`;
+    head.appendChild(style);
+}
+export default styles;

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

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

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

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

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

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

package/features/workflow/ChangeRequestEditor/components/editors/ChangeItemEditorRecentlyAdded/ChangeItemEditorRecentlyAdded.d.ts

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

package/features/workflow/ChangeRequestEditor/components/editors/ChangeItemEditorRecentlyAdded/ChangeItemEditorRecentlyAdded.js

@@ -0,0 +1,59 @@
+import React, { useMemo } from 'react';
+import i18n from 'ui-i18n';
+import { checkHasMasking, getAttributeValue, getReferencedEntityTypeUriFromAttrType, isComplexAttribute, isImage, isReference, Mode } from '@reltio/mdm-sdk';
+import DeleteIcon from '@mui/icons-material/Delete';
+import { useMdmGlobalSearchRequestOptions, useMdmMetadata, useMdmShowMasking } from '../../../../../../contexts/MdmModuleContext';
+import { EntitySelector } from '../../../../../../EntitySelector';
+import { SmallIconButton } from '../../../../../../SmallIconButton';
+import { ChangeItemLabel } from '../../ChangeItemLabel';
+import { DCRValueEditor } from '../../DCRValueEditor';
+import { AddSameAttributeButton } from '../../AddSameAttributeButton/AddSameAttributeButton';
+import { DCRImageEditor } from '../../DCRImageEditor';
+import { useNewAttributesEditor } from '../../../hooks/useNewAttributesEditor';
+import { EditorStatus, EditorStatusChip } from '../../EditorStatusChip';
+import editorStyles from '../editors.module.css';
+export var ChangeItemEditorRecentlyAdded = function (_a) {
+    var _b, _c, _d, _e;
+    var change = _a.change, _f = _a.editable, editable = _f === void 0 ? true : _f;
+    var metadata = useMdmMetadata();
+    var globalSearchRequestOptions = useMdmGlobalSearchRequestOptions(['ovOnly']);
+    var showMasking = useMdmShowMasking();
+    var _g = useNewAttributesEditor({ change: change }), lineData = _g.lineData, handleDelete = _g.handleDelete, handleChange = _g.handleChange, handleEntityChange = _g.handleEntityChange, handleImageUpload = _g.handleImageUpload, selectedEntity = _g.selectedEntity, isRejected = _g.isRejected, hasAddedParent = _g.hasAddedParent;
+    var attributeType = change.attributeType;
+    var currentValue = (_b = lineData === null || lineData === void 0 ? void 0 : lineData.value) !== null && _b !== void 0 ? _b : change.newValue;
+    var hasValue = !!getAttributeValue(currentValue);
+    var isReferenceType = isReference(attributeType);
+    var isImageType = isImage(attributeType);
+    var isComplex = isComplexAttribute(attributeType);
+    var isMasked = showMasking && checkHasMasking(metadata, attributeType);
+    var entityTypesUris = useMemo(function () {
+        if (!isReferenceType || !attributeType)
+            return [];
+        return [getReferencedEntityTypeUriFromAttrType(attributeType)];
+    }, [isReferenceType, attributeType]);
+    var renderEditor = function () {
+        if (isReferenceType) {
+            return (React.createElement(EntitySelector, { entity: selectedEntity, entityTypesUris: entityTypesUris, mode: Mode.Suggesting, onChange: handleEntityChange, metadata: metadata, globalSearchRequestOptions: globalSearchRequestOptions, isMasked: isMasked }));
+        }
+        if (isImageType) {
+            return React.createElement(DCRImageEditor, { change: change, onUpload: handleImageUpload, disabled: isRejected });
+        }
+        if (!editable)
+            return null;
+        if (!isComplex) {
+            return (React.createElement(DCRValueEditor, { attributeType: attributeType, value: currentValue, onChange: handleChange, disabled: isRejected }));
+        }
+        return null;
+    };
+    var showAddButton = editable && ((_c = change.displayOptions) === null || _c === void 0 ? void 0 : _c.showAddButton) && !isRejected;
+    var showDeleteButton = ((_d = change.displayOptions) === null || _d === void 0 ? void 0 : _d.hasSameAttributeSiblings) || !((attributeType === null || attributeType === void 0 ? void 0 : attributeType.required) && hasAddedParent);
+    return (React.createElement("div", { className: editorStyles.attributeRow, "data-reltio-id": "change-item-editor-recently-added" },
+        React.createElement(ChangeItemLabel, { change: change, className: editorStyles.labelColumn, showLabel: (_e = change.displayOptions) === null || _e === void 0 ? void 0 : _e.showLabel }),
+        React.createElement("div", { className: editorStyles.valueColumn }, renderEditor()),
+        React.createElement("div", { className: editorStyles.addSameAttributeColumn }, showAddButton && React.createElement(AddSameAttributeButton, { change: change })),
+        React.createElement("div", { className: editorStyles.revertColumn }, showDeleteButton && (React.createElement(SmallIconButton, { icon: DeleteIcon, onClick: handleDelete, title: i18n.text('Delete'), size: "S" }))),
+        React.createElement("div", { className: editorStyles.operationColumn }),
+        React.createElement("div", { className: editorStyles.statusColumn },
+            React.createElement(EditorStatusChip, { status: !isComplex && hasValue ? EditorStatus.RECENTLY_ADDED : undefined })),
+        React.createElement("div", { className: editorStyles.rejectColumn })));
+};

package/features/workflow/ChangeRequestEditor/components/editors/ChangeItemEditorRecentlyAdded/index.d.ts

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

package/features/workflow/ChangeRequestEditor/components/editors/ChangeItemEditorRecentlyAdded/index.js

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

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Diff } from '../../../types';
+import type { Diff } from '../../../../types';
 type Props = {
     change: Diff;
 };

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

@@ -2,10 +2,11 @@ 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';
+import { getDataTypeDefinition } from '../../../../helpers/common';
+import { DataTypeValue } from '../../../../../../DataTypeValue';
+import { ChangeItemLabel } from '../../ChangeItemLabel';
+import editorStyles from '../editors.module.css';
+import styles from './ChangeItemOldValue.module.css';
 export var ChangeItemOldValue = function (_a) {
     var change = _a.change;
     var isUpdateOperation = change.operation === DCROperationTypes.EDITED;
@@ -13,13 +14,13 @@ export var ChangeItemOldValue = function (_a) {
     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 },
+    return (React.createElement("div", { className: editorStyles.attributeRow },
+        React.createElement(ChangeItemLabel, { change: change, className: editorStyles.labelColumn }),
+        React.createElement("div", { className: editorStyles.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 })));
+        React.createElement("div", { className: editorStyles.revertColumn }),
+        React.createElement("div", { className: editorStyles.operationColumn })));
 };

package/features/workflow/ChangeRequestEditor/components/editors/ChangeItemOldValue/ChangeItemOldValue.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"previousValue":"ChangeItemOldValue-previousValue--wjU38","previousValueText":"ChangeItemOldValue-previousValueText--3YlY8","arrow":"ChangeItemOldValue-arrow--uP40C"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.ChangeItemOldValue-previousValue--wjU38{align-items:center;display:flex;line-height:16px;padding:6px 12px 7px}.ChangeItemOldValue-previousValueText--3YlY8{color:var(--mui-palette-text-primary);letter-spacing:.24px}.ChangeItemOldValue-arrow--uP40C{color:var(--mui-palette-text-secondary);font-weight:700;margin:0 5px}`;
+    head.appendChild(style);
+}
+export default styles;

package/features/workflow/ChangeRequestEditor/components/editors/ChangeItemOldValue/index.d.ts

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

package/features/workflow/ChangeRequestEditor/components/editors/ChangeItemOldValue/index.js

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

package/features/workflow/ChangeRequestEditor/components/editors/MoreAttributesEditor/MoreAttributesEditor.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { AttributeType } from '@reltio/mdm-sdk';
+import type { Diff } from '../../../../types';
+type Props = {
+    data: AttributeType[];
+    onApply: (attributeTypes: AttributeType[]) => void;
+    change?: Diff;
+    parent?: AttributeType;
+};
+export declare const MoreAttributesEditor: ({ data, onApply, change, parent }: Props) => React.JSX.Element;
+export {};