feat: last run frontend (#21369)

The frontend of feat: Persist Variables for Enhanced Debugging Workflow (#20699).

Co-authored-by: jZonG <jzongcode@gmail.com>

web/app/components/workflow/header/header-in-restoring.tsx

@@ -17,6 +17,8 @@ import {
 import Toast from '../../base/toast'
 import RestoringTitle from './restoring-title'
 import Button from '@/app/components/base/button'
+import { useStore as useAppStore } from '@/app/components/app/store'
+import { useInvalidAllLastRun } from '@/service/use-workflow'
 
 export type HeaderInRestoringProps = {
   onRestoreSettled?: () => void
@@ -26,6 +28,12 @@ const HeaderInRestoring = ({
 }: HeaderInRestoringProps) => {
   const { t } = useTranslation()
   const workflowStore = useWorkflowStore()
+  const appDetail = useAppStore.getState().appDetail
+
+  const invalidAllLastRun = useInvalidAllLastRun(appDetail!.id)
+  const {
+    deleteAllInspectVars,
+  } = workflowStore.getState()
   const currentVersion = useStore(s => s.currentVersion)
   const setShowWorkflowVersionHistoryPanel = useStore(s => s.setShowWorkflowVersionHistoryPanel)
 
@@ -61,7 +69,9 @@ const HeaderInRestoring = ({
         onRestoreSettled?.()
       },
     })
-  }, [handleSyncWorkflowDraft, workflowStore, setShowWorkflowVersionHistoryPanel, onRestoreSettled, t])
+    deleteAllInspectVars()
+    invalidAllLastRun()
+  }, [setShowWorkflowVersionHistoryPanel, workflowStore, handleSyncWorkflowDraft, deleteAllInspectVars, invalidAllLastRun, t, onRestoreSettled])
 
   return (
     <>

web/app/components/workflow/header/index.tsx

@@ -1,3 +1,4 @@
+import { usePathname } from 'next/navigation'
 import {
   useWorkflowMode,
 } from '../hooks'
@@ -6,7 +7,7 @@ import HeaderInNormal from './header-in-normal'
 import HeaderInHistory from './header-in-view-history'
 import type { HeaderInRestoringProps } from './header-in-restoring'
 import HeaderInRestoring from './header-in-restoring'
-
+import { useStore } from '../store'
 export type HeaderProps = {
   normal?: HeaderInNormalProps
   restoring?: HeaderInRestoringProps
@@ -15,16 +16,20 @@ const Header = ({
   normal: normalProps,
   restoring: restoringProps,
 }: HeaderProps) => {
+  const pathname = usePathname()
+  const inWorkflowCanvas = pathname.endsWith('/workflow')
   const {
     normal,
     restoring,
     viewHistory,
   } = useWorkflowMode()
+  const maximizeCanvas = useStore(s => s.maximizeCanvas)
 
   return (
     <div
       className='absolute left-0 top-0 z-10 flex h-14 w-full items-center justify-between bg-mask-top2bottom-gray-50-to-transparent px-3'
     >
+      {inWorkflowCanvas && maximizeCanvas && <div className='h-14 w-[52px]' />}
       {
         normal && (
           <HeaderInNormal

web/app/components/workflow/header/run-and-history.tsx

@@ -19,6 +19,8 @@ import cn from '@/utils/classnames'
 import {
   StopCircle,
 } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
+import { useEventEmitterContextContext } from '@/context/event-emitter'
+import { EVENT_WORKFLOW_STOP } from '@/app/components/workflow/variable-inspect/types'
 
 const RunMode = memo(() => {
   const { t } = useTranslation()
@@ -27,6 +29,16 @@ const RunMode = memo(() => {
   const workflowRunningData = useStore(s => s.workflowRunningData)
   const isRunning = workflowRunningData?.result.status === WorkflowRunningStatus.Running
 
+  const handleStop = () => {
+    handleStopRun(workflowRunningData?.task_id || '')
+  }
+
+  const { eventEmitter } = useEventEmitterContextContext()
+  eventEmitter?.useSubscription((v: any) => {
+    if (v.type === EVENT_WORKFLOW_STOP)
+      handleStop()
+  })
+
   return (
     <>
       <div
@@ -59,7 +71,7 @@ const RunMode = memo(() => {
         isRunning && (
           <div
             className='ml-0.5 flex h-7 w-7 cursor-pointer items-center justify-center rounded-md hover:bg-black/5'
-            onClick={() => handleStopRun(workflowRunningData?.task_id || '')}
+            onClick={handleStop}
           >
             <StopCircle className='h-4 w-4 text-components-button-ghost-text' />
           </div>