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

fix: add the outlined button of notification (#37741)

Browse Source
This commit is contained in:
非法操作 2026-06-22 17:30:07 +08:00 committed by GitHub
parent 7cca8b6bb0
commit 0d7ca17cd1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 16 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
web/app/components/app/in-site-message/__tests__/index.spec.tsx
View File

@ -42,12 +42,14 @@ describe('InSiteMessage', () => {
it('should render title, subtitle, markdown content, and action buttons', () => {
const actions: InSiteMessageActionItem[] = [
{ action: 'close', action_name: 'dismiss', text: 'Close', type: 'default' },
{ action: 'close', action_name: 'outline', text: 'Outline', type: 'outline' },
{ action: 'link', action_name: 'learn_more', text: 'Learn more', type: 'primary', data: 'https://example.com' },
]
renderComponent(actions, { className: 'custom-message' })
const closeButton = screen.getByRole('button', { name: 'Close' })
const outlineButton = screen.getByRole('button', { name: 'Outline' })
const learnMoreButton = screen.getByRole('button', { name: 'Learn more' })
const panel = closeButton.closest('div.fixed')
const titleElement = panel?.querySelector('.title-3xl-bold')
@ -59,6 +61,7 @@ describe('InSiteMessage', () => {
expect(subtitleElement?.textContent).not.toContain('\\n')
expect(screen.getByText('Main content')).toBeInTheDocument()
expect(closeButton).toBeInTheDocument()
expect(outlineButton).toHaveClass('bg-components-button-secondary-bg')
expect(learnMoreButton).toBeInTheDocument()
})

2
web/app/components/app/in-site-message/__tests__/notification.spec.tsx
View File

@ -116,6 +116,7 @@ describe('InSiteMessageNotification', () => {
main: 'Parsed body main',
actions: [
{ action: 'link', data: 'https://example.com/docs', text: 'Visit docs', type: 'primary' },
{ action: 'close', text: 'Outline close', type: 'outline' },
{ action: 'close', text: 'Dismiss now', type: 'default' },
{ action: 'link', data: 'https://example.com/invalid', text: 100, type: 'primary' },
],
@ -132,6 +133,7 @@ describe('InSiteMessageNotification', () => {
expect(screen.getByText('Parsed body main')).toBeInTheDocument()
})
expect(screen.getByRole('button', { name: 'Visit docs' })).toBeInTheDocument()
expect(screen.getByRole('button', { name: 'Outline close' })).toBeInTheDocument()
expect(screen.getByRole('button', { name: 'Dismiss now' })).toBeInTheDocument()
expect(screen.queryByRole('button', { name: 'Invalid' })).not.toBeInTheDocument()

12
web/app/components/app/in-site-message/index.tsx
View File

@ -7,7 +7,7 @@ import { trackEvent } from '@/app/components/base/amplitude'
import { MarkdownWithDirective } from '@/app/components/base/markdown-with-directive'
type InSiteMessageAction = 'link' | 'close'
type InSiteMessageButtonType = 'primary' | 'default'
type InSiteMessageButtonType = 'primary' | 'default' | 'outline'
export type InSiteMessageActionItem = {
action: InSiteMessageAction
@ -54,6 +54,14 @@ function normalizeLinkData(data: unknown): { href: string, rel?: string, target?
const DEFAULT_HEADER_BG_URL = '/in-site-message/header-bg.svg'
function resolveButtonVariant(type: InSiteMessageButtonType) {
if (type === 'primary')
return 'primary'
if (type === 'outline')
return 'secondary'
return 'ghost'
}
function InSiteMessage({
notificationId,
actions,
@ -132,7 +140,7 @@ function InSiteMessage({
{actions.map(item => (
<Button
key={`${item.type}-${item.action}-${item.text}`}
variant={item.type === 'primary' ? 'primary' : 'ghost'}
variant={resolveButtonVariant(item.type)}
size="medium"
className={cn(item.type === 'default' && 'text-text-secondary')}
onClick={() => handleAction(item)}

2
web/app/components/app/in-site-message/notification.tsx
View File

@ -25,7 +25,7 @@ function isValidActionItem(value: unknown): value is InSiteMessageActionItem {
return (
typeof candidate.text === 'string'
&& (candidate.type === 'primary' || candidate.type === 'default')
&& (candidate.type === 'primary' || candidate.type === 'default' || candidate.type === 'outline')
&& (candidate.action === 'link' || candidate.action === 'close')
&& (candidate.data === undefined || typeof candidate.data !== 'function')
)