@reltio/components 1.4.1164 → 1.4.1168

package/cjs/components/attributes/editMode/MoreAttributesButton/helpers.d.ts

@@ -0,0 +1,8 @@
+import { AttributeType } from '@reltio/mdm-sdk';
+import { GroupedItem } from './useMoreAttributesItems';
+declare type Props = {
+    attrTypes: AttributeType[];
+    filter?: string;
+};
+declare const preparedGroupedItems: ({ attrTypes, filter }: Props) => GroupedItem[];
+export { preparedGroupedItems };

package/cjs/components/attributes/editMode/MoreAttributesButton/helpers.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.preparedGroupedItems = void 0;
+var ramda_1 = require("ramda");
+var filterItems = ramda_1.curry(function (filterText, items) {
+    return ramda_1.filter(function (item) { return item.label.toLowerCase().includes(filterText.toLowerCase()); })(items);
+});
+var preparedGroupedItems = function (_a) {
+    var attrTypes = _a.attrTypes, _b = _a.filter, filter = _b === void 0 ? '' : _b;
+    return ramda_1.pipe(filterItems(filter), ramda_1.map(function (attrType) { return ({
+        item: {
+            id: attrType.uri,
+            label: attrType.label,
+            attrType: attrType
+        }
+    }); }))(attrTypes);
+};
+exports.preparedGroupedItems = preparedGroupedItems;

package/cjs/components/attributes/editMode/MoreAttributesButton/styles.d.ts

@@ -1 +1 @@
-export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"icon" | "dense" | "buttonLabel" | "moreButton" | "moreAttributes" | "popupContainer" | "moreAttributesPopup">;
+export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"icon" | "dense" | "buttonLabel" | "moreButton" | "subHeader" | "moreAttributes" | "popupContainer" | "moreAttributesPopup" | "noResultsCaptionContainer">;

package/cjs/components/attributes/editMode/MoreAttributesButton/styles.js

@@ -27,5 +27,25 @@ exports.useStyles = styles_1.makeStyles({
     icon: {
         fontSize: '18px',
         marginRight: '8px'
+    },
+    subHeader: {
+        backgroundColor: 'rgb(245, 245, 245)',
+        padding: '0 16px',
+        margin: 0,
+        display: 'flex',
+        alignItems: 'center',
+        color: 'rgba(0,0,0,0.84)',
+        fontSize: '14px',
+        fontWeight: 500
+    },
+    noResultsCaptionContainer: {
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center'
     }
 });

package/cjs/components/attributes/editMode/MoreAttributesButton/useMoreAttributesItems.d.ts

@@ -0,0 +1,22 @@
+import { AttributeType } from '@reltio/mdm-sdk';
+declare type Props = {
+    data: AttributeType[];
+    parent?: AttributeType;
+    filter?: string;
+};
+declare type Item = {
+    id: string;
+    label: string;
+    attrType?: AttributeType;
+};
+export declare type GroupedItem = {
+    item: Item;
+    items?: GroupedItem[];
+};
+export declare const useMoreAttributesItems: ({ data, parent, filter }: Props) => {
+    items: any;
+    hasGroups: boolean;
+    parentGroupLength: number;
+    attributesGroupLength: number;
+};
+export {};

package/cjs/components/attributes/editMode/MoreAttributesButton/useMoreAttributesItems.js

