Merge pull request #480 from Hyperloop-UPV/testing-view/always-accessible-keybindings

feat: disable numeric keybindings and allow the rest to be run in almost any moment,…

Author: Humanoidear

.github/workflows/electron-tests.yaml

@@ -25,7 +25,6 @@ jobs:
       - uses: actions/setup-node@v4
         with:
           node-version: "20"
-          cache: "pnpm"
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile --filter=hyperloop-control-station

frontend/testing-view/config.ts

@@ -31,4 +31,10 @@ export const config = {
 
   /** Timeout applied after settings save to give enough time for backend to restart. */
   SETTINGS_RESPONSE_TIMEOUT: 1000,
+
+  /** GitHub repository used to fetch available branches for ADJ configuration. */
+  ADJ_GITHUB_REPO: "hyperloop-upv/adj",
+
+  /** Timeout for fetching branches from GitHub API. */
+  BRANCHES_FETCH_TIMEOUT: 5000,
 } as const;

frontend/testing-view/src/components/settings/ComboboxField.tsx

@@ -6,45 +6,71 @@ import {
   ComboboxItem,
   ComboboxList,
 } from "@workspace/ui/components";
+import { Button } from "@workspace/ui/components/shadcn/button";
 import { Label } from "@workspace/ui/components/shadcn/label";
