box-ui-elements 16.1.0-beta.9 → 17.0.0

package/src/elements/content-sidebar/__tests__/ActivitySidebarFilter.test.js

@@ -3,52 +3,81 @@ import React from 'react';
 import { IntlProvider } from 'react-intl';
 import { render, screen, fireEvent } from '@testing-library/react';
 import ActivitySidebarFilter from '../ActivitySidebarFilter';
-import type { FeedItemStatus } from '../../../common/types/feed';
+import type { ActivityFilterItemType, ActivityFilterOption } from '../../../common/types/feed';
 
 jest.mock('react-intl', () => ({
     ...jest.requireActual('react-intl'),
     FormattedMessage: ({ defaultMessage }: { defaultMessage: string }) => <span>{defaultMessage}</span>,
 }));
 
-const onFeedItemStatusClick = jest.fn();
+const onFeedItemTypeClick = jest.fn();
+
+const availableActivityFilterOptions: ActivityFilterOption[] = ['all', 'open', 'resolved', 'tasks'];
 
 const Wrapper = ({ children }: { children?: React.ReactNode }) => {
     return <IntlProvider locale="en">{children}</IntlProvider>;
 };
 
-const renderWithWrapper = (feedItemStatus?: FeedItemStatus) =>
-    render(<ActivitySidebarFilter feedItemStatus={feedItemStatus} onFeedItemStatusClick={onFeedItemStatusClick} />, {
-        wrapper: Wrapper,
-    });
+const renderWithWrapper = (activityFilterOptions?: ActivityFilterOption[], feedItemType?: ActivityFilterItemType) =>
+    render(
+        <ActivitySidebarFilter
+            activityFilterOptions={activityFilterOptions}
+            feedItemType={feedItemType}
+            onFeedItemTypeClick={onFeedItemTypeClick}
+        />,
+        {
+            wrapper: Wrapper,
+        },
+    );
 
 describe('elements/content-sidebar/ActivitySidebarFilter', () => {
     test.each`
-        feedItemStatus | option
-        ${undefined}   | ${'All Comments'}
-        ${'open'}      | ${'Unresolved Comments'}
+        feedItemType  | option
+        ${'all'}      | ${'All Activity'}
+        ${'open'}     | ${'Unresolved Comments'}
+        ${'resolved'} | ${'Resolved Comments'}
+        ${'task'}     | ${'Tasks'}
     `(
-        'should render "$option" as the selected status when feedItemStatus prop is equal to $feedItemStatus',
-        ({ feedItemStatus, option }) => {
-            renderWithWrapper(feedItemStatus);
+        'should render "$option" as the selected status when feedItemType prop is equal to $feedItemType',
+        ({ feedItemType, option }) => {
+            renderWithWrapper(availableActivityFilterOptions, feedItemType);
             expect(screen.getByText(option)).toBeVisible();
         },
     );
 
     test.each`
-        expected     | option                   | initialOption            | initialStatus
-        ${undefined} | ${'All Comments'}        | ${'Unresolved Comments'} | ${'open'}
-        ${'open'}    | ${'Unresolved Comments'} | ${'All Comments'}        | ${undefined}
+        expected      | option                   | initialOption            | initialType
+        ${'all'}      | ${'All Activity'}        | ${'Unresolved Comments'} | ${'open'}
+        ${'open'}     | ${'Unresolved Comments'} | ${'All Activity'}        | ${undefined}
+        ${'resolved'} | ${'Resolved Comments'}   | ${'All Activity'}        | ${undefined}
+        ${'task'}     | ${'Tasks'}               | ${'All Activity'}        | ${undefined}
     `(
         'onFeedItemStatusClick should be called with $expected when clicked on $option',
-        async ({ initialOption, option, initialStatus, expected }) => {
-            renderWithWrapper(initialStatus);
+        async ({ initialOption, option, initialType, expected }) => {
+            renderWithWrapper(availableActivityFilterOptions, initialType);
 
             const dropdownBtn = screen.getByText(initialOption);
 
             fireEvent.click(dropdownBtn);
             fireEvent.click(await screen.findByText(option));
 
-            expect(onFeedItemStatusClick).toBeCalledWith(expected);
+            expect(onFeedItemTypeClick).toBeCalledWith(expected);
+        },
+    );
+
+    test.each`
+        filterOptions                           | title
+        ${['all']}                              | ${'All Comments'}
+        ${['all', 'open']}                      | ${'All Comments'}
+        ${['all', 'resolved']}                  | ${'All Comments'}
+        ${['all', 'open', 'resolved']}          | ${'All Comments'}
+        ${['all', 'open', 'resolved', 'tasks']} | ${'All Activity'}
+        ${['all', 'tasks']}                     | ${'All Activity'}
+    `(
+        'should render $title as the title for the all selection when $filterOptions is passed as the activityFilterOptions prop',
+        async ({ filterOptions, title }) => {
+            renderWithWrapper(filterOptions, undefined);
+            expect(screen.getByText(title)).toBeVisible();
         },
     );
 });

package/src/elements/content-sidebar/__tests__/SidebarNav.test.js

@@ -11,7 +11,7 @@ import IconMagicWand from '../../../icons/general/IconMagicWand';
 import IconMetadataThick from '../../../icons/general/IconMetadataThick';
 import SidebarNav from '../SidebarNav';
 import SidebarNavButton from '../SidebarNavButton';
-import SidebarNavSign from '../SidebarNavSign';
+import SidebarNavSignButton from '../SidebarNavSignButton';
 
 describe('elements/content-sidebar/SidebarNav', () => {
     const getWrapper = (props = {}, active = '', features = {}) =>
@@ -102,11 +102,11 @@ describe('elements/content-sidebar/SidebarNav', () => {
             },
         };
         const wrapper = getWrapper({}, 'activity', features);
-        expect(wrapper.exists(SidebarNavSign)).toBe(true);
+        expect(wrapper.exists(SidebarNavSignButton)).toBe(true);
     });
 
     test('should not render the Box Sign entry point if its feature is not enabled', () => {
         const wrapper = getWrapper();
-        expect(wrapper.exists(SidebarNavSign)).toBe(false);
+        expect(wrapper.exists(SidebarNavSignButton)).toBe(false);
     });
 });

