Feature request: Add delete confirmation dialog to file manager #344

Merged
thorved merged 3 commits from feature/file-manager-delete-confirmation into dev-1.8.0 2025-10-05 00:08:55 +00:00
thorved commented 2025-10-04 09:46:24 +00:00 (Migrated from github.com)

Add Confirmation Dialog for File Manager Delete Operations

🎯 Overview

This PR adds a safety confirmation dialog before deleting files and folders in the File Manager, preventing accidental data loss.

📝 Changes

  • Added confirmation dialog that appears before any delete operation
  • Context-aware messaging that shows different warnings based on:
    • Single file deletion
    • Folder deletion (with warning about deleting all contents)
    • Multiple items deletion
  • Permanent deletion warning explicitly informs users that items will be permanently deleted from the server
  • Works for all delete methods:
    • Delete key (keyboard shortcut)
    • Right-click context menu delete
    • Both single and multiple file selection

🔧 Technical Details

  • Integrated existing useConfirmation hook for consistent UX
  • Uses confirmWithToast with destructive styling (red action button)
  • Maintains all existing functionality (undo history, selection clearing, SSH connection handling)
  • Follows project guidelines: Tailwind CSS with shadcn components

📦 Files Changed

  • src/ui/Desktop/Apps/File Manager/FileManager.tsx - Added confirmation logic to handleDeleteFiles
  • src/locales/en/translation.json - Added new translation keys for confirmation messages

🌐 New Translation Keys

  • confirmDeleteSingleItem - Single file confirmation
  • confirmDeleteMultipleItems - Multiple items confirmation
  • confirmDeleteFolder - Folder deletion with contents warning
  • permanentDeleteWarning - Universal permanent deletion warning

Testing Checklist

  • Delete confirmation appears when pressing Delete key
  • Delete confirmation appears when using right-click delete
  • Different messages shown for files vs folders vs multiple items
  • Permanent deletion warning displayed in all cases
  • Cancel button dismisses dialog without deleting
  • Delete button (destructive styling) proceeds with deletion
  • All existing functionality maintained (undo, refresh, selection)

📸 User Experience

Before

Pressing Delete or using right-click delete would immediately remove files permanently without any confirmation.

After

Users now see:

  1. Clear confirmation dialog with item name/count
  2. Permanent deletion warning
  3. Two clear options:
    • Cancel (safe, dismisses dialog)
    • Delete (destructive red styling, proceeds with deletion)

💡 Example Messages

Single File:

Are you sure you want to permanently delete "example.txt"?

This action cannot be undone. The item(s) will be permanently deleted from the server.

Folder:

Are you sure you want to permanently delete the folder "my-folder" and all its contents?

This action cannot be undone. The item(s) will be permanently deleted from the server.

Multiple Items:

Are you sure you want to permanently delete 5 items?

This action cannot be undone. The item(s) will be permanently deleted from the server.

Addresses user request for safer file deletion workflow with confirmation prompts to prevent accidental permanent data loss.

📝 Notes

  • All errors shown in linting are pre-existing warnings not introduced by these changes
  • The implementation follows existing code patterns in the project
  • Backward compatible - no breaking changes to existing functionality

Branch: feature/file-manager-delete-confirmation
Type: Feature Enhancement
Priority: High (Safety Feature)