-import { useState } from "react";
+import { RefreshCw } from "@workspace/ui/icons";
+import { useEffect, useState } from "react";
+import type { BranchesFetchState } from "../../hooks/useBranches";
 import type { FieldProps } from "../../types/common/settings";
 
 export const ComboboxField = ({
   field,
   value,
   onChange,
   loading,
-}: FieldProps<string>) => {
+  fetchState,
+}: FieldProps<string> & { fetchState?: BranchesFetchState }) => {
   const predefined = field.options ?? [];
   const items =
     value && !predefined.includes(value) ? [value, ...predefined] : predefined;
 
   const [inputValue, setInputValue] = useState(value ?? "");
+  const [selectedValue, setSelectedValue] = useState<string | null>(value ?? null);
+
+  // Sync when value prop changes (e.g. after external save)
+  useEffect(() => {
+    setInputValue(value ?? "");
+    setSelectedValue(value ?? null);
+  }, [value]);
 
   const commitInput = () => {
-    if (inputValue && inputValue !== value) onChange(inputValue);
+    if (inputValue !== value) onChange(inputValue);
   };
 
   return (
     <div className="w-70 space-y-2">
-      <Label>{field.label}</Label>
+      <div className="flex items-center gap-2">
+        <Label>{field.label}</Label>
+        {fetchState && (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={fetchState.refetch}
+            disabled={loading}
+            className={`h-5 w-5 p-0 ${fetchState.error ? "text-destructive hover:text-destructive" : ""}`}
+          >
+            <RefreshCw className={`h-3 w-3 ${loading ? "animate-spin" : ""}`} />
+          </Button>
+        )}
+      </div>
       <Combobox
         items={items}
-        value={value ?? null}
+        value={selectedValue}
         onValueChange={(v) => {
-          onChange(v ?? "");
+          setSelectedValue(v);
           setInputValue(v ?? "");
+          onChange(v ?? "");
         }}
       >
         <ComboboxInput
           placeholder={
             loading ? "Loading..." : (field.placeholder ?? "Choose or type...")
           }
-          disabled={loading}
           value={inputValue}
           onChange={(e) => {
-            if (e.target.value !== value) setInputValue(e.target.value);
+            setInputValue(e.target.value);
+            // Clear selection so base-ui doesn't reset the input to the selected value
+            setSelectedValue(null);
           }}
           onBlur={commitInput}
           onKeyDown={(e) => {

frontend/testing-view/src/components/settings/SettingsDialog.tsx

@@ -5,6 +5,7 @@ import { AlertTriangle, CheckCircle2, Loader2, X } from "@workspace/ui/icons";
 import { useEffect, useState, useTransition } from "react";
 import { config } from "../../../config";
 import { DEFAULT_CONFIG } from "../../constants/defaultConfig";
+import { useBranches } from "../../hooks/useBranches";
 import { useStore } from "../../store/store";
 import type { ConfigData } from "../../types/common/config";
 import { SettingsForm } from "./SettingsForm";
@@ -17,8 +18,7 @@ export const SettingsDialog = () => {
   const [localConfig, setLocalConfig] = useState<ConfigData | null>(null);
   const [isSynced, setIsSynced] = useState(false);
   const [isSaving, startSaving] = useTransition();
-  const [isBranchesLoading, startBranchesTransition] = useTransition();
-  const [branches, setBranches] = useState<string[]>([]);
+  const branchesFetch = useBranches(isSettingsOpen);
 
   const loadConfig = async () => {
     if (window.electronAPI) {
@@ -39,33 +39,9 @@ export const SettingsDialog = () => {
     }
   };
 
-  const loadBranches = (signal: AbortSignal) => {
-    startBranchesTransition(async () => {
-      try {
-        const res = await fetch(
-          "https://api.github.com/repos/hyperloop-upv/adj/branches?per_page=100",
-          { signal: AbortSignal.any([signal, AbortSignal.timeout(2000)]) },
-        );
-        const data = await res.json();
-        setBranches(data.map((b: { name: string }) => b.name));
-      } catch (error) {
-        if (
-          error instanceof Error &&
-          error.name !== "AbortError" &&
-          error.name !== "TimeoutError"
-        ) {
-          console.error("Error loading branches:", error);
-        }
-      }
-    });
-  };
-
   useEffect(() => {
     if (isSettingsOpen) {
-      const controller = new AbortController();
       loadConfig();
-      loadBranches(controller.signal);
-      return () => controller.abort();
     }
   }, [isSettingsOpen]);
 
@@ -120,8 +96,7 @@ export const SettingsDialog = () => {
               <SettingsForm
                 config={localConfig}
                 onChange={setLocalConfig}
-                branches={branches}
-                branchesLoading={isBranchesLoading}
+                branchesFetch={branchesFetch}
               />
             )}
           </div>

frontend/testing-view/src/components/settings/SettingsForm.tsx

@@ -1,6 +1,7 @@
 import { get, set } from "lodash";
 import { useMemo } from "react";
 import { getSettingsSchema } from "../../constants/settingsSchema";
+import type { BranchesFetchState } from "../../hooks/useBranches";
 import { useStore } from "../../store/store";
 import type { ConfigData } from "../../types/common/config";
 import type { SettingField } from "../../types/common/settings";
@@ -14,11 +15,10 @@ import { TextField } from "./TextField";
 interface SettingsFormProps {
   config: ConfigData;
   onChange: (newConfig: ConfigData) => void;
-  branches: string[];
-  branchesLoading: boolean;
+  branchesFetch: BranchesFetchState;
 }
 
-export const SettingsForm = ({ config, onChange, branches, branchesLoading }: SettingsFormProps) => {
+export const SettingsForm = ({ config, onChange, branchesFetch }: SettingsFormProps) => {
   const handleFieldChange = (
     path: string,
     value: string | number | boolean | string[],
@@ -30,7 +30,7 @@ export const SettingsForm = ({ config, onChange, branches, branchesLoading }: Se
 
   const boards = useStore((s) => s.boards);
   const sortedBoard = boards.sort();
-  const schema = useMemo(() => getSettingsSchema(sortedBoard, branches), [sortedBoard, branches]);
+  const schema = useMemo(() => getSettingsSchema(sortedBoard, branchesFetch.branches), [sortedBoard, branchesFetch.branches]);
 
   const renderField = (field: SettingField) => {
     const currentValue = get(config, field.path);
@@ -103,7 +103,8 @@ export const SettingsForm = ({ config, onChange, branches, branchesLoading }: Se
             field={field}
             value={currentValue as unknown as string}
             onChange={(value) => handleFieldChange(field.path, value)}
-            loading={branchesLoading}
+            loading={branchesFetch.isLoading}
+            fetchState={field.refetchable ? branchesFetch : undefined}
           />
         );
 

frontend/testing-view/src/constants/settingsSchema.ts

@@ -22,6 +22,7 @@ export const getSettingsSchema = (boards: BoardName[], branches: string[] = []):
         path: "adj.branch",
         type: "combobox",
         options: branches,
+        refetchable: true,
       },
     ],
   },

frontend/testing-view/src/features/keyBindings/components/AddKeyBindingDialog.tsx

@@ -87,6 +87,11 @@ export const AddKeyBindingDialog = ({
       return;
     }
 
+    // Disallow number keys (0-9) and Backspace
+    if (/^\d$/.test(e.key) || e.key === "Backspace") {
+      return;
+    }
+
     let key: string;
     if (SPECIAL_KEY_BINDINGS[e.key]) {
       key = SPECIAL_KEY_BINDINGS[e.key];

frontend/testing-view/src/features/keyBindings/constants/specialKeyBindings.ts

@@ -7,6 +7,5 @@ export const SPECIAL_KEY_BINDINGS: Record<string, string> = {
   ArrowDown: "ArrowDown",
   ArrowLeft: "ArrowLeft",
   ArrowRight: "ArrowRight",
-  Backspace: "Backspace",
   Delete: "Delete",
 };

frontend/testing-view/src/features/keyBindings/hooks/useGlobalKeyBindings.ts

@@ -18,18 +18,6 @@ export const useGlobalKeyBindings = () => {
 
   useEffect(() => {
     const handleKeyPress = (e: KeyboardEvent) => {
-      // Skip if a dialog is open
-      if (document.querySelector('[role="dialog"]')) return;
-
-      // Skip if user is typing in an input/textarea/contenteditable
-      if (
-        e.target instanceof HTMLInputElement ||
-        e.target instanceof HTMLTextAreaElement ||
-        (e.target as HTMLElement).isContentEditable
-      ) {
-        return;
-      }
-
       // Build key string (matching the format from AddKeyBindingDialog)
       let key: string;
       if (SPECIAL_KEY_BINDINGS[e.key]) {

frontend/testing-view/src/hooks/useBranches.ts

@@ -0,0 +1,48 @@
+import { useEffect, useState, useTransition } from "react";
+import { config } from "../../config";
+
+export interface BranchesFetchState {
+  branches: string[];
+  isLoading: boolean;
+  error: boolean;
+  refetch: () => void;
+}
+
+export const useBranches = (enabled: boolean): BranchesFetchState => {
+  const [branches, setBranches] = useState<string[]>([]);
+  const [isLoading, startTransition] = useTransition();
+  const [error, setError] = useState(false);
+
+  const load = (signal: AbortSignal) => {
+    startTransition(async () => {
+      try {
+        setError(false);
+        const res = await fetch(
+          `https://api.github.com/repos/${config.ADJ_GITHUB_REPO}/branches?per_page=100`,
+          { signal: AbortSignal.any([signal, AbortSignal.timeout(config.BRANCHES_FETCH_TIMEOUT)]) },
+        );
+        const data = await res.json();
+        setBranches(data.map((b: { name: string }) => b.name));
+      } catch (err) {
+        if (err instanceof Error && err.name !== "AbortError") {
+          setError(true);
+        }
+      }
+    });
+  };
+
+  const refetch = () => {
+    const controller = new AbortController();
+    load(controller.signal);
+  };
+
+  useEffect(() => {
+    if (enabled) {
+      const controller = new AbortController();
+      load(controller.signal);
+      return () => controller.abort();
+    }
+  }, [enabled]);
+
+  return { branches, isLoading, error, refetch };
+};