feat(annotation-activity): hide AnnotationActivityLink (#3089)

* feat(annotation-activity): hide link

show AnnotationActivityLink based on hasVerions param

Author: wpiesiak

src/elements/content-sidebar/ActivitySidebar.js

@@ -957,6 +957,7 @@ class ActivitySidebar extends React.PureComponent<Props, State> {
             elementId,
             file,
             hasReplies,
+            hasVersions,
             isDisabled = false,
             onVersionHistoryClick,
             getUserProfileUrl,
@@ -988,6 +989,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

@@ -46,6 +46,7 @@ type Props = {
     getMentionWithQuery?: Function,
     getUserProfileUrl?: GetProfileUrlCallback,
     hasReplies?: boolean,
+    hasVersions?: boolean,
     items: FeedItems,
     mentionSelectorContacts?: SelectorItems<>,
     onAnnotationDelete?: ({ id: string, permissions: AnnotationPermission }) => void,
@@ -91,6 +92,7 @@ const ActiveState = ({
     currentFileVersionId,
     currentUser,
     hasReplies = false,
+    hasVersions,
     items,
     mentionSelectorContacts,
     getMentionWithQuery,
@@ -270,6 +272,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

@@ -45,6 +45,7 @@ type Props = {
     getMentionWithQuery?: Function,
     getUserProfileUrl?: GetProfileUrlCallback,
     hasReplies?: boolean,
+    hasVersions?: boolean,
     isDisabled?: boolean,
     mentionSelectorContacts?: SelectorItems<User>,
     onAnnotationDelete?: ({ id: string, permissions: AnnotationPermission }) => void,
@@ -236,6 +237,7 @@ class ActivityFeed extends React.Component<Props, State> {
             getMentionWithQuery,
             getUserProfileUrl,
             hasReplies,
+            hasVersions,
             isDisabled,
             mentionSelectorContacts,
             contactsLoaded,
@@ -319,6 +321,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,7 +30,8 @@ type Props = {
     getAvatarUrl: GetAvatarUrlCallback,
     getMentionWithQuery?: (searchStr: string) => void,
     getUserProfileUrl?: GetProfileUrlCallback,
-    isCurrentVersion: boolean,
+    hasVersions?: boolean,
+    isCurrentVersion?: boolean,
     item: Annotation,
     mentionSelectorContacts?: SelectorItems<User>,
     onDelete?: ({ id: string, permissions: AnnotationPermission }) => any,
@@ -45,6 +46,7 @@ const AnnotationActivity = ({
     getAvatarUrl,
     getMentionWithQuery,
     getUserProfileUrl,
+    hasVersions,
     isCurrentVersion,
     mentionSelectorContacts,
     onDelete = noop,
@@ -102,12 +104,9 @@ const AnnotationActivity = ({
 
     const createdAtTimestamp = new Date(created_at).getTime();
     const createdByUser = created_by || PLACEHOLDER_USER;
-    const linkMessage = isCurrentVersion ? messages.annotationActivityPageItem : messages.annotationActivityVersionLink;
-    const linkValue = isCurrentVersion ? target.location.value : getProp(file_version, 'version_number');
+
     const message = (description && description.message) || '';
-    const activityLinkMessage = isFileVersionUnavailable
-        ? messages.annotationActivityVersionUnavailable
-        : { ...linkMessage, values: { number: linkValue } };
+
     const tetherProps = {
         attachment: 'top right',
         className: 'bcs-AnnotationActivity-deleteConfirmationModal',
@@ -149,10 +148,12 @@ const AnnotationActivity = ({
                             <AnnotationActivityLink
                                 className="bcs-AnnotationActivity-link"
                                 data-resin-target="annotationLink"
+                                fileVersion={getProp(file_version, 'version_number')}
                                 id={id}
-                                isDisabled={isFileVersionUnavailable}
-                                message={activityLinkMessage}
+                                isCurrentVersion={isCurrentVersion}
+                                locationValue={target.location.value}
                                 onClick={handleSelect}
+                                shouldHideLink={!hasVersions}
                             />
                         </div>
                         <ActivityStatus status={status} />

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

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

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

@@ -6,6 +6,13 @@
     color: $bdl-box-blue;
     font-weight: bold;
 
+    &::before {
+        margin-right: 2 * $bdl-grid-unit;
+        margin-left: 2 * $bdl-grid-unit;
+        color: $bdl-gray-50;
+        content: '\2022';
+    }
+
     &[aria-disabled='true'] {
         color: $bdl-gray-62;
     }

src/elements/content-sidebar/activity-feed/annotations/AnnotationActivityLink.tsx

@@ -4,29 +4,48 @@ import noop from 'lodash/noop';
 import { injectIntl, MessageDescriptor, WrappedComponentProps } from 'react-intl';
 import PlainButton from '../../../../components/plain-button';
 import { ButtonType } from '../../../../components/button';
+import messages from './messages';
 import './AnnotationActivityLink.scss';
 
 type MessageDescriptorWithValues = {
-    values?: Record<string, number>;
+    values?: { number: string };
 } & MessageDescriptor;
 export interface AnnotationActivityLinkProps extends WrappedComponentProps {
     className?: string;
+    fileVersion: string;
     id: string;
-    isDisabled: boolean;
-    message: MessageDescriptorWithValues;
+    isCurrentVersion?: boolean;
+    locationValue: string;
     onClick: (id: string) => void;
+    shouldHideLink: boolean;
 }
 
-const AnnotationActivityLink = ({
+const AnnotationActivityLink: React.FC<AnnotationActivityLinkProps> = ({
     className,
     id,
+    fileVersion,
     intl,
-    isDisabled = false,
-    message,
+    isCurrentVersion,
+    locationValue,
     onClick = noop,
+    shouldHideLink,
     ...rest
-}: AnnotationActivityLinkProps): JSX.Element => {
-    const { values, ...messageDescriptor } = message;
+}: AnnotationActivityLinkProps) => {
+    if (shouldHideLink) {
+        return null;
+    }
+
+    const getMessage = (): MessageDescriptorWithValues => {
+        const linkMessage = isCurrentVersion
+            ? messages.annotationActivityPageItem
+            : messages.annotationActivityVersionLink;
+        const linkValue = isCurrentVersion ? locationValue : fileVersion;
+        return !fileVersion
+            ? messages.annotationActivityVersionUnavailable
+            : { ...linkMessage, values: { number: linkValue } };
+    };
+
+    const { values, ...messageDescriptor } = getMessage();
     const translatedMessage = intl.formatMessage(messageDescriptor, values);
 
     const handleClick = (event: React.SyntheticEvent<HTMLButtonElement>) => {
@@ -38,7 +57,7 @@ const AnnotationActivityLink = ({
     };
 
     const handleMouseDown = (event: React.MouseEvent<HTMLButtonElement>) => {
-        if (isDisabled) {
+        if (!fileVersion) {
             return;
         }
 
@@ -52,7 +71,7 @@ const AnnotationActivityLink = ({
         <PlainButton
             className={classNames('bcs-AnnotationActivityLink', className)}
             data-testid="bcs-AnnotationActivity-link"
-            isDisabled={isDisabled}
+            isDisabled={!fileVersion}
             onClick={handleClick}
             onMouseDown={handleMouseDown}
             title={translatedMessage}

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

@@ -6,7 +6,6 @@ import AnnotationActivityMenu from '../AnnotationActivityMenu';
 import CommentForm from '../../comment-form/CommentForm';
 import DeleteConfirmation from '../../common/delete-confirmation';
 import Media from '../../../../../components/media';
-import messages from '../messages';
 import SelectableActivityCard from '../../SelectableActivityCard';
 
 jest.mock('../../Avatar', () => () => 'Avatar');
@@ -39,6 +38,7 @@ describe('elements/content-sidebar/ActivityFeed/annotations/AnnotationActivity',
     const mockActivity = {
         currentUser,
         handlers: allHandlers,
+        hasVersions: true,
         isCurrentVersion: true,
         item: mockAnnotation,
         mentionSelectorContacts,
@@ -84,10 +84,10 @@ describe('elements/content-sidebar/ActivityFeed/annotations/AnnotationActivity',
             expect(wrapper.find('ActivityTimestamp').prop('date')).toEqual(unixTime);
             expect(wrapper.find('AnnotationActivityLink').props()).toMatchObject({
                 'data-resin-target': 'annotationLink',
-                message: {
-                    ...messages.annotationActivityPageItem,
-                    values: { number: 1 },
-                },
+                isCurrentVersion: true,
+                fileVersion: mockAnnotation.file_version.version_number,
+                locationValue: mockAnnotation.target.location.value,
+                shouldHideLink: false,
             });
             expect(wrapper.exists(AnnotationActivityMenu)).toBe(true);
             expect(wrapper.find('ForwardRef(withFeatureConsumer(ActivityMessage))').prop('tagged_message')).toEqual(
@@ -127,28 +127,23 @@ describe('elements/content-sidebar/ActivityFeed/annotations/AnnotationActivity',
         expect(wrapper.exists('CommentForm')).toBe(false);
     });
 
-    test('should correctly render annotation activity of another file version', () => {
-        const wrapper = getWrapper({ isCurrentVersion: false });
-
-        expect(wrapper.find('AnnotationActivityLink').prop('message')).toEqual({
-            ...messages.annotationActivityVersionLink,
-            values: { number: '2' },
-        });
+    test('should render commenter as a link', () => {
+        const wrapper = getWrapper();
+        expect(wrapper.find('UserLink').prop('name')).toEqual(mockActivity.item.created_by.name);
     });
 
-    test('should render version unavailable if file version is null', () => {
-        const wrapper = getWrapper({ item: { ...mockAnnotation, file_version: null } });
-        const activityLink = wrapper.find('AnnotationActivityLink');
-
-        expect(activityLink.prop('message')).toEqual({
-            ...messages.annotationActivityVersionUnavailable,
+    test('should hide AnnotationActivityLink if hasVersions is false', () => {
+        const wrapper = getWrapper({ hasVersions: false });
+        expect(wrapper.find('AnnotationActivityLink').props()).toMatchObject({
+            shouldHideLink: true,
         });
-        expect(activityLink.prop('isDisabled')).toBe(true);
     });
 
-    test('should render commenter as a link', () => {
-        const wrapper = getWrapper();
-        expect(wrapper.find('UserLink').prop('name')).toEqual(mockActivity.item.created_by.name);
+    test('should show AnnotationActivityLink if hasVersions is true', () => {
+        const wrapper = getWrapper({ hasVersions: true });
+        expect(wrapper.find('AnnotationActivityLink').props()).toMatchObject({
+            shouldHideLink: false,
+        });
     });
 
     test('should not show actions menu when annotation activity is pending', () => {