Execution Error Dialog Revamp (One click issue searching and filing) (#595)

* Add basic error dialog

* 2 level error report

* Add find issue button

* nit

* Add file issue button

* Single dialog

* nit

* Fix long text wrapping

* Merge component

* Test execution error dialog

Author: huchenlei

.github/workflows/test-ui.yaml

@@ -27,6 +27,11 @@ jobs:
       with:
         repository: "Comfy-Org/ComfyUI_frontend"
         path: "ComfyUI_frontend"
+    - name: Checkout ComfyUI_devtools
+      uses: actions/checkout@v4
+      with:
+        repository: "Comfy-Org/ComfyUI_devtools"
+        path: "ComfyUI/custom_nodes/ComfyUI_devtools"
     - name: Get commit message
       id: commit-message
       run: echo "::set-output name=message::$(git log -1 --pretty=%B)"

browser_tests/ComfyPage.ts

@@ -124,6 +124,7 @@ export class ComfyPage {
 
   // Buttons
   public readonly resetViewButton: Locator
+  public readonly queueButton: Locator
 
   // Inputs
   public readonly workflowUploadInput: Locator
@@ -137,6 +138,7 @@ export class ComfyPage {
     this.canvas = page.locator('#graph-canvas')
     this.widgetTextBox = page.getByPlaceholder('text').nth(1)
     this.resetViewButton = page.getByRole('button', { name: 'Reset View' })
+    this.queueButton = page.getByRole('button', { name: 'Queue Prompt' })
     this.workflowUploadInput = page.locator('#comfy-file-input')
     this.searchBox = new ComfyNodeSearchBox(page)
     this.menu = new ComfyMenu(page)

browser_tests/assets/execution_error.json

@@ -0,0 +1,82 @@
+{
+  "last_node_id": 17,
+  "last_link_id": 15,
+  "nodes": [
+    {
+      "id": 14,
+      "type": "PreviewImage",
+      "pos": [
+        858,
+        -41
+      ],
+      "size": {
+        "0": 213.8594970703125,
+        "1": 50.65289306640625
+      },
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "images",
+          "type": "IMAGE",
+          "link": 15
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "PreviewImage"
+      }
+    },
+    {
+      "id": 17,
+      "type": "DevToolsErrorRaiseNode",
+      "pos": [
+        477,
+        -40
+      ],
+      "size": {
+        "0": 210,
+        "1": 26
+      },
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": [
+            15
+          ],
+          "slot_index": 0,
+          "shape": 3
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "DevToolsErrorRaiseNode"
+      }
+    }
+  ],
+  "links": [
+    [
+      15,
+      17,
+      0,
+      14,
+      0,
+      "IMAGE"
+    ]
+  ],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1.2100000000000006,
+      "offset": [
+        -266.1038310281165,
+        337.94335447664554
+      ]
+    }
+  },
+  "version": 0.4
+}

browser_tests/loadWorkflowWarning.spec.ts renamed to browser_tests/dialog.spec.ts

@@ -12,3 +12,16 @@ test.describe('Load workflow warning', () => {
     await expect(missingNodesWarning).toBeVisible()
   })
 })
+
+test.describe('Execution error', () => {
+  test('Should display an error message when an execution error occurs', async ({
+    comfyPage
+  }) => {
+    await comfyPage.loadWorkflow('execution_error')
+    await comfyPage.queueButton.click()
+
+    // Wait for the element with the .comfy-execution-error selector to be visible
+    const executionError = comfyPage.page.locator('.comfy-error-report')
+    await expect(executionError).toBeVisible()
+  })
+})

package-lock.json

@@ -60,6 +60,7 @@
     "@primevue/themes": "^4.0.0-rc.2",
     "@vitejs/plugin-vue": "^5.0.5",
     "@vueuse/core": "^11.0.0",
+    "axios": "^1.7.4",
     "class-transformer": "^0.5.1",
     "dotenv": "^16.4.5",
     "fuse.js": "^7.0.0",

package.json

@@ -44,6 +44,7 @@ defineEmits(['action'])
 .no-results-placeholder :deep(.p-card) {
   background-color: var(--surface-ground);
   text-align: center;
+  box-shadow: unset;
 }
 
 .no-results-placeholder h3 {

src/components/common/NoResultsPlaceholder.vue

@@ -6,7 +6,7 @@
     closable
     closeOnEscape
     dismissableMask
-    :maximizable="dialogStore.props.maximizable ?? false"
+    :maximizable="maximizable"
     @hide="dialogStore.closeDialog"
     @maximize="maximized = true"
     @unmaximize="maximized = false"
@@ -19,20 +19,20 @@
       <h3 v-else>{{ dialogStore.title || ' ' }}</h3>
     </template>
 
-    <component
-      :is="dialogStore.component"
-      v-bind="dialogStore.props"
-      :maximized="maximized"
-    />
+    <component :is="dialogStore.component" v-bind="contentProps" />
   </Dialog>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { useDialogStore } from '@/stores/dialogStore'
 import Dialog from 'primevue/dialog'
 
 const dialogStore = useDialogStore()
-
+const maximizable = dialogStore.props.maximizable ?? false
 const maximized = ref(false)
+const contentProps = computed(() => ({
+  ...dialogStore.props,
+  ...(dialogStore.props.maximizable ? { maximized } : {})
+}))
 </script>