From c5399e73a1be4fe976683f331214f9c28d1290c7 Mon Sep 17 00:00:00 2001
From: Kerem Yilmaz <kerem@skyvern.com>
Date: Wed, 2 Oct 2024 08:27:33 -0700
Subject: [PATCH] Put headings in new task form pages (#895)

---
 .../tasks/create/CreateNewTaskFormPage.tsx    | 56 +++++++++++--------
 .../routes/tasks/create/retry/RetryTask.tsx   | 55 +++++++++---------
 2 files changed, 63 insertions(+), 48 deletions(-)

diff --git a/skyvern-frontend/src/routes/tasks/create/CreateNewTaskFormPage.tsx b/skyvern-frontend/src/routes/tasks/create/CreateNewTaskFormPage.tsx
index f4b19e29..75e2f441 100644
--- a/skyvern-frontend/src/routes/tasks/create/CreateNewTaskFormPage.tsx
+++ b/skyvern-frontend/src/routes/tasks/create/CreateNewTaskFormPage.tsx
@@ -31,10 +31,15 @@ function CreateNewTaskFormPage() {
 
   if (sampleCases.includes(template as SampleCase)) {
     return (
-      <CreateNewTaskForm
-        key={template}
-        initialValues={getSampleForInitialFormValues(template as SampleCase)}
-      />
+      <div className="space-y-4">
+        <header>
+          <h1 className="text-3xl">Create New Task</h1>
+        </header>
+        <CreateNewTaskForm
+          key={template}
+          initialValues={getSampleForInitialFormValues(template as SampleCase)}
+        />
+      </div>
     );
   }
 
@@ -53,25 +58,30 @@ function CreateNewTaskFormPage() {
   const maxStepsOverride = data.workflow_definition.blocks[0].max_steps_per_run;
 
   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: JSON.stringify(dataSchema, null, 2),
-        navigationPayload,
-        maxStepsOverride,
-        totpIdentifier: data.workflow_definition.blocks[0].totp_identifier,
-        totpVerificationUrl:
-          data.workflow_definition.blocks[0].totp_verification_url,
-        errorCodeMapping: JSON.stringify(errorCodeMapping, null, 2),
-      }}
-    />
+    <div className="space-y-4">
+      <header>
+        <h1 className="text-3xl">Edit Task Template</h1>
+      </header>
+      <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: JSON.stringify(dataSchema, null, 2),
+          navigationPayload,
+          maxStepsOverride,
+          totpIdentifier: data.workflow_definition.blocks[0].totp_identifier,
+          totpVerificationUrl:
+            data.workflow_definition.blocks[0].totp_verification_url,
+          errorCodeMapping: JSON.stringify(errorCodeMapping, null, 2),
+        }}
+      />
+    </div>
   );
 }
 
diff --git a/skyvern-frontend/src/routes/tasks/create/retry/RetryTask.tsx b/skyvern-frontend/src/routes/tasks/create/retry/RetryTask.tsx
index 7091e1b2..297098c0 100644
--- a/skyvern-frontend/src/routes/tasks/create/retry/RetryTask.tsx
+++ b/skyvern-frontend/src/routes/tasks/create/retry/RetryTask.tsx
@@ -15,31 +15,36 @@ function RetryTask() {
   }
 
   return (
-    <CreateNewTaskForm
-      initialValues={{
-        url: task.request.url,
-        navigationGoal: task.request.navigation_goal,
-        navigationPayload:
-          typeof task.request.navigation_payload === "string"
-            ? task.request.navigation_payload
-            : JSON.stringify(task.request.navigation_payload, null, 2),
-        dataExtractionGoal: task.request.data_extraction_goal,
-        extractedInformationSchema:
-          typeof task.request.extracted_information_schema === "string"
-            ? task.request.extracted_information_schema
-            : JSON.stringify(
-                task.request.extracted_information_schema,
-                null,
-                2,
-              ),
-        webhookCallbackUrl: task.request.webhook_callback_url,
-        totpIdentifier: task.request.totp_identifier,
-        totpVerificationUrl: task.request.totp_verification_url,
-        errorCodeMapping: task.request.error_code_mapping
-          ? JSON.stringify(task.request.error_code_mapping, null, 2)
-          : "",
-      }}
-    />
+    <div className="space-y-4">
+      <header>
+        <h1 className="text-3xl">Rerun Task</h1>
+      </header>
+      <CreateNewTaskForm
+        initialValues={{
+          url: task.request.url,
+          navigationGoal: task.request.navigation_goal,
+          navigationPayload:
+            typeof task.request.navigation_payload === "string"
+              ? task.request.navigation_payload
+              : JSON.stringify(task.request.navigation_payload, null, 2),
+          dataExtractionGoal: task.request.data_extraction_goal,
+          extractedInformationSchema:
+            typeof task.request.extracted_information_schema === "string"
+              ? task.request.extracted_information_schema
+              : JSON.stringify(
+                  task.request.extracted_information_schema,
+                  null,
+                  2,
+                ),
+          webhookCallbackUrl: task.request.webhook_callback_url,
+          totpIdentifier: task.request.totp_identifier,
+          totpVerificationUrl: task.request.totp_verification_url,
+          errorCodeMapping: task.request.error_code_mapping
+            ? JSON.stringify(task.request.error_code_mapping, null, 2)
+            : "",
+        }}
+      />
+    </div>
   );
 }