fix: without machine will crash workflow page

web/src/components/APIKeyList.tsx

@@ -209,7 +209,7 @@ export function APIKeyList({ data }: { data: APIKey[] }) {
     <div className="w-full">
       <div className="flex items-center py-4">
         <Input
-          placeholder="Filter machines..."
+          placeholder="Filter keys..."
           value={(table.getColumn("name")?.getFilterValue() as string) ?? ""}
           onChange={(event) =>
             table.getColumn("name")?.setFilterValue(event.target.value)

web/src/components/VersionSelect.tsx

@@ -87,9 +87,8 @@ export function MachineSelect({
 }: {
   machines: Awaited<ReturnType<typeof getMachines>>;
 }) {
-  const [machine, setMachine] = useQueryState("machine", {
-    defaultValue: machines?.[0].id ?? "",
-  });
+  const [machine, setMachine] = useSelectedMachine(machines);
+
   return (
     <Select
       value={machine}
@@ -114,6 +113,14 @@ export function MachineSelect({
   );
 }
 
+function useSelectedMachine(machines: Awaited<ReturnType<typeof getMachines>>) {
+  const a = useQueryState("machine", {
+    defaultValue: machines?.[0]?.id ?? "",
+  });
+
+  return a;
+}
+
 export function RunWorkflowButton({
   workflow,
   machines,
@@ -125,9 +132,7 @@ export function RunWorkflowButton({
     defaultValue: workflow?.versions[0].version ?? 1,
     ...parseAsInteger,
   });
-  const [machine] = useQueryState("machine", {
-    defaultValue: machines[0].id ?? "",
-  });
+  const [machine] = useSelectedMachine(machines);
   const [isLoading, setIsLoading] = useState(false);
 
   const [values, setValues] = useState<Record<string, string>>({});
@@ -241,9 +246,8 @@ export function CreateDeploymentButton({
     defaultValue: workflow?.versions[0].version ?? 1,
     ...parseAsInteger,
   });
-  const [machine] = useQueryState("machine", {
-    defaultValue: machines[0].id ?? "",
-  });
+  const [machine] = useSelectedMachine(machines);
+
   const [isLoading, setIsLoading] = useState(false);
   const workflow_version_id = workflow?.versions.find(
     (x) => x.version === version

web/src/components/WorkflowList.tsx

@@ -5,7 +5,6 @@ import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import {
   DropdownMenu,
-  DropdownMenuCheckboxItem,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuLabel,
@@ -36,7 +35,7 @@ import {
   getSortedRowModel,
   useReactTable,
 } from "@tanstack/react-table";
-import { ArrowUpDown, ChevronDown, MoreHorizontal } from "lucide-react";
+import { ArrowUpDown, MoreHorizontal } from "lucide-react";
 import * as React from "react";
 
 export type Payment = {
@@ -203,7 +202,7 @@ export function WorkflowList({ data }: { data: Payment[] }) {
           }
           className="max-w-sm"
         />
-        <DropdownMenu>
+        {/* <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button variant="outline" className="ml-auto">
               Columns <ChevronDown className="ml-2 h-4 w-4" />
@@ -228,7 +227,7 @@ export function WorkflowList({ data }: { data: Payment[] }) {
                 );
               })}
           </DropdownMenuContent>
-        </DropdownMenu>
+        </DropdownMenu> */}
       </div>
       <ScrollArea className="h-full w-full rounded-md border">
         <Table>