fix: leave page back last run status error

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

@@ -150,16 +150,27 @@ const BasePanel: FC<BasePanelProps> = ({
 
   const hasClickRunning = useRef(false)
   const [isPaused, setIsPaused] = useState(false)
+
   useEffect(() => {
     if(data._singleRunningStatus === NodeRunningStatus.Running) {
       hasClickRunning.current = true
       setIsPaused(false)
     }
-    else if(data._singleRunningStatus === undefined && hasClickRunning) {
+    else if(data._isSingleRun && data._singleRunningStatus === undefined && hasClickRunning) {
       setIsPaused(true)
       hasClickRunning.current = false
     }
-  }, [data._singleRunningStatus])
+  }, [data])
+
+  const updateNodeRunningStatus = useCallback((status: NodeRunningStatus) => {
+    handleNodeDataUpdate({
+      id,
+      data: {
+        ...data,
+        _singleRunningStatus: status,
+      },
+    })
+  }, [handleNodeDataUpdate, id, data])
 
   useEffect(() => {
     // console.log(`id changed: ${id}, hasClickRunning: ${hasClickRunning.current}`)
@@ -402,6 +413,7 @@ const BasePanel: FC<BasePanelProps> = ({
             canSingleRun={isSupportSingleRun}
             runningStatus={runningStatus}
             isRunAfterSingleRun={isRunAfterSingleRun}
+            updateNodeRunningStatus={updateNodeRunningStatus}
             onSingleRunClicked={handleSingleRun}
             nodeInfo={nodeInfo}
             singleRunResult={runResult!}

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

@@ -3,7 +3,7 @@ import type { ResultPanelProps } from '@/app/components/workflow/run/result-pane
 import ResultPanel from '@/app/components/workflow/run/result-panel'
 import { NodeRunningStatus } from '@/app/components/workflow/types'
 import type { FC } from 'react'
-import React, { useMemo } from 'react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import NoData from './no-data'
 import { useLastRun } from '@/service/use-workflow'
 import { RiLoader2Line } from '@remixicon/react'
@@ -14,6 +14,7 @@ type Props = {
   nodeId: string
   canSingleRun: boolean
   isRunAfterSingleRun: boolean
+  updateNodeRunningStatus: (status: NodeRunningStatus) => void
   nodeInfo?: NodeTracing
   runningStatus?: NodeRunningStatus
   onSingleRunClicked: () => void
@@ -26,6 +27,7 @@ const LastRun: FC<Props> = ({
   nodeId,
   canSingleRun,
   isRunAfterSingleRun,
+  updateNodeRunningStatus,
   nodeInfo,
   runningStatus: oneStepRunRunningStatus,
   onSingleRunClicked,
@@ -35,7 +37,13 @@ const LastRun: FC<Props> = ({
 }) => {
   const isOneStepRunSucceed = oneStepRunRunningStatus === NodeRunningStatus.Succeeded
   const isOneStepRunFailed = oneStepRunRunningStatus === NodeRunningStatus.Failed
-  const canRunLastRun = !isRunAfterSingleRun || isOneStepRunSucceed || isOneStepRunFailed
+  // hide page and return to page would lost the oneStepRunRunningStatus
+  const [hidePageOneStepFinishedStatus, setHidePageOneStepFinishedStatus] = React.useState<NodeRunningStatus | null>(null)
+  const [pageHasHide, setPageHasHide] = useState(false)
+  const [pageShowed, setPageShowed] = useState(false)
+
+  const hidePageOneStepRunFinished = [NodeRunningStatus.Succeeded, NodeRunningStatus.Failed].includes(hidePageOneStepFinishedStatus!)
+  const canRunLastRun = !isRunAfterSingleRun || isOneStepRunSucceed || isOneStepRunFailed || (pageHasHide && hidePageOneStepRunFinished)
   const { data: lastRunResult, isFetching, error } = useLastRun(appId, nodeId, canRunLastRun)
   const isRunning = useMemo(() => {
     if(isPaused)
@@ -47,7 +55,44 @@ const LastRun: FC<Props> = ({
   }, [isFetching, isPaused, isRunAfterSingleRun, oneStepRunRunningStatus])
 
   const noLastRun = (error as any)?.status === 404
-  const runResult = (canRunLastRun ? lastRunResult : singleRunResult) || {}
+  const runResult = (canRunLastRun ? lastRunResult : singleRunResult) || lastRunResult || {}
+
+  const resetHidePageStatus = useCallback(() => {
+    setPageHasHide(false)
+    setPageShowed(false)
+    setHidePageOneStepFinishedStatus(null)
+  }, [])
+  useEffect(() => {
+    if (pageShowed && hidePageOneStepFinishedStatus && (!oneStepRunRunningStatus || oneStepRunRunningStatus === NodeRunningStatus.NotStart)) {
+      updateNodeRunningStatus(hidePageOneStepFinishedStatus)
+      resetHidePageStatus()
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOneStepRunSucceed, isOneStepRunFailed, oneStepRunRunningStatus])
+
+  useEffect(() => {
+    if([NodeRunningStatus.Succeeded, NodeRunningStatus.Failed].includes(oneStepRunRunningStatus!))
+      setHidePageOneStepFinishedStatus(oneStepRunRunningStatus!)
+  }, [oneStepRunRunningStatus])
+
+  useEffect(() => {
+    resetHidePageStatus()
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [nodeId])
+
+  const handlePageVisibilityChange = useCallback(() => {
+      if (document.visibilityState === 'hidden')
+        setPageHasHide(true)
+      else
+        setPageShowed(true)
+    }, [])
+  useEffect(() => {
+    document.addEventListener('visibilitychange', handlePageVisibilityChange)
+
+    return () => {
+      document.removeEventListener('visibilitychange', handlePageVisibilityChange)
+    }
+  }, [handlePageVisibilityChange])
 
   if (isFetching && !isRunAfterSingleRun) {
     return (