fix(threaded-replies): disable reply button for pending status (#3186)

* fix(threaded-replies): disable reply button for pending status

* fix(threaded-replies): disable reply button for pending status

Author: wpiesiak

src/common/types/feed.js

@@ -63,6 +63,7 @@ type Tasks = {
 
 type Comment = {
     ...BaseFeedItem,
+    isPending?: boolean,
     isRepliesLoading?: boolean,
     is_reply_comment?: boolean,
     message?: string,

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

@@ -170,6 +170,7 @@ const ActiveState = ({
                                     getMentionWithQuery={getMentionWithQuery}
                                     getUserProfileUrl={getUserProfileUrl}
                                     hasReplies={hasReplies}
+                                    isPending={item.isPending}
                                     isRepliesLoading={item.isRepliesLoading}
                                     mentionSelectorContacts={mentionSelectorContacts}
                                     onHideReplies={onHideRepliesHandler(item.id)}
@@ -266,6 +267,7 @@ const ActiveState = ({
                                     getMentionWithQuery={getMentionWithQuery}
                                     getUserProfileUrl={getUserProfileUrl}
                                     hasReplies={hasReplies}
+                                    isPending={item.isPending}
                                     isRepliesLoading={item.isRepliesLoading}
                                     mentionSelectorContacts={mentionSelectorContacts}
                                     onHideReplies={onHideRepliesHandler(item.id)}

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

@@ -24,6 +24,7 @@ type Props = {
     getUserProfileUrl?: GetProfileUrlCallback,
     hasReplies: boolean,
     isAlwaysExpanded?: boolean,
+    isPending?: boolean,
     isRepliesLoading?: boolean,
     mentionSelectorContacts?: SelectorItems<>,
     onHideReplies?: (lastReply: CommentType) => void,
@@ -53,6 +54,7 @@ const ActivityThread = ({
     getUserProfileUrl,
     hasReplies,
     isAlwaysExpanded = false,
+    isPending,
     isRepliesLoading,
     mentionSelectorContacts,
     onHideReplies = noop,
@@ -146,6 +148,7 @@ const ActivityThread = ({
                 {onReplyCreate && (
                     <ActivityThreadReplyForm
                         getMentionWithQuery={getMentionWithQuery}
+                        isDisabled={isPending}
                         mentionSelectorContacts={mentionSelectorContacts}
                         onFocus={handleFormFocusOrShow}
                         onHide={handleFormHide}

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

@@ -16,6 +16,7 @@ import './ActivityThreadReplyForm.scss';
 
 type ActivityThreadReplyFromProps = {
     getMentionWithQuery?: (searchStr: string) => void,
+    isDisabled?: boolean,
     mentionSelectorContacts?: SelectorItems<>,
     onFocus: () => void,
     onHide: () => void,
@@ -28,6 +29,7 @@ type Props = ActivityThreadReplyFromProps & InjectIntlProvidedProps;
 function ActivityThreadReplyForm({
     mentionSelectorContacts,
     getMentionWithQuery,
+    isDisabled,
     onFocus,
     onHide,
     onReplyCreate,
@@ -67,7 +69,12 @@ function ActivityThreadReplyForm({
             placeholder={placeholder}
         />
     ) : (
-        <PlainButton className="bcs-ActivityThreadReplyForm-toggle" onClick={showForm} role="button" type="button">
+        <PlainButton
+            className="bcs-ActivityThreadReplyForm-toggle"
+            onClick={showForm}
+            type="button"
+            isDisabled={isDisabled}
+        >
             <ArrowArcRight className="bcs-ActivityThreadReplyForm-arrow" />
             <FormattedMessage {...messages.reply} />
         </PlainButton>

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

@@ -99,4 +99,10 @@ describe('src/elements/content-sidebar/activity-feed/activity-feed/ActivityThrea
 
         expect(screen.getByRole('button', { name: localize(messages.reply.id) })).toBeInTheDocument();
     });
+
+    test('should disable reply button when ietm is in pending state', () => {
+        getWrapper({ isPending: true, onReplyCreate: jest.fn() });
+        const replyButton = screen.getByRole('button', { name: localize(messages.reply.id) });
+        expect(replyButton).toHaveAttribute('aria-disabled', 'true');
+    });
 });

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

@@ -19,6 +19,17 @@ describe('src/elements/content-sidebar/activity-feed/activity-feed/ActivityThrea
             wrapper: Wrapper,
         });
 
+    test('should disable Reply button if isDisabled property is true', () => {
+        const onShow = jest.fn();
+        renderComponent({ isDisabled: true, onShow });
+        const replyButton = screen.getByRole('button', { name: localize(messages.reply.id) });
+
+        expect(replyButton).toHaveAttribute('aria-disabled', 'true');
+
+        fireEvent.click(replyButton);
+        expect(onShow).not.toBeCalled();
+    });
+
     test('should show reply form and should call onShow prop when clicked on Reply button', () => {
         const onShow = jest.fn();
         renderComponent({ onShow });