From 7a4aae93b420044feb4c7f708fc132595aa9c2a0 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 19 Sep 2017 23:14:34 +0700
Subject: [PATCH] Introduce adminCommentLabels and implement Toxic comment
 label

---
 .../src/components/CommentLabels.css          | 14 +++++++++++
 .../src/components/CommentLabels.js           | 20 +++++++++-------
 .../src/containers/CommentLabels.js           |  6 +++++
 .../src => coral-ui}/components/FlagLabel.css |  0
 .../src => coral-ui}/components/FlagLabel.js  |  0
 .../src => coral-ui}/components/Label.css     |  0
 .../src => coral-ui}/components/Label.js      |  5 ++--
 client/coral-ui/index.js                      |  2 ++
 .../client/components/ToxicLabel.js           |  8 +++++++
 .../client/containers/ToxicLabel.js           | 24 +++++++++++++++++++
 .../client/index.js                           |  2 ++
 11 files changed, 70 insertions(+), 11 deletions(-)
 rename client/{coral-admin/src => coral-ui}/components/FlagLabel.css (100%)
 rename client/{coral-admin/src => coral-ui}/components/FlagLabel.js (100%)
 rename client/{coral-admin/src => coral-ui}/components/Label.css (100%)
 rename client/{coral-admin/src => coral-ui}/components/Label.js (71%)
 create mode 100644 plugins/talk-plugin-toxic-comments/client/components/ToxicLabel.js
 create mode 100644 plugins/talk-plugin-toxic-comments/client/containers/ToxicLabel.js

