[bugfix/frontend] Add `nosubmit` option to form fields + use it when instance custom CSS disabled (#2290)

6 files changed, 29 insertions, 6 deletions

diff --git a/web/source/settings/lib/form/get-form-mutations.ts b/web/source/settings/lib/form/get-form-mutations.ts
index 6e1bfa02d..a3dc36601 100644
--- a/web/source/settings/lib/form/get-form-mutations.ts
+++ b/web/source/settings/lib/form/get-form-mutations.ts
@@ -27,6 +27,12 @@ export default function getFormMutations(
 	const mutationData: Array<[string, any]> = [];
 	
 	Object.values(form).forEach((field) => {
+		if (field.nosubmit) {
+			// Completely ignore
+			// this field.
+			return;
+		}
+		
 		if ("selectedValues" in field) {
 			// FieldArrayInputHook.
 			const selected = field.selectedValues();
diff --git a/web/source/settings/lib/form/submit.ts b/web/source/settings/lib/form/submit.ts
index d5636a587..aa662086f 100644
--- a/web/source/settings/lib/form/submit.ts
+++ b/web/source/settings/lib/form/submit.ts
@@ -87,10 +87,10 @@ export default function useFormSubmit(
 			if (e.nativeEvent.submitter) {
 				// We want the name of the element that was invoked to submit this form,
 				// which will be something that extends HTMLElement, though we don't know
-				// what at this point.
+				// what at this point. If it's an empty string, fall back to undefined.
 				// 
 				// See: https://developer.mozilla.org/en-US/docs/Web/API/SubmitEvent/submitter
-				action = (e.nativeEvent.submitter as Object as { name: string }).name;
+				action = (e.nativeEvent.submitter as Object as { name: string }).name || undefined;
 			} else {
 				// No submitter defined. Fall back
 				// to just use the FormSubmitEvent.
diff --git a/web/source/settings/lib/form/text.tsx b/web/source/settings/lib/form/text.tsx
index c0b9b93c6..822675cdd 100644
--- a/web/source/settings/lib/form/text.tsx
+++ b/web/source/settings/lib/form/text.tsx
@@ -39,7 +39,8 @@ export default function useTextInput(
 		dontReset = false,
 		validator,
 		showValidation = true,
-		initValidation
+		initValidation,
+		nosubmit = false,
 	}: HookOpts<string>
 ): TextFormInputHook {
 	const [text, setText] = useState(initialValue);
@@ -91,6 +92,7 @@ export default function useTextInput(
 		reset,
 		name,
 		Name: "", // Will be set by inputHook function.
+		nosubmit,
 		value: text,
 		ref: textRef,
 		setter: setText,
diff --git a/web/source/settings/lib/form/types.ts b/web/source/settings/lib/form/types.ts
index f9fd2cbdd..8ea194df7 100644
--- a/web/source/settings/lib/form/types.ts
+++ b/web/source/settings/lib/form/types.ts
@@ -39,6 +39,13 @@ export interface HookOpts<T = any> {
 	initialValue?: T,
 	defaultValue?: T,
 	
+	/**
+	 * If true, don't submit this field as
+	 * part of a mutation query's body.
+	 * 
+	 * Useful for 'internal' form fields.
+	 */
+	nosubmit?: boolean,
 	dontReset?: boolean,
 	validator?,
 	showValidation?: boolean,
@@ -88,6 +95,14 @@ export interface FormInputHook<T = any> {
 	 * to have been changed from the default / initial value.
 	 */
 	hasChanged: () => boolean;
+
+	/**
+	 * If true, don't submit this field as
+	 * part of a mutation query's body.
+	 * 
+	 * Useful for 'internal' form fields.
+	 */
+	nosubmit?: boolean;
 }
 
 interface _withReset {
diff --git a/web/source/settings/lib/query/query-modifiers.ts b/web/source/settings/lib/query/query-modifiers.ts
index d6bf0b6ae..a80784d04 100644
--- a/web/source/settings/lib/query/query-modifiers.ts
+++ b/web/source/settings/lib/query/query-modifiers.ts
@@ -90,7 +90,7 @@ function makeCacheMutation(action: Action): CacheMutation {
 					);
 				} catch (e) {
 					// eslint-disable-next-line no-console
-					console.error(`rolling back pessimistic update of ${queryName}: ${e}`);
+					console.error(`rolling back pessimistic update of ${queryName}: ${JSON.stringify(e)}`);
 				}
 			}
 		};
diff --git a/web/source/settings/user/profile.js b/web/source/settings/user/profile.js
index b6daf175b..125f88e70 100644
--- a/web/source/settings/user/profile.js
+++ b/web/source/settings/user/profile.js
@@ -79,7 +79,7 @@ function UserProfileForm({ data: profile }) {
 		header: useFileInput("header", { withPreview: true }),
 		displayName: useTextInput("display_name", { source: profile }),
 		note: useTextInput("note", { source: profile, valueSelector: (p) => p.source?.note }),
-		customCSS: useTextInput("custom_css", { source: profile }),
+		customCSS: useTextInput("custom_css", { source: profile, nosubmit: !instanceConfig.allowCustomCSS }),
 		bot: useBoolInput("bot", { source: profile }),
 		locked: useBoolInput("locked", { source: profile }),
 		discoverable: useBoolInput("discoverable", { source: profile}),
@@ -190,7 +190,7 @@ function UserProfileForm({ data: profile }) {
 			</div>
 			<TextArea
 				field={form.customCSS}
-				label="Custom CSS"
+				label={`Custom CSS` + (!instanceConfig.allowCustomCSS ? ` (not enabled on this instance)` : ``)}
 				className="monospace"
 				rows={8}
 				disabled={!instanceConfig.allowCustomCSS}