From 7317e66e2b5a0f48bbec91abc19309b11edbc919 Mon Sep 17 00:00:00 2001
From: Kathryn Beaty <kathryn.beaty@voxmedia.com>
Date: Tue, 28 Nov 2023 15:55:53 -0500
Subject: [PATCH 1/5] initial work to add rejection reasons

---
 .../ModerateCard/DecisionDetailsContainer.css | 15 +++++
 .../ModerateCard/DecisionDetailsContainer.tsx | 64 +++++++++++++++++++
 .../ModerateCardDetailsContainer.tsx          | 40 +++++++++++-
 .../core/server/graph/schema/schema.graphql   |  2 +-
 4 files changed, 119 insertions(+), 2 deletions(-)
 create mode 100644 client/src/core/client/admin/components/ModerateCard/DecisionDetailsContainer.css
 create mode 100644 client/src/core/client/admin/components/ModerateCard/DecisionDetailsContainer.tsx

diff --git a/client/src/core/client/admin/components/ModerateCard/DecisionDetailsContainer.css b/client/src/core/client/admin/components/ModerateCard/DecisionDetailsContainer.css
new file mode 100644
index 0000000000..5588b5a93c
--- /dev/null
+++ b/client/src/core/client/admin/components/ModerateCard/DecisionDetailsContainer.css
@@ -0,0 +1,15 @@
+.wrapper {
+  background-color: var(--palette-grey-200);
+  font-family: var(--font-family-primary);
+}
+
+.full {
+  width: 100%;
+}
+
+.label {
+  font-size: var(--font-size-1);
+  font-weight: var(--font-weight-primary-semi-bold);
+  text-transform: uppercase;
+  color: var(--palette-grey-500);
+}
diff --git a/client/src/core/client/admin/components/ModerateCard/DecisionDetailsContainer.tsx b/client/src/core/client/admin/components/ModerateCard/DecisionDetailsContainer.tsx
new file mode 100644
index 0000000000..3c63efd2e5
--- /dev/null
+++ b/client/src/core/client/admin/components/ModerateCard/DecisionDetailsContainer.tsx
@@ -0,0 +1,64 @@
+// import { Localized } from "@fluent/react/compat";
+import React, { FunctionComponent } from "react";
+import { graphql } from "react-relay";
+
+import { withFragmentContainer } from "coral-framework/lib/relay";
+import { Flex, HorizontalGutter } from "coral-ui/components/v2";
+
+import { DecisionDetailsContainer_comment } from "coral-admin/__generated__/DecisionDetailsContainer_comment.graphql";
+
+import styles from "./DecisionDetailsContainer.css";
+
+interface Props {
+  comment: DecisionDetailsContainer_comment;
+}
+
+const DecisionDetailsContainer: FunctionComponent<Props> = ({ comment }) => {
+  const statusHistory = comment.statusHistory.edges[0].node;
+  return (
+    <HorizontalGutter className={styles.wrapper} padding={2}>
+      <Flex>
+        <Flex direction="column" className={styles.full}>
+          <div className={styles.label}>Decision</div>
+          <div>Rejected</div>
+        </Flex>
+        <Flex direction="column" className={styles.full}>
+          <div className={styles.label}>Reason</div>
+          <div>{statusHistory.rejectionReason?.code}</div>
+        </Flex>
+      </Flex>
+      {statusHistory.rejectionReason?.detailedExplanation && (
+        <Flex direction="column">
+          <div className={styles.label}>Detailed explanation</div>
+          <div>{statusHistory.rejectionReason?.detailedExplanation}</div>
+        </Flex>
+      )}
+      <Flex>
+        <div className={styles.label}>{statusHistory.createdAt}</div>
+      </Flex>
+    </HorizontalGutter>
+  );
+};
+
+const enhanced = withFragmentContainer<Props>({
+  comment: graphql`
+    fragment DecisionDetailsContainer_comment on Comment {
+      id
+      statusHistory(first: 1) {
+        edges {
+          node {
+            createdAt
+            status
+            rejectionReason {
+              code
+              legalGrounds
+              detailedExplanation
+            }
+          }
+        }
+      }
+    }
+  `,
+})(DecisionDetailsContainer);
+
+export default enhanced;
diff --git a/client/src/core/client/admin/components/ModerateCard/ModerateCardDetailsContainer.tsx b/client/src/core/client/admin/components/ModerateCard/ModerateCardDetailsContainer.tsx
index 8dde7527e3..ccd814df31 100644
--- a/client/src/core/client/admin/components/ModerateCard/ModerateCardDetailsContainer.tsx
+++ b/client/src/core/client/admin/components/ModerateCard/ModerateCardDetailsContainer.tsx
@@ -8,6 +8,7 @@ import React, {
 import { graphql } from "react-relay";
 
 import { withFragmentContainer } from "coral-framework/lib/relay";
+import { GQLCOMMENT_STATUS } from "coral-framework/schema";
 import {
   CheckDoubleIcon,
   LikeIcon,
@@ -22,6 +23,7 @@ import { ModerateCardDetailsContainer_settings } from "coral-admin/__generated__
 
 import AutomatedActionsContainer from "./AutomatedActionsContainer";
 import CommentRevisionContainer from "./CommentRevisionContainer";
+import DecisionDetailsContainer from "./DecisionDetailsContainer";
 import FlagDetailsContainer from "./FlagDetailsContainer";
 import LinkDetailsContainer from "./LinkDetailsContainer";
 import ReactionDetailsQuery from "./ReactionDetailsQuery";
@@ -34,7 +36,12 @@ interface Props {
   onUsernameClick: (id?: string) => void;
 }
 
-type DetailsTabs = "INFO" | "REACTIONS" | "HISTORY" | "EXTERNAL_MOD";
+type DetailsTabs =
+  | "INFO"
+  | "REACTIONS"
+  | "HISTORY"
+  | "EXTERNAL_MOD"
+  | "DECISION";
 
 function hasFlagDetails(c: ModerateCardDetailsContainer_comment) {
   return c.revision
@@ -76,9 +83,27 @@ const ModerateCardDetailsContainer: FunctionComponent<Props> = ({
     comment.revision.actionCounts.reaction.total > 0
   );
 
+  const hasDecision =
+    comment.status === GQLCOMMENT_STATUS.REJECTED &&
+    comment.statusHistory.edges[0] &&
+    comment.statusHistory.edges[0].node.rejectionReason &&
+    comment.statusHistory.edges[0].node.rejectionReason.code;
+
   return (
     <HorizontalGutter>
       <TabBar variant="default" activeTab={activeTab} onTabClick={onTabClick}>
+        {hasDecision && (
+          <Tab tabID="DECISION" classes={styles}>
+            <Flex alignItems="center" itemGutter>
+              {/* TODO: Update this icon */}
+              <SvgIcon Icon={ListBulletsIcon} />
+              {/* TODO: Add this translation */}
+              <Localized id="moderateCardDetails-tab-decision">
+                <span>Decision</span>
+              </Localized>
+            </Flex>
+          </Tab>
+        )}
         <Tab tabID="INFO" classes={styles}>
           <Flex alignItems="center" itemGutter>
             <SvgIcon Icon={ListBulletsIcon} />
@@ -118,6 +143,9 @@ const ModerateCardDetailsContainer: FunctionComponent<Props> = ({
           </Tab>
         )}
       </TabBar>
+      {activeTab === "DECISION" && (
+        <DecisionDetailsContainer comment={comment} />
+      )}
       {activeTab === "INFO" && (
         <>
           <LinkDetailsContainer comment={comment} settings={settings} />
@@ -156,6 +184,15 @@ const enhanced = withFragmentContainer<Props>({
       editing {
         edited
       }
+      statusHistory(first: 1) {
+        edges {
+          node {
+            rejectionReason {
+              code
+            }
+          }
+        }
+      }
       revision {
         actionCounts {
           flag {
@@ -193,6 +230,7 @@ const enhanced = withFragmentContainer<Props>({
       ...CommentRevisionContainer_comment
       ...LinkDetailsContainer_comment
       ...AutomatedActionsContainer_comment
+      ...DecisionDetailsContainer_comment
     }
   `,
   settings: graphql`
diff --git a/server/src/core/server/graph/schema/schema.graphql b/server/src/core/server/graph/schema/schema.graphql
index c2ab69385a..fa8bf3adbd 100644
--- a/server/src/core/server/graph/schema/schema.graphql
+++ b/server/src/core/server/graph/schema/schema.graphql
@@ -3488,7 +3488,7 @@ type CommentModerationAction {
   """
   reason is the reason the comment was rejected, if it was rejected
   """
-  reason: RejectionReason
+  rejectionReason: RejectionReason
 
   """
   createdAt is the time that the CommentModerationAction was created.

From 6e5ec121760b86317d75c30bbb0d3c7321dc1ec9 Mon Sep 17 00:00:00 2001
From: Kathryn Beaty <kathryn.beaty@voxmedia.com>
Date: Wed, 29 Nov 2023 08:52:14 -0500
Subject: [PATCH 2/5] add more info and styles to decision details

---
 .../ModerateCard/DecisionDetailsContainer.css | 14 ++++++
 .../ModerateCard/DecisionDetailsContainer.tsx | 45 +++++++++++++++----
 .../ModerateCardDetailsContainer.tsx          | 16 ++++---
 .../core/server/graph/schema/schema.graphql   | 10 +++++
 4 files changed, 69 insertions(+), 16 deletions(-)

diff --git a/client/src/core/client/admin/components/ModerateCard/DecisionDetailsContainer.css b/client/src/core/client/admin/components/ModerateCard/DecisionDetailsContainer.css
index 5588b5a93c..cd2726c384 100644
--- a/client/src/core/client/admin/components/ModerateCard/DecisionDetailsContainer.css
+++ b/client/src/core/client/admin/components/ModerateCard/DecisionDetailsContainer.css
@@ -13,3 +13,17 @@
   text-transform: uppercase;
   color: var(--palette-grey-500);
 }
+
+.rejected {
+  color: var(--palette-text-000);
+  background-color: var(--palette-error-500);
+  text-transform: uppercase;
+  padding: var(--spacing-1) var(--spacing-2);
+  width: fit-content;
+  font-size: var(--font-size-1);
+  font-weight: var(--font-weight-primary-semi-bold);
+}
+
+.info {
+  font-size: var(--font-size-2);
+}
diff --git a/client/src/core/client/admin/components/ModerateCard/DecisionDetailsContainer.tsx b/client/src/core/client/admin/components/ModerateCard/DecisionDetailsContainer.tsx
index 3c63efd2e5..badbbfcb68 100644
--- a/client/src/core/client/admin/components/ModerateCard/DecisionDetailsContainer.tsx
+++ b/client/src/core/client/admin/components/ModerateCard/DecisionDetailsContainer.tsx
@@ -3,11 +3,12 @@ import React, { FunctionComponent } from "react";
 import { graphql } from "react-relay";
 
 import { withFragmentContainer } from "coral-framework/lib/relay";
-import { Flex, HorizontalGutter } from "coral-ui/components/v2";
+import { Flex, HorizontalGutter, Timestamp } from "coral-ui/components/v2";
 
 import { DecisionDetailsContainer_comment } from "coral-admin/__generated__/DecisionDetailsContainer_comment.graphql";
 
 import styles from "./DecisionDetailsContainer.css";
+import { unsnake } from "../ModerationReason/formatting";
 
 interface Props {
   comment: DecisionDetailsContainer_comment;
@@ -15,26 +16,51 @@ interface Props {
 
 const DecisionDetailsContainer: FunctionComponent<Props> = ({ comment }) => {
   const statusHistory = comment.statusHistory.edges[0].node;
+
   return (
-    <HorizontalGutter className={styles.wrapper} padding={2}>
+    <HorizontalGutter className={styles.wrapper} padding={3}>
       <Flex>
         <Flex direction="column" className={styles.full}>
           <div className={styles.label}>Decision</div>
-          <div>Rejected</div>
-        </Flex>
-        <Flex direction="column" className={styles.full}>
-          <div className={styles.label}>Reason</div>
-          <div>{statusHistory.rejectionReason?.code}</div>
+          <div className={styles.rejected}>Rejected</div>
         </Flex>
+        {statusHistory.rejectionReason && statusHistory.rejectionReason.code && (
+          <Flex direction="column" className={styles.full}>
+            <div className={styles.label}>Reason</div>
+            <div className={styles.info}>
+              {unsnake(statusHistory.rejectionReason.code)}
+            </div>
+          </Flex>
+        )}
       </Flex>
+      {statusHistory.rejectionReason?.legalGrounds && (
+        <Flex direction="column">
+          <div className={styles.label}>Law broken</div>
+          <div className={styles.info}>
+            {statusHistory.rejectionReason?.legalGrounds}
+          </div>
+        </Flex>
+      )}
+      {statusHistory.rejectionReason?.customReason && (
+        <Flex direction="column">
+          <div className={styles.label}>Custom reason</div>
+          <div className={styles.info}>
+            {statusHistory.rejectionReason?.customReason}
+          </div>
+        </Flex>
+      )}
       {statusHistory.rejectionReason?.detailedExplanation && (
         <Flex direction="column">
           <div className={styles.label}>Detailed explanation</div>
-          <div>{statusHistory.rejectionReason?.detailedExplanation}</div>
+          <div className={styles.info}>
+            {statusHistory.rejectionReason?.detailedExplanation}
+          </div>
         </Flex>
       )}
       <Flex>
-        <div className={styles.label}>{statusHistory.createdAt}</div>
+        <div className={styles.label}>
+          <Timestamp>{statusHistory.createdAt}</Timestamp>
+        </div>
       </Flex>
     </HorizontalGutter>
   );
@@ -53,6 +79,7 @@ const enhanced = withFragmentContainer<Props>({
               code
               legalGrounds
               detailedExplanation
+              customReason
             }
           }
         }
diff --git a/client/src/core/client/admin/components/ModerateCard/ModerateCardDetailsContainer.tsx b/client/src/core/client/admin/components/ModerateCard/ModerateCardDetailsContainer.tsx
index ccd814df31..927cb8c6fa 100644
--- a/client/src/core/client/admin/components/ModerateCard/ModerateCardDetailsContainer.tsx
+++ b/client/src/core/client/admin/components/ModerateCard/ModerateCardDetailsContainer.tsx
@@ -59,7 +59,15 @@ const ModerateCardDetailsContainer: FunctionComponent<Props> = ({
   onUsernameClick,
   settings,
 }) => {
-  const [activeTab, setActiveTab] = useState<DetailsTabs>("INFO");
+  const hasDecision =
+    comment.status === GQLCOMMENT_STATUS.REJECTED &&
+    comment.statusHistory.edges[0] &&
+    comment.statusHistory.edges[0].node.rejectionReason &&
+    comment.statusHistory.edges[0].node.rejectionReason.code;
+
+  const [activeTab, setActiveTab] = useState<DetailsTabs>(
+    hasDecision ? "DECISION" : "INFO"
+  );
 
   const onTabClick = useCallback(
     (id: string) => setActiveTab(id as DetailsTabs),
@@ -83,12 +91,6 @@ const ModerateCardDetailsContainer: FunctionComponent<Props> = ({
     comment.revision.actionCounts.reaction.total > 0
   );
 
-  const hasDecision =
-    comment.status === GQLCOMMENT_STATUS.REJECTED &&
-    comment.statusHistory.edges[0] &&
-    comment.statusHistory.edges[0].node.rejectionReason &&
-    comment.statusHistory.edges[0].node.rejectionReason.code;
-
   return (
     <HorizontalGutter>
       <TabBar variant="default" activeTab={activeTab} onTabClick={onTabClick}>
diff --git a/server/src/core/server/graph/schema/schema.graphql b/server/src/core/server/graph/schema/schema.graphql
index fa8bf3adbd..23b187ec59 100644
--- 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 {
@@ -3494,6 +3499,11 @@ type CommentModerationAction {
   createdAt is the time that the CommentModerationAction was created.
   """
   createdAt: Time!
+
+  """
+  customReason is a reason provided for rejection when the Other rejection code is selected.
+  """
+  customReason: String
 }
 
 type CommentModerationActionEdge {

From 4db9801d54757ce23240840b466978e132a41eac Mon Sep 17 00:00:00 2001
From: Kathryn Beaty <kathryn.beaty@voxmedia.com>
Date: Wed, 29 Nov 2023 09:34:22 -0500
Subject: [PATCH 3/5] add icon and translations

---
 .../ModerateCard/DecisionDetailsContainer.tsx | 35 +++++++++++-----
 .../ModerateCardDetailsContainer.css          | 11 +++++
 .../ModerateCardDetailsContainer.tsx          |  8 ++--
 .../icons/ModerationDecisionIcon.tsx          | 40 +++++++++++++++++++
 .../core/client/ui/components/icons/index.ts  |  1 +
 locales/en-US/admin.ftl                       |  8 ++++
 6 files changed, 90 insertions(+), 13 deletions(-)
 create mode 100644 client/src/core/client/ui/components/icons/ModerationDecisionIcon.tsx

diff --git a/client/src/core/client/admin/components/ModerateCard/DecisionDetailsContainer.tsx b/client/src/core/client/admin/components/ModerateCard/DecisionDetailsContainer.tsx
index badbbfcb68..b639f32260 100644
--- a/client/src/core/client/admin/components/ModerateCard/DecisionDetailsContainer.tsx
+++ b/client/src/core/client/admin/components/ModerateCard/DecisionDetailsContainer.tsx
@@ -1,4 +1,4 @@
-// import { Localized } from "@fluent/react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";
 import { graphql } from "react-relay";
 
@@ -8,6 +8,7 @@ import { Flex, HorizontalGutter, Timestamp } from "coral-ui/components/v2";
 import { DecisionDetailsContainer_comment } from "coral-admin/__generated__/DecisionDetailsContainer_comment.graphql";
 
 import styles from "./DecisionDetailsContainer.css";
+
 import { unsnake } from "../ModerationReason/formatting";
 
 interface Props {
@@ -21,21 +22,31 @@ const DecisionDetailsContainer: FunctionComponent<Props> = ({ comment }) => {
     <HorizontalGutter className={styles.wrapper} padding={3}>
       <Flex>
         <Flex direction="column" className={styles.full}>
-          <div className={styles.label}>Decision</div>
-          <div className={styles.rejected}>Rejected</div>
+          <Localized id="moderate-decisionDetails-decisionLabel">
+            <div className={styles.label}>Decision</div>
+          </Localized>
+          <Localized id="moderate-decisionDetails-rejected">
+            <div className={styles.rejected}>Rejected</div>
+          </Localized>
         </Flex>
         {statusHistory.rejectionReason && statusHistory.rejectionReason.code && (
           <Flex direction="column" className={styles.full}>
-            <div className={styles.label}>Reason</div>
-            <div className={styles.info}>
-              {unsnake(statusHistory.rejectionReason.code)}
-            </div>
+            <Localized id="moderate-decisionDetails-reasonLabel">
+              <div className={styles.label}>Reason</div>
+            </Localized>
+            <Localized id="">
+              <div className={styles.info}>
+                {unsnake(statusHistory.rejectionReason.code)}
+              </div>
+            </Localized>
           </Flex>
         )}
       </Flex>
       {statusHistory.rejectionReason?.legalGrounds && (
         <Flex direction="column">
-          <div className={styles.label}>Law broken</div>
+          <Localized id="moderate-decisionDetails-lawBrokenLabel">
+            <div className={styles.label}>Law broken</div>
+          </Localized>
           <div className={styles.info}>
             {statusHistory.rejectionReason?.legalGrounds}
           </div>
@@ -43,7 +54,9 @@ const DecisionDetailsContainer: FunctionComponent<Props> = ({ comment }) => {
       )}
       {statusHistory.rejectionReason?.customReason && (
         <Flex direction="column">
-          <div className={styles.label}>Custom reason</div>
+          <Localized id="moderate-decisionDetails-customReasonLabel">
+            <div className={styles.label}>Custom reason</div>
+          </Localized>
           <div className={styles.info}>
             {statusHistory.rejectionReason?.customReason}
           </div>
@@ -51,7 +64,9 @@ const DecisionDetailsContainer: FunctionComponent<Props> = ({ comment }) => {
       )}
       {statusHistory.rejectionReason?.detailedExplanation && (
         <Flex direction="column">
-          <div className={styles.label}>Detailed explanation</div>
+          <Localized id="moderate-decisionDetails-detailedExplanationLabel">
+            <div className={styles.label}>Detailed explanation</div>
+          </Localized>
           <div className={styles.info}>
             {statusHistory.rejectionReason?.detailedExplanation}
           </div>
diff --git a/client/src/core/client/admin/components/ModerateCard/ModerateCardDetailsContainer.css b/client/src/core/client/admin/components/ModerateCard/ModerateCardDetailsContainer.css
index 5886f8d3f8..86ecb9ca96 100644
--- a/client/src/core/client/admin/components/ModerateCard/ModerateCardDetailsContainer.css
+++ b/client/src/core/client/admin/components/ModerateCard/ModerateCardDetailsContainer.css
@@ -2,3 +2,14 @@
   text-transform: uppercase;
   font-size: var(--font-size-2);
 }
+
+.decisionIcon {
+  height: 1.125rem;
+  width: 1.75rem;
+  margin: 0 var(--spacing-1) 0 0 !important;
+}
+
+.decisionIcon svg {
+  height: 1.125rem;
+  width: 1.75rem;
+}
diff --git a/client/src/core/client/admin/components/ModerateCard/ModerateCardDetailsContainer.tsx b/client/src/core/client/admin/components/ModerateCard/ModerateCardDetailsContainer.tsx
index 927cb8c6fa..144330a941 100644
--- a/client/src/core/client/admin/components/ModerateCard/ModerateCardDetailsContainer.tsx
+++ b/client/src/core/client/admin/components/ModerateCard/ModerateCardDetailsContainer.tsx
@@ -13,6 +13,7 @@ import {
   CheckDoubleIcon,
   LikeIcon,
   ListBulletsIcon,
+  ModerationDecisionIcon,
   PencilIcon,
   SvgIcon,
 } from "coral-ui/components/icons";
@@ -97,9 +98,10 @@ const ModerateCardDetailsContainer: FunctionComponent<Props> = ({
         {hasDecision && (
           <Tab tabID="DECISION" classes={styles}>
             <Flex alignItems="center" itemGutter>
-              {/* TODO: Update this icon */}
-              <SvgIcon Icon={ListBulletsIcon} />
-              {/* TODO: Add this translation */}
+              <SvgIcon
+                className={styles.decisionIcon}
+                Icon={ModerationDecisionIcon}
+              />
               <Localized id="moderateCardDetails-tab-decision">
                 <span>Decision</span>
               </Localized>
diff --git a/client/src/core/client/ui/components/icons/ModerationDecisionIcon.tsx b/client/src/core/client/ui/components/icons/ModerationDecisionIcon.tsx
new file mode 100644
index 0000000000..d455e86d84
--- /dev/null
+++ b/client/src/core/client/ui/components/icons/ModerationDecisionIcon.tsx
@@ -0,0 +1,40 @@
+import React, { FunctionComponent } from "react";
+
+const ModerationDecisionIcon: FunctionComponent = () => {
+  return (
+    <svg viewBox="0 0 30 18" xmlns="http://www.w3.org/2000/svg">
+      <path
+        stroke="currentColor"
+        d="M19.5218 9.10378L20.6125 10.0736L23.1824 8.06207"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M28.0738 4.4889L18.9097 1.04258C18.9097 1.04258 18.2988 0.812827 18.069 1.42377L13.9334 12.4207C13.9334 12.4207 13.7037 13.0316 14.3146 13.2613L23.4787 16.7077C23.4787 16.7077 24.0896 16.9374 24.3194 16.3265L28.455 5.32959C28.455 5.32959 28.6847 4.71865 28.0738 4.4889Z"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        stroke="currentColor"
+      />
+      <path
+        d="M12.1194 14.6012L6.51917 16.7069C6.43887 16.7372 6.35336 16.7515 6.26755 16.7487C6.18173 16.746 6.0973 16.7264 6.01909 16.691C5.94087 16.6556 5.87041 16.6051 5.81174 16.5424C5.75307 16.4797 5.70734 16.4061 5.67718 16.3257L1.54159 5.32879C1.51142 5.24856 1.49735 5.16317 1.50018 5.0775C1.503 4.99183 1.52268 4.90756 1.55807 4.82949C1.59347 4.75143 1.64389 4.6811 1.70647 4.62252C1.76905 4.56394 1.84255 4.51826 1.92278 4.48809L11.0869 1.04177C11.2489 0.980839 11.4285 0.986767 11.5861 1.05825C11.7438 1.12974 11.8666 1.26093 11.9275 1.42296L13.9092 6.68251"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        stroke="currentColor"
+      />
+      <path
+        d="M9.75537 6.77246L7.84945 10.9759"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        stroke="currentColor"
+      />
+      <path
+        d="M6.70059 7.92139L10.9041 9.82731"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        stroke="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default ModerationDecisionIcon;
diff --git a/client/src/core/client/ui/components/icons/index.ts b/client/src/core/client/ui/components/icons/index.ts
index aae5ca8f94..e9994ed0ae 100644
--- a/client/src/core/client/ui/components/icons/index.ts
+++ b/client/src/core/client/ui/components/icons/index.ts
@@ -51,6 +51,7 @@ export { default as ListBulletsIcon } from "./ListBulletsIcon";
 export { default as LockIcon } from "./LockIcon";
 export { default as MessagesBubbleSquareIcon } from "./MessagesBubbleSquareIcon";
 export { default as MessagesBubbleSquareWarningIcon } from "./MessagesBubbleSquareWarningIcon";
+export { default as ModerationDecisionIcon } from "./ModerationDecisionIcon";
 export { default as MultipleActionsChatIcon } from "./MultipleActionsChatIcon";
 export { default as MultipleNeutralIcon } from "./MultipleNeutralIcon";
 export { default as NavigationMenuHorizontalIcon } from "./NavigationMenuHorizontalIcon";
diff --git a/locales/en-US/admin.ftl b/locales/en-US/admin.ftl
index d30171666f..063dd35b17 100644
--- a/locales/en-US/admin.ftl
+++ b/locales/en-US/admin.ftl
@@ -1046,6 +1046,13 @@ moderate-linkDetails-label = Copy link to this comment
 moderate-in-stream-link-copy = In Stream
 moderate-in-moderation-link-copy = In Moderation
 
+moderate-decisionDetails-decisionLabel = Decision
+moderate-decisionDetails-rejected = Rejected
+moderate-decisionDetails-reasonLabel = Reason
+moderate-decisionDetails-lawBrokenLabel = Law broken
+moderate-decisionDetails-customReasonLabel = Custom reason
+moderate-decisionDetails-detailedExplanationLabel = Detailed explanation
+
 moderate-emptyQueue-pending = Nicely done! There are no more pending comments to moderate.
 moderate-emptyQueue-reported = Nicely done! There are no more reported comments to moderate.
 moderate-emptyQueue-unmoderated = Nicely done! All comments have been moderated.
@@ -1108,6 +1115,7 @@ moderate-searchBar-goTo = Go to
 moderate-searchBar-seeAllResults = See all results
 
 moderateCardDetails-tab-info = Info
+moderateCardDetails-tab-decision = Decision
 moderateCardDetails-tab-edits = Edit history
 moderateCardDetails-tab-automatedActions = Automated actions
 moderateCardDetails-tab-reactions = Reactions

From 34e5dc17f27071e6ee203b840c8d5e9d6881d4f7 Mon Sep 17 00:00:00 2001
From: Kathryn Beaty <kathryn.beaty@voxmedia.com>
Date: Wed, 29 Nov 2023 10:22:22 -0500
Subject: [PATCH 4/5] update tests

---
 .../src/core/client/admin/test/moderate/regularQueue.spec.tsx   | 2 ++
 .../src/core/client/admin/test/moderate/rejectedQueue.spec.tsx  | 1 +
 .../src/core/client/admin/test/moderate/singleComment.spec.tsx  | 2 ++
 3 files changed, 5 insertions(+)

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 216657264a..a0f6c65c73 100644
--- a/client/src/core/client/admin/test/moderate/regularQueue.spec.tsx
+++ b/client/src/core/client/admin/test/moderate/regularQueue.spec.tsx
@@ -619,6 +619,7 @@ it("approves comment in reported queue", async () => {
               edges: [
                 {
                   node: {
+                    createdAt: "2023-06-01T14:21:21.890Z",
                     id: "mod-action",
                     status: GQLCOMMENT_STATUS.APPROVED,
                     moderator: {
@@ -727,6 +728,7 @@ it("rejects comment in reported queue", async () => {
               edges: [
                 {
                   node: {
+                    createdAt: "2023-06-01T14:21:21.890Z",
                     id: "mod-action",
                     status: GQLCOMMENT_STATUS.REJECTED,
                     moderator: {
diff --git a/client/src/core/client/admin/test/moderate/rejectedQueue.spec.tsx b/client/src/core/client/admin/test/moderate/rejectedQueue.spec.tsx
index b595221a56..18ef9d756f 100644
--- a/client/src/core/client/admin/test/moderate/rejectedQueue.spec.tsx
+++ b/client/src/core/client/admin/test/moderate/rejectedQueue.spec.tsx
@@ -215,6 +215,7 @@ it("approves comment in rejected queue", async () => {
               edges: [
                 {
                   node: {
+                    createdAt: "2023-06-01T14:21:21.890Z",
                     id: "mod-action",
                     status: GQLCOMMENT_STATUS.APPROVED,
                     moderator: {
diff --git a/client/src/core/client/admin/test/moderate/singleComment.spec.tsx b/client/src/core/client/admin/test/moderate/singleComment.spec.tsx
index 23f0ca6a99..bf69257632 100644
--- a/client/src/core/client/admin/test/moderate/singleComment.spec.tsx
+++ b/client/src/core/client/admin/test/moderate/singleComment.spec.tsx
@@ -115,6 +115,7 @@ it("approves single comment", async () => {
               edges: [
                 {
                   node: {
+                    createdAt: "2023-06-01T14:21:21.890Z",
                     id: "mod-action",
                     status: GQLCOMMENT_STATUS.APPROVED,
                     moderator: {
@@ -163,6 +164,7 @@ it("rejects single comment", async () => {
               edges: [
                 {
                   node: {
+                    createdAt: "2023-06-01T14:21:21.890Z",
                     id: "mod-action",
                     status: GQLCOMMENT_STATUS.REJECTED,
                     author: {

From db71aceef6c0e76a095e17e3b752d9e1609d98dd Mon Sep 17 00:00:00 2001
From: Kathryn Beaty <kathryn.beaty@voxmedia.com>
Date: Wed, 29 Nov 2023 10:54:52 -0500
Subject: [PATCH 5/5] some refactors in decision details

---
 .../ModerateCard/DecisionDetailsContainer.tsx | 30 ++++++++-----------
 1 file changed, 13 insertions(+), 17 deletions(-)

diff --git a/client/src/core/client/admin/components/ModerateCard/DecisionDetailsContainer.tsx b/client/src/core/client/admin/components/ModerateCard/DecisionDetailsContainer.tsx
index b639f32260..c150805140 100644
--- a/client/src/core/client/admin/components/ModerateCard/DecisionDetailsContainer.tsx
+++ b/client/src/core/client/admin/components/ModerateCard/DecisionDetailsContainer.tsx
@@ -17,6 +17,7 @@ interface Props {
 
 const DecisionDetailsContainer: FunctionComponent<Props> = ({ comment }) => {
   const statusHistory = comment.statusHistory.edges[0].node;
+  const { rejectionReason, createdAt } = statusHistory;
 
   return (
     <HorizontalGutter className={styles.wrapper} padding={3}>
@@ -29,52 +30,48 @@ const DecisionDetailsContainer: FunctionComponent<Props> = ({ comment }) => {
             <div className={styles.rejected}>Rejected</div>
           </Localized>
         </Flex>
-        {statusHistory.rejectionReason && statusHistory.rejectionReason.code && (
+        {rejectionReason && rejectionReason.code && (
           <Flex direction="column" className={styles.full}>
             <Localized id="moderate-decisionDetails-reasonLabel">
               <div className={styles.label}>Reason</div>
             </Localized>
-            <Localized id="">
-              <div className={styles.info}>
-                {unsnake(statusHistory.rejectionReason.code)}
-              </div>
+            <Localized
+              id={`common-moderationReason-rejectionReason-${rejectionReason.code}`}
+            >
+              <div className={styles.info}>{unsnake(rejectionReason.code)}</div>
             </Localized>
           </Flex>
         )}
       </Flex>
-      {statusHistory.rejectionReason?.legalGrounds && (
+      {rejectionReason?.legalGrounds && (
         <Flex direction="column">
           <Localized id="moderate-decisionDetails-lawBrokenLabel">
             <div className={styles.label}>Law broken</div>
           </Localized>
-          <div className={styles.info}>
-            {statusHistory.rejectionReason?.legalGrounds}
-          </div>
+          <div className={styles.info}>{rejectionReason?.legalGrounds}</div>
         </Flex>
       )}
-      {statusHistory.rejectionReason?.customReason && (
+      {rejectionReason?.customReason && (
         <Flex direction="column">
           <Localized id="moderate-decisionDetails-customReasonLabel">
             <div className={styles.label}>Custom reason</div>
           </Localized>
-          <div className={styles.info}>
-            {statusHistory.rejectionReason?.customReason}
-          </div>
+          <div className={styles.info}>{rejectionReason?.customReason}</div>
         </Flex>
       )}
-      {statusHistory.rejectionReason?.detailedExplanation && (
+      {rejectionReason?.detailedExplanation && (
         <Flex direction="column">
           <Localized id="moderate-decisionDetails-detailedExplanationLabel">
             <div className={styles.label}>Detailed explanation</div>
           </Localized>
           <div className={styles.info}>
-            {statusHistory.rejectionReason?.detailedExplanation}
+            {rejectionReason?.detailedExplanation}
           </div>
         </Flex>
       )}
       <Flex>
         <div className={styles.label}>
-          <Timestamp>{statusHistory.createdAt}</Timestamp>
+          <Timestamp>{createdAt}</Timestamp>
         </div>
       </Flex>
     </HorizontalGutter>
@@ -89,7 +86,6 @@ const enhanced = withFragmentContainer<Props>({
         edges {
           node {
             createdAt
-            status
             rejectionReason {
               code
               legalGrounds