Merge branch 'party-fixes' of github.com:coralproject/talk into party-fixes

* 'party-fixes' of github.com:coralproject/talk: (33 commits)
  patched migration bugs
  Don't close popup when there is an error
  Update .nsprc
  fix optimisticResponse typo
  Remove deprecated useMongoClient
  Update lint-staged to fix dependency issue
  copy updates
  Update package.json
  Ready
  Set is_test to false
  Removing
  Added support for new indexes
  Remove unused variable 2
  Remove unused variable
  Remove ModerationIndicator from container
  Show username already exists error
  No indicator on new queue
  Exclude deleted when loading more
  Remove modqueue counts on the frontend
  sepatate state
  ...

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

@@ -0,0 +1,16 @@
+.external {
+  margin-bottom: 20px;
+}
+
+.separator h5 {
+  text-align: center;
+  font-size: 1.2em;
+}
+
+.slot > * {
+margin-bottom: 8px;
+
+&:last-child {
+  margin-bottom: 0px;
+}
+}

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './External.css';
+import Slot from 'coral-framework/components/Slot';
+import IfSlotIsNotEmpty from 'coral-framework/components/IfSlotIsNotEmpty';
+
+const External = ({ slot }) => (
+  <IfSlotIsNotEmpty slot={slot}>
+    <div>
+      <div className={styles.external}>
+        <Slot fill={slot} className={styles.slot} />
+      </div>
+      <div className={styles.separator}>
+        <h5>Or</h5>
+      </div>
+    </div>
+  </IfSlotIsNotEmpty>
+);
+
+External.propTypes = {
+  slot: PropTypes.string.isRequired,
+};
+
+export default External;

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

@@ -7,7 +7,6 @@ import styles from './Header.css';
 import t from 'coral-framework/services/i18n';
 import { Logo } from './Logo';
 import { can } from 'coral-framework/services/perms';
