-
-
+
+
)
}
diff --git a/web/app/components/plugins/reference-setting-modal/auto-update-setting/__tests__/strategy-picker.spec.tsx b/web/app/components/plugins/reference-setting-modal/auto-update-setting/__tests__/strategy-picker.spec.tsx
index 5be10ff146..e287e48985 100644
--- a/web/app/components/plugins/reference-setting-modal/auto-update-setting/__tests__/strategy-picker.spec.tsx
+++ b/web/app/components/plugins/reference-setting-modal/auto-update-setting/__tests__/strategy-picker.spec.tsx
@@ -14,7 +14,7 @@ vi.mock('@langgenius/dify-ui/button', () => ({
}))
vi.mock('@/app/components/base/portal-to-follow-elem', async () => {
- const React = await import('react')
+ const _React = await import('react')
return {
PortalToFollowElem: ({
open,
diff --git a/web/app/components/plugins/reference-setting-modal/auto-update-setting/__tests__/tool-picker.spec.tsx b/web/app/components/plugins/reference-setting-modal/auto-update-setting/__tests__/tool-picker.spec.tsx
index 9e63622d3f..e89b1b3161 100644
--- a/web/app/components/plugins/reference-setting-modal/auto-update-setting/__tests__/tool-picker.spec.tsx
+++ b/web/app/components/plugins/reference-setting-modal/auto-update-setting/__tests__/tool-picker.spec.tsx
@@ -22,7 +22,7 @@ vi.mock('@/app/components/base/loading', () => ({
}))
vi.mock('@/app/components/base/portal-to-follow-elem', async () => {
- const React = await import('react')
+ const _React = await import('react')
return {
PortalToFollowElem: ({
open,
diff --git a/web/app/components/rag-pipeline/components/rag-pipeline-header/__tests__/index.spec.tsx b/web/app/components/rag-pipeline/components/rag-pipeline-header/__tests__/index.spec.tsx
index dda765b48f..cff2a5f4c2 100644
--- a/web/app/components/rag-pipeline/components/rag-pipeline-header/__tests__/index.spec.tsx
+++ b/web/app/components/rag-pipeline/components/rag-pipeline-header/__tests__/index.spec.tsx
@@ -192,27 +192,6 @@ vi.mock('ahooks', () => ({
useKeyPress: vi.fn(),
}))
-let portalOpenState = false
-vi.mock('@/app/components/base/portal-to-follow-elem', () => ({
- PortalToFollowElem: ({ children, open, onOpenChange: _onOpenChange }: PropsWithChildren<{
- open: boolean
- onOpenChange: (open: boolean) => void
- placement?: string
- offset?: unknown
- }>) => {
- portalOpenState = open
- return
{children}
- },
- PortalToFollowElemTrigger: ({ children, onClick }: PropsWithChildren<{ onClick?: () => void }>) => (
-
{children}
- ),
- PortalToFollowElemContent: ({ children }: PropsWithChildren) => {
- if (!portalOpenState)
- return null
- return
{children}
- },
-}))
-
vi.mock('../../../publish-as-knowledge-pipeline-modal', () => ({
default: ({ onConfirm, onCancel }: {
onConfirm: (name: string, icon: unknown, description?: string) => void
@@ -229,7 +208,6 @@ vi.mock('../../../publish-as-knowledge-pipeline-modal', () => ({
describe('RagPipelineHeader', () => {
beforeEach(() => {
vi.clearAllMocks()
- portalOpenState = false
mockStoreState = {
pipelineId: 'test-pipeline-id',
showDebugAndPreviewPanel: false,
@@ -351,7 +329,6 @@ describe('InputFieldButton', () => {
describe('Publisher', () => {
beforeEach(() => {
vi.clearAllMocks()
- portalOpenState = false
})
describe('Rendering', () => {
@@ -367,9 +344,9 @@ describe('Publisher', () => {
expect(button)!.toHaveClass('px-2')
})
- it('should render portal trigger element', () => {
+ it('should render publish trigger button', () => {
render(
)
- expect(screen.getByTestId('portal-trigger'))!.toBeInTheDocument()
+ expect(screen.getByRole('button', { name: /workflow\.common\.publish/i }))!.toBeInTheDocument()
})
})
@@ -377,7 +354,7 @@ describe('Publisher', () => {
it('should call handleSyncWorkflowDraft when opening', () => {
render(
)
- fireEvent.click(screen.getByTestId('portal-trigger'))
+ fireEvent.click(screen.getByRole('button', { name: /workflow\.common\.publish/i }))
expect(mockHandleSyncWorkflowDraft).toHaveBeenCalledWith(true)
})
@@ -385,12 +362,14 @@ describe('Publisher', () => {
it('should toggle open state when trigger clicked', () => {
render(
)
- const portal = screen.getByTestId('portal-elem')
- expect(portal)!.toHaveAttribute('data-open', 'false')
+ const trigger = screen.getByRole('button', { name: /workflow\.common\.publish/i })
+ expect(trigger)!.toHaveAttribute('aria-expanded', 'false')
- fireEvent.click(screen.getByTestId('portal-trigger'))
+ fireEvent.click(trigger)
expect(mockHandleSyncWorkflowDraft).toHaveBeenCalled()
+ expect(trigger)!.toHaveAttribute('aria-expanded', 'true')
+ expect(screen.getByText(/workflow\.common\.publishUpdate/i))!.toBeInTheDocument()
})
})
})
@@ -978,7 +957,6 @@ describe('RunMode', () => {
describe('Integration', () => {
beforeEach(() => {
vi.clearAllMocks()
- portalOpenState = false
mockStoreState = {
pipelineId: 'test-pipeline-id',
showDebugAndPreviewPanel: false,
diff --git a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/__tests__/index.spec.tsx b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/__tests__/index.spec.tsx
index abb334b393..afd7c04ed1 100644
--- a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/__tests__/index.spec.tsx
+++ b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/__tests__/index.spec.tsx
@@ -6,6 +6,40 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
import Publisher from '../index'
import Popup from '../popup'
+vi.mock('@langgenius/dify-ui/popover', async () => await import('@/__mocks__/base-ui-popover'))
+vi.mock('@langgenius/dify-ui/button', () => ({
+ Button: ({ children, onClick, disabled, variant, className }: Record
) => (
+
+ ),
+}))
+vi.mock('@langgenius/dify-ui/alert-dialog', () => ({
+ AlertDialog: ({ children, open, onOpenChange }: { children: React.ReactNode, open?: boolean, onOpenChange?: (open: boolean) => void }) => (
+ open
+ ? (
+
+ {children}
+
+
+ )
+ : null
+ ),
+ AlertDialogActions: ({ children }: { children: React.ReactNode }) => {children}
,
+ AlertDialogCancelButton: ({ children }: { children: React.ReactNode }) => ,
+ AlertDialogConfirmButton: ({ children, onClick, disabled }: Record) => ,
+ AlertDialogContent: ({ children }: { children: React.ReactNode }) => {children}
,
+ AlertDialogDescription: ({ children }: { children: React.ReactNode }) => {children}
,
+ AlertDialogTitle: ({ children }: { children: React.ReactNode }) => {children}
,
+}))
+
const mockPush = vi.fn()
vi.mock('@/next/navigation', () => ({
useParams: () => ({ datasetId: 'test-dataset-id' }),
@@ -60,7 +94,8 @@ vi.mock('@/context/dataset-detail', () => ({
const mockSetShowPricingModal = vi.fn()
vi.mock('@/context/modal-context', () => ({
- useModalContextSelector: () => mockSetShowPricingModal,
+ useModalContextSelector: (selector: (state: { setShowPricingModal: typeof mockSetShowPricingModal }) => T): T =>
+ selector({ setShowPricingModal: mockSetShowPricingModal }),
}))
const mockIsAllowPublishAsCustomKnowledgePipelineTemplate = vi.fn(() => true)
@@ -200,8 +235,7 @@ describe('publisher', () => {
it('should render portal element in closed state by default', () => {
renderWithQueryClient()
- const trigger = screen.getByText('workflow.common.publish').closest('[data-state]')
- expect(trigger).toHaveAttribute('data-state', 'closed')
+ expect(screen.getByTestId('popover')).toHaveAttribute('data-open', 'false')
expect(screen.queryByText('workflow.common.publishUpdate')).not.toBeInTheDocument()
})
@@ -277,6 +311,25 @@ describe('publisher', () => {
expect(screen.getByText('workflow.common.publishUpdate')).toBeInTheDocument()
})
})
+
+ it('should close the outer popover before opening publish-as follow-up flow', async () => {
+ mockPublishedAt.mockReturnValue(1700000000)
+ mockIsAllowPublishAsCustomKnowledgePipelineTemplate.mockReturnValue(false)
+ renderWithQueryClient()
+
+ fireEvent.click(screen.getByText('workflow.common.publish'))
+
+ await waitFor(() => {
+ expect(screen.getByText('pipeline.common.publishAs')).toBeInTheDocument()
+ })
+
+ fireEvent.click(screen.getByText('pipeline.common.publishAs'))
+
+ await waitFor(() => {
+ expect(screen.queryByText('pipeline.common.publishAs')).not.toBeInTheDocument()
+ })
+ expect(mockSetShowPricingModal).toHaveBeenCalled()
+ })
})
})
@@ -688,7 +741,7 @@ describe('publisher', () => {
expect(screen.getByText('pipeline.common.confirmPublish')).toBeInTheDocument()
})
- fireEvent.click(screen.getByRole('button', { name: 'common.operation.cancel' }))
+ fireEvent.click(screen.getByTestId('alert-dialog-close'))
await waitFor(() => {
expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument()
diff --git a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/__tests__/popup.spec.tsx b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/__tests__/popup.spec.tsx
index 103ee53210..dab8046c43 100644
--- a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/__tests__/popup.spec.tsx
+++ b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/__tests__/popup.spec.tsx
@@ -3,6 +3,31 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
import Popup from '../popup'
+vi.mock('@langgenius/dify-ui/alert-dialog', () => ({
+ AlertDialog: ({ children, open, onOpenChange }: { children: React.ReactNode, open?: boolean, onOpenChange?: (open: boolean) => void }) => (
+ open
+ ? (
+
+ {children}
+
+
+ )
+ : null
+ ),
+ AlertDialogActions: ({ children }: { children?: React.ReactNode }) => {children}
,
+ AlertDialogCancelButton: ({ children }: { children?: React.ReactNode }) => ,
+ AlertDialogConfirmButton: ({ children, onClick, disabled }: {
+ children?: React.ReactNode
+ onClick?: () => void
+ disabled?: boolean
+ }) => ,
+ AlertDialogContent: ({ children }: { children?: React.ReactNode }) => {children}
,
+ AlertDialogDescription: ({ children }: { children?: React.ReactNode }) => {children}
,
+ AlertDialogTitle: ({ children }: { children?: React.ReactNode }) => {children}
,
+}))
+
const mockPublishWorkflow = vi.fn().mockResolvedValue({ created_at: '2024-01-01T00:00:00Z' })
const mockPublishAsCustomizedPipeline = vi.fn().mockResolvedValue({})
const toastMocks = vi.hoisted(() => ({
@@ -36,6 +61,8 @@ let mockPublishedAt: string | undefined = '2024-01-01T00:00:00Z'
let mockDraftUpdatedAt: string | undefined = '2024-06-01T00:00:00Z'
let mockPipelineId: string | undefined = 'pipeline-123'
let mockIsAllowPublishAsCustom = true
+const mockUseBoolean = vi.hoisted(() => vi.fn())
+const mockUseKeyPress = vi.hoisted(() => vi.fn())
vi.mock('@/next/navigation', () => ({
useParams: () => ({ datasetId: 'ds-123' }),
useRouter: () => ({ push: mockPush }),
@@ -48,14 +75,8 @@ vi.mock('@/next/link', () => ({
}))
vi.mock('ahooks', () => ({
- useBoolean: (initial: boolean) => {
- const state = { value: initial }
- return [state.value, {
- setFalse: vi.fn(),
- setTrue: vi.fn(),
- }]
- },
- useKeyPress: vi.fn(),
+ useBoolean: (initial: boolean) => mockUseBoolean(initial),
+ useKeyPress: (...args: unknown[]) => mockUseKeyPress(...args),
}))
vi.mock('@/app/components/workflow/store', () => ({
@@ -126,7 +147,8 @@ vi.mock('@/context/i18n', () => ({
}))
vi.mock('@/context/modal-context', () => ({
- useModalContextSelector: () => mockSetShowPricingModal,
+ useModalContextSelector: (selector: (state: { setShowPricingModal: typeof mockSetShowPricingModal }) => T) =>
+ selector({ setShowPricingModal: mockSetShowPricingModal }),
}))
vi.mock('@/context/provider-context', () => ({
@@ -194,6 +216,11 @@ describe('Popup', () => {
mockDraftUpdatedAt = '2024-06-01T00:00:00Z'
mockPipelineId = 'pipeline-123'
mockIsAllowPublishAsCustom = true
+ mockUseBoolean.mockImplementation((initial: boolean) => [initial, {
+ setFalse: vi.fn(),
+ setTrue: vi.fn(),
+ }])
+ mockUseKeyPress.mockImplementation(() => {})
})
afterEach(() => {
@@ -289,12 +316,61 @@ describe('Popup', () => {
describe('Publish As Knowledge Pipeline', () => {
it('should show pricing modal when not allowed', () => {
mockIsAllowPublishAsCustom = false
- render()
+ const onRequestClose = vi.fn()
+ render()
fireEvent.click(screen.getByText('pipeline.common.publishAs'))
+ expect(onRequestClose).toHaveBeenCalledTimes(1)
expect(mockSetShowPricingModal).toHaveBeenCalled()
})
+
+ it('should request closing the outer popover before opening publish-as modal', () => {
+ const onRequestClose = vi.fn()
+ render()
+
+ fireEvent.click(screen.getByText('pipeline.common.publishAs'))
+
+ expect(onRequestClose).toHaveBeenCalledTimes(1)
+ })
+ })
+
+ describe('Overlay cleanup', () => {
+ it('should close confirm dialog when alert dialog requests close', () => {
+ const hideConfirm = vi.fn()
+ mockUseBoolean
+ .mockImplementationOnce(() => [true, { setFalse: hideConfirm, setTrue: vi.fn() }])
+ .mockImplementationOnce((initial: boolean) => [initial, { setFalse: vi.fn(), setTrue: vi.fn() }])
+ .mockImplementationOnce((initial: boolean) => [initial, { setFalse: vi.fn(), setTrue: vi.fn() }])
+ .mockImplementationOnce((initial: boolean) => [initial, { setFalse: vi.fn(), setTrue: vi.fn() }])
+
+ render()
+
+ fireEvent.click(screen.getByTestId('alert-dialog-close'))
+
+ expect(hideConfirm).toHaveBeenCalledTimes(1)
+ })
+ })
+
+ describe('Publish params', () => {
+ it('should publish as template with empty pipeline id fallback', async () => {
+ mockPipelineId = undefined
+ mockUseBoolean
+ .mockImplementationOnce((initial: boolean) => [initial, { setFalse: vi.fn(), setTrue: vi.fn() }])
+ .mockImplementationOnce((initial: boolean) => [initial, { setFalse: vi.fn(), setTrue: vi.fn() }])
+ .mockImplementationOnce(() => [true, { setFalse: vi.fn(), setTrue: vi.fn() }])
+ .mockImplementationOnce((initial: boolean) => [initial, { setFalse: vi.fn(), setTrue: vi.fn() }])
+ render()
+
+ fireEvent.click(screen.getByTestId('publish-as-confirm'))
+
+ expect(mockPublishAsCustomizedPipeline).toHaveBeenCalledWith({
+ pipelineId: '',
+ name: 'My Pipeline',
+ icon_info: { icon_type: 'emoji' },
+ description: 'desc',
+ })
+ })
})
describe('Time formatting', () => {
diff --git a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/index.tsx b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/index.tsx
index 3ea9aa0c1f..649b06ebca 100644
--- a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/index.tsx
+++ b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/index.tsx
@@ -1,4 +1,5 @@
import { Button } from '@langgenius/dify-ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@langgenius/dify-ui/popover'
import { RiArrowDownSLine } from '@remixicon/react'
import {
memo,
@@ -6,11 +7,6 @@ import {
useState,
} from 'react'
import { useTranslation } from 'react-i18next'
-import {
- PortalToFollowElem,
- PortalToFollowElemContent,
- PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
import { useNodesSyncDraft } from '@/app/components/workflow/hooks'
import Popup from './popup'
@@ -26,28 +22,31 @@ const Publisher = () => {
}, [handleSyncWorkflowDraft])
return (
-
- handleOpenChange(!open)}>
-
-
-
-
-
-
+
+ {t('common.publish', { ns: 'workflow' })}
+
+
+ )}
+ />
+
+ handleOpenChange(false)} />
+
+
)
}
diff --git a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx
index 9cb026dffe..31f5957029 100644
--- a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx
+++ b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx
@@ -39,7 +39,11 @@ import { usePublishWorkflow } from '@/service/use-workflow'
import PublishAsKnowledgePipelineModal from '../../publish-as-knowledge-pipeline-modal'
const PUBLISH_SHORTCUT = ['ctrl', '⇧', 'P']
-const Popup = () => {
+type PopupProps = {
+ onRequestClose?: () => void
+}
+
+const Popup = ({ onRequestClose }: PopupProps) => {
const { t } = useTranslation()
const { datasetId } = useParams()
const { push } = useRouter()
@@ -70,6 +74,7 @@ const Popup = () => {
const checked = await handleCheckBeforePublish()
if (checked) {
if (!publishedAt && !confirmVisible) {
+ onRequestClose?.()
showConfirm()
return
}
@@ -114,7 +119,7 @@ const Popup = () => {
if (confirmVisible)
hideConfirm()
}
- }, [publishing, handleCheckBeforePublish, publishedAt, confirmVisible, showPublishing, publishWorkflow, pipelineId, datasetId, showConfirm, t, workflowStore, mutateDatasetRes, invalidPublishedPipelineInfo, invalidDatasetList, hidePublishing, hideConfirm])
+ }, [publishing, handleCheckBeforePublish, publishedAt, confirmVisible, showPublishing, publishWorkflow, pipelineId, datasetId, showConfirm, t, workflowStore, mutateDatasetRes, invalidPublishedPipelineInfo, invalidDatasetList, hidePublishing, hideConfirm, onRequestClose])
useKeyPress(`${getKeyboardKeyCodeBySystem('ctrl')}.shift.p`, (e) => {
e.preventDefault()
if (published)
@@ -155,13 +160,14 @@ const Popup = () => {
hidePublishingAsCustomizedPipeline()
hidePublishAsKnowledgePipelineModal()
}
- }, [showPublishingAsCustomizedPipeline, publishAsCustomizedPipeline, pipelineId, t, invalidCustomizedTemplateList, hidePublishingAsCustomizedPipeline, hidePublishAsKnowledgePipelineModal])
+ }, [showPublishingAsCustomizedPipeline, publishAsCustomizedPipeline, pipelineId, t, invalidCustomizedTemplateList, hidePublishingAsCustomizedPipeline, hidePublishAsKnowledgePipelineModal, docLink])
const handleClickPublishAsKnowledgePipeline = useCallback(() => {
+ onRequestClose?.()
if (!isAllowPublishAsCustomKnowledgePipelineTemplate)
setShowPricingModal()
else
setShowPublishAsKnowledgePipelineModal()
- }, [isAllowPublishAsCustomKnowledgePipelineTemplate, setShowPublishAsKnowledgePipelineModal, setShowPricingModal])
+ }, [isAllowPublishAsCustomKnowledgePipelineTemplate, onRequestClose, setShowPublishAsKnowledgePipelineModal, setShowPricingModal])
return (
diff --git a/web/app/components/workflow-app/hooks/__tests__/use-workflow-run.spec.ts b/web/app/components/workflow-app/hooks/__tests__/use-workflow-run.spec.ts
index 7b54598774..59ba667f8d 100644
--- a/web/app/components/workflow-app/hooks/__tests__/use-workflow-run.spec.ts
+++ b/web/app/components/workflow-app/hooks/__tests__/use-workflow-run.spec.ts
@@ -501,7 +501,8 @@ describe('useWorkflowRun', () => {
windowWithDebugControllers.__allTriggersDebugAbortController = { abort: allTriggersAbort }
const refController = new AbortController()
const refAbortSpy = vi.spyOn(refController, 'abort')
- const { getAbortController } = mocks.mockSsePost.mock.calls.at(-1)?.[2] as {
+ const lastCall = mocks.mockSsePost.mock.calls.at(-1)
+ const { getAbortController } = (lastCall?.[2] ?? {}) as {
getAbortController?: (controller: AbortController) => void
}
getAbortController?.(refController)
diff --git a/web/app/components/workflow/block-selector/__tests__/main.spec.tsx b/web/app/components/workflow/block-selector/__tests__/main.spec.tsx
index 2cb0d3e98f..8dc1e81379 100644
--- a/web/app/components/workflow/block-selector/__tests__/main.spec.tsx
+++ b/web/app/components/workflow/block-selector/__tests__/main.spec.tsx
@@ -86,4 +86,53 @@ describe('NodeSelector', () => {
expect(reopenedInput.value).toBe('')
expect(screen.getByText('End')).toBeInTheDocument()
})
+
+ it('does not open or emit open changes when disabled', async () => {
+ const user = userEvent.setup()
+ const onOpenChange = vi.fn()
+
+ renderWorkflowComponent(
+
(
+
+ )}
+ />,
+ )
+
+ await user.click(screen.getByRole('button', { name: 'selector-closed' }))
+
+ expect(onOpenChange).not.toHaveBeenCalled()
+ expect(screen.queryByPlaceholderText('workflow.tabs.searchBlock')).not.toBeInTheDocument()
+ })
+
+ it('preserves the child trigger click handler when rendered as child', async () => {
+ const user = userEvent.setup()
+ const onTriggerClick = vi.fn()
+
+ renderWorkflowComponent(
+ (
+
+ )}
+ />,
+ )
+
+ await user.click(screen.getByRole('button', { name: 'open-selector' }))
+
+ expect(onTriggerClick).toHaveBeenCalledTimes(1)
+ expect(screen.getByPlaceholderText('workflow.tabs.searchBlock')).toBeInTheDocument()
+ })
})
diff --git a/web/app/components/workflow/block-selector/main.tsx b/web/app/components/workflow/block-selector/main.tsx
index 34f286da89..76854ebf0a 100644
--- a/web/app/components/workflow/block-selector/main.tsx
+++ b/web/app/components/workflow/block-selector/main.tsx
@@ -5,6 +5,7 @@ import type {
import type {
FC,
MouseEventHandler,
+ MouseEvent as ReactMouseEvent,
} from 'react'
import type {
CommonNodeType,
@@ -12,6 +13,12 @@ import type {
OnSelectBlock,
ToolWithProvider,
} from '../types'
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from '@langgenius/dify-ui/popover'
+import * as React from 'react'
import {
memo,
useCallback,
@@ -24,11 +31,6 @@ import {
Plus02,
} from '@/app/components/base/icons/src/vender/line/general'
import Input from '@/app/components/base/input'
-import {
- PortalToFollowElem,
- PortalToFollowElemContent,
- PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
import SearchBox from '@/app/components/plugins/marketplace/search-box'
import { useHooksStore } from '@/app/components/workflow/hooks-store'
import useNodes from '@/app/components/workflow/store/workflow/use-nodes'
@@ -142,6 +144,9 @@ const NodeSelector: FC = ({
})
const open = openFromProps === undefined ? localOpen : openFromProps
const handleOpenChange = useCallback((newOpen: boolean) => {
+ if (disabled)
+ return
+
setLocalOpen(newOpen)
if (!newOpen) {
@@ -154,13 +159,10 @@ const NodeSelector: FC = ({
if (onOpenChange)
onOpenChange(newOpen)
- }, [activeTab, onOpenChange])
- const handleTrigger = useCallback>((e) => {
- if (disabled)
- return
+ }, [disabled, onOpenChange])
+ const handleTrigger = useCallback>((e) => {
e.stopPropagation()
- handleOpenChange(!open)
- }, [handleOpenChange, open, disabled])
+ }, [])
const handleSelect = useCallback((type, pluginDefaultValue) => {
handleOpenChange(false)
@@ -203,36 +205,61 @@ const NodeSelector: FC = ({
return ''
}, [activeTab, t])
+ const defaultTriggerElement = (
+
+ )
+ const triggerElement = trigger ? trigger(open) : defaultTriggerElement
+ const triggerElementProps = React.isValidElement(triggerElement)
+ ? (triggerElement.props as {
+ onClick?: MouseEventHandler
+ })
+ : null
+ const resolvedTriggerElement = asChild && React.isValidElement(triggerElement)
+ ? React.cloneElement(
+ triggerElement as React.ReactElement<{
+ onClick?: MouseEventHandler
+ }>,
+ {
+ onClick: (e: ReactMouseEvent) => {
+ handleTrigger(e)
+ if (typeof triggerElementProps?.onClick === 'function')
+ triggerElementProps.onClick(e)
+ },
+ },
+ )
+ : (
+
+ {triggerElement}
+
+ )
+ const resolvedOffset = typeof offset === 'number' || typeof offset === 'function' ? undefined : offset
+ const sideOffset = typeof offset === 'number' ? offset : (resolvedOffset?.mainAxis ?? 0)
+ const alignOffset = typeof offset === 'number' ? 0 : (resolvedOffset?.crossAxis ?? 0)
+ const nativeButton = asChild
+ && React.isValidElement(triggerElement)
+ && (typeof triggerElement.type !== 'string' || triggerElement.type === 'button')
+
return (
-
-
+
- {
- trigger
- ? trigger(open)
- : (
-
- )
- }
-
-
= ({
snippetsElem={}
/>
-
-
+
+
)
}
diff --git a/web/app/components/workflow/header/__tests__/view-history.spec.tsx b/web/app/components/workflow/header/__tests__/view-history.spec.tsx
index 4481c72cf7..93e0b56125 100644
--- a/web/app/components/workflow/header/__tests__/view-history.spec.tsx
+++ b/web/app/components/workflow/header/__tests__/view-history.spec.tsx
@@ -10,14 +10,13 @@ const mockFormatTimeFromNow = vi.fn((value: number) => `from-now:${value}`)
const mockCloseAllInputFieldPanels = vi.fn()
const mockHandleNodesCancelSelected = vi.fn()
const mockHandleCancelDebugAndPreviewPanel = vi.fn()
+const mockHandleBackupDraft = vi.fn()
const mockFormatWorkflowRunIdentifier = vi.fn((finishedAt?: number, status?: string) => ` (${status || finishedAt || 'unknown'})`)
let mockIsChatMode = false
-vi.mock('../../hooks', async () => {
- const actual = await vi.importActual('../../hooks')
+vi.mock('../../hooks', () => {
return {
- ...actual,
useIsChatMode: () => mockIsChatMode,
useNodesInteractions: () => ({
handleNodesCancelSelected: mockHandleNodesCancelSelected,
@@ -25,6 +24,9 @@ vi.mock('../../hooks', async () => {
useWorkflowInteractions: () => ({
handleCancelDebugAndPreviewPanel: mockHandleCancelDebugAndPreviewPanel,
}),
+ useWorkflowRun: () => ({
+ handleBackupDraft: mockHandleBackupDraft,
+ }),
}
})
@@ -48,38 +50,46 @@ vi.mock('@/app/components/base/loading', () => ({
default: () => ,
}))
-vi.mock('@/app/components/base/tooltip', () => ({
- default: ({ children }: { children?: React.ReactNode }) => <>{children},
+vi.mock('@langgenius/dify-ui/toast', () => ({
+ toast: {
+ success: vi.fn(),
+ error: vi.fn(),
+ warning: vi.fn(),
+ info: vi.fn(),
+ },
}))
-vi.mock('@/app/components/base/portal-to-follow-elem', () => {
- const PortalContext = React.createContext({ open: false })
+vi.mock('@langgenius/dify-ui/button', () => ({
+ Button: ({
+ children,
+ ...props
+ }: React.ButtonHTMLAttributes) => (
+
+ ),
+}))
- return {
- PortalToFollowElem: ({
- children,
- open,
- }: {
- children?: React.ReactNode
- open: boolean
- }) => {children},
- PortalToFollowElemTrigger: ({
- children,
- onClick,
- }: {
- children?: React.ReactNode
- onClick?: () => void
- }) => {children}
,
- PortalToFollowElemContent: ({
- children,
- }: {
- children?: React.ReactNode
- }) => {
- const { open } = React.useContext(PortalContext)
- return open ? {children}
: null
- },
- }
-})
+vi.mock('@langgenius/dify-ui/tooltip', () => ({
+ Tooltip: ({ children }: { children?: React.ReactNode }) => <>{children},
+ TooltipTrigger: ({
+ children,
+ render,
+ }: {
+ children?: React.ReactNode
+ render?: React.ReactElement
+ }) => {
+ if (render && React.isValidElement(render)) {
+ const renderElement = render as React.ReactElement<{ children?: React.ReactNode }>
+ return React.cloneElement(renderElement, renderElement.props, children)
+ }
+
+ return <>{children}
+ },
+ TooltipContent: ({ children }: { children?: React.ReactNode }) => <>{children},
+}))
+
+vi.mock('@langgenius/dify-ui/popover', () => import('@/__mocks__/base-ui-popover'))
vi.mock('../../utils', async () => {
const actual = await vi.importActual('../../utils')
@@ -130,7 +140,7 @@ describe('ViewHistory', () => {
})
expect(mockUseWorkflowRunHistory).toHaveBeenCalledWith('/history', false)
- expect(screen.queryByTestId('portal-content')).not.toBeInTheDocument()
+ expect(screen.queryByTestId('popover-content')).not.toBeInTheDocument()
fireEvent.click(screen.getByRole('button', { name: 'workflow.common.showRunHistory' }))
@@ -165,7 +175,6 @@ describe('ViewHistory', () => {
})
it('renders workflow run history items and updates the workflow store when one is selected', () => {
- const handleBackupDraft = vi.fn()
const pausedRun = createHistoryItem({
id: 'run-paused',
status: WorkflowRunningStatus.Paused,
@@ -199,9 +208,6 @@ describe('ViewHistory', () => {
showEnvPanel: true,
controlMode: ControlMode.Pointer,
},
- hooksStoreProps: {
- handleBackupDraft,
- },
})
fireEvent.click(screen.getByRole('button', { name: 'workflow.common.showRunHistory' }))
@@ -217,7 +223,7 @@ describe('ViewHistory', () => {
expect(store.getState().showEnvPanel).toBe(false)
expect(store.getState().controlMode).toBe(ControlMode.Hand)
expect(mockCloseAllInputFieldPanels).toHaveBeenCalledTimes(1)
- expect(handleBackupDraft).toHaveBeenCalledTimes(1)
+ expect(mockHandleBackupDraft).toHaveBeenCalledTimes(1)
expect(mockHandleNodesCancelSelected).toHaveBeenCalledTimes(1)
expect(mockHandleCancelDebugAndPreviewPanel).toHaveBeenCalledTimes(1)
})
@@ -271,6 +277,6 @@ describe('ViewHistory', () => {
fireEvent.click(screen.getByRole('button', { name: 'common.operation.close' }))
expect(onClearLogAndMessageModal).toHaveBeenCalledTimes(1)
- expect(screen.queryByTestId('portal-content')).not.toBeInTheDocument()
+ expect(screen.queryByTestId('popover-content')).not.toBeInTheDocument()
})
})
diff --git a/web/app/components/workflow/header/view-history.tsx b/web/app/components/workflow/header/view-history.tsx
index 3f98f6cb6c..bde9f370c9 100644
--- a/web/app/components/workflow/header/view-history.tsx
+++ b/web/app/components/workflow/header/view-history.tsx
@@ -1,16 +1,20 @@
import { cn } from '@langgenius/dify-ui/cn'
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from '@langgenius/dify-ui/popover'
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipTrigger,
+} from '@langgenius/dify-ui/tooltip'
import {
memo,
useState,
} from 'react'
import { useTranslation } from 'react-i18next'
import Loading from '@/app/components/base/loading'
-import {
- PortalToFollowElem,
- PortalToFollowElemContent,
- PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
-import Tooltip from '@/app/components/base/tooltip'
import { useInputFieldPanel } from '@/app/components/rag-pipeline/hooks'
import {
useStore,
@@ -61,52 +65,60 @@ const ViewHistory = ({
return (
(
-
- setOpen(v => !v)}>
- {
- withText && (
-
)}
- >
-
- {t('common.showRunHistory', { ns: 'workflow' })}
-
+ />
)
- }
- {
- !withText && (
-
-
+ {
+ onClearLogAndMessageModal?.()
+ }}
+ >
+
+
+ )}
+ />
+
+
+ {t('common.viewRunHistory', { ns: 'workflow' })}
+
- )
- }
-
-
+ )}
+
-
-
+
+
)
)
}
diff --git a/web/app/components/workflow/header/view-workflow-history.tsx b/web/app/components/workflow/header/view-workflow-history.tsx
index 9f70187941..036f27d38d 100644
--- a/web/app/components/workflow/header/view-workflow-history.tsx
+++ b/web/app/components/workflow/header/view-workflow-history.tsx
@@ -1,5 +1,10 @@
import type { WorkflowHistoryState } from '../workflow-history-store'
import { cn } from '@langgenius/dify-ui/cn'
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from '@langgenius/dify-ui/popover'
import {
RiCloseLine,
RiHistoryLine,
@@ -13,11 +18,6 @@ import {
import { useTranslation } from 'react-i18next'
import { useShallow } from 'zustand/react/shallow'
import { useStore as useAppStore } from '@/app/components/app/store'
-import {
- PortalToFollowElem,
- PortalToFollowElemContent,
- PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
import Divider from '../../base/divider'
import { collaborationManager } from '../collaboration/core/collaboration-manager'
import {
@@ -91,12 +91,20 @@ const ViewWorkflowHistory = () => {
}, [t])
const calculateChangeList: ChangeHistoryList = useMemo(() => {
- const filterList = (list: any, startIndex = 0, reverse = false) => list.map((state: Partial
, index: number) => {
- const nodes = (state.nodes || store.getState().nodes) || []
- const nodeId = state?.workflowHistoryEventMeta?.nodeId
+ const filterList = (
+ list: Array | undefined>,
+ startIndex = 0,
+ reverse = false,
+ ) => list.flatMap((state, index) => {
+ if (!state)
+ return []
+
+ const nodes = state.nodes || store.getState().nodes || []
+ const nodeId = state.workflowHistoryEventMeta?.nodeId
const targetTitle = nodes.find(n => n.id === nodeId)?.data?.title ?? ''
- return {
- label: state.workflowHistoryEvent && getHistoryLabel(state.workflowHistoryEvent),
+
+ return [{
+ label: state.workflowHistoryEvent ? getHistoryLabel(state.workflowHistoryEvent) : '',
index: reverse ? list.length - 1 - index - startIndex : index - startIndex,
state: {
...state,
@@ -107,8 +115,8 @@ const ViewWorkflowHistory = () => {
}
: undefined,
},
- }
- }).filter(Boolean)
+ }]
+ })
const historyData = {
pastStates: filterList(pastStates, pastStates.length).reverse(),
@@ -132,35 +140,42 @@ const ViewWorkflowHistory = () => {
return (
(
- {
+ if (nodesReadOnly)
+ return
+ setOpen(nextOpen)
+ }}
>
- !nodesReadOnly && setOpen(v => !v)}>
-
- {
- if (nodesReadOnly)
- return
- setCurrentLogItem()
- setShowMessageLogModal(false)
- }}
- >
-
-
-
-
-
+
+ {
+ if (nodesReadOnly)
+ return
+ setCurrentLogItem()
+ setShowMessageLogModal(false)
+ }}
+ >
+
+
@@ -293,8 +308,8 @@ const ViewWorkflowHistory = () => {
{t('changeHistory.hintText', { ns: 'workflow' })}
-
-
+
+
)
)
}
diff --git a/web/app/components/workflow/hooks/use-nodes-interactions.ts b/web/app/components/workflow/hooks/use-nodes-interactions.ts
index f0e23586eb..0ce86602fa 100644
--- a/web/app/components/workflow/hooks/use-nodes-interactions.ts
+++ b/web/app/components/workflow/hooks/use-nodes-interactions.ts
@@ -1543,7 +1543,7 @@ export const useNodesInteractions = () => {
targetHandle,
type: CUSTOM_EDGE,
data: {
- ...(edge.data || {}),
+ ...edge.data,
sourceType: newCurrentNode.data.type,
targetType: targetNodeForEdge.data.type,
isInIteration,
@@ -1583,7 +1583,7 @@ export const useNodesInteractions = () => {
targetHandle,
type: CUSTOM_EDGE,
data: {
- ...(edge.data || {}),
+ ...edge.data,
sourceType: sourceNode.data.type,
targetType: newCurrentNode.data.type,
isInIteration: newNodeIsInIteration,
diff --git a/web/app/components/workflow/nodes/assigner/__tests__/integration.spec.tsx b/web/app/components/workflow/nodes/assigner/__tests__/integration.spec.tsx
index 5cd378ffa2..f1feb0a669 100644
--- a/web/app/components/workflow/nodes/assigner/__tests__/integration.spec.tsx
+++ b/web/app/components/workflow/nodes/assigner/__tests__/integration.spec.tsx
@@ -320,7 +320,7 @@ describe('assigner path', () => {
true)}
filterToAssignedVar={vi.fn(() => true)}
@@ -332,9 +332,9 @@ describe('assigner path', () => {
/>,
)
- fireEvent.change(screen.getByLabelText('code-editor'), { target: { value: '{\"a\":2}' } })
+ fireEvent.change(screen.getByLabelText('code-editor'), { target: { value: '{"a":2}' } })
expect(onChange).toHaveBeenLastCalledWith([
- createOperation({ operation: WriteMode.set, value: '{\"a\":2}' }),
+ createOperation({ operation: WriteMode.set, value: '{"a":2}' }),
], '{"a":2}')
onChange.mockClear()
diff --git a/web/app/components/workflow/nodes/http/components/__tests__/curl-panel.spec.tsx b/web/app/components/workflow/nodes/http/components/__tests__/curl-panel.spec.tsx
index 141f8fd5f9..069ab4547e 100644
--- a/web/app/components/workflow/nodes/http/components/__tests__/curl-panel.spec.tsx
+++ b/web/app/components/workflow/nodes/http/components/__tests__/curl-panel.spec.tsx
@@ -32,7 +32,7 @@ describe('curl-panel', () => {
describe('parseCurl', () => {
it('should parse method, headers, json body, and query params from a valid curl command', () => {
- const { node, error } = curlParser.parseCurl('curl -X POST -H \"Authorization: Bearer token\" --json \"{\"name\":\"openai\"}\" https://example.com/users?page=1&size=2')
+ const { node, error } = curlParser.parseCurl('curl -X POST -H "Authorization: Bearer token" --json "{"name":"openai"}" https://example.com/users?page=1&size=2')
expect(error).toBeNull()
expect(node).toMatchObject({
diff --git a/web/app/components/workflow/nodes/human-input/components/__tests__/button-style-dropdown.spec.tsx b/web/app/components/workflow/nodes/human-input/components/__tests__/button-style-dropdown.spec.tsx
index 056ebf4795..fe288899bd 100644
--- a/web/app/components/workflow/nodes/human-input/components/__tests__/button-style-dropdown.spec.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/__tests__/button-style-dropdown.spec.tsx
@@ -21,42 +21,7 @@ vi.mock('@langgenius/dify-ui/button', () => ({
},
}))
-vi.mock('@/app/components/base/portal-to-follow-elem', () => {
- const OpenContext = React.createContext(false)
-
- return {
- PortalToFollowElem: ({
- open,
- children,
- }: {
- open: boolean
- children?: React.ReactNode
- }) => (
-
- {children}
-
- ),
- PortalToFollowElemTrigger: ({
- children,
- onClick,
- }: {
- children?: React.ReactNode
- onClick?: () => void
- }) => (
-
- ),
- PortalToFollowElemContent: ({
- children,
- }: {
- children?: React.ReactNode
- }) => {
- const open = React.use(OpenContext)
- return open ? {children}
: null
- },
- }
-})
+vi.mock('@langgenius/dify-ui/popover', () => import('@/__mocks__/base-ui-popover'))
describe('ButtonStyleDropdown', () => {
const onChange = vi.fn()
@@ -80,10 +45,10 @@ describe('ButtonStyleDropdown', () => {
expect(mockButton).toHaveBeenCalledWith(expect.objectContaining({
variant: 'ghost',
}))
- expect(screen.getByTestId('portal'))!.toHaveAttribute('data-open', 'false')
+ expect(screen.getByTestId('popover'))!.toHaveAttribute('data-open', 'false')
- fireEvent.click(screen.getByTestId('portal-trigger'))
- expect(screen.getByTestId('portal'))!.toHaveAttribute('data-open', 'true')
+ fireEvent.click(screen.getByTestId('popover-trigger'))
+ expect(screen.getByTestId('popover'))!.toHaveAttribute('data-open', 'true')
expect(screen.getByText('nodes.humanInput.userActions.chooseStyle'))!.toBeInTheDocument()
fireEvent.click(screen.getByTestId('button-primary').parentElement as HTMLElement)
@@ -111,10 +76,10 @@ describe('ButtonStyleDropdown', () => {
variant: 'secondary',
}))
- fireEvent.click(screen.getByTestId('portal-trigger'))
+ fireEvent.click(screen.getByTestId('popover-trigger'))
- expect(screen.getByTestId('portal'))!.toHaveAttribute('data-open', 'false')
- expect(screen.queryByTestId('portal-content')).not.toBeInTheDocument()
+ expect(screen.getByTestId('popover'))!.toHaveAttribute('data-open', 'false')
+ expect(screen.queryByTestId('popover-content')).not.toBeInTheDocument()
expect(onChange).not.toHaveBeenCalled()
})
diff --git a/web/app/components/workflow/nodes/human-input/components/button-style-dropdown.tsx b/web/app/components/workflow/nodes/human-input/components/button-style-dropdown.tsx
index 44ddbbfa34..688f7a62f6 100644
--- a/web/app/components/workflow/nodes/human-input/components/button-style-dropdown.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/button-style-dropdown.tsx
@@ -1,17 +1,17 @@
import type { FC } from 'react'
import { Button } from '@langgenius/dify-ui/button'
import { cn } from '@langgenius/dify-ui/cn'
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from '@langgenius/dify-ui/popover'
import {
RiFontSize,
} from '@remixicon/react'
import * as React from 'react'
import { useMemo, useState } from 'react'
import { useTranslation } from 'react-i18next'
-import {
- PortalToFollowElem,
- PortalToFollowElemContent,
- PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
import { UserActionButtonType } from '../types'
const i18nPrefix = 'nodes.humanInput'
@@ -45,23 +45,29 @@ const ButtonStyleDropdown: FC = ({
}, [data])
return (
- {
+ if (readonly)
+ return
+ setOpen(nextOpen)
}}
>
- !readonly && setOpen(v => !v)}>
-
-
-
-
-
+
+
+
+ )}
+ />
+
{t(`${i18nPrefix}.userActions.chooseStyle`, { ns: 'workflow' })}
@@ -103,8 +109,8 @@ const ButtonStyleDropdown: FC
= ({
-