UI for workflow templates (#1715)

Co-authored-by: Muhammed Salih Altun <muhammedsalihaltun@gmail.com>

skyvern-frontend/src/hooks/useRunsQuery.ts

@@ -0,0 +1,35 @@
+import { getClient } from "@/api/AxiosClient";
+import { useCredentialGetter } from "@/hooks/useCredentialGetter";
+import { useQuery } from "@tanstack/react-query";
+import { Status, TaskApiResponse, WorkflowRunApiResponse } from "@/api/types";
+
+type QueryReturnType = Array<TaskApiResponse | WorkflowRunApiResponse>;
+type UseQueryOptions = Omit<
+  Parameters<typeof useQuery<QueryReturnType>>[0],
+  "queryKey" | "queryFn"
+>;
+
+type Props = {
+  page?: number;
+  statusFilters?: Array<Status>;
+} & UseQueryOptions;
+
+function useRunsQuery({ page = 1, statusFilters }: Props) {
+  const credentialGetter = useCredentialGetter();
+  return useQuery<Array<TaskApiResponse | WorkflowRunApiResponse>>({
+    queryKey: ["runs", { statusFilters }, page],
+    queryFn: async () => {
+      const client = await getClient(credentialGetter);
+      const params = new URLSearchParams();
+      params.append("page", String(page));
+      if (statusFilters) {
+        statusFilters.forEach((status) => {
+          params.append("status", status);
+        });
+      }
+      return client.get("/runs", { params }).then((res) => res.data);
+    },
+  });
+}
+
+export { useRunsQuery };