orcheo-canvas 0.0.1

package/src/features/workflow/components/canvas/workflow-controls.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+
+import { cn } from "@/lib/utils";
+
+import { ActionControlGroup } from "./workflow-controls/action-control-group";
+import { HistoryControlGroup } from "./workflow-controls/history-control-group";
+import type { WorkflowControlsProps } from "./workflow-controls/types";
+
+export default function WorkflowControls({
+  isRunning = false,
+  onRun,
+  onPause,
+  onSave,
+  onUndo,
+  onRedo,
+  canUndo = false,
+  canRedo = false,
+  onDuplicate,
+  onExport,
+  onImport,
+  onShare,
+  onVersionHistory,
+  onToggleSearch,
+  isSearchOpen = false,
+  className,
+}: WorkflowControlsProps) {
+  return (
+    <div className={cn("flex items-center gap-2", className)}>
+      <ActionControlGroup
+        isRunning={isRunning}
+        onPause={onPause}
+        onRun={onRun}
+        onSave={onSave}
+        onDuplicate={onDuplicate}
+        onExport={onExport}
+        onImport={onImport}
+        onShare={onShare}
+        onVersionHistory={onVersionHistory}
+        onToggleSearch={onToggleSearch}
+        isSearchOpen={isSearchOpen}
+      />
+      <HistoryControlGroup
+        onUndo={onUndo}
+        onRedo={onRedo}
+        canUndo={canUndo}
+        canRedo={canRedo}
+      />
+    </div>
+  );
+}

package/src/features/workflow/components/canvas/workflow-flow.tsx

