Merge branch 'master' into notify-on-edit

client/coral-admin/src/components/ApproveButton.css

@@ -5,16 +5,11 @@
   background: white;
   padding: 10px 12px;
   box-sizing: border-box;
-  vertical-align: middle;
-  line-height: 24px;
-  font-size: 17px;
-  height: 47px;
   border-radius: 3px;
   text-transform: capitalize;
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.03), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.09);
-  width: 129px;
-  transform: scale(.8);
-  margin: 0;
+  width: 100%;
+  margin: 0 0 .5em;
 
   &:not(:disabled):hover {
    box-shadow: none;

client/coral-admin/src/components/ModerationKeysModal.js

@@ -23,7 +23,7 @@ export default class ModerationKeysModal extends React.Component {
           'ctrl+f': 'modqueue.toggle_search',
           t: 'modqueue.next_queue',
           [`1...${this.props.queueCount}`]: 'modqueue.jump_to_queue',
-          s: 'modqueue.singleview',
+          z: 'modqueue.singleview',
           '?': 'modqueue.thismenu',
         },
       },

client/coral-admin/src/components/RejectButton.css

@@ -5,16 +5,11 @@
   background: white;
   padding: 10px 11px;
   box-sizing: border-box;
-  vertical-align: middle;
-  line-height: 24px;
-  font-size: 17px;
-  height: 47px;
   border-radius: 3px;
   text-transform: capitalize;
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.03), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.09);
-  width: 129px;
-  transform: scale(.8);
-  margin: 0;
+  width: 100%;
+  margin: 0 0 .5em;
 
   &:not(:disabled):hover {
    color: white;

client/coral-admin/src/routes/Configure/components/Configure.js

@@ -86,7 +86,6 @@ export default class Configure extends Component {
 }
 
 Configure.propTypes = {
-  notify: PropTypes.func.isRequired,
   savePending: PropTypes.func.isRequired,
   auth: PropTypes.object.isRequired,
   data: PropTypes.object.isRequired,

client/coral-admin/src/routes/Moderation/components/Moderation.js

@@ -19,7 +19,7 @@ class Moderation extends Component {
   componentWillMount() {
     const { toggleModal, singleView } = this.props;
 
-    key('s', () => singleView());
+    key('z', () => singleView());
     key('shift+/', () => toggleModal(true));
     key('esc', () => toggleModal(false));
     key('ctrl+f', () => this.openSearch());
@@ -113,7 +113,7 @@ class Moderation extends Component {
   };
 
   componentWillUnmount() {
-    key.unbind('s');
+    key.unbind('z');
     key.unbind('shift+/');
     key.unbind('esc');
     key.unbind('ctrl+f');

client/coral-admin/src/routes/Moderation/graphql.js

@@ -112,6 +112,10 @@ function getOlderDate(a, b) {
 function determineLatestChange(comment) {
   let lc = null;
 
+  comment.body_history.forEach(item => {
+    lc = getOlderDate(lc, item.created_at);
+  });
+
   comment.status_history.forEach(item => {
     lc = getOlderDate(lc, item.created_at);
   });
@@ -124,12 +128,16 @@ function determineLatestChange(comment) {
 }
 
 function reconstructPreviousCommentState(comment) {
-  const history = comment.status_history;
+  const statusHistory = comment.status_history;
+  const bodyHistory = comment.body_history;
   const actions = comment.actions;
   const lastChangeDate = determineLatestChange(comment);
   const previousComment = {
     ...comment,
-    status_history: history.filter(
+    body_history: bodyHistory.filter(
+      item => new Date(item.created_at) < lastChangeDate
+    ),
+    status_history: statusHistory.filter(
       item => new Date(item.created_at) < lastChangeDate
     ),
     actions: actions.filter(item => new Date(item.created_at) < lastChangeDate),
@@ -145,6 +153,9 @@ function reconstructPreviousCommentState(comment) {
       previousComment.status_history.length - 1
     ].type;
 
+  previousComment.body =
+    previousComment.body_history[previousComment.body_history.length - 1].body;
+
   return previousComment;
 }
 
@@ -383,6 +394,11 @@ export function handleIndicatorChange(root, comment, queueConfig) {
 
 export const subscriptionFields = `
   status
+  body
+  body_history {
+    body
+    created_at
+  }
   actions {
     __typename
     created_at

client/coral-embed-stream/src/graphql/index.js

@@ -195,7 +195,7 @@ export default {
           { mutationResult: { data: { createComment: { comment } } } }
         ) => {
           if (
-            (prev.me.role !== 'ADMIN' &&
+            (!['ADMIN', 'MODERATOR'].includes(prev.me.role) &&
               prev.asset.settings.moderation === 'PRE') ||
             comment.status === 'PREMOD' ||
             comment.status === 'REJECTED' ||

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

@@ -0,0 +1,17 @@
+import React, { Component } from 'react';
+import t from 'coral-framework/services/i18n';
+import RestrictedMessageBox from 'coral-framework/components/RestrictedMessageBox';
+
+class ChangeUsername extends Component {
+  render() {
+    return (
+      <RestrictedMessageBox>
+        <div className="talk-change-username">
+          <span>{t('framework.changed_name.msg')}</span>
+        </div>
+      </RestrictedMessageBox>
+    );
+  }
+}
+
+export default ChangeUsername;

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

@@ -25,6 +25,7 @@ import AllCommentsPane from './AllCommentsPane';
 import ExtendableTabPanel from '../../../containers/ExtendableTabPanel';
 
 import styles from './Stream.css';
+import ChangedUsername from './ChangedUsername';
 
 class Stream extends React.Component {
   constructor(props) {
@@ -237,6 +238,7 @@ class Stream extends React.Component {
     const banned = get(user, 'status.banned.status');
     const suspensionUntil = get(user, 'status.suspension.until');
     const rejectedUsername = get(user, 'status.username.status') === 'REJECTED';
+    const changedUsername = get(user, 'status.username.status') === 'CHANGED';
 
     const temporarilySuspended =
       user && suspensionUntil && new Date(suspensionUntil) > new Date();
@@ -246,6 +248,7 @@ class Stream extends React.Component {
       ((!banned &&
         !temporarilySuspended &&
         !rejectedUsername &&
+        !changedUsername &&
         !highlightedComment) ||
         keepCommentBox);
     const slotProps = { data };
@@ -285,6 +288,7 @@ class Stream extends React.Component {
                   )}
                 </RestrictedMessageBox>
               )}
+            {changedUsername && <ChangedUsername />}
             {!banned && rejectedUsername && <ChangeUsername user={user} />}
             {banned && <BannedAccount />}
             {showCommentBox && (