@reltio/components 1.4.817 → 1.4.821

package/components/CollaborationItem/CollaborationItem.d.ts

@@ -11,5 +11,5 @@ declare type Props = {
     messagesRef?: React.RefCallback<HTMLDivElement>;
     comment?: CommentType;
 };
-export declare const CollaborationItem: ({ uri, relatedObjectUris, objectType, classes, popperRef, messagesRef, comment }: Props) => JSX.Element;
+export declare const CollaborationItem: React.MemoExoticComponent<({ uri, relatedObjectUris, objectType, classes, popperRef, messagesRef, comment }: Props) => JSX.Element>;
 export {};

package/components/CollaborationItem/CollaborationItem.js

@@ -29,7 +29,7 @@ var Comment_1 = require("./Comment/Comment");
 var RepliedComment_1 = require("./RepliedComment/RepliedComment");
 var SendMessageArea_1 = require("./SendMessageArea/SendMessageArea");
 var styles_1 = require("./styles");
-var CollaborationItem = function (_a) {
+exports.CollaborationItem = react_1.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 = react_1.useRef();
     var styles = styles_1.useStyles({ classes: classes });
@@ -51,5 +51,4 @@ var CollaborationItem = function (_a) {
                 react_1.default.createElement(Box_1.default, { className: styles.replies }, comment.replies.map(function (reply) { return (react_1.default.createElement(RepliedComment_1.RepliedComment, { key: reply.replyId, className: styles.repliedComment, reply: reply })); }))),
             sendMessageArea)),
         !comment && sendMessageArea));
-};
-exports.CollaborationItem = CollaborationItem;
+});

package/components/attributes/inline/ComplexAttribute/ComplexAttribute.js

