diff --git a/eslint-suppressions.json b/eslint-suppressions.json index 1bff82ac17..b3c7a18fea 100644 --- a/eslint-suppressions.json +++ b/eslint-suppressions.json @@ -2422,21 +2422,11 @@ "count": 1 } }, - "web/app/components/datasets/documents/create-from-pipeline/data-source/base/header.tsx": { - "no-restricted-imports": { - "count": 1 - } - }, "web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/index.tsx": { "ts/no-explicit-any": { "count": 1 } }, - "web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/bucket.tsx": { - "no-restricted-imports": { - "count": 1 - } - }, "web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/item.tsx": { "no-restricted-imports": { "count": 1 @@ -2525,11 +2515,6 @@ "count": 1 } }, - "web/app/components/datasets/documents/detail/completed/common/summary-status.tsx": { - "no-restricted-imports": { - "count": 1 - } - }, "web/app/components/datasets/documents/detail/completed/components/index.ts": { "no-barrel-files/no-barrel-files": { "count": 3 @@ -2789,11 +2774,6 @@ "count": 2 } }, - "web/app/components/develop/secret-key/input-copy.tsx": { - "no-restricted-imports": { - "count": 1 - } - }, "web/app/components/develop/secret-key/secret-key-generate.tsx": { "no-restricted-imports": { "count": 1 @@ -3159,16 +3139,6 @@ "count": 1 } }, - "web/app/components/plugins/base/badges/icon-with-tooltip.tsx": { - "no-restricted-imports": { - "count": 1 - } - }, - "web/app/components/plugins/base/key-value-item.tsx": { - "no-restricted-imports": { - "count": 1 - } - }, "web/app/components/plugins/card/index.tsx": { "ts/no-non-null-asserted-optional-chain": { "count": 1 @@ -3328,24 +3298,11 @@ "count": 2 } }, - "web/app/components/plugins/plugin-detail-panel/detail-header/components/plugin-source-badge.tsx": { - "no-restricted-imports": { - "count": 1 - } - }, "web/app/components/plugins/plugin-detail-panel/detail-header/hooks/index.ts": { "no-barrel-files/no-barrel-files": { "count": 3 } }, - "web/app/components/plugins/plugin-detail-panel/endpoint-card.tsx": { - "no-restricted-imports": { - "count": 1 - }, - "ts/no-explicit-any": { - "count": 2 - } - }, "web/app/components/plugins/plugin-detail-panel/endpoint-list.tsx": { "no-restricted-imports": { "count": 1 @@ -3544,11 +3501,6 @@ "count": 1 } }, - "web/app/components/plugins/plugin-page/plugin-tasks/components/task-status-indicator.tsx": { - "no-restricted-imports": { - "count": 1 - } - }, "web/app/components/plugins/readme-panel/index.tsx": { "react/unsupported-syntax": { "count": 1 @@ -3822,14 +3774,6 @@ "count": 1 } }, - "web/app/components/tools/mcp/detail/content.tsx": { - "no-restricted-imports": { - "count": 1 - }, - "ts/no-explicit-any": { - "count": 3 - } - }, "web/app/components/tools/mcp/detail/tool-item.tsx": { "no-restricted-imports": { "count": 1 diff --git a/packages/dify-ui/src/select/__tests__/index.spec.tsx b/packages/dify-ui/src/select/__tests__/index.spec.tsx index eab980a607..9e3e945de0 100644 --- a/packages/dify-ui/src/select/__tests__/index.spec.tsx +++ b/packages/dify-ui/src/select/__tests__/index.spec.tsx @@ -231,10 +231,8 @@ describe('Select wrappers', () => { , ) - screen.getByRole('group', { name: 'select positioner' }).element().dispatchEvent(new MouseEvent('mouseover', { - bubbles: true, - })) - asHTMLElement(screen.getByRole('dialog', { name: 'select popup' }).element()).click() + await screen.getByRole('group', { name: 'select positioner' }).hover() + await screen.getByRole('dialog', { name: 'select popup' }).click() screen.getByRole('listbox', { name: 'select list' }).element().dispatchEvent(new FocusEvent('focusin', { bubbles: true, })) diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/base/__tests__/header.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/base/__tests__/header.spec.tsx index a6abad358e..bc3b025ded 100644 --- a/web/app/components/datasets/documents/create-from-pipeline/data-source/base/__tests__/header.spec.tsx +++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/base/__tests__/header.spec.tsx @@ -2,18 +2,10 @@ import { render, screen } from '@testing-library/react' import { describe, expect, it, vi } from 'vitest' import Header from '../header' -vi.mock('@langgenius/dify-ui/button', () => ({ - Button: ({ children }: { children: React.ReactNode }) => , -})) - vi.mock('@/app/components/base/divider', () => ({ default: () => , })) -vi.mock('@/app/components/base/tooltip', () => ({ - default: ({ children }: { children: React.ReactNode }) =>
{children}
, -})) - vi.mock('../credential-selector', () => ({ default: () =>
, })) diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/base/header.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/base/header.tsx index a285946272..c91012bf4a 100644 --- a/web/app/components/datasets/documents/create-from-pipeline/data-source/base/header.tsx +++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/base/header.tsx @@ -1,10 +1,9 @@ import type { CredentialSelectorProps } from './credential-selector' import { Button } from '@langgenius/dify-ui/button' -import { RiBookOpenLine, RiEqualizer2Line } from '@remixicon/react' +import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip' import * as React from 'react' import { useTranslation } from 'react-i18next' import Divider from '@/app/components/base/divider' -import Tooltip from '@/app/components/base/tooltip' import CredentialSelector from './credential-selector' type HeaderProps = { @@ -22,6 +21,7 @@ const Header = ({ ...rest }: HeaderProps) => { const { t } = useTranslation() + const configurationTip = t('configurationTip', { ns: 'datasetPipeline', pluginName }) return (
@@ -30,20 +30,23 @@ const Header = ({ {...rest} /> - - + + + + + )} + /> + + {configurationTip} +
- + {docTitle}
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/__tests__/bucket.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/__tests__/bucket.spec.tsx index 83e17e6e04..b0a49eee0d 100644 --- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/__tests__/bucket.spec.tsx +++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/__tests__/bucket.spec.tsx @@ -5,9 +5,6 @@ import Bucket from '../bucket' vi.mock('@/app/components/base/icons/src/public/knowledge/online-drive', () => ({ BucketsGray: (props: React.SVGProps) => , })) -vi.mock('@/app/components/base/tooltip', () => ({ - default: ({ children }: { children?: React.ReactNode }) =>
{children}
, -})) describe('Bucket', () => { const defaultProps = { @@ -32,8 +29,7 @@ describe('Bucket', () => { it('should call handleBackToBucketList on icon button click', () => { render() - const buttons = screen.getAllByRole('button') - fireEvent.click(buttons[0]!) + fireEvent.click(screen.getByRole('button', { name: 'datasetPipeline.onlineDrive.breadcrumbs.allBuckets' })) expect(defaultProps.handleBackToBucketList).toHaveBeenCalledOnce() }) diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/bucket.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/bucket.tsx index 003aee6542..384188502b 100644 --- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/bucket.tsx +++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/bucket.tsx @@ -1,9 +1,10 @@ +import { Button } from '@langgenius/dify-ui/button' import { cn } from '@langgenius/dify-ui/cn' +import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip' import * as React from 'react' import { useCallback } from 'react' import { useTranslation } from 'react-i18next' import { BucketsGray } from '@/app/components/base/icons/src/public/knowledge/online-drive' -import Tooltip from '@/app/components/base/tooltip' type BucketProps = { bucketName: string @@ -27,19 +28,28 @@ const Bucket = ({ if (!disabled) handleClickBucketName() }, [disabled, handleClickBucketName]) + const allBucketsLabel = t('onlineDrive.breadcrumbs.allBuckets', { ns: 'datasetPipeline' }) return ( <> - - + + + + + )} + /> + + {allBucketsLabel} + / + default: ({ + children, + onClick, + ...props + }: React.ButtonHTMLAttributes) => ( + ), })) @@ -54,6 +52,6 @@ describe('KeyValueItem', () => { it('renders copy tooltip', () => { render() - expect(screen.getByTestId('tooltip')).toHaveAttribute('data-content', 'common.operation.copy') + expect(screen.getByRole('button', { name: 'common.operation.copy' })).toBeInTheDocument() }) }) diff --git a/web/app/components/plugins/base/badges/__tests__/icon-with-tooltip.spec.tsx b/web/app/components/plugins/base/badges/__tests__/icon-with-tooltip.spec.tsx index e24aa5a873..d4a87fa8a5 100644 --- a/web/app/components/plugins/base/badges/__tests__/icon-with-tooltip.spec.tsx +++ b/web/app/components/plugins/base/badges/__tests__/icon-with-tooltip.spec.tsx @@ -3,24 +3,6 @@ import { beforeEach, describe, expect, it, vi } from 'vitest' import { Theme } from '@/types/app' import IconWithTooltip from '../icon-with-tooltip' -// Mock Tooltip component -vi.mock('@/app/components/base/tooltip', () => ({ - default: ({ - children, - popupContent, - popupClassName, - }: { - children: React.ReactNode - popupContent?: string - popupClassName?: string - }) => ( -
- {children} -
- ), -})) - -// Mock icon components const MockLightIcon = ({ className }: { className?: string }) => (
Light Icon
) @@ -44,10 +26,10 @@ describe('IconWithTooltip', () => { />, ) - expect(screen.getByTestId('tooltip')).toBeInTheDocument() + expect(screen.getByTestId('light-icon')).toBeInTheDocument() }) - it('should render Tooltip wrapper', () => { + it('should render tooltip trigger with accessible label when popupContent is provided', () => { render( { />, ) - expect(screen.getByTestId('tooltip')).toHaveAttribute('data-popup-content', 'Test tooltip') - }) - - it('should apply correct popupClassName to Tooltip', () => { - render( - , - ) - - const tooltip = screen.getByTestId('tooltip') - expect(tooltip).toHaveAttribute('data-popup-classname') - expect(tooltip.getAttribute('data-popup-classname')).toContain('border-components-panel-border') + expect(screen.getByLabelText('Test tooltip')).toBeInTheDocument() }) }) @@ -171,10 +139,7 @@ describe('IconWithTooltip', () => { />, ) - expect(screen.getByTestId('tooltip')).toHaveAttribute( - 'data-popup-content', - 'Custom tooltip content', - ) + expect(screen.getByLabelText('Custom tooltip content')).toBeInTheDocument() }) it('should handle undefined popupContent', () => { @@ -186,7 +151,7 @@ describe('IconWithTooltip', () => { />, ) - expect(screen.getByTestId('tooltip')).toBeInTheDocument() + expect(screen.getByTestId('light-icon')).toBeInTheDocument() }) }) @@ -239,7 +204,7 @@ describe('IconWithTooltip', () => { />, ) - expect(screen.getByTestId('tooltip')).toHaveAttribute('data-popup-content', longContent) + expect(screen.getByLabelText(longContent)).toBeInTheDocument() }) it('should handle special characters in popupContent', () => { @@ -253,7 +218,7 @@ describe('IconWithTooltip', () => { />, ) - expect(screen.getByTestId('tooltip')).toHaveAttribute('data-popup-content', specialContent) + expect(screen.getByLabelText(specialContent)).toBeInTheDocument() }) }) }) diff --git a/web/app/components/plugins/base/badges/icon-with-tooltip.tsx b/web/app/components/plugins/base/badges/icon-with-tooltip.tsx index faabd545fd..2cb40adf0a 100644 --- a/web/app/components/plugins/base/badges/icon-with-tooltip.tsx +++ b/web/app/components/plugins/base/badges/icon-with-tooltip.tsx @@ -1,7 +1,7 @@ import type { FC } from 'react' import { cn } from '@langgenius/dify-ui/cn' +import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip' import * as React from 'react' -import Tooltip from '@/app/components/base/tooltip' import { Theme } from '@/types/app' type IconWithTooltipProps = { @@ -22,15 +22,24 @@ const IconWithTooltip: FC = ({ const isDark = theme === Theme.dark const iconClassName = cn('h-5 w-5', className) const Icon = isDark ? BadgeIconDark : BadgeIconLight + const icon = ( + + + + ) + + if (!popupContent) + return icon return ( - -
- -
+ + + + {popupContent} + ) } diff --git a/web/app/components/plugins/base/key-value-item.tsx b/web/app/components/plugins/base/key-value-item.tsx index 1ba8e8caf9..a2a3459b5d 100644 --- a/web/app/components/plugins/base/key-value-item.tsx +++ b/web/app/components/plugins/base/key-value-item.tsx @@ -1,16 +1,13 @@ 'use client' import type { FC } from 'react' import { cn } from '@langgenius/dify-ui/cn' -import { - RiClipboardLine, -} from '@remixicon/react' +import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip' import copy from 'copy-to-clipboard' import * as React from 'react' import { useCallback, useEffect, useState } from 'react' import { useTranslation } from 'react-i18next' import ActionButton from '@/app/components/base/action-button' import { CopyCheck } from '../../base/icons/src/vender/line/files' -import Tooltip from '../../base/tooltip' type Props = { label: string @@ -45,7 +42,7 @@ const KeyValueItem: FC = ({ } }, [isCopied]) - const CopyIcon = isCopied ? CopyCheck : RiClipboardLine + const copyLabel = t(`operation.${isCopied ? 'copied' : 'copy'}`, { ns: 'common' }) return (
@@ -54,10 +51,19 @@ const KeyValueItem: FC = ({ {maskedValue || value} - - - - + + + {isCopied + ? + : } + + )} + /> + + {copyLabel} +
diff --git a/web/app/components/plugins/plugin-detail-panel/detail-header/components/__tests__/plugin-source-badge.spec.tsx b/web/app/components/plugins/plugin-detail-panel/detail-header/components/__tests__/plugin-source-badge.spec.tsx index 4d60433efb..08f5f836f4 100644 --- a/web/app/components/plugins/plugin-detail-panel/detail-header/components/__tests__/plugin-source-badge.spec.tsx +++ b/web/app/components/plugins/plugin-detail-panel/detail-header/components/__tests__/plugin-source-badge.spec.tsx @@ -3,14 +3,6 @@ import { beforeEach, describe, expect, it, vi } from 'vitest' import { PluginSource } from '../../../../types' import PluginSourceBadge from '../plugin-source-badge' -vi.mock('@/app/components/base/tooltip', () => ({ - default: ({ children, popupContent }: { children: React.ReactNode, popupContent: string }) => ( -
- {children} -
- ), -})) - describe('PluginSourceBadge', () => { beforeEach(() => { vi.clearAllMocks() @@ -20,33 +12,25 @@ describe('PluginSourceBadge', () => { it('should render marketplace source badge', () => { render() - const tooltip = screen.getByTestId('tooltip') - expect(tooltip).toBeInTheDocument() - expect(tooltip).toHaveAttribute('data-content', 'plugin.detailPanel.categoryTip.marketplace') + expect(screen.getByLabelText('plugin.detailPanel.categoryTip.marketplace')).toBeInTheDocument() }) it('should render github source badge', () => { render() - const tooltip = screen.getByTestId('tooltip') - expect(tooltip).toBeInTheDocument() - expect(tooltip).toHaveAttribute('data-content', 'plugin.detailPanel.categoryTip.github') + expect(screen.getByLabelText('plugin.detailPanel.categoryTip.github')).toBeInTheDocument() }) it('should render local source badge', () => { render() - const tooltip = screen.getByTestId('tooltip') - expect(tooltip).toBeInTheDocument() - expect(tooltip).toHaveAttribute('data-content', 'plugin.detailPanel.categoryTip.local') + expect(screen.getByLabelText('plugin.detailPanel.categoryTip.local')).toBeInTheDocument() }) it('should render debugging source badge', () => { render() - const tooltip = screen.getByTestId('tooltip') - expect(tooltip).toBeInTheDocument() - expect(tooltip).toHaveAttribute('data-content', 'plugin.detailPanel.categoryTip.debugging') + expect(screen.getByLabelText('plugin.detailPanel.categoryTip.debugging')).toBeInTheDocument() }) }) @@ -86,71 +70,47 @@ describe('PluginSourceBadge', () => { it('should show marketplace tooltip', () => { render() - expect(screen.getByTestId('tooltip')).toHaveAttribute( - 'data-content', - 'plugin.detailPanel.categoryTip.marketplace', - ) + expect(screen.getByLabelText('plugin.detailPanel.categoryTip.marketplace')).toBeInTheDocument() }) it('should show github tooltip', () => { render() - expect(screen.getByTestId('tooltip')).toHaveAttribute( - 'data-content', - 'plugin.detailPanel.categoryTip.github', - ) + expect(screen.getByLabelText('plugin.detailPanel.categoryTip.github')).toBeInTheDocument() }) it('should show local tooltip', () => { render() - expect(screen.getByTestId('tooltip')).toHaveAttribute( - 'data-content', - 'plugin.detailPanel.categoryTip.local', - ) + expect(screen.getByLabelText('plugin.detailPanel.categoryTip.local')).toBeInTheDocument() }) it('should show debugging tooltip', () => { render() - expect(screen.getByTestId('tooltip')).toHaveAttribute( - 'data-content', - 'plugin.detailPanel.categoryTip.debugging', - ) + expect(screen.getByLabelText('plugin.detailPanel.categoryTip.debugging')).toBeInTheDocument() }) }) describe('Icon Element Structure', () => { it('should render icon inside tooltip for marketplace', () => { - render() - - const tooltip = screen.getByTestId('tooltip') - const iconWrapper = tooltip.querySelector('div') - expect(iconWrapper).toBeInTheDocument() + const { container } = render() + expect(container.querySelector('[aria-label="plugin.detailPanel.categoryTip.marketplace"]')).toBeInTheDocument() }) it('should render icon inside tooltip for github', () => { - render() - - const tooltip = screen.getByTestId('tooltip') - const iconWrapper = tooltip.querySelector('div') - expect(iconWrapper).toBeInTheDocument() + const { container } = render() + expect(container.querySelector('[aria-label="plugin.detailPanel.categoryTip.github"]')).toBeInTheDocument() }) it('should render icon inside tooltip for local', () => { - render() - - const tooltip = screen.getByTestId('tooltip') - const iconWrapper = tooltip.querySelector('div') - expect(iconWrapper).toBeInTheDocument() + const { container } = render() + expect(container.querySelector('[aria-label="plugin.detailPanel.categoryTip.local"]')).toBeInTheDocument() }) it('should render icon inside tooltip for debugging', () => { - render() - - const tooltip = screen.getByTestId('tooltip') - const iconWrapper = tooltip.querySelector('div') - expect(iconWrapper).toBeInTheDocument() + const { container } = render() + expect(container.querySelector('[aria-label="plugin.detailPanel.categoryTip.debugging"]')).toBeInTheDocument() }) }) @@ -188,7 +148,7 @@ describe('PluginSourceBadge', () => { const invalidSource = '' as PluginSource render() - expect(screen.queryByTestId('tooltip')).not.toBeInTheDocument() + expect(screen.queryByLabelText(/^plugin\.detailPanel\.categoryTip\./)).not.toBeInTheDocument() }) }) }) diff --git a/web/app/components/plugins/plugin-detail-panel/detail-header/components/plugin-source-badge.tsx b/web/app/components/plugins/plugin-detail-panel/detail-header/components/plugin-source-badge.tsx index ba15815cde..9b6725da14 100644 --- a/web/app/components/plugins/plugin-detail-panel/detail-header/components/plugin-source-badge.tsx +++ b/web/app/components/plugins/plugin-detail-panel/detail-header/components/plugin-source-badge.tsx @@ -1,14 +1,10 @@ 'use client' import type { FC, ReactNode } from 'react' -import { - RiBugLine, - RiHardDrive3Line, -} from '@remixicon/react' +import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip' import { useTranslation } from 'react-i18next' import { Github } from '@/app/components/base/icons/src/public/common' import { BoxSparkleFill } from '@/app/components/base/icons/src/vender/plugin' -import Tooltip from '@/app/components/base/tooltip' import { PluginSource } from '../../../types' type SourceConfig = { @@ -30,11 +26,11 @@ const SOURCE_CONFIG_MAP: Record = { tipKey: 'detailPanel.categoryTip.github', }, [PluginSource.local]: { - icon: , + icon: , tipKey: 'detailPanel.categoryTip.local', }, [PluginSource.debugging]: { - icon: , + icon: , tipKey: 'detailPanel.categoryTip.debugging', }, } @@ -45,12 +41,22 @@ const PluginSourceBadge: FC = ({ source }) => { const config = SOURCE_CONFIG_MAP[source] if (!config) return null + const tip = t(config.tipKey as never, { ns: 'plugin' }) return ( <>
·
- -
{config.icon}
+ + + {config.icon} + + )} + /> + + {tip} + ) diff --git a/web/app/components/plugins/plugin-detail-panel/endpoint-card.tsx b/web/app/components/plugins/plugin-detail-panel/endpoint-card.tsx index e1adc6282d..9aa944c4b3 100644 --- a/web/app/components/plugins/plugin-detail-panel/endpoint-card.tsx +++ b/web/app/components/plugins/plugin-detail-panel/endpoint-card.tsx @@ -1,3 +1,4 @@ +import type { ComponentProps } from 'react' import type { EndpointListItem, PluginDetail } from '../types' import { AlertDialog, @@ -9,7 +10,7 @@ import { } from '@langgenius/dify-ui/alert-dialog' import { Switch } from '@langgenius/dify-ui/switch' import { toast } from '@langgenius/dify-ui/toast' -import { RiClipboardLine, RiDeleteBinLine, RiEditLine, RiLoginCircleLine } from '@remixicon/react' +import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip' import { useBoolean } from 'ahooks' import copy from 'copy-to-clipboard' import * as React from 'react' @@ -17,7 +18,6 @@ import { useEffect, useMemo, useState } from 'react' import { useTranslation } from 'react-i18next' import ActionButton from '@/app/components/base/action-button' import { CopyCheck } from '@/app/components/base/icons/src/vender/line/files' -import Tooltip from '@/app/components/base/tooltip' import Indicator from '@/app/components/header/indicator' import { addDefaultValue, toolCredentialToFormSchemas } from '@/app/components/tools/utils/to-form-schema' import { @@ -29,6 +29,8 @@ import { import EndpointModal from './endpoint-modal' import { NAME_FIELD } from './utils' +type EndpointModalFormSchemas = ComponentProps['formSchemas'] + type Props = { pluginDetail: PluginDetail data: EndpointListItem @@ -118,7 +120,7 @@ const EndpointCard = ({ toast.error(t('actionMsg.modifiedUnsuccessfully', { ns: 'common' })) }, }) - const handleUpdate = (state: Record) => updateEndpoint({ + const handleUpdate = (state: Record) => updateEndpoint({ endpointID, state, }) @@ -148,22 +150,22 @@ const EndpointCard = ({ } }, [isCopied]) - const CopyIcon = isCopied ? CopyCheck : RiClipboardLine + const copyLabel = t(`operation.${isCopied ? 'copied' : 'copy'}`, { ns: 'common' }) return (
- +
{data.name}
- + - +
@@ -172,10 +174,23 @@ const EndpointCard = ({
{endpoint.method}
{`${data.url}${endpoint.path}`}
- - handleCopy(`${data.url}${endpoint.path}`)}> - - + + handleCopy(`${data.url}${endpoint.path}`)} + > + {isCopied + ? + : } + + )} + /> + + {copyLabel} +
@@ -244,7 +259,7 @@ const EndpointCard = ({ {isShowEndpointModal && ( ({ ), })) -vi.mock('@/app/components/base/tooltip', () => ({ - default: ({ children, popupContent }: { children: React.ReactNode, popupContent: string }) => ( -
{children}
- ), -})) - vi.mock('@/app/components/header/plugins-nav/downloading-icon', () => ({ default: () => , })) @@ -38,18 +32,17 @@ describe('TaskStatusIndicator', () => { describe('Rendering', () => { it('should render without crashing', () => { render() - expect(screen.getByTestId('tooltip')).toBeInTheDocument() + expect(screen.getByRole('button', { name: 'Installing plugins' })).toBeInTheDocument() }) - it('should pass tip to tooltip', () => { + it('should use tip as the trigger accessible name', () => { render() - expect(screen.getByTestId('tooltip')).toHaveAttribute('data-tip', 'My tip') + expect(screen.getByRole('button', { name: 'My tip' })).toBeInTheDocument() }) it('should render install icon by default', () => { const { container } = render() - // RiInstallLine renders as svg - expect(container.querySelector('svg')).toBeInTheDocument() + expect(container.querySelector('.i-ri-install-line')).toBeInTheDocument() expect(screen.queryByTestId('downloading-icon')).not.toBeInTheDocument() }) }) @@ -127,7 +120,6 @@ describe('TaskStatusIndicator', () => { totalPluginsLength={3} />, ) - // RiCheckboxCircleFill is rendered as svg with text-text-success const successIcon = container.querySelector('.text-text-success') expect(successIcon).toBeInTheDocument() }) diff --git a/web/app/components/plugins/plugin-page/plugin-tasks/components/task-status-indicator.tsx b/web/app/components/plugins/plugin-page/plugin-tasks/components/task-status-indicator.tsx index d1de645f7b..691ee40f4d 100644 --- a/web/app/components/plugins/plugin-page/plugin-tasks/components/task-status-indicator.tsx +++ b/web/app/components/plugins/plugin-page/plugin-tasks/components/task-status-indicator.tsx @@ -1,12 +1,8 @@ import type { FC } from 'react' +import { Button } from '@langgenius/dify-ui/button' import { cn } from '@langgenius/dify-ui/cn' -import { - RiCheckboxCircleFill, - RiErrorWarningFill, - RiInstallLine, -} from '@remixicon/react' +import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip' import ProgressCircle from '@/app/components/base/progress-bar/progress-circle' -import Tooltip from '@/app/components/base/tooltip' import DownloadingIcon from '@/app/components/header/plugins-nav/downloading-icon' type TaskStatusIndicatorProps = { @@ -39,56 +35,61 @@ const TaskStatusIndicator: FC = ({ const showSuccessIcon = isSuccess || (successPluginsLength > 0 && runningPluginsLength === 0) return ( - -
- {/* Main Icon */} - {showDownloadingIcon - ? - : ( - + + + {showDownloadingIcon + ? + : ( + + )} - {/* Status Indicator Badge */} -
- {(isInstalling || isInstallingWithSuccess) && ( - 0 ? successPluginsLength / totalPluginsLength : 0) * 100} - circleFillColor="fill-components-progress-brand-bg" - /> - )} - {isInstallingWithError && ( - 0 ? runningPluginsLength / totalPluginsLength : 0) * 100} - circleFillColor="fill-components-progress-brand-bg" - sectorFillColor="fill-components-progress-error-border" - circleStrokeColor="stroke-components-progress-error-border" - /> - )} - {showSuccessIcon && !isInstalling && !isInstallingWithSuccess && !isInstallingWithError && ( - - )} - {isFailed && ( - - )} -
-
+
+ {(isInstalling || isInstallingWithSuccess) && ( + 0 ? successPluginsLength / totalPluginsLength : 0) * 100} + circleFillColor="fill-components-progress-brand-bg" + /> + )} + {isInstallingWithError && ( + 0 ? runningPluginsLength / totalPluginsLength : 0) * 100} + circleFillColor="fill-components-progress-brand-bg" + sectorFillColor="fill-components-progress-error-border" + circleStrokeColor="stroke-components-progress-error-border" + /> + )} + {showSuccessIcon && !isInstalling && !isInstallingWithSuccess && !isInstallingWithError && ( + + )} + {isFailed && ( + + )} +
+ + )} + /> + {tip} ) } diff --git a/web/app/components/tools/mcp/detail/__tests__/content.spec.tsx b/web/app/components/tools/mcp/detail/__tests__/content.spec.tsx index 5216e9eede..f7bf8181ed 100644 --- a/web/app/components/tools/mcp/detail/__tests__/content.spec.tsx +++ b/web/app/components/tools/mcp/detail/__tests__/content.spec.tsx @@ -698,16 +698,9 @@ describe('MCPDetailContent', () => { const onHide = vi.fn() render(, { wrapper: createWrapper() }) - // Find the close button (ActionButton with RiCloseLine) - const buttons = screen.getAllByRole('button') - const closeButton = buttons.find(btn => - btn.querySelector('svg.h-4.w-4'), - ) + fireEvent.click(screen.getByRole('button', { name: 'common.operation.close' })) - if (closeButton) { - fireEvent.click(closeButton) - expect(onHide).toHaveBeenCalled() - } + expect(onHide).toHaveBeenCalled() }) }) diff --git a/web/app/components/tools/mcp/detail/content.tsx b/web/app/components/tools/mcp/detail/content.tsx index 48ea75723c..35c8a35a6f 100644 --- a/web/app/components/tools/mcp/detail/content.tsx +++ b/web/app/components/tools/mcp/detail/content.tsx @@ -1,5 +1,5 @@ 'use client' -import type { FC } from 'react' +import type { ComponentProps, FC } from 'react' import type { ToolWithProvider } from '../../../workflow/types' import { AlertDialog, @@ -12,18 +12,13 @@ import { } from '@langgenius/dify-ui/alert-dialog' import { Button } from '@langgenius/dify-ui/button' import { cn } from '@langgenius/dify-ui/cn' -import { - RiCloseLine, - RiLoader2Line, - RiLoopLeftLine, -} from '@remixicon/react' +import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip' import { useBoolean } from 'ahooks' import copy from 'copy-to-clipboard' import * as React from 'react' import { useCallback, useEffect } from 'react' import { useTranslation } from 'react-i18next' import ActionButton from '@/app/components/base/action-button' -import Tooltip from '@/app/components/base/tooltip' import Indicator from '@/app/components/header/indicator' import Icon from '@/app/components/plugins/card/base/card-icon' import { useAppContext } from '@/context/app-context' @@ -49,6 +44,11 @@ type Props = { onFirstCreate: () => void } +type MCPModalConfirmPayload = Parameters['onConfirm']>[0] +type MutationResult = { + result?: string +} + const MCPDetailContent: FC = ({ detail, onUpdate, @@ -128,14 +128,14 @@ const MCPDetailContent: FC = ({ } }, [onFirstCreate, isCurrentWorkspaceManager, detail, authorizeMcp, handleUpdateTools, handleOAuthCallback, onUpdate]) - const handleUpdate = useCallback(async (data: any) => { + const handleUpdate = useCallback(async (data: MCPModalConfirmPayload) => { if (!detail) return const res = await updateMCP({ ...data, provider_id: detail.id, - }) - if ((res as any)?.result === 'success') { + }) as MutationResult + if (res.result === 'success') { hideUpdateModal() onUpdate() handleAuthorize() @@ -146,9 +146,9 @@ const MCPDetailContent: FC = ({ if (!detail) return showDeleting() - const res = await deleteMCP(detail.id) + const res = await deleteMCP(detail.id) as MutationResult hideDeleting() - if ((res as any)?.result === 'success') { + if (res.result === 'success') { hideDeleteConfirm() onUpdate(true) } @@ -161,6 +161,8 @@ const MCPDetailContent: FC = ({ if (!detail) return null + const identifierLabel = t('mcp.identifier', { ns: 'tools' }) + const serverUrlLabel = t('mcp.modal.serverUrl', { ns: 'tools' }) return ( <> @@ -174,12 +176,37 @@ const MCPDetailContent: FC = ({
{detail.name}
- -
copy(detail.server_identifier || '')}>{detail.server_identifier}
+ + copy(detail.server_identifier || '')} + > + {detail.server_identifier} + + )} + /> + + {identifierLabel} +
·
- -
{detail.server_url}
+ + + {detail.server_url} +
+ )} + /> + + {serverUrlLabel} + @@ -188,8 +215,8 @@ const MCPDetailContent: FC = ({ onEdit={showUpdateModal} onRemove={showDeleteConfirm} /> - - + + @@ -221,7 +248,7 @@ const MCPDetailContent: FC = ({ className="w-full" disabled > - + {t('mcp.authorizing', { ns: 'tools' })} )} @@ -262,7 +289,7 @@ const MCPDetailContent: FC = ({