Merge pull request #1 from coralproject/master

Updating master

.gitignore

@@ -15,6 +15,10 @@ client/coral-framework/graphql/introspection.json
 *.DS_STORE
 
 coverage/
+test/e2e/reports/
+test/e2e/bslocal.log
+test/e2e/selenium-debug.log
+browserstack.err
 
 plugins.json
 plugins/*
@@ -45,5 +49,6 @@ plugins/*
 !plugins/talk-plugin-deep-reply-count
 !plugins/talk-plugin-subscriber
 !plugins/talk-plugin-flag-details
+!plugins/talk-plugin-slack-notifications
 
 **/node_modules/*

.nsprc

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

README.md

@@ -1,11 +1,16 @@
-# Talk [![CircleCI](https://circleci.com/gh/coralproject/talk.svg?style=svg)](https://circleci.com/gh/coralproject/talk)
+# Talk
+
+[![CircleCI](https://circleci.com/gh/coralproject/talk.svg?style=svg)](https://circleci.com/gh/coralproject/talk)
 [![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://dashboard.heroku.com/new?template=https%3A%2F%2Fgithub.com%2Fcoralproject%2Ftalk&env[TALK_FACEBOOK_APP_ID]=ignore&env[TALK_FACEBOOK_APP_SECRET]=ignore)
+[![NSP Status](https://nodesecurity.io/orgs/coralproject/projects/07ce2e4c-99fb-48f8-b50b-69d2d2c081b8/badge)](https://nodesecurity.io/orgs/coralproject/projects/07ce2e4c-99fb-48f8-b50b-69d2d2c081b8)
 
 Online comments are broken. Our open-source Talk tool rethinks how moderation, comment display, and conversation function, creating the opportunity for safer, smarter discussions around your work. [Read more about Talk here](https://coralproject.net/products/talk.html).
 
-## Documentation
+Built with <3 by The Coral Project & Mozilla.
 
-Developer Documentation & Setup Guides https://coralproject.github.io/talk/.
+## Getting Started
+
+Check out our Docs: https://coralproject.github.io/talk/
 
 ## Relevant Links
 
@@ -15,6 +20,13 @@ Developer Documentation & Setup Guides https://coralproject.github.io/talk/.
 - Project: https://coralproject.net/
 - Roadmap: https://www.pivotaltracker.com/n/projects/1863625
 
+## End-to-End Testing
+
+Talk uses [Nightwatch](http://nightwatchjs.org/) to write e2e tests. The testing infrastructure that allows us to run our tests in real browsers is provided with love by our friends at Browserstack.
+
+
+![](/public/img/browserstack_logo.png)
+
 ## License
 
     Copyright 2017 Mozilla Foundation
@@ -23,8 +35,12 @@ Developer Documentation & Setup Guides https://coralproject.github.io/talk/.
     you may not use this file except in compliance with the License.
     You may obtain a copy of the License at
 
-        http://www.apache.org/licenses/LICENSE-2.0
+    http://www.apache.org/licenses/LICENSE-2.0
 
-    Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    Unless required by applicable law or agreed to in writing,
+    software distributed under the License is distributed on an
+    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+    either express or implied.
 
-    See the License for the specific language governing permissions and limitations under the License.
+    See the License for the specific language governing permissions
+    and limitations under the License.

bin/cli-serve

@@ -1,161 +1,7 @@
 #!/usr/bin/env node
 
 const program = require('./commander');
-const app = require('../app');
-const debug = require('debug')('talk:cli:serve');
-const errors = require('../errors');
-const {createServer} = require('http');
-const scraper = require('../services/scraper');
-const mailer = require('../services/mailer');
-const MigrationService = require('../services/migration');
-const SetupService = require('../services/setup');
-const kue = require('../services/kue');
-const mongoose = require('../services/mongoose');
-const util = require('./util');
-const cache = require('../services/cache');
-const {createSubscriptionManager} = require('../graph/subscriptions');
-const {
-  PORT
-} = require('../config');
-
-/**
-* Get port from environment and store in Express.
-*/
-
-const port = normalizePort(PORT);
-app.set('port', port);
-
-/**
-* Create HTTP server.
-*/
-const server = createServer(app);
-
-/**
- * Event listener for HTTP server "error" event.
- */
-function onError(error) {
-  if (error.syscall !== 'listen') {
-    throw error;
-  }
-
-  let bind = typeof port === 'string'
-    ? `Pipe ${port}`
-    : `Port ${port}`;
-
-  // handle specific listen errors with friendly messages
-  switch (error.code) {
-  case 'EACCES':
-    console.error(`${bind} requires elevated privileges`);
-    break;
-  case 'EADDRINUSE':
-    console.error(`${bind} is already in use`);
-    break;
-  }
-
-  throw error;
-}
-
-/**
- * Normalize a port into a number, string, or false.
- */
-
-function normalizePort(val) {
-  let port = parseInt(val, 10);
-
-  if (isNaN(port)) {
-
-    // named pipe
-    return val;
-  }
-
-  if (port >= 0) {
-
-    // port number
-    return port;
-  }
-
-  return false;
-}
-
-/**
- * Event listener for HTTP server "listening" event.
- */
-
-async function onListening() {
-
-  // Start the cache instance.
-  await cache.init();
-
-  let addr = server.address();
-  let bind = typeof addr === 'string'
-    ? `pipe ${addr}`
-    : `port ${addr.port}`;
-  debug(`API Server Listening on ${bind}`);
-}
-
-/**
- * Start the app.
- */
-async function startApp(program) {
-
-  try {
-
-    // Check to see if the application is installed. If the application
-    // has been installed, then it will throw errors.ErrSettingsNotInit, this
-    // just means we don't have to check that the migrations have run.
-    await SetupService.isAvailable();
-
-    debug('setup is currently available, migrations not being checked');
-
-  } catch (e) {
-
-    // Check the error.
-    switch (e) {
-    case errors.ErrInstallLock, errors.ErrSettingsInit:
-
-      debug('setup is not currently available, migrations now being checked');
-
-      // The error was expected, just continue.
-      break;
-    default:
-
-      // The error was not expected, throw the error!
-      throw e;
-    }
-
-    // Now try and check the migration status.
-    try {
-
-      // Verify that the minimum migration version is met.
-      await MigrationService.verify();
-
-    } catch (e) {
-      console.error(e);
-      process.exit(1);
-    }
-
-    debug('migrations do not have to be run');
-  }
-
-  /**
-  * Listen on provided port, on all network interfaces.
-  */
-  server.on('error', onError);
-  server.on('listening', onListening);
-  server.on('listening', () => {
-
-  });
-  server.listen(port, () => {
-
-    // Mount the websocket server if requested.
-    if (program.websockets) {
-      debug(`Websocket Server Listening on ${port}`);
-
-      // Mount the subscriptions server on the application server.
-      createSubscriptionManager(server);
-    }
-  });
-}
+const serve = require('../serve');
 
 //==============================================================================
 // Setting up the program command line arguments.
@@ -166,24 +12,6 @@ program
   .option('-w, --websockets', 'enable the websocket (subscriptions) handler on this thread')
   .parse(process.argv);
 
-// Start the application serving.
-startApp(program);
+// Start serving.
+serve({jobs: program.jobs, websockets: program.websockets});
 
-// Enable job processing on the thread if enabled.
-if (program.jobs) {
-
-  // Start the scraper processor.
-  scraper.process();
-
-  // Start the mail processor.
-  mailer.process();
-}
-
-// Define a safe shutdown function to call in the event we need to shutdown
-// because the node hooks are below which will interrupt the shutdown process.
-// Shutdown the mongoose connection, the app server, and the scraper.
-util.onshutdown([
-  () => program.jobs ? kue.Task.shutdown() : null,
-  () => mongoose.disconnect(),
-  () => server.close()
-]);

bin/cli-setup

@@ -195,7 +195,7 @@ const performSetup = async () => {
       password: user.password
     }
   });
-    
+
   console.log('Settings created.');
   console.log(`User ${newUser.id} created.`);
   console.log('\nTalk is now installed!');

circle.yml

@@ -7,9 +7,7 @@ machine:
   environment:
     PATH: "${PATH}:${HOME}/${CIRCLE_PROJECT_REPONAME}/node_modules/.bin"
     NODE_ENV: "test"
-
-dependencies:
-  override:
+  pre:
     # TODO: use the following to add in support for MongoDB 3.4.
     # # Upgrade the database version to 3.4.
     # - sudo apt-get purge mongodb-org*
@@ -19,10 +17,20 @@ dependencies:
     # - sudo apt-get install -y mongodb-org
     # - sudo service mongod restart
 
+    # Install chromium for e2e and remove old google-chrome
+    - sudo rm -rf /opt/google/chrome
+    - sudo rm -f /usr/bin/google-chrome*
+    - sudo apt-get update
+    - sudo apt-get install chromium-browser
+
+dependencies:
+  override:
+
     # Install node dependencies.
     - yarn --version
-    - yarn global add node-gyp --force
+    - yarn global add node-gyp nsp --force
     - yarn
+
   post:
     # Build the static assets.
     - yarn build
@@ -40,6 +48,9 @@ test:
   override:
     # Run the tests using the junit reporter.
     - MOCHA_FILE=$CIRCLE_TEST_REPORTS/junit/test-results.xml MOCHA_REPORTER=mocha-junit-reporter yarn test
+    # Check dependancies using nsp.
+    - nsp check
+    - yarn e2e-ci
 
 deployment:
   release:

client/coral-admin/src/actions/configure.js

@@ -0,0 +1,13 @@
+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};
+};
+
+export const setActiveSection = (section) => {
+  return {type: actions.SET_ACTIVE_SECTION, section};
+};

client/coral-admin/src/actions/settings.js

@@ -1,58 +0,0 @@
-import t from 'coral-framework/services/i18n';
-
-export const SETTINGS_LOADING = 'SETTINGS_LOADING';
-export const SETTINGS_RECEIVED = 'SETTINGS_RECEIVED';
-export const SETTINGS_FETCH_ERROR = 'SETTINGS_FETCH_ERROR';
-
-export const SETTINGS_UPDATED = 'SETTINGS_UPDATED';
-
-export const SAVE_SETTINGS_LOADING = 'SAVE_SETTINGS_LOADING';
-export const SAVE_SETTINGS_SUCCESS = 'SAVE_SETTINGS_SUCCESS';
-export const SAVE_SETTINGS_FAILED = 'SAVE_SETTINGS_FAILED';
-
-export const WORDLIST_UPDATED = 'WORDLIST_UPDATED';
-export const DOMAINLIST_UPDATED = 'DOMAINLIST_UPDATED';
-
-export const fetchSettings = () => (dispatch, _, {rest}) => {
-  dispatch({type: SETTINGS_LOADING});
-  rest('/settings')
-    .then((settings) => {
-      dispatch({type: SETTINGS_RECEIVED, settings});
-    })
-    .catch((error) => {
-      console.error(error);
-      const errorMessage = error.translation_key ? t(`error.${error.translation_key}`) : error.toString();
-      dispatch({type: SETTINGS_FETCH_ERROR, error: errorMessage});
-    });
-};
-
-// for updating top-level settings
-export const updateSettings = (settings) => {
-  return {type: SETTINGS_UPDATED, settings};
-};
-
-// this is a nested property, so it needs a special action.
-export const updateWordlist = (listName, list) => {
-  return {type: WORDLIST_UPDATED, listName, list};
-};
-
-export const updateDomainlist = (listName, list) => {
-  return {type: DOMAINLIST_UPDATED, listName, list};
-};
-
-export const saveSettingsToServer = () => (dispatch, getState, {rest}) => {
-  let settings = getState().settings;
-  if (settings.charCount) {
-    settings.charCount = parseInt(settings.charCount);
-  }
-  dispatch({type: SAVE_SETTINGS_LOADING});
-  rest('/settings', {method: 'PUT', body: settings})
-    .then(() => {
-      dispatch({type: SAVE_SETTINGS_SUCCESS, settings});
-    })
-    .catch((error) => {
-      console.error(error);
-      const errorMessage = error.translation_key ? t(`error.${error.translation_key}`) : error.toString();
-      dispatch({type: SAVE_SETTINGS_FAILED, error: errorMessage});
-    });
-};

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

@@ -4,6 +4,7 @@ import Layout from 'coral-admin/src/components/ui/Layout';
 import styles from './NotFound.css';
 import {Button, TextField, Alert, Success} from 'coral-ui';
 import Recaptcha from 'react-recaptcha';
