@@ -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 && (
+
+ )}
+ {detail.name}