-
- {flagActions && flagActions.length
- ?
- : null}
);
}
@@ -214,6 +195,8 @@ Comment.propTypes = {
showSuspendUserDialog: PropTypes.func.isRequired,
currentUserId: PropTypes.string.isRequired,
comment: PropTypes.shape({
+ id: PropTypes.string.isRequired,
+ status: PropTypes.string.isRequired,
body: PropTypes.string.isRequired,
action_summaries: PropTypes.array,
actions: PropTypes.array,
@@ -230,7 +213,6 @@ Comment.propTypes = {
}),
data: PropTypes.object.isRequired,
root: PropTypes.object.isRequired,
- actions: PropTypes.array.isRequired,
selected: PropTypes.bool,
};
diff --git a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
index 517892a77..47ed56925 100644
--- a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
+++ b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
import Comment from '../containers/Comment';
import styles from './ModerationQueue.css';
import EmptyCard from '../../../components/EmptyCard';
-import {actionsMap} from '../../../utils/moderationQueueActionsMap';
import LoadMore from '../../../components/LoadMore';
import ViewMore from './ViewMore';
import t from 'coral-framework/services/i18n';
@@ -140,7 +139,6 @@ class ModerationQueue extends React.Component {
if (singleView) {
const index = comments.findIndex((comment) => comment.id === selectedCommentId);
const comment = comments[index];
- const status = comment.action_summaries ? 'FLAGGED' : comment.status;
return (
{
- const status = comment.action_summaries ? 'FLAGGED' : comment.status;
return gql`
organizationName
moderation
}
+ ...${getDefinitionName(Comment.fragments.root)}
}
+ ${Comment.fragments.root}
${commentConnectionFragment}
`, {
options: (props) => {
diff --git a/client/coral-admin/src/utils/moderationQueueActionsMap.js b/client/coral-admin/src/utils/moderationQueueActionsMap.js
deleted file mode 100644
index 95b0ecb55..000000000
--- a/client/coral-admin/src/utils/moderationQueueActionsMap.js
+++ /dev/null
@@ -1,14 +0,0 @@
-export const actionsMap = {
- PREMOD: ['APPROVE', 'REJECT'],
- FLAGGED: ['APPROVE', 'REJECT'],
- REJECTED: ['APPROVE', 'REJECTED']
-};
-
-export const menuActionsMap = {
- 'REJECT': {status: 'REJECTED', text: 'reject', icon: 'close', key: 'f'},
- 'REJECTED': {status: 'REJECTED', text: 'rejected', icon: 'close'},
- 'APPROVE': {status: 'ACCEPTED', text: 'approve', icon: 'done', key: 'd'},
- 'FLAGGED': {status: 'FLAGGED', text: 'flag', icon: 'flag', filter: 'Untouched'},
- 'BAN': {status: 'BANNED', text: 'ban_user', icon: 'not interested'},
- '': {icon: 'done'}
-};
diff --git a/client/coral-configure/components/QuestionBoxBuilder.js b/client/coral-configure/components/QuestionBoxBuilder.js
index 285df40ed..28dfc30b3 100644
--- a/client/coral-configure/components/QuestionBoxBuilder.js
+++ b/client/coral-configure/components/QuestionBoxBuilder.js
@@ -8,7 +8,7 @@ import styles from './QuestionBoxBuilder.css';
class QuestionBoxBuilder extends React.Component {
constructor() {
super();
-
+
this.state = {
loading: true
};
@@ -17,9 +17,9 @@ class QuestionBoxBuilder extends React.Component {
componentWillMount() {
this.loadEditor();
}
-
+
async loadEditor() {
- const MarkdownEditor = await import('coral-framework/components/MarkdownEditor');
+ const {default: MarkdownEditor} = await import('coral-framework/components/MarkdownEditor');
return this.setState({
loading : false,
@@ -79,17 +79,17 @@ class QuestionBoxBuilder extends React.Component {
- handleChange({}, {questionBoxContent: value})}
/>
-
+
);
}
diff --git a/client/coral-embed-stream/src/components/Comment.css b/client/coral-embed-stream/src/components/Comment.css
index e32b7333b..3ca7b842f 100644
--- a/client/coral-embed-stream/src/components/Comment.css
+++ b/client/coral-embed-stream/src/components/Comment.css
@@ -45,6 +45,12 @@
border-left: 3px solid rgb(35,118,216);
}
+.bylineSecondary {
+ display: flex;
+ color: #696969;
+ font-size: 12px;
+}
+
.pendingComment {
filter: blur(2px);
pointer-events: none;
diff --git a/client/coral-embed-stream/src/graphql/index.js b/client/coral-embed-stream/src/graphql/index.js
index 20ed8a1d6..3f6fd4832 100644
--- a/client/coral-embed-stream/src/graphql/index.js
+++ b/client/coral-embed-stream/src/graphql/index.js
@@ -96,6 +96,11 @@ export default {
user {
id
username
+ tags {
+ tag {
+ name
+ }
+ }
}
action_summaries {
count
@@ -129,7 +134,19 @@ export default {
user: {
__typename: 'User',
id: auth.user.id,
- username: auth.user.username
+ username: auth.user.username,
+ tags: tags.map((tag) => ({
+ tag: {
+ name: tag,
+ created_at: new Date().toISOString(),
+ __typename: 'Tag'
+ },
+ assigned_by: {
+ id: auth.user.id,
+ __typename: 'User'
+ },
+ __typename: 'TagLink'
+ })),
},
created_at: new Date().toISOString(),
body,
@@ -140,10 +157,6 @@ export default {
created_at: new Date().toISOString(),
__typename: 'Tag'
},
- assigned_by: {
- id: auth.user.id,
- __typename: 'User'
- },
__typename: 'TagLink'
})),
status: 'NONE',
diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css
index a20c94d1a..0dcbf856e 100644
--- a/client/coral-embed-stream/style/default.css
+++ b/client/coral-embed-stream/style/default.css
@@ -270,6 +270,7 @@ button.comment__action-button[disabled],
width: 75%;
font-size: 16px;
border: 1px solid #ccc;
+ max-width: calc(100% - 40px);
}
/* Close comments */
diff --git a/client/coral-embed/src/index.js b/client/coral-embed/src/index.js
index 34bee1797..f60a88439 100644
--- a/client/coral-embed/src/index.js
+++ b/client/coral-embed/src/index.js
@@ -2,101 +2,98 @@ import URLSearchParams from 'url-search-params';
import Stream from './Stream';
import StreamInterface from './StreamInterface';
-// This function should return value of window.Coral
-const Coral = {};
-const Talk = (Coral.Talk = {});
+export class Talk {
-/**
- * Render a Talk stream
- * @param {HTMLElement} el - Element to render the stream in
- * @param {Object} opts - Configuration options for talk
- * @param {String} opts.talk - Talk base URL
- * @param {String} [opts.title] - Title of Stream (rendered in iframe)
- * @param {String} [opts.asset_url] - Asset URL
- * @param {String} [opts.asset_id] - Asset ID
- * @param {String} [opts.auth_token] - (optional) A jwt representing the session
- * @return {Object}
- *
- * Example:
- * ```
- * const embed = Talk.render(document.getElementById('talkStreamEmbed'), opts);
- *
- * // trigger a login with optional token.
- * embed.login(token);
- *
- * // trigger a logout.
- * embed.logout();
- *
- * // listen to events (in this case all events).
- * embed.on('**', function(value) {
- * console.log(this.event, value);
- * });
- * ```
- */
-Talk.render = (el, opts) => {
- if (!el) {
- throw new Error('Please provide Coral.Talk.render() the HTMLElement you want to render Talk in.');
- }
- if (typeof el !== 'object') {
- throw new Error(`Coral.Talk.render() expected HTMLElement but got ${el} (${typeof el})`);
- }
-
- opts = opts || {};
-
- // TODO: infer this URL without explicit user input (if possible, may have to be added at build/render time of this script)
- if (!opts.talk) {
- throw new Error(
- 'Coral.Talk.render() expects opts.talk as the Talk Base URL'
- );
- }
-
- // Ensure el has an id, as pym can't directly accept the HTMLElement.
- if (!el.id) {
- el.id = `_${Math.random()}`;
- }
-
- // Compose the query to send down to the Talk API so it knows what to load.
- const query = {};
-
- // Parse the url parameters to extract some of the information.
- const urlParams = new URLSearchParams(window.location.search);
- if (urlParams.get('commentId')) {
- query.comment_id = urlParams.get('commentId');
- }
-
- // Extract the asset id from the options.
- if (opts.asset_id) {
- query.asset_id = opts.asset_id;
- }
-
- // Extract the asset url.
- if (opts.asset_url) {
- query.asset_url = opts.asset_url;
- } else if (!opts.asset_id) {
-
- // The asset url was not provided and the asset id was also not provided,
- // we need to infer the asset url from details on the page.
-
- try {
- query.asset_url = document.querySelector('link[rel="canonical"]').href;
- } catch (e) {
- console.warn(
- 'This page does not include a canonical link tag. Talk has inferred this asset_url from the window object. Query params have been stripped, which may cause a single thread to be present across multiple pages.'
- );
-
- if (!window.location.origin) {
- window.location.origin = `${window.location.protocol}//${window.location.hostname}${window.location.port ? `:${window.location.port}` : ''}`;
- }
-
- query.asset_url = window.location.origin + window.location.pathname;
+ /**
+ * Render a Talk stream
+ * @param {HTMLElement} el - Element to render the stream in
+ * @param {Object} opts - Configuration options for talk
+ * @param {String} opts.talk - Talk base URL
+ * @param {String} [opts.title] - Title of Stream (rendered in iframe)
+ * @param {String} [opts.asset_url] - Asset URL
+ * @param {String} [opts.asset_id] - Asset ID
+ * @param {String} [opts.auth_token] - (optional) A jwt representing the session
+ * @return {Object}
+ *
+ * Example:
+ * ```
+ * const embed = Talk.render(document.getElementById('talkStreamEmbed'), opts);
+ *
+ * // trigger a login with optional token.
+ * embed.login(token);
+ *
+ * // trigger a logout.
+ * embed.logout();
+ *
+ * // listen to events (in this case all events).
+ * embed.on('**', function(value) {
+ * console.log(this.event, value);
+ * });
+ * ```
+ */
+ static render(el, opts) {
+ if (!el) {
+ throw new Error('Please provide Coral.Talk.render() the HTMLElement you want to render Talk in.');
}
+ if (typeof el !== 'object') {
+ throw new Error(`Coral.Talk.render() expected HTMLElement but got ${el} (${typeof el})`);
+ }
+
+ opts = opts || {};
+
+ // TODO: infer this URL without explicit user input (if possible, may have to be added at build/render time of this script)
+ if (!opts.talk) {
+ throw new Error(
+ 'Coral.Talk.render() expects opts.talk as the Talk Base URL'
+ );
+ }
+
+ // Ensure el has an id, as pym can't directly accept the HTMLElement.
+ if (!el.id) {
+ el.id = `_${Math.random()}`;
+ }
+
+ // Compose the query to send down to the Talk API so it knows what to load.
+ const query = {};
+
+ // Parse the url parameters to extract some of the information.
+ const urlParams = new URLSearchParams(window.location.search);
+ if (urlParams.get('commentId')) {
+ query.comment_id = urlParams.get('commentId');
+ }
+
+ // Extract the asset id from the options.
+ if (opts.asset_id) {
+ query.asset_id = opts.asset_id;
+ }
+
+ // Extract the asset url.
+ if (opts.asset_url) {
+ query.asset_url = opts.asset_url;
+ } else if (!opts.asset_id) {
+
+ // The asset url was not provided and the asset id was also not provided,
+ // we need to infer the asset url from details on the page.
+
+ try {
+ query.asset_url = document.querySelector('link[rel="canonical"]').href;
+ } catch (e) {
+ console.warn(
+ 'This page does not include a canonical link tag. Talk has inferred this asset_url from the window object. Query params have been stripped, which may cause a single thread to be present across multiple pages.'
+ );
+
+ if (!window.location.origin) {
+ window.location.origin = `${window.location.protocol}//${window.location.hostname}${window.location.port ? `:${window.location.port}` : ''}`;
+ }
+
+ query.asset_url = window.location.origin + window.location.pathname;
+ }
+ }
+
+ // Create the new Stream.
+ const stream = new Stream(el, opts.talk, query, opts);
+
+ // Return the public interface for the stream.
+ return new StreamInterface(stream);
}
-
- // Create the new Stream.
- const stream = new Stream(el, opts.talk, query, opts);
-
- // Return the public interface for the stream.
- return new StreamInterface(stream);
-};
-
-export default Coral;
+}
diff --git a/client/coral-framework/components/CommentDetail.css b/client/coral-framework/components/CommentDetail.css
new file mode 100644
index 000000000..4806b9522
--- /dev/null
+++ b/client/coral-framework/components/CommentDetail.css
@@ -0,0 +1,37 @@
+.root {
+}
+
+.headerContainer {
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+}
+
+.header {
+ vertical-align: middle;
+ margin: 0;
+ font-weight: 500;
+ display: inline-block;
+ font-size: 12px;
+ line-height: 12px;
+ margin-right: 7px;
+}
+
+.info {
+ font-size: 12px;
+}
+
+.details {
+ padding: 0 20px 16px;
+ font-size: 12px;
+
+ &:empty {
+ display: none;
+ }
+}
+
+.icon {
+ vertical-align: middle;
+ font-size: 12px;
+ margin-right: 7px;
+}
diff --git a/client/coral-framework/components/CommentDetail.js b/client/coral-framework/components/CommentDetail.js
new file mode 100644
index 000000000..2e1a89089
--- /dev/null
+++ b/client/coral-framework/components/CommentDetail.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cn from 'classnames';
+import styles from './CommentDetail.css';
+import {Icon} from 'coral-ui';
+
+const CommentDetail = ({icon, header, info, children, className}) => {
+ return (
+
+
+ {icon &&
}
+ {header}:
+ {info}
+
+ {children &&
+
+ {children}
+
+ }
+