Change PDF Block Icon and input type (#1615)

skyvern-frontend/src/routes/workflows/editor/nodes/PDFParserNode/PDFParserNode.tsx

@@ -1,6 +1,8 @@
 import { HelpTooltip } from "@/components/HelpTooltip";
-import { Input } from "@/components/ui/input";
+import { Checkbox } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
+import { WorkflowBlockInput } from "@/components/WorkflowBlockInput";
+import { CodeEditor } from "@/routes/workflows/components/CodeEditor";
 import { useDeleteNodeCallback } from "@/routes/workflows/hooks/useDeleteNodeCallback";
 import { useNodeLabelChangeHandler } from "@/routes/workflows/hooks/useLabelChangeHandler";
 import { WorkflowBlockTypes } from "@/routes/workflows/types/workflowTypes";
@@ -9,11 +11,9 @@ import { useState } from "react";
 import { helpTooltips } from "../../helpContent";
 import { EditableNodeTitle } from "../components/EditableNodeTitle";
 import { NodeActionMenu } from "../NodeActionMenu";
+import { dataSchemaExampleForFileExtraction } from "../types";
 import { WorkflowBlockIcon } from "../WorkflowBlockIcon";
 import { type PDFParserNode } from "./types";
-import { Checkbox } from "@/components/ui/checkbox";
-import { dataSchemaExampleForFileExtraction } from "../types";
-import { CodeEditor } from "@/routes/workflows/components/CodeEditor";
 
 function PDFParserNode({ id, data }: NodeProps<PDFParserNode>) {
   const { updateNodeData } = useReactFlow();
@@ -81,14 +81,11 @@ function PDFParserNode({ id, data }: NodeProps<PDFParserNode>) {
               <Label className="text-xs text-slate-300">File URL</Label>
               <HelpTooltip content={helpTooltips["pdfParser"]["fileUrl"]} />
             </div>
-            <Input
+            <WorkflowBlockInput
+              nodeId={id}
               value={inputs.fileUrl}
-              onChange={(event) => {
-                if (!data.editable) {
-                  return;
-                }
-                setInputs({ ...inputs, fileUrl: event.target.value });
-                updateNodeData(id, { fileUrl: event.target.value });
+              onChange={(value) => {
+                handleChange("fileUrl", value);
               }}
               className="nopan text-xs"
             />

skyvern-frontend/src/routes/workflows/editor/nodes/WorkflowBlockIcon.tsx

@@ -6,6 +6,7 @@ import {
   CursorTextIcon,
   DownloadIcon,
   EnvelopeClosedIcon,
+  FileTextIcon,
   ListBulletIcon,
   LockOpen1Icon,
   StopwatchIcon,
@@ -68,7 +69,7 @@ function WorkflowBlockIcon({ workflowBlockType, className }: Props) {
       return <StopwatchIcon className={className} />;
     }
     case "pdf_parser": {
-      return <CursorTextIcon className={className} />;
+      return <FileTextIcon className={className} />;
     }
   }
 }

skyvern-frontend/src/routes/workflows/editor/panels/WorkflowNodeLibraryPanel.tsx

@@ -220,7 +220,7 @@ function WorkflowNodeLibraryPanel({ onNodeClick, first }: Props) {
           </div>
           <span className="text-sm text-slate-400">
             {first
-              ? "Click on the node type to add your first node"
+              ? "Click on the node type to add your first block"
               : "Click on the node type you want to add"}
           </span>
         </header>
@@ -252,7 +252,7 @@ function WorkflowNodeLibraryPanel({ onNodeClick, first }: Props) {
                     }}
                   >
                     <div className="flex gap-2">
-                      <div className="flex h-[2.75rem] w-[2.75rem] items-center justify-center rounded border border-slate-600">
+                      <div className="flex h-[2.75rem] w-[2.75rem] shrink-0 items-center justify-center rounded border border-slate-600">
                         {item.icon}
                       </div>
                       <div className="flex flex-col gap-1">
@@ -264,7 +264,7 @@ function WorkflowNodeLibraryPanel({ onNodeClick, first }: Props) {
                         </span>
                       </div>
                     </div>
-                    <PlusIcon className="size-6" />
+                    <PlusIcon className="size-6 shrink-0" />
                   </div>
                 );
               })}