fix: add a response button added at the end of thread (#238)

src/discussions/comments/CommentsView.jsx

@@ -76,7 +76,8 @@ function DiscussionCommentsView({
         {comments.map(comment => (
           <Comment comment={comment} key={comment.id} postType={postType} />
         ))}
-
+        {!!comments.length
+          && <ResponseEditor postId={postId} addWrappingDiv />}
         {hasMorePages && !isLoading && (
           <Button
             onClick={handleLoadMoreResponses}

src/discussions/comments/CommentsView.test.jsx

@@ -160,9 +160,10 @@ describe('CommentsView', () => {
     it('should show and hide the editor', async () => {
       renderComponent(discussionPostId);
       await waitFor(() => screen.findByText('comment number 1', { exact: false }));
+      const addResponseButtons = screen.getAllByRole('button', { name: /add a response/i });
       await act(async () => {
         fireEvent.click(
-          screen.getByRole('button', { name: /add a response/i }),
+          addResponseButtons[0],
         );
       });
       expect(screen.queryByTestId('tinymce-editor')).toBeInTheDocument();
@@ -171,15 +172,17 @@ describe('CommentsView', () => {
       });
       expect(screen.queryByTestId('tinymce-editor')).not.toBeInTheDocument();
     });
+
     it('should allow posting a response', async () => {
       renderComponent(discussionPostId);
       await waitFor(() => screen.findByText('comment number 1', { exact: false }));
+      const responseButtons = screen.getAllByRole('button', { name: /add a response/i });
       await act(async () => {
         fireEvent.click(
-          screen.getByRole('button', { name: /add a response/i }),
+          responseButtons[0],
         );
       });
-      act(() => {
+      await act(() => {
         fireEvent.change(screen.getByTestId('tinymce-editor'), { target: { value: 'testing123' } });
       });
 
@@ -191,6 +194,7 @@ describe('CommentsView', () => {
       expect(screen.queryByTestId('tinymce-editor')).not.toBeInTheDocument();
       await waitFor(async () => expect(await screen.findByText('testing123', { exact: false })).toBeInTheDocument());
     });
+
     it('should allow posting a comment', async () => {
       renderComponent(discussionPostId);
       await waitFor(() => screen.findByText('comment number 1', { exact: false }));

src/discussions/comments/comment/ResponseEditor.jsx

@@ -1,6 +1,8 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 
+import classNames from 'classnames';
+
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Button } from '@edx/paragon';
 
@@ -10,17 +12,21 @@ import CommentEditor from './CommentEditor';
 function ResponseEditor({
   postId,
   intl,
+  addWrappingDiv,
 }) {
   const [addingResponse, setAddingResponse] = useState(false);
+
   return addingResponse
     ? (
-      <CommentEditor
-        comment={{ threadId: postId }}
-        edit={false}
-        onCloseEditor={() => setAddingResponse(false)}
-      />
+      <div className={classNames({ 'bg-white p-4': addWrappingDiv })}>
+        <CommentEditor
+          comment={{ threadId: postId }}
+          edit={false}
+          onCloseEditor={() => setAddingResponse(false)}
+        />
+      </div>
     ) : (
-      <div className="actions d-flex">
+      <div className={classNames({ 'mb-4': addWrappingDiv }, 'actions d-flex')}>
         <Button variant="primary" className="px-2.5 py-2" onClick={() => setAddingResponse(true)}>
           {intl.formatMessage(messages.addResponse)}
         </Button>
@@ -31,6 +37,11 @@ function ResponseEditor({
 ResponseEditor.propTypes = {
   postId: PropTypes.string.isRequired,
   intl: intlShape.isRequired,
+  addWrappingDiv: PropTypes.bool,
+};
+
+ResponseEditor.defaultProps = {
+  addWrappingDiv: false,
 };
 
 export default injectIntl(ResponseEditor);