[CORL-233] Create a user drawer with comment streams (#2395)

* Create preliminary user history drawer with user fragment CORL-233 * Set font size for the user details to match spec at 16 px CORL-233 * Update username font style/size, add horizontal rule for user history drawer CORL-233 * Set user detail min width to align the copy buttons in user history drawer CORL-233 * Set min width of the user history drawer to match spec CORL-233 * Remove min width for detail area and card to allow responsive sizing Allows the copy buttons to sit just to the right of the user details text. CORL-233 * Update snapshots to handle clickable username in moderation comment cards CORL-233 * Create initial pagination of all comments in user history drawer Shows all comments with a rubbish "load more" button as we haven't decided if we want to do a load more button or infinite scrolling solution. Flex layout helps it create a scroll bar when needed to traverse through the comment stream. CORL-233 * Create preliminary user history drawer with user fragment CORL-233 * Set font size for the user details to match spec at 16 px CORL-233 * Update username font style/size, add horizontal rule for user history drawer CORL-233 * Set user detail min width to align the copy buttons in user history drawer CORL-233 * Set min width of the user history drawer to match spec CORL-233 * Remove min width for detail area and card to allow responsive sizing Allows the copy buttons to sit just to the right of the user details text. CORL-233 * Update snapshots to handle clickable username in moderation comment cards CORL-233 * Let the user history drawer fill full height of page CORL-233 * Add a close button to the user history drawer CORL-233 * Preliminarily get all and rejected comments showing in the user drawer CORL-233 * Create preliminary user history drawer with user fragment CORL-233 * Set font size for the user details to match spec at 16 px CORL-233 * Update username font style/size, add horizontal rule for user history drawer CORL-233 * Set user detail min width to align the copy buttons in user history drawer CORL-233 * Set min width of the user history drawer to match spec CORL-233 * Remove min width for detail area and card to allow responsive sizing Allows the copy buttons to sit just to the right of the user details text. CORL-233 * Update snapshots to handle clickable username in moderation comment cards CORL-233 * Let the user history drawer fill full height of page CORL-233 * Add a close button to the user history drawer CORL-233 * Set the user history drawer to fill full height of window CORL-233 * Convert ModerateCardContainer to a FunctionComponent CORL-233 * Show spinner while all comments are loading in user history drawer CORL-233 * Style tabs within the user history drawer to be secondary CORL-233 * Center load more button in the comments for the user history drawer CORL-233 * Fix scroll bars on nested flexboxes in the user history drawer CORL-233 * Tweak styling for the user history drawer comments section Add margins where necessary. Style the Load More button to match the comment feed elsewhere. CORL-233 * Fix background of copy buttons to match the user history drawer CORL-233 * Preliminarily get rejected comments showing in the user history tabs Still need to consolidate any duplication between the all and rejected comments containers/queries, but this works correctly as is. CORL-233 * Show hover and active background color on moderate card usernames CORL-233 * Hide load more buttons on comment streams when no comments available CORL-233 * Handle when no comments are available in user history drawer streams CORL-233 * Actually show all comments in the user history all comments tab Previously was filtering out rejected and other pre-mod status-ed comments. CORL-233 * Style the user history drawer cards to match the spec CORL-233 * Add localizations around user history drawer tabs CORL-233 * Allow a mini mode for moderate cards that are shown in the user drawer CORL-233 * Style user drawer comment tabs to match the spec CORL-233 * Update snapshots to account for mini moderate cards Updates the fact that a separator on regular sized cards now has an additional class name to turn on the divider's visible border. CORL-233 * Add user drawer to the queue instead of childed to the moderate card Prevents the user drawer from prematurely closing when we approve all items in the moderate queue. CORL-233 * Update snapshots to account for user drawer on queues CORL-233 * Set mini and username defaults more cleanly on ModerateCardContainer CORL-233 * Rename usernameClicked to onUsernameClicked CORL-233 * Use callback on loadMore calls within user drawer queries CORL-233 * Localize the no comment text for the user drawer comment streams CORL-233 * Localize the user not found callout in the user drawer comment streams CORL-233 * Remove superfluous curly braces CORL-233 * Extract user history drawer internals into a distinct query component CORL-233 * Move comments conditional below useCallback initializations CORL-233 * feat: fixed consistency issues * Use a concrete tab type on user drawer comment stream tabs CORL-233 * Use <hr/> instead of <HorizontalRule> CORL-233 * Clarify logic for showing horizontal rule after comments in user drawer CORL-233 * Remover bottom border on user drawer tab bar CORL-233
2026-08-19 12:40:16 +08:00 · 2019-07-10 10:59:28 -06:00
parent 9e55ea66fa
commit 0b20542f05
31 changed files with 1652 additions and 242 deletions
@@ -11,17 +11,22 @@ import {
  GQLUSER_ROLE,
  QueryToCommentsArgs,
  StoryToCommentsArgs,
+  UserToAllCommentsArgs,
+  UserToCommentsArgs,
+  UserToRejectedCommentsArgs,
 } from "coral-server/graph/tenant/schema/__generated__/types";
 import { retrieveManyUserActionPresence } from "coral-server/models/action/comment";
 import {
  Comment,
  CommentConnectionInput,
+  retrieveAllCommentsUserConnection,
  retrieveCommentConnection,
  retrieveCommentParentsConnection,
  retrieveCommentRepliesConnection,
  retrieveCommentStoryConnection,
  retrieveCommentUserConnection,
  retrieveManyComments,
+  retrieveRejectedCommentUserConnection,
  retrieveStoryCommentTagCounts,
 } from "coral-server/models/comment";
 import { hasVisibleStatus } from "coral-server/models/comment/helpers";
@@ -153,13 +158,33 @@ export default (ctx: Context) => ({
      first = 10,
      orderBy = GQLCOMMENT_SORT.CREATED_AT_DESC,
      after,
-    }: StoryToCommentsArgs
+    }: UserToCommentsArgs
  ) =>
    retrieveCommentUserConnection(ctx.mongo, ctx.tenant.id, userID, {
      first,
      orderBy,
      after,
    }).then(primeCommentsFromConnection(ctx)),
