Skip to content

React 19 Upgrade#614

Open
jwinters01 wants to merge 25 commits intoargoproj:masterfrom
jwinters01:react-19-upgrade-clean
Open

React 19 Upgrade#614
jwinters01 wants to merge 25 commits intoargoproj:masterfrom
jwinters01:react-19-upgrade-clean

Conversation

@jwinters01
Copy link
Copy Markdown
Contributor

@jwinters01 jwinters01 commented Apr 1, 2026

Upgrades Repo to React-19

Notable changes

There's a lot of changes in this PR, some of them are just

react-form Compatibility Layer (src/components/form/compat.tsx) — New file

The react-form package (which used class-based internals incompatible with React 19) was removed and replaced with a custom hooks-based implementation that preserves the same public API surface.

Implements the following:

  • component with defaultValues, validateError, onSubmit, and getApi callbacks — matching the old react-form API
  • FormApi object with values, errors, touched, setValue, setError, submitForm, getFormState, setAllValues, setFormState
  • FormField HOC (withFieldApi) that connects any component to the form via React context
  • Built-in field components: Text, TextArea, Checkbox
  • Supports both context-based and prop-based (formApi prop) form API injection
  • Uses Proxy-like getter/setter pattern on the FormApi object so that mutations to api.values, api.errors, api.touched trigger re-renders (important for callers that mutate rather than call setters)
  • Exported both as ReactForm.* namespace and as named exports for drop-in compatibility

Autocomplete Re-implementation (src/components/autocomplete/autocomplete.tsx)

Replaced the deprecated react-autocomplete library with a custom implementation built on downshift's useCombobox hook:

  • Full re-write from class-based ReactAutocomplete to a functional hooks-based component
  • Menu positioning logic (including flip-to-top when near viewport edge) is now owned directly in the component rather than monkey-patched onto the old library's class instance
  • Listens to both scroll and resize events for dynamic repositioning
  • Preserves the public AutocompleteProps API (filterSuggestions, autoHighlight, renderItem, renderInput, autoCompleteRef, onSelect, onChange, etc.)

Exports (src/components/index.ts)

All compatibility layer types and components are re-exported from the package's main entry point, allowing argo-cd to import from argo-ui without changes.

Enzyme Sunset

Enzyme is no longer supported for React 19, it needed to be removed.

Other Changes

  • Package dependencies updated (React 19, Storybook upgrades, downshift added, react-autocomplete/react-form removed)
  • Test files migrated from .spec.tsx → .test.tsx convention
  • Minor React 19 compatibility fixes across various components (ref handling, prop changes)

jwinters01 and others added 24 commits April 1, 2026 08:43
Signed-off-by: Jonathan Winters <wintersjonathan0@gmail.com>
Signed-off-by: Jonathan Winters <wintersjonathan0@gmail.com>
Signed-off-by: Jonathan Winters <wintersjonathan0@gmail.com>
Signed-off-by: Jonathan Winters <wintersjonathan0@gmail.com>
Signed-off-by: Jonathan Winters <wintersjonathan0@gmail.com>
Signed-off-by: Jonathan Winters <wintersjonathan0@gmail.com>
Signed-off-by: Jonathan Winters <wintersjonathan0@gmail.com>
react-form compatibility changes

Signed-off-by: Jonathan Winters <wintersjonathan0@gmail.com>
Signed-off-by: Jonathan Winters <wintersjonathan0@gmail.com>
Signed-off-by: Jonathan Winters <wintersjonathan0@gmail.com>
- Add local state for input value to fix typing lag in React 19 (previously read directly from props)
- Sync local state from props.value for external updates
- Fix menu positioning to use viewport-relative coords (position:fixed) instead of document coords
- Remove scroll offset from menu top/left calculations
- Add overflowY:auto to menu for scrollable long lists
- Manually merge menuRef with downshift's ref to avoid ref callback conflicts

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Signed-off-by: Jonathan Winters <wintersjonathan0@gmail.com>
Signed-off-by: Jonathan Winters <wintersjonathan0@gmail.com>
Signed-off-by: Jonathan Winters <wintersjonathan0@gmail.com>
Signed-off-by: Jonathan Winters <wintersjonathan0@gmail.com>
Signed-off-by: Jonathan Winters <wintersjonathan0@gmail.com>
Signed-off-by: Jonathan Winters <wintersjonathan0@gmail.com>
Signed-off-by: Jonathan Winters <wintersjonathan0@gmail.com>
Signed-off-by: Jonathan Winters <wintersjonathan0@gmail.com>
Signed-off-by: Jonathan Winters <wintersjonathan0@gmail.com>
add tests for form compatibility layer and autocomplete

Signed-off-by: Jonathan Winters <wintersjonathan0@gmail.com>
Signed-off-by: Jonathan Winters <wintersjonathan0@gmail.com>
Signed-off-by: Jonathan Winters <wintersjonathan0@gmail.com>
Signed-off-by: Jonathan Winters <wintersjonathan0@gmail.com>
Signed-off-by: Jonathan Winters <wintersjonathan0@gmail.com>
@jwinters01 jwinters01 changed the title React 19 upgrade clean React 19 Upgrade Apr 1, 2026
@jwinters01 jwinters01 marked this pull request as ready for review April 1, 2026 16:36
Signed-off-by: Jonathan Winters <wintersjonathan0@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant