fix(webhooks): surface form validation errors and reset add-webhook drawer state#1736
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughSummary by CodeRabbit
WalkthroughAdds inline validation error display to CustomFieldName using react-hook-form's useFormState. Updates webhook create form with explicit default values, corrected description validation message, form reset and drawer close on success, and error toast on missing webhook response. Fixes url validation message in webhook update form. ChangesCustom Field Error Display
Webhook Form Fixes
Estimated code review effort: 2 (Simple) | ~10 minutes Suggested reviewers: 🚥 Pre-merge checks | ✅ 2✅ Passed checks (2 passed)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (2)
web/sdk/admin/views/webhooks/webhooks/create/index.tsx (1)
49-71: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueExtract shared default values to avoid duplication.
The
defaultValuesobject passed touseForm(Lines 51-56) and the object passed tomethods.reset(Lines 63-68) are identical literals. Extracting a shared constant avoids drift if a field is added/renamed later.♻️ Proposed refactor
+const DEFAULT_WEBHOOK_VALUES: NewWebhook = { + url: "", + description: "", + state: false, + subscribed_events: [], +}; + export default function CreateWebhooks({ open = false, onClose: onCloseProp }: CreateWebhooksProps = {}) { ... const methods = useForm<NewWebhook>({ resolver: zodResolver(NewWebookSchema), - defaultValues: { - url: "", - description: "", - state: false, - subscribed_events: [], - }, + defaultValues: DEFAULT_WEBHOOK_VALUES, }); useEffect(() => { if (open) { - methods.reset({ - url: "", - description: "", - state: false, - subscribed_events: [], - }); + methods.reset(DEFAULT_WEBHOOK_VALUES); } }, [open, methods.reset]);web/sdk/admin/components/CustomField.tsx (1)
49-50: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick winFragile indexing for nested field names.
errors?.[name]only works because current usages (url,description,subscribed_events,state) are flat field names. RHF'serrorsobject mirrors nested/array field shapes, so a dotted name likeuser.addresswould resolve toundefinedhere even when an error exists (confirmed via RHF's own errors-object nesting behavior). SinceCustomFieldNameProps.nameis typed as a genericstringfor reuse, this is a latent trap for future nested usage.
getFieldState(name)is purpose-built for nested-safe field state retrieval and can be obtained from the sameuseFormStatesubscription.♻️ Suggested fix
- const { errors } = useFormState({ control, name }); - const errorMessage = errors?.[name]?.message as string | undefined; + const { errors } = useFormState({ control, name }); + const errorMessage = get(errors, name)?.message as string | undefined;(or use
useFormState({ control, name }).errorscombined with RHF'sgetutility /getFieldState, which is explicitly documented for safely retrieving nested field state.)
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 6684ed03-3065-4181-a91e-60030dcc2cc6
📒 Files selected for processing (4)
web/sdk/admin/components/CustomField.tsxweb/sdk/admin/components/custom-field.module.cssweb/sdk/admin/views/webhooks/webhooks/create/index.tsxweb/sdk/admin/views/webhooks/webhooks/update/index.tsx
Coverage Report for CI Build 28860835573Warning Build has drifted: This PR's base is out of sync with its target branch, so coverage data may include unrelated changes. Coverage increased (+0.01%) to 44.879%Details
Uncovered ChangesNo uncovered changes found. Coverage Regressions11 previously-covered lines in 1 file lost coverage.
Coverage Stats
💛 - Coveralls |
3 participants
Summary
Fixes several issues in the Add Webhook flow.
The originally reported bug — missing input field borders — was already fixed; while verifying, we found the "Add Webhook" form silently failed to submit, retained stale state on reopen, and could dead-end on certain responses.
This PR addresses those.
Changes
CustomFieldso failed submissions show why (previously invisible).defaultValuesto avoid the controlled/uncontrolled input warning.min(3)rule) in both create and update.Technical Details
CustomFieldonly rendered Radix's native validity matchers (valueMissing,typeMismatch), which never fire for these constraint-less inputs. Validation is driven entirely by zod/react-hook-form, whose errors live informState.errorsand were never displayed — so an invalid URL or short description blockedhandleSubmitwith no feedback. Now usesuseFormState({ control, name })to rendererrors[name].messageinline.open), so the form was never reset between uses. Reset is now triggered only after a successful submission via a baremethods.reset()(which falls back to the configureddefaultValues), rather than on open — this keeps a clean form for the next creation without discarding data if the user accidentally closes the drawer mid-entry. TheCustomFieldfix also benefits the update drawer since it's shared.custom-field.module.css) rather than inline styles, matching the existingPageHeaderconvention.Test Plan
SQL Safety (if your PR touches
*_repository.goorgoqu.*)N/A