{state.step === InstallStepFromGitHub.setUrl && (
-
setState(prevState => ({ ...prevState, repoUrl: value }))}
- onNext={handleUrlSubmit}
- onCancel={onClose}
- />
+ <>
+
+ setState(prevState => ({ ...prevState, repoUrl: e.target.value }))}
+ className="flex grow items-center gap-0.5 self-stretch overflow-hidden rounded-lg border border-components-input-border-active bg-components-input-bg-active p-2 system-sm-regular text-ellipsis text-components-input-text-filled outline-hidden"
+ placeholder="Please enter GitHub repo URL"
+ />
+
+
+
+
+
)}
{state.step === InstallStepFromGitHub.selectPackage && (
= ({ updatePayload, on
onBack={handleBack}
/>
)}
- {state.step === InstallStepFromGitHub.readyToInstall && (
+ {state.step === InstallStepFromGitHub.readyToInstall && manifest && uniqueIdentifier && (
{
- const defaultProps = {
- repoUrl: '',
- onChange: vi.fn(),
- onNext: vi.fn(),
- onCancel: vi.fn(),
- }
-
- beforeEach(() => {
- vi.clearAllMocks()
- })
-
- // ================================
- // Rendering Tests
- // ================================
- describe('Rendering', () => {
- it('should render label with GitHub repo text', () => {
- render()
-
- expect(screen.getByText('plugin.installFromGitHub.gitHubRepo')).toBeInTheDocument()
- })
-
- it('should render input field with correct attributes', () => {
- render()
-
- const input = screen.getByRole('textbox')
- expect(input).toBeInTheDocument()
- expect(input).toHaveAttribute('type', 'url')
- expect(input).toHaveAttribute('id', 'repoUrl')
- expect(input).toHaveAttribute('name', 'repoUrl')
- expect(input).toHaveAttribute('placeholder', 'Please enter GitHub repo URL')
- })
-
- it('should render cancel button', () => {
- render()
-
- expect(screen.getByRole('button', { name: 'plugin.installModal.cancel' })).toBeInTheDocument()
- })
-
- it('should render next button', () => {
- render()
-
- expect(screen.getByRole('button', { name: 'plugin.installModal.next' })).toBeInTheDocument()
- })
-
- it('should associate label with input field', () => {
- render()
-
- const input = screen.getByLabelText('plugin.installFromGitHub.gitHubRepo')
- expect(input).toBeInTheDocument()
- })
-
- it('should auto-focus the input on mount', async () => {
- render()
-
- const input = screen.getByRole('textbox')
- await waitFor(() => {
- expect(input).toHaveFocus()
- })
- })
- })
-
- // ================================
- // Props Tests
- // ================================
- describe('Props', () => {
- it('should display repoUrl value in input', () => {
- render()
-
- expect(screen.getByRole('textbox')).toHaveValue('https://github.com/test/repo')
- })
-
- it('should display empty string when repoUrl is empty', () => {
- render()
-
- expect(screen.getByRole('textbox')).toHaveValue('')
- })
- })
-
- // ================================
- // User Interactions Tests
- // ================================
- describe('User Interactions', () => {
- it('should call onChange when input value changes', () => {
- const onChange = vi.fn()
- render()
-
- const input = screen.getByRole('textbox')
- fireEvent.change(input, { target: { value: 'https://github.com/owner/repo' } })
-
- expect(onChange).toHaveBeenCalledTimes(1)
- expect(onChange).toHaveBeenCalledWith('https://github.com/owner/repo')
- })
-
- it('should call onCancel when cancel button is clicked', () => {
- const onCancel = vi.fn()
- render()
-
- fireEvent.click(screen.getByRole('button', { name: 'plugin.installModal.cancel' }))
-
- expect(onCancel).toHaveBeenCalledTimes(1)
- })
-
- it('should call onNext when next button is clicked', () => {
- const onNext = vi.fn()
- render()
-
- fireEvent.click(screen.getByRole('button', { name: 'plugin.installModal.next' }))
-
- expect(onNext).toHaveBeenCalledTimes(1)
- })
- })
-
- // ================================
- // Button State Tests
- // ================================
- describe('Button State', () => {
- it('should disable next button when repoUrl is empty', () => {
- render()
-
- expect(screen.getByRole('button', { name: 'plugin.installModal.next' })).toBeDisabled()
- })
-
- it('should disable next button when repoUrl is only whitespace', () => {
- render()
-
- expect(screen.getByRole('button', { name: 'plugin.installModal.next' })).toBeDisabled()
- })
-
- it('should enable next button when repoUrl has content', () => {
- render()
-
- expect(screen.getByRole('button', { name: 'plugin.installModal.next' })).not.toBeDisabled()
- })
-
- it('should not disable cancel button regardless of repoUrl', () => {
- render()
-
- expect(screen.getByRole('button', { name: 'plugin.installModal.cancel' })).not.toBeDisabled()
- })
- })
-
- // ================================
- // Edge Cases Tests
- // ================================
- describe('Edge Cases', () => {
- it('should handle URL with special characters', () => {
- const onChange = vi.fn()
- render()
-
- const input = screen.getByRole('textbox')
- fireEvent.change(input, { target: { value: 'https://github.com/test-org/repo_name-123' } })
-
- expect(onChange).toHaveBeenCalledWith('https://github.com/test-org/repo_name-123')
- })
-
- it('should handle very long URLs', () => {
- const longUrl = `https://github.com/${'a'.repeat(100)}/${'b'.repeat(100)}`
- render()
-
- expect(screen.getByRole('textbox')).toHaveValue(longUrl)
- })
-
- it('should handle onChange with empty string', () => {
- const onChange = vi.fn()
- render()
-
- const input = screen.getByRole('textbox')
- fireEvent.change(input, { target: { value: '' } })
-
- expect(onChange).toHaveBeenCalledWith('')
- })
-
- it('should preserve callback references on rerender', () => {
- const onNext = vi.fn()
- const { rerender } = render()
-
- rerender()
-
- fireEvent.click(screen.getByRole('button', { name: 'plugin.installModal.next' }))
-
- expect(onNext).toHaveBeenCalledTimes(1)
- })
- })
-})
diff --git a/web/app/components/plugins/install-plugin/install-from-github/steps/setURL.tsx b/web/app/components/plugins/install-plugin/install-from-github/steps/setURL.tsx
deleted file mode 100644
index 45ce5980ac..0000000000
--- a/web/app/components/plugins/install-plugin/install-from-github/steps/setURL.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-'use client'
-
-import { Button } from '@langgenius/dify-ui/button'
-import * as React from 'react'
-import { useTranslation } from 'react-i18next'
-
-type SetURLProps = {
- repoUrl: string
- onChange: (value: string) => void
- onNext: () => void
- onCancel: () => void
-}
-
-const SetURL: React.FC = ({ repoUrl, onChange, onNext, onCancel }) => {
- const { t } = useTranslation()
- const inputRef = React.useRef(null)
-
- // Focus the input after the dropdown's focus-return animation settles.
- // Using rAF avoids racing the DropdownMenu FloatingFocusManager that returns
- // focus to the trigger on close.
- React.useEffect(() => {
- const frame = requestAnimationFrame(() => {
- inputRef.current?.focus()
- })
- return () => cancelAnimationFrame(frame)
- }, [])
-
- return (
- <>
-
- onChange(e.target.value)}
- className="shadows-shadow-xs flex grow items-center gap-[2px] self-stretch
- overflow-hidden rounded-lg border border-components-input-border-active bg-components-input-bg-active p-2
- system-sm-regular text-ellipsis text-components-input-text-filled outline-hidden"
- placeholder="Please enter GitHub repo URL"
- />
-
-
-
-
-
- )
-}
-
-export default SetURL
diff --git a/web/app/components/plugins/plugin-page/__tests__/install-plugin-dropdown.spec.tsx b/web/app/components/plugins/plugin-page/__tests__/install-plugin-dropdown.spec.tsx
index 9f883af1b2..bc39cfdbd4 100644
--- a/web/app/components/plugins/plugin-page/__tests__/install-plugin-dropdown.spec.tsx
+++ b/web/app/components/plugins/plugin-page/__tests__/install-plugin-dropdown.spec.tsx
@@ -60,16 +60,18 @@ vi.mock('@langgenius/dify-ui/dropdown-menu', async () => {
DropdownMenu: ({
open,
onOpenChange,
+ modal,
children,
}: {
open: boolean
onOpenChange?: (open: boolean) => void
+ modal?: boolean
children: React.ReactNode
}) => {
portalOpen = open
return (
- {children}
+ {children}
)
},
@@ -158,6 +160,7 @@ describe('InstallPluginDropdown', () => {
fireEvent.click(screen.getByTestId('dropdown-trigger'))
+ expect(screen.getByTestId('dropdown-menu')).toHaveAttribute('data-modal', 'false')
expect(screen.getByText('plugin.installFrom')).toBeInTheDocument()
expect(screen.getByText('plugin.source.marketplace')).toBeInTheDocument()
expect(screen.getByText('plugin.source.github')).toBeInTheDocument()
diff --git a/web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx b/web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx
index a972c9891c..8e996345af 100644
--- a/web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx
+++ b/web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx
@@ -111,7 +111,7 @@ const InstallPluginDropdown = ({
}
return (
-
+