diff options
Diffstat (limited to 'web/source/settings/views')
11 files changed, 434 insertions, 320 deletions
diff --git a/web/source/settings/views/admin/emoji/local/detail.tsx b/web/source/settings/views/admin/emoji/local/detail.tsx index 2913b6c17..4126bbedc 100644 --- a/web/source/settings/views/admin/emoji/local/detail.tsx +++ b/web/source/settings/views/admin/emoji/local/detail.tsx @@ -22,7 +22,7 @@ import { Redirect, useParams } from "wouter"; import { useComboBoxInput, useFileInput, useValue } from "../../../../lib/form"; import useFormSubmit from "../../../../lib/form/submit"; import { useBaseUrl } from "../../../../lib/navigation/util"; -import FakeToot from "../../../../components/fake-toot"; +import { FakeStatus } from "../../../../components/status"; import FormWithData from "../../../../lib/form/form-with-data"; import Loading from "../../../../components/loading"; import { FileInput } from "../../../../components/form/inputs"; @@ -124,14 +124,14 @@ function EmojiDetailForm({ data: emoji }) { disabled={!form.image.value} /> - <FakeToot> + <FakeStatus> Look at this new custom emoji <img className="emoji" src={form.image.previewValue ?? emoji.url} title={`:${emoji.shortcode}:`} alt={emoji.shortcode} /> isn't it cool? - </FakeToot> + </FakeStatus> {result.error && <Error error={result.error} />} {deleteResult.error && <Error error={deleteResult.error} />} diff --git a/web/source/settings/views/admin/emoji/local/new-emoji.tsx b/web/source/settings/views/admin/emoji/local/new-emoji.tsx index 20f45f372..f2f5a56b1 100644 --- a/web/source/settings/views/admin/emoji/local/new-emoji.tsx +++ b/web/source/settings/views/admin/emoji/local/new-emoji.tsx @@ -23,7 +23,7 @@ import useShortcode from "./use-shortcode"; import useFormSubmit from "../../../../lib/form/submit"; import { TextInput, FileInput } from "../../../../components/form/inputs"; import { CategorySelect } from '../category-select'; -import FakeToot from "../../../../components/fake-toot"; +import { FakeStatus } from "../../../../components/status"; import MutationButton from "../../../../components/form/mutation-button"; import { useAddEmojiMutation } from "../../../../lib/query/admin/custom-emoji"; import { useInstanceV1Query } from "../../../../lib/query/gts-api"; @@ -103,9 +103,9 @@ export default function NewEmojiForm() { <div> <h2>Add new custom emoji</h2> - <FakeToot> + <FakeStatus> Look at this new custom emoji {emojiOrShortcode} isn't it cool? - </FakeToot> + </FakeStatus> <form onSubmit={submitForm} className="form-flex"> <FileInput diff --git a/web/source/settings/views/admin/http-header-permissions/overview.tsx b/web/source/settings/views/admin/http-header-permissions/overview.tsx index 7735e624e..54b58b642 100644 --- a/web/source/settings/views/admin/http-header-permissions/overview.tsx +++ b/web/source/settings/views/admin/http-header-permissions/overview.tsx @@ -69,7 +69,7 @@ export default function HeaderPermsOverview() { return ( <dl key={perm.id} - className="entry spanlink" + className="entry pseudolink" onClick={() => { // When clicking on a header perm, // go to the detail view for perm. diff --git a/web/source/settings/views/moderation/accounts/detail/index.tsx b/web/source/settings/views/moderation/accounts/detail/index.tsx index 830a894cb..958a3121b 100644 --- a/web/source/settings/views/moderation/accounts/detail/index.tsx +++ b/web/source/settings/views/moderation/accounts/detail/index.tsx @@ -21,13 +21,13 @@ import React from "react"; import { useGetAccountQuery } from "../../../../lib/query/admin"; import FormWithData from "../../../../lib/form/form-with-data"; -import FakeProfile from "../../../../components/fake-profile"; +import FakeProfile from "../../../../components/profile"; import { AdminAccount } from "../../../../lib/types/account"; import { AccountActions } from "./actions"; import { useParams } from "wouter"; import { useBaseUrl } from "../../../../lib/navigation/util"; import BackButton from "../../../../components/back-button"; -import { UseOurInstanceAccount, yesOrNo } from "./util"; +import { UseOurInstanceAccount, yesOrNo } from "../../../../lib/util"; export default function AccountDetail() { const params: { accountID: string } = useParams(); diff --git a/web/source/settings/views/moderation/accounts/detail/util.tsx b/web/source/settings/views/moderation/accounts/detail/util.tsx deleted file mode 100644 index b82d44a6e..000000000 --- a/web/source/settings/views/moderation/accounts/detail/util.tsx +++ /dev/null @@ -1,43 +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 { useMemo } from "react"; - -import { AdminAccount } from "../../../../lib/types/account"; -import { store } from "../../../../redux/store"; - -export function yesOrNo(b: boolean): string { - return b ? "yes" : "no"; -} - -export function UseOurInstanceAccount(account: AdminAccount): boolean { - // Pull our own URL out of storage so we can - // tell if account is our instance account. - const ourDomain = useMemo(() => { - const instanceUrlStr = store.getState().oauth.instanceUrl; - if (!instanceUrlStr) { - return ""; - } - - const instanceUrl = new URL(instanceUrlStr); - return instanceUrl.host; - }, []); - - return !account.domain && account.username == ourDomain; -} diff --git a/web/source/settings/views/moderation/accounts/search/index.tsx b/web/source/settings/views/moderation/accounts/search/index.tsx index 16e89ce43..f37e22a66 100644 --- a/web/source/settings/views/moderation/accounts/search/index.tsx +++ b/web/source/settings/views/moderation/accounts/search/index.tsx @@ -83,7 +83,7 @@ export function AccountSearchForm() { } // Location to return to when user clicks "back" on the account detail view. - const backLocation = location + (urlQueryParams ? `?${urlQueryParams}` : ""); + const backLocation = location + (urlQueryParams.size > 0 ? `?${urlQueryParams}` : ""); // Function to map an item to a list entry. function itemToEntry(account: AdminAccount): ReactNode { 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> + ); +} diff --git a/web/source/settings/views/moderation/router.tsx b/web/source/settings/views/moderation/router.tsx index d23ab336a..93f7e481a 100644 --- a/web/source/settings/views/moderation/router.tsx +++ b/web/source/settings/views/moderation/router.tsx @@ -20,7 +20,7 @@ import React from "react"; import { BaseUrlContext, useBaseUrl, useHasPermission } from "../../lib/navigation/util"; import { Redirect, Route, Router, Switch } from "wouter"; -import { ReportOverview } from "./reports/overview"; +import ReportsSearch from "./reports/search"; import ReportDetail from "./reports/detail"; import { ErrorBoundary } from "../../lib/navigation/error"; import ImportExport from "./domain-permissions/import-export"; @@ -85,8 +85,9 @@ function ModerationReportsRouter() { <Router base={thisBase}> <ErrorBoundary> <Switch> + <Route path="/search" component={ReportsSearch}/> <Route path={"/:reportId"} component={ReportDetail} /> - <Route component={ReportOverview}/> + <Route><Redirect to="/search"/></Route> </Switch> </ErrorBoundary> </Router> diff --git a/web/source/settings/views/user/profile.tsx b/web/source/settings/views/user/profile.tsx index c1735259e..a65405faa 100644 --- a/web/source/settings/views/user/profile.tsx +++ b/web/source/settings/views/user/profile.tsx @@ -39,7 +39,7 @@ import { } from "../../components/form/inputs"; import FormWithData from "../../lib/form/form-with-data"; -import FakeProfile from "../../components/fake-profile"; +import FakeProfile from "../../components/profile"; import MutationButton from "../../components/form/mutation-button"; import { useAccountThemesQuery } from "../../lib/query/user"; |