feat(workflow): add clear button to workflow test run panel

Features: - Add refresh button to clear test run history (data, inputs, node highlights) - Persist workflowRunningData when closing panel (from previous commit) Code quality improvements: - Refactor to declarative pattern: effectiveTab derived from state, not set in effects - Replace && with ternary operators for conditional rendering (Vercel best practices) - Fix created_by type: change from string to object to match backend API - Remove `as any` type assertion, use proper type-safe access - Title now declaratively shows status based on workflowRunningData presence Files changed: - use-workflow-interactions.ts: add handleClearWorkflowRunHistory hook - workflow-preview.tsx: declarative tab state, clear button, type-safe props - types.ts: fix created_by type definition - test files: update mock data to match corrected types
2026-05-03 00:48:04 +08:00 · 2026-01-28 22:48:27 +08:00
parent 2df4445aa7
commit f16516549e
6 changed files with 157 additions and 121 deletions
--- a/web/app/components/rag-pipeline/components/panel/test-run/index.spec.tsx
+++ b/web/app/components/rag-pipeline/components/panel/test-run/index.spec.tsx
@ -111,7 +111,7 @@ const createMockWorkflowRunningData = (overrides: Partial<WorkflowRunningData> =
    elapsed_time: 1000,
    total_tokens: 100,
    created_at: Date.now(),
-    created_by: 'Test User',
+    created_by: { id: 'test-user-id', name: 'Test User', email: 'test@example.com' },
    total_steps: 5,
    exceptions_count: 0,
  },
--- a/web/app/components/rag-pipeline/components/panel/test-run/result/index.spec.tsx
+++ b/web/app/components/rag-pipeline/components/panel/test-run/result/index.spec.tsx
@ -124,7 +124,7 @@ const createMockWorkflowRunningData = (
    elapsed_time: 1000,
    total_tokens: 100,
    created_at: Date.now(),
-    created_by: 'test-user',
+    created_by: { id: 'test-user-id', name: 'Test User', email: 'test@example.com' },
    total_steps: 5,
    exceptions_count: 0,
  },
@ -1071,7 +1071,7 @@ describe('Result', () => {
          elapsed_time: 1500,
          total_tokens: 200,
          created_at: 1700000000000,
-          created_by: { name: 'Test User' } as unknown as string,
+          created_by: { id: 'test-user-id', name: 'Test User', email: 'test@example.com' },
          total_steps: 10,
          exceptions_count: 2,
        },
--- a/web/app/components/workflow/hooks/use-workflow-interactions.ts
+++ b/web/app/components/workflow/hooks/use-workflow-interactions.ts
@ -51,8 +51,19 @@ export const useWorkflowInteractions = () => {
    }
  }, [workflowStore, handleNodeCancelRunningStatus, handleEdgeCancelRunningStatus])

+  const handleClearWorkflowRunHistory = useCallback(() => {
+    workflowStore.setState({
+      workflowRunningData: undefined,
+      inputs: {},
+      files: [],
+    })
+    handleNodeCancelRunningStatus()
+    handleEdgeCancelRunningStatus()
+  }, [workflowStore, handleNodeCancelRunningStatus, handleEdgeCancelRunningStatus])
+
  return {
    handleCancelDebugAndPreviewPanel,
+    handleClearWorkflowRunHistory,
  }
 }

