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

5 files changed, 27 insertions, 4 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)}`);
 				}
 			}
 		};