From d2b3d37724a999d4cc78c46157593267e29d184e Mon Sep 17 00:00:00 2001
From: tobi <31960611+tsmethurst@users.noreply.github.com>
Date: Tue, 18 Jun 2024 18:18:00 +0200
Subject: [feature/frontend] Reports frontend v2 (#3022)

* use apiutil + paging in admin processor+handlers

* we're making it happen

* fix little whoopsie

* styling for report list

* don't youuuu forget about meee don't don't don't don't

* last bits

* sanitize content before showing in report statuses

* update report docs
---
 .../settings/views/moderation/reports/detail.tsx   | 335 +++++++++++----------
 .../settings/views/moderation/reports/overview.tsx |  97 ------
 .../settings/views/moderation/reports/search.tsx   | 252 ++++++++++++++++
 3 files changed, 420 insertions(+), 264 deletions(-)
 delete mode 100644 web/source/settings/views/moderation/reports/overview.tsx
 create mode 100644 web/source/settings/views/moderation/reports/search.tsx

(limited to 'web/source/settings/views/moderation/reports')

diff --git a/web/source/settings/views/moderation/reports/detail.tsx b/web/source/settings/views/moderation/reports/detail.tsx
index ad8d69a47..7d6e542fb 100644
--- a/web/source/settings/views/moderation/reports/detail.tsx
+++ b/web/source/settings/views/moderation/reports/detail.tsx
@@ -17,8 +17,8 @@
 	along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import React, { useState } from "react";
-import { useParams } from "wouter";
+import React from "react";
+import { useLocation, useParams } from "wouter";
 import FormWithData from "../../../lib/form/form-with-data";
 import BackButton from "../../../components/back-button";
 import { useValue, useTextInput } from "../../../lib/form";
@@ -28,84 +28,172 @@ import MutationButton from "../../../components/form/mutation-button";
 import Username from "../../../components/username";
 import { useGetReportQuery, useResolveReportMutation } from "../../../lib/query/admin/reports";
 import { useBaseUrl } from "../../../lib/navigation/util";
+import { AdminReport } from "../../../lib/types/report";
+import { yesOrNo } from "../../../lib/util";
+import { Status } from "../../../components/status";
 
 export default function ReportDetail({ }) {
+	const params: { reportId: string } = useParams();
 	const baseUrl = useBaseUrl();
-	const params = useParams();
+	const backLocation: String = history.state?.backLocation ?? `~${baseUrl}`;
 
 	return (
-		<div className="reports">
-			<h1><BackButton to={`~${baseUrl}`}/> Report Details</h1>
+		<div className="report-detail">
+			<h1><BackButton to={backLocation}/> Report Details</h1>
 			<FormWithData
 				dataQuery={useGetReportQuery}
 				queryArg={params.reportId}
 				DataForm={ReportDetailForm}
+				{...{ backLocation: backLocation }}
 			/>
 		</div>
 	);
 }
 
-function ReportDetailForm({ data: report }) {
+function ReportDetailForm({ data: report }: { data: AdminReport }) {
+	const [ location ] = useLocation();
+	const baseUrl = useBaseUrl();
+	
+	return (
+		<>
+			<ReportBasicInfo
+				report={report}
+				baseUrl={baseUrl}
+				location={location}
+			/>
+			
+			{ report.action_taken
+				&& <ReportHistory 
+					report={report}
+					baseUrl={baseUrl}
+					location={location}
+				/>
+			}
+
+			{ report.statuses &&
+				<ReportStatuses report={report} />
+			}
+
+			{ !report.action_taken &&
+				<ReportActionForm report={report} />
+			}
+		</>
+	);
+}
+
+interface ReportSectionProps {
+	report: AdminReport;
+	baseUrl: string;
+	location: string;
+}
+
+function ReportBasicInfo({ report, baseUrl, location }: ReportSectionProps) {
 	const from = report.account;
 	const target = report.target_account;
+	const comment = report.comment;
+	const status = report.action_taken ? "Resolved" : "Unresolved";
+	const created = new Date(report.created_at).toLocaleString();
 
 	return (
-		<div className="report detail">
-			<div className="usernames">
-				<Username
-					account={from}
-					linkTo={`~/settings/moderation/accounts/${from.id}`}
-					backLocation={`~/settings/moderation/reports/${report.id}`}
-				/>
-				<> reported </>
-				<Username
-					account={target}
-					linkTo={`~/settings/moderation/accounts/${target.id}`}
-					backLocation={`~/settings/moderation/reports/${report.id}`}
-				/>
+		<dl className="info-list overview">
+			<div className="info-list-entry">
+				<dt>Reported account</dt>
+				<dd>
+					<Username
+						account={target}
+						linkTo={`~/settings/moderation/accounts/${target.id}`}
+						backLocation={`~${baseUrl}${location}`}
+					/>
+				</dd>
+			</div>
+		
+			<div className="info-list-entry">
+				<dt>Reported by</dt>
+				<dd>
+					<Username
+						account={from}
+						linkTo={`~/settings/moderation/accounts/${from.id}`}
+						backLocation={`~${baseUrl}${location}`}
+					/>
+				</dd>
 			</div>
 
-			{report.action_taken &&
-				<div className="info">
-					<h3>Resolved by @{report.action_taken_by_account.account.acct}</h3>
-					<span className="timestamp">at {new Date(report.action_taken_at).toLocaleString()}</span>
-					<br />
-					<b>Comment: </b><span>{report.action_taken_comment}</span>
-				</div>
-			}
+			<div className="info-list-entry">
+				<dt>Status</dt>
+				<dd>
+					{ report.action_taken
+						? <>{status}</>
+						: <b>{status}</b>
+					}
+				</dd>
+			</div>
 
-			<div className="info-block">
-				<h3>Report info:</h3>
-				<div className="details">
-					<b>Created: </b>
-					<span>{new Date(report.created_at).toLocaleString()}</span>
+			<div className="info-list-entry">
+				<dt>Reason</dt>
+				<dd>
+					{ comment.length > 0
+						? <>{comment}</>
+						: <i>none provided</i>
+					}
+				</dd>
+			</div>
 
-					<b>Forwarded: </b> <span>{report.forwarded ? "Yes" : "No"}</span>
-					<b>Category: </b> <span>{report.category}</span>
+			<div className="info-list-entry">
+				<dt>Created</dt>
+				<dd>
+					<time dateTime={report.created_at}>{created}</time>
+				</dd>
+			</div>
 
-					<b>Reason: </b>
-					{report.comment.length > 0
-						? <p>{report.comment}</p>
-						: <i className="no-comment">none provided</i>
-					}
+			<div className="info-list-entry">
+				<dt>Category</dt>
+				<dd>{ report.category }</dd>
+			</div>
 
-				</div>
+			<div className="info-list-entry">
+				<dt>Forwarded</dt>
+				<dd>{ yesOrNo(report.forwarded) }</dd>
 			</div>
+		</dl>
+	);
+}
 
-			{!report.action_taken && <ReportActionForm report={report} />}
-
-			{
-				report.statuses.length > 0 &&
-				<div className="info-block">
-					<h3>Reported toots ({report.statuses.length}):</h3>
-					<div className="reported-toots">
-						{report.statuses.map((status) => (
-							<ReportedToot key={status.id} toot={status} />
-						))}
-					</div>
+function ReportHistory({ report, baseUrl, location }: ReportSectionProps) {
+	const handled_by = report.action_taken_by_account;
+	if (!handled_by) {
+		throw "report handled by action_taken_by_account undefined";
+	}
+	
+	const handled = report.action_taken_at ? new Date(report.action_taken_at).toLocaleString() : "never";
+	
+	return (
+		<>
+			<h3>Moderation History</h3>
+			<dl className="info-list">
+				<div className="info-list-entry">
+					<dt>Handled by</dt>
+					<dd>
+						<Username
+							account={handled_by}
+							linkTo={`~/settings/moderation/accounts/${handled_by.id}`}
+							backLocation={`~${baseUrl}${location}`}
+						/>
+					</dd>
 				</div>
-			}
-		</div>
+
+				<div className="info-list-entry">
+					<dt>Handled</dt>
+					<dd>
+						<time dateTime={report.action_taken_at}>{handled}</time>
+					</dd>
+				</div>
+
+				<div className="info-list-entry">
+					<dt>Comment</dt>
+					<dd>{ report.action_taken_comment ?? "none"}</dd>
+				</div>
+			</dl>
+		</>
 	);
 }
 
@@ -118,13 +206,18 @@ function ReportActionForm({ report }) {
 	const [submit, result] = useFormSubmit(form, useResolveReportMutation(), { changedOnly: false });
 
 	return (
-		<form onSubmit={submit} className="info-block">
-			<h3>Resolving this report</h3>
-			<p>
+		<form onSubmit={submit}>
+			<h3>Resolve this report</h3>
+			<>
 				An optional comment can be included while resolving this report.
-				Useful for providing an explanation about what action was taken (if any) before the report was marked as resolved.<br />
-				<b>This will be visible to the user that created the report!</b>
-			</p>
+				This is useful for providing an explanation about what action was
+				taken (if any) before the report was marked as resolved.
+				<br />
+				<b>
+					Any comment made here will be visible
+					to the user that created the report!
+				</b>
+			</>
 			<TextArea
 				field={form.comment}
 				label="Comment"
@@ -138,116 +231,24 @@ function ReportActionForm({ report }) {
 	);
 }
 
-function ReportedToot({ toot }) {
-	const account = toot.account;
-
-	return (
-		<article className="status expanded">
-			<header className="status-header">
-				<address>
-					<a style={{margin: 0}}>
-						<img className="avatar" src={account.avatar} alt="" />
-						<dl className="author-strap">
-							<dt className="sr-only">Display name</dt>
-							<dd className="displayname text-cutoff">
-								{account.display_name.trim().length > 0 ? account.display_name : account.username}
-							</dd>
-							<dt className="sr-only">Username</dt>
-							<dd className="username text-cutoff">@{account.username}</dd>
-						</dl>
-					</a>
-				</address>
-			</header>
-			<section className="status-body">
-				<div className="text">
-					<div className="content">
-						{toot.spoiler_text?.length > 0
-							? <TootCW content={toot.content} note={toot.spoiler_text} />
-							: toot.content
-						}
-					</div>
-				</div>
-				{toot.media_attachments?.length > 0 &&
-					<TootMedia media={toot.media_attachments} sensitive={toot.sensitive} />
-				}
-			</section>
-			<aside className="status-info">
-				<dl className="status-stats">
-					<div className="stats-grouping">
-						<div className="stats-item published-at text-cutoff">
-							<dt className="sr-only">Published</dt>
-							<dd>
-								<time dateTime={toot.created_at}>{new Date(toot.created_at).toLocaleString()}</time>
-							</dd>
-						</div>
-					</div>
-				</dl>
-			</aside>
-		</article>
-	);
-}
-
-function TootCW({ note, content }) {
-	const [visible, setVisible] = useState(false);
-
-	function toggleVisible() {
-		setVisible(!visible);
+function ReportStatuses({ report }: { report: AdminReport }) {
+	if (report.statuses.length === 0) {
+		return null;
 	}
-
+	
 	return (
-		<>
-			<div className="spoiler">
-				<span>{note}</span>
-				<label className="button spoiler-label" onClick={toggleVisible}>Show {visible ? "less" : "more"}</label>
-			</div>
-			{visible && content}
-		</>
-	);
-}
-
-function TootMedia({ media, sensitive }) {
-	let classes = (media.length % 2 == 0) ? "even" : "odd";
-	if (media.length == 1) {
-		classes += " single";
-	}
-
-	return (
-		<div className={`media photoswipe-gallery ${classes}`}>
-			{media.map((m) => (
-				<div key={m.id} className="media-wrapper">
-					{sensitive && <>
-						<input id={`sensitiveMedia-${m.id}`} type="checkbox" className="sensitive-checkbox hidden" />
-						<div className="sensitive">
-							<div className="open">
-								<label htmlFor={`sensitiveMedia-${m.id}`} className="button" role="button" tabIndex={0}>
-									<i className="fa fa-eye-slash" title="Hide sensitive media"></i>
-								</label>
-							</div>
-							<div className="closed" title={m.description}>
-								<label htmlFor={`sensitiveMedia-${m.id}`} className="button" role="button" tabIndex={0}>
-									Show sensitive media
-								</label>
-							</div>
-						</div>
-					</>}
-					<a
-						href={m.url}
-						title={m.description}
-						target="_blank"
-						rel="noreferrer"
-						data-cropped="true"
-						data-pswp-width={`${m.meta?.original.width}px`}
-						data-pswp-height={`${m.meta?.original.height}px`}
-					>
-						<img
-							alt={m.description}
-							src={m.url}
-							// thumb={m.preview_url}
-							sizes={m.meta?.original}
-						/>
-					</a>
-				</div>
-			))}
+		<div className="report-statuses">
+			<h3>Reported Statuses</h3>
+			<ul className="thread">
+				{ report.statuses.map((status) => {
+					return (
+						<Status
+							key={status.id}
+							status={status}
+					 	/>
+					);
+				})}
+			</ul>
 		</div>
 	);
 }
diff --git a/web/source/settings/views/moderation/reports/overview.tsx b/web/source/settings/views/moderation/reports/overview.tsx
deleted file mode 100644
index 18eb5492a..000000000
--- a/web/source/settings/views/moderation/reports/overview.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-/*
-	GoToSocial
-	Copyright (C) GoToSocial Authors admin@gotosocial.org
-	SPDX-License-Identifier: AGPL-3.0-or-later
-
-	This program is free software: you can redistribute it and/or modify
-	it under the terms of the GNU Affero General Public License as published by
-	the Free Software Foundation, either version 3 of the License, or
-	(at your option) any later version.
-
-	This program is distributed in the hope that it will be useful,
-	but WITHOUT ANY WARRANTY; without even the implied warranty of
-	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-	GNU Affero General Public License for more details.
-
-	You should have received a copy of the GNU Affero General Public License
-	along with this program.  If not, see <http://www.gnu.org/licenses/>.
-*/
-
-import React from "react";
-import { Link } from "wouter";
-import FormWithData from "../../../lib/form/form-with-data";
-import Username from "../../../components/username";
-import { useListReportsQuery } from "../../../lib/query/admin/reports";
-
-export function ReportOverview({ }) {
-	return (
-		<FormWithData
-			dataQuery={useListReportsQuery}
-			DataForm={ReportsList}
-		/>
-	);
-}
-
-function ReportsList({ data: reports }) {
-	return (
-		<div className="reports">
-			<div className="form-section-docs">
-				<h1>Reports</h1>
-				<p>
-					Here you can view and resolve reports made to your
-					instance, originating from local and remote users.
-				</p>
-				<a
-					href="https://docs.gotosocial.org/en/latest/admin/settings/#reports"
-					target="_blank"
-					className="docslink"
-					rel="noreferrer"
-				>
-					Learn more about this (opens in a new tab)
-				</a>
-			</div>
-			<div className="list">
-				{reports.map((report) => (
-					<ReportEntry key={report.id} report={report} />
-				))}
-			</div>
-		</div>
-	);
-}
-
-function ReportEntry({ report }) {
-	const from = report.account;
-	const target = report.target_account;
-
-	let comment = report.comment.length > 200
-		? report.comment.slice(0, 200) + "..."
-		: report.comment;
-
-	return (
-		<Link
-			to={`/${report.id}`}
-			className="nounderline"
-		>
-			<div className={`report entry${report.action_taken ? " resolved" : ""}`}>
-				<div className="byline">
-					<div className="usernames">
-						<Username account={from} /> reported <Username account={target} />
-					</div>
-					<h3 className="report-status">
-						{report.action_taken ? "Resolved" : "Open"}
-					</h3>
-				</div>
-				<div className="details">
-					<b>Created: </b>
-					<span>{new Date(report.created_at).toLocaleString()}</span>
-
-					<b>Reason: </b>
-					{comment.length > 0
-						? <p>{comment}</p>
-						: <i className="no-comment">none provided</i>
-					}
-				</div>
-			</div>
-		</Link>
-	);
-}
diff --git a/web/source/settings/views/moderation/reports/search.tsx b/web/source/settings/views/moderation/reports/search.tsx
new file mode 100644
index 000000000..da0c80d69
--- /dev/null
+++ b/web/source/settings/views/moderation/reports/search.tsx
@@ -0,0 +1,252 @@
+/*
+	GoToSocial
+	Copyright (C) GoToSocial Authors admin@gotosocial.org
+	SPDX-License-Identifier: AGPL-3.0-or-later
+
+	This program is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
+
+	This program is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
+
+	You should have received a copy of the GNU Affero General Public License
+	along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import React, { ReactNode, useEffect, useMemo } from "react";
+
+import { useLazySearchReportsQuery } from "../../../lib/query/admin/reports";
+import { useTextInput } from "../../../lib/form";
+import { PageableList } from "../../../components/pageable-list";
+import { Select } from "../../../components/form/inputs";
+import MutationButton from "../../../components/form/mutation-button";
+import { useLocation, useSearch } from "wouter";
+import Username from "../../../components/username";
+import { AdminReport } from "../../../lib/types/report";
+
+export default function ReportsSearch() {
+	return (
+		<div className="reports-view">
+			<h1>Reports Search</h1>
+			<span>
+				You can use the form below to search through reports
+				created by, or directed towards, accounts on this instance.
+			</span>
+			<ReportSearchForm />
+		</div>
+	);
+}
+
+function ReportSearchForm() {
+	const [ location, setLocation ] = useLocation();
+	const search = useSearch();
+	const urlQueryParams = useMemo(() => new URLSearchParams(search), [search]);
+	const hasParams = urlQueryParams.size != 0;
+	const [ searchReports, searchRes ] = useLazySearchReportsQuery();
+
+	// Populate search form using values from
+	// urlQueryParams, to allow paging.
+	const resolved = useMemo(() => {
+		const resolvedRaw = urlQueryParams.get("resolved");
+		if (resolvedRaw !== null) {
+			return resolvedRaw;
+		}
+	}, [urlQueryParams]);
+
+	const form = {
+		resolved: useTextInput("resolved", { defaultValue: resolved }),
+		account_id: useTextInput("account_id", { defaultValue: urlQueryParams.get("account_id") ?? "" }),
+		target_account_id: useTextInput("target_account_id", { defaultValue: urlQueryParams.get("target_account_id") ?? "" }),
+		limit: useTextInput("limit", { defaultValue: urlQueryParams.get("limit") ?? "20" })
+	};
+
+	const setResolved = form.resolved.setter;
+
+	// On mount, if urlQueryParams were provided,
+	// trigger the search. For example, if page
+	// was accessed at /search?origin=local&limit=20,
+	// then run a search with origin=local and
+	// limit=20 and immediately render the results.
+	//
+	// If no urlQueryParams set, use the default
+	// search (just show unresolved reports).
+	useEffect(() => {
+		if (hasParams) {
+			searchReports(Object.fromEntries(urlQueryParams));
+		} else {
+			setResolved("false");
+			setLocation(location + "?resolved=false");
+		}
+	}, [
+		urlQueryParams,
+		hasParams,
+		searchReports,
+		location,
+		setLocation,
+		setResolved,
+	]);
+
+	// Rather than triggering the search directly,
+	// the "submit" button changes the location
+	// based on form field params, and lets the
+	// useEffect hook above actually do the search.
+	function submitQuery(e) {
+		e.preventDefault();
+		
+		// Parse query parameters.
+		const entries = Object.entries(form).map(([k, v]) => {
+			// Take only defined form fields.
+			if (v.value === undefined || v.value.length === 0 || v.value === "any") {
+				return null;
+			}
+			return [[k, v.value]];
+		}).flatMap(kv => {
+			// Remove any nulls.
+			return kv || [];
+		});
+
+		const searchParams = new URLSearchParams(entries);
+		setLocation(location + "?" + searchParams.toString());
+	}
+
+	// Location to return to when user clicks "back" on the detail view.
+	const backLocation = location + (hasParams ? `?${urlQueryParams}` : "");
+	
+	// Function to map an item to a list entry.
+	function itemToEntry(report: AdminReport): ReactNode {
+		return (
+			<ReportListEntry
+				key={report.id}	
+				report={report}
+				linkTo={`/${report.id}`}
+				backLocation={backLocation}
+			/>
+		);
+	}
+
+	return (
+		<>
+			<form
+				onSubmit={submitQuery}
+				// Prevent password managers
+				// trying to fill in fields.
+				autoComplete="off"
+			>
+				<Select
+					field={form.resolved}
+					label="Report status"
+					options={
+						<>
+							<option value="false">Unresolved only</option>
+							<option value="true">Resolved only</option>
+							<option value="">Any</option>
+						</>
+					}
+				></Select>
+				<MutationButton
+					disabled={false}
+					label={"Search"}
+					result={searchRes}
+				/>
+			</form>
+			<PageableList
+				isLoading={searchRes.isLoading}
+				isFetching={searchRes.isFetching}
+				isSuccess={searchRes.isSuccess}
+				items={searchRes.data?.accounts}
+				itemToEntry={itemToEntry}
+				isError={searchRes.isError}
+				error={searchRes.error}
+				emptyMessage={<b>No reports found that match your query.</b>}
+				prevNextLinks={searchRes.data?.links}
+			/>
+		</>
+	);
+}
+
+interface ReportEntryProps {
+	report: AdminReport;
+	linkTo: string;
+	backLocation: string;
+}
+
+function ReportListEntry({ report, linkTo, backLocation }: ReportEntryProps) {
+	const [ _location, setLocation ] = useLocation();
+	
+	const from = report.account;
+	const target = report.target_account;
+	const comment = report.comment;
+	const status = report.action_taken ? "Resolved" : "Unresolved";
+	const created = new Date(report.created_at).toLocaleString();
+	const title = `${status}. @${target.account.acct} was reported by @${from.account.acct} on ${created}. Reason: "${comment}"`;
+
+	return (
+		<span
+			className={`pseudolink report entry${report.action_taken ? " resolved" : ""}`}
+			aria-label={title}
+			title={title}
+			onClick={() => {
+				// When clicking on a report, direct
+				// to the detail view for that report.
+				setLocation(linkTo, {
+					// Store the back location in history so
+					// the detail view can use it to return to
+					// this page (including query parameters).
+					state: { backLocation: backLocation }
+				});
+			}}
+			role="link"
+			tabIndex={0}
+		>
+			<dl className="info-list">
+				<div className="info-list-entry">
+					<dt>Reported account:</dt>
+					<dd className="text-cutoff">
+						<Username
+							account={target}
+							classNames={["text-cutoff report-byline"]}
+						/>
+					</dd>
+				</div>
+				
+				<div className="info-list-entry">
+					<dt>Reported by:</dt>
+					<dd className="text-cutoff reported-by">
+						<Username account={from} />
+					</dd>
+				</div>
+
+				<div className="info-list-entry">
+					<dt>Status:</dt>
+					<dd className="text-cutoff">
+						{ report.action_taken
+							? <>{status}</>
+							: <b>{status}</b>
+						}
+					</dd>
+				</div>
+
+				<div className="info-list-entry">
+					<dt>Reason:</dt>
+					<dd className="text-cutoff">
+						{ comment.length > 0
+							? <>{comment}</>
+							: <i>none provided</i>
+						}
+					</dd>
+				</div>
+
+				<div className="info-list-entry">
+					<dt>Created:</dt>
+					<dd className="text-cutoff">
+						<time dateTime={report.created_at}>{created}</time>
+					</dd>
+				</div>
+			</dl>
+		</span>
+	);
+}
-- 
cgit v1.3