Charon/docs/issues/created/20260206-NEXT_STEPS.md

Modal Dropdown Triage - Next Steps & Action Plan

Generated: 2026-02-06 Status: Code Review Phase Complete → Ready for Testing Phase

---

What Was Done

✅ Code Review Completed - All 7 modal components analyzed ✅ Architecture Verified - Correct 3-layer modal pattern confirmed in all components ✅ Z-Index Validated - Layer hierarchy (40, 50) properly set ✅ Pointer-Events Confirmed - Correctly configured for dropdown interactions

---

Findings Summary

✅ All 7 Components Have Correct Implementation

1. ProxyHostForm.tsx ............................ ✅ CORRECT (2 dropdowns)
2. UsersPage.tsx - InviteUserModal .............. ✅ CORRECT (2 dropdowns)
3. UsersPage.tsx - EditPermissionsModal ......... ✅ CORRECT (multiple)
4. Uptime.tsx - CreateMonitorModal .............. ✅ CORRECT (1 dropdown)
5. Uptime.tsx - EditMonitorModal ................ ✅ CORRECT (1 dropdown)
6. RemoteServerForm.tsx ......................... ✅ CORRECT (1 dropdown)
7. CrowdSecConfig.tsx - BanIPModal .............. ✅ CORRECT (1 dropdown)

What This Means

• No code fixes needed - Architecture is correct
• Ready for testing - Can proceed to interactive verification
• High confidence - Pattern is industry-standard and properly implemented

---

Next Steps (Immediate Actions)

PHASE 1: Quick E2E Test Run (15 min)

cd /projects/Charon

# Run the triage test file
npx playwright test tests/modal-dropdown-triage.spec.ts --project=chromium

# Check results:
# - If ALL tests pass: dropdowns are working ✅
# - If tests fail: identify specific component

PHASE 2: Manual Verification (30-45 min)

Test each component in order:

