Replace window.alert with toast alert (#1112)

* Replace window.alert with toast alert

* Mock jest

src/scripts/app.ts

@@ -29,8 +29,7 @@ import {
   LGraphCanvas,
   LGraph,
   LGraphNode,
-  LiteGraph,
-  LGraphGroup
+  LiteGraph
 } from '@comfyorg/litegraph'
 import { StorageLocation } from '@/types/settingTypes'
 import { ExtensionManager } from '@/types/extensionTypes'
@@ -48,7 +47,7 @@ import {
 } from '@/services/dialogService'
 import { useSettingStore } from '@/stores/settingStore'
 import { useToastStore } from '@/stores/toastStore'
-import { ModelStore, useModelStore } from '@/stores/modelStore'
+import { useModelStore } from '@/stores/modelStore'
 import type { ToastMessageOptions } from 'primevue/toast'
 import { useWorkspaceStore } from '@/stores/workspaceStateStore'
 import { useExecutionStore } from '@/stores/executionStore'
@@ -504,7 +503,9 @@ export class ComfyApp {
                 throw error
               }
             } catch (error) {
-              alert('Error copying image: ' + (error.message ?? error))
+              useToastStore().addAlert(
+                'Error copying image: ' + (error.message ?? error)
+              )
             }
           }
         }
@@ -2301,7 +2302,9 @@ export class ComfyApp {
       // TODO: Show validation error in a dialog.
       const validatedGraphData = await validateComfyWorkflow(
         graphData,
-        /* onError=*/ alert
+        /* onError=*/ (err) => {
+          useToastStore().addAlert(err)
+        }
       )
       // If the validation failed, use the original graph data.
       // Ideally we should not block users from loading the workflow.

src/scripts/logging.ts

@@ -1,6 +1,7 @@
 import { $el, ComfyDialog } from './ui'
 import { api } from './api'
 import type { ComfyApp } from './app'
+import { useToastStore } from '@/stores/toastStore'
 
 $el('style', {
   textContent: `
@@ -130,7 +131,7 @@ class ComfyLoggingDialog extends ComfyDialog {
             throw new Error('Invalid file selected.')
           }
         } catch (error) {
-          alert('Unable to load logs: ' + error.message)
+          useToastStore().addAlert('Unable to load logs: ' + error.message)
         }
       }
       reader.readAsText(fileInput.files[0])

src/scripts/ui/settings.ts

@@ -5,6 +5,7 @@ import type { ComfyApp } from '../app'
 import type { Setting, SettingParams } from '@/types/settingTypes'
 import { useSettingStore } from '@/stores/settingStore'
 import { Settings } from '@/types/apiTypes'
+import { useToastStore } from '@/stores/toastStore'
 
 export class ComfySettingsDialog extends ComfyDialog<HTMLDialogElement> {
   app: ComfyApp
@@ -157,8 +158,7 @@ export class ComfySettingsDialog extends ComfyDialog<HTMLDialogElement> {
 
   setSettingValue<K extends keyof Settings>(id: K, value: Settings[K]) {
     this.setSettingValueAsync(id, value).catch((err) => {
-      alert(`Error saving setting '${id}'`)
-      console.error(err)
+      useToastStore().addAlert(`Error saving setting '${id}': ${err}`)
     })
   }
 

src/scripts/widgets.ts

@@ -4,6 +4,7 @@ import type { ComfyApp } from './app'
 import type { IWidget, LGraphNode } from '@comfyorg/litegraph'
 import { InputSpec } from '@/types/apiTypes'
 import { useSettingStore } from '@/stores/settingStore'
+import { useToastStore } from '@/stores/toastStore'
 
 export type ComfyWidgetConstructor = (
   node: LGraphNode,
@@ -578,10 +579,10 @@ export const ComfyWidgets: Record<string, ComfyWidgetConstructor> = {
             imageWidget.value = path
           }
         } else {
-          alert(resp.status + ' - ' + resp.statusText)
+          useToastStore().addAlert(resp.status + ' - ' + resp.statusText)
         }
       } catch (error) {
-        alert(error)
+        useToastStore().addAlert(error)
       }
     }
 

src/scripts/workflows.ts

@@ -12,6 +12,7 @@ import {
 import { useExecutionStore } from '@/stores/executionStore'
 import { markRaw, toRaw } from 'vue'
 import { UserDataFullInfo } from '@/types/apiTypes'
+import { useToastStore } from '@/stores/toastStore'
 
 export class ComfyWorkflowManager extends EventTarget {
   executionStore: ReturnType<typeof useExecutionStore> | null
@@ -76,7 +77,9 @@ export class ComfyWorkflowManager extends EventTarget {
         }
       })
     } catch (error) {
-      alert('Error loading workflows: ' + (error.message ?? error))
+      useToastStore().addAlert(
+        'Error loading workflows: ' + (error.message ?? error)
+      )
     }
   }
 
@@ -227,7 +230,7 @@ export class ComfyWorkflow {
   async getWorkflowData() {
     const resp = await api.getUserData('workflows/' + this.path)
     if (resp.status !== 200) {
-      alert(
+      useToastStore().addAlert(
         `Error loading workflow file '${this.path}': ${resp.status} ${resp.statusText}`
       )
       return
@@ -268,7 +271,7 @@ export class ComfyWorkflow {
       this.manager.workflowBookmarkStore?.setBookmarked(this.path, value)
       this.manager.dispatchEvent(new CustomEvent('favorite', { detail: this }))
     } catch (error) {
-      alert(
+      useToastStore().addAlert(
         'Error favoriting workflow ' +
           this.path +
           '\n' +
@@ -299,7 +302,7 @@ export class ComfyWorkflow {
     }
 
     if (resp.status !== 200) {
-      alert(
+      useToastStore().addAlert(
         `Error renaming workflow file '${this.path}': ${resp.status} ${resp.statusText}`
       )
       return
@@ -343,7 +346,7 @@ export class ComfyWorkflow {
     }
     const resp = await api.deleteUserData('workflows/' + this.path)
     if (resp.status !== 204) {
-      alert(
+      useToastStore().addAlert(
         `Error removing user data file '${this.path}': ${resp.status} ${resp.statusText}`
       )
     }
@@ -395,7 +398,7 @@ export class ComfyWorkflow {
     }
 
     if (resp.status !== 200) {
-      alert(
+      useToastStore().addAlert(
         `Error saving workflow '${this.path}': ${resp.status} ${resp.statusText}`
       )
       return