[refactor] Unify small modal dialog styles with showSmallLayoutDialog

.storybook/main.ts

@@ -100,8 +100,7 @@ const config: StorybookConfig = {
         rolldownOptions: {
           treeshake: false,
           output: {
-            keepNames: true,
-            strictExecutionOrder: true
+            keepNames: true
           },
           onwarn: (warning, warn) => {
             // Suppress specific warnings

src/composables/useHelpCenter.ts

@@ -4,11 +4,11 @@ import { computed, onMounted } from 'vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useTelemetry } from '@/platform/telemetry'
 import { useReleaseStore } from '@/platform/updates/common/releaseStore'
-import { useDialogService } from '@/services/dialogService'
 import { useHelpCenterStore } from '@/stores/helpCenterStore'
 import type { HelpCenterTriggerLocation } from '@/stores/helpCenterStore'
 import { useConflictAcknowledgment } from '@/workbench/extensions/manager/composables/useConflictAcknowledgment'
 import { useConflictDetection } from '@/workbench/extensions/manager/composables/useConflictDetection'
+import { useNodeConflictDialog } from '@/workbench/extensions/manager/composables/useNodeConflictDialog'
 
 export function useHelpCenter(
   triggerFrom: HelpCenterTriggerLocation = 'sidebar'
@@ -21,7 +21,7 @@ export function useHelpCenter(
   const { shouldShowRedDot: showReleaseRedDot } = storeToRefs(releaseStore)
 
   const conflictDetection = useConflictDetection()
-  const { showNodeConflictDialog } = useDialogService()
+  const { show: showNodeConflictDialog } = useNodeConflictDialog()
 
   // Use conflict acknowledgment state from composable - call only once
   const { shouldShowRedDot: shouldShowConflictRedDot, markConflictsAsSeen } =

src/composables/useMissingModelsDialog.ts

@@ -0,0 +1,26 @@
+import type { ComponentAttrs } from 'vue-component-type-helpers'
+
+import MissingModelsWarning from '@/components/dialog/content/MissingModelsWarning.vue'
+import { useDialogService } from '@/services/dialogService'
+import { useDialogStore } from '@/stores/dialogStore'
+
+const DIALOG_KEY = 'global-missing-models-warning'
+
+export function useMissingModelsDialog() {
+  const { showSmallLayoutDialog } = useDialogService()
+  const dialogStore = useDialogStore()
+
+  function hide() {
+    dialogStore.closeDialog({ key: DIALOG_KEY })
+  }
+
+  function show(props: ComponentAttrs<typeof MissingModelsWarning>) {
+    showSmallLayoutDialog({
+      key: DIALOG_KEY,
+      component: MissingModelsWarning,
+      props
+    })
+  }
+
+  return { show, hide }
+}

src/composables/useMissingNodesDialog.ts

@@ -0,0 +1,30 @@
+import type { ComponentAttrs } from 'vue-component-type-helpers'
+
+import MissingNodesContent from '@/components/dialog/content/MissingNodesContent.vue'
+import MissingNodesFooter from '@/components/dialog/content/MissingNodesFooter.vue'
+import MissingNodesHeader from '@/components/dialog/content/MissingNodesHeader.vue'
+import { useDialogService } from '@/services/dialogService'
+import { useDialogStore } from '@/stores/dialogStore'
+
+const DIALOG_KEY = 'global-missing-nodes'
+
+export function useMissingNodesDialog() {
+  const { showSmallLayoutDialog } = useDialogService()
+  const dialogStore = useDialogStore()
+
+  function hide() {
+    dialogStore.closeDialog({ key: DIALOG_KEY })
+  }
+
+  function show(props: ComponentAttrs<typeof MissingNodesContent>) {
+    showSmallLayoutDialog({
+      key: DIALOG_KEY,
+      headerComponent: MissingNodesHeader,
+      footerComponent: MissingNodesFooter,
+      component: MissingNodesContent,
+      props
+    })
+  }
+
+  return { show, hide }
+}

src/platform/workflow/core/services/workflowService.test.ts

@@ -9,16 +9,21 @@ import { useWorkflowStore } from '@/platform/workflow/management/stores/workflow
 import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
 import { app } from '@/scripts/app'
 
-const { mockShowLoadWorkflowWarning, mockShowMissingModelsWarning } =
-  vi.hoisted(() => ({
-    mockShowLoadWorkflowWarning: vi.fn(),
-    mockShowMissingModelsWarning: vi.fn()
-  }))
+const { mockShowMissingNodes, mockShowMissingModels } = vi.hoisted(() => ({
+  mockShowMissingNodes: vi.fn(),
+  mockShowMissingModels: vi.fn()
+}))
+
+vi.mock('@/composables/useMissingNodesDialog', () => ({
+  useMissingNodesDialog: () => ({ show: mockShowMissingNodes, hide: vi.fn() })
+}))
+
+vi.mock('@/composables/useMissingModelsDialog', () => ({
+  useMissingModelsDialog: () => ({ show: mockShowMissingModels, hide: vi.fn() })
+}))
 
 vi.mock('@/services/dialogService', () => ({
   useDialogService: () => ({
-    showLoadWorkflowWarning: mockShowLoadWorkflowWarning,
-    showMissingModelsWarning: mockShowMissingModelsWarning,
     prompt: vi.fn(),
     confirm: vi.fn()
   })
@@ -114,8 +119,8 @@ describe('useWorkflowService', () => {
       const workflow = createWorkflow(null)
       useWorkflowService().showPendingWarnings(workflow)
 
-      expect(mockShowLoadWorkflowWarning).not.toHaveBeenCalled()
-      expect(mockShowMissingModelsWarning).not.toHaveBeenCalled()
+      expect(mockShowMissingNodes).not.toHaveBeenCalled()
+      expect(mockShowMissingModels).not.toHaveBeenCalled()
     })
 
     it('should show missing nodes dialog and clear warnings', () => {
@@ -124,7 +129,7 @@ describe('useWorkflowService', () => {
 
       useWorkflowService().showPendingWarnings(workflow)
 
-      expect(mockShowLoadWorkflowWarning).toHaveBeenCalledWith({
+      expect(mockShowMissingNodes).toHaveBeenCalledWith({
         missingNodeTypes
       })
       expect(workflow.pendingWarnings).toBeNull()
@@ -135,7 +140,7 @@ describe('useWorkflowService', () => {
 
       useWorkflowService().showPendingWarnings(workflow)
 
-      expect(mockShowMissingModelsWarning).toHaveBeenCalledWith(MISSING_MODELS)
+      expect(mockShowMissingModels).toHaveBeenCalledWith(MISSING_MODELS)
       expect(workflow.pendingWarnings).toBeNull()
     })
 
@@ -149,8 +154,8 @@ describe('useWorkflowService', () => {
 
       useWorkflowService().showPendingWarnings(workflow)
 
-      expect(mockShowLoadWorkflowWarning).not.toHaveBeenCalled()
-      expect(mockShowMissingModelsWarning).not.toHaveBeenCalled()
+      expect(mockShowMissingNodes).not.toHaveBeenCalled()
+      expect(mockShowMissingModels).not.toHaveBeenCalled()
       expect(workflow.pendingWarnings).toBeNull()
     })
 
@@ -163,7 +168,7 @@ describe('useWorkflowService', () => {
       service.showPendingWarnings(workflow)
       service.showPendingWarnings(workflow)
 
-      expect(mockShowLoadWorkflowWarning).toHaveBeenCalledTimes(1)
+      expect(mockShowMissingNodes).toHaveBeenCalledTimes(1)
     })
   })
 
@@ -188,7 +193,7 @@ describe('useWorkflowService', () => {
         { loadable: true }
       )
 
-      expect(mockShowLoadWorkflowWarning).not.toHaveBeenCalled()
+      expect(mockShowMissingNodes).not.toHaveBeenCalled()
 
       await useWorkflowService().openWorkflow(workflow)
 
@@ -199,7 +204,7 @@ describe('useWorkflowService', () => {
         workflow,
         expect.objectContaining({ deferWarnings: true })
       )
-      expect(mockShowLoadWorkflowWarning).toHaveBeenCalledWith({
+      expect(mockShowMissingNodes).toHaveBeenCalledWith({
         missingNodeTypes: ['CustomNode1']
       })
       expect(workflow.pendingWarnings).toBeNull()
@@ -218,16 +223,16 @@ describe('useWorkflowService', () => {
       const service = useWorkflowService()
 
       await service.openWorkflow(workflow1)
-      expect(mockShowLoadWorkflowWarning).toHaveBeenCalledTimes(1)
-      expect(mockShowLoadWorkflowWarning).toHaveBeenCalledWith({
+      expect(mockShowMissingNodes).toHaveBeenCalledTimes(1)
+      expect(mockShowMissingNodes).toHaveBeenCalledWith({
         missingNodeTypes: ['MissingNodeA']
       })
       expect(workflow1.pendingWarnings).toBeNull()
       expect(workflow2.pendingWarnings).not.toBeNull()
 
       await service.openWorkflow(workflow2)
-      expect(mockShowLoadWorkflowWarning).toHaveBeenCalledTimes(2)
-      expect(mockShowLoadWorkflowWarning).toHaveBeenLastCalledWith({
+      expect(mockShowMissingNodes).toHaveBeenCalledTimes(2)
+      expect(mockShowMissingNodes).toHaveBeenLastCalledWith({
         missingNodeTypes: ['MissingNodeB']
       })
       expect(workflow2.pendingWarnings).toBeNull()
@@ -242,10 +247,10 @@ describe('useWorkflowService', () => {
       const service = useWorkflowService()
 
       await service.openWorkflow(workflow, { force: true })
-      expect(mockShowLoadWorkflowWarning).toHaveBeenCalledTimes(1)
+      expect(mockShowMissingNodes).toHaveBeenCalledTimes(1)
 
       await service.openWorkflow(workflow, { force: true })
-      expect(mockShowLoadWorkflowWarning).toHaveBeenCalledTimes(1)
+      expect(mockShowMissingNodes).toHaveBeenCalledTimes(1)
     })
   })
 })

src/platform/workflow/core/services/workflowService.ts

@@ -17,6 +17,8 @@ import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useWorkflowThumbnail } from '@/renderer/core/thumbnail/useWorkflowThumbnail'
 import { app } from '@/scripts/app'
 import { blankGraph, defaultGraph } from '@/scripts/defaultGraph'
+import { useMissingModelsDialog } from '@/composables/useMissingModelsDialog'
+import { useMissingNodesDialog } from '@/composables/useMissingNodesDialog'
 import { useDialogService } from '@/services/dialogService'
 import { useDomWidgetStore } from '@/stores/domWidgetStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
@@ -27,6 +29,8 @@ export const useWorkflowService = () => {
   const workflowStore = useWorkflowStore()
   const toastStore = useToastStore()
   const dialogService = useDialogService()
+  const missingModelsDialog = useMissingModelsDialog()
+  const missingNodesDialog = useMissingNodesDialog()
   const workflowThumbnail = useWorkflowThumbnail()
   const domWidgetStore = useDomWidgetStore()
   const workflowDraftStore = useWorkflowDraftStore()
@@ -455,13 +459,13 @@ export const useWorkflowService = () => {
       missingNodeTypes?.length &&
       settingStore.get('Comfy.Workflow.ShowMissingNodesWarning')
     ) {
-      void dialogService.showLoadWorkflowWarning({ missingNodeTypes })
+      missingNodesDialog.show({ missingNodeTypes })
     }
     if (
       missingModels &&
       settingStore.get('Comfy.Workflow.ShowMissingModelsWarning')
     ) {
-      void dialogService.showMissingModelsWarning(missingModels)
+      missingModelsDialog.show(missingModels)
     }
   }
 

src/scripts/app.ts

@@ -52,6 +52,7 @@ import {
 } from '@/scripts/domWidget'
 import { useDialogService } from '@/services/dialogService'
 import { useBillingContext } from '@/composables/billing/useBillingContext'
+import { useMissingNodesDialog } from '@/composables/useMissingNodesDialog'
 import { useExtensionService } from '@/services/extensionService'
 import { useLitegraphService } from '@/services/litegraphService'
 import { useSubgraphService } from '@/services/subgraphService'
@@ -1068,7 +1069,7 @@ export class ComfyApp {
 
   private showMissingNodesError(missingNodeTypes: MissingNodeType[]) {
     if (useSettingStore().get('Comfy.Workflow.ShowMissingNodesWarning')) {
-      useDialogService().showLoadWorkflowWarning({ missingNodeTypes })
+      useMissingNodesDialog().show({ missingNodeTypes })
     }
   }