opensource/dify
2
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-05-06 18:27:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(web): fix selection menu hide

Browse Source
This commit is contained in:
JzoNg 2026-04-20 16:08:58 +08:00
parent b6fbec066d
commit 8e2d507e5c
2 changed files with 63 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
web/app/components/workflow/__tests__/selection-contextmenu.spec.tsx
View File

@ -25,7 +25,7 @@ vi.mock('@/next/navigation', () => ({
}),
}))
vi.mock('@/app/components/base/ui/toast', () => ({
vi.mock('@langgenius/dify-ui/toast', () => ({
toast: {
success: (...args: unknown[]) => mockToastSuccess(...args),
error: (...args: unknown[]) => mockToastError(...args),
@ -39,13 +39,19 @@ vi.mock('@/service/use-snippets', () => ({
}),
}))
vi.mock('@/service/client', () => ({
consoleClient: {
snippets: {
syncDraftWorkflow: (...args: unknown[]) => mockSyncDraftWorkflow(...args),
vi.mock('@/service/client', async (importOriginal) => {
const actual = await importOriginal<typeof import('@/service/client')>()
return {
...actual,
consoleClient: {
...actual.consoleClient,
snippets: {
...actual.consoleClient.snippets,
syncDraftWorkflow: (...args: unknown[]) => mockSyncDraftWorkflow(...args),
},
},
},
}))
}
})
vi.mock('../hooks', async () => {
const actual = await vi.importActual<typeof import('../hooks')>('../hooks')
@ -301,6 +307,8 @@ describe('SelectionContextmenu', () => {
})
fireEvent.click(screen.getByTestId('selection-contextmenu-item-createSnippet'))
expect(store.getState().selectionMenu).toBeUndefined()
expect(screen.queryByTestId('selection-contextmenu-item-createSnippet')).not.toBeInTheDocument()
fireEvent.change(screen.getByPlaceholderText('workflow.snippet.namePlaceholder'), {
target: { value: 'My snippet' },
})

93
web/app/components/workflow/selection-contextmenu.tsx
View File

@ -335,6 +335,7 @@ const SelectionContextmenu = () => {
}),
}
}, [selectionMenu])
const isMenuOpen = Boolean(selectionMenu && anchor)
useEffect(() => {
if (selectionMenu && selectedNodes.length <= 1)
@ -561,57 +562,59 @@ const SelectionContextmenu = () => {
return (
<div data-testid="selection-contextmenu">
<ContextMenu
open
open={isMenuOpen}
onOpenChange={(open) => {
if (!open)
handleSelectionContextmenuCancel()
}}
>
<ContextMenuContent
positionerProps={anchor ? { anchor } : undefined}
popupClassName="w-[240px] py-0"
>
<div className="p-1">
{menuActions.map(item => (
<ContextMenuItem
key={item.action}
data-testid={`selection-contextmenu-item-${item.action}`}
disabled={item.disabled}
className={cn(
'mx-0 h-8 justify-between gap-3 rounded-lg px-2 text-[14px] leading-5 font-normal text-text-secondary',
item.action === 'delete' && 'data-highlighted:bg-state-destructive-hover data-highlighted:text-text-destructive',
)}
onClick={() => handleMenuAction(item.action)}
>
<span>{getActionLabel(item.translationKey)}</span>
{item.shortcutKeys && (
<ShortcutsName
keys={item.shortcutKeys}
textColor="secondary"
/>
)}
</ContextMenuItem>
))}
</div>
<ContextMenuSeparator className="my-0" />
<div className="p-1.5">
<div className="flex items-center">
{alignMenuItems.map((item) => {
return (
<ContextMenuItem
key={item.alignType}
aria-label={t(item.translationKey, { defaultValue: item.translationKey, ns: 'workflow' })}
className="mx-0 h-8 w-8 justify-center rounded-md px-0 text-text-tertiary data-highlighted:bg-state-base-hover data-highlighted:text-text-secondary"
data-testid={`selection-contextmenu-item-${item.alignType}`}
onClick={() => handleAlignNodes(item.alignType)}
>
<span aria-hidden className={`${item.icon} h-4 w-4 ${item.iconClassName ?? ''}`.trim()} />
</ContextMenuItem>
)
})}
{isMenuOpen && (
<ContextMenuContent
positionerProps={{ anchor }}
popupClassName="w-[240px] py-0"
>
<div className="p-1">
{menuActions.map(item => (
<ContextMenuItem
key={item.action}
data-testid={`selection-contextmenu-item-${item.action}`}
disabled={item.disabled}
className={cn(
'mx-0 h-8 justify-between gap-3 rounded-lg px-2 text-[14px] leading-5 font-normal text-text-secondary',
item.action === 'delete' && 'data-highlighted:bg-state-destructive-hover data-highlighted:text-text-destructive',
)}
onClick={() => handleMenuAction(item.action)}
>
<span>{getActionLabel(item.translationKey)}</span>
{item.shortcutKeys && (
<ShortcutsName
keys={item.shortcutKeys}
textColor="secondary"
/>
)}
</ContextMenuItem>
))}
</div>
</div>
</ContextMenuContent>
<ContextMenuSeparator className="my-0" />
<div className="p-1.5">
<div className="flex items-center">
{alignMenuItems.map((item) => {
return (
<ContextMenuItem
key={item.alignType}
aria-label={t(item.translationKey, { defaultValue: item.translationKey, ns: 'workflow' })}
className="mx-0 h-8 w-8 justify-center rounded-md px-0 text-text-tertiary data-highlighted:bg-state-base-hover data-highlighted:text-text-secondary"
data-testid={`selection-contextmenu-item-${item.alignType}`}
onClick={() => handleAlignNodes(item.alignType)}
>
<span aria-hidden className={`${item.icon} h-4 w-4 ${item.iconClassName ?? ''}`.trim()} />
</ContextMenuItem>
)
})}
</div>
</div>
</ContextMenuContent>
)}
</ContextMenu>
{isCreateSnippetDialogOpen && (
<CreateSnippetDialog