[feature/frontend] Add debug sections to settings panel (#2950)

* [feature/frontend] Add debug sections to settings panel

* max-width

* swagger

web/source/settings/views/admin/debug/apurl/index.tsx

@@ -0,0 +1,124 @@
+/*
+	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, useRef } from "react";
+import { useTextInput } from "../../../../lib/form";
+import { useLazyApURLQuery } from "../../../../lib/query/admin/debug";
+import { TextInput } from "../../../../components/form/inputs";
+import MutationButton from "../../../../components/form/mutation-button";
+import { ApURLResponse } from "../../../../lib/types/debug";
+import Loading from "../../../../components/loading";
+
+// Used for syntax highlighting of json result.
+import Prism from "../../../../../frontend/prism";
+
+export default function ApURL() {
+	const urlField = useTextInput("url");
+
+	const [apURL, apURLResult] = useLazyApURLQuery();
+	function submit(e) {
+		e.preventDefault();
+		apURL(urlField.value ?? "");
+	}
+	
+	return (
+		<div className="admin-debug-apurl">
+			<form onSubmit={submit}>
+				<div className="form-section-docs">
+					<h2>AP URL</h2>
+					<p>
+						Call the provided URL with a signed request, and return the
+						raw ActivityPub response in the <code>response_body</code> field.
+						<br/>
+						Useful for debugging communication between instances, and
+						checking the shape of remote objects and actors.
+					</p>
+				</div>
+				<TextInput
+					field={urlField}
+					label="URL"
+				/>
+				<MutationButton
+					disabled={!urlField.value}
+					label="Send request"
+					result={apURLResult}
+				/>
+			</form>
+			<ApURLResult {...apURLResult} />
+		</div>
+	);
+}
+
+interface ApURLResultProps {
+	isLoading: boolean;
+	isFetching: boolean;
+	isSuccess: boolean;
+	data?: ApURLResponse,
+	isError: boolean;
+}
+
+function ApURLResult({
+	isLoading,
+	isFetching,
+	isSuccess,
+	data,
+	isError,
+}: ApURLResultProps) {	
+	if (!(isSuccess || isError)) {
+		// Hasn't been called yet.
+		return null;
+	}
+
+	if (isLoading || isFetching) {
+		return <Loading />;
+	}
+
+	if (!data) {
+		return "No data";
+	}
+
+	const jsonObj = {
+		...data,
+		response_body: data.response_body.length > 0 ? JSON.parse(data.response_body) : "",
+	};
+
+	const jsonStr = JSON.stringify(jsonObj, null, 2);
+	return <Highlighted jsonStr={jsonStr} />;
+}
+
+function Highlighted({ jsonStr }: { jsonStr: string }) {
+	const ref = useRef<HTMLElement | null>(null);
+	useEffect(() => {
+		if (ref.current) {
+			Prism.highlightElement(ref.current);
+		}
+	}, []);
+
+	// Prism takes control of the `pre` so wrap
+	// the whole thing in a div that we control.
+	return (
+		<div className="prism-highlighted">
+			<pre>
+				<code ref={ref} className="language-json">
+					{jsonStr}
+				</code>
+			</pre>
+		</div>
+	);
+}

web/source/settings/views/admin/debug/caches/index.tsx

@@ -0,0 +1,52 @@
+/*
+	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 MutationButton from "../../../../components/form/mutation-button";
+import { useClearCachesMutation } from "../../../../lib/query/admin/debug";
+
+export default function Caches({}) {
+	const [clearCaches, clearCachesResult] = useClearCachesMutation();
+	function submit(e) {
+		e.preventDefault();
+		clearCaches();
+	}
+
+	return (
+		<div className="admin-debug-caches">
+			<form onSubmit={submit}>
+				<div className="form-section-docs">
+					<h2>Clear Caches</h2>
+					<p>
+						Clear internal in-memory caches
+						<br/>
+						This is useful for checking memory usage of caches, or for
+						clearing database cache results after manual database updates.
+					</p>
+				</div>
+				<MutationButton
+					disabled={false}
+					label="Clear caches"
+					result={clearCachesResult}
+				/>
+			</form>
+		</div>
+	);
+}

web/source/settings/views/admin/menu.tsx

@@ -19,7 +19,7 @@
 
 import { MenuItem } from "../../lib/navigation/menu";
 import React from "react";
-import { useHasPermission } from "../../lib/navigation/util";
+import { useHasPermission, useInstanceDebug } from "../../lib/navigation/util";
 
 /*
 	EXPORTED COMPONENTS
@@ -60,6 +60,7 @@ export default function AdminMenu() {
 			<AdminEmojisMenu />
 			<AdminActionsMenu />
 			<AdminHTTPHeaderPermissionsMenu />
+			<AdminDebugMenu />
 		</MenuItem>
 	);
 }
@@ -160,3 +161,32 @@ function AdminHTTPHeaderPermissionsMenu() {
 		</MenuItem>
 	);
 }
+
+function AdminDebugMenu() {
+	// Don't attach this menu if instance
+	// is not running in debug mode.
+	const debug = useInstanceDebug();
+	if (!debug) {
+		return null;
+	}
+	
+	return (
+		<MenuItem
+			name="Debug"
+			itemUrl="debug"
+			defaultChild="apurl"
+			icon="fa-bug"
+		>
+			<MenuItem
+				name="AP URL"
+				itemUrl="apurl"
+				icon="fa-file-code-o"
+			/>
+			<MenuItem
+				name="Caches"
+				itemUrl="caches"
+				icon="fa-archive"
+			/>
+		</MenuItem>
+	);
+}

web/source/settings/views/admin/router.tsx

@@ -18,7 +18,7 @@
 */
 
 import React from "react";
-import { BaseUrlContext, useBaseUrl, useHasPermission } from "../../lib/navigation/util";
+import { BaseUrlContext, useBaseUrl, useHasPermission, useInstanceDebug } from "../../lib/navigation/util";
 import { Redirect, Route, Router, Switch } from "wouter";
 import { ErrorBoundary } from "../../lib/navigation/error";
 import InstanceSettings from "./instance/settings";
@@ -32,6 +32,8 @@ import RemoteEmoji from "./emoji/remote";
 import HeaderPermsOverview from "./http-header-permissions/overview";
 import HeaderPermDetail from "./http-header-permissions/detail";
 import Email from "./actions/email";
+import ApURL from "./debug/apurl";
+import Caches from "./debug/caches";
 
 /*
 	EXPORTED COMPONENTS
@@ -53,6 +55,7 @@ import Email from "./actions/email";
  * - /settings/admin/http-header-permissions/allows/:allowId
  * - /settings/admin/http-header-permissions/blocks
  * - /settings/admin/http-header-permissions/blocks/:blockId
+ * - /settings/admin/debug
  */
 export default function AdminRouter() {
 	const parentUrl = useBaseUrl();
@@ -66,6 +69,7 @@ export default function AdminRouter() {
 				<AdminEmojisRouter />
 				<AdminActionsRouter />
 				<AdminHTTPHeaderPermissionsRouter />
+				<AdminDebugRouter />
 			</Router>
 		</BaseUrlContext.Provider>
 	);
@@ -186,3 +190,30 @@ function AdminHTTPHeaderPermissionsRouter() {
 		</BaseUrlContext.Provider>
 	);
 }
+
+function AdminDebugRouter() {
+	const parentUrl = useBaseUrl();
+	const thisBase = "/debug";
+	const absBase = parentUrl + thisBase;
+
+	// Don't attach this route if instance
+	// is not running in debug mode.
+	const debug = useInstanceDebug();
+	if (!debug) {
+		return null;
+	}
+
+	return (
+		<BaseUrlContext.Provider value={absBase}>
+			<Router base={thisBase}>
+				<ErrorBoundary>
+					<Switch>
+						<Route path="/apurl" component={ApURL} />
+						<Route path="/caches" component={Caches} />
+						<Route><Redirect to="/apurl" /></Route>
+					</Switch>
+				</ErrorBoundary>
+			</Router>
+		</BaseUrlContext.Provider>
+	);
+}