re-uploading work
This commit is contained in:
439
web/src/components/forms/TriggerForm.tsx
Normal file
439
web/src/components/forms/TriggerForm.tsx
Normal file
@@ -0,0 +1,439 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import { usePacks } from "@/hooks/usePacks";
|
||||
import { useCreateTrigger, useUpdateTrigger } from "@/hooks/useTriggers";
|
||||
import {
|
||||
labelToRef,
|
||||
extractLocalRef,
|
||||
combinePackLocalRef,
|
||||
} from "@/lib/format-utils";
|
||||
import SchemaBuilder from "@/components/common/SchemaBuilder";
|
||||
import { WebhooksService } from "@/api";
|
||||
|
||||
interface TriggerFormProps {
|
||||
initialData?: any;
|
||||
isEditing?: boolean;
|
||||
}
|
||||
|
||||
export default function TriggerForm({
|
||||
initialData,
|
||||
isEditing = false,
|
||||
}: TriggerFormProps) {
|
||||
const navigate = useNavigate();
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
// Form fields
|
||||
const [packId, setPackId] = useState<number>(0);
|
||||
const [localRef, setLocalRef] = useState("");
|
||||
const [label, setLabel] = useState("");
|
||||
const [description, setDescription] = useState("");
|
||||
const [webhookEnabled, setWebhookEnabled] = useState(false);
|
||||
const [enabled, setEnabled] = useState(true);
|
||||
const [paramSchema, setParamSchema] = useState<Record<string, any>>({
|
||||
type: "object",
|
||||
properties: {},
|
||||
required: [],
|
||||
});
|
||||
const [outSchema, setOutSchema] = useState<Record<string, any>>({
|
||||
type: "object",
|
||||
properties: {},
|
||||
required: [],
|
||||
});
|
||||
const [errors, setErrors] = useState<Record<string, string>>({});
|
||||
|
||||
// Fetch packs
|
||||
const { data: packsData } = usePacks({ page: 1, pageSize: 100 });
|
||||
const packs = packsData?.data || [];
|
||||
const selectedPack = packs.find((p: any) => p.id === packId);
|
||||
|
||||
// Mutations
|
||||
const createTrigger = useCreateTrigger();
|
||||
const updateTrigger = useUpdateTrigger();
|
||||
|
||||
// Initialize form with existing data
|
||||
useEffect(() => {
|
||||
if (initialData) {
|
||||
setLabel(initialData.label || "");
|
||||
setDescription(initialData.description || "");
|
||||
setWebhookEnabled(initialData.webhook_enabled || false);
|
||||
setEnabled(initialData.enabled ?? true);
|
||||
setParamSchema(
|
||||
initialData.param_schema || {
|
||||
type: "object",
|
||||
properties: {},
|
||||
required: [],
|
||||
},
|
||||
);
|
||||
setOutSchema(
|
||||
initialData.out_schema || {
|
||||
type: "object",
|
||||
properties: {},
|
||||
required: [],
|
||||
},
|
||||
);
|
||||
|
||||
if (isEditing) {
|
||||
// Find pack by pack_ref
|
||||
const pack = packs.find((p: any) => p.ref === initialData.pack_ref);
|
||||
if (pack) {
|
||||
setPackId(pack.id);
|
||||
}
|
||||
// Extract local ref from full ref
|
||||
setLocalRef(extractLocalRef(initialData.ref, initialData.pack_ref));
|
||||
}
|
||||
}
|
||||
}, [initialData, packs, isEditing]);
|
||||
|
||||
const validateForm = (): boolean => {
|
||||
const newErrors: Record<string, string> = {};
|
||||
|
||||
if (!packId) {
|
||||
newErrors.pack = "Pack is required";
|
||||
}
|
||||
|
||||
if (!label.trim()) {
|
||||
newErrors.label = "Label is required";
|
||||
}
|
||||
|
||||
if (!localRef.trim()) {
|
||||
newErrors.ref = "Reference is required";
|
||||
} else if (!/^[a-z0-9_]+$/.test(localRef)) {
|
||||
newErrors.ref =
|
||||
"Reference must contain only lowercase letters, numbers, and underscores";
|
||||
}
|
||||
|
||||
setErrors(newErrors);
|
||||
return Object.keys(newErrors).length === 0;
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!validateForm()) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const selectedPackData = packs.find((p: any) => p.id === packId);
|
||||
if (!selectedPackData) {
|
||||
throw new Error("Selected pack not found");
|
||||
}
|
||||
|
||||
const fullRef = combinePackLocalRef(selectedPackData.ref, localRef);
|
||||
|
||||
const formData = {
|
||||
pack_ref: selectedPackData.ref,
|
||||
ref: fullRef,
|
||||
label: label.trim(),
|
||||
description: description.trim() || undefined,
|
||||
enabled,
|
||||
param_schema:
|
||||
Object.keys(paramSchema.properties || {}).length > 0
|
||||
? paramSchema
|
||||
: undefined,
|
||||
out_schema:
|
||||
Object.keys(outSchema.properties || {}).length > 0
|
||||
? outSchema
|
||||
: undefined,
|
||||
};
|
||||
|
||||
if (isEditing && initialData?.ref) {
|
||||
await updateTrigger.mutateAsync({
|
||||
ref: initialData.ref,
|
||||
data: formData,
|
||||
});
|
||||
|
||||
// Handle webhook enable/disable separately for updates
|
||||
if (webhookEnabled !== initialData?.webhook_enabled) {
|
||||
try {
|
||||
if (webhookEnabled) {
|
||||
await WebhooksService.enableWebhook({ ref: initialData.ref });
|
||||
} else {
|
||||
await WebhooksService.disableWebhook({ ref: initialData.ref });
|
||||
}
|
||||
// Invalidate trigger cache to refresh UI with updated webhook status
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["triggers", initialData.ref],
|
||||
});
|
||||
queryClient.invalidateQueries({ queryKey: ["triggers"] });
|
||||
} catch (webhookError) {
|
||||
console.error("Failed to update webhook status:", webhookError);
|
||||
// Continue anyway - user can update it manually
|
||||
}
|
||||
}
|
||||
|
||||
// Navigate back to trigger detail page
|
||||
navigate(`/triggers/${encodeURIComponent(initialData.ref)}`);
|
||||
return;
|
||||
} else {
|
||||
const response = await createTrigger.mutateAsync(formData);
|
||||
const newTrigger = response?.data;
|
||||
if (newTrigger?.ref) {
|
||||
// If webhook is enabled, enable it after trigger creation
|
||||
if (webhookEnabled) {
|
||||
try {
|
||||
await WebhooksService.enableWebhook({ ref: newTrigger.ref });
|
||||
} catch (webhookError) {
|
||||
console.error("Failed to enable webhook:", webhookError);
|
||||
// Continue anyway - user can enable it manually
|
||||
}
|
||||
// Invalidate trigger cache to refresh UI with webhook data
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["triggers", newTrigger.ref],
|
||||
});
|
||||
queryClient.invalidateQueries({ queryKey: ["triggers"] });
|
||||
}
|
||||
navigate(`/triggers/${encodeURIComponent(newTrigger.ref)}`);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
navigate("/triggers");
|
||||
} catch (error: any) {
|
||||
console.error("Error submitting trigger:", error);
|
||||
setErrors({
|
||||
submit:
|
||||
error.response?.data?.message ||
|
||||
error.message ||
|
||||
"Failed to save trigger",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
if (isEditing && initialData?.ref) {
|
||||
navigate(`/triggers/${encodeURIComponent(initialData.ref)}`);
|
||||
} else {
|
||||
navigate("/triggers");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
{errors.submit && (
|
||||
<div className="bg-red-50 border border-red-200 rounded-lg p-4">
|
||||
<p className="text-sm text-red-600">{errors.submit}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Basic Information */}
|
||||
<div className="bg-white rounded-lg shadow p-6 space-y-4">
|
||||
<h3 className="text-lg font-semibold text-gray-900">
|
||||
Basic Information
|
||||
</h3>
|
||||
|
||||
{/* Pack Selection */}
|
||||
<div>
|
||||
<label
|
||||
htmlFor="pack"
|
||||
className="block text-sm font-medium text-gray-700 mb-1"
|
||||
>
|
||||
Pack <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<select
|
||||
id="pack"
|
||||
value={packId}
|
||||
onChange={(e) => setPackId(Number(e.target.value))}
|
||||
disabled={isEditing}
|
||||
className={`w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 ${
|
||||
errors.pack ? "border-red-500" : "border-gray-300"
|
||||
} ${isEditing ? "bg-gray-100 cursor-not-allowed" : ""}`}
|
||||
>
|
||||
<option value={0}>Select a pack...</option>
|
||||
{packs.map((pack: any) => (
|
||||
<option key={pack.id} value={pack.id}>
|
||||
{pack.label} ({pack.version})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{errors.pack && (
|
||||
<p className="mt-1 text-sm text-red-600">{errors.pack}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Label */}
|
||||
<div>
|
||||
<label
|
||||
htmlFor="label"
|
||||
className="block text-sm font-medium text-gray-700 mb-1"
|
||||
>
|
||||
Label <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="label"
|
||||
value={label}
|
||||
onChange={(e) => setLabel(e.target.value)}
|
||||
onBlur={() => {
|
||||
// Auto-populate localRef from label if localRef is empty and not editing
|
||||
if (!isEditing && !localRef.trim() && label.trim()) {
|
||||
setLocalRef(labelToRef(label));
|
||||
}
|
||||
}}
|
||||
placeholder="e.g., Webhook Received"
|
||||
className={`w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 ${
|
||||
errors.label ? "border-red-500" : "border-gray-300"
|
||||
}`}
|
||||
/>
|
||||
{errors.label && (
|
||||
<p className="mt-1 text-sm text-red-600">{errors.label}</p>
|
||||
)}
|
||||
<p className="mt-1 text-xs text-gray-500">
|
||||
Human-readable name for display
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Reference with Pack Prefix */}
|
||||
<div>
|
||||
<label
|
||||
htmlFor="ref"
|
||||
className="block text-sm font-medium text-gray-700 mb-1"
|
||||
>
|
||||
Reference <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<div className="input-with-prefix">
|
||||
<span className={`prefix ${errors.ref ? "error" : ""}`}>
|
||||
{selectedPack?.ref || "pack"}.
|
||||
</span>
|
||||
<input
|
||||
type="text"
|
||||
id="ref"
|
||||
value={localRef}
|
||||
onChange={(e) => setLocalRef(e.target.value)}
|
||||
placeholder="e.g., webhook_received"
|
||||
disabled={isEditing}
|
||||
className={errors.ref ? "error" : ""}
|
||||
/>
|
||||
</div>
|
||||
{errors.ref && (
|
||||
<p className="mt-1 text-sm text-red-600">{errors.ref}</p>
|
||||
)}
|
||||
<p className="mt-1 text-xs text-gray-500">
|
||||
Local identifier within the pack. Auto-populated from label.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div>
|
||||
<label
|
||||
htmlFor="description"
|
||||
className="block text-sm font-medium text-gray-700 mb-1"
|
||||
>
|
||||
Description
|
||||
</label>
|
||||
<textarea
|
||||
id="description"
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
rows={3}
|
||||
placeholder="Describe what this trigger does..."
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Schema Configuration */}
|
||||
<div className="bg-white rounded-lg shadow p-6 space-y-4">
|
||||
<h3 className="text-lg font-semibold text-gray-900">
|
||||
Schema Configuration
|
||||
</h3>
|
||||
|
||||
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
|
||||
<p className="text-sm text-blue-700">
|
||||
Define schemas to validate event parameters and outputs. Leave empty
|
||||
for flexible schemas.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Parameter Schema */}
|
||||
<SchemaBuilder
|
||||
label="Parameter Schema"
|
||||
value={paramSchema}
|
||||
onChange={setParamSchema}
|
||||
error={errors.paramSchema}
|
||||
/>
|
||||
<p className="text-xs text-gray-500 -mt-2">
|
||||
Define the structure of event parameters that will be passed to this
|
||||
trigger
|
||||
</p>
|
||||
|
||||
{/* Output Schema */}
|
||||
<SchemaBuilder
|
||||
label="Output Schema"
|
||||
value={outSchema}
|
||||
onChange={setOutSchema}
|
||||
error={errors.outSchema}
|
||||
/>
|
||||
<p className="text-xs text-gray-500 -mt-2">
|
||||
Define the structure of event data that will be produced by this
|
||||
trigger
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Settings */}
|
||||
<div className="bg-white rounded-lg shadow p-6 space-y-4">
|
||||
<h3 className="text-lg font-semibold text-gray-900">Settings</h3>
|
||||
|
||||
{/* Webhook Enabled */}
|
||||
<div className="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="webhookEnabled"
|
||||
checked={webhookEnabled}
|
||||
onChange={(e) => setWebhookEnabled(e.target.checked)}
|
||||
className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
|
||||
/>
|
||||
<label
|
||||
htmlFor="webhookEnabled"
|
||||
className="ml-2 block text-sm text-gray-900"
|
||||
>
|
||||
Enable Webhook
|
||||
</label>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 ml-6">
|
||||
Allow this trigger to be activated via HTTP webhook
|
||||
</p>
|
||||
|
||||
{/* Enabled */}
|
||||
<div className="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="enabled"
|
||||
checked={enabled}
|
||||
onChange={(e) => setEnabled(e.target.checked)}
|
||||
className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
|
||||
/>
|
||||
<label htmlFor="enabled" className="ml-2 block text-sm text-gray-900">
|
||||
Enabled
|
||||
</label>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 ml-6">
|
||||
Enable or disable this trigger
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Form Actions */}
|
||||
<div className="flex justify-end space-x-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleCancel}
|
||||
className="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={createTrigger.isPending || updateTrigger.isPending}
|
||||
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{createTrigger.isPending || updateTrigger.isPending
|
||||
? "Saving..."
|
||||
: isEditing
|
||||
? "Update Trigger"
|
||||
: "Create Trigger"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user