fix(webhooks): surface form validation errors and reset add-webhook drawer state#1736
fix(webhooks): surface form validation errors and reset add-webhook drawer state#1736Shreyag02 wants to merge 2 commits into
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)
📝 WalkthroughSummary by CodeRabbit
WalkthroughAdds inline validation error rendering to ChangesCustom field error display
Webhook form fixes
Estimated code review effort: 2 (Simple) | ~12 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 28849790262Warning Build has drifted: This PR's base is out of sync with its target branch, so coverage data may include unrelated changes. Coverage remained the same at 44.865%Details
Uncovered ChangesNo uncovered changes found. Coverage RegressionsNo coverage regressions found. Coverage Stats
💛 - Coveralls |
| )} | ||
| </FormControl> | ||
| {errorMessage ? ( | ||
| <Text size="small" className={styles.errorMessage}> |
There was a problem hiding this comment.
The css is not needed. <Text variant="danger"> does the same
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