Merge branch 'next' into firefox-actionmenu-deselect

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,

client/coral-ui/components/Drawer.css

@@ -37,6 +37,12 @@
   text-align: center;
   cursor: pointer;
 
+  .icon {
+    color: #595959;
+    font-size: 25px;
+    display: block;
+  }
+
   &:hover {
     color: #ccc;
   }

client/coral-ui/components/Drawer.js

@@ -2,11 +2,14 @@ import React from 'react';
 import cn from 'classnames';
 import PropTypes from 'prop-types';
 import styles from './Drawer.css';
+import {Icon} from 'coral-ui';
 
 const Drawer = ({children, onClose, className = ''}) => {
   return (
     <div className={cn(styles.drawer, className)}>
-      <button className={cn(styles.closeButton, [className, 'close-button'].join('-'))} onClick={onClose}>×</button>
+      <button className={cn(styles.closeButton, [className, 'close-button'].join('-'))} onClick={onClose}>
+        <Icon name="close" className={styles.icon} />
+      </button>
       <div className={styles.content}>
         {children}
       </div>

locales/en.yml

@@ -10,7 +10,7 @@ en:
     cancel: "Cancel"
     note: "Note: {0}"
     note_reject_comment: "Banning this user will also place this comment in the Rejected queue."
-    note_ban_user: "Banning this user will not let them edit comment or remove anything."
+    note_ban_user: "Banning this user will not let them comment, react to, or report comments."
     yes_ban_user: "Yes, Ban User"
     write_a_message: "Write a message"
     send: "Send"

plugins/talk-plugin-featured-comments/client/components/ModTag.css

@@ -7,11 +7,11 @@
   padding: 0px 5px;
   border-radius: 2px;
   font-size: 12px;
-  height: 24px;
+  height: 26px;
   transition: background-color .2s cubic-bezier(.4,0,.2,1), color .2s cubic-bezier(.4,0,.2,1), border-color .2s cubic-bezier(.4,0,.2,1);
   margin: 2px 0px;
   letter-spacing: 0.4px;
-
+  line-height: 25px;
 }
 
 .tag:hover {
@@ -38,5 +38,5 @@
 .tagIcon {
   margin-right: 5px;
   font-size: 15px;
-  vertical-align: text-bottom;
+  vertical-align: sub;
 }

plugins/talk-plugin-ignore-user/client/components/IgnoreUserConfirmation.css

@@ -16,6 +16,7 @@
   padding: 0;
   margin: 0 0 8px 0;
   font-size: 15px;
+  word-wrap: break-word;
 }
 
 .button {

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();
+  },
 };