automagic workflow titling SKY-5011 (#3081)

skyvern-frontend/src/routes/workflows/editor/FlowRenderer.tsx

@@ -16,6 +16,7 @@ import { DeleteNodeCallbackContext } from "@/store/DeleteNodeCallbackContext";
 import { useDebugStore } from "@/store/useDebugStore";
 import { useWorkflowHasChangesStore } from "@/store/WorkflowHasChangesStore";
 import { useWorkflowPanelStore } from "@/store/WorkflowPanelStore";
+import { useWorkflowTitleStore } from "@/store/WorkflowTitleStore";
 import { ReloadIcon } from "@radix-ui/react-icons";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import {
@@ -269,11 +270,11 @@ function FlowRenderer({
   const queryClient = useQueryClient();
   const { workflowPanelState, setWorkflowPanelState, closeWorkflowPanel } =
     useWorkflowPanelStore();
+  const { title, initializeTitle } = useWorkflowTitleStore();
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
   const [parameters, setParameters] =
     useState<ParametersState>(initialParameters);
-  const [title, setTitle] = useState(initialTitle);
   const [debuggableBlockCount, setDebuggableBlockCount] = useState(0);
   const nodesInitialized = useNodesInitialized();
   const [shouldConstrainPan, setShouldConstrainPan] = useState(false);
@@ -283,6 +284,11 @@ function FlowRenderer({
       setShouldConstrainPan(true);
     }
   }, [nodesInitialized]);
+
+  useEffect(() => {
+    initializeTitle(initialTitle);
+  }, [initialTitle, initializeTitle]);
+
   const { hasChanges, setHasChanges } = useWorkflowHasChangesStore();
   useShouldNotifyWhenClosingTab(hasChanges);
   const blocker = useBlocker(({ currentLocation, nextLocation }) => {
@@ -799,12 +805,7 @@ function FlowRenderer({
             <Panel position="top-center" className={cn("h-20")}>
               <WorkflowHeader
                 debuggableBlockCount={debuggableBlockCount}
-                title={title}
                 saving={saveWorkflowMutation.isPending}
-                onTitleChange={(newTitle) => {
-                  setTitle(newTitle);
-                  setHasChanges(true);
-                }}
                 parametersPanelOpen={
                   workflowPanelState.active &&
                   workflowPanelState.content === "parameters"

skyvern-frontend/src/routes/workflows/editor/WorkflowHeader.tsx

@@ -20,27 +20,27 @@ import { EditableNodeTitle } from "./nodes/components/EditableNodeTitle";
 import { useCreateWorkflowMutation } from "../hooks/useCreateWorkflowMutation";
 import { convert } from "./workflowEditorUtils";
 import { useDebugStore } from "@/store/useDebugStore";
+import { useWorkflowTitleStore } from "@/store/WorkflowTitleStore";
+import { useWorkflowHasChangesStore } from "@/store/WorkflowHasChangesStore";
 import { cn } from "@/util/utils";
 
 type Props = {
   debuggableBlockCount: number;
-  title: string;
   parametersPanelOpen: boolean;
   onParametersClick: () => void;
   onSave: () => void;
-  onTitleChange: (title: string) => void;
   saving: boolean;
 };
 
 function WorkflowHeader({
   debuggableBlockCount,
-  title,
   parametersPanelOpen,
   onParametersClick,
   onSave,
-  onTitleChange,
   saving,
 }: Props) {
+  const { title, setTitle } = useWorkflowTitleStore();
+  const { setHasChanges } = useWorkflowHasChangesStore();
   const { blockLabel: urlBlockLabel, workflowPermanentId } = useParams();
   const { data: globalWorkflows } = useGlobalWorkflowsQuery();
   const navigate = useNavigate();
@@ -66,7 +66,10 @@ function WorkflowHeader({
       <div className="flex h-full items-center">
         <EditableNodeTitle
           editable={true}
-          onChange={onTitleChange}
+          onChange={(newTitle) => {
+            setTitle(newTitle);
+            setHasChanges(true);
+          }}
           value={title}
           titleClassName="text-3xl"
           inputClassName="text-3xl"

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

@@ -129,6 +129,7 @@ function ActionNode({ id, data, type }: NodeProps<ActionNode>) {
             </div>
 
             <WorkflowBlockInputTextarea
+              canWriteTitle={true}
               nodeId={id}
               onChange={(value) => {
                 handleChange("url", value);

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

@@ -121,6 +121,7 @@ function FileDownloadNode({ id, data }: NodeProps<FileDownloadNode>) {
               ) : null}
             </div>
             <WorkflowBlockInputTextarea
+              canWriteTitle={true}
               nodeId={id}
               onChange={(value) => {
                 handleChange("url", value);

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

@@ -242,6 +242,7 @@ function HttpRequestNode({ id, data }: NodeProps<HttpRequestNodeType>) {
                 ) : null}
               </div>
               <WorkflowBlockInputTextarea
+                canWriteTitle={true}
                 nodeId={id}
                 onChange={(value) => {
                   handleChange("url", value);

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

@@ -119,6 +119,7 @@ function LoginNode({ id, data, type }: NodeProps<LoginNode>) {
             </div>
 
             <WorkflowBlockInputTextarea
+              canWriteTitle={true}
               nodeId={id}
               onChange={(value) => {
                 handleChange("url", value);

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

@@ -127,6 +127,7 @@ function NavigationNode({ id, data, type }: NodeProps<NavigationNode>) {
             </div>
 
             <WorkflowBlockInputTextarea
+              canWriteTitle={true}
               nodeId={id}
               onChange={(value) => {
                 handleChange("url", value);

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

@@ -128,6 +128,7 @@ function TaskNode({ id, data, type }: NodeProps<TaskNode>) {
                     ) : null}
                   </div>
                   <WorkflowBlockInputTextarea
+                    canWriteTitle={true}
                     nodeId={id}
                     onChange={(value) => {
                       handleChange("url", value);

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

@@ -102,6 +102,7 @@ function Taskv2Node({ id, data, type }: NodeProps<Taskv2Node>) {
           <div className="space-y-2">
             <Label className="text-xs text-slate-300">URL</Label>
             <WorkflowBlockInputTextarea
+              canWriteTitle={true}
               nodeId={id}
               onChange={(value) => {
                 handleChange("url", value);

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

@@ -75,6 +75,7 @@ function URLNode({ id, data, type }: NodeProps<URLNode>) {
               ) : null}
             </div>
             <WorkflowBlockInputTextarea
+              canWriteTitle={true}
               nodeId={id}
               onChange={(value) => {
                 handleChange("url", value);