-import ModerationIndicator from '../routes/Moderation/containers/Indicator';
 import CommunityIndicator from '../routes/Community/containers/Indicator';
 
 const CoralHeader = ({
@@ -32,7 +31,6 @@ const CoralHeader = ({
                   activeClassName={styles.active}
                 >
                   {t('configure.moderate')}
-                  <ModerationIndicator root={root} data={data} />
                 </IndexLink>
               )}
               <Link

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

@@ -1,10 +1,8 @@
 .indicator {
+  display: inline-block;
   background-color: #E46D59;
   border-radius: 10px;
-  position: absolute;
-  top: 50%;
   width: 7px;
   height: 7px;
-  margin-top: -4px;
   margin-left: 7px;
 }

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

@@ -4,6 +4,7 @@ import styles from './SignIn.css';
 import { Button, TextField, Alert } from 'coral-ui';
 import cn from 'classnames';
 import Recaptcha from 'coral-framework/components/Recaptcha';
+import External from './External';
 
 class SignIn extends React.Component {
   recaptcha = null;
@@ -33,48 +34,55 @@ class SignIn extends React.Component {
   render() {
     const { email, password, errorMessage, requireRecaptcha } = this.props;
     return (
-      <form className="talk-admin-login-sign-in" onSubmit={this.handleSubmit}>
-        {errorMessage && <Alert>{errorMessage}</Alert>}
-        <TextField
-          id="email"
-          label="Email Address"
-          value={email}
-          onChange={this.handleEmailChange}
-        />
-        <TextField
-          id="password"
-          label="Password"
-          value={password}
-          onChange={this.handlePasswordChange}
-          type="password"
-        />
-        {requireRecaptcha && (
-          <div className={styles.recaptcha}>
-            <Recaptcha
-              ref={this.handleRecaptchaRef}
-              onVerify={this.props.onRecaptchaVerify}
-            />
-          </div>
-        )}
-        <Button
-          className={cn(styles.signInButton, 'talk-admin-login-sign-in-button')}
-          type="submit"
-          cStyle="black"
-          full
-        >
-          Sign In
-        </Button>
-        <p className={styles.forgotPasswordCTA}>
-          Forgot your password?{' '}
-          <a
-            href="#"
-            className={styles.forgotPasswordLink}
-            onClick={this.handleForgotPasswordLink}
+      <div className="talk-admin-login-sign-in">
+        <External slot="authExternalAdminSignIn" />
+        <form onSubmit={this.handleSubmit}>
+          {errorMessage && <Alert>{errorMessage}</Alert>}
+          <TextField
+            id="email"
+            label="Email Address"
+            value={email}
+            onChange={this.handleEmailChange}
+          />
+          <TextField
+            id="password"
+            label="Password"
+            value={password}
+            onChange={this.handlePasswordChange}
+            type="password"
+          />
+          {requireRecaptcha && (
+            <div className={styles.recaptcha}>
+              <Recaptcha
+                ref={this.handleRecaptchaRef}
+                onVerify={this.props.onRecaptchaVerify}
+              />
+            </div>
+          )}
+          <Button
+            className={cn(
+              styles.signInButton,
+              'talk-admin-login-sign-in-button'
+            )}
+            type="submit"
+            cStyle="black"
+            full
           >
-            Request a new one.
-          </a>
-        </p>
-      </form>
+            Sign In
+          </Button>
+          <p className={styles.forgotPasswordCTA}>
+            {/* TODO: translate */}
+            Forgot your password?{' '}
+            <a
+              href="#"
+              className={styles.forgotPasswordLink}
+              onClick={this.handleForgotPasswordLink}
+            >
+              Request a new one.
+            </a>
+          </p>
+        </form>
+      </div>
     );
   }
 }

client/coral-admin/src/containers/Header.js

@@ -2,21 +2,20 @@ import { gql } from 'react-apollo';
 import withQuery from 'coral-framework/hocs/withQuery';
 import Header from '../components/Header';
 import CommunityIndicator from '../routes/Community/containers/Indicator';
-import ModerationIndicator from '../routes/Moderation/containers/Indicator';
+// TODO: eventually we will readd modqueue counts
+// import ModerationIndicator from '../routes/Moderation/containers/Indicator';
 import { getDefinitionName } from 'coral-framework/utils';
 
 export default withQuery(
   gql`
-    query TalkAdmin_Header($nullID: ID) {
-      ...${getDefinitionName(ModerationIndicator.fragments.root)}
+    query TalkAdmin_Header {
       ...${getDefinitionName(CommunityIndicator.fragments.root)}
     }
-    ${ModerationIndicator.fragments.root}
     ${CommunityIndicator.fragments.root}
   `,
   {
     options: {
-      variables: { nullID: null },
+      // variables: { nullID: null },
     },
   }
 )(Header);

client/coral-admin/src/containers/SignIn.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { withSignIn } from 'coral-framework/hocs';
+import { withSignIn, withPopupAuthHandler } from 'coral-framework/hocs';
 import { compose } from 'recompose';
 import SignIn from '../components/SignIn';
 
@@ -55,4 +55,4 @@ SignInContainer.propTypes = {
   requireRecaptcha: PropTypes.bool.isRequired,
 };
 
-export default compose(withSignIn)(SignInContainer);
+export default compose(withSignIn, withPopupAuthHandler)(SignInContainer);

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

@@ -82,6 +82,20 @@ class StreamSettings extends React.Component {
     this.props.updatePending({ updater });
   };
 
+  updateDisableCommenting = () => {
+    const updater = {
+      disableCommenting: {
+        $set: !this.props.settings.disableCommenting,
+      },
+    };
+    this.props.updatePending({ updater });
+  };
+
+  updateDisableCommentingMessage = value => {
+    const updater = { disableCommentingMessage: { $set: value } };
+    this.props.updatePending({ updater });
+  };
+
   updateAutoClose = () => {
     const updater = {
       autoCloseStream: { $set: !this.props.settings.autoCloseStream },
@@ -192,6 +206,25 @@ class StreamSettings extends React.Component {
            
           {t('configure.edit_comment_timeframe_text_post')}
         </ConfigureCard>
+        <ConfigureCard
+          checked={settings.disableCommenting}
+          onCheckbox={this.updateDisableCommenting}
+          title={t('configure.disable_commenting_title')}
+        >
+          <p>{t('configure.disable_commenting_desc')}</p>
+          <div
+            className={cn(
+              styles.configSettingDisableCommenting,
+              settings.disableCommenting ? null : styles.hidden
+            )}
+          >
+            <MarkdownEditor
+              className={styles.descriptionBox}
+              onChange={this.updateDisableCommentingMessage}
+              value={settings.disableCommentingMessage}
+            />
+          </div>
+        </ConfigureCard>
         <ConfigureCard
           checked={settings.autoCloseStream}
           onCheckbox={this.updateAutoClose}

client/coral-admin/src/routes/Configure/containers/StreamSettings.js

@@ -39,6 +39,8 @@ export default compose(
         autoCloseStream
         closedTimeout
         closedMessage
+        disableCommenting
+        disableCommentingMessage
         ${getSlotFragmentSpreads(slots, 'settings')}
       }
     `,

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

@@ -63,10 +63,6 @@ class Moderation extends Component {
     this.props.toggleStorySearch(true);
   };
 
-  getActiveTabCount = (props = this.props) => {
-    return props.root[`${props.activeTab}Count`];
-  };
-
   moderate = accept => {
     const {
       acceptComment,
@@ -139,12 +135,14 @@ class Moderation extends Component {
 
     const comments = root[activeTab];
 
-    const activeTabCount = this.getActiveTabCount();
     const menuItems = Object.keys(queueConfig).map(queue => ({
       key: queue,
       name: queueConfig[queue].name,
       icon: queueConfig[queue].icon,
-      count: root[`${queue}Count`],
+      indicator:
+        ['premod', 'reported'].includes(queue) && root[queue].nodes.length > 0,
+      // TODO: Eventually we'll reintroduce counting
+      // count: root[`${props.queue}Count`]
     }));
 
     const slotPassthrough = {
@@ -189,7 +187,6 @@ class Moderation extends Component {
             loadMore={this.loadMore}
             commentBelongToQueue={this.props.commentBelongToQueue}
             isLoadingMore={this.state.isLoadingMore}
-            commentCount={activeTabCount}
             currentUserId={this.props.currentUser.id}
             viewUserDetail={viewUserDetail}
             selectCommentId={props.selectCommentId}

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import CountBadge from '../../../components/CountBadge';
+import Indicator from '../../../components/Indicator';
 import styles from './ModerationMenu.css';
 import { Icon } from 'coral-ui';
 import { Link } from 'react-router';
@@ -32,7 +32,7 @@ const ModerationMenu = ({ asset = {}, items, getModPath, activeTab }) => {
               activeClassName={styles.active}
             >
               <Icon name={queue.icon} className={styles.tabIcon} /> {queue.name}{' '}
-              <CountBadge count={queue.count} />
+              {queue.indicator && <Indicator />}
             </Link>
           ))}
         </div>

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

@@ -204,7 +204,7 @@ class ModerationQueue extends React.Component {
   }
 
   componentDidUpdate(prev) {
-    const { commentCount, selectedCommentId } = this.props;
+    const { selectedCommentId, hasNextPage } = this.props;
 
     const switchedToMultiMode = prev.singleView && !this.props.singleView;
     const switchedMode = prev.singleView !== this.props.singleView;
@@ -212,7 +212,6 @@ class ModerationQueue extends React.Component {
       prev.selectedCommentId !== selectedCommentId && selectedCommentId;
     const moderatedLastComment =
       prev.comments.length > 0 && this.getCommentCountWithoutDagling() === 0;
-    const hasMoreComment = commentCount > 0;
 
     if (switchedToMultiMode) {
       // Reflow virtual list.
@@ -223,7 +222,7 @@ class ModerationQueue extends React.Component {
       this.scrollToSelectedComment();
     }
 
-    if (moderatedLastComment && hasMoreComment) {
+    if (moderatedLastComment && hasNextPage) {
       this.props.loadMore();
     }
   }
@@ -240,10 +239,7 @@ class ModerationQueue extends React.Component {
     const index = view.findIndex(
       ({ id }) => id === this.props.selectedCommentId
     );
-    if (
-      index === view.length - 1 &&
-      this.getCommentCountWithoutDagling() !== this.props.commentCount
-    ) {
+    if (index === view.length - 1 && this.props.hasNextPage) {
       await this.props.loadMore();
       this.selectDown();
       return;
@@ -467,7 +463,6 @@ ModerationQueue.propTypes = {
   acceptComment: PropTypes.func.isRequired,
   commentBelongToQueue: PropTypes.func.isRequired,
   cleanUpQueue: PropTypes.func.isRequired,
-  commentCount: PropTypes.number.isRequired,
   loadMore: PropTypes.func.isRequired,
   singleView: PropTypes.bool,
   isLoadingMore: PropTypes.bool,

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

@@ -314,11 +314,11 @@ class ModerationContainer extends Component {
 
     const currentQueueConfig = Object.assign({}, this.props.queueConfig);
 
-    if (premodEnabled && root.newCount === 0) {
+    if (premodEnabled && root.new.nodes.length === 0) {
       delete currentQueueConfig.new;
     }
 
-    if (!premodEnabled && root.premodCount === 0) {
+    if (!premodEnabled && root.premod.nodes.length === 0) {
       delete currentQueueConfig.premod;
     }
 
@@ -402,7 +402,7 @@ const COMMENT_RESET_SUBSCRIPTION = gql`
 
 const LOAD_MORE_QUERY = gql`
   query CoralAdmin_Moderation_LoadMore($limit: Int = 10, $cursor: Cursor, $sortOrder: SORT_ORDER, $asset_id: ID, $tags:[String!], $statuses:[COMMENT_STATUS!], $action_type: ACTION_TYPE) {
-    comments(query: {limit: $limit, cursor: $cursor, asset_id: $asset_id, statuses: $statuses, sortOrder: $sortOrder, action_type: $action_type, tags: $tags}) {
+    comments(query: {limit: $limit, cursor: $cursor, asset_id: $asset_id, statuses: $statuses, sortOrder: $sortOrder, action_type: $action_type, tags: $tags, excludeDeleted: true}) {
       nodes {
         ...${getDefinitionName(Comment.fragments.comment)}
       }
@@ -456,7 +456,11 @@ const withModQueueQuery = withQuery(
       }
     `
     )}
-    ${Object.keys(queueConfig).map(
+    ${
+      ''
+      /*
+     TODO: eventually we'll reintroduce counting..
+     Object.keys(queueConfig).map(
       queue => `
       ${queue}Count: commentCount(query: {
         excludeDeleted: true,
@@ -478,7 +482,8 @@ const withModQueueQuery = withQuery(
         asset_id: $asset_id,
       })
     `
-    )}
+    )*/
+    }
     asset(id: $asset_id) @skip(if: $allAssets) {
       id
       title

client/coral-auth-callback/src/index.js

@@ -3,32 +3,36 @@ import { getStaticConfiguration } from 'coral-framework/services/staticConfigura
 import { createPostMessage } from 'coral-framework/services/postMessage';
 
 document.addEventListener('DOMContentLoaded', () => {
-  try {
-    const staticConfig = getStaticConfiguration();
-    const { STATIC_ORIGIN: origin } = staticConfig;
-    const postMessage = createPostMessage(origin);
+  const staticConfig = getStaticConfiguration();
+  const { STATIC_ORIGIN: origin } = staticConfig;
+  const postMessage = createPostMessage(origin);
 
-    // Get the auth element and parse it as JSON by decoding it.
-    const auth = document.getElementById('auth');
-    const doc = document.implementation.createHTMLDocument('');
-    doc.body.innerHTML = auth.innerText;
+  // Get the auth element and parse it as JSON by decoding it.
+  const auth = document.getElementById('auth');
+  const doc = document.implementation.createHTMLDocument('');
+  doc.body.innerHTML = auth.innerText;
 
-    // Auth state is contained within the node.
-    const { err, data } = JSON.parse(doc.body.textContent);
-    if (err) {
-      // TODO: send back the error message.
-      console.error(err);
+  // Auth state is contained within the node.
+  const { err, data } = JSON.parse(doc.body.textContent);
+  if (err) {
+    const errDiv = document.createElement('div');
+    if (err.message) {
+      errDiv.innerText = `${err.name}: ${err.message}`;
     } else {
-      // The data will contain a user and a token.
-      const { user, token } = data;
-
-      // Send the state back.
-      postMessage.post(HANDLE_SUCCESSFUL_LOGIN, { user, token });
+      errDiv.innerText = JSON.stringify(err);
     }
-  } finally {
-    // Always close the window.
-    setTimeout(() => {
-      window.close();
-    }, 50);
+    document.body.appendChild(errDiv);
+    throw err;
   }
+
+  // The data will contain a user and a token.
+  const { user, token } = data;
+
+  // Send the state back.
+  postMessage.post(HANDLE_SUCCESSFUL_LOGIN, { user, token });
+
+  // Close the window when all went well.
+  setTimeout(() => {
+    window.close();
+  }, 50);
 });

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

@@ -745,10 +745,21 @@ export default class Comment extends React.Component {
 
     const id = `c_${comment.id}`;
 
+    // props that are passed down the slots.
+    const slotPassthrough = {
+      action: 'deleted',
+      comment,
+    };
+
     return (
       <div className={rootClassName} id={id}>
         {isCommentDeleted(comment) ? (
-          <CommentTombstone action="deleted" />
+          <Slot
+            fill="commentTombstone"
+            defaultComponent={CommentTombstone}
+            size={1}
+            passthrough={slotPassthrough}
+          />
         ) : (
           <div>
             {this.renderComment()}

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

@@ -39,6 +39,7 @@ class CommentTombstone extends React.Component {
 
 CommentTombstone.propTypes = {
   action: PropTypes.string,
+  comment: PropTypes.object,
   onUndo: PropTypes.func,
 };
 

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

@@ -4,6 +4,7 @@ import StreamError from './StreamError';
 import Comment from '../containers/Comment';
 import BannedAccount from '../../../components/BannedAccount';
 import ChangeUsername from '../containers/ChangeUsername';
+import Markdown from 'coral-framework/components/Markdown';
 import Slot from 'coral-framework/components/Slot';
 import InfoBox from './InfoBox';
 import { can } from 'coral-framework/services/perms';
@@ -181,7 +182,9 @@ class Stream extends React.Component {
                 setActiveReplyBox={setActiveReplyBox}
                 activeReplyBox={activeReplyBox}
                 notify={notify}
-                disableReply={asset.isClosed}
+                disableReply={
+                  asset.isClosed || asset.settings.disableCommenting
+                }
                 postComment={postComment}
                 currentUser={currentUser}
                 postFlag={postFlag}
@@ -215,7 +218,7 @@ class Stream extends React.Component {
       currentUser,
     } = this.props;
     const { keepCommentBox } = this.state;
-    const open = !asset.isClosed;
+    const open = !(asset.isClosed || asset.settings.disableCommenting);
 
     const banned = get(currentUser, 'status.banned.status');
     const suspensionUntil = get(currentUser, 'status.suspension.until');
@@ -293,7 +296,13 @@ class Stream extends React.Component {
             )}
           </div>
         ) : (
-          <p>{asset.settings.closedMessage}</p>
+          <div>
+            {asset.isClosed ? (
+              <p>{asset.settings.closedMessage}</p>
+            ) : (
+              <Markdown content={asset.settings.disableCommentingMessage} />
+            )}
+          </div>
         )}
 
         <Slot fill="stream" passthrough={slotPassthrough} />

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

@@ -24,6 +24,7 @@ const slots = [
   'commentAuthorName',
   'commentAuthorTags',
   'commentTimestamp',
+  'commentTombstone',
   'commentContent',
 ];
 

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

@@ -434,6 +434,8 @@ const fragments = {
         questionBoxIcon
         closedTimeout
         closedMessage
+        disableCommenting
+        disableCommentingMessage
         charCountEnable
         charCount
         requireEmailConfirmation

client/coral-framework/graphql/mutations.js

@@ -116,7 +116,7 @@ export const withRemoveTag = withMutation(
             asset_id: assetId,
             item_type: itemType,
           },
-          o3timisticResponse: {
+          optimisticResponse: {
             removeTag: {
               __typename: 'ModifyTagResponse',
               errors: null,

client/coral-framework/hocs/withSetUsername.js

@@ -59,6 +59,7 @@ const withSetUsername = hoistStatics(WrappedComponent => {
         }
         const changeSet = { success: false, loading: false, error };
         this.setState(changeSet);
+        throw error;
       }
     };
 

client/coral-framework/services/postMessage.js

@@ -56,10 +56,10 @@ export function createPostMessage(origin, scope = 'client') {
       // Send the message.
       target.postMessage(msg, origin);
     },
-    subscribe: (handler, target = window) => {
+    subscribe(handler, target = window) {
       // If this handler is already attached to the target, detach it.
       if (has(listeners, [target, handler])) {
-        this.unsubscribeFromMessages(handler, target);
+        this.unsubscribe(handler, target);
       }
 
       // Wrap the listener with a origin check.
@@ -71,7 +71,7 @@ export function createPostMessage(origin, scope = 'client') {
       // Attach the listener to the target.
       target.addEventListener('message', listener);
     },
-    unsubscribe: (handler, target = window) => {
+    unsubscribe(handler, target = window) {
       if (!has(listeners, [target, handler])) {
         return;
       }

client/coral-framework/utils/index.js

@@ -273,3 +273,23 @@ export function translateError(error) {
   }
   return error.toString();
 }
+
+/**
+ * handlePopupAuth will optionally open a popup with the requested uri if the
+ * window is not already a popup.
+ *
+ * @param {String} uri the url to open the window? to
+ * @param {String} title the title of the new window? to open
+ * @param {String} features the features to use when opening a window?
+ */
+export function handlePopupAuth(
+  uri,
+  title = 'Login', // TODO: translate
+  features = 'menubar=0,resizable=0,width=500,height=550,top=200,left=500'
+) {
+  if (window.opener) {
+    window.location = uri;
+  } else {
+    window.open(uri, title, features);
+  }
+}