feat: Complete manager migration cleanup and integration

- Remove outdated legacy manager detection from LoadWorkflowWarning - Update InfoPanelHeader with conflict detection improvements - Fix all failing unit tests from state management transition - Clean up algolia search provider type mappings - Remove unused @ts-expect-error directives - Add .nx to .gitignore 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
2026-02-11 10:30:10 +00:00 · 2025-09-01 13:51:25 -07:00
parent 2c5b6dabaa
commit a74085f8e4
8 changed files with 69 additions and 62 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -76,3 +76,4 @@ vite.config.mts.timestamp-*.mjs
 *storybook.log
 storybook-static

+.nx/
--- a/src/components/dialog/content/LoadWorkflowWarning.vue
+++ b/src/components/dialog/content/LoadWorkflowWarning.vue
@@ -53,13 +53,12 @@
 <script setup lang="ts">
 import Button from 'primevue/button'
 import ListBox from 'primevue/listbox'
-import { computed, onMounted, ref } from 'vue'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'

 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import MissingCoreNodesMessage from '@/components/dialog/content/MissingCoreNodesMessage.vue'
 import { useMissingNodes } from '@/composables/nodePack/useMissingNodes'
-import { useComfyManagerService } from '@/services/comfyManagerService'
 import { useDialogService } from '@/services/dialogService'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
 import { useCommandStore } from '@/stores/commandStore'
@@ -82,7 +81,6 @@ const { missingNodePacks, isLoading, error, missingCoreNodes } =
  useMissingNodes()

 const comfyManagerStore = useComfyManagerStore()
-const isLegacyManager = ref(false)

 // Check if any of the missing packs are currently being installed
 const isInstalling = computed(() => {
@@ -155,13 +153,6 @@ const openManager = async () => {
      break
  }
 }
-
-onMounted(async () => {
-  const isLegacyResponse = await useComfyManagerService().isLegacyManagerUI()
-  if (isLegacyResponse?.is_legacy_manager_ui) {
-    isLegacyManager.value = true
-  }
-})
 </script>

 <style scoped>
--- a/src/components/dialog/content/manager/infoPanel/InfoPanelHeader.vue
+++ b/src/components/dialog/content/manager/infoPanel/InfoPanelHeader.vue
@@ -1,14 +1,14 @@
 <template>
-  <div v-if="nodePacks?.length" class="flex flex-col items-center mb-6">
+  <div v-if="nodePacks?.length" class="flex flex-col items-center">
    <slot name="thumbnail">
-      <PackIcon :node-pack="nodePacks[0]" width="24" height="24" />
+      <PackIcon :node-pack="nodePacks[0]" width="204" height="106" />
    </slot>
    <h2
      class="text-2xl font-bold text-center mt-4 mb-2"
      style="word-break: break-all"
    >
      <slot name="title">
-        {{ nodePacks[0].name }}
+        <span class="inline-block text-base">{{ nodePacks[0].name }}</span>
      </slot>
    </h2>
    <div
@@ -26,7 +26,6 @@
          v-else
          v-bind="$attrs"
          size="md"
-          :is-installing="isInstalling"
          :node-packs="nodePacks"
          :has-conflict="hasConflict || computedHasConflict"
          :conflict-info="conflictInfo"
@@ -34,7 +33,7 @@
      </slot>
    </div>
  </div>
-  <div v-else class="flex flex-col items-center mb-6">
+  <div v-else class="flex flex-col items-center">
    <NoResultsPlaceholder
      :message="$t('manager.status.unknown')"
      :title="$t('manager.tryAgainLater')"
@@ -77,12 +76,6 @@ watch(
  { immediate: true }
 )

-// Check if any of the packs are currently being installed
-const isInstalling = computed(() => {
-  if (!nodePacks?.length) return false
-  return nodePacks.some((pack) => managerStore.isPackInstalling(pack.id))
-})
-
 // Add conflict detection for install button dialog
 const { checkNodeCompatibility } = useConflictDetection()

--- a/src/lib/litegraph/test/LinkConnector.integration.test.ts
+++ b/src/lib/litegraph/test/LinkConnector.integration.test.ts
@@ -334,12 +334,9 @@ describe('LinkConnector Integration', () => {
        } = graph.getNodeById(nodeId)!

        expect(input.link).toBeNull()
-        // @ts-expect-error toBeOneOf not in type definitions
        expect(output.links?.length).toBeOneOf([0, undefined])

-        // @ts-expect-error toBeOneOf not in type definitions
        expect(input._floatingLinks?.size).toBeOneOf([0, undefined])
-        // @ts-expect-error toBeOneOf not in type definitions
        expect(output._floatingLinks?.size).toBeOneOf([0, undefined])
      }
    })