+  forUserAll: (
+    userID: string,
+    // Apply the graph schema defaults at the loader.
+    { first = 10, after }: UserToAllCommentsArgs
+  ) =>
+    retrieveAllCommentsUserConnection(ctx.mongo, ctx.tenant.id, userID, {
+      first,
+      orderBy: GQLCOMMENT_SORT.CREATED_AT_DESC,
+      after,
+    }).then(primeCommentsFromConnection(ctx)),
+  forUserRejected: (
+    userID: string,
+    // Apply the graph schema defaults at the loader.
+    { first = 10, after }: UserToRejectedCommentsArgs
+  ) =>
+    retrieveRejectedCommentUserConnection(ctx.mongo, ctx.tenant.id, userID, {
+      first,
+      orderBy: GQLCOMMENT_SORT.CREATED_AT_DESC,
+      after,
+    }).then(primeCommentsFromConnection(ctx)),
  taggedForStory: (
    storyID: string,
    tag: GQLTAG,
@@ -34,6 +34,10 @@ const maybeLoadOnlyIgnoredUserID = (

 export const User: GQLUserTypeResolver<user.User> = {
  comments: ({ id }, input, ctx) => ctx.loaders.Comments.forUser(id, input),
+  allComments: ({ id }, input, ctx) =>
+    ctx.loaders.Comments.forUserAll(id, input),
+  rejectedComments: ({ id }, input, ctx) =>
+    ctx.loaders.Comments.forUserRejected(id, input),
  commentModerationActionHistory: ({ id }, input, ctx) =>
    ctx.loaders.CommentModerationActions.forModerator(input, id),
  status: ({ id, status }): UserStatusInput => ({
@@ -1521,6 +1521,18 @@ type User {
      permit: [SUSPENDED, BANNED]
    )

+  """
+  allComments are comments regardless of visibility status.
+  """
+  allComments(first: Int = 10, after: Cursor): CommentsConnection!
+    @auth(roles: [ADMIN, MODERATOR])
+
+  """
+  rejectedComments are comments that have been rejected.
+  """
+  rejectedComments(first: Int = 10, after: Cursor): CommentsConnection!
+    @auth(roles: [ADMIN, MODERATOR])
+
  """
  commentModerationActionHistory returns a CommentModerationActionConnection
  that this User has created.