Chore/slice workflow (#18351)

web/app/components/workflow/header/editing-title.tsx

@@ -1,13 +1,13 @@
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useWorkflow } from '../hooks'
+import { useFormatTimeFromNow } from '../hooks'
 import { useStore } from '@/app/components/workflow/store'
 import useTimestamp from '@/hooks/use-timestamp'
 
 const EditingTitle = () => {
   const { t } = useTranslation()
   const { formatTime } = useTimestamp()
-  const { formatTimeFromNow } = useWorkflow()
+  const { formatTimeFromNow } = useFormatTimeFromNow()
   const draftUpdatedAt = useStore(state => state.draftUpdatedAt)
   const publishedAt = useStore(state => state.publishedAt)
   const isSyncingWorkflowDraft = useStore(s => s.isSyncingWorkflowDraft)

web/app/components/workflow/header/header-in-normal.tsx

@@ -0,0 +1,69 @@
+import {
+  useCallback,
+} from 'react'
+import { useNodes } from 'reactflow'
+import {
+  useStore,
+  useWorkflowStore,
+} from '../store'
+import type { StartNodeType } from '../nodes/start/types'
+import {
+  useNodesInteractions,
+  useNodesReadOnly,
+  useWorkflowRun,
+} from '../hooks'
+import Divider from '../../base/divider'
+import RunAndHistory from './run-and-history'
+import EditingTitle from './editing-title'
+import EnvButton from './env-button'
+import VersionHistoryButton from './version-history-button'
+
+export type HeaderInNormalProps = {
+  components?: {
+    left?: React.ReactNode
+    middle?: React.ReactNode
+  }
+}
+const HeaderInNormal = ({
+  components,
+}: HeaderInNormalProps) => {
+  const workflowStore = useWorkflowStore()
+  const { nodesReadOnly } = useNodesReadOnly()
+  const { handleNodeSelect } = useNodesInteractions()
+  const setShowWorkflowVersionHistoryPanel = useStore(s => s.setShowWorkflowVersionHistoryPanel)
+  const setShowEnvPanel = useStore(s => s.setShowEnvPanel)
+  const setShowDebugAndPreviewPanel = useStore(s => s.setShowDebugAndPreviewPanel)
+  const nodes = useNodes<StartNodeType>()
+  const selectedNode = nodes.find(node => node.data.selected)
+  const { handleBackupDraft } = useWorkflowRun()
+
+  const onStartRestoring = useCallback(() => {
+    workflowStore.setState({ isRestoring: true })
+    handleBackupDraft()
+    // clear right panel
+    if (selectedNode)
+      handleNodeSelect(selectedNode.id, true)
+    setShowWorkflowVersionHistoryPanel(true)
+    setShowEnvPanel(false)
+    setShowDebugAndPreviewPanel(false)
+  }, [handleBackupDraft, workflowStore, handleNodeSelect, selectedNode,
+    setShowWorkflowVersionHistoryPanel, setShowEnvPanel, setShowDebugAndPreviewPanel])
+
+  return (
+    <>
+      <div>
+        <EditingTitle />
+      </div>
+      <div className='flex items-center gap-2'>
+        {components?.left}
+        <EnvButton disabled={nodesReadOnly} />
+        <Divider type='vertical' className='mx-auto h-3.5' />
+        <RunAndHistory />
+        {components?.middle}
+        <VersionHistoryButton onClick={onStartRestoring} />
+      </div>
+    </>
+  )
+}
+
+export default HeaderInNormal

web/app/components/workflow/header/header-in-restoring.tsx

@@ -0,0 +1,93 @@
+import {
+  useCallback,
+} from 'react'
+import { RiHistoryLine } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import {
+  useStore,
+  useWorkflowStore,
+} from '../store'
+import {
+  WorkflowVersion,
+} from '../types'
+import {
+  useNodesSyncDraft,
+  useWorkflowRun,
+} from '../hooks'
+import Toast from '../../base/toast'
+import RestoringTitle from './restoring-title'
+import Button from '@/app/components/base/button'
+
+export type HeaderInRestoringProps = {
+  onRestoreSettled?: () => void
+}
+const HeaderInRestoring = ({
+  onRestoreSettled,
+}: HeaderInRestoringProps) => {
+  const { t } = useTranslation()
+  const workflowStore = useWorkflowStore()
+  const currentVersion = useStore(s => s.currentVersion)
+  const setShowWorkflowVersionHistoryPanel = useStore(s => s.setShowWorkflowVersionHistoryPanel)
+
+  const {
+    handleLoadBackupDraft,
+  } = useWorkflowRun()
+  const { handleSyncWorkflowDraft } = useNodesSyncDraft()
+
+  const handleCancelRestore = useCallback(() => {
+    handleLoadBackupDraft()
+    workflowStore.setState({ isRestoring: false })
+    setShowWorkflowVersionHistoryPanel(false)
+  }, [workflowStore, handleLoadBackupDraft, setShowWorkflowVersionHistoryPanel])
+
+  const handleRestore = useCallback(() => {
+    setShowWorkflowVersionHistoryPanel(false)
+    workflowStore.setState({ isRestoring: false })
+    workflowStore.setState({ backupDraft: undefined })
+    handleSyncWorkflowDraft(true, false, {
+      onSuccess: () => {
+        Toast.notify({
+          type: 'success',
+          message: t('workflow.versionHistory.action.restoreSuccess'),
+        })
+      },
+      onError: () => {
+        Toast.notify({
+          type: 'error',
+          message: t('workflow.versionHistory.action.restoreFailure'),
+        })
+      },
+      onSettled: () => {
+        onRestoreSettled?.()
+      },
+    })
+  }, [handleSyncWorkflowDraft, workflowStore, setShowWorkflowVersionHistoryPanel, onRestoreSettled, t])
+
+  return (
+    <>
+      <div>
+        <RestoringTitle />
+      </div>
+      <div className='flex items-center justify-end gap-x-2'>
+        <Button
+          onClick={handleRestore}
+          disabled={!currentVersion || currentVersion.version === WorkflowVersion.Draft}
+          variant='primary'
+        >
+          {t('workflow.common.restore')}
+        </Button>
+        <Button
+          className='text-components-button-secondary-accent-text'
+          onClick={handleCancelRestore}
+        >
+          <div className='flex items-center gap-x-0.5'>
+            <RiHistoryLine className='h-4 w-4' />
+            <span className='px-0.5'>{t('workflow.common.exitVersions')}</span>
+          </div>
+        </Button>
+      </div>
+    </>
+  )
+}
+
+export default HeaderInRestoring

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

web/app/components/workflow/header/index.tsx

@@ -1,292 +1,51 @@
-import type { FC } from 'react'
 import {
-  memo,
-  useCallback,
-  useMemo,
-} from 'react'
-import { RiApps2AddLine, RiHistoryLine } from '@remixicon/react'
-import { useNodes } from 'reactflow'
-import { useTranslation } from 'react-i18next'
-import { useContext, useContextSelector } from 'use-context-selector'
-import {
-  useStore,
-  useWorkflowStore,
-} from '../store'
-import {
-  BlockEnum,
-  InputVarType,
-  WorkflowVersion,
-} from '../types'
-import type { StartNodeType } from '../nodes/start/types'
-import {
-  useChecklistBeforePublish,
-  useIsChatMode,
-  useNodesInteractions,
-  useNodesReadOnly,
-  useNodesSyncDraft,
   useWorkflowMode,
-  useWorkflowRun,
 } from '../hooks'
-import AppPublisher from '../../app/app-publisher'
-import Toast, { ToastContext } from '../../base/toast'
-import Divider from '../../base/divider'
-import RunAndHistory from './run-and-history'
-import EditingTitle from './editing-title'
-import RunningTitle from './running-title'
-import RestoringTitle from './restoring-title'
-import ViewHistory from './view-history'
-import ChatVariableButton from './chat-variable-button'
-import EnvButton from './env-button'
-import VersionHistoryButton from './version-history-button'
-import Button from '@/app/components/base/button'
-import { useStore as useAppStore } from '@/app/components/app/store'
-import { ArrowNarrowLeft } from '@/app/components/base/icons/src/vender/line/arrows'
-import { useFeatures } from '@/app/components/base/features/hooks'
-import { usePublishWorkflow, useResetWorkflowVersionHistory } from '@/service/use-workflow'
-import type { PublishWorkflowParams } from '@/types/workflow'
-import { fetchAppDetail, fetchAppSSO } from '@/service/apps'
-import AppContext from '@/context/app-context'
+import type { HeaderInNormalProps } from './header-in-normal'
+import HeaderInNormal from './header-in-normal'
+import HeaderInHistory from './header-in-view-history'
+import type { HeaderInRestoringProps } from './header-in-restoring'
+import HeaderInRestoring from './header-in-restoring'
 
-const Header: FC = () => {
-  const { t } = useTranslation()
-  const workflowStore = useWorkflowStore()
-  const appDetail = useAppStore(s => s.appDetail)
-  const setAppDetail = useAppStore(s => s.setAppDetail)
-  const systemFeatures = useContextSelector(AppContext, state => state.systemFeatures)
-  const appID = appDetail?.id
-  const isChatMode = useIsChatMode()
-  const { nodesReadOnly, getNodesReadOnly } = useNodesReadOnly()
-  const { handleNodeSelect } = useNodesInteractions()
-  const publishedAt = useStore(s => s.publishedAt)
-  const draftUpdatedAt = useStore(s => s.draftUpdatedAt)
-  const toolPublished = useStore(s => s.toolPublished)
-  const currentVersion = useStore(s => s.currentVersion)
-  const setShowWorkflowVersionHistoryPanel = useStore(s => s.setShowWorkflowVersionHistoryPanel)
-  const setShowEnvPanel = useStore(s => s.setShowEnvPanel)
-  const setShowDebugAndPreviewPanel = useStore(s => s.setShowDebugAndPreviewPanel)
-  const nodes = useNodes<StartNodeType>()
-  const startNode = nodes.find(node => node.data.type === BlockEnum.Start)
-  const selectedNode = nodes.find(node => node.data.selected)
-  const startVariables = startNode?.data.variables
-  const fileSettings = useFeatures(s => s.features.file)
-  const variables = useMemo(() => {
-    const data = startVariables || []
-    if (fileSettings?.image?.enabled) {
-      return [
-        ...data,
-        {
-          type: InputVarType.files,
-          variable: '__image',
-          required: false,
-          label: 'files',
-        },
-      ]
-    }
-
-    return data
-  }, [fileSettings?.image?.enabled, startVariables])
-
-  const {
-    handleLoadBackupDraft,
-    handleBackupDraft,
-  } = useWorkflowRun()
-  const { handleCheckBeforePublish } = useChecklistBeforePublish()
-  const { handleSyncWorkflowDraft } = useNodesSyncDraft()
-  const { notify } = useContext(ToastContext)
+export type HeaderProps = {
+  normal?: HeaderInNormalProps
+  restoring?: HeaderInRestoringProps
+}
+const Header = ({
+  normal: normalProps,
+  restoring: restoringProps,
+}: HeaderProps) => {
   const {
     normal,
     restoring,
     viewHistory,
   } = useWorkflowMode()
 
-  const handleShowFeatures = useCallback(() => {
-    const {
-      showFeaturesPanel,
-      isRestoring,
-      setShowFeaturesPanel,
-    } = workflowStore.getState()
-    if (getNodesReadOnly() && !isRestoring)
-      return
-    setShowFeaturesPanel(!showFeaturesPanel)
-  }, [workflowStore, getNodesReadOnly])
-
-  const handleCancelRestore = useCallback(() => {
-    handleLoadBackupDraft()
-    workflowStore.setState({ isRestoring: false })
-    setShowWorkflowVersionHistoryPanel(false)
-  }, [workflowStore, handleLoadBackupDraft, setShowWorkflowVersionHistoryPanel])
-
-  const resetWorkflowVersionHistory = useResetWorkflowVersionHistory(appDetail!.id)
-
-  const handleRestore = useCallback(() => {
-    setShowWorkflowVersionHistoryPanel(false)
-    workflowStore.setState({ isRestoring: false })
-    workflowStore.setState({ backupDraft: undefined })
-    handleSyncWorkflowDraft(true, false, {
-      onSuccess: () => {
-        Toast.notify({
-          type: 'success',
-          message: t('workflow.versionHistory.action.restoreSuccess'),
-        })
-      },
-      onError: () => {
-        Toast.notify({
-          type: 'error',
-          message: t('workflow.versionHistory.action.restoreFailure'),
-        })
-      },
-      onSettled: () => {
-        resetWorkflowVersionHistory()
-      },
-    })
-  }, [handleSyncWorkflowDraft, workflowStore, setShowWorkflowVersionHistoryPanel, resetWorkflowVersionHistory, t])
-
-  const updateAppDetail = useCallback(async () => {
-    try {
-      const res = await fetchAppDetail({ url: '/apps', id: appID! })
-      if (systemFeatures.enable_web_sso_switch_component) {
-        const ssoRes = await fetchAppSSO({ appId: appID! })
-        setAppDetail({ ...res, enable_sso: ssoRes.enabled })
-      }
-      else {
-        setAppDetail({ ...res })
-      }
-    }
-    catch (error) {
-      console.error(error)
-    }
-  }, [appID, setAppDetail, systemFeatures.enable_web_sso_switch_component])
-
-  const { mutateAsync: publishWorkflow } = usePublishWorkflow(appID!)
-
-  const onPublish = useCallback(async (params?: PublishWorkflowParams) => {
-    if (await handleCheckBeforePublish()) {
-      const res = await publishWorkflow({
-        title: params?.title || '',
-        releaseNotes: params?.releaseNotes || '',
-      })
-
-      if (res) {
-        notify({ type: 'success', message: t('common.api.actionSuccess') })
-        updateAppDetail()
-        workflowStore.getState().setPublishedAt(res.created_at)
-        resetWorkflowVersionHistory()
-      }
-    }
-    else {
-      throw new Error('Checklist failed')
-    }
-  }, [handleCheckBeforePublish, notify, t, workflowStore, publishWorkflow, resetWorkflowVersionHistory, updateAppDetail])
-
-  const onStartRestoring = useCallback(() => {
-    workflowStore.setState({ isRestoring: true })
-    handleBackupDraft()
-    // clear right panel
-    if (selectedNode)
-      handleNodeSelect(selectedNode.id, true)
-    setShowWorkflowVersionHistoryPanel(true)
-    setShowEnvPanel(false)
-    setShowDebugAndPreviewPanel(false)
-  }, [handleBackupDraft, workflowStore, handleNodeSelect, selectedNode,
-    setShowWorkflowVersionHistoryPanel, setShowEnvPanel, setShowDebugAndPreviewPanel])
-
-  const onPublisherToggle = useCallback((state: boolean) => {
-    if (state)
-      handleSyncWorkflowDraft(true)
-  }, [handleSyncWorkflowDraft])
-
-  const handleGoBackToEdit = useCallback(() => {
-    handleLoadBackupDraft()
-    workflowStore.setState({ historyWorkflowData: undefined })
-  }, [workflowStore, handleLoadBackupDraft])
-
-  const handleToolConfigureUpdate = useCallback(() => {
-    workflowStore.setState({ toolPublished: true })
-  }, [workflowStore])
-
   return (
     <div
       className='absolute left-0 top-0 z-10 flex h-14 w-full items-center justify-between bg-mask-top2bottom-gray-50-to-transparent px-3'
     >
-      <div>
-        {
-          normal && <EditingTitle />
-        }
-        {
-          viewHistory && <RunningTitle />
-        }
-        {
-          restoring && <RestoringTitle />
-        }
-      </div>
       {
         normal && (
-          <div className='flex items-center gap-2'>
-            {/* <GlobalVariableButton disabled={nodesReadOnly} /> */}
-            {isChatMode && <ChatVariableButton disabled={nodesReadOnly} />}
-            <EnvButton disabled={nodesReadOnly} />
-            <Divider type='vertical' className='mx-auto h-3.5' />
-            <RunAndHistory />
-            <Button className='text-components-button-secondary-text' onClick={handleShowFeatures}>
-              <RiApps2AddLine className='mr-1 h-4 w-4 text-components-button-secondary-text' />
-              {t('workflow.common.features')}
-            </Button>
-            <AppPublisher
-              {...{
-                publishedAt,
-                draftUpdatedAt,
-                disabled: nodesReadOnly,
-                toolPublished,
-                inputs: variables,
-                onRefreshData: handleToolConfigureUpdate,
-                onPublish,
-                onToggle: onPublisherToggle,
-                crossAxisOffset: 4,
-              }}
-            />
-            <VersionHistoryButton onClick={onStartRestoring} />
-          </div>
+          <HeaderInNormal
+            {...normalProps}
+          />
         )
       }
       {
         viewHistory && (
-          <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>
+          <HeaderInHistory />
         )
       }
       {
         restoring && (
-          <div className='flex items-center justify-end gap-x-2'>
-            <Button
-              onClick={handleRestore}
-              disabled={!currentVersion || currentVersion.version === WorkflowVersion.Draft}
-              variant='primary'
-            >
-              {t('workflow.common.restore')}
-            </Button>
-            <Button
-              className='text-components-button-secondary-accent-text'
-              onClick={handleCancelRestore}
-            >
-              <div className='flex items-center gap-x-0.5'>
-                <RiHistoryLine className='h-4 w-4' />
-                <span className='px-0.5'>{t('workflow.common.exitVersions')}</span>
-              </div>
-            </Button>
-          </div>
+          <HeaderInRestoring
+            {...restoringProps}
+          />
         )
       }
     </div>
   )
 }
 
-export default memo(Header)
+export default Header

web/app/components/workflow/header/restoring-title.tsx

@@ -1,13 +1,13 @@
 import { memo, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useWorkflow } from '../hooks'
+import { useFormatTimeFromNow } from '../hooks'
 import { useStore } from '../store'
 import { WorkflowVersion } from '../types'
 import useTimestamp from '@/hooks/use-timestamp'
 
 const RestoringTitle = () => {
   const { t } = useTranslation()
-  const { formatTimeFromNow } = useWorkflow()
+  const { formatTimeFromNow } = useFormatTimeFromNow()
   const { formatTime } = useTimestamp()
   const currentVersion = useStore(state => state.currentVersion)
   const isDraft = currentVersion?.version === WorkflowVersion.Draft

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

@@ -11,9 +11,9 @@ import {
   RiErrorWarningLine,
 } from '@remixicon/react'
 import {
+  useFormatTimeFromNow,
   useIsChatMode,
   useNodesInteractions,
-  useWorkflow,
   useWorkflowInteractions,
   useWorkflowRun,
 } from '../hooks'
@@ -50,7 +50,7 @@ const ViewHistory = ({
   const { t } = useTranslation()
   const isChatMode = useIsChatMode()
   const [open, setOpen] = useState(false)
-  const { formatTimeFromNow } = useWorkflow()
+  const { formatTimeFromNow } = useFormatTimeFromNow()
   const {
     handleNodesCancelSelected,
   } = useNodesInteractions()