[feature] Add "Instance Info" settings panel section, with domain blocks + allows (#4193)

This pull request adds a new read-only, user-level "instance info" section to the settings panel, which presents api/v2/instance info in a nice readable format, and also gives the user authenticated access to the blocklist and allowlist of the domain.

Closes https://codeberg.org/superseriousbusiness/gotosocial/issues/3711
Reviewed-on: https://codeberg.org/superseriousbusiness/gotosocial/pulls/4193
Co-authored-by: tobi <tobi.smethurst@protonmail.com>
Co-committed-by: tobi <tobi.smethurst@protonmail.com>

1 files changed, 287 insertions, 0 deletions

diff --git a/web/source/settings/views/user/instance/index.tsx b/web/source/settings/views/user/instance/index.tsx
new file mode 100644
index 000000000..0e0643bd7
--- /dev/null
+++ b/web/source/settings/views/user/instance/index.tsx
@@ -0,0 +1,287 @@
+/*
+	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, { useMemo } from "react";
+import { useInstanceV2Query } from "../../../lib/query/gts-api";
+import Loading from "../../../components/loading";
+import { InstanceV2 } from "../../../lib/types/instance";
+import { useHumanReadableBytes, useHumanReadableDuration, yesOrNo } from "../../../lib/util";
+import { HighlightedCode } from "../../../components/highlightedcode";
+import { useInstanceDomainAllowsQuery, useInstanceDomainBlocksQuery } from "../../../lib/query/user/domainperms";
+
+export default function InstanceInfo() {
+	// Load instance v2 data.
+	const {
+		data,
+		isFetching,
+		isLoading,
+	} = useInstanceV2Query();
+	
+	if (isFetching || isLoading) {
+		return <Loading />;
+	}
+
+	if (data === undefined) {
+		throw "could not fetch instance v2";
+	}
+
+	return (
+		<div className="instance-info-view">
+			<div className="form-section-docs">
+				<h1>Instance Info</h1>
+				<p>
+					On this page you can see information about this instance, and view domain blocks
+					and domain allows that have been created by the admin(s) of the instance.
+				</p>
+			</div>
+			<Instance instance={data} />
+			<Allowlist />
+			<Blocklist />
+		</div>
+	);
+}
+
+function Instance({ instance }: { instance: InstanceV2 }) {
+	const emojiSizeLimit = useHumanReadableBytes(instance.configuration.emojis.emoji_size_limit);
+	const accountsCustomCSS = yesOrNo(instance.configuration.accounts.allow_custom_css);
+	const imageSizeLimit = useHumanReadableBytes(instance.configuration.media_attachments.image_size_limit);
+	const videoSizeLimit = useHumanReadableBytes(instance.configuration.media_attachments.video_size_limit);
+	const pollMinExpiry = useHumanReadableDuration(instance.configuration.polls.min_expiration);
+	const pollMaxExpiry = useHumanReadableDuration(instance.configuration.polls.max_expiration);
+
+	return (
+		<>
+			<dl className="info-list">
+				<div className="info-list-entry">
+					<dt>Software version:</dt>
+					<dd>
+						<a
+							href={instance.source_url}
+							target="_blank"
+							rel="noreferrer"
+						>
+							{instance.version}
+						</a>
+					</dd>
+				</div>
+
+				<div className="info-list-entry">
+					<dt>Streaming URL:</dt>
+					<dd className="monospace">{instance.configuration.urls.streaming}</dd>
+				</div>
+
+				<div className="info-list-entry">
+					<dt>Emoji size limit:</dt>
+					<dd>{emojiSizeLimit}</dd>
+				</div>
+
+				<div className="info-list-entry">
+					<dt>Accounts custom CSS:</dt>
+					<dd>{accountsCustomCSS}</dd>
+				</div>
+
+				<div className="info-list-entry">
+					<dt>Accounts max featured tags:</dt>
+					<dd>{instance.configuration.accounts.max_featured_tags}</dd>
+				</div>
+
+				<div className="info-list-entry">
+					<dt>Accounts max profile fields:</dt>
+					<dd>{instance.configuration.accounts.max_profile_fields}</dd>
+				</div>
+
+				<div className="info-list-entry">
+					<dt>Posts max characters:</dt>
+					<dd>{instance.configuration.statuses.max_characters}</dd>
+				</div>
+
+				<div className="info-list-entry">
+					<dt>Posts max attachments:</dt>
+					<dd>{instance.configuration.statuses.max_media_attachments}</dd>
+				</div>
+
+				<div className="info-list-entry">
+					<dt>Posts supported types:</dt>
+					<dd className="monospace">
+						{ useJoinWithNewlines(instance.configuration.statuses.supported_mime_types) }
+					</dd>
+				</div>
+
+				<div className="info-list-entry">
+					<dt>Polls max options:</dt>
+					<dd>{instance.configuration.polls.max_options}</dd>
+				</div>
+
+				<div className="info-list-entry">
+					<dt>Polls max characters per option:</dt>
+					<dd>{instance.configuration.polls.max_characters_per_option}</dd>
+				</div>
+
+				<div className="info-list-entry">
+					<dt>Polls min expiration:</dt>
+					<dd>{pollMinExpiry}</dd>
+				</div>
+
+				<div className="info-list-entry">
+					<dt>Polls max expiration:</dt>
+					<dd>{pollMaxExpiry}</dd>
+				</div>
+
+				<div className="info-list-entry">
+					<dt>Media max description characters:</dt>
+					<dd>{instance.configuration.media_attachments.description_limit}</dd>
+				</div>
+
+				<div className="info-list-entry">
+					<dt>Media max image size:</dt>
+					<dd>{imageSizeLimit}</dd>
+				</div>
+
+				<div className="info-list-entry">
+					<dt>Media max video size:</dt>
+					<dd>{videoSizeLimit}</dd>
+				</div>
+
+				<div className="info-list-entry">
+					<dt>Media supported types:</dt>
+					<dd className="monospace">
+						{ useJoinWithNewlines(instance.configuration.media_attachments.supported_mime_types) }
+					</dd>
+				</div>
+			</dl>
+
+			{ instance.custom_css &&
+				<>
+					<div className="form-section-docs">
+						<h3>Custom CSS</h3>
+						<p>The following custom CSS has been set by the admin(s) of this instance, and will be loaded on each web page:</p>
+					</div>
+					<HighlightedCode code={instance.custom_css} lang="css" />
+				</>
+			}
+		</>
+	);
+}
+
+function Allowlist() {
+	// Load allows.
+	const {
+		data,
+		isFetching,
+		isLoading,
+	} = useInstanceDomainAllowsQuery();
+	
+	if (isFetching || isLoading) {
+		return <Loading />;
+	}
+
+	if (data === undefined) {
+		throw "could not fetch domain allows";
+	}
+	
+	return (
+		<>
+			<div className="form-section-docs">
+				<h3>Domain Allows</h3>
+				<p>
+					The following list of domains has been explicitly allowed by the administrator(s) of this instance.
+					<br/>This extends to subdomains, so an allowlist entry for domain 'example.com' includes domain 'social.example.com' etc as well. 
+				</p>
+			</div>
+			{ data.length !== 0
+				? <div className="list domain-perm-list">
+					<div className="header entry">
+						<div className="domain">Domain</div>
+						<div className="public_comment">Public comment</div>
+					</div>
+					{ data.map(e => {
+						return (
+							<div className="entry" id={e.domain} key={e.domain}>
+								<div className="domain text-cutoff">{e.domain}</div>
+								<div className="public_comment">{e.comment}</div>
+							</div>
+						);
+					}) }
+				</div>
+				: <b>No explicit allows.</b>
+			}
+		</>
+	);
+}
+
+function Blocklist() {
+	// Load blocks.
+	const {
+		data,
+		isFetching,
+		isLoading,
+	} = useInstanceDomainBlocksQuery();
+	
+	if (isFetching || isLoading) {
+		return <Loading />;
+	}
+
+	if (data === undefined) {
+		throw "could not fetch domain blocks";
+	}
+	
+	return (
+		<>
+			<div className="form-section-docs">
+				<h3>Domain Blocks</h3>
+				<p>
+					The following list of domains has been blocked by the administrator(s) of this instance.
+					<br/>All past, present, and future accounts at blocked domains are forbidden from interacting with this instance or accounts on this instance.
+					<br/>No data will be sent to the server at the remote domain, and no data will be received from it.
+					<br/>This extends to subdomains, so a blocklist entry for domain 'example.com' includes domain 'social.example.com' etc as well.
+				</p>
+			</div>
+			{ data.length !== 0
+				? <div className="list domain-perm-list">
+					<div className="header entry">
+						<div className="domain">Domain</div>
+						<div className="public_comment">Public comment</div>
+					</div>
+					{ data.map(e => {
+						return (
+							<div className="entry" id={e.domain} key={e.domain}>
+								<div className="domain text-cutoff">{e.domain}</div>
+								<div className="public_comment">{e.comment}</div>
+							</div>
+						);
+					}) }
+				</div>
+				: <b>No domain blocks.</b>
+			}
+		</>
+	);
+}
+
+function useJoinWithNewlines(a: string[]) {
+	return useMemo(() => {
+		const l = a.length;
+		return a.map((v, i) => {
+			const e = <span key={v}>{v}</span>;
+			if (i+1 !== l) {
+				return [e, <br key={v + "br"} />];
+			}
+			return [e];
+		}).flat();
+	}, [a]);
+}