From 1d03e0e9fc6507275b87da42540909c61d78b76a Mon Sep 17 00:00:00 2001 From: yessenia Date: Wed, 29 Oct 2025 18:51:27 +0800 Subject: [PATCH] fix(trigger): hide input params when no subscription --- .../components/plugins/readme-panel/index.tsx | 50 ++++---- .../_base/components/workflow-panel/index.tsx | 114 ++++++++++-------- .../workflow-panel/trigger-subscription.tsx | 33 +---- .../components/trigger-form/index.tsx | 6 +- .../components/trigger-form/item.tsx | 6 +- .../workflow/nodes/trigger-plugin/panel.tsx | 7 +- .../nodes/trigger-plugin/use-config.ts | 20 ++- 7 files changed, 111 insertions(+), 125 deletions(-) diff --git a/web/app/components/plugins/readme-panel/index.tsx b/web/app/components/plugins/readme-panel/index.tsx index b77d59fb0b..70d1e0db2c 100644 --- a/web/app/components/plugins/readme-panel/index.tsx +++ b/web/app/components/plugins/readme-panel/index.tsx @@ -2,7 +2,6 @@ import ActionButton from '@/app/components/base/action-button' import Loading from '@/app/components/base/loading' import { Markdown } from '@/app/components/base/markdown' -import Modal from '@/app/components/base/modal' import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks' import { usePluginReadme } from '@/service/use-plugins' import cn from '@/utils/classnames' @@ -85,29 +84,36 @@ const ReadmePanel: FC = () => { ) - return showType === ReadmeShowType.drawer ? createPortal( -
-
- {children} + const portalContent = showType === ReadmeShowType.drawer + ? ( +
+
+ {children} +
-
, + ) + : ( +
+
{ + event.stopPropagation() + }} + > + {children} +
+
+ ) + + return createPortal( + portalContent, document.body, - ) : ( - - {children} - ) } diff --git a/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx b/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx index 32b9cb2671..93589795a6 100644 --- a/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx +++ b/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx @@ -1,5 +1,17 @@ import { useStore as useAppStore } from '@/app/components/app/store' +import { Stop } from '@/app/components/base/icons/src/vender/line/mediaAndDevices' import Tooltip from '@/app/components/base/tooltip' +import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks' +import { + AuthCategory, + AuthorizedInDataSourceNode, + AuthorizedInNode, + PluginAuth, + PluginAuthInDataSourceNode, +} from '@/app/components/plugins/plugin-auth' +import { usePluginStore } from '@/app/components/plugins/plugin-detail-panel/store' +import type { SimpleSubscription } from '@/app/components/plugins/plugin-detail-panel/subscription-list' +import { ReadmeEntrance } from '@/app/components/plugins/readme-panel/entrance' import BlockIcon from '@/app/components/workflow/block-icon' import { WorkflowHistoryEvent, @@ -11,7 +23,14 @@ import { useToolIcon, useWorkflowHistory, } from '@/app/components/workflow/hooks' +import { useHooksStore } from '@/app/components/workflow/hooks-store' +import useInspectVarsCrud from '@/app/components/workflow/hooks/use-inspect-vars-crud' import Split from '@/app/components/workflow/nodes/_base/components/split' +import DataSourceBeforeRunForm from '@/app/components/workflow/nodes/data-source/before-run-form' +import type { CustomRunFormProps } from '@/app/components/workflow/nodes/data-source/types' +import { DataSourceClassification } from '@/app/components/workflow/nodes/data-source/types' +import { useLogs } from '@/app/components/workflow/run/hooks' +import SpecialResultPanel from '@/app/components/workflow/run/special-result-panel' import { useStore } from '@/app/components/workflow/store' import { BlockEnum, type Node, NodeRunningStatus } from '@/app/components/workflow/types' import { @@ -20,16 +39,18 @@ import { hasRetryNode, isSupportCustomRunForm, } from '@/app/components/workflow/utils' +import { useModalContext } from '@/context/modal-context' +import { useAllBuiltInTools } from '@/service/use-tools' import { useAllTriggerPlugins } from '@/service/use-triggers' +import { FlowType } from '@/types/common' +import { canFindTool } from '@/utils' import cn from '@/utils/classnames' import { RiCloseLine, RiPlayLargeLine, } from '@remixicon/react' -import type { - FC, - ReactNode, -} from 'react' +import { debounce } from 'lodash-es' +import type { FC, ReactNode } from 'react' import React, { cloneElement, memo, @@ -42,44 +63,18 @@ import React, { import { useTranslation } from 'react-i18next' import { useShallow } from 'zustand/react/shallow' import { useResizePanel } from '../../hooks/use-resize-panel' +import BeforeRunForm from '../before-run-form' +import PanelWrap from '../before-run-form/panel-wrap' import ErrorHandleOnPanel from '../error-handle/error-handle-on-panel' import HelpLink from '../help-link' import NextStep from '../next-step' import PanelOperator from '../panel-operator' import RetryOnPanel from '../retry/retry-on-panel' -import { - DescriptionInput, - TitleInput, -} from '../title-description-input' -import Tab, { TabType } from './tab' -// import AuthMethodSelector from '@/app/components/workflow/nodes/trigger-plugin/components/auth-method-selector' -import { Stop } from '@/app/components/base/icons/src/vender/line/mediaAndDevices' -import { - AuthCategory, - AuthorizedInDataSourceNode, - AuthorizedInNode, - PluginAuth, - PluginAuthInDataSourceNode, -} from '@/app/components/plugins/plugin-auth' -import type { SimpleSubscription } from '@/app/components/plugins/plugin-detail-panel/subscription-list' -import { useHooksStore } from '@/app/components/workflow/hooks-store' -import useInspectVarsCrud from '@/app/components/workflow/hooks/use-inspect-vars-crud' -import DataSourceBeforeRunForm from '@/app/components/workflow/nodes/data-source/before-run-form' -import type { CustomRunFormProps } from '@/app/components/workflow/nodes/data-source/types' -import { DataSourceClassification } from '@/app/components/workflow/nodes/data-source/types' -import { useLogs } from '@/app/components/workflow/run/hooks' -import SpecialResultPanel from '@/app/components/workflow/run/special-result-panel' -import { useModalContext } from '@/context/modal-context' -import { FlowType } from '@/types/common' -import { canFindTool } from '@/utils' -import { debounce } from 'lodash-es' -import BeforeRunForm from '../before-run-form' -import PanelWrap from '../before-run-form/panel-wrap' +import { DescriptionInput, TitleInput } from '../title-description-input' import LastRun from './last-run' import useLastRun from './last-run/use-last-run' +import Tab, { TabType } from './tab' import { TriggerSubscription } from './trigger-subscription' -import { ReadmeEntrance } from '@/app/components/plugins/readme-panel/entrance' -import { useAllBuiltInTools } from '@/service/use-tools' const getCustomRunForm = (params: CustomRunFormProps): React.JSX.Element => { const nodeType = params.payload.type @@ -103,6 +98,7 @@ const BasePanel: FC = ({ children, }) => { const { t } = useTranslation() + const language = useLanguage() const { showMessageLogModal } = useAppStore(useShallow(state => ({ showMessageLogModal: state.showMessageLogModal, }))) @@ -224,6 +220,7 @@ const BasePanel: FC = ({ useEffect(() => { hasClickRunning.current = false }, [id]) + const { nodesMap, } = useNodesMetaData() @@ -278,12 +275,7 @@ const BasePanel: FC = ({ }, [pendingSingleRun, id, handleSingleRun, handleStop, setPendingSingleRun]) const logParams = useLogs() - const passedLogParams = (() => { - if ([BlockEnum.Tool, BlockEnum.Agent, BlockEnum.Iteration, BlockEnum.Loop].includes(data.type)) - return logParams - - return {} - })() + const passedLogParams = useMemo(() => [BlockEnum.Tool, BlockEnum.Agent, BlockEnum.Iteration, BlockEnum.Loop].includes(data.type) ? logParams : {}, [data.type, logParams]) const storeBuildInTools = useStore(s => s.buildInTools) const { data: buildInTools } = useAllBuiltInTools() @@ -295,16 +287,32 @@ const BasePanel: FC = ({ return data.type === BlockEnum.Tool && currToolCollection?.allow_delete }, [data.type, currToolCollection?.allow_delete]) - const { data: triggerProviders = [] } = useAllTriggerPlugins() - const currentTriggerProvider = useMemo(() => { - if (!data.provider_id || !data.provider_name) + // only fetch trigger plugins when the node is a trigger plugin + const { data: triggerPlugins = [] } = useAllTriggerPlugins(data.type === BlockEnum.TriggerPlugin) + const currentTriggerPlugin = useMemo(() => { + if (data.type !== BlockEnum.TriggerPlugin || !data.plugin_id || !triggerPlugins?.length) return undefined - return triggerProviders.find(p => p.name === data.provider_id) // todo: confirm - }, [data.type, data.provider_id, data.provider_name, triggerProviders]) + return triggerPlugins?.find(p => p.plugin_id === data.plugin_id) + }, [data.type, data.plugin_id, triggerPlugins]) + const { setDetail } = usePluginStore() - const showTriggerConfig = useMemo(() => { - return data.type === BlockEnum.TriggerPlugin && currentTriggerProvider - }, [data.type, currentTriggerProvider]) + useEffect(() => { + if (currentTriggerPlugin) { + setDetail({ + name: currentTriggerPlugin.label[language], + plugin_id: currentTriggerPlugin.plugin_id || '', + provider: currentTriggerPlugin.name, + declaration: { + tool: undefined, + // @ts-expect-error just remain the necessary fields + trigger: { + subscription_schema: currentTriggerPlugin.subscription_schema || [], + subscription_constructor: currentTriggerPlugin.subscription_constructor, + }, + }, + }) + } + }, [currentTriggerPlugin, setDetail]) const dataSourceList = useStore(s => s.dataSourceList) @@ -352,14 +360,14 @@ const BasePanel: FC = ({ pluginDetail = currentDataSource break case BlockEnum.TriggerPlugin: - pluginDetail = currentTriggerProvider + pluginDetail = currentTriggerPlugin break default: break } return !pluginDetail ? null : - }, [data.type, currToolCollection, currentDataSource, currentTriggerProvider]) + }, [data.type, currToolCollection, currentDataSource, currentTriggerPlugin]) if (logParams.showSpecialResultPanel) { return ( @@ -558,9 +566,9 @@ const BasePanel: FC = ({ ) } { - showTriggerConfig && ( + currentTriggerPlugin && ( = ({ ) } { - !needsToolAuth && !currentDataSource && !showTriggerConfig && ( + !needsToolAuth && !currentDataSource && !currentTriggerPlugin && (
void) => void children: React.ReactNode } -export const TriggerSubscription: FC = ({ data, onSubscriptionChange, children }) => { - // @ts-expect-error TODO: fix this - const { currentProvider } = useConfig(data.id as string, data) - const { setDetail } = usePluginStore() - const language = useLanguage() +export const TriggerSubscription: FC = ({ subscriptionIdSelected, onSubscriptionChange, children }) => { 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
0 && 'flex items-center justify-between pr-3')}> {!subscriptionCount && } {children} {subscriptionCount > 0 && }
diff --git a/web/app/components/workflow/nodes/trigger-plugin/components/trigger-form/index.tsx b/web/app/components/workflow/nodes/trigger-plugin/components/trigger-form/index.tsx index 17c71b6b95..93bf788c34 100644 --- a/web/app/components/workflow/nodes/trigger-plugin/components/trigger-form/index.tsx +++ b/web/app/components/workflow/nodes/trigger-plugin/components/trigger-form/index.tsx @@ -14,7 +14,7 @@ type Props = { onChange: (value: PluginTriggerVarInputs) => void onOpen?: (index: number) => void inPanel?: boolean - currentTrigger?: Event + currentEvent?: Event currentProvider?: TriggerWithProvider extraParams?: Record disableVariableInsertion?: boolean @@ -27,7 +27,7 @@ const TriggerForm: FC = ({ value, onChange, inPanel, - currentTrigger, + currentEvent, currentProvider, extraParams, disableVariableInsertion = false, @@ -44,7 +44,7 @@ const TriggerForm: FC = ({ value={value} onChange={onChange} inPanel={inPanel} - currentTrigger={currentTrigger} + currentEvent={currentEvent} currentProvider={currentProvider} extraParams={extraParams} disableVariableInsertion={disableVariableInsertion} diff --git a/web/app/components/workflow/nodes/trigger-plugin/components/trigger-form/item.tsx b/web/app/components/workflow/nodes/trigger-plugin/components/trigger-form/item.tsx index 22331aa578..678c12f02a 100644 --- a/web/app/components/workflow/nodes/trigger-plugin/components/trigger-form/item.tsx +++ b/web/app/components/workflow/nodes/trigger-plugin/components/trigger-form/item.tsx @@ -22,7 +22,7 @@ type Props = { value: PluginTriggerVarInputs onChange: (value: PluginTriggerVarInputs) => void inPanel?: boolean - currentTrigger?: Event + currentEvent?: Event currentProvider?: TriggerWithProvider extraParams?: Record disableVariableInsertion?: boolean @@ -35,7 +35,7 @@ const TriggerFormItem: FC = ({ value, onChange, inPanel, - currentTrigger, + currentEvent, currentProvider, extraParams, disableVariableInsertion = false, @@ -91,7 +91,7 @@ const TriggerFormItem: FC = ({ value={value} onChange={onChange} inPanel={inPanel} - currentTool={currentTrigger} + currentTool={currentEvent} currentProvider={currentProvider} providerType='trigger' extraParams={extraParams} diff --git a/web/app/components/workflow/nodes/trigger-plugin/panel.tsx b/web/app/components/workflow/nodes/trigger-plugin/panel.tsx index f7dc8374e7..9b4d8058b1 100644 --- a/web/app/components/workflow/nodes/trigger-plugin/panel.tsx +++ b/web/app/components/workflow/nodes/trigger-plugin/panel.tsx @@ -22,7 +22,8 @@ const Panel: FC> = ({ outputSchema, hasObjectOutput, currentProvider, - currentTrigger, + currentEvent, + subscriptionSelected, } = useConfig(id, data) const disableVariableInsertion = data.type === BlockEnum.TriggerPlugin @@ -36,7 +37,7 @@ const Panel: FC> = ({ return (
{/* Dynamic Parameters Form - Only show when authenticated */} - {triggerParameterSchema.length > 0 && ( + {triggerParameterSchema.length > 0 && subscriptionSelected && ( <>
> = ({ value={triggerParameterValue} onChange={setTriggerParameterValue} currentProvider={currentProvider} - currentTrigger={currentTrigger} + currentEvent={currentEvent} disableVariableInsertion={disableVariableInsertion} />
diff --git a/web/app/components/workflow/nodes/trigger-plugin/use-config.ts b/web/app/components/workflow/nodes/trigger-plugin/use-config.ts index 7d75aa5e00..6ea711cd31 100644 --- a/web/app/components/workflow/nodes/trigger-plugin/use-config.ts +++ b/web/app/components/workflow/nodes/trigger-plugin/use-config.ts @@ -86,6 +86,7 @@ const useConfig = (id: string, payload: PluginTriggerNodeType) => { event_name: event_name, config = {}, event_parameters: rawEventParameters = {}, + subscription_id, } = inputs const event_parameters = useMemo( @@ -97,16 +98,6 @@ const useConfig = (id: string, payload: PluginTriggerNodeType) => { [config], ) - // Construct provider for authentication check - const authProvider = useMemo(() => { - return provider_name || '' - }, [provider_id, provider_name]) - - const { data: subscriptions = [] } = useTriggerSubscriptions( - authProvider, - !!authProvider, - ) - const currentProvider = useMemo(() => { return triggerPlugins.find( provider => @@ -116,6 +107,12 @@ const useConfig = (id: string, payload: PluginTriggerNodeType) => { ) }, [triggerPlugins, provider_name, provider_id]) + const { data: subscriptions = [] } = useTriggerSubscriptions(provider_id || '') + + const subscriptionSelected = useMemo(() => { + return subscriptions?.find(s => s.id === subscription_id) + }, [subscriptions, subscription_id]) + const currentEvent = useMemo(() => { return currentProvider?.events.find( event => event.name === event_name, @@ -221,7 +218,7 @@ const useConfig = (id: string, payload: PluginTriggerNodeType) => { readOnly, inputs, currentProvider, - currentTrigger: currentEvent, + currentEvent, triggerParameterSchema, triggerParameterValue, setTriggerParameterValue, @@ -229,6 +226,7 @@ const useConfig = (id: string, payload: PluginTriggerNodeType) => { outputSchema, hasObjectOutput, subscriptions, + subscriptionSelected, } }