package/src/elements/content-sidebar/__tests__/SidebarNavSign.test.tsx

@@ -1,60 +1,80 @@
 import React from 'react';
-import { shallow } from 'enzyme';
-import BoxSign28 from '../../../icon/logo/BoxSign28';
-import PlainButton from '../../../components/plain-button';
+import { render, fireEvent } from '@testing-library/react';
 import SidebarNavSign from '../SidebarNavSign';
 // @ts-ignore Module is written in Flow
-import TargetedClickThroughGuideTooltip from '../../../features/targeting/TargetedClickThroughGuideTooltip';
-import Tooltip from '../../../components/tooltip';
+import FeatureProvider from '../../common/feature-checking/FeatureProvider';
 
 describe('elements/content-sidebar/SidebarNavSign', () => {
-    const getWrapper = (props = {}) => shallow(<SidebarNavSign {...props} />).dive();
-
-    test.each`
-        status       | label
-        ${undefined} | ${'Request Signature'}
-        ${'random'}  | ${'Request Signature'}
-        ${'active'}  | ${'Sign'}
-    `('should render the correct label based on the current signature status', ({ label, status }) => {
-        const wrapper = getWrapper({ status });
-
-        expect(wrapper.find(Tooltip).prop('text')).toBe(label);
-        expect(wrapper.find(PlainButton).prop('aria-label')).toBe(label);
-        expect(wrapper.exists(BoxSign28)).toBe(true);
+    const onClickRequestSignature = jest.fn();
+    const onClickSignMyself = jest.fn();
+
+    const renderComponent = (props = {}, features = {}) =>
+        render(
+            <FeatureProvider features={features}>
+                <SidebarNavSign {...props} />
+            </FeatureProvider>,
+        );
+
+    test.each([true, false])('should render sign button', isRemoveInterstitialEnabled => {
+        const features = {
+            boxSign: {
+                isSignRemoveInterstitialEnabled: isRemoveInterstitialEnabled,
+            },
+        };
+
+        const wrapper = renderComponent({}, features);
+        expect(wrapper.getByTestId('sign-button')).toBeVisible();
+    });
+
+    test('should call correct handler when sign button is clicked', () => {
+        const features = {
+            boxSign: {
+                isSignRemoveInterstitialEnabled: false,
+                onClick: onClickRequestSignature,
+            },
+        };
+        const { getByTestId } = renderComponent({}, features);
+
+        fireEvent.click(getByTestId('sign-button'));
+
+        expect(onClickRequestSignature).toBeCalled();
+    });
+
+    test('should open dropdown with 2 menu items when sign button is clicked', () => {
+        const features = {
+            boxSign: {
+                isSignRemoveInterstitialEnabled: true,
+            },
+        };
+        const { getByTestId } = renderComponent({}, features);
+        fireEvent.click(getByTestId('sign-button'));
+        expect(getByTestId('sign-request-signature-button')).toBeVisible();
+        expect(getByTestId('sign-sign-myself-button')).toBeVisible();
     });
 
-    test.each`
-        targetingApi          | isFtuxVisible | isTooltipVisible
-        ${{ canShow: true }}  | ${true}       | ${false}
-        ${{ canShow: false }} | ${false}      | ${true}
-        ${undefined}          | ${false}      | ${true}
-    `(
-        'should render the ftux and main tooltip based on the targeting api',
-        ({ isFtuxVisible, isTooltipVisible, targetingApi }) => {
-            const wrapper = getWrapper({ targetingApi });
-
-            expect(wrapper.find(Tooltip).prop('isDisabled')).toBe(!isTooltipVisible);
-            expect(wrapper.exists(TargetedClickThroughGuideTooltip)).toBe(isFtuxVisible);
-            expect(wrapper.exists(BoxSign28)).toBe(true); // Child components should always be rendered
-        },
-    );
-
-    test.each`
-        blockedReason        | isDisabled | tooltipMessage
-        ${'shield-download'} | ${true}    | ${'This action is unavailable due to a security policy.'}
-        ${'shared-link'}     | ${true}    | ${'This action is unavailable due to a security policy.'}
-        ${'shield-sign'}     | ${true}    | ${'This action is unavailable due to a security policy.'}
-        ${'watermark'}       | ${true}    | ${'This action is unavailable, because the file is watermarked.'}
-        ${''}                | ${false}   | ${'Request Signature'}
-    `(
-        'should render the correct main tooltip and ftux tooltip based on the blockedReason',
-        ({ blockedReason, isDisabled, tooltipMessage }) => {
-            const wrapper = getWrapper({ blockedReason, targetingApi: { canShow: true } });
-
-            expect(wrapper.find(Tooltip).prop('text')).toBe(tooltipMessage);
-            expect(wrapper.exists(BoxSign28)).toBe(true);
-            expect(wrapper.find(PlainButton).prop('isDisabled')).toBe(isDisabled);
-            expect(wrapper.exists(TargetedClickThroughGuideTooltip)).toBe(!isDisabled);
-        },
-    );
+    test('should call correct handler when request signature option is clicked', () => {
+        const features = {
+            boxSign: {
+                isSignRemoveInterstitialEnabled: true,
+                onClick: onClickRequestSignature,
+            },
+        };
+        const { getByTestId } = renderComponent({}, features);
+        fireEvent.click(getByTestId('sign-button'));
+        fireEvent.click(getByTestId('sign-request-signature-button'));
+        expect(onClickRequestSignature).toBeCalled();
+    });
+
+    test('should call correct handler when sign myself option is clicked', () => {
+        const features = {
+            boxSign: {
+                isSignRemoveInterstitialEnabled: true,
+                onClickSignMyself,
+            },
+        };
+        const { getByTestId } = renderComponent({}, features);
+        fireEvent.click(getByTestId('sign-button'));
+        fireEvent.click(getByTestId('sign-sign-myself-button'));
+        expect(onClickSignMyself).toBeCalled();
+    });
 });

package/src/elements/content-sidebar/__tests__/SidebarNavSignButton.test.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import BoxSign28 from '../../../icon/logo/BoxSign28';
+import PlainButton from '../../../components/plain-button';
+import SidebarNavSignButton from '../SidebarNavSignButton';
+// @ts-ignore Module is written in Flow
+import TargetedClickThroughGuideTooltip from '../../../features/targeting/TargetedClickThroughGuideTooltip';
+import Tooltip from '../../../components/tooltip';
+
+describe('elements/content-sidebar/SidebarNavSignButton', () => {
+    const getWrapper = (props = {}) => shallow(<SidebarNavSignButton {...props} />).dive();
+
+    test.each`
+        status       | label
+        ${undefined} | ${'Request Signature'}
+        ${'random'}  | ${'Request Signature'}
+        ${'active'}  | ${'Sign'}
+    `('should render the correct label based on the current signature status', ({ label, status }) => {
+        const wrapper = getWrapper({ status });
+
+        expect(wrapper.find(Tooltip).prop('text')).toBe(label);
+        expect(wrapper.find(PlainButton).prop('aria-label')).toBe(label);
+        expect(wrapper.exists(BoxSign28)).toBe(true);
+    });
+
+    test.each`
+        targetingApi          | isFtuxVisible | isTooltipVisible
+        ${{ canShow: true }}  | ${true}       | ${false}
+        ${{ canShow: false }} | ${false}      | ${true}
+        ${undefined}          | ${false}      | ${true}
+    `(
+        'should render the ftux and main tooltip based on the targeting api',
+        ({ isFtuxVisible, isTooltipVisible, targetingApi }) => {
+            const wrapper = getWrapper({ targetingApi });
+
+            expect(wrapper.find(Tooltip).prop('isDisabled')).toBe(!isTooltipVisible);
+            expect(wrapper.exists(TargetedClickThroughGuideTooltip)).toBe(isFtuxVisible);
+            expect(wrapper.exists(BoxSign28)).toBe(true); // Child components should always be rendered
+        },
+    );
+
+    test.each`
+        blockedReason        | isDisabled | tooltipMessage
+        ${'shield-download'} | ${true}    | ${'This action is unavailable due to a security policy.'}
+        ${'shared-link'}     | ${true}    | ${'This action is unavailable due to a security policy.'}
+        ${'shield-sign'}     | ${true}    | ${'This action is unavailable due to a security policy.'}
+        ${'watermark'}       | ${true}    | ${'This action is unavailable, because the file is watermarked.'}
+        ${''}                | ${false}   | ${'Request Signature'}
+    `(
+        'should render the correct main tooltip and ftux tooltip based on the blockedReason',
+        ({ blockedReason, isDisabled, tooltipMessage }) => {
+            const wrapper = getWrapper({ blockedReason, targetingApi: { canShow: true } });
+
+            expect(wrapper.find(Tooltip).prop('text')).toBe(tooltipMessage);
+            expect(wrapper.exists(BoxSign28)).toBe(true);
+            expect(wrapper.find(PlainButton).prop('isDisabled')).toBe(isDisabled);
+            expect(wrapper.exists(TargetedClickThroughGuideTooltip)).toBe(!isDisabled);
+        },
+    );
+});

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

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

package/src/elements/content-sidebar/activity-feed/Avatar.js

@@ -9,6 +9,7 @@ import type { GetAvatarUrlCallback } from '../../common/flowTypes';
 import type { User } from '../../../common/types/core';
 
 type Props = {
+    badgeIcon?: React.Element<any>,
     className?: string,
     getAvatarUrl?: GetAvatarUrlCallback,
     user: User,
@@ -61,11 +62,13 @@ class Avatar extends React.PureComponent<Props, State> {
     }
 
     render() {
-        const { user, className }: Props = this.props;
+        const { badgeIcon, className, user }: Props = this.props;
         const { avatarUrl }: State = this.state;
         const { id, name } = user;
 
-        return <AvatarComponent avatarUrl={avatarUrl} className={className} id={id} name={name} />;
+        return (
+            <AvatarComponent avatarUrl={avatarUrl} badgeIcon={badgeIcon} className={className} id={id} name={name} />
+        );
     }
 }
 

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

@@ -13,16 +13,6 @@ describe('elements/content-sidebar/ActivityFeed/Avatar', () => {
 
     const getWrapper = props => shallow(<Avatar {...props} />);
 
-    test('should render nothing if no avatarUrl in state and getAvatarUrl method was passed', () => {
-        expect(
-            getWrapper({ user, getAvatarUrl })
-                .dive()
-                .find('Avatar')
-                .exists(),
-        ).toBe(false);
-        expect(getAvatarUrl).toBeCalledWith(user.id);
-    });
-
     test('should render avatar with initials if getAvatarUrl is not passed in and no avatarUrl is in state', () => {
         expect(
             getWrapper({ user })

package/src/elements/content-sidebar/activity-feed/__tests__/__snapshots__/Avatar.test.js.snap

@@ -9,14 +9,17 @@ exports[`elements/content-sidebar/ActivityFeed/Avatar should render the avatar w
 `;
 
 exports[`elements/content-sidebar/ActivityFeed/Avatar should set the avatarUrl state from user prop 1`] = `
-<Badgeable
-  className="avatar"
->
-  <span>
-    <AvatarInitials
-      id="foo"
-      name="foo bar"
-    />
-  </span>
-</Badgeable>
+<Avatar
+  avatarUrl={null}
+  id="foo"
+  intl={
+    Object {
+      "formatDate": [Function],
+      "formatMessage": [Function],
+      "formatNumber": [Function],
+      "formatRelativeTime": [Function],
+    }
+  }
+  name="foo bar"
+/>
 `;

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

@@ -13,6 +13,7 @@ import Comment from '../comment';
 import TaskNew from '../task-new';
 import Version, { CollapsedVersion } from '../version';
 import withErrorHandling from '../../withErrorHandling';
+import { BaseComment } from '../comment/BaseComment';
 import {
     FEED_ITEM_TYPE_ANNOTATION,
     FEED_ITEM_TYPE_APP_ACTIVITY,
@@ -29,15 +30,13 @@ import type {
     FeedItem,
     FeedItems,
     FeedItemStatus,
-    FocusableFeedItemType,
 } from '../../../../common/types/feed';
 import type { SelectorItems, User } from '../../../../common/types/core';
 import type { GetAvatarUrlCallback, GetProfileUrlCallback } from '../../../common/flowTypes';
 import type { Translations } from '../../flowTypes';
 
 type Props = {
-    activeFeedEntryId?: string,
-    activeFeedEntryType?: FocusableFeedItemType,
+    activeFeedItem: FeedItem,
     activeFeedItemRef: { current: null | HTMLElement },
     approverSelectorContacts?: SelectorItems<>,
     currentFileVersionId: string,
@@ -46,7 +45,9 @@ type Props = {
     getAvatarUrl: GetAvatarUrlCallback,
     getMentionWithQuery?: Function,
     getUserProfileUrl?: GetProfileUrlCallback,
+    hasNewThreadedReplies?: boolean,
     hasReplies?: boolean,
+    hasVersions?: boolean,
     items: FeedItems,
     mentionSelectorContacts?: SelectorItems<>,
     onAnnotationDelete?: ({ id: string, permissions: AnnotationPermission }) => void,
@@ -64,6 +65,7 @@ type Props = {
         onSuccess: ?Function,
         onError: ?Function,
     ) => void,
+    onCommentSelect?: (id: string | null) => void,
     onHideReplies?: (id: string, replies: Array<CommentType>) => void,
     onReplyCreate?: (parentId: string, parentType: CommentFeedItemType, text: string) => void,
     onReplyDelete?: ({ id: string, parentId: string, permissions: BoxCommentPermission }) => void,
@@ -86,8 +88,7 @@ type Props = {
 };
 
 const ActiveState = ({
-    activeFeedEntryId,
-    activeFeedEntryType,
+    activeFeedItem,
     activeFeedItemRef,
     approverSelectorContacts,
     currentFileVersionId,
@@ -96,7 +97,9 @@ const ActiveState = ({
     getAvatarUrl,
     getMentionWithQuery,
     getUserProfileUrl,
+    hasNewThreadedReplies = false,
     hasReplies = false,
+    hasVersions,
     items,
     mentionSelectorContacts,
     onAnnotationDelete,
@@ -106,6 +109,7 @@ const ActiveState = ({
     onAppActivityDelete,
     onCommentDelete,
     onCommentEdit,
+    onCommentSelect = noop,
     onHideReplies = noop,
     onReplyCreate = noop,
     onReplyDelete = noop,
@@ -119,8 +123,9 @@ const ActiveState = ({
     onVersionInfo,
     translations,
 }: Props): React.Node => {
-    const activeEntry = items.find(({ id, type }) => id === activeFeedEntryId && type === activeFeedEntryType);
-
+    const onCommentSelectHandler = (itemId: string) => (isSelected: boolean) => {
+        onCommentSelect(isSelected ? itemId : null);
+    };
     const onHideRepliesHandler = (parentId: string) => (lastReply: CommentType) => {
         onHideReplies(parentId, [lastReply]);
     };
@@ -148,9 +153,13 @@ const ActiveState = ({
     return (
         <ul className="bcs-activity-feed-active-state">
             {items.map((item: FeedItem) => {
-                const isFocused = item === activeEntry;
+                const isFocused = item === activeFeedItem;
                 const refValue = isFocused ? activeFeedItemRef : undefined;
                 const itemFileVersionId = getProp(item, 'file_version.id');
+                const replyProps = {
+                    hasReplies,
+                    onReplySelect: onCommentSelectHandler(item.id),
+                };
 
                 switch (item.type) {
                     case FEED_ITEM_TYPE_COMMENT:
@@ -159,28 +168,14 @@ const ActiveState = ({
                                 key={item.type + item.id}
                                 data-testid="comment"
                                 isFocused={isFocused}
+                                isHoverable
+                                hasNewThreadedReplies={hasNewThreadedReplies}
                                 ref={refValue}
                             >
-                                <ActivityThread
-                                    data-testid="activity-thread"
-                                    currentUser={currentUser}
-                                    getAvatarUrl={getAvatarUrl}
-                                    getMentionWithQuery={getMentionWithQuery}
-                                    getUserProfileUrl={getUserProfileUrl}
-                                    hasReplies={hasReplies}
-                                    isRepliesLoading={item.isRepliesLoading}
-                                    mentionSelectorContacts={mentionSelectorContacts}
-                                    onHideReplies={onHideRepliesHandler(item.id)}
-                                    onReplyCreate={onReplyCreateHandler(item.id, item.type)}
-                                    onReplyDelete={onReplyDeleteHandler(item.id)}
-                                    onReplyEdit={onReplyUpdateHandler(item.id)}
-                                    onShowReplies={onShowRepliesHandler(item.id, item.type)}
-                                    repliesTotalCount={item.total_reply_count}
-                                    replies={item.replies}
-                                    translations={translations}
-                                >
-                                    <Comment
+                                {hasNewThreadedReplies ? (
+                                    <BaseComment
                                         {...item}
+                                        {...replyProps}
                                         currentUser={currentUser}
                                         getAvatarUrl={getAvatarUrl}
                                         getMentionWithQuery={getMentionWithQuery}
@@ -188,15 +183,61 @@ const ActiveState = ({
                                         mentionSelectorContacts={mentionSelectorContacts}
                                         onDelete={onCommentDelete}
                                         onEdit={onCommentEdit}
+                                        onReplyCreate={reply => onReplyCreate(item.id, FEED_ITEM_TYPE_COMMENT, reply)}
+                                        onSelect={onCommentSelectHandler(item.id)}
+                                        onShowReplies={() => onShowReplies(item.id, FEED_ITEM_TYPE_COMMENT)}
+                                        onHideReplies={shownReplies => onHideReplies(item.id, shownReplies)}
                                         permissions={{
                                             can_delete: getProp(item.permissions, 'can_delete', false),
                                             can_edit: getProp(item.permissions, 'can_edit', false),
                                             can_reply: getProp(item.permissions, 'can_reply', false),
                                             can_resolve: getProp(item.permissions, 'can_resolve', false),
                                         }}
+                                        repliesTotalCount={item.total_reply_count}
                                         translations={translations}
                                     />
-                                </ActivityThread>
+                                ) : (
+                                    <ActivityThread
+                                        data-testid="activity-thread"
+                                        currentUser={currentUser}
+                                        getAvatarUrl={getAvatarUrl}
+                                        getMentionWithQuery={getMentionWithQuery}
+                                        getUserProfileUrl={getUserProfileUrl}
+                                        hasNewThreadedReplies={hasNewThreadedReplies}
+                                        hasReplies={hasReplies}
+                                        isPending={item.isPending}
+                                        isRepliesLoading={item.isRepliesLoading}
+                                        mentionSelectorContacts={mentionSelectorContacts}
+                                        onHideReplies={onHideRepliesHandler(item.id)}
+                                        onReplyCreate={onReplyCreateHandler(item.id, item.type)}
+                                        onReplyDelete={onReplyDeleteHandler(item.id)}
+                                        onReplyEdit={onReplyUpdateHandler(item.id)}
+                                        onReplySelect={onCommentSelectHandler(item.id)}
+                                        onShowReplies={onShowRepliesHandler(item.id, item.type)}
+                                        repliesTotalCount={item.total_reply_count}
+                                        replies={item.replies}
+                                        translations={translations}
+                                    >
+                                        <Comment
+                                            {...item}
+                                            currentUser={currentUser}
+                                            getAvatarUrl={getAvatarUrl}
+                                            getMentionWithQuery={getMentionWithQuery}
+                                            getUserProfileUrl={getUserProfileUrl}
+                                            mentionSelectorContacts={mentionSelectorContacts}
+                                            onDelete={onCommentDelete}
+                                            onEdit={onCommentEdit}
+                                            onSelect={onCommentSelectHandler(item.id)}
+                                            permissions={{
+                                                can_delete: getProp(item.permissions, 'can_delete', false),
+                                                can_edit: getProp(item.permissions, 'can_edit', false),
+                                                can_reply: getProp(item.permissions, 'can_reply', false),
+                                                can_resolve: getProp(item.permissions, 'can_resolve', false),
+                                            }}
+                                            translations={translations}
+                                        />
+                                    </ActivityThread>
+                                )}
                             </ActivityItem>
                         );
                     case FEED_ITEM_TYPE_TASK:
@@ -261,13 +302,16 @@ const ActiveState = ({
                                     getAvatarUrl={getAvatarUrl}
                                     getMentionWithQuery={getMentionWithQuery}
                                     getUserProfileUrl={getUserProfileUrl}
+                                    hasNewThreadedReplies={hasNewThreadedReplies}
                                     hasReplies={hasReplies}
+                                    isPending={item.isPending}
                                     isRepliesLoading={item.isRepliesLoading}
                                     mentionSelectorContacts={mentionSelectorContacts}
                                     onHideReplies={onHideRepliesHandler(item.id)}
                                     onReplyCreate={onReplyCreateHandler(item.id, item.type)}
                                     onReplyDelete={onReplyDeleteHandler(item.id)}
                                     onReplyEdit={onReplyUpdateHandler(item.id)}
+                                    onReplySelect={onCommentSelectHandler(item.id)}
                                     onShowReplies={onShowRepliesHandler(item.id, item.type)}
                                     repliesTotalCount={item.total_reply_count}
                                     replies={item.replies}
@@ -278,6 +322,7 @@ const ActiveState = ({
                                         getAvatarUrl={getAvatarUrl}
                                         getUserProfileUrl={getUserProfileUrl}
                                         getMentionWithQuery={getMentionWithQuery}
+                                        hasVersions={hasVersions}
                                         isCurrentVersion={currentFileVersionId === itemFileVersionId}
                                         item={item}
                                         mentionSelectorContacts={mentionSelectorContacts}