@open-mercato/core 0.6.2-develop.3400.1.d948268f50 → 0.6.2-develop.3406.1.2b403f40da

package/dist/modules/workflows/backend/definitions/visual-editor/page.js

@@ -81,6 +81,9 @@ function VisualEditorPage() {
   const [effectiveFrom, setEffectiveFrom] = useState("");
   const [effectiveTo, setEffectiveTo] = useState("");
   const [triggers, setTriggers] = useState([]);
+  const [source, setSource] = useState(null);
+  const isCodeOnly = source === "code";
+  const isCodeOverride = source === "code_override";
   useEffect(() => {
     const loadDefinition = async () => {
       if (!definitionId) {
@@ -109,7 +112,7 @@ function VisualEditorPage() {
         setNodes(graph.nodes);
         setEdges(graph.edges);
         setTriggers(definition.definition?.triggers || []);
-        flash("Workflow loaded successfully", "success");
+        setSource(definition.source ?? null);
       } catch (error) {
         console.error("Error loading workflow definition:", error);
         flash("Failed to load workflow definition", "error");
@@ -120,12 +123,15 @@ function VisualEditorPage() {
     loadDefinition();
   }, [definitionId]);
   const handleNodesChange = useCallback((changes) => {
+    if (isCodeOnly) return;
     setNodes((nds) => applyNodeChanges(changes, nds));
-  }, []);
+  }, [isCodeOnly]);
   const handleEdgesChange = useCallback((changes) => {
+    if (isCodeOnly) return;
     setEdges((eds) => applyEdgeChanges(changes, eds));
-  }, []);
+  }, [isCodeOnly]);
   const handleAddNode = useCallback((nodeType) => {
+    if (isCodeOnly) return;
     const newNode = {
       id: generateStepId(nodeType),
       type: nodeType,
@@ -141,17 +147,19 @@ function VisualEditorPage() {
       }
     };
     setNodes((nds) => [...nds, newNode]);
-  }, [nodes.length]);
+  }, [nodes.length, isCodeOnly]);
   const handleNodeClick = useCallback((_event, node) => {
+    if (isCodeOnly) return;
     setSelectedNode(node);
     setSelectedEdge(null);
     setShowNodeDialog(true);
-  }, []);
+  }, [isCodeOnly]);
   const handleEdgeClick = useCallback((_event, edge) => {
+    if (isCodeOnly) return;
     setSelectedEdge(edge);
     setSelectedNode(null);
     setShowEdgeDialog(true);
-  }, []);
+  }, [isCodeOnly]);
   const handleSaveNode = useCallback((nodeId, updates) => {
     setNodes(
       (nds) => nds.map(
@@ -270,8 +278,14 @@ function VisualEditorPage() {
           method: "PUT",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify({
+            workflowName,
+            description: description || null,
+            version,
             definition: definitionData,
-            enabled
+            metadata: Object.keys(metadata2).length > 0 ? metadata2 : null,
+            enabled,
+            effectiveFrom: effectiveFrom || null,
+            effectiveTo: effectiveTo || null
           })
         });
       } else {
@@ -307,6 +321,53 @@ function VisualEditorPage() {
       setIsSaving(false);
     }
   }, [nodes, edges, workflowId, workflowName, description, version, enabled, category, tags, icon, effectiveFrom, effectiveTo, triggers, definitionId, router]);
+  const handleCustomize = useCallback(async () => {
+    if (!definitionId) return;
+    setIsSaving(true);
+    try {
+      const result = await apiCall(
+        `/api/workflows/definitions/${definitionId}/customize`,
+        { method: "POST" }
+      );
+      if (!result.ok) {
+        flash(result.result?.error || "Failed to customize workflow", "error");
+        return;
+      }
+      const newId = result.result?.data?.id;
+      if (!newId) return;
+      router.push(`/backend/definitions/visual-editor?id=${encodeURIComponent(newId)}`);
+      router.refresh();
+    } finally {
+      setIsSaving(false);
+    }
+  }, [definitionId, router]);
+  const handleResetToCode = useCallback(async () => {
+    if (!definitionId) return;
+    const confirmed = await confirm({
+      title: t("workflows.actions.resetToCode"),
+      description: t("workflows.actions.resetConfirm"),
+      confirmText: t("workflows.actions.resetToCode"),
+      variant: "destructive"
+    });
+    if (!confirmed) return;
+    setIsSaving(true);
+    try {
+      const result = await apiCall(
+        `/api/workflows/definitions/${definitionId}/reset-to-code`,
+        { method: "POST" }
+      );
+      if (!result.ok) {
+        flash(result.result?.error || "Failed to reset workflow", "error");
+        return;
+      }
+      const codeId = result.result?.data?.id || (workflowId ? `code:${workflowId}` : null);
+      if (!codeId) return;
+      router.push(`/backend/definitions/visual-editor?id=${encodeURIComponent(codeId)}`);
+      router.refresh();
+    } finally {
+      setIsSaving(false);
+    }
+  }, [definitionId, workflowId, router, confirm, t]);
   const handleTest = useCallback(() => {
     const errors = validateWorkflowGraph(nodes, edges);
     const criticalErrors = errors.filter((e) => e.type === "error");
@@ -509,7 +570,7 @@ function VisualEditorPage() {
               ]
             }
           ),
-          /* @__PURE__ */ jsx(
+          !isCodeOnly && /* @__PURE__ */ jsx(
             Button,
             {
               variant: "outline",
@@ -520,7 +581,7 @@ function VisualEditorPage() {
               children: t("workflows.visualEditor.loadExample")
             }
           ),
-          /* @__PURE__ */ jsxs(
+          !isCodeOnly && /* @__PURE__ */ jsxs(
             Button,
             {
               variant: "destructive",
@@ -550,7 +611,7 @@ function VisualEditorPage() {
               ]
             }
           ),
-          /* @__PURE__ */ jsxs(
+          !isCodeOnly && /* @__PURE__ */ jsxs(
             Button,
             {
               variant: "outline",
@@ -564,7 +625,27 @@ function VisualEditorPage() {
               ]
             }
           ),
-          /* @__PURE__ */ jsxs(
+          isCodeOverride && /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              onClick: handleResetToCode,
+              disabled: isSaving,
+              className: "h-8 text-xs",
+              children: t("workflows.actions.resetToCode")
+            }
+          ),
+          isCodeOnly ? /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "sm",
+              onClick: handleCustomize,
+              disabled: isSaving,
+              className: "h-8 px-2 text-xs md:px-3",
+              children: t("workflows.actions.customize")
+            }
+          ) : /* @__PURE__ */ jsxs(
             Button,
             {
               size: "sm",
@@ -581,12 +662,19 @@ function VisualEditorPage() {
         ] })
       }
     ) }),
