box-ui-elements 16.0.0-beta.9 → 16.0.0

package/src/elements/content-sidebar/activity-feed/annotations/AnnotationActivity.js

@@ -6,6 +6,7 @@ import noop from 'lodash/noop';
 import TetherComponent from 'react-tether';
 import ActivityError from '../common/activity-error';
 import ActivityMessage from '../common/activity-message';
+import ActivityStatus from '../common/activity-status';
 import ActivityTimestamp from '../common/activity-timestamp';
 import AnnotationActivityLink from './AnnotationActivityLink';
 import AnnotationActivityMenu from './AnnotationActivityMenu';
@@ -18,7 +19,7 @@ import SelectableActivityCard from '../SelectableActivityCard';
 import UserLink from '../common/user-link';
 import { ACTIVITY_TARGETS } from '../../../common/interactionTargets';
 import { PLACEHOLDER_USER } from '../../../../constants';
-import type { Annotation, AnnotationPermission } from '../../../../common/types/feed';
+import type { Annotation, AnnotationPermission, FeedItemStatus } from '../../../../common/types/feed';
 import type { GetAvatarUrlCallback, GetProfileUrlCallback } from '../../../common/flowTypes';
 import type { SelectorItems, User } from '../../../../common/types/core';
 
@@ -35,6 +36,7 @@ type Props = {
     onDelete?: ({ id: string, permissions: AnnotationPermission }) => any,
     onEdit?: (id: string, text: string, permissions: AnnotationPermission) => void,
     onSelect?: (annotation: Annotation) => any,
+    onStatusChange?: (id: string, status: FeedItemStatus, permissions: AnnotationPermission) => void,
 };
 
 const AnnotationActivity = ({
@@ -48,15 +50,27 @@ const AnnotationActivity = ({
     onDelete = noop,
     onEdit = noop,
     onSelect = noop,
+    onStatusChange = noop,
 }: Props) => {
     const [isConfirmingDelete, setIsConfirmingDelete] = React.useState(false);
     const [isEditing, setIsEditing] = React.useState(false);
     const [isMenuOpen, setIsMenuOpen] = React.useState(false);
-    const { created_at, created_by, description, error, file_version, id, isPending, permissions = {}, target } = item;
-    const { can_delete: canDelete, can_edit: canEdit } = permissions;
+    const {
+        created_at,
+        created_by,
+        description,
+        error,
+        file_version,
+        id,
+        isPending,
+        permissions = {},
+        status,
+        target,
+    } = item;
+    const { can_delete: canDelete, can_edit: canEdit, can_resolve: canResolve } = permissions;
     const isFileVersionUnavailable = file_version === null;
     const isCardDisabled = !!error || isConfirmingDelete || isMenuOpen || isEditing || isFileVersionUnavailable;
-    const isMenuVisible = (canDelete || canEdit) && !isPending;
+    const isMenuVisible = (canDelete || canEdit || canResolve) && !isPending;
 
     const handleDelete = (): void => setIsConfirmingDelete(true);
     const handleDeleteCancel = (): void => setIsConfirmingDelete(false);
@@ -84,6 +98,8 @@ const AnnotationActivity = ({
     };
     const handleSelect = () => onSelect(item);
 
+    const handleStatusChange = (newStatus: FeedItemStatus) => onStatusChange(id, newStatus, permissions);
+
     const createdAtTimestamp = new Date(created_at).getTime();
     const createdByUser = created_by || PLACEHOLDER_USER;
     const linkMessage = isCurrentVersion ? messages.annotationActivityPageItem : messages.annotationActivityVersionLink;
@@ -139,6 +155,7 @@ const AnnotationActivity = ({
                                 onClick={handleSelect}
                             />
                         </div>
+                        <ActivityStatus status={status} />
                         {isEditing && currentUser ? (
                             <CommentForm
                                 className="bcs-AnnotationActivity-editor"
@@ -166,13 +183,16 @@ const AnnotationActivity = ({
                     <AnnotationActivityMenu
                         canDelete={canDelete}
                         canEdit={canEdit}
+                        canResolve={canResolve}
                         className="bcs-AnnotationActivity-menu"
                         id={id}
                         isDisabled={isConfirmingDelete}
+                        status={status}
                         onDelete={handleDelete}
                         onEdit={handleEdit}
                         onMenuClose={handleMenuClose}
                         onMenuOpen={handleMenuOpen}
+                        onStatusChange={handleStatusChange}
                     />
                 )}
                 {isConfirmingDelete && (

package/src/elements/content-sidebar/activity-feed/annotations/AnnotationActivityMenu.js

@@ -3,18 +3,23 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { FormattedMessage } from 'react-intl';
 import DropdownMenu from '../../../../components/dropdown-menu';
+import Checkmark16 from '../../../../icon/fill/Checkmark16';
 import IconEllipsis from '../../../../icons/general/IconEllipsis';
-import messages from './messages';
 import Pencil16 from '../../../../icon/line/Pencil16';
 import PlainButton from '../../../../components/plain-button';
 import Trash16 from '../../../../icon/fill/Trash16';
+import X16 from '../../../../icon/fill/X16';
+import { Menu, MenuItem } from '../../../../components/menu';
 import { ACTIVITY_TARGETS } from '../../../common/interactionTargets';
+import { COMMENT_STATUS_OPEN, COMMENT_STATUS_RESOLVED } from '../../../../constants';
 import { bdlGray50 } from '../../../../styles/variables';
-import { Menu, MenuItem } from '../../../../components/menu';
+import type { FeedItemStatus } from '../../../../common/types/feed';
+import messages from './messages';
 
 type AnnotationActivityMenuProps = {
     canDelete?: boolean,
     canEdit?: boolean,
+    canResolve?: boolean,
     className?: string,
     id: string,
     isDisabled?: boolean,
@@ -22,11 +27,14 @@ type AnnotationActivityMenuProps = {
     onEdit: () => void,
     onMenuClose: () => void,
     onMenuOpen: () => void,
+    onStatusChange: (newStatus: FeedItemStatus) => void,
+    status?: FeedItemStatus,
 };
 
 const AnnotationActivityMenu = ({
     canDelete,
     canEdit,
+    canResolve,
     className,
     id,
     isDisabled,
@@ -34,11 +42,14 @@ const AnnotationActivityMenu = ({
     onEdit,
     onMenuClose,
     onMenuOpen,
+    onStatusChange,
+    status,
 }: AnnotationActivityMenuProps) => {
     const menuProps = {
         'data-resin-component': 'preview',
         'data-resin-feature': 'annotations',
     };
+    const isResolved = status === COMMENT_STATUS_RESOLVED;
 
     return (
         <DropdownMenu constrainToScrollParent isRightAligned onMenuClose={onMenuClose} onMenuOpen={onMenuOpen}>
@@ -51,6 +62,29 @@ const AnnotationActivityMenu = ({
                 <IconEllipsis color={bdlGray50} height={16} width={16} />
             </PlainButton>
             <Menu {...menuProps}>
+                {canResolve && isResolved && (
+                    <MenuItem
+                        data-resin-itemid={id}
+                        data-resin-target={ACTIVITY_TARGETS.ANNOTATION_OPTIONS_UNRESOLVE}
+                        data-testid="unresolve-annotation-activity"
+                        onClick={() => onStatusChange(COMMENT_STATUS_OPEN)}
+                    >
+                        <X16 />
+                        <FormattedMessage {...messages.annotationActivityUnresolveMenuItem} />
+                    </MenuItem>
+                )}
+                {canResolve && !isResolved && (
+                    <MenuItem
+                        data-resin-itemid={id}
+                        data-resin-target={ACTIVITY_TARGETS.ANNOTATION_OPTIONS_RESOLVE}
+                        data-testid="resolve-annotation-activity"
+                        onClick={() => onStatusChange(COMMENT_STATUS_RESOLVED)}
+                    >
+                        <Checkmark16 />
+                        <FormattedMessage {...messages.annotationActivityResolveMenuItem} />
+                    </MenuItem>
+                )}
+
                 {canEdit && (
                     <MenuItem
                         data-resin-itemid={id}

package/src/elements/content-sidebar/activity-feed/annotations/__tests__/AnnotationActivity.test.js

@@ -50,10 +50,10 @@ describe('elements/content-sidebar/ActivityFeed/annotations/AnnotationActivity',
         CommentForm.default = jest.fn().mockReturnValue(<div />);
     });
 
-    test('should not render annotation activity menu when both can_delete is false and can_edit is false', () => {
+    test('should not render annotation activity menu when can_delete is false and can_edit is false and can_resolve is false', () => {
         const item = {
             ...mockAnnotation,
-            permissions: { can_delete: false, can_edit: false },
+            permissions: { can_delete: false, can_edit: false, can_resolve: false },
         };
 
         const wrapper = getWrapper({ item });
@@ -62,17 +62,21 @@ describe('elements/content-sidebar/ActivityFeed/annotations/AnnotationActivity',
     });
 
     test.each`
-        canDelete | canEdit
-        ${false}  | ${true}
-        ${true}   | ${false}
-        ${true}   | ${true}
+        canDelete | canEdit  | canResolve
+        ${false}  | ${false} | ${true}
+        ${true}   | ${false} | ${false}
+        ${false}  | ${true}  | ${false}
+        ${false}  | ${true}  | ${true}
+        ${true}   | ${true}  | ${false}
+        ${true}   | ${false} | ${true}
+        ${true}   | ${true}  | ${true}
     `(
-        'should correctly render annotation activity when canDelete: $canDelete and canEdit: $canEdit',
-        ({ canDelete, canEdit }) => {
+        'should correctly render annotation activity when canDelete: $canDelete and canEdit: $canEdit and canResolve: $canResolve',
+        ({ canDelete, canEdit, canResolve }) => {
             const unixTime = new Date(TIME_STRING_SEPT_27_2017).getTime();
             const item = {
                 ...mockAnnotation,
-                permissions: { can_delete: canDelete, can_edit: canEdit },
+                permissions: { can_delete: canDelete, can_edit: canEdit, can_resolve: canResolve },
             };
 
             const wrapper = getWrapper({ item });
@@ -86,7 +90,7 @@ describe('elements/content-sidebar/ActivityFeed/annotations/AnnotationActivity',
                 },
             });
             expect(wrapper.exists(AnnotationActivityMenu)).toBe(true);
-            expect(wrapper.find('ActivityMessage').prop('tagged_message')).toEqual(
+            expect(wrapper.find('ForwardRef(withFeatureConsumer(ActivityMessage))').prop('tagged_message')).toEqual(
                 mockActivity.item.description.message,
             );
         },

package/src/elements/content-sidebar/activity-feed/annotations/__tests__/AnnotationActivityMenu.test.js

@@ -31,8 +31,25 @@ describe('elements/content-sidebar/ActivityFeed/annotations/AnnotationActivityMe
         expect(wrapper.exists('[data-testid="edit-annotation-activity"]')).toBe(true);
     });
 
+    test('should render the resolve annotation activity menu item if canResolve is true for unresolved item', () => {
+        const wrapper = getWrapper({ canResolve: true, status: 'open' });
+
+        expect(wrapper.exists('[data-testid="resolve-annotation-activity"]')).toBe(true);
+    });
+
+    test('should render the unresolve annotation activity menu item if canResolve is true for resolved item', () => {
+        const wrapper = getWrapper({ canResolve: true, status: 'resolved' });
+
+        expect(wrapper.exists('[data-testid="unresolve-annotation-activity"]')).toBe(true);
+    });
+
     test('should render resin tags', () => {
-        const wrapper = getWrapper({ canDelete: true, canEdit: true });
+        const wrapper = getWrapper({
+            canDelete: true,
+            canEdit: true,
+            canResolve: true,
+            status: 'open',
+        });
 
         expect(wrapper.find("[data-testid='delete-annotation-activity']").props()).toMatchObject({
             'data-resin-itemid': '123',
@@ -43,5 +60,22 @@ describe('elements/content-sidebar/ActivityFeed/annotations/AnnotationActivityMe
             'data-resin-itemid': '123',
             'data-resin-target': 'activityfeed-annotation-edit',
         });
+
+        expect(wrapper.find("[data-testid='resolve-annotation-activity']").props()).toMatchObject({
+            'data-resin-itemid': '123',
+            'data-resin-target': 'activityfeed-annotation-resolve',
+        });
+    });
+
+    test('should render resin tags for unresolve activity', () => {
+        const wrapper = getWrapper({
+            canResolve: true,
+            status: 'resolved',
+        });
+
+        expect(wrapper.find("[data-testid='unresolve-annotation-activity']").props()).toMatchObject({
+            'data-resin-itemid': '123',
+            'data-resin-target': 'activityfeed-annotation-unresolve',
+        });
     });
 });

package/src/elements/content-sidebar/activity-feed/annotations/messages.js

@@ -26,6 +26,11 @@ const messages = defineMessages({
         defaultMessage: 'Page {number}',
         description: 'Annotation activity item link shown on annotation activity',
     },
+    annotationActivityResolveMenuItem: {
+        id: 'be.contentSidebar.activityFeed.annotationActivity.annotationActivityResolveMenuItem',
+        defaultMessage: 'Resolve',
+        description: 'Text to show on menu item to resolve the annotation comment',
+    },
     annotationActivityVersionLink: {
         id: 'be.contentSidebar.activityFeed.annotationActivityVersionLink',
         defaultMessage: 'Version {number}',
@@ -37,6 +42,11 @@ const messages = defineMessages({
         description:
             'Annotation activity item link shown on annotation activity for previous file version that is unavailable',
     },
+    annotationActivityUnresolveMenuItem: {
+        id: 'be.contentSidebar.activityFeed.annotationActivity.annotationActivityUnresolveMenuItem',
+        defaultMessage: 'Unresolve',
+        description: 'Text to show on menu item to unresolve the annotation comment',
+    },
 });
 
 export default messages;

package/src/elements/content-sidebar/activity-feed/comment/Comment.js

@@ -4,8 +4,10 @@ import classNames from 'classnames';
 import noop from 'lodash/noop';
 import { FormattedMessage } from 'react-intl';
 import TetherComponent from 'react-tether';
+import Checkmark16 from '../../../../icon/line/Checkmark16';
 import Trash16 from '../../../../icon/line/Trash16';
 import Pencil16 from '../../../../icon/line/Pencil16';
+import X16 from '../../../../icon/fill/X16';
 import Avatar from '../Avatar';
 import Media from '../../../../components/media';
 import { MenuItem } from '../../../../components/menu';
@@ -16,13 +18,14 @@ import UserLink from '../common/user-link';
 import ActivityCard from '../ActivityCard';
 import ActivityError from '../common/activity-error';
 import ActivityMessage from '../common/activity-message';
+import ActivityStatus from '../common/activity-status';
 import CommentForm from '../comment-form';
-import { PLACEHOLDER_USER } from '../../../../constants';
+import { COMMENT_STATUS_OPEN, COMMENT_STATUS_RESOLVED, PLACEHOLDER_USER } from '../../../../constants';
 import messages from './messages';
 import type { GetAvatarUrlCallback, GetProfileUrlCallback } from '../../../common/flowTypes';
 import type { Translations } from '../../flowTypes';
 import type { SelectorItems, User } from '../../../../common/types/core';
-import type { BoxCommentPermission, ActionItemError } from '../../../../common/types/feed';
+import type { ActionItemError, BoxCommentPermission, FeedItemStatus } from '../../../../common/types/feed';
 import './Comment.scss';
 
 type Props = {
@@ -39,8 +42,17 @@ type Props = {
     mentionSelectorContacts?: SelectorItems<>,
     modified_at?: string | number,
     onDelete: ({ id: string, permissions?: BoxCommentPermission }) => any,
-    onEdit: (id: string, text: string, hasMention: boolean, permissions?: BoxCommentPermission) => any,
-    permissions?: BoxCommentPermission,
+    onEdit: (
+        id: string,
+        text?: string,
+        status?: FeedItemStatus,
+        hasMention: boolean,
+        permissions: BoxCommentPermission,
+        onSuccess: ?Function,
+        onError: ?Function,
+    ) => void,
+    permissions: BoxCommentPermission,
+    status?: FeedItemStatus,
     tagged_message: string,
     translatedTaggedMessage?: string,
     translations?: Translations,
@@ -87,12 +99,17 @@ class Comment extends React.Component<Props, State> {
 
     commentFormSubmitHandler = (): void => this.setState({ isInputOpen: false, isEditing: false });
 
-    handleUpdate = ({ id, text, hasMention }: { hasMention: boolean, id: string, text: string }): void => {
+    handleMessageUpdate = ({ id, text, hasMention }: { hasMention: boolean, id: string, text: string }): void => {
         const { onEdit, permissions } = this.props;
-        onEdit(id, text, hasMention, permissions);
+        onEdit(id, text, undefined, hasMention, permissions);
         this.commentFormSubmitHandler();
     };
 
+    handleStatusUpdate = (status: FeedItemStatus): void => {
+        const { id, onEdit, permissions } = this.props;
+        onEdit(id, undefined, status, false, permissions);
+    };
+
     render(): React.Node {
         const {
             created_by,
@@ -110,14 +127,19 @@ class Comment extends React.Component<Props, State> {
             getUserProfileUrl,
             getMentionWithQuery,
             mentionSelectorContacts,
+            modified_at,
             onEdit,
+            status,
         } = this.props;
         const { isConfirmingDelete, isEditing, isInputOpen } = this.state;
+        const canDelete = permissions.can_delete;
+        const canEdit = onEdit !== noop && permissions.can_edit;
+        const canResolve = onEdit !== noop && permissions.can_resolve;
         const createdAtTimestamp = new Date(created_at).getTime();
         const createdByUser = created_by || PLACEHOLDER_USER;
-        const canEdit = onEdit !== noop && permissions.can_edit;
-        const canDelete = permissions.can_delete;
-        const isMenuVisible = (canDelete || canEdit) && !isPending;
+        const isEdited = modified_at !== undefined && modified_at !== created_at;
+        const isMenuVisible = (canDelete || canEdit || canResolve) && !isPending;
+        const isResolved = status === COMMENT_STATUS_RESOLVED;
 
         return (
             <ActivityCard className="bcs-Comment">
@@ -144,6 +166,26 @@ class Comment extends React.Component<Props, State> {
                                         'data-resin-component': ACTIVITY_TARGETS.COMMENT_OPTIONS,
                                     }}
                                 >
+                                    {canResolve && isResolved && (
+                                        <MenuItem
+                                            data-resin-target={ACTIVITY_TARGETS.COMMENT_OPTIONS_EDIT}
+                                            data-testid="unresolve-comment"
+                                            onClick={() => this.handleStatusUpdate(COMMENT_STATUS_OPEN)}
+                                        >
+                                            <X16 />
+                                            <FormattedMessage {...messages.commentUnresolveMenuItem} />
+                                        </MenuItem>
+                                    )}
+                                    {canResolve && !isResolved && (
+                                        <MenuItem
+                                            data-resin-target={ACTIVITY_TARGETS.COMMENT_OPTIONS_EDIT}
+                                            data-testid="resolve-comment"
+                                            onClick={() => this.handleStatusUpdate(COMMENT_STATUS_RESOLVED)}
+                                        >
+                                            <Checkmark16 />
+                                            <FormattedMessage {...messages.commentResolveMenuItem} />
+                                        </MenuItem>
+                                    )}
                                     {canEdit && (
                                         <MenuItem
                                             data-resin-target={ACTIVITY_TARGETS.COMMENT_OPTIONS_EDIT}
@@ -187,13 +229,14 @@ class Comment extends React.Component<Props, State> {
                         <div>
                             <ActivityTimestamp date={createdAtTimestamp} />
                         </div>
+                        <ActivityStatus status={status} />
                         {isEditing ? (
                             <CommentForm
                                 isDisabled={isDisabled}
                                 className={classNames('bcs-Comment-editor', {
                                     'bcs-is-disabled': isDisabled,
                                 })}
-                                updateComment={this.handleUpdate}
+                                updateComment={this.handleMessageUpdate}
                                 isOpen={isInputOpen}
                                 // $FlowFixMe
                                 user={currentUser}
@@ -209,6 +252,7 @@ class Comment extends React.Component<Props, State> {
                         ) : (
                             <ActivityMessage
                                 id={id}
+                                isEdited={isEdited}
                                 tagged_message={tagged_message}
                                 translatedTaggedMessage={translatedTaggedMessage}
                                 {...translations}

package/src/elements/content-sidebar/activity-feed/comment/__tests__/Comment.test.js

@@ -1,8 +1,10 @@
 import * as React from 'react';
 import { mount, shallow } from 'enzyme';
+import noop from 'lodash/noop';
 
 import Comment from '../Comment';
 import CommentForm from '../../comment-form/CommentForm';
+import { FEED_ITEM_TYPE_TASK } from '../../../../../constants';
 
 jest.mock('../../Avatar', () => () => 'Avatar');
 
@@ -13,6 +15,7 @@ const currentUser = {
 const approverSelectorContacts = [];
 const mentionSelectorContacts = [];
 const TIME_STRING_SEPT_27_2017 = '2017-09-27T10:40:41-07:00';
+const TIME_STRING_SEPT_28_2017 = '2017-09-28T10:40:41-07:00';
 
 const allHandlers = {
     tasks: {
@@ -48,7 +51,6 @@ describe('elements/content-sidebar/ActivityFeed/comment/Comment', () => {
                 mentionSelectorContacts={mentionSelectorContacts}
             />,
         );
-
         // validating that the Tooltip and the comment posted time are properly set
         expect(wrapper.find('ActivityTimestamp').prop('date')).toEqual(unixTime);
 
@@ -137,6 +139,73 @@ describe('elements/content-sidebar/ActivityFeed/comment/Comment', () => {
         },
     );
 
+    test.each`
+        can_resolve | onEdit       | expectedResolveMenuExistance
+        ${false}    | ${noop}      | ${false}
+        ${false}    | ${jest.fn()} | ${false}
+        ${true}     | ${noop}      | ${false}
+        ${true}     | ${jest.fn()} | ${true}
+    `(
+        `given can_resolve permission = $can_resolve and onEdit prop = $onEdit, resolve menu existance should be: $expectedResolveMenuExistance`,
+        ({ can_resolve, onEdit, expectedResolveMenuExistance }) => {
+            const comment = {
+                created_at: TIME_STRING_SEPT_27_2017,
+                created_by: { name: '50 Cent', id: 10 },
+                id: '123',
+                status: 'open',
+                tagged_message: 'test',
+            };
+
+            const wrapper = shallow(
+                <Comment
+                    {...comment}
+                    approverSelectorContacts={approverSelectorContacts}
+                    currentUser={currentUser}
+                    handlers={allHandlers}
+                    mentionSelectorContacts={mentionSelectorContacts}
+                    onDelete={jest.fn()}
+                    onEdit={onEdit}
+                    permissions={{ can_resolve }}
+                />,
+            );
+
+            expect(wrapper.find('[data-testid="resolve-comment"]').exists()).toBe(expectedResolveMenuExistance);
+        },
+    );
+
+    test.each`
+        status        | expectedResolveMenuExistance | expectedUnresolvedMenuExistance
+        ${'open'}     | ${true}                      | ${false}
+        ${'resolved'} | ${false}                     | ${true}
+    `(
+        `given status = $status, resolve menu existance should be: $expectedResolveMenuExistance and unresolve menu existance should be: $expectedUnresolvedMenuExistance`,
+        ({ status, expectedResolveMenuExistance, expectedUnresolvedMenuExistance }) => {
+            const comment = {
+                created_at: TIME_STRING_SEPT_27_2017,
+                created_by: { name: '50 Cent', id: 10 },
+                id: '123',
+                permissions: { can_resolve: true },
+                tagged_message: 'test',
+                status,
+            };
+
+            const wrapper = shallow(
+                <Comment
+                    {...comment}
+                    approverSelectorContacts={approverSelectorContacts}
+                    currentUser={currentUser}
+                    handlers={allHandlers}
+                    mentionSelectorContacts={mentionSelectorContacts}
+                    onDelete={jest.fn()}
+                    onEdit={jest.fn()}
+                />,
+            );
+
+            expect(wrapper.find('[data-testid="resolve-comment"]').exists()).toBe(expectedResolveMenuExistance);
+            expect(wrapper.find('[data-testid="unresolve-comment"]').exists()).toBe(expectedUnresolvedMenuExistance);
+        },
+    );
+
     test('should not show actions menu when comment is pending', () => {
         const comment = {
             created_at: TIME_STRING_SEPT_27_2017,
@@ -166,7 +235,7 @@ describe('elements/content-sidebar/ActivityFeed/comment/Comment', () => {
             created_at: TIME_STRING_SEPT_27_2017,
             tagged_message: 'test',
             created_by: { name: '50 Cent', id: 10 },
-            type: 'task',
+            type: FEED_ITEM_TYPE_TASK,
             permissions: { can_edit: true, can_delete: true },
         };
         const mockOnEdit = jest.fn();
@@ -199,18 +268,61 @@ describe('elements/content-sidebar/ActivityFeed/comment/Comment', () => {
         instance.commentFormFocusHandler();
         expect(wrapper.state('isInputOpen')).toBe(true);
 
-        const updatePayload = { id: '000', hasMention: true, text: 'updated message' };
-        instance.handleUpdate(updatePayload);
+        const updateMessagePayload = { id: '000', hasMention: true, text: 'updated message' };
+        instance.handleMessageUpdate(updateMessagePayload);
         expect(wrapper.state('isEditing')).toBe(false);
         expect(wrapper.state('isInputOpen')).toBe(false);
         expect(mockOnEdit).toHaveBeenCalledWith(
-            updatePayload.id,
-            updatePayload.text,
-            updatePayload.hasMention,
+            updateMessagePayload.id,
+            updateMessagePayload.text,
+            undefined,
+            updateMessagePayload.hasMention,
             comment.permissions,
         );
     });
 
+    test.each`
+        status        | menuItemTestId         | expectedNewStatus
+        ${'open'}     | ${'resolve-comment'}   | ${'resolved'}
+        ${'resolved'} | ${'unresolve-comment'} | ${'open'}
+    `(
+        `should allow user to resolve / unresolve if they have resolve permissions, edit handler is defined and given status is $status`,
+        ({ status, menuItemTestId, expectedNewStatus }) => {
+            const comment = {
+                created_at: TIME_STRING_SEPT_27_2017,
+                created_by: { name: '50 Cent', id: 10 },
+                hasMention: false,
+                id: '123',
+                permissions: { can_resolve: true, can_edit: false, can_delete: false },
+                tagged_message: 'test',
+                type: FEED_ITEM_TYPE_TASK,
+            };
+            const onEdit = jest.fn();
+            const wrapper = mount(
+                <Comment
+                    {...comment}
+                    approverSelectorContacts={approverSelectorContacts}
+                    currentUser={currentUser}
+                    handlers={allHandlers}
+                    mentionSelectorContacts={mentionSelectorContacts}
+                    onEdit={onEdit}
+                    status={status}
+                />,
+            );
+
+            wrapper.find('button[data-testid="comment-actions-menu"]').simulate('click');
+            wrapper.find(`MenuItem[data-testid="${menuItemTestId}"]`).simulate('click');
+
+            expect(onEdit).toBeCalledWith(
+                comment.id,
+                undefined,
+                expectedNewStatus,
+                comment.hasMention,
+                comment.permissions,
+            );
+        },
+    );
+
     test('should render an error when one is defined', () => {
         const comment = {
             created_at: TIME_STRING_SEPT_27_2017,
@@ -271,4 +383,37 @@ describe('elements/content-sidebar/ActivityFeed/comment/Comment', () => {
 
         expect(onActionSpy).toHaveBeenCalledTimes(1);
     });
+
+    test.each`
+        created_at                  | modified_at                 | expectedIsEdited
+        ${TIME_STRING_SEPT_27_2017} | ${undefined}                | ${false}
+        ${TIME_STRING_SEPT_27_2017} | ${TIME_STRING_SEPT_27_2017} | ${false}
+        ${TIME_STRING_SEPT_27_2017} | ${TIME_STRING_SEPT_28_2017} | ${true}
+    `(
+        `given created_at = $created_at and modified_at = $modified_at, isEdited prop on ActivityMessage should be: $expectedIsEdited`,
+        ({ created_at, modified_at, expectedIsEdited }) => {
+            const comment = {
+                created_at,
+                modified_at,
+                tagged_message: 'test',
+                created_by: { name: '50 Cent', id: 10 },
+                permissions: { can_delete: true, can_edit: true },
+            };
+
+            const wrapper = shallow(
+                <Comment
+                    id="123"
+                    {...comment}
+                    approverSelectorContacts={approverSelectorContacts}
+                    currentUser={currentUser}
+                    handlers={allHandlers}
+                    mentionSelectorContacts={mentionSelectorContacts}
+                />,
+            );
+
+            expect(wrapper.find('ForwardRef(withFeatureConsumer(ActivityMessage))').prop('isEdited')).toEqual(
+                expectedIsEdited,
+            );
+        },
+    );
 });