Introduce adminCommentLabels and implement Toxic comment label

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