feat(threaded-replies): Implement Create Replies and Replies Toggle (#3304)

* feat(threaded-replies): Implement Create Replies

* feat(threaded-replies): Implement RepliesToggle

* feat(threaded-replies): fix linting errors

* feat(threaded-replies): fix reply pending state

* feat(threaded-replies): fix no reply spacing

* feat(threaded-replies): destructure item, sort props

* feat(threaded-replies): fix lint errors

* feat(threaded-replies): Add conditionals for toggle and create replies

Author: JChan106

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

@@ -183,13 +183,17 @@ 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}
                                     />
                                 ) : (

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

@@ -11,11 +11,13 @@ 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 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';
@@ -61,10 +63,13 @@ type BaseCommentProps = {
         onSuccess: ?Function,
         onError: ?Function,
     ) => void,
-    onReplySelect?: (isSelected: boolean) => void,
+    onHideReplies?: (shownReplies: CommentType[]) => void,
+    onReplyCreate?: (reply: string) => void,
     onSelect: (isSelected: boolean) => void,
+    onShowReplies?: () => void,
     permissions: BoxCommentPermission,
     replies?: CommentType[],
+    repliesTotalCount?: number,
     status?: FeedItemStatus,
     tagged_message: string,
     translatedTaggedMessage?: string,
@@ -78,7 +83,7 @@ const BaseComment = (props: BaseCommentProps) => {
         created_at,
         permissions = {},
         id,
-        isPending,
+        isPending = false,
         isRepliesLoading = false,
         error,
         tagged_message = '',
@@ -95,66 +100,61 @@ const BaseComment = (props: BaseCommentProps) => {
         onDelete,
         onEdit,
         onSelect,
-        onReplySelect = noop,
+        onReplyCreate,
+        onShowReplies,
+        onHideReplies,
         replies = [],
+        repliesTotalCount = 0,
         status,
     } = props;
 
     const [isConfirmingDelete, setIsConfirmingDelete] = React.useState<boolean>(false);
     const [isEditing, setIsEditing] = React.useState<boolean>(false);
     const [isInputOpen, setIsInputOpen] = React.useState<boolean>(false);
 
-    const selectComment = (isSelected: boolean = true): void => {
-        onSelect(isSelected);
-    };
-
     const handleDeleteConfirm = (): void => {
         onDelete({ id, permissions });
-        selectComment(false);
+        onSelect(false);
     };
 
     const handleDeleteCancel = (): void => {
         setIsConfirmingDelete(false);
-        selectComment(false);
+        onSelect(false);
     };
 
     const handleDeleteClick = (): void => {
         setIsConfirmingDelete(true);
-        selectComment();
+        onSelect(true);
     };
 
     const handleEditClick = (): void => {
         setIsEditing(true);
         setIsInputOpen(true);
-        selectComment();
+        onSelect(true);
     };
 
     const handleMenuClose = (): void => {
         if (isConfirmingDelete || isEditing || isInputOpen) {
             return;
         }
-        selectComment(false);
-    };
-
-    const handleMenuOpen = (): void => {
-        selectComment();
+        onSelect(false);
     };
 
     const commentFormFocusHandler = (): void => {
         setIsInputOpen(true);
-        selectComment();
+        onSelect(true);
     };
 
     const commentFormCancelHandler = (): void => {
         setIsInputOpen(false);
         setIsEditing(false);
-        selectComment(false);
+        onSelect(false);
     };
 
     const commentFormSubmitHandler = (): void => {
         setIsInputOpen(false);
         setIsEditing(false);
-        selectComment(false);
+        onSelect(false);
     };
 
     const handleMessageUpdate = ({
@@ -214,7 +214,7 @@ const BaseComment = (props: BaseCommentProps) => {
                                 isDisabled={isConfirmingDelete}
                                 data-testid="comment-actions-menu"
                                 dropdownProps={{
-                                    onMenuOpen: handleMenuOpen,
+                                    onMenuOpen: () => onSelect(true),
                                     onMenuClose: handleMenuClose,
                                 }}
                                 menuProps={{
@@ -323,9 +323,14 @@ const BaseComment = (props: BaseCommentProps) => {
             {hasReplies && (
                 <Replies
                     {...commentProps}
+                    isParentPending={isPending}
                     isRepliesLoading={isRepliesLoading}
-                    onReplySelect={onReplySelect}
+                    onHideReplies={onHideReplies}
+                    onReplyCreate={onReplyCreate}
+                    onReplySelect={onSelect}
+                    onShowReplies={onShowReplies}
                     replies={replies}
+                    repliesTotalCount={repliesTotalCount}
                 />
             )}
         </div>
@@ -338,10 +343,15 @@ type RepliesProps = {
     getAvatarUrl: GetAvatarUrlCallback,
     getMentionWithQuery?: (searchStr: string) => void,
     getUserProfileUrl?: GetProfileUrlCallback,
+    isParentPending?: boolean,
     isRepliesLoading?: boolean,
     mentionSelectorContacts?: SelectorItems<>,
+    onHideReplies?: (shownReplies: CommentType[]) => void,
+    onReplyCreate?: (reply: string) => void,
     onReplySelect?: (isSelected: boolean) => void,
+    onShowReplies?: () => void,
     replies: CommentType[],
+    repliesTotalCount?: number,
     translations?: Translations,
 };
 
@@ -350,12 +360,18 @@ const Replies = ({
     getAvatarUrl,
     getMentionWithQuery,
     getUserProfileUrl,
+    isParentPending = false,
     isRepliesLoading = false,
     mentionSelectorContacts,
+    onReplyCreate,
     onReplySelect = noop,
+    onShowReplies,
+    onHideReplies,
     replies,
+    repliesTotalCount = 0,
     translations,
 }: RepliesProps) => {
+    const [showReplyForm, setShowReplyForm] = React.useState(false);
     const getReplyPermissions = (reply: CommentType): BoxCommentPermission => {
         const { permissions: { can_delete = false, can_edit = false, can_resolve = false } = {} } = reply;
         return {
@@ -365,8 +381,31 @@ const Replies = ({
         };
     };
 
+    const handleNewReplyButton = () => {
+        setShowReplyForm(true);
+        onReplySelect(true);
+    };
+
+    const handleCancelNewReply = () => {
+        setShowReplyForm(false);
+        onReplySelect(false);
+    };
+
+    const handleSubmitNewReply = (reply: string, replyCreate: (reply: string) => void) => {
+        setShowReplyForm(false);
+        replyCreate(reply);
+    };
+
     return (
         <div className="bcs-Replies">
+            {!!onShowReplies && !!onHideReplies && (
+                <RepliesToggle
+                    onHideReplies={index => onHideReplies([replies[index]])}
+                    onShowReplies={onShowReplies}
+                    repliesShownCount={replies.length}
+                    repliesTotalCount={repliesTotalCount}
+                />
+            )}
             <div className="bcs-Replies-content">
                 {isRepliesLoading && (
                     <div className="bcs-Replies-loading" data-testid="replies-loading">
@@ -385,6 +424,7 @@ const Replies = ({
                                     getAvatarUrl={getAvatarUrl}
                                     getMentionWithQuery={getMentionWithQuery}
                                     getUserProfileUrl={getUserProfileUrl}
+                                    isPending={isParentPending || reply.isPending}
                                     mentionSelectorContacts={mentionSelectorContacts}
                                     onSelect={onReplySelect}
                                     onDelete={noop}
@@ -397,6 +437,18 @@ const Replies = ({
                     })}
                 </ol>
             </div>
+            {!!onReplyCreate && (
+                <CreateReply
+                    getMentionWithQuery={getMentionWithQuery}
+                    isDisabled={isParentPending}
+                    mentionSelectorContacts={mentionSelectorContacts}
+                    onCancel={handleCancelNewReply}
+                    onClick={handleNewReplyButton}
+                    onFocus={() => onReplySelect(true)}
+                    onSubmit={reply => handleSubmitNewReply(reply, onReplyCreate)}
+                    showReplyForm={showReplyForm}
+                />
+            )}
         </div>
     );
 };

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

@@ -4,11 +4,11 @@ $repliesPaddingLeft: 40px;
 
 .bcs-BaseComment {
     .bcs-Comment-timestamp {
-        margin-bottom: 16px;
+        margin-bottom: $bdl-grid-unit * 4;
     }
 
     .bcs-ActivityTimestamp {
-        color: $bdl-gray;
+        color: $bdl-gray-65;
     }
 
     .bcs-CommentForm-input {
@@ -20,7 +20,11 @@ $repliesPaddingLeft: 40px;
     }
 
     .bcs-Replies {
-        margin: $bdl-grid-unit * 4 0;
+        margin: $bdl-grid-unit * 3 0;
         padding-left: $repliesPaddingLeft;
     }
+
+    .bcs-Comment-media {
+        margin-bottom: $bdl-grid-unit * 3;
+    }
 }

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

@@ -1,34 +1,41 @@
 @import '../../../common/variables';
 
-.bcs-Replies-content {
-    position: relative;
-    padding-left: $bdl-grid-unit * 5;
+.bcs-Replies {
+    .bcs-Replies-content {
+        position: relative;
+        margin-bottom: $bdl-grid-unit * 6;
+        padding-left: $bdl-grid-unit * 5;
 
-    .bcs-Replies-list {
-        // Override default ol margins
-        margin: 0;
+        .bcs-Replies-list {
+            // Override default ol margins
+            margin: 0;
 
-        ol {
-            list-style: none;
+            ol {
+                list-style: none;
+            }
+        }
+
+        li:not(:last-child) {
+            margin-bottom: $bdl-grid-unit * 7;
         }
     }
 
-    li:not(:last-child) {
-        margin-bottom: $bdl-grid-unit * 3;
+    .bcs-Replies-content::before {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        width: $bdl-grid-unit;
+        background: $bdl-gray-10;
+        border-radius: $bdl-border-radius-size;
+        content: '';
     }
-}
 
-.bcs-Replies-content::before {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    width: $bdl-grid-unit;
-    background: $bdl-gray-10;
-    border-radius: $bdl-border-radius-size;
-    content: '';
-}
+    .bcs-Replies-loading {
+        padding-bottom: $bdl-grid-unit * 5;
+    }
 
-.bcs-Replies-loading {
-    padding-bottom: $bdl-grid-unit * 5;
+    .bcs-RepliesToggle {
+        margin-bottom: $bdl-grid-unit * 4;
+    }
 }

src/elements/content-sidebar/activity-feed/comment/RepliesToggle.js

@@ -32,7 +32,7 @@ const RepliesToggle = ({ onShowReplies, onHideReplies, repliesShownCount, replie
     };
 
     return (
-        <PlainButton className="bcs-RepliesToggle" onClick={handleToggle} type="button">
+        <PlainButton className="bcs-RepliesToggle" onClick={handleToggle} type="button" data-testid="replies-toggle">
             <FormattedMessage values={{ repliesToLoadCount }} {...toggleMessage} />
         </PlainButton>
     );

src/elements/content-sidebar/activity-feed/comment/RepliesToggle.scss

@@ -1,7 +1,6 @@
 @import '../../../common/variables';
 
-.bcs-RepliesToggle {
-    margin-bottom: $bdl-grid-unit * 4;
+.btn-plain.bcs-RepliesToggle {
     color: $bdl-box-blue;
     font-weight: bold;
 }