{
diff --git a/web/app/components/base/action-button/index.tsx b/web/app/components/base/action-button/index.tsx
index ec84fa06d8..86c8933a8a 100644
--- a/web/app/components/base/action-button/index.tsx
+++ b/web/app/components/base/action-button/index.tsx
@@ -30,7 +30,7 @@ const actionButtonVariants = cva(
},
)
-export type ActionButtonProps = {
+type ActionButtonProps = {
size?: 'xs' | 's' | 'm' | 'l' | 'xl'
state?: ActionButtonState
styleCss?: CSSProperties
@@ -73,4 +73,4 @@ const ActionButton = ({ className, size, state = ActionButtonState.Default, styl
ActionButton.displayName = 'ActionButton'
export default ActionButton
-export { ActionButton, ActionButtonState, actionButtonVariants }
+export { ActionButton, ActionButtonState }
diff --git a/web/app/components/base/chat/chat-with-history/__tests__/header-in-mobile.spec.tsx b/web/app/components/base/chat/chat-with-history/__tests__/header-in-mobile.spec.tsx
index a183a7670b..af58a29fcc 100644
--- a/web/app/components/base/chat/chat-with-history/__tests__/header-in-mobile.spec.tsx
+++ b/web/app/components/base/chat/chat-with-history/__tests__/header-in-mobile.spec.tsx
@@ -211,8 +211,9 @@ describe('HeaderInMobile', () => {
fireEvent.click(screen.getByText(/share\.chat\.viewChatSettings/i))
// Check if chat settings overlay is open
- // Check if chat settings overlay is open
- expect(screen.getByTestId('mobile-chat-settings-overlay'))!.toBeInTheDocument()
+ await waitFor(() => {
+ expect(screen.getByTestId('mobile-chat-settings-overlay')).toBeInTheDocument()
+ })
// Close chat settings via overlay click
fireEvent.click(screen.getByTestId('mobile-chat-settings-overlay'))
@@ -236,7 +237,9 @@ describe('HeaderInMobile', () => {
})
fireEvent.click(screen.getByText(/share\.chat\.viewChatSettings/i))
- expect(screen.getByTestId('mobile-chat-settings-overlay'))!.toBeInTheDocument()
+ await waitFor(() => {
+ expect(screen.getByTestId('mobile-chat-settings-overlay')).toBeInTheDocument()
+ })
// Click inside the settings panel (find the title)
const settingsTitle = screen.getByText(/share\.chat\.chatSettingsTitle/i)
@@ -282,7 +285,9 @@ describe('HeaderInMobile', () => {
})
fireEvent.click(screen.getByText(/share\.chat\.resetChat/i))
- expect(handleNewConversation).toHaveBeenCalled()
+ await waitFor(() => {
+ expect(handleNewConversation).toHaveBeenCalled()
+ })
})
it('should handle pin conversation', async () => {
@@ -348,8 +353,7 @@ describe('HeaderInMobile', () => {
fireEvent.click(screen.getByText(/explore\.sidebar\.action\.rename/i))
// RenameModal should be visible
- // RenameModal should be visible
- expect(screen.getByRole('dialog'))!.toBeInTheDocument()
+ expect(await screen.findByRole('dialog')).toBeInTheDocument()
const input = screen.getByDisplayValue('Conv 1')
fireEvent.change(input, { target: { value: 'New Name' } })
@@ -377,8 +381,7 @@ describe('HeaderInMobile', () => {
fireEvent.click(screen.getByText(/explore\.sidebar\.action\.rename/i))
// RenameModal should be visible
- // RenameModal should be visible
- expect(screen.getByRole('dialog'))!.toBeInTheDocument()
+ expect(await screen.findByRole('dialog')).toBeInTheDocument()
// Click cancel button
const cancelButton = screen.getByRole('button', { name: /common\.operation\.cancel/i })
@@ -410,8 +413,7 @@ describe('HeaderInMobile', () => {
fireEvent.click(screen.getByText(/explore\.sidebar\.action\.rename/i))
// RenameModal should be visible with loading state
- // RenameModal should be visible with loading state
- expect(screen.getByRole('dialog'))!.toBeInTheDocument()
+ expect(await screen.findByRole('dialog')).toBeInTheDocument()
})
it('should handle delete conversation', async () => {
diff --git a/web/app/components/base/chat/chat-with-history/header/__tests__/mobile-operation-dropdown.spec.tsx b/web/app/components/base/chat/chat-with-history/header/__tests__/mobile-operation-dropdown.spec.tsx
index 295bebecac..525f9b89a5 100644
--- a/web/app/components/base/chat/chat-with-history/header/__tests__/mobile-operation-dropdown.spec.tsx
+++ b/web/app/components/base/chat/chat-with-history/header/__tests__/mobile-operation-dropdown.spec.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react'
+import { render, screen, waitFor } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import * as React from 'react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
@@ -53,11 +53,16 @@ describe('MobileOperationDropdown Component', () => {
// Reset Chat
await user.click(screen.getByText('share.chat.resetChat'))
- expect(defaultProps.handleResetChat).toHaveBeenCalledTimes(1)
+ await waitFor(() => {
+ expect(defaultProps.handleResetChat).toHaveBeenCalledTimes(1)
+ })
+ await user.click(screen.getByRole('button'))
// View Chat Settings
await user.click(screen.getByText('share.chat.viewChatSettings'))
- expect(defaultProps.handleViewChatSettings).toHaveBeenCalledTimes(1)
+ await waitFor(() => {
+ expect(defaultProps.handleViewChatSettings).toHaveBeenCalledTimes(1)
+ })
})
it('applies hover state to ActionButton when open', async () => {
@@ -72,4 +77,16 @@ describe('MobileOperationDropdown Component', () => {
await user.click(trigger)
expect(trigger).toHaveClass('action-btn-hover')
})
+
+ it('closes the menu after clicking an action', async () => {
+ const user = userEvent.setup()
+ render(
)
+
+ await user.click(screen.getByRole('button'))
+ await user.click(screen.getByText('share.chat.resetChat'))
+
+ await waitFor(() => {
+ expect(screen.queryByText('share.chat.resetChat')).not.toBeInTheDocument()
+ })
+ })
})
diff --git a/web/app/components/base/chat/chat-with-history/header/__tests__/operation.spec.tsx b/web/app/components/base/chat/chat-with-history/header/__tests__/operation.spec.tsx
index 454f20066e..294d5eebc5 100644
--- a/web/app/components/base/chat/chat-with-history/header/__tests__/operation.spec.tsx
+++ b/web/app/components/base/chat/chat-with-history/header/__tests__/operation.spec.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react'
+import { render, screen, waitFor } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import * as React from 'react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
@@ -74,12 +74,18 @@ describe('Operation Component', () => {
expect(defaultProps.togglePin).toHaveBeenCalledTimes(1)
// Rename
+ await user.click(screen.getByText('Chat Title'))
await user.click(screen.getByText('explore.sidebar.action.rename'))
- expect(defaultProps.onRenameConversation).toHaveBeenCalledTimes(1)
+ await waitFor(() => {
+ expect(defaultProps.onRenameConversation).toHaveBeenCalledTimes(1)
+ })
// Delete
+ await user.click(screen.getByText('Chat Title'))
await user.click(screen.getByText('explore.sidebar.action.delete'))
- expect(defaultProps.onDelete).toHaveBeenCalledTimes(1)
+ await waitFor(() => {
+ expect(defaultProps.onDelete).toHaveBeenCalledTimes(1)
+ })
})
it('applies hover background when open', async () => {
diff --git a/web/app/components/base/chat/chat-with-history/header/mobile-operation-dropdown.tsx b/web/app/components/base/chat/chat-with-history/header/mobile-operation-dropdown.tsx
index 43cf25908c..5d80db7ac3 100644
--- a/web/app/components/base/chat/chat-with-history/header/mobile-operation-dropdown.tsx
+++ b/web/app/components/base/chat/chat-with-history/header/mobile-operation-dropdown.tsx
@@ -1,7 +1,12 @@
-import { useState } from 'react'
+import { useCallback, useState } from 'react'
import { useTranslation } from 'react-i18next'
import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
-import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
type Props = {
handleResetChat: () => void
@@ -16,40 +21,45 @@ const MobileOperationDropdown = ({
}: Props) => {
const { t } = useTranslation()
const [open, setOpen] = useState(false)
+ const handleMenuAction = useCallback((callback: () => void) => {
+ setOpen(false)
+ queueMicrotask(callback)
+ }, [])
return (
-
- setOpen(v => !v)}
+
-
-
-
+
+ handleMenuAction(handleResetChat)}
>
-
- {t('chat.resetChat', { ns: 'share' })}
-
- {!hideViewChatSettings && (
-
- {t('chat.viewChatSettings', { ns: 'share' })}
-
- )}
-
-
+
{t('chat.resetChat', { ns: 'share' })}
+
+ {!hideViewChatSettings && (
+
handleMenuAction(handleViewChatSettings)}
+ >
+ {t('chat.viewChatSettings', { ns: 'share' })}
+
+ )}
+
+
)
}
diff --git a/web/app/components/base/chat/chat-with-history/header/operation.tsx b/web/app/components/base/chat/chat-with-history/header/operation.tsx
index d61af1f6a1..d439a43c1f 100644
--- a/web/app/components/base/chat/chat-with-history/header/operation.tsx
+++ b/web/app/components/base/chat/chat-with-history/header/operation.tsx
@@ -1,14 +1,16 @@
'use client'
-import type { Placement } from '@floating-ui/react'
import type { FC } from 'react'
+import type { Placement } from '@/app/components/base/ui/placement'
import { cn } from '@langgenius/dify-ui/cn'
-import {
- RiArrowDownSLine,
-} from '@remixicon/react'
import * as React from 'react'
-import { useState } from 'react'
+import { useCallback, useState } from 'react'
import { useTranslation } from 'react-i18next'
-import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
type Props = {
title: string
@@ -33,42 +35,51 @@ const Operation: FC
= ({
}) => {
const { t } = useTranslation()
const [open, setOpen] = useState(false)
+ const handleDeferredAction = useCallback((action: () => void) => {
+ setOpen(false)
+ queueMicrotask(action)
+ }, [])
return (
-
- setOpen(v => !v)}
+
-
-
-
- {isPinned ? t('sidebar.action.unpin', { ns: 'explore' }) : t('sidebar.action.pin', { ns: 'explore' })}
-
- {isShowRenameConversation && (
-
- {t('sidebar.action.rename', { ns: 'explore' })}
-
- )}
- {isShowDelete && (
-
- {t('sidebar.action.delete', { ns: 'explore' })}
-
- )}
-
-
+
+
+
+ {isPinned ? t('sidebar.action.unpin', { ns: 'explore' }) : t('sidebar.action.pin', { ns: 'explore' })}
+
+ {isShowRenameConversation && (
+ onRenameConversation && handleDeferredAction(onRenameConversation)}
+ >
+ {t('sidebar.action.rename', { ns: 'explore' })}
+
+ )}
+ {isShowDelete && (
+ handleDeferredAction(onDelete)}
+ >
+ {t('sidebar.action.delete', { ns: 'explore' })}
+
+ )}
+
+
)
}
export default React.memo(Operation)
diff --git a/web/app/components/base/chat/chat-with-history/sidebar/__tests__/operation.spec.tsx b/web/app/components/base/chat/chat-with-history/sidebar/__tests__/operation.spec.tsx
index e46b54872e..5aa8da7965 100644
--- a/web/app/components/base/chat/chat-with-history/sidebar/__tests__/operation.spec.tsx
+++ b/web/app/components/base/chat/chat-with-history/sidebar/__tests__/operation.spec.tsx
@@ -1,16 +1,9 @@
-import { render, screen } from '@testing-library/react'
+import { render, screen, waitFor } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import * as React from 'react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import Operation from '../operation'
-// Mock PortalToFollowElem components to render children in place
-vi.mock('@/app/components/base/portal-to-follow-elem', () => ({
- PortalToFollowElem: ({ children, open }: { children: React.ReactNode, open: boolean }) => {children}
,
- PortalToFollowElemTrigger: ({ children, onClick }: { children: React.ReactNode, onClick?: () => void }) => {children}
,
- PortalToFollowElemContent: ({ children }: { children: React.ReactNode }) => {children}
,
-}))
-
describe('Operation', () => {
const defaultProps = {
isActive: false,
@@ -72,7 +65,9 @@ describe('Operation', () => {
await user.click(screen.getByRole('button'))
await user.click(screen.getByText('explore.sidebar.action.rename'))
- expect(defaultProps.onRenameConversation).toHaveBeenCalled()
+ await waitFor(() => {
+ expect(defaultProps.onRenameConversation).toHaveBeenCalled()
+ })
})
it('should call onDelete when delete is clicked', async () => {
@@ -82,7 +77,9 @@ describe('Operation', () => {
await user.click(screen.getByRole('button'))
await user.click(screen.getByText('explore.sidebar.action.delete'))
- expect(defaultProps.onDelete).toHaveBeenCalled()
+ await waitFor(() => {
+ expect(defaultProps.onDelete).toHaveBeenCalled()
+ })
})
it('should respect visibility props', async () => {
@@ -108,8 +105,7 @@ describe('Operation', () => {
await user.click(screen.getByRole('button'))
- const portalContent = screen.getByTestId('portal-content')
- expect(portalContent).toBeInTheDocument()
+ expect(screen.getByText('explore.sidebar.action.pin')).toBeInTheDocument()
})
it('should close dropdown when item hovering stops', async () => {
@@ -120,5 +116,60 @@ describe('Operation', () => {
expect(screen.getByText('explore.sidebar.action.pin')).toBeInTheDocument()
rerender(
+
,
+ )
+
+ await user.click(screen.getByRole('button'))
+
+ expect(parentClick).not.toHaveBeenCalled()
+ })
+
+ it('should not bubble popup clicks to the parent container', async () => {
+ const user = userEvent.setup()
+ const parentClick = vi.fn()
+
+ render(
+
+
,
+ )
+
+ await user.click(screen.getByRole('button'))
+ await user.click(screen.getByRole('menu'))
+
+ expect(parentClick).not.toHaveBeenCalled()
})
})
diff --git a/web/app/components/base/chat/chat-with-history/sidebar/operation.tsx b/web/app/components/base/chat/chat-with-history/sidebar/operation.tsx
index 18ff3e4d62..adda03fb55 100644
--- a/web/app/components/base/chat/chat-with-history/sidebar/operation.tsx
+++ b/web/app/components/base/chat/chat-with-history/sidebar/operation.tsx
@@ -1,19 +1,17 @@
'use client'
import type { FC } from 'react'
import { cn } from '@langgenius/dify-ui/cn'
-import {
- RiDeleteBinLine,
- RiEditLine,
- RiMoreFill,
- RiPushpinLine,
- RiUnpinLine,
-} from '@remixicon/react'
import { useBoolean } from 'ahooks'
import * as React from 'react'
-import { useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
-import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
type Props = {
isActive?: boolean
@@ -38,24 +36,29 @@ const Operation: FC = ({
}) => {
const { t } = useTranslation()
const [open, setOpen] = useState(false)
- const ref = useRef(null)
const [isHovering, { setTrue: setIsHovering, setFalse: setNotHovering }] = useBoolean(false)
useEffect(() => {
if (!isItemHovering && !isHovering)
setOpen(false)
}, [isItemHovering, isHovering])
+ const handleDeferredAction = useCallback((action?: () => void) => {
+ if (!action)
+ return
+ setOpen(false)
+ queueMicrotask(action)
+ }, [])
return (
-
- setOpen(v => !v)}
+ = ({
: ActionButtonState.Default
}
>
-
-
-
-
+
e.stopPropagation(),
+ }}
+ >
+ {
e.stopPropagation()
+ togglePin()
}}
>
-
- {isPinned && {isPinned ? t('sidebar.action.unpin', { ns: 'explore' }) : t('sidebar.action.pin', { ns: 'explore' })}
-
- {isShowRenameConversation && (
-
- {t('sidebar.action.rename', { ns: 'explore' })}
-
- )}
- {isShowDelete && (
-
- {t('sidebar.action.delete', { ns: 'explore' })}
-
- )}
-
-
+ {isPinned && {isPinned ? t('sidebar.action.unpin', { ns: 'explore' }) : t('sidebar.action.pin', { ns: 'explore' })}
+
+ {isShowRenameConversation && (
+ {
+ e.stopPropagation()
+ handleDeferredAction(onRenameConversation)
+ }}
+ >
+ {t('sidebar.action.rename', { ns: 'explore' })}
+
+ )}
+ {isShowDelete && (
+ {
+ e.stopPropagation()
+ handleDeferredAction(onDelete)
+ }}
+ >
+ {t('sidebar.action.delete', { ns: 'explore' })}
+
+ )}
+
+
)
}
export default React.memo(Operation)
diff --git a/web/app/components/base/dropdown/__tests__/index.spec.tsx b/web/app/components/base/dropdown/__tests__/index.spec.tsx
deleted file mode 100644
index 9820554e3d..0000000000
--- a/web/app/components/base/dropdown/__tests__/index.spec.tsx
+++ /dev/null
@@ -1,225 +0,0 @@
-import { act, cleanup, fireEvent, render, screen } from '@testing-library/react'
-import Dropdown from '../index'
-
-describe('Dropdown Component', () => {
- const mockItems = [
- { value: 'option1', text: 'Option 1' },
- { value: 'option2', text: 'Option 2' },
- ]
- const mockSecondItems = [
- { value: 'option3', text: 'Option 3' },
- ]
- const onSelect = vi.fn()
-
- afterEach(() => {
- cleanup()
- vi.clearAllMocks()
- })
-
- it('renders default trigger properly', () => {
- const { container } = render(
- {open ? 'Open' : 'Closed'} }
- />,
- )
- const trigger = screen.getByTestId('custom-trigger')
- expect(trigger).toBeInTheDocument()
- expect(trigger).toHaveTextContent('Closed')
- })
-
- it('opens dropdown menu on trigger click and shows items', async () => {
- render(
- JSX Content },
- ]
- render(
- Archive },
- { value: 'delete', text: Delete },
-]
-
-const meta = {
- title: 'Base/Navigation/Dropdown',
- component: Dropdown,
- parameters: {
- docs: {
- description: {
- component: 'Small contextual menu with optional destructive section. Uses portal positioning utilities for precise placement.',
- },
- },
- },
- tags: ['autodocs'],
- args: {
- items: PRIMARY_ITEMS,
- secondItems: SECONDARY_ITEMS,
- },
-} satisfies Meta
-
-export default meta
-type Story = StoryObj
-
-const DropdownDemo = (props: React.ComponentProps) => {
- const [lastAction, setLastAction] = useState('None')
-
- return (
-
-
{
- setLastAction(String(item.value))
- props.onSelect?.(item)
- }}
- />
-
- Last action:
- {' '}
- {lastAction}
-
- (
-
- Actions
-
- ▾
-
-
- )}
- />
- ),
- args: {
- items: PRIMARY_ITEMS,
- onSelect: fn(),
- },
-}
diff --git a/web/app/components/base/dropdown/index.tsx b/web/app/components/base/dropdown/index.tsx
deleted file mode 100644
index f9a19f34ea..0000000000
--- a/web/app/components/base/dropdown/index.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-import type { FC } from 'react'
-import type { ActionButtonProps } from '@/app/components/base/action-button'
-import { cn } from '@langgenius/dify-ui/cn'
-import {
- RiMoreFill,
-} from '@remixicon/react'
-import { useState } from 'react'
-import ActionButton from '@/app/components/base/action-button'
-import {
- PortalToFollowElem,
- PortalToFollowElemContent,
- PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
-
-export type Item = {
- value: string | number
- text: string | React.JSX.Element
-}
-type DropdownProps = {
- items: Item[]
- secondItems?: Item[]
- onSelect: (item: Item) => void
- renderTrigger?: (open: boolean) => React.ReactNode
- triggerProps?: ActionButtonProps
- popupClassName?: string
- itemClassName?: string
- secondItemClassName?: string
-}
-const Dropdown: FC = ({
- items,
- onSelect,
- secondItems,
- renderTrigger,
- triggerProps,
- popupClassName,
- itemClassName,
- secondItemClassName,
-}) => {
- const [open, setOpen] = useState(false)
-
- const handleSelect = (item: Item) => {
- setOpen(false)
- onSelect(item)
- }
-
- return (
-
- setOpen(v => !v)}>
- {
- renderTrigger
- ? renderTrigger(open)
- : (
-
-
- )
- }
-
-
-
- {
- !!items.length && (
-
- {
- items.map(item => (
-
handleSelect(item)}
- >
- {item.text}
-
- ))
- }
-
- )
- }
- {
- (!!items.length && !!secondItems?.length) && (
-
- )
- }
- {
- !!secondItems?.length && (
-
- {
- secondItems.map(item => (
-
handleSelect(item)}
- >
- {item.text}
-
- ))
- }
-
- )
- }
-
-
- )
-}
-
-export default Dropdown
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/__tests__/index.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/__tests__/index.spec.tsx
index 24a241ff93..906a9e01e0 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/__tests__/index.spec.tsx
@@ -1,4 +1,4 @@
-import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { fireEvent, render, screen } from '@testing-library/react'
import * as React from 'react'
import Breadcrumbs from '../index'
@@ -44,6 +44,16 @@ const resetMockStoreState = () => {
mockStoreState.setBucket = vi.fn()
}
+const getDropdownTrigger = () => {
+ return document.querySelector('[aria-haspopup="menu"]') as HTMLElement | null
+}
+
+const openCollapsedBreadcrumbDropdown = () => {
+ const dropdownTrigger = getDropdownTrigger()
+ expect(dropdownTrigger).toBeInTheDocument()
+ fireEvent.click(dropdownTrigger as HTMLElement)
+}
+
describe('Breadcrumbs', () => {
beforeEach(() => {
vi.clearAllMocks()
@@ -437,15 +447,11 @@ describe('Breadcrumbs', () => {
render(
-
+
-
-
-
+
+
+
/
-
+
)
}
diff --git a/web/app/components/explore/item-operation/__tests__/index.spec.tsx b/web/app/components/explore/item-operation/__tests__/index.spec.tsx
index f7f9b44a84..d54c644ab0 100644
--- a/web/app/components/explore/item-operation/__tests__/index.spec.tsx
+++ b/web/app/components/explore/item-operation/__tests__/index.spec.tsx
@@ -1,6 +1,81 @@
import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import * as React from 'react'
import ItemOperation from '../index'
+vi.mock('@/app/components/base/ui/dropdown-menu', () => {
+ const DropdownMenuContext = React.createContext<{ isOpen: boolean, setOpen: (open: boolean) => void } | null>(null)
+
+ const useDropdownMenuContext = () => {
+ const context = React.use(DropdownMenuContext)
+ if (!context)
+ throw new Error('DropdownMenu components must be wrapped in DropdownMenu')
+ return context
+ }
+
+ return {
+ DropdownMenu: ({ children, open, onOpenChange }: { children: React.ReactNode, open: boolean, onOpenChange?: (open: boolean) => void }) => (
+
+ {children}
+
+ ),
+ DropdownMenuTrigger: ({
+ children,
+ onClick,
+ ...props
+ }: React.ButtonHTMLAttributes) => {
+ const { isOpen, setOpen } = useDropdownMenuContext()
+ return (
+ {
+ onClick?.(e)
+ setOpen(!isOpen)
+ }}
+ {...props}
+ >
+ {children}
+
+ )
+ },
+ DropdownMenuContent: ({
+ children,
+ popupProps,
+ }: {
+ children: React.ReactNode
+ popupProps?: React.HTMLAttributes
+ }) => {
+ const { isOpen } = useDropdownMenuContext()
+ if (!isOpen)
+ return null
+
+ return {children}
+ },
+ DropdownMenuItem: ({
+ children,
+ onClick,
+ className,
+ }: {
+ children: React.ReactNode
+ onClick?: React.MouseEventHandler
+ className?: string
+ }) => {
+ const { setOpen } = useDropdownMenuContext()
+ return (
+ {
+ onClick?.(e)
+ setOpen(false)
+ }}
+ >
+ {children}
+
+ )
+ },
+ }
+})
+
describe('ItemOperation', () => {
beforeEach(() => {
vi.clearAllMocks()
@@ -67,14 +142,27 @@ describe('ItemOperation', () => {
expect(props.onDelete).toHaveBeenCalledTimes(1)
})
+
+ it('should call onRenameConversation when clicking rename action', async () => {
+ const onRenameConversation = vi.fn()
+ renderComponent({
+ isShowRenameConversation: true,
+ onRenameConversation,
+ })
+
+ fireEvent.click(screen.getByTestId('item-operation-trigger'))
+ fireEvent.click(await screen.findByText('explore.sidebar.action.rename'))
+
+ expect(onRenameConversation).toHaveBeenCalledTimes(1)
+ })
})
describe('Edge Cases', () => {
it('should close the menu when mouse leaves the panel and item is not hovering', async () => {
renderComponent()
fireEvent.click(screen.getByTestId('item-operation-trigger'))
- const pinText = await screen.findByText('explore.sidebar.action.pin')
- const menu = pinText.closest('div')?.parentElement as HTMLElement
+ await screen.findByText('explore.sidebar.action.pin')
+ const menu = screen.getByTestId('dropdown-content')
fireEvent.mouseEnter(menu)
fireEvent.mouseLeave(menu)
@@ -83,5 +171,25 @@ describe('ItemOperation', () => {
expect(screen.queryByText('explore.sidebar.action.pin')).not.toBeInTheDocument()
})
})
+
+ it('should stop propagation when clicking inside the dropdown content', async () => {
+ const onParentClick = vi.fn()
+
+ render(
+
+
,
+ )
+
+ fireEvent.click(screen.getByTestId('item-operation-trigger'))
+ fireEvent.click(await screen.findByTestId('dropdown-content'))
+
+ expect(onParentClick).not.toHaveBeenCalled()
+ })
})
})
diff --git a/web/app/components/explore/item-operation/index.tsx b/web/app/components/explore/item-operation/index.tsx
index 94eed731fa..72bd00fa6e 100644
--- a/web/app/components/explore/item-operation/index.tsx
+++ b/web/app/components/explore/item-operation/index.tsx
@@ -7,10 +7,14 @@ import {
} from '@remixicon/react'
import { useBoolean } from 'ahooks'
import * as React from 'react'
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
-
-import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
import { Pin02 } from '../../base/icons/src/vender/line/general'
import s from './style.module.css'
@@ -35,61 +39,74 @@ const ItemOperation: FC = ({
isShowDelete,
onDelete,
}) => {
- const { t } = useTranslation()
+ const { t } = useTranslation('explore')
+ const { t: tCommon } = useTranslation('common')
const [open, setOpen] = useState(false)
- const ref = useRef(null)
const [isHovering, { setTrue: setIsHovering, setFalse: setNotHovering }] = useBoolean(false)
useEffect(() => {
if (!isItemHovering && !isHovering)
setOpen(false)
}, [isItemHovering, isHovering])
return (
-
- setOpen(v => !v)}
+ {
+ e.stopPropagation()
+ }}
>
-
-
-
- {tCommon('operation.more')}
+
+ e.stopPropagation(),
+ }}
>
- {
e.stopPropagation()
+ togglePin()
}}
>
-
-
-
{isPinned ? t('sidebar.action.unpin', { ns: 'explore' }) : t('sidebar.action.pin', { ns: 'explore' })}
-
- {isShowRenameConversation && (
-
- {t('sidebar.action.rename', { ns: 'explore' })}
-
- )}
- {isShowDelete && (
-
- {t('sidebar.action.delete', { ns: 'explore' })}
-
- )}
-
-
+ {isPinned ? t('sidebar.action.unpin') : t('sidebar.action.pin')}
+
+ {isShowRenameConversation && (
+ {
+ e.stopPropagation()
+ onRenameConversation?.()
+ }}
+ >
+ {t('sidebar.action.rename')}
+
+ )}
+ {isShowDelete && (
+ {
+ e.stopPropagation()
+ onDelete()
+ }}
+ >
+ {t('sidebar.action.delete')}
+
+ )}
+
+
)
}
export default React.memo(ItemOperation)
diff --git a/web/app/components/header/account-setting/data-source-page-new/__tests__/card.spec.tsx b/web/app/components/header/account-setting/data-source-page-new/__tests__/card.spec.tsx
index fedb7d8a4e..bd349a3ad6 100644
--- a/web/app/components/header/account-setting/data-source-page-new/__tests__/card.spec.tsx
+++ b/web/app/components/header/account-setting/data-source-page-new/__tests__/card.spec.tsx
@@ -188,10 +188,12 @@ describe('Card Component', () => {
fireEvent.click(screen.getByText(/operation.edit/))
// Assert
- expect(mockPluginAuthActionReturn.handleEdit).toHaveBeenCalledWith('c1', {
- apiKey: 'key1',
- __name__: 'Credential 1',
- __credential_id__: 'c1',
+ await waitFor(() => {
+ expect(mockPluginAuthActionReturn.handleEdit).toHaveBeenCalledWith('c1', {
+ apiKey: 'key1',
+ __name__: 'Credential 1',
+ __credential_id__: 'c1',
+ })
})
})
@@ -202,7 +204,9 @@ describe('Card Component', () => {
fireEvent.click(screen.getByText(/operation.remove/))
// Assert
- expect(mockPluginAuthActionReturn.openConfirm).toHaveBeenCalledWith('c1')
+ await waitFor(() => {
+ expect(mockPluginAuthActionReturn.openConfirm).toHaveBeenCalledWith('c1')
+ })
})
it('should handle "setDefault" action from Item component', async () => {
@@ -212,7 +216,9 @@ describe('Card Component', () => {
fireEvent.click(screen.getByText(/auth.setDefault/))
// Assert
- expect(mockPluginAuthActionReturn.handleSetDefault).toHaveBeenCalledWith('c1')
+ await waitFor(() => {
+ expect(mockPluginAuthActionReturn.handleSetDefault).toHaveBeenCalledWith('c1')
+ })
})
it('should handle "rename" action from Item component', async () => {
@@ -231,14 +237,16 @@ describe('Card Component', () => {
fireEvent.click(screen.getByText(/operation.rename/))
// Now it should show an input
- const input = screen.getByPlaceholderText(/placeholder.input/)
+ const input = await screen.findByPlaceholderText(/placeholder.input/)
fireEvent.change(input, { target: { value: 'New Name' } })
fireEvent.click(screen.getByText(/operation.save/))
// Assert
- expect(mockPluginAuthActionReturn.handleRename).toHaveBeenCalledWith({
- credential_id: 'c1',
- name: 'New Name',
+ await waitFor(() => {
+ expect(mockPluginAuthActionReturn.handleRename).toHaveBeenCalledWith({
+ credential_id: 'c1',
+ name: 'New Name',
+ })
})
})
diff --git a/web/app/components/header/account-setting/data-source-page-new/__tests__/item.spec.tsx b/web/app/components/header/account-setting/data-source-page-new/__tests__/item.spec.tsx
index b88b3a8bb7..e1c5c3f4c7 100644
--- a/web/app/components/header/account-setting/data-source-page-new/__tests__/item.spec.tsx
+++ b/web/app/components/header/account-setting/data-source-page-new/__tests__/item.spec.tsx
@@ -1,5 +1,5 @@
import type { DataSourceCredential } from '../types'
-import { fireEvent, render, screen } from '@testing-library/react'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
import { CredentialTypeEnum } from '@/app/components/plugins/plugin-auth/types'
import Item from '../item'
@@ -14,6 +14,9 @@ const triggerRename = async () => {
fireEvent.click(dropdownTrigger)
const renameOption = await screen.findByText('common.operation.rename')
fireEvent.click(renameOption)
+ await waitFor(() => {
+ expect(screen.getByPlaceholderText('common.placeholder.input')).toBeInTheDocument()
+ })
}
describe('Item Component', () => {
diff --git a/web/app/components/header/account-setting/data-source-page-new/__tests__/operator.spec.tsx b/web/app/components/header/account-setting/data-source-page-new/__tests__/operator.spec.tsx
index 0140626dd7..12042acfa1 100644
--- a/web/app/components/header/account-setting/data-source-page-new/__tests__/operator.spec.tsx
+++ b/web/app/components/header/account-setting/data-source-page-new/__tests__/operator.spec.tsx
@@ -1,5 +1,6 @@
import type { DataSourceCredential } from '../types'
-import { fireEvent, render, screen } from '@testing-library/react'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
import { CredentialTypeEnum } from '@/app/components/plugins/plugin-auth/types'
import Operator from '../operator'
@@ -9,10 +10,6 @@ import Operator from '../operator'
*/
// Helper to open dropdown
-const openDropdown = () => {
- fireEvent.click(screen.getByRole('button'))
-}
-
describe('Operator Component', () => {
const mockOnAction = vi.fn()
const mockOnRename = vi.fn()
@@ -37,7 +34,7 @@ describe('Operator Component', () => {
// Act
render(
-
-
{t('auth.setDefault', { ns: 'plugin' })}
-
-
-
{t('operation.rename', { ns: 'common' })}
-
-
-
{t('operation.edit', { ns: 'common' })}
-
-
-
{t('dataSource.notion.changeAuthorizedPages', { ns: 'common' })}
-
-
-
- {t('operation.remove', { ns: 'common' })}
-
-
+
+
+
+
+ handleAction('setDefault')}>
+ {t('auth.setDefault', { ns: 'plugin' })}
+
+ {type === CredentialTypeEnum.OAUTH2 && (
+ handleAction('rename')}>
+ {t('operation.rename', { ns: 'common' })}
+
+ )}
+ {type === CredentialTypeEnum.API_KEY && (
+ handleAction('edit')}>
+ {t('operation.edit', { ns: 'common' })}
+
+ )}
+ {type === CredentialTypeEnum.OAUTH2 && (
+ handleAction('change')}>
+ {t('dataSource.notion.changeAuthorizedPages', { ns: 'common' })}
+
+ )}
+ handleAction('delete')}>
+
+ {t('operation.remove', { ns: 'common' })}
+
+
+
+
)
}
diff --git a/web/app/components/header/account-setting/members-page/operation/index.tsx b/web/app/components/header/account-setting/members-page/operation/index.tsx
index 5fb3be0195..dab0c84e5b 100644
--- a/web/app/components/header/account-setting/members-page/operation/index.tsx
+++ b/web/app/components/header/account-setting/members-page/operation/index.tsx
@@ -1,10 +1,15 @@
'use client'
import type { Member } from '@/models/common'
-import { CheckIcon, ChevronDownIcon } from '@heroicons/react/24/outline'
import { cn } from '@langgenius/dify-ui/cn'
import { memo, useMemo, useState } from 'react'
import { useTranslation } from 'react-i18next'
-import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
import { toast } from '@/app/components/base/ui/toast'
import { useProviderContext } from '@/context/provider-context'
import { deleteMemberOrCancelInvitation, updateMemberRole } from '@/service/common'
@@ -74,40 +79,50 @@ const Operation = ({ member, operatorRole, onOperate }: IOperationProps) => {
}
}
return (
-
- setOpen(prev => !prev)}>
-
- {RoleMap[member.role] || RoleMap.normal}
-
-
-
-
-
- {roleList.map(role => (
-
handleUpdateMemberRole(role)}>
- {role === member.role
- ?
- :
}
-
-
{t(roleI18nKeyMap[role].label, { ns: 'common' })}
-
{t(roleI18nKeyMap[role].tip, { ns: 'common' })}
-
-
- ))}
-
-
-
-
+
+
+
+ {roleList.map(role => (
+
handleUpdateMemberRole(role)}
+ >
+ {role === member.role
+ ?
-
{t('members.removeFromTeam', { ns: 'common' })}
-
{t('members.removeFromTeamTip', { ns: 'common' })}
+
{t(roleI18nKeyMap[role].label, { ns: 'common' })}
+
{t(roleI18nKeyMap[role].tip, { ns: 'common' })}
+
+ ))}
-
-
+
+
+
+
+
{t('members.removeFromTeam', { ns: 'common' })}
+
{t('members.removeFromTeamTip', { ns: 'common' })}
+
+
+
+
)
}
export default memo(Operation)
diff --git a/web/app/components/plugins/marketplace/sort-dropdown/__tests__/index.spec.tsx b/web/app/components/plugins/marketplace/sort-dropdown/__tests__/index.spec.tsx
index 4d93726c4c..990bb321de 100644
--- a/web/app/components/plugins/marketplace/sort-dropdown/__tests__/index.spec.tsx
+++ b/web/app/components/plugins/marketplace/sort-dropdown/__tests__/index.spec.tsx
@@ -1,15 +1,12 @@
-import { fireEvent, render, screen, within } from '@testing-library/react'
+import type {
+ MouseEventHandler,
+ ReactNode,
+} from 'react'
+import { render, screen, within } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
import SortDropdown from '../index'
-// ================================
-// Mock external dependencies only
-// ================================
-
-// Mock i18n translation hook
const mockTranslation = vi.fn((key: string, options?: { ns?: string }) => {
- // Build full key with namespace prefix if provided
const fullKey = options?.ns ? `${options.ns}.${key}` : key
const translations: Record
= {
'plugin.marketplace.sortBy': 'Sort by',
@@ -27,7 +24,6 @@ vi.mock('#i18n', () => ({
}),
}))
-// Mock marketplace atoms with controllable values
let mockSort: { sortBy: string, sortOrder: string } = { sortBy: 'install_count', sortOrder: 'DESC' }
const mockHandleSortChange = vi.fn()
@@ -35,664 +31,123 @@ vi.mock('../../atoms', () => ({
useMarketplaceSort: () => [mockSort, mockHandleSortChange],
}))
-// Mock portal component with controllable open state
-let mockPortalOpenState = false
+vi.mock('@/app/components/base/ui/dropdown-menu', async () => {
+ const React = await import('react')
+ const DropdownMenuContext = React.createContext<{ open: boolean, setOpen: (open: boolean) => void } | null>(null)
-vi.mock('@/app/components/base/portal-to-follow-elem', () => ({
- PortalToFollowElem: ({ children, open, onOpenChange: _onOpenChange }: {
- children: React.ReactNode
- open: boolean
- onOpenChange: (open: boolean) => void
- }) => {
- mockPortalOpenState = open
- return (
-
- {children}
-
- )
- },
- PortalToFollowElemTrigger: ({ children, onClick }: {
- children: React.ReactNode
- onClick: () => void
- }) => (
-
- {children}
-
- ),
- PortalToFollowElemContent: ({ children }: { children: React.ReactNode }) => {
- // Match actual behavior: only render when portal is open
- if (!mockPortalOpenState)
- return null
- return {children}
- },
-}))
+ const useDropdownMenuContext = () => {
+ const context = React.use(DropdownMenuContext)
+ if (!context)
+ throw new Error('DropdownMenu components must be wrapped in DropdownMenu')
+ return context
+ }
-// ================================
-// Test Factory Functions
-// ================================
+ return {
+ DropdownMenu: ({ children, open, onOpenChange }: { children: ReactNode, open: boolean, onOpenChange?: (open: boolean) => void }) => (
+
+
+ {children}
+
+
+ ),
+ DropdownMenuTrigger: ({ children, className }: { children: ReactNode, className?: string }) => {
+ const { open, setOpen } = useDropdownMenuContext()
+ return (
+ setOpen(!open)}
+ >
+ {children}
+
+ )
+ },
+ DropdownMenuContent: ({ children }: { children: ReactNode }) => {
+ const { open } = useDropdownMenuContext()
+ return open ? {children}
: null
+ },
+ DropdownMenuItem: ({
+ children,
+ onClick,
+ className,
+ }: {
+ children: ReactNode
+ onClick?: MouseEventHandler
+ className?: string
+ }) => {
+ const { setOpen } = useDropdownMenuContext()
+ return (
+ {
+ onClick?.(event)
+ setOpen(false)
+ }}
+ >
+ {children}
+
+ )
+ },
+ }
+})
-type SortOption = {
- value: string
- order: string
- text: string
-}
-
-const createSortOptions = (): SortOption[] => [
- { value: 'install_count', order: 'DESC', text: 'Most Popular' },
- { value: 'version_updated_at', order: 'DESC', text: 'Recently Updated' },
- { value: 'created_at', order: 'DESC', text: 'Newly Released' },
- { value: 'created_at', order: 'ASC', text: 'First Released' },
-]
-
-// ================================
-// SortDropdown Component Tests
-// ================================
describe('SortDropdown', () => {
beforeEach(() => {
vi.clearAllMocks()
mockSort = { sortBy: 'install_count', sortOrder: 'DESC' }
- mockPortalOpenState = false
})
- // ================================
- // Rendering Tests
- // ================================
- describe('Rendering', () => {
- it('should render without crashing', () => {
- render(
- setOpen(v => !v)}>
-
-
- {t('marketplace.sortBy', { ns: 'plugin' })}
-
-
- {selectedOption!.text}
-
-
-
-
-
- {
- options.map(option => (
-
handleSortChange({ sortBy: option.value, sortOrder: option.order })}
- >
- {option.text}
- {
- sort.sortBy === option.value && sort.sortOrder === option.order && (
-
- ))
- }
-
-
+
+
+ {t('marketplace.sortBy', { ns: 'plugin' })}
+
+
+ {selectedOption.text}
+
+
+
+ {options.map(option => (
+ {
+ handleSortChange({ sortBy: option.value, sortOrder: option.order })
+ setOpen(false)
+ }}
+ >
+ {option.text}
+ {sort.sortBy === option.value && sort.sortOrder === option.order && (
+
+ ))}
+
+
)
}
diff --git a/web/app/components/plugins/plugin-page/__tests__/install-plugin-dropdown.spec.tsx b/web/app/components/plugins/plugin-page/__tests__/install-plugin-dropdown.spec.tsx
index 28aec206f1..1f249b16c6 100644
--- a/web/app/components/plugins/plugin-page/__tests__/install-plugin-dropdown.spec.tsx
+++ b/web/app/components/plugins/plugin-page/__tests__/install-plugin-dropdown.spec.tsx
@@ -36,34 +36,85 @@ vi.mock('@/app/components/base/icons/src/vender/solid/mediaAndDevices', () => ({
}))
vi.mock('@/app/components/base/ui/button', () => ({
- Button: ({ children }: { children: React.ReactNode }) => {children} ,
+ Button: ({ children, onClick, className, ...props }: React.ButtonHTMLAttributes) => (
+ {children}
+ ),
}))
-vi.mock('@/app/components/base/portal-to-follow-elem', async () => {
+vi.mock('@/app/components/base/ui/dropdown-menu', async () => {
const React = await import('react')
+ const DropdownMenuContext = React.createContext<{ isOpen: boolean, setOpen: (open: boolean) => void } | null>(null)
+
+ const useDropdownMenuContext = () => {
+ const context = React.use(DropdownMenuContext)
+ if (!context)
+ throw new Error('DropdownMenu components must be wrapped in DropdownMenu')
+ return context
+ }
+
return {
- PortalToFollowElem: ({
+ DropdownMenu: ({
open,
+ onOpenChange,
children,
}: {
open: boolean
+ onOpenChange?: (open: boolean) => void
children: React.ReactNode
}) => {
portalOpen = open
- return {children}
+ return (
+
+ {children}
+
+ )
},
- PortalToFollowElemTrigger: ({
+ DropdownMenuTrigger: ({
children,
onClick,
+ render,
}: {
children: React.ReactNode
- onClick: () => void
- }) => {children} ,
- PortalToFollowElemContent: ({
+ onClick?: React.MouseEventHandler
+ render?: React.ReactElement
+ }) => {
+ const { isOpen, setOpen } = useDropdownMenuContext()
+ const handleClick = (e: React.MouseEvent) => {
+ onClick?.(e)
+ setOpen(!isOpen)
+ }
+
+ if (render)
+ return React.cloneElement(render, { 'data-testid': 'dropdown-trigger', 'onClick': handleClick } as Record, children)
+
+ return {children}
+ },
+ DropdownMenuContent: ({
children,
}: {
children: React.ReactNode
}) => portalOpen ? {children}
: null,
+ DropdownMenuItem: ({
+ children,
+ onClick,
+ }: {
+ children: React.ReactNode
+ onClick?: React.MouseEventHandler
+ }) => {
+ const { setOpen } = useDropdownMenuContext()
+ return (
+ {
+ onClick?.(e)
+ setOpen(false)
+ }}
+ >
+ {children}
+
+ )
+ },
}
})
@@ -131,13 +182,13 @@ describe('InstallPluginDropdown', () => {
expect(onSwitchToMarketplaceTab).toHaveBeenCalledTimes(1)
})
- it('opens the github installer when github is selected', () => {
+ it('opens the github installer when github is selected', async () => {
render(
+
-
setIsMenuOpen(v => !v)}>
-
+ {t('installPlugin', { ns: 'plugin' })}
-
-
-
-
- {t('installFrom', { ns: 'plugin' })}
-
-
-
- {installMethods.map(({ icon: Icon, text, action }) => (
-
{
- if (action === 'local') {
- fileInputRef.current?.click()
- }
- else if (action === 'marketplace') {
- onSwitchToMarketplaceTab()
- setIsMenuOpen(false)
- }
- else {
- setSelectedAction(action)
- setIsMenuOpen(false)
- }
- }}
- >
- {text}
-
- ))}
-
-
+
+
+
+
+ {t('installFrom', { ns: 'plugin' })}
+
+ handleInstallMethodSelect(action)}
+ >
+
+ {text}
+
+
+ ))}
+
(
handleUninstall(item.id)}>{item.name} 卸载
))} */}
-
+
)
}
diff --git a/web/app/components/plugins/plugin-page/plugin-tasks/__tests__/index.spec.tsx b/web/app/components/plugins/plugin-page/plugin-tasks/__tests__/index.spec.tsx
index 15b4429de8..c87673b750 100644
--- a/web/app/components/plugins/plugin-page/plugin-tasks/__tests__/index.spec.tsx
+++ b/web/app/components/plugins/plugin-page/plugin-tasks/__tests__/index.spec.tsx
@@ -685,6 +685,26 @@ describe('PluginTasks Component', () => {
})
})
+ it('should close the menu after clearing the last non-running plugins', async () => {
+ setupMocks([
+ createMockPlugin({ status: TaskStatus.success, plugin_unique_identifier: 'success-1' }),
+ ])
+
+ render( = ({ plugin, getIconUrl, languag
)}
statusText={(
-
+
{plugin.message || errorMsg}
)}
diff --git a/web/app/components/plugins/plugin-page/plugin-tasks/components/plugin-item.tsx b/web/app/components/plugins/plugin-page/plugin-tasks/components/plugin-item.tsx
index f627047b24..2fdb5696ea 100644
--- a/web/app/components/plugins/plugin-page/plugin-tasks/components/plugin-item.tsx
+++ b/web/app/components/plugins/plugin-page/plugin-tasks/components/plugin-item.tsx
@@ -39,7 +39,7 @@ const PluginItem: FC = ({
{plugin.labels[language]}
-
+
{statusText}
{action}
@@ -47,7 +47,7 @@ const PluginItem: FC
= ({
{onClear && (
= ({
)
{headerAction}
+
{plugins.map(plugin => (
= ({
{t('task.clearAll', { ns: 'plugin' })}
-
+
{errorPlugins.map(plugin => (
{
handleClearErrorPlugin,
} = usePluginTaskStatus()
const { getIconUrl } = useGetIcon()
+ const canOpenMenu = isFailed || isInstalling || isInstallingWithSuccess || isInstallingWithError || isSuccess
// Generate tooltip text based on status
const tip = useMemo(() => {
@@ -85,27 +86,20 @@ const PluginTasks = () => {
[clearPluginsAndClose],
)
- const handleTriggerClick = useCallback(() => {
- if (isFailed || isInstalling || isInstallingWithSuccess || isInstallingWithError || isSuccess)
- setOpen(v => !v)
- }, [isFailed, isInstalling, isInstallingWithSuccess, isInstallingWithError, isSuccess])
-
// Hide when no plugin tasks
if (totalPluginsLength === 0)
return null
return (
-
-
+ {
totalPluginsLength={totalPluginsLength}
onClick={() => {}}
/>
-
-
+
+
{
onClearErrors={handleClearErrors}
onClearSingle={handleClearSingle}
/>
-
-
+
+
+ {data?.title}
+ Close Info
+
+ )
+ },
+}))
+
const mockReplace = vi.fn()
const mockPathname = '/test-path'
vi.mock('@/next/navigation', () => ({
@@ -191,6 +212,25 @@ describe('MenuDropdown', () => {
expect(screen.getByText('Test App')).toBeInTheDocument()
})
})
+
+ it('should close InfoModal when the close handler runs', async () => {
+ render( = ({
const router = useRouter()
const pathname = usePathname()
const { t } = useTranslation()
- const [open, doSetOpen] = useState(false)
- const openRef = useRef(open)
- const setOpen = useCallback((v: boolean) => {
- doSetOpen(v)
- openRef.current = v
- }, [doSetOpen])
-
- const handleTrigger = useCallback(() => {
- setOpen(!openRef.current)
- }, [setOpen])
+ const [open, setOpen] = useState(false)
const shareCode = useWebAppStore(s => s.shareCode)
const handleLogout = useCallback(async () => {
+ setOpen(false)
await webAppLogout(shareCode!)
router.replace(`/webapp-signin?redirect_url=${pathname}`)
- }, [router, pathname, webAppLogout, shareCode])
+ }, [pathname, router, setOpen, shareCode])
const [show, setShow] = useState(false)
+ const handleOpenInfoModal = useCallback(() => {
+ setOpen(false)
+ queueMicrotask(() => {
+ setShow(true)
+ })
+ }, [])
useEffect(() => {
if (forceClose)
@@ -66,60 +63,56 @@ const MenuDropdown: FC = ({
return (
<>
-
-
-
-
-
-
-
-
-
{t('theme.theme', { ns: 'common' })}
-
-
+
}
+ aria-label={t('operation.more', { ns: 'common' })}
+ >
+
+
+
+
+
+
+
{t('theme.theme', { ns: 'common' })}
+
-
-
- {data?.privacy_policy && (
-
- {t('chat.privacyPolicyMiddle', { ns: 'share' })}
-
- )}
-
{
- handleTrigger()
- setShow(true)
- }}
- className="cursor-pointer rounded-lg px-3 py-1.5 system-md-regular text-text-secondary hover:bg-state-base-hover"
- >
- {t('userProfile.about', { ns: 'common' })}
-
-
- {!(hideLogout || webAppAccessMode === AccessMode.EXTERNAL_MEMBERS || webAppAccessMode === AccessMode.PUBLIC) && (
-
-
- {t('userProfile.logout', { ns: 'common' })}
-
-
- )}
+ {t('chat.privacyPolicyMiddle', { ns: 'share' })}
+
+ )}
+
+ {t('userProfile.about', { ns: 'common' })}
+
+ {!(hideLogout || webAppAccessMode === AccessMode.EXTERNAL_MEMBERS || webAppAccessMode === AccessMode.PUBLIC) && (
+
+ {t('userProfile.logout', { ns: 'common' })}
+
+ )}
+
+
{show && (
{
+ const React = await import('react')
+ const DropdownMenuContext = React.createContext<{ isOpen: boolean, setOpen: (open: boolean) => void } | null>(null)
+
+ const useDropdownMenuContext = () => {
+ const context = React.use(DropdownMenuContext)
+ if (!context)
+ throw new Error('DropdownMenu components must be wrapped in DropdownMenu')
+ return context
+ }
+
+ return {
+ DropdownMenu: ({ children, open, onOpenChange }: { children: React.ReactNode, open: boolean, onOpenChange?: (open: boolean) => void }) => (
+
+ {children}
+
+ ),
+ DropdownMenuTrigger: ({
+ children,
+ render,
+ onClick,
+ }: {
+ children: React.ReactNode
+ render?: React.ReactElement
+ onClick?: React.MouseEventHandler
+ }) => {
+ const { isOpen, setOpen } = useDropdownMenuContext()
+ const handleClick = (e: React.MouseEvent) => {
+ onClick?.(e)
+ setOpen(!isOpen)
+ }
+
+ if (render)
+ return React.cloneElement(render, { 'data-testid': 'dropdown-trigger', 'onClick': handleClick } as Record, children)
+
+ return {children}
+ },
+ DropdownMenuContent: ({
+ children,
+ className,
+ popupClassName,
+ }: {
+ children: React.ReactNode
+ className?: string
+ popupClassName?: string
+ }) => {
+ const { isOpen } = useDropdownMenuContext()
+ return isOpen ? {children}
: null
+ },
+ DropdownMenuItem: ({
+ children,
+ onClick,
+ className,
+ }: {
+ children: React.ReactNode
+ onClick?: React.MouseEventHandler
+ className?: string
+ }) => {
+ const { setOpen } = useDropdownMenuContext()
+ return (
+ {
+ onClick?.(e)
+ setOpen(false)
+ }}
+ >
+ {children}
+
+ )
+ },
+ }
+})
+
describe('OperationDropdown', () => {
const defaultProps = {
onEdit: vi.fn(),
@@ -16,7 +92,7 @@ describe('OperationDropdown', () => {
it('should render trigger button with more icon', () => {
render( = ({
onRemove,
}) => {
const { t } = useTranslation()
- const [open, doSetOpen] = useState(false)
- const openRef = useRef(open)
- const setOpen = useCallback((v: boolean) => {
- doSetOpen(v)
- openRef.current = v
- onOpenChange?.(v)
- }, [doSetOpen])
-
- const handleTrigger = useCallback(() => {
- setOpen(!openRef.current)
- }, [setOpen])
+ const [open, setOpen] = useState(false)
+ const handleOpenChange = useCallback((nextOpen: boolean) => {
+ setOpen(nextOpen)
+ onOpenChange?.(nextOpen)
+ }, [onOpenChange])
return (
-
-
-
-
-
-
-
{
- onEdit()
- handleTrigger()
- }}
- >
-
-
{t('mcp.operation.edit', { ns: 'tools' })}
-
-
{
- onRemove()
- handleTrigger()
- }}
- >
-
-
{t('mcp.operation.remove', { ns: 'tools' })}
-
-
-
+
+
+
+ {t('mcp.operation.edit', { ns: 'tools' })}
+
+
+ {t('mcp.operation.remove', { ns: 'tools' })}
+
+
+
)
}
export default React.memo(OperationDropdown)
diff --git a/web/app/components/workflow/block-selector/market-place-plugin/__tests__/action.spec.tsx b/web/app/components/workflow/block-selector/market-place-plugin/__tests__/action.spec.tsx
new file mode 100644
index 0000000000..1d845dd5fc
--- /dev/null
+++ b/web/app/components/workflow/block-selector/market-place-plugin/__tests__/action.spec.tsx
@@ -0,0 +1,124 @@
+import type { ComponentProps } from 'react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { useDownloadPlugin } from '@/service/use-plugins'
+import OperationDropdown from '../action'
+
+const mockDownloadBlob = vi.fn()
+const mockRemoveQueries = vi.fn()
+
+vi.mock('next-themes', () => ({
+ useTheme: () => ({
+ theme: 'light',
+ }),
+}))
+
+vi.mock('@/service/use-plugins', () => ({
+ useDownloadPlugin: vi.fn(),
+}))
+
+vi.mock('@/utils/download', () => ({
+ downloadBlob: (...args: unknown[]) => mockDownloadBlob(...args),
+}))
+
+vi.mock('@/utils/var', () => ({
+ getMarketplaceUrl: (path: string) => `https://marketplace.example${path}`,
+}))
+
+const createQueryClient = () => new QueryClient({
+ defaultOptions: {
+ queries: {
+ retry: false,
+ },
+ },
+})
+
+const renderComponent = (props?: Partial>) => {
+ const queryClient = createQueryClient()
+ vi.spyOn(queryClient, 'removeQueries').mockImplementation(((...args) => {
+ return mockRemoveQueries(...args)
+ }) as typeof queryClient.removeQueries)
+
+ return render(
+
+ ,
+ )
+}
+
+describe('OperationDropdown', () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ vi.mocked(useDownloadPlugin).mockImplementation((_, enabled) => ({
+ data: enabled ? null : null,
+ isLoading: false,
+ }) as unknown as ReturnType)
+ })
+
+ it('should render download and view details actions when opened', async () => {
+ renderComponent({ open: true })
+
+ expect(screen.getByText('common.operation.download')).toBeInTheDocument()
+ expect(screen.getByText('common.operation.viewDetails')).toBeInTheDocument()
+ })
+
+ it('should request a download when download is clicked', async () => {
+ const onOpenChange = vi.fn()
+ renderComponent({ open: true, onOpenChange })
+
+ await userEvent.setup().click(screen.getByText('common.operation.download'))
+
+ expect(onOpenChange).toHaveBeenCalledWith(false)
+ expect(mockRemoveQueries).toHaveBeenCalled()
+ })
+
+ it('should skip download when already loading', async () => {
+ vi.mocked(useDownloadPlugin).mockReturnValue({
+ data: null,
+ isLoading: true,
+ } as unknown as ReturnType)
+
+ renderComponent({ open: true })
+
+ await userEvent.setup().click(screen.getByText('common.operation.download'))
+
+ expect(mockRemoveQueries).not.toHaveBeenCalled()
+ })
+
+ it('should download the blob when the hook returns data', async () => {
+ vi.mocked(useDownloadPlugin).mockImplementation((_, enabled) => ({
+ data: enabled ? new Blob(['plugin zip'], { type: 'application/zip' }) : null,
+ isLoading: false,
+ }) as unknown as ReturnType)
+
+ renderComponent({ open: true })
+
+ await userEvent.setup().click(screen.getByText('common.operation.download'))
+
+ await waitFor(() => {
+ expect(mockDownloadBlob).toHaveBeenCalledWith({
+ data: expect.any(Blob),
+ fileName: 'langgenius-test-plugin_1.0.0.zip',
+ })
+ })
+ expect(mockRemoveQueries).toHaveBeenCalled()
+ })
+
+ it('should link to the marketplace detail page', () => {
+ renderComponent({ open: true })
+
+ expect(screen.getByRole('menuitem', { name: 'common.operation.viewDetails' })).toHaveAttribute(
+ 'href',
+ 'https://marketplace.example/plugins/langgenius/test-plugin',
+ )
+ })
+})
diff --git a/web/app/components/workflow/block-selector/market-place-plugin/action.tsx b/web/app/components/workflow/block-selector/market-place-plugin/action.tsx
index 4ae623ffc1..a058e8c051 100644
--- a/web/app/components/workflow/block-selector/market-place-plugin/action.tsx
+++ b/web/app/components/workflow/block-selector/market-place-plugin/action.tsx
@@ -1,19 +1,19 @@
'use client'
import type { FC } from 'react'
import { cn } from '@langgenius/dify-ui/cn'
-import { RiMoreFill } from '@remixicon/react'
import { useQueryClient } from '@tanstack/react-query'
import { useTheme } from 'next-themes'
import * as React from 'react'
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
import { useTranslation } from 'react-i18next'
import ActionButton from '@/app/components/base/action-button'
-// import { Button } from '@/app/components/base/ui/button'
import {
- PortalToFollowElem,
- PortalToFollowElemContent,
- PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuLinkItem,
+ DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
import { useDownloadPlugin } from '@/service/use-plugins'
import { downloadBlob } from '@/utils/download'
import { getMarketplaceUrl } from '@/utils/var'
@@ -36,16 +36,10 @@ const OperationDropdown: FC = ({
const { t } = useTranslation()
const { theme } = useTheme()
const queryClient = useQueryClient()
- const openRef = useRef(open)
- const setOpen = useCallback((v: boolean) => {
- onOpenChange(v)
- openRef.current = v
+ const setOpen = useCallback((value: boolean) => {
+ onOpenChange(value)
}, [onOpenChange])
- const handleTrigger = useCallback(() => {
- setOpen(!openRef.current)
- }, [setOpen])
-
const [needDownload, setNeedDownload] = useState(false)
const downloadInfo = useMemo(() => ({
organization: author,
@@ -56,12 +50,13 @@ const OperationDropdown: FC = ({
const handleDownload = useCallback(() => {
if (isLoading)
return
+ setOpen(false)
queryClient.removeQueries({
queryKey: ['plugins', 'downloadPlugin', downloadInfo],
exact: true,
})
setNeedDownload(true)
- }, [downloadInfo, isLoading, queryClient])
+ }, [downloadInfo, isLoading, queryClient, setOpen])
useEffect(() => {
if (!needDownload || !blob)
@@ -75,27 +70,33 @@ const OperationDropdown: FC = ({
})
}, [author, blob, downloadInfo, name, needDownload, queryClient, version])
return (
-
-
+
-
-
-
-
-
-
+
+
+
+ {t('operation.download', { ns: 'common' })}
+
+
+ {t('operation.viewDetails', { ns: 'common' })}
+
+
+
)
}
export default React.memo(OperationDropdown)
diff --git a/web/app/components/workflow/header/__tests__/test-run-menu-helpers.spec.tsx b/web/app/components/workflow/header/__tests__/test-run-menu-helpers.spec.tsx
index cce4c070a1..7df9cd091f 100644
--- a/web/app/components/workflow/header/__tests__/test-run-menu-helpers.spec.tsx
+++ b/web/app/components/workflow/header/__tests__/test-run-menu-helpers.spec.tsx
@@ -1,7 +1,7 @@
+import type * as React from 'react'
import type { TriggerOption } from '../test-run-menu'
import { fireEvent, render, renderHook, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
-import * as React from 'react'
import { TriggerType } from '../test-run-menu'
import {
getNormalizedShortcutKey,
@@ -10,6 +10,33 @@ import {
useShortcutMenu,
} from '../test-run-menu-helpers'
+vi.mock('@/app/components/base/ui/dropdown-menu', async () => {
+ const React = await import('react')
+ const DropdownMenuContext = React.createContext<{ open: boolean, setOpen: (open: boolean) => void } | null>(null)
+
+ const useDropdownMenuContext = () => {
+ const context = React.use(DropdownMenuContext)
+ if (!context)
+ throw new Error('DropdownMenu components must be wrapped in DropdownMenu')
+ return context
+ }
+
+ return {
+ DropdownMenu: ({ children, open, onOpenChange }: { children: React.ReactNode, open: boolean, onOpenChange?: (open: boolean) => void }) => (
+
+ {children}
+
+ ),
+ DropdownMenuContent: ({ children }: { children: React.ReactNode }) => {
+ const { open } = useDropdownMenuContext()
+ return open ? {children}
: null
+ },
+ DropdownMenuItem: ({ children, onClick, className }: { children: React.ReactNode, onClick?: React.MouseEventHandler, className?: string }) => (
+ {children}
+ ),
+ }
+})
+
vi.mock('../shortcuts-name', () => ({
default: ({ keys }: { keys: string[] }) => {keys.join('+')} ,
}))
diff --git a/web/app/components/workflow/header/__tests__/test-run-menu.spec.tsx b/web/app/components/workflow/header/__tests__/test-run-menu.spec.tsx
index 2e3384b61e..1d462bfc9c 100644
--- a/web/app/components/workflow/header/__tests__/test-run-menu.spec.tsx
+++ b/web/app/components/workflow/header/__tests__/test-run-menu.spec.tsx
@@ -5,25 +5,62 @@ import { act } from 'react'
import * as React from 'react'
import TestRunMenu, { TriggerType } from '../test-run-menu'
-vi.mock('@/app/components/base/portal-to-follow-elem', () => ({
- PortalToFollowElem: ({
- children,
- }: {
- children: React.ReactNode
- }) => {children}
,
- PortalToFollowElemTrigger: ({
- children,
- onClick,
- }: {
- children: React.ReactNode
- onClick?: () => void
- }) => {children}
,
- PortalToFollowElemContent: ({
- children,
- }: {
- children: React.ReactNode
- }) => {children}
,
-}))
+vi.mock('@/app/components/base/ui/dropdown-menu', async () => {
+ const React = await import('react')
+ const DropdownMenuContext = React.createContext<{ open: boolean, setOpen: (open: boolean) => void } | null>(null)
+
+ const useDropdownMenuContext = () => {
+ const context = React.use(DropdownMenuContext)
+ if (!context)
+ throw new Error('DropdownMenu components must be wrapped in DropdownMenu')
+ return context
+ }
+
+ return {
+ DropdownMenu: ({ children, open, onOpenChange }: { children: React.ReactNode, open: boolean, onOpenChange?: (open: boolean) => void }) => (
+
+ {children}
+
+ ),
+ DropdownMenuTrigger: ({
+ children,
+ render,
+ }: {
+ children: React.ReactNode
+ render?: React.ReactElement
+ }) => {
+ const { open, setOpen } = useDropdownMenuContext()
+
+ if (render)
+ return React.cloneElement(render, { onClick: () => setOpen(!open) } as Record, children)
+
+ return setOpen(!open)}>{children}
+ },
+ DropdownMenuContent: ({ children }: { children: React.ReactNode }) => {
+ const { open } = useDropdownMenuContext()
+ return open ? {children}
: null
+ },
+ DropdownMenuGroup: ({ children }: { children: React.ReactNode }) => {children}
,
+ DropdownMenuLabel: ({ children, className }: { children: React.ReactNode, className?: string }) => {children}
,
+ DropdownMenuGroupLabel: ({ children, className }: { children: React.ReactNode, className?: string }) => {children}
,
+ DropdownMenuSeparator: ({ className }: { className?: string }) =>
,
+ DropdownMenuItem: ({ children, onClick, className }: { children: React.ReactNode, onClick?: React.MouseEventHandler, className?: string }) => {
+ const { setOpen } = useDropdownMenuContext()
+ return (
+ {
+ onClick?.(event)
+ setOpen(false)
+ }}
+ >
+ {children}
+
+ )
+ },
+ }
+})
vi.mock('../shortcuts-name', () => ({
default: ({ keys }: { keys: string[] }) => {keys.join('+')} ,
@@ -95,10 +132,11 @@ describe('TestRunMenu', () => {
act(() => {
fireEvent.click(screen.getByRole('button', { name: 'Toggle via ref' }))
})
+ expect(screen.getByText('~')).toBeInTheDocument()
+
fireEvent.keyDown(window, { key: '0' })
expect(onSelect).toHaveBeenCalledWith(expect.objectContaining({ id: 'run-all' }))
- expect(screen.getByText('~')).toBeInTheDocument()
})
it('should ignore disabled options in the rendered menu', async () => {
diff --git a/web/app/components/workflow/header/test-run-menu-helpers.tsx b/web/app/components/workflow/header/test-run-menu-helpers.tsx
index 1c34761df6..4a25cd87a6 100644
--- a/web/app/components/workflow/header/test-run-menu-helpers.tsx
+++ b/web/app/components/workflow/header/test-run-menu-helpers.tsx
@@ -6,6 +6,7 @@ import {
isValidElement,
useEffect,
} from 'react'
+import { DropdownMenuItem } from '@/app/components/base/ui/dropdown-menu'
import ShortcutsName from '../shortcuts-name'
export type ShortcutMapping = {
@@ -27,9 +28,8 @@ export const OptionRow = ({
onSelect: (option: TriggerOption) => void
}) => {
return (
- onSelect(option)}
>
@@ -41,7 +41,7 @@ export const OptionRow = ({
{shortcutKey && (
+
)
}
diff --git a/web/app/components/workflow/header/test-run-menu.tsx b/web/app/components/workflow/header/test-run-menu.tsx
index 1d496e4332..6540875e6b 100644
--- a/web/app/components/workflow/header/test-run-menu.tsx
+++ b/web/app/components/workflow/header/test-run-menu.tsx
@@ -1,7 +1,7 @@
import type { ShortcutMapping } from './test-run-menu-helpers'
import { forwardRef, useCallback, useImperativeHandle, useMemo, useState } from 'react'
import { useTranslation } from 'react-i18next'
-import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/app/components/base/ui/dropdown-menu'
import { OptionRow, SingleOptionTrigger, useShortcutMenu } from './test-run-menu-helpers'
export enum TriggerType {
@@ -127,7 +127,7 @@ const TestRunMenu = forwardRef
(({
}), [hasSingleEnabledOption, runSoleOption])
const renderOption = (option: TriggerOption) => {
- return (({
}
return (
-
- setOpen(!open)}>
-
- {children}
-
-
-
-
-
+
+
+
{t('common.chooseStartNodeToRun', { ns: 'workflow' })}
-
+
{hasUserInput && renderOption(options.userInput!)}
{(hasTriggers || hasRunAll) && hasUserInput && (
-
+
)}
{hasRunAll && renderOption(options.runAll!)}
@@ -170,9 +171,9 @@ const TestRunMenu = forwardRef
(({
.filter(trigger => trigger.enabled !== false)
.map(trigger => renderOption(trigger))}
-
-
+
+
+
)
})
diff --git a/web/app/components/workflow/nodes/_base/components/next-step/__tests__/operator.spec.tsx b/web/app/components/workflow/nodes/_base/components/next-step/__tests__/operator.spec.tsx
new file mode 100644
index 0000000000..9afa29642d
--- /dev/null
+++ b/web/app/components/workflow/nodes/_base/components/next-step/__tests__/operator.spec.tsx
@@ -0,0 +1,152 @@
+import type {
+ ReactNode,
+} from 'react'
+import type { CommonNodeType } from '@/app/components/workflow/types'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { useState } from 'react'
+import {
+ useAvailableBlocks,
+ useNodesInteractions,
+} from '@/app/components/workflow/hooks'
+import { BlockEnum } from '@/app/components/workflow/types'
+import Operator from '../operator'
+
+vi.mock('react-i18next', () => ({
+ useTranslation: () => ({
+ t: (key: string, options?: { ns?: string }) => options?.ns ? `${options.ns}.${key}` : key,
+ }),
+}))
+
+vi.mock('@/app/components/base/ui/dropdown-menu', async () => {
+ const React = await import('react')
+ const DropdownMenuContext = React.createContext<{ open: boolean, setOpen: (open: boolean) => void } | null>(null)
+
+ const useDropdownMenuContext = () => {
+ const context = React.use(DropdownMenuContext)
+ if (!context)
+ throw new Error('DropdownMenu components must be wrapped in DropdownMenu')
+ return context
+ }
+
+ return {
+ DropdownMenu: ({ children, open, onOpenChange }: { children: ReactNode, open: boolean, onOpenChange?: (open: boolean) => void }) => (
+
+ {children}
+
+ ),
+ DropdownMenuTrigger: ({ children, render }: { children: ReactNode, render?: ReactNode }) => {
+ const { open, setOpen } = useDropdownMenuContext()
+ if (render)
+ return setOpen(!open)}>{children}
+
+ return setOpen(!open)}>{children}
+ },
+ DropdownMenuContent: ({ children }: { children: ReactNode }) => {
+ const { open } = useDropdownMenuContext()
+ return open ? {children}
: null
+ },
+ }
+})
+
+vi.mock('@/app/components/base/ui/button', () => ({
+ Button: ({ children, className }: { children: ReactNode, className?: string }) => (
+
+ {children}
+
+ ),
+}))
+
+vi.mock('@/app/components/workflow/block-selector', () => ({
+ default: ({ trigger, onSelect }: { trigger: ((open: boolean) => ReactNode) | ReactNode, onSelect: (type: BlockEnum) => void }) => (
+
+ {typeof trigger === 'function' ? trigger(false) : trigger}
+ onSelect(BlockEnum.HttpRequest)}>select-http
+
+ ),
+}))
+
+vi.mock('@/app/components/workflow/hooks', async (importOriginal) => {
+ const actual = await importOriginal()
+ return {
+ ...actual,
+ useAvailableBlocks: vi.fn(),
+ useNodesInteractions: vi.fn(),
+ }
+})
+
+const mockUseAvailableBlocks = vi.mocked(useAvailableBlocks)
+const mockUseNodesInteractions = vi.mocked(useNodesInteractions)
+
+const mockHandleNodeChange = vi.fn()
+const mockHandleNodeDelete = vi.fn()
+const mockHandleNodeDisconnect = vi.fn()
+
+const defaultNodeData = {
+ type: BlockEnum.Code,
+ title: 'Code Node',
+} as CommonNodeType
+
+const TestHarness = () => {
+ const [open, setOpen] = useState(false)
+ return (
+ )
+ mockUseNodesInteractions.mockReturnValue({
+ handleNodeChange: mockHandleNodeChange,
+ handleNodeDelete: mockHandleNodeDelete,
+ handleNodeDisconnect: mockHandleNodeDisconnect,
+ } as unknown as ReturnType)
+ })
+
+ it('opens the menu and keeps the change action available', async () => {
+ const user = userEvent.setup()
+ render(
- onOpenChange(!open)}>
+
-
-
-
+
+
handleNodeDisconnect(nodeId)}
+ onClick={() => {
+ onOpenChange(false)
+ handleNodeDisconnect(nodeId)
+ }}
>
{t('common.disconnect', { ns: 'workflow' })}
@@ -115,14 +120,17 @@ const Operator = ({
handleNodeDelete(nodeId)}
+ onClick={() => {
+ onOpenChange(false)
+ handleNodeDelete(nodeId)
+ }}
>
{t('operation.delete', { ns: 'common' })}
-
-
+
+
)
}
diff --git a/web/app/components/workflow/nodes/_base/components/panel-operator/__tests__/index.spec.tsx b/web/app/components/workflow/nodes/_base/components/panel-operator/__tests__/index.spec.tsx
index 183e28c5f0..6dab0f33a5 100644
--- a/web/app/components/workflow/nodes/_base/components/panel-operator/__tests__/index.spec.tsx
+++ b/web/app/components/workflow/nodes/_base/components/panel-operator/__tests__/index.spec.tsx
@@ -70,7 +70,11 @@ const createQueryResult =
(data: T): UseQueryResult => ({
promise: Promise.resolve(data),
} as UseQueryResult)
-const renderComponent = (showHelpLink: boolean = true, onOpenChange?: (open: boolean) => void) =>
+const renderComponent = (
+ showHelpLink: boolean = true,
+ onOpenChange?: (open: boolean) => void,
+ offset?: { mainAxis: number, crossAxis: number } | number,
+) =>
renderWorkflowFlowComponent(
- handleOpenChange(!open)}>
+
-
-
-
+
+
setOpen(false)}
+ onClosePopup={() => handleOpenChange(false)}
showHelpLink={showHelpLink}
/>
-
-
+
+
)
}
diff --git a/web/app/components/workflow/nodes/assigner/components/__tests__/operation-selector.spec.tsx b/web/app/components/workflow/nodes/assigner/components/__tests__/operation-selector.spec.tsx
index 63813c8a46..e29b1e42a3 100644
--- a/web/app/components/workflow/nodes/assigner/components/__tests__/operation-selector.spec.tsx
+++ b/web/app/components/workflow/nodes/assigner/components/__tests__/operation-selector.spec.tsx
@@ -4,6 +4,75 @@ import { VarType } from '@/app/components/workflow/types'
import { WriteMode } from '../../types'
import OperationSelector from '../operation-selector'
+vi.mock('@/app/components/base/ui/dropdown-menu', async () => {
+ const React = await import('react')
+ const DropdownMenuContext = React.createContext<{ open: boolean, setOpen: (open: boolean) => void } | null>(null)
+
+ const useDropdownMenuContext = () => {
+ const context = React.use(DropdownMenuContext)
+ if (!context)
+ throw new Error('DropdownMenu components must be wrapped in DropdownMenu')
+ return context
+ }
+
+ return {
+ DropdownMenu: ({ children, open, onOpenChange }: { children: React.ReactNode, open: boolean, onOpenChange?: (open: boolean) => void }) => (
+
+ {children}
+
+ ),
+ DropdownMenuTrigger: ({
+ children,
+ className,
+ disabled,
+ }: {
+ children: React.ReactNode
+ className?: string
+ disabled?: boolean
+ }) => {
+ const { open, setOpen } = useDropdownMenuContext()
+ return (
+ !disabled && setOpen(!open)}
+ >
+ {children}
+
+ )
+ },
+ DropdownMenuContent: ({ children }: { children: React.ReactNode }) => {
+ const { open } = useDropdownMenuContext()
+ return open ? {children}
: null
+ },
+ DropdownMenuGroup: ({ children }: { children: React.ReactNode }) => {children}
,
+ DropdownMenuLabel: ({ children }: { children: React.ReactNode }) => {children}
,
+ DropdownMenuGroupLabel: ({ children }: { children: React.ReactNode }) => {children}
,
+ DropdownMenuSeparator: () =>
,
+ DropdownMenuItem: ({
+ children,
+ onClick,
+ }: {
+ children: React.ReactNode
+ onClick?: React.MouseEventHandler
+ }) => {
+ const { setOpen } = useDropdownMenuContext()
+ return (
+ {
+ onClick?.(event)
+ setOpen(false)
+ }}
+ >
+ {children}
+
+ )
+ },
+ }
+})
+
describe('assigner/operation-selector', () => {
it('shows numeric write modes and emits the selected operation', async () => {
const user = userEvent.setup()
diff --git a/web/app/components/workflow/nodes/assigner/components/operation-selector.tsx b/web/app/components/workflow/nodes/assigner/components/operation-selector.tsx
index 8bce904b74..a22b8f5f3f 100644
--- a/web/app/components/workflow/nodes/assigner/components/operation-selector.tsx
+++ b/web/app/components/workflow/nodes/assigner/components/operation-selector.tsx
@@ -3,18 +3,17 @@ import type { WriteMode } from '../types'
import type { Item } from '../utils'
import type { VarType } from '@/app/components/workflow/types'
import { cn } from '@langgenius/dify-ui/cn'
-import {
- RiArrowDownSLine,
- RiCheckLine,
-} from '@remixicon/react'
import { useState } from 'react'
import { useTranslation } from 'react-i18next'
-import Divider from '@/app/components/base/divider'
import {
- PortalToFollowElem,
- PortalToFollowElemContent,
- PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuGroup,
+ DropdownMenuItem,
+ DropdownMenuLabel,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
import { getOperationItems, isOperationItem } from '../utils'
type OperationSelectorProps = {
@@ -49,65 +48,57 @@ const OperationSelector: FC = ({
const selectedItem = items.find(item => item.value === value)
return (
-
- !disabled && setOpen(v => !v)}
+
-
-
-
+
- {selectedItem && isOperationItem(selectedItem) ? t(`nodes.assigner.operations.${selectedItem.name}`, { ns: 'workflow' }) : t('nodes.assigner.operations.title', { ns: 'workflow' })}
-
-
-
+ >
+ {selectedItem && isOperationItem(selectedItem) ? t(`nodes.assigner.operations.${selectedItem.name}`, { ns: 'workflow' }) : t('nodes.assigner.operations.title', { ns: 'workflow' })}
+
+
-
-
-
-
{t('nodes.assigner.operations.title', { ns: 'workflow' })}
-
- {items.map(item => (
- !isOperationItem(item)
- ? (
-
- )
- : (
-
{
- onSelect(item)
- setOpen(false)
- }}
- >
-
- {t(`nodes.assigner.operations.${item.name}`, { ns: 'workflow' })}
-
- {item.value === value && (
-
-
- )}
+
+
+ {t('nodes.assigner.operations.title', { ns: 'workflow' })}
+ {items.map(item => (
+ !isOperationItem(item)
+ ? (
+ onSelect(item)}
+ >
+
+ {t(`nodes.assigner.operations.${item.name}`, { ns: 'workflow' })}
- )
- ))}
-
-
-
-
+ {item.value === value && (
+
+
+ )}
+
+ )
+ ))}
+
+
+
)
}
diff --git a/web/app/components/workflow/note-node/__tests__/index.spec.tsx b/web/app/components/workflow/note-node/__tests__/index.spec.tsx
index 9814bb63f4..1bfa14ffb1 100644
--- a/web/app/components/workflow/note-node/__tests__/index.spec.tsx
+++ b/web/app/components/workflow/note-node/__tests__/index.spec.tsx
@@ -110,6 +110,8 @@ describe('NoteNode', () => {
await waitFor(() => {
expect(screen.getByText('workflow.nodes.note.editor.small')).toBeInTheDocument()
})
+
+ expect(screen.getByText('workflow.nodes.note.editor.small').closest('.nodrag.nopan.nowheel')).toBeInTheDocument()
})
it('should hide the toolbar for temporary notes', () => {
diff --git a/web/app/components/workflow/note-node/index.tsx b/web/app/components/workflow/note-node/index.tsx
index 5050041a05..fa69f05841 100644
--- a/web/app/components/workflow/note-node/index.tsx
+++ b/web/app/components/workflow/note-node/index.tsx
@@ -95,7 +95,7 @@ const NoteNode = ({
+
{
expect(onThemeChange).toHaveBeenCalledWith(NoteTheme.violet)
- fireEvent.click(container.querySelectorAll('[data-state="closed"]')[container.querySelectorAll('[data-state="closed"]').length - 1] as HTMLElement)
+ fireEvent.click(screen.getByRole('button', { name: 'common.operation.more' }))
fireEvent.click(screen.getByText('workflow.common.copy'))
expect(onCopy).toHaveBeenCalledTimes(1)
diff --git a/web/app/components/workflow/note-node/note-editor/toolbar/__tests__/operator.spec.tsx b/web/app/components/workflow/note-node/note-editor/toolbar/__tests__/operator.spec.tsx
index 1870bf913a..c60898b29e 100644
--- a/web/app/components/workflow/note-node/note-editor/toolbar/__tests__/operator.spec.tsx
+++ b/web/app/components/workflow/note-node/note-editor/toolbar/__tests__/operator.spec.tsx
@@ -1,13 +1,132 @@
-import { fireEvent, render, screen } from '@testing-library/react'
+import type {
+ MouseEvent,
+ MouseEventHandler,
+ ReactElement,
+ ReactNode,
+} from 'react'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
import Operator from '../operator'
+type DropdownTriggerRenderProps = {
+ 'className'?: string
+ 'role'?: string
+ 'aria-label'?: string
+ 'onMouseDown'?: MouseEventHandler
+ 'onClick'?: MouseEventHandler
+}
+
+type DropdownTriggerProps = {
+ 'children': ReactNode
+ 'className'?: string
+ 'render'?: ReactElement
+ 'onMouseDown'?: MouseEventHandler
+ 'onClick'?: MouseEventHandler
+ 'aria-label'?: string
+}
+
+vi.mock('@/app/components/base/ui/dropdown-menu', async () => {
+ const React = await import('react')
+ const DropdownMenuContext = React.createContext<{ open: boolean, setOpen: (open: boolean) => void } | null>(null)
+
+ const useDropdownMenuContext = () => {
+ const context = React.use(DropdownMenuContext)
+ if (!context)
+ throw new Error('DropdownMenu components must be wrapped in DropdownMenu')
+ return context
+ }
+
+ return {
+ DropdownMenu: ({ children, open, onOpenChange }: { children: ReactNode, open: boolean, onOpenChange?: (open: boolean) => void }) => (
+
+ {children}
+
+ ),
+ DropdownMenuTrigger: ({
+ children,
+ className,
+ render,
+ onMouseDown,
+ onClick,
+ 'aria-label': ariaLabel,
+ }: DropdownTriggerProps) => {
+ const { open, setOpen } = useDropdownMenuContext()
+ if (render) {
+ const handleMouseDown = (event: MouseEvent) => {
+ const baseUiEvent = event as MouseEvent & { preventBaseUIHandler?: () => void }
+ baseUiEvent.preventBaseUIHandler = vi.fn()
+ onMouseDown?.(baseUiEvent)
+ render.props.onMouseDown?.(event)
+ }
+
+ const handleClick = (event: MouseEvent) => {
+ onClick?.(event)
+ render.props.onClick?.(event)
+ if (!onMouseDown)
+ setOpen(!open)
+ }
+
+ return (
+
+ {children}
+
+ )
+ }
+
+ return (
+ setOpen(!open)}
+ >
+ {children}
+
+ )
+ },
+ DropdownMenuContent: ({ children }: { children: ReactNode }) => {
+ const { open } = useDropdownMenuContext()
+ return open ? {children}
: null
+ },
+ DropdownMenuItem: ({
+ children,
+ onClick,
+ className,
+ }: {
+ children: ReactNode
+ onClick?: MouseEventHandler
+ className?: string
+ }) => {
+ const { setOpen } = useDropdownMenuContext()
+ return (
+ {
+ onClick?.(event)
+ setOpen(false)
+ }}
+ >
+ {children}
+
+ )
+ },
+ DropdownMenuSeparator: ({ className }: { className?: string }) =>
,
+ }
+})
+
const renderOperator = (showAuthor = false) => {
const onCopy = vi.fn()
const onDuplicate = vi.fn()
const onDelete = vi.fn()
const onShowAuthorChange = vi.fn()
- const renderResult = render(
+ render(
{
)
return {
- ...renderResult,
onCopy,
onDelete,
onDuplicate,
@@ -27,41 +145,35 @@ const renderOperator = (showAuthor = false) => {
}
describe('NoteEditor Toolbar Operator', () => {
- it('should trigger copy, duplicate, and delete from the opened menu', () => {
+ it('triggers copy, duplicate, and delete from the opened menu', async () => {
+ const user = userEvent.setup()
const {
- container,
onCopy,
onDelete,
onDuplicate,
} = renderOperator()
- const trigger = container.querySelector('[data-state="closed"]') as HTMLElement
-
- fireEvent.click(trigger)
- fireEvent.click(screen.getByText('workflow.common.copy'))
-
+ await user.click(screen.getByRole('button', { name: 'common.operation.more' }))
+ await user.click(screen.getByText('workflow.common.copy'))
expect(onCopy).toHaveBeenCalledTimes(1)
- fireEvent.click(container.querySelector('[data-state="closed"]') as HTMLElement)
- fireEvent.click(screen.getByText('workflow.common.duplicate'))
-
+ await user.click(screen.getByRole('button', { name: 'common.operation.more' }))
+ await user.click(screen.getByText('workflow.common.duplicate'))
expect(onDuplicate).toHaveBeenCalledTimes(1)
- fireEvent.click(container.querySelector('[data-state="closed"]') as HTMLElement)
- fireEvent.click(screen.getByText('common.operation.delete'))
-
+ await user.click(screen.getByRole('button', { name: 'common.operation.more' }))
+ await user.click(screen.getByText('common.operation.delete'))
expect(onDelete).toHaveBeenCalledTimes(1)
})
- it('should forward the switch state through onShowAuthorChange', () => {
- const {
- container,
- onShowAuthorChange,
- } = renderOperator(true)
+ it('keeps the menu open when toggling show author', async () => {
+ const user = userEvent.setup()
+ const { onShowAuthorChange } = renderOperator(true)
- fireEvent.click(container.querySelector('[data-state="closed"]') as HTMLElement)
- fireEvent.click(screen.getByRole('switch'))
+ await user.click(screen.getByRole('button', { name: 'common.operation.more' }))
+ await user.click(screen.getByRole('switch'))
expect(onShowAuthorChange).toHaveBeenCalledWith(false)
+ expect(screen.getByText('workflow.nodes.note.editor.showAuthor')).toBeInTheDocument()
})
})
diff --git a/web/app/components/workflow/note-node/note-editor/toolbar/index.tsx b/web/app/components/workflow/note-node/note-editor/toolbar/index.tsx
index c7b8fa9787..f00d3464ac 100644
--- a/web/app/components/workflow/note-node/note-editor/toolbar/index.tsx
+++ b/web/app/components/workflow/note-node/note-editor/toolbar/index.tsx
@@ -18,7 +18,11 @@ const Toolbar = ({
onShowAuthorChange,
}: ToolbarProps) => {
return (
-
+
event.stopPropagation()}
+ onClick={event => event.stopPropagation()}
+ >
- setOpen(!open)}>
-
-
-
-
+
-
{
- onCopy()
setOpen(false)
+ onCopy()
}}
>
{t('common.copy', { ns: 'workflow' })}
-
+ {
- onDuplicate()
setOpen(false)
+ onDuplicate()
}}
>
{t('common.duplicate', { ns: 'workflow' })}
+
-
+
-
+
-
{
- onDelete()
setOpen(false)
+ onDelete()
}}
>
{t('operation.delete', { ns: 'common' })}
+
-
-
+
+
)
}
diff --git a/web/app/components/workflow/operator/__tests__/more-actions.spec.tsx b/web/app/components/workflow/operator/__tests__/more-actions.spec.tsx
new file mode 100644
index 0000000000..b984ca18d6
--- /dev/null
+++ b/web/app/components/workflow/operator/__tests__/more-actions.spec.tsx
@@ -0,0 +1,309 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { act } from 'react'
+import MoreActions from '../more-actions'
+
+const mockToPng = vi.fn()
+const mockToJpeg = vi.fn()
+const mockToSvg = vi.fn()
+const mockDownloadUrl = vi.fn()
+const mockSetViewport = vi.fn()
+const mockGetNodesReadOnly = vi.fn()
+const {
+ mockAppStoreState,
+ mockWorkflowState,
+} = vi.hoisted(() => ({
+ mockAppStoreState: {
+ appSidebarExpand: 'collapse',
+ },
+ mockWorkflowState: {
+ knowledgeName: '',
+ appName: 'Demo App',
+ maximizeCanvas: false,
+ },
+}))
+
+vi.mock('react-i18next', () => ({
+ useTranslation: () => ({
+ t: (key: string, options?: { ns?: string }) => options?.ns ? `${options.ns}.${key}` : key,
+ }),
+}))
+
+vi.mock('@/app/components/base/ui/dropdown-menu', async () => {
+ const React = await import('react')
+ const DropdownMenuContext = React.createContext<{ open: boolean, setOpen: (open: boolean) => void } | null>(null)
+
+ const useDropdownMenuContext = () => {
+ const context = React.use(DropdownMenuContext)
+ if (!context)
+ throw new Error('DropdownMenu components must be wrapped in DropdownMenu')
+ return context
+ }
+
+ return {
+ DropdownMenu: ({ children, open, onOpenChange }: { children: React.ReactNode, open: boolean, onOpenChange?: (open: boolean) => void }) => (
+
+ {children}
+
+ ),
+ DropdownMenuTrigger: ({ children, className }: { children: React.ReactNode, className?: string }) => {
+ const { open, setOpen } = useDropdownMenuContext()
+ return (
+
setOpen(!open)}>
+ {children}
+
+ )
+ },
+ DropdownMenuContent: ({ children }: { children: React.ReactNode }) => {
+ const { open } = useDropdownMenuContext()
+ return open ?
{children}
: null
+ },
+ DropdownMenuItem: ({
+ children,
+ onClick,
+ className,
+ }: {
+ children: React.ReactNode
+ onClick?: React.MouseEventHandler
+ className?: string
+ }) => {
+ const { setOpen } = useDropdownMenuContext()
+ return (
+ {
+ onClick?.(event)
+ setOpen(false)
+ }}
+ >
+ {children}
+
+ )
+ },
+ DropdownMenuSeparator: ({ className }: { className?: string }) =>
,
+ }
+})
+
+vi.mock('html-to-image', () => ({
+ toPng: (...args: unknown[]) => mockToPng(...args),
+ toJpeg: (...args: unknown[]) => mockToJpeg(...args),
+ toSvg: (...args: unknown[]) => mockToSvg(...args),
+}))
+
+vi.mock('reactflow', () => ({
+ getNodesBounds: () => ({ x: 0, y: 0, width: 240, height: 120 }),
+ useReactFlow: () => ({
+ getNodes: () => [{ id: 'node-1' }],
+ getViewport: () => ({ x: 0, y: 0, zoom: 1 }),
+ setViewport: mockSetViewport,
+ }),
+}))
+
+vi.mock('@/app/components/app/store', () => ({
+ useStore: (selector: (state: typeof mockAppStoreState) => unknown) => selector(mockAppStoreState),
+}))
+
+vi.mock('@/app/components/workflow/store', () => ({
+ useStore: (selector: (state: typeof mockWorkflowState) => unknown) => selector(mockWorkflowState),
+}))
+
+vi.mock('@/app/components/workflow/hooks', () => ({
+ useNodesReadOnly: () => ({
+ getNodesReadOnly: mockGetNodesReadOnly,
+ }),
+}))
+
+vi.mock('@/utils/download', () => ({
+ downloadUrl: (...args: unknown[]) => mockDownloadUrl(...args),
+}))
+
+vi.mock('../tip-popup', () => ({
+ default: ({ children }: { children: React.ReactNode }) => <>{children},
+}))
+
+vi.mock('@/app/components/base/image-uploader/image-preview', () => ({
+ default: ({ title, onCancel }: { title: string, onCancel: () => void }) => (
+
+ {title}
+ close-preview
+
+ ),
+}))
+
+describe('MoreActions', () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ vi.useRealTimers()
+ mockGetNodesReadOnly.mockReturnValue(false)
+ mockToPng.mockResolvedValue('data:image/png;base64,current')
+ mockToJpeg.mockResolvedValue('data:image/jpeg;base64,current')
+ mockToSvg.mockResolvedValue('data:image/svg+xml;base64,current')
+ mockAppStoreState.appSidebarExpand = 'collapse'
+ mockWorkflowState.knowledgeName = ''
+ mockWorkflowState.appName = 'Demo App'
+ mockWorkflowState.maximizeCanvas = false
+
+ document.body.innerHTML = ''
+ const viewport = document.createElement('div')
+ viewport.className = 'react-flow__viewport'
+ document.body.appendChild(viewport)
+ })
+
+ it('opens the menu and exports the current view as png', async () => {
+ const user = userEvent.setup()
+
+ render( {
+ if (isReadOnly) {
+ setOpen(false)
+ return
+ }
+ setOpen(nextOpen)
}}
>
-
+
-
-
+
-
-
-
-
-
-
-
- {t('common.currentView', { ns: 'workflow' })}
-
-
handleExportImage('png')}
- >
- {t('common.exportPNG', { ns: 'workflow' })}
-
-
handleExportImage('jpeg')}
- >
- {t('common.exportJPEG', { ns: 'workflow' })}
-
-
handleExportImage('svg')}
- >
- {t('common.exportSVG', { ns: 'workflow' })}
-
-
-
-
-
- {t('common.currentWorkflow', { ns: 'workflow' })}
-
-
handleExportImage('png', true)}
- >
- {t('common.exportPNG', { ns: 'workflow' })}
-
-
handleExportImage('jpeg', true)}
- >
- {t('common.exportJPEG', { ns: 'workflow' })}
-
-
handleExportImage('svg', true)}
- >
- {t('common.exportSVG', { ns: 'workflow' })}
-
-
+
+
+
+
-
-
+
+ {t('common.currentView', { ns: 'workflow' })}
+
+ handleExportImage('png')}>
+ {t('common.exportPNG', { ns: 'workflow' })}
+
+ handleExportImage('jpeg')}>
+ {t('common.exportJPEG', { ns: 'workflow' })}
+
+ handleExportImage('svg')}>
+ {t('common.exportSVG', { ns: 'workflow' })}
+
+
+
+ {t('common.currentWorkflow', { ns: 'workflow' })}
+
+ handleExportImage('png', true)}>
+ {t('common.exportPNG', { ns: 'workflow' })}
+
+ handleExportImage('jpeg', true)}>
+ {t('common.exportJPEG', { ns: 'workflow' })}
+
+ handleExportImage('svg', true)}>
+ {t('common.exportSVG', { ns: 'workflow' })}
+
+
+
{previewUrl && (
= ({
} = useWorkflowReadOnly()
const isCollaborationEnabled = useGlobalPublicStore(s => s.systemFeatures.enable_collaboration_mode)
- const ZOOM_IN_OUT_OPTIONS = [
+ const zoomOptions = [
[
{
key: ZoomType.zoomTo200,
@@ -135,6 +126,8 @@ const ZoomInOut: FC = ({
if (workflowReadOnly)
return
+ setOpen(false)
+
if (type === ZoomType.zoomToFit)
fitView()
@@ -173,154 +166,134 @@ const ZoomInOut: FC = ({
handleSyncWorkflowDraft()
}
- const handleTrigger = useCallback(() => {
- if (getWorkflowReadOnly())
- return
-
- setOpen(v => !v)
- }, [getWorkflowReadOnly])
-
return (
-
-
-
+
- {
+ if (zoom <= 0.25)
+ return
+
+ e.stopPropagation()
+ zoomOut()
+ }}
>
-
- {
- if (zoom <= 0.25)
- return
-
- e.stopPropagation()
- zoomOut()
- }}
- >
-
-
-
- {Number.parseFloat(`${zoom * 100}`).toFixed(0)}
- %
-
-
- = 2 ? 'cursor-not-allowed' : 'cursor-pointer hover:bg-black/5'}`}
- onClick={(e) => {
- if (zoom >= 2)
- return
-
- e.stopPropagation()
- zoomIn()
- }}
- >
-
-
+
-
-
- {
- ZOOM_IN_OUT_OPTIONS.map((options, i) => (
-
- {
- i !== 0 && (
-
- {
- options.map(option => (
-
+
+
+ {Number.parseFloat(`${zoom * 100}`).toFixed(0)}
+ %
+
+
+
+ {zoomOptions.map((options, groupIndex) => (
+
+ {groupIndex !== 0 && (
+
+ {options.map(option => (
+
handleZoom(option.key)}
>
-
+
{option.key === ZoomType.toggleUserComments && showUserComments && (
-
+
)}
{option.key === ZoomType.toggleUserComments && !showUserComments && (
-
+
)}
{option.key === ZoomType.toggleUserCursors && showUserCursors && (
-
+
)}
{option.key === ZoomType.toggleUserCursors && !showUserCursors && (
-
+
)}
{option.key === ZoomType.toggleMiniMap && showMiniMap && (
-
+
)}
{option.key === ZoomType.toggleMiniMap && !showMiniMap && (
-
+
)}
{option.key === ZoomType.zoomToFit && (
-
+
)}
{option.key !== ZoomType.toggleUserComments
&& option.key !== ZoomType.toggleUserCursors
&& option.key !== ZoomType.toggleMiniMap
&& option.key !== ZoomType.zoomToFit && (
-
+
)}
{option.text}
- {
- option.key === ZoomType.zoomToFit && (
-
-
- ))
- }
-
+
+ ))}
+
+ = 2 ? 'cursor-not-allowed' : 'cursor-pointer hover:bg-black/5'}`}
+ onClick={(e) => {
+ if (zoom >= 2)
+ return
+
+ e.stopPropagation()
+ zoomIn()
+ }}
+ >
+
+
+
+
+
+ ,
)
await user.click(screen.getByText('Delete'))
diff --git a/web/app/components/workflow/panel/version-history-panel/context-menu/index.tsx b/web/app/components/workflow/panel/version-history-panel/context-menu/index.tsx
index a635e80bab..f063902753 100644
--- a/web/app/components/workflow/panel/version-history-panel/context-menu/index.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/context-menu/index.tsx
@@ -1,14 +1,13 @@
import type { FC } from 'react'
import { RiMoreFill } from '@remixicon/react'
import * as React from 'react'
-import { useCallback } from 'react'
-import Divider from '@/app/components/base/divider'
-import {
- PortalToFollowElem,
- PortalToFollowElemContent,
- PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
import { Button } from '@/app/components/base/ui/button'
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
import { VersionHistoryContextMenuOptions } from '../../../types'
import MenuItem from './menu-item'
import useContextMenu from './use-context-menu'
@@ -28,58 +27,44 @@ const ContextMenu: FC = (props: ContextMenuProps) => {
options,
} = useContextMenu(props)
- const handleClickTrigger = useCallback((e: React.MouseEvent) => {
- e.stopPropagation()
- setOpen(v => !v)
- }, [setOpen])
-
return (
-
-
-
-
-
-
-
-
- {
- options.map((option) => {
- return (
-
- {
- isShowDelete && (
- <>
-
-
-
-
- )
- }
-
-
+ e.stopPropagation()} />}
+ >
+
+
+ {
+ options.map(option => (
+
+
)
}
diff --git a/web/app/components/workflow/panel/version-history-panel/context-menu/menu-item.tsx b/web/app/components/workflow/panel/version-history-panel/context-menu/menu-item.tsx
index 5a3f21272f..b1d9ef6ec5 100644
--- a/web/app/components/workflow/panel/version-history-panel/context-menu/menu-item.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/context-menu/menu-item.tsx
@@ -2,6 +2,7 @@ import type { FC } from 'react'
import type { VersionHistoryContextMenuOptions } from '../../../types'
import { cn } from '@langgenius/dify-ui/cn'
import * as React from 'react'
+import { DropdownMenuItem } from '@/app/components/base/ui/dropdown-menu'
type MenuItemProps = {
item: {
@@ -18,23 +19,25 @@ const MenuItem: FC = ({
isDestructive = false,
}) => {
return (
- {
+ onClick={(event) => {
+ event.stopPropagation()
onClick(item.key)
}}
>
{item.name}
-
+ {children}
+
+ ),
+ DropdownMenuTrigger: ({ children, render }: { children: React.ReactNode, render?: React.ReactElement }) => {
+ const { open, setOpen } = useDropdownMenuContext()
+
+ if (render)
+ return React.cloneElement(render, { onClick: () => setOpen(!open) } as Record, children)
+
+ return setOpen(!open)}>{children}
+ },
+ DropdownMenuContent: ({ children }: { children: React.ReactNode }) => {
+ const { open } = useDropdownMenuContext()
+ return open ? {children}
: null
+ },
+ DropdownMenuItem: ({ children, onClick }: { children: React.ReactNode, onClick?: React.MouseEventHandler }) => {
+ const { setOpen } = useDropdownMenuContext()
+ return (
+ {
+ onClick?.(event)
+ setOpen(false)
+ }}
+ >
+ {children}
+
+ )
+ },
+ }
+})
+
const createLogItem = (overrides: Partial = {}): AgentLogItemWithChildren => ({
message_id: 'message-1',
label: 'Planner',
diff --git a/web/app/components/workflow/run/agent-log/agent-log-nav-more.tsx b/web/app/components/workflow/run/agent-log/agent-log-nav-more.tsx
index 8bdb6ad227..77f3c778a6 100644
--- a/web/app/components/workflow/run/agent-log/agent-log-nav-more.tsx
+++ b/web/app/components/workflow/run/agent-log/agent-log-nav-more.tsx
@@ -1,12 +1,13 @@
import type { AgentLogItemWithChildren } from '@/types/workflow'
import { RiMoreLine } from '@remixicon/react'
import { useState } from 'react'
-import {
- PortalToFollowElem,
- PortalToFollowElemContent,
- PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
import { Button } from '@/app/components/base/ui/button'
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
type AgentLogNavMoreProps = {
options: AgentLogItemWithChildren[]
@@ -19,42 +20,39 @@ const AgentLogNavMore = ({
const [open, setOpen] = useState(false)
return (
-
- setOpen(v => !v)}>
-
-
-
-
-
- {
- options.map(option => (
-
{
- onShowAgentOrToolLog(option)
- setOpen(false)
- }}
- >
- {option.label}
-
- ))
- }
-
-
+
+ {
+ options.map(option => (
+ onShowAgentOrToolLog(option)}
+ >
+ {option.label}
+
+ ))
+ }
+
+
)
}
diff --git a/web/app/components/workflow/workflow-preview/components/__tests__/zoom-in-out.spec.tsx b/web/app/components/workflow/workflow-preview/components/__tests__/zoom-in-out.spec.tsx
index 4991ae7b04..6e8ad90933 100644
--- a/web/app/components/workflow/workflow-preview/components/__tests__/zoom-in-out.spec.tsx
+++ b/web/app/components/workflow/workflow-preview/components/__tests__/zoom-in-out.spec.tsx
@@ -1,4 +1,4 @@
-import { fireEvent, render, within } from '@testing-library/react'
+import { fireEvent, render, screen, within } from '@testing-library/react'
import ZoomInOut from '../zoom-in-out'
const {
@@ -26,29 +26,25 @@ vi.mock('reactflow', () => ({
}))
const getZoomControls = () => {
- const label = Array.from(document.querySelectorAll('div')).find((element) => {
+ const label = Array.from(document.querySelectorAll('button')).find((element) => {
return /^\d+%$/.test(element.textContent ?? '') && element.className.includes('w-[34px]')
})
- const icons = Array.from(document.querySelectorAll('svg'))
+ const zoomOutIcon = document.querySelector('.i-ri-zoom-out-line')
+ const zoomInIcon = document.querySelector('.i-ri-zoom-in-line')
- if (!label || icons.length < 2)
+ if (!label || !zoomOutIcon || !zoomInIcon)
throw new Error('Missing zoom controls')
return {
- zoomOutTrigger: icons[0]!.parentElement as HTMLElement,
+ zoomOutTrigger: zoomOutIcon.parentElement as HTMLElement,
label,
- zoomInTrigger: icons[1]!.parentElement as HTMLElement,
+ zoomInTrigger: zoomInIcon.parentElement as HTMLElement,
}
}
const openZoomMenu = () => {
fireEvent.click(getZoomControls().label)
-
- const portal = document.querySelector('[data-floating-ui-portal]')
- if (!portal)
- throw new Error('Missing zoom menu portal')
-
- return within(portal as HTMLElement)
+ return within(screen.getByRole('menu'))
}
describe('workflow preview zoom controls', () => {
diff --git a/web/app/components/workflow/workflow-preview/components/zoom-in-out.tsx b/web/app/components/workflow/workflow-preview/components/zoom-in-out.tsx
index 7a81bccc50..3f714c5ca9 100644
--- a/web/app/components/workflow/workflow-preview/components/zoom-in-out.tsx
+++ b/web/app/components/workflow/workflow-preview/components/zoom-in-out.tsx
@@ -1,13 +1,8 @@
import type { FC } from 'react'
import { cn } from '@langgenius/dify-ui/cn'
-import {
- RiZoomInLine,
- RiZoomOutLine,
-} from '@remixicon/react'
import {
Fragment,
memo,
- useCallback,
useState,
} from 'react'
import { useTranslation } from 'react-i18next'
@@ -15,18 +10,17 @@ import {
useReactFlow,
useViewport,
} from 'reactflow'
-import Divider from '@/app/components/base/divider'
import {
- PortalToFollowElem,
- PortalToFollowElemContent,
- PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
import TipPopup from '@/app/components/workflow/operator/tip-popup'
import ShortcutsName from '@/app/components/workflow/shortcuts-name'
enum ZoomType {
- zoomIn = 'zoomIn',
- zoomOut = 'zoomOut',
zoomToFit = 'zoomToFit',
zoomTo25 = 'zoomTo25',
zoomTo50 = 'zoomTo50',
@@ -46,7 +40,7 @@ const ZoomInOut: FC = () => {
const { zoom } = useViewport()
const [open, setOpen] = useState(false)
- const ZOOM_IN_OUT_OPTIONS = [
+ const zoomOptions = [
[
{
key: ZoomType.zoomTo200,
@@ -78,6 +72,8 @@ const ZoomInOut: FC = () => {
]
const handleZoom = (type: string) => {
+ setOpen(false)
+
if (type === ZoomType.zoomToFit)
fitView()
@@ -97,119 +93,98 @@ const ZoomInOut: FC = () => {
zoomTo(2)
}
- const handleTrigger = useCallback(() => {
- setOpen(v => !v)
- }, [])
-
return (
-
-
-
+
- {
+ if (zoom <= 0.25)
+ return
+
+ e.stopPropagation()
+ zoomOut()
+ }}
>
-
- {
- if (zoom <= 0.25)
- return
-
- e.stopPropagation()
- zoomOut()
- }}
- >
-
-
-
- {Number.parseFloat(`${zoom * 100}`).toFixed(0)}
- %
-
-
- = 2 ? 'cursor-not-allowed' : 'cursor-pointer hover:bg-black/5'}`}
- onClick={(e) => {
- if (zoom >= 2)
- return
-
- e.stopPropagation()
- zoomIn()
- }}
- >
-
-
+
-
-
- {
- ZOOM_IN_OUT_OPTIONS.map((options, i) => (
-
- {
- i !== 0 && (
-
- {
- options.map(option => (
-
+
+
+ {Number.parseFloat(`${zoom * 100}`).toFixed(0)}
+ %
+
+
+
+ {zoomOptions.map((options, groupIndex) => (
+
+ {groupIndex !== 0 && (
+
+ {options.map(option => (
+
handleZoom(option.key)}
>
{option.text}
- {
- option.key === ZoomType.zoomToFit && (
-
-
-
-
+
+ ))}
+
+ ))}
+
+ = 2 ? 'cursor-not-allowed' : 'cursor-pointer hover:bg-black/5'}`}
+ onClick={(e) => {
+ if (zoom >= 2)
+ return
+
+ e.stopPropagation()
+ zoomIn()
+ }}
+ >
+
+
+
)
}
diff --git a/web/docs/overlay-migration.md b/web/docs/overlay-migration.md
index 6762c2bfb1..29ef814fcd 100644
--- a/web/docs/overlay-migration.md
+++ b/web/docs/overlay-migration.md
@@ -9,9 +9,7 @@ This document tracks the migration away from legacy overlay APIs.
- `@/app/components/base/tooltip`
- `@/app/components/base/modal`
- `@/app/components/base/select` (including `custom` / `pure`)
- - `@/app/components/base/dropdown`
- `@/app/components/base/dialog`
- - `@/app/components/base/toast` (including `context`)
- Replacement primitives:
- `@/app/components/base/ui/tooltip`
- `@/app/components/base/ui/dropdown-menu`
@@ -42,12 +40,6 @@ This document tracks the migration away from legacy overlay APIs.
- Remove remaining allowlist entries.
- Remove legacy overlay implementations when import count reaches zero.
-## Toast migration strategy
-
-- `@/app/components/base/toast` has been replaced by `@/app/components/base/ui/toast`.
-- All new toast usage must go through `@/app/components/base/ui/toast`.
-- When a file with legacy toast usage is touched, prefer migrating that call site in the same change; full-repo toast cleanup is not required in one PR.
-
## Allowlist maintenance
- After each migration batch, run:
diff --git a/web/eslint.constants.mjs b/web/eslint.constants.mjs
index fb912d6524..57a14fc22d 100644
--- a/web/eslint.constants.mjs
+++ b/web/eslint.constants.mjs
@@ -52,13 +52,6 @@ export const OVERLAY_RESTRICTED_IMPORT_PATTERNS = [
],
message: 'Deprecated: use @/app/components/base/ui/select instead. See issue #32767.',
},
- {
- group: [
- '**/base/dropdown',
- '**/base/dropdown/index',
- ],
- message: 'Deprecated: use @/app/components/base/ui/dropdown-menu instead. See issue #32767.',
- },
{
group: [
'**/base/dialog',
@@ -80,7 +73,6 @@ export const OVERLAY_MIGRATION_LEGACY_BASE_FILES = [
'app/components/base/chip/index.tsx',
'app/components/base/date-and-time-picker/date-picker/index.tsx',
'app/components/base/date-and-time-picker/time-picker/index.tsx',
- 'app/components/base/dropdown/index.tsx',
'app/components/base/features/new-feature-panel/file-upload/setting-modal.tsx',
'app/components/base/features/new-feature-panel/text-to-speech/voice-settings.tsx',
'app/components/base/file-uploader/file-from-link-or-local/index.tsx',