Add url param support to runners page (#7127)

When you filter the /runners/[org] results, it now updates the url so
that you can save/book mark frequent queries

For example, when you for "b200" the url will get updated to
"/runners/pytorch?search=b200"

Author: ZainRizvi

torchci/lib/ParamSelector.tsx

@@ -15,35 +15,37 @@ export function ParamSelector({
   return (
     <form
       className={styles.branchForm}
-      onSubmit={(e) => {
+      onSubmit={(e: React.FormEvent<HTMLFormElement>) => {
         e.preventDefault();
-        // @ts-ignore
-        handleSubmit(e.target[0].value);
+        const form = e.currentTarget;
+        const input = form.querySelector(
+          'input[type="text"]'
+        ) as HTMLInputElement;
+        if (input) {
+          handleSubmit(input.value);
+        }
       }}
     >
       <input
-        onChange={(e) => {
-          // @ts-ignore
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
           setVal(e.target.value);
         }}
-        onFocus={(e) => {
+        onFocus={(e: React.FocusEvent<HTMLInputElement>) => {
           e.target.select();
-          console.log(e.target.value);
         }}
-        onBlur={(e) => {
+        onBlur={(e: React.FocusEvent<HTMLInputElement>) => {
           if (e.target.value !== value && e.target.value.length > 0) {
             e.preventDefault();
             handleSubmit(e.target.value);
           }
         }}
-        onKeyDown={(e) => {
+        onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
           if (e.key === "Escape") {
             e.preventDefault();
-            // @ts-ignore
-            e.target.value = value;
+            const input = e.currentTarget;
+            input.value = value;
             setVal(value);
-            // @ts-ignore
-            e.target.blur();
+            input.blur();
           }
         }}
         size={val.length || 0}

torchci/pages/api/runners/[org].ts

@@ -18,11 +18,6 @@ export const ALLOWED_ORGS = ["pytorch", "meta-pytorch"];
 
 // Shared function to map GitHub API runner response to our format
 function mapRunnerFromGitHubAPI(runner: any): RunnerData {
-  // Debug: Log full runner object for runners with no labels
-  if (!runner.labels || runner.labels.length === 0) {
-    console.log("Runner with no labels:", JSON.stringify(runner, null, 2));
-  }
-
   return {
     id: runner.id,
     name: runner.name,
@@ -187,9 +182,7 @@ export default async function handler(
   // Check if org is allowed
   if (!ALLOWED_ORGS.includes(org.toLowerCase())) {
     return res.status(403).json({
-      error: `Access denied. Only ${ALLOWED_ORGS.join(
-        ", "
-      )} organizations are supported.`,
+      error: "Access denied. This organization is not supported.",
     });
   }
 

torchci/pages/runners/[org].tsx

@@ -40,9 +40,11 @@ import {
 import { RunnerGroupCard } from "components/runners/RunnerGroupCard";
 import { ParamSelector } from "lib/ParamSelector";
 import { RunnersApiResponse, unknownGoesLast } from "lib/runnerUtils";
+import debounce from "lodash/debounce";
 import { useSession } from "next-auth/react";
 import { useRouter } from "next/router";
-import { useMemo, useState } from "react";
+import type { ParsedUrlQuery } from "querystring";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import useSWR from "swr";
 
 // Define sort order constants to prevent typos
@@ -71,10 +73,58 @@ export default function RunnersPage() {
   const orgParam = typeof org === "string" ? org : null;
 
   const { data: _session, status: _status } = useSession();
-  const [searchTerm, setSearchTerm] = useState("");
+
+  // Utility function to extract search term from URL query
+  const getSearchFromQuery = (query: ParsedUrlQuery): string => {
+    return typeof query.search === "string" ? query.search : "";
+  };
+
+  // Get search term from URL parameters
+  const [searchTerm, setSearchTerm] = useState(
+    getSearchFromQuery(router.query)
+  );
   const [sortOrder, setSortOrder] = useState<SortOrder>(SORT_ALPHABETICAL);
   const [expandedGroup, setExpandedGroup] = useState<string | null>(null);
 
+  // Use ref to access current router.query without causing debounce recreations
+  const routerQueryRef = useRef(router.query);
+  routerQueryRef.current = router.query;
+
+  // Sync search state with URL changes
+  useEffect(() => {
+    const searchParam = router.query.search;
+    const newSearchTerm = getSearchFromQuery({ search: searchParam });
+    setSearchTerm(newSearchTerm);
+  }, [router.query.search]);
+
+  // Debounced function to update search in URL
+  // Debouncing lets us limit the rate at which the
+  // function is called, so that it doesn't get called on every
+  // keystroke.  Instead, it'll wait for DEBOUNCE_DELAY_MS
+  // before executing.
+  const DEBOUNCE_DELAY_MS = 300;
+  const updateSearchInUrl = useCallback(
+    debounce((newSearchTerm: string) => {
+      const query = { ...routerQueryRef.current };
+      if (newSearchTerm) {
+        query.search = newSearchTerm;
+      } else {
+        delete query.search;
+      }
+      router.push({ pathname: router.pathname, query }, undefined, {
+        shallow: true,
+      });
+    }, DEBOUNCE_DELAY_MS),
+    [router.pathname]
+  );
+
+  // Cleanup debounced function on unmount or when it changes
+  useEffect(() => {
+    return () => {
+      updateSearchInUrl.cancel();
+    };
+  }, [updateSearchInUrl]);
+
   // Handle URL editing for organization
   const handleOrgSubmit = (newOrg: string) => {
     if (!newOrg) return;
@@ -192,7 +242,11 @@ export default function RunnersPage() {
           variant="outlined"
           placeholder="Search runners by name, ID, OS, or labels..."
           value={searchTerm}
-          onChange={(e) => setSearchTerm(e.target.value)}
+          onChange={(e) => {
+            const value = e.target.value;
+            setSearchTerm(value); // Immediate UI update
+            updateSearchInUrl(value); // Debounced URL update
+          }}
           sx={{ maxWidth: 600, mb: 2 }}
         />