From 4164e1191e9155d7f0ea00f385ff7b3a76fd874a Mon Sep 17 00:00:00 2001
From: lyzno1 <yuanyouhuilyz@gmail.com>
Date: Wed, 15 Oct 2025 16:10:34 +0800
Subject: [PATCH] fix: hide checklist navigation for missing nodes

---
 .../components/workflow/header/checklist.tsx  | 34 +++++++++++------
 .../workflow/hooks/use-checklist.ts           | 38 ++++++++++++-------
 2 files changed, 47 insertions(+), 25 deletions(-)

diff --git a/web/app/components/workflow/header/checklist.tsx b/web/app/components/workflow/header/checklist.tsx
index b3c7d966d5..39155c037e 100644
--- a/web/app/components/workflow/header/checklist.tsx
+++ b/web/app/components/workflow/header/checklist.tsx
@@ -16,6 +16,7 @@ import {
   useChecklist,
   useNodesInteractions,
 } from '../hooks'
+import type { ChecklistItem } from '../hooks/use-checklist'
 import type {
   CommonEdgeType,
   CommonNodeType,
@@ -45,6 +46,13 @@ const WorkflowChecklist = ({
   const needWarningNodes = useChecklist(nodes, edges)
   const { handleNodeSelect } = useNodesInteractions()
 
+  const handleChecklistItemClick = (item: ChecklistItem) => {
+    if (!item.canNavigate)
+      return
+    handleNodeSelect(item.id)
+    setOpen(false)
+  }
+
   return (
     <PortalToFollowElem
       placement='bottom-end'
@@ -104,11 +112,11 @@ const WorkflowChecklist = ({
                       needWarningNodes.map(node => (
                         <div
                           key={node.id}
-                          className='group mb-2 cursor-pointer rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xs last-of-type:mb-0'
-                          onClick={() => {
-                            handleNodeSelect(node.id)
-                            setOpen(false)
-                          }}
+                          className={cn(
+                            'group mb-2 rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xs last-of-type:mb-0',
+                            node.canNavigate ? 'cursor-pointer' : 'cursor-default opacity-80',
+                          )}
+                          onClick={() => handleChecklistItemClick(node)}
                         >
                           <div className='flex h-9 items-center p-2 text-xs font-medium text-text-secondary'>
                             <BlockIcon
@@ -119,12 +127,16 @@ const WorkflowChecklist = ({
                             <span className='grow truncate'>
                               {node.title}
                             </span>
-                            <div className='flex h-4 w-[60px] shrink-0 items-center justify-center gap-1 opacity-0 transition-opacity duration-200 group-hover:opacity-100'>
-                              <span className='whitespace-nowrap text-xs font-medium leading-4 text-primary-600'>
-                                {t('workflow.panel.goTo')}
-                              </span>
-                              <IconR className='h-3.5 w-3.5 text-primary-600' />
-                            </div>
+                            {
+                              node.canNavigate && (
+                                <div className='flex h-4 w-[60px] shrink-0 items-center justify-center gap-1 opacity-0 transition-opacity duration-200 group-hover:opacity-100'>
+                                  <span className='whitespace-nowrap text-xs font-medium leading-4 text-primary-600'>
+                                    {t('workflow.panel.goTo')}
+                                  </span>
+                                  <IconR className='h-3.5 w-3.5 text-primary-600' />
+                                </div>
+                              )
+                            }
                           </div>
                           <div
                             className={cn(
diff --git a/web/app/components/workflow/hooks/use-checklist.ts b/web/app/components/workflow/hooks/use-checklist.ts
index f16501a303..b09dd10bc8 100644
--- a/web/app/components/workflow/hooks/use-checklist.ts
+++ b/web/app/components/workflow/hooks/use-checklist.ts
@@ -43,6 +43,23 @@ import { MAX_TREE_DEPTH } from '@/config'
 import useNodesAvailableVarList, { useGetNodesAvailableVarList } from './use-nodes-available-var-list'
 import { getNodeUsedVars, isSpecialVar } from '../nodes/_base/components/variable/utils'
 
+export type ChecklistItem = {
+  id: string
+  type: BlockEnum | string
+  title: string
+  toolIcon?: string
+  unConnected?: boolean
+  errorMessage?: string
+  canNavigate: boolean
+}
+
+const START_NODE_TYPES: BlockEnum[] = [
+  BlockEnum.Start,
+  BlockEnum.TriggerSchedule,
+  BlockEnum.TriggerWebhook,
+  BlockEnum.TriggerPlugin,
+]
+
 export const useChecklist = (nodes: Node[], edges: Edge[]) => {
   const { t } = useTranslation()
   const language = useGetLanguage()
@@ -74,8 +91,8 @@ export const useChecklist = (nodes: Node[], edges: Edge[]) => {
     return checkData
   }, [datasetsDetail])
 
-  const needWarningNodes = useMemo(() => {
-    const list = []
+  const needWarningNodes = useMemo<ChecklistItem[]>(() => {
+    const list: ChecklistItem[] = []
     const filteredNodes = nodes.filter(node => node.type === CUSTOM_NODE)
     const { validNodes } = getValidTreeNodes(filteredNodes, edges)
 
@@ -145,18 +162,14 @@ export const useChecklist = (nodes: Node[], edges: Edge[]) => {
             toolIcon,
             unConnected: isUnconnected && !isStartNode,
             errorMessage,
+            canNavigate: true,
           })
         }
       }
     }
 
     // Check for start nodes (including triggers)
-    const startNodesFiltered = nodes.filter(node =>
-      node.data.type === BlockEnum.Start
-      || node.data.type === BlockEnum.TriggerSchedule
-      || node.data.type === BlockEnum.TriggerWebhook
-      || node.data.type === BlockEnum.TriggerPlugin,
-    )
+    const startNodesFiltered = nodes.filter(node => START_NODE_TYPES.includes(node.data.type as BlockEnum))
 
     if (startNodesFiltered.length === 0) {
       list.push({
@@ -164,6 +177,7 @@ export const useChecklist = (nodes: Node[], edges: Edge[]) => {
         type: BlockEnum.Start,
         title: t('workflow.panel.startNode'),
         errorMessage: t('workflow.common.needStartNode'),
+        canNavigate: false,
       })
     }
 
@@ -176,6 +190,7 @@ export const useChecklist = (nodes: Node[], edges: Edge[]) => {
           type,
           title: t(`workflow.blocks.${type}`),
           errorMessage: t('workflow.common.needAdd', { node: t(`workflow.blocks.${type}`) }),
+          canNavigate: false,
         })
       }
     })
@@ -316,12 +331,7 @@ export const useChecklistBeforePublish = () => {
       }
     }
 
-    const startNodesFiltered = nodes.filter(node =>
-      node.data.type === BlockEnum.Start
-      || node.data.type === BlockEnum.TriggerSchedule
-      || node.data.type === BlockEnum.TriggerWebhook
-      || node.data.type === BlockEnum.TriggerPlugin,
-    )
+    const startNodesFiltered = nodes.filter(node => START_NODE_TYPES.includes(node.data.type as BlockEnum))
 
     if (startNodesFiltered.length === 0) {
       notify({ type: 'error', message: t('workflow.common.needStartNode') })