feat: version tag (#14949)

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

@@ -4,10 +4,10 @@ import {
   useCallback,
   useMemo,
 } from 'react'
-import { RiApps2AddLine } from '@remixicon/react'
+import { RiApps2AddLine, RiHistoryLine } from '@remixicon/react'
 import { useNodes } from 'reactflow'
 import { useTranslation } from 'react-i18next'
-import { useContext } from 'use-context-selector'
+import { useContext, useContextSelector } from 'use-context-selector'
 import {
   useStore,
   useWorkflowStore,
@@ -15,6 +15,7 @@ import {
 import {
   BlockEnum,
   InputVarType,
+  WorkflowVersion,
 } from '../types'
 import type { StartNodeType } from '../nodes/start/types'
 import {
@@ -27,7 +28,7 @@ import {
   useWorkflowRun,
 } from '../hooks'
 import AppPublisher from '../../app/app-publisher'
-import { ToastContext } from '../../base/toast'
+import Toast, { ToastContext } from '../../base/toast'
 import Divider from '../../base/divider'
 import RunAndHistory from './run-and-history'
 import EditingTitle from './editing-title'
@@ -36,18 +37,22 @@ import RestoringTitle from './restoring-title'
 import ViewHistory from './view-history'
 import ChatVariableButton from './chat-variable-button'
 import EnvButton from './env-button'
-import VersionHistoryModal from './version-history-modal'
+import VersionHistoryButton from './version-history-button'
 import Button from '@/app/components/base/button'
 import { useStore as useAppStore } from '@/app/components/app/store'
-import { publishWorkflow } from '@/service/workflow'
 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'
 
 const Header: FC = () => {
   const { t } = useTranslation()
   const workflowStore = useWorkflowStore()
   const appDetail = useAppStore(s => s.appDetail)
-  const appSidebarExpand = useAppStore(s => s.appSidebarExpand)
+  const setAppDetail = useAppStore(s => s.setAppDetail)
+  const systemFeatures = useContextSelector(AppContext, state => state.systemFeatures)
   const appID = appDetail?.id
   const isChatMode = useIsChatMode()
   const { nodesReadOnly, getNodesReadOnly } = useNodesReadOnly()
@@ -55,6 +60,10 @@ const Header: FC = () => {
   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)
@@ -104,27 +113,70 @@ const Header: FC = () => {
   const handleCancelRestore = useCallback(() => {
     handleLoadBackupDraft()
     workflowStore.setState({ isRestoring: false })
-  }, [workflowStore, handleLoadBackupDraft])
+    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)
-  }, [handleSyncWorkflowDraft, workflowStore])
+    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 onPublish = useCallback(async () => {
+  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 (handleCheckBeforePublish()) {
-      const res = await publishWorkflow(`/apps/${appID}/workflows/publish`)
+      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')
     }
-  }, [appID, handleCheckBeforePublish, notify, t, workflowStore])
+  }, [handleCheckBeforePublish, notify, t, workflowStore, publishWorkflow, resetWorkflowVersionHistory, updateAppDetail])
 
   const onStartRestoring = useCallback(() => {
     workflowStore.setState({ isRestoring: true })
@@ -132,7 +184,11 @@ const Header: FC = () => {
     // clear right panel
     if (selectedNode)
       handleNodeSelect(selectedNode.id, true)
-  }, [handleBackupDraft, workflowStore, handleNodeSelect, selectedNode])
+    setShowWorkflowVersionHistoryPanel(true)
+    setShowEnvPanel(false)
+    setShowDebugAndPreviewPanel(false)
+  }, [handleBackupDraft, workflowStore, handleNodeSelect, selectedNode,
+    setShowWorkflowVersionHistoryPanel, setShowEnvPanel, setShowDebugAndPreviewPanel])
 
   const onPublisherToggle = useCallback((state: boolean) => {
     if (state)
@@ -153,11 +209,6 @@ const Header: FC = () => {
       className='absolute top-0 left-0 z-10 flex items-center justify-between w-full px-3 h-14 bg-mask-top2bottom-gray-50-to-transparent'
     >
       <div>
-        {
-          appSidebarExpand === 'collapse' && (
-            <div className='system-xs-regular text-text-tertiary'>{appDetail?.name}</div>
-          )
-        }
         {
           normal && <EditingTitle />
         }
@@ -189,11 +240,11 @@ const Header: FC = () => {
                 inputs: variables,
                 onRefreshData: handleToolConfigureUpdate,
                 onPublish,
-                onRestore: onStartRestoring,
                 onToggle: onPublisherToggle,
                 crossAxisOffset: 4,
               }}
             />
+            <VersionHistoryButton onClick={onStartRestoring} />
           </div>
         )
       }
@@ -214,27 +265,23 @@ const Header: FC = () => {
       }
       {
         restoring && (
-          <div className='flex flex-col mt-auto'>
-            <div className='flex items-center justify-end my-4'>
-              <Button className='text-components-button-secondary-text' onClick={handleShowFeatures}>
-                <RiApps2AddLine className='w-4 h-4 mr-1 text-components-button-secondary-text' />
-                {t('workflow.common.features')}
-              </Button>
-              <div className='mx-2 w-[1px] h-3.5 bg-gray-200'></div>
-              <Button
-                className='mr-2'
-                onClick={handleCancelRestore}
-              >
-                {t('common.operation.cancel')}
-              </Button>
-              <Button
-                onClick={handleRestore}
-                variant='primary'
-              >
-                {t('workflow.common.restore')}
-              </Button>
-            </div>
-            <VersionHistoryModal />
+          <div className='flex justify-end items-center 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='w-4 h-4' />
+                <span className='px-0.5'>{t('workflow.common.exitVersions')}</span>
+              </div>
+            </Button>
           </div>
         )
       }