--- a/web/app/components/workflow/panel/workflow-preview.tsx
+++ b/web/app/components/workflow/panel/workflow-preview.tsx
@ -10,8 +10,11 @@ import {
  useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
+import ActionButton from '@/app/components/base/action-button'
 import Button from '@/app/components/base/button'
+import { RefreshCcw01 } from '@/app/components/base/icons/src/vender/line/arrows'
 import Loading from '@/app/components/base/loading'
+import Tooltip from '@/app/components/base/tooltip'
 import { cn } from '@/utils/classnames'
 import Toast from '../../base/toast'
 import {
@ -29,38 +32,40 @@ import InputsPanel from './inputs-panel'

 const WorkflowPreview = () => {
  const { t } = useTranslation()
-  const { handleCancelDebugAndPreviewPanel } = useWorkflowInteractions()
+  const { handleCancelDebugAndPreviewPanel, handleClearWorkflowRunHistory } = useWorkflowInteractions()
  const workflowRunningData = useStore(s => s.workflowRunningData)
  const isListening = useStore(s => s.isListening)
  const showInputsPanel = useStore(s => s.showInputsPanel)
  const workflowCanvasWidth = useStore(s => s.workflowCanvasWidth)
  const panelWidth = useStore(s => s.previewPanelWidth)
  const setPreviewPanelWidth = useStore(s => s.setPreviewPanelWidth)
-  const showDebugAndPreviewPanel = useStore(s => s.showDebugAndPreviewPanel)
-  const [currentTab, setCurrentTab] = useState<string>(showInputsPanel ? 'INPUT' : 'TRACING')
+  const [userSelectedTab, setUserSelectedTab] = useState<string | null>(null)

-  const switchTab = async (tab: string) => {
-    setCurrentTab(tab)
-  }
-
-  useEffect(() => {
-    if (showDebugAndPreviewPanel && showInputsPanel)
-      setCurrentTab('INPUT')
-  }, [showDebugAndPreviewPanel, showInputsPanel])
-
-  useEffect(() => {
+  const effectiveTab = (() => {
    if (isListening)
-      switchTab('DETAIL')
-  }, [isListening])
+      return 'DETAIL'

-  useEffect(() => {
-    const status = workflowRunningData?.result.status
-    if (!workflowRunningData)
-      return
+    if (workflowRunningData) {
+      const status = workflowRunningData.result.status
+      const isFinishedWithoutOutput = (status === WorkflowRunningStatus.Succeeded || status === WorkflowRunningStatus.Failed)
+        && !workflowRunningData.resultText
+        && !workflowRunningData.result.files?.length

-    if ((status === WorkflowRunningStatus.Succeeded || status === WorkflowRunningStatus.Failed) && !workflowRunningData.resultText && !workflowRunningData.result.files?.length)
-      switchTab('DETAIL')
-  }, [workflowRunningData])
+      if (isFinishedWithoutOutput && userSelectedTab === null)
+        return 'DETAIL'
+
+      return userSelectedTab ?? 'RESULT'
+    }
+
+    if (showInputsPanel)
+      return 'INPUT'
+
+    return 'TRACING'
+  })()
+
+  const handleTabChange = (tab: string) => {
+    setUserSelectedTab(tab)
+  }

  const [isResizing, setIsResizing] = useState(false)

@ -104,34 +109,48 @@ const WorkflowPreview = () => {
        onMouseDown={startResizing}
      />
      <div className="flex items-center justify-between p-4 pb-1 text-base font-semibold text-text-primary">
-        {`Test Run${formatWorkflowRunIdentifier(workflowRunningData?.result.finished_at)}`}
-        <div className="cursor-pointer p-1" onClick={() => handleCancelDebugAndPreviewPanel()}>
-          <RiCloseLine className="h-4 w-4 text-text-tertiary" />
+        {`Test Run${workflowRunningData ? formatWorkflowRunIdentifier(workflowRunningData.result.finished_at) : ''}`}
+        <div className="flex items-center gap-1">
+          <Tooltip popupContent={t('operation.refresh', { ns: 'common' })}>
+            <ActionButton onClick={() => {
+              setUserSelectedTab(null)
+              handleClearWorkflowRunHistory()
+            }}
+            >
+              <RefreshCcw01 className="h-4 w-4" />
+            </ActionButton>
+          </Tooltip>
+          <div className="mx-3 h-3.5 w-[1px] bg-divider-regular" />
+          <div className="cursor-pointer p-1" onClick={() => handleCancelDebugAndPreviewPanel()}>
+            <RiCloseLine className="h-4 w-4 text-text-tertiary" />
+          </div>
        </div>
      </div>
      <div className="relative flex grow flex-col">
        <div className="flex shrink-0 items-center border-b-[0.5px] border-divider-subtle px-4">
-          {showInputsPanel && (
-            <div
-              className={cn(
-                'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] font-semibold leading-[18px] text-text-tertiary',
-                currentTab === 'INPUT' && '!border-[rgb(21,94,239)] text-text-secondary',
-              )}
-              onClick={() => switchTab('INPUT')}
-            >
-              {t('input', { ns: 'runLog' })}
-            </div>
-          )}
+          {showInputsPanel
+            ? (
+                <div
+                  className={cn(
+                    'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] font-semibold leading-[18px] text-text-tertiary',
+                    effectiveTab === 'INPUT' && '!border-[rgb(21,94,239)] text-text-secondary',
+                  )}
+                  onClick={() => handleTabChange('INPUT')}
+                >
+                  {t('input', { ns: 'runLog' })}
+                </div>
+              )
+            : null}
          <div
            className={cn(
              'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] font-semibold leading-[18px] text-text-tertiary',
-              currentTab === 'RESULT' && '!border-[rgb(21,94,239)] text-text-secondary',
+              effectiveTab === 'RESULT' && '!border-[rgb(21,94,239)] text-text-secondary',
              !workflowRunningData && '!cursor-not-allowed opacity-30',
            )}
            onClick={() => {
              if (!workflowRunningData)
                return
-              switchTab('RESULT')
+              handleTabChange('RESULT')
            }}
          >
            {t('result', { ns: 'runLog' })}
@ -139,13 +158,13 @@ const WorkflowPreview = () => {
          <div
            className={cn(
              'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] font-semibold leading-[18px] text-text-tertiary',
-              currentTab === 'DETAIL' && '!border-[rgb(21,94,239)] text-text-secondary',
+              effectiveTab === 'DETAIL' && '!border-[rgb(21,94,239)] text-text-secondary',
              !workflowRunningData && '!cursor-not-allowed opacity-30',
            )}
            onClick={() => {
              if (!workflowRunningData)
                return
-              switchTab('DETAIL')
+              handleTabChange('DETAIL')
            }}
          >
            {t('detail', { ns: 'runLog' })}
@ -153,13 +172,13 @@ const WorkflowPreview = () => {
          <div
            className={cn(
              'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] font-semibold leading-[18px] text-text-tertiary',
-              currentTab === 'TRACING' && '!border-[rgb(21,94,239)] text-text-secondary',
+              effectiveTab === 'TRACING' && '!border-[rgb(21,94,239)] text-text-secondary',
              !workflowRunningData && '!cursor-not-allowed opacity-30',
            )}
            onClick={() => {
              if (!workflowRunningData)
                return
-              switchTab('TRACING')
+              handleTabChange('TRACING')
            }}
          >
            {t('tracing', { ns: 'runLog' })}
@ -167,75 +186,85 @@ const WorkflowPreview = () => {
        </div>
        <div className={cn(
          'h-0 grow overflow-y-auto rounded-b-2xl bg-components-panel-bg',
-          (currentTab === 'RESULT' || currentTab === 'TRACING') && '!bg-background-section-burn',
+          (effectiveTab === 'RESULT' || effectiveTab === 'TRACING') && '!bg-background-section-burn',
        )}
        >
-          {currentTab === 'INPUT' && showInputsPanel && (
-            <InputsPanel onRun={() => switchTab('RESULT')} />
-          )}
-          {currentTab === 'RESULT' && (
-            <>
-              <ResultText
-                isRunning={workflowRunningData?.result?.status === WorkflowRunningStatus.Running || !workflowRunningData?.result}
-                outputs={workflowRunningData?.resultText}
-                llmGenerationItems={workflowRunningData?.resultLLMGenerationItems}
-                allFiles={workflowRunningData?.result?.files}
-                error={workflowRunningData?.result?.error}
-                onClick={() => switchTab('DETAIL')}
-              />
-              {(workflowRunningData?.result.status === WorkflowRunningStatus.Succeeded && workflowRunningData?.resultText && typeof workflowRunningData?.resultText === 'string') && (
-                <Button
-                  className={cn('mb-4 ml-4 space-x-1')}
-                  onClick={() => {
-                    const content = workflowRunningData?.resultText
-                    if (typeof content === 'string')
-                      copy(content)
-                    else
-                      copy(JSON.stringify(content))
-                    Toast.notify({ type: 'success', message: t('actionMsg.copySuccessfully', { ns: 'common' }) })
-                  }}
-                >
-                  <RiClipboardLine className="h-3.5 w-3.5" />
-                  <div>{t('operation.copy', { ns: 'common' })}</div>
-                </Button>
-              )}
-            </>
-          )}
-          {currentTab === 'DETAIL' && (
-            <ResultPanel
-              inputs={workflowRunningData?.result?.inputs}
-              inputs_truncated={workflowRunningData?.result?.inputs_truncated}
-              process_data={workflowRunningData?.result?.process_data}
-              process_data_truncated={workflowRunningData?.result?.process_data_truncated}
-              outputs={workflowRunningData?.result?.outputs}
-              outputs_truncated={workflowRunningData?.result?.outputs_truncated}
-              outputs_full_content={workflowRunningData?.result?.outputs_full_content}
-              status={workflowRunningData?.result?.status || ''}
-              error={workflowRunningData?.result?.error}
-              elapsed_time={workflowRunningData?.result?.elapsed_time}
-              total_tokens={workflowRunningData?.result?.total_tokens}
-              created_at={workflowRunningData?.result?.created_at}
-              created_by={(workflowRunningData?.result?.created_by as any)?.name}
-              steps={workflowRunningData?.result?.total_steps}
-              exceptionCounts={workflowRunningData?.result?.exceptions_count}
-            />
-          )}
-          {currentTab === 'DETAIL' && !workflowRunningData?.result && (
-            <div className="flex h-full items-center justify-center bg-components-panel-bg">
-              <Loading />
-            </div>
-          )}
-          {currentTab === 'TRACING' && (
-            <TracingPanel
-              className="bg-background-section-burn"
-              list={workflowRunningData?.tracing || []}
-            />
-          )}
-          {currentTab === 'TRACING' && !workflowRunningData?.tracing?.length && (
-            <div className="flex h-full items-center justify-center !bg-background-section-burn">
-              <Loading />
-            </div>
-          )}
+          {effectiveTab === 'INPUT' && showInputsPanel
+            ? <InputsPanel onRun={() => handleTabChange('RESULT')} />
+            : null}
+          {effectiveTab === 'RESULT'
+            ? (
+                <>
+                  <ResultText
+                    isRunning={workflowRunningData?.result?.status === WorkflowRunningStatus.Running || !workflowRunningData?.result}
+                    outputs={workflowRunningData?.resultText}
+                    llmGenerationItems={workflowRunningData?.resultLLMGenerationItems}
+                    allFiles={workflowRunningData?.result?.files}
+                    error={workflowRunningData?.result?.error}
+                    onClick={() => handleTabChange('DETAIL')}
+                  />
+                  {(workflowRunningData?.result.status === WorkflowRunningStatus.Succeeded && workflowRunningData?.resultText && typeof workflowRunningData?.resultText === 'string') && (
+                    <Button
+                      className={cn('mb-4 ml-4 space-x-1')}
+                      onClick={() => {
+                        const content = workflowRunningData?.resultText
+                        if (typeof content === 'string')
+                          copy(content)
+                        else
+                          copy(JSON.stringify(content))
+                        Toast.notify({ type: 'success', message: t('actionMsg.copySuccessfully', { ns: 'common' }) })
+                      }}
+                    >
+                      <RiClipboardLine className="h-3.5 w-3.5" />
+                      <div>{t('operation.copy', { ns: 'common' })}</div>
+                    </Button>
+                  )}
+                </>
+              )
+            : null}
+          {effectiveTab === 'DETAIL'
+            ? (
+                <ResultPanel
+                  inputs={workflowRunningData?.result?.inputs}
+                  inputs_truncated={workflowRunningData?.result?.inputs_truncated}
+                  process_data={workflowRunningData?.result?.process_data}
+                  process_data_truncated={workflowRunningData?.result?.process_data_truncated}
+                  outputs={workflowRunningData?.result?.outputs}
+                  outputs_truncated={workflowRunningData?.result?.outputs_truncated}
+                  outputs_full_content={workflowRunningData?.result?.outputs_full_content}
+                  status={workflowRunningData?.result?.status || ''}
+                  error={workflowRunningData?.result?.error}
+                  elapsed_time={workflowRunningData?.result?.elapsed_time}
+                  total_tokens={workflowRunningData?.result?.total_tokens}
+                  created_at={workflowRunningData?.result?.created_at}
+                  created_by={workflowRunningData?.result?.created_by?.name}
+                  steps={workflowRunningData?.result?.total_steps}
+                  exceptionCounts={workflowRunningData?.result?.exceptions_count}
+                />
+              )
+            : null}
+          {effectiveTab === 'DETAIL' && !workflowRunningData?.result
+            ? (
+                <div className="flex h-full items-center justify-center bg-components-panel-bg">
+                  <Loading />
+                </div>
+              )
+            : null}
+          {effectiveTab === 'TRACING'
+            ? (
+                <TracingPanel
+                  className="bg-background-section-burn"
+                  list={workflowRunningData?.tracing || []}
+                />
+              )
+            : null}
+          {effectiveTab === 'TRACING' && !workflowRunningData?.tracing?.length
+            ? (
+                <div className="flex h-full items-center justify-center !bg-background-section-burn">
+                  <Loading />
+                </div>
+              )
+            : null}
        </div>
      </div>
    </div>
--- a/web/app/components/workflow/types.ts
+++ b/web/app/components/workflow/types.ts
@ -467,7 +467,11 @@ export type WorkflowRunningData = {
    elapsed_time?: number
    total_tokens?: number
    created_at?: number
-    created_by?: string
+    created_by?: {
+      id: string
+      name: string
+      email: string
+    }
    finished_at?: number
    steps?: number
    showSteps?: boolean
--- a/web/eslint-suppressions.json
+++ b/web/eslint-suppressions.json
@ -3756,14 +3756,6 @@
      "count": 2
    }
  },
-  "app/components/workflow/panel/workflow-preview.tsx": {
-    "react-hooks-extra/no-direct-set-state-in-use-effect": {
-      "count": 1
-    },
-    "ts/no-explicit-any": {
-      "count": 1
-    }
-  },
  "app/components/workflow/run/hooks.ts": {
    "ts/no-explicit-any": {
      "count": 1