refactor(web): network connection form UX (part 3) #3349
Merged
dgdavid merged 5 commits intoenhance-network-connection-formfrom Mar 31, 2026
Merged
refactor(web): network connection form UX (part 3) #3349dgdavid merged 5 commits intoenhance-network-connection-formfrom
dgdavid merged 5 commits intoenhance-network-connection-formfrom
Conversation
A form field for entering and managing a list of string values. Supports per-entry validation, duplicate skipping, paste, and keyboard navigation between entries.
…ains Replaces the free-text TextArea fields for IPv4/IPv6 addresses, DNS nameservers, and DNS search domains with ArrayField. Each field validates entries on submit; invalid values are rejected with an inline error.
Validates name (required), IPv4/IPv6 addresses (required when manual,
all valid), gateways (valid if present, mode-aware), DNS servers and
search domains (at least one valid entry when enabled).
Validation logic is extracted into validateConnectionForm and
buildConnection helpers to keep onSubmitAsync readable.
Three related fixes are included:
- ArrayField was showing guidance text ("Select entries to edit…")
instead of the actual error when a field-level error came from
onSubmitAsync. Now the error is shown.
- Re-submission after a validation failure had no effect because
TanStack Form kept canSubmit false once field errors were set. The
form now clears those errors before each attempt
- IPv4 validation now requires standard four-part decimal notation,
rejecting values like "1111" that ipaddr.js would otherwise accept.
The `use` prefix should be reserved for React hooks. Rename to customDns and customDnsSearch.
dgdavid
added a commit
that referenced
this pull request
Apr 1, 2026
This PR continues the network connection form reimplementation, built on top of #3349. It adds edit mode, fixes how the form derives the IP method when editing, and introduces a not-found empty state. ### Edit mode `ConnectionForm` is split into `NewConnectionForm` and `EditConnectionForm`, both delegating to a shared `ConnectionFormContent`. When a route `id` param is present, the form pre-populates from the existing connection: IP mode, addresses, gateways, DNS servers, and search domains are all restored. The connection name field is not shown: it cannot be changed and the name is already visible in the breadcrumb. ### Not-found empty state When the connection id from the route does not match any known connection, `EditConnectionForm` renders a `ConnectionNotFound` empty state page instead of crashing. ### Postponed for follow-up PRs - Auto-generated connection name. - Evaluate if it "Advanced" mode must be shown when config has no method but system already has addresses.
Merged
imobachgs
added a commit
that referenced
this pull request
Apr 14, 2026
Prepare to release version 20. * #3294 * #3295 * #3296 * #3297 * #3298 * #3299 * #3300 * #3301 * #3302 * #3303 * #3304 * #3305 * #3306 * #3307 * #3308 * #3309 * #3310 * #3311 * #3312 * #3313 * #3315 * #3316 * #3317 * #3318 * #3319 * #3320 * #3322 * #3323 * #3325 * #3326 * #3327 * #3329 * #3330 * #3331 * #3333 * #3334 * #3336 * #3338 * #3339 * #3342 * #3343 * #3349 * #3351 * #3352 * #3353 * #3354 * #3356 * #3357 * #3358 * #3359 * #3360 * #3361 * #3362 * #3363 * #3364 * #3365 * #3366 * #3367 * #3368 * #3371 * #3372 * #3373 * #3375 * #3376 * #3378 * #3379 * #3380 * #3381 * #3382 * #3385 * #3386
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This PR continues the network connection form reimplementation, built on top of #3338. It introduces a reusable array input component, wires it into the form for addresses, DNS servers, and DNS search domains, and adds comprehensive client-side validation.
ArrayField component
A new
ArrayFieldcomponent handles list-valued fields. It accepts multiple entries via a text input, , one at a time, and displays them as editable/removable PF/Label. It also supports pasting multiple values at once and the ability to optionally skip duplicated entries. The component is registered inAppFieldalongside previous addedChoiceField(which probably deserves a better name).Addresses, DNS servers, and DNS search domains
All three field types now use
ArrayFieldwith per-entry format validation: IPv4 and IPv6 addresses accept optional CIDR notation, DNS servers accept bare IPv4 or IPv6, and DNS search domains follow RFC 952/1123 label rules.Client-side validation
Validation runs on submission rather than on each keystroke or focus change, so users are not interrupted while filling in the form. All rules live in a single
validateConnectionFormhelper:IPv4 validation was also tightened to require standard four-part decimal notation, rejecting values like
1111that the underlying library would otherwise accept.A secondary fix ensures re-submission works after a failed attempt: TanStack Form keeps
canSubmitfalse once field errors are set byonSubmitAsync, since there are no per-field validators to clear them. The form now resets field errormaps before each attempt.
Two example of the form in action. The form has several other states worth exploring it by yourself. The easiest way is to check out the branch and play with it.
There is known, small UI caveat: repeated error icon in Name field. Something that will be addressed in subsequent PR, after all other important stuff like edition mode is re-implemented.
What is deferred to follow-up PRs
Notes for reviewers
Changelog entry postponed for the final PR from the feature branch against master.