fix(trigger): add event node status & min-height in modal

web/app/components/base/modal/modal.tsx

@@ -55,7 +55,7 @@ const Modal = ({
       >
         <div
           className={cn(
-            'flex max-h-[80%] flex-col rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xs',
+            'flex max-h-[80%] min-h-[360px] flex-col rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xs',
             size === 'sm' && 'w-[480px]',
             size === 'md' && 'w-[640px]',
           )}

web/app/components/base/node-status/index.tsx

@@ -0,0 +1,74 @@
+'use client'
+import AlertTriangle from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback/AlertTriangle'
+import classNames from '@/utils/classnames'
+import { RiErrorWarningFill } from '@remixicon/react'
+import { type VariantProps, cva } from 'class-variance-authority'
+import type { CSSProperties } from 'react'
+import React from 'react'
+
+export enum NodeStatusEnum {
+  warning = 'warning',
+  error = 'error',
+}
+
+const nodeStatusVariants = cva(
+  'flex items-center gap-1 rounded-md px-2 py-1 system-xs-medium',
+  {
+    variants: {
+      status: {
+        [NodeStatusEnum.warning]: 'bg-state-warning-hover text-text-warning',
+        [NodeStatusEnum.error]: 'bg-state-destructive-hover text-text-destructive',
+      },
+    },
+    defaultVariants: {
+      status: NodeStatusEnum.warning,
+    },
+  },
+)
+
+const StatusIconMap: Record<NodeStatusEnum, { IconComponent: React.ElementType; message: string }> = {
+  [NodeStatusEnum.warning]: { IconComponent: AlertTriangle, message: 'Warning' },
+  [NodeStatusEnum.error]: { IconComponent: RiErrorWarningFill, message: 'Error' },
+}
+
+export type NodeStatusProps = {
+  message?: string
+  styleCss?: CSSProperties
+  iconClassName?: string
+} & React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof nodeStatusVariants>
+
+const NodeStatus = ({
+  className,
+  status,
+  message,
+  styleCss,
+  iconClassName,
+  children,
+  ...props
+}: NodeStatusProps) => {
+  const Icon = StatusIconMap[status ?? NodeStatusEnum.warning].IconComponent
+  const defaultMessage = StatusIconMap[status ?? NodeStatusEnum.warning].message
+
+  return (
+    <div
+      className={classNames(
+        nodeStatusVariants({ status, className }),
+      )}
+      style={styleCss}
+      {...props}
+    >
+      <Icon
+        className={classNames(
+          'h-3.5 w-3.5 shrink-0',
+          iconClassName,
+        )}
+      />
+      <span>{message ?? defaultMessage}</span>
+      {children}
+    </div>
+  )
+}
+
+NodeStatus.displayName = 'NodeStatus'
+
+export default React.memo(NodeStatus)

web/app/components/workflow/nodes/trigger-plugin/node.tsx

@@ -1,7 +1,10 @@
+import NodeStatus, { NodeStatusEnum } from '@/app/components/base/node-status'
+import { INVALID_SUBSCRIPTION_ID } from '@/app/components/plugins/plugin-detail-panel/subscription-list/selector-entry'
+import type { NodeProps } from '@/app/components/workflow/types'
 import type { FC } from 'react'
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 import type { PluginTriggerNodeType } from './types'
-import type { NodeProps } from '@/app/components/workflow/types'
 import useConfig from './use-config'
 
 const formatConfigValue = (rawValue: any): string => {
@@ -38,9 +41,10 @@ const Node: FC<NodeProps<PluginTriggerNodeType>> = ({
   data,
 }) => {
   const { isAuthenticated } = useConfig(id, data)
-  const { config = {} } = data
+  const { config = {}, subscription_id } = data
   const configKeys = Object.keys(config)
 
+  const { t } = useTranslation()
   // Only show config when authenticated and has config values
   if (!isAuthenticated || configKeys.length === 0)
     return null
@@ -48,7 +52,8 @@ const Node: FC<NodeProps<PluginTriggerNodeType>> = ({
   return (
     <div className="mb-1 px-3 py-1">
       <div className="space-y-0.5">
-        {configKeys.map((key, index) => (
+        {(!subscription_id || subscription_id === INVALID_SUBSCRIPTION_ID) && <NodeStatus status={NodeStatusEnum.warning} message={t('pluginTrigger.node.status.warning')} />}
+        {subscription_id && subscription_id !== INVALID_SUBSCRIPTION_ID && configKeys.map((key, index) => (
           <div
             key={index}
             className="flex h-6 items-center justify-between space-x-1 rounded-md bg-workflow-block-parma-bg px-1 text-xs font-normal text-text-secondary"

web/i18n/en-US/plugin-trigger.ts

@@ -176,6 +176,11 @@ const translation = {
     },
     output: 'Output',
   },
+  node: {
+    status: {
+      warning: 'Disconnect',
+    },
+  },
 }
 
 export default translation

web/i18n/zh-Hans/plugin-trigger.ts

@@ -176,6 +176,11 @@ const translation = {
     },
     output: '输出',
   },
+  node: {
+    status: {
+      warning: '未连接',
+    },
+  },
 }
 
 export default translation