Merge branch 'master' into button-states

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

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

@@ -168,7 +168,7 @@ class Comment extends React.Component {
                 {' '}
                 <a
                   className={styles.external}
-                  href={`${comment.asset.url}#${comment.id}`}
+                  href={`${comment.asset.url}?commentId=${comment.id}`}
                   target="_blank"
                 >
                   <Icon name="open_in_new" /> {t('comment.view_context')}

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

@@ -1,5 +1,6 @@
 import React, {PropTypes} from 'react';
 import LoadMore from './LoadMore';
+import {StreamError} from './StreamError';
 import Comment from '../components/Comment';
 import SuspendedAccount from './SuspendedAccount';
 import Slot from 'coral-framework/components/Slot';
@@ -187,6 +188,12 @@ class Stream extends React.Component {
     };
 
     const showCommentBox = loggedIn && ((!banned && !temporarilySuspended && !highlightedComment) || keepCommentBox);
+
+    if (!comment && !comments) {
+      console.error('Talk: No comments came back from the graph given that query. Please, check the query params.');
+      return <StreamError />;
+    }
+
     return (
       <div id="stream">
 

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

@@ -0,0 +1,3 @@
+.streamError {
+  padding: 10px 0;
+}

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import styles from './StreamError.css';
+import t from 'coral-framework/services/i18n';
+
+export const StreamError = () => (
+  <div className={styles.streamError}>
+    {t('common.error')}
+  </div>
+);

client/coral-embed/src/index.js

@@ -1,4 +1,5 @@
 import pym from 'pym.js';
+import URLSearchParams from 'url-search-params';
 
 import {stringify} from 'querystring';
 
@@ -190,7 +191,10 @@ Talk.render = function(el, opts) {
   // Compose the query to send down to the Talk API so it knows what to load.
   let query = {};
 
-  query.comment_id = window.location.hash.slice(1);
+  let urlParams = new URLSearchParams(window.location.search);
+
+  query.comment_id = urlParams.get('commentId');
+
   query.asset_id = opts.asset_id;
 
   query.asset_url = opts.asset_url;

client/coral-plugin-flags/index.js

@@ -1 +1 @@
-export {default as FlagComment} from './components/FlagComment';
+export {default as FlagComment} from './components/FlagComment';

client/coral-plugin-history/Comment.js

@@ -29,7 +29,7 @@ const Comment = (props) => {
       <div className={styles.sidebar}>
         <ul>
           <li>
-            <a onClick={props.link(`${props.asset.url}#${props.comment.id}`)}>
+            <a onClick={props.link(`${props.asset.url}?commentId=${props.comment.id}`)}>
               <Icon name="open_in_new" />{t('view_conversation')}
             </a>
           </li>

client/coral-ui/components/Tab.js

@@ -4,7 +4,7 @@ import styles from './Tab.css';
 export default ({children, tabId, active, onTabClick, cStyle = 'base', ...props}) => (
   <li
     key={tabId}
-    className={`${active ? `${styles[`${cStyle}--active`]} coral-tab-active` : ''} coral-tab ${props.className}`}
+    className={`${active ? `${styles[`${cStyle}--active`]} talk-tab-active` : ''} talk-tab ${props.className}`}
     onClick={() => onTabClick(tabId)}
   >
     {children}

client/coral-ui/components/TabBar.js

@@ -17,7 +17,7 @@ class TabBar extends React.Component {
     const {children, activeTab, cStyle = 'base'} = this.props;
     return (
       <div>
-        <ul className={`${styles.base} ${cStyle ? styles[cStyle] : ''} ${this.props.className}`}>
+        <ul className={`${styles.base} ${cStyle ? styles[cStyle] : ''} talk-tab-bar ${this.props.className}`}>
           {React.Children.toArray(children)
             .filter((child) => !child.props.restricted)
             .map((child, tabId) =>

locales/en.yml

@@ -40,6 +40,7 @@ en:
   comment_post_notif_premod: "Thank you for posting. Our moderation team will review your comment shortly."
   common:
     copy: 'Copy'
+    error: 'An error has occurred.'
   community:
     account_creation_date: "Account Creation Date"
     active: Active

locales/es.yml

@@ -40,6 +40,7 @@ es:
   comment_post_notif_premod: "Gracias por el comentario. Nuestro equipo de moderación va a revisarlo muy pronto."
   common:
     copy: 'Copiar'
+    error: 'Ha ocurrido un error.'
   community:
     account_creation_date: "Fecha de creación de la cuenta"
     active: Activa

package.json

@@ -1,6 +1,6 @@
 {
   "name": "talk",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "A better commenting experience from Mozilla, The New York Times, and the Washington Post. https://coralproject.net",
   "main": "app.js",
   "scripts": {
@@ -57,6 +57,7 @@
   "dependencies": {
     "accepts": "^1.3.3",
     "app-module-path": "^2.2.0",
+    "async": "^2.5.0",
     "bcrypt": "^1.0.2",
     "body-parser": "^1.17.1",
     "bowser": "^1.7.0",
@@ -122,6 +123,7 @@
     "snake-case": "^2.1.0",
     "subscriptions-transport-ws": "^0.7.2",
     "timekeeper": "^1.0.0",
+    "url-search-params": "^0.9.0",
     "uuid": "^3.0.1",
     "yaml-loader": "^0.4.0",
     "yamljs": "^0.2.10"

plugins.default.json

@@ -12,6 +12,7 @@
     "coral-plugin-auth",
     "coral-plugin-offtopic",
     "coral-plugin-viewing-options",
-    "coral-plugin-comment-content"
+    "coral-plugin-comment-content",
+    "talk-plugin-permalink"
   ]
 }

plugins/talk-plugin-permalink/client/components/PermalinkButton.js

@@ -83,7 +83,7 @@ export default class PermalinkButton extends React.Component {
               className={cn(styles.input, `${name}-copy-field`)}
               type='text'
               ref={(input) => this.permalinkInput = input}
-              defaultValue={`${asset.url}#${this.props.commentId}`}
+              defaultValue={`${asset.url}?commentId=${this.props.commentId}`}
             />
 
             <Button

plugins/talk-plugin-permalink/yarn.lock

@@ -0,0 +1,4 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+

yarn.lock

@@ -352,9 +352,9 @@ async@2.1.4:
   dependencies:
     lodash "^4.14.0"
 
-async@^2.0.1, async@^2.1.2, async@^2.1.4:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/async/-/async-2.3.0.tgz#1013d1051047dd320fe24e494d5c66ecaf6147d9"
+async@^2.0.1, async@^2.1.2, async@^2.1.4, async@^2.5.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/async/-/async-2.5.0.tgz#843190fd6b7357a0b9e1c956edddd5ec8462b54d"
   dependencies:
     lodash "^4.14.0"