Merge pull request #1525 from coralproject/storage-fixes

Storage Fixes

.babelrc

@@ -1,6 +1,6 @@
 {
   "presets": [
-    ["es2015", {modules: false}]
+    ["es2015", {"modules": false}]
   ],
   "plugins": [
     "transform-class-properties",

.circleci/config.yml

@@ -0,0 +1,300 @@
+# job_defaults applies all the defaults for each job.
+job_defaults: &job_defaults
+  working_directory: ~/coralproject/talk
+  docker:
+    - image: circleci/node:8
+
+# integration_environment is the environment that configures the tests.
+integration_environment: &integration_environment
+  NODE_ENV: test
+  CIRCLE_TEST_REPORTS: /tmp/circleci-test-results
+  E2E_MAX_RETRIES: 3
+
+# integration_job runs the integration tests and saves the test results.
+integration_job: &integration_job
+  <<: *job_defaults
+  environment:
+    <<: *integration_environment
+  docker:
+    # TODO: replace with node:8-browsers when build issues are resolved.
+    # - image: circleci/node:8-browsers
+    - image: coralproject/ci
+    - image: circleci/mongo:3
+    - image: circleci/redis:4-alpine
+  steps:
+    - checkout
+    - attach_workspace:
+        at: ~/coralproject/talk
+    - run:
+        name: Setup the database with defaults
+        command: ./bin/cli setup --defaults
+    - run:
+        name: Run the integration tests
+        command: bash .circleci/e2e.sh
+    - store_test_results:
+        when: always
+        path: /tmp/circleci-test-results
+    - store_artifacts:
+        when: always
+        path: /tmp/circleci-test-results
+
+
+version: 2
+jobs:
+  # npm_dependencies will install the dependencies used by all other steps.
+  npm_dependencies:
+    <<: *job_defaults
+    steps:
+      - checkout
+      - attach_workspace:
+          at: ~/coralproject/talk
+      - restore_cache:
+          key: dependency-cache-{{ checksum "yarn.lock" }}
+      - run:
+          name: Install dependencies
+          command: |
+            yarn global add node-gyp &&
+            yarn install --frozen-lockfile
+      - save_cache:
+          key: dependency-cache-{{ checksum "yarn.lock" }}
+          paths:
+            - ./node_modules
+      - persist_to_workspace:
+          root: .
+          paths: node_modules
+
+  # lint will perform file linting.
+  lint:
+    <<: *job_defaults
+    steps:
+      - checkout
+      - attach_workspace:
+          at: ~/coralproject/talk
+      - run:
+          name: Perform linting
+          command: yarn lint
+
+  # build_assets will build the static assets.
+  build_assets:
+    <<: *job_defaults
+    steps:
+      - checkout
+      - attach_workspace:
+          at: ~/coralproject/talk
+      - restore_cache:
+          keys:
+            - build-cache-{{ .Branch }}-{{ .Revision }}
+            - build-cache-{{ .Branch }}-
+            - build-cache-
+      - run:
+          name: Build static assets
+          command: yarn build
+      - save_cache:
+          key: build-cache-{{ .Branch }}-{{ .Revision }}
+          paths:
+            - ./node_modules/.cache/babel-loader
+      - persist_to_workspace:
+          root: .
+          paths: dist
+
+  # test_unit will run the unit tests.
+  test_unit:
+    <<: *job_defaults
+    docker:
+      - image: circleci/node:8
+      - image: circleci/mongo:3
+      - image: circleci/redis:4-alpine
+    steps:
+      - checkout
+      - attach_workspace:
+          at: ~/coralproject/talk
+      - run:
+          name: Setup the test results directory
+          command: mkdir -p /tmp/circleci-test-results
+      - run:
+          name: Run the client unit tests
+          command: yarn test:client --ci
+          environment:
+            JEST_JUNIT_OUTPUT: /tmp/circleci-test-results/jest/test-results.xml
+            JEST_REPORTER: jest-junit
+      - run:
+          name: Run the server unit tests
+          command: yarn test:server
+          environment:
+            MOCHA_FILE: /tmp/circleci-test-results/mocha/test-results.xml
+            MOCHA_REPORTER: mocha-junit-reporter
+      - store_test_results:
+          when: always
+          path: /tmp/circleci-test-results
+
+  # test_integration_chrome_local will run the integration tests locally with
+  # chrome headless.
+  test_integration_chrome_local:
+    <<: *integration_job
+    environment:
+      <<: *integration_environment
+      E2E_BROWSERS: chrome
+
+  # test_integration_firefox_local will run the integration tests locally with
+  # firefox headless.
+  test_integration_firefox_local:
+    <<: *integration_job
+    environment:
+      <<: *integration_environment
+      E2E_BROWSERS: firefox
+
+  # test_integration_chrome will run the integration tests with chrome in
+  # browserstack.
+  test_integration_chrome:
+    <<: *integration_job
+    environment:
+      <<: *integration_environment
+      BROWSERSTACK: true
+      E2E_BROWSERS: chrome
+
+  # test_integration_firefox will run the integration tests with firefox in
+  # browserstack.
+  test_integration_firefox:
+    <<: *integration_job
+    environment:
+      <<: *integration_environment
+      BROWSERSTACK: true
+      E2E_BROWSERS: firefox
+
+  # test_integration_edge will run the integration tests with edge in
+  # browserstack.
+  test_integration_edge:
+    <<: *integration_job
+    environment:
+      <<: *integration_environment
+      BROWSERSTACK: true
+      E2E_BROWSERS: edge
+
+  # test_integration_ie will run the integration tests with ie in
+  # browserstack.
+  test_integration_ie:
+    <<: *integration_job
+    environment:
+      <<: *integration_environment
+      BROWSERSTACK: true
+      E2E_BROWSERS: ie
+      # TODO: remove when more reliable
+      E2E_MAX_RETRIES: 1
+
+  # test_integration_safari will run the integration tests with safari in
+  # browserstack.
+  test_integration_safari:
+    <<: *integration_job
+    environment:
+      <<: *integration_environment
+      BROWSERSTACK: true
+      E2E_BROWSERS: safari
+      # TODO: remove when more reliable
+      E2E_MAX_RETRIES: 1
+
+  # deploy will deploy the application as a docker image.
+  deploy:
+    <<: *job_defaults
+    steps:
+      - checkout
+      - setup_remote_docker
+      - run:
+          name: Deploy the code
+          command: bash ./scripts/docker.sh deploy
+
+# filter_deploy will add the filters for a deploy job in a workflow to make it
+# only execute on a deploy related job.
+filter_deploy: &filter_deploy
+  filters:
+    branches:
+      only:
+        - master
+        - next
+    tags:
+      only: /v[0-9]+(\.[0-9]+)*/
+
+# filter_develop will add the filters for a development related commit.
+filter_develop: &filter_develop
+  filters:
+    branches:
+      ignore:
+        - master
+        - next
+
+workflows:
+  version: 2
+
+  # All PR's will hit this workflow.
+  build-and-test:
+    jobs:
+      - npm_dependencies:
+          <<: *filter_develop
+      - lint:
+          <<: *filter_develop
+          requires:
+            - npm_dependencies
+      - test_unit:
+          <<: *filter_develop
+          requires:
+            - npm_dependencies
+      - build_assets:
+          <<: *filter_develop
+          requires:
+            - npm_dependencies
+      - test_integration_chrome_local:
+          <<: *filter_develop
+          requires:
+            - build_assets
+      # TODO: uncomment when more reliable
+      # - test_integration_firefox_local:
+      #     <<: *filter_develop
+      #     requires:
+      #       - build_assets
+  deploy-tagged:
+    jobs:
+      - npm_dependencies:
+          <<: *filter_deploy
+      - lint:
+          <<: *filter_deploy
+          requires:
+            - npm_dependencies
+      - test_unit:
+          <<: *filter_deploy
+          requires:
+            - npm_dependencies
+      - build_assets:
+          <<: *filter_deploy
+          requires:
+            - npm_dependencies
+      - test_integration_chrome:
+          <<: *filter_deploy
+          requires:
+            - build_assets
+      - test_integration_firefox:
+          <<: *filter_deploy
+          requires:
+            - build_assets
+      - test_integration_edge:
+          <<: *filter_deploy
+          requires:
+            - build_assets
+      # TODO: uncomment when more reliable
+      # - test_integration_ie:
+      #    <<: *filter_deploy
+      #    requires:
+      #      - build_assets
+      # - test_integration_safari:
+      #    <<: *filter_deploy
+      #    requires:
+      #      - build_assets
+      - deploy:
+          <<: *filter_deploy
+          requires:
+            - lint
+            - test_unit
+            - test_integration_chrome
+            - test_integration_firefox
+            - test_integration_edge
+            # TODO: uncomment when more reliable
+            # - test_integration_ie
+            # - test_integration_safari

.circleci/e2e.sh

@@ -19,11 +19,11 @@ if [[ "${E2E_DISABLE}" == "true" ]]; then
   exit
 fi
 
-if [[ "${CIRCLE_BRANCH}" == "master" && -n "$BROWSERSTACK_KEY" ]]; then
+if [[ "$BROWSERSTACK" == "true" && -n "$BROWSERSTACK_KEY" ]]; then
   echo Testing on browserstack
-  yarn e2e --reports-folder "$REPORTS_FOLDER" --bs-key "$BROWSERSTACK_KEY" --retries "$E2E_MAX_RETRIES" --timeout "$E2E_WAIT_FOR_TIMEOUT" --browsers "$E2E_BROWSERS"
+  node scripts/e2e.js --reports-folder "$REPORTS_FOLDER" --retries "$E2E_MAX_RETRIES" --timeout "$E2E_WAIT_FOR_TIMEOUT" --browsers "$E2E_BROWSERS" --browserstack
 else
-  # When browserstack is not available test locally using chrome headless.
+  # When browserstack is not available test locally.
   echo Testing locally
-  yarn e2e --reports-folder "$REPORTS_FOLDER" --retries "$E2E_MAX_RETRIES" --headless
+  node scripts/e2e.js --reports-folder "$REPORTS_FOLDER" --retries "$E2E_MAX_RETRIES" --timeout "$E2E_WAIT_FOR_TIMEOUT" --browsers "$E2E_BROWSERS" --headless
 fi

.eslintignore

@@ -1,34 +1,5 @@
 **/*.html
 dist
-docs
 node_modules
-plugins/*
 public
-
-!plugins/talk-plugin-akismet
-!plugins/talk-plugin-auth
-!plugins/talk-plugin-author-menu
-!plugins/talk-plugin-comment-content
-!plugins/talk-plugin-deep-reply-count
-!plugins/talk-plugin-facebook-auth
-!plugins/talk-plugin-featured-comments
-!plugins/talk-plugin-flag-details
-!plugins/talk-plugin-ignore-user
-!plugins/talk-plugin-like
-!plugins/talk-plugin-love
-!plugins/talk-plugin-member-since
-!plugins/talk-plugin-mod
-!plugins/talk-plugin-moderation-actions
-!plugins/talk-plugin-offtopic
-!plugins/talk-plugin-permalink
-!plugins/talk-plugin-remember-sort
-!plugins/talk-plugin-respect
-!plugins/talk-plugin-sort-most-liked
-!plugins/talk-plugin-sort-most-loved
-!plugins/talk-plugin-sort-most-replied
-!plugins/talk-plugin-sort-most-respected
-!plugins/talk-plugin-sort-newest
-!plugins/talk-plugin-sort-oldest
-!plugins/talk-plugin-subscriber
-!plugins/talk-plugin-toxic-comments
-!plugins/talk-plugin-viewing-options
+**/*.min.js

.github/ISSUE_TEMPLATE.md

@@ -1,5 +1,34 @@
-### Expected behavior
+<!--
 
-### Actual behavior
+  Thank you for filing an issue on Coral Talk!
 
-### Steps to reproduce behavior
+  Please fill out the questions below so we can take action on your issue as soon as we can.
+
+  If you're filing a feature request, you do not need to follow the outline below. Instead please include "Feature Idea" in your issue title and explain a specific example in which that feature would be useful.
+  
+-->
+
+#### Do you want to request a **feature** or report a **bug**?
+
+
+#### Intended outcome:
+<!--
+What you were trying to accomplish when the bug occurred?
+-->
+
+#### Actual outcome:
+<!--
+What happened instead?
+
+Please provide as much detail as possible, including a screenshot or copy-paste of any related error messages, logs, or other output that might be related. Places to look for information include your browser console, server console, and network logs. The more information you can give the better.
+-->
+
+#### How to reproduce the issue:
+<!--
+Instructions for how the issue can be reproduced by someone from our team or by a contributor. Be as specific as possible, and only mention what is necessary to reproduce the bug. If possible, try to isolate the exact circumstances in which the bug occurs and avoid speculation over what the cause might be.
+-->
+
+#### Version and environment
+<!--
+List what version of Talk you're using, as well as any other relevant environment information, such as operating system or browser
+-->

.gitignore

@@ -6,6 +6,7 @@ npm-debug.log*
 dump.rdb
 
 client/coral-framework/graphql/introspection.json
+docs/source/_data/introspection.json
 
 .env
 *.cfg
@@ -14,6 +15,7 @@ client/coral-framework/graphql/introspection.json
 *.swp
 *.DS_STORE
 .prettierrc.json
+.vscode
 
 coverage/
 test/e2e/reports/
@@ -22,36 +24,49 @@ test/e2e/selenium-debug.log
 browserstack.err
 
 plugins.json
+
 plugins/*
 !plugins/talk-plugin-akismet
-!plugins/talk-plugin-facebook-auth
 !plugins/talk-plugin-auth
-!plugins/talk-plugin-respect
-!plugins/talk-plugin-offtopic
-!plugins/talk-plugin-like
-!plugins/talk-plugin-mod
-!plugins/talk-plugin-love
-!plugins/talk-plugin-viewing-options
+!plugins/talk-plugin-author-menu
 !plugins/talk-plugin-comment-content
-!plugins/talk-plugin-permalink
+!plugins/talk-plugin-deep-reply-count
+!plugins/talk-plugin-downvote
+!plugins/talk-plugin-facebook-auth
 !plugins/talk-plugin-featured-comments
-!plugins/talk-plugin-toxic-comments
-!plugins/talk-plugin-sort-newest
-!plugins/talk-plugin-sort-oldest
-!plugins/talk-plugin-sort-most-replied
+!plugins/talk-plugin-flag-details
+!plugins/talk-plugin-google-auth
+!plugins/talk-plugin-ignore-user
+!plugins/talk-plugin-like
+!plugins/talk-plugin-love
+!plugins/talk-plugin-member-since
+!plugins/talk-plugin-mod
+!plugins/talk-plugin-moderation-actions
+!plugins/talk-plugin-notifications
+!plugins/talk-plugin-notifications-category-featured
+!plugins/talk-plugin-notifications-category-reply
+!plugins/talk-plugin-notifications-category-staff
+!plugins/talk-plugin-notifications-digest-daily
+!plugins/talk-plugin-notifications-digest-hourly
+!plugins/talk-plugin-offtopic
+!plugins/talk-plugin-permalink
+!plugins/talk-plugin-profile-settings
+!plugins/talk-plugin-remember-sort
+!plugins/talk-plugin-respect
+!plugins/talk-plugin-slack-notifications
+!plugins/talk-plugin-sort-most-downvoted
 !plugins/talk-plugin-sort-most-liked
 !plugins/talk-plugin-sort-most-loved
+!plugins/talk-plugin-sort-most-replied
 !plugins/talk-plugin-sort-most-respected
-!plugins/talk-plugin-author-menu
-!plugins/talk-plugin-member-since
-!plugins/talk-plugin-ignore-user
-!plugins/talk-plugin-moderation-actions
-!plugins/talk-plugin-toxic-comments
-!plugins/talk-plugin-remember-sort
-!plugins/talk-plugin-deep-reply-count
+!plugins/talk-plugin-sort-most-upvoted
+!plugins/talk-plugin-sort-newest
+!plugins/talk-plugin-sort-oldest
 !plugins/talk-plugin-subscriber
-!plugins/talk-plugin-flag-details
-!plugins/talk-plugin-slack-notifications
+!plugins/talk-plugin-toxic-comments
+!plugins/talk-plugin-upvote
+!plugins/talk-plugin-viewing-options
+!plugins/talk-plugin-rich-text
 
 **/node_modules/*
 yarn-error.log

.lintstagedrc.json

@@ -0,0 +1,13 @@
+{
+  "linters": {
+    "*.js": [
+      "git-exec-and-restage eslint --fix --"
+    ],
+    "bin/cli*": [
+      "git-exec-and-restage eslint --fix --"
+    ],
+    "*.yml": [
+      "yamllint"
+    ]
+  }
+}

.nodemon.json

@@ -1,6 +1,6 @@
 {
   "exec": "npm-run-all --parallel generate-introspection start:development",
-  "ignore": ["test/*", "client/*", "dist/*", "plugins/*/client"],
+  "ignore": ["test/*", "client/*", "dist/*", "plugins/*/client", "docs/*"],
   "ext": "js,json,graphql,yml",
   "watch": [
     ".",

.nsprc

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

CONTRIBUTING.md

@@ -54,12 +54,12 @@ We are looking for _documentarians_ to:
 * take the lead in making sections, or the over all structure better.
 
 Our documentation is stored in markdown files in the [docs](docs) directory. We
-use Jekyll to provide our docs. To preview:
+use [Hexo](https://hexo.io/) to provide our docs. To preview:
 
 ```shell
 cd docs
-bundle install
-bundle exec jekyll serve
+yarn
+yarn start
 ```
 
 Then visit http://127.0.0.1:4000/talk/.

Dockerfile

@@ -15,10 +15,13 @@ COPY . /usr/src/app
 # Ensure the runtime of the container is in production mode.
 ENV NODE_ENV production
 
+# Store the current git revision.
+ARG REVISION_HASH
+ENV REVISION_HASH=${REVISION_HASH}
+
 # Install app dependencies and build static assets.
 RUN yarn global add node-gyp && \
     yarn install --frozen-lockfile && \
-    cli plugins reconcile && \
     yarn build && \
     yarn cache clean
 

Dockerfile.onbuild

@@ -18,5 +18,6 @@ ONBUILD COPY . /usr/src/app
 # clear out the development dependencies again. After this we of course need to
 # clear out the yarn cache, this saves quite a lot of size.
 ONBUILD RUN cli plugins reconcile && \
+            yarn && \
             yarn build && \
             yarn cache clean

README.md

@@ -1,4 +1,4 @@
-# Talk · [![CircleCI](https://circleci.com/gh/coralproject/talk.svg?style=svg)](https://circleci.com/gh/coralproject/talk) · [![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) · [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](CONTRIBUTING.md#pull-requests)
+# Talk · [![CircleCI](https://circleci.com/gh/coralproject/talk.svg?style=svg)](https://circleci.com/gh/coralproject/talk) · [![NSP Status](https://nodesecurity.io/orgs/coralproject/projects/7bd7d26c-47ed-4a5f-8c4a-b919bf1c2946/badge)](https://nodesecurity.io/orgs/coralproject/projects/7bd7d26c-47ed-4a5f-8c4a-b919bf1c2946) · [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](CONTRIBUTING.md#pull-requests)
 
 Online comments are broken. Our open-source commenting platform, Talk, 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).
 
@@ -12,19 +12,23 @@ You're just one click away from trying Talk - all you need is a Heroku account a
 
 ## Technical Documentation
 
-From getting up and running, to advanced configuration, to how to scale Talk, our [Talk Technical Docs](https://coralproject.github.io/talk/) have everything you need to know.
+From getting up and running, to advanced configuration, to how to scale Talk, our [Talk Technical Docs](https://docs.coralproject.net/talk/) have everything you need to know.
 
 ## Product Guide
 
-Learn more about Talk, including a deep dive into features for commenters and moderators, and FAQs in our [Talk Product Guide](https://coralproject.github.io/talk/how-talk-works).
+Learn more about Talk, including a deep dive into features for commenters and moderators, and FAQs in our [Talk Product Guide](https://docs.coralproject.net/talk/how-talk-works).
 
-## Relevant Links
+## Pre-Launch Guide
 
+You’ve installed Talk on your server, and you’re preparing to launch it on your site. The real community work starts now, before you go live. You have a unique opportunity pre-launch to set your community up for success. Read our [Talk Community Guide](https://blog.coralproject.net/youve-installed-talk-now-what/).
+
+## More Resources
+
+- [Talk Product Roadmap](https://www.pivotaltracker.com/n/projects/1863625)
 - [Our Blog](https://blog.coralproject.net/)
 - [Community Forums](https://community.coralproject.net/)
 - [Community Guides for Journalism](https://guides.coralproject.net/)
 - [More About Us](https://coralproject.net/)
-- [Talk Roadmap](https://www.pivotaltracker.com/n/projects/1863625)
 
 ## End-to-End Testing
 

app.js

@@ -1,7 +1,7 @@
 const express = require('express');
-const morgan = require('morgan');
+const trace = require('./middleware/trace');
+const logging = require('./middleware/logging');
 const path = require('path');
-const uuid = require('uuid');
 const merge = require('lodash/merge');
 const helmet = require('helmet');
 const plugins = require('./services/plugins');
@@ -13,12 +13,9 @@ const { ENABLE_TRACING, APOLLO_ENGINE_KEY, PORT } = require('./config');
 
 const app = express();
 
-// Request Identity Middleware
-app.use((req, res, next) => {
-  req.id = uuid.v4();
-
-  next();
-});
+// Add the trace middleware first, it will create a request ID for each request
+// downstream.
+app.use(trace);
 
 //==============================================================================
 // PLUGIN PRE APPLICATION MIDDLEWARE
@@ -38,7 +35,7 @@ plugins.get('server', 'app').forEach(({ plugin, app: callback }) => {
 
 // Add the logging middleware only if we aren't testing.
 if (process.env.NODE_ENV !== 'test') {
-  app.use(morgan('dev'));
+  app.use(logging.log);
 }
 
 if (ENABLE_TRACING && APOLLO_ENGINE_KEY) {

bin/cli-assets

@@ -13,6 +13,7 @@ const CommentModel = require('../models/comment');
 const AssetsService = require('../services/assets');
 const mongoose = require('../services/mongoose');
 const scraper = require('../services/scraper');
+const Context = require('../graph/context');
 const inquirer = require('inquirer');
 const { URL } = require('url');
 
@@ -52,22 +53,27 @@ async function refreshAssets(ageString) {
     const ageMs = parseDuration(ageString);
     const age = new Date(now - ageMs);
 
-    let assets = await AssetModel.find({
-      $or: [
-        {
-          scraped: {
-            $lte: age,
+    let assets = await AssetModel.find(
+      {
+        $or: [
+          {
+            scraped: {
+              $lte: age,
+            },
           },
-        },
-        {
-          scraped: null,
-        },
-      ],
-    });
+          {
+            scraped: null,
+          },
+        ],
+      },
+      { id: 1 }
+    );
+
+    // Create a graph context.
+    const ctx = Context.forSystem();
 
     // Queue all the assets for scraping.
-    await Promise.all(assets.map(scraper.create));
-
+    await Promise.all(assets.map(({ id }) => scraper.create(ctx, id)));
     console.log('Assets were queued to be scraped');
     util.shutdown();
   } catch (e) {

bin/cli-jobs

@@ -6,8 +6,7 @@
 
 const util = require('./util');
 const program = require('commander');
-const scraper = require('../services/scraper');
-const mailer = require('../services/mailer');
+const jobs = require('../jobs');
 const mongoose = require('../services/mongoose');
 const kue = require('../services/kue');
 
@@ -21,11 +20,8 @@ function processJobs() {
   // started.
   util.onshutdown([() => kue.Task.shutdown()]);
 
-  // Start the scraper processor.
-  scraper.process();
-
-  // Start the mail processor.
-  mailer.process();
+  // Start the jobs processor.
+  jobs.process();
 }
 
 /**

bin/cli-plugins

@@ -135,22 +135,15 @@ function reconcilePackages({ quiet = false, upgradeRemote = false }) {
   return { local, fetchable, upgradable };
 }
 
-async function reconcileRemotePlugins({ skipLocal, dryRun, upgradeRemote }) {
-  console.log(
-    `\n[${skipLocal ? '1/2' : '2/3'}] ${emoji.get(
-      'mag'
-    )} Reconciling plugins...`.yellow
-  );
+async function reconcileRemotePlugins({ dryRun, upgradeRemote }) {
+  console.log(`\n['1/2'] ${emoji.get('mag')} Reconciling plugins...`.yellow);
   const { fetchable, upgradable } = reconcilePackages({ upgradeRemote });
 
-  console.log(
-    `[${skipLocal ? '2/2' : '3/3'}] ${emoji.get('truck')} Fetching plugins...\n`
-      .yellow
-  );
+  console.log(`['2/2'] ${emoji.get('truck')} Fetching plugins...\n`.yellow);
 
   if (fetchable.length > 0) {
     console.log(
-      `$ yarn add --ignore-scripts ${fetchable.map(
+      `$ yarn add --ignore-scripts --ignore-workspace-root-check ${fetchable.map(
         ({ name, version }) => `${name}@${version}`.cyan
       )}`
     );
@@ -159,6 +152,7 @@ async function reconcileRemotePlugins({ skipLocal, dryRun, upgradeRemote }) {
       let args = [
         'add',
         '--ignore-scripts',
+        '--ignore-workspace-root-check',
         ...fetchable.map(({ name, version }) => `${name}@${version}`),
       ];
 
@@ -206,98 +200,41 @@ async function reconcileRemotePlugins({ skipLocal, dryRun, upgradeRemote }) {
   return { upgradable, fetchable };
 }
 
-async function reconcileLocalPlugins({ skipRemote, dryRun }) {
-  console.log(
-    `\n[${skipRemote ? '1/1' : '1/3'}] ${emoji.get(
-      'pick'
-    )} Installing local plugin dependencies...\n`.yellow
-  );
-  const { local } = reconcilePackages({ quiet: true });
-
-  for (let i in local) {
-    let { name } = local[i];
-
-    if (!fs.existsSync(path.join(dir, 'plugins', name, 'package.json'))) {
-      continue;
-    }
-
-    let wd = path.join(dir, 'plugins', name);
-
-    console.log(`$ cd ${wd.cyan} && yarn`);
-
-    if (!dryRun) {
-      let args = [];
-
-      let output = spawn.sync('yarn', args, {
-        stdio: ['ignore', 'pipe', 'inherit'],
-        cwd: wd,
-      });
-
-      if (output.status) {
-        throw new Error(
-          'Could not install local plugin dependencies, errors occurred during install'
-        );
-      }
-
-      console.log(output.stdout.toString());
-    }
-  }
-}
-
 // This traverses the local plugins and installs any dependencies listed there,
 // this only is really needed for plugins that are installed via docker because
 // core plugins will have their dependencies already included in core.
-async function reconcilePluginDeps({
-  skipLocal,
-  skipRemote,
-  dryRun,
-  upgradeRemote,
-}) {
+async function reconcilePluginDeps({ dryRun, upgradeRemote }) {
   try {
     let startTime = new Date();
 
-    // We don't need to do anything if we skip everything....
-    if (skipLocal && skipRemote) {
-      return;
-    }
-
-    // Traverse local plugins and install dependencies if enabled.
-    if (!skipLocal) {
-      await reconcileLocalPlugins({ skipRemote, dryRun });
-    }
-
     // Locate any external plugins and install them.
-    if (!skipRemote) {
-      const results = await reconcileRemotePlugins({
-        skipLocal,
-        skipRemote,
-        dryRun,
-        upgradeRemote,
-      });
+    const results = await reconcileRemotePlugins({
+      dryRun,
+      upgradeRemote,
+    });
 
-      let status;
-      if (dryRun) {
-        status = '[dry-run] success'.green;
-      } else {
-        status = 'success'.green;
-      }
-
-      let message;
-      if (results.upgradable.length === 0 && results.fetchable.length === 0) {
-        message = 'Already up-to-date.';
-      } else if (results.upgradable.length === 0) {
-        message = `Fetched ${results.fetchable.length} new plugins.`;
-      } else if (results.fetchable.length === 0) {
-        message = `Upgraded ${results.upgradable.length} new plugins.`;
-      } else {
-        message = `Fetched ${results.fetchable.length} new plugins, upgraded ${
-          results.upgradable.length
-        } plugins.`;
-      }
-
-      console.log(`\n${status} ${message}`);
+    let status;
+    if (dryRun) {
+      status = '[dry-run] success'.green;
+    } else {
+      status = 'success'.green;
     }
 
+    let message;
+    if (results.upgradable.length === 0 && results.fetchable.length === 0) {
+      message = 'Already up-to-date.';
+    } else if (results.upgradable.length === 0) {
+      message = `Fetched ${results.fetchable.length} new plugins.`;
+    } else if (results.fetchable.length === 0) {
+      message = `Upgraded ${results.upgradable.length} new plugins.`;
+    } else {
+      message = `Fetched ${results.fetchable.length} new plugins, upgraded ${
+        results.upgradable.length
+      } plugins.`;
+    }
+
+    console.log(`\n${status} ${message}`);
+
     let endTime = new Date();
 
     let totalTime = ((endTime.getTime() - startTime.getTime()) / 1000).toFixed(
@@ -440,16 +377,12 @@ program
 
 program
   .command('reconcile')
-  .description(
-    'reconciles local plugin dependencies and downloads external plugins'
-  )
+  .description('reconciles dependencies by downloading external plugins')
   .option('-u, --upgrade-remote', 'upgrades remote dependencies')
   .option(
     '-d, --dry-run',
     'does not actually change anything on the filesystem acts only as a simulation'
   )
-  .option('--skip-local', 'skips the local dependancy reconciliation')
-  .option('--skip-remote', 'skips the remote plugin reconciliation')
   .action(reconcilePluginDeps);
 
 program.parse(process.argv);

bin/cli-serve

@@ -10,6 +10,12 @@ const serve = require('../serve');
 
 program
   .option('-j, --jobs', 'enable job processing on this thread')
+  .option(
+    '--disabled-jobs <jobs>',
+    'disable jobs specified if the -j option is passed, specified as a comma separated list',
+    val => val.split(','),
+    []
+  )
   .option(
     '-w, --websockets',
     'enable the websocket (subscriptions) handler on this thread'
@@ -17,7 +23,7 @@ program
   .parse(process.argv);
 
 // Start serving.
-serve({ jobs: program.jobs, websockets: program.websockets }).catch(err => {
+serve(program).catch(err => {
   console.error(err);
   util.shutdown(1);
 });

bin/cli-setup

@@ -14,7 +14,8 @@ const SettingsService = require('../services/settings');
 const SetupService = require('../services/setup');
 const UsersService = require('../services/users');
 const MigrationService = require('../services/migration');
-const errors = require('../errors');
+const { ErrSettingsInit, ErrSettingsNotInit } = require('../errors');
+const Context = require('../graph/context');
 
 // Register the shutdown criteria.
 util.onshutdown([() => mongoose.disconnect()]);
@@ -40,13 +41,15 @@ const performSetup = async () => {
 
     // We should NOT have gotten a settings object, this means that the
     // application is already setup. Error out here.
-    throw errors.ErrSettingsInit;
-  } catch (e) {
+    throw new ErrSettingsInit();
+  } catch (err) {
     // If the error is `not init`, then we're good, otherwise, it's something
     // else.
-    if (e !== errors.ErrSettingsNotInit) {
-      throw e;
+    if (err instanceof ErrSettingsNotInit) {
+      return;
     }
+
+    throw err;
   }
 
   if (program.defaults) {
@@ -184,7 +187,8 @@ const performSetup = async () => {
     },
   ]);
 
-  let { user: newUser } = await SetupService.setup({
+  const ctx = Context.forSystem();
+  let { user: newUser } = await SetupService.setup(ctx, {
     settings: settings.toObject(),
     user: {
       email: user.email,

bin/cli-users

@@ -7,8 +7,6 @@
 const util = require('./util');
 const program = require('commander');
 const inquirer = require('inquirer');
-const { graphql } = require('graphql');
-const helpers = require('../services/migration/helpers');
 const { stripIndent } = require('common-tags');
 const Table = require('cli-table');
 
@@ -21,31 +19,15 @@ inquirer.registerPrompt(
   require('inquirer-autocomplete-prompt')
 );
 
-const schema = require('../graph/schema');
 const Context = require('../graph/context');
 const UsersService = require('../services/users');
 const UserModel = require('../models/user');
-const CommentModel = require('../models/comment');
-const ActionModel = require('../models/action');
 const USER_ROLES = require('../models/enum/user_roles');
 const mongoose = require('../services/mongoose');
 
 // Register the shutdown criteria.
 util.onshutdown([() => mongoose.disconnect()]);
 
-/**
- * transforms a specific action to a removal action on the target model.
- */
-const actionDecrTransformer = ({ item_id, action_type, group_id }) => ({
-  query: { id: item_id },
-  update: {
-    $inc: {
-      [`action_counts.${action_type.toLowerCase()}`]: -1,
-      [`action_counts.${action_type.toLowerCase()}_${group_id.toLowerCase()}`]: -1,
-    },
-  },
-});
-
 /**
  * Deletes a user and cleans up their associated verifications.
  */
@@ -76,66 +58,29 @@ async function deleteUser(userID) {
       return util.shutdown();
     }
 
-    const { transformSingleWithCursor } = helpers({
-      queryBatchSize: 10000,
-      updateBatchSize: 10000,
-    });
+    const ctx = Context.forSystem();
 
-    console.warn("Removing user's actions");
-
-    // Remove all actions against comments.
-    await transformSingleWithCursor(
-      ActionModel.collection.find({ user_id: user.id, item_type: 'COMMENTS' }),
-      actionDecrTransformer,
-      CommentModel
+    const { data, errors } = await ctx.graphql(
+      `
+      mutation DeleteUser($user_id: ID!) {
+        delUser(id: $user_id) {
+          errors {
+            translation_key
+          }
+        }
+      }
+    `,
+      { user_id: user.id }
     );
+    if (errors) {
+      throw errors;
+    }
 
-    // Remove all actions against users.
-    await transformSingleWithCursor(
-      ActionModel.collection.find({ user_id: user.id, item_type: 'USERS' }),
-      actionDecrTransformer,
-      UserModel
-    );
+    if (data.errors) {
+      throw data.errors;
+    }
 
-    // Remove all the user's actions.
-    await ActionModel.where({ user_id: user.id })
-      .setOptions({ multi: true })
-      .remove();
-
-    console.warn("Removing user's comments");
-
-    // Removes all the user's reply counts on each of the comments that they
-    // have commented on.
-    await transformSingleWithCursor(
-      CommentModel.collection.aggregate([
-        { $match: { author_id: user.id } },
-        {
-          $group: {
-            _id: '$parent_id',
-            count: { $sum: 1 },
-          },
-        },
-      ]),
-      ({ _id: parent_id, count }) => ({
-        query: { id: parent_id },
-        update: {
-          $inc: {
-            reply_count: -1 * count,
-          },
-        },
-      }),
-      CommentModel
-    );
-
-    // Remove all the user's comments.
-    await CommentModel.where({ author_id: user.id })
-      .setOptions({ multi: true })
-      .remove();
-
-    console.warn('Removing the user');
-
-    // Remove the user.
-    await user.remove();
+    console.log('User was deleted.');
 
     util.shutdown();
   } catch (err) {
@@ -197,7 +142,7 @@ async function searchUsers() {
           value = '';
         }
 
-        const { data, errors } = await graphql(schema, searchQuery, {}, ctx, {
+        const { data, errors } = await ctx.graphql(searchQuery, {
           value,
         });
         if (errors && errors.length > 0) {
@@ -312,10 +257,59 @@ async function verifyUserEmail(userID, email) {
   }
 }
 
+/**
+ * createUser will prompt the user for the user information when creating a
+ * local user.
+ */
+async function createUser() {
+  try {
+    const answers = await inquirer.prompt([
+      {
+        name: 'email',
+        message: 'Email',
+      },
+      {
+        name: 'username',
+        message: 'Username',
+      },
+      {
+        name: 'password',
+        message: 'Password',
+        type: 'password',
+      },
+      {
+        name: 'role',
+        message: 'Role',
+        type: 'list',
+        choices: USER_ROLES,
+      },
+    ]);
+
+    const { email, username, password, role } = answers;
+
+    // Create the user.
+    const user = await UsersService.createLocalUser(email, password, username);
+
+    // Set the role.
+    await UsersService.setRole(user.id, role);
+
+    console.log(`Created User[${user.id}]`);
+    util.shutdown(0);
+  } catch (err) {
+    console.error(err);
+    util.shutdown(1);
+  }
+}
+
 //==============================================================================
 // Setting up the program command line arguments.
 //==============================================================================
 
+program
+  .command('create')
+  .description('creates a local user')
+  .action(createUser);
+
 program
   .command('delete <userID>')
   .description('delete a user')

bin/templates/plugin/client/components/MyPluginComponent.js

@@ -12,7 +12,7 @@ class MyPluginComponent extends React.Component {
 
           <small>
             To read more about plugins check{' '}
-            <a href="https://coralproject.github.io/talk/plugins-client.html">
+            <a href="https://docs.coralproject.net/talk/plugins-client">
               our docs and guides!
             </a>
           </small>

bin/templates/plugin/client/index.js

@@ -13,7 +13,7 @@
   };
   ```
 
-  To read more info on how to build client plugins. Please, go to: https://coralproject.github.io/talk/plugins-client.html
+  To read more info on how to build client plugins. Please, go to: https://docs.coralproject.net/talk/plugins-client
  */
 
 import MyPluginComponent from './components/MyPluginComponent';

bin/util.js

@@ -2,6 +2,7 @@
 require('../services/env');
 
 const debug = require('debug')('talk:util');
+const { uniq } = require('lodash');
 
 const util = (module.exports = {});
 
@@ -23,11 +24,7 @@ util.shutdown = (defaultCode = 0, signal = null) => {
 
   debug(`${util.toshutdown.length} jobs now being called`);
 
-  Promise.all(
-    util.toshutdown
-      .map(func => (func ? func(signal) : null))
-      .filter(func => func)
-  )
+  Promise.all(util.toshutdown.map(func => (func ? func(signal) : null)))
     .then(() => {
       debug('Shutdown complete, now exiting');
       process.exit(defaultCode);
@@ -49,14 +46,14 @@ util.onshutdown = jobs => {
   debug(`${jobs.length} jobs registered to be called during shutdown`);
 
   // Add the new jobs to shutdown to the object reference.
-  util.toshutdown = util.toshutdown.concat(jobs);
+  util.toshutdown = uniq(util.toshutdown.concat(jobs));
 };
 
 // Attach to the SIGTERM + SIGINT handles to ensure a clean shutdown in the
 // event that we have an external event. SIGUSR2 is called when the app is asked
 // to be 'killed', same procedure here.
-process.on('SIGTERM', () => util.shutdown(0, 'SIGTERM'));
-process.on('SIGINT', () => util.shutdown(0, 'SIGINT'));
+process.once('SIGTERM', () => util.shutdown(0, 'SIGTERM'));
+process.once('SIGINT', () => util.shutdown(0, 'SIGINT'));
 process.once('SIGUSR2', () => util.shutdown(0, 'SIGUSR2'));
 
 // Makes the script crash on unhandled rejections instead of silently

circle.yml

@@ -1,75 +0,0 @@
-machine:
-  node:
-    version: 8
-  services:
-    - docker
-    - redis
-  environment:
-    PATH: "${PATH}:${HOME}/${CIRCLE_PROJECT_REPONAME}/node_modules/.bin"
-    NODE_ENV: "test"
-    MOCHA_FILE: "${CIRCLE_TEST_REPORTS}/junit/test-results.xml"
-    MOCHA_REPORTER: "mocha-junit-reporter"
-  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*
-    # - sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 0C49F3730359A14518585931BC711F9BA15703C6
-    # - echo "deb [ arch=amd64 ] http://repo.mongodb.org/apt/ubuntu precise/mongodb-org/3.4 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-3.4.list
-    # - sudo apt-get update
-    # - sudo apt-get install -y mongodb-org
-    # - sudo service mongod restart
-
-    # Force sync the time.
-    - date
-    - sudo service ntp stop
-    - sudo ntpdate -s time.nist.gov
-    - sudo service ntp start
-    - date
-
-    # 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
-
-  post:
-    # Build the static assets.
-    - yarn build
-    # Lint the project here, before tests are ran.
-    - yarn lint
-
-database:
-  post:
-    # Initialize the settings in the database, this will create indicies for the
-    # database.
-    - ./bin/cli setup --defaults
-    - sleep 2
-
-test:
-  override:
-    # Run the tests using the junit reporter.
-    - yarn test
-    # Run the end to end tests
-    - yarn e2e:ci
-
-deployment:
-  release:
-    tag: /v[0-9]+(\.[0-9]+)*/
-    commands:
-      - bash ./scripts/docker.sh deploy
-
-  latest:
-    branch:
-      - master
-      - next
-    owner: coralproject
-    commands:
-      - bash ./scripts/docker.sh deploy

client/coral-admin/src/AppRouter.js

@@ -2,10 +2,15 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Router, Route, IndexRedirect, IndexRoute } from 'react-router';
 
-import Configure from 'routes/Configure';
 import Install from 'routes/Install';
 import Stories from 'routes/Stories';
 import Community from 'routes/Community';
+
+import Configure from 'routes/Configure';
+import StreamSettings from './routes/Configure/containers/StreamSettings';
+import ModerationSettings from './routes/Configure/containers/ModerationSettings';
+import TechSettings from './routes/Configure/containers/TechSettings';
+
 import { ModerationLayout, Moderation } from 'routes/Moderation';
 
 import Layout from 'containers/Layout';
@@ -15,7 +20,14 @@ const routes = (
     <Route exact path="/admin/install" component={Install} />
     <Route path="/admin" component={Layout}>
       <IndexRedirect to="/admin/moderate" />
-      <Route path="configure" component={Configure} />
+
+      <Route path="configure" component={Configure}>
+        <Route path="stream" component={StreamSettings} />
+        <Route path="moderation" component={ModerationSettings} />
+        <Route path="tech" component={TechSettings} />
+        <IndexRedirect to="stream" />
+      </Route>
+
       <Route path="stories" component={Stories} />
 
       {/* Community Routes */}

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

@@ -8,6 +8,10 @@ export const clearPending = () => {
   return { type: actions.CLEAR_PENDING };
 };
 
-export const setActiveSection = section => {
-  return { type: actions.SET_ACTIVE_SECTION, section };
+export const showSaveDialog = () => {
+  return { type: actions.SHOW_SAVE_DIALOG };
+};
+
+export const hideSaveDialog = () => {
+  return { type: actions.HIDE_SAVE_DIALOG };
 };

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

@@ -5,14 +5,7 @@ export const singleView = () => ({ type: actions.SINGLE_VIEW });
 
 // hide shortcuts note
 export const hideShortcutsNote = () => (dispatch, _, { localStorage }) => {
-  try {
-    if (localStorage) {
-      localStorage.setItem('coral:shortcutsNote', 'hide');
-    }
-  } catch (e) {
-    // above will fail in Safari private mode
-  }
-
+  localStorage.setItem('coral:shortcutsNote', 'hide');
   dispatch({ type: actions.HIDE_SHORTCUTS_NOTE });
 };
 

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

@@ -15,6 +15,10 @@
   }
 }
 
+.username {
+  word-break: break-all;
+}
+
 .headerRowItem {
   color: #595959;
   font-weight: bold;

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

@@ -5,13 +5,16 @@ import styles from './AccountHistory.css';
 import cn from 'classnames';
 import flatten from 'lodash/flatten';
 import orderBy from 'lodash/orderBy';
+import has from 'lodash/has';
 import moment from 'moment';
+import t from 'coral-framework/services/i18n';
+import { Icon } from 'coral-ui';
 
 const buildUserHistory = (userState = {}) => {
   return orderBy(
     flatten(
       Object.keys(userState.status)
-        .filter(k => k !== '__typename')
+        .filter(k => !k.startsWith('__'))
         .map(k => userState.status[k].history)
     ),
     'created_at',
@@ -19,25 +22,49 @@ const buildUserHistory = (userState = {}) => {
   );
 };
 
-const buildActionResponse = (typename, until, status) => {
+/** readableDuration returns a readable duration of the suspension/ban in hours or days
+ * @param  {} startDate
+ * @param  {} endDate
+ */
+const readableDuration = (startDate, endDate) => {
+  const dur = moment.duration(moment(endDate).diff(moment(startDate)));
+  const durAsDays = dur.asDays().toFixed(0);
+  const durAsHours = dur.asHours().toFixed(0);
+
+  return durAsHours > 23
+    ? durAsDays > 1
+      ? t('suspenduser.days', durAsDays)
+      : t('suspenduser.day', durAsDays)
+    : durAsHours > 1
+      ? t('suspenduser.hours', durAsHours)
+      : t('suspenduser.hour', durAsHours);
+};
+
+const buildActionResponse = (typename, created_at, until, status) => {
   switch (typename) {
     case 'UsernameStatusHistory':
-      return `Username ${status}`;
+      return t('account_history.username_status', status);
     case 'BannedStatusHistory':
-      return status ? 'User banned' : 'Ban removed';
+      return status
+        ? t('account_history.user_banned')
+        : t('account_history.ban_removed');
     case 'SuspensionStatusHistory':
-      return until ? 'Account Suspended' : 'Suspension removed';
+      return until
+        ? t('account_history.suspended', readableDuration(created_at, until))
+        : t('account_history.suspension_removed');
     default:
       return '-';
   }
 };
 
-const getModerationValue = (userId, assignedBy = {}) => {
-  if (assignedBy && userId !== assignedBy.id) {
-    return assignedBy.username;
-  }
-  return 'SYSTEM';
-};
+const getModerationValue = assignedBy =>
+  has(assignedBy, 'username') ? (
+    assignedBy.username
+  ) : (
+    <span>
+      <Icon name="computer" /> {t('account_history.system')}
+    </span>
+  );
 
 class AccountHistory extends React.Component {
   render() {
@@ -52,9 +79,15 @@ class AccountHistory extends React.Component {
               'talk-admin-account-history-header-row'
             )}
           >
-            <div className={styles.headerRowItem}>Date</div>
-            <div className={styles.headerRowItem}>Action</div>
-            <div className={styles.headerRowItem}>Moderation</div>
+            <div className={styles.headerRowItem}>
+              {t('account_history.date')}
+            </div>
+            <div className={styles.headerRowItem}>
+              {t('account_history.action')}
+            </div>
+            <div className={styles.headerRowItem}>
+              {t('account_history.taken_by')}
+            </div>
           </div>
           {userHistory.map(
             ({ __typename, created_at, assigned_by, until, status }) => (
@@ -77,15 +110,16 @@ class AccountHistory extends React.Component {
                     'talk-admin-account-history-row-status'
                   )}
                 >
-                  {buildActionResponse(__typename, until, status)}
+                  {buildActionResponse(__typename, created_at, until, status)}
                 </div>
                 <div
                   className={cn(
                     styles.item,
+                    styles.username,
                     'talk-admin-account-history-row-assigned-by'
                   )}
                 >
-                  {getModerationValue(user.id, assigned_by)}
+                  {getModerationValue(assigned_by)}
                 </div>
               </div>
             )

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

@@ -25,37 +25,29 @@ class CommentDetails extends Component {
   };
 
   render() {
-    const { data, root, comment, clearHeightCache } = this.props;
+    const { root, comment, clearHeightCache } = this.props;
     const { showDetail } = this.state;
-    const queryData = {
+
+    const slotPassthrough = {
+      clearHeightCache,
       root,
       comment,
+      more: showDetail,
     };
 
     return (
       <div className={styles.root}>
         <IfSlotIsNotEmpty
-          queryData={queryData}
           slot={['adminCommentMoreDetails', 'adminCommentMoreFlagDetails']}
+          passthrough={slotPassthrough}
         >
           <a onClick={this.toggleDetail} className={styles.moreDetail}>
             {showDetail ? t('modqueue.less_detail') : t('modqueue.more_detail')}
           </a>
         </IfSlotIsNotEmpty>
-        <Slot
-          fill="adminCommentDetailArea"
-          data={data}
-          clearHeightCache={clearHeightCache}
-          queryData={queryData}
-          more={showDetail}
-        />
+        <Slot fill="adminCommentDetailArea" passthrough={slotPassthrough} />
         {showDetail && (
-          <Slot
-            fill="adminCommentMoreDetails"
-            data={data}
-            clearHeightCache={clearHeightCache}
-            queryData={queryData}
-          />
+          <Slot fill="adminCommentMoreDetails" passthrough={slotPassthrough} />
         )}
       </div>
     );
@@ -63,7 +55,6 @@ class CommentDetails extends Component {
 }
 
 CommentDetails.propTypes = {
-  data: PropTypes.object.isRequired,
   root: PropTypes.object.isRequired,
   comment: PropTypes.object.isRequired,
   clearHeightCache: PropTypes.func,

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

@@ -1,109 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { matchLinks } from '../utils';
-import memoize from 'lodash/memoize';
-
-function escapeRegExp(string) {
-  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
-}
-
-// generate a regulare expression that catches the `phrases`.
-function generateRegExp(phrases) {
-  const inner = phrases
-    .map(phrase =>
-      phrase
-        .split(/\s+/)
-        .map(word => escapeRegExp(word))
-        .join('[\\s"?!.]+')
-    )
-    .join('|');
-
-  const pattern = `(^|[^\\w])(${inner})(?=[^\\w]|$)`;
-  try {
-    return new RegExp(pattern, 'iu');
-  } catch (_err) {
-    // IE does not support unicode support, so we'll create one without.
-    return new RegExp(pattern, 'i');
-  }
-}
-
-// Generate a regular expression detecting `suspectWords` and `bannedWords` phrases.
-function getPhrasesRegexp(suspectWords, bannedWords) {
-  return generateRegExp([...suspectWords, ...bannedWords]);
-}
-
-// Memoized version as arguments rarely change.
-const getPhrasesRegexpMemoized = memoize(getPhrasesRegexp);
-
-// markPhrases looks for `supsectWords` and `bannedWords` inside `body` and highlights them by returning
-// an array of React Elements.
-function markPhrases(body, suspectWords, bannedWords, keyPrefix) {
-  const regexp = getPhrasesRegexpMemoized(suspectWords, bannedWords);
-  const tokens = body.split(regexp);
-  return tokens.map(
-    (token, i) =>
-      i % 3 === 2 ? <mark key={`${keyPrefix}_${i}`}>{token}</mark> : token
-  );
-}
-
-// markLinks looks for links inside `body` and highlights them by returning
-// an array of React Elements.
-function markLinks(body) {
-  const matches = matchLinks(body);
-  const content = [];
-  let index = 0;
-  if (matches) {
-    matches.forEach((match, i) => {
-      content.push(body.substring(index, match.index));
-      content.push(<mark key={i}>{match.text}</mark>);
-      index = match.lastIndex;
-    });
-  }
-  content.push(body.substring(index));
-  return content;
-}
-
-const CommentFormatter = ({
-  body,
-  suspectWords,
-  bannedWords,
-  className = 'comment',
-  ...rest
-}) => {
-  // Breaking the body by line break
-  const textbreaks = body.split('\n');
-
-  return (
-    <span className={`${className}-text`} {...rest}>
-      {textbreaks.map((line, i) => {
-        const content = markLinks(line).map((element, index) => {
-          // Keep highlighted links.
-          if (typeof element !== 'string') {
-            return element;
-          }
-
-          // Highlight suspect and banned phrase inside this part of text.
-          return markPhrases(element, suspectWords, bannedWords, index);
-        });
-
-        return (
-          <span key={i} className={`${className}-line`}>
-            {content}
-            {i !== textbreaks.length - 1 && (
-              <br className={`${className}-linebreak`} />
-            )}
-          </span>
-        );
-      })}
-    </span>
-  );
-};
-
-CommentFormatter.propTypes = {
-  className: PropTypes.string,
-  bannedWords: PropTypes.array,
-  suspectWords: PropTypes.array,
-  body: PropTypes.string,
-};
-
-export default CommentFormatter;

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

@@ -43,6 +43,9 @@ const CommentLabels = ({
   comment,
   comment: { className, status, actions, hasParent },
 }) => {
+  const slotPassthrough = {
+    comment,
+  };
   return (
     <div className={cn(className, styles.root)}>
       <div className={styles.coreLabels}>
@@ -69,7 +72,7 @@ const CommentLabels = ({
       <Slot
         className={styles.slot}
         fill="adminCommentLabels"
-        queryData={{ comment }}
+        passthrough={slotPassthrough}
       />
     </div>
   );

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

@@ -0,0 +1,8 @@
+.container {
+  max-width: 1280px;
+  margin: 0 auto;
+}
+
+.copy {
+  padding: 20px 0;
+}

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import styles from './Forbidden.css';
+
+const Forbidden = () => (
+  <div className={styles.container}>
+    <p className={styles.copy}>
+      This page is for team use only. Please contact an administrator if you
+      want to join this team.
+    </p>
+  </div>
+);
+
+export default Forbidden;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { matchLinks } from '../utils';
+import matchLinks from 'coral-framework/utils/matchLinks';
 
 export default ({ text, children }) => {
   const hasLinks = !!matchLinks(text);

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

@@ -1,4 +1,6 @@
 .layout {
   margin: 0 auto;
   background-color: #FAFAFA;
-}
+  height: inherit;
+  min-height: calc(100vh - 58px);
+}

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

@@ -98,7 +98,6 @@ class UserDetail extends React.Component {
 
   renderLoaded() {
     const {
-      data,
       root,
       root: { me, user, totalComments, rejectedComments },
       activeTab,
@@ -123,6 +122,11 @@ class UserDetail extends React.Component {
     const banned = isBanned(user);
     const suspended = isSuspended(user);
 
+    const slotPassthrough = {
+      root,
+      user,
+    };
+
     return (
       <ClickOutside onClickOutside={modal ? null : hideUserDetail}>
         <Drawer
@@ -244,11 +248,7 @@ class UserDetail extends React.Component {
             </ul>
           </div>
 
-          <Slot
-            fill="userProfile"
-            data={this.props.data}
-            queryData={{ root, user }}
-          />
+          <Slot fill="userProfile" passthrough={slotPassthrough} />
 
           <hr />
 
@@ -301,7 +301,6 @@ class UserDetail extends React.Component {
               <UserDetailCommentList
                 user={user}
                 root={root}
-                data={data}
                 loadMore={loadMore}
                 toggleSelect={toggleSelect}
                 viewUserDetail={viewUserDetail}
@@ -320,7 +319,6 @@ class UserDetail extends React.Component {
               <UserDetailCommentList
                 user={user}
                 root={root}
-                data={data}
                 loadMore={loadMore}
                 toggleSelect={toggleSelect}
                 viewUserDetail={viewUserDetail}
@@ -368,9 +366,7 @@ UserDetail.propTypes = {
   bulkReject: PropTypes.func.isRequired,
   toggleSelectAll: PropTypes.func.isRequired,
   loading: PropTypes.bool.isRequired,
-  data: PropTypes.shape({
-    refetch: PropTypes.func.isRequired,
-  }),
+  data: PropTypes.object,
   activeTab: PropTypes.string.isRequired,
   selectedCommentIds: PropTypes.array.isRequired,
   viewUserDetail: PropTypes.any.isRequired,

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

@@ -78,6 +78,12 @@
   font-weight: 300;
   font-size: 16px;
   max-width: 360px;
+
+  blockquote {
+    font-size: inherit;
+    line-height: inherit;
+    letter-spacing: inherit;
+  }
 }
 
 .sideActions {

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

@@ -1,11 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import Slot from 'coral-framework/components/Slot';
 import { Link } from 'react-router';
-
 import { Icon } from 'coral-ui';
 import CommentDetails from './CommentDetails';
 import styles from './UserDetailComment.css';
-import CommentFormatter from 'coral-admin/src/components/CommentFormatter';
+import AdminCommentContent from 'coral-framework/components/AdminCommentContent';
 import IfHasLink from 'coral-admin/src/components/IfHasLink';
 import cn from 'classnames';
 import CommentAnimatedEdit from './CommentAnimatedEdit';
@@ -32,10 +32,17 @@ class UserDetailComment extends React.Component {
       selected,
       toggleSelect,
       className,
-      data,
-      root: { settings: { wordlist: { banned, suspect } } },
+      root: { settings },
     } = this.props;
 
+    const slotPassthrough = {
+      root,
+      comment,
+      suspectWords: settings.wordlist.suspect,
+      bannedWords: settings.wordlist.banned,
+      body: comment.body,
+    };
+
     return (
       <li
         tabIndex={0}
@@ -68,7 +75,8 @@ class UserDetailComment extends React.Component {
             </div>
           </div>
           <div className={styles.story}>
-            Story: {comment.asset.title}
+            {t('common.story')}:{' '}
+            {comment.asset.title ? comment.asset.title : comment.asset.url}
             {
               <Link to={`/admin/moderate/${comment.asset.id}`}>
                 {t('modqueue.moderate')}
@@ -78,11 +86,15 @@ class UserDetailComment extends React.Component {
           <CommentAnimatedEdit body={comment.body}>
             <div className={styles.bodyContainer}>
               <div className={styles.body}>
-                <CommentFormatter
-                  suspectWords={suspect}
-                  bannedWords={banned}
-                  body={comment.body}
-                  className="talk-admin-user-detail-comment"
+                <Slot
+                  fill="userDetailCommentContent"
+                  className={cn(
+                    styles.commentContent,
+                    'talk-admin-user-detail-comment'
+                  )}
+                  size={1}
+                  defaultComponent={AdminCommentContent}
+                  passthrough={slotPassthrough}
                 />
                 <a
                   className={styles.external}
@@ -95,6 +107,7 @@ class UserDetailComment extends React.Component {
               <div className={styles.sideActions}>
                 <IfHasLink text={comment.body}>
                   <span className={styles.hasLinks}>
+                    {/* TODO: translate string */}
                     <Icon name="error_outline" /> Contains Link
                   </span>
                 </IfHasLink>
@@ -114,7 +127,7 @@ class UserDetailComment extends React.Component {
             </div>
           </CommentAnimatedEdit>
         </div>
-        <CommentDetails data={data} root={root} comment={comment} />
+        <CommentDetails root={root} comment={comment} />
       </li>
     );
   }
@@ -122,7 +135,6 @@ class UserDetailComment extends React.Component {
 
 UserDetailComment.propTypes = {
   selected: PropTypes.bool,
-  data: PropTypes.object,
   user: PropTypes.object.isRequired,
   viewUserDetail: PropTypes.func.isRequired,
   acceptComment: PropTypes.func.isRequired,

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

@@ -9,7 +9,6 @@ import ApproveButton from './ApproveButton';
 
 const UserDetailCommentList = props => {
   const {
-    data,
     root,
     root: { user, comments: { nodes, hasNextPage } },
     acceptComment,
@@ -70,7 +69,6 @@ const UserDetailCommentList = props => {
             key={comment.id}
             user={user}
             root={root}
-            data={data}
             comment={comment}
             acceptComment={acceptComment}
             rejectComment={rejectComment}
@@ -93,7 +91,6 @@ UserDetailCommentList.propTypes = {
   root: PropTypes.object.isRequired,
   acceptComment: PropTypes.func.isRequired,
   rejectComment: PropTypes.func.isRequired,
-  data: PropTypes.object.isRequired,
   selectedCommentIds: PropTypes.array.isRequired,
   viewUserDetail: PropTypes.any.isRequired,
   loadMore: PropTypes.any.isRequired,

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

@@ -28,8 +28,8 @@
   box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
   z-index: 10;
   top: 32px;
-  right: 0px;
-  width: 140px;
+  left: -100px;
+  width: 200px;
   text-align: left;
   color: #616161;
 }
@@ -39,7 +39,7 @@
   border: 10px solid transparent;
   border-top-color: #999;
   position: absolute;
-  right: 0px;
+  left: 96px;
   top: -20px;
   transform: rotate(180deg);
 }
@@ -49,7 +49,7 @@
   border: 10px solid transparent;
   border-top-color: white;
   position: absolute;
-  right: 0px;
+  left: 96px;
   top: -19px;
   transform: rotate(180deg);
 }

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

@@ -67,7 +67,7 @@ class UserInfoTooltip extends React.Component {
                           new Date(
                             this.getLastHistoryItem(user, 'banned').created_at
                           )
-                        ).format('MMMM Do YYYY, h:mm:ss a')}
+                        ).format('MMM Do YYYY, h:mm:ss a')}
                       </span>
                     </li>
                     <li
@@ -139,7 +139,7 @@ class UserInfoTooltip extends React.Component {
                               'suspension'
                             ).created_at
                           )
-                        ).format('MMMM Do YYYY, h:mm:ss a')}
+                        ).format('MMM Do YYYY, h:mm:ss a')}
                       </span>
                     </li>
                     <li
@@ -154,7 +154,7 @@ class UserInfoTooltip extends React.Component {
                           new Date(
                             this.getLastHistoryItem(user, 'suspension').until
                           )
-                        ).format('MMMM Do YYYY, h:mm:ss a')}
+                        ).format('MMM Do YYYY, h:mm:ss a')}
                       </span>
                     </li>
                   </ul>

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

@@ -2,4 +2,6 @@ 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`;
+
+export const SHOW_SAVE_DIALOG = `${prefix}_SHOW_SAVE_DIALOG`;
+export const HIDE_SAVE_DIALOG = `${prefix}_HIDE_SAVE_DIALOG`;

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

@@ -11,6 +11,7 @@ import { logout } from 'coral-framework/actions/auth';
 import { can } from 'coral-framework/services/perms';
 import UserDetail from 'coral-admin/src/containers/UserDetail';
 import PropTypes from 'prop-types';
+import Forbidden from '../components/Forbidden';
 
 class LayoutContainer extends React.Component {
   render() {
@@ -47,10 +48,7 @@ class LayoutContainer extends React.Component {
       } else {
         return (
           <Layout {...this.props} handleLogout={logout}>
-            <p>
-              This page is for team use only. Please contact an administrator if
-              you want to join this team.
-            </p>
+            <Forbidden />
           </Layout>
         );
       }

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

@@ -4,6 +4,9 @@ import withFragments from 'coral-framework/hocs/withFragments';
 import { getDefinitionName } from 'coral-framework/utils';
 import CommentLabels from './CommentLabels';
 import CommentDetails from './CommentDetails';
+import { getSlotFragmentSpreads } from 'coral-framework/utils';
+
+const slots = ['userDetailCommentContent'];
 
 export default withFragments({
   root: gql`
@@ -14,6 +17,7 @@ export default withFragments({
           suspect
         }
       }
+      ${getSlotFragmentSpreads(slots, 'root')}
       ...${getDefinitionName(CommentLabels.fragments.root)}
       ...${getDefinitionName(CommentDetails.fragments.root)}
     }
@@ -38,6 +42,7 @@ export default withFragments({
       status_history {
         type
       }
+      ${getSlotFragmentSpreads(slots, 'comment')}
       ...${getDefinitionName(CommentLabels.fragments.comment)}
       ...${getDefinitionName(CommentDetails.fragments.comment)}
     }

client/coral-admin/src/index.js

@@ -15,7 +15,8 @@ import { hideShortcutsNote } from './actions/moderation';
 smoothscroll.polyfill();
 
 function init({ store, localStorage }) {
-  if (localStorage && localStorage.getItem('coral:shortcutsNote') === 'hide') {
+  const shouldHide = localStorage.getItem('coral:shortcutsNote') === 'hide';
+  if (shouldHide) {
     store.dispatch(hideShortcutsNote());
   }
 }

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

@@ -6,11 +6,23 @@ const initialState = {
   canSave: false,
   pending: {},
   errors: {},
-  activeSection: 'stream',
+  saveDialog: false,
 };
 
 export default function configure(state = initialState, action) {
   switch (action.type) {
+    case actions.SHOW_SAVE_DIALOG: {
+      return {
+        ...state,
+        saveDialog: true,
+      };
+    }
+    case actions.HIDE_SAVE_DIALOG: {
+      return {
+        ...state,
+        saveDialog: false,
+      };
+    }
     case actions.UPDATE_PENDING: {
       let next = state;
       if (action.updater) {
@@ -40,11 +52,8 @@ export default function configure(state = initialState, action) {
         pending: {},
         canSave: false,
       };
-    case actions.SET_ACTIVE_SECTION:
-      return {
-        ...state,
-        activeSection: action.section,
-      };
+    default:
+      return state;
   }
   return state;
 }

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

@@ -130,3 +130,12 @@ th.header:nth-child(2), th.header:nth-child(3) {
 .loadMore {
   margin-top: 24px;
 }
+
+.roleDropdown {
+  width: 150px;
+}
+
+.roleOption {
+  min-width: 100px;
+}
+

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

@@ -200,24 +200,31 @@ class People extends React.Component {
                         </td>
                         <td className="mdl-data-table__cell--non-numeric">
                           <Dropdown
-                            containerClassName="talk-admin-community-people-dd-role"
+                            className={cn(
+                              'talk-admin-community-people-dd-role',
+                              styles.roleDropdown
+                            )}
                             value={user.role}
                             placeholder={t('community.role')}
                             onChange={role => setUserRole(user.id, role)}
                           >
                             <Option
+                              className={styles.roleOption}
                               value={COMMENTER}
                               label={t('community.commenter')}
                             />
                             <Option
+                              className={styles.roleOption}
                               value={STAFF}
                               label={t('community.staff')}
                             />
                             <Option
+                              className={styles.roleOption}
                               value={MODERATOR}
                               label={t('community.moderator')}
                             />
                             <Option
+                              className={styles.roleOption}
                               value={ADMIN}
                               label={t('community.admin')}
                             />

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

@@ -1,50 +1,37 @@
-import React, { Component } from 'react';
-
-import { Button, List, Item } from 'coral-ui';
-import styles from './Configure.css';
-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 React from 'react';
 import PropTypes from 'prop-types';
+import t from 'coral-framework/services/i18n';
+import { Button, List, Item } from 'coral-ui';
+import { can } from 'coral-framework/services/perms';
+import styles from './Configure.css';
+import SaveChangesDialog from './SaveChangesDialog';
 
-export default class Configure extends Component {
-  getSectionComponent(section) {
-    switch (section) {
-      case 'stream':
-        return StreamSettings;
-      case 'moderation':
-        return ModerationSettings;
-      case 'tech':
-        return TechSettings;
-    }
-    throw new Error(`Unknown section ${section}`);
-  }
-
+class Configure extends React.Component {
   render() {
-    const {
-      currentUser,
-      canSave,
-      savePending,
-      setActiveSection,
-      activeSection,
-    } = this.props;
-    const SectionComponent = this.getSectionComponent(activeSection);
+    const { canSave, currentUser, root, savePending, settings } = this.props;
 
     if (!can(currentUser, '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>
-      );
+      return <p>{t('configure.access_message')}</p>;
     }
 
+    const passProps = {
+      root,
+      settings,
+    };
+
     return (
       <div className={styles.container}>
+        <SaveChangesDialog
+          saveDialog={this.props.saveDialog}
+          hideSaveDialog={this.props.hideSaveDialog}
+          saveChanges={this.props.saveChanges}
+          discardChanges={this.props.discardChanges}
+        />
         <div className={styles.leftColumn}>
-          <List onChange={setActiveSection} activeItem={activeSection}>
+          <List
+            onChange={this.props.handleSectionChange}
+            activeItem={this.props.activeSection}
+          >
             <Item itemId="stream" icon="speaker_notes">
               {t('configure.stream_settings')}
             </Item>
@@ -74,11 +61,7 @@ export default class Configure extends Component {
           </div>
         </div>
         <div className={styles.mainContent}>
-          <SectionComponent
-            data={this.props.data}
-            root={this.props.root}
-            settings={this.props.settings}
-          />
+          {React.cloneElement(this.props.children, passProps)}
         </div>
       </div>
     );
@@ -87,11 +70,17 @@ export default class Configure extends Component {
 
 Configure.propTypes = {
   savePending: PropTypes.func.isRequired,
+  saveChanges: PropTypes.func.isRequired,
+  discardChanges: PropTypes.func.isRequired,
   currentUser: PropTypes.object.isRequired,
-  data: PropTypes.object.isRequired,
   root: PropTypes.object.isRequired,
   settings: PropTypes.object.isRequired,
   canSave: PropTypes.bool.isRequired,
-  setActiveSection: PropTypes.func.isRequired,
+  handleSectionChange: PropTypes.func.isRequired,
   activeSection: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired,
+  saveDialog: PropTypes.bool,
+  hideSaveDialog: PropTypes.func.isRequired,
 };
+
+export default Configure;

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

@@ -52,7 +52,7 @@ class ModerationSettings extends React.Component {
   };
 
   render() {
-    const { settings, data, root, updatePending, errors } = this.props;
+    const { settings, slotPassthrough } = this.props;
 
     return (
       <ConfigurePage title={t('configure.moderation_settings')}>
@@ -82,13 +82,7 @@ class ModerationSettings extends React.Component {
           suspectWords={settings.wordlist.suspect}
           onChangeWordlist={this.updateWordlist}
         />
-        <Slot
-          fill="adminModerationSettings"
-          data={data}
-          queryData={{ root, settings }}
-          updatePending={updatePending}
-          errors={errors}
-        />
+        <Slot fill="adminModerationSettings" passthrough={slotPassthrough} />
       </ConfigurePage>
     );
   }
@@ -97,9 +91,8 @@ class ModerationSettings extends React.Component {
 ModerationSettings.propTypes = {
   updatePending: PropTypes.func.isRequired,
   errors: PropTypes.object.isRequired,
-  data: PropTypes.object.isRequired,
-  root: PropTypes.object.isRequired,
   settings: PropTypes.object.isRequired,
+  slotPassthrough: PropTypes.object.isRequired,
 };
 
 export default ModerationSettings;

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

@@ -0,0 +1,40 @@
+.buttonActions {
+  padding-top: 15px;
+  text-align: right;
+}
+
+.dialog {
+  padding: 25px;
+  min-width: 400px;
+}
+
+.close {
+  font-size: 20px;
+  line-height: 14px;
+  top: 10px;
+  right: 10px;
+  position: absolute;
+  display: block;
+  font-weight: bold;
+  color: #363636;
+  cursor: pointer;
+}
+
+.title {
+  font-size: 18px;
+  font-weight: 800;
+  margin-bottom: 20px;
+}
+
+.cancel {
+  color: #363636;
+  margin-right: 15px;
+  display: inline-block;
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.button {
+  margin-left: 5px;
+}

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

@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cn from 'classnames';
+import { Button, Dialog } from 'coral-ui';
+import styles from './SaveChangesDialog.css';
+import t from 'coral-framework/services/i18n';
+
+const SaveChangesDialog = ({
+  saveDialog,
+  hideSaveDialog,
+  saveChanges,
+  discardChanges,
+}) => (
+  <Dialog
+    className={cn(styles.dialog, 'talk-admin-configure-save-dialog')}
+    id="saveDialog"
+    open={saveDialog}
+    onCancel={hideSaveDialog}
+  >
+    <span className={styles.close} onClick={hideSaveDialog}>
+      ×
+    </span>
+    <div className={styles.title}>
+      {t('configure.save_changes_dialog.unsaved_changes')}
+    </div>
+    {t('configure.save_changes_dialog.copy')}
+    <div
+      className={cn(
+        styles.buttonActions,
+        'talk-admin-configure-save-dialog-button-actions'
+      )}
+    >
+      <a className={styles.cancel} onClick={hideSaveDialog}>
+        Cancel
+      </a>
+      <Button onClick={discardChanges} className={styles.button}>
+        {t('configure.save_changes_dialog.discard')}
+      </Button>
+      <Button onClick={saveChanges} cStyle="green" className={styles.button}>
+        {t('configure.save_changes_dialog.save_settings')}
+      </Button>
+    </div>
+  </Dialog>
+);
+
+SaveChangesDialog.propTypes = {
+  saveDialog: PropTypes.bool.isRequired,
+  hideSaveDialog: PropTypes.func.isRequired,
+  saveChanges: PropTypes.func.isRequired,
+  discardChanges: PropTypes.func.isRequired,
+};
+
+export default SaveChangesDialog;

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

@@ -107,7 +107,7 @@ class StreamSettings extends React.Component {
   };
 
   render() {
-    const { settings, data, root, errors, updatePending } = this.props;
+    const { settings, slotPassthrough, errors } = this.props;
 
     return (
       <ConfigurePage title={t('configure.stream_settings')}>
@@ -220,13 +220,7 @@ class StreamSettings extends React.Component {
           </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 }}
-          updatePending={updatePending}
-          errors={errors}
-        />
+        <Slot fill="adminStreamSettings" passthrough={slotPassthrough} />
       </ConfigurePage>
     );
   }
@@ -235,9 +229,8 @@ class StreamSettings extends React.Component {
 StreamSettings.propTypes = {
   updatePending: PropTypes.func.isRequired,
   errors: PropTypes.object.isRequired,
-  data: PropTypes.object.isRequired,
-  root: PropTypes.object.isRequired,
   settings: PropTypes.object.isRequired,
+  slotPassthrough: PropTypes.object.isRequired,
 };
 
 export default StreamSettings;

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

@@ -34,7 +34,7 @@ class TechSettings extends React.Component {
   };
 
   render() {
-    const { settings, data, root, errors, updatePending } = this.props;
+    const { settings, slotPassthrough } = this.props;
     return (
       <ConfigurePage title={t('configure.tech_settings')}>
         <Domainlist
@@ -50,13 +50,7 @@ class TechSettings extends React.Component {
             onChange={this.updateCustomCssUrl}
           />
         </ConfigureCard>
-        <Slot
-          fill="adminTechSettings"
-          data={data}
-          queryData={{ root, settings }}
-          updatePending={updatePending}
-          errors={errors}
-        />
+        <Slot fill="adminTechSettings" passthrough={slotPassthrough} />
       </ConfigurePage>
     );
   }
@@ -64,10 +58,9 @@ class TechSettings extends React.Component {
 
 TechSettings.propTypes = {
   updatePending: PropTypes.func.isRequired,
-  errors: PropTypes.object.isRequired,
-  data: PropTypes.object.isRequired,
-  root: PropTypes.object.isRequired,
   settings: PropTypes.object.isRequired,
+  slotPassthrough: PropTypes.object.isRequired,
+  errors: PropTypes.object,
 };
 
 export default TechSettings;

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

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { compose, gql } from 'react-apollo';
@@ -10,15 +10,70 @@ import { getDefinitionName } from 'coral-framework/utils';
 import StreamSettings from './StreamSettings';
 import TechSettings from './TechSettings';
 import ModerationSettings from './ModerationSettings';
-import { clearPending, setActiveSection } from '../../../actions/configure';
+import {
+  clearPending,
+  showSaveDialog,
+  hideSaveDialog,
+} from '../../../actions/configure';
 import Configure from '../components/Configure';
+import { withRouter } from 'react-router';
+
+class ConfigureContainer extends React.Component {
+  state = { nextRoute: '' };
 
-class ConfigureContainer extends Component {
   savePending = async () => {
     await this.props.updateSettings(this.props.pending);
     this.props.clearPending();
   };
 
+  saveChanges = async () => {
+    await this.savePending();
+    this.props.hideSaveDialog();
+    this.gotoNextRoute();
+  };
+
+  discardChanges = async () => {
+    await this.props.clearPending();
+    this.props.hideSaveDialog();
+    this.gotoNextRoute();
+  };
+
+  gotoNextRoute = () => {
+    const { nextRoute } = this.state;
+    if (nextRoute) {
+      this.props.router.push(nextRoute);
+      this.setState({ nextRoute: '' });
+    }
+  };
+
+  handleSectionChange = async section => {
+    const nextRoute = `/admin/configure/${section}`;
+
+    if (this.shouldShowSaveDialog()) {
+      await this.setState({ nextRoute });
+      this.props.showSaveDialog();
+    } else {
+      // Just go to the section
+      this.props.router.push(nextRoute);
+    }
+  };
+
+  shouldShowSaveDialog = () => {
+    return !!Object.keys(this.props.pending).length;
+  };
+
+  routeLeave = ({ pathname }) => {
+    if (this.shouldShowSaveDialog()) {
+      this.setState({ nextRoute: pathname });
+      this.props.showSaveDialog();
+      return false;
+    }
+  };
+
+  componentDidMount() {
+    this.props.router.setRouteLeaveHook(this.props.route, this.routeLeave);
+  }
+
   render() {
     if (this.props.data.error) {
       return <div>{this.props.data.error.message}</div>;
@@ -30,15 +85,20 @@ class ConfigureContainer extends Component {
 
     return (
       <Configure
+        saveChanges={this.saveChanges}
+        discardChanges={this.discardChanges}
+        saveDialog={this.props.saveDialog}
+        activeSection={this.props.routes[3].path}
+        hideSaveDialog={this.props.hideSaveDialog}
+        canSave={this.props.canSave}
         currentUser={this.props.currentUser}
-        data={this.props.data}
         root={this.props.root}
         settings={this.props.mergedSettings}
-        canSave={this.props.canSave}
+        handleSectionChange={this.handleSectionChange}
         savePending={this.savePending}
-        setActiveSection={this.props.setActiveSection}
-        activeSection={this.props.activeSection}
-      />
+      >
+        {this.props.children}
+      </Configure>
     );
   }
 }
@@ -75,18 +135,21 @@ const mapStateToProps = state => ({
   pending: state.configure.pending,
   canSave: state.configure.canSave,
   activeSection: state.configure.activeSection,
+  saveDialog: state.configure.saveDialog,
 });
 
 const mapDispatchToProps = dispatch =>
   bindActionCreators(
     {
       clearPending,
-      setActiveSection,
+      showSaveDialog,
+      hideSaveDialog,
     },
     dispatch
   );
 
 export default compose(
+  withRouter,
   connect(mapStateToProps, mapDispatchToProps),
   withUpdateSettings,
   withConfigureQuery,
@@ -94,14 +157,20 @@ export default compose(
 )(ConfigureContainer);
 
 ConfigureContainer.propTypes = {
+  activeSection: PropTypes.string,
   updateSettings: PropTypes.func.isRequired,
   clearPending: PropTypes.func.isRequired,
-  setActiveSection: PropTypes.func.isRequired,
+  showSaveDialog: PropTypes.func.isRequired,
+  hideSaveDialog: PropTypes.func.isRequired,
+  saveDialog: PropTypes.bool.isRequired,
   currentUser: PropTypes.object.isRequired,
   data: PropTypes.object.isRequired,
   root: PropTypes.object.isRequired,
   canSave: PropTypes.bool.isRequired,
   pending: PropTypes.object.isRequired,
   mergedSettings: PropTypes.object.isRequired,
-  activeSection: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired,
+  router: PropTypes.object,
+  route: PropTypes.object,
+  routes: PropTypes.array,
 };

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

@@ -5,6 +5,7 @@ import ModerationSettings from '../components/ModerationSettings';
 import withFragments from 'coral-framework/hocs/withFragments';
 import { getSlotFragmentSpreads } from 'coral-framework/utils';
 import { updatePending } from '../../../actions/configure';
+import { mapProps } from 'recompose';
 
 const slots = ['adminModerationSettings'];
 
@@ -41,5 +42,17 @@ export default compose(
       }
     `,
   }),
-  connect(mapStateToProps, mapDispatchToProps)
+  connect(mapStateToProps, mapDispatchToProps),
+  mapProps(({ root, settings, updatePending, errors, ...rest }) => ({
+    slotPassthrough: {
+      root,
+      settings,
+      updatePending,
+      errors,
+    },
+    updatePending,
+    settings,
+    errors,
+    ...rest,
+  }))
 )(ModerationSettings);

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

@@ -5,6 +5,7 @@ import StreamSettings from '../components/StreamSettings';
 import withFragments from 'coral-framework/hocs/withFragments';
 import { getSlotFragmentSpreads } from 'coral-framework/utils';
 import { updatePending } from '../../../actions/configure';
+import { mapProps } from 'recompose';
 
 const slots = ['adminStreamSettings'];
 
@@ -42,5 +43,17 @@ export default compose(
       }
     `,
   }),
-  connect(mapStateToProps, mapDispatchToProps)
+  connect(mapStateToProps, mapDispatchToProps),
+  mapProps(({ root, settings, updatePending, errors, ...rest }) => ({
+    slotPassthrough: {
+      root,
+      settings,
+      updatePending,
+      errors,
+    },
+    updatePending,
+    settings,
+    errors,
+    ...rest,
+  }))
 )(StreamSettings);

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

@@ -5,6 +5,7 @@ import TechSettings from '../components/TechSettings';
 import withFragments from 'coral-framework/hocs/withFragments';
 import { getSlotFragmentSpreads } from 'coral-framework/utils';
 import { updatePending } from '../../../actions/configure';
+import { mapProps } from 'recompose';
 
 const slots = ['adminTechSettings'];
 
@@ -38,5 +39,17 @@ export default compose(
       }
     `,
   }),
-  connect(mapStateToProps, mapDispatchToProps)
+  connect(mapStateToProps, mapDispatchToProps),
+  mapProps(({ root, settings, updatePending, errors, ...rest }) => ({
+    slotPassthrough: {
+      root,
+      settings,
+      updatePending,
+      errors,
+    },
+    updatePending,
+    settings,
+    errors,
+    ...rest,
+  }))
 )(TechSettings);

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

@@ -10,12 +10,14 @@ const InitialStep = () => {
   return (
     <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>
+      <Link to="/admin">
+        <Button raised>{t('install.final.launch')}</Button>
+      </Link>
+      <a href="http://coralproject.net">
+        <Button cStyle="black" raised>
+          {t('install.final.close')}
+        </Button>
+      </a>
     </div>
   );
 };

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

@@ -72,9 +72,9 @@
   flex: 1;
   color: black;
   max-width: 500px;
-  word-wrap: break-word;
   font-weight: 300;
   font-size: 16px;
+  word-break: break-all;
 }
 
 .created {
@@ -133,7 +133,6 @@
   color: #063b9a;
   cursor: pointer;
   font-weight: normal;
-  margin-left: 10px;
   white-space: nowrap;
 
   &:hover {
@@ -184,3 +183,17 @@
     }
   }
 }
+
+.commentContent {
+  display: flex;
+
+  blockquote {
+    font-size: inherit;
+    line-height: inherit;
+    letter-spacing: inherit;
+  }
+}
+
+.commentContentFooter {
+  flex: 1;
+}

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

@@ -8,7 +8,7 @@ import styles from './Comment.css';
 import CommentLabels from 'coral-admin/src/components/CommentLabels';
 import CommentAnimatedEdit from 'coral-admin/src/components/CommentAnimatedEdit';
 import Slot from 'coral-framework/components/Slot';
-import CommentFormatter from 'coral-admin/src/components/CommentFormatter';
+import AdminCommentContent from 'coral-framework/components/AdminCommentContent';
 import IfHasLink from 'coral-admin/src/components/IfHasLink';
 import cn from 'classnames';
 import ApproveButton from 'coral-admin/src/components/ApproveButton';
@@ -53,7 +53,6 @@ class Comment extends React.Component {
       comment,
       selected,
       className,
-      data,
       root,
       root: { settings },
       currentAsset,
@@ -62,7 +61,19 @@ class Comment extends React.Component {
     } = this.props;
 
     const selectionStateCSS = selected ? 'mdl-shadow--16dp' : 'mdl-shadow--2dp';
-    const queryData = { root, comment, asset: comment.asset };
+
+    const formatterSettings = {
+      suspectWords: settings.wordlist.suspect,
+      bannedWords: settings.wordlist.banned,
+      body: comment.body,
+    };
+
+    const slotPassthrough = {
+      clearHeightCache,
+      root,
+      comment,
+      asset: comment.asset,
+    };
 
     return (
       <li
@@ -107,16 +118,15 @@ class Comment extends React.Component {
                 <CommentLabels comment={comment} />
                 <Slot
                   fill="adminCommentInfoBar"
-                  data={data}
-                  clearHeightCache={clearHeightCache}
-                  queryData={queryData}
+                  passthrough={slotPassthrough}
                 />
               </div>
             </div>
           </div>
 
           <div className={styles.moderateArticle}>
-            Story: {comment.asset.title}
+            {t('common.story')}:{' '}
+            {comment.asset.title ? comment.asset.title : comment.asset.url}
             {!currentAsset && (
               <Link to={`/admin/moderate/${comment.asset.id}`}>
                 {t('modqueue.moderate')}
@@ -126,29 +136,28 @@ class Comment extends React.Component {
           <CommentAnimatedEdit body={comment.body}>
             <div className={styles.itemBody}>
               <div className={styles.body}>
-                <CommentFormatter
-                  suspectWords={settings.wordlist.suspect}
-                  bannedWords={settings.wordlist.banned}
-                  className="talk-admin-comment"
-                  body={comment.body}
+                <Slot
+                  fill="adminCommentContent"
+                  className={cn(styles.commentContent, 'talk-admin-comment')}
+                  size={1}
+                  defaultComponent={AdminCommentContent}
+                  passthrough={{ ...slotPassthrough, ...formatterSettings }}
                 />
-                <a
-                  className={styles.external}
-                  href={`${comment.asset.url}?commentId=${comment.id}`}
-                  target="_blank"
-                >
-                  <Icon name="open_in_new" /> {t('comment.view_context')}
-                </a>
+                <div className={styles.commentContentFooter}>
+                  <a
+                    className={styles.external}
+                    href={`${comment.asset.url}?commentId=${comment.id}`}
+                    target="_blank"
+                  >
+                    <Icon name="open_in_new" /> {t('comment.view_context')}
+                  </a>
+                </div>
               </div>
-              <Slot
-                fill="adminCommentContent"
-                data={data}
-                clearHeightCache={clearHeightCache}
-                queryData={queryData}
-              />
+
               <div className={styles.sideActions}>
                 <IfHasLink text={comment.body}>
                   <span className={styles.hasLinks}>
+                    {/* TODO: translate string */}
                     <Icon name="error_outline" /> Contains Link
                   </span>
                 </IfHasLink>
@@ -162,18 +171,12 @@ class Comment extends React.Component {
                     onClick={this.reject}
                   />
                 </div>
-                <Slot
-                  fill="adminSideActions"
-                  data={data}
-                  clearHeightCache={clearHeightCache}
-                  queryData={queryData}
-                />
+                <Slot fill="adminSideActions" passthrough={slotPassthrough} />
               </div>
             </div>
           </CommentAnimatedEdit>
         </div>
         <CommentDetails
-          data={data}
           root={root}
           comment={comment}
           clearHeightCache={clearHeightCache}
@@ -211,7 +214,6 @@ Comment.propTypes = {
       id: PropTypes.string,
     }),
   }),
-  data: PropTypes.object.isRequired,
   root: PropTypes.object.isRequired,
   selected: PropTypes.bool,
 };

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

@@ -126,7 +126,6 @@ class Moderation extends Component {
   render() {
     const {
       root,
-      data,
       moderation,
       viewUserDetail,
       activeTab,
@@ -148,6 +147,13 @@ class Moderation extends Component {
       count: root[`${queue}Count`],
     }));
 
+    const slotPassthrough = {
+      root,
+      asset,
+      activeTab,
+      handleCommentChange,
+    };
+
     return (
       <div>
         <ModerationHeader
@@ -171,7 +177,6 @@ class Moderation extends Component {
           />
           <ModerationQueue
             key={`${activeTab}_${this.props.moderation.sortOrder}`}
-            data={this.props.data}
             root={this.props.root}
             currentAsset={asset}
             comments={comments.nodes}
@@ -204,13 +209,7 @@ class Moderation extends Component {
           closeSearch={this.closeSearch}
           storySearchChange={this.props.storySearchChange}
         />
-        <Slot
-          data={data}
-          queryData={{ root, asset }}
-          activeTab={activeTab}
-          handleCommentChange={handleCommentChange}
-          fill="adminModeration"
-        />
+        <Slot fill="adminModeration" passthrough={slotPassthrough} />
       </div>
     );
   }

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

@@ -6,10 +6,6 @@
   margin-top: 16px;
 }
 
-:global(html) {
-  height: inherit;
-}
-
 .list {
   outline: none;
 }

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

@@ -344,7 +344,6 @@ class ModerationQueue extends React.Component {
       child = (
         <div style={style}>
           <Comment
-            data={this.props.data}
             root={this.props.root}
             comment={comment}
             dangling={
@@ -408,7 +407,6 @@ class ModerationQueue extends React.Component {
       return (
         <div className={styles.root}>
           <Comment
-            data={this.props.data}
             root={this.props.root}
             key={comment.id}
             comment={comment}
@@ -476,7 +474,6 @@ ModerationQueue.propTypes = {
   hasNextPage: PropTypes.bool,
   comments: PropTypes.array,
   activeTab: PropTypes.string.isRequired,
-  data: PropTypes.object.isRequired,
   root: PropTypes.object.isRequired,
   currentUserId: PropTypes.string.isRequired,
 };

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

@@ -111,14 +111,14 @@ class IndicatorContainer extends Component {
       return null;
     }
 
+    const slotPassthrough = {
+      handleCommentChange: this.handleCommentChange,
+    };
+
     return (
       <span>
         <Indicator />
-        <Slot
-          data={this.props.data}
-          handleCommentChange={this.handleCommentChange}
-          fill="adminModerationIndicator"
-        />
+        <Slot fill="adminModerationIndicator" passthrough={slotPassthrough} />
       </span>
     );
   }

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

@@ -89,3 +89,12 @@
     display: inline-block;
   }
 }
+
+.statusDropdown {
+  width: 150px;
+}
+
+.statusDropdownOption {
+  min-width: 100px;
+}
+

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

@@ -22,11 +22,20 @@ class Stories extends Component {
     const closed = !!(closedAt && new Date(closedAt).getTime() < Date.now());
     return (
       <Dropdown
+        className={styles.statusDropdown}
         value={closed}
         onChange={value => this.props.onStatusChange(value, id)}
       >
-        <Option value={false} label={t('streams.open')} />
-        <Option value={true} label={t('streams.closed')} />
+        <Option
+          value={false}
+          label={t('streams.open')}
+          className={styles.statusDropdownOption}
+        />
+        <Option
+          value={true}
+          label={t('streams.closed')}
+          className={styles.statusDropdownOption}
+        />
       </Dropdown>
     );
   };

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

@@ -1,12 +1,3 @@
-import LinkifyIt from 'linkify-it';
-import tlds from 'tlds';
-const linkify = new LinkifyIt();
-linkify.tlds(tlds);
-
-export function matchLinks(text) {
-  return linkify.match(text);
-}
-
 export const isPremod = mod => mod === 'PRE';
 
 export const getModPath = (type = 'all', assetId) =>

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

@@ -1,14 +1,34 @@
+import { HANDLE_SUCCESSFUL_LOGIN } from 'coral-framework/constants/auth';
+import { getStaticConfiguration } from 'coral-framework/services/staticConfiguration';
+import { createPostMessage } from 'coral-framework/services/postMessage';
+
 document.addEventListener('DOMContentLoaded', () => {
-  // Get the auth element and parse it as JSON by decoding it.
-  const auth = document.getElementById('auth');
-  const doc = document.implementation.createHTMLDocument('');
-  doc.body.innerHTML = auth.innerText;
+  try {
+    const staticConfig = getStaticConfiguration();
+    const { STATIC_ORIGIN: origin } = staticConfig;
+    const postMessage = createPostMessage(origin);
 
-  // Set the item in localStorage.
-  localStorage.setItem('auth', doc.body.textContent);
+    // Get the auth element and parse it as JSON by decoding it.
+    const auth = document.getElementById('auth');
+    const doc = document.implementation.createHTMLDocument('');
+    doc.body.innerHTML = auth.innerText;
 
-  // Close the window.
-  setTimeout(() => {
-    window.close();
-  }, 50);
+    // Auth state is contained within the node.
+    const { err, data } = JSON.parse(doc.body.textContent);
+    if (err) {
+      // TODO: send back the error message.
+      console.error(err);
+    } else {
+      // The data will contain a user and a token.
+      const { user, token } = data;
+
+      // Send the state back.
+      postMessage.post(HANDLE_SUCCESSFUL_LOGIN, { user, token });
+    }
+  } finally {
+    // Always close the window.
+    setTimeout(() => {
+      window.close();
+    }, 50);
+  }
 });

client/coral-docs/src/index.js

@@ -1,8 +0,0 @@
-import React from 'react';
-import { render } from 'react-dom';
-import { GraphQLDocs } from 'graphql-docs';
-
-import fetcher from './services/fetcher';
-
-// Render the application into the DOM
-render(<GraphQLDocs fetcher={fetcher} />, document.querySelector('#root'));

client/coral-docs/src/services/fetcher.js

@@ -1,10 +0,0 @@
-export default function fetcher(query) {
-  return fetch(`${window.location.origin}/api/v1/graph/ql`, {
-    method: 'POST',
-    headers: {
-      Accept: 'application/json',
-      'Content-Type': 'application/json',
-    },
-    body: JSON.stringify({ query }),
-  }).then(res => res.json());
-}

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

@@ -1,75 +0,0 @@
-import * as actions from '../constants/asset';
-import { notify } from 'coral-framework/actions/notification';
-
-import t from 'coral-framework/services/i18n';
-
-export const fetchAssetRequest = () => ({ type: actions.FETCH_ASSET_REQUEST });
-export const fetchAssetSuccess = asset => ({
-  type: actions.FETCH_ASSET_SUCCESS,
-  asset,
-});
-export const fetchAssetFailure = error => ({
-  type: actions.FETCH_ASSET_FAILURE,
-  error,
-});
-
-const updateAssetSettingsRequest = () => ({
-  type: actions.UPDATE_ASSET_SETTINGS_REQUEST,
-});
-const updateAssetSettingsSuccess = settings => ({
-  type: actions.UPDATE_ASSET_SETTINGS_SUCCESS,
-  settings,
-});
-const updateAssetSettingsFailure = error => ({
-  type: actions.UPDATE_ASSET_SETTINGS_FAILURE,
-  error,
-});
-
-export const updateConfiguration = newConfig => (
-  dispatch,
-  getState,
-  { rest }
-) => {
-  const assetId = getState().asset.id;
-  dispatch(updateAssetSettingsRequest());
-  rest(`/assets/${assetId}/settings`, { method: 'PUT', body: newConfig })
-    .then(() => {
-      dispatch(notify('success', t('framework.success_update_settings')));
-      dispatch(updateAssetSettingsSuccess(newConfig));
-    })
-    .catch(error => {
-      console.error(error);
-      dispatch(updateAssetSettingsFailure(error));
-    });
-};
-
-export const updateOpenStream = closedBody => (
-  dispatch,
-  getState,
-  { rest }
-) => {
-  const assetId = getState().asset.id;
-  dispatch(fetchAssetRequest());
-  rest(`/assets/${assetId}/status`, { method: 'PUT', body: closedBody })
-    .then(() => {
-      dispatch(notify('success', t('framework.success_update_settings')));
-      dispatch(fetchAssetSuccess(closedBody));
-    })
-    .catch(error => {
-      console.error(error);
-      dispatch(fetchAssetFailure(error));
-    });
-};
-
-const openStream = () => ({ type: actions.OPEN_COMMENTS });
-const closeStream = () => ({ type: actions.CLOSE_COMMENTS });
-
-export const updateOpenStatus = status => dispatch => {
-  if (status === 'open') {
-    dispatch(openStream());
-    dispatch(updateOpenStream({ closedAt: null }));
-  } else {
-    dispatch(closeStream());
-    dispatch(updateOpenStream({ closedAt: new Date().getTime() }));
-  }
-};

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

@@ -1,6 +0,0 @@
-import { ADD_EXTERNAL_CONFIG } from '../constants/config';
-
-export const addExternalConfig = config => ({
-  type: ADD_EXTERNAL_CONFIG,
-  config,
-});

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

@@ -1,14 +1,10 @@
 import * as actions from '../constants/login';
-import { checkLogin } from 'coral-framework/actions/auth';
 
 export const showSignInDialog = () => ({
   type: actions.SHOW_SIGNIN_DIALOG,
 });
 
-export const hideSignInDialog = () => dispatch => {
-  dispatch(checkLogin());
-  dispatch({ type: actions.HIDE_SIGNIN_DIALOG });
-};
+export const hideSignInDialog = () => ({ type: actions.HIDE_SIGNIN_DIALOG });
 
 export const focusSignInDialog = () => ({
   type: actions.FOCUS_SIGNIN_DIALOG,

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

@@ -0,0 +1,3 @@
+import * as actions from '../constants/profile';
+
+export const setActiveTab = tab => ({ type: actions.SET_ACTIVE_TAB, tab });

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

@@ -71,16 +71,19 @@ export const setActiveTab = tab => dispatch => {
   dispatch({ type: actions.SET_ACTIVE_TAB, tab });
 };
 
+// @Deprecated
 export const addCommentBoxTag = tag => ({
   type: actions.ADD_COMMENT_BOX_TAG,
   tag,
 });
 
+// @Deprecated
 export const removeCommentBoxTag = idx => ({
   type: actions.REMOVE_COMMENT_BOX_TAG,
   idx,
 });
 
+// @Deprecated
 export const clearCommentBoxTags = () => ({
   type: actions.CLEAR_COMMENT_BOX_TAGS,
 });

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

@@ -9,16 +9,12 @@ import AutomaticAssetClosure from '../containers/AutomaticAssetClosure';
 
 import ExtendableTabPanel from '../containers/ExtendableTabPanel';
 import { Tab, TabPane } from 'coral-ui';
-import ProfileContainer from '../tabs/profile/containers/ProfileContainer';
+import Profile from '../tabs/profile/containers/Profile';
 import Popup from 'coral-framework/components/Popup';
 import IfSlotIsNotEmpty from 'coral-framework/components/IfSlotIsNotEmpty';
 import cn from 'classnames';
 
 export default class Embed extends React.Component {
-  changeTab = tab => {
-    this.props.setActiveTab(tab);
-  };
-
   getTabs() {
     const tabs = [
       <Tab
@@ -53,6 +49,7 @@ export default class Embed extends React.Component {
   render() {
     const {
       activeTab,
+      setActiveTab,
       commentId,
       root,
       root: { asset },
@@ -65,6 +62,8 @@ export default class Embed extends React.Component {
       parentUrl,
     } = this.props;
     const hasHighlightedComment = !!commentId;
+    const popupUrl = `login?parentUrl=${encodeURIComponent(parentUrl)}`;
+    const slotPassthrough = { root };
 
     return (
       <div
@@ -75,7 +74,7 @@ export default class Embed extends React.Component {
         <AutomaticAssetClosure asset={asset} />
         <IfSlotIsNotEmpty slot="login">
           <Popup
-            href={`login?parentUrl=${encodeURIComponent(parentUrl)}`}
+            href={popupUrl}
             title="Login"
             features="menubar=0,resizable=0,width=500,height=550,top=200,left=500"
             open={showSignInDialog}
@@ -86,18 +85,17 @@ export default class Embed extends React.Component {
           />
         </IfSlotIsNotEmpty>
 
-        <Slot data={data} queryData={{ root }} fill="embed" />
+        <Slot passthrough={slotPassthrough} fill="embed" />
 
         <ExtendableTabPanel
           className="talk-embed-stream-tab-bar"
           activeTab={activeTab}
-          setActiveTab={this.changeTab}
+          setActiveTab={setActiveTab}
           fallbackTab="stream"
           tabSlot="embedStreamTabs"
           tabSlotPrepend="embedStreamTabsPrepend"
           tabPaneSlot="embedStreamTabPanes"
-          slotProps={{ data }}
-          queryData={{ root }}
+          slotPassthrough={slotPassthrough}
           tabs={this.getTabs()}
           tabPanes={[
             <TabPane
@@ -112,7 +110,7 @@ export default class Embed extends React.Component {
               tabId="profile"
               className="talk-embed-stream-profile-tab-pane"
             >
-              <ProfileContainer />
+              <Profile />
             </TabPane>,
             <TabPane
               key="config"
@@ -140,9 +138,5 @@ Embed.propTypes = {
   commentId: PropTypes.string,
   root: PropTypes.object,
   activeTab: PropTypes.string,
-  data: PropTypes.shape({
-    loading: PropTypes.bool,
-    error: PropTypes.object,
-    refetch: PropTypes.func,
-  }).isRequired,
+  data: PropTypes.object.isRequired,
 };

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

@@ -1,10 +0,0 @@
-export const FETCH_ASSET_REQUEST = 'FETCH_ASSET_REQUEST';
-export const FETCH_ASSET_FAILURE = 'FETCH_ASSET_FAILURE';
-export const FETCH_ASSET_SUCCESS = 'FETCH_ASSET_SUCCESS';
-
-export const UPDATE_ASSET_SETTINGS_REQUEST = 'UPDATE_ASSET_SETTINGS_REQUEST';
-export const UPDATE_ASSET_SETTINGS_SUCCESS = 'UPDATE_ASSET_SETTINGS_SUCCESS';
-export const UPDATE_ASSET_SETTINGS_FAILURE = 'UPDATE_ASSET_SETTINGS_FAILURE';
-
-export const OPEN_COMMENTS = 'OPEN_COMMENTS';
-export const CLOSE_COMMENTS = 'CLOSE_COMMENTS';

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

@@ -1 +0,0 @@
-export const ADD_EXTERNAL_CONFIG = 'ADD_EXTERNAL_CONFIG';

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

@@ -0,0 +1,2 @@
+const prefix = 'TALK_EMBED_STREAM';
+export const SET_ACTIVE_TAB = `${prefix}_SET_ACTIVE_TAB`;

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

@@ -2,7 +2,6 @@ import React from 'react';
 import { compose, gql } from 'react-apollo';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import isEqual from 'lodash/isEqual';
 import get from 'lodash/get';
 import branch from 'recompose/branch';
 import renderComponent from 'recompose/renderComponent';
@@ -14,12 +13,11 @@ import {
   hideSignInDialog,
 } from '../actions/login';
 import { updateStatus } from 'coral-framework/actions/auth';
-import { fetchAssetSuccess } from '../actions/asset';
 import {
   getDefinitionName,
   getSlotFragmentSpreads,
 } from 'coral-framework/utils';
-import { withQuery } from 'coral-framework/hocs';
+import { withQuery, withPopupAuthHandler } from 'coral-framework/hocs';
 import Embed from '../components/Embed';
 import Stream from '../tabs/stream/containers/Stream';
 import AutomaticAssetClosure from './AutomaticAssetClosure';
@@ -107,12 +105,6 @@ class EmbedContainer extends React.Component {
       this.props.data.refetch();
       this.resubscribe(nextProps);
     }
-
-    const { fetchAssetSuccess } = this.props;
-    if (!isEqual(nextProps.root.asset, this.props.root.asset)) {
-      // TODO: remove asset data from redux store.
-      fetchAssetSuccess(nextProps.root.asset);
-    }
   }
 
   componentDidUpdate(prevProps) {
@@ -298,7 +290,6 @@ EmbedContainer.propTypes = {
   activeTab: PropTypes.string,
   parentUrl: PropTypes.string,
   data: PropTypes.object,
-  fetchAssetSuccess: PropTypes.func,
   showSignInDialog: PropTypes.bool,
   signInDialogFocus: PropTypes.bool,
 };
@@ -322,7 +313,6 @@ const mapDispatchToProps = dispatch =>
   bindActionCreators(
     {
       setActiveTab,
-      fetchAssetSuccess,
       notify,
       focusSignInDialog,
       blurSignInDialog,
@@ -333,6 +323,7 @@ const mapDispatchToProps = dispatch =>
   );
 
 export default compose(
+  withPopupAuthHandler,
   connect(mapStateToProps, mapDispatchToProps),
   branch(props => !props.checkedInitialLogin, renderComponent(Spinner)),
   withEmbedQuery

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

@@ -1,17 +1,12 @@
 import React from 'react';
 import ExtendableTabPanel from '../components/ExtendableTabPanel';
-import { connect } from 'react-redux';
 import { TabPane } from 'coral-ui';
 import ExtendableTab from '../components/ExtendableTab';
-import { getShallowChanges } from 'coral-framework/utils';
-import isEqual from 'lodash/isEqual';
 import PropTypes from 'prop-types';
+import { withSlotElements } from 'coral-framework/hocs';
+import { compose } from 'recompose';
 
 class ExtendableTabPanelContainer extends React.Component {
-  static contextTypes = {
-    plugins: PropTypes.object,
-  };
-
   componentDidMount() {
     this.handleFallback();
   }
@@ -20,24 +15,6 @@ class ExtendableTabPanelContainer extends React.Component {
     this.handleFallback(next);
   }
 
-  shouldComponentUpdate(next) {
-    // Prevent Slot from rerendering when only reduxState has changed and
-    // it does not result in a change of slot children.
-    const changes = getShallowChanges(this.props, next);
-    if (changes.length === 1 && changes[0] === 'reduxState') {
-      const prevKeys = this.getSlotElements(this.props.tabSlot, this.props).map(
-        el => el.key
-      );
-      const nextKeys = this.getSlotElements(next.tabSlot, next).map(
-        el => el.key
-      );
-      return !isEqual(prevKeys, nextKeys);
-    }
-
-    // Prevent Slot from rerendering when no props has shallowly changed.
-    return changes.length !== 0;
-  }
-
   handleFallback(props = this.props) {
     if (this.getTabNames(props).indexOf(props.activeTab) === -1) {
       props.setActiveTab(props.fallbackTab);
@@ -48,38 +25,23 @@ class ExtendableTabPanelContainer extends React.Component {
     return this.getTabElements(props).map(el => el.props.tabId);
   }
 
-  getSlotElements(slot, props = this.props) {
-    const { plugins } = this.context;
-    return plugins.getSlotElements(
-      slot,
-      props.reduxState,
-      props.slotProps,
-      props.queryData
-    );
-  }
-
   getPluginTabElements(props = this.props) {
-    return this.getSlotTabElements(props.tabSlot);
+    return props.slotElements[0].map(this.createPluginTabFactory(props));
   }
 
   getPluginTabElementsPrepend(props = this.props) {
-    return this.getSlotTabElements(props.tabSlotPrepend);
+    return props.slotElements[1].map(this.createPluginTabFactory(props));
   }
 
-  getSlotTabElements(slot) {
-    return this.getSlotElements(slot).map(el => {
-      return (
-        <ExtendableTab
-          tabId={el.type.talkPluginName}
-          key={el.type.talkPluginName}
-        >
-          {React.cloneElement(el, {
-            active: this.props.activeTab === el.type.talkPluginName,
-          })}
-        </ExtendableTab>
-      );
-    });
-  }
+  createPluginTabFactory = (props = this.props) => el => {
+    return (
+      <ExtendableTab tabId={el.key} key={el.key}>
+        {React.cloneElement(el, {
+          active: props.activeTab === el.key,
+        })}
+      </ExtendableTab>
+    );
+  };
 
   getTabElements(props = this.props) {
     const elements = [...this.getPluginTabElementsPrepend(props)];
@@ -92,14 +54,16 @@ class ExtendableTabPanelContainer extends React.Component {
     return elements;
   }
 
+  createPluginTabPane(el) {
+    return (
+      <TabPane tabId={el.key} key={el.key}>
+        {el}
+      </TabPane>
+    );
+  }
+
   getPluginTabPaneElements(props = this.props) {
-    return this.getSlotElements(props.tabPaneSlot).map(el => {
-      return (
-        <TabPane tabId={el.type.talkPluginName} key={el.type.talkPluginName}>
-          {el}
-        </TabPane>
-      );
-    });
+    return props.slotElements[2].map(this.createPluginTabPane);
   }
 
   render() {
@@ -132,15 +96,15 @@ ExtendableTabPanelContainer.propTypes = {
   tabSlot: PropTypes.string.isRequired,
   tabSlotPrepend: PropTypes.string.isRequired,
   tabPaneSlot: PropTypes.string.isRequired,
-  slotProps: PropTypes.object.isRequired,
-  queryData: PropTypes.object,
+  slotPassthrough: PropTypes.object,
   className: PropTypes.string,
   sub: PropTypes.bool,
   loading: PropTypes.bool,
 };
 
-const mapStateToProps = state => ({
-  reduxState: state,
-});
-
-export default connect(mapStateToProps, null)(ExtendableTabPanelContainer);
+export default compose(
+  withSlotElements({
+    slot: props => [props.tabSlot, props.tabSlotPrepend, props.tabPaneSlot],
+    passthroughPropName: 'slotPassthrough',
+  })
+)(ExtendableTabPanelContainer);

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

@@ -141,7 +141,7 @@ export function findCommentInAsset(asset, callbackOrId) {
     callback = node => node.id === callbackOrId;
   }
   if (asset.comment) {
-    return findComment([getTopLevelParent(asset.comment)], callback);
+    return findComment([reverseCommentParentTree(asset.comment)], callback);
   }
   if (!asset.comments) {
     return false;
@@ -187,11 +187,12 @@ export function insertFetchedCommentsIntoEmbedQuery(root, comments, parent_id) {
   );
 }
 
-/**
- * attachCommentToParent recurses through the comment tree starting at `topLevelComment`
- * to find the parent of `comment` and attach it to the replies.
- */
-export function attachCommentToParent(topLevelComment, comment) {
+function attachComment(topLevelComment, comment) {
+  if (!topLevelComment.replies) {
+    topLevelComment = update(topLevelComment, {
+      replies: { $set: { nodes: [] } },
+    });
+  }
   if (topLevelComment.id === comment.parent.id) {
     return update(topLevelComment, {
       replies: {
@@ -204,16 +205,40 @@ export function attachCommentToParent(topLevelComment, comment) {
       },
     });
   }
+  if (!topLevelComment.replies.nodes.length) {
+    return topLevelComment;
+  }
   return update(topLevelComment, {
     replies: {
       nodes: {
-        $apply: nodes =>
-          nodes.map(node => attachCommentToParent(node, comment)),
+        $apply: nodes => nodes.map(node => attachComment(node, comment)),
       },
     },
   });
 }
 
+/**
+ * attachCommentToParent recurses through the comment tree starting at `topLevelComment`
+ * to find the ancestor of `comment` and attach it to the replies.
+ */
+export function attachCommentToParent(topLevelComment, comment) {
+  let result = topLevelComment;
+  if (comment.parent.parent) {
+    result = attachCommentToParent(result, comment.parent);
+  }
+  return attachComment(result, comment);
+}
+
+/**
+ * reverseCommentParentTree reverses a comment parent relationship tree
+ * like `comment -> parent -> parent` into `parent -> parent -> comment -> replies`.
+ */
+export function reverseCommentParentTree(comment) {
+  return comment.parent
+    ? attachCommentToParent(getTopLevelParent(comment), comment)
+    : comment;
+}
+
 /**
  * Nest a string in itself repeatly until `level` has been reached.
  *

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

@@ -1,28 +0,0 @@
-import * as actions from '../constants/asset';
-
-const initialState = {
-  closedAt: null,
-  settings: null,
-  title: null,
-  url: null,
-  features: {},
-  status: 'open',
-  moderation: null,
-};
-
-export default function asset(state = initialState, action) {
-  switch (action.type) {
-    case actions.FETCH_ASSET_SUCCESS:
-      return {
-        ...state,
-        ...action.asset,
-      };
-    case actions.UPDATE_ASSET_SETTINGS_SUCCESS:
-      return {
-        ...state,
-        settings: action.settings,
-      };
-    default:
-      return state;
-  }
-}

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

@@ -1,15 +0,0 @@
-import { ADD_EXTERNAL_CONFIG } from '../constants/config';
-
-const initialState = {};
-
-export default function config(state = initialState, action) {
-  switch (action.type) {
-    case ADD_EXTERNAL_CONFIG:
-      return {
-        ...state,
-        ...action.config,
-      };
-    default:
-      return state;
-  }
-}

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

@@ -8,7 +8,7 @@ const initialState = {
   errors: {},
 };
 
-export default function config(state = initialState, action) {
+export default function configure(state = initialState, action) {
   switch (action.type) {
     case actions.UPDATE_PENDING: {
       let next = state;

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

@@ -1,13 +1,13 @@
 import login from './login';
-import asset from './asset';
 import embed from './embed';
 import configure from './configure';
 import stream from './stream';
+import profile from './profile';
 
 export default {
   login,
-  asset,
   embed,
   configure,
   stream,
+  profile,
 };

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

@@ -0,0 +1,19 @@
+import * as actions from '../constants/profile';
+
+const initialState = {
+  activeTab: 'comments',
+  previousTab: '',
+};
+
+export default function stream(state = initialState, action) {
+  switch (action.type) {
+    case actions.SET_ACTIVE_TAB:
+      return {
+        ...state,
+        activeTab: action.tab,
+        previousTab: state.activeTab,
+      };
+    default:
+      return state;
+  }
+}

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

@@ -7,11 +7,7 @@ class Configure extends React.Component {
   render() {
     return (
       <div className="talk-embed-stream-configuration-container">
-        <Settings
-          data={this.props.data}
-          root={this.props.root}
-          asset={this.props.asset}
-        />
+        <Settings root={this.props.root} asset={this.props.asset} />
         <hr />
         <AssetStatusInfo asset={this.props.asset} />
       </div>
@@ -20,7 +16,6 @@ class Configure extends React.Component {
 }
 
 Configure.propTypes = {
-  data: PropTypes.object.isRequired,
   root: PropTypes.object.isRequired,
   asset: PropTypes.object.isRequired,
 };

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

@@ -1,38 +1,15 @@
 import React from 'react';
 import QuestionBox from '../../../components/QuestionBox';
-import { Icon, Spinner } from 'coral-ui';
 import DefaultQuestionBoxIcon from '../../../components/DefaultQuestionBoxIcon';
 import cn from 'classnames';
 import styles from './QuestionBoxBuilder.css';
+import { Icon } from 'coral-ui';
+import MarkdownEditor from 'coral-framework/components/MarkdownEditor';
 
 const DefaultIcon = <DefaultQuestionBoxIcon className={styles.defaultIcon} />;
-
 const icons = [{ default: DefaultIcon }, 'forum', 'build', 'format_quote'];
 
 class QuestionBoxBuilder extends React.Component {
-  constructor() {
-    super();
-
-    this.state = {
-      loading: true,
-    };
-  }
-
-  componentWillMount() {
-    this.loadEditor();
-  }
-
-  async loadEditor() {
-    const {
-      default: MarkdownEditor,
-    } = await import('coral-framework/components/MarkdownEditor');
-
-    return this.setState({
-      loading: false,
-      MarkdownEditor,
-    });
-  }
-
   render() {
     const {
       questionBoxIcon,
@@ -40,11 +17,6 @@ class QuestionBoxBuilder extends React.Component {
       onContentChange,
       onIconChange,
     } = this.props;
-    const { loading, MarkdownEditor } = this.state;
-
-    if (loading) {
-      return <Spinner />;
-    }
 
     return (
       <div className={styles.root}>

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

@@ -25,9 +25,9 @@ class Settings extends React.Component {
       onQuestionBoxContentChange,
       canSave,
       onApply,
-      slotProps,
-      queryData,
+      slotPassthrough,
     } = this.props;
+
     return (
       <div className={styles.wrapper}>
         <div className={styles.container}>
@@ -77,7 +77,7 @@ class Settings extends React.Component {
               </div>
             )}
           </Configuration>
-          <Slot fill="streamSettings" queryData={queryData} {...slotProps} />
+          <Slot fill="streamSettings" passthrough={slotPassthrough} />
         </div>
       </div>
     );
@@ -85,8 +85,7 @@ class Settings extends React.Component {
 }
 
 Settings.propTypes = {
-  queryData: PropTypes.object.isRequired,
-  slotProps: PropTypes.object.isRequired,
+  slotPassthrough: PropTypes.object.isRequired,
   settings: PropTypes.object.isRequired,
   canSave: PropTypes.bool.isRequired,
   onToggleModeration: PropTypes.func.isRequired,

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

@@ -13,13 +13,7 @@ class ConfigureContainer extends React.Component {
       return <div>{this.props.data.error.message}</div>;
     }
 
-    return (
-      <Configure
-        data={this.props.data}
-        root={this.props.root}
-        asset={this.props.asset}
-      />
-    );
+    return <Configure root={this.props.root} asset={this.props.asset} />;
   }
 }
 

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

@@ -57,17 +57,24 @@ class SettingsContainer extends React.Component {
     const {
       mergedSettings,
       canSave,
-      data,
       root,
       asset,
       errors,
       updatePending,
     } = this.props;
+
+    const slotPassthrough = {
+      root,
+      asset,
+      settings: mergedSettings,
+      updatePending,
+      errors,
+    };
+
     return (
       <Settings
         settings={mergedSettings}
-        queryData={{ root, asset, settings: mergedSettings }}
-        slotProps={{ data, updatePending, errors }}
+        slotPassthrough={slotPassthrough}
         savePending={this.savePending}
         onToggleModeration={this.toggleModeration}
         onTogglePremodLinks={this.togglePremodLinks}
@@ -82,7 +89,6 @@ class SettingsContainer extends React.Component {
 }
 
 SettingsContainer.propTypes = {
-  data: PropTypes.object.isRequired,
   root: PropTypes.object.isRequired,
   asset: PropTypes.object.isRequired,
   pending: PropTypes.object.isRequired,

client/coral-embed-stream/src/tabs/profile/components/BlankCommentHistory.css

@@ -0,0 +1,20 @@
+.root {
+  text-align: center;
+  padding-top: 24px;
+}
+
+.icon {
+  font-size: 64px;
+  color: #3a4a52;
+}
+
+.title {
+  font-size: 18px;
+  margin-bottom: 8px;
+}
+
+.info {
+  margin-top: 0px;
+  font-size: 14px;
+  color: #7d8285;
+}

client/coral-embed-stream/src/tabs/profile/components/BlankCommentHistory.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import styles from './BlankCommentHistory.css';
+import { Icon } from 'coral-ui';
+import cn from 'classnames';
+
+import t from 'coral-framework/services/i18n';
+
+export default () => (
+  <section className={cn(styles.root, 'talk-my-profile-comment-history-blank')}>
+    <Icon name="chat" className={styles.icon} />
+    <h1 className={styles.title}>{t('comment_history_blank.title')}</h1>
+    <p className={styles.info}>{t('comment_history_blank.info')}</p>
+  </section>
+);

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

@@ -15,6 +15,7 @@
 
 .main {
   min-width: 70%;
+  max-width: 100%;
 }
 
 .sidebar {

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

@@ -11,10 +11,20 @@ import { getTotalReactionsCount } from 'coral-framework/utils';
 import t from 'coral-framework/services/i18n';
 
 class Comment extends React.Component {
+  goToStory = () => {
+    this.props.navigate(this.props.comment.asset.url);
+  };
+
+  goToConversation = () => {
+    this.props.navigate(
+      `${this.props.comment.asset.url}?commentId=${this.props.comment.id}`
+    );
+  };
+
   render() {
-    const { comment, link, data, root } = this.props;
+    const { comment, root } = this.props;
     const reactionCount = getTotalReactionsCount(comment.action_summaries);
-    const queryData = { root, comment, asset: comment.asset };
+    const slotPassthrough = { root, comment, asset: comment.asset };
 
     return (
       <div className={styles.myComment}>
@@ -23,8 +33,8 @@ class Comment extends React.Component {
             fill="commentContent"
             defaultComponent={CommentContent}
             className={cn(styles.commentBody, 'my-comment-body')}
-            data={data}
-            queryData={queryData}
+            passthrough={slotPassthrough}
+            size={1}
           />
           <div className={cn(styles.commentSummary, 'comment-summary')}>
             <span
@@ -67,7 +77,7 @@ class Comment extends React.Component {
             <a
               className={cn(styles.assetURL, 'my-comment-anchor')}
               href="#"
-              onClick={link(`${comment.asset.url}`)}
+              onClick={this.goToStory}
             >
               {t('common.story')}:{' '}
               {comment.asset.title ? comment.asset.title : comment.asset.url}
@@ -77,10 +87,7 @@ class Comment extends React.Component {
         <div className={styles.sidebar}>
           <ul>
             <li>
-              <a
-                onClick={link(`${comment.asset.url}?commentId=${comment.id}`)}
-                className={styles.viewLink}
-              >
+              <a onClick={this.goToConversation} className={styles.viewLink}>
                 <Icon name="open_in_new" className={styles.iconView} />
                 {t('view_conversation')}
               </a>
@@ -91,9 +98,10 @@ class Comment extends React.Component {
                 fill="historyCommentTimestamp"
                 defaultComponent={CommentTimestamp}
                 className={'talk-history-comment-published-date'}
-                created_at={comment.created_at}
-                data={data}
-                queryData={queryData}
+                passthrough={{
+                  created_at: comment.created_at,
+                  ...slotPassthrough,
+                }}
                 inline
               />
             </li>
@@ -105,10 +113,9 @@ class Comment extends React.Component {
 }
 
 Comment.propTypes = {
-  comment: PropTypes.shape({
-    id: PropTypes.string,
-    body: PropTypes.string,
-  }).isRequired,
+  comment: PropTypes.object.isRequired,
+  navigate: PropTypes.func.isRequired,
+  root: PropTypes.object.isRequired,
 };
 
 export default Comment;

client/coral-embed-stream/src/tabs/profile/components/CommentHistory.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Comment from './Comment';
+import Comment from '../containers/Comment';
 import LoadMore from './LoadMore';
+import BlankCommentHistory from './BlankCommentHistory';
 
 class CommentHistory extends React.Component {
   state = {
@@ -21,18 +22,20 @@ class CommentHistory extends React.Component {
   };
 
   render() {
-    const { link, comments, data, root } = this.props;
+    const { navigate, comments, root } = this.props;
+    if (!comments.nodes.length) {
+      return <BlankCommentHistory />;
+    }
     return (
-      <div>
+      <div className="talk-my-profile-comment-history">
         <div className="commentHistory__list">
           {comments.nodes.map((comment, i) => {
             return (
               <Comment
                 key={i}
-                data={data}
                 root={root}
                 comment={comment}
-                link={link}
+                navigate={navigate}
               />
             );
           })}
@@ -51,8 +54,7 @@ class CommentHistory extends React.Component {
 CommentHistory.propTypes = {
   comments: PropTypes.object.isRequired,
   loadMore: PropTypes.func,
-  link: PropTypes.func,
-  data: PropTypes.object,
+  navigate: PropTypes.func,
   root: PropTypes.object,
 };
 

client/coral-embed-stream/src/tabs/profile/components/Profile.css

@@ -0,0 +1,11 @@
+.userInfo {
+  margin-bottom: 20px;
+}
+
+.email {
+  margin: 0;
+}
+
+.username {
+  margin-bottom: 4px;
+}