mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-03-13 09:00:16 +00:00
fix: address small CodeRabbit issues (#9229)
## Summary Address several small CodeRabbit-filed issues: clipboard simplification, queue getter cleanup, pointer handling, and test parameterization. ## Changes - **What**: - Simplify `useCopyToClipboard` by using VueUse's built-in `legacy` mode instead of a manual `document.execCommand` fallback - Remove `queueIndex` getter alias from `TaskItemImpl`, replace all usages with `job.priority` - Add `pointercancel` event handling and try-catch around `releasePointerCapture` in `useNodeResize` to prevent stuck resize state - Parameterize repetitive `getNodeProvider` tests in `modelToNodeStore.test.ts` using `it.each()` - Fixes #9024 - Fixes #7955 - Fixes #7323 - Fixes #8703 ## Review Focus - `useCopyToClipboard`: VueUse's `legacy: true` enables the `execCommand` fallback internally — verify browser compat is acceptable - `useNodeResize`: cleanup logic extracted into shared function used by both `pointerup` and `pointercancel`
This commit is contained in:
committed by
GitHub
parent
aef299caf8
commit
45ca1beea2
@@ -11,7 +11,7 @@ import type { TaskItemImpl } from '@/stores/queueStore'
|
||||
|
||||
type TestTask = {
|
||||
jobId: string
|
||||
queueIndex: number
|
||||
job: { priority: number }
|
||||
mockState: JobState
|
||||
executionTime?: number
|
||||
executionEndTimestamp?: number
|
||||
@@ -174,7 +174,7 @@ const createTask = (
|
||||
overrides: Partial<TestTask> & { mockState?: JobState } = {}
|
||||
): TestTask => ({
|
||||
jobId: overrides.jobId ?? `task-${Math.random().toString(36).slice(2, 7)}`,
|
||||
queueIndex: overrides.queueIndex ?? 0,
|
||||
job: overrides.job ?? { priority: 0 },
|
||||
mockState: overrides.mockState ?? 'pending',
|
||||
executionTime: overrides.executionTime,
|
||||
executionEndTimestamp: overrides.executionEndTimestamp,
|
||||
@@ -258,7 +258,7 @@ describe('useJobList', () => {
|
||||
it('tracks recently added pending jobs and clears the hint after expiry', async () => {
|
||||
vi.useFakeTimers()
|
||||
queueStoreMock.pendingTasks = [
|
||||
createTask({ jobId: '1', queueIndex: 1, mockState: 'pending' })
|
||||
createTask({ jobId: '1', job: { priority: 1 }, mockState: 'pending' })
|
||||
]
|
||||
|
||||
const { jobItems } = initComposable()
|
||||
@@ -287,7 +287,7 @@ describe('useJobList', () => {
|
||||
vi.useFakeTimers()
|
||||
const taskId = '2'
|
||||
queueStoreMock.pendingTasks = [
|
||||
createTask({ jobId: taskId, queueIndex: 1, mockState: 'pending' })
|
||||
createTask({ jobId: taskId, job: { priority: 1 }, mockState: 'pending' })
|
||||
]
|
||||
|
||||
const { jobItems } = initComposable()
|
||||
@@ -300,7 +300,7 @@ describe('useJobList', () => {
|
||||
|
||||
vi.mocked(buildJobDisplay).mockClear()
|
||||
queueStoreMock.pendingTasks = [
|
||||
createTask({ jobId: taskId, queueIndex: 2, mockState: 'pending' })
|
||||
createTask({ jobId: taskId, job: { priority: 2 }, mockState: 'pending' })
|
||||
]
|
||||
await flush()
|
||||
jobItems.value
|
||||
@@ -314,7 +314,7 @@ describe('useJobList', () => {
|
||||
it('cleans up timeouts on unmount', async () => {
|
||||
vi.useFakeTimers()
|
||||
queueStoreMock.pendingTasks = [
|
||||
createTask({ jobId: '3', queueIndex: 1, mockState: 'pending' })
|
||||
createTask({ jobId: '3', job: { priority: 1 }, mockState: 'pending' })
|
||||
]
|
||||
|
||||
initComposable()
|
||||
@@ -331,7 +331,7 @@ describe('useJobList', () => {
|
||||
queueStoreMock.pendingTasks = [
|
||||
createTask({
|
||||
jobId: 'p',
|
||||
queueIndex: 1,
|
||||
job: { priority: 1 },
|
||||
mockState: 'pending',
|
||||
createTime: 3000
|
||||
})
|
||||
@@ -339,7 +339,7 @@ describe('useJobList', () => {
|
||||
queueStoreMock.runningTasks = [
|
||||
createTask({
|
||||
jobId: 'r',
|
||||
queueIndex: 5,
|
||||
job: { priority: 5 },
|
||||
mockState: 'running',
|
||||
createTime: 2000
|
||||
})
|
||||
@@ -347,7 +347,7 @@ describe('useJobList', () => {
|
||||
queueStoreMock.historyTasks = [
|
||||
createTask({
|
||||
jobId: 'h',
|
||||
queueIndex: 3,
|
||||
job: { priority: 3 },
|
||||
mockState: 'completed',
|
||||
createTime: 1000,
|
||||
executionEndTimestamp: 5000
|
||||
@@ -366,9 +366,9 @@ describe('useJobList', () => {
|
||||
|
||||
it('filters by job tab and resets failed tab when failures disappear', async () => {
|
||||
queueStoreMock.historyTasks = [
|
||||
createTask({ jobId: 'c', queueIndex: 3, mockState: 'completed' }),
|
||||
createTask({ jobId: 'f', queueIndex: 2, mockState: 'failed' }),
|
||||
createTask({ jobId: 'p', queueIndex: 1, mockState: 'pending' })
|
||||
createTask({ jobId: 'c', job: { priority: 3 }, mockState: 'completed' }),
|
||||
createTask({ jobId: 'f', job: { priority: 2 }, mockState: 'failed' }),
|
||||
createTask({ jobId: 'p', job: { priority: 1 }, mockState: 'pending' })
|
||||
]
|
||||
|
||||
const instance = initComposable()
|
||||
@@ -384,7 +384,7 @@ describe('useJobList', () => {
|
||||
expect(instance.hasFailedJobs.value).toBe(true)
|
||||
|
||||
queueStoreMock.historyTasks = [
|
||||
createTask({ jobId: 'c', queueIndex: 3, mockState: 'completed' })
|
||||
createTask({ jobId: 'c', job: { priority: 3 }, mockState: 'completed' })
|
||||
]
|
||||
await flush()
|
||||
|
||||
@@ -396,13 +396,13 @@ describe('useJobList', () => {
|
||||
queueStoreMock.pendingTasks = [
|
||||
createTask({
|
||||
jobId: 'wf-1',
|
||||
queueIndex: 2,
|
||||
job: { priority: 2 },
|
||||
mockState: 'pending',
|
||||
workflowId: 'workflow-1'
|
||||
}),
|
||||
createTask({
|
||||
jobId: 'wf-2',
|
||||
queueIndex: 1,
|
||||
job: { priority: 1 },
|
||||
mockState: 'pending',
|
||||
workflowId: 'workflow-2'
|
||||
})
|
||||
@@ -426,14 +426,14 @@ describe('useJobList', () => {
|
||||
queueStoreMock.historyTasks = [
|
||||
createTask({
|
||||
jobId: 'alpha',
|
||||
queueIndex: 2,
|
||||
job: { priority: 2 },
|
||||
mockState: 'completed',
|
||||
createTime: 2000,
|
||||
executionEndTimestamp: 2000
|
||||
}),
|
||||
createTask({
|
||||
jobId: 'beta',
|
||||
queueIndex: 1,
|
||||
job: { priority: 1 },
|
||||
mockState: 'failed',
|
||||
createTime: 1000,
|
||||
executionEndTimestamp: 1000
|
||||
@@ -471,13 +471,13 @@ describe('useJobList', () => {
|
||||
queueStoreMock.runningTasks = [
|
||||
createTask({
|
||||
jobId: 'active',
|
||||
queueIndex: 3,
|
||||
job: { priority: 3 },
|
||||
mockState: 'running',
|
||||
executionTime: 7_200_000
|
||||
}),
|
||||
createTask({
|
||||
jobId: 'other',
|
||||
queueIndex: 2,
|
||||
job: { priority: 2 },
|
||||
mockState: 'running',
|
||||
executionTime: 3_600_000
|
||||
})
|
||||
@@ -507,7 +507,7 @@ describe('useJobList', () => {
|
||||
queueStoreMock.runningTasks = [
|
||||
createTask({
|
||||
jobId: 'live-preview',
|
||||
queueIndex: 1,
|
||||
job: { priority: 1 },
|
||||
mockState: 'running'
|
||||
})
|
||||
]
|
||||
@@ -526,7 +526,7 @@ describe('useJobList', () => {
|
||||
queueStoreMock.runningTasks = [
|
||||
createTask({
|
||||
jobId: 'disabled-preview',
|
||||
queueIndex: 1,
|
||||
job: { priority: 1 },
|
||||
mockState: 'running'
|
||||
})
|
||||
]
|
||||
@@ -567,28 +567,28 @@ describe('useJobList', () => {
|
||||
queueStoreMock.historyTasks = [
|
||||
createTask({
|
||||
jobId: 'today-small',
|
||||
queueIndex: 4,
|
||||
job: { priority: 4 },
|
||||
mockState: 'completed',
|
||||
executionEndTimestamp: Date.now(),
|
||||
executionTime: 2_000
|
||||
}),
|
||||
createTask({
|
||||
jobId: 'today-large',
|
||||
queueIndex: 3,
|
||||
job: { priority: 3 },
|
||||
mockState: 'completed',
|
||||
executionEndTimestamp: Date.now(),
|
||||
executionTime: 5_000
|
||||
}),
|
||||
createTask({
|
||||
jobId: 'yesterday',
|
||||
queueIndex: 2,
|
||||
job: { priority: 2 },
|
||||
mockState: 'failed',
|
||||
executionEndTimestamp: Date.now() - 86_400_000,
|
||||
executionTime: 1_000
|
||||
}),
|
||||
createTask({
|
||||
jobId: 'undated',
|
||||
queueIndex: 1,
|
||||
job: { priority: 1 },
|
||||
mockState: 'pending'
|
||||
})
|
||||
]
|
||||
|
||||
@@ -4,64 +4,32 @@ import { useToast } from 'primevue/usetoast'
|
||||
import { t } from '@/i18n'
|
||||
|
||||
export function useCopyToClipboard() {
|
||||
const { copy, copied } = useClipboard()
|
||||
const { copy, copied } = useClipboard({ legacy: true })
|
||||
const toast = useToast()
|
||||
const showSuccessToast = () => {
|
||||
toast.add({
|
||||
severity: 'success',
|
||||
summary: t('g.success'),
|
||||
detail: t('clipboard.successMessage'),
|
||||
life: 3000
|
||||
})
|
||||
}
|
||||
const showErrorToast = () => {
|
||||
toast.add({
|
||||
severity: 'error',
|
||||
summary: t('g.error'),
|
||||
detail: t('clipboard.errorMessage')
|
||||
})
|
||||
}
|
||||
|
||||
function fallbackCopy(text: string) {
|
||||
const textarea = document.createElement('textarea')
|
||||
textarea.setAttribute('readonly', '')
|
||||
textarea.value = text
|
||||
textarea.style.position = 'absolute'
|
||||
textarea.style.left = '-9999px'
|
||||
textarea.setAttribute('aria-hidden', 'true')
|
||||
textarea.setAttribute('tabindex', '-1')
|
||||
textarea.style.width = '1px'
|
||||
textarea.style.height = '1px'
|
||||
document.body.appendChild(textarea)
|
||||
textarea.select()
|
||||
|
||||
try {
|
||||
// using legacy document.execCommand for fallback for old and linux browsers
|
||||
const successful = document.execCommand('copy')
|
||||
if (successful) {
|
||||
showSuccessToast()
|
||||
} else {
|
||||
showErrorToast()
|
||||
}
|
||||
} catch (err) {
|
||||
showErrorToast()
|
||||
} finally {
|
||||
textarea.remove()
|
||||
}
|
||||
}
|
||||
|
||||
const copyToClipboard = async (text: string) => {
|
||||
async function copyToClipboard(text: string) {
|
||||
try {
|
||||
await copy(text)
|
||||
if (copied.value) {
|
||||
showSuccessToast()
|
||||
toast.add({
|
||||
severity: 'success',
|
||||
summary: t('g.success'),
|
||||
detail: t('clipboard.successMessage'),
|
||||
life: 3000
|
||||
})
|
||||
} else {
|
||||
// If VueUse copy failed, try fallback
|
||||
fallbackCopy(text)
|
||||
toast.add({
|
||||
severity: 'error',
|
||||
summary: t('g.error'),
|
||||
detail: t('clipboard.errorMessage')
|
||||
})
|
||||
}
|
||||
} catch (err) {
|
||||
// VueUse copy failed, try fallback
|
||||
fallbackCopy(text)
|
||||
} catch {
|
||||
toast.add({
|
||||
severity: 'error',
|
||||
summary: t('g.error'),
|
||||
detail: t('clipboard.errorMessage')
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user