feat(dialog): migrate Manager dialog to Reka-UI (Phase 4)

Flip useManagerDialog onto the Reka renderer added in Phase 0. Public API
of useManagerDialog and useDialogService is unchanged.

- dialogComponentProps.renderer='reka' + size='full' + Manager content
  sizing (matches legacy .manager-dialog: 1724px × 80vh, expanding to
  2200×1320 above 3000px viewports).
- modal=false to keep SingleSelect / SearchAutocomplete PrimeVue overlays
  working (focus trap + body pointer-events). Same reason Settings flipped
  to non-modal in Phase 3.
- New useManagerDialog.test.ts pins the renderer flip against regression.

Parent FE-571, this phase FE-576.
This commit is contained in:
dante01yoon
2026-05-21 20:59:44 +09:00
parent 00d5591ffb
commit 3de88b7833
2 changed files with 73 additions and 0 deletions

View File

@@ -0,0 +1,61 @@
/**
* Manager dialog migration regression net: `useManagerDialog().show()` must
* route through the Reka renderer at the legacy Manager dimensions (1724px
* max-width × 80vh, expanding at 3000px). Catches accidental reverts of the
* Phase 4 renderer flip.
*/
import { beforeEach, describe, expect, it, vi } from 'vitest'
const showDialog = vi.hoisted(() => vi.fn())
const closeDialog = vi.hoisted(() => vi.fn())
vi.mock('@/stores/dialogStore', () => ({
useDialogStore: () => ({ showDialog, closeDialog })
}))
import { ManagerTab } from '@/workbench/extensions/manager/types/comfyManagerTypes'
import { useManagerDialog } from '@/workbench/extensions/manager/composables/useManagerDialog'
describe('useManagerDialog', () => {
beforeEach(() => {
showDialog.mockReset()
closeDialog.mockReset()
})
it("show() opens the Reka renderer with size 'full' and Manager content sizing", () => {
useManagerDialog().show()
const [args] = showDialog.mock.calls[0]
expect(args.key).toBe('global-manager')
expect(args.dialogComponentProps.renderer).toBe('reka')
expect(args.dialogComponentProps.size).toBe('full')
expect(args.dialogComponentProps.contentClass).toContain('max-w-[1724px]')
expect(args.dialogComponentProps.contentClass).toContain('h-[80vh]')
expect(args.dialogComponentProps.contentClass).toContain('max-h-[1026px]')
expect(args.dialogComponentProps.contentClass).toContain(
'min-[3000px]:max-w-[2200px]'
)
})
it('show() uses non-modal Reka so nested PrimeVue overlays keep focus and pointer events', () => {
useManagerDialog().show()
const [args] = showDialog.mock.calls[0]
expect(args.dialogComponentProps.modal).toBe(false)
})
it('show(initialTab) forwards initialTab to ManagerDialog props', () => {
useManagerDialog().show(ManagerTab.UpdateAvailable)
const [args] = showDialog.mock.calls[0]
expect(args.props.initialTab).toBe(ManagerTab.UpdateAvailable)
})
it('show(initialTab, initialPackId) forwards initialPackId to ManagerDialog props', () => {
useManagerDialog().show(ManagerTab.All, 'pack-123')
const [args] = showDialog.mock.calls[0]
expect(args.props.initialPackId).toBe('pack-123')
})
it('hide() closes the global-manager dialog', () => {
useManagerDialog().hide()
expect(closeDialog).toHaveBeenCalledWith({ key: 'global-manager' })
})
})

View File

@@ -5,6 +5,9 @@ import ManagerDialog from '@/workbench/extensions/manager/components/manager/Man
const DIALOG_KEY = 'global-manager'
const MANAGER_CONTENT_CLASS =
'w-[90vw] max-w-[1724px] sm:max-w-[1724px] h-[80vh] max-h-[1026px] min-[3000px]:max-w-[2200px] min-[3000px]:max-h-[1320px] rounded-2xl overflow-hidden'
export function useManagerDialog() {
const dialogService = useDialogService()
const dialogStore = useDialogStore()
@@ -21,6 +24,15 @@ export function useManagerDialog() {
onClose: hide,
initialTab,
initialPackId
},
dialogComponentProps: {
renderer: 'reka',
// Manager hosts PrimeVue overlays (SingleSelect, SearchAutocomplete)
// teleported to body. Reka's modal mode traps focus and disables body
// pointer-events, breaking those overlays. Mirrors Settings.
modal: false,
size: 'full',
contentClass: MANAGER_CONTENT_CLASS
}
})
}