From 512b6e4b1481f574e6ee264cbbed642687a12783 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Wed, 23 Apr 2025 15:05:46 +0800
Subject: [PATCH] feat: last run no data

---
 .../_base/components/workflow-panel/index.tsx |  8 ++---
 .../{last-run.tsx => last-run/index.tsx}      |  8 ++++-
 .../workflow-panel/last-run/no-data.tsx       | 30 +++++++++++++++++++
 3 files changed, 41 insertions(+), 5 deletions(-)
 rename web/app/components/workflow/nodes/_base/components/workflow-panel/{last-run.tsx => last-run/index.tsx} (88%)
 create mode 100644 web/app/components/workflow/nodes/_base/components/workflow-panel/last-run/no-data.tsx

diff --git a/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx b/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx
index 42d00c7606..c982f0ca15 100644
--- a/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx
@@ -167,7 +167,7 @@ const BasePanel: FC<BasePanelProps> = ({
     setSingleRunParams(childPanelRef.current?.singleRunParams)
   }, [doSetRunInputData])
 
-  const [tabType, setTabType] = useState<TabType>(TabType.settings)
+  const [tabType, setTabType] = useState<TabType>(TabType.lastRun)
   const handleRun = async (data: Record<string, any>) => {
     setTabType(TabType.lastRun)
     callRunApi(data)
@@ -177,7 +177,7 @@ const BasePanel: FC<BasePanelProps> = ({
 
   return (
     <div className={cn(
-      'relative mr-1 h-full',
+      'relative mr-1  h-full',
       showMessageLogModal && '!absolute -top-[5px] right-[416px] z-0 !mr-0 w-[384px] overflow-hidden rounded-2xl border-[0.5px] border-components-panel-border shadow-lg transition-all',
     )}>
       <div
@@ -187,12 +187,12 @@ const BasePanel: FC<BasePanelProps> = ({
       </div>
       <div
         ref={containerRef}
-        className={cn('h-full rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg', showSingleRunPanel ? 'overflow-hidden' : 'overflow-y-auto')}
+        className={cn('flex h-full flex-col rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg', showSingleRunPanel ? 'overflow-hidden' : 'overflow-y-auto')}
         style={{
           width: `${nodePanelWidth}px`,
         }}
       >
-        <div className='sticky top-0 z-10 border-b-[0.5px] border-divider-regular bg-components-panel-bg'>
+        <div className='sticky top-0 z-10 shrink-0 border-b-[0.5px] border-divider-regular bg-components-panel-bg'>
           <div className='flex items-center px-4 pb-1 pt-4'>
             <BlockIcon
               className='mr-1 shrink-0'
diff --git a/web/app/components/workflow/nodes/_base/components/workflow-panel/last-run.tsx b/web/app/components/workflow/nodes/_base/components/workflow-panel/last-run/index.tsx
similarity index 88%
rename from web/app/components/workflow/nodes/_base/components/workflow-panel/last-run.tsx
rename to web/app/components/workflow/nodes/_base/components/workflow-panel/last-run/index.tsx
index 5d64e39165..508802a55b 100644
--- a/web/app/components/workflow/nodes/_base/components/workflow-panel/last-run.tsx
+++ b/web/app/components/workflow/nodes/_base/components/workflow-panel/last-run/index.tsx
@@ -4,6 +4,7 @@ import { useWorkflowStore } from '@/app/components/workflow/store'
 import { NodeRunningStatus } from '@/app/components/workflow/types'
 import type { FC } from 'react'
 import React, { useEffect, useState } from 'react'
+import NoData from './no-data'
 
 type Props = {
   nodeId: string
@@ -26,12 +27,17 @@ const LastRun: FC<Props> = ({
     setRunResult(getLastRunNodeInfo(nodeId))
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [runningStatus])
+
+  const handleSingleRun = () => {
+    console.log('run')
+  }
+
   if (isRunning)
     return <ResultPanel status='running' showSteps={false} />
 
   if (!runResult) {
     return (
-      <div>no data</div>
+      <NoData onSingleRun={handleSingleRun} />
     )
   }
   return (
diff --git a/web/app/components/workflow/nodes/_base/components/workflow-panel/last-run/no-data.tsx b/web/app/components/workflow/nodes/_base/components/workflow-panel/last-run/no-data.tsx
new file mode 100644
index 0000000000..734d894811
--- /dev/null
+++ b/web/app/components/workflow/nodes/_base/components/workflow-panel/last-run/no-data.tsx
@@ -0,0 +1,30 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { ClockPlay } from '@/app/components/base/icons/src/vender/line/time'
+import Button from '@/app/components/base/button'
+import { RiPlayLine } from '@remixicon/react'
+
+type Props = {
+  onSingleRun: () => void
+}
+
+const NoData: FC<Props> = ({
+  onSingleRun,
+}) => {
+  return (
+    <div className='flex h-0 grow flex-col items-center justify-center'>
+      <ClockPlay className='h-8 w-8 text-text-quaternary' />
+      <div className='system-xs-regular my-2 text-text-tertiary'>The results of the last run will be displayed here</div>
+      <Button
+        className='flex'
+        size='small'
+        onClick={onSingleRun}
+      >
+        <RiPlayLine className='mr-1 h-3.5 w-3.5' />
+        <div>Run this node</div>
+      </Button>
+    </div>
+  )
+}
+export default React.memo(NoData)