Carlos Florêncio
525 lines
16 KiB
TypeScript
525 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect, useCallback, useMemo } from "react";
|
|
import { Button } from "@kandev/ui/button";
|
|
import { Switch } from "@kandev/ui/switch";
|
|
import { Label } from "@kandev/ui/label";
|
|
import { Input } from "@kandev/ui/input";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
} from "@kandev/ui/dialog";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@kandev/ui/select";
|
|
import { Textarea } from "@kandev/ui/textarea";
|
|
import { IconInfoCircle } from "@tabler/icons-react";
|
|
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@kandev/ui/tooltip";
|
|
import { useAppStore } from "@/components/state-provider";
|
|
import { useSettingsData } from "@/hooks/domains/settings/use-settings-data";
|
|
import { useWorkflows } from "@/hooks/use-workflows";
|
|
import { useWorkflowSteps, stepPlaceholder } from "@/hooks/use-workflow-steps";
|
|
import {
|
|
ScriptEditor,
|
|
computeEditorHeight,
|
|
} from "@/components/settings/profile-edit/script-editor";
|
|
import {
|
|
ISSUE_WATCH_PLACEHOLDERS,
|
|
DEFAULT_ISSUE_WATCH_PROMPT,
|
|
} from "@/components/github/issue-watch-placeholders";
|
|
import { RepoFilterSelector } from "@/components/github/repo-filter-selector";
|
|
import type {
|
|
RepoFilter,
|
|
IssueWatch,
|
|
CreateIssueWatchRequest,
|
|
UpdateIssueWatchRequest,
|
|
} from "@/lib/types/github";
|
|
|
|
type IssueWatchDialogProps = {
|
|
open: boolean;
|
|
onOpenChange: (open: boolean) => void;
|
|
watch: IssueWatch | null;
|
|
// Pre-binds the dialog to one workspace. Omit on the install-wide settings
|
|
// page so the create flow shows a workspace picker.
|
|
workspaceId?: string;
|
|
onCreate: (req: CreateIssueWatchRequest) => Promise<void>;
|
|
onUpdate: (id: string, req: UpdateIssueWatchRequest) => Promise<void>;
|
|
};
|
|
|
|
type FormState = {
|
|
workspaceId: string;
|
|
selectedRepos: RepoFilter[];
|
|
allRepos: boolean;
|
|
workflowId: string;
|
|
workflowStepId: string;
|
|
agentProfileId: string;
|
|
executorProfileId: string;
|
|
prompt: string;
|
|
labels: string;
|
|
customQuery: string;
|
|
enabled: boolean;
|
|
pollInterval: number;
|
|
};
|
|
|
|
const DEFAULT_QUERY = "type:issue state:open";
|
|
|
|
function makeDefaultForm(workspaceId: string): FormState {
|
|
return {
|
|
workspaceId,
|
|
selectedRepos: [],
|
|
allRepos: false,
|
|
workflowId: "",
|
|
workflowStepId: "",
|
|
agentProfileId: "",
|
|
executorProfileId: "",
|
|
prompt: DEFAULT_ISSUE_WATCH_PROMPT,
|
|
labels: "",
|
|
customQuery: DEFAULT_QUERY,
|
|
enabled: true,
|
|
pollInterval: 300,
|
|
};
|
|
}
|
|
|
|
function formStateFromWatch(watch: IssueWatch): FormState {
|
|
const hasRepos = watch.repos && watch.repos.length > 0;
|
|
return {
|
|
workspaceId: watch.workspace_id,
|
|
selectedRepos: hasRepos ? watch.repos : [],
|
|
allRepos: !hasRepos,
|
|
workflowId: watch.workflow_id,
|
|
workflowStepId: watch.workflow_step_id,
|
|
agentProfileId: watch.agent_profile_id,
|
|
executorProfileId: watch.executor_profile_id,
|
|
prompt: watch.prompt || DEFAULT_ISSUE_WATCH_PROMPT,
|
|
labels: (watch.labels ?? []).join(", "),
|
|
customQuery: watch.custom_query || DEFAULT_QUERY,
|
|
enabled: watch.enabled,
|
|
pollInterval: watch.poll_interval_seconds,
|
|
};
|
|
}
|
|
|
|
function useWatchFormData(workspaceId: string) {
|
|
useSettingsData(true);
|
|
useWorkflows(workspaceId, true);
|
|
|
|
const allWorkflows = useAppStore((state) => state.workflows.items);
|
|
const workflows = useMemo(() => allWorkflows.filter((w) => !w.hidden), [allWorkflows]);
|
|
const agentProfiles = useAppStore((state) => state.agentProfiles.items);
|
|
const executors = useAppStore((state) => state.executors.items);
|
|
const allExecutorProfiles = useMemo(
|
|
() =>
|
|
executors
|
|
.filter((e) => e.type !== "local" && e.type !== "local_pc")
|
|
.flatMap((e) => e.profiles ?? []),
|
|
[executors],
|
|
);
|
|
|
|
const filteredAgentProfiles = useMemo(
|
|
() => agentProfiles.filter((p) => !p.cli_passthrough),
|
|
[agentProfiles],
|
|
);
|
|
|
|
return { workflows, agentProfiles: filteredAgentProfiles, allExecutorProfiles };
|
|
}
|
|
|
|
function SectionHeader({ children }: { children: React.ReactNode }) {
|
|
return (
|
|
<div className="flex items-center gap-3 pt-1">
|
|
<span className="text-xs font-medium text-muted-foreground uppercase tracking-wider shrink-0">
|
|
{children}
|
|
</span>
|
|
<div className="flex-1 border-t border-border" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function PlaceholdersHelp() {
|
|
return (
|
|
<TooltipProvider>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<IconInfoCircle className="h-3.5 w-3.5 text-muted-foreground/50 hover:text-muted-foreground cursor-help shrink-0" />
|
|
</TooltipTrigger>
|
|
<TooltipContent className="max-w-xs" align="start">
|
|
<p className="text-xs font-medium mb-1">Available placeholders:</p>
|
|
<ul className="text-xs space-y-0.5">
|
|
{ISSUE_WATCH_PLACEHOLDERS.map((p) => (
|
|
<li key={p.key}>
|
|
<code className="text-[10px] bg-white/15 px-1 rounded">{`{{${p.key}}}`}</code>{" "}
|
|
<span className="opacity-70">{p.description}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
);
|
|
}
|
|
|
|
function IssueWatchFormFields({
|
|
form,
|
|
setForm,
|
|
workspaceLocked,
|
|
onAllReposChange,
|
|
onSelectedReposChange,
|
|
}: {
|
|
form: FormState;
|
|
setForm: React.Dispatch<React.SetStateAction<FormState>>;
|
|
workspaceLocked: boolean;
|
|
onAllReposChange: (checked: boolean) => void;
|
|
onSelectedReposChange: (repos: RepoFilter[]) => void;
|
|
}) {
|
|
return (
|
|
<div className="space-y-5">
|
|
<WorkspacePicker
|
|
value={form.workspaceId}
|
|
onChange={(v) =>
|
|
setForm((prev) => ({
|
|
...prev,
|
|
workspaceId: v,
|
|
workflowId: "",
|
|
workflowStepId: "",
|
|
selectedRepos: [],
|
|
allRepos: false,
|
|
}))
|
|
}
|
|
disabled={workspaceLocked}
|
|
/>
|
|
<IssueFilterFields
|
|
form={form}
|
|
setForm={setForm}
|
|
onAllReposChange={onAllReposChange}
|
|
onSelectedReposChange={onSelectedReposChange}
|
|
/>
|
|
<IssueAutomationFields form={form} setForm={setForm} />
|
|
<IssueSettingsFields form={form} setForm={setForm} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function IssueFilterFields({
|
|
form,
|
|
setForm,
|
|
onAllReposChange,
|
|
onSelectedReposChange,
|
|
}: {
|
|
form: FormState;
|
|
setForm: React.Dispatch<React.SetStateAction<FormState>>;
|
|
onAllReposChange: (checked: boolean) => void;
|
|
onSelectedReposChange: (repos: RepoFilter[]) => void;
|
|
}) {
|
|
return (
|
|
<>
|
|
<SectionHeader>Filter</SectionHeader>
|
|
<RepoFilterSelector
|
|
allRepos={form.allRepos}
|
|
selectedRepos={form.selectedRepos}
|
|
onAllReposChange={onAllReposChange}
|
|
onSelectedReposChange={onSelectedReposChange}
|
|
/>
|
|
<div className="space-y-1.5">
|
|
<Label>Labels (comma-separated)</Label>
|
|
<Input
|
|
value={form.labels}
|
|
onChange={(e) => setForm((prev) => ({ ...prev, labels: e.target.value }))}
|
|
placeholder="e.g. bug, enhancement, priority:high"
|
|
/>
|
|
<p className="text-xs text-muted-foreground">
|
|
Only match issues with these labels. Leave empty for all issues.
|
|
</p>
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<Label>Custom Query</Label>
|
|
<Textarea
|
|
value={form.customQuery}
|
|
onChange={(e) => setForm((prev) => ({ ...prev, customQuery: e.target.value }))}
|
|
placeholder="e.g. type:issue state:open label:bug"
|
|
rows={1}
|
|
className="font-mono text-xs resize-y"
|
|
/>
|
|
<p className="text-xs text-muted-foreground">
|
|
GitHub search query. When set, overrides the label filter above.
|
|
</p>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function IssueAutomationFields({
|
|
form,
|
|
setForm,
|
|
}: {
|
|
form: FormState;
|
|
setForm: React.Dispatch<React.SetStateAction<FormState>>;
|
|
}) {
|
|
const { workflows, agentProfiles, allExecutorProfiles } = useWatchFormData(form.workspaceId);
|
|
const { steps: workflowSteps, loading: stepsLoading } = useWorkflowSteps(form.workflowId);
|
|
|
|
return (
|
|
<>
|
|
<SectionHeader>Automation</SectionHeader>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<SelectField
|
|
label="Workflow"
|
|
description="The workflow to create tasks in."
|
|
value={form.workflowId}
|
|
onChange={(v) => setForm((prev) => ({ ...prev, workflowId: v, workflowStepId: "" }))}
|
|
placeholder="Select workflow"
|
|
items={workflows.map((w) => ({ id: w.id, label: w.name }))}
|
|
/>
|
|
<SelectField
|
|
label="Workflow Step"
|
|
description="Initial step for new tasks."
|
|
value={form.workflowStepId}
|
|
onChange={(v) => setForm((prev) => ({ ...prev, workflowStepId: v }))}
|
|
placeholder={stepPlaceholder(form.workflowId, stepsLoading, workflowSteps.length)}
|
|
items={workflowSteps.map((s) => ({ id: s.id, label: s.name }))}
|
|
disabled={!form.workflowId || stepsLoading || workflowSteps.length === 0}
|
|
/>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<SelectField
|
|
label="Agent Profile"
|
|
description="The agent configuration for the task."
|
|
value={form.agentProfileId}
|
|
onChange={(v) => setForm((prev) => ({ ...prev, agentProfileId: v }))}
|
|
placeholder="Select agent profile"
|
|
items={agentProfiles.map((p) => ({ id: p.id, label: p.label }))}
|
|
/>
|
|
<SelectField
|
|
label="Executor Profile"
|
|
description="The executor environment for the agent."
|
|
value={form.executorProfileId}
|
|
onChange={(v) => setForm((prev) => ({ ...prev, executorProfileId: v }))}
|
|
placeholder="Select executor profile"
|
|
items={allExecutorProfiles.map((p) => ({ id: p.id, label: p.name }))}
|
|
/>
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<div className="flex items-center gap-1.5">
|
|
<Label>Task Prompt</Label>
|
|
<PlaceholdersHelp />
|
|
</div>
|
|
<p className="text-xs text-muted-foreground">
|
|
The prompt sent to the agent for each new issue. Type {"{{"} to insert placeholders.
|
|
</p>
|
|
<div className="rounded-md border border-border overflow-hidden">
|
|
<ScriptEditor
|
|
value={form.prompt}
|
|
onChange={(v) => setForm((prev) => ({ ...prev, prompt: v }))}
|
|
language="markdown"
|
|
height={computeEditorHeight(form.prompt)}
|
|
lineNumbers="off"
|
|
placeholders={ISSUE_WATCH_PLACEHOLDERS}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function IssueSettingsFields({
|
|
form,
|
|
setForm,
|
|
}: {
|
|
form: FormState;
|
|
setForm: React.Dispatch<React.SetStateAction<FormState>>;
|
|
}) {
|
|
return (
|
|
<>
|
|
<SectionHeader>Settings</SectionHeader>
|
|
<div className="space-y-1.5">
|
|
<Label>Poll Interval (seconds)</Label>
|
|
<p className="text-xs text-muted-foreground">
|
|
How often to check for new issues. Minimum 60s, maximum 3600s.
|
|
</p>
|
|
<Input
|
|
type="number"
|
|
value={form.pollInterval}
|
|
onChange={(e) => setForm((prev) => ({ ...prev, pollInterval: Number(e.target.value) }))}
|
|
min={60}
|
|
max={3600}
|
|
/>
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<Label>Enabled</Label>
|
|
<p className="text-xs text-muted-foreground">Pause or resume polling.</p>
|
|
</div>
|
|
<Switch
|
|
checked={form.enabled}
|
|
onCheckedChange={(v) => setForm((prev) => ({ ...prev, enabled: v }))}
|
|
className="cursor-pointer"
|
|
/>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function parseLabels(labelsStr: string): string[] {
|
|
return labelsStr
|
|
.split(",")
|
|
.map((l) => l.trim())
|
|
.filter((l) => l.length > 0);
|
|
}
|
|
|
|
function getSaveLabel(watch: IssueWatch | null | undefined): string {
|
|
return watch ? "Update" : "Create";
|
|
}
|
|
|
|
export function IssueWatchDialog({
|
|
open,
|
|
onOpenChange,
|
|
watch,
|
|
workspaceId,
|
|
onCreate,
|
|
onUpdate,
|
|
}: IssueWatchDialogProps) {
|
|
const activeWorkspaceId = useAppStore((s) => s.workspaces.activeId);
|
|
const [saving, setSaving] = useState(false);
|
|
const [form, setForm] = useState<FormState>(() => makeDefaultForm(workspaceId ?? ""));
|
|
|
|
useEffect(() => {
|
|
if (watch) {
|
|
setForm(formStateFromWatch(watch));
|
|
} else {
|
|
setForm(makeDefaultForm(workspaceId ?? activeWorkspaceId ?? ""));
|
|
}
|
|
}, [watch, open, workspaceId, activeWorkspaceId]);
|
|
|
|
const workspaceLocked = !!watch || !!workspaceId;
|
|
|
|
const handleSelectedReposChange = useCallback((repos: RepoFilter[]) => {
|
|
setForm((prev) => ({ ...prev, selectedRepos: repos }));
|
|
}, []);
|
|
|
|
const handleAllReposChange = useCallback((checked: boolean) => {
|
|
setForm((prev) => ({
|
|
...prev,
|
|
allRepos: checked,
|
|
selectedRepos: checked ? [] : prev.selectedRepos,
|
|
}));
|
|
}, []);
|
|
|
|
const handleSave = useCallback(async () => {
|
|
setSaving(true);
|
|
try {
|
|
const repos = form.allRepos ? [] : form.selectedRepos;
|
|
const payload = {
|
|
workflow_id: form.workflowId,
|
|
workflow_step_id: form.workflowStepId,
|
|
repos,
|
|
agent_profile_id: form.agentProfileId,
|
|
executor_profile_id: form.executorProfileId,
|
|
prompt: form.prompt,
|
|
labels: parseLabels(form.labels),
|
|
custom_query: form.customQuery,
|
|
enabled: form.enabled,
|
|
poll_interval_seconds: form.pollInterval,
|
|
};
|
|
if (watch) {
|
|
await onUpdate(watch.id, payload);
|
|
} else {
|
|
await onCreate({ ...payload, workspace_id: form.workspaceId });
|
|
}
|
|
onOpenChange(false);
|
|
} catch {
|
|
// Error handled by caller
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
}, [form, watch, onCreate, onUpdate, onOpenChange]);
|
|
|
|
const canSave =
|
|
!!form.workspaceId &&
|
|
!!form.workflowId &&
|
|
!!form.workflowStepId &&
|
|
form.prompt.trim().length > 0;
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogContent className="w-full max-w-full sm:w-[900px] sm:max-w-none max-h-[90vh] overflow-y-auto">
|
|
<DialogHeader>
|
|
<DialogTitle>{watch ? "Edit Issue Watch" : "Create Issue Watch"}</DialogTitle>
|
|
<DialogDescription>
|
|
Automatically create tasks when new GitHub issues match your criteria.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<IssueWatchFormFields
|
|
form={form}
|
|
setForm={setForm}
|
|
workspaceLocked={workspaceLocked}
|
|
onAllReposChange={handleAllReposChange}
|
|
onSelectedReposChange={handleSelectedReposChange}
|
|
/>
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => onOpenChange(false)} className="cursor-pointer">
|
|
Cancel
|
|
</Button>
|
|
<Button onClick={handleSave} disabled={saving || !canSave} className="cursor-pointer">
|
|
{saving ? "Saving..." : getSaveLabel(watch)}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|
|
|
|
function SelectField(props: {
|
|
label: string;
|
|
description?: string;
|
|
value: string;
|
|
onChange: (v: string) => void;
|
|
placeholder: string;
|
|
items: { id: string; label: string }[];
|
|
disabled?: boolean;
|
|
}) {
|
|
return (
|
|
<div className="space-y-1.5">
|
|
<Label>{props.label}</Label>
|
|
{props.description && <p className="text-xs text-muted-foreground">{props.description}</p>}
|
|
<Select
|
|
value={props.value || undefined}
|
|
onValueChange={props.onChange}
|
|
disabled={props.disabled}
|
|
>
|
|
<SelectTrigger className="cursor-pointer">
|
|
<SelectValue placeholder={props.placeholder} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{props.items.map((item) => (
|
|
<SelectItem key={item.id} value={item.id}>
|
|
{item.label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function WorkspacePicker({
|
|
value,
|
|
onChange,
|
|
disabled,
|
|
}: {
|
|
value: string;
|
|
onChange: (v: string) => void;
|
|
disabled?: boolean;
|
|
}) {
|
|
const workspaces = useAppStore((s) => s.workspaces.items);
|
|
return (
|
|
<SelectField
|
|
label="Workspace"
|
|
description="Tasks created by this watcher land in the selected workspace."
|
|
value={value}
|
|
onChange={onChange}
|
|
placeholder="Select workspace"
|
|
items={workspaces.map((w) => ({ id: w.id, label: w.name }))}
|
|
disabled={disabled}
|
|
/>
|
|
);
|
|
}
|