impr: add validations to settings input (@fehmer) (monkeytypegame#6751)

Co-authored-by: Miodec <[email protected]>

Author: fehmer

frontend/src/html/pages/settings.html

@@ -256,9 +256,6 @@
             step="1"
             value=""
           />
-          <button class="save no-auto-handle">
-            <i class="fas fa-save fa-fw"></i>
-          </button>
         </div>
         <div class="buttons">
           <button data-config-value="off">off</button>
@@ -288,9 +285,6 @@
             step="1"
             value=""
           />
-          <button class="save no-auto-handle">
-            <i class="fas fa-save fa-fw"></i>
-          </button>
         </div>
         <div class="buttons">
           <button data-config-value="off">off</button>
@@ -322,9 +316,6 @@
             step="1"
             value=""
           />
-          <button class="save no-auto-handle">
-            <i class="fas fa-save fa-fw"></i>
-          </button>
         </div>
         <div class="buttons">
           <button data-config-value="off">off</button>
@@ -792,9 +783,6 @@
             step="1"
             value=""
           />
-          <button class="save no-auto-handle">
-            <i class="fas fa-save fa-fw"></i>
-          </button>
         </div>
         <div class="buttons">
           <button data-config-value="off">off</button>
@@ -1020,9 +1008,6 @@
             min="10"
             max="90"
           />
-          <button class="save no-auto-handle">
-            <i class="fas fa-save fa-fw"></i>
-          </button>
         </div>
       </div>
     </div>
@@ -1131,9 +1116,6 @@
             class="input"
             min="0"
           />
-          <button class="save no-auto-handle">
-            <i class="fas fa-save fa-fw"></i>
-          </button>
         </div>
       </div>
     </div>
@@ -1154,9 +1136,6 @@
             class="input"
             tabindex="0"
           />
-          <button class="save no-auto-handle">
-            <i class="fas fa-save fa-fw"></i>
-          </button>
         </div>
       </div>
     </div>

frontend/src/styles/settings.scss

@@ -90,7 +90,7 @@
     .inputAndButton {
       display: grid;
       grid-template-columns: auto min-content;
-      gap: 0.5rem;
+      // gap: 0.5rem;
       margin-bottom: 0.5rem;
 
       span {
@@ -104,6 +104,20 @@
           margin-right: 0rem;
         }
       }
+
+      .hasError {
+        animation: shake 0.1s ease-in-out infinite;
+      }
+
+      .statusIndicator {
+        opacity: 0;
+      }
+      &:has(input:focus),
+      &:has([data-indicator-status="failed"]) {
+        .statusIndicator {
+          opacity: 1;
+        }
+      }
     }
 
     .rangeGroup {

frontend/src/ts/commandline/commandline.ts

@@ -14,6 +14,7 @@ import { Command, CommandsSubgroup, CommandWithValidation } from "./types";
 import { areSortedArraysEqual } from "../utils/arrays";
 import { parseIntOptional } from "../utils/numbers";
 import { debounce } from "throttle-debounce";
+import { createInputEventHandler } from "../elements/input-validation";
 
 type CommandlineMode = "search" | "input";
 type InputModeParams = {
@@ -618,6 +619,18 @@ async function runActiveCommand(): Promise<void> {
       value: command.defaultValue?.() ?? "",
       icon: command.icon ?? "fa-chevron-right",
     };
+    if ("validation" in command && !handlersCache.has(command.id)) {
+      const commandWithValidation = command as CommandWithValidation<unknown>;
+      const handler = createInputEventHandler(
+        updateValidationResult,
+        commandWithValidation.validation,
+        "inputValueConvert" in commandWithValidation
+          ? commandWithValidation.inputValueConvert
+          : undefined
+      );
+      handlersCache.set(command.id, handler);
+    }
+
     await updateInput(inputModeParams.value as string);
     hideCommands();
   } else if (command.subgroup) {
@@ -788,48 +801,10 @@ function updateValidationResult(
   }
 }
 
-async function isValid(
-  checkValue: unknown,
-  originalValue: string,
-  originalInput: HTMLInputElement,
-  validation: CommandWithValidation<unknown>["validation"]
-): Promise<void> {
-  updateValidationResult({ status: "checking" });
-
-  if (validation.schema !== undefined) {
-    const schemaResult = validation.schema.safeParse(checkValue);
-
-    if (!schemaResult.success) {
-      updateValidationResult({
-        status: "failed",
-        errorMessage: schemaResult.error.errors
-          .map((err) => err.message)
-          .join(", "),
-      });
-      return;
-    }
-  }
-
-  if (validation.isValid === undefined) {
-    updateValidationResult({ status: "success" });
-    return;
-  }
-
-  const result = await validation.isValid(checkValue);
-  if (originalInput.value !== originalValue) {
-    //value has change in the meantime, discard result
-    return;
-  }
-
-  if (result === true) {
-    updateValidationResult({ status: "success" });
-  } else {
-    updateValidationResult({
-      status: "failed",
-      errorMessage: result,
-    });
-  }
-}
+/*
+ * Handlers needs to be created only once per command to ensure they debounce with the given delay
+ */
+const handlersCache = new Map<string, (e: Event) => Promise<void>>();
 
 const modal = new AnimatedModal({
   dialogId: "commandLine",
@@ -921,34 +896,24 @@ const modal = new AnimatedModal({
       }
     });
 
-    input.addEventListener(
-      "input",
-      debounce(100, async (e) => {
-        if (
-          inputModeParams === null ||
-          inputModeParams.command === null ||
-          !("validation" in inputModeParams.command)
-        ) {
-          return;
-        }
-
-        const originalInput = (e as InputEvent).target as HTMLInputElement;
-        const currentValue = originalInput.value;
-        let checkValue: unknown = currentValue;
-        const command =
-          inputModeParams.command as CommandWithValidation<unknown>;
+    input.addEventListener("input", async (e) => {
+      if (
+        inputModeParams === null ||
+        inputModeParams.command === null ||
+        !("validation" in inputModeParams.command)
+      ) {
+        return;
+      }
 
-        if ("inputValueConvert" in command) {
-          checkValue = command.inputValueConvert(currentValue);
-        }
-        await isValid(
-          checkValue,
-          currentValue,
-          originalInput,
-          command.validation
+      const handler = handlersCache.get(inputModeParams.command.id);
+      if (handler === undefined) {
+        throw new Error(
+          `Expected handler for command ${inputModeParams.command.id} is missing`
         );
-      })
-    );
+      }
+
+      await handler(e);
+    });
 
     modalEl.addEventListener("mousemove", (_e) => {
       mouseMode = true;

frontend/src/ts/commandline/types.ts

@@ -1,6 +1,6 @@
 import { Config } from "@monkeytype/schemas/configs";
 import AnimatedModal from "../utils/animated-modal";
-import { z } from "zod";
+import { Validation } from "../elements/input-validation";
 
 // this file is needed becauase otherwise it would produce a circular dependency
 
@@ -47,21 +47,7 @@ export type CommandWithValidation<T> = (T extends string
    * If the schema is defined it is always checked first.
    * Only if the schema validaton is passed or missing the `isValid` method is called.
    */
-  validation: {
-    /**
-     * Zod schema to validate the input value against.
-     * The indicator will show the error messages from the schema.
-     */
-    schema?: z.Schema<T>;
-    /**
-     * Custom async validation method.
-     * This is intended to be used for validations that cannot be handled with a Zod schema like server-side validations.
-     * @param value current input value
-     * @param thisPopup the current modal
-     * @returns true if the `value` is valid, an errorMessage as string if it is invalid.
-     */
-    isValid?: (value: T) => Promise<true | string>;
-  };
+  validation: Validation<T>;
 };
 
 export type CommandsSubgroup = {

frontend/src/ts/elements/input-indicator.ts

@@ -74,6 +74,7 @@ export class InputIndicator {
     }
 
     $(this.inputElement).css("padding-right", "2.1em");
+    this.parentElement.attr("data-indicator-status", optionId);
   }
 
   get(): keyof typeof this.options | null {