Skip to content

feat: add reusable ConfirmationDialog component to replace window.confirm()#619

Open
rishab11250 wants to merge 1 commit into
param20h:devfrom
rishab11250:feature/610-confirmation-dialog
Open

feat: add reusable ConfirmationDialog component to replace window.confirm()#619
rishab11250 wants to merge 1 commit into
param20h:devfrom
rishab11250:feature/610-confirmation-dialog

Conversation

@rishab11250

Copy link
Copy Markdown
Contributor

🔗 Related Issue

Closes #610


📝 What does this PR do?

Creates a reusable ConfirmationDialog component and replaces all window.confirm() calls in the codebase.

New component (frontend/src/components/ui/confirm-dialog.tsx):

  • Configurable title, message (string or ReactNode), confirm/cancel button text
  • variant prop: 'danger' (red destructive), 'warning' (amber), 'default' (primary)
  • Loading state with spinner on confirm button, all buttons disabled during async operations
  • Keyboard accessible (Enter to confirm, Escape to cancel, focus trap — all built into base-ui dialog)
  • Built on existing @base-ui/react/dialog primitives — no new dependencies

Replacements:

  • DocumentSidebar.tsx: Document deletion now opens a styled danger confirmation dialog
  • ApiKeyManager.tsx: API key revocation now opens a styled danger confirmation dialog

🗂️ Type of Change

  • 🐛 Bug fix
  • ✨ New feature
  • 🔧 Refactor / code cleanup
  • 📝 Documentation update
  • 🎨 UI / styling change
  • ⚙️ CI / tooling / config change
  • 🧪 Tests

🧪 How was this tested?

  • Ran the backend locally (uvicorn app.main:app --reload)
  • Ran the frontend locally (npm run dev inside frontend/)
  • Tested the affected API endpoints manually
  • Added / updated tests

📸 Screenshots (if UI change)

N/A — component renders identically to existing dialog patterns; screenshots can be provided on a running instance.


⚠️ Anything to flag for reviewers?

  • No new dependencies added — built entirely on @base-ui/react/dialog already in the project
  • The DialogDescription uses asChild when message is a ReactNode for custom content support
  • i18n fallbacks are provided for DocumentSidebar labels in case translations are missing
  • DocumentSidebar uses i18n translation keys with English fallback strings for all dialog labels

✅ Self-Review Checklist

  • My branch is based on dev, not main
  • I have not added any secrets / API keys
  • I have not modified main branch or any HuggingFace deployment config
  • My code follows the existing style (no unnecessary formatting changes)
  • I have updated relevant docs / comments if needed

@rishab11250 rishab11250 requested a review from param20h as a code owner June 16, 2026 04:35
…firm()

Closes param20h#610

- Create ConfirmationDialog component with configurable title, message,
  confirm/cancel labels, variant (default/danger/warning), and loading state
- Replace window.confirm() in DocumentSidebar.tsx with styled dialog
  for document deletion confirmation
- Replace window.confirm() in ApiKeyManager.tsx with styled dialog
  for API key revocation confirmation
- Built on existing @base-ui/react/dialog primitives
@rishab11250 rishab11250 force-pushed the feature/610-confirmation-dialog branch from 7a7e793 to 41b3e6e Compare June 16, 2026 04:38
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.

[FEAT] Create reusable ConfirmationDialog component to replace window.confirm() calls

1 participant