Have a "Confirm Delete" dialog/modal open upon clicking delete

[max-programming]

What would you like to see?

Right now, clicking the delete button on Jobs or Documents instantly deletes the job or document, we should have a confirmation dialog/modal which the user can confirm whether they want to delete it or not, in order to prevent mistakes

Note: Deleting a job will delete the docs that were used to ingest it. So include that description in the dialog

Additionally, it would be better to have the Dialog take in the name of the resource (job or document) for further confirmation. Just like GitHub handles repository deletion here

Why is it useful? (optional)

It prevents the user from making a mistake by accidentally clicking delete, because something deleted cannot be undone

Examples or links? (optional)

Reference to how the confirmation dialog should look and behave

[coderabbitai]

📝 CodeRabbit Plan Mode

Generate an implementation plan and prompts that you can use with your favorite coding agent.

✅ Successfully generated implementation plan.

💡 Use @coderabbitai <feedback> to replan

Examples

• Example 1
• Example 2

---

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord or schedule a call!

[coderabbitai]

Coding Plan

Approach

Ticket Summary

Add a confirmation dialog for delete operations on Jobs and Documents that requires users to type the resource name to confirm deletion, preventing accidental deletions. For Jobs, include a warning that associated documents will also be deleted due to cascade delete behavior.

Observations

Codebase Summary

The project is a Next.js application in apps/web using tRPC for API communication and React Query for state management. The UI component library in packages/ui uses Radix UI primitives with existing dialog, form, input, and button components. Delete operations are currently triggered directly from JobActions (apps/web/src/app/app.agentset.ai/(dashboard)/[slug]/[namespaceSlug]/documents/actions.tsx) and DocumentActions (apps/web/src/app/app.agentset.ai/(dashboard)/[slug]/[namespaceSlug]/documents/document-actions.tsx) components using tRPC mutations, with Sonner for toast notifications. Both Jobs and Documents have nullable name fields in the database.

Assumptions

Assumption 1: Resource Identifier for Confirmation

Options Considered:

• Require typing "Unnamed job/document" for resources without names
• Require typing the resource ID instead when name is not available
• Use name when available, fall back to requiring a simple confirmation word like "DELETE"

Chosen Option: Use the resource name when available; when the name is null, fall back to requiring the user to type the resource ID

Rationale: This approach matches what users see in the UI and follows GitHub's pattern of confirming with the actual identifier. It also ensures consistent behavior where users always confirm with a meaningful identifier rather than a generic word.

💡 User Tips

Regenerate the plan with different choices with @coderabbitai <feedback>.

Implementation Steps

Phase 1: Create Reusable Delete Confirmation Dialog Component

Create a flexible, reusable confirmation dialog component in the UI package that handles the name-based confirmation pattern and can be customized for different resource types.

Task 1: Create DeleteConfirmationDialog Component

Create a new delete-confirmation-dialog.tsx file in packages/ui/src/components/ui/ that provides a controlled dialog component for delete confirmations.

• Build the component using the existing Dialog, DialogContent, DialogHeader, DialogFooter, DialogTitle, and DialogDescription primitives from packages/ui/src/components/ui/dialog.tsx
• Accept props for: open (boolean), onOpenChange (callback), resourceName (string - the name or ID to type), resourceType (string - "job" or "document" for display), warningMessage (optional string for custom warnings), onConfirm (async callback), and isDeleting (boolean for loading state)
• Use a controlled Input component from packages/ui/src/components/ui/input.tsx with local state to track the typed confirmation value
• Include a "Cancel" button and a "Delete" button (destructive variant) in the DialogFooter
• Disable the "Delete" button until the typed value exactly matches the resourceName prop (case-sensitive)
• Show the loading state on the "Delete" button when isDeleting is true
• Export the component from packages/ui/src/components/ui/index.ts or the appropriate barrel export

Task 2: Add Dialog Content and Validation Logic

Implement the dialog's content structure and real-time validation for the confirmation input.

• In DialogDescription, explain that this action cannot be undone and display the custom warningMessage prop if provided (e.g., for job cascade delete warning)
• Add a label above the input that instructs users to type the resource name to confirm (e.g., "Please type {resourceName} to confirm")
• Implement real-time validation: compare the input value with resourceName on every keystroke to enable/disable the delete button
• Handle the confirm action by calling the onConfirm callback and not closing the dialog automatically (let the parent component control the dialog state based on success/error)
• Reset the input field when the dialog opens or closes using a useEffect that watches the open prop

🤖 Prompt for AI agents

