From e07e71e5511d7d44d1d9ec94e615df159f48bff0 Mon Sep 17 00:00:00 2001
From: Marcus Haddon <haddon.marcus@gmail.com>
Date: Mon, 6 Nov 2023 09:33:46 -0800
Subject: [PATCH] move localization to common

---
 .../components/ModerateCard/ModerateCard.tsx  |  7 +++--
 .../ModerationReason/DetailedExplanation.tsx  | 10 +++----
 .../ModerationReason/ModerationReason.tsx     |  4 +--
 .../components/ModerationReason/Reasons.tsx   | 10 +++----
 .../admin/test/moderate/regularQueue.spec.tsx |  2 +-
 .../test/comments/stream/moderation.spec.tsx  |  2 +-
 locales/en-US/admin.ftl                       | 29 -------------------
 locales/en-US/common.ftl                      | 29 +++++++++++++++++++
 8 files changed, 47 insertions(+), 46 deletions(-)

diff --git a/client/src/core/client/admin/components/ModerateCard/ModerateCard.tsx b/client/src/core/client/admin/components/ModerateCard/ModerateCard.tsx
index 7e1a9054af..1c78d9f1db 100644
--- a/client/src/core/client/admin/components/ModerateCard/ModerateCard.tsx
+++ b/client/src/core/client/admin/components/ModerateCard/ModerateCard.tsx
@@ -9,6 +9,7 @@ import React, {
   useEffect,
   useMemo,
   useRef,
+  useState,
 } from "react";
 
 import { MediaContainer } from "coral-admin/components/MediaContainer";
@@ -183,7 +184,7 @@ const ModerateCard: FunctionComponent<Props> = ({
     }
   }, [selected, div]);
 
