Support extendable queries

client/coral-admin/src/routes/Moderation/components/Comment.js

@@ -42,8 +42,8 @@ const Comment = ({
   }
 
   // since words are checked against word boundaries on the backend,
-  // this should be the behavior on the front end as well.
-  // currently the highlighter plugin does not support this out of the box.
+  // should be the behavior on the front end as well.
+  // currently the highlighter plugin does not support out of the box.
   const searchWords = [...suspectWords, ...bannedWords]
     .filter((w) => {
       return new RegExp(`(^|\\s)${w}(\\s|$)`).test(comment.body);
@@ -88,7 +88,12 @@ const Comment = ({
                 {lang.t('comment.banned_user')}
               </span>
             : null}
-          <Slot fill="adminCommentInfoBar" comment={comment} />
+            <Slot
+              data={props.data}
+              root={props.root}
+              fill="adminCommentInfoBar"
+              comment={comment}
+            />
         </div>
         <div className={styles.moderateArticle}>
           Story: {comment.asset.title}
@@ -110,7 +115,12 @@ const Comment = ({
               <Icon name="open_in_new" /> {lang.t('comment.view_context')}
             </a>
           </p>
-          <Slot fill="adminCommentContent" comment={comment} />
+          <Slot
+            data={props.data}
+            root={props.root}
+            fill="adminCommentContent"
+            comment={comment}
+          />
           <div className={styles.sideActions}>
             {links
               ? <span className={styles.hasLinks}>
@@ -141,12 +151,22 @@ const Comment = ({
                 );
               })}
             </div>
-            <Slot fill="adminSideActions" comment={comment} />
+            <Slot
+              data={props.data}
+              root={props.root}
+              fill="adminSideActions"
+              comment={comment}
+            />
           </div>
         </div>
       </div>
       <div>
-        <Slot fill="adminCommentDetailArea" comment={comment} />
+        <Slot
+          data={props.data}
+          root={props.root}
+          fill="adminCommentDetailArea"
+          comment={comment}
+        />
       </div>
       {flagActions && flagActions.length
         ? <FlagBox

client/coral-admin/src/routes/Moderation/components/Moderation.js

@@ -172,6 +172,8 @@ export default class Moderation extends Component {
           sort={this.props.moderation.sortOrder}
         />
         <ModerationQueue
+          data={this.props.data}
+          root={this.props.root}
           currentAsset={asset}
           comments={comments}
           activeTab={activeTab}

client/coral-admin/src/routes/Moderation/components/ModerationQueue.js

@@ -1,6 +1,6 @@
 import React, {PropTypes} from 'react';
 
-import Comment from './Comment';
+import Comment from '../containers/Comment';
 import styles from './styles.css';
 import EmptyCard from '../../../components/EmptyCard';
 import {actionsMap} from '../helpers/moderationQueueActionsMap';
@@ -55,6 +55,8 @@ class ModerationQueue extends React.Component {
             ? comments.map((comment, i) => {
               const status = comment.action_summaries ? 'FLAGGED' : comment.status;
               return <Comment
+                data={this.props.data}
+                root={this.props.root}
                 key={i}
                 index={i}
                 comment={comment}

client/coral-admin/src/routes/Moderation/components/UserDetail.js

@@ -40,7 +40,12 @@ export default class UserDetail extends React.Component {
         <h3>{user.username}</h3>
         <Button className={styles.copyButton} onClick={this.copyPermalink}>Copy</Button>
         {profile && <input className={styles.profileEmail} readOnly type="text" ref={(ref) => this.profile = ref} value={profile} />}
-        <Slot fill="userProfile" user={user} />
+        <Slot
+          fill="userProfile"
+          data={this.props.data}
+          root={this.props.root}
+          user={user}
+        />
         <p className={styles.memberSince}><strong>Member since</strong> {new Date(user.created_at).toLocaleString()}</p>
         <hr/>
         <p>

client/coral-admin/src/routes/Moderation/containers/Comment.js

@@ -0,0 +1,56 @@
+import {gql} from 'react-apollo';
+import Comment from '../components/Comment';
+import {getSlotsFragments} from 'coral-framework/helpers/plugins';
+import withFragments from 'coral-framework/hocs/withFragments';
+
+const pluginFragments = getSlotsFragments([
+  'adminCommentInfoBar',
+  'adminCommentContent',
+  'adminSideActions',
+  'adminCommentDetailArea',
+]);
+
+export default withFragments({
+  root: gql`
+    fragment Comment_root on RootQuery {
+      __typename
+      ${pluginFragments.spreads('root')}
+    }
+    ${pluginFragments.definitions('root')}
+    `,
+  comment: gql`
+    fragment Comment_comment on Comment {
+      id
+      body
+      created_at
+      status
+      user {
+        id
+        name: username
+        status
+      }
+      asset {
+        id
+        title
+        url
+      }
+      action_summaries {
+        count
+        ... on FlagActionSummary {
+          reason
+        }
+      }
+      actions {
+        ... on FlagAction {
+          reason
+          message
+          user {
+            username
+          }
+        }
+      }
+      ${pluginFragments.spreads('comment')}
+    }
+    ${pluginFragments.definitions('comment')}
+  `
+})(Comment);

client/coral-admin/src/routes/Moderation/containers/Moderation.js

@@ -4,6 +4,7 @@ import {bindActionCreators} from 'redux';
 import {compose, gql} from 'react-apollo';
 import isEqual from 'lodash/isEqual';
 import withQuery from 'coral-framework/hocs/withQuery';
+import {getDefinitionName} from 'coral-framework/utils';
 
 import {banUser, setCommentStatus, suspendUser} from '../../../graphql/mutations';
 
@@ -24,6 +25,7 @@ import {
 
 import {Spinner} from 'coral-ui';
 import Moderation from '../components/Moderation';
+import Comment from './Comment';
 
 class ModerationContainer extends Component {
   componentWillMount() {
@@ -92,44 +94,10 @@ class ModerationContainer extends Component {
   }
 }
 
-const commentView = gql`
-  fragment commentView on Comment {
-    id
-    body
-    created_at
-    status
-    user {
-      id
-      name: username
-      status
-    }
-    asset {
-      id
-      title
-      url
-    }
-    action_summaries {
-      count
-      ... on FlagActionSummary {
-        reason
-      }
-    }
-    actions {
-      ... on FlagAction {
-        reason
-        message
-        user {
-          username
-        }
-      }
-    }
-  }
-`;
-
 const LOAD_MORE_QUERY = gql`
   query LoadMoreModQueue($limit: Int = 10, $cursor: Date, $sort: SORT_ORDER, $asset_id: ID, $statuses:[COMMENT_STATUS!], $action_type: ACTION_TYPE) {
     comments(query: {limit: $limit, cursor: $cursor, asset_id: $asset_id, statuses: $statuses, sort: $sort, action_type: $action_type}) {
-      ...commentView
+      ...${getDefinitionName(Comment.fragments.comment)}
       action_summaries {
         count
         ... on FlagActionSummary {
@@ -138,7 +106,7 @@ const LOAD_MORE_QUERY = gql`
       }
     }
   }
-  ${commentView}
+  ${Comment.fragments.comment}
 `;
 
 const withModQueueQuery = withQuery(gql`
@@ -148,21 +116,21 @@ const withModQueueQuery = withQuery(gql`
       asset_id: $asset_id,
       sort: $sort
     }) {
-      ...commentView
+      ...${getDefinitionName(Comment.fragments.comment)}
     }
     accepted: comments(query: {
       statuses: [ACCEPTED],
       asset_id: $asset_id,
       sort: $sort
     }) {
-      ...commentView
+      ...${getDefinitionName(Comment.fragments.comment)}
     }
     premod: comments(query: {
         statuses: [PREMOD],
         asset_id: $asset_id,
         sort: $sort
     }) {
-        ...commentView
+        ...${getDefinitionName(Comment.fragments.comment)}
     }
     flagged: comments(query: {
         action_type: FLAG,
@@ -170,14 +138,14 @@ const withModQueueQuery = withQuery(gql`
         statuses: [NONE, PREMOD],
         sort: $sort
     }) {
-        ...commentView
+        ...${getDefinitionName(Comment.fragments.comment)}
     }
     rejected: comments(query: {
         statuses: [REJECTED],
         asset_id: $asset_id,
         sort: $sort
     }) {
-        ...commentView
+        ...${getDefinitionName(Comment.fragments.comment)}
     }
     assets: assets {
       id
@@ -208,7 +176,7 @@ const withModQueueQuery = withQuery(gql`
       organizationName
     }
   }
-  ${commentView}
+  ${Comment.fragments.comment}
 `, {
   options: ({params: {id = null}, moderation: {sortOrder}}) => {
     return {

client/coral-admin/src/routes/Moderation/containers/UserDetail.js

@@ -2,6 +2,11 @@ import React, {PropTypes} from 'react';
 import {compose, gql} from 'react-apollo';
 import UserDetail from '../components/UserDetail';
 import withQuery from 'coral-framework/hocs/withQuery';
+import {getSlotsFragments} from 'coral-framework/helpers/plugins';
+
+const pluginFragments = getSlotsFragments([
+  'userProfile',
+]);
 
 class UserDetailContainer extends React.Component {
   static propTypes = {
@@ -28,10 +33,14 @@ export const withUserDetailQuery = withQuery(gql`
         id
         provider
       }
+      ${pluginFragments.spreads('user')}
     }
     totalComments: commentCount(query: {author_id: $author_id})
     rejectedComments: commentCount(query: {author_id: $author_id, statuses: [REJECTED]})
+    ${pluginFragments.spreads('root')}
   }
+  ${pluginFragments.definitions('user')}
+  ${pluginFragments.definitions('root')}
 `, {
   options: ({id}) => {
     return {