fix(trigger): optimize subscription entry in workflow

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

@@ -63,7 +63,7 @@ export const CreateSubscriptionButton = ({ buttonType = CreateButtonType.FULL_BU
     }
   }, [t])
 
-  const onClickClientSettings = (e: React.MouseEvent<HTMLButtonElement>) => {
+  const onClickClientSettings = (e: React.MouseEvent<HTMLDivElement | HTMLButtonElement>) => {
     e.stopPropagation()
     e.preventDefault()
     showClientSettingsModal()
@@ -171,7 +171,7 @@ export const CreateSubscriptionButton = ({ buttonType = CreateButtonType.FULL_BU
           <Button
             variant='primary'
             size='medium'
-            className='flex w-full items-center justify-between pl-0 pr-1'
+            className='flex w-full items-center justify-between px-0'
             onClick={onClickCreate}
           >
             <div className='flex flex-1 items-center justify-center'>
@@ -184,12 +184,12 @@ export const CreateSubscriptionButton = ({ buttonType = CreateButtonType.FULL_BU
               </Badge>}
             </div>
             {methodType === SupportedCreationMethods.OAUTH
-              && <div className='ml-auto flex items-center gap-1'>
+              && <div className='ml-auto flex items-center'>
                 <div className="h-4 w-px bg-text-primary-on-surface opacity-15" />
                 <Tooltip popupContent={t('pluginTrigger.subscription.addType.options.oauth.clientSettings')}>
-                  <ActionButton onClick={onClickClientSettings} >
+                  <div onClick={onClickClientSettings} className='p-2'>
                     <RiEqualizer2Line className='size-4 text-components-button-primary-text' />
-                  </ActionButton>
+                  </div>
                 </Tooltip>
               </div>
             }

web/app/components/plugins/plugin-detail-panel/subscription-list/use-subscription-list.ts

@@ -6,7 +6,7 @@ export const useSubscriptionList = () => {
   const detail = usePluginStore(state => state.detail)
   const { setRefresh } = usePluginSubscriptionStore()
 
-  const { data: subscriptions, isLoading, refetch } = useTriggerSubscriptions(detail?.provider || '', !!detail?.provider)
+  const { data: subscriptions, isLoading, refetch } = useTriggerSubscriptions(detail?.provider || '')
 
   useEffect(() => {
     if (refetch)

web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx

@@ -76,7 +76,7 @@ import { DataSourceClassification } from '@/app/components/workflow/nodes/data-s
 import { useModalContext } from '@/context/modal-context'
 import DataSourceBeforeRunForm from '@/app/components/workflow/nodes/data-source/before-run-form'
 import useInspectVarsCrud from '@/app/components/workflow/hooks/use-inspect-vars-crud'
-import NodeAuth from './node-auth-factory'
+import { TriggerSubscription } from './trigger-subscription'
 
 const getCustomRunForm = (params: CustomRunFormProps): React.JSX.Element => {
   const nodeType = params.payload.type
@@ -275,21 +275,6 @@ const BasePanel: FC<BasePanelProps> = ({
     return triggerProviders.find(p => p.plugin_id === data.plugin_id && p.name === data.provider_name)
   }, [data.type, data.plugin_id, data.provider_name, triggerProviders])
 
-  // const supportedAuthMethods = useMemo(() => {
-  //   if (!currentTriggerProvider) return []
-  //   const methods = []
-  //   if (currentTriggerProvider.oauth_client_schema && currentTriggerProvider.oauth_client_schema.length > 0)
-  //     methods.push('oauth')
-  //   if (currentTriggerProvider.credentials_schema && currentTriggerProvider.credentials_schema.length > 0)
-  //     methods.push('api_key')
-  //   return methods
-  // }, [currentTriggerProvider])
-
-  // Simplified: Always show auth selector for trigger plugins
-  // const shouldShowTriggerAuthSelector = useMemo(() => {
-  //   return data.type === BlockEnum.TriggerPlugin && currentTriggerProvider && supportedAuthMethods.length > 0
-  // }, [data.type, currentTriggerProvider, supportedAuthMethods.length])
-
   // Simplified: Always show tab for trigger plugins
   const shouldShowTriggerTab = useMemo(() => {
     return data.type === BlockEnum.TriggerPlugin && currentTriggerProvider
@@ -301,10 +286,12 @@ const BasePanel: FC<BasePanelProps> = ({
   }, [data.type, currCollection?.allow_delete])
 
   const dataSourceList = useStore(s => s.dataSourceList)
+
   const currentDataSource = useMemo(() => {
     if (data.type === BlockEnum.DataSource && data.provider_type !== DataSourceClassification.localFile)
       return dataSourceList?.find(item => item.plugin_id === data.plugin_id)
   }, [dataSourceList, data.plugin_id, data.type, data.provider_type])
+
   const handleAuthorizationItemClick = useCallback((credential_id: string) => {
     handleNodeDataUpdateWithSyncDraft({
       id,
@@ -313,7 +300,9 @@ const BasePanel: FC<BasePanelProps> = ({
       },
     })
   }, [handleNodeDataUpdateWithSyncDraft, id])
+
   const { setShowAccountSettingModal } = useModalContext()
+
   const handleJumpToDataSourcePage = useCallback(() => {
     setShowAccountSettingModal({ payload: 'data-source' })
   }, [setShowAccountSettingModal])
@@ -536,27 +525,17 @@ const BasePanel: FC<BasePanelProps> = ({
               </PluginAuthInDataSourceNode>
             )
           }
-          {/* {
-            shouldShowTriggerAuthSelector && (
-              <AuthMethodSelector
-                provider={currentTriggerProvider!}
-                supportedMethods={supportedAuthMethods}
-              />
-            )
-          } */}
           {
             shouldShowTriggerTab && (
-              <div className='flex items-center justify-between pl-4 pr-3'>
+              <TriggerSubscription
+                data={data}
+                onSubscriptionChange={handleSubscriptionChange}
+              >
                 <Tab
                   value={tabType}
                   onChange={setTabType}
                 />
-                <NodeAuth
-                  data={data}
-                  onAuthorizationChange={handleAuthorizationItemClick}
-                  onSubscriptionChange={handleSubscriptionChange}
-                />
-              </div>
+              </TriggerSubscription>
             )
           }
           {

web/app/components/workflow/nodes/_base/components/workflow-panel/node-auth-factory.tsx

@@ -1,48 +0,0 @@
-import { AuthCategory, AuthorizedInNode } from '@/app/components/plugins/plugin-auth'
-import { SubscriptionMenu } from '@/app/components/workflow/nodes/trigger-plugin/components/subscription-menu'
-import { useStore } from '@/app/components/workflow/store'
-import { BlockEnum, type Node } from '@/app/components/workflow/types'
-import { canFindTool } from '@/utils'
-import type { FC } from 'react'
-import { memo, useMemo } from 'react'
-
-type NodeAuthProps = {
-  data: Node['data']
-  onAuthorizationChange: (credential_id: string) => void
-  onSubscriptionChange?: (id: string, name: string) => void
-}
-
-const NodeAuth: FC<NodeAuthProps> = ({ data, onAuthorizationChange, onSubscriptionChange }) => {
-  const buildInTools = useStore(s => s.buildInTools)
-
-  const currCollection = useMemo(() => {
-    return buildInTools.find(item => canFindTool(item.id, data.provider_id))
-  }, [buildInTools, data.provider_id])
-
-  if (data.type === BlockEnum.Tool && currCollection?.allow_delete) {
-    return (
-      <AuthorizedInNode
-        pluginPayload={{
-          provider: currCollection?.name || '',
-          category: AuthCategory.tool,
-        }}
-        onAuthorizationItemClick={onAuthorizationChange}
-        credentialId={data.credential_id}
-      />
-    )
-  }
-
-  if (data.type === BlockEnum.TriggerPlugin) {
-    return (
-      <SubscriptionMenu
-        // @ts-expect-error TODO: fix this
-        payload={data}
-        onSubscriptionSelect={({ id, name }) => onSubscriptionChange?.(id, name)}
-      />
-    )
-  }
-
-  return null
-}
-
-export default memo(NodeAuth)

web/app/components/workflow/nodes/_base/components/workflow-panel/trigger-subscription.tsx

@@ -0,0 +1,52 @@
+import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
+import { CreateButtonType, CreateSubscriptionButton } from '@/app/components/plugins/plugin-detail-panel/subscription-list/create'
+import { SubscriptionSelectorEntry } from '@/app/components/plugins/plugin-detail-panel/subscription-list/selector-entry'
+import { usePluginStore } from '@/app/components/plugins/plugin-detail-panel/subscription-list/store'
+import { useSubscriptionList } from '@/app/components/plugins/plugin-detail-panel/subscription-list/use-subscription-list'
+import useConfig from '@/app/components/workflow/nodes/trigger-plugin/use-config'
+import type { Node } from '@/app/components/workflow/types'
+import cn from '@/utils/classnames'
+import type { FC } from 'react'
+import { useEffect } from 'react'
+
+type NodeAuthProps = {
+  data: Node['data']
+  onSubscriptionChange?: (id: string, name: string) => void
+  children: React.ReactNode
+}
+
+export const TriggerSubscription: FC<NodeAuthProps> = ({ data, onSubscriptionChange, children }) => {
+  // @ts-expect-error TODO: fix this
+  const { currentProvider } = useConfig(data.id as string, data)
+  const { setDetail } = usePluginStore()
+  const language = useLanguage()
+  const { subscriptions } = useSubscriptionList()
+  const subscriptionCount = subscriptions?.length || 0
+
+  useEffect(() => {
+    if (currentProvider) {
+      setDetail({
+        name: currentProvider.label[language],
+        plugin_id: currentProvider.plugin_id || '',
+        provider: currentProvider.name,
+        declaration: {
+          tool: undefined,
+          // @ts-expect-error just remain the necessary fields
+          trigger: {
+            subscription_schema: currentProvider.subscription_schema || [],
+            subscription_constructor: currentProvider.subscription_constructor,
+          },
+        },
+      })
+    }
+  }, [currentProvider, setDetail])
+
+  return <div className={cn('px-4', subscriptionCount > 0 && 'flex items-center justify-between pr-3')}>
+    {!subscriptionCount && <CreateSubscriptionButton buttonType={CreateButtonType.FULL_BUTTON} />}
+    {children}
+    {subscriptionCount > 0 && <SubscriptionSelectorEntry
+      selectedId={data.subscription_id}
+      onSelect={({ id, name }) => onSubscriptionChange?.(id, name)}
+    />}
+  </div>
+}

web/app/components/workflow/nodes/trigger-plugin/components/subscription-menu.tsx

@@ -1,43 +0,0 @@
-'use client'
-
-import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
-import { SubscriptionSelectorEntry } from '@/app/components/plugins/plugin-detail-panel/subscription-list/selector-entry'
-import { usePluginStore } from '@/app/components/plugins/plugin-detail-panel/subscription-list/store'
-import { memo, useEffect } from 'react'
-import type { PluginTriggerNodeType } from '../types'
-import useConfig from '../use-config'
-
-export const SubscriptionMenu = memo(({ payload, onSubscriptionSelect }: {
-  payload: PluginTriggerNodeType,
-  onSubscriptionSelect: ({ id, name }: { id: string, name: string }) => void
-}) => {
-  // @ts-expect-error TODO: fix this
-  const { currentProvider } = useConfig(payload.id as string, payload)
-  const { setDetail } = usePluginStore()
-  const language = useLanguage()
-
-  useEffect(() => {
-    if (currentProvider) {
-      setDetail({
-        name: currentProvider.label[language],
-        plugin_id: currentProvider.plugin_id || '',
-        provider: currentProvider.name,
-        declaration: {
-          tool: undefined,
-          // @ts-expect-error just remain the necessary fields
-          trigger: {
-            subscription_schema: currentProvider.subscription_schema || [],
-            subscription_constructor: currentProvider.subscription_constructor,
-          },
-        },
-      })
-    }
-  }, [currentProvider, setDetail])
-
-  return (
-    <SubscriptionSelectorEntry
-      selectedId={payload.subscription_id}
-      onSelect={onSubscriptionSelect}
-    />
-  )
-})