Merge pull request #1264 from coralproject/reply

Hide reply button when comment stream is closed

client/coral-embed-stream/src/components/Embed.js

@@ -38,7 +38,7 @@ export default class Embed extends React.Component {
     ];
     if (can(user, 'UPDATE_CONFIG')) {
       tabs.push(
-        <Tab key='config' tabId='config'>
+        <Tab key='config' tabId='config' className='talk-embed-stream-config-tab'>
           {t('framework.configure_stream')}
         </Tab>
       );
@@ -90,7 +90,7 @@ export default class Embed extends React.Component {
             <TabPane key='profile' tabId='profile' className='talk-embed-stream-profile-tab-pane'>
               <ProfileContainer />
             </TabPane>,
-            <TabPane key='config' tabId='config' className='talk-embed-stream-configuration-tab-pane'>
+            <TabPane key='config' tabId='config' className='talk-embed-stream-config-tab-pane'>
               <Configure data={data} root={root} asset={root.asset} />
             </TabPane>,
           ]}
@@ -101,8 +101,18 @@ export default class Embed extends React.Component {
 }
 
 Embed.propTypes = {
+  setActiveTab: PropTypes.func,
+  auth: PropTypes.object,
+  blurSignInDialog: PropTypes.func,
+  focusSignInDialog: PropTypes.func,
+  hideSignInDialog: PropTypes.func,
+  router: PropTypes.object,
+  commentId: PropTypes.string,
+  root: PropTypes.object,
+  activeTab: PropTypes.string,
   data: PropTypes.shape({
     loading: PropTypes.bool,
-    error: PropTypes.object
+    error: PropTypes.object,
+    refetch: PropTypes.func,
   }).isRequired
 };

client/coral-embed-stream/src/tabs/configure/components/AssetStatusInfo.js

