feat: workflow remove preview mode (#3941)

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

@@ -2,14 +2,15 @@ import type { FC } from 'react'
 import { memo, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useStoreApi } from 'reactflow'
+import cn from 'classnames'
 import {
   useStore,
   useWorkflowStore,
 } from '../store'
 import {
   useIsChatMode,
-  useNodesReadOnly,
   useNodesSyncDraft,
+  useWorkflowInteractions,
   useWorkflowRun,
 } from '../hooks'
 import {
@@ -23,6 +24,7 @@ import {
 } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
 import { Loading02 } from '@/app/components/base/icons/src/vender/line/general'
 import { useFeaturesStore } from '@/app/components/base/features/hooks'
+import { MessagePlay } from '@/app/components/base/icons/src/vender/line/communication'
 
 const RunMode = memo(() => {
   const { t } = useTranslation()
@@ -31,15 +33,12 @@ const RunMode = memo(() => {
   const featuresStore = useFeaturesStore()
   const {
     handleStopRun,
-    handleRunSetting,
     handleRun,
   } = useWorkflowRun()
   const {
     doSyncWorkflowDraft,
-    handleSyncWorkflowDraft,
   } = useNodesSyncDraft()
   const workflowRunningData = useStore(s => s.workflowRunningData)
-  const showInputsPanel = useStore(s => s.showInputsPanel)
   const isRunning = workflowRunningData?.result.status === WorkflowRunningStatus.Running
 
   const handleClick = useCallback(async () => {
@@ -55,23 +54,23 @@ const RunMode = memo(() => {
     const startNode = nodes.find(node => node.data.type === BlockEnum.Start)
     const startVariables = startNode?.data.variables || []
     const fileSettings = featuresStore!.getState().features.file
+    const {
+      setShowDebugAndPreviewPanel,
+      setShowInputsPanel,
+    } = workflowStore.getState()
 
     if (!startVariables.length && !fileSettings?.image?.enabled) {
       await doSyncWorkflowDraft()
-      handleRunSetting()
       handleRun({ inputs: {}, files: [] })
+      setShowDebugAndPreviewPanel(true)
+      setShowInputsPanel(false)
     }
     else {
-      workflowStore.setState({
-        historyWorkflowData: undefined,
-        showInputsPanel: true,
-      })
-      handleSyncWorkflowDraft(true)
+      setShowDebugAndPreviewPanel(true)
+      setShowInputsPanel(true)
     }
   }, [
     workflowStore,
-    handleSyncWorkflowDraft,
-    handleRunSetting,
     handleRun,
     doSyncWorkflowDraft,
     store,
@@ -81,12 +80,11 @@ const RunMode = memo(() => {
   return (
     <>
       <div
-        className={`
-          flex items-center px-1.5 h-7 rounded-md text-[13px] font-medium text-primary-600
-          hover:bg-primary-50 cursor-pointer
-          ${showInputsPanel && 'bg-primary-50'}
-          ${isRunning && 'bg-primary-50 !cursor-not-allowed'}
-        `}
+        className={cn(
+          'flex items-center px-1.5 h-7 rounded-md text-[13px] font-medium text-primary-600',
+          'hover:bg-primary-50 cursor-pointer',
+          isRunning && 'bg-primary-50 !cursor-not-allowed',
+        )}
         onClick={handleClick}
       >
         {
@@ -122,38 +120,34 @@ RunMode.displayName = 'RunMode'
 
 const PreviewMode = memo(() => {
   const { t } = useTranslation()
-  const { handleRunSetting } = useWorkflowRun()
-  const { handleSyncWorkflowDraft } = useNodesSyncDraft()
-  const { nodesReadOnly } = useNodesReadOnly()
+  const workflowStore = useWorkflowStore()
+  const { handleCancelDebugAndPreviewPanel } = useWorkflowInteractions()
 
   const handleClick = () => {
-    handleSyncWorkflowDraft(true)
-    handleRunSetting()
+    const {
+      showDebugAndPreviewPanel,
+      setShowDebugAndPreviewPanel,
+      setHistoryWorkflowData,
+    } = workflowStore.getState()
+
+    if (showDebugAndPreviewPanel)
+      handleCancelDebugAndPreviewPanel()
+    else
+      setShowDebugAndPreviewPanel(true)
+
+    setHistoryWorkflowData(undefined)
   }
 
   return (
     <div
-      className={`
-        flex items-center px-1.5 h-7 rounded-md text-[13px] font-medium text-primary-600
-        hover:bg-primary-50 cursor-pointer
-        ${nodesReadOnly && 'bg-primary-50 opacity-50 !cursor-not-allowed'}
-      `}
-      onClick={() => !nodesReadOnly && handleClick()}
+      className={cn(
+        'flex items-center px-1.5 h-7 rounded-md text-[13px] font-medium text-primary-600',
+        'hover:bg-primary-50 cursor-pointer',
+      )}
+      onClick={() => handleClick()}
     >
-      {
-        nodesReadOnly
-          ? (
-            <>
-              {t('workflow.common.inPreview')}
-            </>
-          )
-          : (
-            <>
-              <Play className='mr-1 w-4 h-4' />
-              {t('workflow.common.preview')}
-            </>
-          )
-      }
+      <MessagePlay className='mr-1 w-4 h-4' />
+      {t('workflow.common.debugAndPreview')}
     </div>
   )
 })