diff --git a/api/controllers/console/datasets/datasets.py b/api/controllers/console/datasets/datasets.py index c0422ef6f4..70b6e932e9 100644 --- a/api/controllers/console/datasets/datasets.py +++ b/api/controllers/console/datasets/datasets.py @@ -422,7 +422,6 @@ class DatasetApi(Resource): raise NotFound("Dataset not found.") payload = DatasetUpdatePayload.model_validate(console_ns.payload or {}) - payload_data = payload.model_dump(exclude_unset=True) current_user, current_tenant_id = current_account_with_tenant() # check embedding model setting if ( @@ -434,6 +433,7 @@ class DatasetApi(Resource): dataset.tenant_id, payload.embedding_model_provider, payload.embedding_model ) payload.is_multimodal = is_multimodal + payload_data = payload.model_dump(exclude_unset=True) # The role of the current user in the ta table must be admin, owner, editor, or dataset_operator DatasetPermissionService.check_permission( current_user, dataset, payload.permission, payload.partial_member_list diff --git a/api/core/llm_generator/llm_generator.py b/api/core/llm_generator/llm_generator.py index 6b168fd4e8..4a577e6c38 100644 --- a/api/core/llm_generator/llm_generator.py +++ b/api/core/llm_generator/llm_generator.py @@ -554,11 +554,16 @@ class LLMGenerator: prompt_messages=list(prompt_messages), model_parameters=model_parameters, stream=False ) - generated_raw = cast(str, response.message.content) + generated_raw = response.message.get_text_content() first_brace = generated_raw.find("{") last_brace = generated_raw.rfind("}") - return {**json.loads(generated_raw[first_brace : last_brace + 1])} - + if first_brace == -1 or last_brace == -1 or last_brace < first_brace: + raise ValueError(f"Could not find a valid JSON object in response: {generated_raw}") + json_str = generated_raw[first_brace : last_brace + 1] + data = json_repair.loads(json_str) + if not isinstance(data, dict): + raise TypeError(f"Expected a JSON object, but got {type(data).__name__}") + return data except InvokeError as e: error = str(e) return {"error": f"Failed to generate code. Error: {error}"} diff --git a/api/core/rag/datasource/retrieval_service.py b/api/core/rag/datasource/retrieval_service.py index e644e754ec..e4ca25b46b 100644 --- a/api/core/rag/datasource/retrieval_service.py +++ b/api/core/rag/datasource/retrieval_service.py @@ -371,7 +371,7 @@ class RetrievalService: include_segment_ids = set() segment_child_map = {} segment_file_map = {} - with Session(db.engine) as session: + with Session(bind=db.engine, expire_on_commit=False) as session: # Process documents for document in documents: segment_id = None @@ -395,7 +395,7 @@ class RetrievalService: session, ) if attachment_info_dict: - attachment_info = attachment_info_dict["attchment_info"] + attachment_info = attachment_info_dict["attachment_info"] segment_id = attachment_info_dict["segment_id"] else: child_index_node_id = document.metadata.get("doc_id") @@ -417,13 +417,6 @@ class RetrievalService: DocumentSegment.status == "completed", DocumentSegment.id == segment_id, ) - .options( - load_only( - DocumentSegment.id, - DocumentSegment.content, - DocumentSegment.answer, - ) - ) .first() ) @@ -475,7 +468,7 @@ class RetrievalService: session, ) if attachment_info_dict: - attachment_info = attachment_info_dict["attchment_info"] + attachment_info = attachment_info_dict["attachment_info"] segment_id = attachment_info_dict["segment_id"] document_segment_stmt = select(DocumentSegment).where( DocumentSegment.dataset_id == dataset_document.dataset_id, @@ -684,7 +677,7 @@ class RetrievalService: .first() ) if attachment_binding: - attchment_info = { + attachment_info = { "id": upload_file.id, "name": upload_file.name, "extension": "." + upload_file.extension, @@ -692,5 +685,5 @@ class RetrievalService: "source_url": sign_upload_file(upload_file.id, upload_file.extension), "size": upload_file.size, } - return {"attchment_info": attchment_info, "segment_id": attachment_binding.segment_id} + return {"attachment_info": attachment_info, "segment_id": attachment_binding.segment_id} return None diff --git a/api/core/rag/retrieval/dataset_retrieval.py b/api/core/rag/retrieval/dataset_retrieval.py index ec55d2d0cc..a65069b1b7 100644 --- a/api/core/rag/retrieval/dataset_retrieval.py +++ b/api/core/rag/retrieval/dataset_retrieval.py @@ -266,7 +266,7 @@ class DatasetRetrieval: ).all() if attachments_with_bindings: for _, upload_file in attachments_with_bindings: - attchment_info = File( + attachment_info = File( id=upload_file.id, filename=upload_file.name, extension="." + upload_file.extension, @@ -280,7 +280,7 @@ class DatasetRetrieval: storage_key=upload_file.key, url=sign_upload_file(upload_file.id, upload_file.extension), ) - context_files.append(attchment_info) + context_files.append(attachment_info) if show_retrieve_source: for record in records: segment = record.segment diff --git a/api/core/workflow/nodes/llm/node.py b/api/core/workflow/nodes/llm/node.py index a5973862b2..04e2802191 100644 --- a/api/core/workflow/nodes/llm/node.py +++ b/api/core/workflow/nodes/llm/node.py @@ -697,7 +697,7 @@ class LLMNode(Node[LLMNodeData]): ).all() if attachments_with_bindings: for _, upload_file in attachments_with_bindings: - attchment_info = File( + attachment_info = File( id=upload_file.id, filename=upload_file.name, extension="." + upload_file.extension, @@ -711,7 +711,7 @@ class LLMNode(Node[LLMNodeData]): storage_key=upload_file.key, url=sign_upload_file(upload_file.id, upload_file.extension), ) - context_files.append(attchment_info) + context_files.append(attachment_info) yield RunRetrieverResourceEvent( retriever_resources=original_retriever_resource, context=context_str.strip(), diff --git a/web/app/components/app/app-publisher/index.tsx b/web/app/components/app/app-publisher/index.tsx index bba5ebfa21..801345798b 100644 --- a/web/app/components/app/app-publisher/index.tsx +++ b/web/app/components/app/app-publisher/index.tsx @@ -21,7 +21,6 @@ import { import { useKeyPress } from 'ahooks' import Divider from '../../base/divider' import Loading from '../../base/loading' -import Toast from '../../base/toast' import Tooltip from '../../base/tooltip' import { getKeyboardKeyCodeBySystem, getKeyboardKeyNameBySystem } from '../../workflow/utils' import AccessControl from '../app-access-control' @@ -50,6 +49,7 @@ import { AppModeEnum } from '@/types/app' import type { PublishWorkflowParams } from '@/types/workflow' import { basePath } from '@/utils/var' import UpgradeBtn from '@/app/components/billing/upgrade-btn' +import { useAsyncWindowOpen } from '@/hooks/use-async-window-open' const ACCESS_MODE_MAP: Record = { [AccessMode.ORGANIZATION]: { @@ -216,18 +216,23 @@ const AppPublisher = ({ setPublished(false) }, [disabled, onToggle, open]) - const handleOpenInExplore = useCallback(async () => { - try { - const { installed_apps }: any = await fetchInstalledAppList(appDetail?.id) || {} - if (installed_apps?.length > 0) - window.open(`${basePath}/explore/installed/${installed_apps[0].id}`, '_blank') - else + const { openAsync } = useAsyncWindowOpen() + + const handleOpenInExplore = useCallback(() => { + if (!appDetail?.id) return + + openAsync( + async () => { + const { installed_apps }: { installed_apps?: { id: string }[] } = await fetchInstalledAppList(appDetail.id) || {} + if (installed_apps && installed_apps.length > 0) + return `${basePath}/explore/installed/${installed_apps[0].id}` throw new Error('No app found in Explore') - } - catch (e: any) { - Toast.notify({ type: 'error', message: `${e.message || e}` }) - } - }, [appDetail?.id]) + }, + { + errorMessage: 'Failed to open app in Explore', + }, + ) + }, [appDetail?.id, openAsync]) const handleAccessControlUpdate = useCallback(async () => { if (!appDetail) diff --git a/web/app/components/apps/app-card.tsx b/web/app/components/apps/app-card.tsx index 8356cfd31c..407df23913 100644 --- a/web/app/components/apps/app-card.tsx +++ b/web/app/components/apps/app-card.tsx @@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next' import { RiBuildingLine, RiGlobalLine, RiLockLine, RiMoreFill, RiVerifiedBadgeLine } from '@remixicon/react' import cn from '@/utils/classnames' import { type App, AppModeEnum } from '@/types/app' -import Toast, { ToastContext } from '@/app/components/base/toast' +import { ToastContext } from '@/app/components/base/toast' import { copyApp, deleteApp, exportAppConfig, updateAppInfo } from '@/service/apps' import type { DuplicateAppModalProps } from '@/app/components/app/duplicate-modal' import AppIcon from '@/app/components/base/app-icon' @@ -31,6 +31,7 @@ import { AccessMode } from '@/models/access-control' import { useGlobalPublicStore } from '@/context/global-public-context' import { formatTime } from '@/utils/time' import { useGetUserCanAccessApp } from '@/service/access-control' +import { useAsyncWindowOpen } from '@/hooks/use-async-window-open' import dynamic from 'next/dynamic' const EditAppModal = dynamic(() => import('@/app/components/explore/create-app-modal'), { @@ -242,20 +243,24 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => { e.preventDefault() setShowAccessControl(true) } - const onClickInstalledApp = async (e: React.MouseEvent) => { + const { openAsync } = useAsyncWindowOpen() + + const onClickInstalledApp = (e: React.MouseEvent) => { e.stopPropagation() props.onClick?.() e.preventDefault() - try { - const { installed_apps }: any = await fetchInstalledAppList(app.id) || {} - if (installed_apps?.length > 0) - window.open(`${basePath}/explore/installed/${installed_apps[0].id}`, '_blank') - else + + openAsync( + async () => { + const { installed_apps }: { installed_apps?: { id: string }[] } = await fetchInstalledAppList(app.id) || {} + if (installed_apps && installed_apps.length > 0) + return `${basePath}/explore/installed/${installed_apps[0].id}` throw new Error('No app found in Explore') - } - catch (e: any) { - Toast.notify({ type: 'error', message: `${e.message || e}` }) - } + }, + { + errorMessage: 'Failed to open app in Explore', + }, + ) } return (
diff --git a/web/app/components/billing/pricing/plans/cloud-plan-item/index.tsx b/web/app/components/billing/pricing/plans/cloud-plan-item/index.tsx index 396dd4a1b0..164ad9061a 100644 --- a/web/app/components/billing/pricing/plans/cloud-plan-item/index.tsx +++ b/web/app/components/billing/pricing/plans/cloud-plan-item/index.tsx @@ -9,6 +9,7 @@ import Toast from '../../../../base/toast' import { PlanRange } from '../../plan-switcher/plan-range-switcher' import { useAppContext } from '@/context/app-context' import { fetchBillingUrl, fetchSubscriptionUrls } from '@/service/billing' +import { useAsyncWindowOpen } from '@/hooks/use-async-window-open' import List from './list' import Button from './button' import { Professional, Sandbox, Team } from '../../assets' @@ -54,6 +55,8 @@ const CloudPlanItem: FC = ({ })[plan] }, [isCurrent, plan, t]) + const { openAsync } = useAsyncWindowOpen() + const handleGetPayUrl = async () => { if (loading) return @@ -72,8 +75,13 @@ const CloudPlanItem: FC = ({ setLoading(true) try { if (isCurrentPaidPlan) { - const res = await fetchBillingUrl() - window.open(res.url, '_blank') + await openAsync( + () => fetchBillingUrl().then(res => res.url), + { + errorMessage: 'Failed to open billing page', + windowFeatures: 'noopener,noreferrer', + }, + ) return } diff --git a/web/app/components/datasets/external-knowledge-base/connector/index.spec.tsx b/web/app/components/datasets/external-knowledge-base/connector/index.spec.tsx new file mode 100644 index 0000000000..a6353a101c --- /dev/null +++ b/web/app/components/datasets/external-knowledge-base/connector/index.spec.tsx @@ -0,0 +1,367 @@ +import { fireEvent, render, screen, waitFor } from '@testing-library/react' +import userEvent from '@testing-library/user-event' +import type { ExternalAPIItem } from '@/models/datasets' +import ExternalKnowledgeBaseConnector from './index' +import { createExternalKnowledgeBase } from '@/service/datasets' + +// Mock next/navigation +const mockRouterBack = jest.fn() +const mockReplace = jest.fn() +jest.mock('next/navigation', () => ({ + useRouter: () => ({ + back: mockRouterBack, + replace: mockReplace, + push: jest.fn(), + refresh: jest.fn(), + }), +})) + +// Mock react-i18next +jest.mock('react-i18next', () => ({ + useTranslation: () => ({ + t: (key: string) => key, + }), +})) + +// Mock useDocLink hook +jest.mock('@/context/i18n', () => ({ + useDocLink: () => (path?: string) => `https://docs.dify.ai/en${path || ''}`, +})) + +// Mock toast context +const mockNotify = jest.fn() +jest.mock('@/app/components/base/toast', () => ({ + useToastContext: () => ({ + notify: mockNotify, + }), +})) + +// Mock modal context +jest.mock('@/context/modal-context', () => ({ + useModalContext: () => ({ + setShowExternalKnowledgeAPIModal: jest.fn(), + }), +})) + +// Mock API service +jest.mock('@/service/datasets', () => ({ + createExternalKnowledgeBase: jest.fn(), +})) + +// Factory function to create mock ExternalAPIItem +const createMockExternalAPIItem = (overrides: Partial = {}): ExternalAPIItem => ({ + id: 'api-default', + tenant_id: 'tenant-1', + name: 'Default API', + description: 'Default API description', + settings: { + endpoint: 'https://api.example.com', + api_key: 'test-api-key', + }, + dataset_bindings: [], + created_by: 'user-1', + created_at: '2024-01-01T00:00:00Z', + ...overrides, +}) + +// Default mock API list +const createDefaultMockApiList = (): ExternalAPIItem[] => [ + createMockExternalAPIItem({ + id: 'api-1', + name: 'Test API 1', + settings: { endpoint: 'https://api1.example.com', api_key: 'key-1' }, + }), + createMockExternalAPIItem({ + id: 'api-2', + name: 'Test API 2', + settings: { endpoint: 'https://api2.example.com', api_key: 'key-2' }, + }), +] + +let mockExternalKnowledgeApiList: ExternalAPIItem[] = createDefaultMockApiList() + +jest.mock('@/context/external-knowledge-api-context', () => ({ + useExternalKnowledgeApi: () => ({ + externalKnowledgeApiList: mockExternalKnowledgeApiList, + mutateExternalKnowledgeApis: jest.fn(), + isLoading: false, + }), +})) + +// Suppress console.error helper +const suppressConsoleError = () => jest.spyOn(console, 'error').mockImplementation(jest.fn()) + +// Helper to create a pending promise with external resolver +function createPendingPromise() { + let resolve: (value: T) => void = jest.fn() + const promise = new Promise((r) => { + resolve = r + }) + return { promise, resolve } +} + +// Helper to fill required form fields and submit +async function fillFormAndSubmit(user: ReturnType) { + const nameInput = screen.getByPlaceholderText('dataset.externalKnowledgeNamePlaceholder') + const knowledgeIdInput = screen.getByPlaceholderText('dataset.externalKnowledgeIdPlaceholder') + + fireEvent.change(nameInput, { target: { value: 'Test Knowledge Base' } }) + fireEvent.change(knowledgeIdInput, { target: { value: 'kb-123' } }) + + // Wait for button to be enabled + await waitFor(() => { + const connectButton = screen.getByText('dataset.externalKnowledgeForm.connect').closest('button') + expect(connectButton).not.toBeDisabled() + }) + + const connectButton = screen.getByText('dataset.externalKnowledgeForm.connect').closest('button') + await user.click(connectButton!) +} + +describe('ExternalKnowledgeBaseConnector', () => { + beforeEach(() => { + jest.clearAllMocks() + mockExternalKnowledgeApiList = createDefaultMockApiList() + ;(createExternalKnowledgeBase as jest.Mock).mockResolvedValue({ id: 'new-kb-id' }) + }) + + // Tests for rendering with real ExternalKnowledgeBaseCreate component + describe('Rendering', () => { + it('should render the create form with all required elements', () => { + render() + + // Verify main title and form elements + expect(screen.getByText('dataset.connectDataset')).toBeInTheDocument() + expect(screen.getByText('dataset.externalKnowledgeName')).toBeInTheDocument() + expect(screen.getByText('dataset.externalKnowledgeId')).toBeInTheDocument() + expect(screen.getByText('dataset.retrievalSettings')).toBeInTheDocument() + + // Verify buttons + expect(screen.getByText('dataset.externalKnowledgeForm.cancel')).toBeInTheDocument() + expect(screen.getByText('dataset.externalKnowledgeForm.connect')).toBeInTheDocument() + }) + + it('should render connect button disabled initially', () => { + render() + + const connectButton = screen.getByText('dataset.externalKnowledgeForm.connect').closest('button') + expect(connectButton).toBeDisabled() + }) + }) + + // Tests for API success flow + describe('API Success Flow', () => { + it('should call API and show success notification when form is submitted', async () => { + const user = userEvent.setup() + render() + + await fillFormAndSubmit(user) + + // Verify API was called with form data + await waitFor(() => { + expect(createExternalKnowledgeBase).toHaveBeenCalledWith({ + body: expect.objectContaining({ + name: 'Test Knowledge Base', + external_knowledge_id: 'kb-123', + external_knowledge_api_id: 'api-1', + provider: 'external', + }), + }) + }) + + // Verify success notification + expect(mockNotify).toHaveBeenCalledWith({ + type: 'success', + message: 'External Knowledge Base Connected Successfully', + }) + + // Verify navigation back + expect(mockRouterBack).toHaveBeenCalledTimes(1) + }) + + it('should include retrieval settings in API call', async () => { + const user = userEvent.setup() + render() + + await fillFormAndSubmit(user) + + await waitFor(() => { + expect(createExternalKnowledgeBase).toHaveBeenCalledWith({ + body: expect.objectContaining({ + external_retrieval_model: expect.objectContaining({ + top_k: 4, + score_threshold: 0.5, + score_threshold_enabled: false, + }), + }), + }) + }) + }) + }) + + // Tests for API error flow + describe('API Error Flow', () => { + it('should show error notification when API fails', async () => { + const user = userEvent.setup() + const consoleErrorSpy = suppressConsoleError() + ;(createExternalKnowledgeBase as jest.Mock).mockRejectedValue(new Error('Network Error')) + + render() + + await fillFormAndSubmit(user) + + // Verify error notification + await waitFor(() => { + expect(mockNotify).toHaveBeenCalledWith({ + type: 'error', + message: 'Failed to connect External Knowledge Base', + }) + }) + + // Verify no navigation + expect(mockRouterBack).not.toHaveBeenCalled() + + consoleErrorSpy.mockRestore() + }) + + it('should show error notification when API returns invalid result', async () => { + const user = userEvent.setup() + const consoleErrorSpy = suppressConsoleError() + ;(createExternalKnowledgeBase as jest.Mock).mockResolvedValue({}) + + render() + + await fillFormAndSubmit(user) + + await waitFor(() => { + expect(mockNotify).toHaveBeenCalledWith({ + type: 'error', + message: 'Failed to connect External Knowledge Base', + }) + }) + + expect(mockRouterBack).not.toHaveBeenCalled() + + consoleErrorSpy.mockRestore() + }) + }) + + // Tests for loading state + describe('Loading State', () => { + it('should show loading state during API call', async () => { + const user = userEvent.setup() + + // Create a promise that won't resolve immediately + const { promise, resolve: resolvePromise } = createPendingPromise<{ id: string }>() + ;(createExternalKnowledgeBase as jest.Mock).mockReturnValue(promise) + + render() + + // Fill form + const nameInput = screen.getByPlaceholderText('dataset.externalKnowledgeNamePlaceholder') + const knowledgeIdInput = screen.getByPlaceholderText('dataset.externalKnowledgeIdPlaceholder') + fireEvent.change(nameInput, { target: { value: 'Test' } }) + fireEvent.change(knowledgeIdInput, { target: { value: 'kb-1' } }) + + await waitFor(() => { + const connectButton = screen.getByText('dataset.externalKnowledgeForm.connect').closest('button') + expect(connectButton).not.toBeDisabled() + }) + + // Click connect + const connectButton = screen.getByText('dataset.externalKnowledgeForm.connect').closest('button') + await user.click(connectButton!) + + // Button should show loading (the real Button component has loading prop) + await waitFor(() => { + expect(createExternalKnowledgeBase).toHaveBeenCalled() + }) + + // Resolve the promise + resolvePromise({ id: 'new-id' }) + + await waitFor(() => { + expect(mockNotify).toHaveBeenCalledWith({ + type: 'success', + message: 'External Knowledge Base Connected Successfully', + }) + }) + }) + }) + + // Tests for form validation (integration with real create component) + describe('Form Validation', () => { + it('should keep button disabled when only name is filled', () => { + render() + + const nameInput = screen.getByPlaceholderText('dataset.externalKnowledgeNamePlaceholder') + fireEvent.change(nameInput, { target: { value: 'Test' } }) + + const connectButton = screen.getByText('dataset.externalKnowledgeForm.connect').closest('button') + expect(connectButton).toBeDisabled() + }) + + it('should keep button disabled when only knowledge id is filled', () => { + render() + + const knowledgeIdInput = screen.getByPlaceholderText('dataset.externalKnowledgeIdPlaceholder') + fireEvent.change(knowledgeIdInput, { target: { value: 'kb-1' } }) + + const connectButton = screen.getByText('dataset.externalKnowledgeForm.connect').closest('button') + expect(connectButton).toBeDisabled() + }) + + it('should enable button when all required fields are filled', async () => { + render() + + const nameInput = screen.getByPlaceholderText('dataset.externalKnowledgeNamePlaceholder') + const knowledgeIdInput = screen.getByPlaceholderText('dataset.externalKnowledgeIdPlaceholder') + + fireEvent.change(nameInput, { target: { value: 'Test' } }) + fireEvent.change(knowledgeIdInput, { target: { value: 'kb-1' } }) + + await waitFor(() => { + const connectButton = screen.getByText('dataset.externalKnowledgeForm.connect').closest('button') + expect(connectButton).not.toBeDisabled() + }) + }) + }) + + // Tests for user interactions + describe('User Interactions', () => { + it('should allow typing in form fields', async () => { + const user = userEvent.setup() + render() + + const nameInput = screen.getByPlaceholderText('dataset.externalKnowledgeNamePlaceholder') + const descriptionInput = screen.getByPlaceholderText('dataset.externalKnowledgeDescriptionPlaceholder') + + await user.type(nameInput, 'My Knowledge Base') + await user.type(descriptionInput, 'My Description') + + expect((nameInput as HTMLInputElement).value).toBe('My Knowledge Base') + expect((descriptionInput as HTMLTextAreaElement).value).toBe('My Description') + }) + + it('should handle cancel button click', async () => { + const user = userEvent.setup() + render() + + const cancelButton = screen.getByText('dataset.externalKnowledgeForm.cancel').closest('button') + await user.click(cancelButton!) + + expect(mockReplace).toHaveBeenCalledWith('/datasets') + }) + + it('should handle back button click', async () => { + const user = userEvent.setup() + render() + + const buttons = screen.getAllByRole('button') + const backButton = buttons.find(btn => btn.classList.contains('rounded-full')) + await user.click(backButton!) + + expect(mockReplace).toHaveBeenCalledWith('/datasets') + }) + }) +}) diff --git a/web/app/components/datasets/external-knowledge-base/create/index.spec.tsx b/web/app/components/datasets/external-knowledge-base/create/index.spec.tsx new file mode 100644 index 0000000000..c315743424 --- /dev/null +++ b/web/app/components/datasets/external-knowledge-base/create/index.spec.tsx @@ -0,0 +1,1059 @@ +import React from 'react' +import { fireEvent, render, screen, waitFor } from '@testing-library/react' +import userEvent from '@testing-library/user-event' +import type { ExternalAPIItem } from '@/models/datasets' +import ExternalKnowledgeBaseCreate from './index' + +// Mock next/navigation +const mockReplace = jest.fn() +const mockRefresh = jest.fn() +jest.mock('next/navigation', () => ({ + useRouter: () => ({ + replace: mockReplace, + push: jest.fn(), + refresh: mockRefresh, + }), +})) + +// Mock react-i18next +jest.mock('react-i18next', () => ({ + useTranslation: () => ({ + t: (key: string) => key, + }), +})) + +// Mock useDocLink hook +jest.mock('@/context/i18n', () => ({ + useDocLink: () => (path?: string) => `https://docs.dify.ai/en${path || ''}`, +})) + +// Mock external context providers (these are external dependencies) +const mockSetShowExternalKnowledgeAPIModal = jest.fn() +jest.mock('@/context/modal-context', () => ({ + useModalContext: () => ({ + setShowExternalKnowledgeAPIModal: mockSetShowExternalKnowledgeAPIModal, + }), +})) + +// Factory function to create mock ExternalAPIItem (following project conventions) +const createMockExternalAPIItem = (overrides: Partial = {}): ExternalAPIItem => ({ + id: 'api-default', + tenant_id: 'tenant-1', + name: 'Default API', + description: 'Default API description', + settings: { + endpoint: 'https://api.example.com', + api_key: 'test-api-key', + }, + dataset_bindings: [], + created_by: 'user-1', + created_at: '2024-01-01T00:00:00Z', + ...overrides, +}) + +// Default mock API list +const createDefaultMockApiList = (): ExternalAPIItem[] => [ + createMockExternalAPIItem({ + id: 'api-1', + name: 'Test API 1', + settings: { endpoint: 'https://api1.example.com', api_key: 'key-1' }, + }), + createMockExternalAPIItem({ + id: 'api-2', + name: 'Test API 2', + settings: { endpoint: 'https://api2.example.com', api_key: 'key-2' }, + }), +] + +const mockMutateExternalKnowledgeApis = jest.fn() +let mockExternalKnowledgeApiList: ExternalAPIItem[] = createDefaultMockApiList() + +jest.mock('@/context/external-knowledge-api-context', () => ({ + useExternalKnowledgeApi: () => ({ + externalKnowledgeApiList: mockExternalKnowledgeApiList, + mutateExternalKnowledgeApis: mockMutateExternalKnowledgeApis, + isLoading: false, + }), +})) + +// Helper to render component with default props +const renderComponent = (props: Partial> = {}) => { + const defaultProps = { + onConnect: jest.fn(), + loading: false, + } + return render() +} + +describe('ExternalKnowledgeBaseCreate', () => { + beforeEach(() => { + jest.clearAllMocks() + // Reset API list to default using factory function + mockExternalKnowledgeApiList = createDefaultMockApiList() + }) + + // Tests for basic rendering + describe('Rendering', () => { + it('should render without crashing', () => { + renderComponent() + + expect(screen.getByText('dataset.connectDataset')).toBeInTheDocument() + }) + + it('should render KnowledgeBaseInfo component with correct labels', () => { + renderComponent() + + // KnowledgeBaseInfo renders these labels + expect(screen.getByText('dataset.externalKnowledgeName')).toBeInTheDocument() + expect(screen.getByText('dataset.externalKnowledgeDescription')).toBeInTheDocument() + }) + + it('should render ExternalApiSelection component', () => { + renderComponent() + + // ExternalApiSelection renders this label + expect(screen.getByText('dataset.externalAPIPanelTitle')).toBeInTheDocument() + expect(screen.getByText('dataset.externalKnowledgeId')).toBeInTheDocument() + }) + + it('should render RetrievalSettings component', () => { + renderComponent() + + // RetrievalSettings renders this label + expect(screen.getByText('dataset.retrievalSettings')).toBeInTheDocument() + }) + + it('should render InfoPanel component', () => { + renderComponent() + + // InfoPanel renders these texts + expect(screen.getByText('dataset.connectDatasetIntro.title')).toBeInTheDocument() + expect(screen.getByText('dataset.connectDatasetIntro.learnMore')).toBeInTheDocument() + }) + + it('should render helper text with translation keys', () => { + renderComponent() + + expect(screen.getByText('dataset.connectHelper.helper1')).toBeInTheDocument() + expect(screen.getByText('dataset.connectHelper.helper2')).toBeInTheDocument() + expect(screen.getByText('dataset.connectHelper.helper3')).toBeInTheDocument() + expect(screen.getByText('dataset.connectHelper.helper4')).toBeInTheDocument() + expect(screen.getByText('dataset.connectHelper.helper5')).toBeInTheDocument() + }) + + it('should render cancel and connect buttons', () => { + renderComponent() + + expect(screen.getByText('dataset.externalKnowledgeForm.cancel')).toBeInTheDocument() + expect(screen.getByText('dataset.externalKnowledgeForm.connect')).toBeInTheDocument() + }) + + it('should render documentation link with correct href', () => { + renderComponent() + + const docLink = screen.getByText('dataset.connectHelper.helper4') + expect(docLink).toHaveAttribute('href', 'https://docs.dify.ai/en/guides/knowledge-base/connect-external-knowledge-base') + expect(docLink).toHaveAttribute('target', '_blank') + expect(docLink).toHaveAttribute('rel', 'noopener noreferrer') + }) + }) + + // Tests for props handling + describe('Props', () => { + it('should pass loading prop to connect button', () => { + renderComponent({ loading: true }) + + const connectButton = screen.getByText('dataset.externalKnowledgeForm.connect').closest('button') + expect(connectButton).toBeInTheDocument() + }) + + it('should call onConnect with form data when connect button is clicked', async () => { + const user = userEvent.setup() + const onConnect = jest.fn() + renderComponent({ onConnect }) + + // Fill in name field (using the actual Input component) + const nameInput = screen.getByPlaceholderText('dataset.externalKnowledgeNamePlaceholder') + fireEvent.change(nameInput, { target: { value: 'Test Knowledge Base' } }) + + // Fill in external knowledge id + const knowledgeIdInput = screen.getByPlaceholderText('dataset.externalKnowledgeIdPlaceholder') + fireEvent.change(knowledgeIdInput, { target: { value: 'knowledge-456' } }) + + // Wait for useEffect to auto-select the first API + await waitFor(() => { + const connectButton = screen.getByText('dataset.externalKnowledgeForm.connect').closest('button') + expect(connectButton).not.toBeDisabled() + }) + + const connectButton = screen.getByText('dataset.externalKnowledgeForm.connect').closest('button') + await user.click(connectButton!) + + expect(onConnect).toHaveBeenCalledWith( + expect.objectContaining({ + name: 'Test Knowledge Base', + external_knowledge_id: 'knowledge-456', + external_knowledge_api_id: 'api-1', // Auto-selected first API + provider: 'external', + }), + ) + }) + + it('should not call onConnect when form is invalid and button is disabled', async () => { + const user = userEvent.setup() + const onConnect = jest.fn() + renderComponent({ onConnect }) + + const connectButton = screen.getByText('dataset.externalKnowledgeForm.connect').closest('button') + expect(connectButton).toBeDisabled() + + await user.click(connectButton!) + expect(onConnect).not.toHaveBeenCalled() + }) + }) + + // Tests for state management with real child components + describe('State Management', () => { + it('should initialize form data with default values', () => { + renderComponent() + + const nameInput = screen.getByPlaceholderText('dataset.externalKnowledgeNamePlaceholder') as HTMLInputElement + const descriptionInput = screen.getByPlaceholderText('dataset.externalKnowledgeDescriptionPlaceholder') as HTMLTextAreaElement + + expect(nameInput.value).toBe('') + expect(descriptionInput.value).toBe('') + }) + + it('should update name when input changes', () => { + renderComponent() + + const nameInput = screen.getByPlaceholderText('dataset.externalKnowledgeNamePlaceholder') + fireEvent.change(nameInput, { target: { value: 'New Name' } }) + + expect((nameInput as HTMLInputElement).value).toBe('New Name') + }) + + it('should update description when textarea changes', () => { + renderComponent() + + const descriptionInput = screen.getByPlaceholderText('dataset.externalKnowledgeDescriptionPlaceholder') + fireEvent.change(descriptionInput, { target: { value: 'New Description' } }) + + expect((descriptionInput as HTMLTextAreaElement).value).toBe('New Description') + }) + + it('should update external_knowledge_id when input changes', () => { + renderComponent() + + const knowledgeIdInput = screen.getByPlaceholderText('dataset.externalKnowledgeIdPlaceholder') + fireEvent.change(knowledgeIdInput, { target: { value: 'new-knowledge-id' } }) + + expect((knowledgeIdInput as HTMLInputElement).value).toBe('new-knowledge-id') + }) + + it('should apply filled text style when description has value', () => { + renderComponent() + + const descriptionInput = screen.getByPlaceholderText('dataset.externalKnowledgeDescriptionPlaceholder') as HTMLTextAreaElement + + // Initially empty - should have placeholder style + expect(descriptionInput.className).toContain('text-components-input-text-placeholder') + + // Add description - should have filled style + fireEvent.change(descriptionInput, { target: { value: 'Some description' } }) + expect(descriptionInput.className).toContain('text-components-input-text-filled') + }) + + it('should apply placeholder text style when description is empty', () => { + renderComponent() + + const descriptionInput = screen.getByPlaceholderText('dataset.externalKnowledgeDescriptionPlaceholder') as HTMLTextAreaElement + + // Add then clear description + fireEvent.change(descriptionInput, { target: { value: 'Some description' } }) + fireEvent.change(descriptionInput, { target: { value: '' } }) + + expect(descriptionInput.className).toContain('text-components-input-text-placeholder') + }) + }) + + // Tests for form validation + describe('Form Validation', () => { + it('should disable connect button when name is empty', async () => { + renderComponent() + + // Fill knowledge id but not name + const knowledgeIdInput = screen.getByPlaceholderText('dataset.externalKnowledgeIdPlaceholder') + fireEvent.change(knowledgeIdInput, { target: { value: 'knowledge-456' } }) + + const connectButton = screen.getByText('dataset.externalKnowledgeForm.connect').closest('button') + expect(connectButton).toBeDisabled() + }) + + it('should disable connect button when name is only whitespace', async () => { + renderComponent() + + const nameInput = screen.getByPlaceholderText('dataset.externalKnowledgeNamePlaceholder') + const knowledgeIdInput = screen.getByPlaceholderText('dataset.externalKnowledgeIdPlaceholder') + + fireEvent.change(nameInput, { target: { value: ' ' } }) + fireEvent.change(knowledgeIdInput, { target: { value: 'knowledge-456' } }) + + const connectButton = screen.getByText('dataset.externalKnowledgeForm.connect').closest('button') + expect(connectButton).toBeDisabled() + }) + + it('should disable connect button when external_knowledge_id is empty', () => { + renderComponent() + + const nameInput = screen.getByPlaceholderText('dataset.externalKnowledgeNamePlaceholder') + fireEvent.change(nameInput, { target: { value: 'Test Name' } }) + + const connectButton = screen.getByText('dataset.externalKnowledgeForm.connect').closest('button') + expect(connectButton).toBeDisabled() + }) + + it('should enable connect button when all required fields are filled', async () => { + renderComponent() + + const nameInput = screen.getByPlaceholderText('dataset.externalKnowledgeNamePlaceholder') + const knowledgeIdInput = screen.getByPlaceholderText('dataset.externalKnowledgeIdPlaceholder') + + fireEvent.change(nameInput, { target: { value: 'Test Name' } }) + fireEvent.change(knowledgeIdInput, { target: { value: 'knowledge-456' } }) + + // Wait for auto-selection of API + await waitFor(() => { + const connectButton = screen.getByText('dataset.externalKnowledgeForm.connect').closest('button') + expect(connectButton).not.toBeDisabled() + }) + }) + }) + + // Tests for user interactions + describe('User Interactions', () => { + it('should navigate back when back button is clicked', async () => { + const user = userEvent.setup() + renderComponent() + + const buttons = screen.getAllByRole('button') + const backButton = buttons.find(btn => btn.classList.contains('rounded-full')) + await user.click(backButton!) + + expect(mockReplace).toHaveBeenCalledWith('/datasets') + }) + + it('should navigate back when cancel button is clicked', async () => { + const user = userEvent.setup() + renderComponent() + + const cancelButton = screen.getByText('dataset.externalKnowledgeForm.cancel').closest('button') + await user.click(cancelButton!) + + expect(mockReplace).toHaveBeenCalledWith('/datasets') + }) + + it('should call onConnect with complete form data when connect is clicked', async () => { + const user = userEvent.setup() + const onConnect = jest.fn() + renderComponent({ onConnect }) + + // Fill all fields using real components + const nameInput = screen.getByPlaceholderText('dataset.externalKnowledgeNamePlaceholder') + const descriptionInput = screen.getByPlaceholderText('dataset.externalKnowledgeDescriptionPlaceholder') + const knowledgeIdInput = screen.getByPlaceholderText('dataset.externalKnowledgeIdPlaceholder') + + fireEvent.change(nameInput, { target: { value: 'My Knowledge Base' } }) + fireEvent.change(descriptionInput, { target: { value: 'Test description' } }) + fireEvent.change(knowledgeIdInput, { target: { value: 'knowledge-abc' } }) + + await waitFor(() => { + const connectButton = screen.getByText('dataset.externalKnowledgeForm.connect').closest('button') + expect(connectButton).not.toBeDisabled() + }) + + const connectButton = screen.getByText('dataset.externalKnowledgeForm.connect').closest('button') + await user.click(connectButton!) + + expect(onConnect).toHaveBeenCalledWith( + expect.objectContaining({ + name: 'My Knowledge Base', + description: 'Test description', + external_knowledge_id: 'knowledge-abc', + provider: 'external', + }), + ) + }) + + it('should allow user to type in all input fields', async () => { + const user = userEvent.setup() + renderComponent() + + const nameInput = screen.getByPlaceholderText('dataset.externalKnowledgeNamePlaceholder') + const descriptionInput = screen.getByPlaceholderText('dataset.externalKnowledgeDescriptionPlaceholder') + const knowledgeIdInput = screen.getByPlaceholderText('dataset.externalKnowledgeIdPlaceholder') + + await user.type(nameInput, 'Typed Name') + await user.type(descriptionInput, 'Typed Description') + await user.type(knowledgeIdInput, 'typed-knowledge') + + expect((nameInput as HTMLInputElement).value).toBe('Typed Name') + expect((descriptionInput as HTMLTextAreaElement).value).toBe('Typed Description') + expect((knowledgeIdInput as HTMLInputElement).value).toBe('typed-knowledge') + }) + }) + + // Tests for ExternalApiSelection integration + describe('ExternalApiSelection Integration', () => { + it('should auto-select first API when API list is available', async () => { + const user = userEvent.setup() + const onConnect = jest.fn() + renderComponent({ onConnect }) + + const nameInput = screen.getByPlaceholderText('dataset.externalKnowledgeNamePlaceholder') + const knowledgeIdInput = screen.getByPlaceholderText('dataset.externalKnowledgeIdPlaceholder') + + fireEvent.change(nameInput, { target: { value: 'Test' } }) + fireEvent.change(knowledgeIdInput, { target: { value: 'kb-1' } }) + + await waitFor(() => { + const connectButton = screen.getByText('dataset.externalKnowledgeForm.connect').closest('button') + expect(connectButton).not.toBeDisabled() + }) + + const connectButton = screen.getByText('dataset.externalKnowledgeForm.connect').closest('button') + await user.click(connectButton!) + + // Should have auto-selected the first API + expect(onConnect).toHaveBeenCalledWith( + expect.objectContaining({ + external_knowledge_api_id: 'api-1', + }), + ) + }) + + it('should display API selector when APIs are available', () => { + renderComponent() + + // The ExternalApiSelect should show the first selected API name + expect(screen.getByText('Test API 1')).toBeInTheDocument() + }) + + it('should allow selecting different API from dropdown', async () => { + const user = userEvent.setup() + const onConnect = jest.fn() + renderComponent({ onConnect }) + + // Click on the API selector to open dropdown + const apiSelector = screen.getByText('Test API 1') + await user.click(apiSelector) + + // Select the second API + const secondApi = screen.getByText('Test API 2') + await user.click(secondApi) + + // Fill required fields + const nameInput = screen.getByPlaceholderText('dataset.externalKnowledgeNamePlaceholder') + const knowledgeIdInput = screen.getByPlaceholderText('dataset.externalKnowledgeIdPlaceholder') + + fireEvent.change(nameInput, { target: { value: 'Test' } }) + fireEvent.change(knowledgeIdInput, { target: { value: 'kb-1' } }) + + await waitFor(() => { + const connectButton = screen.getByText('dataset.externalKnowledgeForm.connect').closest('button') + expect(connectButton).not.toBeDisabled() + }) + + const connectButton = screen.getByText('dataset.externalKnowledgeForm.connect').closest('button') + await user.click(connectButton!) + + // Should have selected the second API + expect(onConnect).toHaveBeenCalledWith( + expect.objectContaining({ + external_knowledge_api_id: 'api-2', + }), + ) + }) + + it('should show add API button when no APIs are available', () => { + // Set empty API list + mockExternalKnowledgeApiList = [] + renderComponent() + + // Should show "no external knowledge" button + expect(screen.getByText('dataset.noExternalKnowledge')).toBeInTheDocument() + }) + + it('should open add API modal when add button is clicked', async () => { + const user = userEvent.setup() + // Set empty API list + mockExternalKnowledgeApiList = [] + renderComponent() + + // Click the add button + const addButton = screen.getByText('dataset.noExternalKnowledge').closest('button') + await user.click(addButton!) + + // Should call the modal context function + expect(mockSetShowExternalKnowledgeAPIModal).toHaveBeenCalledWith( + expect.objectContaining({ + payload: { name: '', settings: { endpoint: '', api_key: '' } }, + isEditMode: false, + }), + ) + }) + + it('should call mutate and router.refresh on modal save callback', async () => { + const user = userEvent.setup() + // Set empty API list + mockExternalKnowledgeApiList = [] + renderComponent() + + // Click the add button + const addButton = screen.getByText('dataset.noExternalKnowledge').closest('button') + await user.click(addButton!) + + // Get the callback and invoke it + const modalCall = mockSetShowExternalKnowledgeAPIModal.mock.calls[0][0] + await modalCall.onSaveCallback() + + expect(mockMutateExternalKnowledgeApis).toHaveBeenCalled() + expect(mockRefresh).toHaveBeenCalled() + }) + + it('should call mutate on modal cancel callback', async () => { + const user = userEvent.setup() + // Set empty API list + mockExternalKnowledgeApiList = [] + renderComponent() + + // Click the add button + const addButton = screen.getByText('dataset.noExternalKnowledge').closest('button') + await user.click(addButton!) + + // Get the callback and invoke it + const modalCall = mockSetShowExternalKnowledgeAPIModal.mock.calls[0][0] + modalCall.onCancelCallback() + + expect(mockMutateExternalKnowledgeApis).toHaveBeenCalled() + }) + + it('should display API URL in dropdown', async () => { + const user = userEvent.setup() + renderComponent() + + // Click on the API selector to open dropdown + const apiSelector = screen.getByText('Test API 1') + await user.click(apiSelector) + + // Should show API URLs + expect(screen.getByText('https://api1.example.com')).toBeInTheDocument() + expect(screen.getByText('https://api2.example.com')).toBeInTheDocument() + }) + + it('should show create new API option in dropdown', async () => { + const user = userEvent.setup() + renderComponent() + + // Click on the API selector to open dropdown + const apiSelector = screen.getByText('Test API 1') + await user.click(apiSelector) + + // Should show create new API option + expect(screen.getByText('dataset.createNewExternalAPI')).toBeInTheDocument() + }) + + it('should open add API modal when clicking create new API in dropdown', async () => { + const user = userEvent.setup() + renderComponent() + + // Click on the API selector to open dropdown + const apiSelector = screen.getByText('Test API 1') + await user.click(apiSelector) + + // Click on create new API option + const createNewApiOption = screen.getByText('dataset.createNewExternalAPI') + await user.click(createNewApiOption) + + // Should call the modal context function + expect(mockSetShowExternalKnowledgeAPIModal).toHaveBeenCalledWith( + expect.objectContaining({ + payload: { name: '', settings: { endpoint: '', api_key: '' } }, + isEditMode: false, + }), + ) + }) + + it('should call mutate and refresh on save callback from ExternalApiSelect dropdown', async () => { + const user = userEvent.setup() + renderComponent() + + // Click on the API selector to open dropdown + const apiSelector = screen.getByText('Test API 1') + await user.click(apiSelector) + + // Click on create new API option + const createNewApiOption = screen.getByText('dataset.createNewExternalAPI') + await user.click(createNewApiOption) + + // Get the callback from the modal call and invoke it + const modalCall = mockSetShowExternalKnowledgeAPIModal.mock.calls[0][0] + await modalCall.onSaveCallback() + + expect(mockMutateExternalKnowledgeApis).toHaveBeenCalled() + expect(mockRefresh).toHaveBeenCalled() + }) + + it('should call mutate on cancel callback from ExternalApiSelect dropdown', async () => { + const user = userEvent.setup() + renderComponent() + + // Click on the API selector to open dropdown + const apiSelector = screen.getByText('Test API 1') + await user.click(apiSelector) + + // Click on create new API option + const createNewApiOption = screen.getByText('dataset.createNewExternalAPI') + await user.click(createNewApiOption) + + // Get the callback from the modal call and invoke it + const modalCall = mockSetShowExternalKnowledgeAPIModal.mock.calls[0][0] + modalCall.onCancelCallback() + + expect(mockMutateExternalKnowledgeApis).toHaveBeenCalled() + }) + + it('should close dropdown after selecting an API', async () => { + const user = userEvent.setup() + renderComponent() + + // Click on the API selector to open dropdown + const apiSelector = screen.getByText('Test API 1') + await user.click(apiSelector) + + // Dropdown should be open - API URLs visible + expect(screen.getByText('https://api1.example.com')).toBeInTheDocument() + + // Select the second API + const secondApi = screen.getByText('Test API 2') + await user.click(secondApi) + + // Dropdown should be closed - API URLs not visible + expect(screen.queryByText('https://api1.example.com')).not.toBeInTheDocument() + }) + + it('should toggle dropdown open/close on selector click', async () => { + const user = userEvent.setup() + renderComponent() + + // Click to open + const apiSelector = screen.getByText('Test API 1') + await user.click(apiSelector) + expect(screen.getByText('https://api1.example.com')).toBeInTheDocument() + + // Click again to close + await user.click(apiSelector) + expect(screen.queryByText('https://api1.example.com')).not.toBeInTheDocument() + }) + }) + + // Tests for callback stability + describe('Callback Stability', () => { + it('should maintain stable navBackHandle callback reference', async () => { + const user = userEvent.setup() + const { rerender } = render( + , + ) + + const buttons = screen.getAllByRole('button') + const backButton = buttons.find(btn => btn.classList.contains('rounded-full')) + await user.click(backButton!) + + expect(mockReplace).toHaveBeenCalledTimes(1) + + rerender() + + await user.click(backButton!) + expect(mockReplace).toHaveBeenCalledTimes(2) + }) + + it('should not recreate handlers on prop changes', async () => { + const user = userEvent.setup() + const onConnect1 = jest.fn() + const onConnect2 = jest.fn() + + const { rerender } = render( + , + ) + + // Fill form + const nameInput = screen.getByPlaceholderText('dataset.externalKnowledgeNamePlaceholder') + const knowledgeIdInput = screen.getByPlaceholderText('dataset.externalKnowledgeIdPlaceholder') + + fireEvent.change(nameInput, { target: { value: 'Test' } }) + fireEvent.change(knowledgeIdInput, { target: { value: 'knowledge' } }) + + // Rerender with new callback + rerender() + + await waitFor(() => { + const connectButton = screen.getByText('dataset.externalKnowledgeForm.connect').closest('button') + expect(connectButton).not.toBeDisabled() + }) + + const connectButton = screen.getByText('dataset.externalKnowledgeForm.connect').closest('button') + await user.click(connectButton!) + + // Should use the new callback + expect(onConnect1).not.toHaveBeenCalled() + expect(onConnect2).toHaveBeenCalled() + }) + }) + + // Tests for edge cases + describe('Edge Cases', () => { + it('should handle empty description gracefully', async () => { + const user = userEvent.setup() + const onConnect = jest.fn() + renderComponent({ onConnect }) + + const nameInput = screen.getByPlaceholderText('dataset.externalKnowledgeNamePlaceholder') + const knowledgeIdInput = screen.getByPlaceholderText('dataset.externalKnowledgeIdPlaceholder') + + fireEvent.change(nameInput, { target: { value: 'Test' } }) + fireEvent.change(knowledgeIdInput, { target: { value: 'knowledge' } }) + + await waitFor(() => { + const connectButton = screen.getByText('dataset.externalKnowledgeForm.connect').closest('button') + expect(connectButton).not.toBeDisabled() + }) + + const connectButton = screen.getByText('dataset.externalKnowledgeForm.connect').closest('button') + await user.click(connectButton!) + + expect(onConnect).toHaveBeenCalledWith( + expect.objectContaining({ + description: '', + }), + ) + }) + + it('should handle special characters in name', () => { + renderComponent() + + const nameInput = screen.getByPlaceholderText('dataset.externalKnowledgeNamePlaceholder') + const specialName = 'Test Name' + + fireEvent.change(nameInput, { target: { value: specialName } }) + + expect((nameInput as HTMLInputElement).value).toBe(specialName) + }) + + it('should handle very long input values', () => { + renderComponent() + + const nameInput = screen.getByPlaceholderText('dataset.externalKnowledgeNamePlaceholder') + const longName = 'A'.repeat(1000) + + fireEvent.change(nameInput, { target: { value: longName } }) + + expect((nameInput as HTMLInputElement).value).toBe(longName) + }) + + it('should handle rapid sequential updates', () => { + renderComponent() + + const nameInput = screen.getByPlaceholderText('dataset.externalKnowledgeNamePlaceholder') + + // Rapid updates + for (let i = 0; i < 10; i++) + fireEvent.change(nameInput, { target: { value: `Name ${i}` } }) + + expect((nameInput as HTMLInputElement).value).toBe('Name 9') + }) + + it('should preserve provider value as external', async () => { + const user = userEvent.setup() + const onConnect = jest.fn() + renderComponent({ onConnect }) + + const nameInput = screen.getByPlaceholderText('dataset.externalKnowledgeNamePlaceholder') + const knowledgeIdInput = screen.getByPlaceholderText('dataset.externalKnowledgeIdPlaceholder') + + fireEvent.change(nameInput, { target: { value: 'Test' } }) + fireEvent.change(knowledgeIdInput, { target: { value: 'knowledge' } }) + + await waitFor(() => { + const connectButton = screen.getByText('dataset.externalKnowledgeForm.connect').closest('button') + expect(connectButton).not.toBeDisabled() + }) + + const connectButton = screen.getByText('dataset.externalKnowledgeForm.connect').closest('button') + await user.click(connectButton!) + + expect(onConnect).toHaveBeenCalledWith( + expect.objectContaining({ + provider: 'external', + }), + ) + }) + }) + + // Tests for loading state + describe('Loading State', () => { + it('should pass loading state to connect button', () => { + renderComponent({ loading: true }) + + const connectButton = screen.getByText('dataset.externalKnowledgeForm.connect').closest('button') + expect(connectButton).toBeInTheDocument() + }) + + it('should render correctly when not loading', () => { + renderComponent({ loading: false }) + + const connectButton = screen.getByText('dataset.externalKnowledgeForm.connect').closest('button') + expect(connectButton).toBeInTheDocument() + }) + }) + + // Tests for RetrievalSettings integration + describe('RetrievalSettings Integration', () => { + it('should toggle score threshold enabled when switch is clicked', async () => { + const user = userEvent.setup() + const onConnect = jest.fn() + renderComponent({ onConnect }) + + // Find and click the switch for score threshold + const switches = screen.getAllByRole('switch') + const scoreThresholdSwitch = switches[0] // The score threshold switch + await user.click(scoreThresholdSwitch) + + // Fill required fields + const nameInput = screen.getByPlaceholderText('dataset.externalKnowledgeNamePlaceholder') + const knowledgeIdInput = screen.getByPlaceholderText('dataset.externalKnowledgeIdPlaceholder') + + fireEvent.change(nameInput, { target: { value: 'Test' } }) + fireEvent.change(knowledgeIdInput, { target: { value: 'kb-1' } }) + + await waitFor(() => { + const connectButton = screen.getByText('dataset.externalKnowledgeForm.connect').closest('button') + expect(connectButton).not.toBeDisabled() + }) + + const connectButton = screen.getByText('dataset.externalKnowledgeForm.connect').closest('button') + await user.click(connectButton!) + + expect(onConnect).toHaveBeenCalledWith( + expect.objectContaining({ + external_retrieval_model: expect.objectContaining({ + score_threshold_enabled: true, + }), + }), + ) + }) + + it('should display retrieval settings labels', () => { + renderComponent() + + // Should show the retrieval settings section title + expect(screen.getByText('dataset.retrievalSettings')).toBeInTheDocument() + // Should show Top K and Score Threshold labels + expect(screen.getByText('appDebug.datasetConfig.top_k')).toBeInTheDocument() + expect(screen.getByText('appDebug.datasetConfig.score_threshold')).toBeInTheDocument() + }) + }) + + // Direct unit tests for RetrievalSettings component to cover all branches + describe('RetrievalSettings Component Direct Tests', () => { + // Import RetrievalSettings directly for unit testing + const RetrievalSettings = require('./RetrievalSettings').default + + it('should render with isInHitTesting mode', () => { + const onChange = jest.fn() + render( + , + ) + + // In hit testing mode, the title should not be shown + expect(screen.queryByText('dataset.retrievalSettings')).not.toBeInTheDocument() + }) + + it('should render with isInRetrievalSetting mode', () => { + const onChange = jest.fn() + render( + , + ) + + // In retrieval setting mode, the title should not be shown + expect(screen.queryByText('dataset.retrievalSettings')).not.toBeInTheDocument() + }) + + it('should call onChange with score_threshold_enabled when switch is toggled', async () => { + const user = userEvent.setup() + const onChange = jest.fn() + render( + , + ) + + // Find and click the switch + const switches = screen.getAllByRole('switch') + await user.click(switches[0]) + + expect(onChange).toHaveBeenCalledWith({ score_threshold_enabled: true }) + }) + + it('should call onChange with top_k when top k value changes', () => { + const onChange = jest.fn() + render( + , + ) + + // The TopKItem should render an input + const inputs = screen.getAllByRole('spinbutton') + const topKInput = inputs[0] + fireEvent.change(topKInput, { target: { value: '8' } }) + + expect(onChange).toHaveBeenCalledWith({ top_k: 8 }) + }) + + it('should call onChange with score_threshold when threshold value changes', () => { + const onChange = jest.fn() + render( + , + ) + + // The ScoreThresholdItem should render an input + const inputs = screen.getAllByRole('spinbutton') + const scoreThresholdInput = inputs[1] + fireEvent.change(scoreThresholdInput, { target: { value: '0.8' } }) + + expect(onChange).toHaveBeenCalledWith({ score_threshold: 0.8 }) + }) + }) + + // Tests for complete form submission flow + describe('Complete Form Submission Flow', () => { + it('should submit form with all default retrieval settings', async () => { + const user = userEvent.setup() + const onConnect = jest.fn() + renderComponent({ onConnect }) + + const nameInput = screen.getByPlaceholderText('dataset.externalKnowledgeNamePlaceholder') + const knowledgeIdInput = screen.getByPlaceholderText('dataset.externalKnowledgeIdPlaceholder') + + fireEvent.change(nameInput, { target: { value: 'Test KB' } }) + fireEvent.change(knowledgeIdInput, { target: { value: 'kb-1' } }) + + await waitFor(() => { + const connectButton = screen.getByText('dataset.externalKnowledgeForm.connect').closest('button') + expect(connectButton).not.toBeDisabled() + }) + + const connectButton = screen.getByText('dataset.externalKnowledgeForm.connect').closest('button') + await user.click(connectButton!) + + expect(onConnect).toHaveBeenCalledWith({ + name: 'Test KB', + description: '', + external_knowledge_api_id: 'api-1', + external_knowledge_id: 'kb-1', + external_retrieval_model: { + top_k: 4, + score_threshold: 0.5, + score_threshold_enabled: false, + }, + provider: 'external', + }) + }) + + it('should submit form with modified retrieval settings', async () => { + const user = userEvent.setup() + const onConnect = jest.fn() + renderComponent({ onConnect }) + + // Toggle score threshold switch + const switches = screen.getAllByRole('switch') + const scoreThresholdSwitch = switches[0] + await user.click(scoreThresholdSwitch) + + // Fill required fields + const nameInput = screen.getByPlaceholderText('dataset.externalKnowledgeNamePlaceholder') + const knowledgeIdInput = screen.getByPlaceholderText('dataset.externalKnowledgeIdPlaceholder') + + fireEvent.change(nameInput, { target: { value: 'Custom KB' } }) + fireEvent.change(knowledgeIdInput, { target: { value: 'custom-kb' } }) + + await waitFor(() => { + const connectButton = screen.getByText('dataset.externalKnowledgeForm.connect').closest('button') + expect(connectButton).not.toBeDisabled() + }) + + const connectButton = screen.getByText('dataset.externalKnowledgeForm.connect').closest('button') + await user.click(connectButton!) + + expect(onConnect).toHaveBeenCalledWith( + expect.objectContaining({ + name: 'Custom KB', + external_retrieval_model: expect.objectContaining({ + score_threshold_enabled: true, + }), + }), + ) + }) + }) + + // Tests for accessibility + describe('Accessibility', () => { + it('should have accessible buttons', () => { + renderComponent() + + const buttons = screen.getAllByRole('button') + expect(buttons.length).toBeGreaterThanOrEqual(3) // back, cancel, connect + }) + + it('should have proper link attributes for external links', () => { + renderComponent() + + const externalLink = screen.getByText('dataset.connectHelper.helper4') + expect(externalLink.tagName).toBe('A') + expect(externalLink).toHaveAttribute('target', '_blank') + expect(externalLink).toHaveAttribute('rel', 'noopener noreferrer') + }) + + it('should have labels for form inputs', () => { + renderComponent() + + // Check labels exist + expect(screen.getByText('dataset.externalKnowledgeName')).toBeInTheDocument() + expect(screen.getByText('dataset.externalKnowledgeDescription')).toBeInTheDocument() + expect(screen.getByText('dataset.externalKnowledgeId')).toBeInTheDocument() + }) + }) +}) diff --git a/web/app/components/plugins/plugin-page/plugin-tasks/hooks.ts b/web/app/components/plugins/plugin-page/plugin-tasks/hooks.ts index fba7dad454..7b9e7953c6 100644 --- a/web/app/components/plugins/plugin-page/plugin-tasks/hooks.ts +++ b/web/app/components/plugins/plugin-page/plugin-tasks/hooks.ts @@ -1,13 +1,9 @@ import { useCallback, - useEffect, - useRef, - useState, } from 'react' import { TaskStatus } from '@/app/components/plugins/types' import type { PluginStatus } from '@/app/components/plugins/types' import { - useMutationClearAllTaskPlugin, useMutationClearTaskPlugin, usePluginTaskList, } from '@/service/use-plugins' @@ -18,7 +14,6 @@ export const usePluginTaskStatus = () => { handleRefetch, } = usePluginTaskList() const { mutateAsync } = useMutationClearTaskPlugin() - const { mutateAsync: mutateAsyncClearAll } = useMutationClearAllTaskPlugin() const allPlugins = pluginTasks.map(task => task.plugins.map((plugin) => { return { ...plugin, @@ -45,10 +40,6 @@ export const usePluginTaskStatus = () => { }) handleRefetch() }, [mutateAsync, handleRefetch]) - const handleClearAllErrorPlugin = useCallback(async () => { - await mutateAsyncClearAll() - handleRefetch() - }, [mutateAsyncClearAll, handleRefetch]) const totalPluginsLength = allPlugins.length const runningPluginsLength = runningPlugins.length const errorPluginsLength = errorPlugins.length @@ -60,26 +51,6 @@ export const usePluginTaskStatus = () => { const isSuccess = successPluginsLength === totalPluginsLength && totalPluginsLength > 0 const isFailed = runningPluginsLength === 0 && (errorPluginsLength + successPluginsLength) === totalPluginsLength && totalPluginsLength > 0 && errorPluginsLength > 0 - const [opacity, setOpacity] = useState(1) - const timerRef = useRef(null) - - useEffect(() => { - if (isSuccess) { - if (timerRef.current) { - clearTimeout(timerRef.current) - timerRef.current = null - } - if (opacity > 0) { - timerRef.current = setTimeout(() => { - setOpacity(v => v - 0.1) - }, 200) - } - } - - if (!isSuccess) - setOpacity(1) - }, [isSuccess, opacity]) - return { errorPlugins, successPlugins, @@ -94,7 +65,5 @@ export const usePluginTaskStatus = () => { isSuccess, isFailed, handleClearErrorPlugin, - handleClearAllErrorPlugin, - opacity, } } diff --git a/web/app/components/plugins/plugin-page/plugin-tasks/index.tsx b/web/app/components/plugins/plugin-page/plugin-tasks/index.tsx index c0bf5824e7..4c37705287 100644 --- a/web/app/components/plugins/plugin-page/plugin-tasks/index.tsx +++ b/web/app/components/plugins/plugin-page/plugin-tasks/index.tsx @@ -1,4 +1,5 @@ import { + useCallback, useMemo, useState, } from 'react' @@ -6,6 +7,7 @@ import { RiCheckboxCircleFill, RiErrorWarningFill, RiInstallLine, + RiLoaderLine, } from '@remixicon/react' import { useTranslation } from 'react-i18next' import { usePluginTaskStatus } from './hooks' @@ -14,7 +16,6 @@ import { PortalToFollowElemContent, PortalToFollowElemTrigger, } from '@/app/components/base/portal-to-follow-elem' -import Tooltip from '@/app/components/base/tooltip' import Button from '@/app/components/base/button' import ProgressCircle from '@/app/components/base/progress-bar/progress-circle' import CardIcon from '@/app/components/plugins/card/base/card-icon' @@ -22,6 +23,7 @@ import cn from '@/utils/classnames' import { useGetLanguage } from '@/context/i18n' import useGetIcon from '@/app/components/plugins/install-plugin/base/use-get-icon' import DownloadingIcon from '@/app/components/header/plugins-nav/downloading-icon' +import Tooltip from '@/app/components/base/tooltip' const PluginTasks = () => { const { t } = useTranslation() @@ -29,6 +31,8 @@ const PluginTasks = () => { const [open, setOpen] = useState(false) const { errorPlugins, + successPlugins, + runningPlugins, runningPluginsLength, successPluginsLength, errorPluginsLength, @@ -39,33 +43,69 @@ const PluginTasks = () => { isSuccess, isFailed, handleClearErrorPlugin, - handleClearAllErrorPlugin, - opacity, } = usePluginTaskStatus() const { getIconUrl } = useGetIcon() + const handleClearAllWithModal = useCallback(async () => { + // Clear all completed plugins (success and error) but keep running ones + const completedPlugins = [...successPlugins, ...errorPlugins] + + // Clear all completed plugins individually + for (const plugin of completedPlugins) + await handleClearErrorPlugin(plugin.taskId, plugin.plugin_unique_identifier) + + // Only close modal if no plugins are still installing + if (runningPluginsLength === 0) + setOpen(false) + }, [successPlugins, errorPlugins, handleClearErrorPlugin, runningPluginsLength]) + + const handleClearErrorsWithModal = useCallback(async () => { + // Clear only error plugins, not all plugins + for (const plugin of errorPlugins) + await handleClearErrorPlugin(plugin.taskId, plugin.plugin_unique_identifier) + // Only close modal if no plugins are still installing + if (runningPluginsLength === 0) + setOpen(false) + }, [errorPlugins, handleClearErrorPlugin, runningPluginsLength]) + + const handleClearSingleWithModal = useCallback(async (taskId: string, pluginId: string) => { + await handleClearErrorPlugin(taskId, pluginId) + // Only close modal if no plugins are still installing + if (runningPluginsLength === 0) + setOpen(false) + }, [handleClearErrorPlugin, runningPluginsLength]) + const tip = useMemo(() => { - if (isInstalling) - return t('plugin.task.installing', { installingLength: runningPluginsLength }) - - if (isInstallingWithSuccess) - return t('plugin.task.installingWithSuccess', { installingLength: runningPluginsLength, successLength: successPluginsLength }) - if (isInstallingWithError) return t('plugin.task.installingWithError', { installingLength: runningPluginsLength, successLength: successPluginsLength, errorLength: errorPluginsLength }) - + if (isInstallingWithSuccess) + return t('plugin.task.installingWithSuccess', { installingLength: runningPluginsLength, successLength: successPluginsLength }) + if (isInstalling) + return t('plugin.task.installing') if (isFailed) - return t('plugin.task.installError', { errorLength: errorPluginsLength }) - }, [isInstalling, isInstallingWithSuccess, isInstallingWithError, isFailed, errorPluginsLength, runningPluginsLength, successPluginsLength, t]) + return t('plugin.task.installedError', { errorLength: errorPluginsLength }) + if (isSuccess) + return t('plugin.task.installSuccess', { successLength: successPluginsLength }) + return t('plugin.task.installed') + }, [ + errorPluginsLength, + isFailed, + isInstalling, + isInstallingWithError, + isInstallingWithSuccess, + isSuccess, + runningPluginsLength, + successPluginsLength, + t, + ]) - if (!totalPluginsLength) + // Show icon if there are any plugin tasks (completed, running, or failed) + // Only hide when there are absolutely no plugin tasks + if (totalPluginsLength === 0) return null return ( -
+
{ > { - if (isFailed) + if (isFailed || isInstalling || isInstallingWithSuccess || isInstallingWithError || isSuccess) setOpen(v => !v) }} > - +
@@ -124,7 +169,7 @@ const PluginTasks = () => { ) } { - isSuccess && ( + (isSuccess || (successPluginsLength > 0 && runningPluginsLength === 0 && errorPluginsLength === 0)) && ( ) } @@ -138,52 +183,129 @@ const PluginTasks = () => { -
-
- {t('plugin.task.installedError', { errorLength: errorPluginsLength })} - -
-
- { - errorPlugins.map(errorPlugin => ( -
-
- - -
-
-
- {errorPlugin.labels[language]} -
-
- {errorPlugin.message} -
-
- -
- )) - } -
+
+ + +
+
+
+ {runningPlugin.labels[language]} +
+
+ {t('plugin.task.installing')} +
+
+
+ ))} +
+ + )} + + {/* Success Plugins */} + {successPlugins.length > 0 && ( + <> +
+ {t('plugin.task.installed')} ({successPlugins.length}) + +
+
+ {successPlugins.map(successPlugin => ( +
+
+ + +
+
+
+ {successPlugin.labels[language]} +
+
+ {successPlugin.message || t('plugin.task.installed')} +
+
+
+ ))} +
+ + )} + + {/* Error Plugins */} + {errorPlugins.length > 0 && ( + <> +
+ {t('plugin.task.installError', { errorLength: errorPlugins.length })} + +
+
+ {errorPlugins.map(errorPlugin => ( +
+
+ + +
+
+
+ {errorPlugin.labels[language]} +
+
+ {errorPlugin.message} +
+
+ +
+ ))} +
+ + )}
diff --git a/web/hooks/use-async-window-open.ts b/web/hooks/use-async-window-open.ts new file mode 100644 index 0000000000..582ab28be4 --- /dev/null +++ b/web/hooks/use-async-window-open.ts @@ -0,0 +1,72 @@ +import { useCallback } from 'react' +import Toast from '@/app/components/base/toast' + +export type AsyncWindowOpenOptions = { + successMessage?: string + errorMessage?: string + windowFeatures?: string + onError?: (error: any) => void + onSuccess?: (url: string) => void +} + +export const useAsyncWindowOpen = () => { + const openAsync = useCallback(async ( + fetchUrl: () => Promise, + options: AsyncWindowOpenOptions = {}, + ) => { + const { + successMessage, + errorMessage = 'Failed to open page', + windowFeatures = 'noopener,noreferrer', + onError, + onSuccess, + } = options + + const newWindow = window.open('', '_blank', windowFeatures) + + if (!newWindow) { + const error = new Error('Popup blocked by browser') + onError?.(error) + Toast.notify({ + type: 'error', + message: 'Popup blocked. Please allow popups for this site.', + }) + return + } + + try { + const url = await fetchUrl() + + if (url) { + newWindow.location.href = url + onSuccess?.(url) + + if (successMessage) { + Toast.notify({ + type: 'success', + message: successMessage, + }) + } + } + else { + newWindow.close() + const error = new Error('Invalid URL received') + onError?.(error) + Toast.notify({ + type: 'error', + message: errorMessage, + }) + } + } + catch (error) { + newWindow.close() + onError?.(error) + Toast.notify({ + type: 'error', + message: errorMessage, + }) + } + }, []) + + return { openAsync } +} diff --git a/web/i18n/de-DE/plugin.ts b/web/i18n/de-DE/plugin.ts index 18da902a6c..50d42b3671 100644 --- a/web/i18n/de-DE/plugin.ts +++ b/web/i18n/de-DE/plugin.ts @@ -230,6 +230,11 @@ const translation = { installing: 'Installation von {{installingLength}} Plugins, 0 erledigt.', installError: '{{errorLength}} Plugins konnten nicht installiert werden, klicken Sie hier, um sie anzusehen', + installSuccess: '{{successLength}} plugins installed successfully', + installed: 'Installed', + runningPlugins: 'Installing Plugins', + successPlugins: 'Successfully Installed Plugins', + errorPlugins: 'Failed to Install Plugins', }, allCategories: 'Alle Kategorien', install: '{{num}} Installationen', diff --git a/web/i18n/en-US/plugin.ts b/web/i18n/en-US/plugin.ts index 62a5f35c0b..edd60d65fb 100644 --- a/web/i18n/en-US/plugin.ts +++ b/web/i18n/en-US/plugin.ts @@ -270,12 +270,17 @@ const translation = { partnerTip: 'Verified by a Dify partner', }, task: { - installing: 'Installing {{installingLength}} plugins, 0 done.', + installing: 'Installing plugins', installingWithSuccess: 'Installing {{installingLength}} plugins, {{successLength}} success.', installingWithError: 'Installing {{installingLength}} plugins, {{successLength}} success, {{errorLength}} failed', installError: '{{errorLength}} plugins failed to install, click to view', installedError: '{{errorLength}} plugins failed to install', + installSuccess: '{{successLength}} plugins installed successfully', + installed: 'Installed', clearAll: 'Clear all', + runningPlugins: 'Installing Plugins', + successPlugins: 'Successfully Installed Plugins', + errorPlugins: 'Failed to Install Plugins', }, requestAPlugin: 'Request a plugin', publishPlugins: 'Publish plugins', diff --git a/web/i18n/es-ES/plugin.ts b/web/i18n/es-ES/plugin.ts index 76e9f27c39..2452161791 100644 --- a/web/i18n/es-ES/plugin.ts +++ b/web/i18n/es-ES/plugin.ts @@ -230,6 +230,11 @@ const translation = { 'Los complementos {{errorLength}} no se pudieron instalar, haga clic para ver', installingWithError: 'Instalando plugins {{installingLength}}, {{successLength}} éxito, {{errorLength}} fallido', + installSuccess: '{{successLength}} plugins installed successfully', + installed: 'Installed', + runningPlugins: 'Installing Plugins', + successPlugins: 'Successfully Installed Plugins', + errorPlugins: 'Failed to Install Plugins', }, fromMarketplace: 'De Marketplace', endpointsEnabled: '{{num}} conjuntos de puntos finales habilitados', diff --git a/web/i18n/fa-IR/plugin.ts b/web/i18n/fa-IR/plugin.ts index 3b171a01ce..030ca0022d 100644 --- a/web/i18n/fa-IR/plugin.ts +++ b/web/i18n/fa-IR/plugin.ts @@ -223,6 +223,11 @@ const translation = { 'نصب پلاگین های {{installingLength}}، {{successLength}} موفقیت آمیز است.', installingWithError: 'نصب پلاگین های {{installingLength}}، {{successLength}} با موفقیت مواجه شد، {{errorLength}} ناموفق بود', + installSuccess: '{{successLength}} plugins installed successfully', + installed: 'Installed', + runningPlugins: 'Installing Plugins', + successPlugins: 'Successfully Installed Plugins', + errorPlugins: 'Failed to Install Plugins', }, searchTools: 'ابزارهای جستجو...', findMoreInMarketplace: 'اطلاعات بیشتر در Marketplace', diff --git a/web/i18n/fr-FR/plugin.ts b/web/i18n/fr-FR/plugin.ts index e1e7ae14ef..f19f08eb6f 100644 --- a/web/i18n/fr-FR/plugin.ts +++ b/web/i18n/fr-FR/plugin.ts @@ -228,6 +228,11 @@ const translation = { installedError: '{{errorLength}} les plugins n’ont pas pu être installés', clearAll: 'Effacer tout', installing: 'Installation des plugins {{installingLength}}, 0 fait.', + installSuccess: '{{successLength}} plugins installed successfully', + installed: 'Installed', + runningPlugins: 'Installing Plugins', + successPlugins: 'Successfully Installed Plugins', + errorPlugins: 'Failed to Install Plugins', }, search: 'Rechercher', installAction: 'Installer', diff --git a/web/i18n/hi-IN/plugin.ts b/web/i18n/hi-IN/plugin.ts index c8a5618e1f..8e65877b58 100644 --- a/web/i18n/hi-IN/plugin.ts +++ b/web/i18n/hi-IN/plugin.ts @@ -227,6 +227,11 @@ const translation = { '{{installingLength}} प्लगइन्स स्थापित कर रहे हैं, {{successLength}} सफल, {{errorLength}} विफल', installingWithSuccess: '{{installingLength}} प्लगइन्स स्थापित कर रहे हैं, {{successLength}} सफल।', + installSuccess: '{{successLength}} plugins installed successfully', + installed: 'Installed', + runningPlugins: 'Installing Plugins', + successPlugins: 'Successfully Installed Plugins', + errorPlugins: 'Failed to Install Plugins', }, installFrom: 'से इंस्टॉल करें', fromMarketplace: 'मार्केटप्लेस से', diff --git a/web/i18n/id-ID/plugin.ts b/web/i18n/id-ID/plugin.ts index bcf9d88b34..d849777121 100644 --- a/web/i18n/id-ID/plugin.ts +++ b/web/i18n/id-ID/plugin.ts @@ -261,6 +261,11 @@ const translation = { installingWithError: 'Memasang {{installingLength}} plugin, {{successLength}} berhasil, {{errorLength}} gagal', installError: 'Gagal menginstal plugin {{errorLength}}, klik untuk melihat', installedError: 'Gagal menginstal {{errorLength}} plugin', + installSuccess: '{{successLength}} plugins installed successfully', + installed: 'Installed', + runningPlugins: 'Installing Plugins', + successPlugins: 'Successfully Installed Plugins', + errorPlugins: 'Failed to Install Plugins', }, auth: { customCredentialUnavailable: 'Kredensial kustom saat ini tidak tersedia', diff --git a/web/i18n/it-IT/plugin.ts b/web/i18n/it-IT/plugin.ts index ac5deb2ed3..aaa5803550 100644 --- a/web/i18n/it-IT/plugin.ts +++ b/web/i18n/it-IT/plugin.ts @@ -208,6 +208,11 @@ const translation = { installedError: 'Impossibile installare i plugin di {{errorLength}}', installingWithError: 'Installazione dei plugin {{installingLength}}, {{successLength}} successo, {{errorLength}} fallito', installingWithSuccess: 'Installazione dei plugin {{installingLength}}, {{successLength}} successo.', + installSuccess: '{{successLength}} plugins installed successfully', + installed: 'Installed', + runningPlugins: 'Installing Plugins', + successPlugins: 'Successfully Installed Plugins', + errorPlugins: 'Failed to Install Plugins', }, searchInMarketplace: 'Cerca nel Marketplace', endpointsEnabled: '{{num}} set di endpoint abilitati', diff --git a/web/i18n/ja-JP/plugin.ts b/web/i18n/ja-JP/plugin.ts index 3b7985668a..d79baeb3b1 100644 --- a/web/i18n/ja-JP/plugin.ts +++ b/web/i18n/ja-JP/plugin.ts @@ -208,6 +208,11 @@ const translation = { installedError: '{{errorLength}} プラグインのインストールに失敗しました', installingWithError: '{{installingLength}}個のプラグインをインストール中、{{successLength}}件成功、{{errorLength}}件失敗', installing: '{{installingLength}}個のプラグインをインストール中、0 個完了。', + installSuccess: '{{successLength}} plugins installed successfully', + installed: 'Installed', + runningPlugins: 'Installing Plugins', + successPlugins: 'Successfully Installed Plugins', + errorPlugins: 'Failed to Install Plugins', }, from: 'インストール元', install: '{{num}} インストール', diff --git a/web/i18n/ko-KR/plugin.ts b/web/i18n/ko-KR/plugin.ts index 875776d700..710490b9fb 100644 --- a/web/i18n/ko-KR/plugin.ts +++ b/web/i18n/ko-KR/plugin.ts @@ -208,6 +208,11 @@ const translation = { installingWithError: '{{installingLength}} 플러그인 설치, {{successLength}} 성공, {{errorLength}} 실패', installError: '{{errorLength}} 플러그인 설치 실패, 보려면 클릭하십시오.', clearAll: '모두 지우기', + installSuccess: '{{successLength}} plugins installed successfully', + installed: 'Installed', + runningPlugins: 'Installing Plugins', + successPlugins: 'Successfully Installed Plugins', + errorPlugins: 'Failed to Install Plugins', }, installAction: '설치하다', searchTools: '검색 도구...', diff --git a/web/i18n/pl-PL/plugin.ts b/web/i18n/pl-PL/plugin.ts index dcd799ae2e..e4d9081217 100644 --- a/web/i18n/pl-PL/plugin.ts +++ b/web/i18n/pl-PL/plugin.ts @@ -208,6 +208,11 @@ const translation = { installingWithSuccess: 'Instalacja wtyczek {{installingLength}}, {{successLength}} powodzenie.', clearAll: 'Wyczyść wszystko', installingWithError: 'Instalacja wtyczek {{installingLength}}, {{successLength}} powodzenie, {{errorLength}} niepowodzenie', + installSuccess: '{{successLength}} plugins installed successfully', + installed: 'Installed', + runningPlugins: 'Installing Plugins', + successPlugins: 'Successfully Installed Plugins', + errorPlugins: 'Failed to Install Plugins', }, search: 'Szukać', installFrom: 'ZAINSTALUJ Z', diff --git a/web/i18n/pt-BR/plugin.ts b/web/i18n/pt-BR/plugin.ts index 0fc620579c..b24d37ee63 100644 --- a/web/i18n/pt-BR/plugin.ts +++ b/web/i18n/pt-BR/plugin.ts @@ -208,6 +208,11 @@ const translation = { installingWithError: 'Instalando plug-ins {{installingLength}}, {{successLength}} sucesso, {{errorLength}} falhou', installing: 'Instalando plugins {{installingLength}}, 0 feito.', clearAll: 'Apagar tudo', + installSuccess: '{{successLength}} plugins installed successfully', + installed: 'Installed', + runningPlugins: 'Installing Plugins', + successPlugins: 'Successfully Installed Plugins', + errorPlugins: 'Failed to Install Plugins', }, installAction: 'Instalar', endpointsEnabled: '{{num}} conjuntos de endpoints habilitados', diff --git a/web/i18n/ro-RO/plugin.ts b/web/i18n/ro-RO/plugin.ts index 547dbe0942..e3db03a057 100644 --- a/web/i18n/ro-RO/plugin.ts +++ b/web/i18n/ro-RO/plugin.ts @@ -208,6 +208,11 @@ const translation = { installingWithError: 'Instalarea pluginurilor {{installingLength}}, {{successLength}} succes, {{errorLength}} eșuat', installingWithSuccess: 'Instalarea pluginurilor {{installingLength}}, {{successLength}} succes.', installing: 'Instalarea pluginurilor {{installingLength}}, 0 terminat.', + installSuccess: '{{successLength}} plugins installed successfully', + installed: 'Installed', + runningPlugins: 'Installing Plugins', + successPlugins: 'Successfully Installed Plugins', + errorPlugins: 'Failed to Install Plugins', }, fromMarketplace: 'Din Marketplace', from: 'Din', diff --git a/web/i18n/ru-RU/plugin.ts b/web/i18n/ru-RU/plugin.ts index 55061a34f5..23214fb195 100644 --- a/web/i18n/ru-RU/plugin.ts +++ b/web/i18n/ru-RU/plugin.ts @@ -208,6 +208,11 @@ const translation = { installingWithSuccess: 'Установка плагинов {{installingLength}}, {{successLength}} успех.', installedError: 'плагины {{errorLength}} не удалось установить', installError: 'Плагины {{errorLength}} не удалось установить, нажмите для просмотра', + installSuccess: '{{successLength}} plugins installed successfully', + installed: 'Installed', + runningPlugins: 'Installing Plugins', + successPlugins: 'Successfully Installed Plugins', + errorPlugins: 'Failed to Install Plugins', }, install: '{{num}} установок', searchCategories: 'Поиск категорий', diff --git a/web/i18n/sl-SI/plugin.ts b/web/i18n/sl-SI/plugin.ts index ca8594df2f..ea99b649bf 100644 --- a/web/i18n/sl-SI/plugin.ts +++ b/web/i18n/sl-SI/plugin.ts @@ -211,6 +211,11 @@ const translation = { installingWithSuccess: 'Namestitev {{installingLength}} dodatkov, {{successLength}} uspešnih.', installedError: '{{errorLength}} vtičnikov ni uspelo namestiti', installingWithError: 'Namestitev {{installingLength}} vtičnikov, {{successLength}} uspešnih, {{errorLength}} neuspešnih', + installSuccess: '{{successLength}} plugins installed successfully', + installed: 'Installed', + runningPlugins: 'Installing Plugins', + successPlugins: 'Successfully Installed Plugins', + errorPlugins: 'Failed to Install Plugins', }, endpointsEnabled: '{{num}} nizov končnih točk omogočenih', search: 'Iskanje', diff --git a/web/i18n/th-TH/plugin.ts b/web/i18n/th-TH/plugin.ts index 64705b7e04..8f59a5bded 100644 --- a/web/i18n/th-TH/plugin.ts +++ b/web/i18n/th-TH/plugin.ts @@ -208,6 +208,11 @@ const translation = { installedError: '{{errorLength}} ปลั๊กอินติดตั้งไม่สําเร็จ', clearAll: 'ล้างทั้งหมด', installError: '{{errorLength}} ปลั๊กอินติดตั้งไม่สําเร็จ คลิกเพื่อดู', + installSuccess: '{{successLength}} plugins installed successfully', + installed: 'Installed', + runningPlugins: 'Installing Plugins', + successPlugins: 'Successfully Installed Plugins', + errorPlugins: 'Failed to Install Plugins', }, searchCategories: 'หมวดหมู่การค้นหา', searchInMarketplace: 'ค้นหาใน Marketplace', diff --git a/web/i18n/tr-TR/plugin.ts b/web/i18n/tr-TR/plugin.ts index 8aa60e0e7b..bdc10bc753 100644 --- a/web/i18n/tr-TR/plugin.ts +++ b/web/i18n/tr-TR/plugin.ts @@ -208,6 +208,11 @@ const translation = { installingWithSuccess: '{{installingLength}} eklentileri yükleniyor, {{successLength}} başarılı.', installError: '{{errorLength}} eklentileri yüklenemedi, görüntülemek için tıklayın', installingWithError: '{{installingLength}} eklentileri yükleniyor, {{successLength}} başarılı, {{errorLength}} başarısız oldu', + installSuccess: '{{successLength}} plugins installed successfully', + installed: 'Installed', + runningPlugins: 'Installing Plugins', + successPlugins: 'Successfully Installed Plugins', + errorPlugins: 'Failed to Install Plugins', }, allCategories: 'Tüm Kategoriler', installAction: 'Yüklemek', diff --git a/web/i18n/uk-UA/plugin.ts b/web/i18n/uk-UA/plugin.ts index 2d2683026d..948edc0c82 100644 --- a/web/i18n/uk-UA/plugin.ts +++ b/web/i18n/uk-UA/plugin.ts @@ -208,6 +208,11 @@ const translation = { installError: 'Плагіни {{errorLength}} не вдалося встановити, натисніть, щоб переглянути', installing: 'Встановлення плагінів {{installingLength}}, 0 виконано.', installingWithSuccess: 'Встановлення плагінів {{installingLength}}, успіх {{successLength}}.', + installSuccess: '{{successLength}} plugins installed successfully', + installed: 'Installed', + runningPlugins: 'Installing Plugins', + successPlugins: 'Successfully Installed Plugins', + errorPlugins: 'Failed to Install Plugins', }, from: 'Від', searchInMarketplace: 'Пошук у Marketplace', diff --git a/web/i18n/vi-VN/plugin.ts b/web/i18n/vi-VN/plugin.ts index 6eb4e9fbe5..127738f849 100644 --- a/web/i18n/vi-VN/plugin.ts +++ b/web/i18n/vi-VN/plugin.ts @@ -208,6 +208,11 @@ const translation = { installError: '{{errorLength}} plugin không cài đặt được, nhấp để xem', installedError: '{{errorLength}} plugin không cài đặt được', clearAll: 'Xóa tất cả', + installSuccess: '{{successLength}} plugins installed successfully', + installed: 'Installed', + runningPlugins: 'Installing Plugins', + successPlugins: 'Successfully Installed Plugins', + errorPlugins: 'Failed to Install Plugins', }, from: 'Từ', installAction: 'Cài đặt', diff --git a/web/i18n/zh-Hans/plugin.ts b/web/i18n/zh-Hans/plugin.ts index d648bccb85..20b238f178 100644 --- a/web/i18n/zh-Hans/plugin.ts +++ b/web/i18n/zh-Hans/plugin.ts @@ -270,12 +270,17 @@ const translation = { partnerTip: '此插件由 Dify 合作伙伴认证', }, task: { - installing: '{{installingLength}} 个插件安装中，0 已完成', + installing: '正在安装插件', installingWithSuccess: '{{installingLength}} 个插件安装中，{{successLength}} 安装成功', installingWithError: '{{installingLength}} 个插件安装中，{{successLength}} 安装成功，{{errorLength}} 安装失败', installError: '{{errorLength}} 个插件安装失败，点击查看', installedError: '{{errorLength}} 个插件安装失败', + installSuccess: '{{successLength}} 个插件安装成功', + installed: '已安装', clearAll: '清除所有', + runningPlugins: '正在安装的插件', + successPlugins: '安装成功的插件', + errorPlugins: '安装失败的插件', }, requestAPlugin: '申请插件', publishPlugins: '发布插件', diff --git a/web/i18n/zh-Hant/plugin.ts b/web/i18n/zh-Hant/plugin.ts index 5ec8936257..d2809f9971 100644 --- a/web/i18n/zh-Hant/plugin.ts +++ b/web/i18n/zh-Hant/plugin.ts @@ -208,6 +208,11 @@ const translation = { installingWithSuccess: '安裝 {{installingLength}} 個插件，{{successLength}} 成功。', clearAll: '全部清除', installing: '安裝 {{installingLength}} 個插件，0 個完成。', + installSuccess: '{{successLength}} plugins installed successfully', + installed: 'Installed', + runningPlugins: 'Installing Plugins', + successPlugins: 'Successfully Installed Plugins', + errorPlugins: 'Failed to Install Plugins', }, requestAPlugin: '申请插件', publishPlugins: '發佈插件', diff --git a/web/jest.setup.ts b/web/jest.setup.ts index ef9ede0492..006b28322e 100644 --- a/web/jest.setup.ts +++ b/web/jest.setup.ts @@ -1,6 +1,25 @@ import '@testing-library/jest-dom' import { cleanup } from '@testing-library/react' +// Fix for @headlessui/react compatibility with happy-dom +// headlessui tries to override focus properties which may be read-only in happy-dom +if (typeof window !== 'undefined') { + const ensureWritable = (target: object, prop: string) => { + const descriptor = Object.getOwnPropertyDescriptor(target, prop) + if (descriptor && !descriptor.writable) { + const original = descriptor.value ?? descriptor.get?.call(target) + Object.defineProperty(target, prop, { + value: typeof original === 'function' ? original : jest.fn(), + writable: true, + configurable: true, + }) + } + } + + ensureWritable(window, 'focus') + ensureWritable(HTMLElement.prototype, 'focus') +} + afterEach(() => { cleanup() }) diff --git a/web/package.json b/web/package.json index 478abceb45..e7d732c7b6 100644 --- a/web/package.json +++ b/web/package.json @@ -168,6 +168,7 @@ "@testing-library/dom": "^10.4.1", "@testing-library/jest-dom": "^6.9.1", "@testing-library/react": "^16.3.0", + "@testing-library/user-event": "^14.6.1", "@types/jest": "^29.5.14", "@types/js-cookie": "^3.0.6", "@types/js-yaml": "^4.0.9", diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml index 02b1c9b592..af7856329e 100644 --- a/web/pnpm-lock.yaml +++ b/web/pnpm-lock.yaml @@ -416,6 +416,9 @@ importers: '@testing-library/react': specifier: ^16.3.0 version: 16.3.0(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1) + '@testing-library/user-event': + specifier: ^14.6.1 + version: 14.6.1(@testing-library/dom@10.4.1) '@types/jest': specifier: ^29.5.14 version: 29.5.14 diff --git a/web/service/use-plugins.ts b/web/service/use-plugins.ts index b5b8779a82..639d889fa0 100644 --- a/web/service/use-plugins.ts +++ b/web/service/use-plugins.ts @@ -634,7 +634,8 @@ export const usePluginTaskList = (category?: PluginCategoryEnum | string) => { export const useMutationClearTaskPlugin = () => { return useMutation({ mutationFn: ({ taskId, pluginId }: { taskId: string; pluginId: string }) => { - return post<{ success: boolean }>(`/workspaces/current/plugin/tasks/${taskId}/delete/${pluginId}`) + const encodedPluginId = encodeURIComponent(pluginId) + return post<{ success: boolean }>(`/workspaces/current/plugin/tasks/${taskId}/delete/${encodedPluginId}`) }, }) } diff --git a/web/testing/testing.md b/web/testing/testing.md index f03451230d..bf1b89af00 100644 --- a/web/testing/testing.md +++ b/web/testing/testing.md @@ -145,8 +145,17 @@ Treat component state as part of the public behavior: confirm the initial render - ✅ When creating lightweight provider stubs, mirror the real default values and surface helper builders (for example `createMockWorkflowContext`). - ✅ Reset shared stores (React context, Zustand, TanStack Query cache) between tests to avoid leaking state. Prefer helper factory functions over module-level singletons in specs. - ✅ For hooks that read from context, use `renderHook` with a custom wrapper that supplies required providers. +- ✅ **Use factory functions for mock data**: Import actual types and create factory functions with complete defaults (see [Test Data Builders](#9-test-data-builders-anti-hardcoding) section). +- ✅ If it's need to mock some common context provider used across many components (for example, `ProviderContext`), put it in __mocks__/context(for example, `__mocks__/context/provider-context`). To dynamically control the mock behavior (for example, toggling plan type), use module-level variables to track state and change them(for example, `context/provider-context-mock.spec.tsx`). +- ✅ Use factory functions to create mock data with TypeScript types. This ensures type safety and makes tests more maintainable. -If it's need to mock some common context provider used across many components (for example, `ProviderContext`), put it in __mocks__/context(for example, `__mocks__/context/provider-context`). To dynamically control the mock behavior (for example, toggling plan type), use module-level variables to track state and change them(for example, `context/provier-context-mock.spec.tsx`). +**Rules**: + +1. **Import actual types**: Always import types from the source (`@/models/`, `@/types/`, etc.) instead of defining inline types. +1. **Provide complete defaults**: Factory functions should return complete objects with all required fields filled with sensible defaults. +1. **Allow partial overrides**: Accept `Partial` to enable flexible customization for specific test cases. +1. **Create list factories**: For array data, create a separate factory function that composes item factories. +1. **Reference**: See `__mocks__/provider-context.ts` for reusable context mock factories used across multiple test files. ### 4. Performance Optimization