@@ -0,0 +1,214 @@
+import React from "react";
+import {
+  ReactFlow,
+  Background,
+  Controls,
+  MiniMap,
+  Node,
+  Edge,
+  OnNodesChange,
+  OnEdgesChange,
+  OnConnect,
+  OnNodeClick,
+  OnNodeDoubleClick,
+  ConnectionLineType,
+  MarkerType,
+  ReactFlowInstance,
+  BackgroundVariant,
+} from "@xyflow/react";
+import "@xyflow/react/dist/style.css";
+import WorkflowNodeComponent from "@features/workflow/components/nodes/workflow-node";
+import ChatTriggerNode from "@features/workflow/components/nodes/chat-trigger-node";
+import StartEndNode from "@features/workflow/components/nodes/start-end-node";
+import StickyNoteNode from "@features/workflow/components/nodes/sticky-note-node";
+import CustomEdge from "@features/workflow/components/canvas/custom-edge";
+import { cn } from "@/lib/utils";
+
+export interface WorkflowFlowProps<
+  NodeType extends Node = Node,
+  EdgeType extends Edge = Edge,
+> {
+  nodes: NodeType[];
+  edges: EdgeType[];
+  onNodesChange?: OnNodesChange<NodeType>;
+  onEdgesChange?: OnEdgesChange<EdgeType>;
+  onConnect?: OnConnect;
+  onNodeClick?: OnNodeClick;
+  onNodeDoubleClick?: OnNodeDoubleClick;
+  onEdgeMouseEnter?: EdgeMouseEventHandler<EdgeType>;
+  onEdgeMouseMove?: EdgeMouseEventHandler<EdgeType>;
+  onEdgeMouseLeave?: EdgeMouseEventHandler<EdgeType>;
+  onInit?: (instance: ReactFlowInstance<NodeType, EdgeType>) => void;
+  fitView?: boolean;
+  snapToGrid?: boolean;
+  snapGrid?: [number, number];
+  className?: string;
+  children?: React.ReactNode;
+  showMiniMap?: boolean;
+  showControls?: boolean;
+  showBackground?: boolean;
+  backgroundVariant?: BackgroundVariant;
+  editable?: boolean;
+  nodesDraggable?: boolean;
+  nodesConnectable?: boolean;
+  nodesFocusable?: boolean;
+  edgesFocusable?: boolean;
+  elementsSelectable?: boolean;
+  zoomOnDoubleClick?: boolean;
+}
+
+type EdgeMouseEventHandler<EdgeType extends Edge = Edge> = (
+  event: React.MouseEvent<Element, MouseEvent>,
+  edge: EdgeType,
+) => void;
+
+const nodeTypes = {
+  default: WorkflowNodeComponent,
+  chatTrigger: ChatTriggerNode,
+  startEnd: StartEndNode,
+  stickyNote: StickyNoteNode,
+};
+
+const edgeTypes = {
+  default: CustomEdge,
+};
+
+const defaultEdgeOptions = {
+  style: { stroke: "#99a1b3", strokeWidth: 2 },
+  type: "default" as const,
+  markerEnd: {
+    type: MarkerType.ArrowClosed,
+    width: 12,
+    height: 12,
+  },
+};
+
+const getMiniMapNodeColor = (node: Node) => {
+  switch (node.data?.type) {
+    case "api":
+      return "#93c5fd";
+    case "function":
+      return "#d8b4fe";
+    case "trigger":
+      return "#fcd34d";
+    case "data":
+      return "#86efac";
+    case "ai":
+      return "#a5b4fc";
+    case "chatTrigger":
+      return "#fdba74";
+    case "python":
+      return "#fb923c";
+    case "start":
+      return "#86efac";
+    case "end":
+      return "#fca5a5";
+    case "annotation":
+    case "stickyNote":
+      return "#facc15";
+    default:
+      return "#e2e8f0";
+  }
+};
+
+/**
+ * WorkflowFlow - A reusable ReactFlow wrapper component with consistent styling
+ * and configuration for both Editor and Execution pages.
+ *
+ * This component provides:
+ * - Consistent node types (default, chatTrigger, startEnd)
+ * - Consistent edge styling
+ * - Optional MiniMap, Controls, and Background
+ * - Configurable interaction modes (editable vs read-only)
+ */
+export default function WorkflowFlow<
+  NodeType extends Node = Node,
+  EdgeType extends Edge = Edge,
+>({
+  nodes,
+  edges,
+  onNodesChange,
+  onEdgesChange,
+  onConnect,
+  onNodeClick,
+  onNodeDoubleClick,
+  onEdgeMouseEnter,
+  onEdgeMouseMove,
+  onEdgeMouseLeave,
+  onInit,
+  fitView = true,
+  snapToGrid = false,
+  snapGrid = [15, 15],
+  className,
+  children,
+  showMiniMap = true,
+  showControls = true,
+  showBackground = true,
+  backgroundVariant = BackgroundVariant.Dots,
+  editable = true,
+  nodesDraggable,
+  nodesConnectable,
+  nodesFocusable,
+  edgesFocusable,
+  elementsSelectable,
+  zoomOnDoubleClick = true,
+}: WorkflowFlowProps<NodeType, EdgeType>) {
+  // Default interaction props based on editable mode
+  const defaultNodesDraggable = nodesDraggable ?? editable;
+  const defaultNodesConnectable = nodesConnectable ?? editable;
+  const defaultNodesFocusable = nodesFocusable ?? true;
+  const defaultEdgesFocusable = edgesFocusable ?? editable;
+  const defaultElementsSelectable = elementsSelectable ?? editable;
+
+  return (
+    <ReactFlow
+      nodes={nodes}
+      edges={edges}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+      onConnect={onConnect}
+      onNodeClick={onNodeClick}
+      onNodeDoubleClick={onNodeDoubleClick}
+      onEdgeMouseEnter={onEdgeMouseEnter}
+      onEdgeMouseMove={onEdgeMouseMove}
+      onEdgeMouseLeave={onEdgeMouseLeave}
+      onInit={onInit}
+      nodeTypes={nodeTypes}
+      edgeTypes={edgeTypes}
+      fitView={fitView}
+      snapToGrid={snapToGrid}
+      snapGrid={snapGrid}
+      defaultEdgeOptions={defaultEdgeOptions}
+      connectionLineType={ConnectionLineType.Bezier}
+      connectionLineStyle={{ stroke: "#99a1b3", strokeWidth: 2 }}
+      proOptions={{ hideAttribution: true }}
+      nodesDraggable={defaultNodesDraggable}
+      nodesConnectable={defaultNodesConnectable}
+      nodesFocusable={defaultNodesFocusable}
+      edgesFocusable={defaultEdgesFocusable}
+      elementsSelectable={defaultElementsSelectable}
+      zoomOnDoubleClick={zoomOnDoubleClick}
+      className={cn("h-full", className)}
+    >
+      {showBackground && <Background variant={backgroundVariant} />}
+
+      {showControls && <Controls />}
+
+      {showMiniMap && (
+        <MiniMap
+          nodeStrokeWidth={3}
+          zoomable
+          pannable
+          nodeColor={getMiniMapNodeColor}
+          style={{
+            backgroundColor: "hsl(var(--background))",
+            border: "1px solid hsl(var(--border))",
+          }}
+          maskColor="hsl(var(--muted) / 0.6)"
+        />
+      )}
+
+      {children}
+    </ReactFlow>
+  );
+}

package/src/features/workflow/components/canvas/workflow-search.tsx