+import cn from 'classnames';
 
 class AdminLogin extends React.Component {
 
@@ -34,19 +35,22 @@ class AdminLogin extends React.Component {
   render () {
     const {errorMessage, loginMaxExceeded, recaptchaPublic} = this.props;
     const signInForm = (
-      <form onSubmit={this.handleSignIn}>
+      <form className="talk-admin-login-sign-in" onSubmit={this.handleSignIn}>
         {errorMessage && <Alert>{errorMessage}</Alert>}
         <TextField
+          id="email"
           label='Email Address'
           value={this.state.email}
           onChange={(e) => this.setState({email: e.target.value})} />
         <TextField
+          id="password"
           label='Password'
           value={this.state.password}
           onChange={(e) => this.setState({password: e.target.value})}
           type='password' />
         <div style={{height: 10}}></div>
         <Button
+          className="talk-admin-login-sign-in-button"
           type='submit'
           cStyle='black'
           full
@@ -90,7 +94,7 @@ class AdminLogin extends React.Component {
     );
     return (
       <Layout fixedDrawer restricted={true}>
-        <div className={styles.loginLayout}>
+        <div className={cn(styles.loginLayout, 'talk-admin-login')}>
           <h1 className={styles.loginHeader}>Team sign in</h1>
           <p className={styles.loginCTA}>Sign in to interact with your community.</p>
           { this.state.requestPassword ? requestPasswordForm : signInForm }

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

@@ -0,0 +1,13 @@
+@custom-media --table-viewport (max-width: 1024px);
+
+:global {
+  .mdl-layout__drawer-button {
+    visibility: hidden;
+  }
+
+  @media (--table-viewport) {
+    .mdl-layout__drawer-button {
+      visibility: visible;
+    }
+  }
+}

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

@@ -6,8 +6,8 @@ import styles from './Drawer.css';
 import t from 'coral-framework/services/i18n';
 import {can} from 'coral-framework/services/perms';
 
-const CoralDrawer = ({handleLogout, auth}) => (
-  <Drawer className={styles.header}>
+const CoralDrawer = ({handleLogout, auth = {}}) => (
+  <Drawer className={styles.drawer}>
     { auth && auth.user && can(auth.user, 'ACCESS_ADMIN') ?
       <div>
         <Navigation className={styles.nav}>
@@ -57,7 +57,8 @@ const CoralDrawer = ({handleLogout, auth}) => (
 
 CoralDrawer.propTypes = {
   handleLogout: PropTypes.func.isRequired,
-  restricted: PropTypes.bool // hide app elements from a logged out user
+  restricted: PropTypes.bool, // hide app elements from a logged out user
+  auth: PropTypes.object
 };
 
 export default CoralDrawer;

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

@@ -21,7 +21,6 @@
 
 .callToAction {
   position: fixed;
-  left: 10px;
   bottom: 10px;
   width: 280px;
   height: 200px;
@@ -29,6 +28,7 @@
   padding: 15px;
   box-sizing: border-box;
   box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.15);
+  z-index: 10;
 
   .ctaHeader {
     font-size: 16px;

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

@@ -10,6 +10,8 @@ const shortcuts = [
     shortcuts: {
       'j': 'modqueue.next_comment',
       'k': 'modqueue.prev_comment',
+      'ctrl+f': 'modqueue.toggle_search',
+      't': 'modqueue.next_queue',
       's': 'modqueue.singleview',
       '?': 'modqueue.thismenu'
     }

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

@@ -2,17 +2,25 @@ import React from 'react';
 import TagsInput from 'react-tagsinput';
 import styles from './TagsInput.css';
 import AutosizeInput from 'react-input-autosize';
+import PropTypes from 'prop-types';
+import cn from 'classnames';
 
 const autosizingRenderInput = ({onChange, value, addTag: _, ...other}) =>
   <AutosizeInput type='text' onChange={onChange} value={value} {...other} />;
 
-export default (props) => {
+autosizingRenderInput.propTypes = {
+  onChange: PropTypes.func,
+  value: PropTypes.string,
+  addTag: PropTypes.func,
+};
+
+const TagsInputComponent = ({className = '', ...props}) => {
   return (
     <TagsInput
       addOnBlur={true}
       addOnPaste={true}
       pasteSplit={(data) => data.split(',').map((d) => d.trim())}
-      className={styles.root}
+      className={cn(styles.root, 'tags-input', className)}
       focusedClassName={styles.rootFocus}
       renderInput={autosizingRenderInput}
       {...props}
@@ -29,3 +37,11 @@ export default (props) => {
     />
   );
 };
+
+TagsInputComponent.propTypes = {
+  className: PropTypes.string,
+  inputProps: PropTypes.object,
+  tagProps: PropTypes.object,
+};
+
+export default TagsInputComponent;

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

@@ -17,14 +17,20 @@ export default class UserDetail extends React.Component {
     userId: PropTypes.string.isRequired,
     hideUserDetail: PropTypes.func.isRequired,
     root: PropTypes.object.isRequired,
-    bannedWords: PropTypes.array.isRequired,
-    suspectWords: PropTypes.array.isRequired,
     acceptComment: PropTypes.func.isRequired,
     rejectComment: PropTypes.func.isRequired,
     changeStatus: PropTypes.func.isRequired,
     toggleSelect: PropTypes.func.isRequired,
     bulkAccept: PropTypes.func.isRequired,
     bulkReject: PropTypes.func.isRequired,
+    loading: PropTypes.bool.isRequired,
+    data: PropTypes.shape({
+      refetch: PropTypes.func.isRequired,
+    }),
+    activeTab: PropTypes.string.isRequired,
+    selectedCommentIds: PropTypes.array.isRequired,
+    viewUserDetail: PropTypes.any.isRequired,
+    loadMore: PropTypes.any.isRequired
   }
 
   rejectThenReload = async (info) => {
@@ -79,8 +85,6 @@ export default class UserDetail extends React.Component {
       },
       activeTab,
       selectedCommentIds,
-      bannedWords,
-      suspectWords,
       toggleSelect,
       bulkAccept,
       bulkReject,
@@ -120,24 +124,22 @@ export default class UserDetail extends React.Component {
 
             <ul className={styles.stats}>
               <li className={styles.stat}>
-                <span className={styles.statItem}> Total Comments </span>
-                <spam className={styles.statResult}> {totalComments} </spam>
+                <span className={styles.statItem}>Total Comments</span>
+                <span className={styles.statResult}>{totalComments}</span>
               </li>
               <li className={styles.stat}>
-                <spam className={styles.statItem}> Reject Rate </spam>
-                <spam className={styles.statResult}> {`${(rejectedPercent).toFixed(1)}%`} </spam>
+                <span className={styles.statItem}>Reject Rate</span>
+                <span className={styles.statResult}>
+                  {rejectedPercent.toFixed(1)}%
+                </span>
               </li>
               <li className={styles.stat}>
-                <spam className={styles.statItem}> Reports </spam>
-                <spam className={cn(styles.statReportResult, styles[getReliability(user.reliable.flagger)])}>
+                <span className={styles.statItem}>Reports</span>
+                <span className={cn(styles.statReportResult, styles[getReliability(user.reliable.flagger)])}>
                   {capitalize(getReliability(user.reliable.flagger))}
-                </spam>
+                </span>
               </li>
             </ul>
-
-            <p className={styles.small}>
-              Data represents the last six months of activity
-            </p>
           </div>
 
           <Slot
@@ -169,7 +171,7 @@ export default class UserDetail extends React.Component {
                     cStyle='reject'
                     icon='close'>
                   </Button>
-                  {`${selectedCommentIds.length} comments selected`}
+                  {selectedCommentIds.length} comments selected
                 </div>
               )
           }
@@ -184,8 +186,6 @@ export default class UserDetail extends React.Component {
                   root={root}
                   data={data}
                   comment={comment}
-                  suspectWords={suspectWords}
-                  bannedWords={bannedWords}
                   acceptComment={this.acceptThenReload}
                   rejectComment={this.rejectThenReload}
                   selected={selected}

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

@@ -30,12 +30,11 @@ class UserDetailComment extends React.Component {
   render() {
     const {
       comment,
-      suspectWords,
-      bannedWords,
       selected,
       toggleSelect,
       className,
       data,
+      root: {settings: {wordlist: {banned, suspect}}},
     } = this.props;
 
     return (
@@ -72,8 +71,8 @@ class UserDetailComment extends React.Component {
             <div className={styles.bodyContainer}>
               <div className={styles.body}>
                 <CommentBodyHighlighter
-                  suspectWords={suspectWords}
-                  bannedWords={bannedWords}
+                  suspectWords={suspect}
+                  bannedWords={banned}
                   body={comment.body}
                 />
                 {' '}
@@ -123,9 +122,15 @@ UserDetailComment.propTypes = {
   acceptComment: PropTypes.func.isRequired,
   rejectComment: PropTypes.func.isRequired,
   className: PropTypes.string,
-  suspectWords: PropTypes.arrayOf(PropTypes.string).isRequired,
-  bannedWords: PropTypes.arrayOf(PropTypes.string).isRequired,
   toggleSelect: PropTypes.func,
+  root: PropTypes.shape({
+    settings: PropTypes.shape({
+      wordlist: PropTypes.shape({
+        suspect: PropTypes.arrayOf(PropTypes.string).isRequired,
+        banned: PropTypes.arrayOf(PropTypes.string).isRequired,
+      }),
+    }),
+  }),
   comment: PropTypes.shape({
     id: PropTypes.string.isRequired,
     status: PropTypes.string.isRequired,
@@ -136,8 +141,8 @@ UserDetailComment.propTypes = {
       title: PropTypes.string,
       url: PropTypes.string,
       id: PropTypes.string
-    })
-  })
+    }),
+  }),
 };
 
 export default UserDetailComment;

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

@@ -15,20 +15,25 @@
   }
 }
 
+.headerWrapper {
+  background-color: #696969;
+}
+
 .header {
-  background-color: transparent;
   box-shadow: none;
   min-height: 58px;
   display: block;
+  max-width: 1280px;
+  margin: 0 auto;
+  background-color: #696969;
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
 }
 
 .header > div {
-  background-color: #696969;
   position: relative;
   padding: 0;
-  min-width: 1280px;
+  max-width: 1280px;
   margin: 0 auto;
-  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
   height: 58px;
 }
 

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

@@ -15,93 +15,95 @@ const CoralHeader = ({
   root
 }) => {
   return (
-    <Header className={styles.header}>
-      <Logo className={styles.logo} />
-      <div> 
-        {
-          auth && auth.user && can(auth.user, 'ACCESS_ADMIN') ?
-            <Navigation className={styles.nav}>
-              <IndexLink
-                id='dashboardNav'
-                className={styles.navLink}
-                to="/admin/dashboard"
-                activeClassName={styles.active}>
-                {t('configure.dashboard')}
-              </IndexLink>
-              {
-                can(auth.user, 'MODERATE_COMMENTS') && (
-                  <Link
-                    id='moderateNav'
-                    className={styles.navLink}
-                    to="/admin/moderate"
-                    activeClassName={styles.active}>
-                    {t('configure.moderate')}
-                    {(root.premodCount !== 0 || root.reportedCount !== 0) && <Indicator />}
-                  </Link>
-                )
-              }
-              <Link
-                id='streamsNav'
-                className={styles.navLink}
-                to="/admin/stories"
-                activeClassName={styles.active}>
-                {t('configure.stories')}
-              </Link>
+    <div className={styles.headerWrapper}>
+      <Header className={styles.header}>
+        <Logo className={styles.logo} />
+        <div> 
+          {
+            auth && auth.user && can(auth.user, 'ACCESS_ADMIN') ?
+              <Navigation className={styles.nav}>
+                <IndexLink
+                  id='dashboardNav'
+                  className={styles.navLink}
+                  to="/admin/dashboard"
+                  activeClassName={styles.active}>
+                  {t('configure.dashboard')}
+                </IndexLink>
+                {
+                  can(auth.user, 'MODERATE_COMMENTS') && (
+                    <Link
+                      id='moderateNav'
+                      className={styles.navLink}
+                      to="/admin/moderate"
+                      activeClassName={styles.active}>
+                      {t('configure.moderate')}
+                      {(root.premodCount !== 0 || root.reportedCount !== 0) && <Indicator />}
+                    </Link>
+                  )
+                }
+                <Link
+                  id='streamsNav'
+                  className={styles.navLink}
+                  to="/admin/stories"
+                  activeClassName={styles.active}>
+                  {t('configure.stories')}
+                </Link>
 
-              <Link
-                id='communityNav'
-                className={styles.navLink}
-                to="/admin/community"
-                activeClassName={styles.active}>
-                {t('configure.community')}
-                {root.flaggedUsernamesCount !== 0 && <Indicator />}
-              </Link>
+                <Link
+                  id='communityNav'
+                  className={styles.navLink}
+                  to="/admin/community"
+                  activeClassName={styles.active}>
+                  {t('configure.community')}
+                  {root.flaggedUsernamesCount !== 0 && <Indicator />}
+                </Link>
 
-              {
-                can(auth.user, 'UPDATE_CONFIG') && (
-                  <Link
-                    id='configureNav'
-                    className={styles.navLink}
-                    to="/admin/configure"
-                    activeClassName={styles.active}>
-                    {t('configure.configure')}
-                  </Link>
-                )
-              }
-            </Navigation>
-            :
-            null
-        }
-        <div className={styles.rightPanel}>
-          <ul>
-            <li className={styles.settings}>
-              <div>
-                <IconButton name="settings" id="menu-settings"/>
-                <Menu target="menu-settings" align="right">
-                  <MenuItem onClick={() => showShortcuts(true)}>{t('configure.shortcuts')}</MenuItem>
-                  <MenuItem>
-                    <a href="https://github.com/coralproject/talk/releases" target="_blank" rel="noopener noreferrer">
-                        View latest version
-                    </a>
-                  </MenuItem>
-                  <MenuItem>
-                    <a href="https://coralproject.net/contribute.html#other-ideas-and-bug-reports" target="_blank" rel="noopener noreferrer">
-                        Report a bug or give feedback
-                    </a>
-                  </MenuItem>
-                  <MenuItem onClick={handleLogout}>
-                    {t('configure.sign_out')}
-                  </MenuItem>
-                </Menu>
-              </div>
-            </li>
-            <li>
-              {`v${process.env.VERSION}`}
-            </li>
-          </ul>
+                {
+                  can(auth.user, 'UPDATE_CONFIG') && (
+                    <Link
+                      id='configureNav'
+                      className={styles.navLink}
+                      to="/admin/configure"
+                      activeClassName={styles.active}>
+                      {t('configure.configure')}
+                    </Link>
+                  )
+                }
+              </Navigation>
+              :
+              null
+          }
+          <div className={styles.rightPanel}>
+            <ul>
+              <li className={styles.settings}>
+                <div>
+                  <IconButton name="settings" id="menu-settings"/>
+                  <Menu target="menu-settings" align="right">
+                    <MenuItem onClick={() => showShortcuts(true)}>{t('configure.shortcuts')}</MenuItem>
+                    <MenuItem>
+                      <a href="https://github.com/coralproject/talk/releases" target="_blank" rel="noopener noreferrer">
+                          View latest version
+                      </a>
+                    </MenuItem>
+                    <MenuItem>
+                      <a href="https://coralproject.net/contribute.html#other-ideas-and-bug-reports" target="_blank" rel="noopener noreferrer">
+                          Report a bug or give feedback
+                      </a>
+                    </MenuItem>
+                    <MenuItem onClick={handleLogout}>
+                      {t('configure.sign_out')}
+                    </MenuItem>
+                  </Menu>
+                </div>
+              </li>
+              <li>
+                {`v${process.env.VERSION}`}
+              </li>
+            </ul>
+          </div>
         </div>
-      </div>
-    </Header>
+      </Header>
+    </div>
   );
 };
 

client/coral-admin/src/components/ui/Layout.css

@@ -1,5 +1,4 @@
 .layout {
-    max-width: 1280px;
-    margin: 0 auto;
-    background-color: #FAFAFA;
+  margin: 0 auto;
+  background-color: #FAFAFA;
 }

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

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {Layout as LayoutMDL} from 'react-mdl';
 import Header from '../../containers/Header';
-import Drawer from './Drawer';
+import Drawer from '../Drawer';
 import styles from './Layout.css';
 
 const Layout = ({
@@ -21,6 +21,7 @@ const Layout = ({
     <Drawer 
       handleLogout={handleLogout}
       restricted={restricted}
+      auth={auth}
     />
     <div className={styles.layout}>
       {children}

client/coral-admin/src/components/ui/Logo.css

@@ -20,7 +20,6 @@
   background: #696969;
   height: 100%;
   width: 128px;
-  z-index: 10;
   border-right: 1px #757575 solid;
 }
 

client/coral-admin/src/constants/configure.js

@@ -0,0 +1,5 @@
+const prefix = 'TALK_ADMIN_CONFIGURE';
+
+export const UPDATE_PENDING = `${prefix}_UPDATE_PENDING`;
+export const CLEAR_PENDING = `${prefix}_CLEAR_PENDING`;
+export const SET_ACTIVE_SECTION = `${prefix}_SET_ACTIVE_SECTION`;

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

@@ -152,7 +152,7 @@ export const withUserDetailQuery = withQuery(gql`
       }
       ${getSlotFragmentSpreads(slots, 'user')}
     }
-    totalComments: commentCount(query: {author_id: $author_id})
+    totalComments: commentCount(query: {author_id: $author_id, statuses: []})
     rejectedComments: commentCount(query: {author_id: $author_id, statuses: [REJECTED]})
     comments: comments(query: {
       author_id: $author_id,
@@ -179,8 +179,6 @@ const mapStateToProps = (state) => ({
   selectedCommentIds: state.userDetail.selectedCommentIds,
   statuses: state.userDetail.statuses,
   activeTab: state.userDetail.activeTab,
-  bannedWords: state.settings.wordlist.banned,
-  suspectWords: state.settings.wordlist.suspect,
 });
 
 const mapDispatchToProps = (dispatch) => ({

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

@@ -8,7 +8,12 @@ import CommentDetails from './CommentDetails';
 export default withFragments({
   root: gql`
     fragment CoralAdmin_UserDetailComment_root on RootQuery {
-      __typename
+      settings {
+        wordlist {
+          banned
+          suspect
+        }
+      }
       ...${getDefinitionName(CommentLabels.fragments.root)}
       ...${getDefinitionName(CommentDetails.fragments.root)}
     }

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

@@ -1,4 +1,15 @@
 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);
+  });
+}
 
 export default {
   mutations: {
@@ -29,6 +40,16 @@ export default {
         }
       }
     }),
+    UpdateSettings: ({variables: {input}})  => ({
+      updateQueries: {
+        TalkAdmin_Configure: (prev) => {
+          const updated = update(prev, {
+            settings: mapLeaves(input, (leaf) => ({$set: leaf})),
+          });
+          return updated;
+        }
+      }
+    }),
   },
 };
 

client/coral-admin/src/index.js

@@ -23,6 +23,7 @@ function init({store, storage}) {
 async function main() {
   const notification = createNotificationService(toast);
   const context = await createContext({reducers, graphqlExtension, pluginsConfig, notification, init});
+
   render(
     <TalkProvider {...context}>
       <App />

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

@@ -0,0 +1,47 @@
+import * as actions from '../constants/configure';
+import isEmpty from 'lodash/isEmpty';
+import update from 'immutability-helper';
+
+const initialState = {
+  canSave: false,
+  pending: {},
+  errors: {},
+  activeSection: 'stream',
+};
+
+export default function configure(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,
+    };
+  case actions.SET_ACTIVE_SECTION:
+    return {
+      ...state,
+      activeSection: action.section,
+    };
+  }
+  return state;
+}

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

@@ -0,0 +1,15 @@
+// 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,7 @@
 import auth from './auth';
 import assets from './assets';
-import settings from './settings';
+import dashboard from './dashboard';
+import configure from './configure';
 import community from './community';
 import moderation from './moderation';
 import install from './install';
@@ -12,10 +13,11 @@ import userDetail from './userDetail';
 export default {
   auth,
   banUserDialog,
+  dashboard,
+  configure,
   suspendUserDialog,
   userDetail,
   assets,
-  settings,
   community,
   moderation,
   install,

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

@@ -1,92 +0,0 @@
-import * as actions from '../actions/settings';
-import update from 'immutability-helper';
-
-// this is initialized here because
-// currently you have to reload the dashboard to get new stats
-// cleaner updates are planned in the future.
-// TODO: if there are more than two fields for the dashboard being created here,
-// please create a new reducer specifically for the Dashboard.
-const DASHBOARD_WINDOW_MINUTES = 5;
-let then = new Date();
-then.setMinutes(then.getMinutes() - DASHBOARD_WINDOW_MINUTES);
-
-const initialState = {
-  wordlist: {
-    banned: [],
-    suspect: []
-  },
-  dashboardWindowStart: then.toISOString(),
-  dashboardWindowEnd: new Date().toISOString(),
-  domains: {
-    whitelist: []
-  },
-  saveSettingsError: null,
-  fetchSettingsError: null,
-  fetchingSettings: false
-};
-
-export default function settings (state = initialState, action) {
-  switch (action.type) {
-  case actions.SETTINGS_LOADING:
-    return {
-      ...state,
-      fetchingSettings: true,
-      fetchSettingsError: null,
-    };
-  case actions.SETTINGS_RECEIVED:
-    return {
-      ...state,
-      fetchingSettings: false,
-      fetchSettingsError: null,
-      ...action.settings
-    };
-  case actions.SETTINGS_FETCH_ERROR:
-    return {
-      ...state,
-      fetchingSettings: false,
-      fetchSettingsError: action.error,
-    };
-  case actions.SETTINGS_UPDATED:
-    return {
-      ...state,
-      fetchingSettings: false,
-      fetchSettingsError: null,
-      ...action.settings
-    };
-  case actions.SAVE_SETTINGS_LOADING:
-    return {
-      ...state,
-      fetchingSettings: true,
-      saveSettingsError: null,
-    };
-  case actions.SAVE_SETTINGS_SUCCESS:
-    return {
-      ...state,
-      fetchingSettings: false,
-      fetchSettingsError: null,
-      ...action.settings
-    };
-  case actions.SAVE_SETTINGS_FAILED:
-    return {
-      ...state,
-      fetchingSettings: false,
-      fetchSettingsError: action.error,
-    };
-  case actions.WORDLIST_UPDATED:
-    return update(state, {
-      wordlist: {
-        [action.listName]: {
-          $set: action.list
-        }
-      }
-    });
-  case actions.DOMAINLIST_UPDATED:
-    return update(state, {
-      domains: {
-        [action.listName]: {$set: action.list},
-      }
-    });
-  default:
-    return state;
-  }
-}

client/coral-admin/src/routes/Community/components/FlaggedAccounts.css

@@ -2,6 +2,8 @@
   padding: 10px;
   display: flex;
   padding-bottom: 200px;
+  max-width: 1280px;
+  margin: 0 auto;
 }
 
 .mainFlaggedContent {

client/coral-admin/src/routes/Community/components/People.js

@@ -5,6 +5,7 @@ import Table from '../containers/Table';
 import {Pager, Icon} from 'coral-ui';
 import EmptyCard from '../../../components/EmptyCard';
 import t from 'coral-framework/services/i18n';
+import PropTypes from 'prop-types';
 
 const tableHeaders = [
   {
@@ -62,4 +63,12 @@ const People = ({commenters, searchValue, onSearchChange, ...props}) => {
   );
 };
 
+People.propTypes = {
+  commenters: PropTypes.array,
+  searchValue: PropTypes.string,
+  onSearchChange: PropTypes.func,
+  totalPages: PropTypes.number,
+  onNewPageHandler: PropTypes.func,
+};
+
 export default People;

client/coral-admin/src/routes/Community/components/Table.css

@@ -19,6 +19,13 @@
   }
 }
 
+.username, .email {
+  max-width: 215px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .email {
   display: block;
 }

client/coral-admin/src/routes/Community/components/Table.js

@@ -1,9 +1,11 @@
 import React from 'react';
-import {SelectField, Option} from 'react-mdl-selectfield';
 import styles from '../components/Table.css';
 import t from 'coral-framework/services/i18n';
+import PropTypes from 'prop-types';
+import {Dropdown, Option} from 'coral-ui';
+import cn from 'classnames';
 
-export default ({headers, commenters, onHeaderClickHandler, onRoleChange, onCommenterStatusChange, viewUserDetail}) => (
+const Table = ({headers, commenters, onHeaderClickHandler, onRoleChange, onCommenterStatusChange, viewUserDetail}) => (
   <table className={`mdl-data-table ${styles.dataTable}`}>
     <thead>
       <tr>
@@ -11,6 +13,7 @@ export default ({headers, commenters, onHeaderClickHandler, onRoleChange, onComm
           <th
             key={i}
             className="mdl-data-table__cell--non-numeric"
+            scope="col"
             onClick={() => onHeaderClickHandler({field: header.field})}>
             {header.title}
           </th>
@@ -21,36 +24,45 @@ export default ({headers, commenters, onHeaderClickHandler, onRoleChange, onComm
       {commenters.map((row, i)=> (
         <tr key={i}>
           <td className="mdl-data-table__cell--non-numeric">
-            <button onClick={() => {viewUserDetail(row.id);}} className={styles.button}>{row.username}</button>
+            <button onClick={() => {viewUserDetail(row.id);}} className={cn(styles.username, styles.button)}>{row.username}</button>
             <span className={styles.email}>{row.profiles.map(({id}) => id)}</span>
           </td>
           <td className="mdl-data-table__cell--non-numeric">
             {row.created_at}
           </td>
           <td className="mdl-data-table__cell--non-numeric">
-            <SelectField
-              value={row.status || ''}
-              className={styles.selectField}
-              label={t('community.status')}
-              onChange={(status) => onCommenterStatusChange(row.id, status)}>
-              <Option value={'ACTIVE'}>{t('community.active')}</Option>
-              <Option value={'BANNED'}>{t('community.banned')}</Option>
-            </SelectField>
+            <Dropdown 
+              value={row.status}
+              placeholder={t('community.status')}
+              onChange={(status) => onCommenterStatusChange(row.id, status)}>     
+              <Option value={'ACTIVE'} label={t('community.active')} />
+              <Option value={'BANNED'} label={t('community.banned')} />
+            </Dropdown>       
           </td>
           <td className="mdl-data-table__cell--non-numeric">
-            <SelectField
+            <Dropdown
               value={row.roles[0] || ''}
-              className={styles.selectField}
-              label={t('community.role')}
+              placeholder={t('community.role')}
               onChange={(role) => onRoleChange(row.id, role)}>
-              <Option value={''}>.</Option>
-              <Option value={'STAFF'}>{t('community.staff')}</Option>
-              <Option value={'MODERATOR'}>{t('community.moderator')}</Option>
-              <Option value={'ADMIN'}>{t('community.admin')}</Option>
-            </SelectField>
+              <Option value={''} label={t('community.none')} />
+              <Option value={'STAFF'} label={t('community.staff')} />
+              <Option value={'MODERATOR'} label={t('community.moderator')} />
+              <Option value={'ADMIN'} label={t('community.admin')} />
+            </Dropdown>
           </td>
         </tr>
       ))}
     </tbody>
   </table>
 );
+
+Table.propTypes = {
+  headers: PropTypes.array,
+  commenters: PropTypes.array,
+  onHeaderClickHandler: PropTypes.func,
+  onRoleChange: PropTypes.func,
+  onCommenterStatusChange: PropTypes.func,
+  viewUserDetail: PropTypes.func,
+};
+
+export default Table;

client/coral-admin/src/routes/Community/containers/Table.js

@@ -1,10 +1,10 @@
 import React, {Component} from 'react';
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
-import {compose} from 'react-apollo';
 import {setRole, setCommenterStatus} from '../../../actions/community';
 import Table from '../components/Table';
 import {viewUserDetail} from '../../../actions/userDetail';
+import PropTypes from 'prop-types';
 
 class TableContainer extends Component {
 
@@ -22,6 +22,12 @@ class TableContainer extends Component {
   }
 }
 
+TableContainer.propTypes = {
+  setRole: PropTypes.func,
+  setCommenterStatus: PropTypes.func,
+  commenters: PropTypes.array,
+};
+
 const mapStateToProps = (state) => ({
   commenters: state.community.accounts,
 });
@@ -33,7 +39,5 @@ const mapDispatchToProps = (dispatch) =>
     viewUserDetail,
   }, dispatch);
 
-export default compose(
-  connect(mapStateToProps, mapDispatchToProps),
-)(TableContainer);
+export default connect(mapStateToProps, mapDispatchToProps)(TableContainer);
 

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

@@ -1,15 +1,7 @@
-/**
- * @TODO: deprecated as this file contains styles from multiple components. Please refactor.
- */
-
 .container {
+  max-width: 1280px;
+  margin: 0 auto;
   display: flex;
-
-  h3 {
-    color: black;
-    font-size: 1.26em;
-    font-weight: 500;
-  }
 }
 
 .leftColumn {
@@ -17,108 +9,8 @@
   width: 234px;
 }
 
-.mainContent {
-  width: calc(100% - 300px);
-  padding: 10px 14px;
-  box-sizing: border-box;
-  max-width: 718px;
-}
-
-.configSetting {
-  margin-bottom: 20px;
-  align-items: flex-start;
-  min-height: 100px;
-  max-width: 600px;
-
-  h3 {
-    margin: 0;
-  }
-
-  .actions {
-    display: inline-block;
-    width: 100%;
-
-    .copiedText {
-      display: inline-block;
-      color: #00796b;
-      padding: 12px;
-      font-size: 14px;
-      float: right;
-    }
-
-    .copyButton {
-      display: inline-block;
-      width: 200px;
-      float: right;
-    }
-  }
-}
-
-.settingsError {
-  color: #d50000;
-}
-
-.settingsError i {
-  font-size: 14px;
-  margin-right: 3px;
-}
-
-.settingsHeader {
-  margin-top: 3px;
-  margin-bottom: 7px;
-  font-size: 18px;
-  font-weight: 500;
-}
-
-.disabledSettingText {
-  color: #ccc;
-}
-
-.configSettingInfoBox {
-  min-height: 100px;
-  margin-bottom: 20px;
-  width: auto;
-  height: auto;
-  text-align: left;
-  overflow: visible;
-}
-
-.configSettingEmbed {
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  margin-bottom: 10px;
-  display: block;
-}
-
-.configTimeoutSelect {
-  display: inline-block;
-  margin-left: 20px;
-
-  i { /* fix for firefox and react-mdl-selectfield@0.2.0 */
-    padding: 20px 0;
-    vertical-align: top;
-  }
-}
-
-.inlineTextfield {
-  border-color: #ccc;
-  border-style: solid;
-  border-width: 0px 0px 1px 0px;
-  text-align: center;
-  font-size: inherit;
-}
-
-.inlineTextfield:focus {
-  outline: none;
-}
-
-.charCountTexfield, .editCommentTimeframeTextfield {
-  width: 4em;
-  padding: 0px;
-}
-
-.charCountTexfieldEnabled {
-  border-color: #00796b;
+.saveBox {
+  margin-top: 38px;
 }
 
 .changedSave {
@@ -126,81 +18,10 @@
   color: white;
 }
 
-.embedInput {
-  width: 100%;
-  display: block;
-  outline: none;
-  border: 1px solid rgba(0,0,0,.12);
-  padding: 6px;
+.mainContent {
+  width: calc(100% - 300px);
+  padding: 10px 14px 80px 14px;
   box-sizing: border-box;
-  border-radius: 2px;
-  margin: 5px auto;
-  min-height: 175px;
-  font-size: 14px;
-  resize: none;
+  max-width: 718px;
 }
 
-.customCSSInput {
-  width: 100%;
-  font-size: 14px;
-  padding: 14px;
-  letter-spacing: 0.03em;
-  color: #555;
-  box-sizing: border-box;
-}
-
-.enabledSetting {
-  border-left-color: #00796b;
-  border-left-style: solid;
-  border-left-width: 7px;
-}
-
-.disabledSetting {
-  padding-left: 22px;
-}
-
-.hidden {
-  display: none;
-}
-
-.saveBox {
-  margin-top: 38px;
-}
-
-.settingsSection {
-  padding-bottom: 200px;
-  .action {
-    display: inline-block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    padding: 20px;
-  }
-
-  .content {
-    display: inline-block;
-    padding: 0px 30px;
-    box-sizing: border-box;
-    width: 100%;
-  }
-}
-
-.Configure {
-
-  p {
-    line-height: 1.2;
-    max-width: 550px;
-  }
-
-  .wrapper {
-    width: 100%;
-  }
-
-  .descriptionBox {
-    margin-top: 15px;
-
-    input {
-      height: 150px;
-    }
-  }
-}

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

@@ -1,119 +1,40 @@
 import React, {Component} from 'react';
 
-import {Button, List, Item, Card, Spinner} from 'coral-ui';
+import {Button, List, Item} from 'coral-ui';
 import styles from './Configure.css';
-import StreamSettings from './StreamSettings';
-import ModerationSettings from './ModerationSettings';
-import TechSettings from './TechSettings';
+import StreamSettings from '../containers/StreamSettings';
+import ModerationSettings from '../containers/ModerationSettings';
+import TechSettings from '../containers/TechSettings';
 import t from 'coral-framework/services/i18n';
 import {can} from 'coral-framework/services/perms';
+import PropTypes from 'prop-types';
 
 export default class Configure extends Component {
 
-  state = {
-    activeSection: 'stream',
-    changed: false,
-    errors: {}
-  };
-
-  saveSettings = () => {
-    this.props.saveSettingsToServer();
-    this.setState({changed: false});
-  }
-
-  changeSection = (activeSection) => {
-    this.setState({activeSection});
-  }
-
-  onChangeWordlist = (listName, list) => {
-    this.setState({changed: true});
-    this.props.updateWordlist(listName, list);
-  }
-
-  onChangeDomainlist = (listName, list) => {
-    this.setState({changed: true});
-    this.props.updateDomainlist(listName, list);
-  }
-
-  onSettingUpdate = (setting) => {
-    this.setState({changed: true});
-    this.props.updateSettings(setting);
-  }
-
-  // Sets an arbitrary error string and a boolean state.
-  // This allows the system to track multiple errors.
-  onSettingError = (error, state) => {
-    this.setState((prevState) => {
-      prevState.errors[error] = state;
-      return prevState;
-    });
-  }
-
-  getSection (section) {
-    const pageTitle = this.getPageTitle(section);
-    let sectionComponent;
+  getSectionComponent(section) {
     switch(section){
     case 'stream':
-      sectionComponent = <StreamSettings
-        settings={this.props.settings}
-        updateSettings={this.onSettingUpdate}
-        errors={this.state.errors}
-        settingsError={this.onSettingError}/>;
-      break;
+      return StreamSettings;
     case 'moderation':
-      sectionComponent = <ModerationSettings
-        onChangeWordlist={this.onChangeWordlist}
-        settings={this.props.settings}
-        updateSettings={this.onSettingUpdate} />;
-      break;
+      return ModerationSettings;
     case 'tech':
-      sectionComponent = <TechSettings
-        onChangeDomainlist={this.onChangeDomainlist}
-        settings={this.props.settings}
-        updateSettings={this.onSettingUpdate} />;
-    }
-
-    if (this.props.settings.fetchingSettings) {
-      return <Card shadow="4"><Spinner/>Loading settings...</Card>;
-    }
-
-    return (
-      <div className={styles.settingsSection}>
-        <h3>{pageTitle}</h3>
-        {sectionComponent}
-      </div>
-    );
-  }
-
-  getPageTitle (section) {
-    switch(section) {
-    case 'stream':
-      return t('configure.stream_settings');
-    case 'moderation':
-      return t('configure.moderation_settings');
-    case 'tech':
-      return t('configure.tech_settings');
-    default:
-      return '';
+      return TechSettings;
     }
+    throw new Error(`Unknown section ${section}`);
   }
 
   render () {
-    const {activeSection} = this.state;
-    const section = this.getSection(activeSection);
-    const {auth: {user}} = this.props;
+    const {auth: {user}, canSave, savePending, setActiveSection, activeSection} = this.props;
+    const SectionComponent = this.getSectionComponent(activeSection);
 
     if (!can(user, 'UPDATE_CONFIG')) {
       return <p>You must be an administrator to access config settings. Please find the nearest Admin and ask them to level you up!</p>;
     }
 
-    const showSave = Object.keys(this.state.errors).reduce(
-      (bool, error) => this.state.errors[error] ? false : bool, this.state.changed);
-
     return (
       <div className={styles.container}>
         <div className={styles.leftColumn}>
-          <List onChange={this.changeSection} activeItem={activeSection}>
+          <List onChange={setActiveSection} activeItem={activeSection}>
             <Item itemId='stream' icon='speaker_notes'>
               {t('configure.stream_settings')}
             </Item>
@@ -126,10 +47,10 @@ export default class Configure extends Component {
           </List>
           <div className={styles.saveBox}>
             {
-              showSave ?
+              canSave ?
                 <Button
                   raised
-                  onClick={this.saveSettings}
+                  onClick={savePending}
                   className={styles.changedSave}
                   icon='check'
                   full
@@ -150,11 +71,25 @@ export default class Configure extends Component {
 
         </div>
         <div className={styles.mainContent}>
-          { this.props.saveFetchingError }
-          { this.props.fetchSettingsError }
-          { section }
+          <SectionComponent
+            data={this.props.data}
+            root={this.props.root}
+            settings={this.props.settings}
+          />
         </div>
       </div>
     );
   }
 }
+
+Configure.propTypes = {
+  notify: PropTypes.func.isRequired,
+  savePending: PropTypes.func.isRequired,
+  auth: PropTypes.object.isRequired,
+  data: PropTypes.object.isRequired,
+  root: PropTypes.object.isRequired,
+  settings: PropTypes.object.isRequired,
+  canSave: PropTypes.bool.isRequired,
+  setActiveSection: PropTypes.func.isRequired,
+  activeSection: PropTypes.string.isRequired,
+};

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

@@ -0,0 +1,5 @@
+.title {
+  color: black;
+  font-size: 1.26em;
+  font-weight: 500;
+}

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './ConfigurePage.css';
+
+const ConfigurePage = ({title, children, ...rest}) => (
+  <div {...rest}>
+    <h3 className={styles.title}>{title}</h3>
+    {children}
+  </div>
+);
+
+ConfigurePage.propTypes = {
+  title: PropTypes.string.isRequired,
+  children: PropTypes.node,
+};
+
+export default ConfigurePage;

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

@@ -1,25 +1,25 @@
 import React from 'react';
-import {Card} from 'coral-ui';
-import styles from './Configure.css';
+import PropTypes from 'prop-types';
 import TagsInput from 'coral-admin/src/components/TagsInput';
 import t from 'coral-framework/services/i18n';
+import ConfigureCard from 'coral-framework/components/ConfigureCard';
 
 const Domainlist = ({domains, onChangeDomainlist}) => {
   return (
-    <Card id={styles.domainlist} className={styles.configSetting}>
-      <div className={styles.wrapper}>
-        <div className={styles.settingsHeader}>{t('configure.domain_list_title')}</div>
-        <p className={styles.domainlistDesc}>{t('configure.domain_list_text')}</p>
-        <div className={styles.wrapper}>
-          <TagsInput
-            value={domains}
-            inputProps={{placeholder: 'URL'}}
-            onChange={(tags) => onChangeDomainlist('whitelist', tags)}
-          />
-        </div>
-      </div>
-    </Card>
+    <ConfigureCard title={t('configure.domain_list_title')}>
+      <p>{t('configure.domain_list_text')}</p>
+      <TagsInput
+        value={domains}
+        inputProps={{placeholder: 'URL'}}
+        onChange={(tags) => onChangeDomainlist('whitelist', tags)}
+      />
+    </ConfigureCard>
   );
 };
 
+Domainlist.propTypes = {
+  domains: PropTypes.array.isRequired,
+  onChangeDomainlist: PropTypes.func.isRequired,
+};
+
 export default Domainlist;

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

@@ -0,0 +1,32 @@
+.embedInput {
+  width: 100%;
+  display: block;
+  outline: none;
+  border: 1px solid rgba(0,0,0,.12);
+  padding: 6px;
+  box-sizing: border-box;
+  border-radius: 2px;
+  margin: 5px auto;
+  min-height: 175px;
+  font-size: 14px;
+  resize: none;
+}
+
+.copiedText {
+  display: inline-block;
+  color: #00796b;
+  padding: 12px;
+  font-size: 14px;
+  float: right;
+}
+
+.copyButton {
+  display: inline-block;
+  width: 200px;
+  float: right;
+}
+
+.actions {
+  display: inline-block;
+  width: 100%;
+}

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

@@ -1,17 +1,14 @@
 import React, {Component} from 'react';
 import t from 'coral-framework/services/i18n';
 import join from 'url-join';
-import styles from './Configure.css';
-import {Button, Card} from 'coral-ui';
+import styles from './EmbedLink.css';
+import {Button} from 'coral-ui';
 import {BASE_URL} from 'coral-framework/constants/url';
+import ConfigureCard from 'coral-framework/components/ConfigureCard';
 
 class EmbedLink extends Component {
 
-  constructor (props) {
-    super(props);
-
-    this.state = {copied: false};
-  }
+  state = {copied: false};
 
   copyToClipBoard = () => {
     const copyTextarea = document.querySelector(`.${styles.embedInput}`);
@@ -38,21 +35,18 @@ class EmbedLink extends Component {
 "></script>
     `.trim();
     return (
-      <Card shadow="2" className={styles.configSetting}>
-        <div className={styles.wrapper}>
-          <div className={styles.settingsHeader}>Embed Comment Stream</div>
-          <p>{t('configure.copy_and_paste')}</p>
-          <textarea rows={5} type='text' className={styles.embedInput} value={embedText} readOnly={true}/>
-          <div className={styles.actions}>
-            <Button raised className={styles.copyButton} onClick={this.copyToClipBoard} cStyle="black">
-              {t('embedlink.copy')}
-            </Button>
-            <div className={styles.copiedText}>
-              {this.state.copied && 'Copied!'}
-            </div>
+      <ConfigureCard title={'Embed Comment Stream'}>
+        <p>{t('configure.copy_and_paste')}</p>
+        <textarea rows={5} type='text' className={styles.embedInput} value={embedText} readOnly={true}/>
+        <div className={styles.actions}>
+          <Button raised className={styles.copyButton} onClick={this.copyToClipBoard} cStyle="black">
+            {t('embedlink.copy')}
+          </Button>
+          <div className={styles.copiedText}>
+            {this.state.copied && 'Copied!'}
           </div>
         </div>
-      </Card>
+      </ConfigureCard>
     );
   }
 }

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

@@ -1,90 +1,90 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styles from './Configure.css';
-import {Card} from 'coral-ui';
-import {Checkbox} from 'react-mdl';
 import Wordlist from './Wordlist';
+import Slot from 'coral-framework/components/Slot';
 import t from 'coral-framework/services/i18n';
+import ConfigurePage from './ConfigurePage';
+import ConfigureCard from 'coral-framework/components/ConfigureCard';
 
-const updateModeration = (updateSettings, mod) => () => {
-  const moderation = mod === 'PRE' ? 'POST' : 'PRE';
-  updateSettings({moderation});
-};
+class ModerationSettings extends React.Component {
 
-const updateEmailConfirmation = (updateSettings, verify) => () => {
-  updateSettings({requireEmailConfirmation: !verify});
-};
+  updateModeration = () => {
+    const updater = {moderation: {$set: this.props.settings.moderation === 'PRE' ? 'POST' : 'PRE'}};
+    this.props.updatePending({updater});
+  };
 
-const updatePremodLinksEnable = (updateSettings, premodLinks) => () => {
-  const premodLinksEnable = !premodLinks;
-  updateSettings({premodLinksEnable});
-};
+  updateEmailConfirmation = () => {
+    const updater = {requireEmailConfirmation: {$set: !this.props.settings.requireEmailConfirmation}};
+    this.props.updatePending({updater});
+  };
 
-const ModerationSettings = ({settings, updateSettings, onChangeWordlist}) => {
+  updatePremodLinksEnable = () => {
+    const updater = {premodLinksEnable: {$set: !this.props.settings.premodLinksEnable}};
+    this.props.updatePending({updater});
+  };
 
-  // just putting this here for shorthand below
-  const on = styles.enabledSetting;
-  const off = styles.disabledSetting;
+  updateWordlist = (listName, list) => {
+    this.props.updatePending({updater: {
+      wordlist: {$apply: (wordlist) => {
+        const changeSet = {[listName]: list};
+        if (!wordlist) {
+          return changeSet;
+        }
+        return {
+          ...wordlist,
+          ...changeSet,
+        };
+      }},
+    }});
+  };
 
-  return (
-    <div className={styles.Configure}>
-      <Card className={`${styles.configSetting} ${settings.requireEmailConfirmation ? on : off}`}>
-        <div className={styles.action}>
-          <Checkbox
-            onChange={updateEmailConfirmation(updateSettings, settings.requireEmailConfirmation)}
-            checked={settings.requireEmailConfirmation} />
-        </div>
-        <div className={styles.content}>
-          <div className={styles.settingsHeader}>{t('configure.require_email_verification')}</div>
-          <p className={settings.requireEmailConfirmation ? '' : styles.disabledSettingText}>
-            {t('configure.require_email_verification_text')}
-          </p>
-        </div>
-      </Card>
-      <Card className={`${styles.configSetting} ${settings.moderation === 'PRE' ? on : off}`}>
-        <div className={styles.action}>
-          <Checkbox
-            onChange={updateModeration(updateSettings, settings.moderation)}
-            checked={settings.moderation === 'PRE'} />
-        </div>
-        <div className={styles.content}>
-          <div className={styles.settingsHeader}>{t('configure.enable_pre_moderation')}</div>
-          <p className={settings.moderation === 'PRE' ? '' : styles.disabledSettingText}>
-            {t('configure.enable_pre_moderation_text')}
-          </p>
-        </div>
-      </Card>
-      <Card className={`${styles.configSetting} ${settings.premodLinksEnable ? on : off}`}>
-        <div className={styles.action}>
-          <Checkbox
-            onChange={updatePremodLinksEnable(updateSettings, settings.premodLinksEnable)}
-            checked={settings.premodLinksEnable} />
-        </div>
-        <div className={styles.content}>
-          <div className={styles.settingsHeader}>{t('configure.enable_premod_links')}</div>
-          <p>
-            {t('configure.enable_premod_links_text')}
-          </p>
-        </div>
-      </Card>
-      <Wordlist
-        bannedWords={settings.wordlist.banned}
-        suspectWords={settings.wordlist.suspect}
-        onChangeWordlist={onChangeWordlist} />
-    </div>
-  );
-};
+  render() {
+    const {settings, data, root} = this.props;
+
+    return (
+      <ConfigurePage
+        title={t('configure.moderation_settings')}
+      >
+        <ConfigureCard
+          checked={settings.requireEmailConfirmation}
+          onCheckbox={this.updateEmailConfirmation}
+          title={t('configure.require_email_verification')}
+        >
+          {t('configure.require_email_verification_text')}
+        </ConfigureCard>
+        <ConfigureCard
+          checked={settings.moderation === 'PRE'}
+          onCheckbox={this.updateModeration}
+          title={t('configure.enable_pre_moderation')}
+        >
+          {t('configure.enable_pre_moderation_text')}
+        </ConfigureCard>
+        <ConfigureCard
+          checked={settings.premodLinksEnable}
+          onCheckbox={this.updatePremodLinksEnable}
+          title={t('configure.enable_premod_links')}
+        >
+          {t('configure.enable_premod_links_text')}
+        </ConfigureCard>
+        <Wordlist
+          bannedWords={settings.wordlist.banned}
+          suspectWords={settings.wordlist.suspect}
+          onChangeWordlist={this.updateWordlist} />
+        <Slot
+          fill="adminModerationSettings"
+          data={data}
+          queryData={{root, settings}}
+        />
+      </ConfigurePage>
+    );
+  }
+}
 
 ModerationSettings.propTypes = {
-  onChangeWordlist: PropTypes.func.isRequired,
-  settings: PropTypes.shape({
-    moderation: PropTypes.string.isRequired,
-    wordlist: PropTypes.shape({
-      banned: PropTypes.array.isRequired,
-      suspect: PropTypes.array.isRequired
-    })
-  }).isRequired,
-  updateSettings: PropTypes.func.isRequired
+  updatePending: PropTypes.func.isRequired,
+  data: PropTypes.object.isRequired,
+  root: PropTypes.object.isRequired,
+  settings: PropTypes.object.isRequired,
 };
 
 export default ModerationSettings;

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

@@ -0,0 +1,55 @@
+.configSettingInfoBox {
+  min-height: 100px;
+  margin-bottom: 20px;
+  width: auto;
+  height: auto;
+  text-align: left;
+  overflow: visible;
+}
+
+.descriptionBox {
+  margin-top: 15px;
+
+  input {
+    height: 150px;
+  }
+}
+
+.configTimeoutSelect {
+  display: inline-block;
+  margin-left: 20px;
+
+  i { /* fix for firefox and react-mdl-selectfield@0.2.0 */
+    padding: 20px 0;
+    vertical-align: top;
+  }
+}
+
+.hidden {
+  display: none;
+}
+
+.inlineTextfield {
+  border-color: #ccc;
+  border-style: solid;
+  border-width: 0px 0px 1px 0px;
+  text-align: center;
+  font-size: inherit;
+}
+
+.inlineTextfield:focus {
+  outline: none;
+}
+
+.charCountTexfield, .editCommentTimeframeTextfield {
+  width: 4em;
+  padding: 0px;
+}
+
+.charCountTexfieldEnabled {
+  border-color: #00796b;
+}
+
+
+
+

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

@@ -1,10 +1,15 @@
 import React from 'react';
 import {SelectField, Option} from 'react-mdl-selectfield';
 import t from 'coral-framework/services/i18n';
-import styles from './Configure.css';
-import {Checkbox, Textfield} from 'react-mdl';
-import {Card, Icon, TextArea} from 'coral-ui';
+import styles from './StreamSettings.css';
+import {Textfield} from 'react-mdl';
+import {Icon, TextArea} from 'coral-ui';
+import PropTypes from 'prop-types';
+import Slot from 'coral-framework/components/Slot';
 import MarkdownEditor from 'coral-framework/components/MarkdownEditor';
+import cn from 'classnames';
+import ConfigurePage from './ConfigurePage';
+import ConfigureCard from 'coral-framework/components/ConfigureCard';
 
 const TIMESTAMPS = {
   weeks: 60 * 60 * 24 * 7,
@@ -12,187 +17,6 @@ const TIMESTAMPS = {
   hours: 60 * 60
 };
 
-const updateCharCountEnable = (updateSettings, charCountChecked) => () => {
-  const charCountEnable = !charCountChecked;
-  updateSettings({charCountEnable});
-};
-
-const updateCharCount = (updateSettings, settingsError) => (event) => {
-  const charCount = event.target.value;
-  if (charCount.match(/[^0-9]/) || charCount.length === 0) {
-    settingsError('charCount', true);
-  } else {
-    settingsError('charCount', false);
-  }
-  updateSettings({charCount: charCount});
-};
-
-const updateInfoBoxEnable = (updateSettings, infoBox) => () => {
-  const infoBoxEnable = !infoBox;
-  updateSettings({infoBoxEnable});
-};
-
-const updateInfoBoxContent = (updateSettings) => (value) => {
-  const infoBoxContent = value;
-  updateSettings({infoBoxContent});
-};
-
-const updateAutoClose = (updateSettings, autoCloseStream) => () => {
-  updateSettings({autoCloseStream});
-};
-
-const updateClosedMessage = (updateSettings) => (event) => {
-  const closedMessage = event.target.value;
-  updateSettings({closedMessage});
-};
-
-// If we are changing the measure we need to recalculate using the old amount
-// Same thing if we are just changing the amount
-const updateClosedTimeout = (updateSettings, ts, isMeasure) => (event) => {
-  if (isMeasure) {
-    const amount = getTimeoutAmount(ts);
-    const closedTimeout = amount * TIMESTAMPS[event];
-    updateSettings({closedTimeout});
-  } else {
-    const val = event.target.value;
-    const measure = getTimeoutMeasure(ts);
-    const closedTimeout = val * TIMESTAMPS[measure];
-    updateSettings({closedTimeout});
-  }
-};
-
-const updateEditCommentWindowLength = (updateSettings) => (e) => {
-  const value = e.target.value;
-  const valueAsNumber = parseFloat(value);
-  const milliseconds = (!isNaN(valueAsNumber)) && (valueAsNumber * 1000);
-  updateSettings({editCommentWindowLength: milliseconds || value});
-};
-
-const StreamSettings = ({updateSettings, settingsError, settings, errors}) => {
-
-  // just putting this here for shorthand below
-  const on = styles.enabledSetting;
-  const off = styles.disabledSetting;
-
-  return (
-    <div className={styles.Configure}>
-      <Card className={`${styles.configSetting} ${settings.charCountEnable ? on : off}`}>
-        <div className={styles.action}>
-          <Checkbox
-            onChange={updateCharCountEnable(updateSettings, settings.charCountEnable)}
-            checked={settings.charCountEnable} />
-        </div>
-        <div className={styles.content}>
-          <div className={styles.settingsHeader}>{t('configure.comment_count_header')}</div>
-          <p className={settings.charCountEnable ? '' : styles.disabledSettingText}>
-            <span>{t('configure.comment_count_text_pre')}</span>
-            <input type='text'
-              className={`${styles.inlineTextfield} ${styles.charCountTexfield} ${settings.charCountEnable && styles.charCountTexfieldEnabled}`}
-              htmlFor='charCount'
-              onChange={updateCharCount(updateSettings, settingsError)}
-              value={settings.charCount}
-              disabled={settings.charCountEnable ? '' : 'disabled'}
-            />
-            <span>{t('configure.comment_count_text_post')}</span>
-            {
-              errors.charCount &&
-                <span className={styles.settingsError}>
-                  <br/>
-                  <Icon name="error_outline"/>
-                  {t('configure.comment_count_error')}
-                </span>
-            }
-          </p>
-        </div>
-      </Card>
-      <Card className={`${styles.configSetting} ${styles.configSettingInfoBox} ${settings.infoBoxEnable ? on : off}`}>
-        <div className={styles.action}>
-          <Checkbox
-            onChange={updateInfoBoxEnable(updateSettings, settings.infoBoxEnable)}
-            checked={settings.infoBoxEnable} />
-        </div>
-        <div className={styles.content}>
-          <div className={styles.settingsHeader}>
-            {t('configure.include_comment_stream')}
-          </div>
-          <p className={settings.infoBoxEnable ? '' : styles.disabledSettingText}>
-            {t('configure.include_comment_stream_desc')}
-          </p>
-          <div className={`${styles.configSettingInfoBox} ${settings.infoBoxEnable ? null : styles.hidden}`} >
-            <MarkdownEditor
-              className={styles.descriptionBox}
-              onChange={updateInfoBoxContent(updateSettings)}
-              value={settings.infoBoxContent}
-            />
-          </div>
-        </div>
-      </Card>
-      <Card className={`${styles.configSetting} ${styles.configSettingInfoBox}`}>
-        <div className={styles.wrapper}>
-          <div className={styles.settingsHeader}>{t('configure.closed_stream_settings')}</div>
-          <p>{t('configure.closed_comments_desc')}</p>
-          <div>
-            <TextArea className={styles.descriptionBox}
-              onChange={updateClosedMessage(updateSettings)}
-              value={settings.closedMessage}
-            />
-          </div>
-        </div>
-      </Card>
-      {/* Edit Comment Timeframe */}
-      <Card className={styles.configSetting}>
-        <div className={styles.settingsHeader}>{t('configure.edit_comment_timeframe_heading')}</div>
-        <p>
-          {t('configure.edit_comment_timeframe_text_pre')}
-          &nbsp;
-          <input
-            className={`${styles.inlineTextfield} ${styles.editCommentTimeframeTextfield}`}
-            type="number"
-            min="0"
-            onChange={updateEditCommentWindowLength(updateSettings)}
-            placeholder="30"
-            defaultValue={(settings.editCommentWindowLength / 1000) /* saved as ms, rendered as seconds */}
-            pattern='[0-9]+([\.][0-9]*)?'
-          />
-          &nbsp;
-          {t('configure.edit_comment_timeframe_text_post')}
-        </p>
-      </Card>
-      <Card className={`${styles.configSetting} ${styles.configSettingInfoBox}`}>
-        <div className={styles.action}>
-          <Checkbox
-            onChange={updateAutoClose(updateSettings, !settings.autoCloseStream)}
-            checked={settings.autoCloseStream} />
-        </div>
-        <div className={styles.content}>
-          <div className={styles.settingsHeader}>{t('configure.close_after')}</div>
-          <br />
-          <Textfield
-            type='number'
-            pattern='[0-9]+'
-            style={{width: 50}}
-            onChange={updateClosedTimeout(updateSettings, settings.closedTimeout)}
-            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={updateClosedTimeout(updateSettings, settings.closedTimeout, true)}>
-              <Option value={'hours'}>{t('configure.hours')}</Option>
-              <Option value={'days'}>{t('configure.days')}</Option>
-              <Option value={'weeks'}>{t('configure.weeks')}</Option>
-            </SelectField>
-          </div>
-        </div>
-      </Card>
-      {/* the above card should be the last one if at all possible because of z-index issues with the selects */}
-    </div>
-  );
-};
-
-export default StreamSettings;
-
 // To see if we are talking about weeks, days or hours
 // We talk the remainder of the division and see if it's 0
 const getTimeoutMeasure = (ts) => {
@@ -208,3 +32,190 @@ const getTimeoutMeasure = (ts) => {
 // Dividing the amount by it's measure (hours, days, weeks) we
 // obtain the amount of time
 const getTimeoutAmount = (ts) => ts / TIMESTAMPS[getTimeoutMeasure(ts)];
+
+class StreamSettings extends React.Component {
+
+  updateCharCountEnable = () => {
+    const updater = {charCountEnable: {$set: !this.props.settings.charCountEnable}};
+    this.props.updatePending({updater});
+  };
+
+  updateCharCount = (event) => {
+    let error = null;
+    const charCount = event.target.value;
+    if (charCount.match(/[^0-9]/) || charCount.length === 0) {
+      error = true;
+    }
+
+    const updater = {charCount: {$set: charCount}};
+    const errorUpdater = {charCount: {$set: error}};
+
+    this.props.updatePending({updater, errorUpdater});
+  };
+
+  updateInfoBoxEnable = () => {
+    const updater = {infoBoxEnable: {$set: !this.props.settings.infoBoxEnable}};
+    this.props.updatePending({updater});
+  };
+
+  updateInfoBoxContent = (value) => {
+    const updater = {infoBoxContent: {$set: value}};
+    this.props.updatePending({updater});
+  };
+
+  updateClosedMessage = (event) => {
+    const updater = {closedMessage: {$set: event.target.value}};
+    this.props.updatePending({updater});
+  };
+
+  updateEditCommentWindowLength = (e) => {
+    const value = e.target.value;
+    const valueAsNumber = parseFloat(value);
+    const milliseconds = (!isNaN(valueAsNumber)) && (valueAsNumber * 1000);
+
+    const updater = {editCommentWindowLength: {$set: milliseconds || value}};
+    this.props.updatePending({updater});
+  };
+
+  updateAutoClose = () => {
+    const updater = {autoCloseStream: {$set: !this.props.settings.autoCloseStream}};
+    this.props.updatePending({updater});
+  };
+
+  updateClosedTimeout = (event) => {
+    const val = event.target.value;
+    const measure = getTimeoutMeasure(this.props.settings.closedTimeout);
+
+    const updater = {closedTimeout: {$set: val * TIMESTAMPS[measure]}};
+    this.props.updatePending({updater});
+  };
+
+  // If we are changing the measure we need to recalculate using the old amount
+  // Same thing if we are just changing the amount
+  updateClosedTimeoutMeasure = (event) => {
+    const amount = getTimeoutAmount(this.props.settings.closedTimeout);
+
+    const updater = {closedTimeout: {$set: amount * TIMESTAMPS[event]}};
+    this.props.updatePending({updater});
+  };
+
+  render() {
+    const {settings, data, root, errors} = this.props;
+
+    return (
+      <ConfigurePage
+        title={t('configure.stream_settings')}
+      >
+        <ConfigureCard
+          checked={settings.charCountEnable}
+          onCheckbox={this.updateCharCountEnable}
+          title={t('configure.comment_count_header')}
+        >
+          <span>{t('configure.comment_count_text_pre')}</span>
+          <input type='text'
+            className={cn(styles.inlineTextfield, styles.charCountTexfield, settings.charCountEnable && styles.charCountTexfieldEnable)}
+            htmlFor='charCount'
+            onChange={this.updateCharCount}
+            value={settings.charCount}
+            disabled={settings.charCountEnable ? '' : 'disabled'}
+          />
+          <span>{t('configure.comment_count_text_post')}</span>
+          {
+            errors.charCount &&
+              <span className={styles.settingsError}>
+                <br/>
+                <Icon name="error_outline"/>
+                {t('configure.comment_count_error')}
+              </span>
+          }
+        </ConfigureCard>
+        <ConfigureCard
+          checked={settings.infoBoxEnable}
+          onCheckbox={this.updateInfoBoxEnable}
+          title={t('configure.include_comment_stream')}
+        >
+          <p>
+            {t('configure.include_comment_stream_desc')}
+          </p>
+          <div className={cn(styles.configSettingInfoBox, settings.infoBoxEnable ? null : styles.hidden)} >
+            <MarkdownEditor
+              className={styles.descriptionBox}
+              onChange={this.updateInfoBoxContent}
+              value={settings.infoBoxContent}
+            />
+          </div>
+        </ConfigureCard>
+        <ConfigureCard
+          checked={settings.configSettingInfoBox}
+          onCheckbox={this.updateClosedMessage}
+          title={t('configure.closed_stream_settings')}
+        >
+          <p>{t('configure.closed_comments_desc')}</p>
+          <div>
+            <TextArea className={styles.descriptionBox}
+              onChange={this.updateClosedMessage}
+              value={settings.closedMessage}
+            />
+          </div>
+        </ConfigureCard>
+        <ConfigureCard
+          title={t('configure.edit_comment_timeframe_heading')}
+        >
+          {t('configure.edit_comment_timeframe_text_pre')}
+          &nbsp;
+          <input
+            className={cn(styles.inlineTextfield, styles.editCommentTimeframeTextfield)}
+            type="number"
+            min="0"
+            onChange={this.updateEditCommentWindowLength}
+            placeholder="30"
+            defaultValue={(settings.editCommentWindowLength / 1000) /* saved as ms, rendered as seconds */}
+            pattern='[0-9]+([\.][0-9]*)?'
+          />
+          &nbsp;
+          {t('configure.edit_comment_timeframe_text_post')}
+        </ConfigureCard>
+        <ConfigureCard
+          checked={settings.autoCloseStream}
+          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>
+        </ConfigureCard>
+        {/* the above card should be the last one if at all possible because of z-index issues with the selects */}
+        <Slot
+          fill="adminStreamSettings"
+          data={data}
+          queryData={{root, settings}}
+        />
+      </ConfigurePage>
+    );
+  }
+}
+
+StreamSettings.propTypes = {
+  updatePending: PropTypes.func.isRequired,
+  errors: PropTypes.object.isRequired,
+  data: PropTypes.object.isRequired,
+  root: PropTypes.object.isRequired,
+  settings: PropTypes.object.isRequired,
+};
+
+export default StreamSettings;
+

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

@@ -0,0 +1,10 @@
+.customCSSInput {
+  width: 100%;
+  font-size: 14px;
+  padding: 14px;
+  letter-spacing: 0.03em;
+  color: #555;
+  box-sizing: border-box;
+}
+
+

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

@@ -1,44 +1,67 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {Card} from 'coral-ui';
 import Domainlist from './Domainlist';
 import EmbedLink from './EmbedLink';
-import styles from './Configure.css';
+import styles from './TechSettings.css';
+import Slot from 'coral-framework/components/Slot';
 import t from 'coral-framework/services/i18n';
+import ConfigurePage from './ConfigurePage';
+import ConfigureCard from 'coral-framework/components/ConfigureCard';
 
-const updateCustomCssUrl = (updateSettings) => (event) => {
-  const customCssUrl = event.target.value;
-  updateSettings({customCssUrl});
-};
+class TechSettings extends React.Component {
 
-const TechSettings = ({settings, onChangeDomainlist, updateSettings}) => {
-  return (
-    <div className={styles.Configure}>
-      <Domainlist
-        domains={settings.domains.whitelist}
-        onChangeDomainlist={onChangeDomainlist} />
-      <EmbedLink />
-      <Card className={styles.configSetting}>
-        <div className={styles.wrapper}>
-          <div className={styles.settingsHeader}>{t('configure.custom_css_url')}</div>
+  updateCustomCssUrl = (event) => {
+    const updater = {customCssUrl: {$set: event.target.value}};
+    this.props.updatePending({updater});
+  };
+
+  updateDomainlist = (listName, list) => {
+    this.props.updatePending({updater: {
+      domains: {$apply: (domains) => {
+        const changeSet = {[listName]: list};
+        if (!domains) {
+          return changeSet;
+        }
+        return {
+          ...domains,
+          ...changeSet,
+        };
+      }},
+    }});
+  };
+
+  render() {
+    const {settings, data, root} = this.props;
+    return (
+      <ConfigurePage
+        title={t('configure.tech_settings')}
+      >
+        <Domainlist
+          domains={settings.domains.whitelist}
+          onChangeDomainlist={this.updateDomainlist} />
+        <EmbedLink />
+        <ConfigureCard title={t('configure.custom_css_url')}>
           <p>{t('configure.custom_css_url_desc')}</p>
           <input
             className={styles.customCSSInput}
             value={settings.customCssUrl}
-            onChange={updateCustomCssUrl(updateSettings)} />
-        </div>
-      </Card>
-    </div>
-  );
-};
+            onChange={this.updateCustomCssUrl} />
+        </ConfigureCard>
+        <Slot
+          fill="adminTechSettings"
+          data={data}
+          queryData={{root, settings}}
+        />
+      </ConfigurePage>
+    );
+  }
+}
 
 TechSettings.propTypes = {
-  settings: PropTypes.shape({
-    domains: PropTypes.shape({
-      whitelist: PropTypes.array.isRequired
-    })
-  }).isRequired,
-  updateSettings: PropTypes.func.isRequired
+  updatePending: PropTypes.func.isRequired,
+  data: PropTypes.object.isRequired,
+  root: PropTypes.object.isRequired,
+  settings: PropTypes.object.isRequired,
 };
 
 export default TechSettings;

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

@@ -1,33 +1,33 @@
 import React from 'react';
 import t from 'coral-framework/services/i18n';
 import TagsInput from 'coral-admin/src/components/TagsInput';
-import styles from './Configure.css';
-import {Card} from 'coral-ui';
+import PropTypes from 'prop-types';
+import ConfigureCard from 'coral-framework/components/ConfigureCard';
 
 const Wordlist = ({suspectWords, bannedWords, onChangeWordlist}) => (
   <div>
-    <Card id={styles.bannedWordlist} className={styles.configSetting}>
-      <div className={styles.settingsHeader}>{t('configure.banned_words_title')}</div>
-      <p className={styles.wordlistDesc}>{t('configure.banned_word_text')}</p>
-      <div className={styles.wrapper}>
-        <TagsInput
-          value={bannedWords}
-          inputProps={{placeholder: 'word or phrase'}}
-          onChange={(tags) => onChangeWordlist('banned', tags)}
-        />
-      </div>
-    </Card>
-    <Card id={styles.suspectWordlist} className={styles.configSetting}>
-      <div className={styles.settingsHeader}>{t('configure.suspect_word_title')}</div>
-      <p className={styles.wordlistDesc}>{t('configure.suspect_word_text')}</p>
-      <div className={styles.wrapper}>
-        <TagsInput
-          value={suspectWords}
-          inputProps={{placeholder: 'word or phrase'}}
-          onChange={(tags) => onChangeWordlist('suspect', tags)} />
-      </div>
-    </Card>
+    <ConfigureCard title={t('configure.banned_words_title')}>
+      <p>{t('configure.banned_word_text')}</p>
+      <TagsInput
+        value={bannedWords}
+        inputProps={{placeholder: 'word or phrase'}}
+        onChange={(tags) => onChangeWordlist('banned', tags)}
+      />
+    </ConfigureCard>
+    <ConfigureCard title={t('configure.suspect_word_title')}>
+      <p>{t('configure.suspect_word_text')}</p>
+      <TagsInput
+        value={suspectWords}
+        inputProps={{placeholder: 'word or phrase'}}
+        onChange={(tags) => onChangeWordlist('suspect', tags)} />
+    </ConfigureCard>
   </div>
 );
 
+Wordlist.propTypes = {
+  suspectWords: PropTypes.array.isRequired,
+  bannedWords: PropTypes.array.isRequired,
+  onChangeWordlist: PropTypes.func.isRequired,
+};
+
 export default Wordlist;

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

@@ -1,42 +1,128 @@
 import React, {Component} from 'react';
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
-import {compose} from 'react-apollo';
-import {
-  fetchSettings,
-  updateSettings,
-  saveSettingsToServer,
-  updateWordlist,
-  updateDomainlist
-} from '../../../actions/settings';
+import {compose, gql} from 'react-apollo';
+import withQuery from 'coral-framework/hocs/withQuery';
+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 {
-  componentWillMount = () => {
-    this.props.fetchSettings();
+
+  // 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);
+      this.props.clearPending();
+    }
+    catch(err) {
+      this.props.notify('error', getErrorMessages(err));
+    }
+  };
+
+  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 () {
-    return <Configure {...this.props} />;
+    if(this.props.data.loading) {
+      return <Spinner/>;
+    }
+
+    return <Configure
+      notify={this.props.notify}
+      auth={this.props.auth}
+      data={this.props.data}
+      root={this.props.root}
+      settings={this.mergedSettings}
+      canSave={this.props.canSave}
+      savePending={this.savePending}
+      setActiveSection={this.props.setActiveSection}
+      activeSection={this.props.activeSection}
+    />;
   }
 }
 
+const withConfigureQuery = withQuery(gql`
+  query TalkAdmin_Configure {
+    settings {
+      ...${getDefinitionName(StreamSettings.fragments.settings)}
+      ...${getDefinitionName(TechSettings.fragments.settings)}
+      ...${getDefinitionName(ModerationSettings.fragments.settings)}
+    }
+    ...${getDefinitionName(StreamSettings.fragments.root)}
+    ...${getDefinitionName(TechSettings.fragments.root)}
+    ...${getDefinitionName(ModerationSettings.fragments.root)}
+  }
+  ${StreamSettings.fragments.root}
+  ${StreamSettings.fragments.settings}
+  ${TechSettings.fragments.root}
+  ${TechSettings.fragments.settings}
+  ${ModerationSettings.fragments.root}
+  ${ModerationSettings.fragments.settings}
+  `, {
+  options: () => ({
+    variables: {},
+  }),
+});
+
 const mapStateToProps = (state) => ({
   auth: state.auth,
-  settings: state.settings
+  pending: state.configure.pending,
+  canSave: state.configure.canSave,
+  activeSection: state.configure.activeSection,
 });
 
 const mapDispatchToProps = (dispatch) =>
   bindActionCreators({
-    fetchSettings,
-    updateSettings,
-    saveSettingsToServer,
-    updateWordlist,
-    updateDomainlist
+    notify,
+    clearPending,
+    setActiveSection,
   }, dispatch);
 
 export default compose(
+  withUpdateSettings,
+  withConfigureQuery,
   connect(mapStateToProps, mapDispatchToProps),
 )(ConfigureContainer);
 
+ConfigureContainer.propTypes = {
+  updateSettings: PropTypes.func.isRequired,
+  clearPending: PropTypes.func.isRequired,
+  setActiveSection: PropTypes.func.isRequired,
+  notify: PropTypes.func.isRequired,
+  auth: PropTypes.object.isRequired,
+  data: PropTypes.object.isRequired,
+  root: PropTypes.object.isRequired,
+  canSave: PropTypes.bool.isRequired,
+  pending: PropTypes.object.isRequired,
+  activeSection: PropTypes.string.isRequired,
+};

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

@@ -0,0 +1,40 @@
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+import {compose, gql} from 'react-apollo';
+import ModerationSettings from '../components/ModerationSettings';
+import withFragments from 'coral-framework/hocs/withFragments';
+import {getSlotFragmentSpreads} from 'coral-framework/utils';
+import {updatePending} from '../../../actions/configure';
+
+const slots = [
+  'adminModerationSettings',
+];
+
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators({
+    updatePending,
+  }, dispatch);
+
+export default compose(
+  withFragments({
+    root: gql`
+      fragment TalkAdmin_ModerationSettings_root on RootQuery {
+        __typename
+        ${getSlotFragmentSpreads(slots, 'root')}
+      }
+    `,
+    settings: gql`
+      fragment TalkAdmin_ModerationSettings_settings on Settings {
+        requireEmailConfirmation
+        moderation
+        premodLinksEnable
+        wordlist {
+          suspect
+          banned
+        }
+        ${getSlotFragmentSpreads(slots, 'settings')}
+      }
+    `
+  }),
+  connect(null, mapDispatchToProps),
+)(ModerationSettings);

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

@@ -0,0 +1,45 @@
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+import {compose, gql} from 'react-apollo';
+import StreamSettings from '../components/StreamSettings';
+import withFragments from 'coral-framework/hocs/withFragments';
+import {getSlotFragmentSpreads} from 'coral-framework/utils';
+import {updatePending} from '../../../actions/configure';
+
+const slots = [
+  'adminStreamSettings',
+];
+
+const mapStateToProps = (state) => ({
+  errors: state.configure.errors,
+});
+
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators({
+    updatePending,
+  }, dispatch);
+
+export default compose(
+  withFragments({
+    root: gql`
+      fragment TalkAdmin_StreamSettings_root on RootQuery {
+        __typename
+        ${getSlotFragmentSpreads(slots, 'root')}
+      }
+    `,
+    settings: gql`
+      fragment TalkAdmin_StreamSettings_settings on Settings {
+        infoBoxEnable
+        charCount
+        charCountEnable
+        infoBoxContent
+        editCommentWindowLength
+        autoCloseStream
+        closedTimeout
+        closedMessage
+        ${getSlotFragmentSpreads(slots, 'settings')}
+      }
+    `
+  }),
+  connect(mapStateToProps, mapDispatchToProps),
+)(StreamSettings);

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

@@ -0,0 +1,37 @@
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+import {compose, gql} from 'react-apollo';
+import TechSettings from '../components/TechSettings';
+import withFragments from 'coral-framework/hocs/withFragments';
+import {getSlotFragmentSpreads} from 'coral-framework/utils';
+import {updatePending} from '../../../actions/configure';
+
+const slots = [
+  'adminTechSettings',
+];
+
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators({
+    updatePending,
+  }, dispatch);
+
+export default compose(
+  withFragments({
+    root: gql`
+      fragment TalkAdmin_TechSettings_root on RootQuery {
+        __typename
+        ${getSlotFragmentSpreads(slots, 'root')}
+      }
+    `,
+    settings: gql`
+      fragment TalkAdmin_TechSettings_settings on Settings {
+        customCssUrl
+        domains {
+          whitelist
+        }
+        ${getSlotFragmentSpreads(slots, 'settings')}
+      }
+    `
+  }),
+  connect(null, mapDispatchToProps),
+)(TechSettings);

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

@@ -4,6 +4,8 @@
 
 .Dashboard {
   display: flex;
+  max-width: 1280px;
+  margin: 0 auto;
 }
 
 .heading {

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

@@ -42,11 +42,11 @@ export const witDashboardQuery = withQuery(gql`
     }
   }
 `, {
-    options: ({settings: {dashboardWindowStart, dashboardWindowEnd}}) => {
+    options: ({windowStart, windowEnd}) => {
       return {
         variables: {
-          from: dashboardWindowStart,
-          to: dashboardWindowEnd
+          from: windowStart,
+          to: windowEnd,
         }
       };
     }
@@ -54,8 +54,8 @@ export const witDashboardQuery = withQuery(gql`
 
 const mapStateToProps = (state) => {
   return {
-    settings: state.settings,
-    moderation: state.moderation
+    windowStart: state.dashboard.windowStart,
+    windowEnd: state.dashboard.windowEnd,
   };
 };
 

client/coral-admin/src/routes/Install/components/Steps/AddOrganizationName.js

@@ -1,13 +1,14 @@
 import React from 'react';
 import styles from './style.css';
 import {TextField, Button} from 'coral-ui';
-
+import PropTypes from 'prop-types';
 import t from 'coral-framework/services/i18n';
+import cn from 'classnames';
 
 const AddOrganizationName = (props) => {
   const {handleSettingsChange, handleSettingsSubmit, install} = props;
   return (
-    <div className={styles.step}>
+    <div className={cn(styles.step, 'talk-install-step-2')}>
       <p>{t('install.add_organization.description')}</p>
       <div className={styles.form}>
         <form onSubmit={handleSettingsSubmit}>
@@ -19,11 +20,17 @@ const AddOrganizationName = (props) => {
             onChange={handleSettingsChange}
             showErrors={install.showErrors}
             errorMsg={install.errors.organizationName} />
-          <Button type="submit" cStyle='black' full>{t('install.add_organization.save')}</Button>
+          <Button className="talk-install-step-2-save-button" type="submit" cStyle='black' full>{t('install.add_organization.save')}</Button>
         </form>
       </div>
     </div>
   );
 };
 
+AddOrganizationName.propTypes = {
+  handleSettingsChange: PropTypes.func,
+  handleSettingsSubmit: PropTypes.func,
+  install: PropTypes.object,
+};
+
 export default AddOrganizationName;

client/coral-admin/src/routes/Install/components/Steps/CreateYourAccount.js

@@ -1,13 +1,14 @@
 import React from 'react';
 import styles from './style.css';
 import {TextField, Button, Spinner} from 'coral-ui';
-
+import PropTypes from 'prop-types';
 import t from 'coral-framework/services/i18n';
+import cn from 'classnames';
 
 const InitialStep = (props) => {
   const {handleUserChange, handleUserSubmit, install} = props;
   return (
-    <div className={styles.step}>
+    <div className={cn(styles.step, 'talk-install-step-3')}>
       <div className={styles.form}>
         <form onSubmit={handleUserSubmit}>
           <TextField
@@ -53,7 +54,7 @@ const InitialStep = (props) => {
 
           {
             !props.install.isLoading ?
-              <Button cStyle='black' type="submit" full>{t('install.create.save')}</Button>
+              <Button className="talk-install-step-3-save-button" cStyle='black' type="submit" full>{t('install.create.save')}</Button>
               :
               <Spinner />
           }
@@ -64,4 +65,10 @@ const InitialStep = (props) => {
   );
 };
 
+InitialStep.propTypes = {
+  handleUserChange: PropTypes.func,
+  handleUserSubmit: PropTypes.func,
+  install: PropTypes.object,
+};
+
 export default InitialStep;

client/coral-admin/src/routes/Install/components/Steps/FinalStep.js

@@ -2,12 +2,13 @@ import React from 'react';
 import styles from './style.css';
 import {Button} from 'coral-ui';
 import {Link} from 'react-router';
+import cn from 'classnames';
 
 import t from 'coral-framework/services/i18n';
 
 const InitialStep = () => {
   return (
-    <div className={`${styles.step} ${styles.finalStep}`}>
+    <div className={cn(styles.step, styles.finalStep, 'talk-install-step-5')}>
       <p>{t('install.final.description')}</p>
       <Button raised><Link to='/admin'>{t('install.final.launch')}</Link></Button>
       <Button cStyle='black' raised><a href="http://coralproject.net">{t('install.final.close')}</a></Button>

client/coral-admin/src/routes/Install/components/Steps/InitialStep.js

@@ -1,17 +1,22 @@
 import React from 'react';
 import styles from './style.css';
 import {Button} from 'coral-ui';
-
+import PropTypes from 'prop-types';
 import t from 'coral-framework/services/i18n';
+import cn from 'classnames';
 
 const InitialStep = (props) => {
   const {nextStep} = props;
   return (
-    <div className={styles.step}>
+    <div className={cn(styles.step, 'talk-install-step-1')}>
       <p>{t('install.initial.description')}</p>
-      <Button cStyle='green' onClick={nextStep} raised>{t('install.initial.submit')}</Button>
+      <Button className={'talk-install-get-started-button'} cStyle='green' onClick={nextStep} raised>{t('install.initial.submit')}</Button>
     </div>
   );
 };
 
+InitialStep.propTypes = {
+  nextStep: PropTypes.func,
+};
+
 export default InitialStep;

client/coral-admin/src/routes/Install/components/Steps/PermittedDomainsStep.js

@@ -2,26 +2,34 @@ import React from 'react';
 import styles from './style.css';
 import {Button, Card} from 'coral-ui';
 import TagsInput from 'coral-admin/src/components/TagsInput';
-
+import PropTypes from 'prop-types';
+import cn from 'classnames';
 import t from 'coral-framework/services/i18n';
 
 const PermittedDomainsStep = (props) => {
   const {finishInstall, install, handleDomainsChange} = props;
   const domains = install.data.settings.domains.whitelist;
   return (
-    <div className={styles.step}>
+    <div className={cn(styles.step, 'talk-install-step-4')}>
       <h3>{t('install.permitted_domains.title')}</h3>
       <Card className={styles.card}>
         <p>{t('install.permitted_domains.description')}</p>
         <TagsInput
+          className="talk-install-step-4-permited-domains-input"
           value={domains}
           inputProps={{placeholder: 'URL'}}
           onChange={(tags) => handleDomainsChange(tags)}
         />
       </Card>
-      <Button cStyle='green' onClick={finishInstall} raised>{t('install.permitted_domains.submit')}</Button>
+      <Button className="talk-install-step-4-save-button" cStyle='green' onClick={finishInstall} raised>{t('install.permitted_domains.submit')}</Button>
     </div>
   );
 };
 
+PermittedDomainsStep.propTypes = {
+  finishInstall: PropTypes.func,
+  handleDomainsChange: PropTypes.func,
+  install: PropTypes.object,
+};
+
 export default PermittedDomainsStep;

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

@@ -58,12 +58,11 @@ class Comment extends React.Component {
   render() {
     const {
       comment,
-      suspectWords,
-      bannedWords,
       selected,
       className,
       data,
       root,
+      root: {settings},
       currentUserId,
       currentAsset,
     } = this.props;
@@ -130,8 +129,8 @@ class Comment extends React.Component {
             <div className={styles.itemBody}>
               <div className={styles.body}>
                 <CommentBodyHighlighter
-                  suspectWords={suspectWords}
-                  bannedWords={bannedWords}
+                  suspectWords={settings.wordlist.suspect}
+                  bannedWords={settings.wordlist.banned}
                   body={comment.body}
                 />
                 {' '}
@@ -188,8 +187,6 @@ Comment.propTypes = {
   acceptComment: PropTypes.func.isRequired,
   rejectComment: PropTypes.func.isRequired,
   className: PropTypes.string,
-  suspectWords: PropTypes.arrayOf(PropTypes.string).isRequired,
-  bannedWords: PropTypes.arrayOf(PropTypes.string).isRequired,
   currentAsset: PropTypes.object,
   showBanUserDialog: PropTypes.func.isRequired,
   showSuspendUserDialog: PropTypes.func.isRequired,

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

@@ -0,0 +1,13 @@
+@custom-media --desktop (max-width: 1280px);
+
+.container {
+  max-width: 1280px;
+  position: relative;
+  margin: 0 auto;
+
+  @media (--desktop) {
+    padding-right: 20px;
+    padding-left: 20px;
+  }
+}
+

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

@@ -1,13 +1,15 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import key from 'keymaster';
-
+import cn from 'classnames';
+import styles from './Moderation.css';
 import ModerationQueue from './ModerationQueue';
 import ModerationMenu from './ModerationMenu';
 import ModerationHeader from './ModerationHeader';
 import ModerationKeysModal from '../../../components/ModerationKeysModal';
 import StorySearch from '../containers/StorySearch';
 import Slot from 'coral-framework/components/Slot';
+import ViewOptions from './ViewOptions';
 
 class Moderation extends Component {
   constructor(props) {
@@ -26,6 +28,8 @@ class Moderation extends Component {
     key('s', () => singleView());
     key('shift+/', () => toggleModal(true));
     key('esc', () => toggleModal(false));
+    key('ctrl+f', () => this.openSearch());
+    key('t', () => this.nextQueue());
     key('j', () => this.select(true));
     key('k', () => this.select(false));
     key('f', () => this.moderate(false));
@@ -36,6 +40,21 @@ class Moderation extends Component {
     this.props.toggleModal(false);
   }
 
+  nextQueue = () => {
+    const queueConfig = this.props.queueConfig;
+    const activeTab = this.props.activeTab;
+    const assetId = this.props.data.variables.asset_id;
+
+    const menuItems = Object.keys(queueConfig).map((queue) => ({
+      key: queue
+    }));
+
+    const activeTabIndex = menuItems.findIndex((item) => item.key === activeTab);
+    const nextQueueIndex = (activeTabIndex === menuItems.length - 1) ? 0 : activeTabIndex + 1;
+
+    this.props.router.push(this.props.getModPath(menuItems[nextQueueIndex].key, assetId));
+  }
+
   closeSearch = () => {
     const {toggleStorySearch} = this.props;
     toggleStorySearch(false);
@@ -53,14 +72,17 @@ class Moderation extends Component {
     const {acceptComment, rejectComment} = this.props;
     const {selectedCommentId} = this.state;
 
-    const comments = this.getComments();
-    const commentIdx = comments.findIndex((comment) => comment.id === selectedCommentId);
-    const comment = comments[commentIdx];
-    
-    if (accept) {
-      comment.status !== 'ACCEPTED' && acceptComment({commentId: comment.id});
-    } else {
-      comment.status !== 'REJECTED' && rejectComment({commentId: comment.id});
+    // Accept or reject only if there's a selected comment
+    if(selectedCommentId != null){
+      const comments = this.getComments();
+      const commentIdx = comments.findIndex((comment) => comment.id === selectedCommentId);
+      const comment = comments[commentIdx];
+
+      if (accept) {
+        comment.status !== 'ACCEPTED' && acceptComment({commentId: comment.id});
+      } else {
+        comment.status !== 'REJECTED' && rejectComment({commentId: comment.id});
+      }
     }
   }
 
@@ -147,6 +169,8 @@ class Moderation extends Component {
     key.unbind('s');
     key.unbind('shift+/');
     key.unbind('esc');
+    key.unbind('ctrl+f');
+    key.unbind('t');
     key.unbind('j');
     key.unbind('k');
     key.unbind('f');
@@ -196,7 +220,7 @@ class Moderation extends Component {
   }
 
   render () {
-    const {root, data, moderation, settings, viewUserDetail, activeTab, getModPath, queueConfig, handleCommentChange, ...props} = this.props;
+    const {root, data, moderation, viewUserDetail, activeTab, getModPath, queueConfig, handleCommentChange, ...props} = this.props;
     const {asset} = root;
     const assetId = asset && asset.id;
 
@@ -222,45 +246,44 @@ class Moderation extends Component {
           asset={asset}
           getModPath={getModPath}
           items={menuItems}
-          selectSort={this.props.setSortOrder}
-          sort={this.props.moderation.sortOrder}
           activeTab={activeTab}
         />
-        <ModerationQueue
-          key={`${activeTab}_${this.props.moderation.sortOrder}`}
-          data={this.props.data}
-          root={this.props.root}
-          currentAsset={asset}
-          comments={comments.nodes}
-          activeTab={activeTab}
-          singleView={moderation.singleView}
-          selectedCommentId={this.state.selectedCommentId}
-          bannedWords={settings.wordlist.banned}
-          suspectWords={settings.wordlist.suspect}
-          showBanUserDialog={props.showBanUserDialog}
-          showSuspendUserDialog={props.showSuspendUserDialog}
-          acceptComment={props.acceptComment}
-          rejectComment={props.rejectComment}
-          loadMore={this.loadMore}
-          assetId={assetId}
-          sort={this.props.moderation.sortOrder}
-          commentCount={activeTabCount}
-          currentUserId={this.props.auth.user.id}
-          viewUserDetail={viewUserDetail}
-        />
-        <ModerationKeysModal
-          hideShortcutsNote={props.hideShortcutsNote}
-          shortcutsNoteVisible={moderation.shortcutsNoteVisible}
-          open={moderation.modalOpen}
-          onClose={this.onClose}/>
-
+        <div className={cn(styles.container, 'talk-admin-moderation-container')}>
+          <ViewOptions
+            selectSort={this.props.setSortOrder}
+            sort={this.props.moderation.sortOrder}
+          />
+          <ModerationQueue
+            key={`${activeTab}_${this.props.moderation.sortOrder}`}
+            data={this.props.data}
+            root={this.props.root}
+            currentAsset={asset}
+            comments={comments.nodes}
+            activeTab={activeTab}
+            singleView={moderation.singleView}
+            selectedCommentId={this.state.selectedCommentId}
+            showBanUserDialog={props.showBanUserDialog}
+            showSuspendUserDialog={props.showSuspendUserDialog}
+            acceptComment={props.acceptComment}
+            rejectComment={props.rejectComment}
+            loadMore={this.loadMore}
+            commentCount={activeTabCount}
+            currentUserId={this.props.auth.user.id}
+            viewUserDetail={viewUserDetail}
+          />
+          <ModerationKeysModal
+            hideShortcutsNote={props.hideShortcutsNote}
+            shortcutsNoteVisible={moderation.shortcutsNoteVisible}
+            open={moderation.modalOpen}
+            onClose={this.onClose}
+          />
+        </div>
         <StorySearch
           assetId={assetId}
           moderation={this.props.moderation}
           closeSearch={this.closeSearch}
           storySearchChange={this.props.storySearchChange}
         />
-
         <Slot
           data={data}
           queryData={{root, asset}}
@@ -281,7 +304,6 @@ Moderation.propTypes = {
   storySearchChange: PropTypes.func.isRequired,
   moderation: PropTypes.object.isRequired,
   auth: PropTypes.object.isRequired,
-  settings: PropTypes.object.isRequired,
   queueConfig: PropTypes.object.isRequired,
   handleCommentChange: PropTypes.func.isRequired,
   setSortOrder: PropTypes.func.isRequired,
@@ -294,6 +316,7 @@ Moderation.propTypes = {
   activeTab: PropTypes.string.isRequired,
   data: PropTypes.object.isRequired,
   root: PropTypes.object.isRequired,
+  router: PropTypes.object.isRequired,
 };
 
 export default Moderation;

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

@@ -7,12 +7,7 @@
   justify-content: space-between;
 }
 
-.tabBarPadding {
-  width: 150px;
-}
-
 .tab {
-  flex: 1;
   color: #BDBDBD;
   text-transform: capitalize;
   font-weight: 100;
@@ -22,9 +17,9 @@
   transition: color 200ms;
   padding: 0px 10px;
   margin-right: 20px;
+
   &:hover {
     color: white;
-    /*border-bottom: solid 2px #F36451;*/
     box-sizing: border-box;
   }
 }
@@ -48,55 +43,12 @@
   background: transparent !important;
 }
 
-.selectField {
-  position: relative;
-  width: 140px;
-  height: 36px;
-  top: 5px;
-  margin-right: 10px;
-  background: #FFF;
-  padding: 10px 15px;
-  box-sizing: border-box;
-  border-radius: 2px;
-  bor
-  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
-
-  > div {
-    padding: 0;
-  }
-
-  i {
-    position: absolute;
-    top: 7px;
-    right: 7px;
-  }
-
-  input {
-    padding: 0;
-    font-size: 13px;
-    letter-spacing: 0.7px;
-    font-weight: 400;
-    border-bottom: 0px;
-  }
-
-  label {
-    top: -4px;
-  }
-
-  &:hover {
-    cursor: pointer;
-   }
-}
-
 .tabIcon {
   position: relative;
   top: 3px;
   font-size: 16px;
 }
 
-
-@media (--big-viewport) {
-  .tab {
-    flex: none;
-  }
-}
+.tabBarContainer {
+  margin: 0 auto;
+}

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

@@ -2,26 +2,20 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import CountBadge from '../../../components/CountBadge';
 import styles from './ModerationMenu.css';
-import {SelectField, Option} from 'react-mdl-selectfield';
 import {Icon} from 'coral-ui';
 import {Link} from 'react-router';
 import cn from 'classnames';
 
-import t from 'coral-framework/services/i18n';
-
 const ModerationMenu = ({
   asset = {},
   items,
-  selectSort,
-  sort,
   getModPath,
   activeTab
 }) => {
   return (
     <div className="mdl-tabs">
-      <div className={`mdl-tabs__tab-bar ${styles.tabBar}`}>
-        <div className={styles.tabBarPadding} />
-        <div>
+      <div className={cn('mdl-tabs__tab-bar', styles.tabBar, 'talk-admin-moderation-menu-tabbar')}>
+        <div className={cn(styles.tabBarContainer, 'talk-admin-moderation-menu-tabbar-container')}>
           {items.map((queue) =>
             <Link
               key={queue.key}
@@ -32,14 +26,6 @@ const ModerationMenu = ({
             </Link>
           )}
         </div>
-        <SelectField
-          className={styles.selectField}
-          label="Sort"
-          value={sort}
-          onChange={(sort) => selectSort(sort)}>
-          <Option value={'DESC'}>{t('modqueue.newest_first')}</Option>
-          <Option value={'ASC'}>{t('modqueue.oldest_first')}</Option>
-        </SelectField>
       </div>
     </div>
   );
@@ -50,8 +36,6 @@ ModerationMenu.propTypes = {
   asset: PropTypes.shape({
     id: PropTypes.string
   }),
-  selectSort: PropTypes.func.isRequired,
-  sort: PropTypes.string.isRequired,
   getModPath: PropTypes.func.isRequired,
   activeTab: PropTypes.string.isRequired,
 };

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

@@ -147,8 +147,6 @@ class ModerationQueue extends React.Component {
             key={comment.id}
             comment={comment}
             selected={true}
-            suspectWords={props.suspectWords}
-            bannedWords={props.bannedWords}
             viewUserDetail={viewUserDetail}
             showBanUserDialog={props.showBanUserDialog}
             showSuspendUserDialog={props.showSuspendUserDialog}
@@ -193,8 +191,6 @@ class ModerationQueue extends React.Component {
                   key={comment.id}
                   comment={comment}
                   selected={comment.id === selectedCommentId}
-                  suspectWords={props.suspectWords}
-                  bannedWords={props.bannedWords}
                   viewUserDetail={viewUserDetail}
                   showBanUserDialog={props.showBanUserDialog}
                   showSuspendUserDialog={props.showSuspendUserDialog}
@@ -218,8 +214,6 @@ class ModerationQueue extends React.Component {
 
 ModerationQueue.propTypes = {
   viewUserDetail: PropTypes.func.isRequired,
-  bannedWords: PropTypes.arrayOf(PropTypes.string).isRequired,
-  suspectWords: PropTypes.arrayOf(PropTypes.string).isRequired,
   currentAsset: PropTypes.object,
   showBanUserDialog: PropTypes.func.isRequired,
   showSuspendUserDialog: PropTypes.func.isRequired,

client/coral-admin/src/routes/Moderation/components/ViewOptions.css

@@ -0,0 +1,78 @@
+@custom-media --tablet (max-width: 1180px);
+
+.viewOptions {
+  display: inline-block;
+  width: 220px;
+  position: absolute;
+  padding: 0;
+  overflow: visible;
+  height: 144px;
+  min-height: auto;
+  z-index: 10;
+
+  @media (--tablet) {
+    width: 650px;
+    margin: 0 auto;
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    margin-top: 10px;
+    height: 60px;
+  }
+}
+
+.headline {
+  margin: 0;
+  font-size: 1.1rem;
+  border-bottom: 1px solid rgba(0,0,0,.1);
+  padding: 0 20px;
+
+  @media (--tablet) {
+    flex: 1;
+    display: inline-block;
+    border-bottom: none;
+    line-height: 60px;
+  }
+}
+
+.viewOptionsContent {
+  padding: 10px 20px;
+
+  @media (--tablet) {
+    display: inline-block;
+  }
+}
+
+.viewOptionsList {
+  padding: 0;
+  margin: 0;
+  color: rgba(0,0,0,.54);
+}
+
+.viewOptionsItem {
+  list-style: none;
+}
+
+.dropdow {
+  position: relative;
+  margin-top: 5px;
+
+  @media (--tablet) {
+    display: inline-block;
+    margin-top: 0px;
+    margin-left: 10px;
+  }
+}
+
+.dropdownToggle {
+  background: #7B7B7B;
+  color: white;
+
+  &:focus {
+    background: #aaa;
+  }
+}
+
+.dropdownToggleOpen {
+  background: #aaa;
+}

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './ViewOptions.css';
+import cn from 'classnames';
+import t from 'coral-framework/services/i18n';
+import {Card, Dropdown, Option} from 'coral-ui';
+
+class ViewOptions extends React.Component {
+  render() {
+
+    const {
+      selectSort,
+      sort
+    } = this.props;
+
+    return (
+      <Card className={cn(styles.viewOptions, 'talk-admin-moderation-view-options')}>
+        <h2 className={cn(styles.headline, 'talk-admin-moderation-view-options-headline')}>
+          View Options
+        </h2>
+        <div className={styles.viewOptionsContent}>
+          <ul className={styles.viewOptionsList}>
+            <li className={styles.viewOptionsItem}>
+              Sort Comments
+              <Dropdown
+                toggleClassName={styles.dropdownToggle}
+                toggleOpenClassName={styles.dropdownToggleOpen}
+                placeholder={t('modqueue.sort')}
+                value={sort}
+                onChange={(sort) => selectSort(sort)}>
+                <Option value={'DESC'} label={t('modqueue.newest_first')} />
+                <Option value={'ASC'} label={t('modqueue.oldest_first')} />
+              </Dropdown>
+            </li>
+          </ul>
+        </div>
+      </Card>
+    );
+  }
+}
+
+ViewOptions.propTypes = {
+  selectSort: PropTypes.func.isRequired,
+  sort: PropTypes.string.isRequired
+};
+
+export default ViewOptions;

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

@@ -15,7 +15,12 @@ const slots = [
 export default withFragments({
   root: gql`
     fragment CoralAdmin_ModerationComment_root on RootQuery {
-      __typename
+      settings {
+        wordlist {
+          banned
+          suspect
+        }
+      }
       ${getSlotFragmentSpreads(slots, 'root')}
       ...${getDefinitionName(CommentLabels.fragments.root)}
       ...${getDefinitionName(CommentDetails.fragments.root)}

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

@@ -13,7 +13,6 @@ import {isPremod, getModPath} from '../../../utils';
 import {withSetCommentStatus} from 'coral-framework/graphql/mutations';
 import {handleCommentChange} from '../graphql';
 
-import {fetchSettings} from 'actions/settings';
 import {showBanUserDialog} from 'actions/banUserDialog';
 import {showSuspendUserDialog} from 'actions/suspendUserDialog';
 import {viewUserDetail} from '../../../actions/userDetail';
@@ -146,7 +145,6 @@ class ModerationContainer extends Component {
 
   componentWillMount() {
     this.props.clearState();
-    this.props.fetchSettings();
     this.subscribeToUpdates();
   }
 
@@ -384,7 +382,6 @@ const withModQueueQuery = withQuery(({queueConfig}) => gql`
 
 const mapStateToProps = (state) => ({
   moderation: state.moderation,
-  settings: state.settings,
   auth: state.auth,
 });
 
@@ -392,7 +389,6 @@ const mapDispatchToProps = (dispatch) => ({
   ...bindActionCreators({
     toggleModal,
     singleView,
-    fetchSettings,
     showBanUserDialog,
     hideShortcutsNote,
     toggleStorySearch,

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

@@ -1,6 +1,8 @@
 .container {
   padding: 10px;
   display: flex;
+  max-width: 1280px;
+  margin: 0 auto;
 }
 
 .leftColumn {
@@ -74,31 +76,6 @@
   display: block;
 }
 
-.statusMenu {
-  border-radius: 2px;
-  width: 10em;
-  text-align: center;
-  float: right;
-  color: #fff;
-  cursor: pointer;
-  letter-spacing: 0.7px;
-  font-weight: 400;
-  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
-}
-
-.statusMenuOpen {
-  padding: 10px;
-  background-color: #268D81;
-}
-
-.statusMenuIcon {
-  float: right;
-}
-
-.statusMenuClosed {
-  padding: 10px;
-  background-color: #262626;
-}
 
 .hidden {
   display: none;

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

@@ -1,16 +1,16 @@
 import React, {Component} from 'react';
-import styles from './Stories.css';
-import t from 'coral-framework/services/i18n';
 import {Link} from 'react-router';
-
-import {Pager, Icon} from 'coral-ui';
-import {DataTable, TableHeader, RadioGroup, Radio} from 'react-mdl';
-import EmptyCard from 'coral-admin/src/components/EmptyCard';
+import PropTypes from 'prop-types';
 import sortBy from 'lodash/sortBy';
+import {Dropdown, Option, Pager, Icon} from 'coral-ui';
+import {DataTable, TableHeader, RadioGroup, Radio} from 'react-mdl';
+import t from 'coral-framework/services/i18n';
+import styles from './Stories.css';
+import EmptyCard from 'coral-admin/src/components/EmptyCard';
 
 const limit = 25;
 
-export default class Stories extends Component {
+class Stories extends Component {
 
   state = {
     search: '',
@@ -50,51 +50,28 @@ export default class Stories extends Component {
     return `${d.getMonth() + 1}/${d.getDate()}/${d.getFullYear()}`;
   }
 
-  onStatusClick = (closeStream, id, statusMenuOpen) => async () => {
-    if (statusMenuOpen) {
-      this.setState((prev) => {
-        prev.statusMenus[id] = false;
-        return prev;
-      });
-
-      try {
-        await this.props.updateAssetState(id, closeStream ? Date.now() : null);
-        const {search, sort, filter, page} = this.state;
-        this.props.fetchAssets(page, limit, search, sort, filter);
-      } catch (err) {
-
-        // TODO: handle error.
-        console.error(err);
-      }
-    } else {
-      this.setState((prev) => {
-        prev.statusMenus[id] = true;
-        return prev;
-      });
+  onStatusChange = async (closeStream, id) => {
+    try {
+      this.props.updateAssetState(id, closeStream ? Date.now() : null);
+      const {search, sort, filter, page} = this.state;
+      this.props.fetchAssets(page, limit, search, sort, filter);
+    } catch(err) {
+      console.error(err);
     }
   }
 
   renderTitle = (title, {id}) =>  <Link to={`/admin/moderate/${id}`}>{title}</Link>
 
   renderStatus = (closedAt, {id}) => {
-    const closed = closedAt && new Date(closedAt).getTime() < Date.now();
-    const statusMenuOpen = this.state.statusMenus[id];
-    return <div className={styles.statusMenu}>
-      <div
-        className={closed ? styles.statusMenuClosed : styles.statusMenuOpen}
-        onClick={this.onStatusClick(closed, id, statusMenuOpen)}>
-        {!statusMenuOpen && <Icon className={styles.statusMenuIcon} name='keyboard_arrow_down'/>}
-        {closed ? t('streams.closed') : t('streams.open')}
-      </div>
-      {
-        statusMenuOpen &&
-        <div
-          className={!closed ? styles.statusMenuClosed : styles.statusMenuOpen}
-          onClick={this.onStatusClick(!closed, id, statusMenuOpen)}>
-          {!closed ? t('streams.closed') : t('streams.open')}
-        </div>
-      }
-    </div>;
+    const closed = !!(closedAt && new Date(closedAt).getTime() < Date.now());
+    return (
+      <Dropdown
+        value={closed}
+        onChange={(value) => this.onStatusChange(value, id)}>
+        <Option value={false} label={t('streams.open')} />
+        <Option value={true} label={t('streams.closed')} />
+      </Dropdown>
+    );
   }
 
   onPageClick = (page) => {
@@ -174,3 +151,11 @@ export default class Stories extends Component {
   }
 }
 
+Stories.propTypes = {
+  assets: PropTypes.object,
+  fetchAssets: PropTypes.func,
+  updateAssetState: PropTypes.func,
+};
+
+export default Stories;
+

client/coral-configure/components/CloseCommentsInfo.js

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

client/coral-configure/containers/ConfigureStreamContainer.js

@@ -1,12 +1,10 @@
 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 {
@@ -134,6 +132,14 @@ const mapDispatchToProps = (dispatch) => ({
   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/components/AllCommentsPane.js

@@ -1,10 +1,11 @@
 import React from 'react';
-
+import PropTypes from 'prop-types';
 import LoadMore from './LoadMore';
 import NewCount from './NewCount';
 import {TransitionGroup} from 'react-transition-group';
 import {forEachError} from 'coral-framework/utils';
 import Comment from '../containers/Comment';
+import NoComments from './NoComments';
 
 const hasComment = (nodes, id) => nodes.some((node) => node.id === id);
 
@@ -144,53 +145,82 @@ class AllCommentsPane extends React.Component {
     } = this.props;
 
     const {loadingState} = this.state;
-    const view = this.getVisibleComments();
+    const visibleComments = this.getVisibleComments();
 
     return (
-      <div className="talk-stream-comments-container">
-        <NewCount
-          count={comments.nodes.length - view.length}
-          loadMore={this.viewNewComments}
-        />
-        <TransitionGroup component='div' className="embed__stream">
-          {view.map((comment) => {
-            return (
-              <Comment
-                commentClassNames={commentClassNames}
-                data={data}
-                root={root}
-                disableReply={disableReply}
-                setActiveReplyBox={setActiveReplyBox}
-                activeReplyBox={activeReplyBox}
-                notify={notify}
-                depth={0}
-                postComment={postComment}
-                asset={asset}
-                currentUser={currentUser}
-                postFlag={postFlag}
-                postDontAgree={postDontAgree}
-                loadMore={loadNewReplies}
-                deleteAction={deleteAction}
-                showSignInDialog={showSignInDialog}
-                key={comment.id}
-                comment={comment}
-                charCountEnable={charCountEnable}
-                maxCharCount={maxCharCount}
-                editComment={editComment}
-                emit={emit}
-              />
-            );
-          })}
-        </TransitionGroup>
-        <LoadMore
-          topLevel={true}
-          moreComments={asset.comments.hasNextPage}
-          loadMore={this.loadMore}
-          loadingState={loadingState}
-        />
+      <div>
+        {visibleComments.length ? (
+          <div className="talk-stream-comments-container">
+            <NewCount
+              count={comments.nodes.length - visibleComments.length}
+              loadMore={this.viewNewComments}
+            />
+            <TransitionGroup component='div' className="embed__stream">
+              {visibleComments.map((comment) => {
+                return (
+                  <Comment
+                    commentClassNames={commentClassNames}
+                    data={data}
+                    root={root}
+                    disableReply={disableReply}
+                    setActiveReplyBox={setActiveReplyBox}
+                    activeReplyBox={activeReplyBox}
+                    notify={notify}
+                    depth={0}
+                    postComment={postComment}
+                    asset={asset}
+                    currentUser={currentUser}
+                    postFlag={postFlag}
+                    postDontAgree={postDontAgree}
+                    loadMore={loadNewReplies}
+                    deleteAction={deleteAction}
+                    showSignInDialog={showSignInDialog}
+                    key={comment.id}
+                    comment={comment}
+                    charCountEnable={charCountEnable}
+                    maxCharCount={maxCharCount}
+                    editComment={editComment}
+                    emit={emit}
+                  />
+                );
+              })}
+            </TransitionGroup>
+            <LoadMore
+              topLevel={true}
+              moreComments={asset.comments.hasNextPage}
+              loadMore={this.loadMore}
+              loadingState={loadingState}
+            />
+          </div>
+        ) : (
+          <NoComments assetClosed={asset.isClosed} />
+        )}
       </div>
     );
   }
 }
 
+AllCommentsPane.propTypes = {
+  data: PropTypes.object,
+  root: PropTypes.object,
+  comments: PropTypes.object,
+  commentClassNames: PropTypes.array,
+  setActiveReplyBox: PropTypes.func,
+  activeReplyBox: PropTypes.string,
+  notify: PropTypes.func,
+  disableReply: PropTypes.bool,
+  postComment: PropTypes.func,
+  asset: PropTypes.object,
+  currentUser: PropTypes.object,
+  postFlag: PropTypes.func,
+  postDontAgree: PropTypes.func,
+  loadNewReplies: PropTypes.func,
+  deleteAction: PropTypes.func,
+  showSignInDialog: PropTypes.func,
+  charCountEnable: PropTypes.bool,
+  maxCharCount: PropTypes.number,
+  editComment: PropTypes.func,
+  emit: PropTypes.func,
+};
+
 export default AllCommentsPane;

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

@@ -76,6 +76,7 @@
   display: flex;
   justify-content: center;
   flex-direction: column;
+  width: 100%;
 }
 
 .editCommentForm .buttonContainerLeft .editWindowRemaining {

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

@@ -519,6 +519,7 @@ export default class Comment extends React.Component {
                   : <div>
                     <Slot
                       fill="commentContent"
+                      className='talk-stream-comment-content'
                       defaultComponent={CommentContent}
                       {...slotProps}
                       queryData={queryData}

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

@@ -0,0 +1,6 @@
+.commentTombstone {
+  background-color: #F0F0F0;
+  text-align: center;
+  padding: 1em;
+  color: #3E4F71;
+}

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

@@ -1,6 +1,7 @@
 import React from 'react';
-
+import PropTypes from 'prop-types';
 import t from 'coral-framework/services/i18n';
+import styles from './CommentTombstone.css';
 
 // Render in place of a Comment when the author of the comment is <action>
 class CommentTombstone extends React.Component {
@@ -19,14 +20,9 @@ class CommentTombstone extends React.Component {
 
   render() {
     return (
-      <div>
+      <div className="talk-comment-tombstone">
         <hr aria-hidden={true} />
-        <p style={{
-          backgroundColor: '#F0F0F0',
-          textAlign: 'center',
-          padding: '1em',
-          color: '#3E4F71',
-        }}>
+        <p className={styles.commentTombstone}>
           {this.getCopy()}
         </p>
       </div>
@@ -34,4 +30,8 @@ class CommentTombstone extends React.Component {
   }
 }
 
+CommentTombstone.propTypes = {
+  action: PropTypes.string,
+};
+
 export default CommentTombstone;

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

@@ -35,16 +35,23 @@ export class CountdownSeconds extends React.Component {
     const {until, classNameForMsRemaining} = this.props;
     const msRemaining = until - now;
     const secRemaining = msRemaining / 1000;
-    const wholeSecRemaining = Math.floor(secRemaining);
-    const plural = secRemaining !== 1;
-    const units = t(plural ? 'edit_comment.seconds_plural' : 'edit_comment.second');
+    const minRemaining = secRemaining / 60;
+    const secToMinRemaining = secRemaining % 60;
+    const wholeMinRemaining = Math.floor(minRemaining);
+    const wholeSecRemaining = Math.floor(secToMinRemaining);
+    const secUnit = t(wholeSecRemaining !== 1 ? 'edit_comment.seconds_plural' : 'edit_comment.second');
+    const minUnit = t(wholeMinRemaining !== 1 ? 'edit_comment.minutes_plural' : 'edit_comment.minute');
     let classFromProp;
     if (typeof classNameForMsRemaining === 'function') {
       classFromProp = classNameForMsRemaining(msRemaining);
     }
+    const text = wholeMinRemaining > 0
+      ? `${wholeMinRemaining} ${minUnit} ${wholeSecRemaining} ${secUnit}`
+      : `${wholeSecRemaining} ${secUnit}`;
+
     return (
       <span className={classFromProp}>
-        {`${wholeSecRemaining} ${units}`}
+        {text}
       </span>
     );
   }

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

@@ -75,13 +75,13 @@ export default class Embed extends React.Component {
           activeTab={activeTab}
           id='talk-embed-stream-tab-content'
         >
-          <TabPane tabId={'stream'}>
+          <TabPane tabId={'stream'} className={'talk-embed-stream-comments-tab-pane'}>
             <Stream data={data} root={root} />
           </TabPane>
-          <TabPane tabId={'profile'}>
+          <TabPane tabId={'profile'} className={'talk-embed-stream-profile-tab-pane'}>
             <ProfileContainer />
           </TabPane>
-          <TabPane tabId={'config'}>
+          <TabPane tabId={'config'} className={'talk-embed-stream-configuration-tab-pane'}>
             <ConfigureStreamContainer />
           </TabPane>
         </TabContent>

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

@@ -0,0 +1,6 @@
+.message {
+  padding: 20px 10px;
+  background-color: #f7f7f7;
+  margin: 20px 0;
+  text-align: center;
+}

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cn from 'classnames';
+import t from 'coral-framework/services/i18n';
+import styles from './NoComments.css';
+
+const NoComments = ({assetClosed}) => (
+  <div className="talk-stream-no-comments">
+    {assetClosed ? (
+      <div className={cn(styles.message, 'talk-stream-no-comments-closed-message')}>
+        {t('stream.no_comments_and_closed')}
+      </div>
+    ) : (
+      <div className={cn(styles.message, 'talk-stream-no-comments-message')}>
+        {t('stream.no_comments')}
+      </div>
+    )}
+  </div>
+);
+
+NoComments.propTypes = {
+  assetClosed: PropTypes.bool,
+};
+
+export default NoComments;

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

@@ -303,11 +303,32 @@ class Stream extends React.Component {
 }
 
 Stream.propTypes = {
+  activeStreamTab: PropTypes.string,
+  data: PropTypes.object,
+  root: PropTypes.object,
+  activeReplyBox: PropTypes.string,
+  setActiveReplyBox: PropTypes.func,
+  commentClassNames: PropTypes.array,
+  setActiveStreamTab: PropTypes.func,
+  loadMoreComments: PropTypes.func,
+  postFlag: PropTypes.func,
+  postDontAgree: PropTypes.func,
+  deleteAction: PropTypes.func,
+  showSignInDialog: PropTypes.func,
+  loadNewReplies: PropTypes.func,
+  auth: PropTypes.object,
+  emit: PropTypes.func,
+  sortOrder: PropTypes.string,
+  sortBy: PropTypes.string,
+  loading: PropTypes.bool,
+  editName: PropTypes.func,
+  appendItemArray: PropTypes.func,
+  updateItem: PropTypes.func, 
+  viewAllComments: PropTypes.func,
   notify: PropTypes.func.isRequired,
   postComment: PropTypes.func.isRequired,
-
-  // edit a comment, passed (id, asset_id, { body })
-  editComment: PropTypes.func
+  editComment: PropTypes.func,
+  userIsDegraged: PropTypes.bool,
 };
 
 export default Stream;

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

@@ -6,9 +6,9 @@ import styles from './StreamTabPanel.css';
 class StreamTabPanel extends React.Component {
 
   render() {
-    const {activeTab, setActiveTab, tabs, tabPanes, sub, loading} = this.props;
+    const {activeTab, setActiveTab, tabs, tabPanes, sub, loading, ...rest} = this.props;
     return (
-      <div>
+      <div {...rest}>
         <TabBar activeTab={activeTab} onTabClick={setActiveTab} sub={sub}>
           {tabs}
         </TabBar>
@@ -26,6 +26,7 @@ class StreamTabPanel extends React.Component {
 StreamTabPanel.propTypes = {
   activeTab: PropTypes.string.isRequired,
   setActiveTab: PropTypes.func.isRequired,
+  loading: PropTypes.bool,
   tabs: PropTypes.oneOfType([
     PropTypes.element,
     PropTypes.arrayOf(PropTypes.element)

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

@@ -17,6 +17,7 @@ function getFragmentId(assetId) {
  * AutomaticAssetClosure updates the graphql state of the provide asset
  * to `isClosed=true` when passed `closedAt`.
  */
+
 class AutomaticAssetClosure extends React.Component {
   static contextTypes = {
     client: PropTypes.object.isRequired,

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

@@ -270,6 +270,7 @@ button.comment__action-button[disabled],
   width: 75%;
   font-size: 16px;
   border: 1px solid #ccc;
+  max-width: calc(100% - 40px);
 }
 
 /* Close comments */

client/coral-framework/components/ConfigureCard.css

@@ -0,0 +1,50 @@
+.card {
+  margin-bottom: 20px;
+  align-items: flex-start;
+  min-height: 100px;
+  max-width: 600px;
+  overflow: visible;
+}
+
+.header {
+  margin-top: 3px;
+  margin-bottom: 7px;
+  font-size: 18px;
+  font-weight: 500;
+}
+
+.wrapper {
+  width: 100%;
+  font-size: 14px;
+  letter-spacing: 0;
+}
+
+.action {
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 20px;
+}
+
+.content {
+  display: inline-block;
+  padding: 0px 30px;
+  box-sizing: border-box;
+}
+
+.enabledSetting {
+  border-left-color: #00796b;
+  border-left-style: solid;
+  border-left-width: 7px;
+}
+
+.disabledSetting {
+  padding-left: 22px;
+}
+
+.disabledSettingText {
+  color: #ccc;
+  pointer-events: none;
+}
+

client/coral-framework/components/ConfigureCard.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './ConfigureCard.css';
+import {Card} from 'coral-ui';
+import {Checkbox} from 'react-mdl';
+import cn from 'classnames';
+
+const ConfigureCard = ({title, children, className, onCheckbox, checked, ...rest}) => (
+  <Card {...rest} className={cn(
+    styles.card,
+    className,
+    {
+      [styles.enabledSetting]: checked === true,
+      [styles.disabledSetting]: checked === false,
+    },
+  )}>
+    {checked !== undefined &&
+      <div className={styles.action}>
+        <Checkbox
+          onChange={onCheckbox}
+          checked={checked} />
+      </div>
+    }
+    <div className={cn(styles.wrapper, {
+      [styles.content]: checked !== undefined,
+    })}>
+      <div className={styles.header}>{title}</div>
+      <div className={cn({
+        [styles.disabledSettingText]: checked === false,
+      })}>
+        {children}
+      </div>
+    </div>
+  </Card>
+);
+
+ConfigureCard.propTypes = {
+  title: PropTypes.string.isRequired,
+  className: PropTypes.string,
+  onCheckbox: PropTypes.func,
+  checked: PropTypes.bool,
+  children: PropTypes.node,
+};
+
+export default ConfigureCard;

client/coral-framework/graphql/fragments.js

@@ -16,6 +16,7 @@ export default {
     'ModifyTagResponse',
     'IgnoreUserResponse',
     'StopIgnoringUserResponse',
+    'UpdateSettingsResponse',
   )
 };
 

client/coral-framework/graphql/mutations.js

@@ -340,3 +340,21 @@ export const withStopIgnoringUser = withMutation(
         });
       }}),
   });
+
+export const withUpdateSettings = withMutation(
+  gql`
+    mutation UpdateSettings($input: UpdateSettingsInput!) {
+      updateSettings(input: $input) {
+        ...UpdateSettingsResponse
+      }
+    }
+  `, {
+    props: ({mutate}) => ({
+      updateSettings: (input) => {
+        return mutate({
+          variables: {
+            input,
+          },
+        });
+      }}),
+  });

client/coral-framework/hocs/withMutation.js

@@ -108,7 +108,7 @@ export default (document, config = {}) => hoistStatics((WrappedComponent) => {
                   res[key] = (prev, result) => {
                     if (getResponseErrors(result.mutationResult)) {
 
-                    // Do not run updates when we have mutation errors.
+                      // Do not run updates when we have mutation errors.
                       return prev;
                     }
                     return map[key](prev, result) || prev;
@@ -116,6 +116,11 @@ export default (document, config = {}) => hoistStatics((WrappedComponent) => {
                 } else {
                   const existing = res[key];
                   res[key] = (prev, result) => {
+                    if (getResponseErrors(result.mutationResult)) {
+
+                      // Do not run updates when we have mutation errors.
+                      return prev;
+                    }
                     const next = existing(prev, result);
                     return map[key](next, result) || next;
                   };

client/coral-framework/services/bootstrap.js

@@ -7,6 +7,7 @@ import {createRestClient} from './rest';
 import thunk from 'redux-thunk';
 import {loadTranslations} from './i18n';
 import bowser from 'bowser';
+import noop from 'lodash/noop';
 import {BASE_PATH} from 'coral-framework/constants/url';
 import {createPluginsService} from './plugins';
 import {createNotificationService} from './notification';
@@ -77,7 +78,7 @@ export async function createContext({
   graphqlExtension = {},
   notification,
   preInit,
-  init,
+  init = noop,
 } = {}) {
   const eventEmitter = new EventEmitter({wildcard: true});
   const storage = createStorage();
@@ -179,6 +180,6 @@ export async function createContext({
   }
 
   // Run initialization.
-  await Promise.all([init, plugins.executeInit(context)]);
+  await Promise.all([init(context), plugins.executeInit(context)]);
   return context;
 }

client/coral-framework/services/i18n.js

@@ -3,18 +3,21 @@ import has from 'lodash/has';
 import get from 'lodash/get';
 import merge from 'lodash/merge';
 
-import esTA from '../../../node_modules/timeago.js/locales/es';
-import frTA from '../../../node_modules/timeago.js/locales/fr';
-import pt_BRTA from '../../../node_modules/timeago.js/locales/pt_BR';
+import daTA from 'timeago.js/locales/da';
+import esTA from 'timeago.js/locales/es';
+import frTA from 'timeago.js/locales/fr';
+import pt_BRTA from 'timeago.js/locales/pt_BR';
+
 import en from '../../../locales/en.yml';
+import da from '../../../locales/da.yml';
 import es from '../../../locales/es.yml';
 import fr from '../../../locales/fr.yml';
 import pt_BR from '../../../locales/pt_BR.yml';
 
 // Translations are happening at https://translate.lingohub.com/the-coral-project/dashboard
 
-const defaultLanguage = 'en';
-const translations = {...en, ...es, ...fr, ...pt_BR};
+const defaultLanguage = process.env.TALK_DEFAULT_LANG;
+const translations = {...en, ...da, ...es, ...fr, ...pt_BR};
 
 let lang;
 let timeagoInstance;
@@ -44,6 +47,7 @@ function init() {
   }
 
   ta.register('es', esTA);
+  ta.register('da', daTA);
   ta.register('fr', frTA);
   ta.register('pt_BR', pt_BRTA);
   timeagoInstance = ta();

client/coral-settings/components/NotLoggedIn.js

@@ -1,10 +1,11 @@
 import React from 'react';
 import styles from './NotLoggedIn.css';
+import cn from 'classnames';
 
 import t from 'coral-framework/services/i18n';
 
 export default ({showSignInDialog}) => (
-  <div className={styles.message}>
+  <div className={cn(styles.message, 'talk-embed-stream-not-logged-in')}>
     <div>
       <a onClick={showSignInDialog}>{t('settings.sign_in')}</a> {t('settings.to_access')}
     </div>

client/coral-settings/containers/ProfileContainer.js

@@ -4,7 +4,7 @@ import React, {Component} from 'react';
 import {bindActionCreators} from 'redux';
 import {withQuery} from 'coral-framework/hocs';
 import Slot from 'coral-framework/components/Slot';
-
+import cn from 'classnames';
 import {link} from 'coral-framework/services/pym';
 import NotLoggedIn from '../components/NotLoggedIn';
 import {Spinner} from 'coral-ui';
@@ -53,7 +53,7 @@ class ProfileContainer extends Component {
   };
 
   render() {
-    const {auth, auth: {user}, showSignInDialog, root, data} = this.props;
+    const {auth, auth: {user: authUser}, showSignInDialog, root, data} = this.props;
     const {me} = this.props.root;
     const loading = this.props.data.loading;
 
@@ -65,28 +65,29 @@ class ProfileContainer extends Component {
       return <Spinner />;
     }
 
-    const localProfile = user.profiles.find(
+    const localProfile = authUser.profiles.find(
       (p) => p.provider === 'local'
     );
     const emailAddress = localProfile && localProfile.id;
 
     return (
-      <div className='talk-embed-stream-profile-container'>
-        <h2>{user.username}</h2>
+      <div className="talk-my-profile talk-embed-stream-profile-container">
+        <h2>{me.username}</h2>
         {emailAddress ? <p>{emailAddress}</p> : null}
-
         <Slot
           fill="profileSections"
           data={data}
           queryData={{root}}
         />
-
         <hr />
-
         <h3>{t('framework.my_comments')}</h3>
-        {me.comments.nodes.length
-          ? <CommentHistory data={data} root={root} comments={me.comments} link={link} loadMore={this.loadMore}/>
-          : <p>{t('user_no_comment')}</p>}
+        <div className={cn('talk-my-profile-comment-history', {
+          'talk-my-profile-comment-history-no-comments': !me.comments.nodes.length
+        })}>
+          {me.comments.nodes.length
+            ? <CommentHistory data={data} root={root} comments={me.comments} link={link} loadMore={this.loadMore}/>
+            : <p className='talk-my-profile-comment-history-no-comments-cta'>{t('user_no_comment')}</p>}
+        </div>
       </div>
     );
   }
@@ -140,6 +141,7 @@ const withProfileQuery = withQuery(
   query CoralEmbedStream_Profile {
     me {
       id
+      username
       comments(query: {limit: 10}) {
         ...TalkSettings_CommentConnectionFragment
       }

client/coral-ui/components/Card.css

@@ -30,5 +30,3 @@
 .shadow--3 {
   box-shadow: 0 3px 4px 0 rgba(0,0,0,.14), 0 3px 3px -2px rgba(0,0,0,.2), 0 1px 8px 0 rgba(0,0,0,.12);
 }
-
-

client/coral-ui/components/Card.js

@@ -1,8 +1,17 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import styles from './Card.css';
 
-export default ({children, className, shadow = 2, ...props}) => (
+const Card = ({children, className, shadow = 2, ...props}) => (
   <div className={`${styles.base} ${className} ${styles[`shadow--${shadow}`]}`} {...props}>
     {children}
   </div>
 );
+
+Card.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  shadow: PropTypes.number,
+};
+
+export default Card;

client/coral-ui/components/Dropdown.css

@@ -0,0 +1,62 @@
+.dropdown {
+  position: relative;
+  width: 150px;
+  height: 36px;
+  background: #2c2c2c;
+  box-sizing: border-box;
+  color: white;
+  border-radius: 2px;
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
+
+  line-height: 1.4;
+  font-size: 13px;
+}
+
+.toggle {
+  padding: 10px 15px;
+  cursor: pointer;
+  outline: none;
+
+  &:focus {
+    background: #888;
+  }
+}
+
+.toggleOpen {
+  background: #888;
+}
+
+.label {
+  text-transform: capitalize;
+}
+
+.list {
+  position: absolute;
+  top: 30px;
+  left: 10px;
+  color: #2c2c2c;
+  border-radius: 2px;
+  background: white;
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
+  width: 100%;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  transform: scale(0);
+  transition: transform .1s cubic-bezier(.4,0,.2,1),opacity .1s cubic-bezier(.4,0,.2,1),-webkit-transform .1s cubic-bezier(.4,0,.2,1);
+  transform-origin: 0 0;
+}
+
+.listActive {
+  opacity: 1;
+  transform: scale(1);
+  z-index: 999;
+}
+
+.arrow {
+  position: absolute;
+  right: 15px;
+  font-size: 1.2rem;
+  vertical-align: middle;
+  top: 13px;
+}

client/coral-ui/components/Dropdown.js

@@ -0,0 +1,187 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './Dropdown.css';
+import Icon from './Icon';
+import cn from 'classnames';
+import ClickOutside from 'coral-framework/components/ClickOutside';
+
+class Dropdown extends React.Component {
+
+  toggleRef = null;
+  optionsRef = [];
+
+  state = {
+    isOpen: false
+  };
+
+  componentDidUpdate(_, prevState) {
+    if (!this.state.isOpen && prevState.isOpen) {
+
+      // Refocus on the toggle element when menu closes.
+      this.toggleRef.focus();
+    }
+  }
+
+  goUp = () => {
+    const index = this.optionsRef.findIndex((ref) => ref.hasFocus());
+    if (index > 0) {
+      this.optionsRef[index - 1].focus();
+    }
+  }
+
+  goDown = () => {
+    const index = this.optionsRef.findIndex((ref) => ref.hasFocus());
+    if (index < this.optionsRef.length - 1) {
+      this.optionsRef[index + 1].focus();
+    }
+  }
+
+  handleOptionKeyDown = (value, e) => {
+    const code = e.which;
+
+    switch (code) {
+    case 13: // 13 = Return
+    case 32: // 32 = Space
+      e.preventDefault();
+      this.setValue(value);
+      break;
+    case 38: // 38 = Arrow Up
+      e.preventDefault();
+      this.goUp();
+      break;
+    case 40: // 40 = Arrow Down
+      e.preventDefault();
+      this.goDown();
+      break;
+    }
+  }
+
+  handleOptionClick = (value) => {
+    this.setValue(value);
+  }
+
+  setValue = (value) => {
+    if (this.props.onChange) {
+      this.props.onChange(value);
+    }
+
+    this.setState({
+      isOpen: false
+    });
+  }
+
+  toggle = () => {
+    this.setState({
+      isOpen: !this.state.isOpen
+    });
+  }
+
+  handleClick = () => {
+    this.toggle();
+  }
+
+  handleKeyDown = (e) => {
+    const code = e.which;
+
+    // 13 = Return, 32 = Space
+    if ((code === 13) || (code === 32)) {
+      e.preventDefault();
+      this.toggle();
+    }
+  }
+
+  hideMenu = () => {
+    this.setState({
+      isOpen: false
+    });
+  }
+
+  handleToggleRef = (ref) => this.toggleRef = ref;
+
+  handleOptionsRef = (ref, index) => {
+    this.optionsRef[index] = ref;
+
+    // Focus on current value when menu opens.
+    if (ref) {
+      if (ref.props.value === this.props.value || index === 0 && !this.props.value) {
+        ref.focus();
+        return;
+      }
+    }
+  }
+
+  // Trap keyboard focus inside the dropdown until a value has been chosen.
+  trapFocusBegin = () => this.optionsRef[this.optionsRef.length - 1].focus();
+  trapFocusEnd = () => this.optionsRef[0].focus();
+
+  renderLabel() {
+    const options = React.Children.toArray(this.props.children);
+    const option = options.find((option) => option.props.value === this.props.value);
+
+    if (option) {
+      return option.props.label ? option.props.label : option.props.value;
+    } else if (this.props.value) {
+      return this.props.value;
+    } else {
+      return this.props.placeholder;
+    }
+  }
+
+  render() {
+    const {className, toggleClassName, toggleOpenClassName} = this.props;
+    return (
+      <ClickOutside onClickOutside={this.hideMenu}>
+        <div className={cn(styles.dropdown, className)}>
+          <div
+            className={cn(styles.toggle, toggleClassName, {[cn(this.state.isOpen, toggleOpenClassName)]: this.state.isOpen})}
+            onClick={this.handleClick}
+            onKeyDown={this.handleKeyDown}
+            role="button"
+            aria-pressed={this.state.isOpen}
+            aria-haspopup="true"
+            tabIndex="0"
+            ref={this.handleToggleRef}
+          >
+            {this.props.icon && <Icon name={this.props.icon} className={styles.icon} aria-hidden="true" />}
+            <span className={styles.label}>{this.renderLabel()}</span>
+            {this.state.isOpen ? <Icon name="keyboard_arrow_up" className={styles.arrow} aria-hidden="true"/> : <Icon name="keyboard_arrow_down" className={styles.arrow} aria-hidden="true"/>}
+          </div>
+          {this.state.isOpen &&
+            <div>
+              <div tabIndex="0" onFocus={this.trapFocusBegin} />
+              <ul className={cn(styles.list, {[styles.listActive] : this.state.isOpen})}>
+                {React.Children.toArray(this.props.children)
+                  .map((child, i) =>
+                    React.cloneElement(child, {
+                      key: child.props.value,
+                      ref: (ref) => this.handleOptionsRef(ref, i),
+                      index: i,
+                      onClick: () => this.handleOptionClick(child.props.value),
+                      onKeyDown: (e) => this.handleOptionKeyDown(child.props.value, e)
+                    }))}
+              </ul>
+              <div tabIndex="0" onFocus={this.trapFocusEnd} />
+            </div>
+          }
+        </div>
+      </ClickOutside>
+    );
+  }
+}
+
+Dropdown.propTypes = {
+  className: PropTypes.string,
+  toggleClassName: PropTypes.string,
+  toggleOpenClassName: PropTypes.string,
+  placeholder: PropTypes.string,
+  icon: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+  children: PropTypes.node.isRequired,
+  value: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.string,
+    PropTypes.bool
+  ]),
+};
+
+export default Dropdown;