opensource
/
dify
mirror of https://github.com/langgenius/dify.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: creating button style

This commit is contained in:
yessenia 2025-10-13 17:45:03 +08:00
parent e6a6bde8e2
commit d65d27a6bb
11 changed files with 42 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
web/app/components/plugins/plugin-detail-panel/index.tsx
View File

@ -37,6 +37,7 @@ const PluginDetailPanel: FC<Props> = ({
plugin_id: detail.plugin_id,
provider: `${detail.plugin_id}/${detail.declaration.name}`,
declaration: detail.declaration,
name: detail.name,
})
}, [detail])

4
web/app/components/plugins/plugin-detail-panel/subscription-list/create/common-modal.tsx
View File

@ -364,7 +364,7 @@ export const CommonCreateModal = ({ onClose, createType, builder }: Props) => {
<div className='mb-6'>
<div className='mb-3 flex items-center gap-2'>
<div className='system-xs-medium-uppercase text-text-tertiary'>
REQUESTS HISTORY
{t('pluginTrigger.modal.manual.logs.title')}
</div>
<div className='h-px flex-1 bg-gradient-to-r from-divider-regular to-transparent' />
</div>
@ -374,7 +374,7 @@ export const CommonCreateModal = ({ onClose, createType, builder }: Props) => {
<RiLoader2Line className='h-full w-full animate-spin' />
</div>
<div className='system-xs-regular text-text-tertiary'>
Awaiting request from {detail?.plugin_id}...
{t('pluginTrigger.modal.manual.logs.loading', { pluginName: detail?.name || '' })}
</div>
</div>
<LogViewer logs={logData?.logs || []} />

18
web/app/components/plugins/plugin-detail-panel/subscription-list/create/index.tsx
View File

@ -26,11 +26,12 @@ export enum CreateButtonType {
type Props = {
className?: string
buttonType?: CreateButtonType
shape?: 'square' | 'circle'
}
export const DEFAULT_METHOD = 'default'
export const CreateSubscriptionButton = ({ buttonType = CreateButtonType.FULL_BUTTON }: Props) => {
export const CreateSubscriptionButton = ({ buttonType = CreateButtonType.FULL_BUTTON, shape = 'square' }: Props) => {
const { t } = useTranslation()
const [selectedCreateInfo, setSelectedCreateInfo] = useState<{ type: SupportedCreationMethods, builder?: TriggerSubscriptionBuilder } | null>(null)
@ -38,7 +39,7 @@ export const CreateSubscriptionButton = ({ buttonType = CreateButtonType.FULL_BU
const { data: providerInfo } = useTriggerProviderInfo(detail?.provider || '')
const supportedMethods = providerInfo?.supported_creation_methods || []
const { data: oauthConfig } = useTriggerOAuthConfig(detail?.provider || '', supportedMethods.includes(SupportedCreationMethods.OAUTH))
const { data: oauthConfig, refetch: refetchOAuthConfig } = useTriggerOAuthConfig(detail?.provider || '', supportedMethods.includes(SupportedCreationMethods.OAUTH))
const { mutate: initiateOAuth } = useInitiateTriggerOAuth()
const methodType = supportedMethods.length === 1 ? supportedMethods[0] : DEFAULT_METHOD
@ -173,7 +174,13 @@ export const CreateSubscriptionButton = ({ buttonType = CreateButtonType.FULL_BU
}
</Button>
) : (
<ActionButton onClick={onClickCreate} className='float-right'>
<ActionButton
onClick={onClickCreate}
className={cn(
'float-right',
shape === 'circle' && '!rounded-full border-[0.5px] border-components-button-secondary-border-hover bg-components-button-secondary-bg-hover text-components-button-secondary-accent-text shadow-xs',
)}
>
<RiAddLine className='size-4' />
</ActionButton>
)
@ -198,7 +205,10 @@ export const CreateSubscriptionButton = ({ buttonType = CreateButtonType.FULL_BU
{isShowClientSettingsModal && (
<OAuthClientSettingsModal
oauthConfig={oauthConfig}
onClose={hideClientSettingsModal}
onClose={() => {
hideClientSettingsModal()
refetchOAuthConfig()
}}
showOAuthCreateModal={builder => setSelectedCreateInfo({ type: SupportedCreationMethods.OAUTH, builder })}
/>
)}

10
web/app/components/plugins/plugin-detail-panel/subscription-list/index.tsx
View File

@ -1,4 +1,5 @@
import { withErrorBoundary } from '@/app/components/base/error-boundary'
import Loading from '@/app/components/base/loading'
import { SubscriptionListView } from './list-view'
import { SubscriptionSelectorView } from './selector-view'
import { useSubscriptionList } from './use-subscription-list'
@ -22,12 +23,18 @@ export const SubscriptionList = withErrorBoundary(({
onSelect,
}: SubscriptionListProps) => {
const { subscriptions, isLoading } = useSubscriptionList()
if (isLoading) {
return (
<div className='flex items-center justify-center py-4'>
<Loading />
</div>
)
}
if (mode === SubscriptionListMode.SELECTOR) {
return (
<SubscriptionSelectorView
subscriptions={subscriptions}
isLoading={isLoading}
selectedId={selectedId}
onSelect={onSelect}
/>
@ -37,7 +44,6 @@ export const SubscriptionList = withErrorBoundary(({
return (
<SubscriptionListView
subscriptions={subscriptions}
isLoading={isLoading}
/>
)
})

4
web/app/components/plugins/plugin-detail-panel/subscription-list/list-view.tsx
View File

@ -9,19 +9,15 @@ import SubscriptionCard from './subscription-card'
type SubscriptionListViewProps = {
subscriptions?: TriggerSubscription[]
isLoading: boolean
showTopBorder?: boolean
}
export const SubscriptionListView: React.FC<SubscriptionListViewProps> = ({
subscriptions,
isLoading,
showTopBorder = false,
}) => {
const { t } = useTranslation()
if (isLoading) return null
const subscriptionCount = subscriptions?.length || 0
return (

6
web/app/components/plugins/plugin-detail-panel/subscription-list/log-viewer.tsx
View File

@ -21,8 +21,8 @@ type Props = {
}
enum LogTypeEnum {
REQUEST = 'REQUEST',
RESPONSE = 'RESPONSE',
REQUEST = 'request',
RESPONSE = 'response',
}
const LogViewer = ({ logs, className }: Props) => {
@ -159,7 +159,7 @@ const LogViewer = ({ logs, className }: Props) => {
<RiArrowRightSLine className='h-4 w-4 text-text-tertiary' />
)}
<div className='system-xs-semibold-uppercase text-text-secondary'>
REQUEST #{index + 1}
{t(`pluginTrigger.modal.manual.logs.${LogTypeEnum.REQUEST}`)} #{index + 1}
</div>
</div>

8
web/app/components/plugins/plugin-detail-panel/subscription-list/selector-entry.tsx
View File

@ -4,10 +4,9 @@ import {
PortalToFollowElemContent,
PortalToFollowElemTrigger,
} from '@/app/components/base/portal-to-follow-elem'
import Indicator from '@/app/components/header/indicator'
import { SubscriptionList, SubscriptionListMode } from '@/app/components/plugins/plugin-detail-panel/subscription-list'
import cn from '@/utils/classnames'
import { RiArrowDownSLine } from '@remixicon/react'
import { RiArrowDownSLine, RiWebhookLine } from '@remixicon/react'
import { useMemo, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { useSubscriptionList } from './use-subscription-list'
@ -58,10 +57,7 @@ const SubscriptionTriggerButton: React.FC<SubscriptionTriggerButtonProps> = ({
)}
onClick={onClick}
>
<Indicator
className='shrink-0'
color={statusConfig.color}
/>
<RiWebhookLine className='h-3.5 w-3.5 shrink-0 text-text-secondary' />
<span className={cn('system-xs-medium truncate text-components-button-ghost-text', statusConfig.color === 'red' && 'text-components-button-destructive-secondary-text')}>
{statusConfig.label}
</span>

14
web/app/components/plugins/plugin-detail-panel/subscription-list/selector-view.tsx
View File

@ -11,14 +11,12 @@ import { DeleteConfirm } from './delete-confirm'
type SubscriptionSelectorProps = {
subscriptions?: TriggerSubscription[]
isLoading: boolean
selectedId?: string
onSelect?: ({ id, name }: { id: string, name: string }) => void
}
export const SubscriptionSelectorView: React.FC<SubscriptionSelectorProps> = ({
subscriptions,
isLoading,
selectedId,
onSelect,
}) => {
@ -26,17 +24,9 @@ export const SubscriptionSelectorView: React.FC<SubscriptionSelectorProps> = ({
const [deletedSubscription, setDeletedSubscription] = useState<TriggerSubscription | null>(null)
const subscriptionCount = subscriptions?.length || 0
if (isLoading) {
return (
<div className='flex items-center justify-center py-8'>
<div className='text-text-tertiary'>{t('common.dataLoading')}</div>
</div>
)
}
return (
<div className='w-[320px] p-1'>
{subscriptionCount > 0 && <div className='ml-7 mr-1.5 mt-0.5 flex items-center justify-between'>
{subscriptionCount > 0 && <div className='ml-7 mr-1.5 flex h-8 items-center justify-between'>
<div className='flex shrink-0 items-center gap-1'>
<span className='system-sm-semibold-uppercase text-text-secondary'>
{t('pluginTrigger.subscription.listNum', { num: subscriptionCount })}
@ -45,6 +35,7 @@ export const SubscriptionSelectorView: React.FC<SubscriptionSelectorProps> = ({
</div>
<CreateSubscriptionButton
buttonType={CreateButtonType.ICON_BUTTON}
shape='circle'
/>
</div>}
<div className='max-h-[320px] overflow-y-auto'>
@ -100,6 +91,7 @@ export const SubscriptionSelectorView: React.FC<SubscriptionSelectorProps> = ({
isShow={!!deletedSubscription}
currentId={deletedSubscription.id}
currentName={deletedSubscription.name}
workflowsInUse={deletedSubscription.workflows_in_use}
/>
)}
</div>

2
web/app/components/plugins/plugin-detail-panel/subscription-list/store.ts
View File

@ -1,7 +1,7 @@
import { create } from 'zustand'
import type { PluginDetail } from '../../types'
type SimpleDetail = Pick<PluginDetail, 'plugin_id' | 'declaration'> & { provider: string }
type SimpleDetail = Pick<PluginDetail, 'plugin_id' | 'declaration' | 'name'> & { provider: string }
type Shape = {
detail: SimpleDetail | undefined

20
web/i18n/en-US/plugin-trigger.ts
View File

@ -128,20 +128,8 @@ const translation = {
},
logs: {
title: 'Request Logs',
description: 'Monitor incoming webhook requests',
empty: 'No requests received yet. Make sure to test your webhook configuration.',
status: {
success: 'Success',
error: 'Error',
},
expandAll: 'Expand All',
collapseAll: 'Collapse All',
timestamp: 'Timestamp',
method: 'Method',
path: 'Path',
headers: 'Headers',
body: 'Body',
response: 'Response',
request: 'Request',
loading: 'Awaiting request from {{pluginName}}...',
},
},
form: {
@ -154,9 +142,7 @@ const translation = {
label: 'Callback URL',
description: 'This URL will receive webhook events',
tooltip: 'Provide a publicly accessible endpoint that can receive callback requests from the trigger provider.',
placeholder: 'https://example.com/webhooks/github',
copy: 'Copy',
copied: 'Copied!',
placeholder: 'Generating...',
},
},
errors: {

24
web/i18n/zh-Hans/plugin-trigger.ts
View File

@ -128,20 +128,8 @@ const translation = {
},
logs: {
title: '请求日志',
description: '监控传入的Webhook请求',
empty: '尚未收到任何请求。请确保测试您的Webhook配置。',
status: {
success: '成功',
error: '错误',
},
expandAll: '展开全部',
collapseAll: '收起全部',
timestamp: '时间戳',
method: '方法',
path: '路径',
headers: '请求头',
body: '请求体',
response: '响应',
request: '请求',
loading: '等待 {{pluginName}} 的请求...',
},
},
form: {
@ -151,12 +139,10 @@ const translation = {
required: '订阅名称为必填项',
},
callbackUrl: {
label: '回调URL',
description: '此URL将接收Webhook事件',
label: '回调 URL',
description: '此 URL 将接收Webhook事件',
tooltip: '填写能被触发器提供方访问的公网地址，用于接收回调请求。',
placeholder: 'https://example.com/webhooks/github',
copy: '复制',
copied: '已复制！',
placeholder: '生成中...',
},
},
errors: {