@@ -61,8 +61,8 @@ var ComplexAttribute = function (_a) {
                 crosswalks.map(function (crosswalk) { return (react_1.default.createElement(CrosswalkIcon_1.default, { key: mdm_sdk_1.getCrosswalkId(crosswalk), crosswalk: crosswalk, className: styles.crosswalkIcon })); })),
             react_1.default.createElement(index_1.Spacer, null),
             react_1.default.createElement("div", { className: styles.actions },
-                showPin && react_1.default.createElement(PinButton_1.default, { isPinned: attributeValue.pin, onClick: function () { return onPin({ attributeValue: attributeValue }); } }),
-                showIgnore && (react_1.default.createElement(IgnoreButton_1.default, { isIgnored: attributeValue.ignored, onClick: function () { return onIgnore({ attributeValue: attributeValue }); } })),
+                showPin && (react_1.default.createElement(PinButton_1.default, { disabled: !canEdit, isPinned: attributeValue.pin, onClick: function () { return onPin({ attributeValue: attributeValue }); } })),
+                showIgnore && (react_1.default.createElement(IgnoreButton_1.default, { disabled: !canEdit, isIgnored: attributeValue.ignored, onClick: function () { return onIgnore({ attributeValue: attributeValue }); } })),
                 showDelete && (react_1.default.createElement(DeleteButton_1.default, { onClick: function () {
                         return onDelete({
                             attributeType: attributeType,

package/components/attributes/inline/SimpleAttribute/SimpleAttribute.js

@@ -44,14 +44,21 @@ var SimpleAttribute = function (_a) {
     var _e = useAttributeState_1.useAttributeState(), isReadingMode = _e.isReadingMode, isEditingMode = _e.isEditingMode, isHovered = _e.isHovered, onMouseOver = _e.onMouseOver, onMouseOut = _e.onMouseOut, setReadingMode = _e.setReadingMode, setEditingMode = _e.setEditingMode;
     var containerRef = react_1.useRef();
     var id = mdm_sdk_1.getLastUriPart(attributeValue.uri);
-    var canEdit = allowEdit && mdm_sdk_1.checkMetadataForUpdate(mdm_sdk_1.ModeTypes.EDITING, attributeType) && !attributeType.system;
-    var canDelete = allowDelete && mdm_sdk_1.checkMetadataForDelete(mdm_sdk_1.ModeTypes.EDITING, attributeType) && !attributeType.system;
+    var crosswalkDisabled = mdm_sdk_1.isCrosswalkDisabled(crosswalk);
+    var canModifyAttribute = !attributeType.system && !crosswalkDisabled;
+    var canEdit = canModifyAttribute && allowEdit && mdm_sdk_1.checkMetadataForUpdate(mdm_sdk_1.ModeTypes.EDITING, attributeType);
+    var canDelete = canModifyAttribute && allowDelete && mdm_sdk_1.checkMetadataForDelete(mdm_sdk_1.ModeTypes.EDITING, attributeType);
     var isTemporary = mdm_sdk_1.isTempUri(attributeValue.uri);
     var showPin = !isTemporary && ((!isReadingMode && canEdit) || attributeValue.pin);
     var showIgnore = !isTemporary && ((!isReadingMode && canEdit) || attributeValue.ignored);
     var color = contexts_1.useCrosswalkColor(crosswalk);
     var _f = contexts_1.useCrosswalkHighlight(crosswalk), isHighlighted = _f.isHighlighted, isDimmed = _f.isDimmed, highlightCrosswalk = _f.highlightCrosswalk, removeHighlight = _f.removeHighlight;
-    var styles = styles_1.useStyles({ isFilled: isHighlighted, isOpaque: !isDimmed, color: color });
+    var styles = styles_1.useStyles({
+        variant: crosswalkDisabled ? 'outlined' : 'filled',
+        opaque: !isDimmed,
+        fullyColored: isHighlighted,
+        color: color
+    });
     var actions = [
         {
             crosswalk: crosswalk,
@@ -88,8 +95,8 @@ var SimpleAttribute = function (_a) {
         react_1.default.createElement("div", { className: styles.attributeValue },
             react_1.default.createElement(DataTypeValue_1.default, { value: mdm_sdk_1.getAttributeValue(attributeValue), dataTypeDefinition: mdm_sdk_1.getAttrDataTypeDefinition(attributeType) })),
         react_1.default.createElement("div", { className: styles.actions },
-            showPin && react_1.default.createElement(PinButton_1.default, { isPinned: attributeValue.pin, onClick: function () { return onPin({ attributeValue: attributeValue }); } }),
-            showIgnore && (react_1.default.createElement(IgnoreButton_1.default, { isIgnored: attributeValue.ignored, onClick: function () { return onIgnore({ attributeValue: attributeValue }); } })),
+            showPin && (react_1.default.createElement(PinButton_1.default, { isPinned: attributeValue.pin, onClick: function () { return onPin({ attributeValue: attributeValue }); }, disabled: !canEdit })),
+            showIgnore && (react_1.default.createElement(IgnoreButton_1.default, { isIgnored: attributeValue.ignored, onClick: function () { return onIgnore({ attributeValue: attributeValue }); }, disabled: !canEdit })),
             isHovered && (react_1.default.createElement(DropDownMenuButton_1.default, { MenuItemRenderer: CrosswalkMenuItem_1.default, menuId: "simple-attribute-additional-actions-" + id, buttonComponent: SmallIconButton_1.SmallIconButtonWithTooltip, buttonProps: {
                     icon: MoreVert_1.default,
                     size: 'XS',

package/components/attributes/inline/SimpleAttribute/styles.d.ts

@@ -1,6 +1,7 @@
 declare type StylesProps = {
-    isFilled: boolean;
-    isOpaque: boolean;
+    variant: 'filled' | 'outlined';
+    fullyColored: boolean;
+    opaque: boolean;
     color: string;
 };
 export declare const useStyles: (props: StylesProps) => import("@material-ui/core/styles/withStyles").ClassNameMap<"attributeValue" | "root" | "actions">;

package/components/attributes/inline/SimpleAttribute/styles.js

@@ -1,20 +1,45 @@
 "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);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useStyles = void 0;
 var styles_1 = require("@material-ui/core/styles");
 exports.useStyles = styles_1.makeStyles(function () { return ({
     root: function (_a) {
-        var isFilled = _a.isFilled, isOpaque = _a.isOpaque, color = _a.color;
-        return ({
-            height: '28px',
+        var fullyColored = _a.fullyColored, opaque = _a.opaque, color = _a.color, variant = _a.variant;
+        return (__assign(__assign(__assign({ height: '28px' }, (variant === 'filled' && {
             borderRadius: '4px',
-            background: isFilled ? color : "linear-gradient(to right, " + color + " 8px, rgba(0, 0, 0, 0.05) 8px)",
-            display: 'flex',
-            alignItems: 'center',
-            maxWidth: '230px',
-            opacity: isOpaque ? 1 : 0.38,
-            transition: 'opacity 0.3s'
-        });
+            background: fullyColored ? color : "linear-gradient(to right, " + color + " 8px, rgba(0,0,0,0.05) 8px)"
+        })), (variant === 'outlined' && {
+            '&::after': {
+                content: '""',
+                position: 'absolute',
+                background: color,
+                borderRadius: '4px 0px 0px 4px',
+                width: '8px',
+                height: '100%',
+                pointerEvents: 'none'
+            },
+            '&::before': {
+                content: '""',
+                position: 'absolute',
+                boxSizing: 'border-box',
+                borderRadius: '4px',
+                border: fullyColored ? color + " solid 2px" : 'rgba(0,0,0,0.12) solid 1px',
+                width: '100%',
+                height: '100%',
+                pointerEvents: 'none'
+            }
+        })), { display: 'flex', alignItems: 'center', maxWidth: '230px', opacity: opaque ? 1 : 0.38, transition: 'opacity 0.3s', position: 'relative' }));
     },
     attributeValue: {
         marginLeft: '16px',

package/components/attributes/inline/common/IgnoreButton.d.ts

@@ -2,6 +2,7 @@
 declare type Props = {
     isIgnored: boolean;
     onClick: () => void;
+    disabled?: boolean;
 };
-declare const IgnoreButton: ({ isIgnored, onClick }: Props) => JSX.Element;
+declare const IgnoreButton: ({ isIgnored, onClick, disabled }: Props) => JSX.Element;
 export default IgnoreButton;

package/components/attributes/inline/common/IgnoreButton.js

@@ -9,7 +9,7 @@ var Ignored_1 = __importDefault(require("../../../../icons/Ignored"));
 var IgnoredOutlined_1 = __importDefault(require("../../../../icons/IgnoredOutlined"));
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
 var IgnoreButton = function (_a) {
-    var isIgnored = _a.isIgnored, onClick = _a.onClick;
-    return (react_1.default.createElement(SmallIconButton_1.SmallIconButtonWithTooltip, { icon: isIgnored ? Ignored_1.default : IgnoredOutlined_1.default, tooltipTitle: ui_i18n_1.default.text('Ignore'), onClick: onClick, size: "XS", disableRipple: true }));
+    var isIgnored = _a.isIgnored, onClick = _a.onClick, disabled = _a.disabled;
+    return (react_1.default.createElement(SmallIconButton_1.SmallIconButtonWithTooltip, { disabled: disabled, showForDisabled: true, icon: isIgnored ? Ignored_1.default : IgnoredOutlined_1.default, tooltipTitle: disabled ? ui_i18n_1.default.text("You don't have permissions to ignore") : ui_i18n_1.default.text('Ignore'), onClick: onClick, size: "XS", disableRipple: true }));
 };
 exports.default = IgnoreButton;

package/components/attributes/inline/common/PinButton.d.ts

@@ -2,6 +2,7 @@
 declare type Props = {
     isPinned: boolean;
     onClick: () => void;
+    disabled?: boolean;
 };
-declare const PinButton: ({ isPinned, onClick }: Props) => JSX.Element;
+declare const PinButton: ({ isPinned, onClick, disabled }: Props) => JSX.Element;
 export default PinButton;

package/components/attributes/inline/common/PinButton.js

@@ -9,7 +9,7 @@ var Pin_1 = __importDefault(require("../../../../icons/Pin"));
 var PinOutlined_1 = __importDefault(require("../../../../icons/PinOutlined"));
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
 var PinButton = function (_a) {
-    var isPinned = _a.isPinned, onClick = _a.onClick;
-    return (react_1.default.createElement(SmallIconButton_1.SmallIconButtonWithTooltip, { onClick: onClick, icon: isPinned ? Pin_1.default : PinOutlined_1.default, tooltipTitle: ui_i18n_1.default.text('Pin'), size: "XS", disableRipple: true }));
+    var isPinned = _a.isPinned, onClick = _a.onClick, disabled = _a.disabled;
+    return (react_1.default.createElement(SmallIconButton_1.SmallIconButtonWithTooltip, { disabled: disabled, showForDisabled: true, onClick: onClick, icon: isPinned ? Pin_1.default : PinOutlined_1.default, tooltipTitle: disabled ? "You don't have permissions to pin" : ui_i18n_1.default.text('Pin'), size: "XS", disableRipple: true }));
 };
 exports.default = PinButton;

package/components/attributes/inline/common/__test__/IgnoreButton.spec.js

@@ -16,15 +16,19 @@ describe('Ignore button test', function () {
         onClickFn = jest.fn();
         component = enzyme_1.mount(react_1.default.createElement(IgnoreButton_1.default, { isIgnored: false, onClick: onClickFn }));
     });
-    it('should render correctly', function () {
-        expect(getButton(component).props()).toMatchObject({
-            tooltipTitle: 'Ignore',
-            onClick: onClickFn
-        });
+    it('should pass button props correctly', function () {
+        expect(getButton(component).prop('onClick')).toBe(onClickFn);
+        component.setProps({ disabled: true });
+        expect(getButton(component).prop('disabled')).toBe(true);
     });
     it('should show correct icon', function () {
         expect(getButton(component).prop('icon')).toBe(IgnoredOutlined_1.default);
         component.setProps({ isIgnored: true });
         expect(getButton(component).prop('icon')).toBe(Ignored_1.default);
     });
+    it('should show correct tooltip', function () {
+        expect(getButton(component).prop('tooltipTitle')).toBe('Ignore');
+        component.setProps({ disabled: true });
+        expect(getButton(component).prop('tooltipTitle')).toBe("You don't have permissions to ignore");
+    });
 });

package/components/attributes/inline/common/__test__/PinButton.spec.js

@@ -16,15 +16,19 @@ describe('Pin button test', function () {
         onClickFn = jest.fn();
         component = enzyme_1.mount(react_1.default.createElement(PinButton_1.default, { isPinned: false, onClick: onClickFn }));
     });
-    it('should render correctly', function () {
-        expect(getButton(component).props()).toMatchObject({
-            tooltipTitle: 'Pin',
-            onClick: onClickFn
-        });
+    it('should pass button props correctly', function () {
+        expect(getButton(component).prop('onClick')).toBe(onClickFn);
+        component.setProps({ disabled: true });
+        expect(getButton(component).prop('disabled')).toBe(true);
     });
     it('should show correct icon', function () {
         expect(getButton(component).prop('icon')).toBe(PinOutlined_1.default);
         component.setProps({ isPinned: true });
         expect(getButton(component).prop('icon')).toBe(Pin_1.default);
     });
+    it('should show correct tooltip', function () {
+        expect(getButton(component).prop('tooltipTitle')).toBe('Pin');
+        component.setProps({ disabled: true });
+        expect(getButton(component).prop('tooltipTitle')).toBe("You don't have permissions to pin");
+    });
 });

package/components/crosswalks/ColoredBlock/ColoredBlock.d.ts

@@ -2,5 +2,6 @@ import React from 'react';
 declare const ColoredBlock: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     color: string;
     opacity?: number;
+    variant?: 'filled' | 'outlined';
 } & React.RefAttributes<HTMLDivElement>>;
 export default ColoredBlock;

package/components/crosswalks/ColoredBlock/ColoredBlock.js

@@ -48,8 +48,8 @@ var react_1 = __importStar(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var styles_1 = require("./styles");
 var ColoredBlock = react_1.forwardRef(function (_a, ref) {
-    var color = _a.color, opacity = _a.opacity, children = _a.children, className = _a.className, props = __rest(_a, ["color", "opacity", "children", "className"]);
-    var styles = styles_1.useColoredItemStyles({ color: color, opacity: opacity });
+    var color = _a.color, opacity = _a.opacity, _b = _a.variant, variant = _b === void 0 ? 'filled' : _b, children = _a.children, className = _a.className, props = __rest(_a, ["color", "opacity", "variant", "children", "className"]);
+    var styles = styles_1.useColoredItemStyles({ color: color, opacity: opacity, variant: variant });
     return (react_1.default.createElement("div", __assign({ ref: ref, className: classnames_1.default(styles.item, className) }, props), children));
 });
 exports.default = ColoredBlock;

package/components/crosswalks/ColoredBlock/styles.d.ts

@@ -1,6 +1,7 @@
 declare type StylesProps = {
     color?: string;
     opacity?: number;
+    variant: 'filled' | 'outlined';
 };
 export declare const useColoredItemStyles: (props: StylesProps) => import("@material-ui/core/styles/withStyles").ClassNameMap<"item">;
 export {};

package/components/crosswalks/ColoredBlock/styles.js

@@ -1,14 +1,21 @@
 "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);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useColoredItemStyles = void 0;
 var styles_1 = require("@material-ui/core/styles");
 exports.useColoredItemStyles = styles_1.makeStyles({
     item: function (_a) {
-        var color = _a.color, opacity = _a.opacity;
-        return ({
-            backgroundColor: color,
-            opacity: opacity,
-            transition: 'opacity 0.3s'
-        });
+        var color = _a.color, opacity = _a.opacity, variant = _a.variant;
+        return (__assign(__assign(__assign({}, (variant === 'filled' && { backgroundColor: color })), (variant === 'outlined' && { border: color + " solid 2px" })), { opacity: opacity, transition: 'opacity 0.3s', boxSizing: 'border-box' }));
     }
 });

package/components/crosswalks/CrosswalkRow/CrosswalkRow.js

@@ -57,14 +57,15 @@ var CrosswalkRow = function (_a) {
     var metadata = react_redux_1.useSelector(mdm_module_1.default.selectors.getMetadata);
     var sourceSystemLabel = mdm_sdk_1.getSourceSystemLabel(metadata, crosswalk.type);
     var crosswalkId = mdm_sdk_1.getLastUriPart(crosswalk.uri);
+    var crosswalkDisabled = mdm_sdk_1.isCrosswalkDisabled(crosswalk);
     var _j = react_dnd_1.useDrag({
         item: {
             type: 'Crosswalk',
             crosswalk: crosswalk
         },
-        canDrag: !mdm_sdk_1.isCrosswalkDisabled(crosswalk)
+        canDrag: !crosswalkDisabled
     }), drag = _j[1], preview = _j[2];
-    var canDelete = !mdm_sdk_1.isCrosswalkDisabled(crosswalk) && crosswalk.ownerType !== 'relation';
+    var canDelete = !crosswalkDisabled && crosswalk.ownerType !== 'relation';
     react_1.useEffect(function () {
         preview(react_dnd_html5_backend_1.getEmptyImage(), { captureDraggingState: true });
     }, []);
@@ -85,7 +86,7 @@ var CrosswalkRow = function (_a) {
     return (react_1.default.createElement("div", { className: styles.root, ref: ref },
         react_1.default.createElement(SmallIconButton_1.SmallIconButtonWithTooltip, { size: "XXS", className: styles.focusedIcon, icon: focusable && Visibility_1.default, onClick: function () { return toggleCrosswalkFocus(); }, disabled: !focusable, tooltipTitle: focusable && ui_i18n_1.default.text('Focus') }),
         react_1.default.createElement("div", { className: styles.crosswalkWrapper },
-            react_1.default.createElement(ColoredBlock_1.default, { ref: drag, className: styles.header, color: color, onMouseEnter: function () { return highlightCrosswalk(); }, onMouseLeave: function () { return removeHighlight(); } },
+            react_1.default.createElement(ColoredBlock_1.default, { ref: drag, className: styles.header, color: color, variant: crosswalkDisabled ? 'outlined' : 'filled', onMouseEnter: function () { return highlightCrosswalk(); }, onMouseLeave: function () { return removeHighlight(); } },
                 isDependent && react_1.default.createElement(NestedAttribute_1.default, { className: styles.dependentIcon }),
                 react_1.default.createElement(ArrowExpandButton_1.default, { onClick: function () { return setExpanded(function (value) { return !value; }); }, expanded: expanded }),
                 react_1.default.createElement(SourceIcon_1.default, { className: styles.sourceIcon, sourceType: crosswalk.type }),

package/contexts/CollaborationContext/index.d.ts

@@ -3,7 +3,9 @@ import { CollaborationObjectTypes, Comment, CommentsMap, Reply } from '@reltio/m
 export declare const CollaborationContext: React.Context<{
     objectTypes?: CollaborationObjectTypes[];
     commentsMap: CommentsMap;
+    comments: Comment[];
     currentComment: Comment;
+    getComments: (uri: string, pageToken?: string) => void;
     getComment: (commentId: Comment['commentId']) => void;
     createComment: (params: Pick<Comment, 'content' | 'namedUsers' | 'objectType' | 'relatedObjectUris'> & {
         uri: string;
@@ -29,4 +31,5 @@ export declare const CollaborationContext: React.Context<{
     clearCurrentComment: () => void;
     sending: boolean;
     loading: boolean;
+    pageToken: string;
 }>;

package/contexts/CollaborationContext/index.js

@@ -7,9 +7,11 @@ exports.CollaborationContext = void 0;
 var react_1 = __importDefault(require("react"));
 var noop = function () { };
 exports.CollaborationContext = react_1.default.createContext({
+    comments: [],
     commentsMap: null,
     currentComment: null,
     getComment: noop,
+    getComments: function () { return new Promise(noop); },
     createComment: function () { return new Promise(noop); },
     editComment: function () { return new Promise(noop); },
     createReply: function () { return new Promise(noop); },
@@ -18,6 +20,7 @@ exports.CollaborationContext = react_1.default.createContext({
     clearCurrentComment: noop,
     deleteComment: noop,
     sending: false,
-    loading: false
+    loading: false,
+    pageToken: null
 });
 exports.CollaborationContext.displayName = 'CollaborationContext';

package/hooks/useCollaboration.d.ts

@@ -2,6 +2,7 @@ import { CollaborationObjectTypes, Comment, CommentsMap } from '@reltio/mdm-sdk'
 export declare const useCollaboration: (objectIds?: string[], objectTypes?: CollaborationObjectTypes[]) => {
     commentsMap: CommentsMap;
     currentComment: Comment;
+    comments: Comment[];
     getComment: (commentId: string) => void;
     createReply: ({ content, namedUsers, commentId, action, uri }: any) => Promise<void>;
     editComment: ({ content, namedUsers, objectType, uri, relatedObjectUris, commentId, replies }: any) => Promise<void>;
@@ -13,4 +14,6 @@ export declare const useCollaboration: (objectIds?: string[], objectTypes?: Coll
     sending: boolean;
     loading: boolean;
     objectTypes: CollaborationObjectTypes[];
+    getComments: (relatedObjectUri: string, pageToken?: string) => void;
+    pageToken: string;
 };

package/hooks/useCollaboration.js

@@ -33,10 +33,12 @@ var useCollaboration = function (objectIds, objectTypes) {
     var tenant = react_redux_1.useSelector(mdm_module_1.default.selectors.getTenant);
     var collaborationPath = react_redux_1.useSelector(mdm_module_1.default.selectors.getCollaborationPath);
     var isCollaborationEnabled = react_redux_1.useSelector(mdm_module_1.default.selectors.isCollaborationEnabled);
-    var _a = react_1.useState(null), commentsMap = _a[0], setCommentsMap = _a[1];
-    var _b = react_1.useState(null), currentComment = _b[0], setCurrentComment = _b[1];
-    var _c = react_1.useState(false), sending = _c[0], setSending = _c[1];
-    var _d = react_1.useState(false), loading = _d[0], setLoading = _d[1];
+    var _a = react_1.useState(null), pageToken = _a[0], setPageToken = _a[1];
+    var _b = react_1.useState([]), comments = _b[0], setComments = _b[1];
+    var _c = react_1.useState(null), commentsMap = _c[0], setCommentsMap = _c[1];
+    var _d = react_1.useState(null), currentComment = _d[0], setCurrentComment = _d[1];
+    var _e = react_1.useState(false), sending = _e[0], setSending = _e[1];
+    var _f = react_1.useState(false), loading = _f[0], setLoading = _f[1];
     react_1.useEffect(function () {
         if (isCollaborationEnabled && entity) {
             var onError = function (e) {
@@ -49,6 +51,20 @@ var useCollaboration = function (objectIds, objectTypes) {
             setCommentsMap(null);
         }
     }, [entity, isCollaborationEnabled, tenant, collaborationPath, objectIds]);
+    var getComments = react_1.useCallback(function (relatedObjectUri, pageToken) {
+        mdm_sdk_1.getComments({ collaborationPath: collaborationPath, tenant: tenant, relatedObjectUri: relatedObjectUri, pageToken: pageToken })
+            .then(function (_a) {
+            var items = _a.items, nextPageToken = _a.nextPageToken;
+            setComments(function (prevComments) {
+                if (!pageToken) {
+                    return items;
+                }
+                return ramda_1.uniqBy(ramda_1.prop('commentId'), __spreadArray(__spreadArray([], prevComments), items));
+            });
+            setPageToken(nextPageToken);
+        })
+            .catch(catchErrorInRequest);
+    }, [collaborationPath, tenant]);
     var getComment = react_1.useCallback(function (commentId) {
         setLoading(true);
         mdm_sdk_1.getComment({ collaborationPath: collaborationPath, tenant: tenant, commentId: commentId })
@@ -62,17 +78,11 @@ var useCollaboration = function (objectIds, objectTypes) {
             var _a;
             return __assign(__assign({}, prevCommentsMap), (_a = {}, _a[uri] = __spreadArray(__spreadArray([], (prevCommentsMap[uri] || [])), [{ commentId: comment.commentId, replies: 0, status: 'open' }]), _a));
         });
+        setComments(function (prevComments) { return __spreadArray([comment], prevComments); });
     };
-    var updateCommentInState = function (comment, uri) {
+    var updateCommentInState = function (comment) {
         setCurrentComment(comment);
-        setCommentsMap(function (prevCommentsMap) {
-            var _a;
-            var comments = (prevCommentsMap[uri] || []).map(function (c) {
-                return c.commentId === comment.commentId
-                    ? __assign(__assign({}, comment), { replies: (typeof comment.replies === 'number' ? comment.replies : comment.replies.length) || 0 }) : c;
-            });
-            return __assign(__assign({}, prevCommentsMap), (_a = {}, _a[uri] = comments, _a));
-        });
+        setComments(ramda_1.map(ramda_1.when(ramda_1.propEq('commentId', comment.commentId), ramda_1.always(comment))));
     };
     var deleteCommentFromState = function (commentId, uri) {
         setCurrentComment(null);
@@ -81,6 +91,9 @@ var useCollaboration = function (objectIds, objectTypes) {
             var comments = prevCommentsMap[uri] || [];
             return __assign(__assign({}, prevCommentsMap), (_a = {}, _a[uri] = comments.filter(function (c) { return c.commentId !== commentId; }), _a));
         });
+        setComments(function (prevComments) {
+            return prevComments.filter(function (comment) { return comment.commentId !== commentId; });
+        });
     };
     var createComment = react_1.useCallback(function (_a) {
         var content = _a.content, namedUsers = _a.namedUsers, objectType = _a.objectType, uri = _a.uri, relatedObjectUris = _a.relatedObjectUris;
@@ -117,7 +130,7 @@ var useCollaboration = function (objectIds, objectTypes) {
             replies: replies
         };
         return mdm_sdk_1.updateComment({ collaborationPath: collaborationPath, tenant: tenant, data: data })
-            .then(function (comment) { return updateCommentInState(__assign(__assign({}, comment), { replies: replies }), uri); })
+            .then(function (comment) { return updateCommentInState(__assign(__assign({}, comment), { replies: replies })); })
             .catch(catchErrorInRequest)
             .finally(function () { return setSending(false); });
     }, [collaborationPath, tenant]);
@@ -129,7 +142,7 @@ var useCollaboration = function (objectIds, objectTypes) {
             .catch(catchErrorInRequest)
             .finally(function () { return setSending(false); });
     }, [collaborationPath, tenant]);
-    var updateReply = react_1.useCallback(function (reply, uri, commentId) {
+    var updateReplyInState = react_1.useCallback(function (reply, uri, commentId) {
         var newStatus = reply.action === 'resolve' ? 'resolved' : 'open';
         if (newStatus === 'resolved') {
             setCurrentComment(function (prevCurrentComment) {
@@ -154,6 +167,14 @@ var useCollaboration = function (objectIds, objectTypes) {
                 return comment;
             }), _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 comment;
+            });
+        });
     }, []);
     var createReply = react_1.useCallback(function (_a) {
         var content = _a.content, namedUsers = _a.namedUsers, commentId = _a.commentId, action = _a.action, uri = _a.uri;
@@ -166,11 +187,11 @@ var useCollaboration = function (objectIds, objectTypes) {
         return mdm_sdk_1.createReply({ collaborationPath: collaborationPath, tenant: tenant, commentId: commentId, data: data })
             .then(function (_a) {
             var reply = _a[0];
-            return updateReply(reply, uri, commentId);
+            return updateReplyInState(reply, uri, commentId);
         })
             .catch(catchErrorInRequest)
             .finally(function () { return setSending(false); });
-    }, [collaborationPath, tenant, updateReply]);
+    }, [collaborationPath, tenant, updateReplyInState]);
     var resolveThread = react_1.useCallback(function (_a) {
         var commentId = _a.commentId, uri = _a.uri;
         createReply({ content: '', namedUsers: [], commentId: commentId, action: 'resolve', uri: uri });
@@ -185,6 +206,7 @@ var useCollaboration = function (objectIds, objectTypes) {
     return {
         commentsMap: commentsMap,
         currentComment: currentComment,
+        comments: comments,
         getComment: getComment,
         createReply: createReply,
         editComment: editComment,
@@ -195,7 +217,9 @@ var useCollaboration = function (objectIds, objectTypes) {
         reOpenThread: reOpenThread,
         sending: sending,
         loading: loading,
-        objectTypes: objectTypes
+        objectTypes: objectTypes,
+        getComments: getComments,
+        pageToken: pageToken
     };
 };
 exports.useCollaboration = useCollaboration;

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.817",
+  "version": "1.4.821",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "index.js",
   "dependencies": {
     "@date-io/moment": "^1.3.5",
     "@react-google-maps/api": "^2.7.0",
-    "@reltio/mdm-module": "^1.4.817",
-    "@reltio/mdm-sdk": "^1.4.817",
+    "@reltio/mdm-module": "^1.4.821",
+    "@reltio/mdm-sdk": "^1.4.821",
     "classnames": "^2.2.5",
     "frontend-collective-react-dnd-scrollzone": "^1.0.2",
     "nanoid": "^2.0.0",