Create a reusable DeleteConfirmationDialog component in the UI package that
requires users to type the resource name/ID to confirm deletion.

Create `packages/ui/src/components/ui/delete-confirmation-dialog.tsx`:
- Build component using existing Dialog primitives (Dialog, DialogContent,
DialogHeader, DialogFooter, DialogTitle, DialogDescription)
- Accept props: open, onOpenChange, resourceName, resourceType, warningMessage
(optional), onConfirm, isDeleting
- Add controlled Input with local state for tracking typed confirmation value
- Include Cancel and Delete (destructive variant) buttons in DialogFooter
- Disable Delete button until typed value exactly matches resourceName
(case-sensitive)
- Show loading state on Delete button when isDeleting is true
- Display "cannot be undone" message in DialogDescription with optional
warningMessage
- Add label instructing users to type the resource name
- Implement real-time validation on every keystroke
- Call onConfirm callback without auto-closing dialog (parent controls state)
- Reset input field using useEffect when open prop changes
- Export component from appropriate barrel export file

Phase 2: Integrate Dialog into JobActions Component

Update the JobActions component to use the new confirmation dialog instead of directly calling the delete mutation when the delete button is clicked.

Task 1: Add Dialog State Management to JobActions

Modify apps/web/src/app/app.agentset.ai/(dashboard)/[slug]/[namespaceSlug]/documents/actions.tsx to manage the confirmation dialog's open/closed state.

• Add local state using useState to track whether the delete confirmation dialog is open (e.g., isDeleteDialogOpen)
• Change the delete button's onClick handler to open the dialog (set isDeleteDialogOpen to true) instead of directly calling the delete mutation
• Keep the existing useMutation(trpc.ingestJob.delete.mutationOptions()) hook but move the mutation call inside the dialog's confirm callback

Task 2: Render DeleteConfirmationDialog in JobActions

Add the DeleteConfirmationDialog component to the JobActions component's render output.

• Import DeleteConfirmationDialog from packages/ui
• Render the dialog component with appropriate props: open={isDeleteDialogOpen}, onOpenChange={setIsDeleteDialogOpen}, resourceType="job", resourceName={job.name || job.id}, and isDeleting={isPending}
• For the warningMessage prop, include text explaining that deleting this job will also delete all associated documents (cascade delete warning)
• In the onConfirm callback, call the existing deleteJob() mutation function
• Update the mutation's onSuccess callback to close the dialog (set isDeleteDialogOpen to false) in addition to showing the toast
• Keep the existing toast notifications and query invalidation logic unchanged

🤖 Prompt for AI agents

Integrate the DeleteConfirmationDialog into JobActions to require confirmation
before deleting jobs.

Modify
`apps/web/src/app/app.agentset.ai/(dashboard)/[slug]/[namespaceSlug]/documents/actions.tsx`:
- Import DeleteConfirmationDialog from packages/ui
- Add useState for isDeleteDialogOpen state
- Change delete button onClick to open dialog instead of directly calling
mutation
- Keep existing useMutation hook but move mutation call to dialog's onConfirm
callback
- Render DeleteConfirmationDialog with props: open={isDeleteDialogOpen},
onOpenChange={setIsDeleteDialogOpen}, resourceType="job", resourceName={job.name
|| job.id}, isDeleting={isPending}
- Set warningMessage prop explaining cascade delete of associated documents
- In onConfirm callback, trigger the deleteJob mutation
- Update mutation onSuccess to close dialog and maintain existing toast/query
invalidation logic

Phase 3: Integrate Dialog into DocumentActions Component

Apply the same confirmation dialog pattern to the DocumentActions component for document deletions.

Task 1: Add Dialog State Management to DocumentActions

Modify apps/web/src/app/app.agentset.ai/(dashboard)/[slug]/[namespaceSlug]/documents/document-actions.tsx following the same pattern as JobActions.

• Add local state for isDeleteDialogOpen using useState
• Update the delete button's onClick to open the dialog instead of directly triggering the mutation
• Keep the existing useMutation(trpc.document.delete.mutationOptions()) hook and move the mutation call to the dialog's confirm callback

Task 2: Render DeleteConfirmationDialog in DocumentActions

Add the confirmation dialog component to DocumentActions with document-specific messaging.

