agama-project / agama / 24153777357

78%

master: 77%

Build Type

push

github

Committed by web-flow

Commit Message

refactor(web): network connection form UX (part 7) (#3363)

This is the final PR of series of changes for reimplementing the network
connection form using [TanStack Form](https://tanstack.com/form/). Built
on top of #3353, it removes the old IP settings form and its
dependencies, completes the field component set, improves the name
auto-sync approach, and fixes a validation gap in advanced mode.

### Removal of IpSettingsForm

`IpSettingsForm` and its supporting components (`AddressesDataList`,
`DnsDataList`, `DnsSearchDataList`, `IpAddressInput`, `IpPrefixInput`,
and their tests) are deleted. The new `ConnectionForm` based on TanStack
Form fully replaces them.

### Bug fix: address validation in advanced mode

Addresses are optional in advanced mode, but if entered they must still
be valid. Previously only manual mode validated them, so invalid entries
could silently reach the server. The fix ensures to also validate
entries when they are present in advanced mode, even though none are
required.

### `generateConnectionName` as a pure function

`useConnectionName` was a React hook that had no real React dependency:
it computed a name from its arguments and returned a string. It has been
replaced by `generateConnectionName`, a plain function in
`src/utils/network.ts` that is easier to test and works anywhere without
a component context.

### Name auto-sync via form-level listeners

The previous approach used `useStore` to watch binding fields and a
`useEffect` to write the derived name back. Both are replaced by
TanStack Form's own [`listeners`
API](https://tanstack.com/form/latest/docs/framework/react/guides/listeners)),
which is the idiomatic way to handle field side effects in this library.

The listener fires on mount and on every change and, as in previous
approach, it skips the update when the name field is already dirty,
[using `isDirty` rather than
`isTouched`](https://tanstack.com/form/latest/docs/framework/react/guides/basic-concepts#field-st... (continued)

Coverage Stats

3514 of 5493 branches covered (63.97%)

Branch coverage included in aggregate %.

79 of 82 new or added lines in 12 files covered. (96.34%)

6 existing lines in 2 files now uncovered.

21199 of 26243 relevant lines covered (80.78%)

89.58 hits per line