MFE fixes (#256)

* fix: add response section closed on switching post

* fix: response and comments actions removed from close post

* fix: undo/redo button moved to first place in editor toolbar

* fix: tests are added for closed posts

src/components/TinyMCEEditor.jsx

@@ -94,12 +94,12 @@ export default function TinyMCEEditor(props) {
         autosave_interval: '1s',
         autosave_restore_when_empty: true,
         plugins: 'autosave codesample link lists image imagetools code emoticons charmap',
-        toolbar: 'formatselect | bold italic underline'
+        toolbar: 'undo redo'
+          + ' | formatselect | bold italic underline'
           + ' | link blockquote openedx_code image'
           + ' | bullist numlist outdent indent'
           + ' | removeformat'
           + ' | openedx_html'
-          + ' | undo redo'
           + ' | emoticons'
           + ' | charmap',
         content_css: false,

src/discussions/comments/CommentsView.jsx

@@ -58,6 +58,7 @@ function DiscussionCommentsView({
   postId,
   intl,
   endorsed,
+  isClosed,
 }) {
   const {
     comments,
@@ -74,9 +75,9 @@ function DiscussionCommentsView({
       </div>
       <div className="mx-4" role="list">
         {comments.map(comment => (
-          <Comment comment={comment} key={comment.id} postType={postType} />
+          <Comment comment={comment} key={comment.id} postType={postType} isClosedPost={isClosed} />
         ))}
-        {!!comments.length
+        {!!comments.length && !isClosed
           && <ResponseEditor postId={postId} addWrappingDiv />}
         {hasMorePages && !isLoading && (
           <Button
@@ -104,6 +105,7 @@ function DiscussionCommentsView({
 DiscussionCommentsView.propTypes = {
   postId: PropTypes.string.isRequired,
   postType: PropTypes.string.isRequired,
+  isClosed: PropTypes.bool.isRequired,
   intl: intlShape.isRequired,
   endorsed: PropTypes.oneOf([
     EndorsementStatus.ENDORSED, EndorsementStatus.UNENDORSED, EndorsementStatus.DISCUSSION,
@@ -124,7 +126,7 @@ function CommentsView({ intl }) {
     <>
       <div className="discussion-comments d-flex flex-column m-4 p-4.5 card">
         <Post post={thread} />
-        <ResponseEditor postId={postId} />
+        {!thread.closed && <ResponseEditor postId={postId} /> }
       </div>
       {thread.type === ThreadType.DISCUSSION
         && (
@@ -133,6 +135,7 @@ function CommentsView({ intl }) {
           intl={intl}
           postType={thread.type}
           endorsed={EndorsementStatus.DISCUSSION}
+          isClosed={thread.closed}
         />
         )}
       {thread.type === ThreadType.QUESTION && (
@@ -142,12 +145,14 @@ function CommentsView({ intl }) {
             intl={intl}
             postType={thread.type}
             endorsed={EndorsementStatus.ENDORSED}
+            isClosed={thread.closed}
           />
           <DiscussionCommentsView
             postId={postId}
             intl={intl}
             postType={thread.type}
             endorsed={EndorsementStatus.UNENDORSED}
+            isClosed={thread.closed}
           />
         </>
       )}

src/discussions/comments/CommentsView.test.jsx

@@ -195,6 +195,12 @@ describe('CommentsView', () => {
       await waitFor(async () => expect(await screen.findByText('testing123', { exact: false })).toBeInTheDocument());
     });
 
+    it('should not allow posting a response on a closed post', async () => {
+      renderComponent(closedPostId);
+      await waitFor(() => screen.findByText('Thread-2', { exact: false }));
+      expect(screen.queryByRole('button', { name: /add a response/i })).not.toBeInTheDocument();
+    });
+
     it('should allow posting a comment', async () => {
       renderComponent(discussionPostId);
       await waitFor(() => screen.findByText('comment number 1', { exact: false }));
@@ -215,6 +221,17 @@ describe('CommentsView', () => {
       expect(screen.queryByTestId('tinymce-editor')).not.toBeInTheDocument();
       await waitFor(async () => expect(await screen.findByText('testing123', { exact: false })).toBeInTheDocument());
     });
+
+    it('should not allow posting a comment on a closed post', async () => {
+      renderComponent(closedPostId);
+      await waitFor(() => screen.findByText('thread-2', { exact: false }));
+      await act(async () => {
+        expect(
+          screen.queryByRole('button', { name: /add a comment/i }),
+        ).not.toBeInTheDocument();
+      });
+    });
+
     it('should allow editing an existing comment', async () => {
       renderComponent(discussionPostId);
       await waitFor(() => screen.findByText('comment number 1', { exact: false }));

src/discussions/comments/comment/Comment.jsx

@@ -24,6 +24,7 @@ function Comment({
   postType,
   comment,
   showFullThread = true,
+  isClosedPost,
   intl,
 }) {
   const dispatch = useDispatch();
@@ -122,9 +123,14 @@ function Comment({
                 onCloseEditor={() => setReplying(false)}
               />
             ) : (
-              <Button className="d-flex flex-grow mt-4.5" variant="outline-primary" onClick={() => setReplying(true)}>
-                {intl.formatMessage(messages.addComment)}
-              </Button>
+              <>
+                {!isClosedPost
+                  && (
+                  <Button className="d-flex flex-grow mt-4.5" variant="outline-primary" onClick={() => setReplying(true)}>
+                    {intl.formatMessage(messages.addComment)}
+                  </Button>
+                  )}
+              </>
             )
           )}
         </div>
@@ -137,11 +143,13 @@ Comment.propTypes = {
   postType: PropTypes.oneOf(['discussion', 'question']).isRequired,
   comment: commentShape.isRequired,
   showFullThread: PropTypes.bool,
+  isClosedPost: PropTypes.bool,
   intl: intlShape.isRequired,
 };
 
 Comment.defaultProps = {
   showFullThread: true,
+  isClosedPost: false,
 };
 
 export default injectIntl(Comment);

src/discussions/comments/comment/ResponseEditor.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 
 import classNames from 'classnames';
@@ -16,6 +16,10 @@ function ResponseEditor({
 }) {
   const [addingResponse, setAddingResponse] = useState(false);
 
+  useEffect(() => {
+    setAddingResponse(false);
+  }, [postId]);
+
   return addingResponse
     ? (
       <div className={classNames({ 'bg-white p-4 mb-4 rounded': addWrappingDiv })}>