@reltio/components 1.4.1836-hf → 1.4.1837

package/cjs/ColoredSourceIcon/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColoredSourceIcon = void 0;
+var ColoredSourceIcon_1 = require("./ColoredSourceIcon");
+Object.defineProperty(exports, "ColoredSourceIcon", { enumerable: true, get: function () { return __importDefault(ColoredSourceIcon_1).default; } });

package/cjs/ColumnsSettings/components/ColumnListItem/ColumnListItem.js

@@ -8,13 +8,13 @@ var react_1 = __importDefault(require("react"));
 var prop_types_1 = __importDefault(require("prop-types"));
 var classnames_1 = __importDefault(require("classnames"));
 var AttributeListItem_1 = require("../../../AttributeListItem");
-var Highlighter_1 = __importDefault(require("../../../components/Highlighter/Highlighter"));
+var Highlighter_1 = require("../../../Highlighter");
 var styles_1 = require("./styles");
 var ColumnListItem = function (_a) {
     var _b;
     var item = _a.item, onClick = _a.onClick, checked = _a.checked, level = _a.level, style = _a.style, isFocused = _a.isFocused, isGroupItem = _a.isGroupItem, hideCheckBox = _a.hideCheckBox;
     var styles = (0, styles_1.useStyles)();
-    return (react_1.default.createElement(AttributeListItem_1.AttributeListItem, { hideCheckBox: hideCheckBox, key: item.id, onClick: onClick, checked: checked, level: level, data: item, label: react_1.default.createElement(Highlighter_1.default, { text: item.label, highlight: item.filterText }), labelInText: item.label, style: style, isFocused: isFocused, hideIcon: isGroupItem, className: (0, classnames_1.default)((_b = {}, _b[styles.groupItem] = isGroupItem, _b)) }));
+    return (react_1.default.createElement(AttributeListItem_1.AttributeListItem, { hideCheckBox: hideCheckBox, key: item.id, onClick: onClick, checked: checked, level: level, data: item, label: react_1.default.createElement(Highlighter_1.Highlighter, { text: item.label, highlight: item.filterText }), labelInText: item.label, style: style, isFocused: isFocused, hideIcon: isGroupItem, className: (0, classnames_1.default)((_b = {}, _b[styles.groupItem] = isGroupItem, _b)) }));
 };
 exports.ColumnListItem = ColumnListItem;
 exports.ColumnListItem.propTypes = {

package/cjs/CommentsContainer/CommentsContainer.d.ts

@@ -0,0 +1,12 @@
+import { Comment } from '@reltio/mdm-sdk';
+type Props = {
+    className?: string;
+    uri: string;
+    objectType: Comment['objectType'];
+    relatedObjectUris: Comment['relatedObjectUris'];
+    allowOnlyOneComment?: boolean;
+    showAlways?: boolean;
+    onChangePopupVisibility?: (visibility: boolean) => void;
+};
+export declare const CommentsContainer: ({ className, uri, objectType, relatedObjectUris, onChangePopupVisibility, allowOnlyOneComment, showAlways }: Props) => JSX.Element;
+export {};

package/cjs/CommentsContainer/CommentsContainer.js

@@ -0,0 +1,95 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CommentsContainer = void 0;
+var react_1 = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var useDidUpdateEffect_1 = require("../hooks/useDidUpdateEffect");
+var RelatedObjectUrisContext_1 = require("../contexts/RelatedObjectUrisContext");
+var CollaborationContext_1 = require("../contexts/CollaborationContext");
+var CommentButton_1 = require("./components/CommentButton");
+var AddCommentButton_1 = require("./components/AddCommentButton");
+var CollaborationPopup_1 = require("./components/CollaborationPopup");
+var styles_1 = require("./styles");
+var CommentsContainer = function (_a) {
+    var _b;
+    var className = _a.className, uri = _a.uri, objectType = _a.objectType, relatedObjectUris = _a.relatedObjectUris, onChangePopupVisibility = _a.onChangePopupVisibility, _c = _a.allowOnlyOneComment, allowOnlyOneComment = _c === void 0 ? false : _c, _d = _a.showAlways, showAlways = _d === void 0 ? false : _d;
+    var styles = (0, styles_1.useStyles)();
+    var _e = (0, react_1.useState)(null), anchorEl = _e[0], setAnchorEl = _e[1];
+    var _f = (0, react_1.useState)(false), shouldOpenPopup = _f[0], setShouldOpenPopup = _f[1];
+    var isOpenPopup = shouldOpenPopup && Boolean(anchorEl);
+    var _g = (0, react_1.useContext)(CollaborationContext_1.CollaborationContext), currentComment = _g.currentComment, commentsMap = _g.commentsMap, getComment = _g.getComment, clearCurrentComment = _g.clearCurrentComment, objectTypes = _g.objectTypes;
+    var showComments = !!commentsMap && (!objectTypes || objectTypes.includes(objectType));
+    var openComments = ((commentsMap === null || commentsMap === void 0 ? void 0 : commentsMap[uri]) || []).filter(function (_a) {
+        var status = _a.status;
+        return status !== 'resolved';
+    }).reverse();
+    var shouldShowAddCommentButton = !allowOnlyOneComment || (allowOnlyOneComment && openComments.length === 0);
+    var isOpenPopupWithNewComment = currentComment === null && isOpenPopup;
+    var handleClickCommentButton = function (commentId) {
+        getComment(commentId);
+        setShouldOpenPopup(true);
+    };
+    var handleClickAddCommentButton = function (event) {
+        setAnchorEl(event.currentTarget);
+        setShouldOpenPopup(true);
+    };
+    var handleClose = function () {
+        setAnchorEl(null);
+        clearCurrentComment();
+        setShouldOpenPopup(false);
+    };
+    (0, useDidUpdateEffect_1.useDidUpdateEffect)(function () {
+        if (onChangePopupVisibility) {
+            onChangePopupVisibility(isOpenPopup);
+        }
+    }, [isOpenPopup]);
+    var additionalRelatedObjectUris = (0, react_1.useContext)(RelatedObjectUrisContext_1.RelatedObjectUrisContext);
+    var allRelatedObjectUris = (0, react_1.useMemo)(function () {
+        return additionalRelatedObjectUris ? __spreadArray(__spreadArray([], relatedObjectUris, true), additionalRelatedObjectUris, true) : relatedObjectUris;
+    }, [additionalRelatedObjectUris, relatedObjectUris]);
+    return (showComments && (react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.root, className) },
+        shouldShowAddCommentButton && (react_1.default.createElement(AddCommentButton_1.AddCommentButton, { className: (0, classnames_1.default)(styles.addButton, (_b = {},
+                _b[styles.showAlways] = showAlways || isOpenPopupWithNewComment,
+                _b)), onClick: handleClickAddCommentButton })),
+        openComments.map(function (_a) {
+            var replies = _a.replies, commentId = _a.commentId;
+            return (react_1.default.createElement(CommentButton_1.CommentButton, { ref: commentId === (currentComment === null || currentComment === void 0 ? void 0 : currentComment.commentId) ? setAnchorEl : null, key: commentId, onClick: function () { return handleClickCommentButton(commentId); } }, 1 + replies));
+        }),
+        react_1.default.createElement(CollaborationPopup_1.CollaborationPopup, { anchorEl: anchorEl, open: isOpenPopup, onClose: handleClose, uri: uri, relatedObjectUris: allRelatedObjectUris, objectType: objectType, comment: currentComment }))));
+};
+exports.CommentsContainer = CommentsContainer;

