From 13ce6317f13acb6c0471e9e447ba7f3034b4ca84 Mon Sep 17 00:00:00 2001 From: zxhlyh Date: Thu, 8 May 2025 18:27:15 +0800 Subject: [PATCH] pipeline header --- .../components/workflow-header/index.tsx | 2 +- .../components/workflow-panel.tsx | 21 +++++++----- web/app/components/workflow/panel/index.tsx | 10 ++++++ .../panel/version-history-panel/index.tsx | 33 ++++++++++++------- web/service/use-workflow.ts | 19 ++++++----- web/types/workflow.ts | 4 +-- 6 files changed, 57 insertions(+), 32 deletions(-) diff --git a/web/app/components/workflow-app/components/workflow-header/index.tsx b/web/app/components/workflow-app/components/workflow-header/index.tsx index 69d0759274..53a050146e 100644 --- a/web/app/components/workflow-app/components/workflow-header/index.tsx +++ b/web/app/components/workflow-app/components/workflow-header/index.tsx @@ -21,7 +21,7 @@ const WorkflowHeader = () => { setCurrentLogItem: state.setCurrentLogItem, setShowMessageLogModal: state.setShowMessageLogModal, }))) - const resetWorkflowVersionHistory = useResetWorkflowVersionHistory(appDetail!.id) + const resetWorkflowVersionHistory = useResetWorkflowVersionHistory() const isChatMode = useIsChatMode() const handleClearLogAndMessageModal = useCallback(() => { diff --git a/web/app/components/workflow-app/components/workflow-panel.tsx b/web/app/components/workflow-app/components/workflow-panel.tsx index d6da70cf21..7c1450819f 100644 --- a/web/app/components/workflow-app/components/workflow-panel.tsx +++ b/web/app/components/workflow-app/components/workflow-panel.tsx @@ -13,7 +13,6 @@ import WorkflowPreview from '@/app/components/workflow/panel/workflow-preview' import ChatRecord from '@/app/components/workflow/panel/chat-record' import ChatVariablePanel from '@/app/components/workflow/panel/chat-variable-panel' import GlobalVariablePanel from '@/app/components/workflow/panel/global-variable-panel' -import VersionHistoryPanel from '@/app/components/workflow/panel/version-history-panel' import { useStore as useAppStore } from '@/app/components/app/store' import MessageLogModal from '@/app/components/base/message-log-modal' import type { PanelProps } from '@/app/components/workflow/panel' @@ -52,7 +51,6 @@ const WorkflowPanelOnRight = () => { const showDebugAndPreviewPanel = useStore(s => s.showDebugAndPreviewPanel) const showChatVariablePanel = useStore(s => s.showChatVariablePanel) const showGlobalVariablePanel = useStore(s => s.showGlobalVariablePanel) - const showWorkflowVersionHistoryPanel = useStore(s => s.showWorkflowVersionHistoryPanel) return ( <> @@ -86,23 +84,30 @@ const WorkflowPanelOnRight = () => { ) } - { - showWorkflowVersionHistoryPanel && ( - - ) - } ) } const WorkflowPanel = () => { + const appDetail = useAppStore(s => s.appDetail) + const versionHistoryPanelProps = useMemo(() => { + const appId = appDetail?.id + return { + getVersionListUrl: `/apps/${appId}/workflows`, + deleteVersionUrl: (versionId: string) => `/apps/${appId}/workflows/${versionId}`, + updateVersionUrl: (versionId: string) => `/apps/${appId}/workflows/${versionId}`, + latestVersionId: appDetail?.workflow?.id, + } + }, [appDetail?.id, appDetail?.workflow?.id]) + const panelProps: PanelProps = useMemo(() => { return { components: { left: , right: , }, + versionHistoryPanelProps, } - }, []) + }, [versionHistoryPanelProps]) return ( diff --git a/web/app/components/workflow/panel/index.tsx b/web/app/components/workflow/panel/index.tsx index 8e510f4e77..27a76d0408 100644 --- a/web/app/components/workflow/panel/index.tsx +++ b/web/app/components/workflow/panel/index.tsx @@ -1,6 +1,8 @@ import type { FC } from 'react' import { memo } from 'react' import { useNodes } from 'reactflow' +import type { VersionHistoryPanelProps } from '@/app/components/workflow/panel/version-history-panel' +import VersionHistoryPanel from '@/app/components/workflow/panel/version-history-panel' import type { CommonNodeType } from '../types' import { Panel as NodePanel } from '../nodes' import { useStore } from '../store' @@ -12,14 +14,17 @@ export type PanelProps = { left?: React.ReactNode right?: React.ReactNode } + versionHistoryPanelProps?: VersionHistoryPanelProps } const Panel: FC = ({ components, + versionHistoryPanelProps, }) => { const nodes = useNodes() const selectedNode = nodes.find(node => node.data.selected) const showEnvPanel = useStore(s => s.showEnvPanel) const isRestoring = useStore(s => s.isRestoring) + const showWorkflowVersionHistoryPanel = useStore(s => s.showWorkflowVersionHistoryPanel) return (
= ({ { components?.right } + { + showWorkflowVersionHistoryPanel && ( + + ) + } { showEnvPanel && ( diff --git a/web/app/components/workflow/panel/version-history-panel/index.tsx b/web/app/components/workflow/panel/version-history-panel/index.tsx index 3ca800bbf6..9c48219229 100644 --- a/web/app/components/workflow/panel/version-history-panel/index.tsx +++ b/web/app/components/workflow/panel/version-history-panel/index.tsx @@ -8,7 +8,6 @@ import { VersionHistoryContextMenuOptions, WorkflowVersionFilterOptions } from ' import VersionHistoryItem from './version-history-item' import Filter from './filter' import type { VersionHistory } from '@/types/workflow' -import { useStore as useAppStore } from '@/app/components/app/store' import { useDeleteWorkflow, useResetWorkflowVersionHistory, useUpdateWorkflow, useWorkflowVersionHistory } from '@/service/use-workflow' import Divider from '@/app/components/base/divider' import Loading from './loading' @@ -22,7 +21,18 @@ import Toast from '@/app/components/base/toast' const HISTORY_PER_PAGE = 10 const INITIAL_PAGE = 1 -const VersionHistoryPanel = () => { +export type VersionHistoryPanelProps = { + getVersionListUrl?: string + deleteVersionUrl?: (versionId: string) => string + updateVersionUrl?: (versionId: string) => string + latestVersionId?: string +} +export const VersionHistoryPanel = ({ + getVersionListUrl, + deleteVersionUrl, + updateVersionUrl, + latestVersionId, +}: VersionHistoryPanelProps) => { const [filterValue, setFilterValue] = useState(WorkflowVersionFilterOptions.all) const [isOnlyShowNamedVersions, setIsOnlyShowNamedVersions] = useState(false) const [operatedItem, setOperatedItem] = useState() @@ -32,7 +42,6 @@ const VersionHistoryPanel = () => { const workflowStore = useWorkflowStore() const { handleSyncWorkflowDraft } = useNodesSyncDraft() const { handleRestoreFromPublishedWorkflow, handleLoadBackupDraft } = useWorkflowRun() - const appDetail = useAppStore.getState().appDetail const setShowWorkflowVersionHistoryPanel = useStore(s => s.setShowWorkflowVersionHistoryPanel) const currentVersion = useStore(s => s.currentVersion) const setCurrentVersion = useStore(s => s.setCurrentVersion) @@ -45,7 +54,7 @@ const VersionHistoryPanel = () => { hasNextPage, isFetching, } = useWorkflowVersionHistory({ - appId: appDetail!.id, + url: getVersionListUrl || '', initialPage: INITIAL_PAGE, limit: HISTORY_PER_PAGE, userId: filterValue === WorkflowVersionFilterOptions.onlyYours ? userProfile.id : '', @@ -112,7 +121,7 @@ const VersionHistoryPanel = () => { } }, []) - const resetWorkflowVersionHistory = useResetWorkflowVersionHistory(appDetail!.id) + const resetWorkflowVersionHistory = useResetWorkflowVersionHistory() const handleRestore = useCallback((item: VersionHistory) => { setShowWorkflowVersionHistoryPanel(false) @@ -138,10 +147,10 @@ const VersionHistoryPanel = () => { }) }, [setShowWorkflowVersionHistoryPanel, handleSyncWorkflowDraft, workflowStore, handleRestoreFromPublishedWorkflow, resetWorkflowVersionHistory, t]) - const { mutateAsync: deleteWorkflow } = useDeleteWorkflow(appDetail!.id) + const { mutateAsync: deleteWorkflow } = useDeleteWorkflow() const handleDelete = useCallback(async (id: string) => { - await deleteWorkflow(id, { + await deleteWorkflow(deleteVersionUrl?.(id) || '', { onSuccess: () => { setDeleteConfirmOpen(false) Toast.notify({ @@ -160,14 +169,14 @@ const VersionHistoryPanel = () => { setDeleteConfirmOpen(false) }, }) - }, [t, deleteWorkflow, resetWorkflowVersionHistory]) + }, [t, deleteWorkflow, resetWorkflowVersionHistory, deleteVersionUrl]) - const { mutateAsync: updateWorkflow } = useUpdateWorkflow(appDetail!.id) + const { mutateAsync: updateWorkflow } = useUpdateWorkflow() const handleUpdateWorkflow = useCallback(async (params: { id?: string, title: string, releaseNotes: string }) => { const { id, ...rest } = params await updateWorkflow({ - workflowId: id!, + url: updateVersionUrl?.(id || '') || '', ...rest, }, { onSuccess: () => { @@ -188,7 +197,7 @@ const VersionHistoryPanel = () => { setEditModalOpen(false) }, }) - }, [t, updateWorkflow, resetWorkflowVersionHistory]) + }, [t, updateWorkflow, resetWorkflowVersionHistory, updateVersionUrl]) return (
@@ -222,7 +231,7 @@ const VersionHistoryPanel = () => { key={item.id} item={item} currentVersion={currentVersion} - latestVersionId={appDetail!.workflow!.id} + latestVersionId={latestVersionId || ''} onClick={handleVersionClick} handleClickMenuItem={handleClickMenuItem.bind(null, item)} isLast={isLast} diff --git a/web/service/use-workflow.ts b/web/service/use-workflow.ts index 4321552cc7..caa993ba80 100644 --- a/web/service/use-workflow.ts +++ b/web/service/use-workflow.ts @@ -35,10 +35,11 @@ export const useWorkflowConfig = (appId: string, onSuccess: (v: WorkflowConfigRe const WorkflowVersionHistoryKey = [NAME_SPACE, 'versionHistory'] export const useWorkflowVersionHistory = (params: FetchWorkflowDraftPageParams) => { - const { appId, initialPage, limit, userId, namedOnly } = params + const { url, initialPage, limit, userId, namedOnly } = params return useInfiniteQuery({ - queryKey: [...WorkflowVersionHistoryKey, appId, initialPage, limit, userId, namedOnly], - queryFn: ({ pageParam = 1 }) => get(`/apps/${appId}/workflows`, { + enabled: !!url, + queryKey: [...WorkflowVersionHistoryKey, url, initialPage, limit, userId, namedOnly], + queryFn: ({ pageParam = 1 }) => get(url, { params: { page: pageParam, limit, @@ -51,14 +52,14 @@ export const useWorkflowVersionHistory = (params: FetchWorkflowDraftPageParams) }) } -export const useResetWorkflowVersionHistory = (appId: string) => { - return useReset([...WorkflowVersionHistoryKey, appId]) +export const useResetWorkflowVersionHistory = () => { + return useReset([...WorkflowVersionHistoryKey]) } -export const useUpdateWorkflow = (appId: string) => { +export const useUpdateWorkflow = () => { return useMutation({ mutationKey: [NAME_SPACE, 'update'], - mutationFn: (params: UpdateWorkflowParams) => patch(`/apps/${appId}/workflows/${params.workflowId}`, { + mutationFn: (params: UpdateWorkflowParams) => patch(params.url, { body: { marked_name: params.title, marked_comment: params.releaseNotes, @@ -67,10 +68,10 @@ export const useUpdateWorkflow = (appId: string) => { }) } -export const useDeleteWorkflow = (appId: string) => { +export const useDeleteWorkflow = () => { return useMutation({ mutationKey: [NAME_SPACE, 'delete'], - mutationFn: (workflowId: string) => del(`/apps/${appId}/workflows/${workflowId}`), + mutationFn: (url: string) => del(url), }) } diff --git a/web/types/workflow.ts b/web/types/workflow.ts index bd7334a261..d5b1226d03 100644 --- a/web/types/workflow.ts +++ b/web/types/workflow.ts @@ -128,7 +128,7 @@ export type FetchWorkflowDraftResponse = { export type VersionHistory = FetchWorkflowDraftResponse export type FetchWorkflowDraftPageParams = { - appId: string + url: string initialPage: number limit: number userId?: string @@ -348,7 +348,7 @@ export type PublishWorkflowParams = { } export type UpdateWorkflowParams = { - workflowId: string + url: string title: string releaseNotes: string }