refactor(web): migrate workflow run history from useSWR to TanStack Query (#30077)

web/app/components/rag-pipeline/components/rag-pipeline-header/index.tsx

@@ -8,7 +8,6 @@ import Header from '@/app/components/workflow/header'
 import {
   useStore,
 } from '@/app/components/workflow/store'
-import { fetchWorkflowRunHistory } from '@/service/workflow'
 import InputFieldButton from './input-field-button'
 import Publisher from './publisher'
 import RunMode from './run-mode'
@@ -21,7 +20,6 @@ const RagPipelineHeader = () => {
   const viewHistoryProps = useMemo(() => {
     return {
       historyUrl: `/rag/pipelines/${pipelineId}/workflow-runs`,
-      historyFetcher: fetchWorkflowRunHistory,
     }
   }, [pipelineId])
 

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

@@ -58,16 +58,12 @@ vi.mock('@/app/components/app/store', () => ({
 vi.mock('@/app/components/workflow/header', () => ({
   __esModule: true,
   default: (props: HeaderProps) => {
-    const historyFetcher = props.normal?.runAndHistoryProps?.viewHistoryProps?.historyFetcher
-    const hasHistoryFetcher = typeof historyFetcher === 'function'
-
     return (
       <div
         data-testid="workflow-header"
         data-show-run={String(Boolean(props.normal?.runAndHistoryProps?.showRunButton))}
         data-show-preview={String(Boolean(props.normal?.runAndHistoryProps?.showPreviewButton))}
         data-history-url={props.normal?.runAndHistoryProps?.viewHistoryProps?.historyUrl ?? ''}
-        data-has-history-fetcher={String(hasHistoryFetcher)}
       >
         <button
           type="button"
@@ -86,11 +82,6 @@ vi.mock('@/app/components/workflow/header', () => ({
   },
 }))
 
-vi.mock('@/service/workflow', () => ({
-  __esModule: true,
-  fetchWorkflowRunHistory: vi.fn(),
-}))
-
 vi.mock('@/service/use-workflow', () => ({
   __esModule: true,
   useResetWorkflowVersionHistory: () => mockResetWorkflowVersionHistory,
@@ -127,7 +118,6 @@ describe('WorkflowHeader', () => {
       expect(header).toHaveAttribute('data-show-run', 'false')
       expect(header).toHaveAttribute('data-show-preview', 'true')
       expect(header).toHaveAttribute('data-history-url', '/apps/app-id/advanced-chat/workflow-runs')
-      expect(header).toHaveAttribute('data-has-history-fetcher', 'true')
     })
 
     it('should configure run mode when app is not in advanced chat mode', () => {
@@ -142,7 +132,6 @@ describe('WorkflowHeader', () => {
       expect(header).toHaveAttribute('data-show-run', 'true')
       expect(header).toHaveAttribute('data-show-preview', 'false')
       expect(header).toHaveAttribute('data-history-url', '/apps/app-id/workflow-runs')
-      expect(header).toHaveAttribute('data-has-history-fetcher', 'true')
     })
   })
 

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

@@ -8,9 +8,6 @@ import { useShallow } from 'zustand/react/shallow'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import Header from '@/app/components/workflow/header'
 import { useResetWorkflowVersionHistory } from '@/service/use-workflow'
-import {
-  fetchWorkflowRunHistory,
-} from '@/service/workflow'
 import { useIsChatMode } from '../../hooks'
 import ChatVariableTrigger from './chat-variable-trigger'
 import FeaturesTrigger from './features-trigger'
@@ -33,7 +30,6 @@ const WorkflowHeader = () => {
     return {
       onClearLogAndMessageModal: handleClearLogAndMessageModal,
       historyUrl: isChatMode ? `/apps/${appDetail!.id}/advanced-chat/workflow-runs` : `/apps/${appDetail!.id}/workflow-runs`,
-      historyFetcher: fetchWorkflowRunHistory,
     }
   }, [appDetail, isChatMode, handleClearLogAndMessageModal])
 

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

@@ -1,17 +1,13 @@
-import type { Fetcher } from 'swr'
-import type { WorkflowRunHistoryResponse } from '@/types/workflow'
 import {
   RiCheckboxCircleLine,
   RiCloseLine,
   RiErrorWarningLine,
 } from '@remixicon/react'
-import { noop } from 'lodash-es'
 import {
   memo,
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import useSWR from 'swr'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
 import {
   ClockPlay,
@@ -30,6 +26,7 @@ import {
   useWorkflowStore,
 } from '@/app/components/workflow/store'
 import { useFormatTimeFromNow } from '@/hooks/use-format-time-from-now'
+import { useWorkflowRunHistory } from '@/service/use-workflow'
 import { cn } from '@/utils/classnames'
 import {
   useIsChatMode,
@@ -44,13 +41,11 @@ export type ViewHistoryProps = {
   withText?: boolean
   onClearLogAndMessageModal?: () => void
   historyUrl?: string
-  historyFetcher?: Fetcher<WorkflowRunHistoryResponse, string>
 }
 const ViewHistory = ({
   withText,
   onClearLogAndMessageModal,
   historyUrl,
-  historyFetcher,
 }: ViewHistoryProps) => {
   const { t } = useTranslation()
   const isChatMode = useIsChatMode()
@@ -68,11 +63,11 @@ const ViewHistory = ({
   const { handleBackupDraft } = useWorkflowRun()
   const { closeAllInputFieldPanels } = useInputFieldPanel()
 
-  const fetcher = historyFetcher ?? (noop as Fetcher<WorkflowRunHistoryResponse, string>)
+  const shouldFetchHistory = open && !!historyUrl
   const {
     data,
     isLoading,
-  } = useSWR((open && historyUrl && historyFetcher) ? historyUrl : null, fetcher)
+  } = useWorkflowRunHistory(historyUrl, shouldFetchHistory)
 
   return (
     (