package/cjs/CommentsContainer/CommentsContainer.test-data.d.ts

@@ -0,0 +1,20 @@
+import { CollaborationObjectTypes, Entity, Metadata } from '@reltio/mdm-sdk';
+export declare const createDefaultMetadata: () => Metadata;
+export declare const createDefaultEntity: () => Entity;
+export declare const createDefaultComment: () => {
+    selfLink: string;
+    commentId: string;
+    createdBy: string;
+    createdTime: number;
+    modifiedTime: number;
+    deleted: boolean;
+    visibility: string;
+    status: "open";
+    objectId: string;
+    objectType: CollaborationObjectTypes;
+    permanentLink: string;
+    content: string;
+    namedUsers: any[];
+    replies: any[];
+    relatedObjectUris: string[];
+};

package/cjs/CommentsContainer/CommentsContainer.test-data.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createDefaultComment = exports.createDefaultEntity = exports.createDefaultMetadata = void 0;
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var createDefaultMetadata = function () { return ({
+    entityTypes: [
+        {
+            uri: 'configuration/entityTypes/HCA',
+            label: 'HCA',
+            attributes: [
+                {
+                    label: 'Customer Name',
+                    name: 'Name',
+                    uri: 'configuration/entityTypes/HCA/attributes/Name',
+                    type: 'String'
+                }
+            ]
+        }
+    ],
+    relationTypes: [
+        {
+            uri: 'configuration/relationTypes/HasAddress',
+            label: 'has address'
+        }
+    ]
+}); };
+exports.createDefaultMetadata = createDefaultMetadata;
+var createDefaultEntity = function () { return ({
+    uri: 'entities/13JKIKAz',
+    type: 'configuration/entityTypes/HCA',
+    attributes: {
+        Name: [
+            {
+                type: 'configuration/entityTypes/HCA/attributes/Name',
+                ov: true,
+                value: 'Active',
+                lookupCode: 'ACTI',
+                lookupRawValue: 'ACTI',
+                uri: 'entities/13JKIKAz/attributes/Name/2mlWuqDq5'
+            },
+            {
+                type: 'configuration/entityTypes/HCA/attributes/Name',
+                ov: false,
+                value: 'Regression HCA entity 2',
+                uri: 'entities/13JKIKAz/attributes/Name/1eoo71SIL'
+            }
+        ]
+    },
+    label: 'Active - 8 תלתן מודיעין-מכבים-רעות',
+    defaultProfilePic: 'https://reltio-images.s3.amazonaws.com/14999388371207819392702122868122083834.jpg'
+}); };
+exports.createDefaultEntity = createDefaultEntity;
+var createDefaultComment = function () { return ({
+    selfLink: '',
+    commentId: 'id1',
+    createdBy: 'vyacheslav.kovyazin',
+    createdTime: 1620280049022,
+    modifiedTime: 1620280061505,
+    deleted: false,
+    visibility: 'public',
+    status: 'open',
+    objectId: 'uri1',
+    objectType: mdm_sdk_1.CollaborationObjectTypes.ENTITY,
+    permanentLink: '',
+    content: 'comment',
+    namedUsers: [],
+    replies: [],
+    relatedObjectUris: ['relatedEntityUri']
+}); };
+exports.createDefaultComment = createDefaultComment;

