Skip to content

feat(InputUpload ): 增加删除前确认属性ShowDeleteConfirmButton#8028

Open
Tony-ST0754 wants to merge 2 commits into
mainfrom
feat-InputUpload-deleteconfirm
Open

feat(InputUpload ): 增加删除前确认属性ShowDeleteConfirmButton#8028
Tony-ST0754 wants to merge 2 commits into
mainfrom
feat-InputUpload-deleteconfirm

Conversation

@Tony-ST0754
Copy link
Copy Markdown
Collaborator

@Tony-ST0754 Tony-ST0754 commented May 20, 2026

feat(InputUpload ): 增加删除前确认属性ShowDeleteConfirmButton

Link issues

fixes #8027

问题描述 / Problem Description

InputUpload组件目前删除时,没有提示是否确认删除,会直接执行删除回调代码,通过新增ShowDeleteConfirmButton后控制在删除前给予确认提示?(原则上,任何删除前必须给予用户确认交互,以防止误点删除)

解决方案 / Solution

新增ShowDeleteConfirmButton给予用户确认交互,该属性依赖于ShowDeleteButton属性,当ShowDeleteButton属性为trueShowDeleteConfirmButton属性才会生交

影响范围 / Impact

对老版本用户无任何影响

Summary by Sourcery

Add optional delete confirmation support to the InputUpload component to prevent accidental file removal.

New Features:

  • Introduce a ShowDeleteConfirmButton option on InputUpload to show a confirmation dialog before deleting files.
  • Allow customization of the delete confirmation dialog button icons, colors, texts, and content for InputUpload.

Tests:

  • Add unit test coverage for the new delete confirmation behavior on InputUpload.

feat(InputUpload ): 增加删除前确认属性ShowDeleteConfirmButton
@bb-auto
Copy link
Copy Markdown

bb-auto Bot commented May 20, 2026

Thanks for your PR, @Tony-ST0754. Someone from the team will get assigned to your PR shortly and we'll get it reviewed.

@bb-auto bb-auto Bot added the enhancement New feature or request label May 20, 2026
@bb-auto bb-auto Bot requested a review from ArgoZhang May 20, 2026 09:37
@sourcery-ai
Copy link
Copy Markdown
Contributor

sourcery-ai Bot commented May 20, 2026

Reviewer's Guide

Adds an optional delete-confirmation workflow to the InputUpload component by introducing a ShowDeleteConfirmButton flag and associated PopConfirmButton configuration parameters, while preserving existing delete behavior when the flag is disabled.

Sequence diagram for InputUpload delete with optional confirmation

sequenceDiagram
    actor User
    participant InputUpload
    participant PopConfirmButton
    participant Button
    participant TriggerDeleteFile

    User->>InputUpload: click delete
    alt [ShowDeleteButton && ShowDeleteConfirmButton]
        InputUpload->>PopConfirmButton: render PopConfirmButton
        User->>PopConfirmButton: click confirm
        PopConfirmButton->>TriggerDeleteFile: OnConfirm async ()=>TriggerDeleteFile()
    else [ShowDeleteButton && !ShowDeleteConfirmButton]
        InputUpload->>Button: render Button
        User->>Button: click
        Button->>TriggerDeleteFile: OnClick TriggerDeleteFile
    end
Loading

File-Level Changes

Change Details Files
Add configurable delete confirmation support to InputUpload and wire it to the delete button when enabled.
  • Introduce ShowDeleteConfirmButton parameter to control whether deletion uses a confirmation popup, dependent on ShowDeleteButton being true
  • Add parameters to configure confirmation dialog behavior, including confirm icon, button color, confirm/cancel text, and content
  • Wrap the existing delete button with a PopConfirmButton when confirmation is enabled, invoking TriggerDeleteFile from the confirmation callback while keeping the original button path unchanged when disabled
src/BootstrapBlazor/Components/Upload/InputUpload.razor.cs
src/BootstrapBlazor/Components/Upload/InputUpload.razor
Add unit test coverage for the new delete confirmation behavior.
  • Render InputUpload with ShowDeleteConfirmButton and related properties set, then locate the PopConfirmButton child component
  • Assert the confirmation callback is wired and invoke it to ensure it can be executed without error
test/UnitTest/Components/UploadInputTest.cs

Assessment against linked issues

Issue Objective Addressed Explanation
#8027 Add a ShowDeleteConfirmButton parameter to the InputUpload component that controls whether a delete confirmation interaction is shown, and make it effective only when ShowDeleteButton is true.
#8027 Modify the InputUpload UI and behavior so that, when ShowDeleteConfirmButton is enabled, deletion occurs only after user confirmation (while preserving the existing immediate-delete behavior when it is disabled), and cover this behavior with tests.

Possibly linked issues


Tips and commands

Interacting with Sourcery

  • Trigger a new review: Comment @sourcery-ai review on the pull request.
  • Continue discussions: Reply directly to Sourcery's review comments.
  • Generate a GitHub issue from a review comment: Ask Sourcery to create an
    issue from a review comment by replying to it. You can also reply to a
    review comment with @sourcery-ai issue to create an issue from it.
  • Generate a pull request title: Write @sourcery-ai anywhere in the pull
    request title to generate a title at any time. You can also comment
    @sourcery-ai title on the pull request to (re-)generate the title at any time.
  • Generate a pull request summary: Write @sourcery-ai summary anywhere in
    the pull request body to generate a PR summary at any time exactly where you
    want it. You can also comment @sourcery-ai summary on the pull request to
    (re-)generate the summary at any time.
  • Generate reviewer's guide: Comment @sourcery-ai guide on the pull
    request to (re-)generate the reviewer's guide at any time.
  • Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
    pull request to resolve all Sourcery comments. Useful if you've already
    addressed all the comments and don't want to see them anymore.
  • Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
    request to dismiss all existing Sourcery reviews. Especially useful if you
    want to start fresh with a new review - don't forget to comment
    @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

  • Enable or disable review features such as the Sourcery-generated pull request
    summary, the reviewer's guide, and others.
  • Change the review language.
  • Add, remove or edit custom review instructions.
  • Adjust other review settings.

