diff --git a/web/app/components/app/create-app-modal/index.tsx b/web/app/components/app/create-app-modal/index.tsx index 16ca4bdaff..1c22913bb1 100644 --- a/web/app/components/app/create-app-modal/index.tsx +++ b/web/app/components/app/create-app-modal/index.tsx @@ -4,7 +4,6 @@ import type { AppIconSelection } from '../../base/app-icon-picker' import { RiArrowRightLine, RiArrowRightSLine, RiExchange2Fill } from '@remixicon/react' import { useDebounceFn, useKeyPress } from 'ahooks' -import Image from 'next/image' import { useRouter } from 'next/navigation' import { useCallback, useEffect, useRef, useState } from 'react' import { useTranslation } from 'react-i18next' @@ -117,10 +116,10 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
- {t('newApp.startFromBlank', { ns: 'app' })} + {t('newApp.startFromBlank', { ns: 'app' })}
- {t('newApp.chooseAppType', { ns: 'app' })} + {t('newApp.chooseAppType', { ns: 'app' })}
@@ -160,7 +159,7 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }: className="flex cursor-pointer items-center border-0 bg-transparent p-0" onClick={() => setIsAppTypeExpanded(!isAppTypeExpanded)} > - {t('newApp.forBeginners', { ns: 'app' })} + {t('newApp.forBeginners', { ns: 'app' })}
@@ -212,7 +211,7 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
- +
- - + + ( {t('newApp.optional', { ns: 'app' })} ) @@ -260,7 +259,7 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
{isAppsFull && }
-
+
{t('newApp.noIdeaTip', { ns: 'app' })}
@@ -334,8 +333,8 @@ function AppTypeCard({ icon, title, description, active, onClick }: AppTypeCardP onClick={onClick} > {icon} -
{title}
-
{description}
+
{title}
+
{description}
) } @@ -367,8 +366,8 @@ function AppPreview({ mode }: { mode: AppModeEnum }) { const previewInfo = modeToPreviewInfoMap[mode] return (
-

{previewInfo.title}

-
+

{previewInfo.title}

+
{previewInfo.description}
@@ -389,7 +388,7 @@ function AppScreenShot({ mode, show }: { mode: AppModeEnum, show: boolean }) { - App Screen Shot
, })) -// Mock next/image to render a normal img tag for testing -vi.mock('next/image', () => ({ - __esModule: true, - default: (props: ImgHTMLAttributes & { unoptimized?: boolean }) => { - const { unoptimized: _, ...rest } = props - return - }, -})) - type GlobalPublicStoreMock = { systemFeatures: SystemFeatures setSystemFeatures: (systemFeatures: SystemFeatures) => void diff --git a/web/app/components/base/checkbox-list/__tests__/index.spec.tsx b/web/app/components/base/checkbox-list/__tests__/index.spec.tsx index 7c588f6a33..b4f816dda8 100644 --- a/web/app/components/base/checkbox-list/__tests__/index.spec.tsx +++ b/web/app/components/base/checkbox-list/__tests__/index.spec.tsx @@ -1,13 +1,7 @@ -/* eslint-disable next/no-img-element */ -import type { ImgHTMLAttributes } from 'react' import { render, screen } from '@testing-library/react' import userEvent from '@testing-library/user-event' import CheckboxList from '..' -vi.mock('next/image', () => ({ - default: (props: ImgHTMLAttributes) => , -})) - describe('checkbox list component', () => { const options = [ { label: 'Option 1', value: 'option1' }, diff --git a/web/app/components/base/checkbox-list/index.tsx b/web/app/components/base/checkbox-list/index.tsx index ed328244a1..6eda2aebd0 100644 --- a/web/app/components/base/checkbox-list/index.tsx +++ b/web/app/components/base/checkbox-list/index.tsx @@ -1,6 +1,5 @@ 'use client' import type { FC } from 'react' -import Image from 'next/image' import { useCallback, useMemo, useState } from 'react' import { useTranslation } from 'react-i18next' import Badge from '@/app/components/base/badge' @@ -169,7 +168,7 @@ const CheckboxList: FC = ({ {searchQuery ? (
- search menu + search menu {t('operation.noSearchResults', { ns: 'common', content: title })}
diff --git a/web/app/components/base/file-thumb/__tests__/index.spec.tsx b/web/app/components/base/file-thumb/__tests__/index.spec.tsx index 368f14ae75..f67f291579 100644 --- a/web/app/components/base/file-thumb/__tests__/index.spec.tsx +++ b/web/app/components/base/file-thumb/__tests__/index.spec.tsx @@ -1,14 +1,7 @@ -/* eslint-disable next/no-img-element */ -import type { ImgHTMLAttributes } from 'react' import { fireEvent, render, screen } from '@testing-library/react' import userEvent from '@testing-library/user-event' import FileThumb from '../index' -vi.mock('next/image', () => ({ - __esModule: true, - default: (props: ImgHTMLAttributes) => , -})) - describe('FileThumb Component', () => { const mockImageFile = { name: 'test-image.jpg', diff --git a/web/app/components/base/markdown-with-directive/components/with-icon-card-item.spec.tsx b/web/app/components/base/markdown-with-directive/components/with-icon-card-item.spec.tsx index 58eb24d75e..dbe293dcf6 100644 --- a/web/app/components/base/markdown-with-directive/components/with-icon-card-item.spec.tsx +++ b/web/app/components/base/markdown-with-directive/components/with-icon-card-item.spec.tsx @@ -1,10 +1,6 @@ import { render, screen } from '@testing-library/react' import WithIconCardItem from './with-icon-card-item' -vi.mock('next/image', () => ({ - default: ({ unoptimized: _unoptimized, ...props }: React.ImgHTMLAttributes & { unoptimized?: boolean }) => , -})) - describe('WithIconCardItem', () => { beforeEach(() => { vi.clearAllMocks() diff --git a/web/app/components/base/markdown-with-directive/components/with-icon-card-item.tsx b/web/app/components/base/markdown-with-directive/components/with-icon-card-item.tsx index 915c31f160..9eac1282a9 100644 --- a/web/app/components/base/markdown-with-directive/components/with-icon-card-item.tsx +++ b/web/app/components/base/markdown-with-directive/components/with-icon-card-item.tsx @@ -1,6 +1,5 @@ import type { ReactNode } from 'react' import type { WithIconCardItemProps } from './markdown-with-directive-schema' -import Image from 'next/image' import { cn } from '@/utils/classnames' type WithIconItemProps = WithIconCardItemProps & { @@ -11,18 +10,13 @@ type WithIconItemProps = WithIconCardItemProps & { function WithIconCardItem({ icon, children, className, iconAlt }: WithIconItemProps) { return (
- {/* - * unoptimized to "url parameter is not allowed" for external domains despite correct remotePatterns configuration. - * https://github.com/vercel/next.js/issues/88873 - */} - {iconAlt
{children} diff --git a/web/app/components/base/markdown-with-directive/index.spec.tsx b/web/app/components/base/markdown-with-directive/index.spec.tsx index 0ca608727f..fc4b813247 100644 --- a/web/app/components/base/markdown-with-directive/index.spec.tsx +++ b/web/app/components/base/markdown-with-directive/index.spec.tsx @@ -7,10 +7,6 @@ import { MarkdownWithDirective } from './index' const FOUR_COLON_RE = /:{4}/ -vi.mock('next/image', () => ({ - default: (props: React.ImgHTMLAttributes) => , -})) - function expectDecorativeIcon(container: HTMLElement, src: string) { const icon = container.querySelector('img') expect(icon).toBeInTheDocument() diff --git a/web/app/components/base/notion-page-selector/credential-selector/__tests__/index.spec.tsx b/web/app/components/base/notion-page-selector/credential-selector/__tests__/index.spec.tsx index efcf015ea5..f1f1cf08d2 100644 --- a/web/app/components/base/notion-page-selector/credential-selector/__tests__/index.spec.tsx +++ b/web/app/components/base/notion-page-selector/credential-selector/__tests__/index.spec.tsx @@ -3,7 +3,7 @@ import userEvent from '@testing-library/user-event' import { describe, expect, it, vi } from 'vitest' import CredentialSelector from '../index' -// Mock CredentialIcon since it's likely a complex component or uses next/image +// Mock CredentialIcon since it's likely a complex component. vi.mock('@/app/components/datasets/common/credential-icon', () => ({ CredentialIcon: ({ name }: { name: string }) =>
{name}
, })) diff --git a/web/app/components/datasets/common/retrieval-method-info/__tests__/index.spec.tsx b/web/app/components/datasets/common/retrieval-method-info/__tests__/index.spec.tsx index 36120de738..ad230fb596 100644 --- a/web/app/components/datasets/common/retrieval-method-info/__tests__/index.spec.tsx +++ b/web/app/components/datasets/common/retrieval-method-info/__tests__/index.spec.tsx @@ -4,13 +4,6 @@ import { RETRIEVE_METHOD } from '@/types/app' import { retrievalIcon } from '../../../create/icons' import RetrievalMethodInfo, { getIcon } from '../index' -// Override global next/image auto-mock: tests assert on rendered src attributes via data-testid -vi.mock('next/image', () => ({ - default: ({ src, alt, className }: { src: string, alt: string, className?: string }) => ( - {alt - ), -})) - // Mock RadioCard vi.mock('@/app/components/base/radio-card', () => ({ default: ({ title, description, chosenConfig, icon }: { title: string, description: string, chosenConfig: ReactNode, icon: ReactNode }) => ( @@ -50,7 +43,7 @@ describe('RetrievalMethodInfo', () => { }) it('should render correctly with full config', () => { - render() + const { container } = render() expect(screen.getByTestId('radio-card')).toBeInTheDocument() @@ -59,7 +52,7 @@ describe('RetrievalMethodInfo', () => { expect(screen.getByTestId('card-description')).toHaveTextContent('dataset.retrieval.semantic_search.description') // Check Icon - const icon = screen.getByTestId('method-icon') + const icon = container.querySelector('img') expect(icon).toHaveAttribute('src', 'vector-icon.png') // Check Config Details @@ -87,18 +80,18 @@ describe('RetrievalMethodInfo', () => { it('should handle different retrieval methods', () => { // Test Hybrid const hybridConfig = { ...defaultConfig, search_method: RETRIEVE_METHOD.hybrid } - const { unmount } = render() + const { container, unmount } = render() expect(screen.getByTestId('card-title')).toHaveTextContent('dataset.retrieval.hybrid_search.title') - expect(screen.getByTestId('method-icon')).toHaveAttribute('src', 'hybrid-icon.png') + expect(container.querySelector('img')).toHaveAttribute('src', 'hybrid-icon.png') unmount() // Test FullText const fullTextConfig = { ...defaultConfig, search_method: RETRIEVE_METHOD.fullText } - render() + const { container: fullTextContainer } = render() expect(screen.getByTestId('card-title')).toHaveTextContent('dataset.retrieval.full_text_search.title') - expect(screen.getByTestId('method-icon')).toHaveAttribute('src', 'fulltext-icon.png') + expect(fullTextContainer.querySelector('img')).toHaveAttribute('src', 'fulltext-icon.png') }) describe('getIcon utility', () => { @@ -132,17 +125,17 @@ describe('RetrievalMethodInfo', () => { it('should render correctly with invertedIndex search method', () => { const invertedIndexConfig = { ...defaultConfig, search_method: RETRIEVE_METHOD.invertedIndex } - render() + const { container } = render() // invertedIndex uses vector icon - expect(screen.getByTestId('method-icon')).toHaveAttribute('src', 'vector-icon.png') + expect(container.querySelector('img')).toHaveAttribute('src', 'vector-icon.png') }) it('should render correctly with keywordSearch search method', () => { const keywordSearchConfig = { ...defaultConfig, search_method: RETRIEVE_METHOD.keywordSearch } - render() + const { container } = render() // keywordSearch uses vector icon - expect(screen.getByTestId('method-icon')).toHaveAttribute('src', 'vector-icon.png') + expect(container.querySelector('img')).toHaveAttribute('src', 'vector-icon.png') }) }) diff --git a/web/app/components/datasets/common/retrieval-method-info/index.tsx b/web/app/components/datasets/common/retrieval-method-info/index.tsx index 398b79975f..d23d247307 100644 --- a/web/app/components/datasets/common/retrieval-method-info/index.tsx +++ b/web/app/components/datasets/common/retrieval-method-info/index.tsx @@ -1,7 +1,6 @@ 'use client' import type { FC } from 'react' import type { RetrievalConfig } from '@/types/app' -import Image from 'next/image' import * as React from 'react' import { useTranslation } from 'react-i18next' import RadioCard from '@/app/components/base/radio-card' @@ -28,7 +27,7 @@ const EconomicalRetrievalMethodConfig: FC = ({ }) => { const { t } = useTranslation() const type = value.search_method - const icon = + const icon = return (
= ({ /> )}
- {t('modelProvider.rerankModel.key', { ns: 'common' })} + {t('modelProvider.rerankModel.key', { ns: 'common' })} {t('modelProvider.rerankModel.tip', { ns: 'common' })}
@@ -157,7 +156,7 @@ const RetrievalParamConfig: FC = ({
- + {t('form.retrievalSetting.multiModalTip', { ns: 'datasetSettings' })}
@@ -215,11 +214,11 @@ const RetrievalParamConfig: FC = ({ isChosen={value.reranking_mode === option.value} onChosen={() => handleChangeRerankMode(option.value)} icon={( - @@ -281,7 +280,7 @@ const RetrievalParamConfig: FC = ({
- + {t('form.retrievalSetting.multiModalTip', { ns: 'datasetSettings' })}
diff --git a/web/app/components/datasets/create/embedding-process/__tests__/index.spec.tsx b/web/app/components/datasets/create/embedding-process/__tests__/index.spec.tsx index 9f06abdc41..686139250a 100644 --- a/web/app/components/datasets/create/embedding-process/__tests__/index.spec.tsx +++ b/web/app/components/datasets/create/embedding-process/__tests__/index.spec.tsx @@ -20,14 +20,6 @@ vi.mock('next/navigation', () => ({ useRouter: () => mockRouter, })) -// Override global next/image auto-mock: test asserts on data-testid="next-image" -vi.mock('next/image', () => ({ - default: ({ src, alt, className }: { src: string, alt: string, className?: string }) => ( - // eslint-disable-next-line next/no-img-element - {alt} - ), -})) - // Mock API service const mockFetchIndexingStatusBatch = vi.fn() vi.mock('@/service/datasets', () => ({ @@ -979,9 +971,9 @@ describe('RuleDetail', () => { }) it('should render correct icon for indexing type', () => { - render() + const { container } = render() - const images = screen.getAllByTestId('next-image') + const images = container.querySelectorAll('img') expect(images.length).toBeGreaterThan(0) }) }) diff --git a/web/app/components/datasets/create/embedding-process/rule-detail.tsx b/web/app/components/datasets/create/embedding-process/rule-detail.tsx index dff35100cb..553c751056 100644 --- a/web/app/components/datasets/create/embedding-process/rule-detail.tsx +++ b/web/app/components/datasets/create/embedding-process/rule-detail.tsx @@ -1,6 +1,5 @@ import type { FC } from 'react' import type { ProcessRuleResponse } from '@/models/datasets' -import Image from 'next/image' import { useCallback } from 'react' import { useTranslation } from 'react-i18next' import { FieldInfo } from '@/app/components/datasets/documents/detail/metadata' @@ -119,12 +118,12 @@ const RuleDetail: FC = ({ sourceData, indexingType, retrievalMe } + valueIcon={} /> } + valueIcon={} />
) diff --git a/web/app/components/datasets/create/icons.ts b/web/app/components/datasets/create/icons.ts index 10f3a319dc..75cbba0c6b 100644 --- a/web/app/components/datasets/create/icons.ts +++ b/web/app/components/datasets/create/icons.ts @@ -5,12 +5,12 @@ import Research from './assets/research-mod.svg' import Selection from './assets/selection-mod.svg' export const indexMethodIcon = { - high_quality: GoldIcon, - economical: Piggybank, + high_quality: GoldIcon.src, + economical: Piggybank.src, } export const retrievalIcon = { - vector: Selection, - fullText: Research, - hybrid: PatternRecognition, + vector: Selection.src, + fullText: Research.src, + hybrid: PatternRecognition.src, } diff --git a/web/app/components/datasets/create/step-two/components/__tests__/option-card.spec.tsx b/web/app/components/datasets/create/step-two/components/__tests__/option-card.spec.tsx index e543efec86..d59e759ab1 100644 --- a/web/app/components/datasets/create/step-two/components/__tests__/option-card.spec.tsx +++ b/web/app/components/datasets/create/step-two/components/__tests__/option-card.spec.tsx @@ -2,13 +2,6 @@ import { fireEvent, render, screen } from '@testing-library/react' import { beforeEach, describe, expect, it, vi } from 'vitest' import { OptionCard, OptionCardHeader } from '../option-card' -// Override global next/image auto-mock: tests assert on rendered elements -vi.mock('next/image', () => ({ - default: ({ src, alt, ...props }: { src?: string, alt?: string, width?: number, height?: number }) => ( - {alt} - ), -})) - describe('OptionCardHeader', () => { const defaultProps = { icon: icon, diff --git a/web/app/components/datasets/create/step-two/components/general-chunking-options.tsx b/web/app/components/datasets/create/step-two/components/general-chunking-options.tsx index 0beda8f5c8..650fd3ebfb 100644 --- a/web/app/components/datasets/create/step-two/components/general-chunking-options.tsx +++ b/web/app/components/datasets/create/step-two/components/general-chunking-options.tsx @@ -6,7 +6,6 @@ import { RiAlertFill, RiSearchEyeLine, } from '@remixicon/react' -import Image from 'next/image' import { useTranslation } from 'react-i18next' import Button from '@/app/components/base/button' import Checkbox from '@/app/components/base/checkbox' @@ -26,7 +25,7 @@ type TextLabelProps = { } const TextLabel: FC = ({ children }) => { - return + return } type GeneralChunkingOptionsProps = { @@ -97,7 +96,7 @@ export const GeneralChunkingOptions: FC = ({ } + icon={{t('stepTwo.general',} activeHeaderClassName="bg-dataset-option-card-blue-gradient" description={t('stepTwo.generalTip', { ns: 'datasetCreation' })} isActive={isActive} @@ -148,7 +147,7 @@ export const GeneralChunkingOptions: FC = ({ onClick={() => onRuleToggle(rule.id)} > -
@@ -183,7 +182,7 @@ export const GeneralChunkingOptions: FC = ({ checked={currentDocForm === ChunkingMode.qa} disabled={hasCurrentDatasetDocForm} /> -
@@ -202,7 +201,7 @@ export const GeneralChunkingOptions: FC = ({ className="mt-2 flex h-10 items-center gap-2 rounded-xl border border-components-panel-border px-3 text-xs shadow-xs backdrop-blur-[5px]" > - + {t('stepTwo.QATip', { ns: 'datasetCreation' })}
diff --git a/web/app/components/datasets/create/step-two/components/indexing-mode-section.tsx b/web/app/components/datasets/create/step-two/components/indexing-mode-section.tsx index b172778f54..da309348cc 100644 --- a/web/app/components/datasets/create/step-two/components/indexing-mode-section.tsx +++ b/web/app/components/datasets/create/step-two/components/indexing-mode-section.tsx @@ -3,7 +3,6 @@ import type { FC } from 'react' import type { DefaultModel, Model } from '@/app/components/header/account-setting/model-provider-page/declarations' import type { RetrievalConfig } from '@/types/app' -import Image from 'next/image' import Link from 'next/link' import { useTranslation } from 'react-i18next' import Badge from '@/app/components/base/badge' @@ -70,7 +69,7 @@ export const IndexingModeSection: FC = ({ return ( <> {/* Index Mode */} -
+
{t('stepTwo.indexMode', { ns: 'datasetCreation' })}
@@ -98,7 +97,7 @@ export const IndexingModeSection: FC = ({
)} description={t('stepTwo.qualifiedTip', { ns: 'datasetCreation' })} - icon={} + icon={} isActive={!hasSetIndexType && indexType === IndexingType.QUALIFIED} disabled={hasSetIndexType} onSwitched={() => onIndexTypeChange(IndexingType.QUALIFIED)} @@ -143,7 +142,7 @@ export const IndexingModeSection: FC = ({ className="h-full" title={t('stepTwo.economical', { ns: 'datasetCreation' })} description={t('stepTwo.economicalTip', { ns: 'datasetCreation' })} - icon={} + icon={} isActive={!hasSetIndexType && indexType === IndexingType.ECONOMICAL} disabled={hasSetIndexType || docForm !== ChunkingMode.text} onSwitched={() => onIndexTypeChange(IndexingType.ECONOMICAL)} @@ -160,7 +159,7 @@ export const IndexingModeSection: FC = ({
- + {t('stepTwo.highQualityTip', { ns: 'datasetCreation' })}
@@ -168,7 +167,7 @@ export const IndexingModeSection: FC = ({ {/* Economical index setting tip */} {hasSetIndexType && indexType === IndexingType.ECONOMICAL && ( -
+
{t('stepTwo.indexSettingTip', { ns: 'datasetCreation' })} {t('stepTwo.datasetSettingLink', { ns: 'datasetCreation' })} @@ -179,7 +178,7 @@ export const IndexingModeSection: FC = ({ {/* Embedding model */} {indexType === IndexingType.QUALIFIED && (
-
+
{t('form.embeddingModel', { ns: 'datasetSettings' })}
= ({ onSelect={onEmbeddingModelChange} /> {isModelAndRetrievalConfigDisabled && ( -
+
{t('stepTwo.indexSettingTip', { ns: 'datasetCreation' })} {t('stepTwo.datasetSettingLink', { ns: 'datasetCreation' })} @@ -207,10 +206,10 @@ export const IndexingModeSection: FC = ({ {!isModelAndRetrievalConfigDisabled ? (
-
+
{t('form.retrievalSetting.title', { ns: 'datasetSettings' })}
-
+ ) : ( -
+
{t('form.retrievalSetting.title', { ns: 'datasetSettings' })}
)} diff --git a/web/app/components/datasets/create/step-two/components/option-card.tsx b/web/app/components/datasets/create/step-two/components/option-card.tsx index 55cbf5276f..320c7be44f 100644 --- a/web/app/components/datasets/create/step-two/components/option-card.tsx +++ b/web/app/components/datasets/create/step-two/components/option-card.tsx @@ -1,5 +1,4 @@ import type { ComponentProps, FC, ReactNode } from 'react' -import Image from 'next/image' import { cn } from '@/utils/classnames' const TriangleArrow: FC> = props => ( @@ -23,7 +22,7 @@ export const OptionCardHeader: FC = (props) => { return (
- {isActive && effectImg && } + {isActive && effectImg && }
{icon} @@ -34,8 +33,8 @@ export const OptionCardHeader: FC = (props) => { className={cn('absolute -bottom-1.5 left-4 text-transparent', isActive && 'text-components-panel-bg')} />
-
{title}
-
{description}
+
{title}
+
{description}
) diff --git a/web/app/components/datasets/create/step-two/components/parent-child-options.tsx b/web/app/components/datasets/create/step-two/components/parent-child-options.tsx index b7b965a4fd..eb542fd3d5 100644 --- a/web/app/components/datasets/create/step-two/components/parent-child-options.tsx +++ b/web/app/components/datasets/create/step-two/components/parent-child-options.tsx @@ -4,7 +4,6 @@ import type { FC } from 'react' import type { ParentChildConfig } from '../hooks' import type { ParentMode, PreProcessingRule, SummaryIndexSetting as SummaryIndexSettingType } from '@/models/datasets' import { RiSearchEyeLine } from '@remixicon/react' -import Image from 'next/image' import { useTranslation } from 'react-i18next' import Button from '@/app/components/base/button' import Checkbox from '@/app/components/base/checkbox' @@ -26,7 +25,7 @@ type TextLabelProps = { } const TextLabel: FC = ({ children }) => { - return + return } type ParentChildOptionsProps = { @@ -118,7 +117,7 @@ export const ParentChildOptions: FC = ({
} + icon={} title={t('stepTwo.paragraph', { ns: 'datasetCreation' })} description={t('stepTwo.paragraphTip', { ns: 'datasetCreation' })} isChosen={parentChildConfig.chunkForContext === 'paragraph'} @@ -140,7 +139,7 @@ export const ParentChildOptions: FC = ({ /> } + icon={} title={t('stepTwo.fullDoc', { ns: 'datasetCreation' })} description={t('stepTwo.fullDocTip', { ns: 'datasetCreation' })} onChosen={() => onChunkForContextChange('full-doc')} @@ -186,7 +185,7 @@ export const ParentChildOptions: FC = ({ onClick={() => onRuleToggle(rule.id)} > -
diff --git a/web/app/components/datasets/documents/create-from-pipeline/processing/embedding-process/__tests__/rule-detail.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/processing/embedding-process/__tests__/rule-detail.spec.tsx index c11caeb156..c0873f2c5d 100644 --- a/web/app/components/datasets/documents/create-from-pipeline/processing/embedding-process/__tests__/rule-detail.spec.tsx +++ b/web/app/components/datasets/documents/create-from-pipeline/processing/embedding-process/__tests__/rule-detail.spec.tsx @@ -6,14 +6,6 @@ import { ProcessMode } from '@/models/datasets' import { RETRIEVE_METHOD } from '@/types/app' import RuleDetail from '../rule-detail' -// Override global next/image auto-mock: tests assert on data-testid="next-image" and src attributes -vi.mock('next/image', () => ({ - default: function MockImage({ src, alt, className }: { src: string, alt: string, className?: string }) { - // eslint-disable-next-line next/no-img-element - return {alt} - }, -})) - // Mock FieldInfo component vi.mock('@/app/components/datasets/documents/detail/metadata', () => ({ FieldInfo: ({ label, displayedValue, valueIcon }: { label: string, displayedValue: string, valueIcon?: React.ReactNode }) => ( @@ -184,16 +176,16 @@ describe('RuleDetail', () => { }) it('should show high_quality icon for qualified indexing', () => { - render() + const { container } = render() - const images = screen.getAllByTestId('next-image') + const images = container.querySelectorAll('img') expect(images[0]).toHaveAttribute('src', '/icons/high_quality.svg') }) it('should show economical icon for economical indexing', () => { - render() + const { container } = render() - const images = screen.getAllByTestId('next-image') + const images = container.querySelectorAll('img') expect(images[0]).toHaveAttribute('src', '/icons/economical.svg') }) }) @@ -256,38 +248,38 @@ describe('RuleDetail', () => { }) it('should show vector icon for semantic search', () => { - render( + const { container } = render( , ) - const images = screen.getAllByTestId('next-image') + const images = container.querySelectorAll('img') expect(images[1]).toHaveAttribute('src', '/icons/vector.svg') }) it('should show fullText icon for full text search', () => { - render( + const { container } = render( , ) - const images = screen.getAllByTestId('next-image') + const images = container.querySelectorAll('img') expect(images[1]).toHaveAttribute('src', '/icons/fullText.svg') }) it('should show hybrid icon for hybrid search', () => { - render( + const { container } = render( , ) - const images = screen.getAllByTestId('next-image') + const images = container.querySelectorAll('img') expect(images[1]).toHaveAttribute('src', '/icons/hybrid.svg') }) }) @@ -308,9 +300,9 @@ describe('RuleDetail', () => { }) it('should handle undefined retrievalMethod with defined indexingType', () => { - render() + const { container } = render() - const images = screen.getAllByTestId('next-image') + const images = container.querySelectorAll('img') // When retrievalMethod is undefined, vector icon is used as default expect(images[1]).toHaveAttribute('src', '/icons/vector.svg') }) diff --git a/web/app/components/datasets/documents/create-from-pipeline/processing/embedding-process/rule-detail.tsx b/web/app/components/datasets/documents/create-from-pipeline/processing/embedding-process/rule-detail.tsx index 8fe6af6170..526d31f3fe 100644 --- a/web/app/components/datasets/documents/create-from-pipeline/processing/embedding-process/rule-detail.tsx +++ b/web/app/components/datasets/documents/create-from-pipeline/processing/embedding-process/rule-detail.tsx @@ -1,5 +1,4 @@ import type { ProcessRuleResponse } from '@/models/datasets' -import Image from 'next/image' import * as React from 'react' import { useCallback } from 'react' import { useTranslation } from 'react-i18next' @@ -50,7 +49,7 @@ const RuleDetail = ({ label={t('stepTwo.indexMode', { ns: 'datasetCreation' })} displayedValue={t(`stepTwo.${indexingType === IndexingType.ECONOMICAL ? 'economical' : 'qualified'}`, { ns: 'datasetCreation' }) as string} valueIcon={( - = React.memo(({ label={t('stepTwo.indexMode', { ns: 'datasetCreation' })} displayedValue={t(`stepTwo.${isEconomical ? 'economical' : 'qualified'}`, { ns: 'datasetCreation' }) as string} valueIcon={( - = React.memo(({ label={t('form.retrievalSetting.title', { ns: 'datasetSettings' })} displayedValue={t(`retrieval.${isEconomical ? 'keyword_search' : retrievalMethod ?? 'semantic_search'}.title`, { ns: 'dataset' })} valueIcon={( - + const icon = const TextAreaComp = useMemo(() => { return (