feat(threaded-replies): Create Reply button component (#3298)

* feat(threaded-replies): Create reply button

* feat(threaded-replies): Update CreateReply props

* feat(threaded-replies): Add tests and update isDisabled

* feat(threaded-replies): Fix lint errors

* feat(threaded-replies): sort imports

* feat(threaded-replies): Remove getAvatarUrl conditional

* feat(threaded-replies): rename test

* feat(threaded-replies): Allow placeholder in props

Author: JChan106

i18n/en-US.properties

@@ -176,6 +176,10 @@ be.contentSidebar.activityFeed.comment.commentPostedFullDateTime = {time, date,
 be.contentSidebar.activityFeed.comment.commentResolveMenuItem = Resolve
 # Text to show on menu item to unresolve the comment
 be.contentSidebar.activityFeed.comment.commentUnresolveMenuItem = Unresolve
+# Text to show on button to start replying to comment
+be.contentSidebar.activityFeed.comment.reply = Reply
+# Text to show on reply form input placeholder
+be.contentSidebar.activityFeed.comment.replyInThread = Reply in thread
 # Placeholder for approvers input
 be.contentSidebar.activityFeed.commentForm.approvalAddAssignee = Add an assignee
 # Label for checkbox to add approvers to a comment

src/elements/content-sidebar/activity-feed/comment-form/CommentForm.js

@@ -27,7 +27,7 @@ type Props = {
     contactsLoaded?: boolean,
     createComment?: Function,
     entityId?: string,
-    getAvatarUrl: GetAvatarUrlCallback,
+    getAvatarUrl?: GetAvatarUrlCallback,
     getMentionWithQuery?: Function,
     isDisabled?: boolean,
     isEditing?: boolean,
@@ -40,7 +40,7 @@ type Props = {
     showTip?: boolean,
     tagged_message?: string,
     updateComment?: Function,
-    user: User,
+    user?: User,
 } & InjectIntlProvidedProps;
 
 type State = {
@@ -129,7 +129,7 @@ class CommentForm extends React.Component<Props, State> {
 
         return (
             <Media className={inputContainerClassNames}>
-                {!isEditing && (
+                {!isEditing && !!user && (
                     <Media.Figure className="bcs-CommentForm-avatar">
                         <Avatar getAvatarUrl={getAvatarUrl} user={user} />
                     </Media.Figure>

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

@@ -0,0 +1,72 @@
+// @flow
+
+import * as React from 'react';
+import { FormattedMessage, injectIntl } from 'react-intl';
+import type { IntlShape } from 'react-intl';
+import noop from 'lodash/noop';
+
+import ArrowArcRight from '../../../../icon/fill/ArrowArcRight';
+import PlainButton from '../../../../components/plain-button';
+
+import type { SelectorItems } from '../../../../common/types/core';
+
+import CommentForm from '../comment-form';
+
+import messages from './messages';
+import './CreateReply.scss';
+
+type Props = {
+    getMentionWithQuery?: (searchStr: string) => void,
+    intl: IntlShape,
+    isDisabled?: boolean,
+    mentionSelectorContacts?: SelectorItems<>,
+    onCancel: () => void,
+    onClick: () => void,
+    onFocus?: () => void,
+    onSubmit: (reply: string) => void,
+    placeholder?: string,
+    showReplyForm: boolean,
+};
+
+const CreateReply = ({
+    mentionSelectorContacts,
+    getMentionWithQuery,
+    isDisabled = false,
+    intl,
+    onFocus = noop,
+    onCancel,
+    onSubmit,
+    onClick,
+    placeholder = intl.formatMessage(messages.replyInThread),
+    showReplyForm,
+}: Props) => {
+    const handleSubmit = ({ text }: { text: string }) => {
+        onSubmit(text);
+    };
+
+    return (
+        <div className="bcs-CreateReply">
+            {showReplyForm && !isDisabled ? (
+                <CommentForm
+                    className="bcs-CreateReply-form"
+                    isOpen
+                    isEditing
+                    showTip={false}
+                    onCancel={onCancel}
+                    onFocus={onFocus}
+                    createComment={handleSubmit}
+                    mentionSelectorContacts={mentionSelectorContacts}
+                    getMentionWithQuery={getMentionWithQuery}
+                    placeholder={placeholder}
+                />
+            ) : (
+                <PlainButton className="bcs-CreateReply-toggle" onClick={onClick} type="button" isDisabled={isDisabled}>
+                    <ArrowArcRight className="bcs-CreateReply-arrow" />
+                    <FormattedMessage {...messages.reply} />
+                </PlainButton>
+            )}
+        </div>
+    );
+};
+
+export default injectIntl(CreateReply);

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

@@ -0,0 +1,21 @@
+@import '../../../common/variables';
+
+.bcs-CreateReply {
+    .bcs-CreateReply-toggle {
+        display: flex;
+        align-items: center;
+        color: $bdl-gray-62;
+        font-weight: bold;
+
+        .bcs-CreateReply-arrow {
+            margin-right: $bdl-grid-unit;
+            // in design arrow is turning left, but we only have ArrowArcRight, so will transfrom it to left one
+            transform: matrix(-1, 0, 0, 1, 0, 0);
+        }
+    }
+
+    .bcs-CreateReply-form {
+        padding: 0;
+        border-top: none;
+    }
+}

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

@@ -0,0 +1,127 @@
+// @flow
+
+import React from 'react';
+import { IntlProvider } from 'react-intl';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { ContentState, EditorState } from 'draft-js';
+import CreateReply from '../CreateReply';
+import localize from '../../../../../../test/support/i18n';
+import messages from '../messages';
+
+jest.mock('react-intl', () => ({
+    ...jest.requireActual('react-intl'),
+    FormattedMessage: ({ defaultMessage }: { defaultMessage: string }) => <span>{defaultMessage}</span>,
+}));
+
+const onCancel = jest.fn();
+const onFocus = jest.fn();
+const onSubmit = jest.fn();
+const onClick = jest.fn();
+
+const replyInThreadMessage = localize(messages.replyInThread.id);
+const replyMessage = localize(messages.reply.id);
+
+const getWrapper = props =>
+    render(
+        <IntlProvider locale="en">
+            <CreateReply
+                isDisabled={false}
+                onCancel={onCancel}
+                onFocus={onFocus}
+                onSubmit={onSubmit}
+                onClick={onClick}
+                showReplyForm={false}
+                {...props}
+            />
+        </IntlProvider>,
+    );
+
+describe('elements/content-sidebar/ActivityFeed/comment/CreateReply', () => {
+    afterEach(() => {
+        jest.restoreAllMocks();
+    });
+
+    test('should correctly render CreateReply button', () => {
+        getWrapper();
+
+        expect(screen.getByText(replyMessage)).toBeVisible();
+        expect(screen.queryByText(replyInThreadMessage)).not.toBeInTheDocument();
+    });
+
+    test('should correctly render CreateReply form with default placeholder', () => {
+        getWrapper({ showReplyForm: true });
+
+        expect(screen.getByText(replyInThreadMessage)).toBeVisible();
+        expect(screen.queryByText(replyMessage)).not.toBeInTheDocument();
+    });
+
+    test('should correctly render CreateReply form with a passed in placeholder', () => {
+        getWrapper({ showReplyForm: true, placeholder: 'Reply to Task' });
+
+        expect(screen.getByText('Reply to Task')).toBeVisible();
+        expect(screen.queryByText(replyInThreadMessage)).not.toBeInTheDocument();
+        expect(screen.queryByText(replyMessage)).not.toBeInTheDocument();
+    });
+
+    test('should disable Reply button if isDisabled property is true', () => {
+        getWrapper({ isDisabled: true });
+
+        const replyButton = screen.getByRole('button', { name: replyMessage });
+        expect(replyButton).toHaveAttribute('aria-disabled', 'true');
+
+        fireEvent.click(replyButton);
+        expect(onClick).not.toBeCalled();
+    });
+
+    test('should call onClick when reply button is clicked', () => {
+        getWrapper();
+
+        fireEvent.click(screen.getByText(replyMessage));
+        expect(onClick).toBeCalledTimes(1);
+        expect(onSubmit).not.toBeCalled();
+        expect(onFocus).not.toBeCalled();
+        expect(onCancel).not.toBeCalled();
+    });
+
+    test('should not show form when isDisabled property is true', () => {
+        getWrapper({ showReplyForm: true, isDisabled: true });
+
+        const replyButton = screen.getByRole('button', { name: replyMessage });
+        expect(screen.queryByText(replyInThreadMessage)).not.toBeInTheDocument();
+        expect(replyButton).toHaveAttribute('aria-disabled', 'true');
+
+        fireEvent.click(replyButton);
+        expect(onClick).not.toBeCalled();
+    });
+
+    test('should call onCancel when form cancel is clicked', () => {
+        getWrapper({ showReplyForm: true });
+
+        fireEvent.click(screen.getByText('Cancel'));
+        expect(onCancel).toBeCalledTimes(1);
+        expect(onSubmit).not.toBeCalled();
+        expect(onFocus).not.toBeCalled();
+        expect(onClick).not.toBeCalled();
+    });
+
+    test('should call onSubmit when reply is posted', () => {
+        // Mock DraftJS editor and intercept onChange since DraftJS doesn't have a value setter
+        const draftjs = require('draft-js');
+        draftjs.Editor = jest.fn(props => {
+            const modifiedOnchange = e => {
+                const text = e.target.value;
+                const content = ContentState.createFromText(text);
+                props.onChange(EditorState.createWithContent(content));
+            };
+            return <input className="editor" onChange={e => modifiedOnchange(e)} />;
+        });
+
+        getWrapper({ showReplyForm: true });
+
+        fireEvent.change(screen.getByRole('textbox'), { target: { value: 'Batman' } });
+
+        fireEvent.click(screen.getByText('Post'));
+        expect(onSubmit).toBeCalledTimes(1);
+        expect(onSubmit).toBeCalledWith('Batman');
+    });
+});

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

@@ -37,6 +37,16 @@ const messages = defineMessages({
         defaultMessage: 'Unresolve',
         description: 'Text to show on menu item to unresolve the comment',
     },
+    reply: {
+        id: 'be.contentSidebar.activityFeed.comment.reply',
+        defaultMessage: 'Reply',
+        description: 'Text to show on button to start replying to comment',
+    },
+    replyInThread: {
+        id: 'be.contentSidebar.activityFeed.comment.replyInThread',
+        defaultMessage: 'Reply in thread',
+        description: 'Text to show on reply form input placeholder',
+    },
 });
 
 export default messages;