@@ -46,14 +46,16 @@ class AssetStatusInfo extends React.Component {
   render() {
     const {isClosed, closedAt, onClose, onOpen} = this.props;
     return (
-      <div>
+      <div className="talk-config-close-comments">
         <h3>{!isClosed ? t('configure.close') : t('configure.open')} {t('configure.comment_stream')}</h3>
         {(!isClosed && closedAt) ? <p>{t('configure.comment_stream_will_close')} {timeago(new Date(closedAt))}.</p> : ''}
-        <div className={cn('close-comments-intro-wrapper', styles.wrapper)}>
+        <div className={cn('talk-config-close-comments-wrapper', styles.wrapper)}>
           <p>
             {!isClosed ? t('configure.open_stream_configuration') : t('configure.close_stream_configuration')}
           </p>
-          <Button className={styles.button} onClick={!isClosed ? onClose : onOpen}>
+          <Button
+            className={cn(styles.button, `talk-config-close-comments-${isClosed ? 'open' : 'close'}-button`)}
+            onClick={!isClosed ? onClose : onOpen}>
             {!isClosed ? t('configure.close_stream') : t('configure.open_stream')}
           </Button>
         </div>

client/coral-embed-stream/src/tabs/stream/components/Comment.js

@@ -547,6 +547,7 @@ export default class Comment extends React.Component {
                       queryData={queryData}
                       inline
                     />
+
                     {!disableReply &&
                       <ActionButton>
                         <ReplyButton

client/coral-embed-stream/src/tabs/stream/components/Stream.js

@@ -87,6 +87,7 @@ class Stream extends React.Component {
             {t('framework.show_all_comments')}
           </button>
         </div>
+
         <Comment
           data={data}
           root={root}
@@ -160,6 +161,7 @@ class Stream extends React.Component {
             {...slotProps}
           />
         </div>
+
         <ExtendableTabPanel
           key={`${sortBy}_${sortOrder}`}
           activeTab={activeStreamTab}
@@ -187,7 +189,7 @@ class Stream extends React.Component {
                 setActiveReplyBox={setActiveReplyBox}
                 activeReplyBox={activeReplyBox}
                 notify={notify}
-                disableReply={!open}
+                disableReply={asset.isClosed}
                 postComment={postComment}
                 currentUser={user}
                 postFlag={postFlag}
@@ -315,6 +317,7 @@ class Stream extends React.Component {
 }
 
 Stream.propTypes = {
+  asset: PropTypes.object,
   activeStreamTab: PropTypes.string,
   data: PropTypes.object,
   root: PropTypes.object,

test/e2e/page_objects/embedStream.js

@@ -8,6 +8,12 @@ module.exports = {
       this.expect.section('@comments').to.be.visible;
       return this.section.comments;
     },
+    goToConfigSection: function() {
+      this.waitForElementVisible('@configTabButton');
+      this.click('@configTabButton');
+      this.expect.section('@config').to.be.visible;
+      return this.section.config;
+    },
     goToProfileSection: function() {
       this.waitForElementVisible('@profileTabButton');
       this.click('@profileTabButton');
@@ -42,6 +48,7 @@ module.exports = {
     iframe: `#${iframeId}`,
     commentsTabButton: '.talk-embed-stream-comments-tab > button',
     profileTabButton: '.talk-embed-stream-profile-tab > button',
+    configTabButton: '.talk-embed-stream-config-tab > button',
     banDialog: '.talk-ban-user-dialog',
     banDialogConfirmButton: '.talk-ban-user-dialog-button-confirm',
   },
@@ -95,6 +102,7 @@ module.exports = {
         firstComment: '.talk-stream-comment.talk-stream-comment-level-0',
         firstCommentContent: '.talk-stream-comment.talk-stream-comment-level-0 .talk-stream-comment-content',
         flagButton: '.talk-stream-comment.talk-stream-comment-level-0 .talk-plugin-flags-button',
+        replyButton: '.talk-stream-comment.talk-stream-comment-level-0 .talk-plugin-replies-reply-button',
         respectButton: '.talk-stream-comment.talk-stream-comment-level-0 .talk-stream-comment-footer .talk-plugin-respect-button',
         restrictedMessageBox: '.talk-restricted-message-box',
         changeUsernameInput: '.talk-change-username-username-input',
@@ -132,5 +140,26 @@ module.exports = {
         myCommentHistoryComment: '.talk-my-profile-comment-history .my-comment-body',
       },
     },
+    config: {
+      selector: '.talk-embed-stream-config-tab-pane',
+      elements: {
+        openStream: '.talk-config-close-comments-open-button',
+        closeStream: '.talk-config-close-comments-close-button',
+      },
+      commands: [{
+        openStream: function() {
+          this.waitForElementVisible('@openStream');
+          this.click('@openStream');
+          this.waitForElementVisible('@closeStream');
+          return this.section.config;
+        },
+        closeStream: function() {
+          this.waitForElementVisible('@closeStream');
+          this.click('@closeStream');
+          this.waitForElementVisible('@openStream');
+          return this.section.config;
+        },
+      }]
+    },
   },
 };

test/e2e/specs/03_embedStream.js

@@ -111,4 +111,42 @@ module.exports = {
     profile
       .assert.visible('@notLoggedIn');
   },
+  'admin logs in': (client) => {
+    const {testData: {admin}} = client.globals;
+    const embedStream = client.page.embedStream();
+
+    embedStream
+      .navigate()
+      .ready()
+      .openLoginPopup((popup) => popup.login(admin));
+  },
+  'admin closes stream, users won\'t be able to perform some actions: reply ': (client) => {
+
+    const embedStream = client.page.embedStream();
+
+    embedStream
+      .goToCommentsSection()
+      .waitForElementVisible('@firstComment')
+      .waitForElementVisible('@replyButton');
+
+    embedStream
+      .goToConfigSection()
+      .closeStream();
+
+    embedStream
+      .goToCommentsSection()
+      .waitForElementVisible('@firstComment')
+      .waitForElementNotPresent('@replyButton');
+
+      embedStream
+      .goToConfigSection()
+      .openStream();
+  },
+  'admin logs out': (client) => {
+    const embedStream = client.page.embedStream();
+    const comments = embedStream.goToCommentsSection();
+
+    comments
+      .logout();
+  },
 };