Fix: Keep ConfigPage tabs mounted to preserve form state

Previously, the tab content wrapper used 'key={tab}' which caused React to
unmount and remount the entire subtree when switching tabs. This destroyed
all component state, including unsaved form data and pending auto-saves.

Changes:
- Removed 'key={tab}' from the wrapper div
- All tab panels now render at page initialization
- Inactive tabs use CSS 'display: none' to hide without unmounting
- Tabs remain mounted throughout the page lifetime
- Users can now switch tabs without losing form input

Updated ConfigPage.test.tsx to reflect that inactive tabs remain in the DOM
(just hidden with CSS) rather than being removed entirely.

Documentation: Added 'Tab Panels' section to Web-Development.md
explaining the rule and rationale.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
2026-04-22 21:21:36 +02:00
parent 0f261e31c2
commit 0bfa975222
4 changed files with 34 additions and 26 deletions

View File

@@ -1,15 +1,3 @@
### ✅ TASK-BUG-01 — Infinite Re-Fetch Loop in `useJailConfigs` — DONE
**Fix Summary**
Wrapped the `onSuccess` callback in `useCallback` with empty dependencies in `frontend/src/hooks/useJailConfigs.ts` (lines 33-35). The inline callback was creating a new reference on every render, which caused `useListData`'s internal `refresh` function to be recreated (since `onSuccess` is in its deps), which triggered the `useEffect` again, causing an infinite fetch loop.
Added comprehensive test coverage in `frontend/src/hooks/__tests__/useJailConfigs.test.ts` to verify the hook no longer triggers infinite refetches. Updated `Docs/Refactoring.md` with documentation explaining the `onSuccess` stability requirement for all `useListData` callers.
Commit: `de8af09a3da36dbf24b56fa28656673b232b5e91`
---
### TASK-BUG-02 — `ConfigPage` Tab Switch Destroys All Form State
**Where found**
@@ -213,7 +201,6 @@ None required.
**Why this is needed**
Typing `"500"` in the Lines field currently fires three HTTP requests (`"5"`, `"50"`, `"500"`). Each request fetches potentially hundreds of log lines and serializes them, adding unnecessary backend load.
---
### TASK-ABORT-01 — Missing `signal` Parameter on Multiple API Functions
@@ -640,4 +627,4 @@ Remove the `console.log` call.
None required.
**Why this is needed**
Debug logs in test files pollute the test runner output and make it harder to spot real failures or warnings.
Debug logs in test files pollute the test runner output and make it harder to spot real failures or warnings.