Chore/slice workflow (#18351)

web/app/components/workflow/header/header-in-view-history.tsx

@@ -0,0 +1,50 @@
+import {
+  useCallback,
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  useWorkflowStore,
+} from '../store'
+import {
+  useWorkflowRun,
+} from '../hooks'
+import Divider from '../../base/divider'
+import RunningTitle from './running-title'
+import ViewHistory from './view-history'
+import Button from '@/app/components/base/button'
+import { ArrowNarrowLeft } from '@/app/components/base/icons/src/vender/line/arrows'
+
+const HeaderInHistory = () => {
+  const { t } = useTranslation()
+  const workflowStore = useWorkflowStore()
+
+  const {
+    handleLoadBackupDraft,
+  } = useWorkflowRun()
+
+  const handleGoBackToEdit = useCallback(() => {
+    handleLoadBackupDraft()
+    workflowStore.setState({ historyWorkflowData: undefined })
+  }, [workflowStore, handleLoadBackupDraft])
+
+  return (
+    <>
+      <div>
+        <RunningTitle />
+      </div>
+      <div className='flex items-center space-x-2'>
+        <ViewHistory withText />
+        <Divider type='vertical' className='mx-auto h-3.5' />
+        <Button
+          variant='primary'
+          onClick={handleGoBackToEdit}
+        >
+          <ArrowNarrowLeft className='mr-1 h-4 w-4' />
+          {t('workflow.common.goBackToEdit')}
+        </Button>
+      </div>
+    </>
+  )
+}
+
+export default HeaderInHistory