diff --git a/messages/en-US.json b/messages/en-US.json index 9dd4f1262..3daef96e4 100644 --- a/messages/en-US.json +++ b/messages/en-US.json @@ -3030,5 +3030,6 @@ "httpDestUpdateFailed": "Failed to update destination", "httpDestCreateFailed": "Failed to create destination", "followRedirects": "Follow Redirects", - "followRedirectsDescription": "Automatically follow HTTP redirects for requests." + "followRedirectsDescription": "Automatically follow HTTP redirects for requests.", + "alertingErrorWebhookUrl": "Please enter a valid URL for the webhook." } diff --git a/src/components/alert-rule-editor/AlertRuleFields.tsx b/src/components/alert-rule-editor/AlertRuleFields.tsx index 8af7e780c..2037d50a8 100644 --- a/src/components/alert-rule-editor/AlertRuleFields.tsx +++ b/src/components/alert-rule-editor/AlertRuleFields.tsx @@ -281,6 +281,7 @@ export function ActionBlock({ control, form, onRemove, + onUpdate, canRemove }: { orgId: string; @@ -288,10 +289,11 @@ export function ActionBlock({ control: Control; form: UseFormReturn; onRemove: () => void; + onUpdate: (val: AlertRuleFormAction) => void; canRemove: boolean; }) { const t = useTranslations(); - const type = form.watch(`actions.${index}.type`); + const type = useWatch({ control, name: `actions.${index}.type` }); return (
{canRemove && ( @@ -316,14 +318,14 @@ export function ActionBlock({ onValueChange={(v) => { const nt = v as AlertRuleFormAction["type"]; if (nt === "notify") { - form.setValue(`actions.${index}`, { + onUpdate({ type: "notify", userTags: [], roleTags: [], emailTags: [] }); } else { - form.setValue(`actions.${index}`, { + onUpdate({ type: "webhook", url: "", method: "POST", @@ -418,9 +420,9 @@ function NotifyActionFields({ [orgRoles] ); - const userTags = (form.watch(`actions.${index}.userTags`) ?? []) as Tag[]; - const roleTags = (form.watch(`actions.${index}.roleTags`) ?? []) as Tag[]; - const emailTags = (form.watch(`actions.${index}.emailTags`) ?? []) as Tag[]; + const userTags = (useWatch({ control, name: `actions.${index}.userTags` }) ?? []) as Tag[]; + const roleTags = (useWatch({ control, name: `actions.${index}.roleTags` }) ?? []) as Tag[]; + const emailTags = (useWatch({ control, name: `actions.${index}.emailTags` }) ?? []) as Tag[]; return (
@@ -445,7 +447,8 @@ function NotifyActionFields({ : newTags; form.setValue( `actions.${index}.userTags`, - next as Tag[] + next as Tag[], + { shouldDirty: true } ); }} enableAutocomplete={true} @@ -480,7 +483,8 @@ function NotifyActionFields({ : newTags; form.setValue( `actions.${index}.roleTags`, - next as Tag[] + next as Tag[], + { shouldDirty: true } ); }} enableAutocomplete={true} @@ -511,7 +515,8 @@ function NotifyActionFields({ : updater; form.setValue( `actions.${index}.emailTags`, - next as Tag[] + next as Tag[], + { shouldDirty: true } ); }} activeTagIndex={emailActiveIdx} @@ -786,7 +791,7 @@ function WebhookHeadersField({ }) { const t = useTranslations(); const headers = - form.watch(`actions.${index}.headers` as const) ?? []; + (useWatch({ control, name: `actions.${index}.headers` as const }) ?? []); return (
{t("alertingWebhookHeaders")} @@ -826,7 +831,8 @@ function WebhookHeadersField({ ) ?? []; form.setValue( `actions.${index}.headers`, - cur.filter((__, i) => i !== hi) + cur.filter((__, i) => i !== hi), + { shouldDirty: true } ); }} > @@ -844,7 +850,7 @@ function WebhookHeadersField({ form.setValue(`actions.${index}.headers`, [ ...cur, { key: "", value: "" } - ]); + ], { shouldDirty: true }); }} > @@ -1008,4 +1014,4 @@ export function AlertRuleTriggerFields({ )} /> ); -} \ No newline at end of file +} diff --git a/src/components/alert-rule-editor/AlertRuleGraphEditor.tsx b/src/components/alert-rule-editor/AlertRuleGraphEditor.tsx index 5dcdb7cf2..e5ccf469b 100644 --- a/src/components/alert-rule-editor/AlertRuleGraphEditor.tsx +++ b/src/components/alert-rule-editor/AlertRuleGraphEditor.tsx @@ -316,7 +316,7 @@ export default function AlertRuleGraphEditor({ defaultValues: initialValues ?? defaultFormValues() }); - const { fields, append, remove } = useFieldArray({ + const { fields, append, remove, update } = useFieldArray({ control: form.control, name: "actions" }); @@ -687,7 +687,11 @@ export default function AlertRuleGraphEditor({ value: "" } ], - secret: "" + authType: "none", + bearerToken: "", + basicCredentials: "", + customHeaderName: "", + customHeaderValue: "" }); } setSelectedStep( @@ -706,6 +710,9 @@ export default function AlertRuleGraphEditor({ onRemove={() => remove(index) } + onUpdate={(val) => + update(index, val) + } canRemove /> ))}