Files
kandev/apps/web/components/settings/workflow-description-field.tsx
T

42 lines
1.3 KiB
TypeScript

"use client";
import { useTranslation } from "react-i18next";
import { Label } from "@kandev/ui/label";
import { Textarea } from "@kandev/ui/textarea";
import type { Workflow } from "@/lib/types/http";
import { isWorkflowFieldDirty } from "./workflow-dirty-state";
type WorkflowDescriptionFieldProps = {
workflow: Workflow;
savedWorkflow?: Workflow;
readOnly?: boolean;
onUpdate: (description: string) => void;
};
// Always visible, unlike WorkflowPromptSection's collapsible — every synced workflow carries one.
export function WorkflowDescriptionField({
workflow,
savedWorkflow,
readOnly,
onUpdate,
}: WorkflowDescriptionFieldProps) {
const { t } = useTranslation();
const inputId = `workflow-description-input-${workflow.id}`;
return (
<div className="space-y-1.5">
<Label htmlFor={inputId}>{t("workflows:workflowDescription")}</Label>
<Textarea
id={inputId}
value={workflow.description ?? ""}
onChange={(e) => onUpdate(e.target.value)}
disabled={readOnly}
placeholder={t("workflows:workflowDescriptionPlaceholder")}
rows={2}
className="min-h-16 text-sm"
data-testid="workflow-description-input"
data-settings-dirty={isWorkflowFieldDirty(workflow, savedWorkflow, "description")}
/>
</div>
);
}