Merge pull request #2865 from GreenAsJade/dissenter_note

Dissenter note

src/lib/report_manager.tsx

@@ -352,11 +352,17 @@ class ReportManager extends EventEmitter<Events> {
         return res;
     }
 
-    public vote(report_id: number, voted_action: string, escalation_note: string): Promise<Report> {
+    public vote(
+        report_id: number,
+        voted_action: string,
+        escalation_note: string,
+        dissenter_note: string,
+    ): Promise<Report> {
         return post(`moderation/incident/${report_id}`, {
             action: "vote",
             voted_action: voted_action,
             escalation_note: escalation_note,
+            ...(dissenter_note && { dissenter_note }),
         })
             .then((res) => {
                 toast(

src/lib/report_util.ts

@@ -67,6 +67,7 @@ export interface Report {
     vote_counts: { [action: string]: number };
     voters: Vote[]; // votes from community moderators on this report
     escalation_note: string;
+    dissenter_note: string;
 
     unclaim: () => void;
     claim: () => void;

src/views/ReportsCenter/ModerationActionSelector.styl

@@ -2,7 +2,7 @@
 
     .action-buttons {
         display: flex;
-        justify-content: flex-end;    
+        justify-content: flex-end;
     }
 
 }

src/views/ReportsCenter/ModerationActionSelector.tsx

@@ -27,8 +27,7 @@ interface ModerationActionSelectorProps {
     vote_counts: { [action: string]: number };
     enable: boolean;
     report: Report;
-    claim: () => void;
-    submit: (action: string, note: string) => void;
+    submit: (action: string, note: string, dissenter_note: string) => void;
 }
 
 // Translatable versions of the prompts for Community Moderators.
@@ -152,19 +151,19 @@ export function ModerationActionSelector({
     vote_counts,
     enable,
     report,
-    claim,
     submit,
 }: ModerationActionSelectorProps): JSX.Element {
     const user = useUser();
     const reportedBySelf = user.id === report.reporting_user.id;
 
+    const [voted, setVoted] = React.useState(false);
+
     const [selectedOption, setSelectedOption] = React.useState("");
     const [escalation_note, setEscalationNote] = React.useState("");
-    const [voted, setVoted] = React.useState(false);
+    const [dissenter_note, setDissenterNote] = React.useState("");
 
     const updateSelectedAction = (e: React.ChangeEvent<HTMLInputElement>) => {
         setSelectedOption(e.target.value);
-        claim();
     };
 
     const { registerTargetItem } = React.useContext(DynamicHelp.Api);
@@ -174,6 +173,14 @@ export function ModerationActionSelector({
     // If for some reason we didn't get any actions to offer, we'll just offer "escalate"
     const action_choices = available_actions ? available_actions : ["escalate"];
 
+    // If we're in dissent, we'll ask for a "dissent" note
+    const inDissent =
+        selectedOption &&
+        !!Object.keys(vote_counts).find(
+            (k: string) =>
+                k !== selectedOption && (vote_counts[selectedOption] ?? 0) < vote_counts[k],
+        );
+
     return (
         <div className="ModerationActionSelector" ref={voting_pane}>
             <h4>
@@ -217,7 +224,7 @@ export function ModerationActionSelector({
                 ))}
             {selectedOption === "escalate" && (
                 <textarea
-                    id="escalation-note-text"
+                    id="escalation-note"
                     placeholder={llm_pgettext(
                         "A placeholder prompting community moderators for the reason why they are escalating a report",
                         "Reason for escalating?",
@@ -227,6 +234,18 @@ export function ModerationActionSelector({
                     onChange={(ev) => setEscalationNote(ev.target.value)}
                 />
             )}
+            {inDissent && selectedOption !== "escalate" && (
+                <textarea
+                    id="dissenter-note"
+                    placeholder={llm_pgettext(
+                        "A placeholder prompting community moderators for the reason why they are disagreeing with a vote",
+                        "(Optional) What is it that the other votes do not seem to take into account?",
+                    )}
+                    rows={5}
+                    value={dissenter_note}
+                    onChange={(ev) => setDissenterNote(ev.target.value)}
+                />
+            )}
             <span className="action-buttons">
                 {((reportedBySelf && enable) || null) && (
                     <button className="reject" onClick={report.cancel}>
@@ -246,7 +265,7 @@ export function ModerationActionSelector({
                         }
                         onClick={() => {
                             setVoted(true);
-                            submit(selectedOption, escalation_note);
+                            submit(selectedOption, escalation_note, dissenter_note);
                         }}
                     >
                         {llm_pgettext("A label on a button for submitting a vote", "Vote")}

src/views/ReportsCenter/ViewReport.styl

@@ -161,6 +161,7 @@
 
     .notes {
         flex-basis: 50%;
+        white-space: pre-wrap;
     }
 
     .voting {

src/views/ReportsCenter/ViewReport.tsx

@@ -24,7 +24,7 @@ import { report_categories, ReportType } from "@/components/Report";
 import { report_manager } from "@/lib/report_manager";
 import { Report } from "@/lib/report_util";
 import { AutoTranslate } from "@/components/AutoTranslate";
-import { interpolate, _, pgettext } from "@/lib/translate";
+import { interpolate, _, pgettext, llm_pgettext } from "@/lib/translate";
 import { Player, ShowPlayersInReportContext } from "@/components/Player";
 import { Link } from "react-router-dom";
 import { post } from "@/lib/requests";
@@ -555,12 +555,9 @@ export function ViewReport({ report_id, reports, onChange }: ViewReportProps): J
                             <ModerationActionSelector
                                 available_actions={availableActions ?? []}
                                 vote_counts={voteCounts}
-                                claim={() => {
-                                    /* community moderators don't claim reports */
-                                }}
-                                submit={(action, note) => {
+                                submit={(action, note, dissenter_note) => {
                                     void report_manager
-                                        .vote(report.id, action, note)
+                                        .vote(report.id, action, note, dissenter_note)
                                         .then(() => next());
                                 }}
                                 enable={
@@ -571,6 +568,25 @@ export function ViewReport({ report_id, reports, onChange }: ViewReportProps): J
                                 key={report.id}
                                 report={report}
                             />
+                            {report.dissenter_note && (
+                                <div className="notes">
+                                    <h4>
+                                        {llm_pgettext(
+                                            "Heading for a paragraph",
+                                            "Dissenting voter notes:",
+                                        )}
+                                    </h4>
+                                    <div className="Card">{report.dissenter_note}</div>
+                                </div>
+                            )}
+                        </div>
+                    )}
+                    {report.dissenter_note && user.is_moderator && (
+                        <div className="notes">
+                            <h4>
+                                {llm_pgettext("Heading for a paragraph", "Dissenting voter notes:")}
+                            </h4>
+                            <div className="Card">{report.dissenter_note}</div>
                         </div>
                     )}
                 </div>