fix: autosave, cell name overflow, length validation, apply-and-verify tests

Autosave on Apply (was broken):
- App.jsx called useDraftConfig() in the same component that rendered
  DraftConfigProvider — a component cannot consume context it provides.
  Fixed by splitting into AppCore (consumes context, all logic) and App
  (thin shell that wraps AppCore in DraftConfigProvider).  The hook now
  runs inside the provider and hasDirty()/flushAll() work correctly.

Cell name / domain length validation (255-char DNS standard):
- api/app.py: reject cell_name or domain > 255 chars or empty with 400
- api/app.py: reject ip_range without CIDR prefix (bare IPs shift all VIPs)
- webui/src/pages/Settings.jsx: cellNameError + domainError computed values
  block saveIdentity and show inline error; maxLength={255} on inputs
- tests/test_identity_validation.py: 8 unit tests for the new validation

Cell name overflow on all pages:
- Dashboard.jsx: add min-w-0 to flex child div + truncate + title on cell_name
- CellNetwork.jsx: min-w-0 + truncate + title on cell_name, domain, endpoint,
  vpn_subnet in invite cards and connected-cells list

Apply-and-verify integration tests:
- tests/integration/test_apply_propagation.py: TestPendingState (no restarts)
  and TestApplyAndVerify (triggers real container restart + health poll)
  covering the full save → apply → wait → verify propagation lifecycle

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-04-24 05:29:09 -04:00
parent 3ce45a8911
commit 4215e03ac6
7 changed files with 504 additions and 26 deletions
+10 -2
View File
@@ -129,7 +129,9 @@ function PendingRestartBanner({ pending, onApply, onCancel }) {
);
}
function App() {
// AppCore is the real application — it consumes DraftConfigContext and must
// be rendered inside DraftConfigProvider (see App below).
function AppCore() {
const [isOnline, setIsOnline] = useState(false);
const [isLoading, setIsLoading] = useState(true);
const [pending, setPending] = useState({ needs_restart: false, changes: [] });
@@ -243,7 +245,6 @@ function App() {
}
return (
<DraftConfigProvider>
<Router>
<ConfigProvider>
<div className="min-h-screen bg-gray-50">
@@ -326,6 +327,13 @@ function App() {
</div>
</ConfigProvider>
</Router>
);
}
function App() {
return (
<DraftConfigProvider>
<AppCore />
</DraftConfigProvider>
);
}