ref(forms): Convert BooleanField from class to functional component#106493
ref(forms): Convert BooleanField from class to functional component#106493
Conversation
Refactors BooleanField from a class component to a functional component to align with modern React patterns and Sentry's frontend guidelines (no new class components). Changes: - Converted class component to functional component - Removed Component import and class syntax - Made event parameter optional in handleChange to match OnEvent type - Simplified event type handling - Removed redundant coerceValue helper (inlined logic) - Maintained all existing functionality and behavior
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
Bugbot Autofix is OFF. To automatically fix reported issues with Cloud Agents, enable Autofix in the Cursor dashboard.
shashjar
left a comment
There was a problem hiding this comment.
looks good, left a couple minor notes abt testing + types
| expect(checkbox).not.toBeChecked(); | ||
|
|
||
| await userEvent.click(checkbox); | ||
| expect(onChange).toHaveBeenCalledWith(true, expect.anything()); |
There was a problem hiding this comment.
should we expect the checkbox to be checked here as well?
There was a problem hiding this comment.
I think it always functions as a controlled input, so we'd have to wire up a Model to listen to the onChange, which would drive the new rendered value.
This test, as is, is just mocking it at that point. Claude did it.
| <BooleanField name="fieldName" value onChange={onChange} confirm={confirm} /> | ||
| ); | ||
|
|
||
| // Clicking to disable (false state) - no confirm message for false |
There was a problem hiding this comment.
should there be a test where the confirm message actually gets displayed?
There was a problem hiding this comment.
That's more of a test for FormField imo, and again controlled field.
Summary
Refactors
BooleanFieldfrom a class component to a functional component to align with modern React patterns and Sentry's frontend guidelines (no new class components).This component was identified as a stateless class component (no internal state management), making it an ideal candidate for conversion to a functional component.
Changes
Componentimport and class syntaxhandleChangeto matchOnEventtype signatureReact.ChangeEvent|React.FormEvent)coerceValuehelper method (inlined logic)Test plan
static/app/components/forms/fields/accessibility.spec.tsx)Related to https://github.com/getsentry/frontend-tsc/issues/42