fix: install failed plugin dose not show icon (#36811)

web/app/components/plugins/plugin-page/plugin-tasks/components/__tests__/plugin-item.spec.tsx

@@ -3,6 +3,12 @@ import { fireEvent, render, screen } from '@testing-library/react'
 import { PluginSource, TaskStatus } from '@/app/components/plugins/types'
 import PluginItem from '../plugin-item'
 
+vi.mock('@/app/components/base/icons/src/vender/solid/mediaAndDevices', () => ({
+  MagicBox: ({ className }: { className?: string }) => (
+    <svg data-testid="magic-box-icon" className={className} />
+  ),
+}))
+
 vi.mock('@/app/components/plugins/card/base/card-icon', () => ({
   default: ({ src, size }: { src: string, size: string }) => (
     <div data-testid="card-icon" data-src={src} data-size={size} />
@@ -108,6 +114,22 @@ describe('PluginItem', () => {
       expect(cardIcon).toHaveAttribute('data-src', 'https://example.com/icons/my-icon.svg')
       expect(cardIcon).toHaveAttribute('data-size', 'small')
     })
+
+    it('should show default tool icon when plugin icon is empty', () => {
+      const { container } = render(
+        <PluginItem
+          plugin={createPlugin({ icon: '' })}
+          getIconUrl={mockGetIconUrl}
+          language="en_US"
+          statusIcon={<span />}
+          statusText="status"
+        />,
+      )
+
+      expect(mockGetIconUrl).not.toHaveBeenCalled()
+      expect(screen.queryByTestId('card-icon')).not.toBeInTheDocument()
+      expect(container.querySelector('[data-testid="magic-box-icon"]')).toHaveClass('size-8', 'text-text-tertiary')
+    })
   })
 
   describe('Props', () => {

web/app/components/plugins/plugin-page/plugin-tasks/components/plugin-item.tsx

@@ -1,6 +1,8 @@
 import type { FC, ReactNode } from 'react'
 import type { PluginStatus } from '@/app/components/plugins/types'
 import type { Locale } from '@/i18n-config'
+import { cn } from '@langgenius/dify-ui/cn'
+import { MagicBox } from '@/app/components/base/icons/src/vender/solid/mediaAndDevices'
 import CardIcon from '@/app/components/plugins/card/base/card-icon'
 
 type PluginItemProps = {
@@ -24,14 +26,25 @@ const PluginItem: FC<PluginItemProps> = ({
   action,
   onClear,
 }) => {
+  const hasPluginIcon = !!plugin.icon
+
   return (
     <div className="group/item flex gap-1 rounded-lg p-2 hover:bg-state-base-hover">
       <div className="relative shrink-0 self-start">
-        <CardIcon
-          size="small"
-          src={getIconUrl(plugin.icon)}
-        />
-        <div className="absolute -right-0.5 -bottom-0.5 z-10">
+        {hasPluginIcon
+          ? (
+              <CardIcon
+                size="small"
+                src={getIconUrl(plugin.icon)}
+              />
+            )
+          // eslint-disable-next-line hyoban/prefer-tailwind-icons -- Reuse the same MagicBox component as the marketplace install button.
+          : <MagicBox className="size-8 text-text-tertiary" />}
+        <div className={cn(
+          'absolute z-10',
+          hasPluginIcon ? '-right-0.5 -bottom-0.5' : '-right-1 -bottom-1',
+        )}
+        >
           {statusIcon}
         </div>
       </div>