jprdonnelly/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-05-26 04:00:39 -04:00
Code Issues Packages Projects Releases Wiki Activity

refactor(install): improve layout and scrolling behavior for plugin installation step (#36199)

Browse Source 
Co-authored-by: CodingOnStar <hanxujiang@dify.com>
This commit is contained in:
Coding On Star
2026-05-15 11:12:14 +08:00
committed by GitHub
parent 7654f14241
commit 3bc3386535
6 changed files with 30 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
web/app/components/plugins/install-plugin/install-bundle/steps/__tests__/install.spec.tsx
View File

@@ -271,6 +271,12 @@ describe('Install Component', () => {
expect(screen.getByTestId('install-multi').parentElement).toHaveClass('overflow-y-auto')
})
it('should constrain the install step so the plugin list can scroll with many items', () => {
const { container } = render(<Install {...defaultProps} />)
expect(container.firstElementChild).toHaveClass('min-h-0', 'flex-1', 'overflow-hidden')
})
it('should show singular text when one plugin is selected', async () => {
render(<Install {...defaultProps} />)

6
web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx
View File

@@ -170,8 +170,8 @@ const Install: FC<Props> = ({
const { canInstallPluginFromMarketplace } = useCanInstallPluginFromMarketplace()
return (
<>
<div className="flex min-h-0 flex-1 flex-col items-start justify-center gap-4 self-stretch px-6 py-3">
<div className="flex min-h-0 flex-1 flex-col self-stretch overflow-hidden">
<div className="flex min-h-0 flex-1 flex-col items-start justify-center gap-4 self-stretch overflow-hidden px-6 py-3">
<div className="system-md-regular text-text-secondary">
<p>{t(`${i18nPrefix}.${selectedPluginsNum > 1 ? 'readyToInstallPackages' : 'readyToInstallPackage'}`, { ns: 'plugin', num: selectedPluginsNum })}</p>
</div>
@@ -218,7 +218,7 @@ const Install: FC<Props> = ({
</div>
)}
</>
</div>
)
}
export default React.memo(Install)

6
web/app/components/plugins/install-plugin/install-from-local-package/__tests__/index.spec.tsx
View File

@@ -292,6 +292,12 @@ describe('InstallFromLocalPackage', () => {
expect(screen.getByTestId('is-bundle')).toHaveTextContent('true')
})
it('should constrain dialog height so bundle dependency lists can scroll', () => {
render(<InstallFromLocalPackage {...defaultProps} file={createMockBundleFile()} />)
expect(screen.getByRole('dialog')).toHaveClass('max-h-[calc(100dvh-48px)]')
})
it('should identify package file correctly', () => {
render(<InstallFromLocalPackage {...defaultProps} />)

2
web/app/components/plugins/install-plugin/install-from-local-package/index.tsx
View File

@@ -93,7 +93,7 @@ const InstallFromLocalPackage: React.FC<InstallFromLocalPackageProps> = ({
foldAnimInto()
}}
>
<DialogContent className={cn('w-[560px] max-w-none! overflow-hidden! text-left align-middle', cn(modalClassName, 'shadows-shadow-xl flex min-w-[560px] flex-col items-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-0'))}>
<DialogContent className={cn('w-[560px] max-w-none! overflow-hidden! text-left align-middle', cn(modalClassName, 'shadows-shadow-xl flex max-h-[calc(100dvh-48px)] min-w-[560px] flex-col items-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-0'))}>
<DialogCloseButton />
<div className="flex items-start gap-2 self-stretch pt-6 pr-14 pb-3 pl-6">

13
web/app/components/plugins/install-plugin/install-from-marketplace/__tests__/index.spec.tsx
View File

@@ -212,6 +212,19 @@ describe('InstallFromMarketplace', () => {
expect(screen.getByTestId('bundle-plugins-count')).toHaveTextContent('2')
})
it('should constrain bundle dialog height so dependency lists can scroll', () => {
const dependencies = createMockDependencies()
render(
<InstallFromMarketplace
{...defaultProps}
isBundle={true}
dependencies={dependencies}
/>,
)
expect(screen.getByRole('dialog')).toHaveClass('max-h-[calc(100dvh-48px)]')
})
it('should pass isFromMarketPlace as true to bundle component', () => {
const dependencies = createMockDependencies()
render(

2
web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx
View File

@@ -77,7 +77,7 @@ const InstallFromMarketplace: React.FC<InstallFromMarketplaceProps> = ({
foldAnimInto()
}}
>
<DialogContent className={cn('w-[560px] max-w-none! overflow-hidden! text-left align-middle', cn(modalClassName, 'shadows-shadow-xl flex min-w-[560px] flex-col items-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-0'))}>
<DialogContent className={cn('w-[560px] max-w-none! overflow-hidden! text-left align-middle', cn(modalClassName, 'shadows-shadow-xl flex max-h-[calc(100dvh-48px)] min-w-[560px] flex-col items-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-0'))}>
<DialogCloseButton />
<div className="flex items-start gap-2 self-stretch pt-6 pr-14 pb-3 pl-6">