[CORL-2979]: Add custom reason field to Other rejection reason

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

@@ -1,5 +1,5 @@
 .detailedExplanation {
-  margin-bottom: var(--spacing-3);
+  margin-bottom: var(--spacing-2);
 }
 
 .explanationLabel {

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

@@ -13,21 +13,26 @@ import styles from "./DetailedExplanation.css";
 import commonStyles from "./ModerationReason.css";
 
 export interface Props {
-  onChange: (value: string) => void;
+  onChangeExplanation: (value: string) => void;
+  onChangeCustomReason: (value: string) => void;
   code: GQLREJECTION_REASON_CODE;
-  value: string | null;
+  explanationValue: string | null;
+  customReasonValue: string | null;
   onBack: () => void;
+  linkClassName?: string;
 }
 
-const AddExplanationButton: FunctionComponent<{ onClick: () => void }> = ({
-  onClick,
-}) => (
+const AddExplanationButton: FunctionComponent<{
+  onClick: () => void;
+  linkClassName?: string;
+}> = ({ onClick, linkClassName }) => (
   <Localized id="common-moderationReason-addExplanation">
     <Button
       onClick={onClick}
-      className={commonStyles.optionAction}
-      variant="none"
-      color="success"
+      className={cn(linkClassName, commonStyles.optionAction)}
+      variant="flat"
+      color="primary"
+      underline
     >
       + Add explanation
     </Button>
@@ -36,19 +41,26 @@ const AddExplanationButton: FunctionComponent<{ onClick: () => void }> = ({
 
 const DetailedExplanation: FunctionComponent<Props> = ({
   code,
-  value,
-  onChange,
+  explanationValue,
+  onChangeExplanation,
   onBack,
+  customReasonValue,
+  onChangeCustomReason,
+  linkClassName,
 }) => {
-  const [showAddExplanation, setShowAddExplanation] = useState(
-    !!(code === GQLREJECTION_REASON_CODE.OTHER)
-  );
+  const [showAddExplanation, setShowAddExplanation] = useState(false);
 
   return (
     <>
       <Localized id="common-moderationReason-changeReason">
-        <Button className={styles.changeReason} variant="none" onClick={onBack}>
-          &lt; Change Reason
+        <Button
+          className={cn(linkClassName, styles.changeReason)}
+          variant="flat"
+          onClick={onBack}
+          color="primary"
+          underline
+        >
+          &lt; Change reason
         </Button>
       </Localized>
 
@@ -60,13 +72,36 @@ const DetailedExplanation: FunctionComponent<Props> = ({
         <div className={styles.code}>{unsnake(code)}</div>
       </Localized>
 
+      {code === GQLREJECTION_REASON_CODE.OTHER && (
+        <>
+          <Localized id="common-moderationReason-customReason">
+            <Label
+              className={cn(commonStyles.sectionLabel, styles.explanationLabel)}
+            >
+              Custom reason (required)
+            </Label>
+          </Localized>
+          <Localized
+            id="common-moderationReason-customReason-placeholder"
+            attrs={{ placeholder: true }}
+          >
+            <TextArea
+              className={styles.detailedExplanation}
+              placeholder="Add your reason"
+              value={customReasonValue || undefined}
+              onChange={(e) => onChangeCustomReason(e.target.value)}
+            />
+          </Localized>
+        </>
+      )}
+
       {showAddExplanation ? (
         <>
           <Localized id="common-moderationReason-detailedExplanation">
             <Label
               className={cn(commonStyles.sectionLabel, styles.explanationLabel)}
             >
-              Explanation
+              Detailed explanation
             </Label>
           </Localized>
 
@@ -78,8 +113,8 @@ const DetailedExplanation: FunctionComponent<Props> = ({
               className={styles.detailedExplanation}
               placeholder="Add your explanation"
               data-testid="moderation-reason-detailed-explanation"
-              value={value || undefined}
-              onChange={(e) => onChange(e.target.value)}
+              value={explanationValue || undefined}
+              onChange={(e) => onChangeExplanation(e.target.value)}
             />
           </Localized>
         </>

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

@@ -13,9 +13,6 @@
 .optionAction {
   padding: 0;
   margin: var(--spacing-1) 0;
-  color: $colors-teal-600;
-  font-weight: var(--font-weight-secondary-regular);
-  text-decoration: underline;
 }
 
 .rejectButton {

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

@@ -18,12 +18,14 @@ export interface Props {
   onCancel: () => void;
   onReason: (reason: Reason) => void;
   id: string;
+  linkClassName?: string;
 }
 
 const ModerationReason: FunctionComponent<Props> = ({
   onCancel,
   onReason,
   id,
+  linkClassName,
 }) => {
   const [view, setView] = useState<"REASON" | "EXPLANATION">("REASON");
   const [reasonCode, setReasonCode] = useState<ReasonCode | null>(null);
@@ -32,6 +34,9 @@ const ModerationReason: FunctionComponent<Props> = ({
   const [detailedExplanation, setDetailedExplanation] = useState<string | null>(
     null
   );
+  const [otherCustomReason, setOtherCustomReason] = useState<string | null>(
+    null
+  );
 
   const submitReason = useCallback(() => {
     onReason({
@@ -41,8 +46,15 @@ const ModerationReason: FunctionComponent<Props> = ({
           ? legalGrounds
           : undefined,
       detailedExplanation: detailedExplanation || undefined,
+      customReason: otherCustomReason || undefined,
     });
-  }, [reasonCode, legalGrounds, detailedExplanation, onReason]);
+  }, [
+    reasonCode,
+    legalGrounds,
+    detailedExplanation,
+    onReason,
+    otherCustomReason,
+  ]);
 
   return (
     <Box className={styles.root} data-testid={`moderation-reason-modal-${id}`}>
@@ -61,8 +73,11 @@ const ModerationReason: FunctionComponent<Props> = ({
             setReasonCode(null);
           }}
           code={reasonCode!}
-          value={detailedExplanation}
-          onChange={setDetailedExplanation}
+          explanationValue={detailedExplanation}
+          onChangeExplanation={setDetailedExplanation}
+          customReasonValue={otherCustomReason}
+          onChangeCustomReason={setOtherCustomReason}
+          linkClassName={linkClassName}
         />
       )}
 
@@ -75,7 +90,7 @@ const ModerationReason: FunctionComponent<Props> = ({
                 disabled={
                   reasonCode === null ||
                   (reasonCode === GQLREJECTION_REASON_CODE.OTHER &&
-                    !detailedExplanation)
+                    !otherCustomReason)
                 }
                 onClick={submitReason}
                 color="alert"

client/src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/ModerationDropdownContainer.css

@@ -0,0 +1,3 @@
+.link {
+  color: var(--palette-primary-600);
+}

client/src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/ModerationDropdownContainer.tsx

@@ -23,6 +23,8 @@ import UserBanPopoverContainer from "../UserBanPopover/UserBanPopoverContainer";
 import ModerationActionsContainer from "./ModerationActionsContainer";
 import RejectCommentMutation from "./RejectCommentMutation";
 
+import styles from "./ModerationDropdownContainer.css";
+
 export type ModerationDropdownView =
   | "MODERATE"
   | "REJECT_REASON"
@@ -108,6 +110,7 @@ const ModerationDropdownContainer: FunctionComponent<Props> = ({
           id={comment.id}
           onReason={reject}
           onCancel={onDismiss}
+          linkClassName={styles.link}
         />
       ) : (
         <UserBanPopoverContainer

client/src/core/client/stream/test/comments/stream/moderation.spec.tsx

@@ -647,7 +647,7 @@ it("can copy comment embed code", async () => {
   window.prompt = jsdomPrompt;
 });
 
-it("requires rection reason when dsaFeaturesEnabled", async () => {
+it("requires rejection reason when dsaFeaturesEnabled", async () => {
   await act(async () => {
     await createTestRenderer({
       resolvers: createResolversStub<GQLResolver>({
@@ -659,6 +659,7 @@ it("requires rection reason when dsaFeaturesEnabled", async () => {
               reason: {
                 code: "OTHER",
                 detailedExplanation: "really weird comment tbh",
+                customReason: "custom reason",
               },
             });
             return {
@@ -709,6 +710,12 @@ it("requires rection reason when dsaFeaturesEnabled", async () => {
   });
   expect(submitReasonButton).toBeDisabled();
 
+  const addAdditionalInfoButton = within(reasonModal).getByRole("button", {
+    name: "Add explanation",
+  });
+
+  fireEvent.click(addAdditionalInfoButton);
+
   const additionalInfo = within(reasonModal).getByTestId(
     "moderation-reason-detailed-explanation"
   );
@@ -719,6 +726,17 @@ it("requires rection reason when dsaFeaturesEnabled", async () => {
     });
   });
 
+  expect(submitReasonButton).toBeDisabled();
+
+  const customReason =
+    within(reasonModal).getByPlaceholderText("Add your reason");
+
+  act(() => {
+    fireEvent.change(customReason, {
+      target: { value: "custom reason" },
+    });
+  });
+
   expect(submitReasonButton).toBeEnabled();
 
   act(() => {

client/src/core/client/stream/test/configure/streamConfiguration.spec.tsx

@@ -63,7 +63,7 @@ const createTestRenderer = async (
   return { tabPane, applyButton, form };
 };
 
-it.only("change premod", async () => {
+it("change premod", async () => {
   const updateStorySettingsStub =
     createMutationResolverStub<MutationToUpdateStorySettingsResolver>(
       ({ variables }) => {

locales/en-US/common.ftl

@@ -59,6 +59,9 @@ common-moderationReason-detailedExplanation =
   Detailed explanation
 common-moderationReason-detailedExplanation-placeholder =
    .placeholder = Add your explanation
+common-moderationReason-customReason = Custom reason (required)
+common-moderationReason-customReason-placeholder =
+   .placeholder = Add your reason
 
 common-userBanned =
   User was banned.

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

@@ -3459,6 +3459,11 @@ type RejectionReason {
   detailedExplanation is any additional information the user wishes to provide.
   """
   detailedExplanation: String
+
+  """
+  customReason is a reason provided for rejection when the Other rejection code is selected.
+  """
+  customReason: String
 }
 
 type CommentModerationAction {
@@ -7327,6 +7332,11 @@ input RejectCommentReasonInput {
   detailedExplanation is any additional information the user wishes to provide.
   """
   detailedExplanation: String
+
+  """
+  customReason is a reason provided for rejection when the Other rejection code is selected.
+  """
+  customReason: String
 }
 
 input RejectCommentInput {

server/src/core/server/models/action/moderation/comment.ts

@@ -52,6 +52,7 @@ export interface CommentModerationAction extends TenantResource {
     code: GQLREJECTION_REASON_CODE;
     legalGrounds?: string;
     detailedExplanation?: string;
+    customReason?: string;
   };
 
   /**

server/src/core/server/stacks/rejectComment.ts

@@ -84,6 +84,7 @@ const rejectComment = async (
     code: GQLREJECTION_REASON_CODE;
     legalGrounds?: string | undefined;
     detailedExplanation?: string | undefined;
+    customReason?: string | undefined;
   },
   request?: Request | undefined,
   sendNotification = true,