• Import and render DeleteConfirmationDialog with props: open={isDeleteDialogOpen}, onOpenChange={setIsDeleteDialogOpen}, resourceType="document", resourceName={document.name || document.id}, and isDeleting={isPending}
• Do not provide a warningMessage prop for documents (or use a simpler warning message since there's no cascade delete concern)
• In the onConfirm callback, trigger the deleteDocument() mutation
• Update the mutation's onSuccess callback to close the dialog and maintain existing toast/analytics behavior
• Preserve the existing analytics logging (logEvent) for successful deletions

🤖 Prompt for AI agents

Integrate the DeleteConfirmationDialog into DocumentActions to require
confirmation before deleting documents.

Modify
`apps/web/src/app/app.agentset.ai/(dashboard)/[slug]/[namespaceSlug]/documents/document-actions.tsx`:
- Import DeleteConfirmationDialog from packages/ui
- Add useState for isDeleteDialogOpen state
- Update delete button onClick to open dialog instead of directly triggering
mutation
- Keep existing useMutation hook but move mutation call to dialog's onConfirm
callback
- Render DeleteConfirmationDialog with props: open={isDeleteDialogOpen},
onOpenChange={setIsDeleteDialogOpen}, resourceType="document",
resourceName={document.name || document.id}, isDeleting={isPending}
- Do not provide warningMessage prop or use simpler message (no cascade delete)
- In onConfirm callback, trigger deleteDocument mutation
- Update mutation onSuccess to close dialog and maintain existing
toast/analytics behavior
- Preserve existing logEvent analytics logging

---

🚀 Next Steps

🤖 All AI agent prompts combined

Task: 1

Create a reusable DeleteConfirmationDialog component in the UI package that
requires users to type the resource name/ID to confirm deletion.

Create `packages/ui/src/components/ui/delete-confirmation-dialog.tsx`:
- Build component using existing Dialog primitives (Dialog, DialogContent,
DialogHeader, DialogFooter, DialogTitle, DialogDescription)
- Accept props: open, onOpenChange, resourceName, resourceType, warningMessage
(optional), onConfirm, isDeleting
- Add controlled Input with local state for tracking typed confirmation value
- Include Cancel and Delete (destructive variant) buttons in DialogFooter
- Disable Delete button until typed value exactly matches resourceName
(case-sensitive)
- Show loading state on Delete button when isDeleting is true
- Display "cannot be undone" message in DialogDescription with optional
warningMessage
- Add label instructing users to type the resource name
- Implement real-time validation on every keystroke
- Call onConfirm callback without auto-closing dialog (parent controls state)
- Reset input field using useEffect when open prop changes
- Export component from appropriate barrel export file
===============================================================================

Task: 2

Integrate the DeleteConfirmationDialog into JobActions to require confirmation
before deleting jobs.

Modify
`apps/web/src/app/app.agentset.ai/(dashboard)/[slug]/[namespaceSlug]/documents/actions.tsx`:
- Import DeleteConfirmationDialog from packages/ui
- Add useState for isDeleteDialogOpen state
- Change delete button onClick to open dialog instead of directly calling
mutation
- Keep existing useMutation hook but move mutation call to dialog's onConfirm
callback
- Render DeleteConfirmationDialog with props: open={isDeleteDialogOpen},
onOpenChange={setIsDeleteDialogOpen}, resourceType="job", resourceName={job.name
|| job.id}, isDeleting={isPending}
- Set warningMessage prop explaining cascade delete of associated documents
- In onConfirm callback, trigger the deleteJob mutation
- Update mutation onSuccess to close dialog and maintain existing toast/query
invalidation logic
===============================================================================

Task: 3

Integrate the DeleteConfirmationDialog into DocumentActions to require
confirmation before deleting documents.

Modify
`apps/web/src/app/app.agentset.ai/(dashboard)/[slug]/[namespaceSlug]/documents/document-actions.tsx`:
- Import DeleteConfirmationDialog from packages/ui
- Add useState for isDeleteDialogOpen state
- Update delete button onClick to open dialog instead of directly triggering
mutation
- Keep existing useMutation hook but move mutation call to dialog's onConfirm
callback
- Render DeleteConfirmationDialog with props: open={isDeleteDialogOpen},
onOpenChange={setIsDeleteDialogOpen}, resourceType="document",
resourceName={document.name || document.id}, isDeleting={isPending}
- Do not provide warningMessage prop or use simpler message (no cascade delete)
- In onConfirm callback, trigger deleteDocument mutation
- Update mutation onSuccess to close dialog and maintain existing
toast/analytics behavior
- Preserve existing logEvent analytics logging

💡 Iterate on the plan with: @coderabbitai <feedback>

Example Feedback
- @coderabbitai You can skip phase 3. Add a simple unit test case for phase 2.
- @coderabbitai For assumption 1 go ahead with option 3 and replan.

---

💬 Have feedback or questions? Drop into our discord or schedule a call!