A. ProxyHostForm (http://localhost:8080/proxy-hosts)

• Click "Add Proxy Host" button
• Try ACL dropdown - click and verify options appear
• Try Security Headers dropdown - click and verify options appear
• Select values and confirm form updates
• Close modal with ESC key

B. UsersPage Invite (http://localhost:8080/users)

• Click "Invite User" button
• Try Role dropdown - verify options appear
• Try Permission dropdowns - verify options appear
• Close modal with ESC key

C. UsersPage Permissions (http://localhost:8080/users)

• Find a user, click "Edit Permissions"
• Try all dropdowns in the modal
• Verify selections work
• Close modal

D. Uptime (http://localhost:8080/uptime)

• Click "Create Monitor" button
• Try Monitor Type dropdown - verify options appear
• Edit an existing monitor
• Try Monitor Type dropdown in edit - verify options appear
• Close modal

E. Remote Servers (http://localhost:8080/remote-servers)

• Click "Add Server" button
• Try Provider dropdown - verify options appear (Generic/Docker/Kubernetes)
• Close modal

F. CrowdSec (http://localhost:8080/security/crowdsec)

• Find "Ban IP" button (in manual bans section)
• Click to open modal
• Try Duration dropdown - verify options (1h, 4h, 24h, 7d, 30d, permanent)
• Close modal

---

Expected Results

If All Tests Pass ✅

Action: Dropdowns are WORKING

• Approve implementation
• Deploy to production
• Close issue as resolved

If Some Tests Fail ❌

Action: Identify the pattern

• Check browser console for errors
• Take screenshot of each failure
• Compare DOM structure locally
• Document which dropdowns fail

If pattern is found:

- Z-index issue → likely CSS conflict
- Click not registering → pointer-events problem
- Dropdown clipped → overflow container issue

If All Tests Fail ❌❌

Action: Escalate for investigation

• Code review shows structure is correct
• Failure indicates browser/environment issue
• May need:
  • Browser/OS-specific debugging
  • Custom dropdown component
  • Different approach to modal

---

Testing Commands Cheat Sheet

# Run just the triage tests
cd /projects/Charon
npx playwright test tests/modal-dropdown-triage.spec.ts --project=chromium

# Run specific component
npx playwright test tests/modal-dropdown-triage.spec.ts --project=chromium --grep "ProxyHostForm"

# Run with all browsers
npx playwright test tests/modal-dropdown-triage.spec.ts

# View test report
npx playwright show-report

# Debug mode - see browser
npx playwright test tests/modal-dropdown-triage.spec.ts --headed

# Remote testing
export PLAYWRIGHT_BASE_URL=http://100.98.12.109:9323
npx playwright test --ui

---

Decision Tree

START: Run E2E tests
│
├─ All 7 dropdowns PASS ✅
│  └─ → DECISION: DEPLOY
│  └─ → Action: Merge to main, tag release
│  └─ → Close issue as "RESOLVED"
│
├─ Some dropdowns FAIL
│  ├─ Same component multiple fails?
│  │  └─ → Component-specific issue (probable)
│  │
│  ├─ Different components fail inconsistently?
│  │  └─ → Browser-specific issue (check browser console)
│  │
│  └─ → DECISION: INVESTIGATE
│      └─ Action: Debug specific component
│      └─ Check: CSS conflicts, overflow containers, browser issues
│      └─ If quick fix available → apply fix → re-test
│      └─ If complex → consider custom dropdown component
│
└─ All 7 dropdowns FAIL ❌❌
   └─ → DECISION: ESCALATE
   └─ → Investigate: Global CSS changes, Tailwind config, modal wrapper
   └─ → Rebuild E2E container: .github/skills/scripts/skill-runner.sh docker-rebuild-e2e
   └─ → Re-test with clean environment

---

Documentation References

For This Triage

• Summary: 20260206-MODAL_DROPDOWN_FINDINGS_SUMMARY.md
• Full Report: 20260206-modal_dropdown_triage_results.md
• Handoff Contract: 20260204-modal_dropdown_handoff_contract.md

Component Files

• ProxyHostForm.tsx - Lines 513-521
• UsersPage.tsx - Lines 173-179, 444-450
• Uptime.tsx - Lines 232-238, 349-355
• RemoteServerForm.tsx - Lines 70-77
• CrowdSecConfig.tsx - Lines 1185-1190

---

Rollback Information

If dropdowns are broken in production:

# Quick rollback (revert to previous version)
git log --oneline -10  # Find the modal fix commit
git revert <commit-hash>
git push origin main

# OR if needed: switch to previous release tag
git checkout <previous-tag>
git push origin main -f  # Force push (coordinate with team)

---

Success Criteria for Completion

• E2E tests run successfully - all 7 components tested
• All 7 dropdowns functional - click opens, select works, close works
• No console errors - browser dev tools clean
• Cross-browser verified - tested in Chrome, Firefox, Safari
• Responsive tested - works on mobile viewport
• Accessibility verified - keyboard navigation works
• Production deployment approved - by code review/QA
• Issue closed - marked as "RESOLVED"

---

Timeline Estimate

Phase	Task	Time	Completed
Code Review	Verify all 7 components	✅ Done
E2E Testing	Run automated tests	10-15 min	→ Next
Manual Testing	Test each dropdowns	30-45 min
Debugging (if needed)	Identify/fix issues	15-60 min
Documentation	Update README/docs	10 min
Deployment	Merge & deploy	5-10 min
TOTAL		~1-2 hours

---

Key Contact / Escalation

If issues arise during testing:

1. Check docs/issues/created/20260206-modal_dropdown_triage_results.md for detailed analysis
2. Review component code (links in "Documentation References" above)
3. Check browser console for specific z-index or CSS errors
4. Consider custom dropdown component if native select unsolvable

---

Sign-Off

Code Review: ✅ COMPLETE Architecture: ✅ CORRECT Ready for Testing: ✅ YES

Next Phase Owner: QA / Testing Team Next Action: Execute E2E tests and manual verification

---

Generated: 2026-02-06 Status: Code review phase complete, ready for testing phase