adminCommentMoreFlagDetails slot and more

plugins/talk-plugin-flag-details/client/components/FlagDetails.css

@@ -5,9 +5,11 @@
   display: inline-block;
   padding: 0;
   font-size: 12px;
+  margin: 0;
 }
 
 .detail  {
+  margin: 0;
   padding: 0;
   list-style: none;
   font-size: 12px;

plugins/talk-plugin-flag-details/client/components/FlagDetails.js

@@ -3,11 +3,12 @@ import PropTypes from 'prop-types';
 import styles from './FlagDetails.css';
 import {t} from 'plugin-api/beta/client/services';
 import CommentDetail from 'coral-admin/src/components/CommentDetail';
+import {Slot, IfSlotIsNotEmpty} from 'plugin-api/beta/client/components';
 
 class FlagDetails extends Component {
 
   render() {
-    const {comment: {actions}, viewUserDetail, more} = this.props;
+    const {comment: {actions}, viewUserDetail, more, data, root, comment} = this.props;
 
     const flagActions = actions && actions.filter((a) => a.__typename === 'FlagAction');
     const summaries = flagActions.reduce((sum, action) => {
@@ -24,6 +25,11 @@ class FlagDetails extends Component {
 
     const userFlagReasons = Object.keys(summaries).filter((reason) => summaries[reason].userFlagged);
 
+    const queryData = {
+      root,
+      comment,
+    };
+
     return (
       <CommentDetail
         icon={'flag'}
@@ -60,6 +66,18 @@ class FlagDetails extends Component {
             }
           </ul>
         )}
+        {more && (
+          <IfSlotIsNotEmpty
+            slot="adminCommentMoreFlagDetails"
+            queryData={queryData}
+          >
+            <Slot
+              fill="adminCommentMoreFlagDetails"
+              data={data}
+              queryData={queryData}
+            />
+          </IfSlotIsNotEmpty>
+        )}
       </CommentDetail>
     );
   }

plugins/talk-plugin-flag-details/client/containers/FlagDetails.js

@@ -4,6 +4,11 @@ import {bindActionCreators} from 'redux';
 import {withFragments, excludeIf} from 'plugin-api/beta/client/hocs';
 import {viewUserDetail} from 'coral-admin/src/actions/userDetail';
 import {connect} from 'react-redux';
+import {getSlotFragmentSpreads} from 'plugin-api/beta/client/utils';
+
+const slots = [
+  'adminCommentMoreFlagDetails',
+];
 
 const mapDispatchToProps = (dispatch) => ({
   ...bindActionCreators({
@@ -14,6 +19,12 @@ const mapDispatchToProps = (dispatch) => ({
 const enhance = compose(
   connect(null, mapDispatchToProps),
   withFragments({
+    root: gql`
+      fragment CoralAdmin_FlagDetails_root on RootQuery {
+        __typename
+        ${getSlotFragmentSpreads(slots, 'root')}
+      }
+    `,
     comment: gql`
       fragment CoralAdmin_FlagDetails_comment on Comment {
         actions {
@@ -28,6 +39,7 @@ const enhance = compose(
             }
           }
         }
+        ${getSlotFragmentSpreads(slots, 'comment')}
       }
     `
   }),

plugins/talk-plugin-toxic-comments/client/containers/ToxicCommentDetail.js

@@ -0,0 +1,10 @@
+import {compose} from 'react-apollo';
+import {excludeIf} from 'plugin-api/beta/client/hocs';
+import ToxicDetail from './ToxicDetail';
+import {isToxic} from '../utils';
+
+const enhance = compose(
+  excludeIf(({comment: {toxicity, actions}}) => toxicity === null || isToxic(actions)),
+);
+
+export default enhance(ToxicDetail);

plugins/talk-plugin-toxic-comments/client/containers/ToxicCommentFlagDetail.js

@@ -0,0 +1,10 @@
+import {compose} from 'react-apollo';
+import {excludeIf} from 'plugin-api/beta/client/hocs';
+import ToxicDetail from './ToxicDetail';
+import {isToxic} from '../utils';
+
+const enhance = compose(
+  excludeIf(({comment: {toxicity, actions}}) => toxicity === null || !isToxic(actions)),
+);
+
+export default enhance(ToxicDetail);

plugins/talk-plugin-toxic-comments/client/containers/ToxicDetail.js

@@ -1,5 +1,5 @@
 import {compose, gql} from 'react-apollo';
-import {withFragments, excludeIf} from 'plugin-api/beta/client/hocs';
+import {withFragments} from 'plugin-api/beta/client/hocs';
 import ToxicDetail from '../components/ToxicDetail';
 
 const enhance = compose(
@@ -15,7 +15,6 @@ const enhance = compose(
         }
       }`,
   }),
-  excludeIf(({comment: {toxicity}, more}) => !more || toxicity === null),
 );
 
 export default enhance(ToxicDetail);

plugins/talk-plugin-toxic-comments/client/index.js

@@ -1,13 +1,15 @@
 import translations from './translations.yml';
 import CheckToxicityHook from './containers/CheckToxicityHook';
 import ToxicLabel from './containers/ToxicLabel';
-import ToxicDetail from './containers/ToxicDetail';
+import ToxicCommentDetail from './containers/ToxicCommentDetail';
+import ToxicCommentFlagDetail from './containers/ToxicCommentFlagDetail';
 
 export default {
   translations,
   slots: {
     commentInputDetailArea: [CheckToxicityHook],
     adminCommentLabels: [ToxicLabel],
-    adminCommentDetailArea: [ToxicDetail],
+    adminCommentMoreDetails: [ToxicCommentDetail],
+    adminCommentMoreFlagDetails: [ToxicCommentFlagDetail],
   },
 };