package/cjs/CommentsContainer/CommentsContainer.test.d.ts

@@ -0,0 +1 @@
+export {};

package/cjs/CommentsContainer/CommentsContainer.test.js

@@ -0,0 +1,297 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var test_utils_1 = require("react-dom/test-utils");
+var enzyme_1 = require("enzyme");
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var MdmModuleContext_1 = require("../contexts/MdmModuleContext");
+var CollaborationContext_1 = require("../contexts/CollaborationContext");
+var RelatedObjectUrisContext_1 = require("../contexts/RelatedObjectUrisContext");
+var DropDownMenuButton_1 = require("../DropDownMenuButton");
+var DefaultMenuItemRenderer_1 = require("../DropDownMenuButton/components/DefaultMenuItemRenderer");
+var CollaborationPopup_1 = require("./components/CollaborationPopup");
+var AddCommentButton_1 = require("./components/AddCommentButton");
+var CommentButton_1 = require("./components/CommentButton");
+var CommentsContainer_test_data_1 = require("./CommentsContainer.test-data");
+var CommentsContainer_1 = require("./CommentsContainer");
+var defaultCollaborationContextValue = {
+    createComment: jest.fn().mockResolvedValue(undefined),
+    editComment: jest.fn().mockResolvedValue(undefined),
+    createReply: jest.fn().mockResolvedValue(undefined),
+    editReply: jest.fn().mockResolvedValue(undefined),
+    getCommentsCount: jest.fn().mockResolvedValue(undefined),
+    getCommentState: jest.fn().mockReturnValue({}),
+    deleteComment: jest.fn(),
+    deleteReply: jest.fn(),
+    reOpenThread: jest.fn(),
+    resolveThread: jest.fn(),
+    updateCommentState: jest.fn(),
+    clearCommentState: jest.fn(),
+    getComment: jest.fn(),
+    clearCurrentComment: jest.fn(),
+    getComments: jest.fn(),
+    sending: false,
+    loading: false,
+    commentsMap: {},
+    currentComment: null,
+    comments: [],
+    pageToken: null
+};
+var defaultMdmValues = {
+    metadata: (0, CommentsContainer_test_data_1.createDefaultMetadata)(),
+    entity: (0, CommentsContainer_test_data_1.createDefaultEntity)(),
+    tenant: { id: 'alenat', name: 'alenat' },
+    user: { username: 'vyacheslav.kovyazin' },
+    collaborationPath: 'https://cservice-dev.reltio.com/reltio-collaboration/tst-01',
+    uiPath: 'http://localhost:3000/ui/alenat/'
+};
+var defaultProps = {
+    relatedObjectUris: ['relatedEntityUri'],
+    uri: 'uri1',
+    objectType: mdm_sdk_1.CollaborationObjectTypes.ENTITY,
+    showAlways: false,
+    allowOnlyOneComment: false,
+    onChangePopupVisibility: jest.fn()
+};
+var setUpWithoutContext = function (_a) {
+    var _b = _a === void 0 ? {} : _a, _c = _b.props, props = _c === void 0 ? defaultProps : _c, _d = _b.providers, CustomProviders = _d === void 0 ? react_1.default.Fragment : _d;
+    return (0, enzyme_1.mount)(react_1.default.createElement(CustomProviders, null,
+        react_1.default.createElement(CommentsContainer_1.CommentsContainer, __assign({}, props))));
+};
+var setUp = function (_a) {
+    var _b = _a === void 0 ? {} : _a, _c = _b.props, props = _c === void 0 ? defaultProps : _c, _d = _b.mdmValues, mdmValues = _d === void 0 ? defaultMdmValues : _d, _e = _b.collaborationContextValue, collaborationContextValue = _e === void 0 ? defaultCollaborationContextValue : _e, _f = _b.providers, CustomProviders = _f === void 0 ? react_1.default.Fragment : _f;
+    var Providers = function (_a) {
+        var children = _a.children;
+        return (react_1.default.createElement(CustomProviders, null,
+            react_1.default.createElement(MdmModuleContext_1.MdmModuleProvider, { values: mdmValues },
+                react_1.default.createElement(CollaborationContext_1.CollaborationContext.Provider, { value: collaborationContextValue }, children))));
+    };
+    return setUpWithoutContext({ props: props, providers: Providers });
+};
+describe('CommentsContainer tests', function () {
+    it('should render nothing if CollaborationContext is not set', function () {
+        var component = setUpWithoutContext();
+        expect(component.isEmptyRender()).toBe(true);
+    });
+    it('should render nothing if objectType is not specified in CollaborationContext', function () {
+        var collaborationContextValue = __assign(__assign({}, defaultCollaborationContextValue), { objectTypes: [mdm_sdk_1.CollaborationObjectTypes.RELATION] });
+        var component = setUp({ collaborationContextValue: collaborationContextValue });
+        expect(component.isEmptyRender()).toBe(true);
+    });
+    it('should render AddCommentButton if CollaborationContext is defined', function () {
+        var component = setUp();
+        expect(component.isEmptyRender()).toBe(false);
+        expect(component.find(AddCommentButton_1.AddCommentButton)).toHaveLength(1);
+        expect(component.find(CommentButton_1.CommentButton)).toHaveLength(0);
+    });
+    it('should render AddCommentButton with correctly className if showAlways prop is "true"', function () {
+        var props = __assign(__assign({}, defaultProps), { showAlways: true });
+        var component = setUp({ props: props });
+        expect(component.find(AddCommentButton_1.AddCommentButton).prop('className')).toBe('addButton showAlways');
+    });
+    it('should render AddCommentButton with correctly className if showAlways prop is "false"', function () {
+        var props = __assign(__assign({}, defaultProps), { showAlways: false });
+        var component = setUp({ props: props });
+        expect(component.find(AddCommentButton_1.AddCommentButton).prop('className')).toBe('addButton');
+    });
+    it('should render AddCommentButton with correctly className if open popup with new comment', function () {
+        var component = setUp();
+        component.find(AddCommentButton_1.AddCommentButton).simulate('click', { currentTarget: 'Element' });
+        expect(component.find(AddCommentButton_1.AddCommentButton).prop('className')).toBe('addButton showAlways');
+    });
+    it('should not render AddCommentButton if allowOnlyOneComment prop is "true" and commentsMap has open comments', function () {
+        var _a;
+        var commentsMap = (_a = {},
+            _a[defaultProps.uri] = [{ commentId: 'id1', status: 'open', replies: 1 }],
+            _a);
+        var collaborationContextValue = __assign(__assign({}, defaultCollaborationContextValue), { commentsMap: commentsMap });
+        var props = __assign(__assign({}, defaultProps), { allowOnlyOneComment: true });
+        var component = setUp({ props: props, collaborationContextValue: collaborationContextValue });
+        expect(component.find(AddCommentButton_1.AddCommentButton)).toHaveLength(0);
+    });
+    it('should render CommentButton for correct uri in commentsMap', function () {
+        var _a;
+        var commentsMap = (_a = {},
+            _a[defaultProps.uri] = [
+                { commentId: 'id1', status: 'open', replies: 1 },
+                { commentId: 'id2', status: 'open', replies: 2 },
+                { commentId: 'id3', status: 'resolved', replies: 3 }
+            ],
+            _a.uri2 = [{ commentId: 'id4', status: 'open', replies: 1 }],
+            _a);
+        var collaborationContextValue = __assign(__assign({}, defaultCollaborationContextValue), { commentsMap: commentsMap });
+        var component = setUp({ collaborationContextValue: collaborationContextValue });
+        expect(component.isEmptyRender()).toBe(false);
+        expect(component.find(AddCommentButton_1.AddCommentButton)).toHaveLength(1);
+        expect(component.find(CommentButton_1.CommentButton)).toHaveLength(2);
+        expect(component.find(CommentButton_1.CommentButton).at(0).text()).toBe('3');
+        expect(component.find(CommentButton_1.CommentButton).at(1).text()).toBe('2');
+    });
+    it('should not render CommentButtons if there is no needed uri in commentsMap', function () {
+        var commentsMap = {
+            uri2: [
+                { commentId: 'id1', status: 'open', replies: 1 },
+                { commentId: 'id2', status: 'open', replies: 2 }
+            ]
+        };
+        var collaborationContextValue = __assign(__assign({}, defaultCollaborationContextValue), { commentsMap: commentsMap });
+        var component = setUp({ collaborationContextValue: collaborationContextValue });
+        expect(component.isEmptyRender()).toBe(false);
+        expect(component.find(AddCommentButton_1.AddCommentButton)).toHaveLength(1);
+        expect(component.find(CommentButton_1.CommentButton)).toHaveLength(0);
+    });
+    it('should render CollaborationPopup if currentComment does not exist', function () {
+        var component = setUp();
+        expect(component.find(CollaborationPopup_1.CollaborationPopup).props()).toMatchObject({
+            anchorEl: null,
+            open: false,
+            uri: defaultProps.uri,
+            objectType: defaultProps.objectType,
+            comment: null
+        });
+    });
+    it('should render CollaborationPopup if currentComment exists and commentsButton is clicked', function () {
+        var _a;
+        var currentComment = (0, CommentsContainer_test_data_1.createDefaultComment)();
+        var commentsMap = (_a = {},
+            _a[defaultProps.uri] = [{ commentId: currentComment.commentId, status: 'open', replies: 0 }],
+            _a);
+        var collaborationContextValue = __assign(__assign({}, defaultCollaborationContextValue), { commentsMap: commentsMap, currentComment: currentComment });
+        var component = setUp({ collaborationContextValue: collaborationContextValue });
+        var onClick = component.find(CommentButton_1.CommentButton).prop('onClick');
+        (0, test_utils_1.act)(function () {
+            onClick(currentComment.commentId);
+        });
+        component.update();
+        expect(component.find(CommentButton_1.CommentButton).html()).toBe(component.find(CollaborationPopup_1.CollaborationPopup).prop('anchorEl').outerHTML);
+        expect(component.find(CollaborationPopup_1.CollaborationPopup).props()).toMatchObject({
+            open: true,
+            uri: defaultProps.uri,
+            objectType: defaultProps.objectType,
+            comment: currentComment
+        });
+    });
+    it('handleClickAddCommentButton handler should work correctly', function () {
+        var component = setUp();
+        expect(component.find(CollaborationPopup_1.CollaborationPopup).prop('anchorEl')).toBe(null);
+        component.find(AddCommentButton_1.AddCommentButton).simulate('click', { currentTarget: 'Element' });
+        expect(component.find(CollaborationPopup_1.CollaborationPopup).prop('anchorEl')).not.toBe(null);
+        expect(component.find(CollaborationPopup_1.CollaborationPopup).prop('open')).toBe(true);
+    });
+    it('handleClose handler should work correctly', function () {
+        var _a;
+        var currentComment = (0, CommentsContainer_test_data_1.createDefaultComment)();
+        var commentsMap = (_a = {},
+            _a[defaultProps.uri] = [{ commentId: currentComment.commentId, status: 'open', replies: 0 }],
+            _a);
+        var collaborationContextValue = __assign(__assign({}, defaultCollaborationContextValue), { commentsMap: commentsMap, currentComment: currentComment });
+        var component = setUp({ collaborationContextValue: collaborationContextValue });
+        var onClick = component.find(CommentButton_1.CommentButton).prop('onClick');
+        (0, test_utils_1.act)(function () {
+            onClick(currentComment.commentId);
+        });
+        component.update();
+        expect(component.find(CollaborationPopup_1.CollaborationPopup).prop('open')).toBe(true);
+        expect(component.find(CollaborationPopup_1.CollaborationPopup).prop('anchorEl')).not.toBe(null);
+        (0, test_utils_1.act)(function () {
+            component.find(CollaborationPopup_1.CollaborationPopup).prop('onClose')();
+        });
+        component.update();
+        expect(component.find(CollaborationPopup_1.CollaborationPopup).prop('open')).toBe(false);
+        expect(component.find(CollaborationPopup_1.CollaborationPopup).prop('anchorEl')).toBe(null);
+        expect(collaborationContextValue.clearCurrentComment).toBeCalled();
+    });
+    it('handleClickCommentButton should work correctly', function () {
+        var _a;
+        var currentComment = (0, CommentsContainer_test_data_1.createDefaultComment)();
+        var commentsMap = (_a = {},
+            _a[defaultProps.uri] = [{ commentId: currentComment.commentId, status: 'open', replies: 0 }],
+            _a);
+        var collaborationContextValue = __assign(__assign({}, defaultCollaborationContextValue), { commentsMap: commentsMap, currentComment: currentComment });
+        var component = setUp({ collaborationContextValue: collaborationContextValue });
+        component.find(CommentButton_1.CommentButton).simulate('click', null);
+        expect(collaborationContextValue.getComment).toBeCalledWith(currentComment.commentId);
+    });
+    it('should call onChangePopupVisibility handler when anchorEl changed', function () {
+        var onChangePopupVisibility = jest.fn();
+        var props = __assign(__assign({}, defaultProps), { onChangePopupVisibility: onChangePopupVisibility });
+        var component = setUp({ props: props });
+        expect(onChangePopupVisibility).not.toHaveBeenCalled();
+        component.find(AddCommentButton_1.AddCommentButton).simulate('click', { currentTarget: 'Element' });
+        expect(onChangePopupVisibility).toHaveBeenCalledWith(true);
+        (0, test_utils_1.act)(function () {
+            component.find(CollaborationPopup_1.CollaborationPopup).prop('onClose')();
+        });
+        expect(onChangePopupVisibility).toHaveBeenCalledWith(false);
+    });
+    it('should not close popup if click menu item in kebab', function () {
+        var _a;
+        var currentComment = (0, CommentsContainer_test_data_1.createDefaultComment)();
+        var commentsMap = (_a = {},
+            _a[defaultProps.uri] = [{ commentId: currentComment.commentId, status: 'open', replies: 0 }],
+            _a);
+        var collaborationContextValue = __assign(__assign({}, defaultCollaborationContextValue), { commentsMap: commentsMap, currentComment: currentComment });
+        var component = setUp({ collaborationContextValue: collaborationContextValue });
+        var onClick = component.find(CommentButton_1.CommentButton).prop('onClick');
+        (0, test_utils_1.act)(function () {
+            onClick(currentComment.commentId);
+        });
+        component.update();
+        expect(component.find(CollaborationPopup_1.CollaborationPopup).prop('open')).toBe(true);
+        component.find(DropDownMenuButton_1.DropDownMenuButton).at(0).find('button').simulate('click', { currentTarget: 'Element' });
+        component.update();
+        (0, test_utils_1.act)(function () {
+            component
+                .find(DefaultMenuItemRenderer_1.DefaultMenuItemRenderer)
+                .at(0)
+                .find('li')
+                .at(0)
+                .simulate('click', { currentTarget: 'Element' });
+        });
+        component.update();
+        expect(component.find(CollaborationPopup_1.CollaborationPopup).prop('anchorEl')).not.toBe(null);
+        (0, test_utils_1.act)(function () {
+            component.find(CollaborationPopup_1.CollaborationPopup).prop('onClose')();
+        });
+        component.update();
+        expect(component.find(CollaborationPopup_1.CollaborationPopup).prop('anchorEl')).toBe(null);
+    });
+    it('should use RelatedObjectUrisContext for collect relatedObjectUris', function () {
+        var _a;
+        var additionalRelatedObjectUris = ['additionalUri1', 'additionalUri2'];
+        var currentComment = (0, CommentsContainer_test_data_1.createDefaultComment)();
+        var commentsMap = (_a = {},
+            _a[defaultProps.uri] = [{ commentId: currentComment.commentId, status: 'open', replies: 0 }],
+            _a);
+        var collaborationContextValue = __assign(__assign({}, defaultCollaborationContextValue), { commentsMap: commentsMap, currentComment: currentComment });
+        var Providers = function (_a) {
+            var children = _a.children;
+            return (react_1.default.createElement(RelatedObjectUrisContext_1.RelatedObjectUrisContext.Provider, { value: additionalRelatedObjectUris }, children));
+        };
+        var component = setUp({ collaborationContextValue: collaborationContextValue, providers: Providers });
+        expect(component.find(CollaborationPopup_1.CollaborationPopup).prop('relatedObjectUris')).toEqual(__spreadArray(__spreadArray([], defaultProps.relatedObjectUris, true), additionalRelatedObjectUris, true));
+    });
+});

