diff --git a/client/coral-admin/src/components/CommentDetail.css b/client/coral-admin/src/components/CommentDetail.css
new file mode 100644
index 000000000..259d4e1c5
--- /dev/null
+++ b/client/coral-admin/src/components/CommentDetail.css
@@ -0,0 +1,34 @@
+.root {
+ margin-left: 16px;
+}
+
+.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;
+}
+
+.icon {
+ vertical-align: middle;
+ font-size: 12px;
+ margin-right: 7px;
+}
diff --git a/client/coral-admin/src/components/CommentDetail.js b/client/coral-admin/src/components/CommentDetail.js
new file mode 100644
index 000000000..2e1a89089
--- /dev/null
+++ b/client/coral-admin/src/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}
+
+ }
+
+ );
+};
+
+CommentDetail.propTypes = {
+ className: PropTypes.string,
+ header: PropTypes.node,
+ icon: PropTypes.string,
+ info: PropTypes.node,
+ children: PropTypes.node,
+};
+
+export default CommentDetail;
diff --git a/client/coral-admin/src/components/FlagBox.css b/client/coral-admin/src/components/FlagBox.css
index 232803203..b88f904b9 100644
--- a/client/coral-admin/src/components/FlagBox.css
+++ b/client/coral-admin/src/components/FlagBox.css
@@ -1,56 +1,42 @@
.flagBox {
border-top: 1px solid rgba(66, 66, 66, 0.12);
margin-top: 10px;
- .container {
- padding: 0 14px;
- }
+ padding-top: 10px;
+}
- .detail {
- padding: 0 20px 16px;
- ul {
- padding: 0;
- list-style: none;
- font-size: 12px;
- font-weight: 500;
- }
- }
+.info {
+ vertical-align: middle;
+ list-style: none;
+ display: inline-block;
+ padding: 0;
+ font-size: 12px;
+}
- .header {
- position: relative;
- .moreDetail {
- float: right;
- font-size: 12px;
- font-weight: 500;
- margin-right: 10px;
- margin-top: 8px;
- color: black;
+.detail {
+ padding: 0;
+ list-style: none;
+ font-size: 12px;
+ font-weight: 500;
+}
- &:hover {
- opacity: 0.9;
- cursor: pointer;
- }
- }
- i {
- vertical-align: middle;
- font-size: 12px;
- }
- ul {
- vertical-align: middle;
- list-style: none;
- display: inline-block;
- padding: 0;
- margin-left: 10px;
- font-size: 12px;
- }
- }
+.subDetail {
+ padding: 0;
+ list-style: none;
+ font-size: 12px;
+ font-weight: normal;
+ color: #888;
+}
- h3 {
- vertical-align: middle;
- margin: 0;
- font-weight: 500;
- display: inline-block;
- margin-left: 7px;
- font-size: 12px;
+.moreDetail {
+ position: absolute;
+ font-size: 12px;
+ font-weight: 500;
+ color: black;
+ right: 16px;
+
+ &:hover {
+ opacity: 0.9;
+ cursor: pointer;
}
}
@@ -59,15 +45,6 @@
margin-right: 10px;
}
-.subDetail {
- font-weight: normal;
- color: #888;
-
- span {
- color: black;
- }
-}
-
.username {
color: #393B44;
text-decoration: none;
@@ -77,7 +54,7 @@
border-radius: 2px;
margin-left: -5px;
transition: background-color 200ms ease;
-&:hover {
- background-color: #E0E0E0;
- }
+ &:hover {
+ background-color: #E0E0E0;
+ }
}
diff --git a/client/coral-admin/src/components/FlagBox.js b/client/coral-admin/src/components/FlagBox.js
index 05fd14128..44a302e52 100644
--- a/client/coral-admin/src/components/FlagBox.js
+++ b/client/coral-admin/src/components/FlagBox.js
@@ -1,8 +1,8 @@
import React, {Component} from 'react';
import PropTypes from 'prop-types';
-import {Icon} from 'coral-ui';
import styles from './FlagBox.css';
import t from 'coral-framework/services/i18n';
+import CommentDetail from './CommentDetail';
const shortReasons = {
'This comment is offensive': t('modqueue.offensive'),
@@ -39,45 +39,42 @@ class FlagBox extends Component {
return (
-
-
+ }>
{showDetail && (
-
-
- {actionSummaries.map((summary, i) => {
-
- const actionList = actions.filter((a) => a.reason === summary.reason);
-
- return (
- -
- {this.reasonMap(summary.reason)} ({summary.count})
-
-
- );
- })}
-
-
+
+ {actionSummaries.map((summary, i) => {
+ const actionList = actions.filter((a) => a.reason === summary.reason);
+ return (
+ -
+ {this.reasonMap(summary.reason)} ({summary.count})
+
+
+ );
+ })}
+
)}
-
+
);
}
diff --git a/client/coral-admin/src/routes/Moderation/components/Comment.js b/client/coral-admin/src/routes/Moderation/components/Comment.js
index f72b0ef12..e19f34229 100644
--- a/client/coral-admin/src/routes/Moderation/components/Comment.js
+++ b/client/coral-admin/src/routes/Moderation/components/Comment.js
@@ -185,11 +185,6 @@ class Comment extends React.Component {
-
{flagActions && flagActions.length
?
: null}
+
);
}
diff --git a/plugins/talk-plugin-toxic-comments/client/components/ToxicDetail.css b/plugins/talk-plugin-toxic-comments/client/components/ToxicDetail.css
new file mode 100644
index 000000000..cbf7ce8de
--- /dev/null
+++ b/plugins/talk-plugin-toxic-comments/client/components/ToxicDetail.css
@@ -0,0 +1,11 @@
+.info {
+ background-color: rgba(44, 44, 44, 0.89);
+ color: white;
+ padding: 2px 4px;
+ font-size: 0.8em;
+ margin-left: 6px;
+}
+
+.toxic {
+ background-color: #d03235;
+}
diff --git a/plugins/talk-plugin-toxic-comments/client/components/ToxicDetail.js b/plugins/talk-plugin-toxic-comments/client/components/ToxicDetail.js
new file mode 100644
index 000000000..de8a0337c
--- /dev/null
+++ b/plugins/talk-plugin-toxic-comments/client/components/ToxicDetail.js
@@ -0,0 +1,46 @@
+import React from 'react';
+import CommentDetail from 'coral-admin/src/components/CommentDetail';
+import {isToxic} from '../utils';
+import styles from './ToxicDetail.css';
+import cn from 'classnames';
+import PropTypes from 'prop-types';
+
+const getInfo = (toxicity, actions) => {
+ const toxic = isToxic(actions);
+ let text = 'Unlikely';
+ if (toxicity > 0.8) {
+ text = 'Highly Likely';
+ }
+ else if (toxicity >= 0.5) {
+ text = 'Possibly';
+ }
+ else if (toxicity >= 0.7) {
+ text = 'Likely';
+ }
+
+ return (
+
+ {text}
+
+ {Math.round(toxicity * 100)}%
+
+
+ );
+};
+
+const ToxicLabel = ({comment: {actions, toxicity}}) => (
+
+);
+
+ToxicLabel.propTypes = {
+ comment: PropTypes.shape({
+ actions: PropTypes.array,
+ toxicity: PropTypes.toxicity,
+ }),
+};
+
+export default ToxicLabel;
diff --git a/plugins/talk-plugin-toxic-comments/client/containers/ToxicDetail.js b/plugins/talk-plugin-toxic-comments/client/containers/ToxicDetail.js
new file mode 100644
index 000000000..32b83fbb3
--- /dev/null
+++ b/plugins/talk-plugin-toxic-comments/client/containers/ToxicDetail.js
@@ -0,0 +1,21 @@
+import {compose, gql} from 'react-apollo';
+import {withFragments, excludeIf} from 'plugin-api/beta/client/hocs';
+import ToxicDetail from '../components/ToxicDetail';
+
+const enhance = compose(
+ withFragments({
+ comment: gql`
+ fragment TalkToxicComments_ToxicDetail_Comment on Comment {
+ toxicity
+ actions {
+ __typename
+ ... on FlagAction {
+ reason
+ }
+ }
+ }`,
+ }),
+ excludeIf(({comment: {toxicity}}) => toxicity === null),
+);
+
+export default enhance(ToxicDetail);
diff --git a/plugins/talk-plugin-toxic-comments/client/containers/ToxicLabel.js b/plugins/talk-plugin-toxic-comments/client/containers/ToxicLabel.js
index 0d2e9e14b..ee43f4a7e 100644
--- a/plugins/talk-plugin-toxic-comments/client/containers/ToxicLabel.js
+++ b/plugins/talk-plugin-toxic-comments/client/containers/ToxicLabel.js
@@ -1,15 +1,12 @@
import {compose, gql} from 'react-apollo';
import {withFragments, excludeIf} from 'plugin-api/beta/client/hocs';
import ToxicLabel from '../components/ToxicLabel';
-
-function isToxic(actions) {
- return actions.some((action) => action.__typename === 'FlagAction' && action.reason === 'TOXIC_COMMENT');
-}
+import {isToxic} from '../utils';
const enhance = compose(
withFragments({
comment: gql`
- fragment TalkToxicComments_Comment on Comment {
+ fragment TalkToxicComments_ToxicLabel_Comment on Comment {
actions {
__typename
... on FlagAction {
diff --git a/plugins/talk-plugin-toxic-comments/client/index.js b/plugins/talk-plugin-toxic-comments/client/index.js
index 8a16b8dea..1db520891 100644
--- a/plugins/talk-plugin-toxic-comments/client/index.js
+++ b/plugins/talk-plugin-toxic-comments/client/index.js
@@ -1,11 +1,13 @@
import translations from './translations.yml';
import CheckToxicityHook from './containers/CheckToxicityHook';
import ToxicLabel from './containers/ToxicLabel';
+import ToxicDetail from './containers/ToxicDetail';
export default {
translations,
slots: {
commentInputDetailArea: [CheckToxicityHook],
adminCommentLabels: [ToxicLabel],
+ adminCommentDetailArea: [ToxicDetail],
},
};
diff --git a/plugins/talk-plugin-toxic-comments/client/utils.js b/plugins/talk-plugin-toxic-comments/client/utils.js
new file mode 100644
index 000000000..57bfd9633
--- /dev/null
+++ b/plugins/talk-plugin-toxic-comments/client/utils.js
@@ -0,0 +1,4 @@
+export function isToxic(actions) {
+ return actions.some((action) => action.__typename === 'FlagAction' && action.reason === 'TOXIC_COMMENT');
+}
+
diff --git a/plugins/talk-plugin-toxic-comments/index.js b/plugins/talk-plugin-toxic-comments/index.js
index 0802a6c11..444cb94f5 100644
--- a/plugins/talk-plugin-toxic-comments/index.js
+++ b/plugins/talk-plugin-toxic-comments/index.js
@@ -1,8 +1,10 @@
const {readFileSync} = require('fs');
const path = require('path');
const hooks = require('./server/hooks');
+const resolvers = require('./server/resolvers');
module.exports = {
typeDefs: readFileSync(path.join(__dirname, 'server/typeDefs.graphql'), 'utf8'),
hooks,
+ resolvers,
};
diff --git a/plugins/talk-plugin-toxic-comments/server/resolvers.js b/plugins/talk-plugin-toxic-comments/server/resolvers.js
new file mode 100644
index 000000000..5af584b44
--- /dev/null
+++ b/plugins/talk-plugin-toxic-comments/server/resolvers.js
@@ -0,0 +1,7 @@
+const get = require('lodash/get');
+
+module.exports = {
+ Comment: {
+ toxicity: (comment) => get(comment, 'metadata.perspective.SEVERE_TOXICITY.summaryScore'),
+ }
+};
diff --git a/plugins/talk-plugin-toxic-comments/server/typeDefs.graphql b/plugins/talk-plugin-toxic-comments/server/typeDefs.graphql
index b4dfc8345..c9e28fb9c 100644
--- a/plugins/talk-plugin-toxic-comments/server/typeDefs.graphql
+++ b/plugins/talk-plugin-toxic-comments/server/typeDefs.graphql
@@ -5,3 +5,6 @@ input CreateCommentInput {
checkToxicity: Boolean
}
+type Comment {
+ toxicity: Float
+}