Merge branch 'main' into instance-custom-css

web/source/settings/views/admin/actions/keys/expireremote.tsx

@@ -22,32 +22,11 @@ import { TextInput } from "../../../../components/form/inputs";
 import MutationButton from "../../../../components/form/mutation-button";
 import { useTextInput } from "../../../../lib/form";
 import { useInstanceKeysExpireMutation } from "../../../../lib/query/admin/actions";
-import isValidDomain from "is-valid-domain";
+import { formDomainValidator } from "../../../../lib/util/formvalidators";
 
 export default function ExpireRemote({}) {
 	const domainField = useTextInput("domain", {
-		validator: (v: string) => {
-			if (v.length === 0) {
-				return "";
-			}
-
-			if (v[v.length-1] === ".") {
-				return "invalid domain";
-			}
-
-			const valid = isValidDomain(v, {
-				subdomain: true,
-				wildcard: false,
-				allowUnicode: true,
-				topLevel: false,
-			});
-
-			if (valid) {
-				return "";
-			}
-
-			return "invalid domain";
-		}
+		validator: formDomainValidator,
 	});
 
 	const [expire, expireResult] = useInstanceKeysExpireMutation();

web/source/settings/views/admin/emoji/local/new-emoji.tsx

@@ -119,7 +119,7 @@ export default function NewEmojiForm() {
 					label="Shortcode, must be unique among the instance's local emoji"
 					autoCapitalize="none"
 					spellCheck="false"
-					{...{pattern: "^\\w{2,30}$"}}
+					{...{pattern: "^\\w{1,30}$"}}
 				/>
 
 				<CategorySelect

web/source/settings/views/admin/emoji/local/use-shortcode.ts

@@ -22,7 +22,7 @@ import { useMemo } from "react";
 import { useTextInput } from "../../../../lib/form";
 import { useListEmojiQuery } from "../../../../lib/query/admin/custom-emoji";
 
-const shortcodeRegex = /^\w{2,30}$/;
+const shortcodeRegex = /^\w{1,30}$/;
 
 export default function useShortcode() {
 	const { data: emoji = [] } = useListEmojiQuery({
@@ -42,8 +42,8 @@ export default function useShortcode() {
 				return "Shortcode already in use";
 			}
 
-			if (code.length < 2 || code.length > 30) {
-				return "Shortcode must be between 2 and 30 characters";
+			if (code.length < 1 || code.length > 30) {
+				return "Shortcode must be between 1 and 30 characters";
 			}
 
 			if (!shortcodeRegex.test(code)) {

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

@@ -17,7 +17,7 @@
 	along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import React, { useEffect, useMemo } from "react";
+import React, { 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";
@@ -26,8 +26,7 @@ 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 UsernameLozenge from "../../../components/username-lozenge";
 import { useBaseUrl } from "../../../lib/navigation/util";
 import BackButton from "../../../components/back-button";
 import MutationButton from "../../../components/form/mutation-button";
@@ -92,58 +91,19 @@ interface PermDeetsProps {
 function PermDeets({
 	permType,
 	data: perm,
-	isLoading: isLoadingPerm,
-	isFetching: isFetchingPerm,
-	isError: isErrorPerm,
-	error: errorPerm,
+	isLoading,
+	isFetching,
+	isError,
+	error,
 }: 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) {
+	// Wait til the perm itself is loaded.
+	if (isLoading || isFetching) {
 		return <Loading />;
-	} else if (isErrorPerm) {
-		return <Error error={errorPerm} />;
+	} else if (isError) {
+		return <Error error={error} />;
 	} else if (perm === undefined) {
 		throw "perm undefined";
 	}
@@ -172,7 +132,13 @@ function PermDeets({
 				</div>
 				<div className="info-list-entry">
 					<dt>Created By</dt>
-					<dd>{createdByAccount}</dd>
+					<dd>
+						<UsernameLozenge
+							account={perm.created_by}
+							linkTo={`~/settings/moderation/accounts/${perm.created_by}`}
+							backLocation={`~${baseUrl}${location}`}
+						/>
+					</dd>
 				</div>
 				<div className="info-list-entry">
 					<dt>Header Name</dt>

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

@@ -27,6 +27,7 @@ import { PermType } from "../../../lib/types/perm";
 import { FetchBaseQueryError } from "@reduxjs/toolkit/query";
 import { SerializedError } from "@reduxjs/toolkit";
 import HeaderPermCreateForm from "./create";
+import { useCapitalize } from "../../../lib/util";
 
 export default function HeaderPermsOverview() {
 	const [ location, setLocation ] = useLocation();
@@ -41,9 +42,7 @@ export default function HeaderPermsOverview() {
 	}, [params]);
 
 	// Uppercase first letter of given permType.
-	const permTypeUpper = useMemo(() => {
-		return permType.charAt(0).toUpperCase() + permType.slice(1); 
-	}, [permType]);
+	const permTypeUpper = useCapitalize(permType);
 	
 	// Fetch desired perms, skipping
 	// the ones we don't want.