@@ -537,12 +534,9 @@ describe('LinkConnector Integration', () => {
        } = graph.getNodeById(nodeId)!

        expect(input.link).toBeNull()
-        // @ts-expect-error toBeOneOf not in type definitions
        expect(output.links?.length).toBeOneOf([0, undefined])

-        // @ts-expect-error toBeOneOf not in type definitions
        expect(input._floatingLinks?.size).toBeOneOf([0, undefined])
-        // @ts-expect-error toBeOneOf not in type definitions
        expect(output._floatingLinks?.size).toBeOneOf([0, undefined])
      }
    })
@@ -856,12 +850,9 @@ describe('LinkConnector Integration', () => {
      } = graph.getNodeById(nodeId)!

      expect(input.link).toBeNull()
-      // @ts-expect-error toBeOneOf not in type definitions
      expect(output.links?.length).toBeOneOf([0, undefined])

-      // @ts-expect-error toBeOneOf not in type definitions
      expect(input._floatingLinks?.size).toBeOneOf([0, undefined])
-      // @ts-expect-error toBeOneOf not in type definitions
      expect(output._floatingLinks?.size).toBeOneOf([0, undefined])
    }
  })
--- a/src/services/providers/algoliaSearchProvider.ts
+++ b/src/services/providers/algoliaSearchProvider.ts
@@ -60,6 +60,7 @@ const toRegistryLatestVersion = (
 ): RegistryNodePack['latest_version'] => {
  return {
    version: algoliaNode.latest_version,
+    createdAt: algoliaNode.update_time,
    status: algoliaNode.latest_version_status,
    comfy_node_extract_status:
      algoliaNode.comfy_node_extract_status ?? undefined
--- a/tests-ui/tests/components/dialog/footer/ManagerProgressFooter.test.ts
+++ b/tests-ui/tests/components/dialog/footer/ManagerProgressFooter.test.ts
@@ -66,16 +66,27 @@ const mountComponent = (options: { captureError?: boolean } = {}) => {
    legacy: false,
    locale: 'en',
    messages: {
-      en: {}
+      en: {
+        g: {
+          progressCountOf: 'of'
+        },
+        manager: {
+          clickToFinishSetup: 'Click',
+          applyChanges: 'Apply Changes',
+          toFinishSetup: 'to finish setup',
+          restartingBackend: 'Restarting backend to apply changes...',
+          extensionsSuccessfullyInstalled:
+            'Extension(s) successfully installed and are ready to use!',
+          restartToApplyChanges: 'To apply changes, please restart ComfyUI',
+          installingDependencies: 'Installing dependencies...'
+        }
+      }
    }
  })

  const config: any = {
    global: {
-      plugins: [pinia, PrimeVue, i18n],
-      mocks: {
-        $t: (key: string) => key // Mock i18n translation
-      }
+      plugins: [pinia, PrimeVue, i18n]
    }
  }

@@ -95,9 +106,14 @@ describe('ManagerProgressFooter', () => {
  const mockTaskLogs: TaskLog[] = []

  const mockComfyManagerStore = {
-    uncompletedCount: 0,
    taskLogs: mockTaskLogs,
    allTasksDone: true,
+    isProcessingTasks: false,
+    succeededTasksIds: [] as string[],
+    failedTasksIds: [] as string[],
+    taskHistory: {} as Record<string, any>,
+    taskQueue: null,
+    resetTaskState: vi.fn(),
    clearLogs: vi.fn(),
    setStale: vi.fn(),
    // Add other required properties
@@ -195,7 +211,14 @@ describe('ManagerProgressFooter', () => {
  describe('State 1: Queue Running', () => {
    it('should display loading spinner and progress counter when queue is running', async () => {
      // Setup queue running state
-      mockComfyManagerStore.uncompletedCount = 3
+      mockComfyManagerStore.isProcessingTasks = true
+      mockComfyManagerStore.succeededTasksIds = ['1', '2']
+      mockComfyManagerStore.failedTasksIds = []
+      mockComfyManagerStore.taskHistory = {
+        '1': { taskName: 'Installing pack1' },
+        '2': { taskName: 'Installing pack2' },
+        '3': { taskName: 'Installing pack3' }
+      }
      mockTaskLogs.push(
        { taskName: 'Installing pack1', taskId: '1', logs: [] },
        { taskName: 'Installing pack2', taskId: '2', logs: [] },
@@ -211,18 +234,18 @@ describe('ManagerProgressFooter', () => {
      expect(wrapper.text()).toContain('Installing pack3')

      // Check progress counter (completed: 2 of 3)
-      expect(wrapper.text()).toMatch(/2.*3/)
+      expect(wrapper.text()).toMatch(/2.*of.*3/)

      // Check expand/collapse button exists
      const expandButton = wrapper.find('[aria-label="Expand"]')
      expect(expandButton.exists()).toBe(true)

      // Check Apply Changes button is NOT shown
-      expect(wrapper.text()).not.toContain('manager.applyChanges')
+      expect(wrapper.text()).not.toContain('Apply Changes')
    })

    it('should toggle expansion when expand button is clicked', async () => {
-      mockComfyManagerStore.uncompletedCount = 1
+      mockComfyManagerStore.isProcessingTasks = true
      mockTaskLogs.push({ taskName: 'Installing', taskId: '1', logs: [] })

      const wrapper = mountComponent()
@@ -237,7 +260,7 @@ describe('ManagerProgressFooter', () => {
  describe('State 2: Tasks Completed (Waiting for Restart)', () => {
    it('should display check mark and Apply Changes button when all tasks are done', async () => {
      // Setup tasks completed state
-      mockComfyManagerStore.uncompletedCount = 0
+      mockComfyManagerStore.isProcessingTasks = false
      mockTaskLogs.push(
        { taskName: 'Installed pack1', taskId: '1', logs: [] },
        { taskName: 'Installed pack2', taskId: '2', logs: [] }
@@ -249,15 +272,16 @@ describe('ManagerProgressFooter', () => {
      // Check check mark emoji
      expect(wrapper.text()).toContain('✅')

-      // Check restart message (split into 3 parts)
-      expect(wrapper.text()).toContain('manager.clickToFinishSetup')
-      expect(wrapper.text()).toContain('manager.applyChanges')
-      expect(wrapper.text()).toContain('manager.toFinishSetup')
+      // Check restart message
+      expect(wrapper.text()).toContain(
+        'To apply changes, please restart ComfyUI'
+      )
+      expect(wrapper.text()).toContain('Apply Changes')

      // Check Apply Changes button exists
      const applyButton = wrapper
        .findAll('button')
-        .find((btn) => btn.text().includes('manager.applyChanges'))
+        .find((btn) => btn.text().includes('Apply Changes'))
      expect(applyButton).toBeTruthy()

      // Check no progress counter
@@ -268,7 +292,7 @@ describe('ManagerProgressFooter', () => {
  describe('State 3: Restarting', () => {
    it('should display restarting message and spinner during restart', async () => {
      // Setup completed state first
-      mockComfyManagerStore.uncompletedCount = 0
+      mockComfyManagerStore.isProcessingTasks = false
      mockComfyManagerStore.allTasksDone = true

      const wrapper = mountComponent()
@@ -276,20 +300,20 @@ describe('ManagerProgressFooter', () => {
      // Click Apply Changes to trigger restart
      const applyButton = wrapper
        .findAll('button')
-        .find((btn) => btn.text().includes('manager.applyChanges'))
+        .find((btn) => btn.text().includes('Apply Changes'))
      await applyButton?.trigger('click')

      // Wait for state update
      await nextTick()

      // Check restarting message
-      expect(wrapper.text()).toContain('manager.restartingBackend')
+      expect(wrapper.text()).toContain('Restarting backend to apply changes...')

      // Check loading spinner during restart
      expect(wrapper.find('.inline-flex').exists()).toBe(true)

      // Check Apply Changes button is hidden
-      expect(wrapper.text()).not.toContain('manager.applyChanges')
+      expect(wrapper.text()).not.toContain('Apply Changes')
    })
  })

@@ -298,7 +322,7 @@ describe('ManagerProgressFooter', () => {
      vi.useFakeTimers()

      // Setup completed state
-      mockComfyManagerStore.uncompletedCount = 0
+      mockComfyManagerStore.isProcessingTasks = false
      mockComfyManagerStore.allTasksDone = true

      const wrapper = mountComponent()
@@ -306,7 +330,7 @@ describe('ManagerProgressFooter', () => {
      // Trigger restart
      const applyButton = wrapper
        .findAll('button')
-        .find((btn) => btn.text().includes('manager.applyChanges'))
+        .find((btn) => btn.text().includes('Apply Changes'))
      await applyButton?.trigger('click')

      // Wait for event listener to be set up
@@ -323,7 +347,7 @@ describe('ManagerProgressFooter', () => {
      // Check success message
      expect(wrapper.text()).toContain('🎉')
      expect(wrapper.text()).toContain(
-        'manager.extensionsSuccessfullyInstalled'
+        'Extension(s) successfully installed and are ready to use!'
      )

      // Check dialog closes after 3 seconds
@@ -334,7 +358,7 @@ describe('ManagerProgressFooter', () => {
      expect(mockDialogStore.closeDialog).toHaveBeenCalledWith({
        key: 'global-manager-progress-dialog'
      })
-      expect(mockComfyManagerStore.clearLogs).toHaveBeenCalled()
+      expect(mockComfyManagerStore.resetTaskState).toHaveBeenCalled()

      vi.useRealTimers()
    })
@@ -362,7 +386,7 @@ describe('ManagerProgressFooter', () => {

  describe('Toast Management', () => {
    it('should suppress reconnection toasts during restart', async () => {
-      mockComfyManagerStore.uncompletedCount = 0
+      mockComfyManagerStore.isProcessingTasks = false
      mockComfyManagerStore.allTasksDone = true
      mockSettingStore.get.mockReturnValue(false) // Original setting

@@ -371,7 +395,7 @@ describe('ManagerProgressFooter', () => {
      // Click Apply Changes
      const applyButton = wrapper
        .findAll('button')
-        .find((btn) => btn.text().includes('manager.applyChanges'))
+        .find((btn) => btn.text().includes('Apply Changes'))
      await applyButton?.trigger('click')

      // Check toast setting was disabled
@@ -382,7 +406,7 @@ describe('ManagerProgressFooter', () => {
    })

    it('should restore toast settings after restart completes', async () => {
-      mockComfyManagerStore.uncompletedCount = 0
+      mockComfyManagerStore.isProcessingTasks = false
      mockComfyManagerStore.allTasksDone = true
      mockSettingStore.get.mockReturnValue(false) // Original setting

@@ -391,7 +415,7 @@ describe('ManagerProgressFooter', () => {
      // Click Apply Changes
      const applyButton = wrapper
        .findAll('button')
-        .find((btn) => btn.text().includes('manager.applyChanges'))
+        .find((btn) => btn.text().includes('Apply Changes'))
      await applyButton?.trigger('click')

      // Wait for event listener to be set up
@@ -414,7 +438,7 @@ describe('ManagerProgressFooter', () => {

  describe('Error Handling', () => {
    it('should restore state and close dialog on restart error', async () => {
-      mockComfyManagerStore.uncompletedCount = 0
+      mockComfyManagerStore.isProcessingTasks = false
      mockComfyManagerStore.allTasksDone = true

      // Mock restart to throw error
@@ -427,7 +451,7 @@ describe('ManagerProgressFooter', () => {
      // Click Apply Changes
      const applyButton = wrapper
        .findAll('button')
-        .find((btn) => btn.text().includes('manager.applyChanges'))
+        .find((btn) => btn.text().includes('Apply Changes'))

      expect(applyButton).toBeTruthy()

--- a/tests-ui/tests/store/comfyManagerStore.test.ts
+++ b/tests-ui/tests/store/comfyManagerStore.test.ts
@@ -31,7 +31,7 @@ vi.mock('@/composables/useManagerQueue', () => {
      statusMessage: ref(''),
      allTasksDone: ref(false),
      enqueueTask: enqueueTaskMock,
-      uncompletedCount: ref(0)
+      isProcessingTasks: ref(false)
    }),
    enqueueTask: enqueueTaskMock
  }
--- a/tests-ui/tests/stores/managerStateStore.test.ts
+++ b/tests-ui/tests/stores/managerStateStore.test.ts
@@ -13,7 +13,8 @@ import { useSystemStatsStore } from '@/stores/systemStatsStore'
 // Mock dependencies
 vi.mock('@/scripts/api', () => ({
  api: {
-    getClientFeatureFlags: vi.fn()
+    getClientFeatureFlags: vi.fn(),
+    getServerFeature: vi.fn()
  }
 }))

@@ -78,6 +79,7 @@ describe('useManagerStateStore', () => {
      vi.mocked(api.getClientFeatureFlags).mockReturnValue({
        supports_manager_v4_ui: true
      })
+      vi.mocked(api.getServerFeature).mockReturnValue(true)
      vi.mocked(useFeatureFlags).mockReturnValue({
        flags: { supportsManagerV4: true },
        featureFlag: vi.fn()
@@ -98,6 +100,7 @@ describe('useManagerStateStore', () => {
      vi.mocked(api.getClientFeatureFlags).mockReturnValue({
        supports_manager_v4_ui: false
      })
+      vi.mocked(api.getServerFeature).mockReturnValue(true)
      vi.mocked(useFeatureFlags).mockReturnValue({
        flags: { supportsManagerV4: true },
        featureFlag: vi.fn()
@@ -134,6 +137,7 @@ describe('useManagerStateStore', () => {
        systemStats: { system: { argv: ['python', 'main.py'] } }
      } as any)
      vi.mocked(api.getClientFeatureFlags).mockReturnValue({})
+      vi.mocked(api.getServerFeature).mockReturnValue(undefined)
      vi.mocked(useFeatureFlags).mockReturnValue({
        flags: { supportsManagerV4: undefined },
        featureFlag: vi.fn()
@@ -152,6 +156,7 @@ describe('useManagerStateStore', () => {
        systemStats: { system: { argv: ['python', 'main.py'] } }
      } as any)
      vi.mocked(api.getClientFeatureFlags).mockReturnValue({})
+      vi.mocked(api.getServerFeature).mockReturnValue(false)
      vi.mocked(useFeatureFlags).mockReturnValue({
        flags: { supportsManagerV4: false },
        featureFlag: vi.fn()
@@ -172,6 +177,7 @@ describe('useManagerStateStore', () => {
      vi.mocked(api.getClientFeatureFlags).mockReturnValue({
        supports_manager_v4_ui: true
      })
+      vi.mocked(api.getServerFeature).mockReturnValue(true)
      vi.mocked(useFeatureFlags).mockReturnValue({
        flags: { supportsManagerV4: true },
        featureFlag: vi.fn()