agama-project / agama / 23733824973

push

github

refactor(web): network connection form UX and composition improvements (part 2)    (#3338)

**TL;DR:** Refine connection form for cleaner device and IP settings
interface, with clearer option labels and a more logical field order.

---

This PR continues the reimplementation of the network connection form,
built on top of the TanStack Form foundation introduced in part 1. It
focuses on two areas: refining the IP settings and device binding UX,
and improving the form architecture to align with [TanStack Form's
composition](https://tanstack.com/form/latest/docs/framework/react/guides/form-composition)
model.

## What is included

### IP settings redesign

The IP settings block is extracted into a standalone `IpSettings`
component, rendered once per protocol. The _settings_ selector offers
three options: _Automatic_, _Manual_, and _Advanced_. _Manual_ and
_Advanced_ reveal address and gateway fields while _Automatic_ keeps the
form clean. Option descriptions tries to use no user-targeting language
as well as no implementation-detail jargon.

### Device binding redesign

The interface binding section is extracted into `BindingModeSelector`
and `DeviceSelector` components. Options use plain language (_Any_,
_Chosen by name_, _Chosen by MAC_) rather than technical terms as in the
current (to be drop) `BindingSettingsForm`. DeviceSelector's label is
visually hidden since the binding selector already provides visual
context.

### TanStack Form composition

These components were first implemented making use of useFormContext(),
which is deliberately untyped since it is designed for generic leaf
field components where the form type is not known at definition time.
But later rewritten to use `withForm()` instead, since it gives each
component a typed form instance, removes all "as any" casts, and catches
field name errors at compile time.

## What is deferred to follow-up PRs

Same as part 1, still pending:

- Field validation (client-side).
- Enhanced multi-val... (continued)

3340 of 5311 branches covered (62.89%)

Branch coverage included in aggregate %.

105 of 106 new or added lines in 7 files covered. (99.06%)

12956 of 17068 relevant lines covered (75.91%)

76.68 hits per line