From d65d27a6bb79aa2b1c4dfb244b39c58faf4c42d6 Mon Sep 17 00:00:00 2001 From: yessenia Date: Mon, 13 Oct 2025 17:45:03 +0800 Subject: [PATCH] fix: creating button style --- .../plugins/plugin-detail-panel/index.tsx | 1 + .../subscription-list/create/common-modal.tsx | 4 ++-- .../subscription-list/create/index.tsx | 18 ++++++++++---- .../subscription-list/index.tsx | 10 ++++++-- .../subscription-list/list-view.tsx | 4 ---- .../subscription-list/log-viewer.tsx | 6 ++--- .../subscription-list/selector-entry.tsx | 8 ++----- .../subscription-list/selector-view.tsx | 14 +++-------- .../subscription-list/store.ts | 2 +- web/i18n/en-US/plugin-trigger.ts | 20 +++------------- web/i18n/zh-Hans/plugin-trigger.ts | 24 ++++--------------- 11 files changed, 42 insertions(+), 69 deletions(-) diff --git a/web/app/components/plugins/plugin-detail-panel/index.tsx b/web/app/components/plugins/plugin-detail-panel/index.tsx index afe926675f..cc1c3db383 100644 --- a/web/app/components/plugins/plugin-detail-panel/index.tsx +++ b/web/app/components/plugins/plugin-detail-panel/index.tsx @@ -37,6 +37,7 @@ const PluginDetailPanel: FC = ({ plugin_id: detail.plugin_id, provider: `${detail.plugin_id}/${detail.declaration.name}`, declaration: detail.declaration, + name: detail.name, }) }, [detail]) diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/common-modal.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/common-modal.tsx index 6c62bc03d8..e9fcf81d38 100644 --- a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/common-modal.tsx +++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/common-modal.tsx @@ -364,7 +364,7 @@ export const CommonCreateModal = ({ onClose, createType, builder }: Props) => {
- REQUESTS HISTORY + {t('pluginTrigger.modal.manual.logs.title')}
@@ -374,7 +374,7 @@ export const CommonCreateModal = ({ onClose, createType, builder }: Props) => {
- Awaiting request from {detail?.plugin_id}... + {t('pluginTrigger.modal.manual.logs.loading', { pluginName: detail?.name || '' })}
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/index.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/index.tsx index 814905cc3b..3c3f3f9c16 100644 --- a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/index.tsx +++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/index.tsx @@ -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 } ) : ( - + ) @@ -198,7 +205,10 @@ export const CreateSubscriptionButton = ({ buttonType = CreateButtonType.FULL_BU {isShowClientSettingsModal && ( { + hideClientSettingsModal() + refetchOAuthConfig() + }} showOAuthCreateModal={builder => setSelectedCreateInfo({ type: SupportedCreationMethods.OAUTH, builder })} /> )} diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/index.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/index.tsx index 897a9c5813..045ece3b96 100644 --- a/web/app/components/plugins/plugin-detail-panel/subscription-list/index.tsx +++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/index.tsx @@ -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 ( +
+ +
+ ) + } if (mode === SubscriptionListMode.SELECTOR) { return ( @@ -37,7 +44,6 @@ export const SubscriptionList = withErrorBoundary(({ return ( ) }) diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/list-view.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/list-view.tsx index beb6dc6ec3..3af568ab2b 100644 --- a/web/app/components/plugins/plugin-detail-panel/subscription-list/list-view.tsx +++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/list-view.tsx @@ -9,19 +9,15 @@ import SubscriptionCard from './subscription-card' type SubscriptionListViewProps = { subscriptions?: TriggerSubscription[] - isLoading: boolean showTopBorder?: boolean } export const SubscriptionListView: React.FC = ({ subscriptions, - isLoading, showTopBorder = false, }) => { const { t } = useTranslation() - if (isLoading) return null - const subscriptionCount = subscriptions?.length || 0 return ( diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/log-viewer.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/log-viewer.tsx index 2602dd5e10..8b16d2c60a 100644 --- a/web/app/components/plugins/plugin-detail-panel/subscription-list/log-viewer.tsx +++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/log-viewer.tsx @@ -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) => { )}
- REQUEST #{index + 1} + {t(`pluginTrigger.modal.manual.logs.${LogTypeEnum.REQUEST}`)} #{index + 1}
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/selector-entry.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/selector-entry.tsx index 9530f68326..560ab2175e 100644 --- a/web/app/components/plugins/plugin-detail-panel/subscription-list/selector-entry.tsx +++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/selector-entry.tsx @@ -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 = ({ )} onClick={onClick} > - + {statusConfig.label} diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/selector-view.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/selector-view.tsx index 2f1bfe583d..17c39b41e0 100644 --- a/web/app/components/plugins/plugin-detail-panel/subscription-list/selector-view.tsx +++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/selector-view.tsx @@ -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 = ({ subscriptions, - isLoading, selectedId, onSelect, }) => { @@ -26,17 +24,9 @@ export const SubscriptionSelectorView: React.FC = ({ const [deletedSubscription, setDeletedSubscription] = useState(null) const subscriptionCount = subscriptions?.length || 0 - if (isLoading) { - return ( -
-
{t('common.dataLoading')}
-
- ) - } - return (
- {subscriptionCount > 0 &&
+ {subscriptionCount > 0 &&
{t('pluginTrigger.subscription.listNum', { num: subscriptionCount })} @@ -45,6 +35,7 @@ export const SubscriptionSelectorView: React.FC = ({
}
@@ -100,6 +91,7 @@ export const SubscriptionSelectorView: React.FC = ({ isShow={!!deletedSubscription} currentId={deletedSubscription.id} currentName={deletedSubscription.name} + workflowsInUse={deletedSubscription.workflows_in_use} /> )}
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/store.ts b/web/app/components/plugins/plugin-detail-panel/subscription-list/store.ts index a7258b3c7d..ccb18ce9a3 100644 --- a/web/app/components/plugins/plugin-detail-panel/subscription-list/store.ts +++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/store.ts @@ -1,7 +1,7 @@ import { create } from 'zustand' import type { PluginDetail } from '../../types' -type SimpleDetail = Pick & { provider: string } +type SimpleDetail = Pick & { provider: string } type Shape = { detail: SimpleDetail | undefined diff --git a/web/i18n/en-US/plugin-trigger.ts b/web/i18n/en-US/plugin-trigger.ts index fe054c64b2..91ea2ab93a 100644 --- a/web/i18n/en-US/plugin-trigger.ts +++ b/web/i18n/en-US/plugin-trigger.ts @@ -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: { diff --git a/web/i18n/zh-Hans/plugin-trigger.ts b/web/i18n/zh-Hans/plugin-trigger.ts index 004a75c6cb..8c91ad1042 100644 --- a/web/i18n/zh-Hans/plugin-trigger.ts +++ b/web/i18n/zh-Hans/plugin-trigger.ts @@ -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: {