dify
This commit is contained in:
@@ -0,0 +1,84 @@
|
||||
import React, { type FC, useCallback } from 'react'
|
||||
import { RiMoreFill } from '@remixicon/react'
|
||||
import { VersionHistoryContextMenuOptions } from '../../../types'
|
||||
import MenuItem from './menu-item'
|
||||
import useContextMenu from './use-context-menu'
|
||||
import {
|
||||
PortalToFollowElem,
|
||||
PortalToFollowElemContent,
|
||||
PortalToFollowElemTrigger,
|
||||
} from '@/app/components/base/portal-to-follow-elem'
|
||||
import Button from '@/app/components/base/button'
|
||||
import Divider from '@/app/components/base/divider'
|
||||
|
||||
export type ContextMenuProps = {
|
||||
isShowDelete: boolean
|
||||
isNamedVersion: boolean
|
||||
open: boolean
|
||||
setOpen: React.Dispatch<React.SetStateAction<boolean>>
|
||||
handleClickMenuItem: (operation: VersionHistoryContextMenuOptions) => void
|
||||
}
|
||||
|
||||
const ContextMenu: FC<ContextMenuProps> = (props: ContextMenuProps) => {
|
||||
const { isShowDelete, handleClickMenuItem, open, setOpen } = props
|
||||
const {
|
||||
deleteOperation,
|
||||
options,
|
||||
} = useContextMenu(props)
|
||||
|
||||
const handleClickTrigger = useCallback((e: React.MouseEvent<HTMLButtonElement>) => {
|
||||
e.stopPropagation()
|
||||
setOpen(v => !v)
|
||||
}, [setOpen])
|
||||
|
||||
return (
|
||||
<PortalToFollowElem
|
||||
placement={'bottom-end'}
|
||||
offset={{
|
||||
mainAxis: 4,
|
||||
crossAxis: 0,
|
||||
}}
|
||||
open={open}
|
||||
onOpenChange={setOpen}
|
||||
>
|
||||
<PortalToFollowElemTrigger>
|
||||
<Button size='small' className='px-1' onClick={handleClickTrigger}>
|
||||
<RiMoreFill className='h-4 w-4' />
|
||||
</Button>
|
||||
</PortalToFollowElemTrigger>
|
||||
<PortalToFollowElemContent className='z-10'>
|
||||
<div className='flex w-[184px] flex-col rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg shadow-shadow-shadow-5 backdrop-blur-[5px]'>
|
||||
<div className='flex flex-col p-1'>
|
||||
{
|
||||
options.map((option) => {
|
||||
return (
|
||||
<MenuItem
|
||||
key={option.key}
|
||||
item={option}
|
||||
onClick={handleClickMenuItem.bind(null, option.key)}
|
||||
/>
|
||||
)
|
||||
})
|
||||
}
|
||||
</div>
|
||||
{
|
||||
isShowDelete && (
|
||||
<>
|
||||
<Divider type='horizontal' className='my-0 h-px bg-divider-subtle' />
|
||||
<div className='p-1'>
|
||||
<MenuItem
|
||||
item={deleteOperation}
|
||||
isDestructive
|
||||
onClick={handleClickMenuItem.bind(null, VersionHistoryContextMenuOptions.delete)}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</PortalToFollowElemContent>
|
||||
</PortalToFollowElem>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(ContextMenu)
|
||||
@@ -0,0 +1,39 @@
|
||||
import React, { type FC } from 'react'
|
||||
import type { VersionHistoryContextMenuOptions } from '../../../types'
|
||||
import cn from '@/utils/classnames'
|
||||
|
||||
type MenuItemProps = {
|
||||
item: {
|
||||
key: VersionHistoryContextMenuOptions
|
||||
name: string
|
||||
}
|
||||
onClick: (operation: VersionHistoryContextMenuOptions) => void
|
||||
isDestructive?: boolean
|
||||
}
|
||||
|
||||
const MenuItem: FC<MenuItemProps> = ({
|
||||
item,
|
||||
onClick,
|
||||
isDestructive = false,
|
||||
}) => {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'flex cursor-pointer items-center justify-between rounded-lg px-2 py-1.5 ',
|
||||
isDestructive ? 'hover:bg-state-destructive-hover' : 'hover:bg-state-base-hover',
|
||||
)}
|
||||
onClick={() => {
|
||||
onClick(item.key)
|
||||
}}
|
||||
>
|
||||
<div className={cn(
|
||||
'system-md-regular flex-1 text-text-primary',
|
||||
isDestructive && 'hover:text-text-destructive',
|
||||
)}>
|
||||
{item.name}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(MenuItem)
|
||||
@@ -0,0 +1,52 @@
|
||||
import { useMemo } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { VersionHistoryContextMenuOptions } from '../../../types'
|
||||
import type { ContextMenuProps } from './index'
|
||||
import { useStore } from '@/app/components/workflow/store'
|
||||
|
||||
const useContextMenu = (props: ContextMenuProps) => {
|
||||
const {
|
||||
isNamedVersion,
|
||||
} = props
|
||||
const { t } = useTranslation()
|
||||
const pipelineId = useStore(s => s.pipelineId)
|
||||
|
||||
const deleteOperation = {
|
||||
key: VersionHistoryContextMenuOptions.delete,
|
||||
name: t('common.operation.delete'),
|
||||
}
|
||||
|
||||
const options = useMemo(() => {
|
||||
return [
|
||||
{
|
||||
key: VersionHistoryContextMenuOptions.restore,
|
||||
name: t('workflow.common.restore'),
|
||||
},
|
||||
isNamedVersion
|
||||
? {
|
||||
key: VersionHistoryContextMenuOptions.edit,
|
||||
name: t('workflow.versionHistory.editVersionInfo'),
|
||||
}
|
||||
: {
|
||||
key: VersionHistoryContextMenuOptions.edit,
|
||||
name: t('workflow.versionHistory.nameThisVersion'),
|
||||
},
|
||||
// todo: pipeline support export specific version DSL
|
||||
...(!pipelineId ? [{
|
||||
key: VersionHistoryContextMenuOptions.exportDSL,
|
||||
name: t('app.export'),
|
||||
}] : []),
|
||||
{
|
||||
key: VersionHistoryContextMenuOptions.copyId,
|
||||
name: t('workflow.versionHistory.copyId'),
|
||||
},
|
||||
]
|
||||
}, [isNamedVersion, t])
|
||||
|
||||
return {
|
||||
deleteOperation,
|
||||
options,
|
||||
}
|
||||
}
|
||||
|
||||
export default useContextMenu
|
||||
@@ -0,0 +1,42 @@
|
||||
import React, { type FC } from 'react'
|
||||
import Modal from '@/app/components/base/modal'
|
||||
import type { VersionHistory } from '@/types/workflow'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Button from '@/app/components/base/button'
|
||||
|
||||
type DeleteConfirmModalProps = {
|
||||
isOpen: boolean
|
||||
versionInfo: VersionHistory
|
||||
onClose: () => void
|
||||
onDelete: (id: string) => void
|
||||
}
|
||||
|
||||
const DeleteConfirmModal: FC<DeleteConfirmModalProps> = ({
|
||||
isOpen,
|
||||
versionInfo,
|
||||
onClose,
|
||||
onDelete,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return <Modal className='p-0' isShow={isOpen} onClose={onClose}>
|
||||
<div className='flex flex-col gap-y-2 p-6 pb-4 '>
|
||||
<div className='title-2xl-semi-bold text-text-primary'>
|
||||
{`${t('common.operation.delete')} ${versionInfo.marked_name || t('workflow.versionHistory.defaultName')}`}
|
||||
</div>
|
||||
<p className='system-md-regular text-text-secondary'>
|
||||
{t('workflow.versionHistory.deletionTip')}
|
||||
</p>
|
||||
</div>
|
||||
<div className='flex items-center justify-end gap-x-2 p-6'>
|
||||
<Button onClick={onClose}>
|
||||
{t('common.operation.cancel')}
|
||||
</Button>
|
||||
<Button variant='warning' onClick={onDelete.bind(null, versionInfo.id)}>
|
||||
{t('common.operation.delete')}
|
||||
</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
}
|
||||
|
||||
export default DeleteConfirmModal
|
||||
@@ -0,0 +1,30 @@
|
||||
import Button from '@/app/components/base/button'
|
||||
import { RiHistoryLine } from '@remixicon/react'
|
||||
import React, { type FC } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
type EmptyProps = {
|
||||
onResetFilter: () => void
|
||||
}
|
||||
|
||||
const Empty: FC<EmptyProps> = ({
|
||||
onResetFilter,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return <div className='flex h-5/6 w-full flex-col justify-center gap-y-2'>
|
||||
<div className='flex justify-center'>
|
||||
<RiHistoryLine className='h-10 w-10 text-text-empty-state-icon' />
|
||||
</div>
|
||||
<div className='system-xs-regular flex justify-center text-text-tertiary'>
|
||||
{t('workflow.versionHistory.filter.empty')}
|
||||
</div>
|
||||
<div className='flex justify-center'>
|
||||
<Button size='small' onClick={onResetFilter}>
|
||||
{t('workflow.versionHistory.filter.reset')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
export default React.memo(Empty)
|
||||
@@ -0,0 +1,32 @@
|
||||
import { RiCheckLine } from '@remixicon/react'
|
||||
import React, { type FC } from 'react'
|
||||
import type { WorkflowVersionFilterOptions } from '../../../types'
|
||||
|
||||
type FilterItemProps = {
|
||||
item: {
|
||||
key: WorkflowVersionFilterOptions
|
||||
name: string
|
||||
}
|
||||
isSelected?: boolean
|
||||
onClick: (value: WorkflowVersionFilterOptions) => void
|
||||
}
|
||||
|
||||
const FilterItem: FC<FilterItemProps> = ({
|
||||
item,
|
||||
isSelected = false,
|
||||
onClick,
|
||||
}) => {
|
||||
return (
|
||||
<div
|
||||
className='flex cursor-pointer items-center justify-between gap-x-1 rounded-lg px-2 py-1.5 hover:bg-state-base-hover'
|
||||
onClick={() => {
|
||||
onClick(item.key)
|
||||
}}
|
||||
>
|
||||
<div className='system-md-regular flex-1 text-text-primary'>{item.name}</div>
|
||||
{isSelected && <RiCheckLine className='h-4 w-4 shrink-0 text-text-accent' />}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(FilterItem)
|
||||
@@ -0,0 +1,33 @@
|
||||
import React, { type FC } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Switch from '@/app/components/base/switch'
|
||||
|
||||
type FilterSwitchProps = {
|
||||
enabled: boolean
|
||||
handleSwitch: (value: boolean) => void
|
||||
}
|
||||
|
||||
const FilterSwitch: FC<FilterSwitchProps> = ({
|
||||
enabled,
|
||||
handleSwitch,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<div className='flex items-center p-1'>
|
||||
<div className='flex w-full items-center gap-x-1 px-2 py-1.5'>
|
||||
<div className='system-md-regular flex-1 px-1 text-text-secondary'>
|
||||
{t('workflow.versionHistory.filter.onlyShowNamedVersions')}
|
||||
</div>
|
||||
<Switch
|
||||
defaultValue={enabled}
|
||||
onChange={v => handleSwitch(v)}
|
||||
size='md'
|
||||
className='shrink-0'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(FilterSwitch)
|
||||
@@ -0,0 +1,81 @@
|
||||
import React, { type FC, useCallback, useState } from 'react'
|
||||
import { RiFilter3Line } from '@remixicon/react'
|
||||
import { WorkflowVersionFilterOptions } from '../../../types'
|
||||
import { useFilterOptions } from './use-filter'
|
||||
import FilterItem from './filter-item'
|
||||
import FilterSwitch from './filter-switch'
|
||||
import {
|
||||
PortalToFollowElem,
|
||||
PortalToFollowElemContent,
|
||||
PortalToFollowElemTrigger,
|
||||
} from '@/app/components/base/portal-to-follow-elem'
|
||||
import Divider from '@/app/components/base/divider'
|
||||
import cn from '@/utils/classnames'
|
||||
|
||||
type FilterProps = {
|
||||
filterValue: WorkflowVersionFilterOptions
|
||||
isOnlyShowNamedVersions: boolean
|
||||
onClickFilterItem: (filter: WorkflowVersionFilterOptions) => void
|
||||
handleSwitch: (isOnlyShowNamedVersions: boolean) => void
|
||||
}
|
||||
|
||||
const Filter: FC<FilterProps> = ({
|
||||
filterValue,
|
||||
isOnlyShowNamedVersions,
|
||||
onClickFilterItem,
|
||||
handleSwitch,
|
||||
}) => {
|
||||
const [open, setOpen] = useState(false)
|
||||
const options = useFilterOptions()
|
||||
|
||||
const handleOnClick = useCallback((value: WorkflowVersionFilterOptions) => {
|
||||
onClickFilterItem(value)
|
||||
}, [onClickFilterItem])
|
||||
|
||||
const isFiltering = filterValue !== WorkflowVersionFilterOptions.all || isOnlyShowNamedVersions
|
||||
|
||||
return (
|
||||
<PortalToFollowElem
|
||||
placement={'bottom-end'}
|
||||
offset={{
|
||||
mainAxis: 4,
|
||||
crossAxis: 55,
|
||||
}}
|
||||
open={open}
|
||||
onOpenChange={setOpen}
|
||||
>
|
||||
<PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
|
||||
<div
|
||||
className={cn(
|
||||
'flex h-6 w-6 cursor-pointer items-center justify-center rounded-md p-0.5',
|
||||
isFiltering ? 'bg-state-accent-active-alt' : 'hover:bg-state-base-hover',
|
||||
)}
|
||||
>
|
||||
<RiFilter3Line className={cn('h-4 w-4', isFiltering ? 'text-text-accent' : ' text-text-tertiary')} />
|
||||
</div>
|
||||
</PortalToFollowElemTrigger>
|
||||
<PortalToFollowElemContent className='z-[12]'>
|
||||
<div className='flex w-[248px] flex-col rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg shadow-shadow-shadow-5 backdrop-blur-[5px]'>
|
||||
<div className='flex flex-col p-1'>
|
||||
{
|
||||
options.map((option) => {
|
||||
return (
|
||||
<FilterItem
|
||||
key={option.key}
|
||||
item={option}
|
||||
isSelected={filterValue === option.key}
|
||||
onClick={handleOnClick}
|
||||
/>
|
||||
)
|
||||
})
|
||||
}
|
||||
</div>
|
||||
<Divider type='horizontal' className='my-0 h-px bg-divider-subtle' />
|
||||
<FilterSwitch enabled={isOnlyShowNamedVersions} handleSwitch={handleSwitch} />
|
||||
</div>
|
||||
</PortalToFollowElemContent>
|
||||
</PortalToFollowElem>
|
||||
)
|
||||
}
|
||||
|
||||
export default Filter
|
||||
@@ -0,0 +1,17 @@
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { WorkflowVersionFilterOptions } from '../../../types'
|
||||
|
||||
export const useFilterOptions = () => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return [
|
||||
{
|
||||
key: WorkflowVersionFilterOptions.all,
|
||||
name: t('workflow.versionHistory.filter.all'),
|
||||
},
|
||||
{
|
||||
key: WorkflowVersionFilterOptions.onlyYours,
|
||||
name: t('workflow.versionHistory.filter.onlyYours'),
|
||||
},
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,310 @@
|
||||
'use client'
|
||||
import React, { useCallback, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { RiArrowDownDoubleLine, RiCloseLine, RiLoader2Line } from '@remixicon/react'
|
||||
import copy from 'copy-to-clipboard'
|
||||
import { useDSL, useNodesSyncDraft, useWorkflowRun } from '../../hooks'
|
||||
import { useStore, useWorkflowStore } from '../../store'
|
||||
import { VersionHistoryContextMenuOptions, WorkflowVersionFilterOptions } from '../../types'
|
||||
import VersionHistoryItem from './version-history-item'
|
||||
import Filter from './filter'
|
||||
import type { VersionHistory } from '@/types/workflow'
|
||||
import { useDeleteWorkflow, useInvalidAllLastRun, useResetWorkflowVersionHistory, useUpdateWorkflow, useWorkflowVersionHistory } from '@/service/use-workflow'
|
||||
import Divider from '@/app/components/base/divider'
|
||||
import Loading from './loading'
|
||||
import Empty from './empty'
|
||||
import { useSelector as useAppContextSelector } from '@/context/app-context'
|
||||
import RestoreConfirmModal from './restore-confirm-modal'
|
||||
import DeleteConfirmModal from './delete-confirm-modal'
|
||||
import VersionInfoModal from '@/app/components/app/app-publisher/version-info-modal'
|
||||
import Toast from '@/app/components/base/toast'
|
||||
import { useHooksStore } from '../../hooks-store'
|
||||
|
||||
const HISTORY_PER_PAGE = 10
|
||||
const INITIAL_PAGE = 1
|
||||
|
||||
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<VersionHistory>()
|
||||
const [restoreConfirmOpen, setRestoreConfirmOpen] = useState(false)
|
||||
const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false)
|
||||
const [editModalOpen, setEditModalOpen] = useState(false)
|
||||
const workflowStore = useWorkflowStore()
|
||||
const { handleSyncWorkflowDraft } = useNodesSyncDraft()
|
||||
const { handleRestoreFromPublishedWorkflow, handleLoadBackupDraft } = useWorkflowRun()
|
||||
const { handleExportDSL } = useDSL()
|
||||
const setShowWorkflowVersionHistoryPanel = useStore(s => s.setShowWorkflowVersionHistoryPanel)
|
||||
const currentVersion = useStore(s => s.currentVersion)
|
||||
const setCurrentVersion = useStore(s => s.setCurrentVersion)
|
||||
const userProfile = useAppContextSelector(s => s.userProfile)
|
||||
const configsMap = useHooksStore(s => s.configsMap)
|
||||
const invalidAllLastRun = useInvalidAllLastRun(configsMap?.flowType, configsMap?.flowId)
|
||||
const {
|
||||
deleteAllInspectVars,
|
||||
} = workflowStore.getState()
|
||||
const { t } = useTranslation()
|
||||
|
||||
const {
|
||||
data: versionHistory,
|
||||
fetchNextPage,
|
||||
hasNextPage,
|
||||
isFetching,
|
||||
} = useWorkflowVersionHistory({
|
||||
url: getVersionListUrl || '',
|
||||
initialPage: INITIAL_PAGE,
|
||||
limit: HISTORY_PER_PAGE,
|
||||
userId: filterValue === WorkflowVersionFilterOptions.onlyYours ? userProfile.id : '',
|
||||
namedOnly: isOnlyShowNamedVersions,
|
||||
})
|
||||
|
||||
const handleVersionClick = useCallback((item: VersionHistory) => {
|
||||
if (item.id !== currentVersion?.id) {
|
||||
setCurrentVersion(item)
|
||||
handleRestoreFromPublishedWorkflow(item)
|
||||
}
|
||||
}, [currentVersion?.id, setCurrentVersion, handleRestoreFromPublishedWorkflow])
|
||||
|
||||
const handleNextPage = () => {
|
||||
if (hasNextPage)
|
||||
fetchNextPage()
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
handleLoadBackupDraft()
|
||||
workflowStore.setState({ isRestoring: false })
|
||||
setShowWorkflowVersionHistoryPanel(false)
|
||||
}
|
||||
|
||||
const handleClickFilterItem = useCallback((value: WorkflowVersionFilterOptions) => {
|
||||
setFilterValue(value)
|
||||
}, [])
|
||||
|
||||
const handleSwitch = useCallback((value: boolean) => {
|
||||
setIsOnlyShowNamedVersions(value)
|
||||
}, [])
|
||||
|
||||
const handleResetFilter = useCallback(() => {
|
||||
setFilterValue(WorkflowVersionFilterOptions.all)
|
||||
setIsOnlyShowNamedVersions(false)
|
||||
}, [])
|
||||
|
||||
const handleClickMenuItem = useCallback((item: VersionHistory, operation: VersionHistoryContextMenuOptions) => {
|
||||
setOperatedItem(item)
|
||||
switch (operation) {
|
||||
case VersionHistoryContextMenuOptions.restore:
|
||||
setRestoreConfirmOpen(true)
|
||||
break
|
||||
case VersionHistoryContextMenuOptions.edit:
|
||||
setEditModalOpen(true)
|
||||
break
|
||||
case VersionHistoryContextMenuOptions.delete:
|
||||
setDeleteConfirmOpen(true)
|
||||
break
|
||||
case VersionHistoryContextMenuOptions.copyId:
|
||||
copy(item.id)
|
||||
Toast.notify({
|
||||
type: 'success',
|
||||
message: t('workflow.versionHistory.action.copyIdSuccess'),
|
||||
})
|
||||
break
|
||||
case VersionHistoryContextMenuOptions.exportDSL:
|
||||
handleExportDSL?.(false, item.id)
|
||||
break
|
||||
}
|
||||
}, [t, handleExportDSL])
|
||||
|
||||
const handleCancel = useCallback((operation: VersionHistoryContextMenuOptions) => {
|
||||
switch (operation) {
|
||||
case VersionHistoryContextMenuOptions.restore:
|
||||
setRestoreConfirmOpen(false)
|
||||
break
|
||||
case VersionHistoryContextMenuOptions.edit:
|
||||
setEditModalOpen(false)
|
||||
break
|
||||
case VersionHistoryContextMenuOptions.delete:
|
||||
setDeleteConfirmOpen(false)
|
||||
break
|
||||
}
|
||||
}, [])
|
||||
|
||||
const resetWorkflowVersionHistory = useResetWorkflowVersionHistory()
|
||||
|
||||
const handleRestore = useCallback((item: VersionHistory) => {
|
||||
setShowWorkflowVersionHistoryPanel(false)
|
||||
handleRestoreFromPublishedWorkflow(item)
|
||||
workflowStore.setState({ isRestoring: false })
|
||||
workflowStore.setState({ backupDraft: undefined })
|
||||
handleSyncWorkflowDraft(true, false, {
|
||||
onSuccess: () => {
|
||||
Toast.notify({
|
||||
type: 'success',
|
||||
message: t('workflow.versionHistory.action.restoreSuccess'),
|
||||
})
|
||||
deleteAllInspectVars()
|
||||
invalidAllLastRun()
|
||||
},
|
||||
onError: () => {
|
||||
Toast.notify({
|
||||
type: 'error',
|
||||
message: t('workflow.versionHistory.action.restoreFailure'),
|
||||
})
|
||||
},
|
||||
onSettled: () => {
|
||||
resetWorkflowVersionHistory()
|
||||
},
|
||||
})
|
||||
}, [setShowWorkflowVersionHistoryPanel, handleRestoreFromPublishedWorkflow, workflowStore, handleSyncWorkflowDraft, deleteAllInspectVars, invalidAllLastRun, t, resetWorkflowVersionHistory])
|
||||
|
||||
const { mutateAsync: deleteWorkflow } = useDeleteWorkflow()
|
||||
|
||||
const handleDelete = useCallback(async (id: string) => {
|
||||
await deleteWorkflow(deleteVersionUrl?.(id) || '', {
|
||||
onSuccess: () => {
|
||||
setDeleteConfirmOpen(false)
|
||||
Toast.notify({
|
||||
type: 'success',
|
||||
message: t('workflow.versionHistory.action.deleteSuccess'),
|
||||
})
|
||||
resetWorkflowVersionHistory()
|
||||
deleteAllInspectVars()
|
||||
invalidAllLastRun()
|
||||
},
|
||||
onError: () => {
|
||||
Toast.notify({
|
||||
type: 'error',
|
||||
message: t('workflow.versionHistory.action.deleteFailure'),
|
||||
})
|
||||
},
|
||||
onSettled: () => {
|
||||
setDeleteConfirmOpen(false)
|
||||
},
|
||||
})
|
||||
}, [deleteWorkflow, t, resetWorkflowVersionHistory, deleteAllInspectVars, invalidAllLastRun, deleteVersionUrl])
|
||||
|
||||
const { mutateAsync: updateWorkflow } = useUpdateWorkflow()
|
||||
|
||||
const handleUpdateWorkflow = useCallback(async (params: { id?: string, title: string, releaseNotes: string }) => {
|
||||
const { id, ...rest } = params
|
||||
await updateWorkflow({
|
||||
url: updateVersionUrl?.(id || '') || '',
|
||||
...rest,
|
||||
}, {
|
||||
onSuccess: () => {
|
||||
setEditModalOpen(false)
|
||||
Toast.notify({
|
||||
type: 'success',
|
||||
message: t('workflow.versionHistory.action.updateSuccess'),
|
||||
})
|
||||
resetWorkflowVersionHistory()
|
||||
},
|
||||
onError: () => {
|
||||
Toast.notify({
|
||||
type: 'error',
|
||||
message: t('workflow.versionHistory.action.updateFailure'),
|
||||
})
|
||||
},
|
||||
onSettled: () => {
|
||||
setEditModalOpen(false)
|
||||
},
|
||||
})
|
||||
}, [t, updateWorkflow, resetWorkflowVersionHistory, updateVersionUrl])
|
||||
|
||||
return (
|
||||
<div className='flex h-full w-[268px] flex-col rounded-l-2xl border-y-[0.5px] border-l-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl shadow-shadow-shadow-5'>
|
||||
<div className='flex items-center gap-x-2 px-4 pt-3'>
|
||||
<div className='system-xl-semibold flex-1 py-1 text-text-primary'>{t('workflow.versionHistory.title')}</div>
|
||||
<Filter
|
||||
filterValue={filterValue}
|
||||
isOnlyShowNamedVersions={isOnlyShowNamedVersions}
|
||||
onClickFilterItem={handleClickFilterItem}
|
||||
handleSwitch={handleSwitch}
|
||||
/>
|
||||
<Divider type='vertical' className='mx-1 h-3.5' />
|
||||
<div
|
||||
className='flex h-6 w-6 cursor-pointer items-center justify-center p-0.5'
|
||||
onClick={handleClose}
|
||||
>
|
||||
<RiCloseLine className='h-4 w-4 text-text-tertiary' />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex h-0 flex-1 flex-col">
|
||||
<div className="flex-1 overflow-y-auto px-3 py-2">
|
||||
{(isFetching && !versionHistory?.pages?.length)
|
||||
? (
|
||||
<Loading />
|
||||
)
|
||||
: (
|
||||
<>
|
||||
{versionHistory?.pages?.map((page, pageNumber) => (
|
||||
page.items?.map((item, idx) => {
|
||||
const isLast = pageNumber === versionHistory.pages.length - 1 && idx === page.items.length - 1
|
||||
return <VersionHistoryItem
|
||||
key={item.id}
|
||||
item={item}
|
||||
currentVersion={currentVersion}
|
||||
latestVersionId={latestVersionId || ''}
|
||||
onClick={handleVersionClick}
|
||||
handleClickMenuItem={handleClickMenuItem.bind(null, item)}
|
||||
isLast={isLast}
|
||||
/>
|
||||
})
|
||||
))}
|
||||
{!isFetching && (!versionHistory?.pages?.length || !versionHistory.pages[0].items.length) && (
|
||||
<Empty onResetFilter={handleResetFilter} />
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
{hasNextPage && (
|
||||
<div className='p-2'>
|
||||
<div
|
||||
className='flex cursor-pointer items-center gap-x-1'
|
||||
onClick={handleNextPage}
|
||||
>
|
||||
<div className='item-center flex justify-center p-0.5'>
|
||||
{isFetching
|
||||
? <RiLoader2Line className='h-3.5 w-3.5 animate-spin text-text-accent' />
|
||||
: <RiArrowDownDoubleLine className='h-3.5 w-3.5 text-text-accent' />}
|
||||
</div>
|
||||
<div className='system-xs-medium-uppercase py-[1px] text-text-accent'>
|
||||
{t('workflow.common.loadMore')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{restoreConfirmOpen && (<RestoreConfirmModal
|
||||
isOpen={restoreConfirmOpen}
|
||||
versionInfo={operatedItem!}
|
||||
onClose={handleCancel.bind(null, VersionHistoryContextMenuOptions.restore)}
|
||||
onRestore={handleRestore}
|
||||
/>)}
|
||||
{deleteConfirmOpen && (<DeleteConfirmModal
|
||||
isOpen={deleteConfirmOpen}
|
||||
versionInfo={operatedItem!}
|
||||
onClose={handleCancel.bind(null, VersionHistoryContextMenuOptions.delete)}
|
||||
onDelete={handleDelete}
|
||||
/>)}
|
||||
{editModalOpen && (<VersionInfoModal
|
||||
isOpen={editModalOpen}
|
||||
versionInfo={operatedItem}
|
||||
onClose={handleCancel.bind(null, VersionHistoryContextMenuOptions.edit)}
|
||||
onPublish={handleUpdateWorkflow}
|
||||
/>)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(VersionHistoryPanel)
|
||||
@@ -0,0 +1,19 @@
|
||||
import Item from './item'
|
||||
|
||||
const itemConfig = Array.from({ length: 8 }).map((_, index) => {
|
||||
return {
|
||||
isFirst: index === 0,
|
||||
isLast: index === 7,
|
||||
titleWidth: (index + 1) % 2 === 0 ? 'w-1/3' : 'w-2/5',
|
||||
releaseNotesWidth: (index + 1) % 2 === 0 ? 'w-3/4' : 'w-4/6',
|
||||
}
|
||||
})
|
||||
|
||||
const Loading = () => {
|
||||
return <div className='relative w-full overflow-y-hidden'>
|
||||
<div className='absolute left-0 top-0 z-10 h-full w-full bg-dataset-chunk-list-mask-bg' />
|
||||
{itemConfig.map((config, index) => <Item key={index} {...config} />)}
|
||||
</div>
|
||||
}
|
||||
|
||||
export default Loading
|
||||
@@ -0,0 +1,40 @@
|
||||
import React, { type FC } from 'react'
|
||||
import cn from '@/utils/classnames'
|
||||
|
||||
type ItemProps = {
|
||||
titleWidth: string
|
||||
releaseNotesWidth: string
|
||||
isFirst: boolean
|
||||
isLast: boolean
|
||||
}
|
||||
|
||||
const Item: FC<ItemProps> = ({
|
||||
titleWidth,
|
||||
releaseNotesWidth,
|
||||
isFirst,
|
||||
isLast,
|
||||
}) => {
|
||||
return (
|
||||
<div className='relative flex gap-x-1 p-2' >
|
||||
{!isLast && <div className='absolute left-4 top-6 h-[calc(100%-0.75rem)] w-0.5 bg-divider-subtle' />}
|
||||
<div className=' flex h-5 w-[18px] shrink-0 items-center justify-center'>
|
||||
<div className='h-2 w-2 rounded-lg border-[2px] border-text-quaternary' />
|
||||
</div>
|
||||
<div className='flex grow flex-col gap-y-0.5'>
|
||||
<div className='flex h-3.5 items-center'>
|
||||
<div className={cn('h-2 w-full rounded-sm bg-text-quaternary opacity-20', titleWidth)} />
|
||||
</div>
|
||||
{
|
||||
!isFirst && (
|
||||
<div className='flex h-3 items-center'>
|
||||
<div className={cn('h-1.5 w-full rounded-sm bg-text-quaternary opacity-20', releaseNotesWidth)} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(Item)
|
||||
@@ -0,0 +1,42 @@
|
||||
import React, { type FC } from 'react'
|
||||
import Modal from '@/app/components/base/modal'
|
||||
import type { VersionHistory } from '@/types/workflow'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Button from '@/app/components/base/button'
|
||||
|
||||
type RestoreConfirmModalProps = {
|
||||
isOpen: boolean
|
||||
versionInfo: VersionHistory
|
||||
onClose: () => void
|
||||
onRestore: (item: VersionHistory) => void
|
||||
}
|
||||
|
||||
const RestoreConfirmModal: FC<RestoreConfirmModalProps> = ({
|
||||
isOpen,
|
||||
versionInfo,
|
||||
onClose,
|
||||
onRestore,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return <Modal className='p-0' isShow={isOpen} onClose={onClose}>
|
||||
<div className='flex flex-col gap-y-2 p-6 pb-4 '>
|
||||
<div className='title-2xl-semi-bold text-text-primary'>
|
||||
{`${t('workflow.common.restore')} ${versionInfo.marked_name || t('workflow.versionHistory.defaultName')}`}
|
||||
</div>
|
||||
<p className='system-md-regular text-text-secondary'>
|
||||
{t('workflow.versionHistory.restorationTip')}
|
||||
</p>
|
||||
</div>
|
||||
<div className='flex items-center justify-end gap-x-2 p-6'>
|
||||
<Button onClick={onClose}>
|
||||
{t('common.operation.cancel')}
|
||||
</Button>
|
||||
<Button variant='primary' onClick={onRestore.bind(null, versionInfo)}>
|
||||
{t('workflow.common.restore')}
|
||||
</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
}
|
||||
|
||||
export default RestoreConfirmModal
|
||||
@@ -0,0 +1,136 @@
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import dayjs from 'dayjs'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import ContextMenu from './context-menu'
|
||||
import cn from '@/utils/classnames'
|
||||
import type { VersionHistory } from '@/types/workflow'
|
||||
import { type VersionHistoryContextMenuOptions, WorkflowVersion } from '../../types'
|
||||
|
||||
type VersionHistoryItemProps = {
|
||||
item: VersionHistory
|
||||
currentVersion: VersionHistory | null
|
||||
latestVersionId: string
|
||||
onClick: (item: VersionHistory) => void
|
||||
handleClickMenuItem: (operation: VersionHistoryContextMenuOptions) => void
|
||||
isLast: boolean
|
||||
}
|
||||
|
||||
const formatVersion = (versionHistory: VersionHistory, latestVersionId: string): string => {
|
||||
const { version, id } = versionHistory
|
||||
if (version === WorkflowVersion.Draft)
|
||||
return WorkflowVersion.Draft
|
||||
if (id === latestVersionId)
|
||||
return WorkflowVersion.Latest
|
||||
try {
|
||||
const date = new Date(version)
|
||||
if (Number.isNaN(date.getTime()))
|
||||
return version
|
||||
|
||||
// format as YYYY-MM-DD HH:mm:ss
|
||||
return date.toISOString().slice(0, 19).replace('T', ' ')
|
||||
}
|
||||
catch {
|
||||
return version
|
||||
}
|
||||
}
|
||||
|
||||
const VersionHistoryItem: React.FC<VersionHistoryItemProps> = ({
|
||||
item,
|
||||
currentVersion,
|
||||
latestVersionId,
|
||||
onClick,
|
||||
handleClickMenuItem,
|
||||
isLast,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const [isHovering, setIsHovering] = useState(false)
|
||||
const [open, setOpen] = useState(false)
|
||||
|
||||
const formatTime = (time: number) => dayjs.unix(time).format('YYYY-MM-DD HH:mm')
|
||||
const formattedVersion = formatVersion(item, latestVersionId)
|
||||
const isSelected = item.version === currentVersion?.version
|
||||
const isDraft = formattedVersion === WorkflowVersion.Draft
|
||||
const isLatest = formattedVersion === WorkflowVersion.Latest
|
||||
|
||||
useEffect(() => {
|
||||
if (isDraft)
|
||||
onClick(item)
|
||||
}, [])
|
||||
|
||||
const handleClickItem = () => {
|
||||
if (isSelected)
|
||||
return
|
||||
onClick(item)
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'group relative flex gap-x-1 rounded-lg p-2',
|
||||
isSelected ? 'cursor-not-allowed bg-state-accent-active' : 'cursor-pointer hover:bg-state-base-hover',
|
||||
)}
|
||||
onClick={handleClickItem}
|
||||
onMouseEnter={() => setIsHovering(true)}
|
||||
onMouseLeave={() => {
|
||||
setIsHovering(false)
|
||||
setOpen(false)
|
||||
}}
|
||||
onContextMenu={(e) => {
|
||||
e.preventDefault()
|
||||
setOpen(true)
|
||||
}}
|
||||
>
|
||||
{!isLast && <div className='absolute left-4 top-6 h-[calc(100%-0.75rem)] w-0.5 bg-divider-subtle' />}
|
||||
<div className=' flex h-5 w-[18px] shrink-0 items-center justify-center'>
|
||||
<div className={cn(
|
||||
'h-2 w-2 rounded-lg border-[2px]',
|
||||
isSelected ? 'border-text-accent' : 'border-text-quaternary',
|
||||
)}/>
|
||||
</div>
|
||||
<div className='flex grow flex-col gap-y-0.5 overflow-hidden'>
|
||||
<div className='mr-6 flex h-5 items-center gap-x-1'>
|
||||
<div className={cn(
|
||||
'system-sm-semibold truncate py-[1px]',
|
||||
isSelected ? 'text-text-accent' : 'text-text-secondary',
|
||||
)}>
|
||||
{isDraft ? t('workflow.versionHistory.currentDraft') : item.marked_name || t('workflow.versionHistory.defaultName')}
|
||||
</div>
|
||||
{isLatest && (
|
||||
<div className='system-2xs-medium-uppercase flex h-5 shrink-0 items-center rounded-md border border-text-accent-secondary
|
||||
bg-components-badge-bg-dimm px-[5px] text-text-accent-secondary'>
|
||||
{t('workflow.versionHistory.latest')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{
|
||||
!isDraft && (
|
||||
<div className='system-xs-regular break-words text-text-secondary'>
|
||||
{item.marked_comment || ''}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
{
|
||||
!isDraft && (
|
||||
<div className='system-xs-regular truncate text-text-tertiary'>
|
||||
{`${formatTime(item.created_at)} · ${item.created_by.name}`}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
{/* Context Menu */}
|
||||
{!isDraft && isHovering && (
|
||||
<div className='absolute right-1 top-1'>
|
||||
<ContextMenu
|
||||
isShowDelete={!isLatest}
|
||||
isNamedVersion={!!item.marked_name}
|
||||
open={open}
|
||||
setOpen={setOpen}
|
||||
handleClickMenuItem={handleClickMenuItem}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(VersionHistoryItem)
|
||||
Reference in New Issue
Block a user