feat(content-sidebar): hide "edited" for resolved comment/annotation (#3152)

Author: kkuliczkowski-box

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

@@ -18,7 +18,7 @@ import messages from './messages';
 import SelectableActivityCard from '../SelectableActivityCard';
 import UserLink from '../common/user-link';
 import { ACTIVITY_TARGETS } from '../../../common/interactionTargets';
-import { PLACEHOLDER_USER } from '../../../../constants';
+import { COMMENT_STATUS_RESOLVED, PLACEHOLDER_USER } from '../../../../constants';
 import type { Annotation, AnnotationPermission, FeedItemStatus } from '../../../../common/types/feed';
 import type { GetAvatarUrlCallback, GetProfileUrlCallback } from '../../../common/flowTypes';
 import type { SelectorItems, User } from '../../../../common/types/core';
@@ -65,14 +65,17 @@ const AnnotationActivity = ({
         file_version,
         id,
         isPending,
+        modified_at,
         permissions = {},
         status,
         target,
     } = item;
     const { can_delete: canDelete, can_edit: canEdit, can_resolve: canResolve } = permissions;
+    const isEdited = modified_at !== undefined && modified_at !== created_at;
     const isFileVersionUnavailable = file_version === null;
     const isCardDisabled = !!error || isConfirmingDelete || isMenuOpen || isEditing || isFileVersionUnavailable;
     const isMenuVisible = (canDelete || canEdit || canResolve) && !isPending;
+    const isResolved = status === COMMENT_STATUS_RESOLVED;
 
     const handleDelete = (): void => setIsConfirmingDelete(true);
     const handleDeleteCancel = (): void => setIsConfirmingDelete(false);
@@ -176,7 +179,12 @@ const AnnotationActivity = ({
                                 tagged_message={message}
                             />
                         ) : (
-                            <ActivityMessage id={id} tagged_message={message} getUserProfileUrl={getUserProfileUrl} />
+                            <ActivityMessage
+                                getUserProfileUrl={getUserProfileUrl}
+                                id={id}
+                                isEdited={isEdited && !isResolved}
+                                tagged_message={message}
+                            />
                         )}
                     </Media.Body>
                 </Media>

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

@@ -17,6 +17,7 @@ const currentUser = {
 };
 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 = {
     contacts: {
@@ -215,6 +216,25 @@ describe('elements/content-sidebar/ActivityFeed/annotations/AnnotationActivity',
         expect(onActionSpy).toHaveBeenCalledTimes(1);
     });
 
+    test.each`
+        created_at                  | modified_at                 | status        | expectedIsEdited
+        ${TIME_STRING_SEPT_27_2017} | ${undefined}                | ${'open'}     | ${false}
+        ${TIME_STRING_SEPT_27_2017} | ${TIME_STRING_SEPT_27_2017} | ${'open'}     | ${false}
+        ${TIME_STRING_SEPT_27_2017} | ${TIME_STRING_SEPT_28_2017} | ${'open'}     | ${true}
+        ${TIME_STRING_SEPT_27_2017} | ${undefined}                | ${'resolved'} | ${false}
+        ${TIME_STRING_SEPT_27_2017} | ${TIME_STRING_SEPT_27_2017} | ${'resolved'} | ${false}
+        ${TIME_STRING_SEPT_27_2017} | ${TIME_STRING_SEPT_28_2017} | ${'resolved'} | ${false}
+    `(
+        `given created_at = $created_at, modified_at = $modified_at and status = $status, isEdited prop on ActivityMessage should be: $expectedIsEdited`,
+        ({ created_at, modified_at, status, expectedIsEdited }) => {
+            const wrapper = getWrapper({ item: { ...mockAnnotation, created_at, modified_at, status } });
+
+            expect(wrapper.find('ForwardRef(withFeatureConsumer(ActivityMessage))').prop('isEdited')).toEqual(
+                expectedIsEdited,
+            );
+        },
+    );
+
     describe('delete confirmation behavior', () => {
         test('should render the DeleteConfirmation when delete menu item is selected', () => {
             const item = {

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

@@ -253,7 +253,7 @@ class Comment extends React.Component<Props, State> {
                         ) : (
                             <ActivityMessage
                                 id={id}
-                                isEdited={isEdited}
+                                isEdited={isEdited && !isResolved}
                                 tagged_message={tagged_message}
                                 translatedTaggedMessage={translatedTaggedMessage}
                                 {...translations}

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

@@ -385,13 +385,16 @@ describe('elements/content-sidebar/ActivityFeed/comment/Comment', () => {
     });
 
     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}
+        created_at                  | modified_at                 | status        | expectedIsEdited
+        ${TIME_STRING_SEPT_27_2017} | ${undefined}                | ${'open'}     | ${false}
+        ${TIME_STRING_SEPT_27_2017} | ${TIME_STRING_SEPT_27_2017} | ${'open'}     | ${false}
+        ${TIME_STRING_SEPT_27_2017} | ${TIME_STRING_SEPT_28_2017} | ${'open'}     | ${true}
+        ${TIME_STRING_SEPT_27_2017} | ${undefined}                | ${'resolved'} | ${false}
+        ${TIME_STRING_SEPT_27_2017} | ${TIME_STRING_SEPT_27_2017} | ${'resolved'} | ${false}
+        ${TIME_STRING_SEPT_27_2017} | ${TIME_STRING_SEPT_28_2017} | ${'resolved'} | ${false}
     `(
-        `given created_at = $created_at and modified_at = $modified_at, isEdited prop on ActivityMessage should be: $expectedIsEdited`,
-        ({ created_at, modified_at, expectedIsEdited }) => {
+        `given created_at = $created_at, modified_at = $modified_at and status = $status, isEdited prop on ActivityMessage should be: $expectedIsEdited`,
+        ({ created_at, modified_at, status, expectedIsEdited }) => {
             const comment = {
                 created_at,
                 modified_at,
@@ -408,6 +411,7 @@ describe('elements/content-sidebar/ActivityFeed/comment/Comment', () => {
                     currentUser={currentUser}
                     handlers={allHandlers}
                     mentionSelectorContacts={mentionSelectorContacts}
+                    status={status}
                 />,
             );