+    (isCodeOnly || isCodeOverride) && /* @__PURE__ */ jsxs("div", { className: "shrink-0 border-b border-border bg-background px-3 py-2 md:px-6 md:py-3", children: [
+      isCodeOnly && /* @__PURE__ */ jsx(Alert, { variant: "info", children: /* @__PURE__ */ jsx(AlertTitle, { children: t("workflows.source.code.readonlyBanner") }) }),
+      isCodeOverride && /* @__PURE__ */ jsx(Alert, { variant: "warning", children: /* @__PURE__ */ jsx(AlertTitle, { children: t("workflows.source.code_override.banner") }) })
+    ] }),
     showMetadata && /* @__PURE__ */ jsxs("div", { className: isCompactViewport ? "shrink-0 border-b border-border bg-background px-3 py-2 max-h-[60svh] overflow-y-auto overscroll-contain md:px-6 md:py-3" : "shrink-0 border-b border-border bg-background px-3 py-2 md:px-6 md:py-3", children: [
-      /* @__PURE__ */ jsxs("div", { className: "rounded-lg border bg-card p-3 md:p-4", children: [
+      /* @__PURE__ */ jsxs("fieldset", { disabled: isCodeOnly, className: "rounded-lg border bg-card p-3 disabled:opacity-70 md:p-4", children: [
         /* @__PURE__ */ jsx("h2", { className: "mb-3 text-xs font-semibold uppercase text-muted-foreground", children: t("workflows.visualEditor.workflowMetadata") }),
         /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 md:gap-4", children: [
           /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-1", children: [
-            /* @__PURE__ */ jsx(Label, { htmlFor: "workflowId", className: "text-xs", children: "Workflow ID *" }),
+            /* @__PURE__ */ jsxs(Label, { htmlFor: "workflowId", className: "text-xs", children: [
+              t("workflows.form.workflowId"),
+              " *"
+            ] }),
             /* @__PURE__ */ jsx(
               Input,
               {
@@ -598,10 +686,13 @@ function VisualEditorPage() {
                 className: "h-8 text-sm"
               }
             ),
-            definitionId && /* @__PURE__ */ jsx("p", { className: "text-overline text-muted-foreground", children: "Read-only" })
+            definitionId && /* @__PURE__ */ jsx("p", { className: "text-overline text-muted-foreground", children: t("workflows.visualEditor.readOnly") })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-1", children: [
-            /* @__PURE__ */ jsx(Label, { htmlFor: "workflowName", className: "text-xs", children: "Name *" }),
+            /* @__PURE__ */ jsxs(Label, { htmlFor: "workflowName", className: "text-xs", children: [
+              t("workflows.form.workflowName"),
+              " *"
+            ] }),
             /* @__PURE__ */ jsx(
               Input,
               {
@@ -614,7 +705,7 @@ function VisualEditorPage() {
             )
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-1", children: [
-            /* @__PURE__ */ jsx(Label, { htmlFor: "category", className: "text-xs", children: "Category" }),
+            /* @__PURE__ */ jsx(Label, { htmlFor: "category", className: "text-xs", children: t("workflows.form.category") }),
             /* @__PURE__ */ jsx(
               Input,
               {
@@ -627,21 +718,24 @@ function VisualEditorPage() {
             )
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-1 sm:col-span-2 lg:col-span-3", children: [
-            /* @__PURE__ */ jsx(Label, { htmlFor: "description", className: "text-xs", children: "Description" }),
+            /* @__PURE__ */ jsx(Label, { htmlFor: "description", className: "text-xs", children: t("workflows.form.description") }),
             /* @__PURE__ */ jsx(
               Textarea,
               {
                 id: "description",
                 value: description,
                 onChange: (e) => setDescription(e.target.value),
-                placeholder: "Describe the purpose of this workflow...",
+                placeholder: t("workflows.form.placeholders.description"),
                 rows: 2,
                 className: "min-h-[60px] text-sm"
               }
             )
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-1", children: [
-            /* @__PURE__ */ jsx(Label, { htmlFor: "version", className: "text-xs", children: "Version *" }),
+            /* @__PURE__ */ jsxs(Label, { htmlFor: "version", className: "text-xs", children: [
+              t("workflows.form.version"),
+              " *"
+            ] }),
             /* @__PURE__ */ jsx(
               Input,
               {
@@ -670,7 +764,7 @@ function VisualEditorPage() {
             ] })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-1", children: [
-            /* @__PURE__ */ jsx(Label, { className: "text-xs", children: "Tags" }),
+            /* @__PURE__ */ jsx(Label, { className: "text-xs", children: t("workflows.form.tags") }),
             /* @__PURE__ */ jsx(
               TagsInput,
               {
@@ -681,7 +775,7 @@ function VisualEditorPage() {
             )
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-1", children: [
-            /* @__PURE__ */ jsx(Label, { htmlFor: "icon", className: "text-xs", children: "Icon" }),
+            /* @__PURE__ */ jsx(Label, { htmlFor: "icon", className: "text-xs", children: t("workflows.form.icon") }),
             /* @__PURE__ */ jsx(
               Input,
               {
@@ -694,7 +788,7 @@ function VisualEditorPage() {
             )
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-1", children: [
-            /* @__PURE__ */ jsx(Label, { htmlFor: "effectiveFrom", className: "text-xs", children: "Effective From" }),
+            /* @__PURE__ */ jsx(Label, { htmlFor: "effectiveFrom", className: "text-xs", children: t("workflows.form.effectiveFrom") }),
             /* @__PURE__ */ jsx(
               Input,
               {
@@ -707,7 +801,7 @@ function VisualEditorPage() {
             )
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-1", children: [
-            /* @__PURE__ */ jsx(Label, { htmlFor: "effectiveTo", className: "text-xs", children: "Effective To" }),
+            /* @__PURE__ */ jsx(Label, { htmlFor: "effectiveTo", className: "text-xs", children: t("workflows.form.effectiveTo") }),
             /* @__PURE__ */ jsx(
               Input,
               {
@@ -721,14 +815,13 @@ function VisualEditorPage() {
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("fieldset", { disabled: isCodeOnly, className: "mt-3 disabled:opacity-70", children: /* @__PURE__ */ jsx(
         DefinitionTriggersEditor,
         {
           value: triggers,
-          onChange: setTriggers,
-          className: "mt-3"
+          onChange: setTriggers
         }
-      )
+      ) })
     ] }),
     isCompactViewport ? /* @__PURE__ */ jsxs("div", { className: "px-3 py-3 md:px-6 md:py-4", children: [
       /* @__PURE__ */ jsxs("div", { className: "relative min-w-0", children: [
@@ -742,26 +835,26 @@ function VisualEditorPage() {
             onNodeClick: handleNodeClick,
             onEdgeClick: handleEdgeClick,
             onConnect: handleConnect,
-            editable: true,
+            editable: !isCodeOnly,
             height: "100%"
           }
         ) }),
         nodes.length === 0 && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center px-4", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-          /* @__PURE__ */ jsx("h2", { className: "mb-2 text-lg font-semibold text-foreground", children: "Start Building Your Workflow" }),
-          /* @__PURE__ */ jsx("p", { className: "mb-4 text-sm text-muted-foreground", children: "Tap a step type below to add it to the canvas" }),
+          /* @__PURE__ */ jsx("h2", { className: "mb-2 text-lg font-semibold text-foreground", children: t("workflows.visualEditor.startBuilding") }),
+          /* @__PURE__ */ jsx("p", { className: "mb-4 text-sm text-muted-foreground", children: t("workflows.visualEditor.tapToAddBelow") }),
           /* @__PURE__ */ jsx(
             "button",
             {
               onClick: handleLoadExample,
               className: "pointer-events-auto text-sm text-primary hover:underline",
-              children: "Load an example workflow"
+              children: t("workflows.visualEditor.loadExampleWorkflow")
             }
           )
         ] }) })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "mt-3 rounded-lg border bg-card p-3", children: [
-        /* @__PURE__ */ jsx("h2", { className: "mb-2 text-xs font-semibold uppercase text-muted-foreground", children: "Step Palette" }),
-        /* @__PURE__ */ jsx("p", { className: "mb-3 text-xs text-muted-foreground", children: "Tap a step type to add it to the canvas" }),
+      !isCodeOnly && /* @__PURE__ */ jsxs("div", { className: "mt-3 rounded-lg border bg-card p-3", children: [
+        /* @__PURE__ */ jsx("h2", { className: "mb-2 text-xs font-semibold uppercase text-muted-foreground", children: t("workflows.visualEditor.stepPalette") }),
+        /* @__PURE__ */ jsx("p", { className: "mb-3 text-xs text-muted-foreground", children: t("workflows.visualEditor.tapToAdd") }),
         /* @__PURE__ */ jsx("div", { className: "flex gap-2 overflow-x-auto pb-1", children: ["start", "userTask", "automated", "waitForSignal", "subWorkflow", "end"].map((nodeType) => {
           const Icon = NODE_TYPE_ICONS[nodeType];
           return /* @__PURE__ */ jsxs(
@@ -779,9 +872,9 @@ function VisualEditorPage() {
         }) })
       ] })
     ] }) : /* @__PURE__ */ jsxs("div", { className: "flex min-h-[72svh] min-w-0 flex-1 border-t border-border", children: [
-      /* @__PURE__ */ jsx("div", { className: "w-[24rem] shrink-0 overflow-y-auto border-r border-border bg-background p-6", children: /* @__PURE__ */ jsxs("div", { className: "rounded-lg border bg-card p-4", children: [
-        /* @__PURE__ */ jsx("h2", { className: "mb-2 text-sm font-semibold uppercase text-muted-foreground", children: "Step Palette" }),
-        /* @__PURE__ */ jsx("p", { className: "mb-4 text-xs text-muted-foreground", children: "Click a step type to add it to the canvas" }),
+      !isCodeOnly && /* @__PURE__ */ jsx("div", { className: "w-[24rem] shrink-0 overflow-y-auto border-r border-border bg-background p-6", children: /* @__PURE__ */ jsxs("div", { className: "rounded-lg border bg-card p-4", children: [
+        /* @__PURE__ */ jsx("h2", { className: "mb-2 text-sm font-semibold uppercase text-muted-foreground", children: t("workflows.visualEditor.stepPalette") }),
+        /* @__PURE__ */ jsx("p", { className: "mb-4 text-xs text-muted-foreground", children: t("workflows.visualEditor.clickToAdd") }),
         /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
           /* @__PURE__ */ jsxs(
             "button",
@@ -897,19 +990,19 @@ function VisualEditorPage() {
             onNodeClick: handleNodeClick,
             onEdgeClick: handleEdgeClick,
             onConnect: handleConnect,
-            editable: true,
+            editable: !isCodeOnly,
             height: "100%"
           }
         ) }),
         nodes.length === 0 && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center px-4", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-          /* @__PURE__ */ jsx("h2", { className: "mb-2 text-xl font-semibold text-foreground", children: "Start Building Your Workflow" }),
-          /* @__PURE__ */ jsx("p", { className: "mb-4 text-muted-foreground", children: "Click a step type from the palette to add it to the canvas" }),
+          /* @__PURE__ */ jsx("h2", { className: "mb-2 text-xl font-semibold text-foreground", children: t("workflows.visualEditor.startBuilding") }),
+          /* @__PURE__ */ jsx("p", { className: "mb-4 text-muted-foreground", children: t("workflows.visualEditor.clickToAddFromPalette") }),
           /* @__PURE__ */ jsx(
             "button",
             {
               onClick: handleLoadExample,
               className: "pointer-events-auto text-sm text-primary hover:underline",
-              children: "Load an example workflow"
+              children: t("workflows.visualEditor.loadExampleWorkflow")
             }
           )
         ] }) })