UI for workflow templates (#1715)

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

skyvern-frontend/src/routes/workflows/hooks/useCreateWorkflowMutation.ts

@@ -0,0 +1,37 @@
+import { useQueryClient } from "@tanstack/react-query";
+import { useMutation } from "@tanstack/react-query";
+import { WorkflowCreateYAMLRequest } from "../types/workflowYamlTypes";
+import { useCredentialGetter } from "@/hooks/useCredentialGetter";
+import { getClient } from "@/api/AxiosClient";
+import { useNavigate } from "react-router-dom";
+import { stringify as convertToYAML } from "yaml";
+import { WorkflowApiResponse } from "../types/workflowTypes";
+
+function useCreateWorkflowMutation() {
+  const queryClient = useQueryClient();
+  const credentialGetter = useCredentialGetter();
+  const navigate = useNavigate();
+  return useMutation({
+    mutationFn: async (workflow: WorkflowCreateYAMLRequest) => {
+      const client = await getClient(credentialGetter);
+      const yaml = convertToYAML(workflow);
+      return client.post<string, { data: WorkflowApiResponse }>(
+        "/workflows",
+        yaml,
+        {
+          headers: {
+            "Content-Type": "text/plain",
+          },
+        },
+      );
+    },
+    onSuccess: (response) => {
+      queryClient.invalidateQueries({
+        queryKey: ["workflows"],
+      });
+      navigate(`/workflows/${response.data.workflow_permanent_id}/edit`);
+    },
+  });
+}
+
+export { useCreateWorkflowMutation };

skyvern-frontend/src/routes/workflows/hooks/useWorkflowQuery.ts

@@ -3,6 +3,7 @@ import { useCredentialGetter } from "@/hooks/useCredentialGetter";
 import { useQuery } from "@tanstack/react-query";
 import { WorkflowApiResponse } from "../types/workflowTypes";
 import { useGlobalWorkflowsQuery } from "./useGlobalWorkflowsQuery";
+
 type Props = {
   workflowPermanentId?: string;
 };