opensource/dify
2
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-06-14 04:31:07 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: render marketplace template icons with AppIcon (#37401)

Browse Source
This commit is contained in:
Jingyi 2026-06-12 19:50:53 -07:00 committed by GitHub
parent 8cac86d5c5
commit 09b6f25fb9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 54 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
web/app/components/apps/__tests__/import-from-marketplace-template-modal.spec.tsx Normal file
View File

@ -0,0 +1,46 @@
import { render, screen } from '@testing-library/react'
import ImportFromMarketplaceTemplateModal from '../import-from-marketplace-template-modal'
const mockUseMarketplaceTemplateDetail = vi.fn()
const mockFetchMarketplaceTemplateDSL = vi.fn()
vi.mock('@/service/marketplace-templates', () => ({
useMarketplaceTemplateDetail: (...args: unknown[]) => mockUseMarketplaceTemplateDetail(...args),
fetchMarketplaceTemplateDSL: (...args: unknown[]) => mockFetchMarketplaceTemplateDSL(...args),
}))
describe('ImportFromMarketplaceTemplateModal', () => {
beforeEach(() => {
vi.clearAllMocks()
mockUseMarketplaceTemplateDetail.mockReturnValue({
data: {
data: {
id: 'human-input-writing',
template_name: 'Human Input: Writing Assistant',
overview: 'Send your creative brief, get a high-quality draft, and review before publishing.',
icon: 'technologist',
icon_background: '#D1FAE5',
icon_file_key: '',
publisher_unique_handle: 'langgenius',
usage_count: 261,
categories: ['operations'],
},
},
isLoading: false,
isError: false,
})
})
it('renders marketplace emoji icons without exposing the emoji id as text', () => {
render(
<ImportFromMarketplaceTemplateModal
templateId="human-input-writing"
onClose={vi.fn()}
onConfirm={vi.fn()}
/>,
)
expect(screen.getByText('Human Input: Writing Assistant')).toBeInTheDocument()
expect(screen.queryByText('technologist')).not.toBeInTheDocument()
})
})

24
web/app/components/apps/import-from-marketplace-template-modal.tsx
View File

@ -6,6 +6,7 @@ import { toast } from '@langgenius/dify-ui/toast'
import { RiCloseLine } from '@remixicon/react'
import { useCallback, useMemo, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'
import AppIcon from '@/app/components/base/app-icon'
import { MARKETPLACE_API_PREFIX } from '@/config'
import {
fetchMarketplaceTemplateDSL,
@ -100,22 +101,13 @@ const ImportFromMarketplaceTemplateModal = ({
{template && (
<div className="flex flex-col gap-4">
<div className="flex items-center gap-3">
{template.icon_file_key
? (
<img
src={`${MARKETPLACE_API_PREFIX}/templates/${template.id}/icon`}
alt={template.template_name}
className="size-10 rounded-lg object-cover"
/>
)
: (
<div
className="flex size-10 items-center justify-center rounded-lg text-xl"
style={{ background: template.icon_background || '#F3F4F6' }}
>
{template.icon || '📄'}
</div>
)}
<AppIcon
size="large"
iconType={template.icon_file_key ? 'image' : 'emoji'}
icon={template.icon || 'page_facing_up'}
background={template.icon_file_key ? undefined : template.icon_background}
imageUrl={template.icon_file_key ? `${MARKETPLACE_API_PREFIX}/templates/${template.id}/icon` : undefined}
/>
<div className="flex flex-col">
<div className="system-md-semibold text-text-primary">{template.template_name}</div>
<div className="flex items-center gap-1 system-xs-regular text-text-tertiary">