Skip to content

[UX/FIX] Replace browser confirm dialogs on Scans page with in-app confirmation modals #33

@utksh1

Description

@utksh1

Summary

The Scans page uses browser window.confirm dialogs for deleting one scan and purging all records. Replace these with accessible in-app confirmation modals that match the SecuScan UI.

Problem

Native confirm dialogs are abrupt, hard to style, and provide limited context for destructive actions. The purge-all action is especially high impact and should clearly explain what will be removed before the user confirms.

Proposed solution

Replace browser confirmation prompts in frontend/src/pages/Scans.tsx with reusable or local confirmation modal UI.

Expected behavior:

  • Deleting one scan opens a modal naming the scan/task when possible.
  • Purging all records opens a stronger warning modal.
  • Confirm and cancel actions are keyboard accessible.
  • The modal can be dismissed safely without triggering deletion.
  • Existing toast success/error behavior remains.

Acceptance criteria

  • window.confirm is no longer used in Scans.tsx.
  • Single delete and purge-all actions both require explicit in-app confirmation.
  • Modals have clear titles, descriptions, confirm/cancel controls, and focus-friendly markup.
  • Existing delete API calls still work.
  • Frontend tests cover cancel and confirm paths for at least one destructive action.

Suggested files

  • frontend/src/pages/Scans.tsx
  • Optional shared component under frontend/src/components/
  • frontend/testing/unit/pages/

Test plan

  • Run frontend tests.
  • Manually verify delete, cancel, purge, and API error flows.

Metadata

Metadata

Labels

area:frontendFrontend React/UI worklevel:beginner20 pts difficulty label for small beginner-friendly PRspriority:mediumImportant issue with normal urgencytype:bugBug fix work category bonus labeltype:designDesign or UX work category bonus label

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions