mirror of
https://github.com/langgenius/dify.git
synced 2026-05-06 02:18:08 +08:00
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
This commit is contained in:
yyh
@ -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>
|
||||
|
||||
Reference in New Issue
Block a user