From 6171dcbe5109d7accbf44f19c20c9f4a0ee5e06f Mon Sep 17 00:00:00 2001
From: tobi <31960611+tsmethurst@users.noreply.github.com>
Date: Sun, 5 May 2024 13:47:22 +0200
Subject: [feature] Add HTTP header permission section to frontend (#2893)
* [feature] Add HTTP header filter section to frontend
* tweak naming a bit
---
.../views/admin/http-header-permissions/detail.tsx | 246 +++++++++++++++++++++
1 file changed, 246 insertions(+)
create mode 100644 web/source/settings/views/admin/http-header-permissions/detail.tsx
(limited to 'web/source/settings/views/admin/http-header-permissions/detail.tsx')
diff --git a/web/source/settings/views/admin/http-header-permissions/detail.tsx b/web/source/settings/views/admin/http-header-permissions/detail.tsx
new file mode 100644
index 000000000..db92dd0eb
--- /dev/null
+++ b/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 .
+*/
+
+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 ;
+ } else {
+ return ;
+ }
+}
+
+function BlockDetail({ id }: { id: string }) {
+ return (
+
+ );
+}
+
+function AllowDetail({ id }: { id: string }) {
+ return (
+
+ );
+}
+
+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 ;
+ } else if (isErrorAccount || account === undefined) {
+ // Fall back to account ID.
+ return perm?.created_by;
+ }
+
+ return (
+
+ );
+ }, [getAccountRes, perm, baseUrl, location]);
+
+ // Now wait til the perm itself is loaded.
+ if (isLoadingPerm || isFetchingPerm) {
+ return ;
+ } else if (isErrorPerm) {
+ return ;
+ } 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 (
+