Fix/single run panel show parent scrollbar (#5574)

Co-authored-by: StyleZhang <jasonapring2015@outlook.com>

web/app/components/workflow/nodes/_base/hooks/use-one-step-run.ts

@@ -12,6 +12,7 @@ import { getNodeInfoById, isSystemVar, toNodeOutputVars } from '@/app/components
 import type { CommonNodeType, InputVar, ValueSelector, Var, Variable } from '@/app/components/workflow/types'
 import { BlockEnum, InputVarType, NodeRunningStatus, VarType } from '@/app/components/workflow/types'
 import { useStore as useAppStore } from '@/app/components/app/store'
+import { useWorkflowStore } from '@/app/components/workflow/store'
 import { getIterationSingleNodeRunUrl, singleNodeRun } from '@/service/workflow'
 import Toast from '@/app/components/base/toast'
 import LLMDefault from '@/app/components/workflow/nodes/llm/default'
@@ -164,6 +165,12 @@ const useOneStepRun = <T>({
     }
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [data._isSingleRun])
+
+  const workflowStore = useWorkflowStore()
+  useEffect(() => {
+    workflowStore.getState().setShowSingleRunPanel(!!isShowSingleRun)
+  }, [isShowSingleRun])
+
   const hideSingleRun = () => {
     handleNodeDataUpdate({
       id,

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

@@ -36,6 +36,7 @@ import { canRunBySingle } from '@/app/components/workflow/utils'
 import TooltipPlus from '@/app/components/base/tooltip-plus'
 import type { Node } from '@/app/components/workflow/types'
 import { useStore as useAppStore } from '@/app/components/app/store'
+import { useStore } from '@/app/components/workflow/store'
 
 type BasePanelProps = {
   children: ReactElement
@@ -50,6 +51,7 @@ const BasePanel: FC<BasePanelProps> = ({
   const { showMessageLogModal } = useAppStore(useShallow(state => ({
     showMessageLogModal: state.showMessageLogModal,
   })))
+  const showSingleRunPanel = useStore(s => s.showSingleRunPanel)
   const panelWidth = localStorage.getItem('workflow-node-panel-width') ? parseFloat(localStorage.getItem('workflow-node-panel-width')!) : 420
   const {
     setPanelWidth,
@@ -99,7 +101,7 @@ const BasePanel: FC<BasePanelProps> = ({
       </div>
       <div
         ref={containerRef}
-        className='relative h-full bg-white shadow-lg border-[0.5px] border-gray-200 rounded-2xl overflow-y-auto'
+        className={cn('relative h-full bg-white shadow-lg border-[0.5px] border-gray-200 rounded-2xl', showSingleRunPanel ? 'overflow-hidden' : 'overflow-y-auto')}
         style={{
           width: `${panelWidth}px`,
         }}

web/app/components/workflow/store.ts

@@ -28,6 +28,8 @@ type PreviewRunningData = WorkflowRunningData & {
 type Shape = {
   appId: string
   panelWidth: number
+  showSingleRunPanel: boolean
+  setShowSingleRunPanel: (showSingleRunPanel: boolean) => void
   workflowRunningData?: PreviewRunningData
   setWorkflowRunningData: (workflowData: PreviewRunningData) => void
   historyWorkflowData?: HistoryWorkflowData
@@ -137,6 +139,8 @@ export const createWorkflowStore = () => {
   return createStore<Shape>(set => ({
     appId: '',
     panelWidth: localStorage.getItem('workflow-node-panel-width') ? parseFloat(localStorage.getItem('workflow-node-panel-width')!) : 420,
+    showSingleRunPanel: false,
+    setShowSingleRunPanel: showSingleRunPanel => set(() => ({ showSingleRunPanel })),
     workflowRunningData: undefined,
     setWorkflowRunningData: workflowRunningData => set(() => ({ workflowRunningData })),
     historyWorkflowData: undefined,