[feature] Add HTTP header permission section to frontend (#2893)

* [feature] Add HTTP header filter section to frontend

* tweak naming a bit

web/source/settings/views/admin/http-header-permissions/detail.tsx

@@ -0,0 +1,246 @@
+/*
+	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, { useEffect, useMemo } from "react";
+import { useLocation, useParams } from "wouter";
+import { PermType } from "../../../lib/types/perm";
+import { useDeleteHeaderAllowMutation, useDeleteHeaderBlockMutation, useGetHeaderAllowQuery, useGetHeaderBlockQuery } from "../../../lib/query/admin/http-header-permissions";
+import { HeaderPermission } from "../../../lib/types/http-header-permissions";
+import { FetchBaseQueryError } from "@reduxjs/toolkit/query";
+import { SerializedError } from "@reduxjs/toolkit";
+import Loading from "../../../components/loading";
+import { Error } from "../../../components/error";
+import { useLazyGetAccountQuery } from "../../../lib/query/admin";
+import Username from "../../../components/username";
+import { useBaseUrl } from "../../../lib/navigation/util";
+import BackButton from "../../../components/back-button";
+import MutationButton from "../../../components/form/mutation-button";
+
+const testString = `/* To test this properly, set "flavor" to "Golang", as that's the language GoToSocial uses for regular expressions */
+
+/* Amazon crawler User-Agent example */
+Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKit/600.2.5 (KHTML\\, like Gecko) Version/8.0.2 Safari/600.2.5 (Amazonbot/0.1; +https://developer.amazon.com/support/amazonbot)
+
+/* Some other test strings */
+Some Test Value
+Another Test Value`;
+
+export default function HeaderPermDetail() {
+	let params = useParams();
+	if (params.permType !== "blocks" && params.permType !== "allows") {
+		throw "unrecognized perm type " + params.permType;
+	}
+	const permType = useMemo(() => {
+		return params.permType?.slice(0, -1) as PermType;
+	}, [params]);
+
+	let permID = params.permId as string | undefined;
+	if (!permID) {
+		throw "no perm ID";
+	}
+
+	if (permType === "block") {
+		return <BlockDetail id={permID} />;
+	} else {
+		return <AllowDetail id={permID} />;
+	}
+}
+
+function BlockDetail({ id }: { id: string }) {
+	return (
+		<PermDeets
+			permType={"Block"}
+			{...useGetHeaderBlockQuery(id)}
+		/>
+	);
+}
+
+function AllowDetail({ id }: { id: string }) {
+	return (
+		<PermDeets
+			permType={"Allow"}
+			{...useGetHeaderAllowQuery(id)}
+		/>
+	);
+}
+
+interface PermDeetsProps {
+	permType: string;
+	data?: HeaderPermission;
+	isLoading: boolean;
+	isFetching: boolean;
+	isError: boolean;
+	error?: FetchBaseQueryError | SerializedError;
+}
+
+function PermDeets({
+	permType,
+	data: perm,
+	isLoading: isLoadingPerm,
+	isFetching: isFetchingPerm,
+	isError: isErrorPerm,
+	error: errorPerm,
+}: PermDeetsProps) {
+	const [ location ] = useLocation();
+	const baseUrl = useBaseUrl();
+	
+	// Once we've loaded the perm, trigger
+	// getting the account that created it.
+	const [ getAccount, getAccountRes ] = useLazyGetAccountQuery();
+	useEffect(() => {
+		if (!perm) {
+			return;
+		}
+		getAccount(perm.created_by, true);
+	}, [getAccount, perm]);
+
+	// Load the createdByAccount if possible,
+	// returning a username lozenge with
+	// a link to the account.
+	const createdByAccount = useMemo(() => {
+		const {
+			data: account,
+			isLoading: isLoadingAccount,
+			isFetching: isFetchingAccount,
+			isError: isErrorAccount,
+		} = getAccountRes;
+		
+		// Wait for query to finish, returning
+		// loading spinner in the meantime.
+		if (isLoadingAccount || isFetchingAccount || !perm) {
+			return <Loading />;
+		} else if (isErrorAccount || account === undefined) {
+			// Fall back to account ID.
+			return perm?.created_by;
+		}
+
+		return (
+			<Username
+				account={account}
+				linkTo={`~/settings/moderation/accounts/${account.id}`}
+				backLocation={`~${baseUrl}${location}`}
+			/>
+		);
+	}, [getAccountRes, perm, baseUrl, location]);
+
+	// Now wait til the perm itself is loaded.
+	if (isLoadingPerm || isFetchingPerm) {
+		return <Loading />;
+	} else if (isErrorPerm) {
+		return <Error error={errorPerm} />;
+	} else if (perm === undefined) {
+		throw "perm undefined";
+	}
+
+	const created = new Date(perm.created_at).toDateString();	
+	
+	// Create parameters to link to regex101
+	// with this regular expression prepopulated.
+	const testParams = new URLSearchParams();
+	testParams.set("regex", perm.regex);
+	testParams.set("flags", "g");
+	testParams.set("testString", testString);
+	const regexLink = `https://regex101.com/?${testParams.toString()}`;	
+
+	return (
+		<div className="http-header-permission-details">
+			<h1><BackButton to={`~${baseUrl}/${permType.toLowerCase()}s`} /> HTTP Header {permType} Detail</h1>
+			<dl className="info-list">
+				<div className="info-list-entry">
+					<dt>ID</dt>
+					<dd>{perm.id}</dd>
+				</div>
+				<div className="info-list-entry">
+					<dt>Created</dt>
+					<dd><time dateTime={perm.created_at}>{created}</time></dd>
+				</div>
+				<div className="info-list-entry">
+					<dt>Created By</dt>
+					<dd>{createdByAccount}</dd>
+				</div>
+				<div className="info-list-entry">
+					<dt>Header Name</dt>
+					<dd>{perm.header}</dd>
+				</div>
+				<div className="info-list-entry">
+					<dt>Header Value Regex</dt>
+					<dd className="monospace">{perm.regex}</dd>
+				</div>
+				<div className="info-list-entry">
+					<dt>Test This Regex</dt>
+					<dd>
+						<a
+							href={regexLink}
+							target="_blank"
+							rel="noreferrer"
+						>
+							<i className="fa fa-fw fa-external-link" aria-hidden="true"></i> Link to Regex101 (opens in a new tab)
+						</a>
+					</dd>
+				</div>
+			</dl>
+			{ permType === "Block"
+				? <DeleteBlock id={perm.id} />
+				: <DeleteAllow id={perm.id} />
+			}
+		</div>
+	);
+}
+
+function DeleteBlock({ id }: { id: string }) {
+	const [ _location, setLocation ] = useLocation();
+	const baseUrl = useBaseUrl();
+	const [ removeTrigger, removeResult ] = useDeleteHeaderBlockMutation();
+	
+	return (
+		<MutationButton
+			type="button"
+			onClick={() => {
+				removeTrigger(id);
+				setLocation(`~${baseUrl}/blocks`);
+			}}
+			label="Remove this block"
+			result={removeResult}
+			className="button danger"
+			showError={false}
+			disabled={false}
+		/>
+	);
+}
+
+function DeleteAllow({ id }: { id: string }) {
+	const [ _location, setLocation ] = useLocation();
+	const baseUrl = useBaseUrl();
+	const [ removeTrigger, removeResult ] = useDeleteHeaderAllowMutation();
+	
+	return (
+		<MutationButton
+			type="button"
+			onClick={() => {
+				removeTrigger(id);
+				setLocation(`~${baseUrl}/allows`);
+			}}
+			label="Remove this allow"
+			result={removeResult}
+			className="button danger"
+			showError={false}
+			disabled={false}
+		/>
+	);
+}