Skip to content

feat: replace native confirm() with styled delete confirmation modal on Knowledge Base page#49

Open
androemeda wants to merge 1 commit intovirtualcell:mainfrom
androemeda:feat/delete-confirmation-modal
Open

feat: replace native confirm() with styled delete confirmation modal on Knowledge Base page#49
androemeda wants to merge 1 commit intovirtualcell:mainfrom
androemeda:feat/delete-confirmation-modal

Conversation

@androemeda
Copy link

Closes #48

Summary

Replaces the native browser confirm() dialog on the /admin/knowledge-base page with a styled in-app modal that is consistent with the rest of the UI. The modal displays the filename, a warning that the action cannot be undone, and Cancel / Delete buttons.

Explanation of Implementation

  • Added two new state variables — showDeleteModal (boolean) and fileToDelete (string | null) — to control the modal.
  • Refactored handleDeleteFile to only set state (open the modal) instead of calling confirm() and making the API call directly.
  • Extracted the API call logic into a new confirmDelete function, which is called when the user clicks Delete in the modal.
  • Added the delete confirmation modal JSX inline in the same file, following the exact same pattern already used by the Upload Modal and File Preview Modal on the same page — no new component file needed.
  • Styling uses the existing site palette: bg-red-100 / text-red-600 for the icon badge, bg-red-600 for the Delete button, and border-slate-300 for Cancel — consistent with the blue-600 / slate / red-600 palette used throughout the app.

Screenshots

Before

before

After

after

Testing

  • Navigate to /admin/knowledge-base and click the trash icon — confirm the new modal appears (not a browser alert)
  • Click Cancel — confirm the modal closes and no file is deleted
  • Click Delete — confirm the file is removed from the list and the modal closes

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Browser native confirm() dialog used for delete confirmation on Knowledge Base page

1 participant