refactor(FR-2848): use DeleteFilled for permanent delete, DeleteOutlined for trash#7314
Merged
graphite-app[bot] merged 1 commit intoMay 8, 2026
Conversation
Member
Author
How to use the Graphite Merge QueueAdd either label to this PR to merge it via the merge queue:
You must have a Graphite account in order to use the merge queue. Sign up using this link. An organization admin has required the Graphite Merge Queue in this repository. Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue. This stack of pull requests is managed by Graphite. Learn more about stacking. |
Contributor
Coverage Report for backend-ai-ui-coverage (./packages/backend.ai-ui)
File Coverage
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Contributor
Contributor
There was a problem hiding this comment.
Pull request overview
This PR standardizes destructive “permanent delete” affordances by switching UI delete icons from DeleteOutlined to DeleteFilled across multiple WebUI pages/components and the shared backend.ai-ui library stories/fragments.
Changes:
- Replaced
DeleteOutlinedwithDeleteFilledfor delete actions in WebUI tables, lists, and action menus. - Updated delete icons in shared UI fragment(s) and Storybook stories to match the new convention.
Reviewed changes
Copilot reviewed 22 out of 22 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| react/src/pages/ProjectAdminDeploymentsPage.tsx | Uses DeleteFilled for deployment delete action icon. |
| react/src/pages/EndpointDetailPage.tsx | Uses DeleteFilled for autoscaling rule delete icon in endpoint detail controls. |
| react/src/pages/AIAgentPage.tsx | Uses DeleteFilled for AI agent delete menu item icon. |
| react/src/components/UserResourcePolicyList.tsx | Uses DeleteFilled for user resource policy delete action icon. |
| react/src/components/UserCredentialList.tsx | Uses DeleteFilled for credential delete action icon. |
| react/src/components/ShellScriptEditModal.tsx | Uses DeleteFilled for script delete button icon. |
| react/src/components/ResourcePresetList.tsx | Uses DeleteFilled for resource preset delete action icon. |
| react/src/components/ResourceGroupList.tsx | Uses DeleteFilled for resource group delete action icon. |
| react/src/components/PrometheusQueryPresetNodes.tsx | Uses DeleteFilled for Prometheus preset delete action icon. |
| react/src/components/ProjectResourcePolicyList.tsx | Uses DeleteFilled for project resource policy delete action icon. |
| react/src/components/KeypairResourcePolicyList.tsx | Uses DeleteFilled for keypair resource policy delete action icon. |
| react/src/components/ErrorLogList.tsx | Uses DeleteFilled for “clear logs” action icon. |
| react/src/components/EndpointList.tsx | Uses DeleteFilled for endpoint delete action icon. |
| react/src/components/DeploymentList.tsx | Uses DeleteFilled for deployment delete action icon. |
| react/src/components/DeploymentAccessTokensTab.tsx | Uses DeleteFilled for access token delete action icon. |
| react/src/components/CustomizedImageList.tsx | Uses DeleteFilled for customized image delete control icon. |
| react/src/components/ContainerRegistryList.tsx | Uses DeleteFilled for container registry delete action icon. |
| react/src/components/AutoScalingRuleListLegacy.tsx | Uses DeleteFilled for legacy autoscaling rule delete button icon. |
| react/src/components/AutoScalingRuleList.tsx | Uses DeleteFilled for autoscaling rule delete action icon. |
| packages/backend.ai-ui/src/components/fragments/BAIProjectTable.tsx | Uses DeleteFilled for project purge icon in project table controls. |
| packages/backend.ai-ui/src/components/BAIDeleteConfirmModal.stories.tsx | Updates Storybook examples to use DeleteFilled for delete buttons. |
| packages/backend.ai-ui/src/components/BAIConfirmModalWithInput.stories.tsx | Updates Storybook custom icon example to DeleteFilled. |
yomybaby
force-pushed
the
11-08-refactor_fr-2848_use_deletefilled_for_permanent_delete
branch
from
bc81571 to
a29d5b1
Compare
Merge activity
|
…ned for trash (#7314) Resolves #7311(FR-2848) ## Summary Standardize trash-bin icon semantics across the entire WebUI: - **`DeleteFilled`** = permanent / irreversible delete - **`DeleteOutlined`** = move to trash / soft delete / reversible form-row removal This is an icon-only refactor. No behavior, mutation, confirmation modal, or i18n string is changed. ## Changes ### `BAITrashBinIcon` retirement The custom `BAITrashBinIcon` (a filled silhouette SVG) was previously used for both reversible "Move to Trash" actions (e.g. `data.folders.MoveToTrash`) and irreversible "Delete forever" actions, which made the two visually indistinguishable. It is now replaced everywhere by the standard antd `DeleteOutlined` / `DeleteFilled` pair so the semantic is unambiguous at a glance. The `BAITrashBinIcon` component file itself is **kept** in `backend.ai-ui` for potential future use as a "Trash location" indicator (page header, tab label, sidebar destination), but no longer has any active usage. ### Switched `DeleteOutlined` → `DeleteFilled` (permanent delete) | File | Justification | |---|---| | `react/src/components/AutoScalingRuleList.tsx` | `DeleteAutoScalingRuleInput` mutation | | `react/src/components/AutoScalingRuleListLegacy.tsx` | `delete_endpoint_auto_scaling_rule_node` | | `react/src/components/ContainerRegistryList.tsx` | `BAIConfirmModalWithInput` typed-confirmation flow | | `react/src/components/CustomizedImageList.tsx` | `untag_image_from_registry` | | `react/src/components/DeploymentAccessTokensTab.tsx` | `DeploymentAccessTokensTabDeleteMutation` | | `react/src/components/DeploymentList.tsx` | `DeleteDeploymentInput` | | `react/src/components/EndpointList.tsx` | terminate endpoint | | `react/src/components/ErrorLogList.tsx` | clear all error logs (irrecoverable from UI) | | `react/src/components/KeypairResourcePolicyList.tsx` | policy delete | | `react/src/components/ProjectResourcePolicyList.tsx` | policy delete | | `react/src/components/PrometheusQueryPresetNodes.tsx` | preset delete | | `react/src/components/ResourceGroupList.tsx` | resource group delete | | `react/src/components/ResourcePresetList.tsx` | preset delete | | `react/src/components/ShellScriptEditModal.tsx` | typed-confirmation delete | | `react/src/components/UserCredentialList.tsx` | credential delete | | `react/src/components/UserResourcePolicyList.tsx` | policy delete | | `react/src/pages/AIAgentPage.tsx` | agent delete | | `react/src/pages/EndpointDetailPage.tsx` | auto-scaling rule delete | | `react/src/pages/ProjectAdminDeploymentsPage.tsx` | deployment delete | ### Switched `BAITrashBinIcon` → `DeleteFilled` (permanent delete) | File | Justification | |---|---| | `packages/backend.ai-ui/src/components/fragments/BAIArtifactRevisionDeleteButton.tsx` | revision permanent delete (`reservoirPage.RemoveThisVersion`) | | `packages/backend.ai-ui/src/components/baiClient/FileExplorer/FileItemControls.tsx` | single-file delete in VFolder file explorer (no trash for files) | | `packages/backend.ai-ui/src/components/baiClient/FileExplorer/ExplorerActionControls.tsx` | bulk file delete in file explorer | | `react/src/components/UserManagement.tsx` | `credential.PermanentlyDelete` + bulk delete | | `react/src/components/AdminDeploymentPresetNodes.tsx` | preset delete (`button.Delete`) | | `react/src/components/RoleAssignmentTab.tsx` | `rbac.RevokeUser` + danger button | | `react/src/components/RolePermissionTab.tsx` | `rbac.RemovePermission` | | `react/src/pages/AdminModelCardListPage.tsx` | model card delete + bulk delete | | `react/src/pages/RBACManagementPage.tsx` | `rbac.PurgeRole` | | `react/src/components/VFolderNodes.tsx` (line 205) | `data.folders.Delete` (delete-from-trash, permanent) | | `react/src/components/VFolderNodesV2.tsx` (line 204) | `data.folders.Delete` (delete-from-trash, permanent) | ### Switched `BAITrashBinIcon` → `DeleteOutlined` (move to trash) | File | Justification | |---|---| | `packages/backend.ai-ui/src/components/fragments/BAIVFolderDeleteButton.tsx` | always rendered under `Tooltip title="data.folders.MoveToTrash"` | | `packages/backend.ai-ui/src/components/fragments/BAIVFolderDeleteButtonV2.tsx` | always rendered under `Tooltip title="data.folders.MoveToTrash"` | | `react/src/components/VFolderNodes.tsx` (line 169) | `data.folders.MoveToTrash` row action | | `react/src/components/VFolderNodesV2.tsx` (line 163) | `data.folders.MoveToTrash` row action | ### Files left unchanged (kept `DeleteOutlined`) | File | Justification | |---|---| | `react/src/components/RoleFormModal.tsx` | `Form.List` row removal — reversible while form is unsubmitted | | `react/src/components/ManageAppsModal.tsx` | `Form.List` row removal — reversible while form is unsubmitted | | `packages/backend.ai-ui/src/components/Table/BAINameActionCell.stories.tsx` | abstract demo story; intentionally generic | ### Storybook - `BAIConfirmModalWithInput.stories.tsx` and `BAIDeleteConfirmModal.stories.tsx` updated to use `DeleteFilled` so the trigger reflects the new convention (these modals exclusively front permanent-delete flows). ### Other - `packages/backend.ai-ui/src/components/fragments/BAIProjectTable.tsx` already uses `DeleteFilled` for the project Purge action (paired with a `BanIcon` for the reversible Inactivate). No icon change here, included for consistency reference. ## Out-of-scope follow-ups The following call sites still use `Popconfirm` or `modal.confirm` for permanent deletion instead of `BAIConfirmModalWithInput`. They are flagged here for a follow-up; the icon swap is correct, but the modal type should also migrate per `.claude/rules/destructive-confirmation.md`: - `AutoScalingRuleListLegacy.tsx` (Popconfirm L183-255) - `UserCredentialList.tsx` (modal.confirm L413) - `EndpointDetailPage.tsx` (Popconfirm L1115-1192) - `AutoScalingRuleList.tsx` (modal.confirm L513) - `ResourceGroupList.tsx` (modal.confirm L157) - `BAIProjectTable.tsx` purge (uses `modal.confirm`) ## Test Plan - [x] `bash scripts/verify.sh`: Relay PASS, Lint PASS, Format PASS. TypeScript fails only on pre-existing errors in `packages/backend.ai-client/src/client.ts` and `react/src/components/DeleteForeverVFolderModalV2.tsx` — both reproduce on a clean `main` checkout and are unrelated to this PR. - [ ] Visual spot-check on dev server: filled trash for permanent delete, outlined trash for move-to-trash.
graphite-app
Bot
force-pushed
the
11-08-refactor_fr-2848_use_deletefilled_for_permanent_delete
branch
from
a29d5b1 to
305eab2
Compare
graphite-app
Bot
deleted the
11-08-refactor_fr-2848_use_deletefilled_for_permanent_delete
branch
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Resolves #7311(FR-2848)
Summary
Standardize trash-bin icon semantics across the entire WebUI:
DeleteFilled= permanent / irreversible deleteDeleteOutlined= move to trash / soft delete / reversible form-row removalThis is an icon-only refactor. No behavior, mutation, confirmation modal, or i18n string is changed.
Changes
BAITrashBinIconretirementThe custom
BAITrashBinIcon(a filled silhouette SVG) was previously used for both reversible "Move to Trash" actions (e.g.data.folders.MoveToTrash) and irreversible "Delete forever" actions, which made the two visually indistinguishable. It is now replaced everywhere by the standard antdDeleteOutlined/DeleteFilledpair so the semantic is unambiguous at a glance.The
BAITrashBinIconcomponent file itself is kept inbackend.ai-uifor potential future use as a "Trash location" indicator (page header, tab label, sidebar destination), but no longer has any active usage.Switched
DeleteOutlined→DeleteFilled(permanent delete)react/src/components/AutoScalingRuleList.tsxDeleteAutoScalingRuleInputmutationreact/src/components/AutoScalingRuleListLegacy.tsxdelete_endpoint_auto_scaling_rule_nodereact/src/components/ContainerRegistryList.tsxBAIConfirmModalWithInputtyped-confirmation flowreact/src/components/CustomizedImageList.tsxuntag_image_from_registryreact/src/components/DeploymentAccessTokensTab.tsxDeploymentAccessTokensTabDeleteMutationreact/src/components/DeploymentList.tsxDeleteDeploymentInputreact/src/components/EndpointList.tsxreact/src/components/ErrorLogList.tsxreact/src/components/KeypairResourcePolicyList.tsxreact/src/components/ProjectResourcePolicyList.tsxreact/src/components/PrometheusQueryPresetNodes.tsxreact/src/components/ResourceGroupList.tsxreact/src/components/ResourcePresetList.tsxreact/src/components/ShellScriptEditModal.tsxreact/src/components/UserCredentialList.tsxreact/src/components/UserResourcePolicyList.tsxreact/src/pages/AIAgentPage.tsxreact/src/pages/EndpointDetailPage.tsxreact/src/pages/ProjectAdminDeploymentsPage.tsxSwitched
BAITrashBinIcon→DeleteFilled(permanent delete)packages/backend.ai-ui/src/components/fragments/BAIArtifactRevisionDeleteButton.tsxreservoirPage.RemoveThisVersion)packages/backend.ai-ui/src/components/baiClient/FileExplorer/FileItemControls.tsxpackages/backend.ai-ui/src/components/baiClient/FileExplorer/ExplorerActionControls.tsxreact/src/components/UserManagement.tsxcredential.PermanentlyDelete+ bulk deletereact/src/components/AdminDeploymentPresetNodes.tsxbutton.Delete)react/src/components/RoleAssignmentTab.tsxrbac.RevokeUser+ danger buttonreact/src/components/RolePermissionTab.tsxrbac.RemovePermissionreact/src/pages/AdminModelCardListPage.tsxreact/src/pages/RBACManagementPage.tsxrbac.PurgeRolereact/src/components/VFolderNodes.tsx(line 205)data.folders.Delete(delete-from-trash, permanent)react/src/components/VFolderNodesV2.tsx(line 204)data.folders.Delete(delete-from-trash, permanent)Switched
BAITrashBinIcon→DeleteOutlined(move to trash)packages/backend.ai-ui/src/components/fragments/BAIVFolderDeleteButton.tsxTooltip title="data.folders.MoveToTrash"packages/backend.ai-ui/src/components/fragments/BAIVFolderDeleteButtonV2.tsxTooltip title="data.folders.MoveToTrash"react/src/components/VFolderNodes.tsx(line 169)data.folders.MoveToTrashrow actionreact/src/components/VFolderNodesV2.tsx(line 163)data.folders.MoveToTrashrow actionFiles left unchanged (kept
DeleteOutlined)react/src/components/RoleFormModal.tsxForm.Listrow removal — reversible while form is unsubmittedreact/src/components/ManageAppsModal.tsxForm.Listrow removal — reversible while form is unsubmittedpackages/backend.ai-ui/src/components/Table/BAINameActionCell.stories.tsxStorybook
BAIConfirmModalWithInput.stories.tsxandBAIDeleteConfirmModal.stories.tsxupdated to useDeleteFilledso the trigger reflects the new convention (these modals exclusively front permanent-delete flows).Other
packages/backend.ai-ui/src/components/fragments/BAIProjectTable.tsxalready usesDeleteFilledfor the project Purge action (paired with aBanIconfor the reversible Inactivate). No icon change here, included for consistency reference.Out-of-scope follow-ups
The following call sites still use
Popconfirmormodal.confirmfor permanent deletion instead ofBAIConfirmModalWithInput. They are flagged here for a follow-up; the icon swap is correct, but the modal type should also migrate per.claude/rules/destructive-confirmation.md:AutoScalingRuleListLegacy.tsx(Popconfirm L183-255)UserCredentialList.tsx(modal.confirm L413)EndpointDetailPage.tsx(Popconfirm L1115-1192)AutoScalingRuleList.tsx(modal.confirm L513)ResourceGroupList.tsx(modal.confirm L157)BAIProjectTable.tsxpurge (usesmodal.confirm)Test Plan
bash scripts/verify.sh: Relay PASS, Lint PASS, Format PASS. TypeScript fails only on pre-existing errors inpackages/backend.ai-client/src/client.tsandreact/src/components/DeleteForeverVFolderModalV2.tsx— both reproduce on a cleanmaincheckout and are unrelated to this PR.