@@ -0,0 +1,152 @@
+import React, { useState, useEffect, useRef } from "react";
+import { Search, X, ArrowUp, ArrowDown } from "lucide-react";
+import { Input } from "@/design-system/ui/input";
+import { Button } from "@/design-system/ui/button";
+import { Badge } from "@/design-system/ui/badge";
+import { cn } from "@/lib/utils";
+
+interface WorkflowSearchProps {
+  onSearch: (query: string) => void;
+  onHighlightNext: () => void;
+  onHighlightPrevious: () => void;
+  onClose: () => void;
+  matchCount: number;
+  currentMatchIndex: number;
+  isOpen: boolean;
+  className?: string;
+}
+
+export default function WorkflowSearch({
+  onSearch,
+  onHighlightNext,
+  onHighlightPrevious,
+  onClose,
+  matchCount,
+  currentMatchIndex,
+  isOpen,
+  className,
+}: WorkflowSearchProps) {
+  const [searchQuery, setSearchQuery] = useState("");
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (isOpen && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [isOpen]);
+
+  useEffect(() => {
+    const targetWindow = typeof window !== "undefined" ? window : undefined;
+    if (!targetWindow) {
+      return;
+    }
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (!isOpen) {
+        return;
+      }
+
+      if (event.key === "Escape") {
+        event.preventDefault();
+        onClose();
+        return;
+      }
+
+      if (event.key === "Enter") {
+        if (event.shiftKey) {
+          onHighlightPrevious();
+        } else {
+          onHighlightNext();
+        }
+      }
+    };
+
+    targetWindow.addEventListener("keydown", handleKeyDown);
+    return () => targetWindow.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, onClose, onHighlightNext, onHighlightPrevious]);
+
+  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const query = e.target.value;
+    setSearchQuery(query);
+    onSearch(query);
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div
+      className={cn(
+        "absolute top-4 left-1/2 transform -translate-x-1/2 z-10 flex items-center bg-background border border-border rounded-md shadow-md",
+        className,
+      )}
+      data-testid="workflow-search"
+    >
+      <div className="relative flex items-center w-80">
+        <Search className="absolute left-2 h-4 w-4 text-muted-foreground" />
+
+        <Input
+          ref={inputRef}
+          value={searchQuery}
+          onChange={handleSearchChange}
+          placeholder="Search nodes..."
+          className="pl-8 pr-16 h-9 focus-visible:ring-1"
+        />
+
+        {searchQuery && (
+          <Button
+            variant="ghost"
+            size="icon"
+            className="absolute right-0 h-9 w-9"
+            onClick={() => {
+              setSearchQuery("");
+              onSearch("");
+            }}
+          >
+            <X className="h-4 w-4" />
+          </Button>
+        )}
+      </div>
+
+      <div className="flex items-center px-2 border-l border-border h-9">
+        {matchCount > 0 ? (
+          <Badge variant="secondary" className="mr-2">
+            {currentMatchIndex + 1} of {matchCount}
+          </Badge>
+        ) : (
+          searchQuery && (
+            <Badge variant="outline" className="mr-2 text-muted-foreground">
+              No matches
+            </Badge>
+          )
+        )}
+
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-7 w-7"
+          onClick={onHighlightPrevious}
+          disabled={matchCount === 0}
+        >
+          <ArrowUp className="h-4 w-4" />
+        </Button>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-7 w-7"
+          onClick={onHighlightNext}
+          disabled={matchCount === 0}
+        >
+          <ArrowDown className="h-4 w-4" />
+        </Button>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-7 w-7 ml-1"
+          onClick={onClose}
+        >
+          <X className="h-4 w-4" />
+        </Button>
+      </div>
+    </div>
+  );
+}

package/src/features/workflow/components/dialogs/add-credential-dialog.tsx

