Introduce adminCommentLabels and implement Toxic comment label

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;
   }

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>
   );
 };

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);

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,
 };

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';

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;

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);

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],
   },
 };