[CORL-2984]: Add ability to select rejection reason for Reject all comments when DSA enabled

client/src/core/client/admin/components/BanModal.css

@@ -39,3 +39,12 @@ $ban-modal-text: var(--palette-text-500);
 .customizeMessageArrowsIcon {
   padding-left: var(--spacing-1);
 }
+
+.rejectionReasonLink {
+  width: fit-content;
+  color: var(--palette-primary-600) !important;
+}
+
+.rejectExistingReason {
+  background-color: var(--palette-grey-100);
+}

client/src/core/client/admin/components/BanModal.tsx

@@ -8,13 +8,18 @@ import React, {
   useState,
 } from "react";
 import { Form } from "react-final-form";
+import { graphql } from "react-relay";
 
 import NotAvailable from "coral-admin/components/NotAvailable";
 import { PROTECTED_EMAIL_DOMAINS } from "coral-common/common/lib/constants";
 import { extractDomain } from "coral-common/common/lib/email";
+import {
+  isOrgModerator,
+  isSiteModerator,
+} from "coral-common/common/lib/permissions/types";
 import { useGetMessage } from "coral-framework/lib/i18n";
-import { useMutation } from "coral-framework/lib/relay";
-import { GQLUSER_ROLE } from "coral-framework/schema";
+import { useLocal, useMutation } from "coral-framework/lib/relay";
+import { GQLREJECTION_REASON_CODE, GQLUSER_ROLE } from "coral-framework/schema";
 import {
   ArrowsDownIcon,
   ArrowsUpIcon,
@@ -32,6 +37,7 @@ import {
 } from "coral-ui/components/v2";
 import { CallOut } from "coral-ui/components/v3";
 
+import { BanModalLocal } from "coral-admin/__generated__/BanModalLocal.graphql";
 import { UserStatusChangeContainer_settings } from "coral-admin/__generated__/UserStatusChangeContainer_settings.graphql";
 import { UserStatusChangeContainer_user } from "coral-admin/__generated__/UserStatusChangeContainer_user.graphql";
 import { UserStatusChangeContainer_viewer } from "coral-admin/__generated__/UserStatusChangeContainer_viewer.graphql";
@@ -40,16 +46,14 @@ import BanDomainMutation from "./BanDomainMutation";
 import BanUserMutation from "./BanUserMutation";
 import ModalHeader from "./ModalHeader";
 import ModalHeaderUsername from "./ModalHeaderUsername";
+import DetailedExplanation from "./ModerationReason/DetailedExplanation";
+import Reasons from "./ModerationReason/Reasons";
 import RemoveUserBanMutation from "./RemoveUserBanMutation";
 import UpdateUserBanMutation from "./UpdateUserBanMutation";
 import ChangeStatusModal from "./UserStatus/ChangeStatusModal";
 import { getTextForUpdateType } from "./UserStatus/helpers";
 import UserStatusSitesList from "./UserStatus/UserStatusSitesList";
 
-import {
-  isOrgModerator,
-  isSiteModerator,
-} from "coral-common/common/lib/permissions/types";
 import styles from "./BanModal.css";
 
 export enum UpdateType {
@@ -140,6 +144,12 @@ const BanModal: FunctionComponent<Props> = ({
   const updateUserBan = useMutation(UpdateUserBanMutation);
   const removeUserBan = useMutation(RemoveUserBanMutation);
 
+  const [{ dsaFeaturesEnabled }] = useLocal<BanModalLocal>(graphql`
+    fragment BanModalLocal on Local {
+      dsaFeaturesEnabled
+    }
+  `);
+
   const getMessage = useGetMessage();
   const getDefaultMessage = useMemo((): string => {
     return getMessage(
@@ -203,6 +213,17 @@ const BanModal: FunctionComponent<Props> = ({
     ({ domain }) => domain === emailDomain
   );
 
+  const [view, setView] = useState<"REASON" | "EXPLANATION">("REASON");
+  const [reasonCode, setReasonCode] = useState<GQLREJECTION_REASON_CODE | null>(
+    null
+  );
+  const [detailedExplanation, setDetailedExplanation] = useState<string | null>(
+    null
+  );
+  const [otherCustomReason, setOtherCustomReason] = useState<string | null>(
+    null
+  );
+
   const canBanDomain =
     (viewer.role === GQLUSER_ROLE.ADMIN ||
       (viewer.role === GQLUSER_ROLE.MODERATOR && !isSiteModerator(viewer))) &&
@@ -220,13 +241,22 @@ const BanModal: FunctionComponent<Props> = ({
   }, [viewerIsSingleSiteMod, viewer.moderationScopes]);
 
   const onFormSubmit = useCallback(async () => {
+    const rejectionReason =
+      rejectExistingComments && dsaFeaturesEnabled
+        ? {
+            code: reasonCode!,
+            detailedExplanation,
+            customReason: otherCustomReason,
+          }
+        : undefined;
     switch (updateType) {
       case UpdateType.ALL_SITES:
         try {
           await banUser({
             userID, // Should be defined because the modal shouldn't open if author is null
             message: customizeMessage ? emailMessage : getDefaultMessage,
             rejectExistingComments,
+            rejectionReason,
             siteIDs: viewerIsScoped
               ? viewer?.moderationScopes?.sites?.map(({ id }) => id)
               : [],
@@ -243,6 +273,7 @@ const BanModal: FunctionComponent<Props> = ({
             banSiteIDs,
             unbanSiteIDs,
             rejectExistingComments,
+            rejectionReason,
           });
         } catch (err) {
           return { [FORM_ERROR]: err.message };
@@ -281,6 +312,10 @@ const BanModal: FunctionComponent<Props> = ({
     removeUserBan,
     createDomainBan,
     emailDomain,
+    reasonCode,
+    detailedExplanation,
+    otherCustomReason,
+    dsaFeaturesEnabled,
   ]);
 
   const {
@@ -296,7 +331,15 @@ const BanModal: FunctionComponent<Props> = ({
   const requiresSiteBanUpdates =
     updateType === UpdateType.SPECIFIC_SITES ||
     (updateType === UpdateType.ALL_SITES && viewerIsSingleSiteMod);
-  const disableForm = requiresSiteBanUpdates && !pendingSiteBanUpdates;
+  const requiresRejectionReasonForDSA =
+    rejectExistingComments &&
+    !!dsaFeaturesEnabled &&
+    (!reasonCode ||
+      (reasonCode === GQLREJECTION_REASON_CODE.OTHER && !otherCustomReason));
+
+  const disableForm =
+    (requiresSiteBanUpdates && !pendingSiteBanUpdates) ||
+    requiresRejectionReasonForDSA;
 
   return (
     <ChangeStatusModal
@@ -422,6 +465,38 @@ const BanModal: FunctionComponent<Props> = ({
                         </CheckBox>
                       </Localized>
                     )}
+                    {rejectExistingComments && dsaFeaturesEnabled && (
+                      <Flex
+                        marginTop={2}
+                        direction="column"
+                        marginLeft={2}
+                        padding={2}
+                        className={styles.rejectExistingReason}
+                      >
+                        {view === "REASON" ? (
+                          <Reasons
+                            selected={reasonCode}
+                            onCode={(code) => {
+                              setReasonCode(code);
+                              setView("EXPLANATION");
+                            }}
+                          />
+                        ) : (
+                          <DetailedExplanation
+                            onBack={() => {
+                              setView("REASON");
+                              setReasonCode(null);
+                            }}
+                            code={reasonCode!}
+                            explanationValue={detailedExplanation}
+                            onChangeExplanation={setDetailedExplanation}
+                            customReasonValue={otherCustomReason}
+                            onChangeCustomReason={setOtherCustomReason}
+                            linkClassName={styles.rejectionReasonLink}
+                          />
+                        )}
+                      </Flex>
+                    )}
                   </Flex>
                   {/* EMAIL BAN */}
                   {canBanDomain && (

client/src/core/client/admin/components/ModerationReason/DetailedExplanation.tsx

@@ -119,7 +119,10 @@ const DetailedExplanation: FunctionComponent<Props> = ({
           </Localized>
         </>
       ) : (
-        <AddExplanationButton onClick={() => setShowAddExplanation(true)} />
+        <AddExplanationButton
+          onClick={() => setShowAddExplanation(true)}
+          linkClassName={linkClassName}
+        />
       )}
     </>
   );

client/src/core/client/admin/components/ModerationReason/ModerationReason.css

@@ -13,6 +13,7 @@
 .optionAction {
   padding: 0;
   margin: var(--spacing-1) 0;
+  width: fit-content;
 }
 
 .rejectButton {

client/src/core/client/admin/components/ModerationReason/ModerationReason.tsx

@@ -30,7 +30,6 @@ const ModerationReason: FunctionComponent<Props> = ({
   const [view, setView] = useState<"REASON" | "EXPLANATION">("REASON");
   const [reasonCode, setReasonCode] = useState<ReasonCode | null>(null);
 
-  const [legalGrounds] = useState<string | null>(null);
   const [detailedExplanation, setDetailedExplanation] = useState<string | null>(
     null
   );
@@ -41,20 +40,10 @@ const ModerationReason: FunctionComponent<Props> = ({
   const submitReason = useCallback(() => {
     onReason({
       code: reasonCode!,
-      legalGrounds:
-        reasonCode === GQLREJECTION_REASON_CODE.ILLEGAL_CONTENT
-          ? legalGrounds
-          : undefined,
       detailedExplanation: detailedExplanation || undefined,
       customReason: otherCustomReason || undefined,
     });
-  }, [
-    reasonCode,
-    legalGrounds,
-    detailedExplanation,
-    onReason,
-    otherCustomReason,
-  ]);
+  }, [reasonCode, detailedExplanation, onReason, otherCustomReason]);
 
   return (
     <Box className={styles.root} data-testid={`moderation-reason-modal-${id}`}>

client/src/core/client/stream/tabs/Comments/Comment/UserBanPopover/BanUserMutation.ts

@@ -61,6 +61,7 @@ const BanUserMutation = createMutation(
               message: input.message,
               rejectExistingComments: input.rejectExistingComments,
               siteIDs: input.siteIDs,
+              rejectionReason: input.rejectionReason,
               clientMutationId: clientMutationId.toString(),
             },
           },

client/src/core/client/stream/tabs/Comments/Comment/UserBanPopover/UserBanPopoverContainer.tsx

@@ -55,11 +55,13 @@ const UserBanPopoverContainer: FunctionComponent<Props> = ({
   onDismiss,
   view,
 }) => {
-  const [{ accessToken }] = useLocal<UserBanPopoverContainer_local>(graphql`
-    fragment UserBanPopoverContainer_local on Local {
-      accessToken
-    }
-  `);
+  const [{ accessToken, dsaFeaturesEnabled }] =
+    useLocal<UserBanPopoverContainer_local>(graphql`
+      fragment UserBanPopoverContainer_local on Local {
+        accessToken
+        dsaFeaturesEnabled
+      }
+    `);
   const { localeBundles, rootURL } = useCoralContext();
   const setSpamBanned = useMutation(SetSpamBanned);
   const reject = useMutation(RejectCommentMutation);
@@ -129,6 +131,12 @@ const UserBanPopoverContainer: FunctionComponent<Props> = ({
         userID: user.id,
         commentID: comment.id,
         rejectExistingComments: !siteBan,
+        rejectionReason:
+          dsaFeaturesEnabled && !siteBan
+            ? {
+                code: GQLREJECTION_REASON_CODE.SPAM,
+              }
+            : undefined,
         message: getMessage(
           localeBundles,
           "common-banEmailTemplate",
@@ -144,14 +152,11 @@ const UserBanPopoverContainer: FunctionComponent<Props> = ({
           commentRevisionID: comment.revision.id,
           storyID: story.id,
           noEmit: true,
-          reason: {
-            code: GQLREJECTION_REASON_CODE.OTHER,
-            detailedExplanation: getMessage(
-              localeBundles,
-              "common-userBanned",
-              "User was banned."
-            ),
-          },
+          reason: dsaFeaturesEnabled
+            ? {
+                code: GQLREJECTION_REASON_CODE.SPAM,
+              }
+            : undefined,
         });
       }
     } catch (e) {
@@ -181,6 +186,7 @@ const UserBanPopoverContainer: FunctionComponent<Props> = ({
     setBanError,
     siteBan,
     setSpamBanned,
+    dsaFeaturesEnabled,
   ]);
 
   if (view === "CONFIRM_BAN") {

locales/en-US/common.ftl

@@ -62,6 +62,4 @@ common-moderationReason-detailedExplanation-placeholder =
 common-moderationReason-customReason = Custom reason (required)
 common-moderationReason-customReason-placeholder =
    .placeholder = Add your reason
-
-common-userBanned =
-  User was banned.
+

server/src/core/server/graph/mutators/Users.ts

@@ -336,6 +336,7 @@ export const Users = (ctx: GraphContext) => ({
     message,
     rejectExistingComments = false,
     siteIDs,
+    rejectionReason,
   }: GQLBanUserInput) =>
     ban(
       ctx.mongo,
@@ -346,9 +347,9 @@ export const Users = (ctx: GraphContext) => ({
       ctx.user!,
       userID,
       message,
-      ctx.i18n,
       rejectExistingComments,
       siteIDs,
+      rejectionReason,
       ctx.now
     ),
   updateUserBan:
@@ -358,6 +359,7 @@ export const Users = (ctx: GraphContext) => ({
       rejectExistingComments = false,
       banSiteIDs,
       unbanSiteIDs,
+      rejectionReason,
     }: GQLUpdateUserBanInput) =>
     async () =>
       updateUserBan(
@@ -366,13 +368,13 @@ export const Users = (ctx: GraphContext) => ({
         ctx.mailerQueue,
         ctx.rejectorQueue,
         ctx.tenant,
-        ctx.i18n,
         ctx.user!,
         userID,
         message,
         rejectExistingComments,
         banSiteIDs,
         unbanSiteIDs,
+        rejectionReason,
         ctx.now
       ),
   warn: async (input: GQLWarnUserInput) =>

server/src/core/server/graph/schema/schema.graphql

@@ -8875,6 +8875,12 @@ input BanUserInput {
   whether or not to reject all the user's previous comments when banning them.
   """
   rejectExistingComments: Boolean
+
+  """
+  rejectionReason is the reason provided for why any existing comments are being
+  rejected if DSA is enabled
+  """
+  rejectionReason: RejectCommentReasonInput
 }
 
 type BanUserPayload {
@@ -8917,6 +8923,12 @@ input UpdateUserBanInput {
   """
   rejectExistingComments: Boolean
 
+  """
+  rejectionReason is the reason provided for why any existing comments are being
+  rejected if DSA is enabled
+  """
+  rejectionReason: RejectCommentReasonInput
+
   """
   clientMutationID is required for relay support
   """