feat: add Edit Metadata functionality with dialog for workflow metadata updates

bchapuis · bchapuis · commit d0dbbaa676e0 · 2025-10-20T22:49:58.000+02:00
diff --git a/apps/web/src/components/workflow/edit-metadata-dialog.tsx b/apps/web/src/components/workflow/edit-metadata-dialog.tsx
@@ -0,0 +1,104 @@
+import { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Spinner } from "@/components/ui/spinner";
+import { Textarea } from "@/components/ui/textarea";
+
+export interface EditMetadataDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  initialName: string;
+  initialDescription?: string;
+  onSave: (name: string, description?: string) => Promise<void>;
+}
+
+export function EditMetadataDialog({
+  open,
+  onOpenChange,
+  initialName,
+  initialDescription,
+  onSave,
+}: EditMetadataDialogProps) {
+  const [workflowName, setWorkflowName] = useState(initialName);
+  const [workflowDescription, setWorkflowDescription] = useState(
+    initialDescription || ""
+  );
+  const [isSaving, setIsSaving] = useState(false);
+
+  // Reset state when dialog opens
+  const handleOpenChange = (newOpen: boolean) => {
+    if (newOpen) {
+      setWorkflowName(initialName);
+      setWorkflowDescription(initialDescription || "");
+    }
+    onOpenChange(newOpen);
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsSaving(true);
+    try {
+      await onSave(workflowName, workflowDescription || undefined);
+      onOpenChange(false);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Edit Metadata</DialogTitle>
+        </DialogHeader>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <Label htmlFor="workflow-name">Workflow Name</Label>
+            <Input
+              id="workflow-name"
+              value={workflowName}
+              onChange={(e) => setWorkflowName(e.target.value)}
+              placeholder="Enter workflow name"
+              className="mt-2"
+            />
+          </div>
+          <div>
+            <Label htmlFor="workflow-description">Description (Optional)</Label>
+            <Textarea
+              id="workflow-description"
+              value={workflowDescription}
+              onChange={(e) => setWorkflowDescription(e.target.value)}
+              placeholder="Describe what you are building"
+              className="mt-2"
+              maxLength={256}
+              rows={3}
+            />
+          </div>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              type="button"
+              onClick={() => onOpenChange(false)}
+              disabled={isSaving}
+            >
+              Cancel
+            </Button>
+            <Button type="submit" disabled={isSaving}>
+              {isSaving ? <Spinner className="h-4 w-4 mr-2" /> : null}
+              Save
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/web/src/components/workflow/workflow-builder.tsx b/apps/web/src/components/workflow/workflow-builder.tsx
@@ -48,6 +48,7 @@ export interface WorkflowBuilderProps {
   initialWorkflowExecution?: WorkflowExecution;
   readonly?: boolean;
   onDeployWorkflow?: (e: React.MouseEvent) => void;
+  onEditMetadata?: (e: React.MouseEvent) => void;
   onSetSchedule?: () => void;
   onShowHttpIntegration?: () => void;
   onShowEmailTrigger?: () => void;
@@ -68,6 +69,7 @@ export function WorkflowBuilder({
   initialWorkflowExecution,
   readonly = false,
   onDeployWorkflow,
+  onEditMetadata,
   onSetSchedule,
   onShowHttpIntegration,
   onShowEmailTrigger,
@@ -443,6 +445,9 @@ export function WorkflowBuilder({
               onDeploy={
                 !readonly && onDeployWorkflow ? onDeployWorkflow : undefined
               }
+              onEditMetadata={
+                !readonly && onEditMetadata ? onEditMetadata : undefined
+              }
               workflowStatus={workflowStatus}
               workflowType={workflowType}
               onSetSchedule={onSetSchedule}
diff --git a/apps/web/src/components/workflow/workflow-canvas.tsx b/apps/web/src/components/workflow/workflow-canvas.tsx
@@ -23,6 +23,7 @@ import Clock from "lucide-react/icons/clock";
 import Copy from "lucide-react/icons/copy";
 import Eye from "lucide-react/icons/eye";
 import EyeOff from "lucide-react/icons/eye-off";
+import FileText from "lucide-react/icons/file-text";
 import Globe from "lucide-react/icons/globe";
 import Layers2 from "lucide-react/icons/layers-2";
 import Mail from "lucide-react/icons/mail";
@@ -166,6 +167,7 @@ export interface WorkflowCanvasProps {
   onAddNode?: () => void;
   onAction?: (e: React.MouseEvent) => void;
   onDeploy?: (e: React.MouseEvent) => void;
+  onEditMetadata?: (e: React.MouseEvent) => void;
   onSetSchedule?: () => void;
   onShowHttpIntegration?: () => void;
   onShowEmailTrigger?: () => void;
@@ -312,6 +314,27 @@ export function DeployButton({
   );
 }
 
+export function EditMetadataButton({
+  onClick,
+  className = "",
+  tooltip = "Edit Metadata",
+}: {
+  onClick: (e: React.MouseEvent) => void;
+  className?: string;
+  tooltip?: string;
+}) {
+  return (
+    <ActionBarButton
+      onClick={onClick}
+      tooltip={tooltip}
+      tooltipSide="bottom"
+      className={cn(actionBarButtonOutlineClassName, className)}
+    >
+      <FileText className="!size-4" />
+    </ActionBarButton>
+  );
+}
+
 type SidebarToggleProps = {
   onClick: (e: React.MouseEvent) => void;
   isSidebarVisible: boolean;
@@ -704,6 +727,7 @@ export function WorkflowCanvas({
   onAddNode,
   onAction,
   onDeploy,
+  onEditMetadata,
   workflowType,
   onSetSchedule,
   onShowHttpIntegration,
@@ -849,6 +873,9 @@ export function WorkflowCanvas({
                       disabled={nodes.length === 0}
                     />
                   )}
+                  {onEditMetadata && (
+                    <EditMetadataButton onClick={onEditMetadata} />
+                  )}
                   {onSetSchedule && workflowType === "cron" && (
                     <SetScheduleButton
                       onClick={onSetSchedule}
diff --git a/apps/web/src/pages/editor-page.tsx b/apps/web/src/pages/editor-page.tsx
@@ -7,6 +7,7 @@ import { toast } from "sonner";
 
 import { useAuth } from "@/components/auth-context";
 import { InsetLoading } from "@/components/inset-loading";
+import { EditMetadataDialog } from "@/components/workflow/edit-metadata-dialog";
 import { EmailTriggerDialog } from "@/components/workflow/email-trigger-dialog";
 import { ExecutionEmailDialog } from "@/components/workflow/execution-email-dialog";
 import { ExecutionFormDialog } from "@/components/workflow/execution-form-dialog";
@@ -34,6 +35,8 @@ import {
 import { useObjectService } from "@/services/object-service";
 import { useNodeTypes } from "@/services/type-service";
 import {
+  getWorkflow,
+  updateWorkflow,
   upsertCronTrigger,
   useCronTrigger,
   useWorkflowExecution,
@@ -53,6 +56,11 @@ export function EditorPage() {
     useState(false);
   const [isEmailTriggerDialogOpen, setIsEmailTriggerDialogOpen] =
     useState(false);
+  const [isEditMetadataDialogOpen, setIsEditMetadataDialogOpen] =
+    useState(false);
+  const [localWorkflowName, setLocalWorkflowName] = useState<string>("");
+  const [localWorkflowDescription, setLocalWorkflowDescription] =
+    useState<string>();
 
   // Fetch all node types initially (no filter)
   const { nodeTypes, nodeTypesError, isNodeTypesLoading } = useNodeTypes(
@@ -220,12 +228,20 @@ export function EditorPage() {
     submitEmailFormData,
   } = useWorkflowExecution(orgHandle, wsExecuteWorkflow);
 
+  // Sync local workflow name from metadata
+  useEffect(() => {
+    if (workflowMetadata?.name && !localWorkflowName) {
+      setLocalWorkflowName(workflowMetadata.name);
+      setLocalWorkflowDescription((workflowMetadata as any).description);
+    }
+  }, [workflowMetadata, localWorkflowName]);
+
   usePageBreadcrumbs(
     [
       { label: "Workflows", to: getOrgUrl("workflows") },
-      { label: workflowMetadata?.name || "Workflow" },
+      { label: localWorkflowName || workflowMetadata?.name || "Workflow" },
     ],
-    [workflowMetadata?.name]
+    [localWorkflowName, workflowMetadata?.name]
   );
 
   const validateConnection = useCallback(
@@ -280,6 +296,42 @@ export function EditorPage() {
     }
   };
 
+  const handleEditMetadata = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsEditMetadataDialogOpen(true);
+  }, []);
+
+  const handleSaveMetadata = useCallback(
+    async (name: string, description?: string) => {
+      if (!id || !orgHandle || !workflowMetadata) return;
+
+      try {
+        const fullWorkflow = await getWorkflow(id, orgHandle);
+        await updateWorkflow(
+          id,
+          {
+            name,
+            description,
+            type: fullWorkflow.type,
+            nodes: fullWorkflow.nodes,
+            edges: fullWorkflow.edges,
+          },
+          orgHandle
+        );
+        toast.success("Workflow metadata updated");
+
+        // Update local state for display
+        setLocalWorkflowName(name);
+        setLocalWorkflowDescription(description);
+      } catch (error) {
+        console.error("Error updating workflow metadata:", error);
+        toast.error("Failed to update workflow metadata");
+      }
+    },
+    [id, orgHandle, workflowMetadata]
+  );
+
   const handleDeployWorkflow = useCallback(
     async (e: React.MouseEvent) => {
       e.preventDefault();
@@ -382,6 +434,7 @@ export function EditorPage() {
             validateConnection={validateConnection}
             executeWorkflow={editorExecuteWorkflow}
             onDeployWorkflow={handleDeployWorkflow}
+            onEditMetadata={handleEditMetadata}
             createObjectUrl={createObjectUrl}
           />
         </div>
@@ -449,6 +502,15 @@ export function EditorPage() {
             workflowName={workflowMetadata?.name}
           />
         )}
+        {workflowMetadata && (
+          <EditMetadataDialog
+            open={isEditMetadataDialogOpen}
+            onOpenChange={setIsEditMetadataDialogOpen}
+            initialName={localWorkflowName || workflowMetadata.name}
+            initialDescription={localWorkflowDescription}
+            onSave={handleSaveMetadata}
+          />
+        )}
       </div>
     </ReactFlowProvider>
   );
diff --git a/apps/web/src/pages/workflows-page.tsx b/apps/web/src/pages/workflows-page.tsx
@@ -65,7 +65,8 @@ function useWorkflowActions() {
   const [workflowToDeploy, setWorkflowToDeploy] =
     useState<WorkflowWithMetadata | null>(null);
   const [renameWorkflowName, setRenameWorkflowName] = useState("");
-  const [renameWorkflowDescription, setRenameWorkflowDescription] = useState("");
+  const [renameWorkflowDescription, setRenameWorkflowDescription] =
+    useState("");
   const [isDeleting, setIsDeleting] = useState(false);
   const [isRenaming, setIsRenaming] = useState(false);
   const [isDeploying, setIsDeploying] = useState(false);
@@ -163,7 +164,7 @@ function useWorkflowActions() {
     <Dialog open={renameDialogOpen} onOpenChange={setRenameDialogOpen}>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>Edit Workflow</DialogTitle>
+          <DialogTitle>Edit Metadata</DialogTitle>
         </DialogHeader>
         <form onSubmit={handleRenameWorkflow} className="space-y-4">
           <div>
