mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-03 12:42:01 +00:00
fix: add delete/bookmark actions for blueprints in V2 node library sidebar (#10827)
## Summary Add missing delete and bookmark actions for user blueprints in the V2 node library sidebar, fixing parity with the V1 sidebar. ## Changes - **What**: - Add delete button (inline + context menu) for user blueprints in `TreeExplorerV2Node` and `TreeExplorerV2` - Extract `isUserBlueprint()` helper in `subgraphStore` for DRY usage across V1/V2 sidebars  ## Review Focus - `isUserBlueprint` consolidates logic previously duplicated between `NodeTreeLeaf` and the new V2 components - Context menu guard `contextMenuNode?.data` prevents showing empty menus - Folder `@contextmenu` handler clears stale `contextMenuNode` to prevent wrong actions ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-10827-fix-add-delete-bookmark-actions-for-blueprints-in-V2-node-library-sidebar-3366d73d36508111afd2c2c7d8ff0220) by [Unito](https://www.unito.io)
This commit is contained in:
@@ -13,7 +13,7 @@ import TreeExplorerV2Node from './TreeExplorerV2Node.vue'
|
||||
const i18n = createI18n({
|
||||
legacy: false,
|
||||
locale: 'en',
|
||||
messages: { en: {} }
|
||||
messages: { en: { g: { delete: 'Delete' } } }
|
||||
})
|
||||
|
||||
vi.mock('@/platform/settings/settingStore', () => ({
|
||||
@@ -29,6 +29,17 @@ vi.mock('@/stores/nodeBookmarkStore', () => ({
|
||||
})
|
||||
}))
|
||||
|
||||
const mockDeleteBlueprint = vi.fn()
|
||||
const mockIsUserBlueprint = vi.fn().mockReturnValue(false)
|
||||
|
||||
vi.mock('@/stores/subgraphStore', () => ({
|
||||
useSubgraphStore: () => ({
|
||||
isUserBlueprint: mockIsUserBlueprint,
|
||||
deleteBlueprint: mockDeleteBlueprint,
|
||||
typePrefix: 'SubgraphBlueprint.'
|
||||
})
|
||||
}))
|
||||
|
||||
vi.mock('@/components/node/NodePreviewCard.vue', () => ({
|
||||
default: { template: '<div />' }
|
||||
}))
|
||||
@@ -175,8 +186,12 @@ describe('TreeExplorerV2Node', () => {
|
||||
expect(contextMenuNode.value).toEqual(nodeItem.value)
|
||||
})
|
||||
|
||||
it('does not set contextMenuNode for folder items', async () => {
|
||||
const contextMenuNode = ref<RenderedTreeExplorerNode | null>(null)
|
||||
it('clears contextMenuNode when right-clicking a folder', async () => {
|
||||
const contextMenuNode = ref<RenderedTreeExplorerNode | null>({
|
||||
key: 'stale',
|
||||
type: 'node',
|
||||
label: 'Stale'
|
||||
} as RenderedTreeExplorerNode)
|
||||
|
||||
const { wrapper } = mountComponent(
|
||||
{ item: createMockItem('folder') },
|
||||
@@ -194,6 +209,59 @@ describe('TreeExplorerV2Node', () => {
|
||||
})
|
||||
})
|
||||
|
||||
describe('blueprint actions', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks()
|
||||
})
|
||||
|
||||
it('shows delete button for user blueprints', () => {
|
||||
mockIsUserBlueprint.mockReturnValue(true)
|
||||
const { wrapper } = mountComponent({
|
||||
item: createMockItem('node', {
|
||||
data: { name: 'SubgraphBlueprint.test' }
|
||||
})
|
||||
})
|
||||
|
||||
expect(wrapper.find('[aria-label="Delete"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('hides delete button for non-blueprint nodes', () => {
|
||||
mockIsUserBlueprint.mockReturnValue(false)
|
||||
const { wrapper } = mountComponent({
|
||||
item: createMockItem('node', {
|
||||
data: { name: 'KSampler' }
|
||||
})
|
||||
})
|
||||
|
||||
expect(wrapper.find('[aria-label="Delete"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('always shows bookmark button', () => {
|
||||
mockIsUserBlueprint.mockReturnValue(true)
|
||||
const { wrapper } = mountComponent({
|
||||
item: createMockItem('node', {
|
||||
data: { name: 'SubgraphBlueprint.test' }
|
||||
})
|
||||
})
|
||||
|
||||
expect(wrapper.find('[aria-label="icon.bookmark"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('calls deleteBlueprint when delete button is clicked', async () => {
|
||||
mockIsUserBlueprint.mockReturnValue(true)
|
||||
const nodeName = 'SubgraphBlueprint.test'
|
||||
const { wrapper } = mountComponent({
|
||||
item: createMockItem('node', {
|
||||
data: { name: nodeName }
|
||||
})
|
||||
})
|
||||
|
||||
await wrapper.find('[aria-label="Delete"]').trigger('click')
|
||||
|
||||
expect(mockDeleteBlueprint).toHaveBeenCalledWith(nodeName)
|
||||
})
|
||||
})
|
||||
|
||||
describe('rendering', () => {
|
||||
it('renders node icon for node type', () => {
|
||||
const { wrapper } = mountComponent({
|
||||
|
||||
Reference in New Issue
Block a user