• Home
  • Features
  • Pricing
  • Docs
  • Announcements
  • Sign In

agama-project / agama / 23733824973
77%
master: 77%

Build:
Build:
LAST BUILD BRANCH: network-tanstack-form-part6
DEFAULT BRANCH: master
Ran 30 Mar 2026 07:52AM UTC
Jobs 1
Files 569
Run time 1min
Badge
Embed ▾
README BADGES
x

If you need to use a raster PNG badge, change the '.svg' to '.png' in the link

Markdown

Textile

RDoc

HTML

Rst

30 Mar 2026 07:49AM UTC coverage: 72.818% (+0.2%) from 72.64%
23733824973

push

github

web-flow
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%)

1 existing line in 1 file now uncovered.

12956 of 17068 relevant lines covered (75.91%)

76.68 hits per line

New Missed Lines in Diff

Lines Coverage ∆ File
1
96.88
-0.45% web/src/components/network/ConnectionForm.tsx

Uncovered Existing Lines

Lines Coverage ∆ File
1
98.48
0.66% web/web/src/components/network/ConnectionForm.tsx
Subprojects
ID Flag name Job ID Ran Files Coverage
1 web 23733824973.1 30 Mar 2026 07:52AM UTC 569
72.82
GitHub Action Run
Source Files on build 23733824973
  • Tree
  • List 569
  • Changed 2
  • Source Changed 1
  • Coverage Changed 2
Coverage ∆ File Lines Relevant Covered Missed Hits/Line Branch Hits Branch Misses
  • Back to Repo
  • Github Actions Build #23733824973
  • a5007c9a on github
  • Prev Build on enhance-network-connection-form (#23440909297)
  • Next Build on enhance-network-connection-form (#23785944184)
  • Delete
STATUS · Troubleshooting · Open an Issue · Sales · Support · CAREERS · ENTERPRISE · START FREE · SCHEDULE DEMO
ANNOUNCEMENTS · TWITTER · TOS & SLA · Supported CI Services · What's a CI service? · Automated Testing

© 2026 Coveralls, Inc