This is an automated email from the ASF dual-hosted git repository. github-merge-queue[bot] pushed a commit to branch gh-readonly-queue/main/pr-7342-10c46f1e4d31893e5f9d12e7c19ff98e79932d04 in repository https://gitbox.apache.org/repos/asf/texera.git
commit 1b75787631ba4cae44473d2131168cd1d2ef1de3 Author: gupta-sahil01 <[email protected]> AuthorDate: Thu Aug 13 05:08:21 2026 +0000 feat(frontend): confirm before removing a package from an environment (#7342) <!-- Thanks for sending a pull request (PR)! Here are some tips for you: 1. If this is your first time, please read our contributor guidelines: [Contributing to Texera](https://github.com/apache/texera/blob/main/CONTRIBUTING.md) 2. Ensure you have added or run the appropriate tests for your PR 3. If the PR is work in progress, mark it a draft on GitHub. 4. Please write your PR title to summarize what this PR proposes, we are following Conventional Commits style for PR titles as well. 5. Be sure to keep the PR description updated to reflect all changes. --> ### What changes were proposed in this PR? Clicking the trash icon next to a package in the dashboard **Environments** page previously only marked the row (turned it red) via a `deleteToggle` flag; the row wasn't dropped until the user clicked Save. A trash icon implies immediate removal, so the interaction was ambiguous. This PR replaces that toggle with an `nz-popconfirm` on the trash button. On confirm the row is removed from the draft list; on cancel nothing changes. - `togglePackageDelete(pkg)` → `removePackage(index)`, which splices the row out of `currentDraft.newPackages` - Dropped the now-unused `deleteToggle` field from `PveUserPackageRow` and the `[class.highlighted-btn]` binding - `saveEnvironment()` no longer needs to skip `deleteToggle` rows, since removed rows are already gone from the draft Save behaviour is unchanged: it still sends the full package map and the backend performs the uninstall/install reconciliation as before. This is a UI-only change — no backend or API changes. Scoped deliberately to the dashboard Environments page ( `user-venv` ). The computing-unit panel ( `computing-unit-selection` ) still uses the mark-then-save pattern; happy to follow up there if that's wanted. <img width="1279" height="400" alt="image" src="https://github.com/user-attachments/assets/67e7e173-67bf-436d-9ec0-bb454af99580"; /> <!-- Please clarify what changes you are proposing. The purpose of this section is to outline the changes. Here are some tips for you: 1. If you propose a new API, clarify the use case for a new API. 2. If you fix a bug, you can clarify why it is a bug. 3. If it is a refactoring, clarify what has been changed. 3. It would be helpful to include a before-and-after comparison using screenshots or GIFs. 4. Please consider writing useful notes for better and faster reviews. --> ### Any related issues, documentation, discussions? Closes: #6937 Discussed in: #6725 <!-- Please use this section to link other resources if not mentioned already. 1. If this PR fixes an issue, please include `Fixes #1234`, `Resolves #1234` or `Closes #1234`. If it is only related, simply mention the issue number. 2. If there is design documentation, please add the link. 3. If there is a discussion in the mailing list, please add the link. --> ### How was this PR tested? Updated `user-venv.component.spec.ts`: replaced the `togglePackageDelete` test with two for `removePackage` (removes the row at the given index; no-op when there's no draft), and dropped the `deleteToggle` row from the save-path test. `cd frontend` `npx ng test --include src/app/dashboard/component/user/user-venv/user-venv.component.spec.ts --watch=false` 25 tests pass. Also verified manually: the confirm dialog appears on the trash icon, confirming removes only that row, cancelling leaves the list unchanged, and Save persists the remaining packages. <!-- If tests were added, say they were added here. Or simply mention that if the PR is tested with existing test cases. Make sure to include/update test cases that check the changes thoroughly including negative and positive cases if possible. If it was tested in a way different from regular unit tests, please clarify how you tested step by step, ideally copy and paste-able, so that other reviewers can test and check, and descendants can verify in the future. If tests were not added, please describe why they were not added and/or why it was difficult to add. --> ### Was this PR authored or co-authored using generative AI tooling? Generated-by: Claude <!-- If generative AI tooling has been used in the process of authoring this PR, please include the phrase: 'Generated-by: ' followed by the name of the tool and its version. If no, write 'No'. Please refer to the [ASF Generative Tooling Guidance](https://www.apache.org/legal/generative-tooling.html) for details. --> --------- Co-authored-by: Meng Wang <[email protected]> --- .../user/user-venv/user-venv.component.html | 5 ++-- .../user/user-venv/user-venv.component.spec.ts | 35 +++++++++++++++------- .../user/user-venv/user-venv.component.ts | 8 ++--- 3 files changed, 32 insertions(+), 16 deletions(-) diff --git a/frontend/src/app/dashboard/component/user/user-venv/user-venv.component.html b/frontend/src/app/dashboard/component/user/user-venv/user-venv.component.html index e29f9810af..833e3c8b30 100644 --- a/frontend/src/app/dashboard/component/user/user-venv/user-venv.component.html +++ b/frontend/src/app/dashboard/component/user/user-venv/user-venv.component.html @@ -157,8 +157,9 @@ nzType="default" nzShape="circle" nzDanger - [class.highlighted-btn]="pkg.deleteToggle" - (click)="togglePackageDelete(pkg)"> + nz-popconfirm + nzPopconfirmTitle="Confirm to delete this package." + (nzOnConfirm)="removePackage(i)"> <i nz-icon nzType="delete"></i> diff --git a/frontend/src/app/dashboard/component/user/user-venv/user-venv.component.spec.ts b/frontend/src/app/dashboard/component/user/user-venv/user-venv.component.spec.ts index c1807a3048..cdc5ed6605 100644 --- a/frontend/src/app/dashboard/component/user/user-venv/user-venv.component.spec.ts +++ b/frontend/src/app/dashboard/component/user/user-venv/user-venv.component.spec.ts @@ -201,12 +201,21 @@ describe("UserVenvComponent", () => { expect(component.currentDraft?.newPackages).toEqual([{ name: "", versionOp: "==", version: "" }]); }); - it("togglePackageDelete flips the deleteToggle flag", () => { - const pkg = { name: "x", versionOp: "==" as const, version: "1", deleteToggle: false }; - component.togglePackageDelete(pkg); - expect(pkg.deleteToggle).toBe(true); - component.togglePackageDelete(pkg); - expect(pkg.deleteToggle).toBe(false); + it("removePackage is a no-op when there is no draft", () => { + component.currentDraft = null; + expect(() => component.removePackage(0)).not.toThrow(); + }); + + it("removePackage removes the row at the given index", () => { + component.showPveModal(); + component.addPackage(); + component.addPackage(); + component.currentDraft!.newPackages[0].name = "x"; + component.currentDraft!.newPackages[1].name = "y"; + + component.removePackage(0); + + expect(component.currentDraft?.newPackages).toEqual([{ name: "y", versionOp: "==", version: "" }]); }); }); @@ -248,7 +257,7 @@ describe("UserVenvComponent", () => { expect(pveServiceSpy.savePve).not.toHaveBeenCalled(); }); - it("creates a new environment: formats versions, skips deleted/blank rows, then succeeds", () => { + it("creates a new environment: formats versions, skips blank rows, then succeeds", () => { component.currentDraft = { name: "envNew", newPackages: [ @@ -256,7 +265,6 @@ describe("UserVenvComponent", () => { { name: "b", versionOp: "==", version: "" }, { name: " ", versionOp: "==", version: "9" }, { name: "c", versionOp: "<=", version: " " }, - { name: "d", versionOp: "==", version: "2", deleteToggle: true }, ], }; component.pveModalVisible = true; @@ -265,7 +273,7 @@ describe("UserVenvComponent", () => { component.saveEnvironment(); - // blank-name row skipped, deleteToggle row skipped, empty/whitespace versions -> "", + // blank-name row skipped, empty/whitespace versions -> "", // non-empty version formatted as "<op><version>" expect(pveServiceSpy.savePve).toHaveBeenCalledWith("envNew", { a: ">=1.0", b: "", c: "" }); expect(pveServiceSpy.updateUserPve).not.toHaveBeenCalled(); @@ -490,8 +498,15 @@ describe("UserVenvComponent", () => { flushOverlay(); expect(component.currentDraft?.newPackages.length).toBe(2); + // The row delete button is behind a popconfirm: the first click only opens the + // popover, and the row survives until the confirm button is clicked. q<HTMLButtonElement>(o, ".package-row .user-package-inputs button").click(); - expect(component.currentDraft?.newPackages[0].deleteToggle).toBe(true); + flushOverlay(); + expect(component.currentDraft?.newPackages.length).toBe(2); + + q<HTMLButtonElement>(overlay(), ".ant-popover-buttons button.ant-btn-primary").click(); + flushOverlay(); + expect(component.currentDraft?.newPackages.length).toBe(1); footerButton(o, "Save").click(); expect(pveServiceSpy.savePve).toHaveBeenCalledWith("envDrive", {}); diff --git a/frontend/src/app/dashboard/component/user/user-venv/user-venv.component.ts b/frontend/src/app/dashboard/component/user/user-venv/user-venv.component.ts index 9ca9a5bf6f..f0f665f2f5 100644 --- a/frontend/src/app/dashboard/component/user/user-venv/user-venv.component.ts +++ b/frontend/src/app/dashboard/component/user/user-venv/user-venv.component.ts @@ -28,6 +28,7 @@ import { NzIconDirective } from "ng-zorro-antd/icon"; import { NzInputDirective } from "ng-zorro-antd/input"; import { NzModalComponent, NzModalContentDirective, NzModalService } from "ng-zorro-antd/modal"; import { NzOptionComponent, NzSelectComponent } from "ng-zorro-antd/select"; +import { NzPopconfirmDirective } from "ng-zorro-antd/popconfirm"; import { NzTooltipDirective } from "ng-zorro-antd/tooltip"; import { NotificationService } from "../../../../common/service/notification/notification.service"; @@ -40,7 +41,6 @@ type PveUserPackageRow = { name: string; versionOp: "==" | ">=" | "<="; version: string; - deleteToggle?: boolean; }; type PveDraft = { @@ -67,6 +67,7 @@ type PveDraft = { NzSelectComponent, NzOptionComponent, NzTooltipDirective, + NzPopconfirmDirective, ], }) export class UserVenvComponent implements OnInit { @@ -161,8 +162,8 @@ export class UserVenvComponent implements OnInit { this.currentDraft?.newPackages.push({ name: "", versionOp: "==", version: "" }); } - togglePackageDelete(pkg: PveUserPackageRow): void { - pkg.deleteToggle = !pkg.deleteToggle; + removePackage(index: number): void { + this.currentDraft?.newPackages.splice(index, 1); } saveEnvironment(): void { @@ -188,7 +189,6 @@ export class UserVenvComponent implements OnInit { const packages: Record<string, string> = {}; for (const row of draft.newPackages) { - if (row.deleteToggle) continue; const pkgName = row.name.trim(); if (!pkgName) continue; const pkgVersion = (row.version ?? "").trim();
