985 lines
43 KiB
TypeScript
985 lines
43 KiB
TypeScript
import "./WorkflowStepManager.css";
|
|
import { useState, useEffect, useCallback, useRef } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useOverlayDismiss } from "../hooks/useOverlayDismiss";
|
|
import type { WorkflowStep, WorkflowStepInput, WorkflowStepMode, WorkflowStepPhase, WorkflowStepGateMode } from "@fusion/core";
|
|
import { getErrorMessage } from "@fusion/core";
|
|
import {
|
|
fetchWorkflowSteps,
|
|
createWorkflowStep,
|
|
updateWorkflowStep,
|
|
deleteWorkflowStep,
|
|
refineWorkflowStepPrompt,
|
|
fetchWorkflowStepTemplates,
|
|
fetchPluginWorkflowStepTemplates,
|
|
createWorkflowStepFromTemplate,
|
|
fetchScripts,
|
|
fetchModels,
|
|
type WorkflowStepTemplate,
|
|
type ModelInfo,
|
|
} from "../api";
|
|
import type { ToastType } from "../hooks/useToast";
|
|
import { useModalResizePersist } from "../hooks/useModalResizePersist";
|
|
import {
|
|
X,
|
|
Plus,
|
|
Pencil,
|
|
Trash2,
|
|
Sparkles,
|
|
Check,
|
|
Loader2,
|
|
FileText,
|
|
CheckCircle,
|
|
Shield,
|
|
Zap,
|
|
Eye,
|
|
Globe,
|
|
LayoutGrid,
|
|
BookOpen,
|
|
Terminal,
|
|
MessageSquare,
|
|
Puzzle,
|
|
} from "lucide-react";
|
|
import { CustomModelDropdown } from "./CustomModelDropdown";
|
|
|
|
interface WorkflowStepManagerProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
addToast: (message: string, type?: ToastType) => void;
|
|
projectId?: string;
|
|
/** Optional: open the visual graph workflow editor. */
|
|
onOpenGraphEditor?: () => void;
|
|
}
|
|
|
|
interface StepFormData {
|
|
name: string;
|
|
description: string;
|
|
mode: WorkflowStepMode;
|
|
phase: WorkflowStepPhase;
|
|
prompt: string;
|
|
gateMode: WorkflowStepGateMode;
|
|
scriptName: string;
|
|
enabled: boolean;
|
|
defaultOn: boolean;
|
|
modelProvider: string;
|
|
modelId: string;
|
|
}
|
|
|
|
type TabId = "my-steps" | "templates";
|
|
|
|
const EMPTY_FORM: StepFormData = {
|
|
name: "",
|
|
description: "",
|
|
mode: "prompt",
|
|
phase: "pre-merge" as WorkflowStepPhase,
|
|
prompt: "",
|
|
gateMode: "advisory",
|
|
scriptName: "",
|
|
enabled: true,
|
|
defaultOn: false,
|
|
modelProvider: "",
|
|
modelId: "",
|
|
};
|
|
|
|
/** Build the combined "provider/modelId" value for CustomModelDropdown */
|
|
function getModelDropdownValue(provider: string, modelId: string): string {
|
|
return provider && modelId ? `${provider}/${modelId}` : "";
|
|
}
|
|
|
|
/** Parse "provider/modelId" dropdown value back into separate fields */
|
|
function parseModelDropdownValue(value: string): { provider: string; modelId: string } {
|
|
if (!value) return { provider: "", modelId: "" };
|
|
const slashIndex = value.indexOf("/");
|
|
if (slashIndex === -1) return { provider: "", modelId: "" };
|
|
return { provider: value.slice(0, slashIndex), modelId: value.slice(slashIndex + 1) };
|
|
}
|
|
|
|
/** Map template icon names to Lucide components */
|
|
function getTemplateIcon(iconName: string | undefined) {
|
|
switch (iconName) {
|
|
case "file-text":
|
|
return FileText;
|
|
case "check-circle":
|
|
return CheckCircle;
|
|
case "shield":
|
|
return Shield;
|
|
case "zap":
|
|
return Zap;
|
|
case "eye":
|
|
return Eye;
|
|
case "globe":
|
|
return Globe;
|
|
case "layout-grid":
|
|
return LayoutGrid;
|
|
case "puzzle":
|
|
return Puzzle;
|
|
default:
|
|
return CheckCircle;
|
|
}
|
|
}
|
|
|
|
/** Get category badge class name */
|
|
function getCategoryClassName(category: string): string {
|
|
switch (category.toLowerCase()) {
|
|
case "quality":
|
|
return "wfm-badge-category wfm-badge-category-quality";
|
|
case "security":
|
|
return "wfm-badge-category wfm-badge-category-security";
|
|
default:
|
|
return "wfm-badge-category";
|
|
}
|
|
}
|
|
|
|
export function WorkflowStepManager({ isOpen, onClose, addToast, projectId, onOpenGraphEditor }: WorkflowStepManagerProps) {
|
|
const { t } = useTranslation("app");
|
|
const [steps, setSteps] = useState<WorkflowStep[]>([]);
|
|
const [templates, setTemplates] = useState<WorkflowStepTemplate[]>([]);
|
|
const [pluginTemplateOwners, setPluginTemplateOwners] = useState<Record<string, string>>({});
|
|
const [loading, setLoading] = useState(true);
|
|
const [templatesLoading, setTemplatesLoading] = useState(true);
|
|
const [activeTab, setActiveTab] = useState<TabId>("my-steps");
|
|
const [editingId, setEditingId] = useState<string | null>(null);
|
|
const [isCreating, setIsCreating] = useState(false);
|
|
const [showCreateChooser, setShowCreateChooser] = useState(false);
|
|
const [form, setForm] = useState<StepFormData>(EMPTY_FORM);
|
|
const [saving, setSaving] = useState(false);
|
|
const [refining, setRefining] = useState(false);
|
|
const [deleteConfirmId, setDeleteConfirmId] = useState<string | null>(null);
|
|
const [addingTemplateId, setAddingTemplateId] = useState<string | null>(null);
|
|
const [availableScripts, setAvailableScripts] = useState<Record<string, string>>({});
|
|
const [availableModels, setAvailableModels] = useState<ModelInfo[]>([]);
|
|
|
|
const modalRef = useRef<HTMLDivElement>(null);
|
|
useModalResizePersist(modalRef, isOpen, "fusion:workflow-steps-modal-size");
|
|
|
|
const loadSteps = useCallback(async () => {
|
|
try {
|
|
setLoading(true);
|
|
const data = await fetchWorkflowSteps(projectId);
|
|
setSteps(data);
|
|
} catch (err) {
|
|
addToast(getErrorMessage(err) || t("workflow.errorLoadSteps", "Failed to load workflow steps"), "error");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [addToast, projectId]);
|
|
|
|
const loadScripts = useCallback(async () => {
|
|
try {
|
|
const scripts = await fetchScripts(projectId);
|
|
setAvailableScripts(scripts || {});
|
|
} catch {
|
|
// Silently ignore — scripts are optional
|
|
}
|
|
}, [projectId]);
|
|
|
|
const loadModels = useCallback(async () => {
|
|
try {
|
|
const response = await fetchModels();
|
|
setAvailableModels(response.models || []);
|
|
} catch {
|
|
// Silently ignore — models are optional, dropdown will be empty
|
|
}
|
|
}, []);
|
|
|
|
const loadTemplates = useCallback(async () => {
|
|
try {
|
|
setTemplatesLoading(true);
|
|
const [response, pluginResponse] = await Promise.all([
|
|
fetchWorkflowStepTemplates(),
|
|
fetchPluginWorkflowStepTemplates(),
|
|
]);
|
|
setTemplates(response.templates);
|
|
const owners = Object.fromEntries(pluginResponse.templates.map(({ pluginId, template }) => [template.id, pluginId]));
|
|
setPluginTemplateOwners(owners);
|
|
} catch (err) {
|
|
addToast(getErrorMessage(err) || t("workflow.errorLoadTemplates", "Failed to load templates"), "error");
|
|
} finally {
|
|
setTemplatesLoading(false);
|
|
}
|
|
}, [addToast]);
|
|
|
|
useEffect(() => {
|
|
if (isOpen) {
|
|
loadSteps();
|
|
loadTemplates();
|
|
loadScripts();
|
|
loadModels();
|
|
}
|
|
}, [isOpen, loadSteps, loadTemplates, loadScripts, loadModels]);
|
|
|
|
const handleCreate = useCallback(() => {
|
|
setShowCreateChooser(true);
|
|
setIsCreating(false);
|
|
setEditingId(null);
|
|
setForm(EMPTY_FORM);
|
|
}, []);
|
|
|
|
const handleCreateCustom = useCallback(() => {
|
|
setShowCreateChooser(false);
|
|
setIsCreating(true);
|
|
setEditingId(null);
|
|
setForm(EMPTY_FORM);
|
|
}, []);
|
|
|
|
const handleEdit = useCallback((step: WorkflowStep) => {
|
|
setEditingId(step.id);
|
|
setIsCreating(false);
|
|
setForm({
|
|
name: step.name,
|
|
description: step.description,
|
|
mode: step.mode || "prompt",
|
|
phase: step.phase || "pre-merge",
|
|
prompt: step.prompt,
|
|
gateMode: step.gateMode || ((step.mode || "prompt") === "script" ? "gate" : "advisory"),
|
|
scriptName: step.scriptName || "",
|
|
enabled: step.enabled,
|
|
defaultOn: step.defaultOn || false,
|
|
modelProvider: step.modelProvider || "",
|
|
modelId: step.modelId || "",
|
|
});
|
|
}, []);
|
|
|
|
const handleCancel = useCallback(() => {
|
|
setEditingId(null);
|
|
setIsCreating(false);
|
|
setShowCreateChooser(false);
|
|
setForm(EMPTY_FORM);
|
|
}, []);
|
|
|
|
const handleSave = useCallback(async () => {
|
|
if (!form.name.trim() || !form.description.trim()) {
|
|
addToast(t("workflow.errorNameDescRequired", "Name and description are required"), "error");
|
|
return;
|
|
}
|
|
|
|
setSaving(true);
|
|
try {
|
|
// Build model override: only include when both fields are set (prompt mode)
|
|
const modelFields = form.mode === "prompt" && form.modelProvider && form.modelId
|
|
? { modelProvider: form.modelProvider, modelId: form.modelId }
|
|
: form.mode === "prompt"
|
|
? { modelProvider: undefined, modelId: undefined }
|
|
: {};
|
|
|
|
if (isCreating) {
|
|
const input: WorkflowStepInput = {
|
|
name: form.name.trim(),
|
|
description: form.description.trim(),
|
|
mode: form.mode,
|
|
phase: form.phase,
|
|
prompt: form.mode === "prompt" ? (form.prompt.trim() || undefined) : undefined,
|
|
gateMode: form.gateMode,
|
|
scriptName: form.mode === "script" ? form.scriptName.trim() : undefined,
|
|
enabled: form.enabled,
|
|
defaultOn: form.defaultOn || undefined,
|
|
...modelFields,
|
|
};
|
|
await createWorkflowStep(input, projectId);
|
|
addToast(t("workflow.stepCreated", "Workflow step created"), "success");
|
|
} else if (editingId) {
|
|
await updateWorkflowStep(editingId, {
|
|
name: form.name.trim(),
|
|
description: form.description.trim(),
|
|
mode: form.mode,
|
|
phase: form.phase,
|
|
prompt: form.mode === "prompt" ? form.prompt : "",
|
|
gateMode: form.gateMode,
|
|
scriptName: form.mode === "script" ? form.scriptName.trim() : undefined,
|
|
enabled: form.enabled,
|
|
defaultOn: form.defaultOn,
|
|
...modelFields,
|
|
}, projectId);
|
|
addToast(t("workflow.stepUpdated", "Workflow step updated"), "success");
|
|
}
|
|
|
|
setIsCreating(false);
|
|
setEditingId(null);
|
|
setForm(EMPTY_FORM);
|
|
await loadSteps();
|
|
} catch (err) {
|
|
addToast(getErrorMessage(err) || t("workflow.errorSaveStep", "Failed to save workflow step"), "error");
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
}, [form, isCreating, editingId, addToast, loadSteps]);
|
|
|
|
const handleDelete = useCallback(async (id: string) => {
|
|
try {
|
|
await deleteWorkflowStep(id, projectId);
|
|
addToast(t("workflow.stepDeleted", "Workflow step deleted"), "success");
|
|
setDeleteConfirmId(null);
|
|
if (editingId === id) {
|
|
setEditingId(null);
|
|
setForm(EMPTY_FORM);
|
|
}
|
|
await loadSteps();
|
|
} catch (err) {
|
|
addToast(getErrorMessage(err) || t("workflow.errorDeleteStep", "Failed to delete workflow step"), "error");
|
|
}
|
|
}, [editingId, addToast, loadSteps]);
|
|
|
|
const handleRefine = useCallback(async () => {
|
|
if (!editingId && !isCreating) return;
|
|
// Refine only works for prompt mode
|
|
if (form.mode !== "prompt") return;
|
|
|
|
// For new steps being created, we need to save first then refine
|
|
if (isCreating) {
|
|
if (!form.name.trim() || !form.description.trim()) {
|
|
addToast(t("workflow.errorNameDescRequiredRefine", "Name and description are required before refining"), "error");
|
|
return;
|
|
}
|
|
|
|
setSaving(true);
|
|
try {
|
|
// Build model override for the intermediate create-then-refine flow
|
|
const modelFields = form.modelProvider && form.modelId
|
|
? { modelProvider: form.modelProvider, modelId: form.modelId }
|
|
: {};
|
|
const input: WorkflowStepInput = {
|
|
name: form.name.trim(),
|
|
description: form.description.trim(),
|
|
mode: "prompt",
|
|
prompt: form.prompt.trim() || undefined,
|
|
gateMode: form.gateMode,
|
|
enabled: form.enabled,
|
|
defaultOn: form.defaultOn || undefined,
|
|
...modelFields,
|
|
};
|
|
const created = await createWorkflowStep(input, projectId);
|
|
setIsCreating(false);
|
|
setEditingId(created.id);
|
|
|
|
// Now refine
|
|
setRefining(true);
|
|
const result = await refineWorkflowStepPrompt(created.id, projectId);
|
|
setForm((prev) => ({ ...prev, prompt: result.prompt }));
|
|
addToast(t("workflow.promptRefined", "Prompt refined with AI"), "success");
|
|
await loadSteps();
|
|
} catch (err) {
|
|
addToast(getErrorMessage(err) || t("workflow.errorRefinePrompt", "Failed to refine prompt"), "error");
|
|
} finally {
|
|
setSaving(false);
|
|
setRefining(false);
|
|
}
|
|
return;
|
|
}
|
|
|
|
if (!editingId) return;
|
|
|
|
setRefining(true);
|
|
try {
|
|
const result = await refineWorkflowStepPrompt(editingId, projectId);
|
|
setForm((prev) => ({ ...prev, prompt: result.prompt }));
|
|
addToast(t("workflow.promptRefined", "Prompt refined with AI"), "success");
|
|
await loadSteps();
|
|
} catch (err) {
|
|
addToast(getErrorMessage(err) || t("workflow.errorRefinePrompt", "Failed to refine prompt"), "error");
|
|
} finally {
|
|
setRefining(false);
|
|
}
|
|
}, [editingId, isCreating, form, addToast, loadSteps]);
|
|
|
|
const handleAddTemplate = useCallback(async (template: WorkflowStepTemplate) => {
|
|
setAddingTemplateId(template.id);
|
|
try {
|
|
await createWorkflowStepFromTemplate(template.id, projectId);
|
|
addToast(t("workflow.templateAdded", "Added {{name}} workflow step", { name: template.name }), "success");
|
|
await loadSteps();
|
|
// Switch to "My Workflow Steps" tab to show the newly added step
|
|
setActiveTab("my-steps");
|
|
setShowCreateChooser(false);
|
|
} catch (err) {
|
|
const msg = getErrorMessage(err);
|
|
if (msg?.includes("already exists")) {
|
|
addToast(t("workflow.errorTemplateAlreadyExists", "A workflow step named '{{name}}' already exists", { name: template.name }), "error");
|
|
} else {
|
|
addToast(msg || t("workflow.errorAddTemplate", "Failed to add workflow step from template"), "error");
|
|
}
|
|
} finally {
|
|
setAddingTemplateId(null);
|
|
}
|
|
}, [addToast, loadSteps]);
|
|
|
|
// useOverlayDismiss MUST be called before any early return — otherwise the
|
|
// hook count differs between isOpen=false (returns early after the existing
|
|
// useState/useEffect/useCallback hooks) and isOpen=true (also calls
|
|
// useOverlayDismiss), which trips React error #310 the moment the modal
|
|
// is opened. That bug currently breaks the workflow steps panel from
|
|
// loading at all.
|
|
const overlayDismissProps = useOverlayDismiss(onClose);
|
|
|
|
if (!isOpen) return null;
|
|
|
|
const isEditing = isCreating || editingId !== null;
|
|
|
|
return (
|
|
<div className="modal-overlay open" {...overlayDismissProps} data-testid="workflow-step-manager">
|
|
<div
|
|
ref={modalRef}
|
|
className="modal workflow-step-manager-modal"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-label={t("workflow.modalAriaLabel", "Workflow Steps")}
|
|
>
|
|
{/* Header */}
|
|
<div className="modal-header">
|
|
<h2>{t("workflow.modalTitle", "Workflow Steps")}</h2>
|
|
<div className="wfm-header-actions">
|
|
{onOpenGraphEditor && (
|
|
<button className="wfm-graph-editor-link" onClick={onOpenGraphEditor}>
|
|
<LayoutGrid size={14} /> {t("workflow.graphEditor", "Graph editor")}
|
|
</button>
|
|
)}
|
|
<button className="modal-close" onClick={onClose} aria-label={t("common.close", "Close")}>
|
|
×
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="wfm-body">
|
|
{loading ? (
|
|
<div className="wfm-loading">{t("common.loading", "Loading...")}</div>
|
|
) : (
|
|
<>
|
|
{/* Tab Navigation */}
|
|
{!isEditing && (
|
|
<div className="wfm-tab-row">
|
|
<button
|
|
className={`btn ${activeTab === "my-steps" ? "btn-primary" : "btn-secondary"} wfm-tab-btn`}
|
|
onClick={() => setActiveTab("my-steps")}
|
|
data-testid="tab-my-steps"
|
|
>
|
|
<BookOpen size={14} />
|
|
{t("workflow.tabMySteps", "My Workflow Steps ({{count}})", { count: steps.length })}
|
|
</button>
|
|
<button
|
|
className={`btn ${activeTab === "templates" ? "btn-primary" : "btn-secondary"} wfm-tab-btn`}
|
|
onClick={() => setActiveTab("templates")}
|
|
data-testid="tab-templates"
|
|
>
|
|
<LayoutGrid size={14} />
|
|
{t("workflow.tabTemplates", "Templates ({{count}})", { count: templates.length })}
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* My Workflow Steps Tab */}
|
|
{activeTab === "my-steps" && !isEditing && !showCreateChooser && (
|
|
<>
|
|
{steps.length === 0 && (
|
|
<div className="wfm-empty" data-testid="empty-state">
|
|
{t("workflow.emptySteps", "No workflow steps defined. Create one to get started, or add one from the Templates tab.")}
|
|
</div>
|
|
)}
|
|
|
|
{steps.length > 0 && (
|
|
<div className="wfm-step-list">
|
|
{steps.map((step) => (
|
|
<div
|
|
key={step.id}
|
|
className="wfm-step-card"
|
|
data-testid={`workflow-step-${step.id}`}
|
|
>
|
|
<div className="wfm-step-card-top">
|
|
<div className="wfm-step-card-info">
|
|
<div className="wfm-step-card-title-row">
|
|
<span className="wfm-step-card-name">{step.name}</span>
|
|
<span className={`wfm-badge ${step.enabled ? "wfm-badge-enabled" : "wfm-badge-disabled"}`}>
|
|
{step.enabled ? t("workflow.badgeEnabled", "Enabled") : t("workflow.badgeDisabled", "Disabled")}
|
|
</span>
|
|
<span className={`wfm-badge ${(step.mode || "prompt") === "script" ? "wfm-badge-script" : "wfm-badge-prompt"}`}>
|
|
{(step.mode || "prompt") === "script" ? t("workflow.badgeScript", "Script") : t("workflow.badgeAiPrompt", "AI Prompt")}
|
|
</span>
|
|
<span className={`wfm-badge ${(step.phase || "pre-merge") === "post-merge" ? "wfm-badge-post-merge" : "wfm-badge-pre-merge"}`}>
|
|
{(step.phase || "pre-merge") === "post-merge" ? t("workflow.badgePostMerge", "Post-merge") : t("workflow.badgePreMerge", "Pre-merge")}
|
|
</span>
|
|
<span className={`wfm-badge ${(step.gateMode || ((step.mode || "prompt") === "script" ? "gate" : "advisory")) === "gate" ? "wfm-badge-gate" : "wfm-badge-advisory"}`}>
|
|
{(step.gateMode || ((step.mode || "prompt") === "script" ? "gate" : "advisory")) === "gate" ? t("workflow.badgeGate", "Gate") : t("workflow.badgeAdvisory", "Advisory")}
|
|
</span>
|
|
{step.defaultOn && (
|
|
<span className="wfm-badge wfm-badge-default-on">
|
|
{t("workflow.badgeDefaultOn", "Default on")}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<div className="wfm-step-card-desc">
|
|
{step.description}
|
|
</div>
|
|
</div>
|
|
<div className="wfm-step-card-actions">
|
|
<button
|
|
className="btn-icon"
|
|
onClick={() => handleEdit(step)}
|
|
title={t("common.edit", "Edit")}
|
|
aria-label={t("workflow.editStepAriaLabel", "Edit {{name}}", { name: step.name })}
|
|
>
|
|
<Pencil size={14} />
|
|
</button>
|
|
{deleteConfirmId === step.id ? (
|
|
<div className="wfm-delete-confirm">
|
|
<button
|
|
className="btn-icon wfm-delete-confirm-btn"
|
|
onClick={() => handleDelete(step.id)}
|
|
title={t("workflow.confirmDeleteTitle", "Confirm delete")}
|
|
aria-label={t("workflow.confirmDeleteAriaLabel", "Confirm delete {{name}}", { name: step.name })}
|
|
>
|
|
<Check size={14} />
|
|
</button>
|
|
<button
|
|
className="btn-icon"
|
|
onClick={() => setDeleteConfirmId(null)}
|
|
title={t("workflow.cancelDeleteTitle", "Cancel delete")}
|
|
aria-label={t("workflow.cancelDeleteAriaLabel", "Cancel delete")}
|
|
>
|
|
<X size={14} />
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<button
|
|
className="btn-icon"
|
|
onClick={() => setDeleteConfirmId(step.id)}
|
|
title={t("common.delete", "Delete")}
|
|
aria-label={t("workflow.deleteStepAriaLabel", "Delete {{name}}", { name: step.name })}
|
|
>
|
|
<Trash2 size={14} />
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
|
|
{/* Templates Tab */}
|
|
{activeTab === "templates" && !isEditing && !showCreateChooser && (
|
|
<>
|
|
{templatesLoading ? (
|
|
<div className="wfm-loading">
|
|
<Loader2 size={24} className="spin wfm-spinner" />
|
|
{t("workflow.loadingTemplates", "Loading templates...")}
|
|
</div>
|
|
) : templates.length === 0 ? (
|
|
<div className="wfm-empty" data-testid="no-templates-state">
|
|
{t("workflow.noTemplates", "No templates available.")}
|
|
</div>
|
|
) : (
|
|
<div className="wfm-template-list">
|
|
{templates.map((template) => {
|
|
const IconComponent = getTemplateIcon(template.icon);
|
|
const categoryClassName = getCategoryClassName(template.category);
|
|
const isAdding = addingTemplateId === template.id;
|
|
|
|
return (
|
|
<div
|
|
key={template.id}
|
|
className="wfm-template-card"
|
|
data-testid={`template-${template.id}`}
|
|
>
|
|
<div className="wfm-template-inner">
|
|
{/* Icon */}
|
|
<div className="wfm-template-icon">
|
|
<IconComponent size={20} />
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="wfm-template-content">
|
|
<div className="wfm-template-title-row">
|
|
<span className="wfm-template-name">
|
|
{template.name}
|
|
</span>
|
|
<span className={categoryClassName}>
|
|
{template.category}
|
|
</span>
|
|
{pluginTemplateOwners[template.id] && (
|
|
<span className="wfm-badge-category wfm-badge-category-plugin">
|
|
{pluginTemplateOwners[template.id]}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<div className="wfm-template-desc">
|
|
{template.description}
|
|
</div>
|
|
<button
|
|
className="btn btn-primary wfm-template-add-btn"
|
|
onClick={() => handleAddTemplate(template)}
|
|
disabled={isAdding}
|
|
data-testid={`add-template-${template.id}`}
|
|
>
|
|
{isAdding ? (
|
|
<>
|
|
<Loader2 size={12} className="spin" />
|
|
{t("workflow.adding", "Adding...")}
|
|
</>
|
|
) : (
|
|
<>
|
|
<Plus size={12} />
|
|
{t("workflow.add", "Add")}
|
|
</>
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
|
|
{/* Create chooser */}
|
|
{showCreateChooser && !isEditing && (
|
|
<div className="wfm-create-chooser" data-testid="workflow-step-create-chooser">
|
|
<h3 className="wfm-form-title">{t("workflow.createChooserTitle", "How would you like to create this workflow step?")}</h3>
|
|
<p className="wfm-create-chooser-hint">
|
|
{t("workflow.createChooserHint", "Start from a built-in template or create a fully custom workflow step.")}
|
|
</p>
|
|
|
|
<button
|
|
className="btn wfm-create-custom-btn"
|
|
onClick={handleCreateCustom}
|
|
data-testid="create-custom-step"
|
|
>
|
|
<Plus size={14} />
|
|
{t("workflow.createCustomStep", "Custom workflow step")}
|
|
</button>
|
|
|
|
{templatesLoading ? (
|
|
<div className="wfm-loading" data-testid="create-chooser-template-loading">
|
|
<Loader2 size={24} className="spin wfm-spinner" />
|
|
{t("workflow.loadingBuiltInTemplates", "Loading built-in templates...")}
|
|
</div>
|
|
) : templates.length === 0 ? (
|
|
<div className="wfm-empty" data-testid="create-chooser-no-templates">
|
|
{t("workflow.noBuiltInTemplates", "No built-in templates are available right now. You can still create a custom step.")}
|
|
</div>
|
|
) : (
|
|
<div className="wfm-template-list" data-testid="create-chooser-templates">
|
|
{templates.map((template) => {
|
|
const IconComponent = getTemplateIcon(template.icon);
|
|
const categoryClassName = getCategoryClassName(template.category);
|
|
const isAdding = addingTemplateId === template.id;
|
|
|
|
return (
|
|
<div
|
|
key={template.id}
|
|
className="wfm-template-card"
|
|
data-testid={`chooser-template-${template.id}`}
|
|
>
|
|
<div className="wfm-template-inner">
|
|
<div className="wfm-template-icon">
|
|
<IconComponent size={20} />
|
|
</div>
|
|
|
|
<div className="wfm-template-content">
|
|
<div className="wfm-template-title-row">
|
|
<span className="wfm-template-name">{template.name}</span>
|
|
<span className={categoryClassName}>{template.category}</span>
|
|
{pluginTemplateOwners[template.id] && (
|
|
<span className="wfm-badge-category wfm-badge-category-plugin">
|
|
{pluginTemplateOwners[template.id]}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<div className="wfm-template-desc">{template.description}</div>
|
|
<button
|
|
className="btn btn-primary wfm-template-add-btn"
|
|
onClick={() => handleAddTemplate(template)}
|
|
disabled={isAdding}
|
|
data-testid={`chooser-add-template-${template.id}`}
|
|
>
|
|
{isAdding ? (
|
|
<>
|
|
<Loader2 size={12} className="spin" />
|
|
{t("workflow.adding", "Adding...")}
|
|
</>
|
|
) : (
|
|
<>
|
|
<Plus size={12} />
|
|
{t("workflow.addTemplate", "Add template")}
|
|
</>
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Edit / Create form */}
|
|
{isEditing && (
|
|
<div className="wfm-form" data-testid="workflow-step-form">
|
|
<h3 className="wfm-form-title">
|
|
{isCreating ? t("workflow.newStepTitle", "New Workflow Step") : t("workflow.editStepTitle", "Edit Workflow Step")}
|
|
</h3>
|
|
|
|
<div className="wfm-form-fields">
|
|
{/* Name */}
|
|
<div className="wfm-field">
|
|
<label>{t("workflow.formNameLabel", "Name")}</label>
|
|
<input
|
|
type="text"
|
|
value={form.name}
|
|
onChange={(e) => setForm((prev) => ({ ...prev, name: e.target.value }))}
|
|
placeholder={t("workflow.formNamePlaceholder", "e.g. Documentation Review")}
|
|
data-testid="workflow-step-name"
|
|
/>
|
|
</div>
|
|
|
|
{/* Description */}
|
|
<div className="wfm-field">
|
|
<label>{t("workflow.formDescriptionLabel", "Description")}</label>
|
|
<textarea
|
|
value={form.description}
|
|
onChange={(e) => setForm((prev) => ({ ...prev, description: e.target.value }))}
|
|
placeholder={t("workflow.formDescriptionPlaceholder", "Brief description of what this step does")}
|
|
rows={2}
|
|
data-testid="workflow-step-description"
|
|
/>
|
|
</div>
|
|
|
|
{/* Mode Selector */}
|
|
<div className="wfm-field">
|
|
<label>{t("workflow.executionModeLabel", "Execution Mode")}</label>
|
|
<div className="wfm-mode-selector" data-testid="workflow-step-mode-selector">
|
|
<button
|
|
className={`btn ${form.mode === "prompt" ? "btn-primary" : "btn-secondary"} wfm-mode-btn`}
|
|
onClick={() => setForm((prev) => ({ ...prev, mode: "prompt", gateMode: prev.gateMode || "advisory", scriptName: "" }))}
|
|
data-testid="mode-prompt"
|
|
>
|
|
<MessageSquare size={14} />
|
|
{t("workflow.modeAiPrompt", "AI Prompt")}
|
|
</button>
|
|
<button
|
|
className={`btn ${form.mode === "script" ? "btn-primary" : "btn-secondary"} wfm-mode-btn`}
|
|
onClick={() => setForm((prev) => ({ ...prev, mode: "script", gateMode: "gate", prompt: "", modelProvider: "", modelId: "" }))}
|
|
data-testid="mode-script"
|
|
>
|
|
<Terminal size={14} />
|
|
{t("workflow.modeScript", "Run Script")}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Phase Selector */}
|
|
<div className="wfm-field">
|
|
<label>{t("workflow.executionPhaseLabel", "Execution Phase")}</label>
|
|
<div className="wfm-mode-selector" data-testid="workflow-step-phase-selector">
|
|
<button
|
|
className={`btn ${form.phase === "pre-merge" ? "btn-primary" : "btn-secondary"} wfm-mode-btn`}
|
|
onClick={() => setForm((prev) => ({ ...prev, phase: "pre-merge" }))}
|
|
data-testid="phase-pre-merge"
|
|
>
|
|
{t("workflow.phasePreMerge", "Pre-merge")}
|
|
</button>
|
|
<button
|
|
className={`btn ${form.phase === "post-merge" ? "btn-primary" : "btn-secondary"} wfm-mode-btn`}
|
|
onClick={() => setForm((prev) => ({ ...prev, phase: "post-merge" }))}
|
|
data-testid="phase-post-merge"
|
|
>
|
|
{t("workflow.phasePostMerge", "Post-merge")}
|
|
</button>
|
|
</div>
|
|
<div className="wfm-field-hint">
|
|
{form.phase === "pre-merge"
|
|
? t("workflow.phasePreMergeHint", "Runs before merge — can block merge on failure")
|
|
: t("workflow.phasePostMergeHint", "Runs after merge success — failures are logged but do not block")}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Gate mode */}
|
|
<div className="wfm-field">
|
|
<label>{t("workflow.failureBehaviorLabel", "Failure Behavior")}</label>
|
|
<div className="wfm-mode-selector" data-testid="workflow-step-gate-mode-selector">
|
|
<button
|
|
className={`btn ${form.gateMode === "advisory" ? "btn-primary" : "btn-secondary"} wfm-mode-btn`}
|
|
onClick={() => setForm((prev) => ({ ...prev, gateMode: "advisory" }))}
|
|
data-testid="gate-mode-advisory"
|
|
>
|
|
{t("workflow.gateModeAdvisory", "Advisory")}
|
|
</button>
|
|
<button
|
|
className={`btn ${form.gateMode === "gate" ? "btn-primary" : "btn-secondary"} wfm-mode-btn`}
|
|
onClick={() => setForm((prev) => ({ ...prev, gateMode: "gate" }))}
|
|
data-testid="gate-mode-gate"
|
|
>
|
|
{t("workflow.gateModeGate", "Gate")}
|
|
</button>
|
|
</div>
|
|
<div className="wfm-field-hint">
|
|
{form.gateMode === "gate"
|
|
? t("workflow.gateModeGateHint", "Failures block merge and request remediation.")
|
|
: t("workflow.gateModeAdvisoryHint", "Failures are recorded as advisory and do not block merge.")}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Prompt (AI mode only) */}
|
|
{form.mode === "prompt" && (
|
|
<div className="wfm-field">
|
|
<div className="wfm-prompt-header">
|
|
<label>{t("workflow.agentPromptLabel", "Agent Prompt")}</label>
|
|
<button
|
|
className="btn-icon wfm-refine-btn"
|
|
onClick={handleRefine}
|
|
disabled={!form.description.trim() || refining}
|
|
title={t("workflow.refineWithAiTitle", "Refine with AI")}
|
|
aria-label={t("workflow.refineWithAiAriaLabel", "Refine prompt with AI")}
|
|
data-testid="refine-btn"
|
|
>
|
|
{refining ? (
|
|
<Loader2 size={12} className="spin" />
|
|
) : (
|
|
<Sparkles size={12} />
|
|
)}
|
|
<span>{t("workflow.refineWithAi", "Refine with AI")}</span>
|
|
</button>
|
|
</div>
|
|
<textarea
|
|
value={form.prompt}
|
|
onChange={(e) => setForm((prev) => ({ ...prev, prompt: e.target.value }))}
|
|
placeholder={t("workflow.agentPromptPlaceholder", "Leave empty to use AI refinement")}
|
|
rows={6}
|
|
className="wfm-prompt-textarea"
|
|
data-testid="workflow-step-prompt"
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{/* Model override (prompt mode only) */}
|
|
{form.mode === "prompt" && (
|
|
<div className="wfm-field" data-testid="workflow-step-model-field">
|
|
<div className="wfm-model-header">
|
|
<label>{t("workflow.modelOverrideLabel", "Model Override")}</label>
|
|
{form.modelProvider && form.modelId && (
|
|
<button
|
|
type="button"
|
|
className="btn-icon wfm-model-clear-btn"
|
|
onClick={() => setForm((prev) => ({ ...prev, modelProvider: "", modelId: "" }))}
|
|
title={t("workflow.clearModelOverrideTitle", "Clear model override (use global default)")}
|
|
data-testid="clear-model-override"
|
|
>
|
|
<X size={12} />
|
|
<span>{t("workflow.useDefault", "Use default")}</span>
|
|
</button>
|
|
)}
|
|
</div>
|
|
<span className="wfm-model-hint">
|
|
{form.modelProvider && form.modelId
|
|
? t("workflow.modelHintCustom", "Using {{provider}}/{{modelId}}", { provider: form.modelProvider, modelId: form.modelId })
|
|
: t("workflow.modelHintDefault", "Using global default model")}
|
|
</span>
|
|
<div data-testid="workflow-step-model-select">
|
|
<CustomModelDropdown
|
|
models={availableModels}
|
|
value={getModelDropdownValue(form.modelProvider, form.modelId)}
|
|
onChange={(value: string) => {
|
|
const parsed = parseModelDropdownValue(value);
|
|
setForm((prev) => ({ ...prev, modelProvider: parsed.provider, modelId: parsed.modelId }));
|
|
}}
|
|
placeholder={t("workflow.modelOverridePlaceholder", "Select a model override…")}
|
|
label={t("workflow.modelOverrideDropdownLabel", "Model override for this workflow step")}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Script selector (script mode only) */}
|
|
{form.mode === "script" && (
|
|
<div className="wfm-field">
|
|
<label>{t("workflow.scriptLabel", "Script")}</label>
|
|
{Object.keys(availableScripts).length === 0 ? (
|
|
<div className="wfm-no-scripts" data-testid="no-scripts-message">
|
|
{t("workflow.noScripts", "No scripts configured. Add scripts in Settings → Scripts first.")}
|
|
</div>
|
|
) : (
|
|
<select
|
|
value={form.scriptName}
|
|
onChange={(e) => setForm((prev) => ({ ...prev, scriptName: e.target.value }))}
|
|
data-testid="workflow-step-script-select"
|
|
>
|
|
<option value="">{t("workflow.selectScript", "Select a script…")}</option>
|
|
{Object.entries(availableScripts).map(([name, command]) => (
|
|
<option key={name} value={name}>
|
|
{name} ({command})
|
|
</option>
|
|
))}
|
|
</select>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Enabled toggle */}
|
|
<label className="wfm-checkbox-label">
|
|
<input
|
|
type="checkbox"
|
|
checked={form.enabled}
|
|
onChange={(e) => setForm((prev) => ({ ...prev, enabled: e.target.checked }))}
|
|
data-testid="workflow-step-enabled"
|
|
/>
|
|
{t("workflow.enabledCheckbox", "Enabled (available for selection on new tasks)")}
|
|
</label>
|
|
|
|
{/* Default on toggle */}
|
|
<label className="wfm-checkbox-label">
|
|
<input
|
|
type="checkbox"
|
|
checked={form.defaultOn}
|
|
onChange={(e) => setForm((prev) => ({ ...prev, defaultOn: e.target.checked }))}
|
|
data-testid="workflow-step-default-on"
|
|
/>
|
|
{t("workflow.defaultOnCheckbox", "Default on for new tasks")}
|
|
</label>
|
|
|
|
{/* Form actions */}
|
|
<div className="wfm-form-actions">
|
|
<button className="btn btn-secondary" onClick={handleCancel} disabled={saving}>
|
|
{t("common.cancel", "Cancel")}
|
|
</button>
|
|
<button
|
|
className="btn btn-primary"
|
|
onClick={handleSave}
|
|
disabled={
|
|
saving ||
|
|
!form.name.trim() ||
|
|
!form.description.trim() ||
|
|
(form.mode === "script" && !form.scriptName.trim())
|
|
}
|
|
data-testid="save-workflow-step"
|
|
>
|
|
{saving ? t("common.saving", "Saving...") : isCreating ? t("common.create", "Create") : t("common.save", "Save")}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
{!isEditing && !showCreateChooser && (
|
|
<div className="wfm-footer">
|
|
<button
|
|
className="btn btn-primary wfm-footer-add-btn"
|
|
onClick={handleCreate}
|
|
data-testid="add-workflow-step"
|
|
>
|
|
<Plus size={14} />
|
|
{t("workflow.addWorkflowStep", "Add Workflow Step")}
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|