Activate new settings dialog from default UI (#506)

Author: huchenlei

src/scripts/ui.ts

@@ -3,7 +3,8 @@ import { ComfyDialog as _ComfyDialog } from './ui/dialog'
 import { toggleSwitch } from './ui/toggleSwitch'
 import { ComfySettingsDialog } from './ui/settings'
 import { ComfyApp, app } from './app'
-import { StatusWsMessageStatus, TaskItem } from '@/types/apiTypes'
+import { TaskItem } from '@/types/apiTypes'
+import { showSettingsDialog } from '@/services/dialogService'
 
 export const ComfyDialog = _ComfyDialog
 
@@ -505,7 +506,7 @@ export class ComfyUI {
           $el('div.comfy-menu-actions', [
             $el('button.comfy-settings-btn', {
               textContent: '⚙️',
-              onclick: () => this.settings.show()
+              onclick: showSettingsDialog
             }),
             $el('button.comfy-close-menu-btn', {
               textContent: '\u00d7',

src/services/dialogService.ts

@@ -1,6 +1,10 @@
+// This module is mocked in tests-ui/
+// Import vue components here to avoid tests-ui/ reporting errors
+// about importing primevue components.
 import { useDialogStore } from '@/stores/dialogStore'
 import LoadWorkflowWarning from '@/components/dialog/content/LoadWorkflowWarning.vue'
-import { markRaw } from 'vue'
+import SettingDialogContent from '@/components/dialog/content/SettingDialogContent.vue'
+import SettingDialogHeader from '@/components/dialog/header/SettingDialogHeader.vue'
 
 export function showLoadWorkflowWarning(props: {
   missingNodeTypes: any[]
@@ -9,7 +13,14 @@ export function showLoadWorkflowWarning(props: {
 }) {
   const dialogStore = useDialogStore()
   dialogStore.showDialog({
-    component: markRaw(LoadWorkflowWarning),
+    component: LoadWorkflowWarning,
     props
   })
 }
+
+export function showSettingsDialog() {
+  useDialogStore().showDialog({
+    headerComponent: SettingDialogHeader,
+    component: SettingDialogContent
+  })
+}