Move workflow dropdown to sidebar tab (#893)

* Initial move to sidebar

Remove broken CSS

Move action buttons

Migrate open workflows

Add basic browse

WIP

Add insert support

Remove legacy workflow manager

Remove unused CSS

Reorder

Remove legacy workflow UI

nit

* Support bookmark

Add workflow bookmark store

nit

Add back bookmark functionality

Correctly load bookmarks

nit

Fix many other issues

Fix this binding

style divider

* Extract tree leaf component

* Hide bookmark section when no bookmarks

* nit

* Fix save

* Add workflows searchbox

* Add search support

* Show total opened

* Add basic test

* Add more tests

* Fix redo/undo test

* Temporarily disable browser tab title test

browser_tests/ComfyPage.ts

@@ -1,4 +1,5 @@
-import type { Page, Locator } from '@playwright/test'
+import type { Page, Locator, APIRequestContext } from '@playwright/test'
+import { expect } from '@playwright/test'
 import { test as base } from '@playwright/test'
 import { expect } from '@playwright/test'
 import { ComfyAppMenu } from './helpers/appMenu'
@@ -97,9 +98,11 @@ class ComfyNodeSearchBox {
   }
 }
 
-class NodeLibrarySidebarTab {
-  public readonly tabId: string = 'node-library'
-  constructor(public readonly page: Page) {}
+class SidebarTab {
+  constructor(
+    public readonly page: Page,
+    public readonly tabId: string
+  ) {}
 
   get tabButton() {
     return this.page.locator(`.${this.tabId}-tab-button`)
@@ -111,6 +114,19 @@ class NodeLibrarySidebarTab {
     )
   }
 
+  async open() {
+    if (await this.selectedTabButton.isVisible()) {
+      return
+    }
+    await this.tabButton.click()
+  }
+}
+
+class NodeLibrarySidebarTab extends SidebarTab {
+  constructor(public readonly page: Page) {
+    super(page, 'node-library')
+  }
+
   get nodeLibrarySearchBoxInput() {
     return this.page.locator('.node-lib-search-box input[type="text"]')
   }
@@ -132,11 +148,7 @@ class NodeLibrarySidebarTab {
   }
 
   async open() {
-    if (await this.selectedTabButton.isVisible()) {
-      return
-    }
-
-    await this.tabButton.click()
+    await super.open()
     await this.nodeLibraryTree.waitFor({ state: 'visible' })
   }
 
@@ -166,6 +178,45 @@ class NodeLibrarySidebarTab {
   }
 }
 
+class WorkflowsSidebarTab extends SidebarTab {
+  constructor(public readonly page: Page) {
+    super(page, 'workflows')
+  }
+
+  get newBlankWorkflowButton() {
+    return this.page.locator('.new-blank-workflow-button')
+  }
+
+  get browseWorkflowsButton() {
+    return this.page.locator('.browse-workflows-button')
+  }
+
+  get newDefaultWorkflowButton() {
+    return this.page.locator('.new-default-workflow-button')
+  }
+
+  async getOpenedWorkflowNames() {
+    return await this.page
+      .locator('.comfyui-workflows-open .node-label')
+      .allInnerTexts()
+  }
+
+  async getTopLevelSavedWorkflowNames() {
+    return await this.page
+      .locator('.comfyui-workflows-browse .node-label')
+      .allInnerTexts()
+  }
+
+  async switchToWorkflow(workflowName: string) {
+    const workflowLocator = this.page.locator(
+      '.comfyui-workflows-open .node-label',
+      { hasText: workflowName }
+    )
+    await workflowLocator.click()
+    await this.page.waitForTimeout(300)
+  }
+}
+
 class ComfyMenu {
   public readonly sideToolbar: Locator
   public readonly themeToggleButton: Locator
@@ -198,6 +249,10 @@ class ComfyMenu {
     return new NodeLibrarySidebarTab(this.page)
   }
 
+  get workflowsTab() {
+    return new WorkflowsSidebarTab(this.page)
+  }
+
   async toggleTheme() {
     await this.themeToggleButton.click()
     await this.page.evaluate(() => {
@@ -222,6 +277,10 @@ class ComfyMenu {
   }
 }
 
+type FolderStructure = {
+  [key: string]: FolderStructure | string
+}
+
 export class ComfyPage {
   public readonly url: string
   // All canvas position operations are based on default view of canvas.
@@ -240,7 +299,10 @@ export class ComfyPage {
   public readonly menu: ComfyMenu
   public readonly appMenu: ComfyAppMenu
 
-  constructor(public readonly page: Page) {
+  constructor(
+    public readonly page: Page,
+    public readonly request: APIRequestContext
+  ) {
     this.url = process.env.PLAYWRIGHT_TEST_URL || 'http://localhost:8188'
     this.canvas = page.locator('#graph-canvas')
     this.widgetTextBox = page.getByPlaceholder('text').nth(1)
@@ -252,13 +314,46 @@ export class ComfyPage {
     this.appMenu = new ComfyAppMenu(page)
   }
 
+  convertLeafToContent(structure: FolderStructure): FolderStructure {
+    const result: FolderStructure = {}
+
+    for (const [key, value] of Object.entries(structure)) {
+      if (typeof value === 'string') {
+        const filePath = this.assetPath(value)
+        result[key] = fs.readFileSync(filePath, 'utf-8')
+      } else {
+        result[key] = this.convertLeafToContent(value)
+      }
+    }
+
+    return result
+  }
+
   async getGraphNodesCount(): Promise<number> {
     return await this.page.evaluate(() => {
       return window['app']?.graph?.nodes?.length || 0
     })
   }
 
-  async setup() {
+  async setupWorkflowsDirectory(structure: FolderStructure) {
+    const resp = await this.request.post(
+      `${this.url}/api/devtools/setup_folder_structure`,
+      {
+        data: {
+          tree_structure: this.convertLeafToContent(structure),
+          base_path: 'user/default/workflows'
+        }
+      }
+    )
+
+    if (resp.status() !== 200) {
+      throw new Error(
+        `Failed to setup workflows directory: ${await resp.text()}`
+      )
+    }
+  }
+
+  async setup({ resetView = true } = {}) {
     await this.goto()
     await this.page.evaluate(() => {
       localStorage.clear()
@@ -285,9 +380,11 @@ export class ComfyPage {
       window['app']['canvas'].show_info = false
     })
     await this.nextFrame()
-    // Reset view to force re-rendering of canvas. So that info fields like fps
-    // become hidden.
-    await this.resetView()
+    if (resetView) {
+      // Reset view to force re-rendering of canvas. So that info fields like fps
+      // become hidden.
+      await this.resetView()
+    }
 
     // Hide all badges by default.
     await this.setSetting('Comfy.NodeBadge.NodeIdBadgeMode', NodeBadgeMode.None)
@@ -630,6 +727,11 @@ export class ComfyPage {
     await this.nextFrame()
   }
 
+  async closeDialog() {
+    await this.page.locator('.p-dialog-close-button').click()
+    await expect(this.page.locator('.p-dialog')).toBeHidden()
+  }
+
   async resizeNode(
     nodePos: Position,
     nodeSize: Size,
@@ -903,8 +1005,8 @@ class NodeReference {
 }
 
 export const comfyPageFixture = base.extend<{ comfyPage: ComfyPage }>({
-  comfyPage: async ({ page }, use) => {
-    const comfyPage = new ComfyPage(page)
+  comfyPage: async ({ page, request }, use) => {
+    const comfyPage = new ComfyPage(page, request)
     await comfyPage.setup()
     await use(comfyPage)
   }