-  // const [showModerationReason, setShowModerationReason] = useState(false);
+  const [showModerationReason, setShowModerationReason] = useState(false);
 
   const commentBody = useMemo(
     () =>
@@ -375,7 +376,7 @@ const ModerateCard: FunctionComponent<Props> = ({
                     onClick={
                       dsaFeaturesEnabled
                         ? () => {
-                            toggleVisibility();
+                            setShowModerationReason(true);// toggleVisibility();
                           }
                         : onReject
                     }
@@ -412,7 +413,7 @@ const ModerateCard: FunctionComponent<Props> = ({
                 [styles.miniButton]: mini,
               })}
             />
-            <ModerationReason onReason={onReason} onCancel={() => null} />
+            {showModerationReason && <ModerationReason onReason={onReason} onCancel={() => setShowModerationReason(false)} /> }
           </Flex>
           {moderatedBy}
         </Flex>
diff --git a/client/src/core/client/admin/components/ModerationReason/DetailedExplanation.tsx b/client/src/core/client/admin/components/ModerationReason/DetailedExplanation.tsx
index 3fa58e845b..afd6a9e440 100644
--- a/client/src/core/client/admin/components/ModerationReason/DetailedExplanation.tsx
+++ b/client/src/core/client/admin/components/ModerationReason/DetailedExplanation.tsx
@@ -25,13 +25,13 @@ const DetailedExplantion: FunctionComponent<Props> = ({
 }) => {
   return (
     <>
-      <Localized id={`moderationReason-rejectionReason-${code}`}>
+      <Localized id={`common-moderationReason-rejectionReason-${code}`}>
         <RadioButton value={code} name={code} key={code} checked>
           {unsnake(code)}
         </RadioButton>
       </Localized>
 
-      <Localized id="moderationReason-changeReason">
+      <Localized id="common-moderationReason-changeReason">
         <Button
           className={cn(styles.optionAction, styles.changeReason)}
           variant="none"
@@ -41,20 +41,20 @@ const DetailedExplantion: FunctionComponent<Props> = ({
         </Button>
       </Localized>
 
-      <Localized id="moderationReason-detailedExplanation">
+      <Localized id="common-moderationReason-detailedExplanation">
         <Label className={cn(styles.sectionLabel, styles.explanationLabel)}>
           Explanation
         </Label>
       </Localized>
 
       <Localized
-        id="moderationReason-detailedExplanation-placeholder"
+        id="common-moderationReason-detailedExplanation-placeholder"
         attrs={{ placeholder: true }}
       >
         <TextArea
           className={styles.detailedExplanation}
           placeholder="Add your explanation"
-          data-testid="moderation-reason-legal-grounds"
+          data-testid="moderation-reason-detailed-explanation"
           value={value || undefined}
           onChange={(e) => onChange(e.target.value)}
         />
diff --git a/client/src/core/client/admin/components/ModerationReason/ModerationReason.tsx b/client/src/core/client/admin/components/ModerationReason/ModerationReason.tsx
index 75c188a2cc..310fe9b110 100644
--- a/client/src/core/client/admin/components/ModerationReason/ModerationReason.tsx
+++ b/client/src/core/client/admin/components/ModerationReason/ModerationReason.tsx
@@ -58,7 +58,7 @@ const ModerationReason: FunctionComponent<Props> = ({ onCancel, onReason }) => {
       )}
 
       <Flex className={styles.buttons}>
-        <Localized id="moderationReason-cancel">
+        <Localized id="common-moderationReason-cancel">
           <Button
             className={styles.cancelButton}
             variant="outlined"
@@ -69,7 +69,7 @@ const ModerationReason: FunctionComponent<Props> = ({ onCancel, onReason }) => {
           </Button>
         </Localized>
 
-        <Localized id="moderationReason-reject">
+        <Localized id="common-moderationReason-reject">
           <Button
             className={styles.rejectButton}
             disabled={reasonCode === null}
diff --git a/client/src/core/client/admin/components/ModerationReason/Reasons.tsx b/client/src/core/client/admin/components/ModerationReason/Reasons.tsx
index 6227337f7c..60738399cc 100644
--- a/client/src/core/client/admin/components/ModerationReason/Reasons.tsx
+++ b/client/src/core/client/admin/components/ModerationReason/Reasons.tsx
@@ -18,7 +18,7 @@ export interface Props {
 const AddExpanationButton: FunctionComponent<{ onClick: () => void }> = ({
   onClick,
 }) => (
-  <Localized id="moderationReason-addExplanation">
+  <Localized id="common-moderationReason-addExplanation">
     <Button
       onClick={onClick}
       className={styles.optionAction}
@@ -37,7 +37,7 @@ const Reasons: FunctionComponent<Props> = ({
 }) => {
   return (
     <>
-      <Localized id="moderationReason-reason">
+      <Localized id="common-moderationReason-reason">
         <span className={styles.sectionLabel}>Reason</span>
       </Localized>
 
@@ -49,7 +49,7 @@ const Reasons: FunctionComponent<Props> = ({
         )
         .map((code) => (
           <>
-            <Localized id={`moderationReason-rejectionReason-${code}`}>
+            <Localized id={`common-moderationReason-rejectionReason-${code}`}>
               <RadioButton
                 value={code}
                 name={code}
@@ -71,13 +71,13 @@ const Reasons: FunctionComponent<Props> = ({
           </>
         ))}
 
-      <Localized id="moderationReason-reason-moreReasons">
+      <Localized id="common-moderationReason-reason-moreReasons">
         <span className={styles.sectionLabel}>+ More reasons</span>
       </Localized>
 
       <>
         <Localized
-          id={`moderationReason-rejectionReason-${GQLREJECTION_REASON_CODE.OTHER}`}
+          id={`common-moderationReason-rejectionReason-${GQLREJECTION_REASON_CODE.OTHER}`}
         >
           <RadioButton
             value={GQLREJECTION_REASON_CODE.OTHER}
diff --git a/client/src/core/client/admin/test/moderate/regularQueue.spec.tsx b/client/src/core/client/admin/test/moderate/regularQueue.spec.tsx
index 2ee73373c4..9d082d0263 100644
--- a/client/src/core/client/admin/test/moderate/regularQueue.spec.tsx
+++ b/client/src/core/client/admin/test/moderate/regularQueue.spec.tsx
@@ -953,7 +953,7 @@ it("requires moderation reason when DSA features enabled", async () => {
   await waitFor(() => {
     expect(screen.queryByTestId("moderation-reason-modal")).toBeVisible();
   });
-  // BOOKMARK: continue here
+
   const reasonModal = screen.queryByTestId("moderation-reason-modal")!;
 
   const submitReasonButton = within(reasonModal).getByRole("button", {
diff --git a/client/src/core/client/stream/test/comments/stream/moderation.spec.tsx b/client/src/core/client/stream/test/comments/stream/moderation.spec.tsx
index e643ecf68f..15a07bdeb9 100644
--- a/client/src/core/client/stream/test/comments/stream/moderation.spec.tsx
+++ b/client/src/core/client/stream/test/comments/stream/moderation.spec.tsx
@@ -658,7 +658,7 @@ it("requires rection reason when dsaFeaturesEnabled", async () => {
               commentRevisionID: firstComment.revision!.id,
               reason: {
                 code: "OTHER",
-                additionalInfo: "really weird comment tbh",
+                detailedExplanation: "really weird comment tbh",
               },
             });
             return {
diff --git a/locales/en-US/admin.ftl b/locales/en-US/admin.ftl
index 685a2c01ed..f7a93ff5d9 100644
--- a/locales/en-US/admin.ftl
+++ b/locales/en-US/admin.ftl
@@ -1101,35 +1101,6 @@ moderate-searchBar-comboBoxTextField =
 moderate-searchBar-goTo = Go to
 moderate-searchBar-seeAllResults = See all results
 
-moderationReason-reason = 
-  Reason
-moderationReason-addExplanation = 
-  Add explanation
-moderationReason-reject =
-  Reject
-moderationReason-cancel =
-  Cancel
-moderationReason-rejectionReason-OFFENSIVE =
-  Offensive
-moderationReason-rejectionReason-ABUSIVE = 
-  Abusive
-moderationReason-rejectionReason-SPAM =
-  Spam
-moderationReason-rejectionReason-BANNED_WORD =
-  Banned word
-moderationReason-rejectionReason-AD =
-  Ad
-moderationReason-reason-moreReasons =
-  + More reasons
-moderationReason-rejectionReason-OTHER = 
-  Other
-moderationReason-changeReason =
-  Change reason
-moderationReason-detailedExplanation =
-  Detailed explanation
-moderationReason-detailedExplanation-placeholder =
-   .placeholder = Add your explanation
-
 moderateCardDetails-tab-info = Info
 moderateCardDetails-tab-edits = Edit history
 moderateCardDetails-tab-automatedActions = Automated actions
diff --git a/locales/en-US/common.ftl b/locales/en-US/common.ftl
index 1e04308b5f..327af0ab85 100644
--- a/locales/en-US/common.ftl
+++ b/locales/en-US/common.ftl
@@ -23,3 +23,32 @@ common-error-traceID = Trace ID
 
 common-username =
   .aria-label = User { $username }
+
+common-moderationReason-reason = 
+  Reason
+common-moderationReason-addExplanation = 
+  Add explanation
+common-moderationReason-reject =
+  Reject
+common-moderationReason-cancel =
+  Cancel
+common-moderationReason-rejectionReason-OFFENSIVE =
+  Offensive
+common-moderationReason-rejectionReason-ABUSIVE = 
+  Abusive
+common-moderationReason-rejectionReason-SPAM =
+  Spam
+common-moderationReason-rejectionReason-BANNED_WORD =
+  Banned word
+common-moderationReason-rejectionReason-AD =
+  Ad
+common-moderationReason-reason-moreReasons =
+  + More reasons
+common-moderationReason-rejectionReason-OTHER = 
+  Other
+common-moderationReason-changeReason =
+  Change reason
+common-moderationReason-detailedExplanation =
+  Detailed explanation
+common-moderationReason-detailedExplanation-placeholder =
+   .placeholder = Add your explanation