@@ -0,0 +1,233 @@
+import React, { useCallback, useMemo, useState } from "react";
+import { Button } from "@/design-system/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/design-system/ui/dialog";
+import { Input } from "@/design-system/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/design-system/ui/select";
+import { Loader2, Plus } from "lucide-react";
+import type { CredentialInput } from "@features/workflow/types/credential-vault";
+
+type CredentialAccess = "private" | "shared" | "public";
+
+interface AddCredentialDialogProps {
+  onAddCredential?: (credential: CredentialInput) => Promise<void> | void;
+}
+
+const DEFAULT_CREDENTIAL: CredentialInput = {
+  name: "",
+  type: "api",
+  access: "private",
+  secrets: { apiKey: "" },
+};
+
+export function AddCredentialDialog({
+  onAddCredential,
+}: AddCredentialDialogProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [pendingCredential, setPendingCredential] =
+    useState<CredentialInput>(DEFAULT_CREDENTIAL);
+  const [isSaving, setIsSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const hasName = pendingCredential.name.trim().length > 0;
+
+  const resetState = useCallback(() => {
+    setPendingCredential(DEFAULT_CREDENTIAL);
+    setError(null);
+    setIsSaving(false);
+  }, []);
+
+  const handleOpenChange = useCallback(
+    (open: boolean) => {
+      setIsOpen(open);
+      if (!open) {
+        resetState();
+      }
+    },
+    [resetState],
+  );
+
+  const handleAddCredential = useCallback(async () => {
+    if (!onAddCredential || !hasName) {
+      return;
+    }
+
+    setError(null);
+    setIsSaving(true);
+    try {
+      await onAddCredential(pendingCredential);
+      handleOpenChange(false);
+    } catch (err) {
+      console.error("Failed to save credential", err);
+      const message =
+        err instanceof Error
+          ? err.message
+          : "Unable to save credential. Please try again.";
+      setError(message);
+    } finally {
+      setIsSaving(false);
+    }
+  }, [handleOpenChange, hasName, onAddCredential, pendingCredential]);
+
+  const updateCredential = useCallback((partial: Partial<CredentialInput>) => {
+    setPendingCredential((prev) => ({
+      ...prev,
+      ...partial,
+      secrets: partial.secrets ?? prev.secrets,
+    }));
+  }, []);
+
+  const updateSecret = useCallback(
+    (key: string, value: string) => {
+      updateCredential({
+        secrets: {
+          ...pendingCredential.secrets,
+          [key]: value,
+        },
+      });
+    },
+    [pendingCredential.secrets, updateCredential],
+  );
+
+  const isSaveDisabled = useMemo(
+    () => !hasName || isSaving,
+    [hasName, isSaving],
+  );
+
+  return (
+    <Dialog open={isOpen} onOpenChange={handleOpenChange}>
+      <DialogTrigger asChild>
+        <Button>
+          <Plus className="h-4 w-4 mr-2" />
+          Add Credential
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[500px]">
+        <DialogHeader>
+          <DialogTitle>Add New Credential</DialogTitle>
+          <DialogDescription>
+            Create a new credential for connecting to external services.
+            Credentials are encrypted at rest.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">
+          <div className="grid grid-cols-4 items-center gap-4">
+            <label
+              htmlFor="credential-name"
+              className="text-right text-sm font-medium"
+            >
+              Name
+            </label>
+            <Input
+              id="credential-name"
+              value={pendingCredential.name}
+              onChange={(event) =>
+                updateCredential({ name: event.target.value })
+              }
+              className="col-span-3"
+              placeholder="My API Credential"
+            />
+          </div>
+          <div className="grid grid-cols-4 items-center gap-4">
+            <label
+              htmlFor="credential-type"
+              className="text-right text-sm font-medium"
+            >
+              Type
+            </label>
+            <Select
+              value={pendingCredential.type}
+              onValueChange={(value) => updateCredential({ type: value })}
+            >
+              <SelectTrigger id="credential-type" className="col-span-3">
+                <SelectValue placeholder="Select credential type" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="api">API Key</SelectItem>
+                <SelectItem value="oauth">OAuth</SelectItem>
+                <SelectItem value="database">Database</SelectItem>
+                <SelectItem value="aws">AWS</SelectItem>
+                <SelectItem value="gcp">Google Cloud</SelectItem>
+                <SelectItem value="azure">Azure</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="grid grid-cols-4 items-center gap-4">
+            <label
+              htmlFor="credential-access"
+              className="text-right text-sm font-medium"
+            >
+              Access
+            </label>
+            <Select
+              value={pendingCredential.access}
+              onValueChange={(value: CredentialAccess) =>
+                updateCredential({ access: value })
+              }
+            >
+              <SelectTrigger id="credential-access" className="col-span-3">
+                <SelectValue placeholder="Select access level" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="private">Private</SelectItem>
+                <SelectItem value="shared">Shared</SelectItem>
+                <SelectItem value="public">Public</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="grid grid-cols-4 items-center gap-4">
+            <label
+              htmlFor="credential-api-key"
+              className="text-right text-sm font-medium"
+            >
+              API Key
+            </label>
+            <Input
+              id="credential-api-key"
+              type="password"
+              value={pendingCredential.secrets?.apiKey ?? ""}
+              onChange={(event) => updateSecret("apiKey", event.target.value)}
+              className="col-span-3"
+              placeholder="Enter API key"
+            />
+          </div>
+        </div>
+        {error ? (
+          <p className="text-sm text-destructive px-1">{error}</p>
+        ) : null}
+        <DialogFooter>
+          <Button
+            variant="outline"
+            onClick={() => handleOpenChange(false)}
+            disabled={isSaving}
+          >
+            Cancel
+          </Button>
+          <Button onClick={handleAddCredential} disabled={isSaveDisabled}>
+            {isSaving ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                Saving...
+              </>
+            ) : (
+              "Save Credential"
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}