Add support for search aliases on subgraphs (#8608)

## Summary

- add commands for setting search aliases and description when in
subgraph
- in future we can add these fields to the dialog when publishing a
subgraph
- map workflow extra metadata on save/load from from/to subgraph node to
allow access via `canvas.subgraph.extra`

## Changes

**What**: 
- new core commands for Comfy.Subgraph.SetSearchAliases &
Comfy.Subgraph.SetDescription to be called when in a subgraph context
- update Publish command to allow command metadata arg for name
- update test executeCommand to allow passing metadata arg

## Review Focus

- When saving a subgraph, the outer workflow "wrapper" is created at the
point of publishing. So unlike a normal workflow `extra` property that
is available at any point, for a subgraph this is not accessible.
To workaround this, the `extra` property that exists on the inner
subgraph node is copied to the top level on save, and restored on load
so extra properties can be set via `canvas.subgraph.extra`.
- I have kept the existing naming format matching `BlueprintDescription`
for `BlueprintSearchAliases` but i'm not sure if the description was
ever used before

## Screenshots


https://github.com/user-attachments/assets/4d4df9c1-2281-4589-aa56-ab07cdecd353

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8608-Add-support-for-search-aliases-on-subgraphs-2fd6d73d365081d083caebd6befcacdd)
by [Unito](https://www.unito.io)


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Set subgraph search aliases (comma-separated) and descriptions;
aliases enable discovery by alternative names.
  * Publish subgraphs using a provided name.
* Node definitions now support search aliases so nodes can be found by
alternate names.
  * UI strings added for entering descriptions and search aliases.

* **Tests**
* Added end-to-end and unit tests covering aliases, descriptions, search
behavior, publishing, and persistence.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: pythongosssss

browser_tests/fixtures/components/ComfyNodeSearchBox.ts

@@ -80,4 +80,11 @@ export class ComfyNodeSearchBox {
   async removeFilter(index: number) {
     await this.filterChips.nth(index).locator('.p-chip-remove-icon').click()
   }
+
+  /**
+   * Returns a locator for a search result containing the specified text.
+   */
+  findResult(text: string): Locator {
+    return this.dropdown.locator('li').filter({ hasText: text })
+  }
 }

browser_tests/fixtures/helpers/CommandHelper.ts

@@ -5,10 +5,18 @@ import type { KeyCombo } from '../../../src/platform/keybindings/types'
 export class CommandHelper {
   constructor(private readonly page: Page) {}
 
-  async executeCommand(commandId: string): Promise<void> {
-    await this.page.evaluate((id: string) => {
-      return window.app!.extensionManager.command.execute(id)
-    }, commandId)
+  async executeCommand(
+    commandId: string,
+    metadata?: Record<string, unknown>
+  ): Promise<void> {
+    await this.page.evaluate(
+      ({ commandId, metadata }) => {
+        return window['app'].extensionManager.command.execute(commandId, {
+          metadata
+        })
+      },
+      { commandId, metadata }
+    )
   }
 
   async registerCommand(

browser_tests/tests/subgraphSearchAliases.spec.ts

@@ -0,0 +1,109 @@
+import { expect } from '@playwright/test'
+
+import type { ComfyPage } from '../fixtures/ComfyPage'
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+
+async function createSubgraphAndNavigateInto(comfyPage: ComfyPage) {
+  await comfyPage.workflow.loadWorkflow('default')
+  await comfyPage.nextFrame()
+
+  const ksampler = await comfyPage.nodeOps.getNodeRefById('3')
+  await ksampler.click('title')
+  await ksampler.convertToSubgraph()
+  await comfyPage.nextFrame()
+
+  const subgraphNodes =
+    await comfyPage.nodeOps.getNodeRefsByTitle('New Subgraph')
+  expect(subgraphNodes.length).toBe(1)
+  const subgraphNode = subgraphNodes[0]
+
+  await subgraphNode.navigateIntoSubgraph()
+  return subgraphNode
+}
+
+async function exitSubgraphAndPublish(
+  comfyPage: ComfyPage,
+  subgraphNode: Awaited<ReturnType<typeof createSubgraphAndNavigateInto>>,
+  blueprintName: string
+) {
+  await comfyPage.page.keyboard.press('Escape')
+  await comfyPage.nextFrame()
+
+  await subgraphNode.click('title')
+  await comfyPage.command.executeCommand('Comfy.PublishSubgraph', {
+    name: blueprintName
+  })
+
+  await expect(comfyPage.visibleToasts).toHaveCount(1, { timeout: 5000 })
+  await comfyPage.toast.closeToasts(1)
+}
+
+async function searchAndExpectResult(
+  comfyPage: ComfyPage,
+  searchTerm: string,
+  expectedResult: string
+) {
+  await comfyPage.command.executeCommand('Workspace.SearchBox.Toggle')
+  await expect(comfyPage.searchBox.input).toHaveCount(1)
+  await comfyPage.searchBox.input.fill(searchTerm)
+  await expect(comfyPage.searchBox.findResult(expectedResult)).toBeVisible({
+    timeout: 10000
+  })
+}
+
+test.describe('Subgraph Search Aliases', { tag: ['@subgraph'] }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.settings.setSetting('Comfy.NodeSearchBoxImpl', 'default')
+  })
+
+  test('Can set search aliases on subgraph and find via search', async ({
+    comfyPage
+  }) => {
+    const subgraphNode = await createSubgraphAndNavigateInto(comfyPage)
+
+    await comfyPage.command.executeCommand('Comfy.Subgraph.SetSearchAliases', {
+      aliases: 'qwerty,unicorn'
+    })
+
+    const blueprintName = `test-aliases-${Date.now()}`
+    await exitSubgraphAndPublish(comfyPage, subgraphNode, blueprintName)
+    await searchAndExpectResult(comfyPage, 'unicorn', blueprintName)
+  })
+
+  test('Can set description on subgraph', async ({ comfyPage }) => {
+    await createSubgraphAndNavigateInto(comfyPage)
+
+    await comfyPage.command.executeCommand('Comfy.Subgraph.SetDescription', {
+      description: 'This is a test description'
+    })
+    // Verify the description was set on the subgraph's extra
+    const description = await comfyPage.page.evaluate(() => {
+      const subgraph = window['app']!.canvas.subgraph
+      return (subgraph?.extra as Record<string, unknown>)?.BlueprintDescription
+    })
+    expect(description).toBe('This is a test description')
+  })
+
+  test('Search aliases persist after publish and reload', async ({
+    comfyPage
+  }) => {
+    const subgraphNode = await createSubgraphAndNavigateInto(comfyPage)
+
+    await comfyPage.command.executeCommand('Comfy.Subgraph.SetSearchAliases', {
+      aliases: 'dragon, fire breather'
+    })
+
+    const blueprintName = `test-persist-${Date.now()}`
+    await exitSubgraphAndPublish(comfyPage, subgraphNode, blueprintName)
+
+    // Reload the page to ensure aliases are persisted
+    await comfyPage.page.reload()
+    await comfyPage.page.waitForFunction(
+      () => window['app'] && window['app'].extensionManager
+    )
+    await comfyPage.nextFrame()
+
+    await searchAndExpectResult(comfyPage, 'dragon', blueprintName)
+  })
+})

src/composables/useCoreCommands.test.ts

@@ -68,8 +68,11 @@ vi.mock('@/platform/workflow/core/services/workflowService', () => ({
   useWorkflowService: vi.fn(() => ({}))
 }))
 
+const mockDialogService = vi.hoisted(() => ({
+  prompt: vi.fn()
+}))
 vi.mock('@/services/dialogService', () => ({
-  useDialogService: vi.fn(() => ({}))
+  useDialogService: vi.fn(() => mockDialogService)
 }))
 
 vi.mock('@/services/litegraphService', () => ({
@@ -84,14 +87,31 @@ vi.mock('@/stores/toastStore', () => ({
   useToastStore: vi.fn(() => ({}))
 }))
 
+const mockChangeTracker = vi.hoisted(() => ({
+  checkState: vi.fn()
+}))
+const mockWorkflowStore = vi.hoisted(() => ({
+  activeWorkflow: {
+    changeTracker: mockChangeTracker
+  }
+}))
 vi.mock('@/platform/workflow/management/stores/workflowStore', () => ({
-  useWorkflowStore: vi.fn(() => ({}))
+  useWorkflowStore: vi.fn(() => mockWorkflowStore)
 }))
 
 vi.mock('@/stores/subgraphStore', () => ({
   useSubgraphStore: vi.fn(() => ({}))
 }))
 
+vi.mock('@/renderer/core/canvas/canvasStore', () => ({
+  useCanvasStore: vi.fn(() => ({
+    getCanvas: () => app.canvas
+  })),
+  useTitleEditorStore: vi.fn(() => ({
+    titleEditorTarget: null
+  }))
+}))
+
 vi.mock('@/stores/workspace/colorPaletteStore', () => ({
   useColorPaletteStore: vi.fn(() => ({}))
 }))
@@ -155,11 +175,12 @@ describe('useCoreCommands', () => {
       findNodeById: vi.fn(),
       getNodeById: vi.fn(),
       setDirtyCanvas: vi.fn(),
-      sendActionToCanvas: vi.fn()
+      sendActionToCanvas: vi.fn(),
+      extra: {} as Record<string, unknown>
     } as Partial<typeof app.canvas.subgraph> as typeof app.canvas.subgraph
   }
 
-  const mockSubgraph = createMockSubgraph()
+  const mockSubgraph = createMockSubgraph()!
 
   function createMockSettingStore(
     getReturnValue: boolean
@@ -270,4 +291,138 @@ describe('useCoreCommands', () => {
       expect(api.dispatchCustomEvent).not.toHaveBeenCalled()
     })
   })
+
+  describe('Subgraph metadata commands', () => {
+    beforeEach(() => {
+      mockSubgraph.extra = {}
+      vi.clearAllMocks()
+    })
+
+    describe('SetDescription command', () => {
+      it('should do nothing when not in subgraph', async () => {
+        app.canvas.subgraph = undefined
+
+        const commands = useCoreCommands()
+        const setDescCommand = commands.find(
+          (cmd) => cmd.id === 'Comfy.Subgraph.SetDescription'
+        )!
+
+        await setDescCommand.function()
+
+        expect(mockDialogService.prompt).not.toHaveBeenCalled()
+      })
+
+      it('should set description on subgraph.extra', async () => {
+        app.canvas.subgraph = mockSubgraph
+        mockDialogService.prompt.mockResolvedValue('Test description')
+
+        const commands = useCoreCommands()
+        const setDescCommand = commands.find(
+          (cmd) => cmd.id === 'Comfy.Subgraph.SetDescription'
+        )!
+
+        await setDescCommand.function()
+
+        expect(mockDialogService.prompt).toHaveBeenCalled()
+        expect(mockSubgraph.extra.BlueprintDescription).toBe('Test description')
+        expect(mockChangeTracker.checkState).toHaveBeenCalled()
+      })
+
+      it('should not set description when user cancels', async () => {
+        app.canvas.subgraph = mockSubgraph
+        mockDialogService.prompt.mockResolvedValue(null)
+
+        const commands = useCoreCommands()
+        const setDescCommand = commands.find(
+          (cmd) => cmd.id === 'Comfy.Subgraph.SetDescription'
+        )!
+
+        await setDescCommand.function()
+
+        expect(mockSubgraph.extra.BlueprintDescription).toBeUndefined()
+        expect(mockChangeTracker.checkState).not.toHaveBeenCalled()
+      })
+    })
+
+    describe('SetSearchAliases command', () => {
+      it('should do nothing when not in subgraph', async () => {
+        app.canvas.subgraph = undefined
+
+        const commands = useCoreCommands()
+        const setAliasesCommand = commands.find(
+          (cmd) => cmd.id === 'Comfy.Subgraph.SetSearchAliases'
+        )!
+
+        await setAliasesCommand.function()
+
+        expect(mockDialogService.prompt).not.toHaveBeenCalled()
+      })
+
+      it('should set search aliases on subgraph.extra', async () => {
+        app.canvas.subgraph = mockSubgraph
+        mockDialogService.prompt.mockResolvedValue('alias1, alias2, alias3')
+
+        const commands = useCoreCommands()
+        const setAliasesCommand = commands.find(
+          (cmd) => cmd.id === 'Comfy.Subgraph.SetSearchAliases'
+        )!
+
+        await setAliasesCommand.function()
+
+        expect(mockDialogService.prompt).toHaveBeenCalled()
+        expect(mockSubgraph.extra.BlueprintSearchAliases).toEqual([
+          'alias1',
+          'alias2',
+          'alias3'
+        ])
+        expect(mockChangeTracker.checkState).toHaveBeenCalled()
+      })
+
+      it('should trim whitespace and filter empty strings', async () => {
+        app.canvas.subgraph = mockSubgraph
+        mockDialogService.prompt.mockResolvedValue('  alias1  ,  , alias2 ,  ')
+
+        const commands = useCoreCommands()
+        const setAliasesCommand = commands.find(
+          (cmd) => cmd.id === 'Comfy.Subgraph.SetSearchAliases'
+        )!
+
+        await setAliasesCommand.function()
+
+        expect(mockSubgraph.extra.BlueprintSearchAliases).toEqual([
+          'alias1',
+          'alias2'
+        ])
+      })
+
+      it('should set undefined when empty input', async () => {
+        app.canvas.subgraph = mockSubgraph
+        mockDialogService.prompt.mockResolvedValue('')
+
+        const commands = useCoreCommands()
+        const setAliasesCommand = commands.find(
+          (cmd) => cmd.id === 'Comfy.Subgraph.SetSearchAliases'
+        )!
+
+        await setAliasesCommand.function()
+
+        expect(mockSubgraph.extra.BlueprintSearchAliases).toBeUndefined()
+      })
+
+      it('should not set aliases when user cancels', async () => {
+        app.canvas.subgraph = mockSubgraph
+        mockDialogService.prompt.mockResolvedValue(null)
+
+        const commands = useCoreCommands()
+        const setAliasesCommand = commands.find(
+          (cmd) => cmd.id === 'Comfy.Subgraph.SetSearchAliases'
+        )!
+
+        await setAliasesCommand.function()
+
+        expect(mockSubgraph.extra.BlueprintSearchAliases).toBeUndefined()
+        expect(mockChangeTracker.checkState).not.toHaveBeenCalled()
+      })
+    })
+  })
 })