diff --git a/client/coral-admin/src/components/CommentLabels.css b/client/coral-admin/src/components/CommentLabels.css
index 718cd7dfd..b7a5699fe 100644
--- a/client/coral-admin/src/components/CommentLabels.css
+++ b/client/coral-admin/src/components/CommentLabels.css
@@ -1,4 +1,18 @@
 .root {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.coreLabels {
+  > *:not(:last-child) {
+    margin-right: 3px;
+  }
+}
+
+.slot {
+  &:not(:empty) {
+    padding-left: 3px;
+  }
   > *:not(:last-child) {
     margin-right: 3px;
   }
diff --git a/client/coral-admin/src/components/CommentLabels.js b/client/coral-admin/src/components/CommentLabels.js
index 333f905ef..7af7e9a7e 100644
--- a/client/coral-admin/src/components/CommentLabels.js
+++ b/client/coral-admin/src/components/CommentLabels.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Label from './Label';
-import FlagLabel from './FlagLabel';
+import Label from 'coral-ui/components/Label';
+import Slot from 'coral-framework/components/Slot';
+import FlagLabel from 'coral-ui/components/FlagLabel';
 import cn from 'classnames';
 import styles from './CommentLabels.css';
 
@@ -17,14 +18,17 @@ function hasHistoryFlag(actions) {
   return actions.some((action) => action.__typename === 'FlagAction' && action.reason === 'TRUST');
 }
 
-const CommentLabels = ({comment: {className, status, actions, hasParent}}) => {
+const CommentLabels = ({comment, comment: {className, status, actions, hasParent}}) => {
   return (
     <div className={cn(className, styles.root)}>
-      {hasParent && <Label iconName="reply" className={styles.replyLabel}>reply</Label>}
-      {status === 'PREMOD' && <Label iconName="query_builder" className={styles.premodLabel}>Pre-Mod</Label>}
-      {isUserFlagged(actions) && <FlagLabel iconName="person">User</FlagLabel>}
-      {hasSuspectedWords(actions) && <FlagLabel iconName="sms_failed">Suspect</FlagLabel>}
-      {hasHistoryFlag(actions) && <FlagLabel iconName="sentiment_very_dissatisfied">History</FlagLabel>}
+      <div className={styles.coreLabels}>
+        {hasParent && <Label iconName="reply" className={styles.replyLabel}>reply</Label>}
+        {status === 'PREMOD' && <Label iconName="query_builder" className={styles.premodLabel}>Pre-Mod</Label>}
+        {isUserFlagged(actions) && <FlagLabel iconName="person">User</FlagLabel>}
+        {hasSuspectedWords(actions) && <FlagLabel iconName="sms_failed">Suspect</FlagLabel>}
+        {hasHistoryFlag(actions) && <FlagLabel iconName="sentiment_very_dissatisfied">History</FlagLabel>}
+      </div>
+      <Slot className={styles.slot} fill="adminCommentLabels" queryData={{comment}} />
     </div>
   );
 };
diff --git a/client/coral-admin/src/containers/CommentLabels.js b/client/coral-admin/src/containers/CommentLabels.js
index ab9639bcd..af6a0d963 100644
--- a/client/coral-admin/src/containers/CommentLabels.js
+++ b/client/coral-admin/src/containers/CommentLabels.js
@@ -1,6 +1,11 @@
 import {gql} from 'react-apollo';
 import CommentLabels from '../components/CommentLabels';
 import withFragments from 'coral-framework/hocs/withFragments';
+import {getSlotFragmentSpreads} from 'coral-framework/utils';
+
+const slots = [
+  'adminCommentLabels',
+];
 
 export default withFragments({
   comment: gql`
@@ -16,6 +21,7 @@ export default withFragments({
           id
         }
       }
+      ${getSlotFragmentSpreads(slots, 'comment')}
     }
   `
 })(CommentLabels);
diff --git a/client/coral-admin/src/components/FlagLabel.css b/client/coral-ui/components/FlagLabel.css
similarity index 100%
rename from client/coral-admin/src/components/FlagLabel.css
rename to client/coral-ui/components/FlagLabel.css
diff --git a/client/coral-admin/src/components/FlagLabel.js b/client/coral-ui/components/FlagLabel.js
similarity index 100%
rename from client/coral-admin/src/components/FlagLabel.js
rename to client/coral-ui/components/FlagLabel.js
diff --git a/client/coral-admin/src/components/Label.css b/client/coral-ui/components/Label.css
similarity index 100%
rename from client/coral-admin/src/components/Label.css
rename to client/coral-ui/components/Label.css
diff --git a/client/coral-admin/src/components/Label.js b/client/coral-ui/components/Label.js
similarity index 71%
rename from client/coral-admin/src/components/Label.js
rename to client/coral-ui/components/Label.js
index 9d1b736de..a73b6183d 100644
--- a/client/coral-admin/src/components/Label.js
+++ b/client/coral-ui/components/Label.js
@@ -4,9 +4,9 @@ import styles from './Label.css';
 import {Icon} from 'coral-ui';
 import cn from 'classnames';
 
-const Label = ({iconName, children, className, isFlag}) => {
+const Label = ({iconName, children, className}) => {
   return (
-    <span className={cn(className, styles.root, {[styles.isFlag]: isFlag})}>
+    <span className={cn(className, styles.root)}>
       <Icon name={iconName} className={styles.icon} /> {children}
     </span>
   );
@@ -14,7 +14,6 @@ const Label = ({iconName, children, className, isFlag}) => {
 
 Label.propTypes = {
   className: PropTypes.string,
-  isFlag: PropTypes.bool,
   children: PropTypes.node.isRequired,
   iconName: PropTypes.string,
 };
diff --git a/client/coral-ui/index.js b/client/coral-ui/index.js
index 8a538d120..93fe5af64 100644
--- a/client/coral-ui/index.js
+++ b/client/coral-ui/index.js
@@ -26,3 +26,5 @@ export {default as Option} from './components/Option';
 export {default as SnackBar} from './components/SnackBar';
 export {default as TextArea} from './components/TextArea';
 export {default as Drawer} from './components/Drawer';
+export {default as Label} from './components/Label';
+export {default as FlagLabel} from './components/FlagLabel';
diff --git a/plugins/talk-plugin-toxic-comments/client/components/ToxicLabel.js b/plugins/talk-plugin-toxic-comments/client/components/ToxicLabel.js
new file mode 100644
index 000000000..3c17703dd
--- /dev/null
+++ b/plugins/talk-plugin-toxic-comments/client/components/ToxicLabel.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import {FlagLabel} from 'plugin-api/beta/client/components/ui';
+
+const ToxicLabel = () => (
+  <FlagLabel iconName="add_box">Toxic</FlagLabel>
+);
+
+export default ToxicLabel;
diff --git a/plugins/talk-plugin-toxic-comments/client/containers/ToxicLabel.js b/plugins/talk-plugin-toxic-comments/client/containers/ToxicLabel.js
new file mode 100644
index 000000000..0d2e9e14b
--- /dev/null
+++ b/plugins/talk-plugin-toxic-comments/client/containers/ToxicLabel.js
@@ -0,0 +1,24 @@
+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');
+}
+
+const enhance = compose(
+  withFragments({
+    comment: gql`
+      fragment TalkToxicComments_Comment on Comment {
+        actions {
+          __typename
+          ... on FlagAction {
+            reason
+          }
+        }
+      }`,
+  }),
+  excludeIf(({comment: {actions}}) => !isToxic(actions)),
+);
+
+export default enhance(ToxicLabel);
diff --git a/plugins/talk-plugin-toxic-comments/client/index.js b/plugins/talk-plugin-toxic-comments/client/index.js
index bb0417606..8a16b8dea 100644
--- a/plugins/talk-plugin-toxic-comments/client/index.js
+++ b/plugins/talk-plugin-toxic-comments/client/index.js
@@ -1,9 +1,11 @@
 import translations from './translations.yml';
 import CheckToxicityHook from './containers/CheckToxicityHook';
+import ToxicLabel from './containers/ToxicLabel';
 
 export default {
   translations,
   slots: {
     commentInputDetailArea: [CheckToxicityHook],
+    adminCommentLabels: [ToxicLabel],
   },
 };