[Frontend] Replace Edit System modal with dedicated System Detail page #322
Description
Problem
The current Edit FISMA System modal is running out of space. As we add more features, the modal is becoming cramped and difficult to use:
Current Modal Contains:
- Basic system info (name, acronym, UID, component, etc.)
- Contact info (ISSO email, data call contact)
- Organization fields (group, division)
- Datacenter environment dropdown
- Decommission section with checkbox, date picker, and notes field (from Enhance decommission feature with custom date, notes, and audit trail display #313)
Soon to Add (from CFACTS sync):
- CFACTS comparison data (side-by-side view)
- Discrepancy indicators
- Last sync timestamp
- ISSO name from EUA mapping
- Additional metadata fields
Problem: A modal dialog is too constrained for all this information. Users need more screen real estate to:
- See all system details at once
- Compare CFACTS vs ZTMF data side-by-side
- Edit without scrolling in a cramped modal
- Have better UX for complex workflows
Proposed Solution
Replace the Edit System modal with a dedicated System Detail Page.
Route
/systems/:fismasystemid
Examples:
/systems/123- View/edit system build(deps): bump nanoid from 3.3.7 to 3.3.8 #123- Click system name in table → Navigate to detail page
- Breadcrumb: Home > Systems > [System Name]
Page Layout
┌─────────────────────────────────────────────────────────────┐
│ < Back to Systems [Edit] [Decommission] │
├─────────────────────────────────────────────────────────────┤
│ │
│ Death Star Orbital Battle Station │
│ DS-1 • FISMA UID: abc-123-def • CMS-Cloud-AWS │
│ │
├─────────────────────────────────────────────────────────────┤
│ │
│ Tabs: [Overview] [CFACTS Comparison] [History] [Questions] │
│ │
│ ┌─ Overview Tab ──────────────────────────────────────────┐ │
│ │ │ │
│ │ System Information │ │
│ │ ├─ FISMA Name: Death Star... │ │
│ │ ├─ Acronym: DS-1 │ │
│ │ ├─ Component: Imperial Navy (CM-FFS) │ │
│ │ ├─ Group: Empire │ │
│ │ └─ Division: Galactic Defense │ │
│ │ │ │
│ │ Contacts │ │
│ │ ├─ ISSO: Darth Vader (vader@empire.gov) │ │
│ │ └─ Data Call Contact: Grand Moff Tarkin │ │
│ │ │ │
│ │ Infrastructure │ │
│ │ ├─ Datacenter: CMS-Cloud-AWS │ │
│ │ └─ Subsystem: Main Reactor │ │
│ │ │ │
│ │ Status │ │
│ │ ├─ Active │ │
│ │ └─ Last Modified: 2026-01-30 │ │
│ │ │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘
Tabs (Future Expansion)
1. Overview (MVP)
- All current EditSystemModal fields
- Read-only view with inline edit capability
- Or dedicated Edit mode toggle
2. CFACTS Comparison (Issue #319 related)
- Side-by-side: ZTMF vs CFACTS data
- Highlight discrepancies
- "Update from CFACTS" action buttons
- Last sync timestamp
3. History (Future)
- Audit trail from events table
- Who changed what and when
- Decommission/reactivation history
4. Questions (Future)
- System's zero trust assessment responses
- Current scores by pillar
- Link to questionnaire
Edit Mode Options
Option A: Inline Edit
- Click field → becomes editable
- Save/Cancel buttons per field
- Like GitHub issue editing
Option B: Edit Mode Toggle
- "Edit" button at top
- Entire form becomes editable
- Save/Cancel for whole form
- Like current modal behavior
Option C: Separate Edit Page
/systems/:id/editroute- Similar to current modal but full page
- More traditional CRUD pattern
Recommended: Option B (matches current modal UX, less risky migration)
Migration Path
Phase 1: Create Detail Page (Read-Only)
- New route:
/systems/:fismasystemid - Copy EditSystemModal layout to full page
- Read-only view (no editing yet)
- "Edit" button opens old modal (temporary)
- Update FismaTable: click row → navigate to detail page
Phase 2: Move Edit to Detail Page
- Add edit mode to detail page
- Remove/deprecate EditSystemModal
- Update pencil icon → goes to detail page with edit=true
Phase 3: Add Tabs
- CFACTS Comparison tab
- History tab
- Questions tab
Acceptance Criteria
MVP (Phase 1)
- New route
/systems/:fismasystemidcreated - RouteIds and Routes constants updated
- SystemDetailPage component created
- Displays all system fields (read-only)
- Back button returns to systems list
- Breadcrumb navigation
- Click system name in table navigates to detail page
- Mobile responsive layout
- Loading states
- Error handling (system not found, no permission)
Edit Functionality (Phase 2)
- Edit mode toggle on detail page
- All fields editable (reuse validators from modal)
- Save/Cancel functionality
- Decommission section with date picker & notes
- Form validation matches modal
- Success/error notifications
- Admin-only restrictions enforced
- EditSystemModal deprecated/removed
Future Enhancements (Phase 3)
- Tab navigation (Overview, CFACTS, History, Questions)
- CFACTS comparison data integration
- Event history timeline
- Zero trust assessment summary
Technical Notes
Files to Create
src/views/SystemDetailPage/
├── SystemDetailPage.tsx # Main page component
├── SystemOverview.tsx # Overview tab content
├── SystemEditForm.tsx # Edit mode form (reuse from modal)
├── SystemCFACTSComparison.tsx # CFACTS tab (future)
└── SystemHistory.tsx # History tab (future)
Files to Update
src/router/constants.ts # Add SYSTEM_DETAIL route
src/router/router.tsx # Add route config
src/views/FismaTable/FismaTable.tsx # Click → navigate instead of modal
API Endpoints (Already Exist)
GET /api/v1/fismasystems/:id- Get system detailsPUT /api/v1/fismasystems/:id- Update systemDELETE /api/v1/fismasystems/:id- Decommission
Benefits
✅ More Space - Full page allows proper layout of all fields
✅ Better UX - No cramped scrolling in modal
✅ Scalable - Easy to add tabs for new features (CFACTS, history)
✅ Bookmarkable - Direct URLs to specific systems
✅ Shareable - Can send link to colleague: "Check system #123"
✅ Professional - Follows standard CRUD patterns
✅ Mobile Friendly - Responsive page vs modal viewport issues
Related Issues
- Enhance decommission feature with custom date, notes, and audit trail display #313 - Decommission enhancements (date picker, notes) - needs space
- [Frontend] Admin dashboard for CFACTS/ZTMF system comparison #319 - CFACTS comparison dashboard - could add as tab on detail page
- Future: Audit trail display - History tab
- Future: Zero trust assessment summary - Questions tab
Priority
Medium-High - Not blocking current work, but needed soon as features accumulate. Should complete before #313 (decommission enhancements) to avoid cramming more into the modal.
Notes
- Keep EditSystemModal temporarily during migration (phases 1-2)
- Can deprecate modal once detail page has full edit capability
- Consider accessibility (keyboard navigation, screen readers)
- Ensure admin-only edit restrictions carry over