Saving tasks in UI (#346)

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

skyvern-frontend/src/routes/tasks/create/CreateNewTaskFormPage.tsx

@@ -0,0 +1,61 @@
+import { useParams } from "react-router-dom";
+import { CreateNewTaskForm } from "./CreateNewTaskForm";
+import { getSampleForInitialFormValues } from "../data/sampleTaskData";
+import { SampleCase, sampleCases } from "../types";
+import { SavedTaskForm } from "./SavedTaskForm";
+import { useQuery } from "@tanstack/react-query";
+import { useCredentialGetter } from "@/hooks/useCredentialGetter";
+import { getClient } from "@/api/AxiosClient";
+
+function CreateNewTaskFormPage() {
+  const { template } = useParams();
+  const credentialGetter = useCredentialGetter();
+
+  const { data, isFetching } = useQuery({
+    queryKey: ["workflows", template],
+    queryFn: async () => {
+      const client = await getClient(credentialGetter);
+      return client
+        .get(`/workflows/${template}`)
+        .then((response) => response.data);
+    },
+    enabled: !!template && !sampleCases.includes(template as SampleCase),
+  });
+
+  if (!template) {
+    return <div>Invalid template</div>;
+  }
+
+  if (sampleCases.includes(template as SampleCase)) {
+    return (
+      <CreateNewTaskForm
+        key={template}
+        initialValues={getSampleForInitialFormValues(template as SampleCase)}
+      />
+    );
+  }
+
+  if (isFetching) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <SavedTaskForm
+      initialValues={{
+        title: data.title,
+        description: data.description,
+        webhookCallbackUrl: data.webhook_callback_url,
+        proxyLocation: data.proxy_location,
+        url: data.workflow_definition.blocks[0].url,
+        navigationGoal: data.workflow_definition.blocks[0].navigation_goal,
+        dataExtractionGoal:
+          data.workflow_definition.blocks[0].data_extraction_goal,
+        extractedInformationSchema:
+          data.workflow_definition.blocks[0].data_schema,
+        navigationPayload: data.workflow_definition.parameters[0].default_value,
+      }}
+    />
+  );
+}
+
+export { CreateNewTaskFormPage };