github-mirrors/dify
1
0
Fork 0
mirror of https://mirror.skon.top/github.com/langgenius/dify.git synced 2026-04-21 16:10:30 +08:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity

refactor(web): continue replacing PortalToFollowElem with Popover components (#35431)

Browse Source 
Co-authored-by: CodingOnStar <hanxujiang@dify.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
This commit is contained in:
Coding On Star
2026-04-21 10:44:52 +08:00
committed by GitHub
parent da00de6688
commit d583b1b835
78 changed files with 2441 additions and 1893 deletions
Download Patch File Download Diff File Expand all files Collapse all files

186
eslint-suppressions.json
View File

@@ -129,11 +129,6 @@
"count": 3
}
},
"web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config-button.tsx": {
"no-restricted-imports": {
"count": 1
}
},
"web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config-popup.tsx": {
"no-restricted-imports": {
"count": 1
@@ -1086,21 +1081,11 @@
"count": 1
}
},
"web/app/components/base/date-and-time-picker/date-picker/index.tsx": {
"react/set-state-in-effect": {
"count": 4
}
},
"web/app/components/base/date-and-time-picker/hooks.ts": {
"react/no-unnecessary-use-prefix": {
"count": 2
}
},
"web/app/components/base/date-and-time-picker/time-picker/index.tsx": {
"react/set-state-in-effect": {
"count": 2
}
},
"web/app/components/base/date-and-time-picker/types.ts": {
"erasable-syntax-only/enums": {
"count": 2
@@ -1195,11 +1180,6 @@
"count": 5
}
},
"web/app/components/base/features/new-feature-panel/file-upload/setting-modal.tsx": {
"ts/no-explicit-any": {
"count": 1
}
},
"web/app/components/base/features/new-feature-panel/moderation/form-generation.tsx": {
"no-restricted-imports": {
"count": 1
@@ -1223,11 +1203,6 @@
"count": 2
}
},
"web/app/components/base/features/new-feature-panel/text-to-speech/voice-settings.tsx": {
"ts/no-explicit-any": {
"count": 1
}
},
"web/app/components/base/features/types.ts": {
"erasable-syntax-only/enums": {
"count": 2
@@ -1878,11 +1853,6 @@
"count": 1
}
},
"web/app/components/base/portal-to-follow-elem/index.tsx": {
"ts/no-explicit-any": {
"count": 1
}
},
"web/app/components/base/prompt-editor/index.stories.tsx": {
"no-console": {
"count": 1
@@ -1906,11 +1876,6 @@
"count": 1
}
},
"web/app/components/base/prompt-editor/plugins/context-block/component.tsx": {
"ts/no-explicit-any": {
"count": 1
}
},
"web/app/components/base/prompt-editor/plugins/context-block/index.tsx": {
"no-barrel-files/no-barrel-files": {
"count": 3
@@ -1940,11 +1905,6 @@
"count": 2
}
},
"web/app/components/base/prompt-editor/plugins/history-block/component.tsx": {
"ts/no-explicit-any": {
"count": 1
}
},
"web/app/components/base/prompt-editor/plugins/history-block/index.tsx": {
"no-barrel-files/no-barrel-files": {
"count": 3
@@ -2268,16 +2228,6 @@
"count": 1
}
},
"web/app/components/datasets/common/document-picker/index.tsx": {
"no-restricted-imports": {
"count": 1
}
},
"web/app/components/datasets/common/document-picker/preview-document-picker.tsx": {
"no-restricted-imports": {
"count": 1
}
},
"web/app/components/datasets/common/image-previewer/index.tsx": {
"no-irregular-whitespace": {
"count": 1
@@ -2894,14 +2844,6 @@
"count": 1
}
},
"web/app/components/datasets/settings/permission-selector/index.tsx": {
"no-restricted-imports": {
"count": 1
},
"react/no-missing-key": {
"count": 1
}
},
"web/app/components/datasets/settings/summary-index-setting.tsx": {
"no-restricted-imports": {
"count": 1
@@ -3069,21 +3011,11 @@
"count": 1
}
},
"web/app/components/header/account-setting/api-based-extension-page/selector.tsx": {
"no-restricted-imports": {
"count": 1
}
},
"web/app/components/header/account-setting/data-source-page-new/card.tsx": {
"ts/no-explicit-any": {
"count": 2
}
},
"web/app/components/header/account-setting/data-source-page-new/configure.tsx": {
"no-restricted-imports": {
"count": 1
}
},
"web/app/components/header/account-setting/data-source-page-new/hooks/index.ts": {
"no-barrel-files/no-barrel-files": {
"count": 2
@@ -3167,19 +3099,6 @@
"count": 4
}
},
"web/app/components/header/account-setting/model-provider-page/model-auth/add-custom-model.tsx": {
"no-restricted-imports": {
"count": 2
}
},
"web/app/components/header/account-setting/model-provider-page/model-auth/authorized/index.tsx": {
"no-restricted-imports": {
"count": 2
},
"ts/no-explicit-any": {
"count": 2
}
},
"web/app/components/header/account-setting/model-provider-page/model-auth/config-provider.tsx": {
"no-restricted-imports": {
"count": 1
@@ -3411,11 +3330,6 @@
"count": 1
}
},
"web/app/components/plugins/marketplace/search-box/tags-filter.tsx": {
"no-restricted-imports": {
"count": 1
}
},
"web/app/components/plugins/plugin-auth/authorize/add-oauth-button.tsx": {
"ts/no-explicit-any": {
"count": 2
@@ -3447,14 +3361,6 @@
"count": 1
}
},
"web/app/components/plugins/plugin-auth/authorized/index.tsx": {
"no-restricted-imports": {
"count": 2
},
"ts/no-explicit-any": {
"count": 2
}
},
"web/app/components/plugins/plugin-auth/authorized/item.tsx": {
"no-restricted-imports": {
"count": 1
@@ -3510,16 +3416,6 @@
"count": 8
}
},
"web/app/components/plugins/plugin-detail-panel/app-selector/app-picker.tsx": {
"no-restricted-imports": {
"count": 1
}
},
"web/app/components/plugins/plugin-detail-panel/app-selector/index.tsx": {
"no-restricted-imports": {
"count": 1
}
},
"web/app/components/plugins/plugin-detail-panel/datasource-action-list.tsx": {
"ts/no-explicit-any": {
"count": 1
@@ -3713,11 +3609,6 @@
"count": 2
}
},
"web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx": {
"no-restricted-imports": {
"count": 1
}
},
"web/app/components/plugins/plugin-detail-panel/trigger/event-detail-drawer.tsx": {
"ts/no-explicit-any": {
"count": 5
@@ -3756,16 +3647,6 @@
"count": 2
}
},
"web/app/components/plugins/plugin-page/filter-management/category-filter.tsx": {
"no-restricted-imports": {
"count": 1
}
},
"web/app/components/plugins/plugin-page/filter-management/tag-filter.tsx": {
"no-restricted-imports": {
"count": 1
}
},
"web/app/components/plugins/plugin-page/index.tsx": {
"no-restricted-imports": {
"count": 1
@@ -3918,11 +3799,6 @@
"count": 1
}
},
"web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/index.tsx": {
"no-restricted-imports": {
"count": 1
}
},
"web/app/components/rag-pipeline/components/rag-pipeline-header/run-mode.tsx": {
"ts/no-explicit-any": {
"count": 1
@@ -4248,11 +4124,6 @@
"count": 1
}
},
"web/app/components/workflow/block-selector/main.tsx": {
"no-restricted-imports": {
"count": 1
}
},
"web/app/components/workflow/block-selector/market-place-plugin/action.tsx": {
"react/set-state-in-effect": {
"count": 1
@@ -4378,19 +4249,6 @@
"count": 1
}
},
"web/app/components/workflow/header/view-history.tsx": {
"no-restricted-imports": {
"count": 2
}
},
"web/app/components/workflow/header/view-workflow-history.tsx": {
"no-restricted-imports": {
"count": 1
},
"ts/no-explicit-any": {
"count": 1
}
},
"web/app/components/workflow/hooks-store/index.ts": {
"no-barrel-files/no-barrel-files": {
"count": 2
@@ -5053,11 +4911,6 @@
"count": 5
}
},
"web/app/components/workflow/nodes/human-input/components/button-style-dropdown.tsx": {
"no-restricted-imports": {
"count": 1
}
},
"web/app/components/workflow/nodes/human-input/components/delivery-method/email-configure-modal.tsx": {
"no-restricted-imports": {
"count": 1
@@ -5306,16 +5159,6 @@
"count": 1
}
},
"web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-trigger.tsx": {
"no-restricted-imports": {
"count": 1
}
},
"web/app/components/workflow/nodes/knowledge-retrieval/components/retrieval-config.tsx": {
"no-restricted-imports": {
"count": 1
}
},
"web/app/components/workflow/nodes/knowledge-retrieval/default.ts": {
"ts/no-explicit-any": {
"count": 1
@@ -5414,17 +5257,6 @@
"count": 2
}
},
"web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/index.tsx": {
"erasable-syntax-only/enums": {
"count": 1
},
"no-restricted-imports": {
"count": 1
},
"react/set-state-in-effect": {
"count": 2
}
},
"web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/prompt-editor.tsx": {
"no-restricted-imports": {
"count": 1
@@ -5871,24 +5703,11 @@
"count": 1
}
},
"web/app/components/workflow/note-node/note-editor/toolbar/color-picker.tsx": {
"no-restricted-imports": {
"count": 1
},
"react-refresh/only-export-components": {
"count": 1
}
},
"web/app/components/workflow/note-node/note-editor/toolbar/command.tsx": {
"no-restricted-imports": {
"count": 1
}
},
"web/app/components/workflow/note-node/note-editor/toolbar/font-size-selector.tsx": {
"no-restricted-imports": {
"count": 1
}
},
"web/app/components/workflow/note-node/note-editor/utils.ts": {
"regexp/no-useless-quantifier": {
"count": 1
@@ -6012,11 +5831,6 @@
"count": 1
}
},
"web/app/components/workflow/panel/version-history-panel/filter/index.tsx": {
"no-restricted-imports": {
"count": 1
}
},
"web/app/components/workflow/panel/version-history-panel/restore-confirm-modal.tsx": {
"no-restricted-imports": {
"count": 1

127
web/__mocks__/__tests__/base-ui-popover.spec.tsx Normal file
View File

@@ -0,0 +1,127 @@
import { fireEvent, render, screen } from '@testing-library/react'
import * as React from 'react'
import {
Popover,
PopoverContent,
PopoverTrigger,
} from '../base-ui-popover'
type PopoverHarnessProps = {
useRenderElement?: boolean
preventDefaultOnTrigger?: boolean
}
const PopoverHarness = ({
useRenderElement = false,
preventDefaultOnTrigger = false,
}: PopoverHarnessProps) => {
const [open, setOpen] = React.useState(false)
return (
<div>
<div data-testid="outside-area">outside</div>
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger
render={useRenderElement
? (
<button
type="button"
data-testid="custom-trigger"
onClick={(event) => {
if (preventDefaultOnTrigger)
event.preventDefault()
}}
>
toggle
</button>
)
: undefined}
>
fallback trigger
</PopoverTrigger>
<PopoverContent
className="custom-content"
placement="bottom-start"
sideOffset={4}
alignOffset={8}
positionerProps={{ 'data-positioner': 'true' } as unknown as React.HTMLAttributes<HTMLDivElement>}
popupProps={{ 'data-popup': 'true' } as unknown as React.HTMLAttributes<HTMLDivElement>}
>
<div>popover body</div>
</PopoverContent>
</Popover>
<div data-testid="open-state">{open ? 'open' : 'closed'}</div>
</div>
)
}
describe('base-ui-popover mock', () => {
it('should toggle popover content from the fallback trigger and expose content props', () => {
render(<PopoverHarness />)
expect(screen.getByTestId('open-state')).toHaveTextContent('closed')
expect(screen.queryByTestId('popover-content')).not.toBeInTheDocument()
fireEvent.click(screen.getByTestId('popover-trigger'))
expect(screen.getByTestId('open-state')).toHaveTextContent('open')
expect(screen.getByTestId('popover-content')).toHaveAttribute('data-placement', 'bottom-start')
expect(screen.getByTestId('popover-content')).toHaveAttribute('data-side-offset', '4')
expect(screen.getByTestId('popover-content')).toHaveAttribute('data-align-offset', '8')
expect(screen.getByTestId('popover-content')).toHaveAttribute('data-positioner', 'true')
expect(screen.getByTestId('popover-content')).toHaveAttribute('data-popup', 'true')
expect(screen.getByTestId('popover-content')).toHaveClass('custom-content')
})
it('should keep the popover open on inside clicks and close it on outside clicks or escape', () => {
render(<PopoverHarness useRenderElement />)
fireEvent.click(screen.getByTestId('custom-trigger'))
expect(screen.getByTestId('open-state')).toHaveTextContent('open')
fireEvent.mouseDown(screen.getByTestId('popover-content'))
expect(screen.getByTestId('open-state')).toHaveTextContent('open')
fireEvent.keyDown(document, { key: 'Escape' })
expect(screen.getByTestId('open-state')).toHaveTextContent('closed')
fireEvent.click(screen.getByTestId('custom-trigger'))
expect(screen.getByTestId('open-state')).toHaveTextContent('open')
fireEvent.mouseDown(screen.getByTestId('outside-area'))
expect(screen.getByTestId('open-state')).toHaveTextContent('closed')
})
it('should preserve rendered trigger props and respect preventDefault', () => {
render(<PopoverHarness useRenderElement preventDefaultOnTrigger />)
fireEvent.click(screen.getByTestId('custom-trigger'))
expect(screen.getByTestId('custom-trigger')).toHaveAttribute('data-popover-trigger', 'true')
expect(screen.getByTestId('open-state')).toHaveTextContent('closed')
expect(screen.queryByTestId('popover-content')).not.toBeInTheDocument()
})
it('should keep the popover closed when the fallback trigger click is prevented', () => {
const handleClick = (event: React.MouseEvent<HTMLElement>) => {
event.preventDefault()
}
render(
<div>
<Popover open={false} onOpenChange={vi.fn()}>
<PopoverTrigger onClick={handleClick}>
fallback trigger
</PopoverTrigger>
<PopoverContent>
<div>popover body</div>
</PopoverContent>
</Popover>
</div>,
)
fireEvent.click(screen.getByTestId('popover-trigger'))
expect(screen.queryByTestId('popover-content')).not.toBeInTheDocument()
})
})

154
web/__mocks__/base-ui-popover.tsx Normal file
View File

@@ -0,0 +1,154 @@
import type { ReactNode } from 'react'
import * as React from 'react'
const PopoverContext = React.createContext({
open: false,
onOpenChange: (_open: boolean) => {},
})
type PopoverProps = {
children?: ReactNode
open?: boolean
onOpenChange?: (open: boolean) => void
}
type PopoverTriggerProps = React.HTMLAttributes<HTMLElement> & {
children?: ReactNode
nativeButton?: boolean
render?: React.ReactElement
}
type PopoverContentProps = React.HTMLAttributes<HTMLDivElement> & {
children?: ReactNode
placement?: string
sideOffset?: number
alignOffset?: number
positionerProps?: React.HTMLAttributes<HTMLDivElement>
popupProps?: React.HTMLAttributes<HTMLDivElement>
}
export const Popover = ({
children,
open = false,
onOpenChange,
}: PopoverProps) => {
React.useEffect(() => {
if (!open)
return
const handleMouseDown = (event: MouseEvent) => {
const target = event.target as Element | null
if (target?.closest?.('[data-popover-trigger="true"], [data-popover-content="true"]'))
return
onOpenChange?.(false)
}
const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === 'Escape')
onOpenChange?.(false)
}
document.addEventListener('mousedown', handleMouseDown)
document.addEventListener('keydown', handleKeyDown)
return () => {
document.removeEventListener('mousedown', handleMouseDown)
document.removeEventListener('keydown', handleKeyDown)
}
}, [open, onOpenChange])
return (
<PopoverContext.Provider value={{
open,
onOpenChange: onOpenChange ?? (() => {}),
}}
>
<div data-testid="popover" data-open={String(open)}>
{children}
</div>
</PopoverContext.Provider>
)
}
export const PopoverTrigger = ({
children,
render,
nativeButton: _nativeButton,
onClick,
...props
}: PopoverTriggerProps) => {
const { open, onOpenChange } = React.useContext(PopoverContext)
const node = render ?? children
if (React.isValidElement(node)) {
const triggerElement = node as React.ReactElement<Record<string, unknown>>
const childProps = (triggerElement.props ?? {}) as React.HTMLAttributes<HTMLElement> & { 'data-testid'?: string }
return React.cloneElement(triggerElement, {
...props,
...childProps,
'data-testid': childProps['data-testid'] ?? 'popover-trigger',
'data-popover-trigger': 'true',
'onClick': (event: React.MouseEvent<HTMLElement>) => {
childProps.onClick?.(event)
onClick?.(event)
if (event.defaultPrevented)
return
onOpenChange(!open)
},
})
}
return (
<div
data-testid="popover-trigger"
data-popover-trigger="true"
onClick={(event) => {
onClick?.(event)
if (event.defaultPrevented)
return
onOpenChange(!open)
}}
{...props}
>
{node}
</div>
)
}
export const PopoverContent = ({
children,
className,
placement,
sideOffset,
alignOffset,
positionerProps,
popupProps,
...props
}: PopoverContentProps) => {
const { open } = React.useContext(PopoverContext)
if (!open)
return null
return (
<div
data-testid="popover-content"
data-popover-content="true"
data-placement={placement}
data-side-offset={sideOffset}
data-align-offset={alignOffset}
className={className}
{...positionerProps}
{...popupProps}
{...props}
>
{children}
</div>
)
}
export const PopoverClose = ({ children }: { children?: ReactNode }) => <>{children}</>
export const PopoverTitle = ({ children }: { children?: ReactNode }) => <>{children}</>
export const PopoverDescription = ({ children }: { children?: ReactNode }) => <>{children}</>

49
web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config-button.tsx
View File

@@ -3,13 +3,13 @@ import type { FC } from 'react'
import type { PopupProps } from './config-popup'
import { cn } from '@langgenius/dify-ui/cn'
import * as React from 'react'
import { useCallback, useRef, useState } from 'react'
import {
PortalToFollowElem,
PortalToFollowElemContent,
PortalToFollowElemTrigger,
} from '@/app/components/base/portal-to-follow-elem'
Popover,
PopoverContent,
PopoverTrigger,
} from '@langgenius/dify-ui/popover'
import * as React from 'react'
import { useState } from 'react'
import ConfigPopup from './config-popup'
type Props = {
@@ -25,36 +25,31 @@ const ConfigBtn: FC<Props> = ({
children,
...popupProps
}) => {
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)
if (popupProps.readOnly && !hasConfigured)
return null
return (
<PortalToFollowElem
<Popover
open={open}
onOpenChange={setOpen}
placement="bottom-end"
offset={12}
>
<PortalToFollowElemTrigger onClick={handleTrigger}>
<div className={cn('select-none', className)}>
{children}
</div>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className="z-11">
<PopoverTrigger
render={(
<div className={cn('select-none', className)}>
{children}
</div>
)}
/>
<PopoverContent
placement="bottom-end"
sideOffset={12}
popupClassName="border-none bg-transparent shadow-none"
>
<ConfigPopup {...popupProps} />
</PortalToFollowElemContent>
</PortalToFollowElem>
</PopoverContent>
</Popover>
)
}
export default React.memo(ConfigBtn)

32
web/app/components/base/chat/chat-with-history/inputs-form/view-form-dropdown.tsx
View File