package/cjs/CommentsContainer/components/AddCommentButton/AddCommentButton.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+type Props = {
+    className?: string;
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+};
+export declare const AddCommentButton: ({ className, onClick }: Props) => JSX.Element;
+export {};

package/cjs/CommentsContainer/components/AddCommentButton/AddCommentButton.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AddCommentButton = void 0;
+var react_1 = __importDefault(require("react"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var AddComment_1 = __importDefault(require("../../../icons/AddComment"));
+var BasicCommentButton_1 = require("../BasicCommentButton");
+var AddCommentButton = function (_a) {
+    var className = _a.className, onClick = _a.onClick;
+    return (react_1.default.createElement(BasicCommentButton_1.BasicCommentButton, { className: className, onClick: onClick, tooltipTitle: ui_i18n_1.default.text('Add comment'), icon: AddComment_1.default }));
+};
+exports.AddCommentButton = AddCommentButton;

package/cjs/CommentsContainer/components/AddCommentButton/index.d.ts

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

package/cjs/CommentsContainer/components/AddCommentButton/index.js

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

package/cjs/CommentsContainer/components/BasicCommentButton/BasicCommentButton.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare const BasicCommentButton: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
+    tooltipTitle: string;
+    icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+    children?: React.ReactNode;
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    className?: string;
+} & React.RefAttributes<HTMLDivElement>>;

package/cjs/CommentsContainer/components/BasicCommentButton/BasicCommentButton.js

@@ -0,0 +1,41 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BasicCommentButton = void 0;
+var react_1 = __importDefault(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var Tooltip_1 = __importDefault(require("@mui/material/Tooltip"));
+var styles_1 = require("./styles");
+exports.BasicCommentButton = react_1.default.forwardRef(function (_a, ref) {
+    var children = _a.children, tooltipTitle = _a.tooltipTitle, Icon = _a.icon, onClick = _a.onClick, className = _a.className, restProps = __rest(_a, ["children", "tooltipTitle", "icon", "onClick", "className"]);
+    var styles = (0, styles_1.useStyles)();
+    return (react_1.default.createElement(Tooltip_1.default, { title: tooltipTitle },
+        react_1.default.createElement("div", __assign({ ref: ref, className: (0, classnames_1.default)(styles.root, className), onClick: onClick }, restProps),
+            react_1.default.createElement(Icon, { className: styles.icon }),
+            children)));
+});
+exports.BasicCommentButton.displayName = 'BasicCommentButton';

package/cjs/CommentsContainer/components/BasicCommentButton/index.d.ts

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

package/cjs/CommentsContainer/components/BasicCommentButton/index.js

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

package/cjs/CommentsContainer/components/BasicCommentButton/styles.d.ts

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"icon" | "root">;

package/cjs/CommentsContainer/components/BasicCommentButton/styles.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@mui/styles");
+exports.useStyles = (0, styles_1.makeStyles)(function () { return ({
+    root: {
+        position: 'relative',
+        height: '18px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginLeft: '4px',
+        cursor: 'pointer'
+    },
+    icon: {
+        '&:hover': {
+            fillOpacity: 0.7
+        }
+    }
+}); });