Merge pull request #1218 from coralproject/ci-fix

Disabling Firefox/Edge on E2E until fix pass

.nsprc

@@ -1,5 +1,6 @@
 {
   "exceptions": [
-    "https://nodesecurity.io/advisories/531"
+    "https://nodesecurity.io/advisories/531",
+    "https://nodesecurity.io/advisories/532"
   ]
-}
+}

app.js

@@ -1,14 +1,11 @@
 const express = require('express');
-const bodyParser = require('body-parser');
 const morgan = require('morgan');
 const path = require('path');
 const merge = require('lodash/merge');
 const helmet = require('helmet');
 const compression = require('compression');
-const cookieParser = require('cookie-parser');
 const {HELMET_CONFIGURATION} = require('./config');
 const {MOUNT_PATH} = require('./url');
-const {applyLocals} = require('./services/locals');
 const routes = require('./routes');
 const debug = require('debug')('talk:app');
 
@@ -36,12 +33,6 @@ app.use(helmet(merge(HELMET_CONFIGURATION, {
 // Compress the responses if appropriate.
 app.use(compression());
 
-// Parse the cookies on the request.
-app.use(cookieParser());
-
-// Parse the body json if it's there.
-app.use(bodyParser.json());
-
 //==============================================================================
 // VIEW CONFIGURATION
 //==============================================================================
@@ -53,9 +44,6 @@ app.set('view engine', 'ejs');
 // ROUTES
 //==============================================================================
 
-// Add the locals to the app renderer.
-applyLocals(app.locals);
-
 debug(`mounting routes on the ${MOUNT_PATH} path`);
 
 // Actually apply the routes.

bin/cli-jobs

@@ -12,7 +12,7 @@ const mongoose = require('../services/mongoose');
 const kue = require('../services/kue');
 
 util.onshutdown([
-  () => mongoose.disconnect()
+  () => mongoose.disconnect(),
 ]);
 
 /**
@@ -20,17 +20,17 @@ util.onshutdown([
  */
 function processJobs() {
 
-  // Start the scraper processor.
-  scraper.process();
-
-  // Start the mail processor.
-  mailer.process();
-
   // The scraper only needs to shutdown when the scraper has actually been
   // started.
   util.onshutdown([
     () => kue.Task.shutdown()
   ]);
+
+  // Start the scraper processor.
+  scraper.process();
+
+  // Start the mail processor.
+  mailer.process();
 }
 
 /**
@@ -48,22 +48,13 @@ function removeJob(job) {
   }));
 }
 
-/**
- * Removes the jobs passed in and returns a promise.
- * @param  {Array} jobs array of jobs
- * @return {Promise}
- */
-function removeJobs(jobs) {
-  return Promise.all(jobs.map(removeJob));
-}
-
 /**
  * Get the top n jobs with a specific state.
  * @param  {String} [state='complete'] state to list jobs by
  * @param  {Number} limit              limit of jobs to load
  * @return {Promise}
  */
-function rangeJobsByState(state = 'complete', limit) {
+function rangeJobsByState(state, limit) {
   return new Promise((resolve, reject) => {
     kue.Job.rangeByState(state, 0, limit, 'asc', (err, jobs) => {
       if (err) {
@@ -75,22 +66,52 @@ function rangeJobsByState(state = 'complete', limit) {
   });
 }
 
+async function getJobBatch(n, includeStuck) {
+  let jobs = [];
+
+  jobs = await rangeJobsByState('complete', n);
+
+  if (includeStuck) {
+    jobs = jobs.concat(await rangeJobsByState('failed', n));
+  }
+
+  return jobs;
+}
+
 /**
  * Cleans up the jobs that are in the queue.
  */
 async function cleanupJobs(options) {
+
+  // The scraper only needs to shutdown when the scraper has actually been
+  // started.
+  util.onshutdown([
+    () => kue.Task.shutdown()
+  ]);
+
   const n = 100;
 
   try {
-    const joblists = await Promise.all([
-      rangeJobsByState('complete', n),
-      options.stuck ? rangeJobsByState('failed', n) : false
-    ]);
 
-    await joblists.filter((jobs) => jobs).map(removeJobs);
+    // Connect to redis by establishing a queue.
+    kue.Task.connect();
+
+    let jobCount = 0;
+    let jobs = await getJobBatch(n, options.stuck);
+
+    while (jobs.length > 0) {
+
+      // Remove all the jobs.
+      await Promise.all(jobs.map((job) => removeJob(job)));
+
+      jobCount += jobs.length;
+
+      // Get the next batch of jobs.
+      jobs = await getJobBatch(n, options.stuck);
+    }
 
     util.shutdown();
-    console.log('Removed old jobs');
+    console.log(`Removed ${jobCount} jobs`);
   } catch (err) {
     console.error(err);
     util.shutdown(1);

bin/cli-serve

@@ -1,6 +1,7 @@
 #!/usr/bin/env node
 
 const program = require('./commander');
+const util = require('./util');
 const serve = require('../serve');
 
 //==============================================================================
@@ -13,5 +14,8 @@ program
   .parse(process.argv);
 
 // Start serving.
-serve({jobs: program.jobs, websockets: program.websockets});
+serve({jobs: program.jobs, websockets: program.websockets}).catch((err) => {
+  console.error(err);
+  util.shutdown(1);
+});
 

bin/cli-users

@@ -8,10 +8,13 @@ const program = require('./commander');
 const inquirer = require('inquirer');
 const UsersService = require('../services/users');
 const UserModel = require('../models/user');
+const CommentModel = require('../models/comment');
+const ActionModel = require('../models/action');
 const USER_ROLES = require('../models/enum/user_roles');
 const mongoose = require('../services/mongoose');
 const util = require('./util');
 const Table = require('cli-table');
+const databaseVerifications = require('./verifications/database');
 
 const validateRequired = (msg = 'Field is required', len = 1) => (input) => {
   if (input && input.length >= len) {
@@ -122,26 +125,48 @@ async function createUser(options) {
 
   } catch (err) {
     console.error(err);
-    util.shutdown();
+    util.shutdown(1);
   }
 }
 
 /**
  * Deletes a user.
  */
-function deleteUser(userID) {
-  UserModel
-    .findOneAndRemove({
-      id: userID
-    })
-    .then(() => {
-      console.log('Deleted user');
-      util.shutdown();
-    })
-    .catch((err) => {
-      console.error(err);
-      util.shutdown();
-    });
+async function deleteUser(userID) {
+
+  try {
+
+    // Find the user we're removing.
+    const user = await UserModel.findOne({id: userID});
+    if (!user) {
+      throw new Error(`user with id ${userID} not found`);
+    }
+
+    // Remove all the user's actions.
+    await ActionModel
+      .where({user_id: user.id})
+      .setOptions({multi: true})
+      .remove();
+
+    // Remove all the user's comments.
+    await CommentModel
+      .where({author_id: user.id})
+      .setOptions({multi: true})
+      .remove();
+
+    // Update the counts that might have changed.
+    for (const verification of databaseVerifications) {
+      await verification({fix: true, limit: Infinity, batch: 1000});
+    }
+
+    // Remove the user.
+    await user.remove();
+
+    util.shutdown();
+  } catch (err) {
+    console.error(err);
+    util.shutdown(1);
+  }
 }
 
 /**

client/coral-admin/src/AppRouter.js

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import {Router, Route, IndexRedirect, IndexRoute} from 'react-router';
 
 import Configure from 'routes/Configure';
-import Dashboard from 'routes/Dashboard';
 import Install from 'routes/Install';
 import Stories from 'routes/Stories';
 import Community from 'routes/Community/containers/Community';
@@ -18,7 +17,6 @@ const routes = (
       <IndexRedirect to='/admin/moderate' />
       <Route path='configure' component={Configure} />
       <Route path='stories' component={Stories} />
-      <Route path='dashboard' component={Dashboard} />
 
       {/* Community Routes */}
 

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

@@ -12,20 +12,14 @@ const CoralDrawer = ({handleLogout, auth = {}}) => (
     { auth && auth.user && can(auth.user, 'ACCESS_ADMIN') ?
       <div>
         <Navigation className={styles.nav}>
-          <IndexLink
-            className={cn('talk-admin-nav-dashboard', styles.navLink)}
-            to="/admin/dashboard"
-            activeClassName={styles.active}>
-            {t('configure.dashboard')}
-          </IndexLink>
           {
             can(auth.user, 'MODERATE_COMMENTS') && (
-              <Link
+              <IndexLink
                 className={cn('talk-admin-nav-moderate', styles.navLink)}   
                 to="/admin/moderate"
                 activeClassName={styles.active}>
                 {t('configure.moderate')}
-              </Link>
+              </IndexLink>
             )
           }
           <Link

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

@@ -23,23 +23,16 @@ const CoralHeader = ({
           {
             auth && auth.user && can(auth.user, 'ACCESS_ADMIN') ?
               <Navigation className={styles.nav}>
-                <IndexLink
-                  id='dashboardNav'
-                  className={cn('talk-admin-nav-dashboard', styles.navLink)}
-                  to="/admin/dashboard"
-                  activeClassName={styles.active}>
-                  {t('configure.dashboard')}
-                </IndexLink>
                 {
                   can(auth.user, 'MODERATE_COMMENTS') && (
-                    <Link
+                    <IndexLink
                       id='moderateNav'
                       className={cn('talk-admin-nav-moderate', styles.navLink)}
                       to="/admin/moderate"
                       activeClassName={styles.active}>
                       {t('configure.moderate')}
                       {(root.premodCount !== 0 || root.reportedCount !== 0) && <Indicator />}
-                    </Link>
+                    </IndexLink>
                   )
                 }
                 <Link
@@ -87,7 +80,7 @@ const CoralHeader = ({
                       </a>
                     </MenuItem>
                     <MenuItem>
-                      <a href="https://coralproject.net/contribute.html#other-ideas-and-bug-reports" target="_blank" rel="noopener noreferrer">
+                      <a href="https://support.coralproject.net" target="_blank" rel="noopener noreferrer">
                           Report a bug or give feedback
                       </a>
                     </MenuItem>

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

@@ -19,6 +19,6 @@ export default withQuery(gql`
   }
 `, {
     options: {
-      pollInterval: 5000
+      pollInterval: 10000
     }
   })(Header);

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

@@ -19,7 +19,7 @@ import update from 'immutability-helper';
 import {notify} from 'coral-framework/actions/notification';
 
 const commentConnectionFragment = gql`
-  fragment CoralAdmin_Moderation_CommentConnection on CommentConnection {
+  fragment CoralAdmin_UserDetail_CommentConnection on CommentConnection {
     nodes {
       ...${getDefinitionName(UserDetailComment.fragments.comment)}
     }
@@ -128,7 +128,7 @@ class UserDetailContainer extends React.Component {
 const LOAD_MORE_QUERY = gql`
   query CoralAdmin_Moderation_LoadMore($limit: Int = 10, $cursor: Cursor, $author_id: ID!, $statuses: [COMMENT_STATUS!]) {
     comments(query: {limit: $limit, cursor: $cursor, author_id: $author_id, statuses: $statuses}) {
-      ...CoralAdmin_Moderation_CommentConnection
+      ...CoralAdmin_UserDetail_CommentConnection
     }
   }
   ${commentConnectionFragment}
@@ -155,7 +155,7 @@ export const withUserDetailQuery = withQuery(gql`
       author_id: $author_id,
       statuses: $statuses
     }) {
-      ...CoralAdmin_Moderation_CommentConnection
+      ...CoralAdmin_UserDetail_CommentConnection
     }
     ...${getDefinitionName(UserDetailComment.fragments.root)}
     ${getSlotFragmentSpreads(slots, 'root')}

client/coral-admin/src/graphql/index.js

@@ -1,15 +1,5 @@
 import update from 'immutability-helper';
-import mapValues from 'lodash/mapValues';
-
-// Map nested object leaves. Array objects are considered leaves.
-function mapLeaves(o, mapper) {
-  return mapValues(o, (val) => {
-    if (typeof val === 'object' && !Array.isArray(val)) {
-      return mapLeaves(val, mapper);
-    }
-    return mapper(val);
-  });
-}
+import {mapLeaves} from 'coral-framework/utils';
 
 export default {
   mutations: {

client/coral-admin/src/reducers/dashboard.js

@@ -1,15 +0,0 @@
-// this is initialized here because
-// currently you have to reload the dashboard to get new stats
-// cleaner updates are planned in the future.
-const DASHBOARD_WINDOW_MINUTES = 5;
-let then = new Date();
-then.setMinutes(then.getMinutes() - DASHBOARD_WINDOW_MINUTES);
-
-const initialState = {
-  windowStart: then.toISOString(),
-  windowEnd: new Date().toISOString(),
-};
-
-export default function dashboard (state = initialState, _action) {
-  return state;
-}

client/coral-admin/src/reducers/index.js

@@ -1,6 +1,5 @@
 import auth from './auth';
 import stories from './stories';
-import dashboard from './dashboard';
 import configure from './configure';
 import community from './community';
 import moderation from './moderation';
@@ -13,7 +12,6 @@ import userDetail from './userDetail';
 export default {
   auth,
   banUserDialog,
-  dashboard,
   configure,
   suspendUserDialog,
   userDetail,

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

@@ -39,7 +39,7 @@ class ModerationSettings extends React.Component {
   };
 
   render() {
-    const {settings, data, root} = this.props;
+    const {settings, data, root, updatePending, errors} = this.props;
 
     return (
       <ConfigurePage
@@ -74,6 +74,8 @@ class ModerationSettings extends React.Component {
           fill="adminModerationSettings"
           data={data}
           queryData={{root, settings}}
+          updatePending={updatePending}
+          errors={errors}
         />
       </ConfigurePage>
     );
@@ -82,6 +84,7 @@ class ModerationSettings extends React.Component {
 
 ModerationSettings.propTypes = {
   updatePending: PropTypes.func.isRequired,
+  errors: PropTypes.object.isRequired,
   data: PropTypes.object.isRequired,
   root: PropTypes.object.isRequired,
   settings: PropTypes.object.isRequired,

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

@@ -53,3 +53,6 @@
 
 
 
+.autoCloseWrapper {
+  display: flex;
+}

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

@@ -100,7 +100,7 @@ class StreamSettings extends React.Component {
   };
 
   render() {
-    const {settings, data, root, errors} = this.props;
+    const {settings, data, root, errors, updatePending} = this.props;
 
     return (
       <ConfigurePage
@@ -180,22 +180,24 @@ class StreamSettings extends React.Component {
           onCheckbox={this.updateAutoClose}
           title={t('configure.close_after')}
         >
-          <Textfield
-            type='number'
-            pattern='[0-9]+'
-            style={{width: 50}}
-            onChange={this.updateClosedTimeout}
-            value={getTimeoutAmount(settings.closedTimeout)}
-            label={t('configure.closed_comments_label')} />
-          <div className={styles.configTimeoutSelect}>
-            <SelectField
-              label="comments closed time window"
-              value={getTimeoutMeasure(settings.closedTimeout)}
-              onChange={this.updateClosedTimeoutMeasure}>
-              <Option value={'hours'}>{t('configure.hours')}</Option>
-              <Option value={'days'}>{t('configure.days')}</Option>
-              <Option value={'weeks'}>{t('configure.weeks')}</Option>
-            </SelectField>
+          <div className={styles.autoCloseWrapper}>
+            <Textfield
+              type='number'
+              pattern='[0-9]+'
+              style={{width: 50}}
+              onChange={this.updateClosedTimeout}
+              value={getTimeoutAmount(settings.closedTimeout)}
+              label={t('configure.closed_comments_label')} />
+            <div className={styles.configTimeoutSelect}>
+              <SelectField
+                label="comments closed time window"
+                value={getTimeoutMeasure(settings.closedTimeout)}
+                onChange={this.updateClosedTimeoutMeasure}>
+                <Option value={'hours'}>{t('configure.hours')}</Option>
+                <Option value={'days'}>{t('configure.days')}</Option>
+                <Option value={'weeks'}>{t('configure.weeks')}</Option>
+              </SelectField>
+            </div>
           </div>
         </ConfigureCard>
         {/* the above card should be the last one if at all possible because of z-index issues with the selects */}
@@ -203,6 +205,8 @@ class StreamSettings extends React.Component {
           fill="adminStreamSettings"
           data={data}
           queryData={{root, settings}}
+          updatePending={updatePending}
+          errors={errors}
         />
       </ConfigurePage>
     );

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

@@ -31,7 +31,7 @@ class TechSettings extends React.Component {
   };
 
   render() {
-    const {settings, data, root} = this.props;
+    const {settings, data, root, errors, updatePending} = this.props;
     return (
       <ConfigurePage
         title={t('configure.tech_settings')}
@@ -51,6 +51,8 @@ class TechSettings extends React.Component {
           fill="adminTechSettings"
           data={data}
           queryData={{root, settings}}
+          updatePending={updatePending}
+          errors={errors}
         />
       </ConfigurePage>
     );
@@ -59,6 +61,7 @@ class TechSettings extends React.Component {
 
 TechSettings.propTypes = {
   updatePending: PropTypes.func.isRequired,
+  errors: PropTypes.object.isRequired,
   data: PropTypes.object.isRequired,
   root: PropTypes.object.isRequired,
   settings: PropTypes.object.isRequired,

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

@@ -2,38 +2,20 @@ import React, {Component} from 'react';
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
 import {compose, gql} from 'react-apollo';
-import withQuery from 'coral-framework/hocs/withQuery';
+import {withQuery, withMergedSettings} from 'coral-framework/hocs';
 import {Spinner} from 'coral-ui';
 import {notify} from 'coral-framework/actions/notification';
 import PropTypes from 'prop-types';
-import assignWith from 'lodash/assignWith';
 import {withUpdateSettings} from 'coral-framework/graphql/mutations';
 import {getErrorMessages, getDefinitionName} from 'coral-framework/utils';
 import StreamSettings from './StreamSettings';
 import TechSettings from './TechSettings';
 import ModerationSettings from './ModerationSettings';
 import {clearPending, setActiveSection} from '../../../actions/configure';
-
 import Configure from '../components/Configure';
 
-// Like lodash merge but does not recurse into arrays.
-const mergeExcludingArrays = (objValue, srcValue) => {
-  if (typeof srcValue === 'object' && !Array.isArray(srcValue)) {
-    return assignWith({}, objValue, srcValue, mergeExcludingArrays);
-  }
-  return srcValue;
-};
-
 class ConfigureContainer extends Component {
 
-  // Merge current settings with pending settings.
-  getMergedSettings = (props = this.props) => {
-    return assignWith({}, props.root.settings, props.pending, mergeExcludingArrays);
-  }
-
-  // Cached merged settings.
-  mergedSettings = this.getMergedSettings();
-
   savePending = async () => {
     try {
       await this.props.updateSettings(this.props.pending);
@@ -44,14 +26,6 @@ class ConfigureContainer extends Component {
     }
   };
 
-  componentWillReceiveProps(nextProps) {
-
-    // Recalculate merged settings when necessary.
-    if (this.props.root.settings !== nextProps.root.settings || this.props.pending !== nextProps.pending) {
-      this.mergedSettings = this.getMergedSettings(nextProps);
-    }
-  }
-
   render () {
     if(this.props.data.loading) {
       return <Spinner/>;
@@ -62,7 +36,7 @@ class ConfigureContainer extends Component {
       auth={this.props.auth}
       data={this.props.data}
       root={this.props.root}
-      settings={this.mergedSettings}
+      settings={this.props.mergedSettings}
       canSave={this.props.canSave}
       savePending={this.savePending}
       setActiveSection={this.props.setActiveSection}
@@ -112,6 +86,7 @@ export default compose(
   withUpdateSettings,
   withConfigureQuery,
   connect(mapStateToProps, mapDispatchToProps),
+  withMergedSettings('root.settings', 'pending', 'mergedSettings'),
 )(ConfigureContainer);
 
 ConfigureContainer.propTypes = {
@@ -124,5 +99,6 @@ ConfigureContainer.propTypes = {
   root: PropTypes.object.isRequired,
   canSave: PropTypes.bool.isRequired,
   pending: PropTypes.object.isRequired,
+  mergedSettings: PropTypes.object.isRequired,
   activeSection: PropTypes.string.isRequired,
 };

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

@@ -10,6 +10,10 @@ const slots = [
   'adminModerationSettings',
 ];
 
+const mapStateToProps = (state) => ({
+  errors: state.configure.errors,
+});
+
 const mapDispatchToProps = (dispatch) =>
   bindActionCreators({
     updatePending,
@@ -36,5 +40,5 @@ export default compose(
       }
     `
   }),
-  connect(null, mapDispatchToProps),
+  connect(mapStateToProps, mapDispatchToProps),
 )(ModerationSettings);

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

@@ -10,6 +10,10 @@ const slots = [
   'adminTechSettings',
 ];
 
+const mapStateToProps = (state) => ({
+  errors: state.configure.errors,
+});
+
 const mapDispatchToProps = (dispatch) =>
   bindActionCreators({
     updatePending,
@@ -33,5 +37,5 @@ export default compose(
       }
     `
   }),
-  connect(null, mapDispatchToProps),
+  connect(mapStateToProps, mapDispatchToProps),
 )(TechSettings);

client/coral-admin/src/routes/Dashboard/components/ActivityWidget.js

@@ -1,47 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {Link} from 'react-router';
-import styles from './Widget.css';
-import t from 'coral-framework/services/i18n';
-
-const ActivityWidget = ({assets}) => {
-  return (
-    <div className={styles.widget}>
-      <h2 className={styles.heading}>{t('dashboard.most_conversations')}</h2>
-      <div className={styles.widgetHead}>
-        <p>{t('streams.article')}</p>
-        <p>{t('dashboard.comment_count')}</p>
-      </div>
-      <div className={styles.widgetTable}>
-        {
-          assets.length
-            ? assets.map((asset) => {
-              return (
-                <div className={styles.rowLinkify} key={asset.id}>
-                  <Link className={styles.linkToModerate} to={`/admin/moderate/${asset.id}`}>Moderate</Link>
-                  <p className={styles.widgetCount}>{asset.commentCount}</p>
-                  <a className={styles.linkToAsset} href={`${asset.url}`} target="_blank">
-                    <p className={styles.assetTitle}>{asset.title}</p>
-                  </a>
-                  <p className={styles.lede}>{asset.author} — Published: {new Date(asset.created_at).toLocaleDateString()}</p>
-                </div>
-              );
-            })
-            : <div className={styles.rowLinkify}>{t('dashboard.no_activity')}</div>
-        }
-      </div>
-    </div>
-  );
-};
-
-ActivityWidget.propTypes = {
-  assets: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string,
-    url: PropTypes.string,
-    commentCount: PropTypes.number,
-    author: PropTypes.string,
-    created_at: PropTypes.string
-  })).isRequired
-};
-
-export default ActivityWidget;

client/coral-admin/src/routes/Dashboard/components/CountdownTimer.js

@@ -1,93 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styles from './Dashboard.css';
-import {Icon} from 'coral-ui';
-
-import t from 'coral-framework/services/i18n';
-const refreshIntervalSeconds = 60 * 5;
-
-// TODO: refactor out storage code into redux.
-
-class CountdownTimer extends React.Component {
-
-  static contextTypes = {
-    storage: PropTypes.object,
-  };
-
-  static propTypes = {
-    handleTimeout: PropTypes.func.isRequired
-  }
-
-  constructor (props, context) {
-    super(props, context);
-    const {storage} = context;
-    try {
-      if (storage && storage.getItem('coral:dashboardNote') === null) {
-        storage.setItem('coral:dashboardNote', 'show');
-      }
-    } catch (e) {
-
-      // above will fail in Private Mode in some browsers.
-    }
-
-    this.state = {
-      secondsUntilRefresh: refreshIntervalSeconds,
-      dashboardNote: (storage && storage.getItem('coral:dashboardNote')) || 'show'
-    };
-  }
-
-  componentWillMount () {
-    this.interval = setInterval(() => { // the countdown timer
-      let nextCount = this.state.secondsUntilRefresh - 1;
-      if (nextCount < 0) {
-        nextCount = refreshIntervalSeconds;
-        return this.props.handleTimeout();
-      }
-      this.setState({secondsUntilRefresh: nextCount});
-    }, 1000);
-  }
-
-  componentWillUnmount () {
-    window.clearInterval(this.interval);
-  }
-
-  formatTime = () => {
-    const minutes = Math.floor(this.state.secondsUntilRefresh / 60);
-    let seconds = (this.state.secondsUntilRefresh % 60).toString();
-    if (seconds.length < 2) {
-      seconds = `0${seconds}`;
-    }
-
-    return `${minutes}:${seconds}`;
-  }
-
-  dismissNote = () => {
-    const {storage} = this.context;
-    try {
-      if (storage) {
-        storage.setItem('coral:dashboardNote', 'hide');
-      }
-    } catch (e) {
-
-      // when setItem fails in Safari Private mode
-      this.setState({dashboardNote: 'hide'});
-    }
-  }
-
-  render () {
-    const {storage} = this.context;
-    const hideReloadNote = (storage && storage.getItem('coral:dashboardNote') === 'hide') ||
-      this.state.dashboardNote === 'hide'; // for Safari Incognito
-    return (
-      <p
-        style={{display: hideReloadNote ? 'none' : 'block'}}
-        className={styles.autoUpdate}
-        onClick={this.dismissNote}>
-        <b>×</b>
-        <Icon name='timer' /> <strong>{t('dashboard.next_update', this.formatTime())}</strong> {t('dashboard.auto_update')}
-      </p>
-    );
-  }
-}
-
-export default CountdownTimer;

client/coral-admin/src/routes/Dashboard/components/Dashboard.css

@@ -1,40 +0,0 @@
-/**
- * @TODO: deprecated as this file contains styles from multiple components. Please refactor.
- */
-
-.Dashboard {
-  display: flex;
-  max-width: 1280px;
-  margin: 0 auto;
-}
-
-.heading {
-  margin: 0;
-  font-size: 1.5rem;
-  font-weight: bold;
-}
-
-.autoUpdate {
-  background-color: #d5d5d5;
-  padding: 3px 10px 10px 10px;
-  margin-bottom: 0;
-
-  i {
-    position: relative;
-    top: 7px;
-  }
-
-  b {
-    float: right;
-    border-radius: 20px;
-    cursor: pointer;
-    background-color: #c0c0c0;
-    width: 30px;
-    height: 30px;
-    text-align: center;
-    top: 4px;
-    position: relative;
-    line-height: 1.7em;
-    font-size: 1.3em;
-  }
-}

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

@@ -1,15 +0,0 @@
-import React from 'react';
-import FlagWidget from './FlagWidget';
-import ActivityWidget from './ActivityWidget';
-import CountdownTimer from './CountdownTimer';
-import styles from './Dashboard.css';
-
-export default ({root: {assetsByActivity, assetsByFlag}, reloadData}) => (
-  <div>
-    <CountdownTimer handleTimeout={reloadData} />
-    <div className={styles.Dashboard}>
-      <FlagWidget assets={assetsByFlag} />
-      <ActivityWidget assets={assetsByActivity} />
-    </div>
-  </div>
-);

client/coral-admin/src/routes/Dashboard/components/FlagWidget.js

@@ -1,54 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {Link} from 'react-router';
-import styles from './Widget.css';
-
-import t from 'coral-framework/services/i18n';
-
-const FlagWidget = ({assets}) => {
-
-  return (
-    <div className={styles.widget}>
-      <h2 className={styles.heading}>{t('dashboard.most_flags')}</h2>
-      <div className={styles.widgetHead}>
-        <p>{t('streams.article')}</p>
-        <p>{t('dashboard.flags')}</p>
-      </div>
-      <div className={styles.widgetTable}>
-        {
-          assets.length
-            ? assets.map((asset) => {
-              let flagSummary = null;
-              if (asset.action_summaries) {
-                flagSummary = asset.action_summaries.find((s) => s.__typename === 'FlagAssetActionSummary');
-              }
-
-              return (
-                <div className={styles.rowLinkify} key={asset.id}>
-                  <Link className={styles.linkToModerate} to={`/admin/moderate/reported/${asset.id}`}>Moderate</Link>
-                  <p className={styles.widgetCount}>{flagSummary ? flagSummary.actionCount : 0}</p>
-                  <a className={styles.linkToAsset} href={`${asset.url}`} target="_blank">
-                    <p className={styles.assetTitle}>{asset.title}</p>
-                  </a>
-                  <p className={styles.lede}>{asset.author} — Published: {new Date(asset.created_at).toLocaleDateString()}</p>
-                </div>
-              );
-            })
-            : <div className={styles.rowLinkify}>{t('dashboard.no_flags')}</div>
-        }
-      </div>
-    </div>
-  );
-};
-
-FlagWidget.propTypes = {
-  assets: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string,
-    url: PropTypes.string,
-    action_summaries: PropTypes.array,
-    author: PropTypes.string,
-    created_at: PropTypes.string
-  })).isRequired
-};
-
-export default FlagWidget;

client/coral-admin/src/routes/Dashboard/components/LikeWidget.js

@@ -1,49 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {Link} from 'react-router';
-import styles from './Widget.css';
-import t from 'coral-framework/services/i18n';
-
-const LikeWidget = ({assets}) => {
-
-  return (
-    <div className={styles.widget}>
-      <h2 className={styles.heading}>Articles with the most likes</h2>
-      <div className={styles.widgetHead}>
-        <p>{t('streams.article')}</p>
-        <p>{t('modqueue.likes')}</p>
-      </div>
-      <div className={styles.widgetTable}>
-        {
-          assets.length
-            ? assets.map((asset) => {
-              const likeSummary = asset.action_summaries.find((s) => s.type === 'LikeAssetActionSummary');
-              return (
-                <div className={styles.rowLinkify} key={asset.id}>
-                  <Link className={styles.linkToModerate} to={`/admin/moderate/${asset.id}`}>Moderate</Link>
-                  <p className={styles.widgetCount}>{likeSummary ? likeSummary.actionCount : 0}</p>
-                  <a className={styles.linkToAsset} href={`${asset.url}`} target="_blank">
-                    <p className={styles.assetTitle}>{asset.title}</p>
-                  </a>
-                  <p className={styles.lede}>{asset.author} — Published: {new Date(asset.created_at).toLocaleDateString()}</p>
-                </div>
-              );
-            })
-            : <div className={styles.rowLinkify}>{t('dashboard.no_likes')}</div>
-        }
-      </div>
-    </div>
-  );
-};
-
-LikeWidget.propTypes = {
-  assets: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string,
-    url: PropTypes.string,
-    action_summaries: PropTypes.array,
-    author: PropTypes.string,
-    created_at: PropTypes.string
-  })).isRequired
-};
-
-export default LikeWidget;

client/coral-admin/src/routes/Dashboard/components/MostLikedCommentsWidget.js

@@ -1,38 +0,0 @@
-import React from 'react';
-
-import ModerationQueue from 'coral-admin/src/containers/ModerationQueue/ModerationQueue';
-import styles from './Widget.css';
-import BanUserDialog from 'coral-admin/src/components/BanUserDialog';
-import t from 'coral-framework/services/i18n';
-
-const MostLikedCommentsWidget = (props) => {
-  const {
-    comments,
-    moderation,
-    settings,
-    handleBanUser,
-    showBanUserDialog,
-    hideBanUserDialog,
-    acceptComment,
-    rejectComment
-  } = props;
-
-  return (
-    <div className={styles.widget}>
-      <h2 className={styles.heading}>{t('most_liked_comments')}</h2>
-      <ModerationQueue
-        comments={comments}
-        suspectWords={settings.wordlist.suspect}
-        showBanUserDialog={showBanUserDialog}
-        acceptComment={acceptComment}
-        rejectComment={rejectComment} />
-      <BanUserDialog
-        open={moderation.banDialog}
-        user={moderation.user}
-        handleClose={hideBanUserDialog}
-        handleBanUser={handleBanUser} />
-    </div>
-  );
-};
-
-export default MostLikedCommentsWidget;

client/coral-admin/src/routes/Dashboard/components/Widget.css

@@ -1,110 +0,0 @@
-/**
- * @TODO: deprecated as this file contains styles from multiple components. Please refactor.
- */
-
-:root {
-  --row-height: 60px;
-}
-
-.widget {
-  margin: 10px 5px 5px 5px;
-  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
-  flex: 1;
-  background-color: white;
-  box-sizing: border-box;
-}
-
-.widget * {
-  box-sizing: border-box;
-}
-
-.heading {
-  margin: 0;
-  padding-left: 10px;
-  font-size: 1.3rem;
-  font-weight: 600;
-  color: #2c2c2c;
-}
-
-.widgetTable {
-  height: calc(var(--row-height) * 10);
-}
-
-.widgetTable + div:after {
-  content: '';
-  clear: both;
-  display: block;
-}
-
-.widgetHead p {
-  color: #2c2c2c;
-  font-weight: 500;
-  padding: 10px;
-  text-align: left;
-  text-transform: capitalize;
-  display: inline-block;
-  box-sizing: border-box;
-  margin-bottom: 0;
-}
-
-.widgetHead p:last-child {
-  float: right;
-  margin-right: 100px;
-}
-
-.rowLinkify {
-  border-bottom: 1px solid lightgrey;
-  color: #555;
-  height: var(--row-height);
-  padding: 10px;
-  transition: background-color 200ms;
-}
-
-.rowLinkify:last-child {
-  border-bottom: none;
-}
-
-.rowLinkify:hover {
-  background-color: #f8f8f8;
-  pointer: default;
-}
-
-.linkToAsset {
-  display: inline-block;
-  text-decoration: none;
-}
-
-.linkToModerate {
-  background-color: #BDBDBD;
-  padding: 10px 14px;
-  text-decoration: none;
-  color: black;
-  float: right;
-  margin-left: 15px;
-  transition: background-color 200ms;
-}
-
-.linkToModerate:hover {
-  background-color: #9E9E9E;
-}
-
-.lede {
-  font-size: 0.9em;
-  color: #aaa;
-}
-
-.assetTitle {
-  color: #555;
-  text-decoration: none;
-  font-size: 1.2em;
-  font-weight: 500;
-  margin: 0;
-}
-
-.widgetCount {
-  color: #555;
-  font-size: 1.3em;
-  font-weight: 400;
-  float: right;
-  margin-top: 7px;
-}

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

@@ -1,65 +0,0 @@
-import React from 'react';
-import {connect} from 'react-redux';
-import Dashboard from '../components/Dashboard';
-import {compose,  gql} from 'react-apollo';
-import withQuery from 'coral-framework/hocs/withQuery';
-
-import {Spinner} from 'coral-ui';
-
-class DashboardContainer extends React.Component {
-
-  reloadData = () => {
-    this.props.data.refetch();
-  }
-
-  render () {
-    if (this.props.data.loading) {
-      return <Spinner />;
-    }
-    return <Dashboard {...this.props} reloadData={this.reloadData} />;
-  }
-}
-
-export const witDashboardQuery = withQuery(gql`
-  query CoralAdmin_Dashboard($from: Date!, $to: Date!) {
-    assetsByFlag: assetMetrics(from: $from, to: $to, sortBy: FLAG) {
-      ...CoralAdmin_Metrics
-    }
-    assetsByActivity: assetMetrics(from: $from, to: $to, sortBy: ACTIVITY) {
-      ...CoralAdmin_Metrics
-    }
-  }
-  fragment CoralAdmin_Metrics on Asset {
-    id
-    title
-    url
-    author
-    created_at
-    commentCount
-    action_summaries {
-      actionCount
-      actionableItemCount
-    }
-  }
-`, {
-    options: ({windowStart, windowEnd}) => {
-      return {
-        variables: {
-          from: windowStart,
-          to: windowEnd,
-        }
-      };
-    }
-  });
-
-const mapStateToProps = (state) => {
-  return {
-    windowStart: state.dashboard.windowStart,
-    windowEnd: state.dashboard.windowEnd,
-  };
-};
-
-export default compose(
-  connect(mapStateToProps),
-  witDashboardQuery,
-)(DashboardContainer);

client/coral-admin/src/routes/Dashboard/index.js

@@ -1 +0,0 @@
-export {default} from './containers/Dashboard.js';

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

@@ -138,7 +138,7 @@ class ModerationContainer extends Component {
       },
     ];
 
-    this.subscriptions = parameters.map((param) => this.props.data.subscribeToMore(param));
+    this.subscriptions = parameters.map((param) => this.props.data.subscribeToMoreThrottled(param));
   }
 
   unsubscribe() {

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

@@ -48,7 +48,7 @@ class Stories extends Component {
           <div className={styles.optionHeader}>{t('streams.filter_streams')}</div>
           <div className={styles.optionDetail}>{t('streams.stream_status')}</div>
           <RadioGroup
-            name='status filter'
+            name='statusFilter'
             value={filter}
             childContainer='div'
             onChange={onSettingChange('filter')}
@@ -60,7 +60,7 @@ class Stories extends Component {
           </RadioGroup>
           <div className={styles.optionHeader}>{t('streams.sort_by')}</div>
           <RadioGroup
-            name='sort by'
+            name='sortBy'
             value={asc}
             childContainer='div'
             onChange={onSettingChange('asc')}

client/coral-configure/components/CloseCommentsInfo.js

@@ -1,29 +0,0 @@
-import React from 'react';
-import {Button} from 'coral-ui';
-import PropTypes from 'prop-types';
-import t from 'coral-framework/services/i18n';
-
-const CloseCommentsInfo = ({status, onClick}) => (
-  status === 'open' ? (
-    <div className="close-comments-intro-wrapper">
-      <p>
-        {t('configure.open_stream_configuration')}
-      </p>
-      <Button onClick={onClick}>{t('configure.close_stream')}</Button>
-    </div>
-  ) : (
-    <div className="close-comments-intro-wrapper">
-      <p>
-        {t('configure.close_stream_configuration')}
-      </p>
-      <Button onClick={onClick}>{t('configure.open_stream')}</Button>
-    </div>
-  )
-);
-
-CloseCommentsInfo.propTypes = {
-  status: PropTypes.string,
-  onClick: PropTypes.func,
-};
-
-export default CloseCommentsInfo;

client/coral-configure/components/ConfigureCommentStream.js

@@ -1,71 +0,0 @@
-import React from 'react';
-import {Button, Checkbox} from 'coral-ui';
-import QuestionBoxBuilder from './QuestionBoxBuilder';
-import cn from 'classnames';
-
-import styles from './ConfigureCommentStream.css';
-
-import t from 'coral-framework/services/i18n';
-
-export default ({handleChange, handleApply, changed, ...props}) => (
-  <form onSubmit={handleApply}>
-    <div className={styles.wrapper}>
-      <div className={styles.container}>
-        <h3>{t('configure.title')}</h3>
-        <Button
-          type="submit"
-          className={cn(styles.apply, 'talk-embed-stream-configuration-submit-button')}
-          onChange={handleChange}
-          cStyle={changed ? 'green' : 'darkGrey'} >
-          {t('configure.apply')}
-        </Button>
-        <p>{t('configure.description')}</p>
-      </div>
-      <ul>
-        <li>
-          <Checkbox
-            className={styles.checkbox}
-            cStyle={changed ? 'green' : 'darkGrey'}
-            name="premod"
-            onChange={handleChange}
-            defaultChecked={props.premod}
-            info={{
-              title: t('configure.enable_premod'),
-              description: t('configure.enable_premod_description')
-            }} />
-        </li>
-        <li>
-          <Checkbox
-            className={styles.checkbox}
-            cStyle={changed ? 'green' : 'darkGrey'}
-            name="plinksenable"
-            onChange={handleChange}
-            defaultChecked={props.premodLinksEnable}
-            info={{
-              title: t('configure.enable_premod_links'),
-              description: t('configure.enable_premod_links_description')
-            }} />
-        </li>
-        <li>
-          <Checkbox
-            className={styles.checkbox}
-            cStyle={changed ? 'green' : 'darkGrey'}
-            name="qboxenable"
-            onChange={handleChange}
-            defaultChecked={props.questionBoxEnable}
-            info={{
-              title: t('configure.enable_questionbox'),
-              description: t('configure.enable_questionbox_description')
-            }} />
-          {
-            props.questionBoxEnable && <QuestionBoxBuilder
-              questionBoxIcon={props.questionBoxIcon}
-              questionBoxContent={props.questionBoxContent}
-              handleChange={handleChange}
-            />
-          }
-        </li>
-      </ul>
-    </div>
-  </form>
-);

client/coral-configure/components/Markdown.js

@@ -1,24 +0,0 @@
-import React, {PureComponent} from 'react';
-import PropTypes from 'prop-types';
-import marked from 'marked';
-
-const renderer = new marked.Renderer();
-
-// Set link target to `_parent` to work properly in an embed.
-renderer.link = (href, title, text) =>
-  `<a target="_parent" href="${href}" ${title ? `title="${title}"` : ''}>${text}</a>`;
-
-marked.setOptions({renderer});
-
-export default class Markdown extends PureComponent {
-  render() {
-    const {content, ...rest} = this.props;
-    const __html = marked(content);
-    return <div {...rest} dangerouslySetInnerHTML={{__html}} />;
-  }
-}
-
-Markdown.propTypes = {
-  content: PropTypes.string,
-};
-

client/coral-configure/components/QuestionBoxBuilder.css

@@ -1,45 +0,0 @@
-.qbBuilder {
-  margin-left: 50px;
-}
-
-.qbItemIconList {
-  padding: 0;
-  margin: 10px 0;
-}
-
-.qbItemIcon {
-  background: #F0F0F0;
-  width: 45px;
-  height: 45px;
-  font-size: 24px;
-  text-align: center;
-  line-height: 45px;
-  color: #252525;
-  border-radius: 3px;
-  display: inline-block;
-  overflow: hidden;
-  margin-right: 10px;
-  position: relative;
-  border: solid 2px #F0F0F0;
-  transition: border 0.3s cubic-bezier(.4,0,.2,1);
-}
-
-.qbItemIcon:hover {
-  cursor: pointer;
-}
-
-.qbItemIconActive {
-  border: solid 2px #00796B;
-}
-
-.defaultIcon {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-
-.qb {
-  margin: 10px 0;
-}

client/coral-configure/components/QuestionBoxBuilder.js

@@ -1,98 +0,0 @@
-import React from 'react';
-import QuestionBox from 'talk-plugin-questionbox/QuestionBox';
-import {Icon, Spinner} from 'coral-ui';
-import DefaultIcon from './DefaultIcon';
-import cn from 'classnames';
-import styles from './QuestionBoxBuilder.css';
-
-class QuestionBoxBuilder extends React.Component {
-  constructor() {
-    super();
-
-    this.state = {
-      loading: true
-    };
-  }
-
-  componentWillMount() {
-    this.loadEditor();
-  }
-
-  async loadEditor() {
-    const {default: MarkdownEditor} = await import('coral-framework/components/MarkdownEditor');
-
-    return this.setState({
-      loading : false,
-      MarkdownEditor
-    });
-  }
-
-  render() {
-    const {handleChange, questionBoxIcon, questionBoxContent} = this.props;
-    const {loading, MarkdownEditor} = this.state;
-
-    if (loading) {
-      return <Spinner/>;
-    }
-
-    return (
-      <div className={styles.qbBuilder}>
-        <h4>Include an Icon</h4>
-
-        <ul className={styles.qbItemIconList}>
-          <li className={cn(
-            styles.qbItemIcon,
-            {[styles.qbItemIconActive]: questionBoxIcon === 'default'}
-          )}
-          id="qboxicon"
-          onClick={handleChange}
-          data-icon="default" >
-            <DefaultIcon className={styles.defaultIcon} />
-          </li>
-          <li className={cn(
-            styles.qbItemIcon,
-            {[styles.qbItemIconActive]: questionBoxIcon === 'forum'}
-          )}
-          id="qboxicon"
-          onClick={handleChange}
-          data-icon="forum" >
-            <Icon name="forum" />
-          </li>
-          <li className={cn(
-            styles.qbItemIcon,
-            {[styles.qbItemIconActive]: questionBoxIcon === 'build'}
-          )}
-          id="qboxicon"
-          onClick={handleChange}
-          data-icon="build" >
-            <Icon name="build" />
-          </li>
-          <li className={cn(
-            styles.qbItemIcon,
-            {[styles.qbItemIconActive]: questionBoxIcon === 'format_quote'}
-          )}
-          id="qboxicon"
-          onClick={handleChange}
-          data-icon="format_quote" >
-            <Icon name="format_quote" />
-          </li>
-        </ul>
-
-        <QuestionBox
-          className={styles.qb}
-          enable={true}
-          icon={questionBoxIcon}
-          content={questionBoxContent}
-        />
-
-        <MarkdownEditor
-          value={questionBoxContent}
-          onChange={(value) => handleChange({}, {questionBoxContent: value})}
-        />
-
-      </div>
-    );
-  }
-}
-
-export default QuestionBoxBuilder;

client/coral-configure/containers/ConfigureStreamContainer.js

@@ -1,145 +0,0 @@
-import React, {Component} from 'react';
-import {connect} from 'react-redux';
-import {compose} from 'react-apollo';
-import PropTypes from 'prop-types';
-import {updateOpenStatus, updateConfiguration} from 'coral-embed-stream/src/actions/asset';
-import CloseCommentsInfo from '../components/CloseCommentsInfo';
-import ConfigureCommentStream from '../components/ConfigureCommentStream';
-import t, {timeago} from 'coral-framework/services/i18n';
-
-class ConfigureStreamContainer extends Component {
-  constructor (props) {
-    super(props);
-
-    this.state = {
-      changed: false,
-      dirtySettings: {...props.asset.settings},
-      closedAt: !props.asset.isClosed ? 'open' : 'closed'
-    };
-
-    this.toggleStatus = this.toggleStatus.bind(this);
-    this.handleChange = this.handleChange.bind(this);
-    this.handleApply = this.handleApply.bind(this);
-  }
-
-  handleApply (e) {
-    e.preventDefault();
-    const {elements} = e.target;
-    const {questionBoxIcon, questionBoxContent} = this.state.dirtySettings;
-    const premod = elements.premod.checked;
-    const questionBoxEnable = elements.qboxenable.checked;
-    const premodLinksEnable = elements.plinksenable.checked;
-    const {changed} = this.state;
-
-    const newConfig = {
-      moderation: premod ? 'PRE' : 'POST',
-      questionBoxEnable,
-      questionBoxContent,
-      questionBoxIcon,
-      premodLinksEnable
-    };
-
-    if (changed) {
-      this.props.updateConfiguration(newConfig);
-      setTimeout(() => {
-        this.setState({
-          changed: false
-        });
-      }, 300);
-    }
-  }
-
-  handleChange (e, newChanges) {
-    let changes = {};
-
-    if (changes) {
-      changes = {...newChanges};
-    }
-
-    if (e.target && e.target.id === 'qboxenable') {
-      changes.questionBoxEnable = e.target.checked;
-    }
-    if (e.currentTarget && e.currentTarget.id === 'qboxicon') {
-      changes.questionBoxIcon = e.currentTarget.dataset.icon;
-    }
-    if (e.target && e.target.id === 'plinksenable') {
-      changes.premodLinksEnable = e.target.value;
-    }
-
-    this.setState({
-      changed: true,
-      dirtySettings: {
-        ...this.state.dirtySettings,
-        ...changes,
-      },
-    });
-  }
-
-  toggleStatus () {
-
-    // update the closedAt status for the asset
-    this.props.updateStatus(
-      this.state.closedAt === 'open' ? 'closed' : 'open'
-    );
-    this.setState({
-      closedAt: (this.state.closedAt === 'open' ? 'closed' : 'open')
-    });
-  }
-
-  getClosedIn () {
-    const {closedTimeout} = this.props.asset.settings;
-    const {created_at} = this.props.asset;
-
-    return timeago(new Date(created_at).getTime() + (1000 * closedTimeout));
-  }
-
-  render () {
-    const {dirtySettings} = this.state;
-    const premod = dirtySettings.moderation === 'PRE';
-    const {closedAt} = this.state;
-    const closedTimeout = dirtySettings.closedTimeout;
-
-    return (
-      <div className='talk-embed-stream-configuration-container'>
-        <ConfigureCommentStream
-          handleChange={this.handleChange}
-          handleApply={this.handleApply}
-          changed={this.state.changed}
-          premodLinksEnable={dirtySettings.premodLinksEnable}
-          premod={premod}
-          questionBoxIcon={dirtySettings.questionBoxIcon}
-          questionBoxEnable={dirtySettings.questionBoxEnable}
-          questionBoxContent={dirtySettings.questionBoxContent}
-        />
-        <hr />
-        <h3>{closedAt === 'open' ? t('configure.close') : t('configure.open')} {t('configure.comment_stream')}</h3>
-        {(closedAt === 'open' && closedTimeout) ? <p>{t('configure.comment_stream_will_close')} {this.getClosedIn()}.</p> : ''}
-        <CloseCommentsInfo
-          onClick={this.toggleStatus}
-          status={closedAt}
-        />
-      </div>
-    );
-  }
-}
-
-const mapStateToProps = (state) => ({
-  asset: state.asset
-});
-
-const mapDispatchToProps = (dispatch) => ({
-  updateStatus: (status) => dispatch(updateOpenStatus(status)),
-  updateConfiguration: (newConfig) => dispatch(updateConfiguration(newConfig)),
-});
-
-ConfigureStreamContainer.propTypes = {
-  updateStatus: PropTypes.func,
-  closedTimeout: PropTypes.string,
-  created_at: PropTypes.string,
-  updateConfiguration: PropTypes.func,
-  asset: PropTypes.object,
-};
-
-export default compose(
-  connect(mapStateToProps, mapDispatchToProps)
-)(ConfigureStreamContainer);

client/coral-embed-stream/src/actions/configure.js

@@ -0,0 +1,9 @@
+import * as actions from '../constants/configure';
+
+export const updatePending = ({updater, errorUpdater}) => {
+  return {type: actions.UPDATE_PENDING, updater, errorUpdater};
+};
+
+export const clearPending = () => {
+  return {type: actions.CLEAR_PENDING};
+};

client/coral-embed-stream/src/components/DefaultQuestionBoxIcon.css

@@ -16,12 +16,5 @@
   color: #262626;
 }
 
-.qbIconContainer {
-  position: relative;
-  border: 0;
-  color: white;
-  display: inline-block;
-  padding: 5px 20px;
-  vertical-align: middle;
-  width: 10px;
-}
+.root {
+}

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

@@ -1,13 +1,13 @@
 import React from 'react';
 import cn from 'classnames';
-import styles from './DefaultIcon.css';
+import styles from './DefaultQuestionBoxIcon.css';
 import {Icon} from 'coral-ui';
 
-const DefaultIcon = ({className}) => (
-  <div className={cn(styles.qbIconContainer, className)}>
+const DefaultQuestionBoxIcon = ({className}) => (
+  <div className={cn(styles.root, className)}>
     <Icon name="chat_bubble" className={cn(styles.iconBubble)} />
     <Icon name="person" className={cn(styles.iconPerson)} />
   </div>
 );
 
-export default DefaultIcon;
+export default DefaultQuestionBoxIcon;

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

@@ -1,16 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Stream from '../containers/Stream';
+import Stream from '../tabs/stream/containers/Stream';
+import Configure from '../tabs/configure/containers/Configure';
 import Slot from 'coral-framework/components/Slot';
 import {can} from 'coral-framework/services/perms';
 import t from 'coral-framework/services/i18n';
+import AutomaticAssetClosure from '../containers/AutomaticAssetClosure';
 
-import {TabBar, Tab, TabContent, TabPane} from 'coral-ui';
+import ExtendableTabPanel from '../containers/ExtendableTabPanel';
+import {Tab, TabPane} from 'coral-ui';
 import ProfileContainer from 'coral-settings/containers/ProfileContainer';
 import Popup from 'coral-framework/components/Popup';
 import IfSlotIsNotEmpty from 'coral-framework/components/IfSlotIsNotEmpty';
-import ConfigureStreamContainer
-  from 'coral-configure/containers/ConfigureStreamContainer';
 import cn from 'classnames';
 
 export default class Embed extends React.Component {
@@ -21,20 +22,37 @@ export default class Embed extends React.Component {
     case 'profile':
       this.props.data.refetch();
       break;
-    case 'config':
-      this.props.data.refetch();
-      break;
     }
     this.props.setActiveTab(tab);
   };
 
-  render() {
-    const {activeTab, commentId, root, data, auth: {showSignInDialog, signInDialogFocus}, blurSignInDialog, focusSignInDialog, hideSignInDialog, router: {location: {query: {parentUrl}}}} = this.props;
+  getTabs() {
     const {user} = this.props.auth;
+    const tabs = [
+      <Tab key='stream' tabId='stream' className='talk-embed-stream-comments-tab'>
+        {t('embed_comments_tab')}
+      </Tab>,
+      <Tab key='profile' tabId='profile' className='talk-embed-stream-profile-tab'>
+        {t('framework.my_profile')}
+      </Tab>,
+    ];
+    if (can(user, 'UPDATE_CONFIG')) {
+      tabs.push(
+        <Tab key='config' tabId='config'>
+          {t('framework.configure_stream')}
+        </Tab>
+      );
+    }
+    return tabs;
+  }
+
+  render() {
+    const {activeTab, commentId, root, root: {asset}, data, auth: {showSignInDialog, signInDialogFocus}, blurSignInDialog, focusSignInDialog, hideSignInDialog, router: {location: {query: {parentUrl}}}} = this.props;
     const hasHighlightedComment = !!commentId;
 
     return (
       <div className={cn('talk-embed-stream', {'talk-embed-stream-highlight-comment': hasHighlightedComment})}>
+        <AutomaticAssetClosure asset={asset} />
         <IfSlotIsNotEmpty slot="login">
           <Popup
             href={`embed/stream/login?parentUrl=${encodeURIComponent(parentUrl)}`}
@@ -47,44 +65,36 @@ export default class Embed extends React.Component {
             onClose={hideSignInDialog}
           />
         </IfSlotIsNotEmpty>
-        <TabBar
-          onTabClick={this.changeTab}
-          activeTab={activeTab}
-          className='talk-embed-stream-tab-bar'
-          aria-controls='talk-embed-stream-tab-content'
-        >
-          <Tab tabId={'stream'} className={'talk-embed-stream-comments-tab'}>
-            {t('embed_comments_tab')}
-          </Tab>
-          <Tab tabId={'profile'} className={'talk-embed-stream-profile-tab'}>
-            {t('framework.my_profile')}
-          </Tab>
-          {can(user, 'UPDATE_CONFIG') &&
-            <Tab tabId={'config'} className={'talk-embed-stream-configuration-tab'}>
-              {t('framework.configure_stream')}
-            </Tab>
-          }
-        </TabBar>
+
         <Slot
           data={data}
           queryData={{root}}
           fill="embed"
         />
 
-        <TabContent
+        <ExtendableTabPanel
+          className='talk-embed-stream-tab-bar'
           activeTab={activeTab}
-          id='talk-embed-stream-tab-content'
-        >
-          <TabPane tabId={'stream'} className={'talk-embed-stream-comments-tab-pane'}>
-            <Stream data={data} root={root} />
-          </TabPane>
-          <TabPane tabId={'profile'} className={'talk-embed-stream-profile-tab-pane'}>
-            <ProfileContainer />
-          </TabPane>
-          <TabPane tabId={'config'} className={'talk-embed-stream-configuration-tab-pane'}>
-            <ConfigureStreamContainer />
-          </TabPane>
-        </TabContent>
+          setActiveTab={this.changeTab}
+          fallbackTab='stream'
+          tabSlot='embedStreamTabs'
+          tabSlotPrepend='embedStreamTabsPrepend'
+          tabPaneSlot='embedStreamTabPanes'
+          slotProps={{data}}
+          queryData={{root}}
+          tabs={this.getTabs()}
+          tabPanes={[
+            <TabPane key='stream' tabId='stream' className='talk-embed-stream-comments-tab-pane'>
+              <Stream data={data} root={root} asset={root.asset} />
+            </TabPane>,
+            <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'>
+              <Configure data={data} root={root} asset={root.asset} />
+            </TabPane>,
+          ]}
+        />
       </div>
     );
   }

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import {Tab} from 'coral-ui';
+import PropTypes from 'prop-types';
+
+/**
+ *  ExtendableTab adds a hover property to its children, because
+ *  Tab is rendered as a button and under Firefox its children do
+ *  not support mouse events.
+ */
+class ExtendableTab extends React.Component {
+  state = {
+    hover: false,
+  }
+
+  handleMouseEnter = () => this.setState({hover: true});
+  handleMouseLeave = () => this.setState({hover: false});
+
+  render() {
+    return (
+      <Tab
+        {...this.props}
+        onMouseEnter={this.handleMouseEnter}
+        onMouseLeave={this.handleMouseLeave}
+      >
+        {React.cloneElement(this.props.children, {hover: this.state.hover})}
+      </Tab>
+    );
+  }
+}
+
+ExtendableTab.propTypes = {
+  children: PropTypes.node,
+};
+
+export default ExtendableTab;

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

@@ -1,9 +1,9 @@
 import React from 'react';
 import {Spinner, TabBar, TabContent} from 'coral-ui';
 import PropTypes from 'prop-types';
-import styles from './StreamTabPanel.css';
+import styles from './ExtendableTabPanel.css';
 
-class StreamTabPanel extends React.Component {
+class ExtendableTabPanel extends React.Component {
 
   render() {
     const {activeTab, setActiveTab, tabs, tabPanes, sub, loading, ...rest} = this.props;
@@ -23,7 +23,7 @@ class StreamTabPanel extends React.Component {
   }
 }
 
-StreamTabPanel.propTypes = {
+ExtendableTabPanel.propTypes = {
   activeTab: PropTypes.string.isRequired,
   setActiveTab: PropTypes.func.isRequired,
   loading: PropTypes.bool,
@@ -39,4 +39,4 @@ StreamTabPanel.propTypes = {
   sub: PropTypes.bool,
 };
 
-export default StreamTabPanel;
+export default ExtendableTabPanel;

client/coral-embed-stream/src/components/QuestionBox.css

@@ -13,6 +13,8 @@
   min-height: 50px;
   display: flex;
   border-radius: 3px;
+  padding-right: 40px;
+  box-sizing: border-box;
 }
 
 .icon {
@@ -63,8 +65,3 @@
   justify-content: center;
   font-weight: 400;
 }
-
-.hidden  {
-  visibility: hidden;
-  display: none;
-}

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

@@ -3,16 +3,14 @@ import cn from 'classnames';
 import styles from './QuestionBox.css';
 import {Icon} from 'coral-ui';
 import Markdown from 'coral-framework/components/Markdown';
+import DefaultQuestionBoxIcon from './DefaultQuestionBoxIcon';
 
-import Slot from 'coral-framework/components/Slot';
-
-const QuestionBox = ({content, enable, icon = '', className = ''}) => (
-  <div className={cn(styles.qbInfo, {[styles.hidden]: !enable}, 'questionbox-info', className)}>
+const QuestionBox = ({content, icon, className, children}) => (
+  <div className={cn(styles.qbInfo, 'questionbox-info', className)}>
     {
       icon === 'default' ? (
         <div className={cn(styles.qbIconContainer)}>
-          <Icon name="chat_bubble" className={cn(styles.iconBubble)} />
-          <Icon name="person" className={cn(styles.iconPerson)} />
+          <DefaultQuestionBoxIcon />
         </div>
       ) : (
         <div className={cn(styles.qbIconContainer)}>
@@ -23,8 +21,7 @@ const QuestionBox = ({content, enable, icon = '', className = ''}) => (
     <div className={cn(styles.qbContent, 'questionbox-content')}>
       <Markdown content={content} />
     </div>
-
-    <Slot fill="streamQuestionArea" />
+    {children}
   </div>
 );
 

client/coral-embed-stream/src/constants/configure.js

@@ -0,0 +1,4 @@
+const prefix = 'TALK_EMBED_STREAM_CONFIGURE';
+
+export const UPDATE_PENDING = `${prefix}_UPDATE_PENDING`;
+export const CLEAR_PENDING = `${prefix}_CLEAR_PENDING`;

client/coral-embed-stream/src/containers/AutomaticAssetClosure.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {gql} from 'react-apollo';
+import {gql, compose} from 'react-apollo';
+import {withFragments} from 'coral-framework/hocs';
 
 const FRAGMENT = gql`
   fragment CoralEmbedStream_AutomaticAssetClosure_Fragment on Asset {
-    id
     isClosed
   }
 `;
@@ -26,15 +26,15 @@ class AutomaticAssetClosure extends React.Component {
   timer = null;
 
   componentWillMount() {
-    this.setupTimer(this.props.assetId, this.props.closedAt);
+    this.setupTimer(this.props.asset.id, this.props.asset.closedAt);
   }
 
   componentWillReceiveProps(next) {
     if (
-      this.props.assetId !== next.assetId ||
-      this.props.closedAt !== next.closedAt
+      this.props.asset.id !== next.asset.id ||
+      this.props.asset.closedAt !== next.asset.closedAt
     ) {
-      this.setupTimer(next.assetId, next.closedAt);
+      this.setupTimer(next.asset.id, next.asset.closedAt);
     }
   }
 
@@ -43,6 +43,7 @@ class AutomaticAssetClosure extends React.Component {
       fragment: FRAGMENT,
       id: getFragmentId(assetId),
       data: {
+        __typename: 'Asset',
         isClosed: true,
       },
     });
@@ -74,9 +75,21 @@ class AutomaticAssetClosure extends React.Component {
   }
 }
 
-AutomaticAssetClosure.PropTypes = {
-  assetId: PropTypes.string,
-  closedAt: PropTypes.string,
+AutomaticAssetClosure.propTypes = {
+  asset: PropTypes.object.isRequired,
 };
 
-export default AutomaticAssetClosure;
+const withAutomaticAssetClosureFragments = withFragments({
+  asset: gql`
+    fragment CoralEmbedStream_AutomaticAssetClosure_asset on Asset {
+      id
+      closedAt
+    }
+  `,
+});
+
+const enhance = compose(
+  withAutomaticAssetClosureFragments,
+);
+
+export default enhance(AutomaticAssetClosure);

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

@@ -13,7 +13,9 @@ import * as assetActions from '../actions/asset';
 import {getDefinitionName, getSlotFragmentSpreads} from 'coral-framework/utils';
 import {withQuery} from 'coral-framework/hocs';
 import Embed from '../components/Embed';
-import Stream from './Stream';
+import Stream from '../tabs/stream/containers/Stream';
+import AutomaticAssetClosure from './AutomaticAssetClosure';
+import Configure from '../tabs/configure/containers/Configure';
 import {notify} from 'coral-framework/actions/notification';
 import t from 'coral-framework/services/i18n';
 import PropTypes from 'prop-types';
@@ -151,6 +153,9 @@ const USERNAME_REJECTED_SUBSCRIPTION = gql`
 
 const slots = [
   'embed',
+  'embedStreamTabs',
+  'embedStreamTabsPrepend',
+  'embedStreamTabPanes',
 ];
 
 const EMBED_QUERY = gql`
@@ -167,10 +172,20 @@ const EMBED_QUERY = gql`
       id
       status
     }
+    asset(id: $assetId, url: $assetUrl) {
+      ...${getDefinitionName(Configure.fragments.asset)}
+      ...${getDefinitionName(Stream.fragments.asset)}
+      ...${getDefinitionName(AutomaticAssetClosure.fragments.asset)}
+    }
     ${getSlotFragmentSpreads(slots, 'root')}
     ...${getDefinitionName(Stream.fragments.root)}
+    ...${getDefinitionName(Configure.fragments.root)}
   }
   ${Stream.fragments.root}
+  ${Stream.fragments.asset}
+  ${Configure.fragments.root}
+  ${Configure.fragments.asset}
+  ${AutomaticAssetClosure.fragments.asset}
 `;
 
 export const withEmbedQuery = withQuery(EMBED_QUERY, {

client/coral-embed-stream/src/containers/ExtendableTabPanel.js

@@ -1,23 +1,23 @@
 import React from 'react';
-import StreamTabPanel from '../components/StreamTabPanel';
+import ExtendableTabPanel from '../components/ExtendableTabPanel';
 import {connect} from 'react-redux';
-import omit from 'lodash/omit';
-import {Tab, TabPane} from 'coral-ui';
+import {TabPane} from 'coral-ui';
+import ExtendableTab from '../components/ExtendableTab';
 import {getShallowChanges} from 'coral-framework/utils';
 import isEqual from 'lodash/isEqual';
 import PropTypes from 'prop-types';
 
-class StreamTabPanelContainer extends React.Component {
+class ExtendableTabPanelContainer extends React.Component {
   static contextTypes = {
     plugins: PropTypes.object,
   };
 
   componentDidMount() {
-    this.fallbackAllTab();
+    this.handleFallback();
   }
 
   componentWillReceiveProps(next) {
-    this.fallbackAllTab(next);
+    this.handleFallback(next);
   }
 
   shouldComponentUpdate(next) {
@@ -35,30 +35,50 @@ class StreamTabPanelContainer extends React.Component {
     return changes.length !== 0;
   }
 
-  fallbackAllTab(props = this.props) {
-    if (props.activeTab !== props.fallbackTab) {
-      const slotPlugins = this.getSlotElements(props.tabSlot, props).map((el) => el.type.talkPluginName);
-      if (slotPlugins.indexOf(props.activeTab) === -1) {
-        props.setActiveTab(props.fallbackTab);
-      }
+  handleFallback(props = this.props) {
+    if (this.getTabNames(props).indexOf(props.activeTab) === -1) {
+      props.setActiveTab(props.fallbackTab);
     }
   }
 
+  getTabNames(props = this.props) {
+    return this.getTabElements(props).map((el) => el.props.tabId);
+  }
+
   getSlotElements(slot, props = this.props) {
     const {plugins} = this.context;
     return plugins.getSlotElements(slot, props.reduxState, props.slotProps, props.queryData);
   }
 
   getPluginTabElements(props = this.props) {
-    return this.getSlotElements(props.tabSlot).map((el) => {
+    return this.getSlotTabElements(props.tabSlot);
+  }
+
+  getPluginTabElementsPrepend(props = this.props) {
+    return this.getSlotTabElements(props.tabSlotPrepend);
+  }
+
+  getSlotTabElements(slot) {
+    return this.getSlotElements(slot).map((el) => {
       return (
-        <Tab tabId={el.type.talkPluginName} key={el.type.talkPluginName}>
+        <ExtendableTab tabId={el.type.talkPluginName} key={el.type.talkPluginName}>
           {React.cloneElement(el, {active: this.props.activeTab === el.type.talkPluginName})}
-        </Tab>
+        </ExtendableTab>
       );
     });
   }
 
+  getTabElements(props = this.props) {
+    const elements = [...this.getPluginTabElementsPrepend(props)];
+    if (Array.isArray(props.tabs)) {
+      elements.push(...props.tabs);
+    } else {
+      elements.push(props.tabs);
+    }
+    elements.push(...this.getPluginTabElements(props));
+    return elements;
+  }
+
   getPluginTabPaneElements(props = this.props) {
     return this.getSlotElements(props.tabPaneSlot).map((el) => {
       return (
@@ -71,12 +91,12 @@ class StreamTabPanelContainer extends React.Component {
 
   render() {
     return (
-      <StreamTabPanel
+      <ExtendableTabPanel
         className={this.props.className}
         activeTab={this.props.activeTab}
         setActiveTab={this.props.setActiveTab}
-        tabs={this.getPluginTabElements().concat(this.props.appendTabs)}
-        tabPanes={this.getPluginTabPaneElements().concat(this.props.appendTabPanes)}
+        tabs={this.getTabElements()}
+        tabPanes={this.getPluginTabPaneElements().concat(this.props.tabPanes)}
         loading={this.props.loading}
         sub={this.props.sub}
       />
@@ -84,19 +104,20 @@ class StreamTabPanelContainer extends React.Component {
   }
 }
 
-StreamTabPanelContainer.propTypes = {
+ExtendableTabPanelContainer.propTypes = {
   activeTab: PropTypes.string.isRequired,
   setActiveTab: PropTypes.func.isRequired,
-  appendTabs: PropTypes.oneOfType([
+  tabs: PropTypes.oneOfType([
     PropTypes.element,
     PropTypes.arrayOf(PropTypes.element)
   ]),
-  appendTabPanes: PropTypes.oneOfType([
+  tabPanes: PropTypes.oneOfType([
     PropTypes.element,
     PropTypes.arrayOf(PropTypes.element)
   ]),
   fallbackTab: PropTypes.string.isRequired,
   tabSlot: PropTypes.string.isRequired,
+  tabSlotPrepend: PropTypes.string.isRequired,
   tabPaneSlot: PropTypes.string.isRequired,
   slotProps: PropTypes.object.isRequired,
   queryData: PropTypes.object,
@@ -106,7 +127,7 @@ StreamTabPanelContainer.propTypes = {
 };
 
 const mapStateToProps = (state) => ({
-  reduxState: omit(state, 'apollo'),
+  reduxState: state,
 });
 
-export default connect(mapStateToProps, null)(StreamTabPanelContainer);
+export default connect(mapStateToProps, null)(ExtendableTabPanelContainer);

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

@@ -2,6 +2,7 @@ import {gql} from 'react-apollo';
 import update from 'immutability-helper';
 import uuid from 'uuid/v4';
 import {insertCommentIntoEmbedQuery, removeCommentFromEmbedQuery} from './utils';
+import {mapLeaves} from 'coral-framework/utils';
 
 export default {
   fragments: {
@@ -218,6 +219,18 @@ export default {
         },
       },
     }),
+    UpdateAssetSettings: ({variables: {input}})  => ({
+      updateQueries: {
+        CoralEmbedStream_Embed: (prev) => {
+          const updated = update(prev, {
+            asset: {
+              settings: mapLeaves(input, (leaf) => ({$set: leaf})),
+            },
+          });
+          return updated;
+        }
+      }
+    }),
   },
 };
 

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

@@ -38,7 +38,7 @@ function applyToCommentsOrigin(root, callback) {
 function findAndInsertComment(parent, comment) {
   const isAsset = parent.__typename === 'Asset';
   const [connectionField, countField, action] = isAsset
-    ? ['comments', 'commentCount', '$unshift']
+    ? ['comments', 'totalCommentCount', '$unshift']
     : ['replies', 'replyCount', '$push'];
 
   if (
@@ -67,19 +67,12 @@ function findAndInsertComment(parent, comment) {
 }
 
 export function insertCommentIntoEmbedQuery(root, comment) {
-
-  // Increase total comment count by one.
-  root = update(root, {
-    asset: {
-      totalCommentCount: {$apply: (c) => c + 1},
-    },
-  });
   return applyToCommentsOrigin(root, (origin) => findAndInsertComment(origin, comment));
 }
 
 function findAndRemoveComment(parent, id) {
   const [connectionField, countField] = parent.__typename === 'Asset'
-    ? ['comments', 'commentCount']
+    ? ['comments', 'totalCommentCount']
     : ['replies', 'replyCount'];
 
   const connection = parent[connectionField];
@@ -104,13 +97,6 @@ function findAndRemoveComment(parent, id) {
 }
 
 export function removeCommentFromEmbedQuery(root, id) {
-
-  // Decrease total comment by one.
-  root = update(root, {
-    asset: {
-      totalCommentCount: {$apply: (c) => c - 1},
-    },
-  });
   return applyToCommentsOrigin(root, (origin) => findAndRemoveComment(origin, id));
 }
 
@@ -142,17 +128,21 @@ export function findCommentWithId(nodes, id) {
 }
 
 export function findCommentInEmbedQuery(root, callbackOrId) {
+  return findCommentInAsset(root.asset, callbackOrId);
+}
+
+export function findCommentInAsset(asset, callbackOrId) {
   let callback = callbackOrId;
   if (typeof callbackOrId === 'string') {
     callback = (node) => node.id === callbackOrId;
   }
-  if (root.asset.comment) {
-    return findComment([getTopLevelParent(root.asset.comment)], callback);
+  if (asset.comment) {
+    return findComment([getTopLevelParent(asset.comment)], callback);
   }
-  if (!root.asset.comments) {
+  if (!asset.comments) {
     return false;
   }
-  return findComment(root.asset.comments.nodes, callback);
+  return findComment(asset.comments.nodes, callback);
 }
 
 function findAndInsertFetchedComments(parent, comments, parent_id) {

client/coral-embed-stream/src/reducers/configure.js

@@ -0,0 +1,42 @@
+import * as actions from '../constants/configure';
+import isEmpty from 'lodash/isEmpty';
+import update from 'immutability-helper';
+
+const initialState = {
+  canSave: false,
+  pending: {},
+  errors: {},
+};
+
+export default function config(state = initialState, action) {
+  switch (action.type) {
+  case actions.UPDATE_PENDING: {
+    let next = state;
+    if (action.updater) {
+      next = update(next, {
+        pending: action.updater,
+      });
+    }
+    if (action.errorUpdater) {
+      next = update(next, {
+        errors: action.errorUpdater,
+      });
+    }
+    const noErrors = Object.keys(next.errors).reduce((res, error) => res && !next.errors[error], true);
+    const canSave = !isEmpty(next.pending) && noErrors;
+    next = update(next, {
+      canSave: {$set: canSave},
+    });
+
+    return next;
+  }
+  case actions.CLEAR_PENDING:
+    return {
+      ...state,
+      pending: {},
+      canSave: false,
+    };
+  default:
+    return state;
+  }
+}

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

@@ -2,6 +2,7 @@ import auth from './auth';
 import asset from './asset';
 import embed from './embed';
 import config from './config';
+import configure from './configure';
 import stream from './stream';
 import {reducer as commentBox} from '../../../talk-plugin-commentbox';
 
@@ -11,5 +12,6 @@ export default {
   commentBox,
   embed,
   config,
+  configure,
   stream,
 };

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

@@ -0,0 +1,10 @@
+.wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.button {
+  width: 300px;
+  margin-left: 20px;
+}

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

@@ -0,0 +1,72 @@
+import React from 'react';
+import {Button} from 'coral-ui';
+import PropTypes from 'prop-types';
+import t, {timeago} from 'coral-framework/services/i18n';
+import cn from 'classnames';
+import styles from './AssetStatusInfo.css';
+
+class AssetStatusInfo extends React.Component {
+
+  timer = null;
+
+  constructor(props) {
+    super(props);
+    this.setupTimer(props);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.setupTimer(nextProps);
+  }
+
+  // Rerendering interval. If remaining time > 1min, rerender every minute, otherwise evey second.
+  interval(closedAt) {
+    const diff = new Date(closedAt).getTime() - new Date().getTime();
+    return diff > 60000 ? 60000 : 1000;
+  }
+
+  // Timer that counts down the remaining time.
+  setupTimer({closedAt, isClosed} = this.props) {
+    if (this.timer && (isClosed || !closedAt)) {
+      clearTimeout(this.timer);
+      this.timer = null;
+    }
+    if (isClosed || !closedAt) {
+      this.timer = null;
+      return;
+    }
+    if (!this.timer) {
+      this.timer = setTimeout(() => {
+        this.timer = null;
+        this.forceUpdate();
+        this.setupTimer();
+      }, this.interval(closedAt));
+    }
+  }
+
+  render() {
+    const {isClosed, closedAt, onClose, onOpen} = this.props;
+    return (
+      <div>
+        <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)}>
+          <p>
+            {!isClosed ? t('configure.open_stream_configuration') : t('configure.close_stream_configuration')}
+          </p>
+          <Button className={styles.button} onClick={!isClosed ? onClose : onOpen}>
+            {!isClosed ? t('configure.close_stream') : t('configure.open_stream')}
+          </Button>
+        </div>
+      </div>
+    );
+  }
+}
+
+AssetStatusInfo.propTypes = {
+  isClosed: PropTypes.bool.isRequired,
+  closedAt: PropTypes.string,
+  onClose: PropTypes.func.isRequired,
+  onOpen: PropTypes.func.isRequired,
+};
+
+export default AssetStatusInfo;

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import AssetStatusInfo from '../containers/AssetStatusInfo';
+import Settings from '../containers/Settings';
+import PropTypes from 'prop-types';
+
+class Configure extends React.Component {
+  render() {
+    return (
+      <div className='talk-embed-stream-configuration-container'>
+        <Settings
+          data={this.props.data}
+          root={this.props.root}
+          asset={this.props.asset}
+        />
+        <hr />
+        <AssetStatusInfo
+          asset={this.props.asset}
+        />
+      </div>
+    );
+  }
+}
+
+Configure.propTypes = {
+  data: PropTypes.object.isRequired,
+  root: PropTypes.object.isRequired,
+  asset: PropTypes.object.isRequired,
+};
+
+export default Configure;

client/coral-embed-stream/src/tabs/configure/components/QuestionBoxBuilder.css

@@ -0,0 +1,59 @@
+.root {
+}
+
+.iconList {
+  display: flex;
+  padding: 0;
+  margin: 10px 0;
+}
+
+.item {
+  list-style-type: none;
+}
+
+.button {
+  composes: buttonReset from "coral-framework/styles/reset.css";
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  background: #F0F0F0;
+  width: 48px;
+  height: 48px;
+  font-size: 24px;
+  text-align: center;
+  line-height: 48px;
+  color: #252525;
+  border-radius: 3px;
+  overflow: hidden;
+  margin-right: 10px;
+  position: relative;
+  border: solid 2px #F0F0F0;
+  outline: 0;
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.button:focus {
+  border: solid 2px #00c96B;
+}
+
+.buttonActive {
+  border: solid 2px #00796B;
+}
+
+.defaultIcon {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.questionBox {
+  margin: 10px 0;
+}
+

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

@@ -0,0 +1,93 @@
+import React from 'react';
+import QuestionBox from '../../../components/QuestionBox';
+import {Icon, Spinner} from 'coral-ui';
+import DefaultQuestionBoxIcon from '../../../components/DefaultQuestionBoxIcon';
+import cn from 'classnames';
+import styles from './QuestionBoxBuilder.css';
+
+const DefaultIcon = <DefaultQuestionBoxIcon className={styles.defaultIcon} />;
+
+const icons = [
+  {'default': DefaultIcon},
+  'forum',
+  'build',
+  'format_quote',
+];
+
+class QuestionBoxBuilder extends React.Component {
+  constructor() {
+    super();
+
+    this.state = {
+      loading: true
+    };
+  }
+
+  componentWillMount() {
+    this.loadEditor();
+  }
+
+  async loadEditor() {
+    const {default: MarkdownEditor} = await import('coral-framework/components/MarkdownEditor');
+
+    return this.setState({
+      loading : false,
+      MarkdownEditor
+    });
+  }
+
+  render() {
+    const {questionBoxIcon, questionBoxContent, onContentChange, onIconChange} = this.props;
+    const {loading, MarkdownEditor} = this.state;
+
+    if (loading) {
+      return <Spinner/>;
+    }
+
+    return (
+      <div className={styles.root}>
+        <h4>Include an Icon</h4>
+
+        <ul className={styles.iconList}>
+          {icons.map((item) => {
+            const name = typeof item === 'object' ? Object.keys(item)[0] : item;
+            const icon = typeof item === 'object' ? item[name] : item;
+            return (
+              <li
+                className={styles.item}
+                key={name}
+              >
+                <button
+                  className={cn(
+                    styles.button,
+                    {[styles.buttonActive]: questionBoxIcon === name},
+                  )}
+                  onClick={() => onIconChange(name)}
+                >
+                  {typeof icon === 'string'
+                    ? <Icon name={icon} />
+                    : icon
+                  }
+                </button>
+              </li>
+            );
+          })}
+        </ul>
+
+        <QuestionBox
+          className={styles.questionBox}
+          icon={questionBoxIcon}
+          content={questionBoxContent}
+        />
+
+        <MarkdownEditor
+          value={questionBoxContent}
+          onChange={onContentChange}
+        />
+
+      </div>
+    );
+  }
+}
+
+export default QuestionBoxBuilder;

client/coral-embed-stream/src/tabs/configure/components/Settings.css

@@ -7,9 +7,8 @@
   margin: 0 10px;
 }
 
-.wrapper ul {
-  list-style: none;
-  padding: 0;
+.description {
+  max-width: 380px;
 }
 
 .checkbox {
@@ -17,19 +16,14 @@
   margin: 12px 12px 12px 0;
 }
 
-.wrapper h4 {
-  font-size: 14px;
-  margin-bottom: 5px;
-}
-
-.wrapper p {
-  max-width: 380px;
+.list {
+  margin-top: 26px;
 }
 
 .wrapper {
   margin-bottom: 20px;
 }
 
-.hidden {
-  display: none;
-}
+.questionBoxContainer {
+  margin-top: 24px;
+}

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

@@ -0,0 +1,102 @@
+import React from 'react';
+import {Button} from 'coral-ui';
+import PropTypes from 'prop-types';
+import t from 'coral-framework/services/i18n';
+import cn from 'classnames';
+import styles from './Settings.css';
+import Configuration from 'coral-framework/components/StreamConfiguration';
+import QuestionBoxBuilder from './QuestionBoxBuilder';
+import Slot from 'coral-framework/components/Slot';
+
+class Settings extends React.Component {
+  render() {
+    const {
+      settings: {
+        moderation,
+        premodLinksEnable,
+        questionBoxEnable,
+        questionBoxContent,
+        questionBoxIcon,
+      },
+      onToggleModeration,
+      onTogglePremodLinks,
+      onToggleQuestionBox,
+      onQuestionBoxIconChange,
+      onQuestionBoxContentChange,
+      canSave,
+      onApply,
+      slotProps,
+      queryData,
+    } = this.props;
+    return (
+      <div className={styles.wrapper}>
+        <div className={styles.container}>
+          <h3>{t('configure.title')}</h3>
+          <Button
+            type="submit"
+            className={cn(styles.apply, 'talk-embed-stream-configuration-submit-button')}
+            checked={canSave}
+            cStyle={canSave ? 'green' : 'darkGrey'}
+            onClick={onApply}
+            disabled={!canSave}
+          >
+            {t('configure.apply')}
+          </Button>
+          <p className={styles.description}>{t('configure.description')}</p>
+        </div>
+        <div className={styles.list}>
+          <Configuration
+            checked={moderation === 'PRE'}
+            title={t('configure.enable_premod')}
+            description={t('configure.enable_premod_description')}
+            onCheckbox={onToggleModeration}
+          />
+          <Configuration
+            checked={premodLinksEnable}
+            title={t('configure.enable_premod_links')}
+            description={t('configure.enable_premod_description')}
+            onCheckbox={onTogglePremodLinks}
+          />
+          <Configuration
+            checked={questionBoxEnable}
+            title={t('configure.enable_questionbox')}
+            description={t('configure.enable_questionbox_description')}
+            onCheckbox={onToggleQuestionBox}
+          >
+            {
+              questionBoxEnable &&
+                <div className={styles.questionBoxContainer}>
+                  <QuestionBoxBuilder
+                    questionBoxIcon={questionBoxIcon}
+                    questionBoxContent={questionBoxContent}
+                    onIconChange={onQuestionBoxIconChange}
+                    onContentChange={onQuestionBoxContentChange}
+                  />
+                </div>
+            }
+          </Configuration>
+          <Slot
+            fill="streamSettings"
+            queryData={queryData}
+            {...slotProps}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+Settings.propTypes = {
+  queryData: PropTypes.object.isRequired,
+  slotProps: PropTypes.object.isRequired,
+  settings: PropTypes.object.isRequired,
+  canSave: PropTypes.bool.isRequired,
+  onToggleModeration: PropTypes.func.isRequired,
+  onTogglePremodLinks: PropTypes.func.isRequired,
+  onToggleQuestionBox: PropTypes.func.isRequired,
+  onQuestionBoxContentChange: PropTypes.func.isRequired,
+  onQuestionBoxIconChange: PropTypes.func.isRequired,
+  onApply: PropTypes.func.isRequired,
+};
+
+export default Settings;

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

@@ -0,0 +1,44 @@
+import React from 'react';
+import {gql, compose} from 'react-apollo';
+import {withFragments} from 'coral-framework/hocs';
+import AssetStatusInfo from '../components/AssetStatusInfo';
+import PropTypes from 'prop-types';
+import {withUpdateAssetStatus} from 'coral-framework/graphql/mutations';
+
+class AssetStatusInfoContainer extends React.Component {
+
+  openAsset = () => this.props.updateAssetStatus(this.props.asset.id, {closedAt: null});
+  closeAsset = () => this.props.updateAssetStatus(this.props.asset.id, {closedAt: new Date().toISOString()});
+
+  render() {
+    return <AssetStatusInfo
+      settings={this.props.asset.settings}
+      isClosed={this.props.asset.isClosed}
+      closedAt={this.props.asset.closedAt}
+      onOpen={this.openAsset}
+      onClose={this.closeAsset}
+    />;
+  }
+}
+
+AssetStatusInfoContainer.propTypes = {
+  asset: PropTypes.object.isRequired,
+  updateAssetStatus: PropTypes.func.isRequired,
+};
+
+const withAssetStatusInfoFragments = withFragments({
+  asset: gql`
+    fragment CoralEmbedStream_AssetStatusInfo_asset on Asset {
+      id
+      closedAt
+      isClosed
+    }
+  `,
+});
+
+const enhance = compose(
+  withAssetStatusInfoFragments,
+  withUpdateAssetStatus,
+);
+
+export default enhance(AssetStatusInfoContainer);

client/coral-embed-stream/src/tabs/configure/containers/Configure.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import {gql, compose} from 'react-apollo';
+import {withFragments} from 'coral-framework/hocs';
+import Configure from '../components/Configure';
+import AssetStatusInfo from './AssetStatusInfo';
+import Settings from './Settings';
+import PropTypes from 'prop-types';
+import {getDefinitionName} from 'coral-framework/utils';
+
+class ConfigureContainer extends React.Component {
+
+  render() {
+    return <Configure
+      data={this.props.data}
+      root={this.props.root}
+      asset={this.props.asset}
+    />;
+  }
+}
+
+ConfigureContainer.propTypes = {
+  data: PropTypes.object.isRequired,
+  root: PropTypes.object.isRequired,
+  asset: PropTypes.object.isRequired,
+};
+
+const withConfigureFragments = withFragments({
+  root: gql`
+    fragment CoralEmbedStream_Configure_root on RootQuery {
+      __typename
+      ...${getDefinitionName(Settings.fragments.root)}
+    }
+    ${Settings.fragments.root}
+  `,
+  asset: gql`
+    fragment CoralEmbedStream_Configure_asset on Asset {
+      __typename
+      ...${getDefinitionName(AssetStatusInfo.fragments.asset)}
+      ...${getDefinitionName(Settings.fragments.asset)}
+    }
+    ${AssetStatusInfo.fragments.asset}
+    ${Settings.fragments.asset}
+  `,
+});
+
+const enhance = compose(
+  withConfigureFragments,
+);
+
+export default enhance(ConfigureContainer);

client/coral-embed-stream/src/tabs/configure/containers/Settings.js

@@ -0,0 +1,129 @@
+import React from 'react';
+import {gql, compose} from 'react-apollo';
+import {withFragments, withMergedSettings} from 'coral-framework/hocs';
+import {getErrorMessages, getSlotFragmentSpreads} from 'coral-framework/utils';
+import Settings from '../components/Settings.js';
+import PropTypes from 'prop-types';
+import {withUpdateAssetSettings} from 'coral-framework/graphql/mutations';
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+import {notify} from 'coral-framework/actions/notification';
+import {clearPending, updatePending} from '../../../actions/configure';
+
+const slots = [
+  'streamSettings',
+];
+
+class SettingsContainer extends React.Component {
+
+  toggleModeration = () => {
+    const updater = {moderation: {$set: this.props.mergedSettings.moderation === 'PRE' ? 'POST' : 'PRE'}};
+    this.props.updatePending({updater});
+  };
+
+  togglePremodLinks = () => {
+    const updater = {premodLinksEnable: {$set: !this.props.mergedSettings.premodLinksEnable}};
+    this.props.updatePending({updater});
+  };
+
+  toggleQuestionBox = () => {
+    const updater = {questionBoxEnable: {$set: !this.props.mergedSettings.questionBoxEnable}};
+    this.props.updatePending({updater});
+  };
+
+  setQuestionBoxIcon = (icon) => {
+    const updater = {questionBoxIcon: {$set: icon}};
+    this.props.updatePending({updater});
+  };
+
+  setQuestionBoxContent = (content) => {
+    const updater = {questionBoxContent: {$set: content}};
+    this.props.updatePending({updater});
+  };
+
+  savePending = async () => {
+    try {
+      await this.props.updateAssetSettings(this.props.asset.id, this.props.pending);
+      this.props.clearPending();
+    }
+    catch(err) {
+      this.props.notify('error', getErrorMessages(err));
+    }
+  };
+
+  render() {
+    const {mergedSettings, canSave, data, root, asset, errors, updatePending} = this.props;
+    return <Settings
+      settings={mergedSettings}
+      queryData={{root, asset, settings: mergedSettings}}
+      slotProps={{data, updatePending, errors}}
+      savePending={this.savePending}
+      onToggleModeration={this.toggleModeration}
+      onTogglePremodLinks={this.togglePremodLinks}
+      onToggleQuestionBox={this.toggleQuestionBox}
+      onQuestionBoxIconChange={this.setQuestionBoxIcon}
+      onQuestionBoxContentChange={this.setQuestionBoxContent}
+      onApply={this.savePending}
+      canSave={canSave}
+    />;
+  }
+}
+
+SettingsContainer.propTypes = {
+  data: PropTypes.object.isRequired,
+  root: PropTypes.object.isRequired,
+  asset: PropTypes.object.isRequired,
+  pending: PropTypes.object.isRequired,
+  errors: PropTypes.object.isRequired,
+  mergedSettings: PropTypes.object.isRequired,
+  updateAssetSettings: PropTypes.func.isRequired,
+  clearPending: PropTypes.func.isRequired,
+  notify: PropTypes.func.isRequired,
+  updatePending: PropTypes.func.isRequired,
+  canSave: PropTypes.bool.isRequired,
+};
+
+const withSettingsFragments = withFragments({
+  root: gql`
+    fragment CoralEmbedStream_Settings_root on RootQuery {
+      __typename
+      ${getSlotFragmentSpreads(slots, 'root')}
+    }
+  `,
+  asset: gql`
+    fragment CoralEmbedStream_Settings_asset on Asset {
+      id
+      settings {
+        moderation
+        premodLinksEnable
+        questionBoxEnable
+        questionBoxIcon
+        questionBoxContent
+        ${getSlotFragmentSpreads(slots, 'settings')}
+      }
+      ${getSlotFragmentSpreads(slots, 'asset')}
+    }
+  `,
+});
+
+const mapStateToProps = (state) => ({
+  pending: state.configure.pending,
+  canSave: state.configure.canSave,
+  errors: state.configure.errors,
+});
+
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators({
+    notify,
+    clearPending,
+    updatePending,
+  }, dispatch);
+
+const enhance = compose(
+  withSettingsFragments,
+  withUpdateAssetSettings,
+  connect(mapStateToProps, mapDispatchToProps),
+  withMergedSettings('asset.settings', 'pending', 'mergedSettings'),
+);
+
+export default enhance(SettingsContainer);

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

@@ -14,7 +14,7 @@ const hasComment = (nodes, id) => nodes.some((node) => node.id === id);
 // comments to show. The spare cursor functions as a backup in case one
 // of the comments gets deleted.
 function resetCursors(state, props) {
-  const comments = props.root.asset.comments;
+  const comments = props.asset.comments;
   if (comments && comments.nodes.length) {
     const idCursors = [comments.nodes[0].id];
     if (comments.nodes[1]) {
@@ -30,7 +30,7 @@ function resetCursors(state, props) {
 // using the help of the backup cursor.
 function invalidateCursor(invalidated, state, props) {
   const alt = invalidated === 1 ? 0 : 1;
-  const comments = props.root.asset.comments;
+  const comments = props.asset.comments;
   const idCursors = [];
   if (state.idCursors[alt]) {
     idCursors.push(state.idCursors[alt]);

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

@@ -119,6 +119,8 @@
 
 .commentInfoBar {
   margin-left: auto;
+  flex: 1;
+  text-align: right;
 }
 
 @keyframes enter {
@@ -131,9 +133,6 @@
   animation: enter 1000ms;
 }
 
-.commentContainer {
-}
-
 .commentAvatar {
   max-width: 60px;
 }
@@ -152,9 +151,32 @@
 }
 
 .header {
-  display: flex;
-  align-items: center;
   margin: 10px 0;
+  display: flex;
+}
+
+.headerContainer {
+  flex: 1;
+  flex-direction: column;
+  align-items: flex-start;
+
+  @media (min-width: 480px) {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+  }
+}
+
+.tagsContainer {
+  display: flex;
+}
+
+.tagsContainer > * {
+  margin: 3px;
+
+  &:first-child {
+    margin-left: 0px;
+  }
 }
 
 .content {

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

@@ -9,13 +9,13 @@ import {can} from 'coral-framework/services/perms';
 import {TransitionGroup} from 'react-transition-group';
 import cn from 'classnames';
 import styles from './Comment.css';
-import {THREADING_LEVEL} from '../constants/stream';
+import {THREADING_LEVEL} from '../../../constants/stream';
 import merge from 'lodash/merge';
 import mapValues from 'lodash/mapValues';
 
 import LoadMore from './LoadMore';
 import {getEditableUntilDate} from './util';
-import {findCommentWithId} from '../graphql/utils';
+import {findCommentWithId} from '../../../graphql/utils';
 import CommentContent from 'coral-framework/components/CommentContent';
 import Slot from 'coral-framework/components/Slot';
 import CommentTombstone from './CommentTombstone';
@@ -452,39 +452,43 @@ export default class Comment extends React.Component {
           <div className={cn(styles.commentContainer, 'talk-stream-comment-container')}>
             <div className={cn(styles.header, 'talk-stream-comment-header')}>
 
-              <Slot
-                className={cn(styles.username, 'talk-stream-comment-user-name')}
-                fill="commentAuthorName"
-                defaultComponent={CommentAuthorName}
-                queryData={queryData}
-                {...slotProps}
-              />
-
-              {isStaff(comment.tags) ? <TagLabel>Staff</TagLabel> : null}
-
-              <Slot
-                className={cn('talk-stream-comment-author-tags')}
-                fill="commentAuthorTags"
-                queryData={queryData}
-                {...slotProps}
-                inline
-              />
-
-              <span className={`${styles.bylineSecondary} talk-stream-comment-user-byline`} >
+              <div className={cn(styles.headerContainer, 'talk-stream-comment-header-container')}>
                 <Slot
-                  fill="commentTimestamp"
-                  defaultComponent={CommentTimestamp}
-                  className={'talk-stream-comment-published-date'}
-                  created_at={comment.created_at}
+                  className={cn(styles.username, 'talk-stream-comment-user-name')}
+                  fill="commentAuthorName"
+                  defaultComponent={CommentAuthorName}
                   queryData={queryData}
                   {...slotProps}
                 />
-                {
-                  (comment.editing && comment.editing.edited)
-                    ? <span>&nbsp;<span className={styles.editedMarker}>({t('comment.edited')})</span></span>
-                    : null
-                }
-              </span>
+
+                <div className={cn(styles.tagsContainer, 'talk-stream-comment-header-tags-container')}>
+                  {isStaff(comment.tags) ? <TagLabel>Staff</TagLabel> : null}
+
+                  <Slot
+                    className={cn(styles.commentAuthorTagsSlot, 'talk-stream-comment-author-tags')}
+                    fill="commentAuthorTags"
+                    queryData={queryData}
+                    {...slotProps}
+                    inline
+                  />
+                </div>
+
+                <span className={`${styles.bylineSecondary} talk-stream-comment-user-byline`} >
+                  <Slot
+                    fill="commentTimestamp"
+                    defaultComponent={CommentTimestamp}
+                    className={'talk-stream-comment-published-date'}
+                    created_at={comment.created_at}
+                    queryData={queryData}
+                    {...slotProps}
+                  />
+                  {
+                    (comment.editing && comment.editing.edited)
+                      ? <span>&nbsp;<span className={styles.editedMarker}>({t('comment.edited')})</span></span>
+                      : null
+                  }
+                </span>
+              </div>
 
               <Slot
                 className={styles.commentInfoBar}

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

@@ -2,9 +2,22 @@
   margin-top: 6px;
 }
 
-.viewAllButton {
+.viewAllButtonContainer {
   position: absolute;
-  right: 0px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-top: -11px;
+  z-index: 10;
+}
+
+.viewAllButton {
+  composes: buttonReset from "coral-framework/styles/reset.css";
+
+  background-color: #4D8FCC;
+  color: white;
+  padding: 4px 8px;
+  border-radius: 2px;
 }
 
 .tabPanel {
@@ -26,4 +39,4 @@
   margin-top: 28px;
   padding-bottom: 50px;
   min-height: 600px;
-}
+}

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

@@ -11,15 +11,14 @@ import RestrictedMessageBox
   from 'coral-framework/components/RestrictedMessageBox';
 import t, {timeago} from 'coral-framework/services/i18n';
 import CommentBox from 'talk-plugin-commentbox/CommentBox';
-import QuestionBox from 'talk-plugin-questionbox/QuestionBox';
+import QuestionBox from '../../../components/QuestionBox';
 import {isCommentActive} from 'coral-framework/utils';
-import {Button, Tab, TabCount, TabPane} from 'coral-ui';
+import {Tab, TabCount, TabPane} from 'coral-ui';
 import cn from 'classnames';
 
-import {getTopLevelParent, attachCommentToParent} from '../graphql/utils';
+import {getTopLevelParent, attachCommentToParent} from '../../../graphql/utils';
 import AllCommentsPane from './AllCommentsPane';
-import AutomaticAssetClosure from '../containers/AutomaticAssetClosure';
-import StreamTabPanel from '../containers/StreamTabPanel';
+import ExtendableTabPanel from '../../../containers/ExtendableTabPanel';
 
 import styles from './Stream.css';
 
@@ -47,7 +46,8 @@ class Stream extends React.Component {
       activeReplyBox,
       setActiveReplyBox,
       commentClassNames,
-      root: {asset, asset: {comment}},
+      asset,
+      asset: {comment},
       postComment,
       notify,
       editComment,
@@ -58,6 +58,7 @@ class Stream extends React.Component {
       loadNewReplies,
       auth: {user},
       emit,
+      viewAllComments,
     } = this.props;
 
     // even though the permalinked comment is the highlighted one, we're displaying its parent + replies
@@ -76,6 +77,14 @@ class Stream extends React.Component {
 
     return (
       <div className={cn('talk-stream-highlighted-container', styles.highlightedContainer)}>
+        <div className={cn('talk-stream-show-all-comments-button-container', styles.viewAllButtonContainer)}>
+          <button
+            className={cn('talk-stream-show-all-comments-button', styles.viewAllButton)}
+            onClick={viewAllComments}
+          >
+            {t('framework.show_all_comments')}
+          </button>
+        </div>
         <Comment
           data={data}
           root={root}
@@ -106,14 +115,15 @@ class Stream extends React.Component {
     );
   }
 
-  renderTabPanel() {
+  renderExtendableTabPanel() {
     const {
       data,
       root,
       activeReplyBox,
       setActiveReplyBox,
       commentClassNames,
-      root: {asset, asset: {comments, totalCommentCount}},
+      asset,
+      asset: {comments, totalCommentCount},
       postComment,
       notify,
       editComment,
@@ -135,7 +145,7 @@ class Stream extends React.Component {
     const slotProps = {data};
     const slotQueryData = {root, asset};
 
-    // `key` of `StreamTabPanel` depends on sorting so that we always reset
+    // `key` of `ExtendableTabPanel` depends on sorting so that we always reset
     // the state when changing sorting.
     return (
       <div className={cn('talk-stream-tab-container', styles.tabContainer)}>
@@ -148,26 +158,28 @@ class Stream extends React.Component {
             {...slotProps}
           />
         </div>
-        <StreamTabPanel
+        <ExtendableTabPanel
           key={`${sortBy}_${sortOrder}`}
           activeTab={activeStreamTab}
           setActiveTab={setActiveStreamTab}
-          fallbackTab={'all'}
-          tabSlot={'streamTabs'}
-          tabPaneSlot={'streamTabPanes'}
+          fallbackTab='all'
+          tabSlot='streamTabs'
+          tabSlotPrepend='streamTabsPrepend'
+          tabPaneSlot='streamTabPanes'
           slotProps={slotProps}
           queryData={slotQueryData}
           loading={loading}
-          appendTabs={
+          tabs={
             <Tab tabId={'all'} key='all'>
               {t('stream.all_comments')} <TabCount active={activeStreamTab === 'all'} sub>{totalCommentCount}</TabCount>
             </Tab>
           }
-          appendTabPanes={
-            <TabPane tabId={'all'} key='all'>
+          tabPanes={
+            <TabPane tabId='all' key='all'>
               <AllCommentsPane
                 data={data}
                 root={root}
+                asset={asset}
                 comments={comments}
                 commentClassNames={commentClassNames}
                 setActiveReplyBox={setActiveReplyBox}
@@ -175,7 +187,6 @@ class Stream extends React.Component {
                 notify={notify}
                 disableReply={!open}
                 postComment={postComment}
-                asset={asset}
                 currentUser={user}
                 postFlag={postFlag}
                 postDontAgree={postDontAgree}
@@ -201,11 +212,16 @@ class Stream extends React.Component {
       data,
       root,
       appendItemArray,
-      root: {asset, asset: {comment: highlightedComment}},
+      asset,
+      asset: {
+        comment: highlightedComment,
+        settings: {
+          questionBoxEnable,
+        }
+      },
       postComment,
       notify,
       updateItem,
-      viewAllComments,
       auth: {loggedIn, user},
       editName,
     } = this.props;
@@ -213,14 +229,13 @@ class Stream extends React.Component {
     const open = !asset.isClosed;
 
     const banned = user && user.status === 'BANNED';
-    const pending = user && user.status === 'PENDING';
 
     const temporarilySuspended =
       user &&
       user.suspension.until &&
       new Date(user.suspension.until) > new Date();
 
-    const showCommentBox = loggedIn && ((!banned && !pending & !temporarilySuspended && !highlightedComment) || keepCommentBox);
+    const showCommentBox = loggedIn && ((!banned && !temporarilySuspended && !highlightedComment) || keepCommentBox);
     const slotProps = {data};
     const slotQueryData = {root, asset};
 
@@ -230,27 +245,23 @@ class Stream extends React.Component {
 
     return (
       <div id="stream" className={styles.root}>
-        <AutomaticAssetClosure assetId={asset.id} closedAt={asset.closedAt}/>
-        {highlightedComment &&
-          <Button
-            cStyle="darkGrey"
-            className={cn('talk-stream-show-all-comments-button', styles.viewAllButton)}
-            onClick={viewAllComments}
-          >
-            {t('framework.show_all_comments')}
-          </Button>}
-
         {open
           ? <div id="commentBox">
             <InfoBox
               content={asset.settings.infoBoxContent}
               enable={asset.settings.infoBoxEnable}
             />
-            <QuestionBox
-              content={asset.settings.questionBoxContent}
-              enable={asset.settings.questionBoxEnable}
-              icon={asset.settings.questionBoxIcon}
-            />
+            {questionBoxEnable && (
+              <QuestionBox
+                content={asset.settings.questionBoxContent}
+                icon={asset.settings.questionBoxIcon}>
+                <Slot
+                  fill="streamQuestionArea"
+                  queryData={slotQueryData}
+                  {...slotProps}
+                />
+              </QuestionBox>
+            )}
             {!banned &&
                 temporarilySuspended &&
                 <RestrictedMessageBox>
@@ -297,7 +308,7 @@ class Stream extends React.Component {
 
         {highlightedComment
           ? this.renderHighlightedComment()
-          : this.renderTabPanel()
+          : this.renderExtendableTabPanel()
         }
       </div>
     );
@@ -325,7 +336,7 @@ Stream.propTypes = {
   loading: PropTypes.bool,
   editName: PropTypes.func,
   appendItemArray: PropTypes.func,
-  updateItem: PropTypes.func, 
+  updateItem: PropTypes.func,
   viewAllComments: PropTypes.func,
   notify: PropTypes.func.isRequired,
   postComment: PropTypes.func.isRequired,

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

@@ -2,7 +2,7 @@ import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
 import t from 'coral-framework/services/i18n';
-import styles from './SuspendAccount.css';
+import styles from './SuspendedAccount.css';
 import {Button} from 'coral-ui';
 import validate from 'coral-framework/helpers/validate';
 import RestrictedMessageBox from 'coral-framework/components/RestrictedMessageBox';

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

@@ -4,9 +4,9 @@ import Comment from '../components/Comment';
 import {withFragments} from 'coral-framework/hocs';
 import {getSlotFragmentSpreads} from 'coral-framework/utils';
 import {withSetCommentStatus} from 'coral-framework/graphql/mutations';
-import {THREADING_LEVEL} from '../constants/stream';
+import {THREADING_LEVEL} from '../../../constants/stream';
 import hoistStatics from 'recompose/hoistStatics';
-import {nest} from '../graphql/utils';
+import {nest} from '../../../graphql/utils';
 
 const slots = [
   'streamQuestionArea',

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

@@ -2,7 +2,7 @@ import React from 'react';
 import {gql, compose} from 'react-apollo';
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
-import {ADDTL_COMMENTS_ON_LOAD_MORE, THREADING_LEVEL} from '../constants/stream';
+import {ADDTL_COMMENTS_ON_LOAD_MORE, THREADING_LEVEL} from '../../../constants/stream';
 import {
   withPostComment, withPostFlag, withPostDontAgree,
   withDeleteAction, withEditComment
@@ -10,7 +10,7 @@ import {
 
 import * as authActions from 'coral-embed-stream/src/actions/auth';
 import * as notificationActions from 'coral-framework/actions/notification';
-import {setActiveReplyBox, setActiveTab, viewAllComments} from '../actions/stream';
+import {setActiveReplyBox, setActiveTab, viewAllComments} from '../../../actions/stream';
 import Stream from '../components/Stream';
 import Comment from './Comment';
 import {withFragments, withEmit} from 'coral-framework/hocs';
@@ -19,11 +19,12 @@ import {Spinner} from 'coral-ui';
 import {can} from 'coral-framework/services/perms';
 import {
   findCommentInEmbedQuery,
+  findCommentInAsset,
   insertCommentIntoEmbedQuery,
   removeCommentFromEmbedQuery,
   insertFetchedCommentsIntoEmbedQuery,
   nest,
-} from '../graphql/utils';
+} from '../../../graphql/utils';
 
 const {showSignInDialog, editName} = authActions;
 const {notify} = notificationActions;
@@ -36,7 +37,7 @@ class StreamContainer extends React.Component {
     this.commentsEditedSubscription = this.props.data.subscribeToMore({
       document: COMMENTS_EDITED_SUBSCRIPTION,
       variables: {
-        assetId: this.props.root.asset.id,
+        assetId: this.props.asset.id,
       },
       updateQuery: (prev, {subscriptionData: {data: {commentEdited}}}) => {
 
@@ -62,7 +63,7 @@ class StreamContainer extends React.Component {
     this.commentsAddedSubscription = this.props.data.subscribeToMore({
       document: COMMENTS_ADDED_SUBSCRIPTION,
       variables: {
-        assetId: this.props.root.asset.id,
+        assetId: this.props.asset.id,
       },
       updateQuery: (prev, {subscriptionData: {data: {commentAdded}}}) => {
 
@@ -108,7 +109,7 @@ class StreamContainer extends React.Component {
   }
 
   loadNewReplies = (parent_id) => {
-    const comment = findCommentInEmbedQuery(this.props.root, parent_id);
+    const comment = findCommentInAsset(this.props.asset, parent_id);
 
     return this.props.data.fetchMore({
       query: LOAD_MORE_QUERY,
@@ -116,7 +117,7 @@ class StreamContainer extends React.Component {
         limit: parent_id ? 999999 : ADDTL_COMMENTS_ON_LOAD_MORE,
         cursor: comment.replies.endCursor,
         parent_id,
-        asset_id: this.props.root.asset.id,
+        asset_id: this.props.asset.id,
         sortOrder: 'ASC',
         excludeIgnored: this.props.data.variables.excludeIgnored,
       },
@@ -131,9 +132,9 @@ class StreamContainer extends React.Component {
       query: LOAD_MORE_QUERY,
       variables: {
         limit: ADDTL_COMMENTS_ON_LOAD_MORE,
-        cursor: this.props.root.asset.comments.endCursor,
+        cursor: this.props.asset.comments.endCursor,
         parent_id: null,
-        asset_id: this.props.root.asset.id,
+        asset_id: this.props.asset.id,
         sortOrder: this.props.data.variables.sortOrder,
         sortBy: this.props.data.variables.sortBy,
         excludeIgnored: this.props.data.variables.excludeIgnored,
@@ -177,9 +178,9 @@ class StreamContainer extends React.Component {
   }
 
   render() {
-    if (!this.props.root.asset
-      || this.props.root.asset.comment === undefined
-      && !this.props.root.asset.comments
+    if (!this.props.asset
+      || this.props.asset.comment === undefined
+      && !this.props.asset.comments
     ) {
       return <Spinner />;
     }
@@ -271,6 +272,7 @@ const LOAD_MORE_QUERY = gql`
 
 const slots = [
   'streamTabs',
+  'streamTabsPrepend',
   'streamTabPanes',
   'streamFilter',
 ];
@@ -278,49 +280,6 @@ const slots = [
 const fragments = {
   root: gql`
     fragment CoralEmbedStream_Stream_root on RootQuery {
-      asset(id: $assetId, url: $assetUrl) {
-        comment(id: $commentId) @include(if: $hasComment) {
-          ...CoralEmbedStream_Stream_comment
-          ${nest(`
-            parent {
-              ...CoralEmbedStream_Stream_comment
-              ...nest
-            }
-          `, THREADING_LEVEL)}
-        }
-        id
-        title
-        url
-        closedAt
-        isClosed
-        created_at
-        settings {
-          moderation
-          infoBoxEnable
-          infoBoxContent
-          premodLinksEnable
-          questionBoxEnable
-          questionBoxContent
-          questionBoxIcon
-          closedTimeout
-          closedMessage
-          charCountEnable
-          charCount
-          requireEmailConfirmation
-        }
-        commentCount @skip(if: $hasComment)
-        totalCommentCount @skip(if: $hasComment)
-        comments(query: {limit: 10, excludeIgnored: $excludeIgnored, sortOrder: $sortOrder, sortBy: $sortBy}) @skip(if: $hasComment) {
-          nodes {
-            ...CoralEmbedStream_Stream_comment
-          }
-          hasNextPage
-          startCursor
-          endCursor
-        }
-        ${getSlotFragmentSpreads(slots, 'asset')}
-        ...${getDefinitionName(Comment.fragments.asset)}
-      }
       me {
         status
         ignoredUsers {
@@ -333,8 +292,51 @@ const fragments = {
       ${getSlotFragmentSpreads(slots, 'root')}
       ...${getDefinitionName(Comment.fragments.root)}
     }
-    ${Comment.fragments.asset}
     ${Comment.fragments.root}
+  `,
+  asset: gql`
+    fragment CoralEmbedStream_Stream_asset on Asset {
+      comment(id: $commentId) @include(if: $hasComment) {
+        ...CoralEmbedStream_Stream_comment
+        ${nest(`
+          parent {
+            ...CoralEmbedStream_Stream_comment
+            ...nest
+          }
+        `, THREADING_LEVEL)}
+      }
+      id
+      title
+      url
+      isClosed
+      created_at
+      settings {
+        moderation
+        infoBoxEnable
+        infoBoxContent
+        premodLinksEnable
+        questionBoxEnable
+        questionBoxContent
+        questionBoxIcon
+        closedTimeout
+        closedMessage
+        charCountEnable
+        charCount
+        requireEmailConfirmation
+      }
+      totalCommentCount @skip(if: $hasComment)
+      comments(query: {limit: 10, excludeIgnored: $excludeIgnored, sortOrder: $sortOrder, sortBy: $sortBy}) @skip(if: $hasComment) {
+        nodes {
+          ...CoralEmbedStream_Stream_comment
+        }
+        hasNextPage
+        startCursor
+        endCursor
+      }
+      ${getSlotFragmentSpreads(slots, 'asset')}
+      ...${getDefinitionName(Comment.fragments.asset)}
+    }
+    ${Comment.fragments.asset}
     ${commentFragment}
   `,
 };
@@ -342,7 +344,6 @@ const fragments = {
 const mapStateToProps = (state) => ({
   auth: state.auth,
   refetching: state.embed.refetching,
-  commentCountCache: state.stream.commentCountCache,
   activeReplyBox: state.stream.activeReplyBox,
   commentId: state.stream.commentId,
   assetId: state.stream.assetId,

client/coral-embed-stream/style/default.css

@@ -190,11 +190,9 @@ body {
   background-color: #4C1066;
   color: white;
   display: inline-block;
-  margin: 0px 5px;
-  padding: 5px 5px;
   border-radius: 2px;
   font-size: 12px;
-  font-weight: bold;
+  padding: 5px 6px;
 }
 
 /* Comment Action Styles */
@@ -275,22 +273,6 @@ button.comment__action-button[disabled],
 
 /* Close comments */
 
-.close-comments-intro-wrapper {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.close-comments-intro-wrapper button {
-  width: 300px;
-  margin-left: 20px;
-}
-
-.close-comments-intro-wrapper button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
 .close-comments-message {
   box-sizing: border-box;
   width: 100%;

client/coral-embed/src/index.js

@@ -70,10 +70,9 @@ export class Talk {
     // Extract the asset url.
     if (opts.asset_url) {
       query.asset_url = opts.asset_url;
-    } else if (!opts.asset_id) {
+    } else {
 
-      // The asset url was not provided and the asset id was also not provided,
-      // we need to infer the asset url from details on the page.
+      // The asset url was not provided so we need to infer the asset url from // details on the page.
 
       try {
         query.asset_url = document.querySelector('link[rel="canonical"]').href;

client/coral-framework/components/CommentTimestamp.css

@@ -2,5 +2,6 @@
   display: inline-block;
   color: #696969;
   font-size: 12px;
+  white-space: nowrap;
 }
 

client/coral-framework/components/IfSlotIsEmpty.js

@@ -1,7 +1,6 @@
 import React, {Children} from 'react';
 import {connect} from 'react-redux';
 import PropTypes from 'prop-types';
-import omit from 'lodash/omit';
 import {getShallowChanges} from 'coral-framework/utils';
 
 class IfSlotIsEmpty extends React.Component {
@@ -39,7 +38,7 @@ IfSlotIsEmpty.propTypes = {
 };
 
 const mapStateToProps = (state) => ({
-  reduxState: omit(state, 'apollo'),
+  reduxState: state,
 });
 
 export default connect(mapStateToProps, null)(IfSlotIsEmpty);

client/coral-framework/components/IfSlotIsNotEmpty.js

@@ -1,7 +1,6 @@
 import React, {Children} from 'react';
 import {connect} from 'react-redux';
 import PropTypes from 'prop-types';
-import omit from 'lodash/omit';
 import {getShallowChanges} from 'coral-framework/utils';
 
 class IfSlotIsNotEmpty extends React.Component {
@@ -39,7 +38,7 @@ IfSlotIsNotEmpty.propTypes = {
 };
 
 const mapStateToProps = (state) => ({
-  reduxState: omit(state, 'apollo'),
+  reduxState: state,
 });
 
 export default connect(mapStateToProps, null)(IfSlotIsNotEmpty);

client/coral-framework/components/MarkdownEditor.js

@@ -107,6 +107,11 @@ export default class MarkdownEditor extends Component  {
       ...config,
       element: this.textarea,
     });
+
+    // Don't trap the key, to stay accessible.
+    this.editor.codemirror.options.extraKeys['Tab'] = false;
+    this.editor.codemirror.options.extraKeys['Shift-Tab'] = false;
+
     this.editor.codemirror.on('change', this.onChange);
   }
 

client/coral-framework/components/Slot.js

@@ -2,7 +2,6 @@ import React from 'react';
 import cn from 'classnames';
 import styles from './Slot.css';
 import {connect} from 'react-redux';
-import omit from 'lodash/omit';
 import kebabCase from 'lodash/kebabCase';
 import PropTypes from 'prop-types';
 import isEqual from 'lodash/isEqual';
@@ -121,7 +120,7 @@ Slot.propTypes = {
 };
 
 const mapStateToProps = (state) => ({
-  reduxState: omit(state, 'apollo'),
+  reduxState: state,
 });
 
 export default connect(mapStateToProps, null)(Slot);

client/coral-framework/components/StreamConfiguration.css

@@ -0,0 +1,33 @@
+.root {
+  position: relative;
+  margin: 12px 12px 24px 0;
+}
+
+.action {
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding-left: 4px;
+}
+
+.title {
+  display: block;
+  font-size: 14px;
+  margin-bottom: 5px;
+  font-weight: bold;
+  cursor: pointer;
+  padding-right: 50px;
+}
+
+.description{
+  padding-right: 50px;
+}
+
+.content {
+  display: inline-block;
+  box-sizing: border-box;
+  padding-left: 50px;
+}
+
+

client/coral-framework/components/StreamConfiguration.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import Checkbox from 'coral-ui/components/Checkbox';
+import PropTypes from 'prop-types';
+import cn from 'classnames';
+import styles from './StreamConfiguration.css';
+import uuid from 'uuid/v4';
+
+class Configuration extends React.Component {
+
+  id = uuid();
+
+  render() {
+    const {title, description, children, className, onCheckbox, checked, ...rest} = this.props;
+    return (
+      <div {...rest} className={cn(styles.root, className)}>
+        {checked !== undefined &&
+          <div className={styles.action}>
+            <Checkbox
+              id={this.id}
+              className={styles.checkbox}
+              onChange={onCheckbox}
+              checked={checked} />
+          </div>
+        }
+        <div className={cn(styles.wrapper, {
+          [styles.content]: checked !== undefined,
+        })}>
+          <label htmlFor={this.id} className={styles.title}>{title}</label>
+          <div className={styles.description}>{description}</div>
+          <div>
+            {children}
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+Configuration.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  className: PropTypes.string,
+  onCheckbox: PropTypes.func,
+  checked: PropTypes.bool,
+  children: PropTypes.node,
+};
+
+export default Configuration;

client/coral-framework/components/TalkProvider.js

@@ -9,17 +9,18 @@ class TalkProvider extends React.Component {
       pym: this.props.pym,
       plugins: this.props.plugins,
       rest: this.props.rest,
-      graphqlRegistry: this.props.graphqlRegistry,
+      graphql: this.props.graphql,
       notification: this.props.notification,
       storage: this.props.storage,
       history: this.props.history,
+      store: this.props.store,
     };
   }
 
   render() {
-    const {children, client, store} = this.props;
+    const {children, client} = this.props;
     return (
-      <ApolloProvider client={client} store={store}>
+      <ApolloProvider client={client}>
         {children}
       </ApolloProvider>
     );
@@ -31,10 +32,11 @@ TalkProvider.childContextTypes = {
   eventEmitter: PropTypes.object,
   plugins: PropTypes.object,
   rest: PropTypes.func,
-  graphqlRegistry: PropTypes.object,
+  graphql: PropTypes.object,
   notification: PropTypes.object,
   storage: PropTypes.object,
   history: PropTypes.object,
+  store: PropTypes.object,
 };
 
 export default TalkProvider;

client/coral-framework/graphql/anywhere.js

@@ -0,0 +1,23 @@
+import graphql from '@coralproject/graphql-anywhere-optimized';
+import {createTypeGetter} from 'graphql-ast-tools';
+import introspectionData from './introspection.json';
+
+// Use typeGetter to get more optimized documents.
+const typeGetter = createTypeGetter(introspectionData);
+
+// Use global fragment cache for transformed fragments.
+const fragmentMap = {};
+
+export default (...args) => {
+  while (args.length < 7) {
+    args.push(undefined);
+  }
+
+  const transformOptions = {
+    typeGetter,
+    fragmentMap,
+  };
+
+  args[6] = transformOptions;
+  return graphql(...args);
+};

client/coral-framework/graphql/fragments.js

@@ -17,6 +17,8 @@ export default {
     'IgnoreUserResponse',
     'StopIgnoringUserResponse',
     'UpdateSettingsResponse',
+    'UpdateAssetSettingsResponse',
+    'UpdateAssetStatusResponse',
   )
 };