add customReason for Other rejection reason

coralproject · Nov 28, 2023 · fbf51c4 · fbf51c4
1 parent 46de21b
commit fbf51c4
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 13 deletions.
diff --git a/client/src/core/client/admin/components/ModerationReason/DetailedExplanation.tsx b/client/src/core/client/admin/components/ModerationReason/DetailedExplanation.tsx
@@ -13,9 +13,11 @@ 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;
 }
 
@@ -36,9 +38,11 @@ const AddExplanationButton: FunctionComponent<{ onClick: () => void }> = ({
 
 const DetailedExplanation: FunctionComponent<Props> = ({
   code,
-  value,
-  onChange,
+  explanationValue,
+  onChangeExplanation,
   onBack,
+  customReasonValue,
+  onChangeCustomReason,
 }) => {
   const [showAddExplanation, setShowAddExplanation] = useState(
     !!(code === GQLREJECTION_REASON_CODE.OTHER)
@@ -48,7 +52,7 @@ const DetailedExplanation: FunctionComponent<Props> = ({
     <>
       <Localized id="common-moderationReason-changeReason">
         <Button className={styles.changeReason} variant="none" onClick={onBack}>
-          &lt; Change Reason
+          &lt; Change reason
         </Button>
       </Localized>
 
@@ -60,13 +64,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 +105,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>
         </>

diff --git a/client/src/core/client/admin/components/ModerationReason/ModerationReason.tsx b/client/src/core/client/admin/components/ModerationReason/ModerationReason.tsx
@@ -32,6 +32,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 +44,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 +71,10 @@ const ModerationReason: FunctionComponent<Props> = ({
             setReasonCode(null);
           }}
           code={reasonCode!}
-          value={detailedExplanation}
-          onChange={setDetailedExplanation}
+          explanationValue={detailedExplanation}
+          onChangeExplanation={setDetailedExplanation}
+          customReasonValue={otherCustomReason}
+          onChangeCustomReason={setOtherCustomReason}
         />
       )}
 
@@ -75,7 +87,7 @@ const ModerationReason: FunctionComponent<Props> = ({
                 disabled={
                   reasonCode === null ||
                   (reasonCode === GQLREJECTION_REASON_CODE.OTHER &&
-                    !detailedExplanation)
+                    !otherCustomReason)
                 }
                 onClick={submitReason}
                 color="alert"

diff --git a/client/src/core/client/stream/test/configure/streamConfiguration.spec.tsx b/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 }) => {

diff --git a/locales/en-US/common.ftl b/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.

diff --git a/server/src/core/server/graph/schema/schema.graphql b/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 {

diff --git a/server/src/core/server/models/action/moderation/comment.ts b/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;
   };
 
   /**

diff --git a/server/src/core/server/stacks/rejectComment.ts b/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,