feat(annotations): hide AnnotationActivityLink based on hasVersions prop (#3132)

* feat(annotations): hide AnnotationActivityLink based on hasVersions prop

* feat(annotation): move css definition to AnnotationActivity.scss

Author: wpiesiak

src/elements/content-sidebar/ActivitySidebar.js

@@ -975,6 +975,7 @@ class ActivitySidebar extends React.PureComponent<Props, State> {
             elementId,
             file,
             hasReplies,
+            hasVersions,
             isDisabled = false,
             onVersionHistoryClick,
             getUserProfileUrl,
@@ -1006,6 +1007,7 @@ class ActivitySidebar extends React.PureComponent<Props, State> {
                     getMentionWithQuery={this.getMention}
                     getUserProfileUrl={getUserProfileUrl}
                     hasReplies={hasReplies}
+                    hasVersions={hasVersions}
                     isDisabled={isDisabled}
                     mentionSelectorContacts={mentionSelectorContacts}
                     contactsLoaded={contactsLoaded}

src/elements/content-sidebar/__tests__/__snapshots__/ActivitySidebar.test.js.snap

@@ -51,6 +51,7 @@ exports[`elements/content-sidebar/ActivitySidebar render() should render the act
     getAvatarUrl={[Function]}
     getMentionWithQuery={[Function]}
     hasReplies={false}
+    hasVersions={true}
     isDisabled={false}
     onAnnotationDelete={[Function]}
     onAnnotationEdit={[Function]}

src/elements/content-sidebar/activity-feed/activity-feed/ActiveState.js

@@ -47,6 +47,7 @@ type Props = {
     getMentionWithQuery?: Function,
     getUserProfileUrl?: GetProfileUrlCallback,
     hasReplies?: boolean,
+    hasVersions?: boolean,
     items: FeedItems,
     mentionSelectorContacts?: SelectorItems<>,
     onAnnotationDelete?: ({ id: string, permissions: AnnotationPermission }) => void,
@@ -97,6 +98,7 @@ const ActiveState = ({
     getMentionWithQuery,
     getUserProfileUrl,
     hasReplies = false,
+    hasVersions,
     items,
     mentionSelectorContacts,
     onAnnotationDelete,
@@ -278,6 +280,7 @@ const ActiveState = ({
                                         getAvatarUrl={getAvatarUrl}
                                         getUserProfileUrl={getUserProfileUrl}
                                         getMentionWithQuery={getMentionWithQuery}
+                                        hasVersions={hasVersions}
                                         isCurrentVersion={currentFileVersionId === itemFileVersionId}
                                         item={item}
                                         mentionSelectorContacts={mentionSelectorContacts}

src/elements/content-sidebar/activity-feed/activity-feed/ActivityFeed.js

@@ -46,6 +46,7 @@ type Props = {
     getMentionWithQuery?: Function,
     getUserProfileUrl?: GetProfileUrlCallback,
     hasReplies?: boolean,
+    hasVersions?: boolean,
     isDisabled?: boolean,
     mentionSelectorContacts?: SelectorItems<User>,
     onAnnotationDelete?: ({ id: string, permissions: AnnotationPermission }) => void,
@@ -238,6 +239,7 @@ class ActivityFeed extends React.Component<Props, State> {
             getMentionWithQuery,
             getUserProfileUrl,
             hasReplies,
+            hasVersions,
             isDisabled,
             mentionSelectorContacts,
             contactsLoaded,
@@ -322,6 +324,7 @@ class ActivityFeed extends React.Component<Props, State> {
                             getMentionWithQuery={getMentionWithQuery}
                             getUserProfileUrl={getUserProfileUrl}
                             hasReplies={hasReplies}
+                            hasVersions={hasVersions}
                             isDisabled={isDisabled}
                             items={collapseFeedState(feedItems)}
                             mentionSelectorContacts={mentionSelectorContacts}

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

@@ -30,6 +30,7 @@ type Props = {
     getAvatarUrl: GetAvatarUrlCallback,
     getMentionWithQuery?: (searchStr: string) => void,
     getUserProfileUrl?: GetProfileUrlCallback,
+    hasVersions?: boolean,
     isCurrentVersion: boolean,
     item: Annotation,
     mentionSelectorContacts?: SelectorItems<User>,
@@ -45,6 +46,7 @@ const AnnotationActivity = ({
     getAvatarUrl,
     getMentionWithQuery,
     getUserProfileUrl,
+    hasVersions,
     isCurrentVersion,
     mentionSelectorContacts,
     onDelete = noop,
@@ -78,6 +80,7 @@ const AnnotationActivity = ({
         setIsConfirmingDelete(false);
         onDelete({ id, permissions });
     };
+
     const handleEdit = (): void => setIsEditing(true);
     const handleFormCancel = (): void => setIsEditing(false);
     const handleFormSubmit = ({ text }): void => {
@@ -146,14 +149,16 @@ const AnnotationActivity = ({
                         </div>
                         <div className="bcs-AnnotationActivity-timestamp">
                             <ActivityTimestamp date={createdAtTimestamp} />
-                            <AnnotationActivityLink
-                                className="bcs-AnnotationActivity-link"
-                                data-resin-target="annotationLink"
-                                id={id}
-                                isDisabled={isFileVersionUnavailable}
-                                message={activityLinkMessage}
-                                onClick={handleSelect}
-                            />
+                            {hasVersions && (
+                                <AnnotationActivityLink
+                                    className="bcs-AnnotationActivity-link"
+                                    data-resin-target="annotationLink"
+                                    id={id}
+                                    isDisabled={isFileVersionUnavailable}
+                                    message={activityLinkMessage}
+                                    onClick={handleSelect}
+                                />
+                            )}
                         </div>
                         <ActivityStatus status={status} />
                         {isEditing && currentUser ? (

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

@@ -42,15 +42,13 @@
 .bcs-AnnotationActivity-timestamp {
     display: flex;
     white-space: nowrap;
+}
 
-    .bcs-ActivityTimestamp {
-        &::after {
-            margin-right: 8px;
-            margin-left: 8px;
-            color: $bdl-gray-50;
-            content: '\2022';
-        }
-    }
+.bcs-AnnotationActivity-link::before {
+    margin-right: 2 * $bdl-grid-unit;
+    margin-left: 2 * $bdl-grid-unit;
+    color: $bdl-gray-50;
+    content: '\2022';
 }
 
 // override for activity feed defaults

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

@@ -39,6 +39,7 @@ describe('elements/content-sidebar/ActivityFeed/annotations/AnnotationActivity',
     const mockActivity = {
         currentUser,
         handlers: allHandlers,
+        hasVersions: true,
         isCurrentVersion: true,
         item: mockAnnotation,
         mentionSelectorContacts,
@@ -146,6 +147,11 @@ describe('elements/content-sidebar/ActivityFeed/annotations/AnnotationActivity',
         expect(activityLink.prop('isDisabled')).toBe(true);
     });
 
+    test('should not render file version link if hasVersions is false', () => {
+        const wrapper = getWrapper({ hasVersions: false });
+        expect(wrapper.exists('AnnotationActivityLink')).toBe(false);
+    });
+
     test('should render commenter as a link', () => {
         const wrapper = getWrapper();
         expect(wrapper.find('UserLink').prop('name')).toEqual(mockActivity.item.created_by.name);