mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-25 07:05:26 +00:00
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:
@@ -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' })
|
||||
})
|
||||
})
|
||||
@@ -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
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user