fix(ui-react): migrate raw overlay wrappers to BaseDialog and ConfirmDialog

[luannmoreira]

Summary

• Five components were building dialogs with fixed inset-0 div wrappers — no focus trap, no native ESC handling, no consistent backdrop-click semantics
• Migrate to shared primitives:
  • MfaDisableDialog → BaseDialog (size="sm")
  • MfaRecoveryCodesModal → BaseDialog (size="md")
  • MfaRecoveryTimeoutModal → BaseDialog with canClose={() => false} — blocks both ESC and backdrop click, user must use the explicit Close button
  • Profile (DeleteAccountWarningDialog) → BaseDialog (size="md")
  • SessionDetails (Delete Recording + Close Session) → ConfirmDialog with per-dialog error state that clears on re-open
• Update tests:
  • Add HTMLDialogElement.showModal/close stubs to global src/test/setup.ts so all BaseDialog-using components work under jsdom
  • Add vi.mock("@/hooks/useFocusTrap", ...) to MfaDisableDialog, MfaRecoveryTimeoutModal, and MfaRecover test files
  • Replace old DOM-traversal backdrop tests (.relative/previousElementSibling) with fireEvent on the native <dialog> element

Test plan

• Open Disable MFA dialog → verify ESC and backdrop click dismiss it
• Open Recovery Codes modal → verify ESC and backdrop click dismiss it
• After using a recovery code, the recovery window modal appears → verify ESC and backdrop click do not dismiss it; only the Close button does
• Delete account warning in Profile → verify backdrop click and ESC dismiss it
• Delete Recording dialog in SessionDetails → delete fails with error → error shown in dialog; re-open clears the error
• Close Session dialog in SessionDetails — same error-state behavior
• Run npx vitest run — all 1904 tests pass

[gustavosbarreto]

/review

[github-actions]

Claude finished @gustavosbarreto's task in 7m 2s —— View job

---

Code Review Complete

Reviewed 21 files across code quality, security, testing, TypeScript/React patterns, and architecture — no issues found. The code looks good as-is.

The migration is consistent and well-executed: all five components follow the same pattern (replace fixed inset-0 wrapper with BaseDialog/ConfirmDialog, add proper aria-label, wrap content in p-6 div). The SessionDetails refactor is particularly clean — replacing ~110 lines of inline dialog markup with two concise ConfirmDialog usages with proper error-state management. The type="button" additions across 13 files are a solid defensive improvement, and the test updates correctly adapt to the new <dialog>-based DOM structure.

---

If you push additional changes and want a new review, tag @shellhub-io/admin and a team member can trigger it.