calvin.erfmann/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-05-21 16:25:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix form not updating correctly

Browse Source
This commit is contained in:
Owen
2026-04-16 21:42:48 -07:00
parent 3645cc5759
commit bd89867ecb
3 changed files with 30 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
messages/en-US.json
View File

@@ -3030,5 +3030,6 @@
"httpDestUpdateFailed": "Failed to update destination", "httpDestUpdateFailed": "Failed to update destination",
"httpDestCreateFailed": "Failed to create destination", "httpDestCreateFailed": "Failed to create destination",
"followRedirects": "Follow Redirects", "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."
} }

32
src/components/alert-rule-editor/AlertRuleFields.tsx
View File

@@ -281,6 +281,7 @@ export function ActionBlock({
control, control,
form, form,
onRemove, onRemove,
onUpdate,
canRemove canRemove
}: { }: {
orgId: string; orgId: string;
@@ -288,10 +289,11 @@ export function ActionBlock({
control: Control<AlertRuleFormValues>; control: Control<AlertRuleFormValues>;
form: UseFormReturn<AlertRuleFormValues>; form: UseFormReturn<AlertRuleFormValues>;
onRemove: () => void; onRemove: () => void;
onUpdate: (val: AlertRuleFormAction) => void;
canRemove: boolean; canRemove: boolean;
}) { }) {
const t = useTranslations(); const t = useTranslations();
const type = form.watch(`actions.${index}.type`); const type = useWatch({ control, name: `actions.${index}.type` });
return ( return (
<div className="rounded-lg border p-4 space-y-3 relative"> <div className="rounded-lg border p-4 space-y-3 relative">
{canRemove && ( {canRemove && (
@@ -316,14 +318,14 @@ export function ActionBlock({
onValueChange={(v) => { onValueChange={(v) => {
const nt = v as AlertRuleFormAction["type"]; const nt = v as AlertRuleFormAction["type"];
if (nt === "notify") { if (nt === "notify") {
form.setValue(`actions.${index}`, { onUpdate({
type: "notify", type: "notify",
userTags: [], userTags: [],
roleTags: [], roleTags: [],
emailTags: [] emailTags: []
}); });
} else { } else {
form.setValue(`actions.${index}`, { onUpdate({
type: "webhook", type: "webhook",
url: "", url: "",
method: "POST", method: "POST",
@@ -418,9 +420,9 @@ function NotifyActionFields({
[orgRoles] [orgRoles]
); );
const userTags = (form.watch(`actions.${index}.userTags`) ?? []) as Tag[]; const userTags = (useWatch({ control, name: `actions.${index}.userTags` }) ?? []) as Tag[];
const roleTags = (form.watch(`actions.${index}.roleTags`) ?? []) as Tag[]; const roleTags = (useWatch({ control, name: `actions.${index}.roleTags` }) ?? []) as Tag[];
const emailTags = (form.watch(`actions.${index}.emailTags`) ?? []) as Tag[]; const emailTags = (useWatch({ control, name: `actions.${index}.emailTags` }) ?? []) as Tag[];
return ( return (
<div className="space-y-3 pt-1"> <div className="space-y-3 pt-1">
@@ -445,7 +447,8 @@ function NotifyActionFields({
: newTags; : newTags;
form.setValue( form.setValue(
`actions.${index}.userTags`, `actions.${index}.userTags`,
next as Tag[] next as Tag[],
{ shouldDirty: true }
); );
}} }}
enableAutocomplete={true} enableAutocomplete={true}
@@ -480,7 +483,8 @@ function NotifyActionFields({
: newTags; : newTags;
form.setValue( form.setValue(
`actions.${index}.roleTags`, `actions.${index}.roleTags`,
next as Tag[] next as Tag[],
{ shouldDirty: true }
); );
}} }}
enableAutocomplete={true} enableAutocomplete={true}
@@ -511,7 +515,8 @@ function NotifyActionFields({
: updater; : updater;
form.setValue( form.setValue(
`actions.${index}.emailTags`, `actions.${index}.emailTags`,
next as Tag[] next as Tag[],
{ shouldDirty: true }
); );
}} }}
activeTagIndex={emailActiveIdx} activeTagIndex={emailActiveIdx}
@@ -786,7 +791,7 @@ function WebhookHeadersField({
}) { }) {
const t = useTranslations(); const t = useTranslations();
const headers = const headers =
form.watch(`actions.${index}.headers` as const) ?? []; (useWatch({ control, name: `actions.${index}.headers` as const }) ?? []);
return ( return (
<div className="space-y-2"> <div className="space-y-2">
<FormLabel>{t("alertingWebhookHeaders")}</FormLabel> <FormLabel>{t("alertingWebhookHeaders")}</FormLabel>
@@ -826,7 +831,8 @@ function WebhookHeadersField({
) ?? []; ) ?? [];
form.setValue( form.setValue(
`actions.${index}.headers`, `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`, [ form.setValue(`actions.${index}.headers`, [
...cur, ...cur,
{ key: "", value: "" } { key: "", value: "" }
]); ], { shouldDirty: true });
}} }}
> >
<Plus className="h-4 w-4 mr-1" /> <Plus className="h-4 w-4 mr-1" />
@@ -1008,4 +1014,4 @@ export function AlertRuleTriggerFields({
)} )}
/> />
); );
} }

11
src/components/alert-rule-editor/AlertRuleGraphEditor.tsx
View File

@@ -316,7 +316,7 @@ export default function AlertRuleGraphEditor({
defaultValues: initialValues ?? defaultFormValues() defaultValues: initialValues ?? defaultFormValues()
}); });
const { fields, append, remove } = useFieldArray({ const { fields, append, remove, update } = useFieldArray({
control: form.control, control: form.control,
name: "actions" name: "actions"
}); });
@@ -687,7 +687,11 @@ export default function AlertRuleGraphEditor({
value: "" value: ""
} }
], ],
secret: "" authType: "none",
bearerToken: "",
basicCredentials: "",
customHeaderName: "",
customHeaderValue: ""
}); });
} }
setSelectedStep( setSelectedStep(
@@ -706,6 +710,9 @@ export default function AlertRuleGraphEditor({
onRemove={() => onRemove={() =>
remove(index) remove(index)
} }
onUpdate={(val) =>
update(index, val)
}
canRemove canRemove
/> />
))} ))}