Add url param support to runners page

Author: ZainRizvi

torchci/lib/ParamSelector.tsx

@@ -15,35 +15,33 @@ 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.elements[0] as HTMLInputElement;
+        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) => {
           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,10 +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,
@@ -187,9 +183,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

@@ -42,7 +42,9 @@ import { ParamSelector } from "lib/ParamSelector";
 import { RunnersApiResponse, unknownGoesLast } from "lib/runnerUtils";
 import { useSession } from "next-auth/react";
 import { useRouter } from "next/router";
-import { useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import debounce from "lodash/debounce";
+import type { ParsedUrlQuery } from "querystring";
 import useSWR from "swr";
 
 // Define sort order constants to prevent typos
@@ -71,10 +73,38 @@ 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);
 
+  // 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
+  const updateSearchInUrl = useCallback(
+    debounce((newSearchTerm: string) => {
+      const query = { ...router.query };
+      if (newSearchTerm) {
+        query.search = newSearchTerm;
+      } else {
+        delete query.search;
+      }
+      router.push({ pathname: router.pathname, query }, undefined, { shallow: true });
+    }, 300),
+    [router]
+  );
+
   // Handle URL editing for organization
   const handleOrgSubmit = (newOrg: string) => {
     if (!newOrg) return;
@@ -192,7 +222,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 }}
         />