Screenshot 2025-10-04 151331 Screenshot 2025-10-04 151252
# Add Confirmation Dialog for File Manager Delete Operations ## 🎯 Overview This PR adds a safety confirmation dialog before deleting files and folders in the File Manager, preventing accidental data loss. ## 📝 Changes - **Added confirmation dialog** that appears before any delete operation - **Context-aware messaging** that shows different warnings based on: - Single file deletion - Folder deletion (with warning about deleting all contents) - Multiple items deletion - **Permanent deletion warning** explicitly informs users that items will be permanently deleted from the server - **Works for all delete methods**: - ✅ Delete key (keyboard shortcut) - ✅ Right-click context menu delete - ✅ Both single and multiple file selection ## 🔧 Technical Details - Integrated existing `useConfirmation` hook for consistent UX - Uses `confirmWithToast` with destructive styling (red action button) - Maintains all existing functionality (undo history, selection clearing, SSH connection handling) - Follows project guidelines: Tailwind CSS with shadcn components ## 📦 Files Changed - `src/ui/Desktop/Apps/File Manager/FileManager.tsx` - Added confirmation logic to `handleDeleteFiles` - `src/locales/en/translation.json` - Added new translation keys for confirmation messages ## 🌐 New Translation Keys - `confirmDeleteSingleItem` - Single file confirmation - `confirmDeleteMultipleItems` - Multiple items confirmation - `confirmDeleteFolder` - Folder deletion with contents warning - `permanentDeleteWarning` - Universal permanent deletion warning ## ✅ Testing Checklist - [x] Delete confirmation appears when pressing Delete key - [x] Delete confirmation appears when using right-click delete - [x] Different messages shown for files vs folders vs multiple items - [x] Permanent deletion warning displayed in all cases - [x] Cancel button dismisses dialog without deleting - [x] Delete button (destructive styling) proceeds with deletion - [x] All existing functionality maintained (undo, refresh, selection) ## 📸 User Experience ### Before Pressing Delete or using right-click delete would immediately remove files permanently without any confirmation. ### After Users now see: 1. **Clear confirmation dialog** with item name/count 2. **Permanent deletion warning** 3. **Two clear options**: - Cancel (safe, dismisses dialog) - Delete (destructive red styling, proceeds with deletion) ## 💡 Example Messages **Single File:** ``` Are you sure you want to permanently delete "example.txt"? This action cannot be undone. The item(s) will be permanently deleted from the server. ``` **Folder:** ``` Are you sure you want to permanently delete the folder "my-folder" and all its contents? This action cannot be undone. The item(s) will be permanently deleted from the server. ``` **Multiple Items:** ``` Are you sure you want to permanently delete 5 items? This action cannot be undone. The item(s) will be permanently deleted from the server. ``` ## 🔗 Related Issues Addresses user request for safer file deletion workflow with confirmation prompts to prevent accidental permanent data loss. ## 📝 Notes - All errors shown in linting are pre-existing warnings not introduced by these changes - The implementation follows existing code patterns in the project - Backward compatible - no breaking changes to existing functionality --- **Branch:** `feature/file-manager-delete-confirmation` **Type:** Feature Enhancement **Priority:** High (Safety Feature) <img width="1899" height="932" alt="Screenshot 2025-10-04 151331" src="https://github.com/user-attachments/assets/ac6fcecb-0724-42b3-9935-83d3da95366d" /> <img width="1898" height="920" alt="Screenshot 2025-10-04 151252" src="https://github.com/user-attachments/assets/58e04633-952b-4060-9805-0c7bb0cd327e" />
gemini-code-assist[bot] commented 2025-10-04 09:46:36 +00:00 (Migrated from github.com)

Summary of Changes

Hello @thorved, I'm Gemini Code Assist1 ! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request introduces a crucial safety feature to the File Manager by adding a confirmation dialog before any file or folder deletion. This enhancement aims to prevent accidental data loss by explicitly prompting users to confirm their intent, providing context-specific warnings, and ensuring a consistent user experience across all deletion methods. The change significantly improves the robustness and user-friendliness of the file management system.

Highlights

  • Delete Confirmation Dialog: Implemented a confirmation dialog that appears before any delete operation in the File Manager to prevent accidental data loss.
  • Context-Aware Messaging: The confirmation messages are dynamic, adapting based on whether a single file, a folder (with a warning about its contents), or multiple items are selected for deletion.
  • Permanent Deletion Warning: An explicit warning is displayed in all confirmation dialogs, informing users that the action cannot be undone and items will be permanently deleted from the server.
  • Comprehensive Coverage: The confirmation mechanism works consistently across all delete methods, including the 'Delete' key keyboard shortcut and the right-click context menu, for both single and multiple file selections.
  • Consistent UX Integration: The existing useConfirmation hook was integrated, utilizing confirmWithToast with destructive styling for the action button, ensuring a consistent user experience.
Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help /gemini help Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.


  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩︎

## Summary of Changes Hello @thorved, I'm Gemini Code Assist[^1]! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request introduces a crucial safety feature to the File Manager by adding a confirmation dialog before any file or folder deletion. This enhancement aims to prevent accidental data loss by explicitly prompting users to confirm their intent, providing context-specific warnings, and ensuring a consistent user experience across all deletion methods. The change significantly improves the robustness and user-friendliness of the file management system. ### Highlights * **Delete Confirmation Dialog**: Implemented a confirmation dialog that appears before any delete operation in the File Manager to prevent accidental data loss. * **Context-Aware Messaging**: The confirmation messages are dynamic, adapting based on whether a single file, a folder (with a warning about its contents), or multiple items are selected for deletion. * **Permanent Deletion Warning**: An explicit warning is displayed in all confirmation dialogs, informing users that the action cannot be undone and items will be permanently deleted from the server. * **Comprehensive Coverage**: The confirmation mechanism works consistently across all delete methods, including the 'Delete' key keyboard shortcut and the right-click context menu, for both single and multiple file selections. * **Consistent UX Integration**: The existing `useConfirmation` hook was integrated, utilizing `confirmWithToast` with destructive styling for the action button, ensuring a consistent user experience. <details> <summary><b>Using Gemini Code Assist</b></summary> <br> The full guide for Gemini Code Assist can be found on our [documentation page](https://developers.google.com/gemini-code-assist/docs/review-github-code), here are some quick tips. <b>Invoking Gemini</b> You can request assistance from Gemini at any point by creating a comment using either `/gemini <command>` or `@gemini-code-assist <command>`. Below is a summary of the supported commands on the current page. Feature | Command | Description --- | --- | --- Code Review | `/gemini review` | Performs a code review for the current pull request in its current state. Pull Request Summary | `/gemini summary` | Provides a summary of the current pull request in its current state. Comment | @gemini-code-assist | Responds in comments when explicitly tagged, both in pull request comments and review comments. Help | `/gemini help` | Displays a list of available commands. <b>Customization</b> To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a `.gemini/` folder in the base of the repository. Detailed instructions can be found [here](https://developers.google.com/gemini-code-assist/docs/customize-gemini-behavior-github). <b>Limitations & Feedback</b> Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with :thumbsup: and :thumbsdown: on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up [here](https://google.qualtrics.com/jfe/form/SV_2cyuGuTWsEw84yG). <b>You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the [Gemini Code Assist IDE Extension](https://cloud.google.com/products/gemini/code-assist).</b> </details> [^1]: Review the [Privacy Notices](https://policies.google.com/privacy), [Generative AI Prohibited Use Policy](https://policies.google.com/terms/generative-ai/use-policy), [Terms of Service](https://policies.google.com/terms), and learn how to configure Gemini Code Assist in GitHub [here](https://developers.google.com/gemini-code-assist/docs/customize-gemini-behavior-github). Gemini can make mistakes, so double check it and [use code with caution](https://support.google.com/legal/answer/13505487).
gemini-code-assist[bot] (Migrated from github.com) reviewed 2025-10-04 09:47:59 +00:00
gemini-code-assist[bot] (Migrated from github.com) left a comment

