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

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

* max-width

* swagger

docs/api/swagger.yaml

@@ -1409,6 +1409,10 @@ definitions:
                 $ref: '#/definitions/instanceV1Configuration'
             contact_account:
                 $ref: '#/definitions/account'
+            debug:
+                description: Whether or not instance is running in DEBUG mode. Omitted if false.
+                type: boolean
+                x-go-name: Debug
             description:
                 description: |-
                     Description of the instance.
@@ -1571,6 +1575,10 @@ definitions:
                 $ref: '#/definitions/instanceV2Configuration'
             contact:
                 $ref: '#/definitions/instanceV2Contact'
+            debug:
+                description: Whether or not instance is running in DEBUG mode. Omitted if false.
+                type: boolean
+                x-go-name: Debug
             description:
                 description: |-
                     Description of the instance.

internal/api/model/instancev1.go

@@ -59,6 +59,8 @@ type InstanceV1 struct {
 	//
 	// example: 0.1.1 cb85f65
 	Version string `json:"version"`
+	// Whether or not instance is running in DEBUG mode. Omitted if false.
+	Debug *bool `json:"debug,omitempty"`
 	// Primary language of the instance.
 	// example: ["en"]
 	Languages []string `json:"languages"`

internal/api/model/instancev2.go

@@ -40,6 +40,8 @@ type InstanceV2 struct {
 	//
 	// example: 0.1.1 cb85f65
 	Version string `json:"version"`
+	// Whether or not instance is running in DEBUG mode. Omitted if false.
+	Debug *bool `json:"debug,omitempty"`
 	// The URL for the source code of the software running on this instance, in keeping with AGPL license requirements.
 	// example: https://github.com/superseriousbusiness/gotosocial
 	SourceURL string `json:"source_url"`

internal/typeutils/internaltofrontend.go

@@ -26,6 +26,7 @@
 	"strings"
 	"time"
 
+	"codeberg.org/gruf/go-debug"
 	apimodel "github.com/superseriousbusiness/gotosocial/internal/api/model"
 	"github.com/superseriousbusiness/gotosocial/internal/config"
 	"github.com/superseriousbusiness/gotosocial/internal/db"
@@ -1200,6 +1201,10 @@ func (c *Converter) InstanceToAPIV1Instance(ctx context.Context, i *gtsmodel.Ins
 		instance.Version = toMastodonVersion(instance.Version)
 	}
 
+	if debug.DEBUG {
+		instance.Debug = util.Ptr(true)
+	}
+
 	// configuration
 	instance.Configuration.Statuses.MaxCharacters = config.GetStatusesMaxChars()
 	instance.Configuration.Statuses.MaxMediaAttachments = config.GetStatusesMediaMaxFiles()
@@ -1307,6 +1312,10 @@ func (c *Converter) InstanceToAPIV2Instance(ctx context.Context, i *gtsmodel.Ins
 		instance.Version = toMastodonVersion(instance.Version)
 	}
 
+	if debug.DEBUG {
+		instance.Debug = util.Ptr(true)
+	}
+
 	// thumbnail
 	thumbnail := apimodel.InstanceV2Thumbnail{}
 

web/source/settings/index.tsx

@@ -27,7 +27,7 @@ import { store, persistor } from "./redux/store";
 import { Authorization } from "./components/authorization";
 import Loading from "./components/loading";
 import { Account } from "./lib/types/account";
-import { BaseUrlContext, RoleContext } from "./lib/navigation/util";
+import { BaseUrlContext, RoleContext, InstanceDebugContext } from "./lib/navigation/util";
 import { SidebarMenu } from "./lib/navigation/menu";
 import { Redirect, Route, Router } from "wouter";
 import AdminMenu from "./views/admin/menu";
@@ -37,6 +37,7 @@ import UserRouter from "./views/user/router";
 import { ErrorBoundary } from "./lib/navigation/error";
 import ModerationRouter from "./views/moderation/router";
 import AdminRouter from "./views/admin/router";
+import { useInstanceV1Query } from "./lib/query/gts-api";
 
 interface AppProps {
 	account: Account;
@@ -44,8 +45,11 @@ interface AppProps {
 
 export function App({ account }: AppProps) {
 	const roles: string[] = useMemo(() => [ account.role.name ], [account]);
+	const { data: instance } = useInstanceV1Query();
+	
 	return (
 		<RoleContext.Provider value={roles}>
+			<InstanceDebugContext.Provider value={instance?.debug ?? false}>
 				<BaseUrlContext.Provider value={"/settings"}>
 					<SidebarMenu>
 						<UserMenu />
@@ -67,6 +71,7 @@ export function App({ account }: AppProps) {
 						</Router>
 					</section>
 				</BaseUrlContext.Provider>
+			</InstanceDebugContext.Provider>
 		</RoleContext.Provider>
 	);
 }

web/source/settings/lib/navigation/util.ts

@@ -21,6 +21,7 @@ import { createContext, useContext } from "react";
 const RoleContext = createContext<string[]>([]);
 const BaseUrlContext = createContext<string>("");
 const MenuLevelContext = createContext<number>(0);
+const InstanceDebugContext = createContext<boolean>(false);
 
 function urlSafe(str: string) {
 	return str.toLowerCase().replace(/[\s/]+/g, "-");
@@ -67,6 +68,10 @@ function useMenuLevel() {
 	return useContext(MenuLevelContext);
 }
 
+function useInstanceDebug() {
+	return useContext(InstanceDebugContext);
+}
+
 export {
 	urlSafe,
 	RoleContext,
@@ -76,4 +81,6 @@ export {
 	useBaseUrl,
 	MenuLevelContext,
 	useMenuLevel,
+	InstanceDebugContext,
+	useInstanceDebug,
 };

web/source/settings/lib/query/admin/debug/index.ts

@@ -0,0 +1,59 @@
+/*
+	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 { ApURLResponse } from "../../../types/debug";
+import { gtsApi } from "../../gts-api";
+
+const extended = gtsApi.injectEndpoints({
+	endpoints: (build) => ({
+		ApURL: build.query<ApURLResponse, string>({
+			query: (url) => {
+				// Get the url in a SearchParam
+				// so we can escape it.
+				const urlParam = new URLSearchParams();
+				urlParam.set("url", url);
+
+				return {
+					url: `/api/v1/admin/debug/apurl?${urlParam.toString()}`,
+				};
+			}
+		}),
+		ClearCaches: build.mutation<{}, void>({
+			query: () => ({
+				method: "POST",
+				url: `/api/v1/admin/debug/caches/clear`
+			})
+		}),
+	}),
+});
+
+/**
+ * Lazy GET to /api/v1/admin/debug/apurl.
+ */
+const useLazyApURLQuery = extended.useLazyApURLQuery;
+
+/**
+ * POST to /api/v1/admin/debug/caches/clear to empty in-memory caches.
+ */
+const useClearCachesMutation = extended.useClearCachesMutation;
+
+export {
+	useLazyApURLQuery,
+	useClearCachesMutation,
+};

web/source/settings/lib/types/debug.ts

@@ -0,0 +1,26 @@
+/*
+	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/>.
+*/
+
+export interface ApURLResponse {
+	request_url: string;
+	request_headers: string;
+	response_headers: string;
+	response_code: number;
+	response_body: string;
+}

web/source/settings/lib/types/instance.ts

@@ -27,6 +27,7 @@ export interface InstanceV1 {
     short_description_text?: string;
     email:                  string;
     version:                string;
+    debug?:                 boolean;
     languages:              any[]; // TODO: define this
     registrations:          boolean;
     approval_required:      boolean;

web/source/settings/style.css

@@ -1350,6 +1350,23 @@ button.with-padding {
 	}
 }
 
+.admin-debug-apurl {
+	width: 100%;
+	
+	.prism-highlighted {
+		max-width: 40rem;
+
+		/*
+			Normally we'd want to use a scrollbar for pre
+			and code, but it actually looks a bit better
+			to wrap here because there are many long lines.
+		*/
+		pre, code {
+			white-space: pre-wrap;
+		}
+	}
+}
+
 @media screen and (orientation: portrait) {
 	.reports .report .byline {
 		grid-template-columns: 1fr;

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>
+	);
+}

web/source/tsconfig.json

@@ -44,7 +44,7 @@
     // "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
 
     /* JavaScript Support */
-    // "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
+    "allowJs": true,                                     /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
     // "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
     // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */