box-ui-elements 19.0.0-beta.8 → 19.0.0

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

@@ -27,7 +27,7 @@ import IconAnnotation from '../../../../icons/two-toned/IconAnnotation';
 
 import './AnnotationActivity.scss';
 
-import { type OnAnnotationEdit } from '../comment/types';
+import type { OnAnnotationEdit, OnAnnotationStatusChange } from '../comment/types';
 
 type Props = {
     currentUser?: User,
@@ -41,7 +41,7 @@ type Props = {
     onDelete?: ({ id: string, permissions: AnnotationPermission }) => any,
     onEdit?: OnAnnotationEdit,
     onSelect?: (annotation: Annotation) => any,
-    onStatusChange?: (id: string, status: FeedItemStatus, permissions: AnnotationPermission) => void,
+    onStatusChange?: OnAnnotationStatusChange,
 };
 
 const AnnotationActivity = ({
@@ -108,7 +108,7 @@ const AnnotationActivity = ({
     };
     const handleSelect = () => onSelect(item);
 
-    const handleStatusChange = (newStatus: FeedItemStatus) => onStatusChange(id, newStatus, permissions);
+    const handleStatusChange = (newStatus: FeedItemStatus) => onStatusChange({ id, status: newStatus, permissions });
 
     const createdAtTimestamp = new Date(created_at).getTime();
     const createdByUser = created_by || PLACEHOLDER_USER;

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

@@ -23,8 +23,8 @@ exports[`elements/content-sidebar/ActivityFeed/app-activity/AppActivity should c
         attachment="top right"
         className="bcs-AppActivity-confirm"
         constraints={
-          Array [
-            Object {
+          [
+            {
               "attachment": "together",
               "to": "scrollParent",
             },

package/src/elements/content-sidebar/activity-feed/comment/BaseComment.js

@@ -1,45 +1,35 @@
 // @flow
 import * as React from 'react';
+
 import classNames from 'classnames';
 import noop from 'lodash/noop';
-import TetherComponent from 'react-tether';
-import { FormattedMessage } from 'react-intl';
+
+import { BaseCommentMenuWrapper } from './components/BaseCommentMenuWrapper';
+import { BaseCommentInfo } from './components/BaseCommentInfo';
+import { COMMENT_STATUS_RESOLVED } from '../../../../constants';
+
 import ActivityError from '../common/activity-error';
 import ActivityMessage from '../common/activity-message';
-import ActivityStatus from '../common/activity-status';
-import ActivityTimestamp from '../common/activity-timestamp';
-import Avatar from '../Avatar';
-import Checkmark16 from '../../../../icon/line/Checkmark16';
 import CommentForm from '../comment-form';
 import CreateReply from './CreateReply';
-import DeleteConfirmation from '../common/delete-confirmation';
-import IconAnnotation from '../../../../icons/two-toned/IconAnnotation';
 import LoadingIndicator from '../../../../components/loading-indicator';
-import Media from '../../../../components/media';
-import messages from './messages';
-import Pencil16 from '../../../../icon/line/Pencil16';
 import RepliesToggle from './RepliesToggle';
-import Trash16 from '../../../../icon/line/Trash16';
-import UserLink from '../common/user-link';
-import X16 from '../../../../icon/fill/X16';
-import { ACTIVITY_TARGETS } from '../../../common/interactionTargets';
-import { COMMENT_STATUS_OPEN, COMMENT_STATUS_RESOLVED, PLACEHOLDER_USER } from '../../../../constants';
-import { MenuItem } from '../../../../components/menu';
-import { type OnAnnotationEdit, type OnCommentEdit } from './types';
+
 import type {
     ActionItemError,
     BoxCommentPermission,
     FeedItemStatus,
     Comment as CommentType,
 } from '../../../../common/types/feed';
-
 import type { GetAvatarUrlCallback, GetProfileUrlCallback } from '../../../common/flowTypes';
+import type { OnAnnotationEdit, OnCommentEdit, OnAnnotationStatusChange, OnCommentStatusChange } from './types';
 import type { SelectorItems, User } from '../../../../common/types/core';
 import type { Translations } from '../../flowTypes';
 
 import './BaseComment.scss';
 import './Replies.scss';
 import './Comment.scss';
+import ActivityStatus from '../common/activity-status';
 
 export type BaseCommentProps = {
     annotationActivityLink?: React.Element<any>,
@@ -62,8 +52,10 @@ export type BaseCommentProps = {
     onDelete: ({ id: string, permissions?: BoxCommentPermission }) => any,
     onHideReplies?: (shownReplies: CommentType[]) => void,
     onReplyCreate?: (reply: string) => void,
+    onReplyDelete?: ({ id: string, permissions?: BoxCommentPermission }) => void,
     onSelect: (isSelected: boolean) => void,
     onShowReplies?: () => void,
+    onStatusChange?: OnAnnotationStatusChange | OnCommentStatusChange,
     permissions: BoxCommentPermission,
     replies?: CommentType[],
     repliesTotalCount?: number,
@@ -94,8 +86,10 @@ export const BaseComment = ({
     onDelete,
     onHideReplies,
     onReplyCreate,
+    onReplyDelete,
     onSelect,
     onShowReplies,
+    onStatusChange,
     permissions = {},
     replies = [],
     repliesTotalCount = 0,
@@ -104,38 +98,9 @@ export const BaseComment = ({
     translatedTaggedMessage,
     translations,
 }: BaseCommentProps) => {
-    const [isConfirmingDelete, setIsConfirmingDelete] = React.useState<boolean>(false);
     const [isEditing, setIsEditing] = React.useState<boolean>(false);
     const [isInputOpen, setIsInputOpen] = React.useState<boolean>(false);
 
-    const handleDeleteConfirm = (): void => {
-        onDelete({ id, permissions });
-        onSelect(false);
-    };
-
-    const handleDeleteCancel = (): void => {
-        setIsConfirmingDelete(false);
-        onSelect(false);
-    };
-
-    const handleDeleteClick = (): void => {
-        setIsConfirmingDelete(true);
-        onSelect(true);
-    };
-
-    const handleEditClick = (): void => {
-        setIsEditing(true);
-        setIsInputOpen(true);
-        onSelect(true);
-    };
-
-    const handleMenuClose = (): void => {
-        if (isConfirmingDelete || isEditing || isInputOpen) {
-            return;
-        }
-        onSelect(false);
-    };
-
     const commentFormFocusHandler = (): void => {
         setIsInputOpen(true);
         onSelect(true);
@@ -168,22 +133,13 @@ export const BaseComment = ({
         commentFormSubmitHandler();
     };
 
-    const handleStatusUpdate = (selectedStatus: FeedItemStatus): void => {
-        if (onAnnotationEdit) {
-            onAnnotationEdit({ id, permissions });
-        } else if (onCommentEdit) {
-            onCommentEdit({ id, status: selectedStatus, hasMention: false, permissions });
-        }
-    };
-
     // Since we have to pass onCommentEdit through annotations (to Replies), onAnnotationEdit essentially overrides onCommentEdit
     const onEdit = onAnnotationEdit ?? onCommentEdit;
 
-    const canDelete = permissions.can_delete;
-    const canEdit = onEdit !== noop && permissions.can_edit;
-    const canResolve = onEdit !== noop && permissions.can_resolve;
-    const createdAtTimestamp = new Date(created_at).getTime();
-    const createdByUser = created_by || PLACEHOLDER_USER;
+    const canDelete = !!permissions.can_delete;
+    const canEdit = onEdit !== noop && !!permissions.can_edit;
+    const canResolve = onEdit !== noop && !!permissions.can_resolve;
+
     const isEdited = modified_at !== undefined && modified_at !== created_at;
     const isMenuVisible = (canDelete || canEdit || canResolve) && !isPending;
     const isResolved = status === COMMENT_STATUS_RESOLVED;
@@ -199,125 +155,59 @@ export const BaseComment = ({
     return (
         // TODO: Change className to bcs-Comment once FF is removed
         <div className="bcs-BaseComment">
-            <Media
+            <div
                 className={classNames('bcs-Comment-media', {
                     'bcs-is-pending': isPending || error,
                 })}
             >
-                <Media.Figure>
-                    <Avatar
+                <div className="bcs-BaseComment-header">
+                    <BaseCommentInfo
+                        annotationActivityLink={annotationActivityLink}
+                        created_at={created_at}
+                        created_by={created_by}
                         getAvatarUrl={getAvatarUrl}
-                        user={createdByUser}
-                        badgeIcon={
-                            annotationActivityLink && (
-                                <IconAnnotation title={<FormattedMessage {...messages.annotationBadge} />} />
-                            )
-                        }
+                        getUserProfileUrl={getUserProfileUrl}
+                        status={status}
                     />
-                </Media.Figure>
-                <Media.Body>
                     {isMenuVisible && (
-                        <TetherComponent
-                            attachment="top right"
-                            className="bcs-Comment-deleteConfirmationModal"
-                            constraints={[{ to: 'scrollParent', attachment: 'together' }]}
-                            targetAttachment="bottom right"
-                        >
-                            <Media.Menu
-                                isDisabled={isConfirmingDelete}
-                                data-testid="comment-actions-menu"
-                                dropdownProps={{
-                                    onMenuOpen: () => onSelect(true),
-                                    onMenuClose: handleMenuClose,
-                                }}
-                                menuProps={{
-                                    'data-resin-component': ACTIVITY_TARGETS.COMMENT_OPTIONS,
-                                }}
-                            >
-                                {canResolve && isResolved && (
-                                    <MenuItem
-                                        className="bcs-Comment-unresolveComment"
-                                        data-resin-target={ACTIVITY_TARGETS.COMMENT_OPTIONS_EDIT}
-                                        data-testid="unresolve-comment"
-                                        onClick={() => handleStatusUpdate(COMMENT_STATUS_OPEN)}
-                                    >
-                                        <X16 />
-                                        <FormattedMessage {...messages.commentUnresolveMenuItem} />
-                                    </MenuItem>
-                                )}
-                                {canResolve && !isResolved && (
-                                    <MenuItem
-                                        data-resin-target={ACTIVITY_TARGETS.COMMENT_OPTIONS_EDIT}
-                                        data-testid="resolve-comment"
-                                        onClick={() => handleStatusUpdate(COMMENT_STATUS_RESOLVED)}
-                                    >
-                                        <Checkmark16 />
-                                        <FormattedMessage {...messages.commentResolveMenuItem} />
-                                    </MenuItem>
-                                )}
-                                {canEdit && (
-                                    <MenuItem
-                                        data-resin-target={ACTIVITY_TARGETS.COMMENT_OPTIONS_EDIT}
-                                        data-testid="edit-comment"
-                                        onClick={handleEditClick}
-                                    >
-                                        <Pencil16 />
-                                        <FormattedMessage {...messages.commentEditMenuItem} />
-                                    </MenuItem>
-                                )}
-                                {canDelete && (
-                                    <MenuItem
-                                        data-resin-target={ACTIVITY_TARGETS.COMMENT_OPTIONS_DELETE}
-                                        data-testid="delete-comment"
-                                        onClick={handleDeleteClick}
-                                    >
-                                        <Trash16 />
-                                        <FormattedMessage {...messages.commentDeleteMenuItem} />
-                                    </MenuItem>
-                                )}
-                            </Media.Menu>
-                            {isConfirmingDelete && (
-                                <DeleteConfirmation
-                                    data-resin-component={ACTIVITY_TARGETS.COMMENT_OPTIONS}
-                                    isOpen={isConfirmingDelete}
-                                    message={messages.commentDeletePrompt}
-                                    onDeleteCancel={handleDeleteCancel}
-                                    onDeleteConfirm={handleDeleteConfirm}
-                                />
-                            )}
-                        </TetherComponent>
-                    )}
-                    <div className="bcs-Comment-headline">
-                        <UserLink
-                            data-resin-target={ACTIVITY_TARGETS.PROFILE}
-                            id={createdByUser.id}
-                            name={createdByUser.name}
-                            getUserProfileUrl={getUserProfileUrl}
+                        <BaseCommentMenuWrapper
+                            canDelete={canDelete}
+                            canEdit={canEdit}
+                            canResolve={canResolve}
+                            id={id}
+                            isEditing={isEditing}
+                            isInputOpen={isInputOpen}
+                            isResolved={isResolved}
+                            onDelete={onDelete}
+                            onSelect={onSelect}
+                            onStatusChange={onStatusChange}
+                            permissions={permissions}
+                            setIsEditing={setIsEditing}
+                            setIsInputOpen={setIsInputOpen}
                         />
-                    </div>
-                    <div className="bcs-Comment-timestamp">
-                        <ActivityTimestamp date={createdAtTimestamp} />
-                        {annotationActivityLink}
-                    </div>
-                    <ActivityStatus status={status} />
+                    )}
+                </div>
+                <ActivityStatus status={status} />
+                <div className="bcs-BaseComment-content">
                     {isEditing ? (
                         <CommentForm
-                            isDisabled={isDisabled}
                             className={classNames('bcs-Comment-editor', {
                                 'bcs-is-disabled': isDisabled,
                             })}
-                            updateComment={handleMessageUpdate}
+                            entityId={id}
+                            getAvatarUrl={getAvatarUrl}
+                            getMentionWithQuery={getMentionWithQuery}
+                            isDisabled={isDisabled}
+                            isEditing={isEditing}
                             isOpen={isInputOpen}
-                            // $FlowFixMe
-                            user={currentUser}
+                            mentionSelectorContacts={mentionSelectorContacts}
                             onCancel={commentFormCancelHandler}
                             onFocus={commentFormFocusHandler}
-                            isEditing={isEditing}
-                            entityId={id}
+                            shouldFocusOnOpen
                             tagged_message={tagged_message}
-                            getAvatarUrl={getAvatarUrl}
-                            mentionSelectorContacts={mentionSelectorContacts}
-                            getMentionWithQuery={getMentionWithQuery}
+                            updateComment={handleMessageUpdate}
+                            // $FlowFixMe
+                            user={currentUser}
                         />
                     ) : (
                         <ActivityMessage
@@ -330,8 +220,8 @@ export const BaseComment = ({
                             getUserProfileUrl={getUserProfileUrl}
                         />
                     )}
-                </Media.Body>
-            </Media>
+                </div>
+            </div>
             {/* $FlowFixMe */}
             {error ? <ActivityError {...error} /> : null}
             {hasReplies && (
@@ -342,6 +232,7 @@ export const BaseComment = ({
                     onCommentEdit={onCommentEdit}
                     onHideReplies={onHideReplies}
                     onReplyCreate={onReplyCreate}
+                    onReplyDelete={onReplyDelete}
                     onReplySelect={onSelect}
                     onShowReplies={onShowReplies}
                     replies={replies}
@@ -364,6 +255,7 @@ type RepliesProps = {
     onCommentEdit: OnCommentEdit,
     onHideReplies?: (shownReplies: CommentType[]) => void,
     onReplyCreate?: (reply: string) => void,
+    onReplyDelete?: ({ id: string, permissions?: BoxCommentPermission }) => void,
     onReplySelect?: (isSelected: boolean) => void,
     onShowReplies?: () => void,
     replies: CommentType[],
@@ -381,6 +273,7 @@ export const Replies = ({
     mentionSelectorContacts,
     onCommentEdit,
     onReplyCreate,
+    onReplyDelete,
     onReplySelect = noop,
     onShowReplies,
     onHideReplies,
@@ -445,7 +338,7 @@ export const Replies = ({
                                     mentionSelectorContacts={mentionSelectorContacts}
                                     onCommentEdit={onCommentEdit}
                                     onSelect={onReplySelect}
-                                    onDelete={noop}
+                                    onDelete={onReplyDelete}
                                     permissions={getReplyPermissions(reply)}
                                     translations={translations}
                                 />

package/src/elements/content-sidebar/activity-feed/comment/BaseComment.scss

@@ -3,28 +3,50 @@
 $repliesPaddingLeft: 40px;
 
 .bcs-BaseComment {
-    .bcs-Comment-timestamp {
-        margin-bottom: $bdl-grid-unit * 4;
-    }
-
-    .bcs-ActivityTimestamp {
-        color: $bdl-gray-65;
-    }
+    font-size: $bdl-fontSize--dejaBlue;
 
     .bcs-CommentForm-input {
         background-color: $white;
     }
 
+    .bcs-CommentFormControls {
+        display: flex;
+        flex-direction: row-reverse;
+
+        .btn {
+            margin: $bdl-grid-unit * 3 0 0 $bdl-grid-unit * 3;
+        }
+    }
+
     .btn-plain:focus-visible {
         outline: auto;
     }
 
-    .bcs-Replies {
-        margin: $bdl-grid-unit * 3 0;
-        padding-left: $repliesPaddingLeft;
+    .bcs-Comment-media {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        width: 100%;
+        margin-bottom: $bdl-grid-unit * 4;
+    }
+
+    .mention-selector-wrapper {
+        margin: 0;
     }
 
-    .bcs-Comment-media {
-        margin-bottom: $bdl-grid-unit * 3;
+    .public-DraftEditor-content {
+        width: 100%;
+        min-height: $bdl-grid-unit * 12;
     }
 }
+
+.bcs-BaseComment-header {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+}
+
+.bcs-BaseComment-content {
+    width: 100%;
+    margin-top: 4 * $bdl-grid-unit;
+}

package/src/elements/content-sidebar/activity-feed/comment/CreateReply.js

@@ -49,15 +49,16 @@ const CreateReply = ({
             {showReplyForm && !isDisabled ? (
                 <CommentForm
                     className="bcs-CreateReply-form"
+                    createComment={handleSubmit}
+                    getMentionWithQuery={getMentionWithQuery}
                     isOpen
                     isEditing
-                    showTip={false}
+                    mentionSelectorContacts={mentionSelectorContacts}
                     onCancel={onCancel}
                     onFocus={onFocus}
-                    createComment={handleSubmit}
-                    mentionSelectorContacts={mentionSelectorContacts}
-                    getMentionWithQuery={getMentionWithQuery}
                     placeholder={placeholder}
+                    shouldFocusOnOpen
+                    showTip={false}
                 />
             ) : (
                 <PlainButton className="bcs-CreateReply-toggle" onClick={onClick} type="button" isDisabled={isDisabled}>

package/src/elements/content-sidebar/activity-feed/comment/Replies.scss

@@ -1,9 +1,11 @@
 @import '../../../common/variables';
 
 .bcs-Replies {
+    margin-top: $bdl-grid-unit * 3;
+
     .bcs-Replies-content {
         position: relative;
-        margin-bottom: $bdl-grid-unit * 6;
+        margin-bottom: $bdl-grid-unit * 4;
         padding-left: $bdl-grid-unit * 5;
 
         .bcs-Replies-list {
@@ -16,7 +18,7 @@
         }
 
         li:not(:last-child) {
-            margin-bottom: $bdl-grid-unit * 7;
+            margin-bottom: $bdl-grid-unit * 4;
         }
     }
 

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

@@ -55,6 +55,8 @@ export const getWrapper = props =>
     );
 
 describe('elements/content-sidebar/ActivityFeed/comment/BaseComment', () => {
+    EditorState.moveFocusToEnd = editor => editor;
+
     test.each`
         activityItem
         ${annotation}
@@ -77,7 +79,7 @@ describe('elements/content-sidebar/ActivityFeed/comment/BaseComment', () => {
 
     test('should render annotation badge when annotationActivityLink prop is defined', () => {
         getWrapper({ ...annotation, ...repliesProps });
-        expect(screen.getByText(localize(messages.annotationBadge.id))).toBeInTheDocument();
+        expect(screen.getByText(localize(messages.inlineCommentAnnotationIconTitle.id))).toBeInTheDocument();
     });
 
     test.each`
@@ -244,14 +246,13 @@ describe('elements/content-sidebar/ActivityFeed/comment/BaseComment', () => {
     `(
         `should allow user to resolve / unresolve if they have resolve permissions, edit handler is defined and given status is $status`,
         ({ status, menuItemTestId, expectedNewStatus }) => {
-            const mockOnEdit = jest.fn();
+            const mockOnStatusChange = jest.fn();
 
             getWrapper({
-                hasMention: false,
                 permissions: { can_resolve: true, can_edit: false, can_delete: false },
                 type: 'task',
                 status,
-                onCommentEdit: mockOnEdit,
+                onStatusChange: mockOnStatusChange,
             });
 
             const menuItem = screen.queryByTestId('comment-actions-menu');
@@ -263,8 +264,7 @@ describe('elements/content-sidebar/ActivityFeed/comment/BaseComment', () => {
 
             expect(screen.queryByTestId(menuItemTestId)).not.toBeInTheDocument();
 
-            expect(mockOnEdit).toBeCalledWith({
-                hasMention: false,
+            expect(mockOnStatusChange).toBeCalledWith({
                 id: '1',
                 permissions: {
                     can_delete: false,
@@ -403,4 +403,16 @@ describe('elements/content-sidebar/ActivityFeed/comment/BaseComment', () => {
         expect(showReplies).toBeCalledTimes(1);
         expect(hideReplies).not.toBeCalled();
     });
+
+    test('should focus on the edit CommentForm when it is opened', () => {
+        const mockFocusFunc = jest.fn();
+        EditorState.moveFocusToEnd = mockFocusFunc;
+
+        getWrapper({ canEdit: true });
+        const menuItem = screen.getByTestId('comment-actions-menu');
+        fireEvent.click(menuItem);
+        const editButton = screen.getByTestId('edit-comment');
+        fireEvent.click(editButton);
+        expect(mockFocusFunc).toHaveBeenCalled();
+    });
 });

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

@@ -37,6 +37,10 @@ const getWrapper = props =>
     );
 
 describe('elements/content-sidebar/ActivityFeed/comment/CreateReply', () => {
+    beforeEach(() => {
+        EditorState.moveFocusToEnd = editor => editor;
+    });
+
     afterEach(() => {
         jest.restoreAllMocks();
     });
@@ -124,4 +128,12 @@ describe('elements/content-sidebar/ActivityFeed/comment/CreateReply', () => {
         expect(onSubmit).toBeCalledTimes(1);
         expect(onSubmit).toBeCalledWith('Batman');
     });
+
+    test('reply form should be focused when opened', () => {
+        const mockFocusFunc = jest.fn();
+        EditorState.moveFocusToEnd = mockFocusFunc;
+
+        getWrapper({ showReplyForm: true });
+        expect(mockFocusFunc).toHaveBeenCalled();
+    });
 });

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

@@ -3,7 +3,7 @@
 import React from 'react';
 import { IntlProvider } from 'react-intl';
 import { ContentState, EditorState } from 'draft-js';
-import { fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, within } from '@testing-library/react';
 import { Replies } from '../BaseComment';
 
 jest.mock('../../Avatar', () => () => 'Avatar');
@@ -46,6 +46,7 @@ const currentUser = {
 const mockUserProfileUrl = jest.fn();
 const replySelect = jest.fn();
 const replyCreate = jest.fn();
+const replyDelete = jest.fn();
 const showReplies = jest.fn();
 const hideReplies = jest.fn();
 
@@ -70,6 +71,7 @@ const getWrapper = props =>
                 replies={replies}
                 onReplySelect={replySelect}
                 onReplyCreate={replyCreate}
+                onReplyDelete={replyDelete}
                 onShowReplies={showReplies}
                 onHideReplies={hideReplies}
                 {...props}
@@ -170,6 +172,28 @@ describe('elements/content-sidebar/ActivityFeed/comment/Replies', () => {
         expect(replyCreate).toBeCalledWith('Batman');
     });
 
+    test('should call onReplyDelete when reply is deleted', () => {
+        getWrapper({
+            replies: [comment, comment2],
+        });
+
+        const [menu] = screen.getAllByLabelText('Options');
+        fireEvent.click(menu);
+
+        const menuDelete = screen.getByLabelText('Delete');
+        expect(menuDelete).toBeInTheDocument();
+        fireEvent.click(menuDelete);
+
+        const confirmationDelete = within(screen.getByRole('dialog')).getByLabelText('Delete');
+        expect(confirmationDelete).toBeInTheDocument();
+        fireEvent.click(confirmationDelete);
+
+        expect(replyDelete).toBeCalledTimes(1);
+
+        expect(replyDelete).toBeCalledWith({ id: comment.id, permissions: comment.permissions });
+        expect(replyDelete).not.toBeCalledWith({ id: comment2.id, permissions: comment2.permissions });
+    });
+
     test('should show Hide Replies and call onHideReplies when clicked', () => {
         getWrapper({ repliesTotalCount: 3 });