@@ -1,3 +1,4 @@
import { Popover, PopoverContent, PopoverTrigger } from '@langgenius/dify-ui/popover'
import {
RiChatSettingsLine,
} from '@remixicon/react'
@@ -6,30 +7,29 @@ import { useTranslation } from 'react-i18next'
import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
import InputsFormContent from '@/app/components/base/chat/chat-with-history/inputs-form/content'
import { Message3Fill } from '@/app/components/base/icons/src/public/other'
import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
const ViewFormDropdown = () => {
const { t } = useTranslation()
const [open, setOpen] = useState(false)
return (
<PortalToFollowElem
<Popover
open={open}
onOpenChange={setOpen}
placement="bottom-end"
offset={{
mainAxis: 4,
crossAxis: 4,
}}
>
<PortalToFollowElemTrigger
onClick={() => setOpen(v => !v)}
<PopoverTrigger
render={(
<ActionButton size="l" state={open ? ActionButtonState.Hover : ActionButtonState.Default}>
<RiChatSettingsLine className="h-[18px] w-[18px]" />
</ActionButton>
)}
/>
<PopoverContent
placement="bottom-end"
sideOffset={4}
alignOffset={4}
popupClassName="border-none bg-transparent shadow-none"
>
<ActionButton size="l" state={open ? ActionButtonState.Hover : ActionButtonState.Default}>
<RiChatSettingsLine className="h-[18px] w-[18px]" />
</ActionButton>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className="z-50">
<div className="w-[400px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg backdrop-blur-xs">
<div className="flex items-center gap-3 rounded-t-2xl border-b border-divider-subtle px-6 py-4">
<Message3Fill className="h-6 w-6 shrink-0" />
@@ -39,8 +39,8 @@ const ViewFormDropdown = () => {
<InputsFormContent />
</div>
</div>
</PortalToFollowElemContent>
</PortalToFollowElem>
</PopoverContent>
</Popover>
)
}

2
web/app/components/base/chat/chat/citation/__tests__/popup.spec.tsx
View File

@@ -6,6 +6,8 @@ import { useDocumentDownload } from '@/service/knowledge/use-document'
import { downloadUrl } from '@/utils/download'
import Popup from '../popup'
vi.mock('@langgenius/dify-ui/popover', async () => await import('@/__mocks__/base-ui-popover'))
vi.mock('@/service/knowledge/use-document', () => ({
useDocumentDownload: vi.fn(),
}))

39
web/app/components/base/chat/chat/citation/popup.tsx
View File

@@ -1,13 +1,9 @@
import type { FC, MouseEvent } from 'react'
import type { Resources } from './index'
import { Popover, PopoverContent, PopoverTrigger } from '@langgenius/dify-ui/popover'
import { Fragment, useState } from 'react'
import { useTranslation } from 'react-i18next'
import FileIcon from '@/app/components/base/file-icon'
import {
PortalToFollowElem,
PortalToFollowElemContent,
PortalToFollowElemTrigger,
} from '@/app/components/base/portal-to-follow-elem'
import Link from '@/next/link'
import { useDocumentDownload } from '@/service/knowledge/use-document'
import { downloadUrl } from '@/utils/download'
@@ -47,22 +43,25 @@ const Popup: FC<PopupProps> = ({
}
return (
<PortalToFollowElem
<Popover
open={open}
onOpenChange={setOpen}
placement="top-start"
offset={{
mainAxis: 8,
crossAxis: -2,
}}
>
<PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
<div data-testid="popup-trigger" className="flex h-7 max-w-[240px] items-center rounded-lg bg-components-button-secondary-bg px-2">
<FileIcon type={fileType} className="mr-1 h-4 w-4 shrink-0" />
<div className="truncate text-xs text-text-tertiary">{data.documentName}</div>
</div>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent style={{ zIndex: 1000 }}>
<PopoverTrigger
nativeButton={false}
render={(
<div data-testid="popup-trigger" className="flex h-7 max-w-[240px] items-center rounded-lg bg-components-button-secondary-bg px-2">
<FileIcon type={fileType} className="mr-1 h-4 w-4 shrink-0" />
<div className="truncate text-xs text-text-tertiary">{data.documentName}</div>
</div>
)}
/>
<PopoverContent
placement="top-start"
sideOffset={8}
alignOffset={-2}
popupClassName="border-none bg-transparent shadow-none"
>
<div data-testid="popup-content" className="max-w-[360px] rounded-xl bg-background-section-burn shadow-lg backdrop-blur-[5px]">
<div className="px-4 pt-3 pb-2">
<div className="flex h-[18px] items-center">
@@ -156,8 +155,8 @@ const Popup: FC<PopupProps> = ({
</div>
</div>
</div>
</PortalToFollowElemContent>
</PortalToFollowElem>
</PopoverContent>
</Popover>
)
}

40
web/app/components/base/chat/embedded-chatbot/inputs-form/view-form-dropdown.tsx
View File

@@ -1,10 +1,10 @@
import { cn } from '@langgenius/dify-ui/cn'
import { Popover, PopoverContent, PopoverTrigger } from '@langgenius/dify-ui/popover'
import * as React from 'react'
import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
import InputsFormContent from '@/app/components/base/chat/embedded-chatbot/inputs-form/content'
import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
type Props = {
iconColor?: string
@@ -17,25 +17,27 @@ const ViewFormDropdown = ({
const [open, setOpen] = useState(false)
return (
<PortalToFollowElem
<Popover
open={open}
onOpenChange={setOpen}
placement="bottom-end"
offset={{
mainAxis: 4,
crossAxis: 4,
}}
>
<PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
<ActionButton
size="l"
state={open ? ActionButtonState.Hover : ActionButtonState.Default}
data-testid="view-form-dropdown-trigger"
>
<div className={cn('i-ri-chat-settings-line h-[18px] w-[18px] shrink-0', iconColor)} />
</ActionButton>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className="z-99">
<PopoverTrigger
render={(
<ActionButton
size="l"
state={open ? ActionButtonState.Hover : ActionButtonState.Default}
data-testid="view-form-dropdown-trigger"
>
<div className={cn('i-ri-chat-settings-line h-[18px] w-[18px] shrink-0', iconColor)} />
</ActionButton>
)}
/>
<PopoverContent
placement="bottom-end"
sideOffset={4}
alignOffset={4}
popupClassName="border-none bg-transparent shadow-none"
>
<div
data-testid="view-form-dropdown-content"
className="w-[400px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg backdrop-blur-xs"
@@ -48,8 +50,8 @@ const ViewFormDropdown = ({
<InputsFormContent />
</div>
</div>
</PortalToFollowElemContent>
</PortalToFollowElem>
</PopoverContent>
</Popover>
)
}

19
web/app/components/base/date-and-time-picker/date-picker/__tests__/index.spec.tsx
View File

@@ -3,6 +3,20 @@ import { act, fireEvent, render, screen, within } from '@testing-library/react'
import dayjs from '../../utils/dayjs'
import DatePicker from '../index'
vi.mock('@langgenius/dify-ui/popover', async () => await import('@/__mocks__/base-ui-popover'))
vi.mock('@langgenius/dify-ui/button', () => ({
Button: ({ children, onClick, disabled, className }: {
children?: React.ReactNode
onClick?: () => void
disabled?: boolean
className?: string
}) => (
<button onClick={onClick as (() => void) | undefined} disabled={disabled as boolean | undefined} className={className as string | undefined}>
{children}
</button>
),
}))
// Mock scrollIntoView
beforeAll(() => {
Element.prototype.scrollIntoView = vi.fn()
@@ -113,14 +127,13 @@ describe('DatePicker', () => {
render(<DatePicker {...props} />)
openPicker()
expect(screen.getByTestId('popover')).toHaveAttribute('data-open', 'true')
// Simulate a mousedown event outside the container
act(() => {
document.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }))
})
// The picker should now be closed - input shows its value
// The picker should now be closed - input shows its value
expect(screen.getByTestId('popover')).toHaveAttribute('data-open', 'false')
expect(screen.getByRole('textbox'))!.toBeInTheDocument()
})
})

87
web/app/components/base/date-and-time-picker/date-picker/index.tsx
View File

@@ -1,14 +1,10 @@
import type { Dayjs } from 'dayjs'
import type { DatePickerProps, Period } from '../types'
import { cn } from '@langgenius/dify-ui/cn'
import { Popover, PopoverContent, PopoverTrigger } from '@langgenius/dify-ui/popover'
import * as React from 'react'
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'
import {
PortalToFollowElem,
PortalToFollowElemContent,
PortalToFollowElemTrigger,
} from '@/app/components/base/portal-to-follow-elem'
import Calendar from '../calendar'
import TimePickerHeader from '../time-picker/header'
import TimePickerOptions from '../time-picker/options'
@@ -35,15 +31,14 @@ const DatePicker = ({
needTimePicker = true,
renderTrigger,
triggerWrapClassName,
popupZIndexClassname = 'z-11',
popupZIndexClassname,
noConfirm,
getIsDateDisabled,
}: DatePickerProps) => {
const { t } = useTranslation()
const [isOpen, setIsOpen] = useState(false)
const [view, setView] = useState(ViewType.date)
const containerRef = useRef<HTMLDivElement>(null)
const isInitial = useRef(true)
const isInitialRef = useRef(true)
// Normalize the value to ensure that all subsequent uses are Day.js objects.
const normalizedValue = useMemo(() => {
@@ -62,46 +57,41 @@ const DatePicker = ({
const [selectedYear, setSelectedYear] = useState(() => (inputValue || defaultValue).year())
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
setIsOpen(false)
setView(ViewType.date)
}
}
document.addEventListener('mousedown', handleClickOutside)
return () => document.removeEventListener('mousedown', handleClickOutside)
}, [])
useEffect(() => {
if (isInitial.current) {
isInitial.current = false
if (isInitialRef.current) {
isInitialRef.current = false
return
}
clearMonthMapCache()
if (normalizedValue) {
const newValue = getDateWithTimezone({ date: normalizedValue, timezone })
// eslint-disable-next-line react/set-state-in-effect -- timezone changes intentionally resync the displayed calendar state.
setCurrentDate(newValue)
// eslint-disable-next-line react/set-state-in-effect -- timezone changes intentionally resync the selected value.
setSelectedDate(newValue)
onChange(newValue)
}
else {
// eslint-disable-next-line react/set-state-in-effect -- timezone changes intentionally resync the displayed calendar state.
setCurrentDate(prev => getDateWithTimezone({ date: prev, timezone }))
// eslint-disable-next-line react/set-state-in-effect -- timezone changes intentionally resync the selected value.
setSelectedDate(prev => prev ? getDateWithTimezone({ date: prev, timezone }) : undefined)
}
// eslint-disable-next-line react/exhaustive-deps -- this effect intentionally runs only when timezone changes.
}, [timezone])
const handleClickTrigger = (e: React.MouseEvent) => {
e.stopPropagation()
if (isOpen) {
setIsOpen(false)
return
}
const handleOpenChange = useCallback((nextOpen: boolean) => {
setIsOpen(nextOpen)
setView(ViewType.date)
setIsOpen(true)
if (normalizedValue) {
if (nextOpen && normalizedValue) {
setCurrentDate(normalizedValue)
setSelectedDate(normalizedValue)
}
}, [normalizedValue])
const handleClickTrigger = (e: React.MouseEvent) => {
e.preventDefault()
e.stopPropagation()
handleOpenChange(!isOpen)
}
const handleClear = (e: React.MouseEvent) => {
@@ -210,21 +200,21 @@ const DatePicker = ({
const placeholderDate = isOpen && selectedDate ? selectedDate.format(timeFormat) : (placeholder || t('defaultPlaceholder', { ns: 'time' }))
return (
<PortalToFollowElem
<Popover
open={isOpen}
onOpenChange={setIsOpen}
placement="bottom-end"
onOpenChange={handleOpenChange}
>
<PortalToFollowElemTrigger className={triggerWrapClassName}>
{renderTrigger
? (
renderTrigger({
value: normalizedValue,
selectedDate,
isOpen,
handleClear,
handleClickTrigger,
}))
<PopoverTrigger
nativeButton={false}
className={triggerWrapClassName}
render={renderTrigger
? renderTrigger({
value: normalizedValue,
selectedDate,
isOpen,
handleClear,
handleClickTrigger,
})
: (
<div
className="group flex w-[252px] cursor-pointer items-center gap-x-0.5 rounded-lg bg-components-input-bg-normal px-2 py-1 hover:bg-state-base-hover-alt"
@@ -242,8 +232,13 @@ const DatePicker = ({
<span className={cn('i-ri-close-circle-fill hidden h-4 w-4 shrink-0 text-text-quaternary', (displayValue || (isOpen && selectedDate)) && 'group-hover:inline-block hover:text-text-secondary')} onClick={handleClear} data-testid="date-picker-clear-button" />
</div>
)}
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className={popupZIndexClassname}>
/>
<PopoverContent
placement="bottom-end"
sideOffset={0}
className={popupZIndexClassname}
popupClassName="border-none bg-transparent shadow-none"
>
<div className="mt-1 w-[252px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg shadow-shadow-shadow-5">
{/* Header */}
{view === ViewType.date
@@ -319,8 +314,8 @@ const DatePicker = ({
)
}
</div>
</PortalToFollowElemContent>
</PortalToFollowElem>
</PopoverContent>
</Popover>
)
}

16
web/app/components/base/date-and-time-picker/time-picker/__tests__/index.spec.tsx
View File

@@ -3,6 +3,20 @@ import { fireEvent, render, screen, within } from '@testing-library/react'
import dayjs, { isDayjsObject } from '../../utils/dayjs'
import TimePicker from '../index'
vi.mock('@langgenius/dify-ui/popover', async () => await import('@/__mocks__/base-ui-popover'))
vi.mock('@langgenius/dify-ui/button', () => ({
Button: ({ children, onClick, disabled, className }: {
children?: React.ReactNode
onClick?: () => void
disabled?: boolean
className?: string
}) => (
<button onClick={onClick as (() => void) | undefined} disabled={disabled as boolean | undefined} className={className as string | undefined}>
{children}
</button>
),
}))
// Mock scrollIntoView since the test DOM runtime doesn't implement it
beforeAll(() => {
Element.prototype.scrollIntoView = vi.fn()
@@ -106,7 +120,7 @@ describe('TimePicker', () => {
expect(input)!.toHaveValue('')
fireEvent.mouseDown(document.body)
expect(input)!.toHaveValue('')
expect(input)!.toHaveValue('10:00 AM')
})
it('should call onClear when clear is clicked while picker is closed', () => {

101
web/app/components/base/date-and-time-picker/time-picker/index.tsx
View File

@@ -1,14 +1,10 @@
import type { Dayjs } from 'dayjs'
import type { TimePickerProps } from '../types'
import { cn } from '@langgenius/dify-ui/cn'
import { Popover, PopoverContent, PopoverTrigger } from '@langgenius/dify-ui/popover'
import * as React from 'react'
import { useCallback, useEffect, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'
import {
PortalToFollowElem,
PortalToFollowElemContent,
PortalToFollowElemTrigger,
} from '@/app/components/base/portal-to-follow-elem'
import TimezoneLabel from '@/app/components/base/timezone-label'
import { Period } from '../types'
import dayjs, {
@@ -43,31 +39,20 @@ const TimePicker = ({
}: TimePickerProps) => {
const { t } = useTranslation()
const [isOpen, setIsOpen] = useState(false)
const containerRef = useRef<HTMLDivElement>(null)
const isInitial = useRef(true)
const isInitialRef = useRef(true)
// Initialize selectedTime
const [selectedTime, setSelectedTime] = useState(() => {
return toDayjs(value, { timezone })
})
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
/* v8 ignore next 2 -- outside-click closing is handled by PortalToFollowElem; this local ref guard is a defensive fallback. */
if (containerRef.current && !containerRef.current.contains(event.target as Node))
setIsOpen(false)
}
document.addEventListener('mousedown', handleClickOutside)
return () => document.removeEventListener('mousedown', handleClickOutside)
}, [])
// Track previous values to avoid unnecessary updates
const prevValueRef = useRef(value)
const prevTimezoneRef = useRef(timezone)
useEffect(() => {
if (isInitial.current) {
isInitial.current = false
if (isInitialRef.current) {
isInitialRef.current = false
// Save initial values on first render
prevValueRef.current = value
prevTimezoneRef.current = timezone
@@ -91,6 +76,7 @@ const TimePicker = ({
if (!dayjsValue)
return
// eslint-disable-next-line react/set-state-in-effect -- value/timezone changes intentionally resync the internal selected time.
setSelectedTime(dayjsValue)
if (timezoneChanged && !valueChanged)
@@ -98,6 +84,7 @@ const TimePicker = ({
return
}
// eslint-disable-next-line react/set-state-in-effect -- value/timezone changes intentionally resync the internal selected time.
setSelectedTime((prev) => {
if (!isDayjsObject(prev))
return undefined
@@ -105,24 +92,30 @@ const TimePicker = ({
})
}, [timezone, value, onChange])
const handleClickTrigger = (e: React.MouseEvent) => {
e.stopPropagation()
if (isOpen) {
setIsOpen(false)
const syncSelectedTimeFromValue = useCallback(() => {
if (!value)
return
}
setIsOpen(true)
if (value) {
const dayjsValue = toDayjs(value, { timezone })
const needsUpdate = dayjsValue && (
!selectedTime
|| !isDayjsObject(selectedTime)
|| !dayjsValue.isSame(selectedTime, 'minute')
)
if (needsUpdate)
setSelectedTime(dayjsValue)
}
const dayjsValue = toDayjs(value, { timezone })
const needsUpdate = dayjsValue && (
!selectedTime
|| !isDayjsObject(selectedTime)
|| !dayjsValue.isSame(selectedTime, 'minute')
)
if (needsUpdate)
setSelectedTime(dayjsValue)
}, [selectedTime, timezone, value])
const handleOpenChange = useCallback((nextOpen: boolean) => {
setIsOpen(nextOpen)
if (nextOpen)
syncSelectedTimeFromValue()
}, [syncSelectedTimeFromValue])
const handleClickTrigger = (e: React.MouseEvent) => {
e.preventDefault()
e.stopPropagation()
handleOpenChange(!isOpen)
}
const handleClear = (e: React.MouseEvent) => {
@@ -132,7 +125,7 @@ const TimePicker = ({
onClear()
}
const handleTimeSelect = (hour: string, minute: string, period: Period) => {
const handleTimeSelect = useCallback((hour: string, minute: string, period: Period) => {
const periodAdjustedHour = to24Hour(hour, period)
const nextMinute = Number.parseInt(minute, 10)
setSelectedTime((prev) => {
@@ -145,7 +138,7 @@ const TimePicker = ({
.set('second', 0)
.set('millisecond', 0)
})
}
}, [timezone])
const getSafeTimeObject = useCallback(() => {
if (isDayjsObject(selectedTime))
@@ -156,17 +149,17 @@ const TimePicker = ({
const handleSelectHour = useCallback((hour: string) => {
const time = getSafeTimeObject()
handleTimeSelect(hour, time.minute().toString().padStart(2, '0'), time.format('A') as Period)
}, [getSafeTimeObject])
}, [getSafeTimeObject, handleTimeSelect])
const handleSelectMinute = useCallback((minute: string) => {
const time = getSafeTimeObject()
handleTimeSelect(getHourIn12Hour(time).toString().padStart(2, '0'), minute, time.format('A') as Period)
}, [getSafeTimeObject])
}, [getSafeTimeObject, handleTimeSelect])
const handleSelectPeriod = useCallback((period: Period) => {
const time = getSafeTimeObject()
handleTimeSelect(getHourIn12Hour(time).toString().padStart(2, '0'), time.minute().toString().padStart(2, '0'), period)
}, [getSafeTimeObject])
}, [getSafeTimeObject, handleTimeSelect])
const handleSelectCurrentTime = useCallback(() => {
const newDate = getDateWithTimezone({ timezone })
@@ -207,18 +200,19 @@ const TimePicker = ({
/>
)
return (
<PortalToFollowElem
<Popover
open={isOpen}
onOpenChange={setIsOpen}
placement={placement}
onOpenChange={handleOpenChange}
>
<PortalToFollowElemTrigger className={triggerFullWidth ? 'block! w-full' : undefined}>
{renderTrigger
? (renderTrigger({
<PopoverTrigger
nativeButton={false}
className={triggerFullWidth ? 'block! w-full' : undefined}
render={renderTrigger
? renderTrigger({
inputElem,
onClick: handleClickTrigger,
isOpen,
}))
})
: (
<div
className={cn(
@@ -236,8 +230,13 @@ const TimePicker = ({
<span className={cn('i-ri-close-circle-fill hidden h-4 w-4 shrink-0 text-text-quaternary', (displayValue || (isOpen && selectedTime)) && !notClearable && 'group-hover:inline-block hover:text-text-secondary')} role="button" aria-label={t('operation.clear', { ns: 'common' })} onClick={handleClear} />
</div>
)}
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className={cn('z-50', popupClassName)}>
/>
<PopoverContent
placement={placement}
sideOffset={0}
className={popupClassName}
popupClassName="border-none bg-transparent shadow-none"
>
<div className="mt-1 w-[252px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg shadow-shadow-shadow-5">
{/* Header */}
<Header title={title} />
@@ -258,8 +257,8 @@ const TimePicker = ({
/>
</div>
</PortalToFollowElemContent>
</PortalToFollowElem>
</PopoverContent>
</Popover>
)
}

4
web/app/components/base/date-and-time-picker/types.ts
View File

@@ -28,7 +28,7 @@ export type DatePickerProps = {
onChange: (date: Dayjs | undefined) => void
onClear: () => void
triggerWrapClassName?: string
renderTrigger?: (props: TriggerProps) => React.ReactNode
renderTrigger?: (props: TriggerProps) => React.ReactElement
minuteFilter?: (minutes: string[]) => string[]
popupZIndexClassname?: string
noConfirm?: boolean
@@ -62,7 +62,7 @@ export type TimePickerProps = {
placeholder?: string
onChange: (date: Dayjs | undefined) => void
onClear: () => void
renderTrigger?: (props: TriggerParams) => React.ReactNode
renderTrigger?: (props: TriggerParams) => React.ReactElement
title?: string
minuteFilter?: (minutes: string[]) => string[]
popupClassName?: string

9
web/app/components/base/features/new-feature-panel/file-upload/__tests__/setting-modal.spec.tsx
View File

@@ -61,7 +61,7 @@ describe('FileUploadSettings (setting-modal)', () => {
})
})
it('should call onOpen with toggle function when trigger is clicked', () => {
it('should call onOpen with true when trigger is clicked', () => {
const onOpen = vi.fn()
renderWithProvider(
<FileUploadSettings open={false} onOpen={onOpen}>
@@ -71,12 +71,7 @@ describe('FileUploadSettings (setting-modal)', () => {
fireEvent.click(screen.getByText('Upload Settings'))
expect(onOpen).toHaveBeenCalled()
// The toggle function should flip the open state
const toggleFn = onOpen.mock.calls[0]![0]
expect(typeof toggleFn).toBe('function')
expect(toggleFn(false)).toBe(true)
expect(toggleFn(true)).toBe(false)
expect(onOpen).toHaveBeenCalledWith(true)
})
it('should not call onOpen when disabled', () => {

43
web/app/components/base/features/new-feature-panel/file-upload/setting-modal.tsx
View File

@@ -1,16 +1,16 @@
'use client'
import type { OnFeaturesChange } from '@/app/components/base/features/types'
import {
Popover,
PopoverContent,
PopoverTrigger,
} from '@langgenius/dify-ui/popover'
import { memo } from 'react'
import SettingContent from '@/app/components/base/features/new-feature-panel/file-upload/setting-content'
import {
PortalToFollowElem,
PortalToFollowElemContent,
PortalToFollowElemTrigger,
} from '@/app/components/base/portal-to-follow-elem'
type FileUploadSettingsProps = {
open: boolean
onOpen: (state: any) => void
onOpen: (state: boolean) => void
onChange?: OnFeaturesChange
disabled?: boolean
children?: React.ReactNode
@@ -25,18 +25,27 @@ const FileUploadSettings = ({
imageUpload,
}: FileUploadSettingsProps) => {
return (
<PortalToFollowElem
<Popover
open={open}
onOpenChange={onOpen}
placement="left"
offset={{
mainAxis: 32,
onOpenChange={(nextOpen) => {
if (disabled)
return
onOpen(nextOpen)
}}
>
<PortalToFollowElemTrigger className="flex" onClick={() => !disabled && onOpen((open: boolean) => !open)}>
{children}
</PortalToFollowElemTrigger>
<PortalToFollowElemContent style={{ zIndex: 50 }}>
<PopoverTrigger
nativeButton={false}
render={(
<div className="flex">
{children}
</div>
)}
/>
<PopoverContent
placement="left"
sideOffset={32}
popupClassName="border-none bg-transparent shadow-none"
>
<div className="max-h-[calc(100vh-20px)] w-[360px] overflow-y-auto rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-4 shadow-2xl">
<SettingContent
imageUpload={imageUpload}
@@ -47,8 +56,8 @@ const FileUploadSettings = ({
}}
/>
</div>
</PortalToFollowElemContent>
</PortalToFollowElem>
</PopoverContent>
</Popover>
)
}
export default memo(FileUploadSettings)

78
web/app/components/base/features/new-feature-panel/text-to-speech/__tests__/voice-settings.spec.tsx
View File

@@ -1,38 +1,17 @@
import type { ReactNode } from 'react'
import type { Features } from '../../../types'
import { fireEvent, render, screen } from '@testing-library/react'
import { FeaturesProvider } from '../../../context'
import VoiceSettings from '../voice-settings'
vi.mock('@/app/components/base/portal-to-follow-elem', () => ({
PortalToFollowElem: ({
children,
placement,
offset,
}: {
children: React.ReactNode
placement?: string
offset?: { mainAxis?: number }
}) => (
<div
data-testid="voice-settings-portal"
data-placement={placement}
data-main-axis={offset?.mainAxis}
>
{children}
</div>
),
PortalToFollowElemTrigger: ({
children,
onClick,
}: {
children: React.ReactNode
onClick?: () => void
}) => (
<div data-testid="voice-settings-trigger" onClick={onClick}>
{children}
</div>
),
PortalToFollowElemContent: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
vi.mock('@langgenius/dify-ui/popover', () => import('@/__mocks__/base-ui-popover'))
vi.mock('@langgenius/dify-ui/toast', () => ({
toast: {
success: vi.fn(),
error: vi.fn(),
warning: vi.fn(),
info: vi.fn(),
},
}))
vi.mock('@/next/navigation', () => ({
@@ -46,6 +25,25 @@ vi.mock('@/service/use-apps', () => ({
}),
}))
vi.mock('@langgenius/dify-ui/switch', () => ({
Switch: ({
checked,
onCheckedChange,
...props
}: {
checked?: boolean
onCheckedChange?: (checked: boolean) => void
}) => (
<button
type="button"
data-testid="switch"
data-checked={String(checked)}
onClick={() => onCheckedChange?.(!checked)}
{...props}
/>
),
}))
const defaultFeatures: Features = {
moreLikeThis: { enabled: false },
opening: { enabled: false },
@@ -58,7 +56,7 @@ const defaultFeatures: Features = {
annotationReply: { enabled: false },
}
const renderWithProvider = (ui: React.ReactNode) => {
const renderWithProvider = (ui: ReactNode) => {
return render(
<FeaturesProvider features={defaultFeatures}>
{ui}
@@ -101,12 +99,7 @@ describe('VoiceSettings', () => {
fireEvent.click(screen.getByText('Settings'))
expect(onOpen).toHaveBeenCalled()
// The toggle function should flip the open state
const toggleFn = onOpen.mock.calls[0]![0]
expect(typeof toggleFn).toBe('function')
expect(toggleFn(false)).toBe(true)
expect(toggleFn(true)).toBe(false)
expect(onOpen).toHaveBeenCalledWith(true)
})
it('should not call onOpen when disabled and trigger is clicked', () => {
@@ -137,16 +130,13 @@ describe('VoiceSettings', () => {
it('should use top placement and mainAxis 4 when placementLeft is false', () => {
renderWithProvider(
<VoiceSettings open={false} onOpen={vi.fn()} placementLeft={false}>
<VoiceSettings open={true} onOpen={vi.fn()} placementLeft={false}>
<button>Settings</button>
</VoiceSettings>,
)
const portal = screen.getAllByTestId('voice-settings-portal')
.find(item => item.hasAttribute('data-main-axis'))
expect(portal).toBeDefined()
expect(portal)!.toHaveAttribute('data-placement', 'top')
expect(portal)!.toHaveAttribute('data-main-axis', '4')
const content = screen.getByTestId('popover-content')
expect(content).toHaveAttribute('data-placement', 'top')
expect(content).toHaveAttribute('data-side-offset', '4')
})
})

43
web/app/components/base/features/new-feature-panel/text-to-speech/voice-settings.tsx
View File

@@ -1,16 +1,16 @@
'use client'
import type { OnFeaturesChange } from '@/app/components/base/features/types'
import {
Popover,
PopoverContent,
PopoverTrigger,
} from '@langgenius/dify-ui/popover'
import { memo } from 'react'
import ParamConfigContent from '@/app/components/base/features/new-feature-panel/text-to-speech/param-config-content'
import {
PortalToFollowElem,
PortalToFollowElemContent,
PortalToFollowElemTrigger,
} from '@/app/components/base/portal-to-follow-elem'
type VoiceSettingsProps = {
open: boolean
onOpen: (state: any) => void
onOpen: (state: boolean) => void
onChange?: OnFeaturesChange
disabled?: boolean
children?: React.ReactNode
@@ -25,23 +25,32 @@ const VoiceSettings = ({
placementLeft = true,
}: VoiceSettingsProps) => {
return (
<PortalToFollowElem
<Popover
open={open}
onOpenChange={onOpen}
placement={placementLeft ? 'left' : 'top'}
offset={{
mainAxis: placementLeft ? 32 : 4,
onOpenChange={(nextOpen) => {
if (disabled)
return
onOpen(nextOpen)
}}
>
<PortalToFollowElemTrigger className="flex" onClick={() => !disabled && onOpen((open: boolean) => !open)}>
{children}
</PortalToFollowElemTrigger>
<PortalToFollowElemContent style={{ zIndex: 50 }}>
<PopoverTrigger
nativeButton={false}
render={(
<div className="flex">
{children}
</div>
)}
/>
<PopoverContent
placement={placementLeft ? 'left' : 'top'}
sideOffset={placementLeft ? 32 : 4}
popupClassName="border-none bg-transparent shadow-none"
>
<div className="w-[360px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-4 shadow-2xl">
<ParamConfigContent onClose={() => onOpen(false)} onChange={onChange} />
</div>
</PortalToFollowElemContent>
</PortalToFollowElem>
</PopoverContent>
</Popover>
)
}
export default memo(VoiceSettings)

28
web/app/components/base/file-uploader/file-from-link-or-local/index.tsx
View File

@@ -1,17 +1,17 @@
import type { FileUpload } from '@/app/components/base/features/types'
import { Button } from '@langgenius/dify-ui/button'
import { cn } from '@langgenius/dify-ui/cn'
import {
Popover,
PopoverContent,
PopoverTrigger,
} from '@langgenius/dify-ui/popover'
import { RiUploadCloud2Line } from '@remixicon/react'
import {
memo,
useState,
} from 'react'
import { useTranslation } from 'react-i18next'
import {
PortalToFollowElem,
PortalToFollowElemContent,
PortalToFollowElemTrigger,
} from '@/app/components/base/portal-to-follow-elem'
import { FILE_URL_REGEX } from '../constants'
import FileInput from '../file-input'
import { useFile } from '../hooks'
@@ -54,16 +54,16 @@ const FileFromLinkOrLocal = ({
}
return (
<PortalToFollowElem
placement="top"
offset={4}
<Popover
open={open}
onOpenChange={setOpen}
>
<PortalToFollowElemTrigger onClick={() => setOpen(v => !v)} asChild>
{trigger(open)}
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className="z-1001">
<PopoverTrigger render={trigger(open) as React.ReactElement} />
<PopoverContent
placement="top"
sideOffset={4}
popupClassName="border-none bg-transparent shadow-none"
>
<div className="w-[280px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-3 shadow-lg">
{
showFromLink && (
@@ -126,8 +126,8 @@ const FileFromLinkOrLocal = ({
)
}
</div>
</PortalToFollowElemContent>
</PortalToFollowElem>
</PopoverContent>
</Popover>
)
}

56
web/app/components/base/image-uploader/chat-image-uploader.tsx
View File

@@ -1,13 +1,13 @@
import type { FC } from 'react'
import type { ImageFile, VisionSettings } from '@/types/app'
import { cn } from '@langgenius/dify-ui/cn'
import {
Popover,
PopoverContent,
PopoverTrigger,
} from '@langgenius/dify-ui/popover'
import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import {
PortalToFollowElem,
PortalToFollowElemContent,
PortalToFollowElemTrigger,
} from '@/app/components/base/portal-to-follow-elem'
import { TransferMethod } from '@/types/app'
import ImageLinkInput from './image-link-input'
import Uploader from './uploader'
@@ -63,29 +63,31 @@ const UploaderButton: FC<UploaderButtonProps> = ({
const closePopover = () => setOpen(false)
const handleToggle = () => {
if (disabled)
return
setOpen(v => !v)
}
return (
<PortalToFollowElem
<Popover
open={open}
onOpenChange={setOpen}
placement="top-start"
onOpenChange={(nextOpen) => {
if (disabled)
return
setOpen(nextOpen)
}}
>
<PortalToFollowElemTrigger onClick={handleToggle}>
<button
type="button"
disabled={disabled}
className="relative flex h-8 w-8 items-center justify-center rounded-lg enabled:hover:bg-gray-100 disabled:cursor-not-allowed"
>
<span className="i-custom-vender-line-images-image-plus h-4 w-4 text-gray-500" />
</button>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className="z-50">
<PopoverTrigger
render={(
<button
type="button"
disabled={disabled}
className="relative flex h-8 w-8 items-center justify-center rounded-lg enabled:hover:bg-gray-100 disabled:cursor-not-allowed"
>
<span className="i-custom-vender-line-images-image-plus h-4 w-4 text-gray-500" />
</button>
)}
/>
<PopoverContent
placement="top-start"
sideOffset={0}
popupClassName="border-none bg-transparent shadow-none"
>
<div className="w-[260px] rounded-lg border-[0.5px] border-gray-200 bg-white p-2 shadow-lg">
<ImageLinkInput onUpload={handleUpload} disabled={disabled} />
{!!hasUploadFromLocal && (
@@ -115,8 +117,8 @@ const UploaderButton: FC<UploaderButtonProps> = ({
</>
)}
</div>
</PortalToFollowElemContent>
</PortalToFollowElem>
</PopoverContent>
</Popover>
)
}

59
web/app/components/base/image-uploader/text-generation-image-uploader.tsx
View File

@@ -1,5 +1,10 @@
import type { FC } from 'react'
import type { ImageFile, VisionSettings } from '@/types/app'
import {
Popover,
PopoverContent,
PopoverTrigger,
} from '@langgenius/dify-ui/popover'
import {
Fragment,
useEffect,
@@ -8,11 +13,6 @@ import {
import { useTranslation } from 'react-i18next'
import { Link03 } from '@/app/components/base/icons/src/vender/line/general'
import { ImagePlus } from '@/app/components/base/icons/src/vender/line/images'
import {
PortalToFollowElem,
PortalToFollowElemContent,
PortalToFollowElemTrigger,
} from '@/app/components/base/portal-to-follow-elem'
import { TransferMethod } from '@/types/app'
import { useImageFiles } from './hooks'
import ImageLinkInput from './image-link-input'
@@ -35,35 +35,38 @@ const PasteImageLinkButton: FC<PasteImageLinkButtonProps> = ({
onUpload(imageFile)
}
const handleToggle = () => {
if (disabled)
return
setOpen(v => !v)
}
return (
<PortalToFollowElem
<Popover
open={open}
onOpenChange={setOpen}
placement="top-start"
onOpenChange={(nextOpen) => {
if (disabled)
return
setOpen(nextOpen)
}}
>
<PortalToFollowElemTrigger onClick={handleToggle}>
<div className={`
relative flex h-8 items-center justify-center rounded-lg bg-components-button-tertiary-bg px-3 text-xs text-text-tertiary hover:bg-components-button-tertiary-bg-hover
${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}
`}
>
<Link03 className="mr-2 h-4 w-4" />
{t('imageUploader.pasteImageLink', { ns: 'common' })}
</div>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className="z-10">
<PopoverTrigger
render={(
<div
className={`
relative flex h-8 items-center justify-center rounded-lg bg-components-button-tertiary-bg px-3 text-xs text-text-tertiary hover:bg-components-button-tertiary-bg-hover
${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}
`}
>
<Link03 className="mr-2 h-4 w-4" />
{t('imageUploader.pasteImageLink', { ns: 'common' })}
</div>
)}
/>
<PopoverContent
placement="top-start"
sideOffset={0}
popupClassName="border-none bg-transparent shadow-none"
>
<div className="w-[320px] rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg p-2 shadow-lg">
<ImageLinkInput onUpload={handleUpload} />
</div>
</PortalToFollowElemContent>
</PortalToFollowElem>
</PopoverContent>
</Popover>
)
}

11
web/app/components/base/portal-to-follow-elem/index.tsx
View File

@@ -148,14 +148,17 @@ export const PortalToFollowElemTrigger = (
}: React.HTMLProps<HTMLElement> & { ref?: React.RefObject<HTMLElement | null>, asChild?: boolean },
) => {
const context = usePortalToFollowElemContext()
const childrenRef = (children as any).props?.ref
const childElement = React.isValidElement<{ ref?: React.Ref<HTMLElement | null> }>(children)
? children
: null
const childrenRef = childElement?.props.ref
const ref = useMergeRefs([context.refs.setReference, propRef, childrenRef])
// `asChild` allows the user to pass any element as the anchor
if (asChild && React.isValidElement(children)) {
const childProps = (children.props ?? {}) as Record<string, unknown>
if (asChild && childElement) {
const childProps = (childElement.props ?? {}) as Record<string, unknown>
return React.cloneElement(
children,
childElement,
context.getReferenceProps({
ref,
...props,

41
web/app/components/base/prompt-editor/plugins/context-block/__tests__/component.spec.tsx
View File

@@ -2,6 +2,9 @@ import { act, render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { UPDATE_DATASETS_EVENT_EMITTER } from '../../../constants'
import ContextBlockComponent from '../component'
vi.mock('@langgenius/dify-ui/popover', async () => await import('@/__mocks__/base-ui-popover'))
// Mock the hooks used by ContextBlockComponent
const mockUseSelectOrDelete = vi.fn()
const mockUseTrigger = vi.fn()
@@ -223,6 +226,21 @@ describe('ContextBlockComponent', () => {
})
describe('User Interactions', () => {
it('should keep the popover closed when the trigger prevents the default click', async () => {
const user = userEvent.setup()
const { triggerSetOpen } = defaultSetup()
render(
<ContextBlockComponent nodeKey="test-key" onAddContext={vi.fn()} />,
)
await user.click(screen.getByTestId('popover-trigger'))
expect(triggerSetOpen).not.toHaveBeenCalled()
expect(
screen.queryByText('common.promptEditor.context.modal.add'),
).not.toBeInTheDocument()
})
it('should call onAddContext when add button is clicked', async () => {
defaultSetup({ open: true })
const handleAddContext = vi.fn()
@@ -345,6 +363,29 @@ describe('ContextBlockComponent', () => {
// Original datasets still there
expect(screen.getByText('Dataset A')).toBeInTheDocument()
})
it('should ignore string events from the event emitter', () => {
defaultSetup({ open: true })
let subscriptionCallback: (v: Record<string, unknown> | string) => void = () => { }
mockUseSubscription.mockImplementation((cb: (v: Record<string, unknown> | string) => void) => {
subscriptionCallback = cb
})
render(
<ContextBlockComponent
nodeKey="test-key"
datasets={mockDatasets}
onAddContext={vi.fn()}
/>,
)
act(() => {
subscriptionCallback('ignore-me')
})
expect(screen.getByText('Dataset A')).toBeInTheDocument()
expect(screen.getByText('Dataset B')).toBeInTheDocument()
})
})
describe('Edge Cases', () => {

53
web/app/components/base/prompt-editor/plugins/context-block/component.tsx
View File

@@ -1,13 +1,10 @@
import type { FC } from 'react'
import type { Dataset } from './index'
import type { EventEmitterValue } from '@/context/event-emitter'
import { Popover, PopoverContent, PopoverTrigger } from '@langgenius/dify-ui/popover'
import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import {
PortalToFollowElem,
PortalToFollowElemContent,
PortalToFollowElemTrigger,
} from '@/app/components/base/portal-to-follow-elem'
import { useEventEmitterContextContext } from '@/context/event-emitter'
import { UPDATE_DATASETS_EVENT_EMITTER } from '../../constants'
import { useSelectOrDelete, useTrigger } from '../../hooks'
@@ -32,9 +29,12 @@ const ContextBlockComponent: FC<ContextBlockComponentProps> = ({
const { eventEmitter } = useEventEmitterContextContext()
const [localDatasets, setLocalDatasets] = useState<Dataset[]>(datasets)
eventEmitter?.useSubscription((v: any) => {
if (v?.type === UPDATE_DATASETS_EVENT_EMITTER)
setLocalDatasets(v.payload)
eventEmitter?.useSubscription((event?: EventEmitterValue) => {
if (typeof event === 'string')
return
if (event?.type === UPDATE_DATASETS_EVENT_EMITTER && Array.isArray(event.payload))
setLocalDatasets(event.payload as Dataset[])
})
return (
@@ -49,24 +49,31 @@ const ContextBlockComponent: FC<ContextBlockComponentProps> = ({
<span className="mr-1 i-custom-vender-solid-files-file-05 h-[14px] w-[14px]" data-testid="file-icon" />
<div className="mr-1 text-xs font-medium">{t('promptEditor.context.item.title', { ns: 'common' })}</div>
{!canNotAddContext && (
<PortalToFollowElem
<Popover
open={open}
onOpenChange={setOpen}
placement="bottom-end"
offset={{
mainAxis: 3,
alignmentAxis: -147,
}}
>
<PortalToFollowElemTrigger ref={triggerRef}>
<div className={`
<PopoverTrigger
nativeButton={false}
render={(
<div
className={`
flex h-[18px] w-[18px] cursor-pointer items-center justify-center rounded text-[11px] font-semibold
${open ? 'bg-[#6938EF] text-white' : 'bg-white/50 group-hover:bg-white group-hover:shadow-xs'}
`}>
{localDatasets.length}
</div>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent style={{ zIndex: 100 }}>
`}
ref={triggerRef}
onClick={e => e.preventDefault()}
>
{localDatasets.length}
</div>
)}
/>
<PopoverContent
placement="bottom-end"
sideOffset={3}
alignOffset={-147}
popupClassName="border-none bg-transparent shadow-none"
>
<div className="w-[360px] rounded-xl bg-white shadow-lg">
<div className="p-4">
<div className="mb-2 text-xs font-medium text-gray-500">
@@ -95,8 +102,8 @@ const ContextBlockComponent: FC<ContextBlockComponentProps> = ({
{t('promptEditor.context.modal.footer', { ns: 'common' })}
</div>
</div>
</PortalToFollowElemContent>
</PortalToFollowElem>
</PopoverContent>
</Popover>
)}
</div>

43
web/app/components/base/prompt-editor/plugins/history-block/__tests__/component.spec.tsx
View File

@@ -6,6 +6,8 @@ import { UPDATE_HISTORY_EVENT_EMITTER } from '../../../constants'
import HistoryBlockComponent from '../component'
import { DELETE_HISTORY_BLOCK_COMMAND } from '../index'
vi.mock('@langgenius/dify-ui/popover', async () => await import('@/__mocks__/base-ui-popover'))
type HistoryEventPayload = {
type?: string
payload?: RoleName
@@ -109,6 +111,24 @@ describe('HistoryBlockComponent', () => {
expect(screen.getByText('common.promptEditor.history.modal.assistant')).toBeInTheDocument()
})
it('should keep the popover closed when the trigger prevents the default click', async () => {
const user = userEvent.setup()
const setOpen = vi.fn() as unknown as Dispatch<SetStateAction<boolean>>
mockUseTrigger.mockReturnValue(createTriggerHookReturn(false, setOpen))
render(
<HistoryBlockComponent
nodeKey="history-node-trigger"
onEditRole={vi.fn()}
/>,
)
await user.click(screen.getByTestId('popover-trigger'))
expect(setOpen).not.toHaveBeenCalled()
expect(screen.queryByText('common.promptEditor.history.modal.edit')).not.toBeInTheDocument()
})
it('should call onEditRole when edit action is clicked', async () => {
const user = userEvent.setup()
const onEditRole = vi.fn()
@@ -188,6 +208,29 @@ describe('HistoryBlockComponent', () => {
expect(screen.getByText('kept-assistant')).toBeInTheDocument()
})
it('should ignore string events from the event emitter', () => {
mockUseTrigger.mockReturnValue(createTriggerHookReturn(true))
render(
<HistoryBlockComponent
nodeKey="history-node-6-string"
roleName={createRoleName({
user: 'kept-user',
assistant: 'kept-assistant',
})}
onEditRole={vi.fn()}
/>,
)
expect(subscribedHandler).not.toBeNull()
act(() => {
subscribedHandler?.('ignore-me' as unknown as HistoryEventPayload)
})
expect(screen.getByText('kept-user')).toBeInTheDocument()
expect(screen.getByText('kept-assistant')).toBeInTheDocument()
})
it('should render when event emitter is unavailable', () => {
mockUseEventEmitterContextContext.mockReturnValue({
eventEmitter: undefined,

52
web/app/components/base/prompt-editor/plugins/history-block/component.tsx
View File

@@ -1,16 +1,13 @@
import type { FC } from 'react'
import type { RoleName } from './index'
import type { EventEmitterValue } from '@/context/event-emitter'
import { Popover, PopoverContent, PopoverTrigger } from '@langgenius/dify-ui/popover'
import {
RiMoreFill,
} from '@remixicon/react'
import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import { MessageClockCircle } from '@/app/components/base/icons/src/vender/solid/general'
import {
PortalToFollowElem,
PortalToFollowElemContent,
PortalToFollowElemTrigger,
} from '@/app/components/base/portal-to-follow-elem'
import { useEventEmitterContextContext } from '@/context/event-emitter'
import { UPDATE_HISTORY_EVENT_EMITTER } from '../../constants'
import { useSelectOrDelete, useTrigger } from '../../hooks'
@@ -33,9 +30,12 @@ const HistoryBlockComponent: FC<HistoryBlockComponentProps> = ({
const { eventEmitter } = useEventEmitterContextContext()
const [localRoleName, setLocalRoleName] = useState<RoleName>(roleName)
eventEmitter?.useSubscription((v: any) => {
if (v?.type === UPDATE_HISTORY_EVENT_EMITTER)
setLocalRoleName(v.payload)
eventEmitter?.useSubscription((event?: EventEmitterValue) => {
if (typeof event === 'string')
return
if (event?.type === UPDATE_HISTORY_EVENT_EMITTER && event.payload && typeof event.payload === 'object')
setLocalRoleName(event.payload as RoleName)
})
return (
@@ -49,25 +49,31 @@ const HistoryBlockComponent: FC<HistoryBlockComponentProps> = ({
>
<MessageClockCircle className="mr-1 h-[14px] w-[14px]" />
<div className="mr-1 text-xs font-medium">{t('promptEditor.history.item.title', { ns: 'common' })}</div>
<PortalToFollowElem
<Popover
open={open}
onOpenChange={setOpen}
placement="top-end"
offset={{
mainAxis: 4,
alignmentAxis: -148,
}}
>
<PortalToFollowElemTrigger ref={triggerRef}>
<div className={`
<PopoverTrigger
nativeButton={false}
render={(
<div
className={`
flex h-[18px] w-[18px] cursor-pointer items-center justify-center rounded
${open ? 'bg-[#DD2590] text-white' : 'bg-white/50 group-hover:bg-white group-hover:shadow-xs'}
`}
>
<RiMoreFill className="h-3 w-3" />
</div>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent style={{ zIndex: 100 }}>
ref={triggerRef}
onClick={e => e.preventDefault()}
>
<RiMoreFill className="h-3 w-3" />
</div>
)}
/>
<PopoverContent
placement="top-end"
sideOffset={4}
alignOffset={-148}
popupClassName="border-none bg-transparent shadow-none"
>
<div className="w-[360px] rounded-xl bg-white shadow-lg">
<div className="p-4">
<div className="mb-2 text-xs font-medium text-gray-500">{t('promptEditor.history.modal.title', { ns: 'common' })}</div>
@@ -87,8 +93,8 @@ const HistoryBlockComponent: FC<HistoryBlockComponentProps> = ({
{t('promptEditor.history.modal.edit', { ns: 'common' })}
</div>
</div>
</PortalToFollowElemContent>
</PortalToFollowElem>
</PopoverContent>
</Popover>
</div>
)
}

78
web/app/components/datasets/common/document-picker/__tests__/index.spec.tsx
View File

@@ -5,34 +5,7 @@ import * as React from 'react'
import { ChunkingMode, DataSourceType } from '@/models/datasets'
import DocumentPicker from '../index'
// Mock portal-to-follow-elem - always render content for testing
vi.mock('@/app/components/base/portal-to-follow-elem', () => ({
PortalToFollowElem: ({ children, open }: {
children: React.ReactNode
open?: boolean
}) => (
<div data-testid="portal-elem" data-open={String(open || false)}>
{children}
</div>
),
PortalToFollowElemTrigger: ({ children, onClick }: {
children: React.ReactNode
onClick?: () => void
}) => (
<div data-testid="portal-trigger" onClick={onClick}>
{children}
</div>
),
// Always render content to allow testing document selection
PortalToFollowElemContent: ({ children, className }: {
children: React.ReactNode
className?: string
}) => (
<div data-testid="portal-content" className={className}>
{children}
</div>
),
}))
vi.mock('@langgenius/dify-ui/popover', () => import('@/__mocks__/base-ui-popover'))
// Mock useDocumentList hook with controllable return value
let mockDocumentListData: { data: SimpleDocumentDetail[] } | undefined
@@ -152,6 +125,10 @@ const renderComponent = (props: Partial<React.ComponentProps<typeof DocumentPick
}
}
const openPopover = () => {
fireEvent.click(screen.getByTestId('popover-trigger'))
}
describe('DocumentPicker', () => {
beforeEach(() => {
vi.clearAllMocks()
@@ -165,7 +142,7 @@ describe('DocumentPicker', () => {
it('should render without crashing', () => {
renderComponent()
expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
expect(screen.getByTestId('popover')).toBeInTheDocument()
})
it('should render document name when provided', () => {
@@ -273,7 +250,7 @@ describe('DocumentPicker', () => {
onChange,
})
expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
expect(screen.getByTestId('popover')).toBeInTheDocument()
})
it('should handle value with all fields', () => {
@@ -318,13 +295,13 @@ describe('DocumentPicker', () => {
it('should initialize with popup closed', () => {
renderComponent()
expect(screen.getByTestId('portal-elem')).toHaveAttribute('data-open', 'false')
expect(screen.getByTestId('popover')).toHaveAttribute('data-open', 'false')
})
it('should open popup when trigger is clicked', () => {
renderComponent()
const trigger = screen.getByTestId('portal-trigger')
const trigger = screen.getByTestId('popover-trigger')
fireEvent.click(trigger)
// Verify click handler is called
@@ -430,7 +407,7 @@ describe('DocumentPicker', () => {
)
// The component should use the new callback
expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
expect(screen.getByTestId('popover')).toBeInTheDocument()
})
it('should memoize handleChange callback with useCallback', () => {
@@ -440,7 +417,7 @@ describe('DocumentPicker', () => {
renderComponent({ onChange })
// Verify component renders correctly, callback memoization is internal
expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
expect(screen.getByTestId('popover')).toBeInTheDocument()
})
})
@@ -518,7 +495,7 @@ describe('DocumentPicker', () => {
it('should toggle popup when trigger is clicked', () => {
renderComponent()
const trigger = screen.getByTestId('portal-trigger')
const trigger = screen.getByTestId('popover-trigger')
fireEvent.click(trigger)
// Trigger click should be handled
@@ -591,7 +568,7 @@ describe('DocumentPicker', () => {
renderComponent()
// When loading, component should still render without crashing
expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
expect(screen.getByTestId('popover')).toBeInTheDocument()
})
it('should fetch documents on mount', () => {
@@ -611,7 +588,7 @@ describe('DocumentPicker', () => {
renderComponent()
// Component should render without crashing
expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
expect(screen.getByTestId('popover')).toBeInTheDocument()
})
it('should handle undefined data response', () => {
@@ -620,7 +597,7 @@ describe('DocumentPicker', () => {
renderComponent()
// Should not crash
expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
expect(screen.getByTestId('popover')).toBeInTheDocument()
})
})
@@ -732,13 +709,13 @@ describe('DocumentPicker', () => {
renderComponent()
// Should not crash
expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
expect(screen.getByTestId('popover')).toBeInTheDocument()
})
it('should handle rapid toggle clicks', () => {
renderComponent()
const trigger = screen.getByTestId('portal-trigger')
const trigger = screen.getByTestId('popover-trigger')
// Rapid clicks
fireEvent.click(trigger)
@@ -795,7 +772,7 @@ describe('DocumentPicker', () => {
renderComponent()
// Should not crash
expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
expect(screen.getByTestId('popover')).toBeInTheDocument()
})
it('should handle document list mapping with various data_source_detail_dict states', () => {
@@ -819,7 +796,7 @@ describe('DocumentPicker', () => {
renderComponent()
// Should not crash during mapping
expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
expect(screen.getByTestId('popover')).toBeInTheDocument()
})
})
@@ -829,13 +806,13 @@ describe('DocumentPicker', () => {
it('should handle empty datasetId', () => {
renderComponent({ datasetId: '' })
expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
expect(screen.getByTestId('popover')).toBeInTheDocument()
})
it('should handle UUID format datasetId', () => {
renderComponent({ datasetId: '123e4567-e89b-12d3-a456-426614174000' })
expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
expect(screen.getByTestId('popover')).toBeInTheDocument()
})
})
@@ -926,6 +903,7 @@ describe('DocumentPicker', () => {
const onChange = vi.fn()
renderComponent({ onChange })
openPopover()
fireEvent.click(screen.getByText('Document 2'))
@@ -939,6 +917,7 @@ describe('DocumentPicker', () => {
mockDocumentListData = { data: docs }
renderComponent()
openPopover()
// Documents should be rendered in the list
expect(screen.getByText('Document 1')).toBeInTheDocument()
@@ -978,14 +957,14 @@ describe('DocumentPicker', () => {
// The mapping: d.data_source_detail_dict?.upload_file?.extension || ''
// Should extract 'pdf' from the document
expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
expect(screen.getByTestId('popover')).toBeInTheDocument()
})
it('should render trigger with SearchInput integration', () => {
renderComponent()
// The trigger is always rendered
expect(screen.getByTestId('portal-trigger')).toBeInTheDocument()
expect(screen.getByTestId('popover-trigger')).toBeInTheDocument()
})
it('should integrate FileIcon component', () => {
@@ -1001,7 +980,7 @@ describe('DocumentPicker', () => {
})
// FileIcon should render an SVG icon for the file extension
const trigger = screen.getByTestId('portal-trigger')
const trigger = screen.getByTestId('popover-trigger')
expect(trigger.querySelector('svg')).toBeInTheDocument()
})
})
@@ -1010,9 +989,10 @@ describe('DocumentPicker', () => {
describe('Visual States', () => {
it('should render portal content for document selection', () => {
renderComponent()
openPopover()
// Portal content is rendered in our mock for testing
expect(screen.getByTestId('portal-content')).toBeInTheDocument()
// Popover content is rendered after opening the trigger in our mock
expect(screen.getByTestId('popover-content')).toBeInTheDocument()
})
})
})

118
web/app/components/datasets/common/document-picker/__tests__/preview-document-picker.spec.tsx
View File

@@ -3,34 +3,7 @@ import { fireEvent, render, screen } from '@testing-library/react'
import * as React from 'react'
import PreviewDocumentPicker from '../preview-document-picker'
// Mock portal-to-follow-elem - always render content for testing
vi.mock('@/app/components/base/portal-to-follow-elem', () => ({
PortalToFollowElem: ({ children, open }: {
children: React.ReactNode
open?: boolean
}) => (
<div data-testid="portal-elem" data-open={String(open || false)}>
{children}
</div>
),
PortalToFollowElemTrigger: ({ children, onClick }: {
children: React.ReactNode
onClick?: () => void
}) => (
<div data-testid="portal-trigger" onClick={onClick}>
{children}
</div>
),
// Always render content to allow testing document selection
PortalToFollowElemContent: ({ children, className }: {
children: React.ReactNode
className?: string
}) => (
<div data-testid="portal-content" className={className}>
{children}
</div>
),
}))
vi.mock('@langgenius/dify-ui/popover', () => import('@/__mocks__/base-ui-popover'))
// Factory function to create mock DocumentItem
const createMockDocumentItem = (overrides: Partial<DocumentItem> = {}): DocumentItem => ({
@@ -67,6 +40,10 @@ const renderComponent = (props: Partial<React.ComponentProps<typeof PreviewDocum
}
}
const openPopover = () => {
fireEvent.click(screen.getByTestId('popover-trigger'))
}
describe('PreviewDocumentPicker', () => {
beforeEach(() => {
vi.clearAllMocks()
@@ -77,7 +54,7 @@ describe('PreviewDocumentPicker', () => {
it('should render without crashing', () => {
renderComponent()
expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
expect(screen.getByTestId('popover')).toBeInTheDocument()
})
it('should render document name from value prop', () => {
@@ -110,7 +87,7 @@ describe('PreviewDocumentPicker', () => {
files: [], // Use empty files to avoid duplicate icons
})
const trigger = screen.getByTestId('portal-trigger')
const trigger = screen.getByTestId('popover-trigger')
expect(trigger.querySelector('svg')).toBeInTheDocument()
})
@@ -120,7 +97,7 @@ describe('PreviewDocumentPicker', () => {
files: [], // Use empty files to avoid duplicate icons
})
const trigger = screen.getByTestId('portal-trigger')
const trigger = screen.getByTestId('popover-trigger')
expect(trigger.querySelector('svg')).toBeInTheDocument()
})
})
@@ -131,22 +108,21 @@ describe('PreviewDocumentPicker', () => {
const props = createDefaultProps()
render(<PreviewDocumentPicker {...props} />)
expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
expect(screen.getByTestId('popover')).toBeInTheDocument()
})
it('should apply className to trigger element', () => {
renderComponent({ className: 'custom-class' })
const trigger = screen.getByTestId('portal-trigger')
const innerDiv = trigger.querySelector('.custom-class')
expect(innerDiv).toBeInTheDocument()
const trigger = screen.getByTestId('popover-trigger')
expect(trigger).toHaveClass('custom-class')
})
it('should handle empty files array', () => {
// Component should render without crashing with empty files
renderComponent({ files: [] })
expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
expect(screen.getByTestId('popover')).toBeInTheDocument()
})
it('should handle single file', () => {
@@ -155,7 +131,7 @@ describe('PreviewDocumentPicker', () => {
files: [createMockDocumentItem({ id: 'single-doc', name: 'Single File' })],
})
expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
expect(screen.getByTestId('popover')).toBeInTheDocument()
})
it('should handle multiple files', () => {
@@ -164,7 +140,7 @@ describe('PreviewDocumentPicker', () => {
files: createMockDocumentList(5),
})
expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
expect(screen.getByTestId('popover')).toBeInTheDocument()
})
it('should use value.extension for file icon', () => {
@@ -172,7 +148,7 @@ describe('PreviewDocumentPicker', () => {
value: createMockDocumentItem({ name: 'test.docx', extension: 'docx' }),
})
const trigger = screen.getByTestId('portal-trigger')
const trigger = screen.getByTestId('popover-trigger')
expect(trigger.querySelector('svg')).toBeInTheDocument()
})
})
@@ -182,13 +158,13 @@ describe('PreviewDocumentPicker', () => {
it('should initialize with popup closed', () => {
renderComponent()
expect(screen.getByTestId('portal-elem')).toHaveAttribute('data-open', 'false')
expect(screen.getByTestId('popover')).toHaveAttribute('data-open', 'false')
})
it('should toggle popup when trigger is clicked', () => {
renderComponent()
const trigger = screen.getByTestId('portal-trigger')
const trigger = screen.getByTestId('popover-trigger')
fireEvent.click(trigger)
expect(trigger).toBeInTheDocument()
@@ -196,9 +172,10 @@ describe('PreviewDocumentPicker', () => {
it('should render portal content for document selection', () => {
renderComponent()
openPopover()
// Portal content is always rendered in our mock for testing
expect(screen.getByTestId('portal-content')).toBeInTheDocument()
// Popover content is rendered after opening the trigger in our mock
expect(screen.getByTestId('popover-content')).toBeInTheDocument()
})
})
@@ -242,7 +219,7 @@ describe('PreviewDocumentPicker', () => {
<PreviewDocumentPicker value={value} files={files} onChange={onChange2} />,
)
expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
expect(screen.getByTestId('popover')).toBeInTheDocument()
})
})
@@ -265,7 +242,7 @@ describe('PreviewDocumentPicker', () => {
<PreviewDocumentPicker value={value} files={files} onChange={onChange} />,
)
expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
expect(screen.getByTestId('popover')).toBeInTheDocument()
})
})
@@ -274,7 +251,7 @@ describe('PreviewDocumentPicker', () => {
it('should toggle popup when trigger is clicked', () => {
renderComponent()
const trigger = screen.getByTestId('portal-trigger')
const trigger = screen.getByTestId('popover-trigger')
fireEvent.click(trigger)
expect(trigger).toBeInTheDocument()
@@ -283,6 +260,7 @@ describe('PreviewDocumentPicker', () => {
it('should render document list with files', () => {
const files = createMockDocumentList(3)
renderComponent({ files })
openPopover()
// Documents should be visible in the list
expect(screen.getByText('Document 1')).toBeInTheDocument()
@@ -295,6 +273,7 @@ describe('PreviewDocumentPicker', () => {
const files = createMockDocumentList(3)
renderComponent({ files, onChange })
openPopover()
fireEvent.click(screen.getByText('Document 2'))
@@ -306,7 +285,7 @@ describe('PreviewDocumentPicker', () => {
it('should handle rapid toggle clicks', () => {
renderComponent()
const trigger = screen.getByTestId('portal-trigger')
const trigger = screen.getByTestId('popover-trigger')
// Rapid clicks
fireEvent.click(trigger)
@@ -337,14 +316,14 @@ describe('PreviewDocumentPicker', () => {
// Renders placeholder for missing name
expect(screen.getByText('--')).toBeInTheDocument()
// Portal wrapper renders
expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
expect(screen.getByTestId('popover')).toBeInTheDocument()
})
it('should handle empty files array', () => {
renderComponent({ files: [] })
// Component should render without crashing
expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
expect(screen.getByTestId('popover')).toBeInTheDocument()
})
it('should handle very long document names', () => {
@@ -374,7 +353,7 @@ describe('PreviewDocumentPicker', () => {
render(<PreviewDocumentPicker {...props} />)
// Component should render without crashing
expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
expect(screen.getByTestId('popover')).toBeInTheDocument()
})
it('should handle large number of files', () => {
@@ -382,7 +361,7 @@ describe('PreviewDocumentPicker', () => {
renderComponent({ files: manyFiles })
// Component should accept large files array
expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
expect(screen.getByTestId('popover')).toBeInTheDocument()
})
it('should handle files with same name but different extensions', () => {
@@ -393,7 +372,7 @@ describe('PreviewDocumentPicker', () => {
renderComponent({ files })
// Component should handle duplicate names
expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
expect(screen.getByTestId('popover')).toBeInTheDocument()
})
})
@@ -427,7 +406,7 @@ describe('PreviewDocumentPicker', () => {
files: [createMockDocumentItem({ name: 'Single' })],
})
expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
expect(screen.getByTestId('popover')).toBeInTheDocument()
})
it('should handle two files', () => {
@@ -435,7 +414,7 @@ describe('PreviewDocumentPicker', () => {
files: createMockDocumentList(2),
})
expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
expect(screen.getByTestId('popover')).toBeInTheDocument()
})
it('should handle many files', () => {
@@ -443,7 +422,7 @@ describe('PreviewDocumentPicker', () => {
files: createMockDocumentList(50),
})
expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
expect(screen.getByTestId('popover')).toBeInTheDocument()
})
})
@@ -451,23 +430,22 @@ describe('PreviewDocumentPicker', () => {
it('should apply custom className', () => {
renderComponent({ className: 'my-custom-class' })
const trigger = screen.getByTestId('portal-trigger')
expect(trigger.querySelector('.my-custom-class')).toBeInTheDocument()
const trigger = screen.getByTestId('popover-trigger')
expect(trigger).toHaveClass('my-custom-class')
})
it('should work without className', () => {
renderComponent({ className: undefined })
expect(screen.getByTestId('portal-trigger')).toBeInTheDocument()
expect(screen.getByTestId('popover-trigger')).toBeInTheDocument()
})
it('should handle multiple class names', () => {
renderComponent({ className: 'class-one class-two' })
const trigger = screen.getByTestId('portal-trigger')
const element = trigger.querySelector('.class-one')
expect(element).toBeInTheDocument()
expect(element).toHaveClass('class-two')
const trigger = screen.getByTestId('popover-trigger')
expect(trigger).toHaveClass('class-one')
expect(trigger).toHaveClass('class-two')
})
})
@@ -480,7 +458,7 @@ describe('PreviewDocumentPicker', () => {
files: [], // Use empty files to avoid duplicate icons
})
const trigger = screen.getByTestId('portal-trigger')
const trigger = screen.getByTestId('popover-trigger')
expect(trigger.querySelector('svg')).toBeInTheDocument()
})
})
@@ -491,6 +469,7 @@ describe('PreviewDocumentPicker', () => {
it('should render all documents in the list', () => {
const files = createMockDocumentList(5)
renderComponent({ files })
openPopover()
// All documents should be visible
files.forEach((file) => {
@@ -503,6 +482,7 @@ describe('PreviewDocumentPicker', () => {
const files = createMockDocumentList(3)
renderComponent({ files, onChange })
openPopover()
fireEvent.click(screen.getByText('Document 1'))
@@ -528,6 +508,7 @@ describe('PreviewDocumentPicker', () => {
onChange={vi.fn()}
/>,
)
openPopover()
expect(screen.getByText(/dataset\.preprocessDocument/)).toBeInTheDocument()
})
})
@@ -537,9 +518,8 @@ describe('PreviewDocumentPicker', () => {
it('should apply hover styles on trigger', () => {
renderComponent()
const trigger = screen.getByTestId('portal-trigger')
const innerDiv = trigger.querySelector('.hover\\:bg-state-base-hover')
expect(innerDiv).toBeInTheDocument()
const trigger = screen.getByTestId('popover-trigger')
expect(trigger).toHaveClass('hover:bg-state-base-hover')
})
it('should have truncate class for long names', () => {
@@ -568,6 +548,7 @@ describe('PreviewDocumentPicker', () => {
const files = createMockDocumentList(3)
renderComponent({ files, onChange })
openPopover()
fireEvent.click(screen.getByText('Document 1'))
@@ -582,10 +563,12 @@ describe('PreviewDocumentPicker', () => {
]
renderComponent({ files: customFiles, onChange })
openPopover()
fireEvent.click(screen.getByText('Custom File 1'))
expect(onChange).toHaveBeenCalledWith(customFiles[0])
openPopover()
fireEvent.click(screen.getByText('Custom File 2'))
expect(onChange).toHaveBeenCalledWith(customFiles[1])
})
@@ -597,8 +580,11 @@ describe('PreviewDocumentPicker', () => {
renderComponent({ files, onChange })
// Select multiple documents sequentially
openPopover()
fireEvent.click(screen.getByText('Document 1'))
openPopover()
fireEvent.click(screen.getByText('Document 3'))
openPopover()
fireEvent.click(screen.getByText('Document 2'))
expect(onChange).toHaveBeenCalledTimes(3)

68
web/app/components/datasets/common/document-picker/index.tsx
View File

@@ -2,6 +2,11 @@
import type { FC } from 'react'
import type { DocumentItem, ParentMode, SimpleDocumentDetail } from '@/models/datasets'
import { cn } from '@langgenius/dify-ui/cn'
import {
Popover,
PopoverContent,
PopoverTrigger,
} from '@langgenius/dify-ui/popover'
import { RiArrowDownSLine } from '@remixicon/react'
import { useBoolean } from 'ahooks'
import * as React from 'react'
@@ -9,11 +14,6 @@ import { useCallback, useMemo, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { GeneralChunk, ParentChildChunk } from '@/app/components/base/icons/src/vender/knowledge'
import Loading from '@/app/components/base/loading'
import {
PortalToFollowElem,
PortalToFollowElemContent,
PortalToFollowElemTrigger,
} from '@/app/components/base/portal-to-follow-elem'
import SearchInput from '@/app/components/base/search-input'
import { ChunkingMode } from '@/models/datasets'
import { useDocumentList } from '@/service/knowledge/use-document'
@@ -61,7 +61,6 @@ const DocumentPicker: FC<Props> = ({
const [open, {
set: setOpen,
toggle: togglePopup,
}] = useBoolean(false)
const ArrowIcon = RiArrowDownSLine
@@ -77,34 +76,40 @@ const DocumentPicker: FC<Props> = ({
}, [parentMode, t])
return (
<PortalToFollowElem
<Popover
open={open}
onOpenChange={setOpen}
placement="bottom-start"
>
<PortalToFollowElemTrigger onClick={togglePopup}>
<div className={cn('ml-1 flex cursor-pointer items-center rounded-lg px-2 py-0.5 select-none hover:bg-state-base-hover', open && 'bg-state-base-hover')}>
<FileIcon name={name} extension={extension} size="xl" />
<div className="mr-0.5 ml-1 flex flex-col items-start">
<div className="flex items-center space-x-0.5">
<span className={cn('system-md-semibold text-text-primary')}>
{' '}
{name || '--'}
</span>
<ArrowIcon className="h-4 w-4 text-text-primary" />
</div>
<div className="flex h-3 items-center space-x-0.5 text-text-tertiary">
<TypeIcon className="h-3 w-3" />
<span className={cn('system-2xs-medium-uppercase', isParentChild && 'mt-0.5' /* to icon problem cause not ver align */)}>
{isGeneralMode && t('chunkingMode.general', { ns: 'dataset' })}
{isQAMode && t('chunkingMode.qa', { ns: 'dataset' })}
{isParentChild && `${t('chunkingMode.parentChild', { ns: 'dataset' })} · ${parentModeLabel}`}
</span>
<PopoverTrigger
nativeButton={false}
render={(
<div className={cn('ml-1 flex cursor-pointer items-center rounded-lg px-2 py-0.5 select-none hover:bg-state-base-hover', open && 'bg-state-base-hover')}>
<FileIcon name={name} extension={extension} size="xl" />
<div className="mr-0.5 ml-1 flex flex-col items-start">
<div className="flex items-center space-x-0.5">
<span className={cn('system-md-semibold text-text-primary')}>
{' '}
{name || '--'}
</span>
<ArrowIcon className="h-4 w-4 text-text-primary" />
</div>
<div className="flex h-3 items-center space-x-0.5 text-text-tertiary">
<TypeIcon className="h-3 w-3" />
<span className={cn('system-2xs-medium-uppercase', isParentChild && 'mt-0.5' /* to icon problem cause not ver align */)}>
{isGeneralMode && t('chunkingMode.general', { ns: 'dataset' })}
{isQAMode && t('chunkingMode.qa', { ns: 'dataset' })}
{isParentChild && `${t('chunkingMode.parentChild', { ns: 'dataset' })} · ${parentModeLabel}`}
</span>
</div>
</div>
</div>
</div>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className="z-11">
)}
/>
<PopoverContent
placement="bottom-start"
sideOffset={0}
popupClassName="border-none bg-transparent shadow-none"
>
<div className="w-[360px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 pt-2 shadow-lg backdrop-blur-[5px]">
<SearchInput value={query} onChange={setQuery} className="mx-1" />
{documentsList
@@ -125,9 +130,8 @@ const DocumentPicker: FC<Props> = ({
</div>
)}
</div>
</PortalToFollowElemContent>
</PortalToFollowElem>
</PopoverContent>
</Popover>
)
}
export default React.memo(DocumentPicker)

53
web/app/components/datasets/common/document-picker/preview-document-picker.tsx
View File

@@ -2,17 +2,17 @@
import type { FC } from 'react'
import type { DocumentItem } from '@/models/datasets'
import { cn } from '@langgenius/dify-ui/cn'
import {
Popover,
PopoverContent,
PopoverTrigger,
} from '@langgenius/dify-ui/popover'
import { RiArrowDownSLine } from '@remixicon/react'
import { useBoolean } from 'ahooks'
import * as React from 'react'
import { useCallback } from 'react'
import { useTranslation } from 'react-i18next'
import Loading from '@/app/components/base/loading'
import {
PortalToFollowElem,
PortalToFollowElemContent,
PortalToFollowElemTrigger,
} from '@/app/components/base/portal-to-follow-elem'
import FileIcon from '../document-file-icon'
import DocumentList from './document-list'
@@ -35,7 +35,6 @@ const PreviewDocumentPicker: FC<Props> = ({
const [open, {
set: setOpen,
toggle: togglePopup,
}] = useBoolean(false)
const ArrowIcon = RiArrowDownSLine
@@ -45,27 +44,32 @@ const PreviewDocumentPicker: FC<Props> = ({
}, [onChange, setOpen])
return (
<PortalToFollowElem
<Popover
open={open}
onOpenChange={setOpen}
placement="bottom-start"
offset={4}
>
<PortalToFollowElemTrigger onClick={togglePopup}>
<div className={cn('flex h-6 items-center rounded-md px-1 select-none hover:bg-state-base-hover', open && 'bg-state-base-hover', className)}>
<FileIcon name={name} extension={extension} size="lg" />
<div className="ml-1 flex flex-col items-start">
<div className="flex items-center space-x-0.5">
<span className={cn('max-w-[200px] truncate system-md-semibold text-text-primary')}>
{' '}
{name || '--'}
</span>
<ArrowIcon className="h-[18px] w-[18px] text-text-primary" />
<PopoverTrigger
nativeButton={false}
render={(
<div className={cn('flex h-6 items-center rounded-md px-1 select-none hover:bg-state-base-hover', open && 'bg-state-base-hover', className)}>
<FileIcon name={name} extension={extension} size="lg" />
<div className="ml-1 flex flex-col items-start">
<div className="flex items-center space-x-0.5">
<span className={cn('max-w-[200px] truncate system-md-semibold text-text-primary')}>
{' '}
{name || '--'}
</span>
<ArrowIcon className="h-[18px] w-[18px] text-text-primary" />
</div>
</div>
</div>
</div>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className="z-11">
)}
/>
<PopoverContent
placement="bottom-start"
sideOffset={4}
popupClassName="border-none bg-transparent shadow-none"
>
<div className="w-[392px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg backdrop-blur-[5px]">
{files?.length > 1 && <div className="flex h-8 items-center pl-2 system-xs-medium-uppercase text-text-tertiary">{t('preprocessDocument', { ns: 'dataset', num: files.length })}</div>}
{files?.length > 0
@@ -81,9 +85,8 @@ const PreviewDocumentPicker: FC<Props> = ({
</div>
)}
</div>
</PortalToFollowElemContent>
</PortalToFollowElem>
</PopoverContent>
</Popover>
)
}
export default React.memo(PreviewDocumentPicker)

19
web/app/components/datasets/documents/create-from-pipeline/steps/__tests__/preview-panel.spec.tsx
View File

@@ -231,8 +231,9 @@ describe('StepTwoPreview', () => {
describe('Props Passing', () => {
it('should render preview button when isIdle is true', () => {
render(<StepTwoPreview {...defaultProps} isIdle={true} />)
// ChunkPreview shows a preview button when idle
const previewButton = screen.queryByRole('button')
const previewButton = screen.getByRole('button', {
name: 'datasetPipeline.addDocuments.stepTwo.previewChunks',
})
expect(previewButton).toBeInTheDocument()
})
@@ -240,13 +241,13 @@ describe('StepTwoPreview', () => {
const onPreview = vi.fn()
render(<StepTwoPreview {...defaultProps} isIdle={true} onPreview={onPreview} />)
// Find and click the preview button
const buttons = screen.getAllByRole('button')
const previewButton = buttons.find(btn => btn.textContent?.toLowerCase().includes('preview'))
if (previewButton) {
previewButton.click()
expect(onPreview).toHaveBeenCalled()
}
const previewButton = screen.getByRole('button', {
name: 'datasetPipeline.addDocuments.stepTwo.previewChunks',
})
previewButton.click()
expect(onPreview).toHaveBeenCalled()
})
})

180
web/app/components/datasets/settings/permission-selector/index.tsx
View File

@@ -1,17 +1,17 @@
import type { Member } from '@/models/common'
import { Avatar } from '@langgenius/dify-ui/avatar'
import { cn } from '@langgenius/dify-ui/cn'
import {
Popover,
PopoverContent,
PopoverTrigger,
} from '@langgenius/dify-ui/popover'
import { RiArrowDownSLine, RiGroup2Line, RiLock2Line } from '@remixicon/react'
import { useDebounceFn } from 'ahooks'
import * as React from 'react'
import { useCallback, useMemo, useState } from 'react'
import { useTranslation } from 'react-i18next'
import Input from '@/app/components/base/input'
import {
PortalToFollowElem,
PortalToFollowElemContent,
PortalToFollowElemTrigger,
} from '@/app/components/base/portal-to-follow-elem'
import { useSelector as useAppContextWithSelector } from '@/context/app-context'
import { DatasetPermission } from '@/models/datasets'
import MemberItem from './member-item'
@@ -90,93 +90,98 @@ const PermissionSelector = ({
const selectedMemberNames = selectedMembers.map(member => member.name).join(', ')
return (
<PortalToFollowElem
<Popover
open={open}
onOpenChange={setOpen}
placement="bottom-start"
offset={4}
onOpenChange={(nextOpen) => {
if (disabled)
return
setOpen(nextOpen)
}}
>
<div className="relative">
<PortalToFollowElemTrigger
onClick={() => !disabled && setOpen(v => !v)}
className="block"
>
<div className={cn('flex cursor-pointer items-center gap-x-0.5 rounded-lg bg-components-input-bg-normal px-2 py-1 hover:bg-state-base-hover-alt', open && 'bg-state-base-hover-alt', disabled && 'cursor-not-allowed! bg-components-input-bg-disabled! hover:bg-components-input-bg-disabled!')}>
{
isOnlyMe && (
<>
<div className="flex size-6 shrink-0 items-center justify-center">
<Avatar avatar={userProfile.avatar_url} name={userProfile.name} size="xs" />
</div>
<div className="grow p-1 system-sm-regular text-components-input-text-filled">
{t('form.permissionsOnlyMe', { ns: 'datasetSettings' })}
</div>
</>
)
}
{
isAllTeamMembers && (
<>
<div className="flex size-6 shrink-0 items-center justify-center">
<RiGroup2Line className="size-4 text-text-secondary" />
</div>
<div className="grow p-1 system-sm-regular text-components-input-text-filled">
{t('form.permissionsAllMember', { ns: 'datasetSettings' })}
</div>
</>
)
}
{
isPartialMembers && (
<>
<div className="relative flex size-6 shrink-0 items-center justify-center">
{
selectedMembers.length === 1 && (
<Avatar
avatar={selectedMembers[0]!.avatar_url}
name={selectedMembers[0]!.name}
size="xs"
/>
)
}
{
selectedMembers.length >= 2 && (
<>
<PopoverTrigger
render={(
<div className={cn('flex cursor-pointer items-center gap-x-0.5 rounded-lg bg-components-input-bg-normal px-2 py-1 hover:bg-state-base-hover-alt', open && 'bg-state-base-hover-alt', disabled && 'cursor-not-allowed! bg-components-input-bg-disabled! hover:bg-components-input-bg-disabled!')}>
{
isOnlyMe && (
<>
<div className="flex size-6 shrink-0 items-center justify-center">
<Avatar avatar={userProfile.avatar_url} name={userProfile.name} size="xs" />
</div>
<div className="grow p-1 system-sm-regular text-components-input-text-filled">
{t('form.permissionsOnlyMe', { ns: 'datasetSettings' })}
</div>
</>
)
}
{
isAllTeamMembers && (
<>
<div className="flex size-6 shrink-0 items-center justify-center">
<RiGroup2Line className="size-4 text-text-secondary" />
</div>
<div className="grow p-1 system-sm-regular text-components-input-text-filled">
{t('form.permissionsAllMember', { ns: 'datasetSettings' })}
</div>
</>
)
}
{
isPartialMembers && (
<>
<div className="relative flex size-6 shrink-0 items-center justify-center">
{
selectedMembers.length === 1 && (
<Avatar
avatar={selectedMembers[0]!.avatar_url}
name={selectedMembers[0]!.name}
className="absolute top-0 left-0 z-0"
size="xxs"
size="xs"
/>
<Avatar
avatar={selectedMembers[1]!.avatar_url}
name={selectedMembers[1]!.name}
className="absolute right-0 bottom-0 z-10"
size="xxs"
/>
</>
)
}
</div>
<div
title={selectedMemberNames}
className="grow truncate p-1 system-sm-regular text-components-input-text-filled"
>
{selectedMemberNames}
</div>
</>
)
}
<RiArrowDownSLine
className={cn(
'h-4 w-4 shrink-0 text-text-quaternary group-hover:text-text-secondary',
open && 'text-text-secondary',
disabled && 'text-components-input-text-placeholder!',
)}
/>
</div>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className="z-1002">
)
}
{
selectedMembers.length >= 2 && (
<>
<Avatar
avatar={selectedMembers[0]!.avatar_url}
name={selectedMembers[0]!.name}
className="absolute top-0 left-0 z-0"
size="xxs"
/>
<Avatar
avatar={selectedMembers[1]!.avatar_url}
name={selectedMembers[1]!.name}
className="absolute right-0 bottom-0 z-10"
size="xxs"
/>
</>
)
}
</div>
<div
title={selectedMemberNames}
className="grow truncate p-1 system-sm-regular text-components-input-text-filled"
>
{selectedMemberNames}
</div>
</>
)
}
<RiArrowDownSLine
className={cn(
'h-4 w-4 shrink-0 text-text-quaternary group-hover:text-text-secondary',
open && 'text-text-secondary',
disabled && 'text-components-input-text-placeholder!',
)}
/>
</div>
)}
/>
<PopoverContent
placement="bottom-start"
sideOffset={4}
popupClassName="border-none bg-transparent shadow-none"
>
<div className="relative w-[480px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg shadow-shadow-shadow-5">
<div className="p-1">
{/* Only me */}
@@ -236,6 +241,7 @@ const PermissionSelector = ({
)}
{filteredMemberList.map(member => (
<MemberItem
key={member.id}
leftIcon={
<Avatar avatar={member.avatar_url} name={member.name} className="shrink-0" size="sm" />
}
@@ -256,9 +262,9 @@ const PermissionSelector = ({
</div>
)}
</div>
</PortalToFollowElemContent>
</PopoverContent>
</div>
</PortalToFollowElem>
</Popover>
)
}

2
web/app/components/header/account-setting/api-based-extension-page/__tests__/selector.spec.tsx
View File

@@ -15,6 +15,8 @@ vi.mock('@/service/use-common', () => ({
useApiBasedExtensions: vi.fn(),
}))
vi.mock('@langgenius/dify-ui/popover', async () => await import('@/__mocks__/base-ui-popover'))
describe('ApiBasedExtensionSelector', () => {
const mockOnChange = vi.fn()
const mockSetShowAccountSettingModal = vi.fn()

67
web/app/components/header/account-setting/api-based-extension-page/selector.tsx
View File

@@ -1,4 +1,5 @@
import type { FC } from 'react'
import { Popover, PopoverContent, PopoverTrigger } from '@langgenius/dify-ui/popover'
import {
RiAddLine,
RiArrowDownSLine,
@@ -8,11 +9,6 @@ import { useTranslation } from 'react-i18next'
import {
ArrowUpRight,
} from '@/app/components/base/icons/src/vender/line/arrows'
import {
PortalToFollowElem,
PortalToFollowElemContent,
PortalToFollowElemTrigger,
} from '@/app/components/base/portal-to-follow-elem'
import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
import { useModalContext } from '@/context/modal-context'
import { useApiBasedExtensions } from '@/service/use-common'
@@ -41,35 +37,42 @@ const ApiBasedExtensionSelector: FC<ApiBasedExtensionSelectorProps> = ({
const currentItem = data?.find(item => item.id === value)
return (
<PortalToFollowElem
<Popover
open={open}
onOpenChange={setOpen}
placement="bottom-start"
offset={4}
>
<PortalToFollowElemTrigger onClick={() => setOpen(v => !v)} className="w-full">
{
currentItem
? (
<div className="flex h-9 cursor-pointer items-center justify-between rounded-lg bg-components-input-bg-normal pr-2.5 pl-3">
<div className="text-sm text-text-primary">{currentItem.name}</div>
<div className="flex items-center">
<div className="mr-1.5 w-[270px] truncate text-right text-xs text-text-quaternary">
{currentItem.api_endpoint}
<PopoverTrigger
render={(
<button type="button" className="block w-full border-0 bg-transparent p-0 text-left">
{
currentItem
? (
<div className="flex h-9 cursor-pointer items-center justify-between rounded-lg bg-components-input-bg-normal pr-2.5 pl-3">
<div className="text-sm text-text-primary">{currentItem.name}</div>
<div className="flex items-center">
<div className="mr-1.5 w-[270px] truncate text-right text-xs text-text-quaternary">
{currentItem.api_endpoint}
</div>
<RiArrowDownSLine className={`h-4 w-4 text-text-secondary ${!open && 'opacity-60'}`} />
</div>
</div>
<RiArrowDownSLine className={`h-4 w-4 text-text-secondary ${!open && 'opacity-60'}`} />
</div>
</div>
)
: (
<div className="flex h-9 cursor-pointer items-center justify-between rounded-lg bg-components-input-bg-normal pr-2.5 pl-3 text-sm text-text-quaternary">
{t('apiBasedExtension.selector.placeholder', { ns: 'common' })}
<RiArrowDownSLine className={`h-4 w-4 text-text-secondary ${!open && 'opacity-60'}`} />
</div>
)
}
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className="z-1002 w-[calc(100%-32px)] max-w-[576px]">
)
: (
<div className="flex h-9 cursor-pointer items-center justify-between rounded-lg bg-components-input-bg-normal pr-2.5 pl-3 text-sm text-text-quaternary">
{t('apiBasedExtension.selector.placeholder', { ns: 'common' })}
<RiArrowDownSLine className={`h-4 w-4 text-text-secondary ${!open && 'opacity-60'}`} />
</div>
)
}
</button>
)}
/>
<PopoverContent
placement="bottom-start"
sideOffset={4}
className="w-[calc(100%-32px)] max-w-[576px]"
popupClassName="border-0 bg-transparent p-0 shadow-none backdrop-blur-none"
>
<div className="z-10 w-full rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg">
<div className="p-1">
<div className="flex items-center justify-between px-3 pt-2 pb-1">
@@ -116,8 +119,8 @@ const ApiBasedExtensionSelector: FC<ApiBasedExtensionSelectorProps> = ({
</div>
</div>
</div>
</PortalToFollowElemContent>
</PortalToFollowElem>
</PopoverContent>
</Popover>
)
}

10
web/app/components/header/account-setting/data-source-page-new/__tests__/configure.spec.tsx
View File

@@ -1,3 +1,4 @@
import type { ButtonHTMLAttributes, ReactNode } from 'react'
import type { DataSourceAuth } from '../types'
import type { FormSchema } from '@/app/components/base/form/types'
import type { AddApiKeyButtonProps, AddOAuthButtonProps, PluginPayload } from '@/app/components/plugins/plugin-auth/types'
@@ -6,6 +7,15 @@ import { FormTypeEnum } from '@/app/components/base/form/types'
import { AuthCategory } from '@/app/components/plugins/plugin-auth/types'
import Configure from '../configure'
vi.mock('@langgenius/dify-ui/popover', () => import('@/__mocks__/base-ui-popover'))
vi.mock('@langgenius/dify-ui/button', () => ({
Button: ({ children, ...props }: ButtonHTMLAttributes<HTMLButtonElement> & { children?: ReactNode }) => (
<button {...props}>
{children}
</button>
),
}))
/**
* Configure Component Tests
* Using Unit approach to ensure 100% coverage and stable tests.

50
web/app/components/header/account-setting/data-source-page-new/configure.tsx
View File

@@ -5,6 +5,11 @@ import type {
PluginPayload,
} from '@/app/components/plugins/plugin-auth/types'
import { Button } from '@langgenius/dify-ui/button'
import {
Popover,
PopoverContent,
PopoverTrigger,
} from '@langgenius/dify-ui/popover'
import {
RiAddLine,
} from '@remixicon/react'
@@ -15,11 +20,6 @@ import {
useState,
} from 'react'
import { useTranslation } from 'react-i18next'
import {
PortalToFollowElem,
PortalToFollowElemContent,
PortalToFollowElemTrigger,
} from '@/app/components/base/portal-to-follow-elem'
import {
AddApiKeyButton,
AddOAuthButton,
@@ -56,10 +56,6 @@ const Configure = ({
}
}, [pluginPayload, t])
const handleToggle = useCallback(() => {
setOpen(v => !v)
}, [])
const handleUpdate = useCallback(() => {
setOpen(false)
onUpdate?.()
@@ -67,24 +63,26 @@ const Configure = ({
return (
<>
<PortalToFollowElem
<Popover
open={open}
onOpenChange={setOpen}
placement="bottom-end"
offset={{
mainAxis: 4,
crossAxis: -4,
}}
>
<PortalToFollowElemTrigger onClick={handleToggle}>
<Button
variant="secondary-accent"
>
<RiAddLine className="h-4 w-4" />
{t('dataSource.configure', { ns: 'common' })}
</Button>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className="z-1002">
<PopoverTrigger
render={(
<Button
variant="secondary-accent"
>
<RiAddLine className="h-4 w-4" />
{t('dataSource.configure', { ns: 'common' })}
</Button>
)}
/>
<PopoverContent
placement="bottom-end"
sideOffset={4}
alignOffset={-4}
popupClassName="border-none bg-transparent shadow-none"
>
<div className="w-[240px] space-y-1.5 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-2 shadow-lg">
{
!!canOAuth && (
@@ -122,8 +120,8 @@ const Configure = ({
)
}
</div>
</PortalToFollowElemContent>
</PortalToFollowElem>
</PopoverContent>
</Popover>
</>
)
}

38
web/app/components/header/account-setting/model-provider-page/model-auth/__tests__/add-custom-model.spec.tsx
View File

@@ -34,33 +34,17 @@ vi.mock('@remixicon/react', () => ({
RiAddLine: () => <div data-testid="add-line-icon" />,
}))
vi.mock('@/app/components/base/tooltip', () => ({
default: ({ children, popupContent }: { children: React.ReactNode, popupContent: string }) => (
vi.mock('@langgenius/dify-ui/tooltip', () => ({
Tooltip: ({ children }: { children: React.ReactNode }) => (
<div data-testid="tooltip-mock">
{children}
<div>{popupContent}</div>
</div>
),
TooltipTrigger: ({ render }: { render: React.ReactNode }) => <>{render}</>,
TooltipContent: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
}))
// Mock portal components to avoid async test DOM issues (consistent with sibling tests)
vi.mock('@/app/components/base/portal-to-follow-elem', () => ({
PortalToFollowElem: ({ children, open }: { children: React.ReactNode, open: boolean, onOpenChange: (open: boolean) => void }) => (
<div data-testid="portal" data-open={open}>
{children}
</div>
),
PortalToFollowElemTrigger: ({ children, onClick }: { children: React.ReactNode, onClick: () => void }) => (
<div data-testid="portal-trigger" onClick={onClick}>{children}</div>
),
PortalToFollowElemContent: ({ children }: { children: React.ReactNode, open?: boolean }) => {
// In many tests, we need to find elements inside the content even if "closed" in state
// but not yet "removed" from DOM. However, to avoid multiple elements issues,
// we should be careful.
// For AddCustomModel, we need the content to be present when we click a model.
return <div data-testid="portal-content" style={{ display: 'block' }}>{children}</div>
},
}))
vi.mock('@langgenius/dify-ui/popover', async () => await import('@/__mocks__/base-ui-popover'))
describe('AddCustomModel', () => {
const mockProvider = {
@@ -94,7 +78,7 @@ describe('AddCustomModel', () => {
/>,
)
fireEvent.click(screen.getByTestId('portal-trigger'))
fireEvent.click(screen.getByRole('button', { name: /modelProvider.addModel/i }))
expect(mockHandleOpenModalForAddNewCustomModel).toHaveBeenCalled()
})
@@ -107,10 +91,10 @@ describe('AddCustomModel', () => {
/>,
)
fireEvent.click(screen.getByTestId('portal-trigger'))
fireEvent.click(screen.getByTestId('popover-trigger'))
// The portal should be "open"
expect(screen.getByTestId('portal')).toHaveAttribute('data-open', 'true')
expect(screen.getByTestId('popover')).toHaveAttribute('data-open', 'true')
expect(screen.getByText('gpt-4')).toBeInTheDocument()
expect(screen.getByTestId('model-icon')).toBeInTheDocument()
})
@@ -125,7 +109,7 @@ describe('AddCustomModel', () => {
/>,
)
fireEvent.click(screen.getByTestId('portal-trigger'))
fireEvent.click(screen.getByTestId('popover-trigger'))
fireEvent.click(screen.getByText('gpt-4'))
expect(mockHandleOpenModalForAddCustomModelToModelList).toHaveBeenCalledWith(undefined, model)
@@ -140,7 +124,7 @@ describe('AddCustomModel', () => {
/>,
)
fireEvent.click(screen.getByTestId('portal-trigger'))
fireEvent.click(screen.getByTestId('popover-trigger'))
fireEvent.click(screen.getByText(/modelProvider.auth.addNewModel/))
expect(mockHandleOpenModalForAddNewCustomModel).toHaveBeenCalled()
@@ -159,7 +143,7 @@ describe('AddCustomModel', () => {
expect(screen.getByTestId('tooltip-mock')).toBeInTheDocument()
expect(screen.getByText('plugin.auth.credentialUnavailable')).toBeInTheDocument()
fireEvent.click(screen.getByTestId('portal-trigger'))
fireEvent.click(screen.getByRole('button', { name: /modelProvider.addModel/i }))
expect(mockHandleOpenModalForAddNewCustomModel).not.toHaveBeenCalled()
})
})

68
web/app/components/header/account-setting/model-provider-page/model-auth/add-custom-model.tsx
View File

@@ -7,6 +7,16 @@ import {
Button,
} from '@langgenius/dify-ui/button'
import { cn } from '@langgenius/dify-ui/cn'
import {
Popover,
PopoverContent,
PopoverTrigger,
} from '@langgenius/dify-ui/popover'
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from '@langgenius/dify-ui/tooltip'
import {
RiAddCircleFill,
RiAddLine,
@@ -17,12 +27,6 @@ import {
useState,
} from 'react'
import { useTranslation } from 'react-i18next'
import {
PortalToFollowElem,
PortalToFollowElemContent,
PortalToFollowElemTrigger,
} from '@/app/components/base/portal-to-follow-elem'
import Tooltip from '@/app/components/base/tooltip'
import { ModelModalModeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
import ModelIcon from '../model-icon'
import { useAuth } from './hooks/use-auth'
@@ -67,12 +71,12 @@ const AddCustomModel = ({
},
)
const notAllowCustomCredential = provider.allow_custom_token === false
const renderTrigger = useCallback((open?: boolean) => {
const Item = (
const renderTrigger = useCallback((open?: boolean, onClick?: () => void) => {
const item = (
<Button
variant="ghost"
size="small"
onClick={onClick}
className={cn(
'text-text-tertiary',
open && 'bg-components-button-ghost-bg-hover',
@@ -85,38 +89,32 @@ const AddCustomModel = ({
)
if (notAllowCustomCredential && !!noModels) {
return (
<Tooltip asChild popupContent={t('auth.credentialUnavailable', { ns: 'plugin' })}>
{Item}
<Tooltip>
<TooltipTrigger render={item} />
<TooltipContent>{t('auth.credentialUnavailable', { ns: 'plugin' })}</TooltipContent>
</Tooltip>
)
}
return Item
return item
}, [t, notAllowCustomCredential, noModels])
if (noModels) {
return renderTrigger(false, notAllowCustomCredential ? undefined : handleOpenModalForAddNewCustomModel)
}
return (
<PortalToFollowElem
<Popover
open={open}
onOpenChange={setOpen}
placement="bottom-end"
offset={{
mainAxis: 4,
crossAxis: 0,
}}
>
<PortalToFollowElemTrigger onClick={() => {
if (noModels) {
if (notAllowCustomCredential)
return
handleOpenModalForAddNewCustomModel()
return
}
setOpen(prev => !prev)
}}
<PopoverTrigger
render={<div className="inline-block">{renderTrigger(open)}</div>}
/>
<PopoverContent
placement="bottom-end"
sideOffset={4}
popupClassName="border-0 bg-transparent p-0 shadow-none backdrop-blur-none"
>
{renderTrigger(open)}
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className="z-1002">
<div className="w-[320px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg">
<div className="max-h-[304px] overflow-y-auto p-1">
{
@@ -125,8 +123,8 @@ const AddCustomModel = ({
key={model.model}
className="flex h-8 cursor-pointer items-center rounded-lg px-2 hover:bg-state-base-hover"
onClick={() => {
handleOpenModalForAddCustomModelToModelList(undefined, model)
setOpen(false)
handleOpenModalForAddCustomModelToModelList(undefined, model)
}}
>
<ModelIcon
@@ -150,8 +148,8 @@ const AddCustomModel = ({
<div
className="flex cursor-pointer items-center border-t border-t-divider-subtle p-3 system-xs-medium text-text-accent-light-mode-only"
onClick={() => {
handleOpenModalForAddNewCustomModel()
setOpen(false)
handleOpenModalForAddNewCustomModel()
}}
>
<RiAddLine className="mr-1 h-4 w-4" />
@@ -160,8 +158,8 @@ const AddCustomModel = ({
)
}
</div>
</PortalToFollowElemContent>
</PortalToFollowElem>
</PopoverContent>
</Popover>
)
}

2
web/app/components/header/account-setting/model-provider-page/model-auth/authorized/__tests__/index.spec.tsx
View File

@@ -45,6 +45,8 @@ vi.mock('../authorized-item', () => ({
),
}))
vi.mock('@langgenius/dify-ui/popover', async () => await import('@/__mocks__/base-ui-popover'))
describe('Authorized', () => {
const mockProvider: ModelProvider = {
provider: 'openai',

83
web/app/components/header/account-setting/model-provider-page/model-auth/authorized/index.tsx
View File

@@ -1,3 +1,8 @@
import type {
OffsetOptions,
} from '@floating-ui/react'
import type { Placement } from '@langgenius/dify-ui/popover'
import type { MouseEvent } from 'react'
import type {
ConfigurationMethodEnum,
Credential,
@@ -6,9 +11,6 @@ import type {
ModelModalModeEnum,
ModelProvider,
} from '../../declarations'
import type {
PortalToFollowElemOptions,
} from '@/app/components/base/portal-to-follow-elem'
import {
AlertDialog,
AlertDialogActions,
@@ -19,6 +21,11 @@ import {
} from '@langgenius/dify-ui/alert-dialog'
import { Button } from '@langgenius/dify-ui/button'
import { cn } from '@langgenius/dify-ui/cn'
import {
Popover,
PopoverContent,
PopoverTrigger,
} from '@langgenius/dify-ui/popover'
import {
RiAddLine,
} from '@remixicon/react'
@@ -29,11 +36,6 @@ import {
useState,
} from 'react'
import { useTranslation } from 'react-i18next'
import {
PortalToFollowElem,
PortalToFollowElemContent,
PortalToFollowElemTrigger,
} from '@/app/components/base/portal-to-follow-elem'
import { useAuth } from '../hooks'
import AuthorizedItem from './authorized-item'
@@ -43,7 +45,7 @@ type AuthorizedProps = {
currentCustomConfigurationModelFixedFields?: CustomConfigurationModelFixedFields
authParams?: {
isModelCredential?: boolean
onUpdate?: (newPayload?: any, formValues?: Record<string, any>) => void
onUpdate?: (newPayload?: Record<string, unknown>, formValues?: Record<string, unknown>) => void
onRemove?: (credentialId: string) => void
mode?: ModelModalModeEnum
}
@@ -57,8 +59,8 @@ type AuthorizedProps = {
renderTrigger: (open?: boolean) => React.ReactNode
isOpen?: boolean
onOpenChange?: (open: boolean) => void
offset?: PortalToFollowElemOptions['offset']
placement?: PortalToFollowElemOptions['placement']
offset?: number | OffsetOptions
placement?: Placement
triggerPopupSameWidth?: boolean
popupClassName?: string
showItemSelectedIcon?: boolean
@@ -132,9 +134,13 @@ const Authorized = ({
)
const handleEdit = useCallback((credential?: Credential, model?: CustomModel) => {
handleOpenModal(credential, model)
setMergedIsOpen(false)
handleOpenModal(credential, model)
}, [handleOpenModal, setMergedIsOpen])
const handleDelete = useCallback((credential?: Credential, model?: CustomModel) => {
setMergedIsOpen(false)
openConfirmDelete(credential, model)
}, [openConfirmDelete, setMergedIsOpen])
const handleItemClick = useCallback((credential: Credential, model?: CustomModel) => {
if (disableItemClick)
@@ -148,30 +154,37 @@ const Authorized = ({
setMergedIsOpen(false)
}, [handleActiveCredential, onItemClick, setMergedIsOpen, disableItemClick])
const notAllowCustomCredential = provider.allow_custom_token === false
const resolvedOffset = typeof offset === 'number' || typeof offset === 'function' ? undefined : offset
const sideOffset = typeof offset === 'number' ? offset : resolvedOffset?.mainAxis ?? 0
const alignOffset = typeof offset === 'number' ? 0 : resolvedOffset?.crossAxis ?? resolvedOffset?.alignmentAxis ?? 0
const popupProps = triggerPopupSameWidth
? { style: { width: 'var(--anchor-width, auto)' } }
: undefined
const handleTriggerClick = useCallback((event: MouseEvent<HTMLElement>) => {
if (!triggerOnlyOpenModal)
return
event.preventDefault()
handleOpenModal()
}, [handleOpenModal, triggerOnlyOpenModal])
return (
<>
<PortalToFollowElem
<Popover
open={mergedIsOpen}
onOpenChange={setMergedIsOpen}
placement={placement}
offset={offset}
triggerPopupSameWidth={triggerPopupSameWidth}
>
<PortalToFollowElemTrigger
onClick={() => {
if (triggerOnlyOpenModal) {
handleOpenModal()
return
}
setMergedIsOpen(!mergedIsOpen)
}}
asChild
<PopoverTrigger
render={<div className={triggerPopupSameWidth ? 'w-full' : 'inline-block'}>{renderTrigger(mergedIsOpen)}</div>}
onClick={handleTriggerClick}
/>
<PopoverContent
placement={placement}
sideOffset={sideOffset}
alignOffset={alignOffset}
popupProps={popupProps}
popupClassName="border-0 bg-transparent p-0 shadow-none backdrop-blur-none"
>
{renderTrigger(mergedIsOpen)}
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className="z-1002">
<div className={cn(
'w-[360px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-[5px]',
popupClassName,
@@ -186,15 +199,15 @@ const Authorized = ({
}
<div className="max-h-[304px] overflow-y-auto">
{
items.map((item, index) => (
<Fragment key={index}>
items.map(item => (
<Fragment key={item.model?.model ?? item.title ?? item.credentials.map(credential => credential.credential_id).join('-')}>
<AuthorizedItem
provider={provider}
title={item.title}
model={item.model}
credentials={item.credentials}
disabled={disabled}
onDelete={openConfirmDelete}
onDelete={handleDelete}
disableDeleteButShowAction={disableDeleteButShowAction}
disableDeleteTip={disableDeleteTip}
onEdit={handleEdit}
@@ -204,7 +217,7 @@ const Authorized = ({
showModelTitle={showModelTitle}
/>
{
index !== items.length - 1 && (
item !== items[items.length - 1] && (
<div className="h-px bg-divider-subtle"></div>
)
}
@@ -245,8 +258,8 @@ const Authorized = ({
)
}
</div>
</PortalToFollowElemContent>
</PortalToFollowElem>
</PopoverContent>
</Popover>
<AlertDialog open={!!deleteCredentialId} onOpenChange={open => !open && closeConfirmDelete()}>
<AlertDialogContent>
<div className="flex flex-col gap-2 px-6 pt-6 pb-4">

25
web/app/components/plugins/marketplace/search-box/__tests__/index.spec.tsx
View File

@@ -62,31 +62,38 @@ vi.mock('@/app/components/plugins/hooks', () => ({
}),
}))
// Mock portal-to-follow-elem with shared open state
// Mock popover with shared open state
let mockPortalOpenState = false
let mockPopoverOnOpenChange: ((open: boolean) => void) | undefined
vi.mock('@/app/components/base/portal-to-follow-elem', () => ({
PortalToFollowElem: ({ children, open }: {
vi.mock('@langgenius/dify-ui/popover', () => ({
Popover: ({ children, open, onOpenChange }: {
children: React.ReactNode
open: boolean
onOpenChange?: (open: boolean) => void
}) => {
mockPortalOpenState = open
mockPopoverOnOpenChange = onOpenChange
return (
<div data-testid="portal-elem" data-open={open}>
{children}
</div>
)
},
PortalToFollowElemTrigger: ({ children, onClick, className }: {
children: React.ReactNode
onClick: () => void
PopoverTrigger: ({ children, render, className }: {
children?: React.ReactNode
render?: React.ReactNode
className?: string
}) => (
<div data-testid="portal-trigger" onClick={onClick} className={className}>
{children}
<div
data-testid="portal-trigger"
onClick={() => mockPopoverOnOpenChange?.(!mockPortalOpenState)}
className={className}
>
{render ?? children}
</div>
),
PortalToFollowElemContent: ({ children, className }: {
PopoverContent: ({ children, className }: {
children: React.ReactNode
className?: string
}) => {

50
web/app/components/plugins/marketplace/search-box/__tests__/tags-filter.spec.tsx
View File

@@ -1,10 +1,19 @@
import { fireEvent, render, screen } from '@testing-library/react'
import {
fireEvent,
render,
screen,
within,
} from '@testing-library/react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import TagsFilter from '../tags-filter'
const { mockTranslate } = vi.hoisted(() => ({
mockTranslate: vi.fn((key: string, options?: { ns?: string }) => options?.ns ? `${options.ns}.${key}` : key),
}))
vi.mock('#i18n', () => ({
useTranslation: () => ({
t: (key: string, options?: { ns?: string }) => options?.ns ? `${options.ns}.${key}` : key,
t: mockTranslate,
}),
}))
@@ -46,20 +55,7 @@ vi.mock('@/app/components/base/input', () => ({
),
}))
vi.mock('@/app/components/base/portal-to-follow-elem', async () => {
const _React = await import('react')
return {
PortalToFollowElem: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
PortalToFollowElemTrigger: ({
children,
onClick,
}: {
children: React.ReactNode
onClick: () => void
}) => <button data-testid="portal-trigger" onClick={onClick}>{children}</button>,
PortalToFollowElemContent: ({ children }: { children: React.ReactNode }) => <div data-testid="portal-content">{children}</div>,
}
})
vi.mock('@langgenius/dify-ui/popover', () => import('@/__mocks__/base-ui-popover'))
vi.mock('../trigger/marketplace', () => ({
default: ({ selectedTagsLength }: { selectedTagsLength: number }) => (
@@ -80,8 +76,16 @@ vi.mock('../trigger/tool-selector', () => ({
}))
describe('TagsFilter', () => {
const ensurePopoverOpen = () => {
if (!screen.queryByTestId('popover-content'))
fireEvent.click(screen.getByTestId('popover-trigger'))
return screen.getByTestId('popover-content')
}
beforeEach(() => {
vi.clearAllMocks()
mockTranslate.mockImplementation((key: string, options?: { ns?: string }) => options?.ns ? `${options.ns}.${key}` : key)
})
it('renders marketplace trigger when used in marketplace', () => {
@@ -100,6 +104,7 @@ describe('TagsFilter', () => {
it('filters tag options by search text', () => {
render(<TagsFilter tags={[]} onTagsChange={vi.fn()} />)
fireEvent.click(screen.getByTestId('popover-trigger'))
expect(screen.getByText('Agent')).toBeInTheDocument()
expect(screen.getByText('RAG')).toBeInTheDocument()
@@ -116,11 +121,20 @@ describe('TagsFilter', () => {
const onTagsChange = vi.fn()
const { rerender } = render(<TagsFilter tags={['agent']} onTagsChange={onTagsChange} />)
fireEvent.click(screen.getByText('Agent'))
fireEvent.click(within(ensurePopoverOpen()).getByText('Agent'))
expect(onTagsChange).toHaveBeenCalledWith([])
rerender(<TagsFilter tags={['agent']} onTagsChange={onTagsChange} />)
fireEvent.click(screen.getByText('RAG'))
fireEvent.click(within(ensurePopoverOpen()).getByText('RAG'))
expect(onTagsChange).toHaveBeenCalledWith(['agent', 'rag'])
})
it('falls back to an empty placeholder when translation is missing', () => {
mockTranslate.mockImplementation(() => undefined as unknown as string)
render(<TagsFilter tags={[]} onTagsChange={vi.fn()} />)
fireEvent.click(screen.getByTestId('popover-trigger'))
expect(screen.getByLabelText('tags-search')).toHaveAttribute('placeholder', '')
})
})

82
web/app/components/plugins/marketplace/search-box/tags-filter.tsx
View File

@@ -1,14 +1,14 @@
'use client'
import { useTranslation } from '#i18n'
import {
Popover,
PopoverContent,
PopoverTrigger,
} from '@langgenius/dify-ui/popover'
import { useState } from 'react'
import Checkbox from '@/app/components/base/checkbox'
import Input from '@/app/components/base/input'
import {
PortalToFollowElem,
PortalToFollowElemContent,
PortalToFollowElemTrigger,
} from '@/app/components/base/portal-to-follow-elem'
import { useTags } from '@/app/components/plugins/hooks'
import MarketplaceTrigger from './trigger/marketplace'
import ToolSelectorTrigger from './trigger/tool-selector'
@@ -37,43 +37,45 @@ const TagsFilter = ({
const selectedTagsLength = tags.length
return (
<PortalToFollowElem
placement="bottom-start"
offset={{
mainAxis: 4,
crossAxis: -6,
}}
<Popover
open={open}
onOpenChange={setOpen}
>
<PortalToFollowElemTrigger
className="shrink-0"
onClick={() => setOpen(v => !v)}
<PopoverTrigger
nativeButton={false}
render={(
<div className="shrink-0">
{
usedInMarketplace && (
<MarketplaceTrigger
selectedTagsLength={selectedTagsLength}
open={open}
tags={tags}
tagsMap={tagsMap}
onTagsChange={onTagsChange}
/>
)
}
{
!usedInMarketplace && (
<ToolSelectorTrigger
selectedTagsLength={selectedTagsLength}
open={open}
tags={tags}
tagsMap={tagsMap}
onTagsChange={onTagsChange}
/>
)
}
</div>
)}
/>
<PopoverContent
placement="bottom-start"
sideOffset={4}
alignOffset={-6}
popupClassName="border-none bg-transparent shadow-none"
>
{
usedInMarketplace && (
<MarketplaceTrigger
selectedTagsLength={selectedTagsLength}
open={open}
tags={tags}
tagsMap={tagsMap}
onTagsChange={onTagsChange}
/>
)
}
{
!usedInMarketplace && (
<ToolSelectorTrigger
selectedTagsLength={selectedTagsLength}
open={open}
tags={tags}
tagsMap={tagsMap}
onTagsChange={onTagsChange}
/>
)
}
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className="z-1000">
<div className="w-[240px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-xs">
<div className="p-2 pb-1">
<Input
@@ -103,8 +105,8 @@ const TagsFilter = ({
}
</div>
</div>
</PortalToFollowElemContent>
</PortalToFollowElem>
</PopoverContent>
</Popover>
)
}

2
web/app/components/plugins/plugin-auth/authorized/__tests__/index.spec.tsx
View File

@@ -73,6 +73,8 @@ vi.mock('@/hooks/use-oauth', () => ({
openOAuthPopup: vi.fn(),
}))
vi.mock('@langgenius/dify-ui/popover', async () => await import('@/__mocks__/base-ui-popover'))
// Mock service/use-triggers
vi.mock('@/service/use-triggers', () => ({
useTriggerPluginDynamicOptions: () => ({

117
web/app/components/plugins/plugin-auth/authorized/index.tsx
View File

@@ -1,7 +1,8 @@
import type { Credential, PluginPayload } from '../types'
import type {
PortalToFollowElemOptions,
} from '@/app/components/base/portal-to-follow-elem'
OffsetOptions,
} from '@floating-ui/react'
import type { Placement } from '@langgenius/dify-ui/popover'
import type { Credential, PluginPayload } from '../types'
import {
AlertDialog,
AlertDialogActions,
@@ -12,6 +13,11 @@ import {
} from '@langgenius/dify-ui/alert-dialog'
import { Button } from '@langgenius/dify-ui/button'
import { cn } from '@langgenius/dify-ui/cn'
import {
Popover,
PopoverContent,
PopoverTrigger,
} from '@langgenius/dify-ui/popover'
import { toast } from '@langgenius/dify-ui/toast'
import {
RiArrowDownSLine,
@@ -23,11 +29,6 @@ import {
useState,
} from 'react'
import { useTranslation } from 'react-i18next'
import {
PortalToFollowElem,
PortalToFollowElemContent,
PortalToFollowElemTrigger,
} from '@/app/components/base/portal-to-follow-elem'
import Indicator from '@/app/components/header/indicator'
import Authorize from '../authorize'
import ApiKeyModal from '../authorize/api-key-modal'
@@ -48,8 +49,8 @@ type AuthorizedProps = {
renderTrigger?: (open?: boolean) => React.ReactNode
isOpen?: boolean
onOpenChange?: (open: boolean) => void
offset?: PortalToFollowElemOptions['offset']
placement?: PortalToFollowElemOptions['placement']
offset?: number | OffsetOptions
placement?: Placement
triggerPopupSameWidth?: boolean
popupClassName?: string
disableSetDefault?: boolean
@@ -96,11 +97,12 @@ const Authorized = ({
const [deleteCredentialId, setDeleteCredentialId] = useState<string | null>(null)
const { mutateAsync: deletePluginCredential } = useDeletePluginCredentialHook(pluginPayload)
const openConfirm = useCallback((credentialId?: string) => {
setMergedIsOpen(false)
if (credentialId)
pendingOperationCredentialId.current = credentialId
setDeleteCredentialId(pendingOperationCredentialId.current)
}, [])
}, [setMergedIsOpen])
const closeConfirm = useCallback(() => {
setDeleteCredentialId(null)
pendingOperationCredentialId.current = null
@@ -130,11 +132,12 @@ const Authorized = ({
handleSetDoingAction(false)
}
}, [deletePluginCredential, onUpdate, t, handleSetDoingAction])
const [editValues, setEditValues] = useState<Record<string, any> | null>(null)
const handleEdit = useCallback((id: string, values: Record<string, any>) => {
const [editValues, setEditValues] = useState<Record<string, unknown> | null>(null)
const handleEdit = useCallback((id: string, values: Record<string, unknown>) => {
setMergedIsOpen(false)
pendingOperationCredentialId.current = id
setEditValues(values)
}, [])
}, [setMergedIsOpen])
const handleRemove = useCallback(() => {
setDeleteCredentialId(pendingOperationCredentialId.current)
}, [])
@@ -171,49 +174,59 @@ const Authorized = ({
}, [updatePluginCredential, t, handleSetDoingAction, onUpdate])
const unavailableCredentials = credentials.filter(credential => credential.not_allowed_to_use)
const unavailableCredential = credentials.find(credential => credential.not_allowed_to_use && credential.is_default)
const resolvedOffset = typeof offset === 'number' || typeof offset === 'function' ? undefined : offset
const sideOffset = typeof offset === 'number' ? offset : resolvedOffset?.mainAxis ?? 0
const alignOffset = typeof offset === 'number' ? 0 : resolvedOffset?.crossAxis ?? resolvedOffset?.alignmentAxis ?? 0
const popupProps = triggerPopupSameWidth
? { style: { width: 'var(--anchor-width, auto)' } }
: undefined
return (
<>
<PortalToFollowElem
<Popover
open={mergedIsOpen}
onOpenChange={setMergedIsOpen}
placement={placement}
offset={offset}
triggerPopupSameWidth={triggerPopupSameWidth}
>
<PortalToFollowElemTrigger
onClick={() => setMergedIsOpen(!mergedIsOpen)}
asChild
>
{
renderTrigger
? renderTrigger(mergedIsOpen)
: (
<Button
className={cn(
'w-full',
isOpen && 'bg-components-button-secondary-bg-hover',
)}
>
<Indicator className="mr-2" color={unavailableCredential ? 'gray' : 'green'} />
{credentials.length}
<PopoverTrigger
render={(
<div className={triggerPopupSameWidth ? 'w-full' : 'inline-block'}>
{
renderTrigger
? renderTrigger(mergedIsOpen)
: (
<Button
className={cn(
'w-full',
mergedIsOpen && 'bg-components-button-secondary-bg-hover',
)}
>
<Indicator className="mr-2" color={unavailableCredential ? 'gray' : 'green'} />
{credentials.length}
&nbsp;
{
credentials.length > 1
? t('auth.authorizations', { ns: 'plugin' })
: t('auth.authorization', { ns: 'plugin' })
}
{
!!unavailableCredentials.length && (
` (${unavailableCredentials.length} ${t('auth.unavailable', { ns: 'plugin' })})`
)
}
<RiArrowDownSLine className="ml-0.5 h-4 w-4" />
</Button>
)
}
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className="z-100">
{
credentials.length > 1
? t('auth.authorizations', { ns: 'plugin' })
: t('auth.authorization', { ns: 'plugin' })
}
{
!!unavailableCredentials.length && (
` (${unavailableCredentials.length} ${t('auth.unavailable', { ns: 'plugin' })})`
)
}
<RiArrowDownSLine className="ml-0.5 h-4 w-4" />
</Button>
)
}
</div>
)}
/>
<PopoverContent
placement={placement}
sideOffset={sideOffset}
alignOffset={alignOffset}
popupProps={popupProps}
popupClassName="border-0 bg-transparent p-0 shadow-none backdrop-blur-none"
>
<div className={cn(
'max-h-[360px] overflow-y-auto rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg',
popupClassName,
@@ -323,8 +336,8 @@ const Authorized = ({
)
}
</div>
</PortalToFollowElemContent>
</PortalToFollowElem>
</PopoverContent>
</Popover>
<AlertDialog open={!!deleteCredentialId} onOpenChange={open => !open && closeConfirm()}>
<AlertDialogContent>
<div className="flex flex-col gap-2 px-6 pt-6 pb-4">

12
web/app/components/plugins/plugin-detail-panel/app-selector/__tests__/app-picker.spec.tsx
View File

@@ -46,8 +46,8 @@ vi.mock('@/app/components/base/input', () => ({
),
}))
vi.mock('@/app/components/base/portal-to-follow-elem', () => ({
PortalToFollowElem: ({
vi.mock('@langgenius/dify-ui/popover', () => ({
Popover: ({
children,
open,
}: {
@@ -58,18 +58,20 @@ vi.mock('@/app/components/base/portal-to-follow-elem', () => ({
{children}
</div>
),
PortalToFollowElemTrigger: ({
PopoverTrigger: ({
children,
render,
onClick,
}: {
children: ReactNode
render?: ReactNode
onClick?: () => void
}) => (
<button data-testid="picker-trigger" onClick={onClick}>
{children}
{render ?? children}
</button>
),
PortalToFollowElemContent: ({ children }: { children: ReactNode }) => (
PopoverContent: ({ children }: { children: ReactNode }) => (
<div data-testid="portal-content">{children}</div>
),
}))

12
web/app/components/plugins/plugin-detail-panel/app-selector/__tests__/index.spec.tsx
View File

@@ -76,7 +76,7 @@ afterAll(() => {
// Mock portal components for controlled positioning in tests
// Use React context to properly scope open state per portal instance (for nested portals)
vi.mock('@/app/components/base/portal-to-follow-elem', () => {
vi.mock('@langgenius/dify-ui/popover', () => {
// Context reference shared across mock components
let sharedContext: React.Context<boolean> | null = null
@@ -90,7 +90,7 @@ vi.mock('@/app/components/base/portal-to-follow-elem', () => {
}
return {
PortalToFollowElem: ({
Popover: ({
children,
open,
}: {
@@ -104,20 +104,22 @@ vi.mock('@/app/components/base/portal-to-follow-elem', () => {
React.createElement('div', { 'data-testid': 'portal-to-follow-elem', 'data-open': open }, children),
)
},
PortalToFollowElemTrigger: ({
PopoverTrigger: ({
children,
render,
onClick,
className,
}: {
children: ReactNode
render?: ReactNode
onClick?: () => void
className?: string
}) => (
<div data-testid="portal-trigger" onClick={onClick} className={className}>
{children}
{render ?? children}
</div>
),
PortalToFollowElemContent: ({ children, className }: { children: ReactNode, className?: string }) => {
PopoverContent: ({ children, className }: { children: ReactNode, className?: string }) => {
const Context = getContext()
const isOpen = React.useContext(Context)
if (!isOpen)

43
web/app/components/plugins/plugin-detail-panel/app-selector/app-picker.tsx
View File

@@ -5,16 +5,16 @@ import type {
} from '@floating-ui/react'
import type { FC } from 'react'
import type { App } from '@/types/app'
import {
Popover,
PopoverContent,
PopoverTrigger,
} from '@langgenius/dify-ui/popover'
import * as React from 'react'
import { useCallback, useEffect, useRef } from 'react'
import { useTranslation } from 'react-i18next'
import AppIcon from '@/app/components/base/app-icon'
import Input from '@/app/components/base/input'
import {
PortalToFollowElem,
PortalToFollowElemContent,
PortalToFollowElemTrigger,
} from '@/app/components/base/portal-to-follow-elem'
import { AppModeEnum } from '@/types/app'
type Props = {
@@ -154,26 +154,33 @@ const AppPicker: FC<Props> = ({
}
}
const handleTriggerClick = () => {
if (disabled)
const resolvedOffset = typeof offset === 'number' || typeof offset === 'function' ? undefined : offset
const sideOffset = typeof offset === 'number' ? offset : resolvedOffset?.mainAxis ?? 0
const alignOffset = typeof offset === 'number' ? 0 : resolvedOffset?.crossAxis ?? resolvedOffset?.alignmentAxis ?? 0
const handleTriggerClick = useCallback((event: React.MouseEvent<HTMLElement>) => {
event.preventDefault()
if (disabled || isShow)
return
onShowChange(true)
}
}, [disabled, isShow, onShowChange])
return (
<PortalToFollowElem
placement={placement}
offset={offset}
<Popover
open={isShow}
onOpenChange={onShowChange}
>
<PortalToFollowElemTrigger
<PopoverTrigger
render={<div>{trigger}</div>}
onClick={handleTriggerClick}
>
{trigger}
</PortalToFollowElemTrigger>
/>
<PortalToFollowElemContent className="z-1000">
<PopoverContent
placement={placement}
sideOffset={sideOffset}
alignOffset={alignOffset}
popupClassName="border-0 bg-transparent p-0 shadow-none backdrop-blur-none"
>
<div className="relative flex max-h-[400px] min-h-20 w-[356px] flex-col rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-xs">
<div className="p-2 pb-1">
<Input
@@ -219,8 +226,8 @@ const AppPicker: FC<Props> = ({
</div>
</div>
</div>
</PortalToFollowElemContent>
</PortalToFollowElem>
</PopoverContent>
</Popover>
)
}

52
web/app/components/plugins/plugin-detail-panel/app-selector/index.tsx
View File

@@ -5,14 +5,14 @@ import type {
} from '@floating-ui/react'
import type { FC } from 'react'
import type { App } from '@/types/app'
import {
Popover,
PopoverContent,
PopoverTrigger,
} from '@langgenius/dify-ui/popover'
import * as React from 'react'
import { useCallback, useMemo, useState } from 'react'
import { useTranslation } from 'react-i18next'
import {
PortalToFollowElem,
PortalToFollowElemContent,
PortalToFollowElemTrigger,
} from '@/app/components/base/portal-to-follow-elem'
import AppInputsPanel from '@/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-panel'
import AppPicker from '@/app/components/plugins/plugin-detail-panel/app-selector/app-picker'
import AppTrigger from '@/app/components/plugins/plugin-detail-panel/app-selector/app-trigger'
@@ -94,6 +94,9 @@ const AppSelector: FC<Props> = ({
}, [currentAppInfo, displayedApps])
const hasMore = hasNextPage ?? true
const resolvedOffset = typeof offset === 'number' || typeof offset === 'function' ? undefined : offset
const sideOffset = typeof offset === 'number' ? offset : resolvedOffset?.mainAxis ?? 0
const alignOffset = typeof offset === 'number' ? 0 : resolvedOffset?.crossAxis ?? resolvedOffset?.alignmentAxis ?? 0
const handleLoadMore = useCallback(async () => {
if (isFetchingNextPage || !hasMore)
@@ -102,11 +105,13 @@ const AppSelector: FC<Props> = ({
await fetchNextPage()
}, [fetchNextPage, hasMore, isFetchingNextPage])
const handleTriggerClick = () => {
if (disabled)
const handleTriggerClick = useCallback((event: React.MouseEvent<HTMLElement>) => {
event.preventDefault()
if (disabled || isShow)
return
setIsShow(true)
}
}, [disabled, isShow])
const [isShowChooseApp, setIsShowChooseApp] = useState(false)
const handleSelectApp = (app: App) => {
@@ -143,22 +148,27 @@ const AppSelector: FC<Props> = ({
return (
<>
<PortalToFollowElem
placement={placement}
offset={offset}
<Popover
open={isShow}
onOpenChange={setIsShow}
>
<PortalToFollowElemTrigger
className="w-full"
<PopoverTrigger
render={(
<div className="w-full">
<AppTrigger
open={isShow}
appDetail={currentAppInfo}
/>
</div>
)}
onClick={handleTriggerClick}
/>
<PopoverContent
placement={placement}
sideOffset={sideOffset}
alignOffset={alignOffset}
popupClassName="border-0 bg-transparent p-0 shadow-none backdrop-blur-none"
>
<AppTrigger
open={isShow}
appDetail={currentAppInfo}
/>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className="z-1000">
<div className="relative min-h-20 w-[389px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-xs">
<div className="flex flex-col gap-1 px-4 py-3">
<div className="flex h-6 items-center system-sm-semibold text-text-secondary">{t('appSelector.label', { ns: 'app' })}</div>
@@ -193,8 +203,8 @@ const AppSelector: FC<Props> = ({
/>
)}
</div>
</PortalToFollowElemContent>
</PortalToFollowElem>
</PopoverContent>
</Popover>
</>
)
}

12
web/app/components/plugins/plugin-detail-panel/tool-selector/__tests__/index.spec.tsx
View File

@@ -153,8 +153,8 @@ vi.mock('@/app/components/plugins/plugin-auth', () => ({
}))
// Portal components need mocking for controlled positioning in tests
vi.mock('@/app/components/base/portal-to-follow-elem', () => ({
PortalToFollowElem: ({
vi.mock('@langgenius/dify-ui/popover', () => ({
Popover: ({
children,
open,
}: {
@@ -165,18 +165,20 @@ vi.mock('@/app/components/base/portal-to-follow-elem', () => ({
{children}
</div>
),
PortalToFollowElemTrigger: ({
PopoverTrigger: ({
children,
render,
onClick,
}: {
children: ReactNode
render?: ReactNode
onClick?: () => void
}) => (
<div data-testid="portal-trigger" onClick={onClick}>
{children}
{render ?? children}
</div>
),
PortalToFollowElemContent: ({ children }: { children: ReactNode }) => (
PopoverContent: ({ children }: { children: ReactNode }) => (
<div data-testid="portal-content">{children}</div>
),
}))

117
web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
View File

@@ -8,13 +8,13 @@ import type { Node } from 'reactflow'
import type { ToolValue } from '@/app/components/workflow/block-selector/types'
import type { NodeOutPutVar } from '@/app/components/workflow/types'
import { cn } from '@langgenius/dify-ui/cn'
import {
Popover,
PopoverContent,
PopoverTrigger,
} from '@langgenius/dify-ui/popover'
import * as React from 'react'
import { useTranslation } from 'react-i18next'
import {
PortalToFollowElem,
PortalToFollowElemContent,
PortalToFollowElemTrigger,
} from '@/app/components/base/portal-to-follow-elem'
import { CollectionType } from '@/app/components/tools/types'
import Link from '@/next/link'
import {
@@ -102,15 +102,21 @@ const ToolSelector: FC<Props> = ({
getSettingsValue,
} = state
const handleTriggerClick = () => {
const handleTriggerClick = (event: React.MouseEvent<HTMLElement>) => {
event.preventDefault()
if (disabled)
return
if (!currentProvider || !currentTool)
return
setIsShow(true)
}
// Determine portal open state based on controlled vs uncontrolled mode
const portalOpen = trigger ? controlledState : isShow
const onPortalOpenChange = trigger ? onControlledStateChange : setIsShow
const resolvedOffset = typeof offset === 'number' || typeof offset === 'function' ? undefined : offset
const sideOffset = typeof offset === 'number' ? offset : resolvedOffset?.mainAxis ?? 0
const alignOffset = typeof offset === 'number' ? 0 : resolvedOffset?.crossAxis ?? resolvedOffset?.alignmentAxis ?? 0
// Build error tooltip content
const renderErrorTip = () => (
@@ -134,57 +140,58 @@ const ToolSelector: FC<Props> = ({
)
return (
<PortalToFollowElem
placement={placement}
offset={offset}
<Popover
open={portalOpen}
onOpenChange={onPortalOpenChange}
>
<PortalToFollowElemTrigger
className="w-full"
onClick={() => {
if (!currentProvider || !currentTool)
return
handleTriggerClick()
}}
<PopoverTrigger
render={(
<div className="w-full">
{trigger}
{/* Default trigger - no value */}
{!trigger && !value?.provider_name && (
<ToolTrigger
isConfigure
open={isShow}
value={value}
provider={currentProvider}
/>
)}
{/* Default trigger - with value */}
{!trigger && value?.provider_name && (
<ToolItem
open={isShow}
icon={currentProvider?.icon || manifestIcon}
isMCPTool={currentProvider?.type === CollectionType.mcp}
providerName={value.provider_name}
providerShowName={value.provider_show_name}
toolLabel={value.tool_label || value.tool_name}
showSwitch={supportEnableSwitch}
switchValue={value.enabled}
onSwitchChange={handleEnabledChange}
onDelete={onDelete}
noAuth={currentProvider && currentTool && !currentProvider.is_team_authorization}
uninstalled={!currentProvider && inMarketPlace}
versionMismatch={currentProvider && inMarketPlace && !currentTool}
installInfo={manifest?.latest_package_identifier}
onInstall={handleInstall}
isError={(!currentProvider || !currentTool) && !inMarketPlace}
errorTip={renderErrorTip()}
/>
)}
</div>
)}
onClick={handleTriggerClick}
/>
<PopoverContent
placement={placement}
sideOffset={sideOffset}
alignOffset={alignOffset}
popupClassName="border-0 bg-transparent p-0 shadow-none backdrop-blur-none"
>
{trigger}
{/* Default trigger - no value */}
{!trigger && !value?.provider_name && (
<ToolTrigger
isConfigure
open={isShow}
value={value}
provider={currentProvider}
/>
)}
{/* Default trigger - with value */}
{!trigger && value?.provider_name && (
<ToolItem
open={isShow}
icon={currentProvider?.icon || manifestIcon}
isMCPTool={currentProvider?.type === CollectionType.mcp}
providerName={value.provider_name}
providerShowName={value.provider_show_name}
toolLabel={value.tool_label || value.tool_name}
showSwitch={supportEnableSwitch}
switchValue={value.enabled}
onSwitchChange={handleEnabledChange}
onDelete={onDelete}
noAuth={currentProvider && currentTool && !currentProvider.is_team_authorization}
uninstalled={!currentProvider && inMarketPlace}
versionMismatch={currentProvider && inMarketPlace && !currentTool}
installInfo={manifest?.latest_package_identifier}
onInstall={handleInstall}
isError={(!currentProvider || !currentTool) && !inMarketPlace}
errorTip={renderErrorTip()}
/>
)}
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className="z-10">
<div className={cn(
'relative max-h-[642px] min-h-20 w-[361px] rounded-xl',
'border-[0.5px] border-components-panel-border bg-components-panel-bg-blur',
@@ -239,8 +246,8 @@ const ToolSelector: FC<Props> = ({
onParamsFormChange={handleParamsFormChange}
/>
</div>
</PortalToFollowElemContent>
</PortalToFollowElem>
</PopoverContent>
</Popover>
)
}

28
web/app/components/plugins/plugin-page/filter-management/__tests__/category-filter.spec.tsx
View File

@@ -2,17 +2,7 @@ import { fireEvent, render, screen } from '@testing-library/react'
import * as React from 'react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
vi.mock('@/app/components/base/portal-to-follow-elem', () => ({
PortalToFollowElem: ({ children, open }: { children: React.ReactNode, open: boolean }) => (
<div data-testid="portal" data-open={open}>{children}</div>
),
PortalToFollowElemTrigger: ({ children, onClick }: { children: React.ReactNode, onClick: () => void }) => (
<div data-testid="portal-trigger" onClick={onClick}>{children}</div>
),
PortalToFollowElemContent: ({ children }: { children: React.ReactNode }) => (
<div data-testid="portal-content">{children}</div>
),
}))
vi.mock('@langgenius/dify-ui/popover', () => import('@/__mocks__/base-ui-popover'))
vi.mock('@langgenius/dify-ui/cn', () => ({
cn: (...args: unknown[]) => args.filter(Boolean).join(' '),
@@ -67,7 +57,7 @@ describe('CategoriesFilter', () => {
const mockOnChange = vi.fn()
render(<CategoriesFilter value={['tool']} onChange={mockOnChange} />)
const trigger = screen.getByTestId('portal-trigger')
const trigger = screen.getByTestId('popover-trigger')
const clearSvg = trigger.querySelector('svg')
fireEvent.click(clearSvg!)
expect(mockOnChange).toHaveBeenCalledWith([])
@@ -75,6 +65,7 @@ describe('CategoriesFilter', () => {
it('should render category options in dropdown', () => {
render(<CategoriesFilter value={[]} onChange={vi.fn()} />)
fireEvent.click(screen.getByTestId('popover-trigger'))
expect(screen.getByText('Tool'))!.toBeInTheDocument()
expect(screen.getByText('Model'))!.toBeInTheDocument()
@@ -85,6 +76,7 @@ describe('CategoriesFilter', () => {
const mockOnChange = vi.fn()
render(<CategoriesFilter value={[]} onChange={mockOnChange} />)
fireEvent.click(screen.getByTestId('popover-trigger'))
fireEvent.click(screen.getByText('Tool'))
expect(mockOnChange).toHaveBeenCalledWith(['tool'])
})
@@ -93,8 +85,20 @@ describe('CategoriesFilter', () => {
const mockOnChange = vi.fn()
render(<CategoriesFilter value={['tool']} onChange={mockOnChange} />)
fireEvent.click(screen.getByTestId('popover-trigger'))
const toolElements = screen.getAllByText('Tool')
fireEvent.click(toolElements[toolElements.length - 1]!)
expect(mockOnChange).toHaveBeenCalledWith([])
})
it('should filter categories by search text', () => {
render(<CategoriesFilter value={[]} onChange={vi.fn()} />)
fireEvent.click(screen.getByTestId('popover-trigger'))
fireEvent.change(screen.getByPlaceholderText('plugin.searchCategories'), { target: { value: 'mod' } })
expect(screen.queryByText('Tool')).not.toBeInTheDocument()
expect(screen.getByText('Model')).toBeInTheDocument()
expect(screen.queryByText('Extension')).not.toBeInTheDocument()
})
})

54
web/app/components/plugins/plugin-page/filter-management/__tests__/index.spec.tsx
View File

@@ -1,6 +1,7 @@
import type { Category, Tag } from '../constant'
import type { FilterState } from '../index'
import { act, fireEvent, render, renderHook, screen, waitFor } from '@testing-library/react'
import { createContext, useContext } from 'react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
// ==================== Imports (after mocks) ====================
@@ -68,19 +69,47 @@ vi.mock('../../../hooks', () => ({
}),
}))
// Track portal open state for testing
let mockPortalOpenState = false
type MockPopoverContextValue = {
open: boolean
onOpenChange?: (open: boolean) => void
}
vi.mock('@/app/components/base/portal-to-follow-elem', () => ({
PortalToFollowElem: ({ children, open }: { children: React.ReactNode, open: boolean }) => {
mockPortalOpenState = open
return <div data-testid="portal-container" data-open={open}>{children}</div>
},
PortalToFollowElemTrigger: ({ children, onClick }: { children: React.ReactNode, onClick: () => void }) => (
<div data-testid="portal-trigger" onClick={onClick}>{children}</div>
const MockPopoverContext = createContext<MockPopoverContextValue>({
open: false,
})
vi.mock('@langgenius/dify-ui/popover', () => ({
Popover: ({ children, open, onOpenChange }: {
children: React.ReactNode
open: boolean
onOpenChange?: (open: boolean) => void
}) => (
<MockPopoverContext.Provider value={{ open, onOpenChange }}>
<div data-testid="portal-container" data-open={open}>{children}</div>
</MockPopoverContext.Provider>
),
PortalToFollowElemContent: ({ children, className }: { children: React.ReactNode, className?: string }) => {
if (!mockPortalOpenState)
PopoverTrigger: ({ children, render, className }: {
children?: React.ReactNode
render?: React.ReactNode
className?: string
}) => {
const { open, onOpenChange } = useContext(MockPopoverContext)
return (
<div
data-testid="portal-trigger"
onClick={() => onOpenChange?.(!open)}
className={className}
>
{render ?? children}
</div>
)
},
PopoverContent: ({ children, className }: {
children: React.ReactNode
className?: string
}) => {
const { open } = useContext(MockPopoverContext)
if (!open)
return null
return <div data-testid="portal-content" className={className}>{children}</div>
},
@@ -457,7 +486,6 @@ describe('SearchBox Component', () => {
describe('CategoriesFilter Component', () => {
beforeEach(() => {
vi.clearAllMocks()
mockPortalOpenState = false
})
describe('Rendering', () => {
@@ -694,7 +722,6 @@ describe('CategoriesFilter Component', () => {
describe('TagFilter Component', () => {
beforeEach(() => {
vi.clearAllMocks()
mockPortalOpenState = false
})
describe('Rendering', () => {
@@ -857,7 +884,6 @@ describe('FilterManagement Component', () => {
beforeEach(() => {
vi.clearAllMocks()
mockInitFilters = createFilterState()
mockPortalOpenState = false
})
describe('Rendering', () => {

58
web/app/components/plugins/plugin-page/filter-management/__tests__/tag-filter.spec.tsx
View File

@@ -2,8 +2,6 @@ import { fireEvent, render, screen, within } from '@testing-library/react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import TagFilter from '../tag-filter'
let portalOpen = false
vi.mock('../../../hooks', () => ({
useTags: () => ({
tags: [
@@ -19,35 +17,17 @@ vi.mock('../../../hooks', () => ({
}),
}))
vi.mock('@/app/components/base/portal-to-follow-elem', () => ({
PortalToFollowElem: ({
children,
open,
}: {
children: React.ReactNode
open: boolean
}) => {
portalOpen = open
return <div>{children}</div>
},
PortalToFollowElemTrigger: ({
children,
onClick,
}: {
children: React.ReactNode
onClick: () => void
}) => <button data-testid="trigger" onClick={onClick}>{children}</button>,
PortalToFollowElemContent: ({
children,
}: {
children: React.ReactNode
}) => portalOpen ? <div data-testid="portal-content">{children}</div> : null,
}))
vi.mock('@langgenius/dify-ui/popover', () => import('@/__mocks__/base-ui-popover'))
describe('TagFilter', () => {
beforeEach(() => {
vi.clearAllMocks()
portalOpen = false
})
it('renders the all tags placeholder when nothing is selected', () => {
render(<TagFilter value={[]} onChange={vi.fn()} />)
expect(screen.getByText('pluginTags.allTags')).toBeInTheDocument()
})
it('renders selected tag labels and the overflow counter', () => {
@@ -61,8 +41,8 @@ describe('TagFilter', () => {
const onChange = vi.fn()
render(<TagFilter value={['agent']} onChange={onChange} />)
fireEvent.click(screen.getByTestId('trigger'))
const portal = screen.getByTestId('portal-content')
fireEvent.click(screen.getByTestId('popover-trigger'))
const portal = screen.getByTestId('popover-content')
fireEvent.change(screen.getByPlaceholderText('pluginTags.searchTags'), { target: { value: 'ra' } })
@@ -73,4 +53,24 @@ describe('TagFilter', () => {
expect(onChange).toHaveBeenCalledWith(['agent', 'rag'])
})
it('clears all selected tags when the clear icon is clicked', () => {
const onChange = vi.fn()
render(<TagFilter value={['agent']} onChange={onChange} />)
const trigger = screen.getByTestId('popover-trigger')
fireEvent.click(trigger.querySelector('svg')!)
expect(onChange).toHaveBeenCalledWith([])
})
it('removes a selected tag when clicking the same option again', () => {
const onChange = vi.fn()
render(<TagFilter value={['agent']} onChange={onChange} />)
fireEvent.click(screen.getByTestId('popover-trigger'))
fireEvent.click(within(screen.getByTestId('popover-content')).getByText('Agent'))
expect(onChange).toHaveBeenCalledWith([])
})
})

103
web/app/components/plugins/plugin-page/filter-management/category-filter.tsx
View File

@@ -1,6 +1,11 @@
'use client'
import { cn } from '@langgenius/dify-ui/cn'
import {
Popover,
PopoverContent,
PopoverTrigger,
} from '@langgenius/dify-ui/popover'
import {
RiArrowDownSLine,
RiCloseCircleFill,
@@ -9,11 +14,6 @@ import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import Checkbox from '@/app/components/base/checkbox'
import Input from '@/app/components/base/input'
import {
PortalToFollowElem,
PortalToFollowElemContent,
PortalToFollowElemTrigger,
} from '@/app/components/base/portal-to-follow-elem'
import { useCategories } from '../../hooks'
type CategoriesFilterProps = {
@@ -38,61 +38,64 @@ const CategoriesFilter = ({
const selectedTagsLength = value.length
return (
<PortalToFollowElem
placement="bottom-start"
offset={{
mainAxis: 4,
}}
<Popover
open={open}
onOpenChange={setOpen}
>
<PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
<div className={cn(
'flex h-8 cursor-pointer items-center rounded-lg bg-components-input-bg-normal px-2 py-1 text-text-tertiary hover:bg-state-base-hover-alt',
selectedTagsLength && 'text-text-secondary',
open && 'bg-state-base-hover',
)}
>
<PopoverTrigger
nativeButton={false}
render={(
<div className={cn(
'flex items-center p-1 system-sm-medium',
'flex h-8 cursor-pointer items-center rounded-lg bg-components-input-bg-normal px-2 py-1 text-text-tertiary hover:bg-state-base-hover-alt',
selectedTagsLength && 'text-text-secondary',
open && 'bg-state-base-hover',
)}
>
<div className={cn(
'flex items-center p-1 system-sm-medium',
)}
>
{
!selectedTagsLength && t('allCategories', { ns: 'plugin' })
}
{
!!selectedTagsLength && value.map(val => categoriesMap[val]!.label).slice(0, 2).join(',')
}
{
selectedTagsLength > 2 && (
<div className="ml-1 system-xs-medium text-text-tertiary">
+
{selectedTagsLength - 2}
</div>
)
}
</div>
{
!selectedTagsLength && t('allCategories', { ns: 'plugin' })
!!selectedTagsLength && (
<RiCloseCircleFill
className="h-4 w-4 cursor-pointer text-text-quaternary"
onClick={
(e) => {
e.stopPropagation()
onChange([])
}
}
/>
)
}
{
!!selectedTagsLength && value.map(val => categoriesMap[val]!.label).slice(0, 2).join(',')
}
{
selectedTagsLength > 2 && (
<div className="ml-1 system-xs-medium text-text-tertiary">
+
{selectedTagsLength - 2}
</div>
!selectedTagsLength && (
<RiArrowDownSLine className="h-4 w-4" />
)
}
</div>
{
!!selectedTagsLength && (
<RiCloseCircleFill
className="h-4 w-4 cursor-pointer text-text-quaternary"
onClick={
(e) => {
e.stopPropagation()
onChange([])
}
}
/>
)
}
{
!selectedTagsLength && (
<RiArrowDownSLine className="h-4 w-4" />
)
}
</div>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className="z-10">
)}
/>
<PopoverContent
placement="bottom-start"
sideOffset={4}
popupClassName="border-none bg-transparent shadow-none"
>
<div className="w-[240px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-xs">
<div className="p-2 pb-1">
<Input
@@ -122,8 +125,8 @@ const CategoriesFilter = ({
}
</div>
</div>
</PortalToFollowElemContent>
</PortalToFollowElem>
</PopoverContent>
</Popover>
)
}

96
web/app/components/plugins/plugin-page/filter-management/tag-filter.tsx
View File

@@ -1,6 +1,11 @@
'use client'
import { cn } from '@langgenius/dify-ui/cn'
import {
Popover,
PopoverContent,
PopoverTrigger,
} from '@langgenius/dify-ui/popover'
import {
RiArrowDownSLine,
RiCloseCircleFill,
@@ -9,11 +14,6 @@ import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import Checkbox from '@/app/components/base/checkbox'
import Input from '@/app/components/base/input'
import {
PortalToFollowElem,
PortalToFollowElemContent,
PortalToFollowElemTrigger,
} from '@/app/components/base/portal-to-follow-elem'
import { useTags } from '../../hooks'
type TagsFilterProps = {
@@ -38,56 +38,62 @@ const TagsFilter = ({
const selectedTagsLength = value.length
return (
<PortalToFollowElem
placement="bottom-start"
offset={{
mainAxis: 4,
}}
<Popover
open={open}
onOpenChange={setOpen}
>
<PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
<div className={cn(
'flex h-8 cursor-pointer items-center rounded-lg bg-components-input-bg-normal px-2 py-1 text-text-tertiary select-none hover:bg-state-base-hover-alt',
selectedTagsLength && 'text-text-secondary',
open && 'bg-state-base-hover',
)}
>
<PopoverTrigger
nativeButton={false}
render={(
<div className={cn(
'flex items-center p-1 system-sm-medium',
'flex h-8 cursor-pointer items-center rounded-lg bg-components-input-bg-normal px-2 py-1 text-text-tertiary select-none hover:bg-state-base-hover-alt',
selectedTagsLength && 'text-text-secondary',
open && 'bg-state-base-hover',
)}
>
<div className={cn(
'flex items-center p-1 system-sm-medium',
)}
>
{
!selectedTagsLength && t('allTags', { ns: 'pluginTags' })
}
{
!!selectedTagsLength && value.map(val => getTagLabel(val)).slice(0, 2).join(',')
}
{
selectedTagsLength > 2 && (
<div className="ml-1 system-xs-medium text-text-tertiary">
+
{selectedTagsLength - 2}
</div>
)
}
</div>
{
!selectedTagsLength && t('allTags', { ns: 'pluginTags' })
!!selectedTagsLength && (
<RiCloseCircleFill
className="h-4 w-4 cursor-pointer text-text-quaternary"
onClick={(e) => {
e.stopPropagation()
onChange([])
}}
/>
)
}
{
!!selectedTagsLength && value.map(val => getTagLabel(val)).slice(0, 2).join(',')
}
{
selectedTagsLength > 2 && (
<div className="ml-1 system-xs-medium text-text-tertiary">
+
{selectedTagsLength - 2}
</div>
!selectedTagsLength && (
<RiArrowDownSLine className="h-4 w-4" />
)
}
</div>
{
!!selectedTagsLength && (
<RiCloseCircleFill
className="h-4 w-4 cursor-pointer text-text-quaternary"
onClick={() => onChange([])}
/>
)
}
{
!selectedTagsLength && (
<RiArrowDownSLine className="h-4 w-4" />
)
}
</div>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className="z-10">
)}
/>
<PopoverContent
placement="bottom-start"
sideOffset={4}
popupClassName="border-none bg-transparent shadow-none"
>
<div className="w-[240px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-xs">
<div className="p-2 pb-1">
<Input
@@ -117,8 +123,8 @@ const TagsFilter = ({
}
</div>
</div>
</PortalToFollowElemContent>
</PortalToFollowElem>
</PopoverContent>
</Popover>
)
}

38
web/app/components/rag-pipeline/components/rag-pipeline-header/__tests__/index.spec.tsx
View File

@@ -192,27 +192,6 @@ vi.mock('ahooks', () => ({
useKeyPress: vi.fn(),
}))
let portalOpenState = false
vi.mock('@/app/components/base/portal-to-follow-elem', () => ({
PortalToFollowElem: ({ children, open, onOpenChange: _onOpenChange }: PropsWithChildren<{
open: boolean
onOpenChange: (open: boolean) => void
placement?: string
offset?: unknown
}>) => {
portalOpenState = open
return <div data-testid="portal-elem" data-open={open}>{children}</div>
},
PortalToFollowElemTrigger: ({ children, onClick }: PropsWithChildren<{ onClick?: () => void }>) => (
<div data-testid="portal-trigger" onClick={onClick}>{children}</div>
),
PortalToFollowElemContent: ({ children }: PropsWithChildren) => {
if (!portalOpenState)
return null
return <div data-testid="portal-content">{children}</div>
},
}))
vi.mock('../../../publish-as-knowledge-pipeline-modal', () => ({
default: ({ onConfirm, onCancel }: {
onConfirm: (name: string, icon: unknown, description?: string) => void
@@ -229,7 +208,6 @@ vi.mock('../../../publish-as-knowledge-pipeline-modal', () => ({
describe('RagPipelineHeader', () => {
beforeEach(() => {
vi.clearAllMocks()
portalOpenState = false
mockStoreState = {
pipelineId: 'test-pipeline-id',
showDebugAndPreviewPanel: false,
@@ -351,7 +329,6 @@ describe('InputFieldButton', () => {
describe('Publisher', () => {
beforeEach(() => {
vi.clearAllMocks()
portalOpenState = false
})
describe('Rendering', () => {
@@ -367,9 +344,9 @@ describe('Publisher', () => {
expect(button)!.toHaveClass('px-2')
})
it('should render portal trigger element', () => {
it('should render publish trigger button', () => {
render(<Publisher />)
expect(screen.getByTestId('portal-trigger'))!.toBeInTheDocument()
expect(screen.getByRole('button', { name: /workflow\.common\.publish/i }))!.toBeInTheDocument()
})
})
@@ -377,7 +354,7 @@ describe('Publisher', () => {
it('should call handleSyncWorkflowDraft when opening', () => {
render(<Publisher />)
fireEvent.click(screen.getByTestId('portal-trigger'))
fireEvent.click(screen.getByRole('button', { name: /workflow\.common\.publish/i }))
expect(mockHandleSyncWorkflowDraft).toHaveBeenCalledWith(true)
})
@@ -385,12 +362,14 @@ describe('Publisher', () => {
it('should toggle open state when trigger clicked', () => {
render(<Publisher />)
const portal = screen.getByTestId('portal-elem')
expect(portal)!.toHaveAttribute('data-open', 'false')
const trigger = screen.getByRole('button', { name: /workflow\.common\.publish/i })
expect(trigger)!.toHaveAttribute('aria-expanded', 'false')
fireEvent.click(screen.getByTestId('portal-trigger'))
fireEvent.click(trigger)
expect(mockHandleSyncWorkflowDraft).toHaveBeenCalled()
expect(trigger)!.toHaveAttribute('aria-expanded', 'true')
expect(screen.getByText(/workflow\.common\.publishUpdate/i))!.toBeInTheDocument()
})
})
})
@@ -978,7 +957,6 @@ describe('RunMode', () => {
describe('Integration', () => {
beforeEach(() => {
vi.clearAllMocks()
portalOpenState = false
mockStoreState = {
pipelineId: 'test-pipeline-id',
showDebugAndPreviewPanel: false,

61
web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/__tests__/index.spec.tsx
View File

@@ -6,6 +6,40 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
import Publisher from '../index'
import Popup from '../popup'
vi.mock('@langgenius/dify-ui/popover', async () => await import('@/__mocks__/base-ui-popover'))
vi.mock('@langgenius/dify-ui/button', () => ({
Button: ({ children, onClick, disabled, variant, className }: Record<string, unknown>) => (
<button
onClick={onClick as (() => void) | undefined}
disabled={disabled as boolean | undefined}
data-variant={variant as string | undefined}
className={className as string | undefined}
>
{children as React.ReactNode}
</button>
),
}))
vi.mock('@langgenius/dify-ui/alert-dialog', () => ({
AlertDialog: ({ children, open, onOpenChange }: { children: React.ReactNode, open?: boolean, onOpenChange?: (open: boolean) => void }) => (
open
? (
<div role="alertdialog">
{children}
<button data-testid="alert-dialog-close" onClick={() => onOpenChange?.(false)}>
Close
</button>
</div>
)
: null
),
AlertDialogActions: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
AlertDialogCancelButton: ({ children }: { children: React.ReactNode }) => <button>{children}</button>,
AlertDialogConfirmButton: ({ children, onClick, disabled }: Record<string, unknown>) => <button onClick={onClick as (() => void) | undefined} disabled={disabled as boolean | undefined}>{children as React.ReactNode}</button>,
AlertDialogContent: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
AlertDialogDescription: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
AlertDialogTitle: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
}))
const mockPush = vi.fn()
vi.mock('@/next/navigation', () => ({
useParams: () => ({ datasetId: 'test-dataset-id' }),
@@ -60,7 +94,8 @@ vi.mock('@/context/dataset-detail', () => ({
const mockSetShowPricingModal = vi.fn()
vi.mock('@/context/modal-context', () => ({
useModalContextSelector: () => mockSetShowPricingModal,
useModalContextSelector: <T,>(selector: (state: { setShowPricingModal: typeof mockSetShowPricingModal }) => T): T =>
selector({ setShowPricingModal: mockSetShowPricingModal }),
}))
const mockIsAllowPublishAsCustomKnowledgePipelineTemplate = vi.fn(() => true)
@@ -200,8 +235,7 @@ describe('publisher', () => {
it('should render portal element in closed state by default', () => {
renderWithQueryClient(<Publisher />)
const trigger = screen.getByText('workflow.common.publish').closest('[data-state]')
expect(trigger).toHaveAttribute('data-state', 'closed')
expect(screen.getByTestId('popover')).toHaveAttribute('data-open', 'false')
expect(screen.queryByText('workflow.common.publishUpdate')).not.toBeInTheDocument()
})
@@ -277,6 +311,25 @@ describe('publisher', () => {
expect(screen.getByText('workflow.common.publishUpdate')).toBeInTheDocument()
})
})
it('should close the outer popover before opening publish-as follow-up flow', async () => {
mockPublishedAt.mockReturnValue(1700000000)
mockIsAllowPublishAsCustomKnowledgePipelineTemplate.mockReturnValue(false)
renderWithQueryClient(<Publisher />)
fireEvent.click(screen.getByText('workflow.common.publish'))
await waitFor(() => {
expect(screen.getByText('pipeline.common.publishAs')).toBeInTheDocument()
})
fireEvent.click(screen.getByText('pipeline.common.publishAs'))
await waitFor(() => {
expect(screen.queryByText('pipeline.common.publishAs')).not.toBeInTheDocument()
})
expect(mockSetShowPricingModal).toHaveBeenCalled()
})
})
})
@@ -688,7 +741,7 @@ describe('publisher', () => {
expect(screen.getByText('pipeline.common.confirmPublish')).toBeInTheDocument()
})
fireEvent.click(screen.getByRole('button', { name: 'common.operation.cancel' }))
fireEvent.click(screen.getByTestId('alert-dialog-close'))
await waitFor(() => {
expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument()

96
web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/__tests__/popup.spec.tsx
View File

@@ -3,6 +3,31 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
import Popup from '../popup'
vi.mock('@langgenius/dify-ui/alert-dialog', () => ({
AlertDialog: ({ children, open, onOpenChange }: { children: React.ReactNode, open?: boolean, onOpenChange?: (open: boolean) => void }) => (
open
? (
<div role="alertdialog">
{children}
<button data-testid="alert-dialog-close" onClick={() => onOpenChange?.(false)}>
Close
</button>
</div>
)
: null
),
AlertDialogActions: ({ children }: { children?: React.ReactNode }) => <div>{children}</div>,
AlertDialogCancelButton: ({ children }: { children?: React.ReactNode }) => <button>{children}</button>,
AlertDialogConfirmButton: ({ children, onClick, disabled }: {
children?: React.ReactNode
onClick?: () => void
disabled?: boolean
}) => <button onClick={onClick} disabled={disabled}>{children}</button>,
AlertDialogContent: ({ children }: { children?: React.ReactNode }) => <div>{children}</div>,
AlertDialogDescription: ({ children }: { children?: React.ReactNode }) => <div>{children}</div>,
AlertDialogTitle: ({ children }: { children?: React.ReactNode }) => <div>{children}</div>,
}))
const mockPublishWorkflow = vi.fn().mockResolvedValue({ created_at: '2024-01-01T00:00:00Z' })
const mockPublishAsCustomizedPipeline = vi.fn().mockResolvedValue({})
const toastMocks = vi.hoisted(() => ({
@@ -36,6 +61,8 @@ let mockPublishedAt: string | undefined = '2024-01-01T00:00:00Z'
let mockDraftUpdatedAt: string | undefined = '2024-06-01T00:00:00Z'
let mockPipelineId: string | undefined = 'pipeline-123'
let mockIsAllowPublishAsCustom = true
const mockUseBoolean = vi.hoisted(() => vi.fn())
const mockUseKeyPress = vi.hoisted(() => vi.fn())
vi.mock('@/next/navigation', () => ({
useParams: () => ({ datasetId: 'ds-123' }),
useRouter: () => ({ push: mockPush }),
@@ -48,14 +75,8 @@ vi.mock('@/next/link', () => ({
}))
vi.mock('ahooks', () => ({
useBoolean: (initial: boolean) => {
const state = { value: initial }
return [state.value, {
setFalse: vi.fn(),
setTrue: vi.fn(),
}]
},
useKeyPress: vi.fn(),
useBoolean: (initial: boolean) => mockUseBoolean(initial),
useKeyPress: (...args: unknown[]) => mockUseKeyPress(...args),
}))
vi.mock('@/app/components/workflow/store', () => ({
@@ -126,7 +147,8 @@ vi.mock('@/context/i18n', () => ({
}))
vi.mock('@/context/modal-context', () => ({
useModalContextSelector: () => mockSetShowPricingModal,
useModalContextSelector: <T,>(selector: (state: { setShowPricingModal: typeof mockSetShowPricingModal }) => T) =>
selector({ setShowPricingModal: mockSetShowPricingModal }),
}))
vi.mock('@/context/provider-context', () => ({
@@ -194,6 +216,11 @@ describe('Popup', () => {
mockDraftUpdatedAt = '2024-06-01T00:00:00Z'
mockPipelineId = 'pipeline-123'
mockIsAllowPublishAsCustom = true
mockUseBoolean.mockImplementation((initial: boolean) => [initial, {
setFalse: vi.fn(),
setTrue: vi.fn(),
}])
mockUseKeyPress.mockImplementation(() => {})
})
afterEach(() => {
@@ -289,12 +316,61 @@ describe('Popup', () => {
describe('Publish As Knowledge Pipeline', () => {
it('should show pricing modal when not allowed', () => {
mockIsAllowPublishAsCustom = false
render(<Popup />)
const onRequestClose = vi.fn()
render(<Popup onRequestClose={onRequestClose} />)
fireEvent.click(screen.getByText('pipeline.common.publishAs'))
expect(onRequestClose).toHaveBeenCalledTimes(1)
expect(mockSetShowPricingModal).toHaveBeenCalled()
})
it('should request closing the outer popover before opening publish-as modal', () => {
const onRequestClose = vi.fn()
render(<Popup onRequestClose={onRequestClose} />)
fireEvent.click(screen.getByText('pipeline.common.publishAs'))
expect(onRequestClose).toHaveBeenCalledTimes(1)
})
})
describe('Overlay cleanup', () => {
it('should close confirm dialog when alert dialog requests close', () => {
const hideConfirm = vi.fn()
mockUseBoolean
.mockImplementationOnce(() => [true, { setFalse: hideConfirm, setTrue: vi.fn() }])
.mockImplementationOnce((initial: boolean) => [initial, { setFalse: vi.fn(), setTrue: vi.fn() }])
.mockImplementationOnce((initial: boolean) => [initial, { setFalse: vi.fn(), setTrue: vi.fn() }])
.mockImplementationOnce((initial: boolean) => [initial, { setFalse: vi.fn(), setTrue: vi.fn() }])
render(<Popup />)
fireEvent.click(screen.getByTestId('alert-dialog-close'))
expect(hideConfirm).toHaveBeenCalledTimes(1)
})
})
describe('Publish params', () => {
it('should publish as template with empty pipeline id fallback', async () => {
mockPipelineId = undefined
mockUseBoolean
.mockImplementationOnce((initial: boolean) => [initial, { setFalse: vi.fn(), setTrue: vi.fn() }])
.mockImplementationOnce((initial: boolean) => [initial, { setFalse: vi.fn(), setTrue: vi.fn() }])
.mockImplementationOnce(() => [true, { setFalse: vi.fn(), setTrue: vi.fn() }])
.mockImplementationOnce((initial: boolean) => [initial, { setFalse: vi.fn(), setTrue: vi.fn() }])
render(<Popup />)
fireEvent.click(screen.getByTestId('publish-as-confirm'))
expect(mockPublishAsCustomizedPipeline).toHaveBeenCalledWith({
pipelineId: '',
name: 'My Pipeline',
icon_info: { icon_type: 'emoji' },
description: 'desc',
})
})
})
describe('Time formatting', () => {

49
web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/index.tsx
View File

@@ -1,4 +1,5 @@
import { Button } from '@langgenius/dify-ui/button'
import { Popover, PopoverContent, PopoverTrigger } from '@langgenius/dify-ui/popover'
import { RiArrowDownSLine } from '@remixicon/react'
import {
memo,
@@ -6,11 +7,6 @@ import {
useState,
} from 'react'
import { useTranslation } from 'react-i18next'
import {
PortalToFollowElem,
PortalToFollowElemContent,
PortalToFollowElemTrigger,
} from '@/app/components/base/portal-to-follow-elem'
import { useNodesSyncDraft } from '@/app/components/workflow/hooks'
import Popup from './popup'
@@ -26,28 +22,31 @@ const Publisher = () => {
}, [handleSyncWorkflowDraft])
return (
<PortalToFollowElem
<Popover
open={open}
onOpenChange={setOpen}
placement="bottom-end"
offset={{
mainAxis: 4,
crossAxis: 40,
}}
onOpenChange={handleOpenChange}
>
<PortalToFollowElemTrigger onClick={() => handleOpenChange(!open)}>
<Button
className="px-2"
variant="primary"
>
<span className="pl-1">{t('common.publish', { ns: 'workflow' })}</span>
<RiArrowDownSLine className="h-4 w-4" />
</Button>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className="z-11">
<Popup />
</PortalToFollowElemContent>
</PortalToFollowElem>
<PopoverTrigger
nativeButton
render={(
<Button
className="px-2"
variant="primary"
>
<span className="pl-1">{t('common.publish', { ns: 'workflow' })}</span>
<RiArrowDownSLine className="h-4 w-4" />
</Button>
)}
/>
<PopoverContent
placement="bottom-end"
sideOffset={4}
alignOffset={40}
popupClassName="border-none bg-transparent shadow-none"
>
<Popup onRequestClose={() => handleOpenChange(false)} />
</PopoverContent>
</Popover>
)
}

14
web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx
View File

@@ -39,7 +39,11 @@ import { usePublishWorkflow } from '@/service/use-workflow'
import PublishAsKnowledgePipelineModal from '../../publish-as-knowledge-pipeline-modal'
const PUBLISH_SHORTCUT = ['ctrl', '⇧', 'P']
const Popup = () => {
type PopupProps = {
onRequestClose?: () => void
}
const Popup = ({ onRequestClose }: PopupProps) => {
const { t } = useTranslation()
const { datasetId } = useParams()
const { push } = useRouter()
@@ -70,6 +74,7 @@ const Popup = () => {
const checked = await handleCheckBeforePublish()
if (checked) {
if (!publishedAt && !confirmVisible) {
onRequestClose?.()
showConfirm()
return
}
@@ -114,7 +119,7 @@ const Popup = () => {
if (confirmVisible)
hideConfirm()
}
}, [publishing, handleCheckBeforePublish, publishedAt, confirmVisible, showPublishing, publishWorkflow, pipelineId, datasetId, showConfirm, t, workflowStore, mutateDatasetRes, invalidPublishedPipelineInfo, invalidDatasetList, hidePublishing, hideConfirm])
}, [publishing, handleCheckBeforePublish, publishedAt, confirmVisible, showPublishing, publishWorkflow, pipelineId, datasetId, showConfirm, t, workflowStore, mutateDatasetRes, invalidPublishedPipelineInfo, invalidDatasetList, hidePublishing, hideConfirm, onRequestClose])
useKeyPress(`${getKeyboardKeyCodeBySystem('ctrl')}.shift.p`, (e) => {
e.preventDefault()
if (published)
@@ -155,13 +160,14 @@ const Popup = () => {
hidePublishingAsCustomizedPipeline()
hidePublishAsKnowledgePipelineModal()
}
}, [showPublishingAsCustomizedPipeline, publishAsCustomizedPipeline, pipelineId, t, invalidCustomizedTemplateList, hidePublishingAsCustomizedPipeline, hidePublishAsKnowledgePipelineModal])
}, [showPublishingAsCustomizedPipeline, publishAsCustomizedPipeline, pipelineId, t, invalidCustomizedTemplateList, hidePublishingAsCustomizedPipeline, hidePublishAsKnowledgePipelineModal, docLink])
const handleClickPublishAsKnowledgePipeline = useCallback(() => {
onRequestClose?.()
if (!isAllowPublishAsCustomKnowledgePipelineTemplate)
setShowPricingModal()
else
setShowPublishAsKnowledgePipelineModal()
}, [isAllowPublishAsCustomKnowledgePipelineTemplate, setShowPublishAsKnowledgePipelineModal, setShowPricingModal])
}, [isAllowPublishAsCustomKnowledgePipelineTemplate, onRequestClose, setShowPublishAsKnowledgePipelineModal, setShowPricingModal])
return (
<div className={cn('rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl shadow-shadow-shadow-5', isAllowPublishAsCustomKnowledgePipelineTemplate ? 'w-[360px]' : 'w-[400px]')}>
<div className="p-4 pt-3">

49
web/app/components/workflow/block-selector/__tests__/main.spec.tsx
View File

@@ -86,4 +86,53 @@ describe('NodeSelector', () => {
expect(reopenedInput.value).toBe('')
expect(screen.getByText('End')).toBeInTheDocument()
})
it('does not open or emit open changes when disabled', async () => {
const user = userEvent.setup()
const onOpenChange = vi.fn()
renderWorkflowComponent(
<NodeSelector
disabled
onOpenChange={onOpenChange}
onSelect={vi.fn()}
blocks={[createBlock(BlockEnum.LLM, 'LLM')]}
availableBlocksTypes={[BlockEnum.LLM]}
trigger={open => (
<button type="button">
{open ? 'selector-open' : 'selector-closed'}
</button>
)}
/>,
)
await user.click(screen.getByRole('button', { name: 'selector-closed' }))
expect(onOpenChange).not.toHaveBeenCalled()
expect(screen.queryByPlaceholderText('workflow.tabs.searchBlock')).not.toBeInTheDocument()
})
it('preserves the child trigger click handler when rendered as child', async () => {
const user = userEvent.setup()
const onTriggerClick = vi.fn()
renderWorkflowComponent(
<NodeSelector
asChild
onSelect={vi.fn()}
blocks={[createBlock(BlockEnum.LLM, 'LLM')]}
availableBlocksTypes={[BlockEnum.LLM]}
trigger={() => (
<button type="button" onClick={onTriggerClick}>
open-selector
</button>
)}
/>,
)
await user.click(screen.getByRole('button', { name: 'open-selector' }))
expect(onTriggerClick).toHaveBeenCalledTimes(1)
expect(screen.getByPlaceholderText('workflow.tabs.searchBlock')).toBeInTheDocument()
})
})

103
web/app/components/workflow/block-selector/main.tsx
View File

@@ -5,6 +5,7 @@ import type {
import type {
FC,
MouseEventHandler,
MouseEvent as ReactMouseEvent,
} from 'react'
import type {
CommonNodeType,
@@ -12,6 +13,12 @@ import type {
OnSelectBlock,
ToolWithProvider,
} from '../types'
import {
Popover,
PopoverContent,
PopoverTrigger,
} from '@langgenius/dify-ui/popover'
import * as React from 'react'
import {
memo,
useCallback,
@@ -23,11 +30,6 @@ import {
Plus02,
} from '@/app/components/base/icons/src/vender/line/general'
import Input from '@/app/components/base/input'
import {
PortalToFollowElem,
PortalToFollowElemContent,
PortalToFollowElemTrigger,
} from '@/app/components/base/portal-to-follow-elem'
import SearchBox from '@/app/components/plugins/marketplace/search-box'
import useNodes from '@/app/components/workflow/store/workflow/use-nodes'
import { BlockEnum, isTriggerNode } from '../types'
@@ -121,6 +123,9 @@ const NodeSelector: FC<NodeSelectorProps> = ({
const canSelectUserInput = allowUserInputSelection ?? defaultAllowUserInputSelection
const open = openFromProps === undefined ? localOpen : openFromProps
const handleOpenChange = useCallback((newOpen: boolean) => {
if (disabled)
return
setLocalOpen(newOpen)
if (!newOpen)
@@ -128,13 +133,10 @@ const NodeSelector: FC<NodeSelectorProps> = ({
if (onOpenChange)
onOpenChange(newOpen)
}, [onOpenChange])
const handleTrigger = useCallback<MouseEventHandler<HTMLDivElement>>((e) => {
if (disabled)
return
}, [disabled, onOpenChange])
const handleTrigger = useCallback<MouseEventHandler<HTMLElement>>((e) => {
e.stopPropagation()
handleOpenChange(!open)
}, [handleOpenChange, open, disabled])
}, [])
const handleSelect = useCallback<OnSelectBlock>((type, pluginDefaultValue) => {
handleOpenChange(false)
@@ -174,36 +176,61 @@ const NodeSelector: FC<NodeSelectorProps> = ({
return ''
}, [activeTab, t])
const defaultTriggerElement = (
<div
className={`
z-10 flex h-4
w-4 cursor-pointer items-center justify-center rounded-full bg-components-button-primary-bg text-text-primary-on-surface hover:bg-components-button-primary-bg-hover
${triggerClassName?.(open)}
`}
style={triggerStyle}
>
<Plus02 className="h-2.5 w-2.5" />
</div>
)
const triggerElement = trigger ? trigger(open) : defaultTriggerElement
const triggerElementProps = React.isValidElement(triggerElement)
? (triggerElement.props as {
onClick?: MouseEventHandler<HTMLElement>
})
: null
const resolvedTriggerElement = asChild && React.isValidElement(triggerElement)
? React.cloneElement(
triggerElement as React.ReactElement<{
onClick?: MouseEventHandler<HTMLElement>
}>,
{
onClick: (e: ReactMouseEvent<HTMLElement>) => {
handleTrigger(e)
if (typeof triggerElementProps?.onClick === 'function')
triggerElementProps.onClick(e)
},
},
)
: (
<div className={triggerInnerClassName} onClick={handleTrigger}>
{triggerElement}
</div>
)
const resolvedOffset = typeof offset === 'number' || typeof offset === 'function' ? undefined : offset
const sideOffset = typeof offset === 'number' ? offset : (resolvedOffset?.mainAxis ?? 0)
const alignOffset = typeof offset === 'number' ? 0 : (resolvedOffset?.crossAxis ?? 0)
const nativeButton = asChild
&& React.isValidElement(triggerElement)
&& (typeof triggerElement.type !== 'string' || triggerElement.type === 'button')
return (
<PortalToFollowElem
placement={placement}
offset={offset}
<Popover
open={open}
onOpenChange={handleOpenChange}
>
<PortalToFollowElemTrigger
asChild={asChild}
onClick={handleTrigger}
className={triggerInnerClassName}
<PopoverTrigger nativeButton={nativeButton} render={resolvedTriggerElement as React.ReactElement} />
<PopoverContent
placement={placement}
sideOffset={sideOffset}
alignOffset={alignOffset}
popupClassName="border-none bg-transparent shadow-none"
>
{
trigger
? trigger(open)
: (
<div
className={`
z-10 flex h-4
w-4 cursor-pointer items-center justify-center rounded-full bg-components-button-primary-bg text-text-primary-on-surface hover:bg-components-button-primary-bg-hover
${triggerClassName?.(open)}
`}
style={triggerStyle}
>
<Plus02 className="h-2.5 w-2.5" />
</div>
)
}
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className="z-1002">
<div className={`rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg ${popupClassName}`}>
<Tabs
tabs={tabs}
@@ -270,8 +297,8 @@ const NodeSelector: FC<NodeSelectorProps> = ({
forceShowStartContent={forceShowStartContent}
/>
</div>
</PortalToFollowElemContent>
</PortalToFollowElem>
</PopoverContent>
</Popover>
)
}

84
web/app/components/workflow/header/__tests__/view-history.spec.tsx
View File

@@ -10,14 +10,13 @@ const mockFormatTimeFromNow = vi.fn((value: number) => `from-now:${value}`)
const mockCloseAllInputFieldPanels = vi.fn()
const mockHandleNodesCancelSelected = vi.fn()
const mockHandleCancelDebugAndPreviewPanel = vi.fn()
const mockHandleBackupDraft = vi.fn()
const mockFormatWorkflowRunIdentifier = vi.fn((finishedAt?: number, status?: string) => ` (${status || finishedAt || 'unknown'})`)
let mockIsChatMode = false
vi.mock('../../hooks', async () => {
const actual = await vi.importActual<typeof import('../../hooks')>('../../hooks')
vi.mock('../../hooks', () => {
return {
...actual,
useIsChatMode: () => mockIsChatMode,
useNodesInteractions: () => ({
handleNodesCancelSelected: mockHandleNodesCancelSelected,
@@ -25,6 +24,9 @@ vi.mock('../../hooks', async () => {
useWorkflowInteractions: () => ({
handleCancelDebugAndPreviewPanel: mockHandleCancelDebugAndPreviewPanel,
}),
useWorkflowRun: () => ({
handleBackupDraft: mockHandleBackupDraft,
}),
}
})
@@ -48,38 +50,46 @@ vi.mock('@/app/components/base/loading', () => ({
default: () => <div data-testid="loading" />,
}))
vi.mock('@/app/components/base/tooltip', () => ({
default: ({ children }: { children?: React.ReactNode }) => <>{children}</>,
vi.mock('@langgenius/dify-ui/toast', () => ({
toast: {
success: vi.fn(),
error: vi.fn(),
warning: vi.fn(),
info: vi.fn(),
},
}))
vi.mock('@/app/components/base/portal-to-follow-elem', () => {
const PortalContext = React.createContext({ open: false })
vi.mock('@langgenius/dify-ui/button', () => ({
Button: ({
children,
...props
}: React.ButtonHTMLAttributes<HTMLButtonElement>) => (
<button {...props}>
{children}
</button>
),
}))
return {
PortalToFollowElem: ({
children,
open,
}: {
children?: React.ReactNode
open: boolean
}) => <PortalContext.Provider value={{ open }}>{children}</PortalContext.Provider>,
PortalToFollowElemTrigger: ({
children,
onClick,
}: {
children?: React.ReactNode
onClick?: () => void
}) => <div data-testid="portal-trigger" onClick={onClick}>{children}</div>,
PortalToFollowElemContent: ({
children,
}: {
children?: React.ReactNode
}) => {
const { open } = React.useContext(PortalContext)
return open ? <div data-testid="portal-content">{children}</div> : null
},
}
})
vi.mock('@langgenius/dify-ui/tooltip', () => ({
Tooltip: ({ children }: { children?: React.ReactNode }) => <>{children}</>,
TooltipTrigger: ({
children,
render,
}: {
children?: React.ReactNode
render?: React.ReactElement
}) => {
if (render && React.isValidElement(render)) {
const renderElement = render as React.ReactElement<{ children?: React.ReactNode }>
return React.cloneElement(renderElement, renderElement.props, children)
}
return <>{children}</>
},
TooltipContent: ({ children }: { children?: React.ReactNode }) => <>{children}</>,
}))
vi.mock('@langgenius/dify-ui/popover', () => import('@/__mocks__/base-ui-popover'))
vi.mock('../../utils', async () => {
const actual = await vi.importActual<typeof import('../../utils')>('../../utils')
@@ -130,7 +140,7 @@ describe('ViewHistory', () => {
})
expect(mockUseWorkflowRunHistory).toHaveBeenCalledWith('/history', false)
expect(screen.queryByTestId('portal-content')).not.toBeInTheDocument()
expect(screen.queryByTestId('popover-content')).not.toBeInTheDocument()
fireEvent.click(screen.getByRole('button', { name: 'workflow.common.showRunHistory' }))
@@ -165,7 +175,6 @@ describe('ViewHistory', () => {
})
it('renders workflow run history items and updates the workflow store when one is selected', () => {
const handleBackupDraft = vi.fn()
const pausedRun = createHistoryItem({
id: 'run-paused',
status: WorkflowRunningStatus.Paused,
@@ -199,9 +208,6 @@ describe('ViewHistory', () => {
showEnvPanel: true,
controlMode: ControlMode.Pointer,
},
hooksStoreProps: {
handleBackupDraft,
},
})
fireEvent.click(screen.getByRole('button', { name: 'workflow.common.showRunHistory' }))
@@ -217,7 +223,7 @@ describe('ViewHistory', () => {
expect(store.getState().showEnvPanel).toBe(false)
expect(store.getState().controlMode).toBe(ControlMode.Hand)
expect(mockCloseAllInputFieldPanels).toHaveBeenCalledTimes(1)
expect(handleBackupDraft).toHaveBeenCalledTimes(1)
expect(mockHandleBackupDraft).toHaveBeenCalledTimes(1)
expect(mockHandleNodesCancelSelected).toHaveBeenCalledTimes(1)
expect(mockHandleCancelDebugAndPreviewPanel).toHaveBeenCalledTimes(1)
})
@@ -271,6 +277,6 @@ describe('ViewHistory', () => {
fireEvent.click(screen.getByRole('button', { name: 'common.operation.close' }))
expect(onClearLogAndMessageModal).toHaveBeenCalledTimes(1)
expect(screen.queryByTestId('portal-content')).not.toBeInTheDocument()
expect(screen.queryByTestId('popover-content')).not.toBeInTheDocument()
})
})

106
web/app/components/workflow/header/view-history.tsx
View File

@@ -1,16 +1,20 @@
import { cn } from '@langgenius/dify-ui/cn'
import {
Popover,
PopoverContent,
PopoverTrigger,
} from '@langgenius/dify-ui/popover'
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from '@langgenius/dify-ui/tooltip'
import {
memo,
useState,
} from 'react'
import { useTranslation } from 'react-i18next'
import Loading from '@/app/components/base/loading'
import {
PortalToFollowElem,
PortalToFollowElemContent,
PortalToFollowElemTrigger,
} from '@/app/components/base/portal-to-follow-elem'
import Tooltip from '@/app/components/base/tooltip'
import { useInputFieldPanel } from '@/app/components/rag-pipeline/hooks'
import {
useStore,
@@ -61,52 +65,60 @@ const ViewHistory = ({
return (
(
<PortalToFollowElem
placement={withText ? 'bottom-start' : 'bottom-end'}
offset={{
mainAxis: 4,
crossAxis: withText ? -8 : 10,
}}
<Popover
open={open}
onOpenChange={setOpen}
>
<PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
{
withText && (
<button
type="button"
aria-label={t('common.showRunHistory', { ns: 'workflow' })}
className={cn(
'flex h-8 items-center rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-3 shadow-xs',
'cursor-pointer text-[13px] font-medium text-components-button-secondary-text hover:bg-components-button-secondary-bg-hover',
open && 'bg-components-button-secondary-bg-hover',
{withText
? (
<PopoverTrigger
render={(
<button
type="button"
aria-label={t('common.showRunHistory', { ns: 'workflow' })}
className={cn(
'flex h-8 items-center rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-3 shadow-xs',
'cursor-pointer text-[13px] font-medium text-components-button-secondary-text hover:bg-components-button-secondary-bg-hover',
open && 'bg-components-button-secondary-bg-hover',
)}
>
<span className="mr-1 i-custom-vender-line-time-clock-play h-4 w-4" />
{t('common.showRunHistory', { ns: 'workflow' })}
</button>
)}
>
<span className="mr-1 i-custom-vender-line-time-clock-play h-4 w-4" />
{t('common.showRunHistory', { ns: 'workflow' })}
</button>
/>
)
}
{
!withText && (
<Tooltip
popupContent={t('common.viewRunHistory', { ns: 'workflow' })}
>
<button
type="button"
aria-label={t('common.viewRunHistory', { ns: 'workflow' })}
className={cn('group flex h-7 w-7 cursor-pointer items-center justify-center rounded-md hover:bg-state-accent-hover', open && 'bg-state-accent-hover')}
onClick={() => {
onClearLogAndMessageModal?.()
}}
: (
<Tooltip>
<TooltipTrigger
render={<div className="flex" />}
>
<span className={cn('i-custom-vender-line-time-clock-play', 'h-4 w-4 group-hover:text-components-button-secondary-accent-text', open ? 'text-components-button-secondary-accent-text' : 'text-components-button-ghost-text')} />
</button>
<PopoverTrigger
render={(
<button
type="button"
aria-label={t('common.viewRunHistory', { ns: 'workflow' })}
className={cn('group flex h-7 w-7 cursor-pointer items-center justify-center rounded-md hover:bg-state-accent-hover', open && 'bg-state-accent-hover')}
onClick={() => {
onClearLogAndMessageModal?.()
}}
>
<span className={cn('i-custom-vender-line-time-clock-play', 'h-4 w-4 group-hover:text-components-button-secondary-accent-text', open ? 'text-components-button-secondary-accent-text' : 'text-components-button-ghost-text')} />
</button>
)}
/>
</TooltipTrigger>
<TooltipContent>
{t('common.viewRunHistory', { ns: 'workflow' })}
</TooltipContent>
</Tooltip>
)
}
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className="z-12">
)}
<PopoverContent
placement={withText ? 'bottom-start' : 'bottom-end'}
sideOffset={4}
alignOffset={withText ? -8 : 10}
popupClassName="border-none bg-transparent shadow-none"
>
<div
className="ml-2 flex w-[240px] flex-col overflow-y-auto rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl"
style={{
@@ -207,8 +219,8 @@ const ViewHistory = ({
)
}
</div>
</PortalToFollowElemContent>
</PortalToFollowElem>
</PopoverContent>
</Popover>
)
)
}

97
web/app/components/workflow/header/view-workflow-history.tsx
View File

@@ -1,5 +1,10 @@
import type { WorkflowHistoryState } from '../workflow-history-store'
import { cn } from '@langgenius/dify-ui/cn'
import {
Popover,
PopoverContent,
PopoverTrigger,
} from '@langgenius/dify-ui/popover'
import {
RiCloseLine,
RiHistoryLine,
@@ -13,11 +18,6 @@ import {
import { useTranslation } from 'react-i18next'
import { useShallow } from 'zustand/react/shallow'
import { useStore as useAppStore } from '@/app/components/app/store'
import {
PortalToFollowElem,
PortalToFollowElemContent,
PortalToFollowElemTrigger,
} from '@/app/components/base/portal-to-follow-elem'
import Divider from '../../base/divider'
import { collaborationManager } from '../collaboration/core/collaboration-manager'
import {
@@ -91,12 +91,20 @@ const ViewWorkflowHistory = () => {
}, [t])
const calculateChangeList: ChangeHistoryList = useMemo(() => {
const filterList = (list: any, startIndex = 0, reverse = false) => list.map((state: Partial<WorkflowHistoryState>, index: number) => {
const nodes = (state.nodes || store.getState().nodes) || []
const nodeId = state?.workflowHistoryEventMeta?.nodeId
const filterList = (
list: Array<Partial<WorkflowHistoryState> | undefined>,
startIndex = 0,
reverse = false,
) => list.flatMap((state, index) => {
if (!state)
return []
const nodes = state.nodes || store.getState().nodes || []
const nodeId = state.workflowHistoryEventMeta?.nodeId
const targetTitle = nodes.find(n => n.id === nodeId)?.data?.title ?? ''
return {
label: state.workflowHistoryEvent && getHistoryLabel(state.workflowHistoryEvent),
return [{
label: state.workflowHistoryEvent ? getHistoryLabel(state.workflowHistoryEvent) : '',
index: reverse ? list.length - 1 - index - startIndex : index - startIndex,
state: {
...state,
@@ -107,8 +115,8 @@ const ViewWorkflowHistory = () => {
}
: undefined,
},
}
}).filter(Boolean)
}]
})
const historyData = {
pastStates: filterList(pastStates, pastStates.length).reverse(),
@@ -132,35 +140,42 @@ const ViewWorkflowHistory = () => {
return (
(
<PortalToFollowElem
placement="bottom-end"
offset={{
mainAxis: 4,
crossAxis: 131,
}}
<Popover
open={open}
onOpenChange={setOpen}
onOpenChange={(nextOpen) => {
if (nodesReadOnly)
return
setOpen(nextOpen)
}}
>
<PortalToFollowElemTrigger onClick={() => !nodesReadOnly && setOpen(v => !v)}>
<TipPopup
title={t('changeHistory.title', { ns: 'workflow' })}
>
<div
className={
cn('flex h-8 w-8 cursor-pointer items-center justify-center rounded-md text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary', open && 'bg-state-accent-active text-text-accent', nodesReadOnly && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled')
}
onClick={() => {
if (nodesReadOnly)
return
setCurrentLogItem()
setShowMessageLogModal(false)
}}
>
<RiHistoryLine className="h-4 w-4" />
</div>
</TipPopup>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className="z-12">
<TipPopup
title={t('changeHistory.title', { ns: 'workflow' })}
>
<PopoverTrigger
nativeButton={false}
render={(
<div
className={
cn('flex h-8 w-8 cursor-pointer items-center justify-center rounded-md text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary', open && 'bg-state-accent-active text-text-accent', nodesReadOnly && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled')
}
onClick={() => {
if (nodesReadOnly)
return
setCurrentLogItem()
setShowMessageLogModal(false)
}}
>
<RiHistoryLine className="h-4 w-4" />
</div>
)}
/>
</TipPopup>
<PopoverContent
placement="bottom-end"
sideOffset={4}
alignOffset={131}
popupClassName="border-none bg-transparent shadow-none"
>
<div
className="ml-2 flex max-w-[360px] min-w-[240px] flex-col overflow-y-auto rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-xl backdrop-blur-[5px]"
>
@@ -293,8 +308,8 @@ const ViewWorkflowHistory = () => {
<div className="mb-1 leading-[18px] text-text-tertiary">{t('changeHistory.hintText', { ns: 'workflow' })}</div>
</div>
</div>
</PortalToFollowElemContent>
</PortalToFollowElem>
</PopoverContent>
</Popover>
)
)
}

49
web/app/components/workflow/nodes/human-input/components/__tests__/button-style-dropdown.spec.tsx
View File

@@ -21,42 +21,7 @@ vi.mock('@langgenius/dify-ui/button', () => ({
},
}))
vi.mock('@/app/components/base/portal-to-follow-elem', () => {
const OpenContext = React.createContext(false)
return {
PortalToFollowElem: ({
open,
children,
}: {
open: boolean
children?: React.ReactNode
}) => (
<OpenContext value={open}>
<div data-testid="portal" data-open={String(open)}>{children}</div>
</OpenContext>
),
PortalToFollowElemTrigger: ({
children,
onClick,
}: {
children?: React.ReactNode
onClick?: () => void
}) => (
<button type="button" data-testid="portal-trigger" onClick={onClick}>
{children}
</button>
),
PortalToFollowElemContent: ({
children,
}: {
children?: React.ReactNode
}) => {
const open = React.use(OpenContext)
return open ? <div data-testid="portal-content">{children}</div> : null
},
}
})
vi.mock('@langgenius/dify-ui/popover', () => import('@/__mocks__/base-ui-popover'))
describe('ButtonStyleDropdown', () => {
const onChange = vi.fn()
@@ -80,10 +45,10 @@ describe('ButtonStyleDropdown', () => {
expect(mockButton).toHaveBeenCalledWith(expect.objectContaining({
variant: 'ghost',
}))
expect(screen.getByTestId('portal'))!.toHaveAttribute('data-open', 'false')
expect(screen.getByTestId('popover'))!.toHaveAttribute('data-open', 'false')
fireEvent.click(screen.getByTestId('portal-trigger'))
expect(screen.getByTestId('portal'))!.toHaveAttribute('data-open', 'true')
fireEvent.click(screen.getByTestId('popover-trigger'))
expect(screen.getByTestId('popover'))!.toHaveAttribute('data-open', 'true')
expect(screen.getByText('nodes.humanInput.userActions.chooseStyle'))!.toBeInTheDocument()
fireEvent.click(screen.getByTestId('button-primary').parentElement as HTMLElement)
@@ -111,10 +76,10 @@ describe('ButtonStyleDropdown', () => {
variant: 'secondary',
}))
fireEvent.click(screen.getByTestId('portal-trigger'))
fireEvent.click(screen.getByTestId('popover-trigger'))
expect(screen.getByTestId('portal'))!.toHaveAttribute('data-open', 'false')
expect(screen.queryByTestId('portal-content')).not.toBeInTheDocument()
expect(screen.getByTestId('popover'))!.toHaveAttribute('data-open', 'false')
expect(screen.queryByTestId('popover-content')).not.toBeInTheDocument()
expect(onChange).not.toHaveBeenCalled()
})

48
web/app/components/workflow/nodes/human-input/components/button-style-dropdown.tsx
View File

@@ -1,17 +1,17 @@
import type { FC } from 'react'
import { Button } from '@langgenius/dify-ui/button'
import { cn } from '@langgenius/dify-ui/cn'
import {
Popover,
PopoverContent,
PopoverTrigger,
} from '@langgenius/dify-ui/popover'
import {
RiFontSize,
} from '@remixicon/react'
import * as React from 'react'
import { useMemo, useState } from 'react'
import { useTranslation } from 'react-i18next'
import {
PortalToFollowElem,
PortalToFollowElemContent,
PortalToFollowElemTrigger,
} from '@/app/components/base/portal-to-follow-elem'
import { UserActionButtonType } from '../types'
const i18nPrefix = 'nodes.humanInput'
@@ -45,23 +45,29 @@ const ButtonStyleDropdown: FC<Props> = ({
}, [data])
return (
<PortalToFollowElem
<Popover
open={open && !readonly}
onOpenChange={setOpen}
placement="bottom-end"
offset={{
mainAxis: 4,
crossAxis: 44,
onOpenChange={(nextOpen) => {
if (readonly)
return
setOpen(nextOpen)
}}
>
<PortalToFollowElemTrigger onClick={() => !readonly && setOpen(v => !v)}>
<div className={cn('flex items-center justify-center rounded-lg bg-components-button-tertiary-bg p-1', !readonly && 'cursor-pointer hover:bg-components-button-tertiary-bg-hover', open && 'bg-components-button-tertiary-bg-hover')}>
<Button size="small" className="pointer-events-none px-1" variant={currentStyle}>
<RiFontSize className="h-4 w-4" />
</Button>
</div>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent style={{ zIndex: 1000 }}>
<PopoverTrigger
render={(
<div className={cn('flex items-center justify-center rounded-lg bg-components-button-tertiary-bg p-1', !readonly && 'cursor-pointer hover:bg-components-button-tertiary-bg-hover', open && 'bg-components-button-tertiary-bg-hover')}>
<Button size="small" className="pointer-events-none px-1" variant={currentStyle}>
<RiFontSize className="h-4 w-4" />
</Button>
</div>
)}
/>
<PopoverContent
placement="bottom-end"
sideOffset={4}
alignOffset={44}
popupClassName="border-none bg-transparent shadow-none"
>
<div className="rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-4 shadow-lg backdrop-blur-xs">
<div className="system-md-medium text-text-primary">{t(`${i18nPrefix}.userActions.chooseStyle`, { ns: 'workflow' })}</div>
<div className="mt-2 flex w-[324px] flex-wrap gap-1">
@@ -103,8 +109,8 @@ const ButtonStyleDropdown: FC<Props> = ({
</div>
</div>
</div>
</PortalToFollowElemContent>
</PortalToFollowElem>
</PopoverContent>
</Popover>
)
}

50
web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-trigger.tsx
View File

@@ -1,16 +1,16 @@
import type { MetadataShape } from '@/app/components/workflow/nodes/knowledge-retrieval/types'
import { Button } from '@langgenius/dify-ui/button'
import {
Popover,
PopoverContent,
PopoverTrigger,
} from '@langgenius/dify-ui/popover'
import { RiFilter3Line } from '@remixicon/react'
import {
useEffect,
useState,
} from 'react'
import { useTranslation } from 'react-i18next'
import {
PortalToFollowElem,
PortalToFollowElemContent,
PortalToFollowElemTrigger,
} from '@/app/components/base/portal-to-follow-elem'
import MetadataPanel from './metadata-panel'
const MetadataTrigger = ({
@@ -40,25 +40,29 @@ const MetadataTrigger = ({
}, [metadataFilteringConditions, metadataList, handleRemoveCondition, selectedDatasetsLoaded])
return (
<PortalToFollowElem
placement="left"
offset={4}
<Popover
open={open}
onOpenChange={setOpen}
>
<PortalToFollowElemTrigger onClick={() => setOpen(!open)}>
<Button
variant="secondary-accent"
size="small"
>
<RiFilter3Line className="mr-1 h-3.5 w-3.5" />
{t('nodes.knowledgeRetrieval.metadata.panel.conditions', { ns: 'workflow' })}
<div className="ml-1 flex items-center rounded-[5px] border border-divider-deep px-1 system-2xs-medium-uppercase text-text-tertiary">
{metadataFilteringConditions?.conditions.length || 0}
</div>
</Button>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className="z-10">
<PopoverTrigger
render={(
<Button
variant="secondary-accent"
size="small"
>
<RiFilter3Line className="mr-1 h-3.5 w-3.5" />
{t('nodes.knowledgeRetrieval.metadata.panel.conditions', { ns: 'workflow' })}
<div className="ml-1 flex items-center rounded-[5px] border border-divider-deep px-1 system-2xs-medium-uppercase text-text-tertiary">
{metadataFilteringConditions?.conditions.length || 0}
</div>
</Button>
)}
/>
<PopoverContent
placement="left"
sideOffset={4}
popupClassName="border-none bg-transparent shadow-none"
>
<MetadataPanel
metadataFilteringConditions={metadataFilteringConditions}
onCancel={() => setOpen(false)}
@@ -66,8 +70,8 @@ const MetadataTrigger = ({
handleRemoveCondition={handleRemoveCondition}
{...restProps}
/>
</PortalToFollowElemContent>
</PortalToFollowElem>
</PopoverContent>
</Popover>
)
}

59
web/app/components/workflow/nodes/knowledge-retrieval/components/retrieval-config.tsx
View File

@@ -7,16 +7,16 @@ import type { DataSet } from '@/models/datasets'
import type { DatasetConfigs } from '@/models/debug'
import { Button } from '@langgenius/dify-ui/button'
import { cn } from '@langgenius/dify-ui/cn'
import {
Popover,
PopoverContent,
PopoverTrigger,
} from '@langgenius/dify-ui/popover'
import { RiEqualizer2Line } from '@remixicon/react'
import * as React from 'react'
import { useCallback, useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import ConfigRetrievalContent from '@/app/components/app/configuration/dataset-config/params-config/config-content'
import {
PortalToFollowElem,
PortalToFollowElemContent,
PortalToFollowElemTrigger,
} from '@/app/components/base/portal-to-follow-elem'
import { DATASET_DEFAULT } from '@/config'
import { RETRIEVE_TYPE } from '@/types/app'
@@ -114,32 +114,33 @@ const RetrievalConfig: FC<Props> = ({
}, [onMultipleRetrievalConfigChange, retrieval_mode, onRetrievalModeChange])
return (
<PortalToFollowElem
<Popover
open={rerankModalOpen}
onOpenChange={handleOpen}
placement="bottom-end"
offset={{
crossAxis: -2,
onOpenChange={(nextOpen) => {
if (readonly)
return
handleOpen(nextOpen)
}}
>
<PortalToFollowElemTrigger
onClick={() => {
if (readonly)
return
handleOpen(!rerankModalOpen)
}}
<PopoverTrigger
render={(
<Button
variant="ghost"
size="small"
disabled={readonly}
className={cn(rerankModalOpen && 'bg-components-button-ghost-bg-hover')}
>
<RiEqualizer2Line className="mr-1 h-3.5 w-3.5" />
{t('retrievalSettings', { ns: 'dataset' })}
</Button>
)}
/>
<PopoverContent
placement="bottom-end"
sideOffset={0}
alignOffset={-2}
popupClassName="border-none bg-transparent shadow-none"
>
<Button
variant="ghost"
size="small"
disabled={readonly}
className={cn(rerankModalOpen && 'bg-components-button-ghost-bg-hover')}
>
<RiEqualizer2Line className="mr-1 h-3.5 w-3.5" />
{t('retrievalSettings', { ns: 'dataset' })}
</Button>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent style={{ zIndex: 1001 }}>
<div className="w-[404px] rounded-2xl border border-components-panel-border bg-components-panel-bg px-4 pt-3 pb-4 shadow-xl">
<ConfigRetrievalContent
datasetConfigs={datasetConfigs}
@@ -151,8 +152,8 @@ const RetrievalConfig: FC<Props> = ({
onSingleRetrievalModelParamsChange={onSingleRetrievalModelParamsChange}
/>
</div>
</PortalToFollowElemContent>
</PortalToFollowElem>
</PopoverContent>
</Popover>
)
}
export default React.memo(RetrievalConfig)

156
web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/index.tsx
View File

@@ -3,14 +3,14 @@ import type { SchemaRoot } from '../../../types'
import type { FormValue } from '@/app/components/header/account-setting/model-provider-page/declarations'
import type { CompletionParams, Model } from '@/types/app'
import { cn } from '@langgenius/dify-ui/cn'
import {
Popover,
PopoverContent,
PopoverTrigger,
} from '@langgenius/dify-ui/popover'
import { toast } from '@langgenius/dify-ui/toast'
import * as React from 'react'
import { useCallback, useEffect, useState } from 'react'
import {
PortalToFollowElem,
PortalToFollowElemContent,
PortalToFollowElemTrigger,
} from '@/app/components/base/portal-to-follow-elem'
import { useCallback, useState } from 'react'
import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
import { useModelListAndDefaultModelAndCurrentProviderAndModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
import useTheme from '@/hooks/use-theme'
@@ -27,61 +27,68 @@ type JsonSchemaGeneratorProps = {
crossAxisOffset?: number
}
enum GeneratorView {
promptEditor = 'promptEditor',
result = 'result',
const GENERATOR_VIEWS = {
promptEditor: 'promptEditor',
result: 'result',
} as const
type GeneratorView = typeof GENERATOR_VIEWS[keyof typeof GENERATOR_VIEWS]
const createEmptyModel = (): Model => ({
name: '',
provider: '',
mode: ModelModeType.completion,
completion_params: {} as CompletionParams,
})
const getStoredModel = (): Model | null => {
if (typeof window === 'undefined')
return null
const savedModel = window.localStorage.getItem('auto-gen-model')
if (!savedModel)
return null
return JSON.parse(savedModel) as Model
}
const JsonSchemaGenerator: FC<JsonSchemaGeneratorProps> = ({
onApply,
crossAxisOffset,
}) => {
const localModel = localStorage.getItem('auto-gen-model')
? JSON.parse(localStorage.getItem('auto-gen-model') as string) as Model
: null
const [open, setOpen] = useState(false)
const [view, setView] = useState(GeneratorView.promptEditor)
const [model, setModel] = useState<Model>(localModel || {
name: '',
provider: '',
mode: ModelModeType.completion,
completion_params: {} as CompletionParams,
})
const [view, setView] = useState<GeneratorView>(GENERATOR_VIEWS.promptEditor)
const [model, setModel] = useState<Model | null>(() => getStoredModel())
const [instruction, setInstruction] = useState('')
const [schema, setSchema] = useState<SchemaRoot | null>(null)
const { theme } = useTheme()
const {
defaultModel,
} = useModelListAndDefaultModelAndCurrentProviderAndModel(ModelTypeEnum.textGeneration)
const resolvedModel = React.useMemo<Model>(() => {
if (model)
return model
if (!defaultModel)
return createEmptyModel()
return {
...createEmptyModel(),
name: defaultModel.model,
provider: defaultModel.provider.provider,
}
}, [defaultModel, model])
const advancedEditing = useVisualEditorStore(state => state.advancedEditing)
const isAddingNewField = useVisualEditorStore(state => state.isAddingNewField)
const { emit } = useMittContext()
const SchemaGenerator = theme === Theme.light ? SchemaGeneratorLight : SchemaGeneratorDark
useEffect(() => {
if (defaultModel) {
const localModel = localStorage.getItem('auto-gen-model')
? JSON.parse(localStorage.getItem('auto-gen-model') || '')
: null
if (localModel) {
setModel(localModel)
}
else {
setModel(prev => ({
...prev,
name: defaultModel.model,
provider: defaultModel.provider.provider,
}))
}
}
}, [defaultModel])
const handleTrigger = useCallback((e: React.MouseEvent<HTMLElement, MouseEvent>) => {
e.stopPropagation()
if (advancedEditing || isAddingNewField)
emit('quitEditing', {})
setOpen(!open)
}, [open, advancedEditing, isAddingNewField, emit])
}, [advancedEditing, isAddingNewField, emit])
const onClose = useCallback(() => {
setOpen(false)
@@ -89,39 +96,39 @@ const JsonSchemaGenerator: FC<JsonSchemaGeneratorProps> = ({
const handleModelChange = useCallback((newValue: { modelId: string, provider: string, mode?: string, features?: string[] }) => {
const newModel = {
...model,
...resolvedModel,
provider: newValue.provider,
name: newValue.modelId,
mode: newValue.mode as ModelModeType,
}
setModel(newModel)
localStorage.setItem('auto-gen-model', JSON.stringify(newModel))
}, [model, setModel])
window.localStorage.setItem('auto-gen-model', JSON.stringify(newModel))
}, [resolvedModel])
const handleCompletionParamsChange = useCallback((newParams: FormValue) => {
const newModel = {
...model,
...resolvedModel,
completion_params: newParams as CompletionParams,
}
setModel(newModel)
localStorage.setItem('auto-gen-model', JSON.stringify(newModel))
}, [model, setModel])
window.localStorage.setItem('auto-gen-model', JSON.stringify(newModel))
}, [resolvedModel])
const { mutateAsync: generateStructuredOutputRules, isPending: isGenerating } = useGenerateStructuredOutputRules()
const generateSchema = useCallback(async () => {
const { output, error } = await generateStructuredOutputRules({ instruction, model_config: model! })
const { output, error } = await generateStructuredOutputRules({ instruction, model_config: resolvedModel })
if (error) {
toast.error(error)
setSchema(null)
setView(GeneratorView.promptEditor)
setView(GENERATOR_VIEWS.promptEditor)
return
}
return output
}, [instruction, model, generateStructuredOutputRules])
}, [generateStructuredOutputRules, instruction, resolvedModel])
const handleGenerate = useCallback(async () => {
setView(GeneratorView.result)
setView(GENERATOR_VIEWS.result)
const output = await generateSchema()
if (output === undefined)
return
@@ -129,7 +136,7 @@ const JsonSchemaGenerator: FC<JsonSchemaGeneratorProps> = ({
}, [generateSchema])
const goBackToPromptEditor = () => {
setView(GeneratorView.promptEditor)
setView(GENERATOR_VIEWS.promptEditor)
}
const handleRegenerate = useCallback(async () => {
@@ -145,31 +152,34 @@ const JsonSchemaGenerator: FC<JsonSchemaGeneratorProps> = ({
}
return (
<PortalToFollowElem
<Popover
open={open}
onOpenChange={setOpen}
placement="bottom-end"
offset={{
mainAxis: 4,
crossAxis: crossAxisOffset ?? 0,
}}
>
<PortalToFollowElemTrigger onClick={handleTrigger}>
<button
type="button"
className={cn(
'flex h-6 w-6 items-center justify-center rounded-md p-0.5 hover:bg-state-accent-hover',
open && 'bg-state-accent-active',
)}
>
<SchemaGenerator />
</button>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className="z-100">
{view === GeneratorView.promptEditor && (
<PopoverTrigger
render={(
<button
type="button"
onClick={handleTrigger}
className={cn(
'flex h-6 w-6 items-center justify-center rounded-md p-0.5 hover:bg-state-accent-hover',
open && 'bg-state-accent-active',
)}
>
<SchemaGenerator />
</button>
)}
/>
<PopoverContent
placement="bottom-end"
sideOffset={4}
alignOffset={crossAxisOffset ?? 0}
popupClassName="border-none bg-transparent shadow-none"
>
{view === GENERATOR_VIEWS.promptEditor && (
<PromptEditor
instruction={instruction}
model={model}
model={resolvedModel}
onInstructionChange={setInstruction}
onCompletionParamsChange={handleCompletionParamsChange}
onGenerate={handleGenerate}
@@ -177,7 +187,7 @@ const JsonSchemaGenerator: FC<JsonSchemaGeneratorProps> = ({
onModelChange={handleModelChange}
/>
)}
{view === GeneratorView.result && (
{view === GENERATOR_VIEWS.result && (
<GeneratedResult
schema={schema!}
isGenerating={isGenerating}
@@ -187,8 +197,8 @@ const JsonSchemaGenerator: FC<JsonSchemaGeneratorProps> = ({
onClose={onClose}
/>
)}
</PortalToFollowElemContent>
</PortalToFollowElem>
</PopoverContent>
</Popover>
)
}

22
web/app/components/workflow/note-node/note-editor/toolbar/__tests__/color-picker.spec.tsx
View File

@@ -1,32 +1,32 @@
import { fireEvent, render, waitFor } from '@testing-library/react'
import { fireEvent, render, screen, waitFor } from '@testing-library/react'
import { NoteTheme } from '../../../types'
import ColorPicker, { COLOR_LIST } from '../color-picker'
import ColorPicker from '../color-picker'
vi.mock('@langgenius/dify-ui/popover', () => import('@/__mocks__/base-ui-popover'))
describe('NoteEditor ColorPicker', () => {
it('should open the palette and apply the selected theme', async () => {
const onThemeChange = vi.fn()
const { container } = render(
render(
<ColorPicker theme={NoteTheme.blue} onThemeChange={onThemeChange} />,
)
const trigger = container.querySelector('[data-state="closed"]') as HTMLElement
fireEvent.click(screen.getByTestId('popover-trigger'))
fireEvent.click(trigger)
const popup = document.body.querySelector('[role="tooltip"]')
const popup = screen.getByTestId('popover-content')
expect(popup).toBeInTheDocument()
const options = popup?.querySelectorAll('.group.relative')
const options = popup.querySelectorAll('.group.relative')
expect(options).toHaveLength(COLOR_LIST.length)
expect(options).toHaveLength(6)
fireEvent.click(options?.[COLOR_LIST.length - 1] as Element)
fireEvent.click(options[5] as Element)
expect(onThemeChange).toHaveBeenCalledWith(NoteTheme.violet)
await waitFor(() => {
expect(document.body.querySelector('[role="tooltip"]')).not.toBeInTheDocument()
expect(screen.queryByTestId('popover-content')).not.toBeInTheDocument()
})
})
})

10
web/app/components/workflow/note-node/note-editor/toolbar/__tests__/font-size-selector.spec.tsx
View File

@@ -1,6 +1,8 @@
import { fireEvent, render, screen } from '@testing-library/react'
import FontSizeSelector from '../font-size-selector'
vi.mock('@langgenius/dify-ui/popover', () => import('@/__mocks__/base-ui-popover'))
const {
mockHandleFontSize,
mockHandleOpenFontSizeSelector,
@@ -52,4 +54,12 @@ describe('NoteEditor FontSizeSelector', () => {
expect(mockHandleFontSize).toHaveBeenCalledWith('16px')
expect(mockHandleOpenFontSizeSelector).toHaveBeenCalledWith(false)
})
it('should fall back to the small label when current font size is unknown', () => {
mockFontSize = '18px'
render(<FontSizeSelector />)
expect(screen.getByText('workflow.nodes.note.editor.small')).toBeInTheDocument()
})
})

9
web/app/components/workflow/note-node/note-editor/toolbar/__tests__/index.spec.tsx
View File

@@ -76,11 +76,14 @@ describe('NoteEditor Toolbar', () => {
expect(screen.getByText('workflow.nodes.note.editor.medium')).toBeInTheDocument()
const triggers = container.querySelectorAll('[data-state="closed"]')
const buttons = container.querySelectorAll('button[type="button"]')
fireEvent.click(buttons[0] as HTMLElement)
fireEvent.click(triggers[0] as HTMLElement)
await waitFor(() => {
expect(document.body.querySelectorAll('.group.relative').length).toBeGreaterThan(0)
})
const colorOptions = document.body.querySelectorAll('[role="tooltip"] .group.relative')
const colorOptions = document.body.querySelectorAll('.group.relative')
fireEvent.click(colorOptions[colorOptions.length - 1] as Element)

55
web/app/components/workflow/note-node/note-editor/toolbar/color-picker.tsx
View File

@@ -1,17 +1,17 @@
import { cn } from '@langgenius/dify-ui/cn'
import {
Popover,
PopoverContent,
PopoverTrigger,
} from '@langgenius/dify-ui/popover'
import {
memo,
useState,
} from 'react'
import {
PortalToFollowElem,
PortalToFollowElemContent,
PortalToFollowElemTrigger,
} from '@/app/components/base/portal-to-follow-elem'
import { THEME_MAP } from '../../constants'
import { NoteTheme } from '../../types'
export const COLOR_LIST = [
const COLOR_LIST = [
{
key: NoteTheme.blue,
inner: THEME_MAP[NoteTheme.blue]!.title,
@@ -55,28 +55,35 @@ const ColorPicker = ({
const [open, setOpen] = useState(false)
return (
<PortalToFollowElem
<Popover
open={open}
onOpenChange={setOpen}
placement="top"
offset={4}
>
<PortalToFollowElemTrigger onClick={() => setOpen(!open)}>
<div className={cn(
'flex h-8 w-8 cursor-pointer items-center justify-center rounded-md hover:bg-black/5',
open && 'bg-black/5',
)}
>
<div
<PopoverTrigger
nativeButton
render={(
<button
type="button"
className={cn(
'h-4 w-4 rounded-full border border-black/5',
THEME_MAP[theme]!.title,
'flex h-8 w-8 cursor-pointer items-center justify-center rounded-md hover:bg-black/5',
open && 'bg-black/5',
)}
>
</div>
</div>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent>
<div
className={cn(
'h-4 w-4 rounded-full border border-black/5',
THEME_MAP[theme]!.title,
)}
>
</div>
</button>
)}
/>
<PopoverContent
placement="top"
sideOffset={4}
popupClassName="border-none bg-transparent shadow-none"
>
<div className="grid grid-cols-3 grid-rows-2 gap-0.5 rounded-lg border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 shadow-lg">
{
COLOR_LIST.map(color => (
@@ -107,8 +114,8 @@ const ColorPicker = ({
))
}
</div>
</PortalToFollowElemContent>
</PortalToFollowElem>
</PopoverContent>
</Popover>
)
}

47
web/app/components/workflow/note-node/note-editor/toolbar/font-size-selector.tsx
View File

@@ -1,13 +1,13 @@
import { cn } from '@langgenius/dify-ui/cn'
import {
Popover,
PopoverContent,
PopoverTrigger,
} from '@langgenius/dify-ui/popover'
import { RiFontSize } from '@remixicon/react'
import { memo } from 'react'
import { useTranslation } from 'react-i18next'
import { Check } from '@/app/components/base/icons/src/vender/line/general'
import {
PortalToFollowElem,
PortalToFollowElemContent,
PortalToFollowElemTrigger,
} from '@/app/components/base/portal-to-follow-elem'
import { useFontSize } from './hooks'
const FontSizeSelector = () => {
@@ -34,23 +34,30 @@ const FontSizeSelector = () => {
} = useFontSize()
return (
<PortalToFollowElem
<Popover
open={fontSizeSelectorShow}
onOpenChange={handleOpenFontSizeSelector}
placement="bottom-start"
offset={2}
>
<PortalToFollowElemTrigger onClick={() => handleOpenFontSizeSelector(!fontSizeSelectorShow)}>
<div className={cn(
'flex h-8 cursor-pointer items-center rounded-md pr-1.5 pl-2 text-[13px] font-medium text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
fontSizeSelectorShow && 'bg-state-base-hover text-text-secondary',
<PopoverTrigger
nativeButton
render={(
<button
type="button"
className={cn(
'flex h-8 cursor-pointer items-center rounded-md pr-1.5 pl-2 text-[13px] font-medium text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
fontSizeSelectorShow && 'bg-state-base-hover text-text-secondary',
)}
>
<RiFontSize className="mr-1 h-4 w-4" />
{FONT_SIZE_LIST.find(font => font.key === fontSize)?.value || t('nodes.note.editor.small', { ns: 'workflow' })}
</button>
)}
>
<RiFontSize className="mr-1 h-4 w-4" />
{FONT_SIZE_LIST.find(font => font.key === fontSize)?.value || t('nodes.note.editor.small', { ns: 'workflow' })}
</div>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent>
/>
<PopoverContent
placement="bottom-start"
sideOffset={2}
popupClassName="border-none bg-transparent shadow-none"
>
<div className="w-[120px] rounded-md border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 text-text-secondary shadow-xl">
{
FONT_SIZE_LIST.map(font => (
@@ -77,8 +84,8 @@ const FontSizeSelector = () => {
))
}
</div>
</PortalToFollowElemContent>
</PortalToFollowElem>
</PopoverContent>
</Popover>
)
}

50
web/app/components/workflow/panel/version-history-panel/filter/index.tsx
View File

@@ -1,14 +1,14 @@
import type { FC } from 'react'
import { cn } from '@langgenius/dify-ui/cn'
import {
Popover,
PopoverContent,
PopoverTrigger,
} from '@langgenius/dify-ui/popover'
import { RiFilter3Line } from '@remixicon/react'
import * as React from 'react'
import { useCallback, useState } from 'react'
import Divider from '@/app/components/base/divider'
import {
PortalToFollowElem,
PortalToFollowElemContent,
PortalToFollowElemTrigger,
} from '@/app/components/base/portal-to-follow-elem'
import { WorkflowVersionFilterOptions } from '../../../types'
import FilterItem from './filter-item'
import FilterSwitch from './filter-switch'
@@ -37,26 +37,28 @@ const Filter: FC<FilterProps> = ({
const isFiltering = filterValue !== WorkflowVersionFilterOptions.all || isOnlyShowNamedVersions
return (
<PortalToFollowElem
placement="bottom-end"
offset={{
mainAxis: 4,
crossAxis: 55,
}}
<Popover
open={open}
onOpenChange={setOpen}
>
<PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
<div
className={cn(
'flex h-6 w-6 cursor-pointer items-center justify-center rounded-md p-0.5',
isFiltering ? 'bg-state-accent-active-alt' : 'hover:bg-state-base-hover',
)}
>
<RiFilter3Line className={cn('h-4 w-4', isFiltering ? 'text-text-accent' : 'text-text-tertiary')} />
</div>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className="z-12">
<PopoverTrigger
render={(
<div
className={cn(
'flex h-6 w-6 cursor-pointer items-center justify-center rounded-md p-0.5',
isFiltering ? 'bg-state-accent-active-alt' : 'hover:bg-state-base-hover',
)}
>
<RiFilter3Line className={cn('h-4 w-4', isFiltering ? 'text-text-accent' : 'text-text-tertiary')} />
</div>
)}
/>
<PopoverContent
placement="bottom-end"
sideOffset={4}
alignOffset={55}
popupClassName="border-none bg-transparent shadow-none"
>
<div className="flex w-[248px] flex-col rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg shadow-shadow-shadow-5 backdrop-blur-[5px]">
<div className="flex flex-col p-1">
{
@@ -75,8 +77,8 @@ const Filter: FC<FilterProps> = ({
<Divider type="horizontal" className="my-0 h-px bg-divider-subtle" />
<FilterSwitch enabled={isOnlyShowNamedVersions} handleSwitch={handleSwitch} />
</div>
</PortalToFollowElemContent>
</PortalToFollowElem>
</PopoverContent>
</Popover>
)
}

4
web/docs/overlay-migration.md
View File

@@ -55,7 +55,7 @@ pnpm -C web lint:fix --prune-suppressions <changed-files>
## z-index strategy
All new overlay primitives in `@langgenius/dify-ui` share a single z-index value:
All new overlay primitives in `@langgenius/dify-ui/*` share a single z-index value:
**`z-1002`**, except Toast which stays one layer above at **`z-1003`**.
### Why z-[1002]?
@@ -94,7 +94,7 @@ back to `z-9999`.
Once all legacy overlays are removed:
1. Reduce `z-1002` back to `z-50` across all `@langgenius/dify-ui` primitives.
1. Reduce `z-1002` back to `z-50` across all `@langgenius/dify-ui/*` primitives.
1. Reduce Toast from `z-1003` to `z-51`.
1. Remove this section from the migration guide.

7
web/eslint.constants.mjs
View File

@@ -64,20 +64,13 @@ export const OVERLAY_RESTRICTED_IMPORT_PATTERNS = [
export const OVERLAY_MIGRATION_LEGACY_BASE_FILES = [
'app/components/base/chat/chat-with-history/header/mobile-operation-dropdown.tsx',
'app/components/base/chat/chat-with-history/header/operation.tsx',
'app/components/base/chat/chat-with-history/inputs-form/view-form-dropdown.tsx',
'app/components/base/chat/chat-with-history/sidebar/operation.tsx',
'app/components/base/chat/chat/citation/popup.tsx',
'app/components/base/chat/chat/citation/progress-tooltip.tsx',
'app/components/base/chat/chat/citation/tooltip.tsx',
'app/components/base/chat/embedded-chatbot/inputs-form/view-form-dropdown.tsx',
'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/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',
'app/components/base/image-uploader/chat-image-uploader.tsx',
'app/components/base/image-uploader/text-generation-image-uploader.tsx',
'app/components/base/modal/modal.tsx',
'app/components/base/prompt-editor/plugins/context-block/component.tsx',
'app/components/base/prompt-editor/plugins/history-block/component.tsx',