Code Review

This pull request introduces a confirmation dialog for file and folder deletion, which is a great safety improvement. The implementation correctly uses the useConfirmation hook and provides context-specific messages for single files, single folders, and multiple items. My main feedback is to enhance the confirmation message for multiple-item deletions that include folders to be more explicit about deleting folder contents, further preventing accidental data loss.

## Code Review This pull request introduces a confirmation dialog for file and folder deletion, which is a great safety improvement. The implementation correctly uses the `useConfirmation` hook and provides context-specific messages for single files, single folders, and multiple items. My main feedback is to enhance the confirmation message for multiple-item deletions that include folders to be more explicit about deleting folder contents, further preventing accidental data loss.
@@ -587,54 +589,88 @@ function FileManagerContent({ initialHost, onClose }: FileManagerProps) {
async function handleDeleteFiles(files: FileItem[]) {
gemini-code-assist[bot] (Migrated from github.com) commented 2025-10-04 09:47:59 +00:00

medium

When multiple items are selected for deletion, the confirmation message is generic (Are you sure you want to permanently delete N items?). If the selection includes one or more folders, this message doesn't warn the user that deleting a folder also deletes all of its contents. This could lead to accidental data loss, which this PR aims to prevent.

To improve this, you could check if any of the selected items are directories and show a more specific warning. This would likely require a new translation key.

For example, you could adjust the logic like this:

    } else {
      const hasDirectory = files.some((file) => file.type === "directory");
      const translationKey = hasDirectory
        ? "fileManager.confirmDeleteMultipleItemsWithFolders" // New key needed
        : "fileManager.confirmDeleteMultipleItems";

      confirmMessage = t(translationKey, {
        count: files.length,
      });
    }

And the new translation key in translation.json could be:
"confirmDeleteMultipleItemsWithFolders": "Are you sure you want to permanently delete {{count}} items? This includes folders and their contents."

![medium](https://www.gstatic.com/codereviewagent/medium-priority.svg) When multiple items are selected for deletion, the confirmation message is generic (`Are you sure you want to permanently delete N items?`). If the selection includes one or more folders, this message doesn't warn the user that deleting a folder also deletes all of its contents. This could lead to accidental data loss, which this PR aims to prevent. To improve this, you could check if any of the selected items are directories and show a more specific warning. This would likely require a new translation key. For example, you could adjust the logic like this: ```typescript } else { const hasDirectory = files.some((file) => file.type === "directory"); const translationKey = hasDirectory ? "fileManager.confirmDeleteMultipleItemsWithFolders" // New key needed : "fileManager.confirmDeleteMultipleItems"; confirmMessage = t(translationKey, { count: files.length, }); } ``` And the new translation key in `translation.json` could be: `"confirmDeleteMultipleItemsWithFolders": "Are you sure you want to permanently delete {{count}} items? This includes folders and their contents."`
thorved (Migrated from github.com) reviewed 2025-10-04 10:00:26 +00:00
@@ -587,54 +589,88 @@ function FileManagerContent({ initialHost, onClose }: FileManagerProps) {
async function handleDeleteFiles(files: FileItem[]) {
thorved (Migrated from github.com) commented 2025-10-04 10:00:26 +00:00
image
<img width="1892" height="918" alt="image" src="https://github.com/user-attachments/assets/7934842d-fb9c-4ad0-8c87-702d0e6097a8" />
Sign in to join this conversation.