@@ -0,0 +1,60 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMoreAttributesItems = void 0;
+var react_1 = require("react");
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var helpers_1 = require("../../../VirtualGroupedList/helpers");
+var helpers_2 = require("./helpers");
+var GROUP_NAMES;
+(function (GROUP_NAMES) {
+    GROUP_NAMES["parent"] = "parent";
+    GROUP_NAMES["attributes"] = "attributes";
+})(GROUP_NAMES || (GROUP_NAMES = {}));
+var useMoreAttributesItems = function (_a) {
+    var data = _a.data, parent = _a.parent, filter = _a.filter;
+    var hasGroups = Boolean(parent);
+    var preparedParentGroupItem = react_1.useMemo(function () { return (hasGroups ? helpers_2.preparedGroupedItems({ attrTypes: [parent], filter: filter }) : []); }, [hasGroups, parent, filter]);
+    var parentGroup = react_1.useMemo(function () {
+        return hasGroups && (preparedParentGroupItem === null || preparedParentGroupItem === void 0 ? void 0 : preparedParentGroupItem.length)
+            ? [
+                {
+                    item: {
+                        id: GROUP_NAMES.parent,
+                        label: ui_i18n_1.default.text('Parent')
+                    },
+                    items: preparedParentGroupItem
+                }
+            ]
+            : [];
+    }, [hasGroups, preparedParentGroupItem]);
+    var preparedAttributesGroupItems = react_1.useMemo(function () {
+        return helpers_2.preparedGroupedItems({
+            attrTypes: data,
+            filter: filter
+        });
+    }, [data, filter]);
+    var attributesGroup = react_1.useMemo(function () {
+        return hasGroups && (preparedAttributesGroupItems === null || preparedAttributesGroupItems === void 0 ? void 0 : preparedAttributesGroupItems.length)
+            ? [
+                {
+                    item: {
+                        id: GROUP_NAMES.attributes,
+                        label: ui_i18n_1.default.text('Attributes')
+                    },
+                    items: preparedAttributesGroupItems
+                }
+            ]
+            : preparedAttributesGroupItems;
+    }, [hasGroups, preparedAttributesGroupItems]);
+    var items = react_1.useMemo(function () { return helpers_1.flattenGroupedItemsData((parentGroup || []).concat(attributesGroup)); }, [
+        parentGroup,
+        attributesGroup
+    ]);
+    var parentGroupLength = parentGroup.length;
+    var attributesGroupLength = attributesGroup.length;
+    return { items: items, hasGroups: hasGroups, parentGroupLength: parentGroupLength, attributesGroupLength: attributesGroupLength };
+};
+exports.useMoreAttributesItems = useMoreAttributesItems;

package/cjs/contexts/CollaborationContext/index.d.ts

