{
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/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 f8101e1b3a..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)}
+ }
data-testid="mobile-more-btn"
>
-
-
-
+
+ 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..a6dd6a0a9e 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' })}
-
- )}
-
{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 waitFor(() => {
+ expect(screen.queryByText('explore.sidebar.action.pin')).not.toBeInTheDocument()
+ })
+ })
+
+ it('should keep the trigger mounted while visually hidden', () => {
+ render()
+
+ const trigger = screen.getByRole('button')
+ expect(trigger).toHaveClass('pointer-events-none')
+ expect(trigger).toHaveClass('opacity-0')
+ })
+
+ it('should safely ignore rename clicks when callback is missing', async () => {
+ const user = userEvent.setup()
+ render()
+
+ await user.click(screen.getByRole('button'))
+ await user.click(screen.getByText('explore.sidebar.action.rename'))
+
+ await waitFor(() => {
+ expect(screen.queryByText('explore.sidebar.action.rename')).not.toBeInTheDocument()
+ })
+ })
+
+ it('should not bubble trigger clicks to the parent container', async () => {
+ const user = userEvent.setup()
+ const parentClick = vi.fn()
+
+ render(
+
+
+
,
+ )
+
+ 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..611d2bb1b9 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)}
+ }
+ onClick={e => e.stopPropagation()}
>
= ({
: ActionButtonState.Default
}
>
-
+
-
-
-
+
e.stopPropagation(),
+ }}
+ >
+ {
e.stopPropagation()
+ togglePin()
}}
>
-
- {isPinned && }
- {!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' })}
-
- )}
-
-
{
- setLastAction(String(item.value))
- props.onSelect?.(item)
- }}
- />
-
- Last action:
- {' '}
- {lastAction}
-
-
- {
- !!items.length && (
-
- {
- items.map(item => (
-
handleSelect(item)}
- >
- {item.text}
-
- ))
- }
-
- )
- }
- {
- (!!items.length && !!secondItems?.length) && (
-
- )
- }
- {
- !!secondItems?.length && (
-
- {
- secondItems.map(item => (
-
handleSelect(item)}
- >
- {item.text}
-
- ))
- }
-
- )
- }
-
-
-
{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' })}
-
-
{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/plugins/plugin-page/plugin-tasks/__tests__/index.spec.tsx b/web/app/components/plugins/plugin-page/plugin-tasks/__tests__/index.spec.tsx
index 56992b377f..8c33894929 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
@@ -680,6 +680,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()
+
+ fireEvent.click(document.getElementById('plugin-task-trigger')!)
+
+ await waitFor(() => {
+ expect(document.querySelector('.w-\\[360px\\]')).toBeInTheDocument()
+ })
+
+ fireEvent.click(screen.getByRole('button', { name: /task\.clearAll/i }))
+
+ await waitFor(() => {
+ expect(document.querySelector('.w-\\[360px\\]')).not.toBeInTheDocument()
+ })
+ })
+
it('should clear only error plugins when onClearErrors is called', async () => {
const { mockMutateAsync } = setupMocks([
createMockPlugin({ status: TaskStatus.failed, plugin_unique_identifier: 'error-1' }),
@@ -792,6 +812,30 @@ describe('PluginTasks Component', () => {
expect(document.querySelector('.w-\\[360px\\]')).toBeInTheDocument()
})
+
+ it('should open for installing-with-success state', () => {
+ setupMocks([
+ createMockPlugin({ status: TaskStatus.running, plugin_unique_identifier: 'running-1' }),
+ createMockPlugin({ status: TaskStatus.success, plugin_unique_identifier: 'success-1' }),
+ ])
+
+ render()
+ fireEvent.click(document.getElementById('plugin-task-trigger')!)
+
+ expect(document.querySelector('.w-\\[360px\\]')).toBeInTheDocument()
+ })
+
+ it('should open for installing-with-error state', () => {
+ setupMocks([
+ createMockPlugin({ status: TaskStatus.running, plugin_unique_identifier: 'running-1' }),
+ createMockPlugin({ status: TaskStatus.failed, plugin_unique_identifier: 'failed-1' }),
+ ])
+
+ render()
+ fireEvent.click(document.getElementById('plugin-task-trigger')!)
+
+ expect(document.querySelector('.w-\\[360px\\]')).toBeInTheDocument()
+ })
})
})
diff --git a/web/app/components/plugins/plugin-page/plugin-tasks/index.tsx b/web/app/components/plugins/plugin-page/plugin-tasks/index.tsx
index b96b1ec07c..5acd193a82 100644
--- a/web/app/components/plugins/plugin-page/plugin-tasks/index.tsx
+++ b/web/app/components/plugins/plugin-page/plugin-tasks/index.tsx
@@ -5,10 +5,10 @@ import {
} from 'react'
import { useTranslation } from 'react-i18next'
import {
- PortalToFollowElem,
- PortalToFollowElemContent,
- PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
import useGetIcon from '@/app/components/plugins/install-plugin/base/use-get-icon'
import PluginTaskList from './components/plugin-task-list'
import TaskStatusIndicator from './components/task-status-indicator'
@@ -96,16 +96,14 @@ const PluginTasks = () => {
return (
-
-
+ }
+ onClick={handleTriggerClick}
+ >
{
totalPluginsLength={totalPluginsLength}
onClick={() => {}}
/>
-
-
+
+
{
onClearErrors={handleClearErrors}
onClearSingle={handleClearSingle}
/>
-
-
+
+
+ {data?.title}
+
+
+ )
+ },
+}))
+
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()
+
+ fireEvent.click(screen.getByRole('button'))
+ await waitFor(() => {
+ expect(screen.getByText('common.userProfile.about')).toBeInTheDocument()
+ })
+
+ fireEvent.click(screen.getByText('common.userProfile.about'))
+ await waitFor(() => {
+ expect(screen.getByTestId('info-modal')).toBeInTheDocument()
+ })
+
+ fireEvent.click(screen.getByText('Close Info'))
+ await waitFor(() => {
+ expect(screen.queryByTestId('info-modal')).not.toBeInTheDocument()
+ })
+ })
})
describe('forceClose prop', () => {
diff --git a/web/app/components/share/text-generation/menu-dropdown.tsx b/web/app/components/share/text-generation/menu-dropdown.tsx
index bc8323676c..d50a0d77de 100644
--- a/web/app/components/share/text-generation/menu-dropdown.tsx
+++ b/web/app/components/share/text-generation/menu-dropdown.tsx
@@ -1,26 +1,25 @@
'use client'
-import type { Placement } from '@floating-ui/react'
import type { FC } from 'react'
+import type { Placement } from '@/app/components/base/ui/placement'
import type { SiteInfo } from '@/models/share'
import { cn } from '@langgenius/dify-ui/cn'
-import {
- RiEqualizer2Line,
-} from '@remixicon/react'
import * as React from 'react'
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import ActionButton from '@/app/components/base/action-button'
-import {
- PortalToFollowElem,
- PortalToFollowElemContent,
- PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
import ThemeSwitcher from '@/app/components/base/theme-switcher'
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuLinkItem,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
import { useWebAppStore } from '@/context/web-app-context'
import { AccessMode } from '@/models/access-control'
import { usePathname, useRouter } from '@/next/navigation'
import { webAppLogout } from '@/service/webapp-auth'
-import Divider from '../../base/divider'
import InfoModal from './info-modal'
type Props = {
@@ -40,24 +39,22 @@ const MenuDropdown: FC = ({
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' })}
-
-
- )}
+
{show && (
({
+ 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/docs/overlay-migration.md b/web/docs/overlay-migration.md
index 6762c2bfb1..339db8945b 100644
--- a/web/docs/overlay-migration.md
+++ b/web/docs/overlay-migration.md
@@ -9,7 +9,6 @@ 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:
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',