Getting Help

@bb-auto bb-auto Bot added this to the v10.6.0 milestone May 20, 2026
Copy link
Copy Markdown
Contributor

@sourcery-ai sourcery-ai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey - I've found 2 issues, and left some high level feedback:

  • In the PopConfirmButton usage, ConfirmButtonColor="DeleteConfirmButtonColor" is missing the @ prefix, so it will not bind to the component parameter and instead pass a literal string; this should be ConfirmButtonColor="@DeleteConfirmButtonColor" to work as intended.
  • Since TriggerDeleteFile is already asynchronous (as implied by the await and IsAsync="true"), you can simplify OnConfirm="@(async () => await TriggerDeleteFile())" to OnConfirm="TriggerDeleteFile" for cleaner markup and to avoid an extra async lambda allocation.
Prompt for AI Agents
Please address the comments from this code review:

## Overall Comments
- In the PopConfirmButton usage, `ConfirmButtonColor="DeleteConfirmButtonColor"` is missing the `@` prefix, so it will not bind to the component parameter and instead pass a literal string; this should be `ConfirmButtonColor="@DeleteConfirmButtonColor"` to work as intended.
- Since `TriggerDeleteFile` is already asynchronous (as implied by the `await` and `IsAsync="true"`), you can simplify `OnConfirm="@(async () => await TriggerDeleteFile())"` to `OnConfirm="TriggerDeleteFile"` for cleaner markup and to avoid an extra async lambda allocation.

## Individual Comments

### Comment 1
<location path="src/BootstrapBlazor/Components/Upload/InputUpload.razor" line_range="19" />
<code_context>
+            {
+                <PopConfirmButton Placement="Placement.Top" class="@RemoveButtonClassString"
+                                  ConfirmIcon="@DeleteConfirmButtonIcon"
+                                  ConfirmButtonColor="DeleteConfirmButtonColor"
+                                  ConfirmButtonText="@DeleteConfirmButtonText"
+                                  CloseButtonText="@DeleteCloseButtonText"
</code_context>
<issue_to_address>
**issue (bug_risk):** Bind `ConfirmButtonColor` as a parameter instead of passing the literal string.

Using `ConfirmButtonColor="DeleteConfirmButtonColor"` passes the string value, not the `DeleteConfirmButtonColor` parameter. To bind the parameter, use `ConfirmButtonColor="@DeleteConfirmButtonColor"`.
</issue_to_address>

### Comment 2
<location path="test/UnitTest/Components/UploadInputTest.cs" line_range="101-105" />
<code_context>
+            pb.Add(a => a.DeleteCloseButtonText, "cancel");
+        });
+
+        var button = cut.FindComponent<PopConfirmButton>();
+        Assert.NotNull(button);
+        Assert.NotNull(button.Instance.OnConfirm);
+
+        await cut.InvokeAsync(button.Instance.OnConfirm);
+    }
+
</code_context>
<issue_to_address>
**issue (testing):** Assert the actual delete behavior after invoking OnConfirm, not just the presence of the PopConfirmButton.

This test only checks that `PopConfirmButton` renders and `OnConfirm` is set, but not the effect of triggering it. After invoking `OnConfirm`, please assert that the delete behavior actually occurred (e.g., the file/filename is no longer rendered, and any delete callback or bound value change was invoked as expected). Otherwise the test may still pass even if the delete logic stops working.
</issue_to_address>

Sourcery is free for open source - if you like our reviews please consider sharing them ✨
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.

Comment thread src/BootstrapBlazor/Components/Upload/InputUpload.razor Outdated
Comment on lines +101 to +105
var button = cut.FindComponent<PopConfirmButton>();
Assert.NotNull(button);
Assert.NotNull(button.Instance.OnConfirm);

await cut.InvokeAsync(button.Instance.OnConfirm);
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

issue (testing): Assert the actual delete behavior after invoking OnConfirm, not just the presence of the PopConfirmButton.

This test only checks that PopConfirmButton renders and OnConfirm is set, but not the effect of triggering it. After invoking OnConfirm, please assert that the delete behavior actually occurred (e.g., the file/filename is no longer rendered, and any delete callback or bound value change was invoked as expected). Otherwise the test may still pass even if the delete logic stops working.

@codecov
Copy link
Copy Markdown

codecov Bot commented May 20, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.00%. Comparing base (dd38958) to head (95aea73).

Additional details and impacted files
@@            Coverage Diff            @@
##              main     #8028   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          766       766           
  Lines        34122     34134   +12     
  Branches      4692      4693    +1     
=========================================
+ Hits         34122     34134   +12     
Flag Coverage Δ
BB 100.00% <100.00%> (?)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Signed-off-by: Tony-ST0754 <6914529@qq.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat(InputUpload ): 增加删除前确认属性ShowDeleteConfirmButton

2 participants