revert(annotation-activity): hide AnnotationActivityLink (#3120)

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

This reverts commit dc3642e.

Author: kkuliczkowski-box

src/elements/content-sidebar/ActivitySidebar.js

@@ -957,7 +957,6 @@ class ActivitySidebar extends React.PureComponent<Props, State> {
             elementId,
             file,
             hasReplies,
-            hasVersions,
             isDisabled = false,
             onVersionHistoryClick,
             getUserProfileUrl,
@@ -989,7 +988,6 @@ 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,7 +51,6 @@ 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,7 +46,6 @@ type Props = {
     getMentionWithQuery?: Function,
     getUserProfileUrl?: GetProfileUrlCallback,
     hasReplies?: boolean,
-    hasVersions?: boolean,
     items: FeedItems,
     mentionSelectorContacts?: SelectorItems<>,
     onAnnotationDelete?: ({ id: string, permissions: AnnotationPermission }) => void,
@@ -92,7 +91,6 @@ const ActiveState = ({
     currentFileVersionId,
     currentUser,
     hasReplies = false,
-    hasVersions,
     items,
     mentionSelectorContacts,
     getMentionWithQuery,
@@ -272,7 +270,6 @@ 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,7 +45,6 @@ type Props = {
     getMentionWithQuery?: Function,
     getUserProfileUrl?: GetProfileUrlCallback,
     hasReplies?: boolean,
-    hasVersions?: boolean,
     isDisabled?: boolean,
     mentionSelectorContacts?: SelectorItems<User>,
     onAnnotationDelete?: ({ id: string, permissions: AnnotationPermission }) => void,
@@ -237,7 +236,6 @@ class ActivityFeed extends React.Component<Props, State> {
             getMentionWithQuery,
             getUserProfileUrl,
             hasReplies,
-            hasVersions,
             isDisabled,
             mentionSelectorContacts,
             contactsLoaded,
@@ -321,7 +319,6 @@ 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,8 +30,7 @@ type Props = {
     getAvatarUrl: GetAvatarUrlCallback,
     getMentionWithQuery?: (searchStr: string) => void,
     getUserProfileUrl?: GetProfileUrlCallback,
-    hasVersions?: boolean,
-    isCurrentVersion?: boolean,
+    isCurrentVersion: boolean,
     item: Annotation,
     mentionSelectorContacts?: SelectorItems<User>,
     onDelete?: ({ id: string, permissions: AnnotationPermission }) => any,
@@ -46,7 +45,6 @@ const AnnotationActivity = ({
     getAvatarUrl,
     getMentionWithQuery,
     getUserProfileUrl,
-    hasVersions,
     isCurrentVersion,
     mentionSelectorContacts,
     onDelete = noop,
@@ -104,9 +102,12 @@ 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',
@@ -148,12 +149,10 @@ const AnnotationActivity = ({
                             <AnnotationActivityLink
                                 className="bcs-AnnotationActivity-link"
                                 data-resin-target="annotationLink"
-                                fileVersion={getProp(file_version, 'version_number')}
                                 id={id}
-                                isCurrentVersion={isCurrentVersion}
-                                locationValue={target.location.value}
+                                isDisabled={isFileVersionUnavailable}
+                                message={activityLinkMessage}
                                 onClick={handleSelect}
-                                shouldHideLink={!hasVersions}
                             />
                         </div>
                         <ActivityStatus status={status} />

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

@@ -42,6 +42,15 @@
 .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,13 +6,6 @@
     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,48 +4,29 @@ 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?: { number: string };
+    values?: Record<string, number>;
 } & MessageDescriptor;
 export interface AnnotationActivityLinkProps extends WrappedComponentProps {
     className?: string;
-    fileVersion: string;
     id: string;
-    isCurrentVersion?: boolean;
-    locationValue: string;
+    isDisabled: boolean;
+    message: MessageDescriptorWithValues;
     onClick: (id: string) => void;
-    shouldHideLink: boolean;
 }
 
-const AnnotationActivityLink: React.FC<AnnotationActivityLinkProps> = ({
+const AnnotationActivityLink = ({
     className,
     id,
-    fileVersion,
     intl,
-    isCurrentVersion,
-    locationValue,
+    isDisabled = false,
+    message,
     onClick = noop,
-    shouldHideLink,
     ...rest
-}: 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();
+}: AnnotationActivityLinkProps): JSX.Element => {
+    const { values, ...messageDescriptor } = message;
     const translatedMessage = intl.formatMessage(messageDescriptor, values);
 
     const handleClick = (event: React.SyntheticEvent<HTMLButtonElement>) => {
@@ -57,7 +38,7 @@ const AnnotationActivityLink: React.FC<AnnotationActivityLinkProps> = ({
     };
 
     const handleMouseDown = (event: React.MouseEvent<HTMLButtonElement>) => {
-        if (!fileVersion) {
+        if (isDisabled) {
             return;
         }
 
@@ -71,7 +52,7 @@ const AnnotationActivityLink: React.FC<AnnotationActivityLinkProps> = ({
         <PlainButton
             className={classNames('bcs-AnnotationActivityLink', className)}
             data-testid="bcs-AnnotationActivity-link"
-            isDisabled={!fileVersion}
+            isDisabled={isDisabled}
             onClick={handleClick}
             onMouseDown={handleMouseDown}
             title={translatedMessage}

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

@@ -6,6 +6,7 @@ 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');
@@ -38,7 +39,6 @@ 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',
-                isCurrentVersion: true,
-                fileVersion: mockAnnotation.file_version.version_number,
-                locationValue: mockAnnotation.target.location.value,
-                shouldHideLink: false,
+                message: {
+                    ...messages.annotationActivityPageItem,
+                    values: { number: 1 },
+                },
             });
             expect(wrapper.exists(AnnotationActivityMenu)).toBe(true);
             expect(wrapper.find('ForwardRef(withFeatureConsumer(ActivityMessage))').prop('tagged_message')).toEqual(
@@ -127,23 +127,28 @@ describe('elements/content-sidebar/ActivityFeed/annotations/AnnotationActivity',
         expect(wrapper.exists('CommentForm')).toBe(false);
     });
 
-    test('should render commenter as a link', () => {
-        const wrapper = getWrapper();
-        expect(wrapper.find('UserLink').prop('name')).toEqual(mockActivity.item.created_by.name);
-    });
+    test('should correctly render annotation activity of another file version', () => {
+        const wrapper = getWrapper({ isCurrentVersion: false });
 
-    test('should hide AnnotationActivityLink if hasVersions is false', () => {
-        const wrapper = getWrapper({ hasVersions: false });
-        expect(wrapper.find('AnnotationActivityLink').props()).toMatchObject({
-            shouldHideLink: true,
+        expect(wrapper.find('AnnotationActivityLink').prop('message')).toEqual({
+            ...messages.annotationActivityVersionLink,
+            values: { number: '2' },
         });
     });
 
-    test('should show AnnotationActivityLink if hasVersions is true', () => {
-        const wrapper = getWrapper({ hasVersions: true });
-        expect(wrapper.find('AnnotationActivityLink').props()).toMatchObject({
-            shouldHideLink: false,
+    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,
         });
+        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 not show actions menu when annotation activity is pending', () => {