Change appearance of parameters in task details (#1017)

skyvern-frontend/src/components/AutoResizingTextarea/AutoResizingTextarea.tsx

@@ -1,10 +1,22 @@
-import { useLayoutEffect, useRef } from "react";
+import { ChangeEventHandler, useLayoutEffect, useRef } from "react";
 import { Textarea } from "@/components/ui/textarea";
 import { cn } from "@/util/utils";
 
-type Props = React.ComponentPropsWithoutRef<typeof Textarea>;
+type Props = {
+  value: string;
+  onChange?: ChangeEventHandler<HTMLTextAreaElement>;
+  className?: string;
+  readOnly?: boolean;
+  placeholder?: string;
+};
 
-function AutoResizingTextarea(props: Props) {
+function AutoResizingTextarea({
+  value,
+  onChange,
+  className,
+  readOnly,
+  placeholder,
+}: Props) {
   const ref = useRef<HTMLTextAreaElement>(null);
 
   useLayoutEffect(() => {
@@ -25,12 +37,15 @@ function AutoResizingTextarea(props: Props) {
 
   return (
     <Textarea
-      {...props}
+      value={value}
+      onChange={onChange}
+      readOnly={readOnly}
+      placeholder={placeholder}
       ref={ref}
       onKeyDown={setSize}
       onInput={setSize}
       rows={1}
-      className={cn("min-h-0 resize-none overflow-y-hidden", props.className)}
+      className={cn("min-h-0 resize-none overflow-y-hidden", className)}
     />
   );
 }

skyvern-frontend/src/routes/tasks/detail/TaskDetails.tsx

@@ -124,7 +124,7 @@ function TaskDetails() {
       <CodeEditor
         language="json"
         value={JSON.stringify(task.extracted_information, null, 2)}
-        disabled
+        readOnly
         fontSize={12}
         minHeight={"96px"}
         maxHeight={"500px"}
@@ -148,7 +148,7 @@ function TaskDetails() {
       <CodeEditor
         language="json"
         value={JSON.stringify(task.failure_reason, null, 2)}
-        disabled
+        readOnly
         fontSize={12}
         minHeight={"96px"}
         maxHeight={"500px"}

skyvern-frontend/src/routes/tasks/detail/TaskParameters.tsx

@@ -1,18 +1,10 @@
 import { getClient } from "@/api/AxiosClient";
 import { TaskApiResponse } from "@/api/types";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
+import { AutoResizingTextarea } from "@/components/AutoResizingTextarea/AutoResizingTextarea";
 import { Input } from "@/components/ui/input";
 import { Skeleton } from "@/components/ui/skeleton";
-import { Textarea } from "@/components/ui/textarea";
 import { useCredentialGetter } from "@/hooks/useCredentialGetter";
-import { basicTimeFormat } from "@/util/timeFormat";
-import { Label, Separator } from "@radix-ui/react-dropdown-menu";
+import { CodeEditor } from "@/routes/workflows/components/CodeEditor";
 import { useQuery } from "@tanstack/react-query";
 import { useParams } from "react-router-dom";
 
@@ -44,74 +36,85 @@ function TaskParameters() {
   }
 
   return (
-    <Card>
-      <CardHeader className="border-b-2">
-        <CardTitle className="text-xl">Parameters</CardTitle>
-        <CardDescription>Task URL and Input Parameters</CardDescription>
-      </CardHeader>
-      <CardContent className="py-8">
-        <div className="flex flex-col gap-8">
-          <div className="flex items-center">
-            <Label className="w-40 shrink-0">URL</Label>
-            <Input value={task.request.url} readOnly />
-          </div>
-          <Separator />
-          <div className="flex items-center">
-            <Label className="w-40 shrink-0">Created at</Label>
-            <Input value={basicTimeFormat(task.created_at)} readOnly />
-          </div>
-          <Separator />
-          <div className="flex items-center">
-            <Label className="w-40 shrink-0">Navigation Goal</Label>
-            <Textarea
-              rows={5}
-              value={task.request.navigation_goal ?? ""}
-              readOnly
-            />
-          </div>
-          <Separator />
-          <div className="flex items-center">
-            <Label className="w-40 shrink-0">Navigation Payload</Label>
-            <Textarea
-              rows={5}
-              value={
-                typeof task.request.navigation_payload === "object"
-                  ? JSON.stringify(task.request.navigation_payload, null, 2)
-                  : task.request.navigation_payload
-              }
-              readOnly
-            />
-          </div>
-          <Separator />
-          <div className="flex items-center">
-            <Label className="w-40 shrink-0">Data Extraction Goal</Label>
-            <Textarea
-              rows={5}
-              value={task.request.data_extraction_goal ?? ""}
-              readOnly
-            />
-          </div>
-          <div className="flex items-center">
-            <Label className="w-40 shrink-0">
-              Extracted Information Schema
-            </Label>
-            <Textarea
-              rows={5}
-              value={
-                typeof task.request.extracted_information_schema === "object"
-                  ? JSON.stringify(
-                      task.request.extracted_information_schema,
-                      null,
-                      2,
-                    )
-                  : task.request.extracted_information_schema
-              }
-              readOnly
-            />
-          </div>
+    <section className="space-y-8 rounded-lg bg-slate-elevation3 px-6 py-5">
+      <div className="flex gap-16">
+        <div className="w-72">
+          <h1 className="text-lg">URL</h1>
+          <h2 className="text-base text-slate-400">
+            The starting URL for the task
+          </h2>
         </div>
-      </CardContent>
-    </Card>
+        <Input value={task.request.url} readOnly />
+      </div>
+      <div className="flex gap-16">
+        <div className="w-72">
+          <h1 className="text-lg">Navigation Goal</h1>
+          <h2 className="text-base text-slate-400">
+            Where should Skyvern go and what should Skyvern do?
+          </h2>
+        </div>
+        <AutoResizingTextarea
+          value={task.request.navigation_goal ?? ""}
+          readOnly
+        />
+      </div>
+      <div className="flex gap-16">
+        <div className="w-72">
+          <h1 className="text-lg">Navigation Payload</h1>
+          <h2 className="text-base text-slate-400">
+            Specify important parameters, routes, or states
+          </h2>
+        </div>
+        <CodeEditor
+          className="w-full"
+          language="json"
+          value={
+            typeof task.request.navigation_payload === "object"
+              ? JSON.stringify(task.request.navigation_payload, null, 2)
+              : task.request.navigation_payload
+          }
+          readOnly
+          minHeight="96px"
+          maxHeight="500px"
+        />
+      </div>
+      <div className="flex gap-16">
+        <div className="w-72">
+          <h1 className="text-lg">Data Extraction Goal</h1>
+          <h2 className="text-base text-slate-400">
+            What outputs are you looking to get?
+          </h2>
+        </div>
+        <AutoResizingTextarea
+          value={task.request.data_extraction_goal ?? ""}
+          readOnly
+        />
+      </div>
+      <div className="flex gap-16">
+        <div className="w-72">
+          <h1 className="text-lg">Data Schema</h1>
+          <h2 className="text-base text-slate-400">
+            Specify the output format in JSON
+          </h2>
+        </div>
+        <CodeEditor
+          className="w-full"
+          language="json"
+          value={
+            typeof task.request.extracted_information_schema === "object"
+              ? JSON.stringify(
+                  task.request.extracted_information_schema,
+                  null,
+                  2,
+                )
+              : task.request.extracted_information_schema
+          }
+          readOnly
+          minHeight="96px"
+          maxHeight="500px"
+        />
+      </div>
+    </section>
   );
 }
 

skyvern-frontend/src/routes/workflows/WorkflowRun.tsx

@@ -492,7 +492,7 @@ function WorkflowRun() {
                 ) : (
                   <CodeEditor
                     value={JSON.stringify(value, null, 2)}
-                    disabled
+                    readOnly
                     language="json"
                     fontSize={12}
                     minHeight="96px"

skyvern-frontend/src/routes/workflows/components/CodeEditor.tsx

@@ -8,7 +8,7 @@ type Props = {
   value: string;
   onChange?: (value: string) => void;
   language: "python" | "json";
-  disabled?: boolean;
+  readOnly?: boolean;
   minHeight?: string;
   maxHeight?: string;
   className?: string;
@@ -22,7 +22,7 @@ function CodeEditor({
   maxHeight,
   language,
   className,
-  disabled,
+  readOnly = false,
   fontSize = 8,
 }: Props) {
   const extensions =
@@ -37,7 +37,7 @@ function CodeEditor({
       theme={tokyoNightStorm}
       minHeight={minHeight}
       maxHeight={maxHeight}
-      readOnly={disabled}
+      readOnly={readOnly}
       className={cn("cursor-auto", className)}
       style={{
         fontSize: fontSize,