@@ -14,9 +14,17 @@ export declare const CollaborationContext: React.Context<{
     editComment: (params: Pick<Comment, 'content' | 'namedUsers' | 'objectType' | 'relatedObjectUris' | 'commentId' | 'replies'> & {
         uri: string;
     }) => Promise<void>;
+    editReply: (params: Pick<Reply, 'content' | 'namedUsers' | 'replyId'> & {
+        commentId: string;
+    }) => Promise<void>;
     deleteComment: (params: Pick<Comment, 'commentId'> & {
         uri: string;
     }) => void;
+    deleteReply: (params: {
+        uri: string;
+        commentId: string;
+        reply: Pick<Reply, 'action' | 'replyId'>;
+    }) => void;
     createReply: (params: Pick<Reply, 'content' | 'namedUsers' | 'action'> & {
         uri: string;
         commentId: string;

package/cjs/contexts/CollaborationContext/index.js

@@ -22,6 +22,8 @@ exports.CollaborationContext = react_1.default.createContext({
     deleteComment: noop,
     sending: false,
     loading: false,
-    pageToken: null
+    pageToken: null,
+    deleteReply: noop,
+    editReply: function () { return new Promise(noop); }
 });
 exports.CollaborationContext.displayName = 'CollaborationContext';

package/cjs/hooks/useCollaboration.d.ts

@@ -22,5 +22,7 @@ export declare const useCollaboration: ({ objectIds, objectTypes, enabled }: Pro
     reOpenThread: ({ commentId, uri }: any) => void;
     resolveThread: ({ commentId, uri }: any) => void;
     sending: boolean;
+    deleteReply: ({ uri, commentId, reply }: any) => void;
+    editReply: ({ content, namedUsers, commentId, replyId }: any) => Promise<void>;
 };
 export {};

package/cjs/hooks/useCollaboration.js

@@ -25,6 +25,16 @@ var react_redux_1 = require("react-redux");
 var ramda_1 = require("ramda");
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var mdm_module_1 = __importDefault(require("@reltio/mdm-module"));
+var filterReplies = function (replyId, replies) { return replies.filter(function (reply) { return reply.replyId !== replyId; }); };
+var getUpdatedReplies = function (comment, reply) {
+    var changedReplyIndex = comment.replies.findIndex(function (_a) {
+        var replyId = _a.replyId;
+        return replyId === reply.replyId;
+    });
+    var newReplies = __spreadArray([], comment.replies);
+    newReplies[changedReplyIndex] = reply;
+    return newReplies;
+};
 var defaultObjectIds = [];
 var catchErrorInRequest = function (e) { return console.error('Collaboration error', e); };
 var useCollaboration = function (_a) {
@@ -150,8 +160,9 @@ var useCollaboration = function (_a) {
             .catch(catchErrorInRequest)
             .finally(function () { return setSending(false); });
     }, [collaborationPath, tenant]);
-    var updateReplyInState = react_1.useCallback(function (reply, uri, commentId) {
+    var updateReplyInState = react_1.useCallback(function (reply, uri, commentId, isDeleteReply) {
         var newStatus = reply.action === 'resolve' ? 'resolved' : 'open';
+        var replyId = reply.replyId;
         if (newStatus === 'resolved') {
             setCurrentComment(function (prevCurrentComment) {
                 if (prevCurrentComment) {
@@ -162,7 +173,9 @@ var useCollaboration = function (_a) {
         else {
             setCurrentComment(function (prevCurrentComment) {
                 if (prevCurrentComment) {
-                    return __assign(__assign({}, prevCurrentComment), { replies: __spreadArray(__spreadArray([], prevCurrentComment.replies), [reply]) });
+                    return __assign(__assign({}, prevCurrentComment), { replies: isDeleteReply
+                            ? filterReplies(replyId, prevCurrentComment.replies)
+                            : __spreadArray(__spreadArray([], prevCurrentComment.replies), [reply]) });
                 }
             });
         }
@@ -170,7 +183,7 @@ var useCollaboration = function (_a) {
             var _a;
             return (__assign(__assign({}, prevCommentsMap), (_a = {}, _a[uri] = (prevCommentsMap[uri] || []).map(function (comment) {
                 if (comment.commentId === commentId) {
-                    return __assign(__assign({}, comment), { status: newStatus, replies: comment.replies + 1 });
+                    return __assign(__assign({}, comment), { status: newStatus, replies: isDeleteReply ? comment.replies - 1 : comment.replies + 1 });
                 }
                 return comment;
             }), _a)));
@@ -178,12 +191,49 @@ var useCollaboration = function (_a) {
         setComments(function (prevComments) {
             return prevComments.map(function (comment) {
                 if (comment.commentId === commentId) {
-                    return __assign(__assign({}, comment), { status: newStatus, replies: __spreadArray(__spreadArray([], comment.replies), [reply]) });
+                    return __assign(__assign({}, comment), { status: newStatus, replies: isDeleteReply
+                            ? filterReplies(reply.replyId, comment.replies)
+                            : __spreadArray(__spreadArray([], comment.replies), [reply]) });
+                }
+                return comment;
+            });
+        });
+    }, []);
+    var deleteReply = react_1.useCallback(function (_a) {
+        var uri = _a.uri, commentId = _a.commentId, reply = _a.reply;
+        setSending(true);
+        mdm_sdk_1.deleteReply({ collaborationPath: collaborationPath, tenant: tenant, commentId: commentId, replyId: reply.replyId })
+            .then(function () { return updateReplyInState(reply, uri, commentId, true); })
+            .catch(catchErrorInRequest)
+            .finally(function () { return setSending(false); });
+    }, [collaborationPath, updateReplyInState, tenant]);
+    var editReplyInState = react_1.useCallback(function (reply, commentId) {
+        setCurrentComment(function (prevCurrentComment) {
+            if (prevCurrentComment) {
+                return __assign(__assign({}, prevCurrentComment), { replies: getUpdatedReplies(prevCurrentComment, reply) });
+            }
+        });
+        setComments(function (prevComments) {
+            return prevComments.map(function (comment) {
+                if (comment.commentId === commentId) {
+                    return __assign(__assign({}, comment), { replies: getUpdatedReplies(comment, reply) });
                 }
                 return comment;
             });
         });
     }, []);
+    var editReply = react_1.useCallback(function (_a) {
+        var content = _a.content, namedUsers = _a.namedUsers, commentId = _a.commentId, replyId = _a.replyId;
+        setSending(true);
+        var data = {
+            content: content,
+            namedUsers: namedUsers
+        };
+        return mdm_sdk_1.updateReply({ collaborationPath: collaborationPath, tenant: tenant, commentId: commentId, replyId: replyId, data: data })
+            .then(function (reply) { return editReplyInState(reply, commentId); })
+            .catch(catchErrorInRequest)
+            .finally(function () { return setSending(false); });
+    }, [collaborationPath, tenant, editReplyInState]);
     var createReply = react_1.useCallback(function (_a) {
         var content = _a.content, namedUsers = _a.namedUsers, commentId = _a.commentId, action = _a.action, uri = _a.uri;
         setSending(true);
@@ -228,7 +278,9 @@ var useCollaboration = function (_a) {
         pageToken: pageToken,
         reOpenThread: reOpenThread,
         resolveThread: resolveThread,
-        sending: sending
+        sending: sending,
+        deleteReply: deleteReply,
+        editReply: editReply
     };
 };
 exports.useCollaboration = useCollaboration;

package/esm/components/CollaborationItem/CollaborationItem.js

@@ -1,4 +1,4 @@
-import React, { useRef, useState, memo } from 'react';
+import React, { useRef, memo } from 'react';
 import Box from '@material-ui/core/Box';
 import { Comment } from './Comment/Comment';
 import { RepliedComment } from './RepliedComment/RepliedComment';
@@ -8,22 +8,15 @@ export var CollaborationItem = memo(function (_a) {
     var uri = _a.uri, relatedObjectUris = _a.relatedObjectUris, objectType = _a.objectType, classes = _a.classes, popperRef = _a.popperRef, messagesRef = _a.messagesRef, comment = _a.comment;
     var inputRef = useRef();
     var styles = useStyles({ classes: classes });
-    var _b = useState(false), isEditingComment = _b[0], setIsEditingComment = _b[1];
     var handleReply = function () {
-        if (isEditingComment) {
-            setIsEditingComment(false);
-        }
         inputRef.current.focus();
     };
-    var handleSetEdit = function () {
-        setIsEditingComment(true);
-    };
-    var sendMessageArea = (React.createElement(SendMessageArea, { className: styles.sendMessageArea, inputRef: inputRef, popperRef: popperRef, uri: uri, relatedObjectUris: relatedObjectUris, objectType: objectType, comment: comment, onCancel: function () { return setIsEditingComment(false); }, isEditingComment: isEditingComment }));
+    var sendMessageArea = (React.createElement(SendMessageArea, { className: styles.sendMessageArea, inputRef: inputRef, popperRef: popperRef, uri: uri, relatedObjectUris: relatedObjectUris, objectType: objectType, comment: comment }));
     return (React.createElement(Box, { className: styles.root },
         comment && (React.createElement(React.Fragment, null,
             React.createElement("div", { className: styles.messages, ref: messagesRef },
-                React.createElement(Comment, { comment: comment, uri: uri, onReply: handleReply, onStartEditing: handleSetEdit, className: styles.comment }),
-                React.createElement(Box, { className: styles.replies }, comment.replies.map(function (reply) { return (React.createElement(RepliedComment, { key: reply.replyId, className: styles.repliedComment, reply: reply })); }))),
+                React.createElement(Comment, { comment: comment, uri: uri, onReply: handleReply, className: styles.comment, relatedObjectUris: relatedObjectUris, objectType: objectType }),
+                React.createElement(Box, { className: styles.replies }, comment.replies.map(function (reply) { return (React.createElement(RepliedComment, { key: reply.replyId, className: styles.repliedComment, reply: reply, uri: uri, comment: comment })); }))),
             sendMessageArea)),
         !comment && sendMessageArea));
 });

package/esm/components/CollaborationItem/Comment/Comment.d.ts

@@ -5,7 +5,8 @@ declare type Props = {
     onReply: () => void;
     className?: string;
     comment: CommentType;
-    onStartEditing: () => void;
+    relatedObjectUris: CommentType['relatedObjectUris'];
+    objectType: CommentType['objectType'];
 };
-export declare const Comment: ({ onReply, className, uri, comment, onStartEditing }: Props) => JSX.Element;
+export declare const Comment: ({ onReply, className, uri, comment, relatedObjectUris, objectType }: Props) => JSX.Element;
 export {};

package/esm/components/CollaborationItem/Comment/Comment.js

@@ -1,9 +1,11 @@
-import React, { useMemo, useContext } from 'react';
+import React, { useMemo, useContext, useState, useRef, useEffect } from 'react';
+import { useSelector } from 'react-redux';
 import i18n from 'ui-i18n';
 import Link from '@material-ui/core/Link';
 import Box from '@material-ui/core/Box';
 import Typography from '@material-ui/core/Typography';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
+import mdm from '@reltio/mdm-module';
 import DropDownMenuButton from '../../DropDownMenuButton/DropDownMenuButton';
 import { SmallIconButtonWithTooltip } from '../../SmallIconButton';
 import { CommentTarget } from '../CommentTarget/CommentTarget';
@@ -11,44 +13,52 @@ import { CommentContent } from '../CommentContent/CommentContent';
 import { Avatar } from '../Avatar/Avatar';
 import { CollaborationContext } from '../../../contexts';
 import { formatDate } from '../utils';
+import { SendMessageArea } from '../SendMessageArea/SendMessageArea';
 import { useStyles } from './styles';
-import { useSelector } from 'react-redux';
-import mdm from '@reltio/mdm-module';
 export var Comment = function (_a) {
-    var onReply = _a.onReply, className = _a.className, uri = _a.uri, comment = _a.comment, onStartEditing = _a.onStartEditing;
+    var onReply = _a.onReply, className = _a.className, uri = _a.uri, comment = _a.comment, relatedObjectUris = _a.relatedObjectUris, objectType = _a.objectType;
     var styles = useStyles();
+    var inputRef = useRef();
+    var _b = useState(false), isEditingComment = _b[0], setIsEditingComment = _b[1];
     var username = useSelector(mdm.selectors.getUserName);
-    var canChangeComment = comment.createdBy === username;
-    var _b = useContext(CollaborationContext), resolveThread = _b.resolveThread, reOpenThread = _b.reOpenThread, sending = _b.sending, deleteComment = _b.deleteComment;
+    var commentId = comment.commentId, createdBy = comment.createdBy, createdTime = comment.createdTime;
+    var canChangeComment = createdBy === username;
+    var _c = useContext(CollaborationContext), resolveThread = _c.resolveThread, reOpenThread = _c.reOpenThread, sending = _c.sending, deleteComment = _c.deleteComment;
+    useEffect(function () {
+        if (isEditingComment) {
+            inputRef.current.focus();
+        }
+    }, [isEditingComment]);
     var menuItems = useMemo(function () { return [
         {
             text: i18n.text('Edit'),
-            onClick: onStartEditing
+            onClick: function () { return setIsEditingComment(true); }
         },
         {
             text: i18n.text('Delete'),
-            onClick: function () { return deleteComment({ uri: uri, commentId: comment.commentId }); }
+            onClick: function () { return deleteComment({ uri: uri, commentId: commentId }); }
         }
-    ]; }, [onStartEditing, deleteComment, uri, comment]);
+    ]; }, [deleteComment, uri, commentId]);
     var handleResolve = function () {
-        resolveThread({ commentId: comment.commentId, uri: uri });
+        resolveThread({ commentId: commentId, uri: uri });
     };
     var handleReOpen = function () {
-        reOpenThread({ commentId: comment.commentId, uri: uri });
+        reOpenThread({ commentId: commentId, uri: uri });
     };
+    var sendMessageArea = (React.createElement(SendMessageArea, { inputRef: inputRef, uri: uri, relatedObjectUris: relatedObjectUris, objectType: objectType, onCancel: function () { return setIsEditingComment(false); }, isEditingComment: isEditingComment, comment: comment }));
     return (React.createElement(Box, { className: className },
         React.createElement(Box, { className: styles.header },
-            React.createElement(Avatar, { classes: { root: styles.avatar } }, comment.createdBy),
+            React.createElement(Avatar, { classes: { root: styles.avatar } }, createdBy),
             React.createElement(Box, { width: "100%" },
-                React.createElement(Typography, { className: styles.username }, comment.createdBy)),
-            React.createElement(Typography, { className: styles.createdAt }, formatDate(comment.createdTime)),
+                React.createElement(Typography, { className: styles.username }, createdBy)),
+            React.createElement(Typography, { className: styles.createdAt }, formatDate(createdTime)),
             canChangeComment && (React.createElement(DropDownMenuButton, { buttonComponent: SmallIconButtonWithTooltip, buttonProps: {
                     icon: MoreVertIcon,
                     tooltipTitle: i18n.text('Open menu')
                 }, popoverProps: { PopoverClasses: { root: styles.dropdownMenu } }, menuItems: menuItems, menuId: "collaboration-comment-menu" }))),
         React.createElement(Box, { className: styles.body },
             React.createElement(CommentTarget, { comment: comment, className: styles.commentTarget }),
-            React.createElement(CommentContent, { comment: comment, className: styles.message }),
+            isEditingComment ? sendMessageArea : React.createElement(CommentContent, { comment: comment, className: styles.message }),
             React.createElement(Box, { className: styles.buttons },
                 React.createElement(Link, { className: styles.button, onClick: onReply, component: "button" }, i18n.text('Reply')),
                 comment.status === 'open' && (React.createElement(Link, { disabled: sending, className: styles.button, onClick: handleResolve, component: "button" }, i18n.text('Resolve'))),

package/esm/components/CollaborationItem/Comment/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"body" | "message" | "button" | "header" | "avatar" | "username" | "createdAt" | "commentTarget" | "dropdownMenu" | "buttons">;
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"body" | "message" | "button" | "header" | "avatar" | "username" | "buttons" | "createdAt" | "commentTarget" | "dropdownMenu">;

package/esm/components/CollaborationItem/RepliedComment/RepliedComment.d.ts

@@ -1,8 +1,11 @@
-/// <reference types="react" />
-import { Reply } from '@reltio/mdm-sdk';
+import React from 'react';
+import { Reply, Comment as CommentType } from '@reltio/mdm-sdk';
 declare type Props = {
     className?: string;
-    reply: Pick<Reply, 'createdTime' | 'content' | 'createdBy' | 'action' | 'namedUsers'>;
+    reply: Pick<Reply, 'createdTime' | 'content' | 'createdBy' | 'action' | 'namedUsers' | 'replyId'>;
+    comment?: CommentType;
+    uri: string;
+    popperRef?: React.RefObject<any>;
 };
-export declare const RepliedComment: ({ className, reply }: Props) => JSX.Element;
+export declare const RepliedComment: ({ className, reply, uri, comment, popperRef }: Props) => JSX.Element;
 export {};

package/esm/components/CollaborationItem/RepliedComment/RepliedComment.js

@@ -1,23 +1,56 @@
-import React from 'react';
+import React, { useRef, useContext, useMemo, useState, useEffect } from 'react';
+import { useSelector } from 'react-redux';
 import i18n from 'ui-i18n';
 import classnames from 'classnames';
+import mdm from '@reltio/mdm-module';
 import Box from '@material-ui/core/Box';
+import MoreVertIcon from '@material-ui/icons/MoreVert';
 import Typography from '@material-ui/core/Typography';
 import { Avatar } from '../Avatar/Avatar';
 import { CommentContent } from '../CommentContent/CommentContent';
 import { formatDate } from '../utils';
 import { useStyles } from './styles';
+import { CollaborationContext } from '../../../contexts';
+import DropDownMenuButton from '../../DropDownMenuButton/DropDownMenuButton';
+import { SmallIconButtonWithTooltip } from '../../SmallIconButton';
+import { SendMessageArea } from '../SendMessageArea/SendMessageArea';
 export var RepliedComment = function (_a) {
-    var className = _a.className, reply = _a.reply;
+    var className = _a.className, reply = _a.reply, uri = _a.uri, comment = _a.comment, popperRef = _a.popperRef;
+    var inputRef = useRef();
+    var _b = useState(false), isEditingReply = _b[0], setIsEditingReply = _b[1];
     var createdBy = reply.createdBy, action = reply.action, createdTime = reply.createdTime;
+    var username = useSelector(mdm.selectors.getUserName);
+    var canChangeReply = createdBy === username;
+    var deleteReply = useContext(CollaborationContext).deleteReply;
+    useEffect(function () {
+        if (isEditingReply) {
+            inputRef.current.focus();
+        }
+    }, [isEditingReply]);
     var styles = useStyles();
+    var menuItems = useMemo(function () { return [
+        {
+            text: i18n.text('Edit'),
+            onClick: function () { return setIsEditingReply(true); }
+        },
+        {
+            text: i18n.text('Delete'),
+            onClick: function () { return deleteReply({ uri: uri, commentId: comment.commentId, reply: reply }); }
+        }
+    ]; }, [deleteReply, uri, comment.commentId, reply]);
+    var sendMessageArea = (React.createElement(SendMessageArea, { inputRef: inputRef, popperRef: popperRef, uri: uri, onCancel: function () { return setIsEditingReply(false); }, isEditingReply: isEditingReply, reply: reply, comment: comment }));
     return (React.createElement(Box, { className: classnames(styles.root, className) },
         React.createElement(Avatar, { classes: { root: styles.avatar } }, createdBy),
-        React.createElement(Box, null,
+        React.createElement(Box, { flexGrow: 1 },
             React.createElement(Box, { className: styles.header },
                 React.createElement(Typography, { className: styles.username }, createdBy),
                 action === 'resolve' && (React.createElement(Typography, { className: styles.marked }, i18n.text('Marked as resolved'))),
                 action === 'reopen' && React.createElement(Typography, { className: styles.marked }, i18n.text('Re-opened'))),
-            action !== 'resolve' && React.createElement(CommentContent, { className: styles.message, comment: reply }),
-            React.createElement(Typography, { className: styles.createdAt }, formatDate(createdTime)))));
+            action !== 'resolve' &&
+                (isEditingReply ? sendMessageArea : React.createElement(CommentContent, { className: styles.message, comment: reply })),
+            React.createElement(Typography, { className: styles.createdAt }, formatDate(createdTime))),
+        canChangeReply && (React.createElement(DropDownMenuButton, { buttonComponent: SmallIconButtonWithTooltip, buttonProps: {
+                icon: MoreVertIcon,
+                tooltipTitle: i18n.text('Open menu')
+            }, menuItems: menuItems, menuId: "collaboration-comment-menu" }))));
 };

package/esm/components/CollaborationItem/SendMessageArea/SendMessageArea.d.ts

@@ -1,15 +1,17 @@
 import React from 'react';
-import { Comment } from '@reltio/mdm-sdk';
+import { Comment, Reply } from '@reltio/mdm-sdk';
 declare type Props = {
     inputRef: React.RefObject<HTMLInputElement>;
     className?: string;
     uri: string;
-    objectType: Comment['objectType'];
-    relatedObjectUris: Comment['relatedObjectUris'];
+    objectType?: Comment['objectType'];
+    relatedObjectUris?: Comment['relatedObjectUris'];
     popperRef?: React.RefObject<any>;
     comment?: Comment;
+    reply?: Pick<Reply, 'content' | 'replyId'>;
     isEditingComment?: boolean;
+    isEditingReply?: boolean;
     onCancel?: () => void;
 };
-export declare const SendMessageArea: ({ inputRef, className, uri, relatedObjectUris, objectType, popperRef, comment, isEditingComment, onCancel }: Props) => JSX.Element;
+export declare const SendMessageArea: ({ inputRef, className, uri, relatedObjectUris, objectType, popperRef, comment, reply, isEditingComment, isEditingReply, onCancel }: Props) => JSX.Element;
 export {};

package/esm/components/CollaborationItem/SendMessageArea/SendMessageArea.js

@@ -2,6 +2,7 @@ import React, { useState, useContext, useEffect } from 'react';
 import i18n from 'ui-i18n';
 import classnames from 'classnames';
 import { useSelector } from 'react-redux';
+import { always, cond, T } from 'ramda';
 import mdm from '@reltio/mdm-module';
 import Box from '@material-ui/core/Box';
 import Button from '@material-ui/core/Button';
@@ -9,7 +10,6 @@ import { TextFieldWithMentions } from '../TextFieldWithMentions/TextFieldWithMen
 import { Avatar } from '../Avatar/Avatar';
 import { CollaborationContext } from '../../../contexts';
 import { useStyles } from './styles';
-import { always, cond, T } from 'ramda';
 import { useSafePromise } from '../../../hooks';
 var getPlaceholder = function (status) {
     switch (status) {
@@ -21,8 +21,8 @@ var getPlaceholder = function (status) {
             return '';
     }
 };
-var getButtonText = function (status, isEditingComment) {
-    if (isEditingComment) {
+var getButtonText = function (status, isEditingComment, isEditingReply) {
+    if (isEditingComment || isEditingReply) {
         return i18n.text('Edit');
     }
     if (status === 'open' || status === 'resolved') {
@@ -31,10 +31,11 @@ var getButtonText = function (status, isEditingComment) {
     return i18n.text('Comment');
 };
 export var SendMessageArea = function (_a) {
-    var inputRef = _a.inputRef, className = _a.className, uri = _a.uri, relatedObjectUris = _a.relatedObjectUris, objectType = _a.objectType, popperRef = _a.popperRef, comment = _a.comment, isEditingComment = _a.isEditingComment, onCancel = _a.onCancel;
-    var styles = useStyles();
+    var inputRef = _a.inputRef, className = _a.className, uri = _a.uri, relatedObjectUris = _a.relatedObjectUris, objectType = _a.objectType, popperRef = _a.popperRef, comment = _a.comment, reply = _a.reply, isEditingComment = _a.isEditingComment, isEditingReply = _a.isEditingReply, onCancel = _a.onCancel;
+    var isEditing = isEditingComment || isEditingReply;
+    var styles = useStyles({ isEditing: isEditing });
     var username = useSelector(mdm.selectors.getUserName);
-    var _b = useContext(CollaborationContext), createReply = _b.createReply, createComment = _b.createComment, sending = _b.sending, editComment = _b.editComment;
+    var _b = useContext(CollaborationContext), createReply = _b.createReply, createComment = _b.createComment, sending = _b.sending, editComment = _b.editComment, editReply = _b.editReply;
     var _c = useState(''), value = _c[0], setValue = _c[1];
     var _d = useState(''), plainTextValue = _d[0], setPlainTextValue = _d[1];
     var _e = useState([]), mentions = _e[0], setMentions = _e[1];
@@ -87,6 +88,17 @@ export var SendMessageArea = function (_a) {
                     });
                 }
             ],
+            [
+                always(isEditingReply),
+                function () {
+                    return editReply({
+                        content: plainTextValue,
+                        namedUsers: mentions,
+                        commentId: comment.commentId,
+                        replyId: reply.replyId
+                    });
+                }
+            ],
             [
                 T,
                 function () {
@@ -108,19 +120,25 @@ export var SendMessageArea = function (_a) {
         }
     }, [popperRef, shouldShowButtons]);
     useEffect(function () {
-        if (isEditingComment) {
-            setValue(comment.content);
+        if (isEditingComment || isEditingReply) {
+            if (isEditingComment) {
+                setValue(comment.content);
+            }
+            else {
+                setValue(reply.content);
+            }
         }
         else {
             clearValue();
         }
-    }, [isEditingComment]);
+    }, [isEditingComment, isEditingReply]);
+    var buttonSize = isEditing ? 'small' : 'medium';
     return (React.createElement(Box, { className: classnames(styles.root, className) },
         React.createElement("form", { onSubmit: handleSubmit, className: styles.form },
             React.createElement(Box, { className: styles.main },
-                React.createElement(Avatar, { classes: { root: styles.avatar } }, username),
+                !isEditing && React.createElement(Avatar, { classes: { root: styles.avatar } }, username),
                 React.createElement(TextFieldWithMentions, { className: styles.textField, disabled: sending, onChange: handleChange, inputRef: inputRef, value: value, onFocus: handleFocus, onBlur: handleBlur, placeholder: getPlaceholder(status) })),
             shouldShowButtons && (React.createElement(Box, { className: styles.buttons },
-                React.createElement(Button, { className: styles.button, variant: "contained", color: "primary", disabled: !hasValue || sending, type: "submit" }, getButtonText(status, isEditingComment)),
-                React.createElement(Button, { disabled: sending, onClick: handleCancel, className: styles.button, variant: "outlined", color: "primary" }, i18n.text('Cancel')))))));
+                React.createElement(Button, { className: styles.button, variant: "contained", color: "primary", disabled: !hasValue || sending, type: "submit", size: buttonSize }, getButtonText(status, isEditingComment, isEditingReply)),
+                React.createElement(Button, { disabled: sending, onClick: handleCancel, className: styles.button, variant: "outlined", color: "primary", size: buttonSize }, i18n.text('Cancel')))))));
 };

package/esm/components/CollaborationItem/SendMessageArea/styles.d.ts

@@ -1 +1,5 @@
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"button" | "form" | "main" | "root" | "avatar" | "buttons" | "textField">;
+declare type StylesProps = {
+    isEditing?: boolean;
+};
+export declare const useStyles: (props: StylesProps) => import("@material-ui/core/styles/withStyles").ClassNameMap<"button" | "form" | "main" | "root" | "avatar" | "textField" | "buttons">;
+export {};