Chore/slice workflow (#18351)

web/app/components/workflow/hooks-store/index.ts

@@ -0,0 +1,2 @@
+export * from './provider'
+export * from './store'

web/app/components/workflow/hooks-store/provider.tsx

@@ -0,0 +1,36 @@
+import {
+  createContext,
+  useEffect,
+  useRef,
+} from 'react'
+import { useStore } from 'reactflow'
+import {
+  createHooksStore,
+} from './store'
+import type { Shape } from './store'
+
+type HooksStore = ReturnType<typeof createHooksStore>
+export const HooksStoreContext = createContext<HooksStore | null | undefined>(null)
+type HooksStoreContextProviderProps = Partial<Shape> & {
+  children: React.ReactNode
+}
+export const HooksStoreContextProvider = ({ children, ...restProps }: HooksStoreContextProviderProps) => {
+  const storeRef = useRef<HooksStore | undefined>(undefined)
+  const d3Selection = useStore(s => s.d3Selection)
+  const d3Zoom = useStore(s => s.d3Zoom)
+
+  useEffect(() => {
+    if (storeRef.current && d3Selection && d3Zoom)
+      storeRef.current.getState().refreshAll(restProps)
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [d3Selection, d3Zoom])
+
+  if (!storeRef.current)
+    storeRef.current = createHooksStore(restProps)
+
+  return (
+    <HooksStoreContext.Provider value={storeRef.current}>
+      {children}
+    </HooksStoreContext.Provider>
+  )
+}

web/app/components/workflow/hooks-store/store.ts

@@ -0,0 +1,72 @@
+import { useContext } from 'react'
+import {
+  noop,
+} from 'lodash-es'
+import {
+  useStore as useZustandStore,
+} from 'zustand'
+import { createStore } from 'zustand/vanilla'
+import { HooksStoreContext } from './provider'
+
+type CommonHooksFnMap = {
+  doSyncWorkflowDraft: (
+    notRefreshWhenSyncError?: boolean,
+    callback?: {
+      onSuccess?: () => void
+      onError?: () => void
+      onSettled?: () => void
+    }
+  ) => Promise<void>
+  syncWorkflowDraftWhenPageClose: () => void
+  handleBackupDraft: () => void
+  handleLoadBackupDraft: () => void
+  handleRestoreFromPublishedWorkflow: (...args: any[]) => void
+  handleRun: (...args: any[]) => void
+  handleStopRun: (...args: any[]) => void
+  handleStartWorkflowRun: () => void
+  handleWorkflowStartRunInWorkflow: () => void
+  handleWorkflowStartRunInChatflow: () => void
+}
+
+export type Shape = {
+  refreshAll: (props: Partial<CommonHooksFnMap>) => void
+} & CommonHooksFnMap
+
+export const createHooksStore = ({
+  doSyncWorkflowDraft = async () => noop(),
+  syncWorkflowDraftWhenPageClose = noop,
+  handleBackupDraft = noop,
+  handleLoadBackupDraft = noop,
+  handleRestoreFromPublishedWorkflow = noop,
+  handleRun = noop,
+  handleStopRun = noop,
+  handleStartWorkflowRun = noop,
+  handleWorkflowStartRunInWorkflow = noop,
+  handleWorkflowStartRunInChatflow = noop,
+}: Partial<Shape>) => {
+  return createStore<Shape>(set => ({
+    refreshAll: props => set(state => ({ ...state, ...props })),
+    doSyncWorkflowDraft,
+    syncWorkflowDraftWhenPageClose,
+    handleBackupDraft,
+    handleLoadBackupDraft,
+    handleRestoreFromPublishedWorkflow,
+    handleRun,
+    handleStopRun,
+    handleStartWorkflowRun,
+    handleWorkflowStartRunInWorkflow,
+    handleWorkflowStartRunInChatflow,
+  }))
+}
+
+export function useHooksStore<T>(selector: (state: Shape) => T): T {
+  const store = useContext(HooksStoreContext)
+  if (!store)
+    throw new Error('Missing HooksStoreContext.Provider in the tree')
+
+  return useZustandStore(store, selector)
+}
+
+export const useHooksStoreApi = () => {
+  return useContext(HooksStoreContext)!
+}