feat: version tag (#14949)
Wu Tianwei
1 year ago
committed by
GitHub
parent
4aaf07d62a
commit
3ca1373274
@ -0,0 +1,112 @@
|
|||||||
|
import React, { type FC, useCallback, useState } from 'react'
|
||||||
|
import Modal from '@/app/components/base/modal'
|
||||||
|
import type { VersionHistory } from '@/types/workflow'
|
||||||
|
import { useTranslation } from 'react-i18next'
|
||||||
|
import { RiCloseLine } from '@remixicon/react'
|
||||||
|
import Input from '../../base/input'
|
||||||
|
import Textarea from '../../base/textarea'
|
||||||
|
import Button from '../../base/button'
|
||||||
|
import Toast from '@/app/components/base/toast'
|
||||||
|
|
||||||
|
type VersionInfoModalProps = {
|
||||||
|
isOpen: boolean
|
||||||
|
versionInfo?: VersionHistory
|
||||||
|
onClose: () => void
|
||||||
|
onPublish: (params: { title: string; releaseNotes: string; id?: string }) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
const TITLE_MAX_LENGTH = 15
|
||||||
|
const RELEASE_NOTES_MAX_LENGTH = 100
|
||||||
|
|
||||||
|
const VersionInfoModal: FC<VersionInfoModalProps> = ({
|
||||||
|
isOpen,
|
||||||
|
versionInfo,
|
||||||
|
onClose,
|
||||||
|
onPublish,
|
||||||
|
}) => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
const [title, setTitle] = useState(versionInfo?.marked_name || '')
|
||||||
|
const [releaseNotes, setReleaseNotes] = useState(versionInfo?.marked_comment || '')
|
||||||
|
const [titleError, setTitleError] = useState(false)
|
||||||
|
const [releaseNotesError, setReleaseNotesError] = useState(false)
|
||||||
|
|
||||||
|
const handlePublish = () => {
|
||||||
|
if (title.length > TITLE_MAX_LENGTH) {
|
||||||
|
setTitleError(true)
|
||||||
|
Toast.notify({
|
||||||
|
type: 'error',
|
||||||
|
message: t('workflow.versionHistory.editField.titleLengthLimit', { limit: TITLE_MAX_LENGTH }),
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
titleError && setTitleError(false)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (releaseNotes.length > RELEASE_NOTES_MAX_LENGTH) {
|
||||||
|
setReleaseNotesError(true)
|
||||||
|
Toast.notify({
|
||||||
|
type: 'error',
|
||||||
|
message: t('workflow.versionHistory.editField.releaseNotesLengthLimit', { limit: RELEASE_NOTES_MAX_LENGTH }),
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
releaseNotesError && setReleaseNotesError(false)
|
||||||
|
}
|
||||||
|
|
||||||
|
onPublish({ title, releaseNotes, id: versionInfo?.id })
|
||||||
|
onClose()
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleTitleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
setTitle(e.target.value)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const handleDescriptionChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
||||||
|
setReleaseNotes(e.target.value)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
return <Modal className='p-0' isShow={isOpen} onClose={onClose}>
|
||||||
|
<div className='relative w-full p-6 pb-4 pr-14'>
|
||||||
|
<div className='text-text-primary title-2xl-semi-bold first-letter:capitalize'>
|
||||||
|
{versionInfo?.marked_name ? t('workflow.versionHistory.editVersionInfo') : t('workflow.versionHistory.nameThisVersion')}
|
||||||
|
</div>
|
||||||
|
<div className='w-8 h-8 flex items-center justify-center p-1.5 absolute top-5 right-5 cursor-pointer' onClick={onClose}>
|
||||||
|
<RiCloseLine className='w-[18px] h-[18px] text-text-tertiary' />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='flex flex-col gap-y-4 px-6 py-3'>
|
||||||
|
<div className='flex flex-col gap-y-1'>
|
||||||
|
<div className='flex items-center h-6 text-text-secondary system-sm-semibold'>
|
||||||
|
{t('workflow.versionHistory.editField.title')}
|
||||||
|
</div>
|
||||||
|
<Input
|
||||||
|
value={title}
|
||||||
|
placeholder={t('workflow.versionHistory.nameThisVersion')}
|
||||||
|
onChange={handleTitleChange}
|
||||||
|
destructive={titleError}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className='flex flex-col gap-y-1'>
|
||||||
|
<div className='flex items-center h-6 text-text-secondary system-sm-semibold'>
|
||||||
|
{t('workflow.versionHistory.editField.releaseNotes')}
|
||||||
|
</div>
|
||||||
|
<Textarea
|
||||||
|
value={releaseNotes}
|
||||||
|
placeholder={t('workflow.versionHistory.releaseNotesPlaceholder')}
|
||||||
|
onChange={handleDescriptionChange}
|
||||||
|
destructive={releaseNotesError}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='flex justify-end p-6 pt-5'>
|
||||||
|
<div className='flex items-center gap-x-3'>
|
||||||
|
<Button onClick={onClose}>{t('common.operation.cancel')}</Button>
|
||||||
|
<Button variant='primary' onClick={handlePublish}>{t('workflow.common.publish')}</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
}
|
||||||
|
|
||||||
|
export default VersionInfoModal
|
||||||
@ -0,0 +1,66 @@
|
|||||||
|
import React, { type FC, useCallback } from 'react'
|
||||||
|
import { RiHistoryLine } from '@remixicon/react'
|
||||||
|
import { useTranslation } from 'react-i18next'
|
||||||
|
import { useKeyPress } from 'ahooks'
|
||||||
|
import Button from '../../base/button'
|
||||||
|
import Tooltip from '../../base/tooltip'
|
||||||
|
import { getKeyboardKeyCodeBySystem } from '../utils'
|
||||||
|
|
||||||
|
type VersionHistoryButtonProps = {
|
||||||
|
onClick: () => Promise<unknown> | unknown
|
||||||
|
}
|
||||||
|
|
||||||
|
const VERSION_HISTORY_SHORTCUT = ['⌘', '⇧', 'H']
|
||||||
|
|
||||||
|
const PopupContent = React.memo(() => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
return (
|
||||||
|
<div className='flex items-center gap-x-1'>
|
||||||
|
<div className='text-text-secondary system-xs-medium px-0.5'>
|
||||||
|
{t('workflow.common.versionHistory')}
|
||||||
|
</div>
|
||||||
|
<div className='flex items-center gap-x-0.5'>
|
||||||
|
{VERSION_HISTORY_SHORTCUT.map(key => (
|
||||||
|
<span
|
||||||
|
key={key}
|
||||||
|
className='rounded-[4px] bg-components-kbd-bg-white text-text-tertiary system-kbd px-[1px]'
|
||||||
|
>
|
||||||
|
{key}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
PopupContent.displayName = 'PopupContent'
|
||||||
|
|
||||||
|
const VersionHistoryButton: FC<VersionHistoryButtonProps> = ({
|
||||||
|
onClick,
|
||||||
|
}) => {
|
||||||
|
const handleViewVersionHistory = useCallback(async () => {
|
||||||
|
await onClick?.()
|
||||||
|
}, [onClick])
|
||||||
|
|
||||||
|
useKeyPress(`${getKeyboardKeyCodeBySystem('ctrl')}.shift.h`, (e) => {
|
||||||
|
e.preventDefault()
|
||||||
|
handleViewVersionHistory()
|
||||||
|
}
|
||||||
|
, { exactMatch: true, useCapture: true })
|
||||||
|
|
||||||
|
return <Tooltip
|
||||||
|
popupContent={<PopupContent />}
|
||||||
|
noDecoration
|
||||||
|
popupClassName='rounded-lg border-[0.5px] border-components-panel-border bg-components-tooltip-bg
|
||||||
|
shadow-lg shadow-shadow-shadow-5 backdrop-blur-[5px] p-1.5'
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
className={'p-2'}
|
||||||
|
onClick={handleViewVersionHistory}
|
||||||
|
>
|
||||||
|
<RiHistoryLine className='w-4 h-4 text-components-button-secondary-text' />
|
||||||
|
</Button>
|
||||||
|
</Tooltip>
|
||||||
|
}
|
||||||
|
|
||||||
|
export default VersionHistoryButton
|
||||||
@ -1,66 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import dayjs from 'dayjs'
|
|
||||||
import { useTranslation } from 'react-i18next'
|
|
||||||
import { WorkflowVersion } from '../types'
|
|
||||||
import cn from '@/utils/classnames'
|
|
||||||
import type { VersionHistory } from '@/types/workflow'
|
|
||||||
|
|
||||||
type VersionHistoryItemProps = {
|
|
||||||
item: VersionHistory
|
|
||||||
selectedVersion: string
|
|
||||||
onClick: (item: VersionHistory) => void
|
|
||||||
curIdx: number
|
|
||||||
page: number
|
|
||||||
}
|
|
||||||
|
|
||||||
const formatVersion = (version: string, curIdx: number, page: number): string => {
|
|
||||||
if (curIdx === 0 && page === 1)
|
|
||||||
return WorkflowVersion.Draft
|
|
||||||
if (curIdx === 1 && page === 1)
|
|
||||||
return WorkflowVersion.Latest
|
|
||||||
try {
|
|
||||||
const date = new Date(version)
|
|
||||||
if (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, selectedVersion, onClick, curIdx, page }) => {
|
|
||||||
const { t } = useTranslation()
|
|
||||||
const formatTime = (time: number) => dayjs.unix(time).format('YYYY-MM-DD HH:mm:ss')
|
|
||||||
const formattedVersion = formatVersion(item.version, curIdx, page)
|
|
||||||
const renderVersionLabel = (version: string) => (
|
|
||||||
(version === WorkflowVersion.Draft || version === WorkflowVersion.Latest)
|
|
||||||
? (
|
|
||||||
<div className="shrink-0 px-1 border bg-white border-[rgba(0,0,0,0.08)] rounded-[5px] truncate">
|
|
||||||
{version}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
: null
|
|
||||||
)
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className={cn(
|
|
||||||
'flex items-center p-2 h-12 text-xs font-medium text-gray-700 justify-between',
|
|
||||||
formattedVersion === selectedVersion ? '' : 'hover:bg-gray-100',
|
|
||||||
formattedVersion === WorkflowVersion.Draft ? 'cursor-not-allowed' : 'cursor-pointer',
|
|
||||||
)}
|
|
||||||
onClick={() => item.version !== WorkflowVersion.Draft && onClick(item)}
|
|
||||||
>
|
|
||||||
<div className='flex flex-col gap-1 py-2'>
|
|
||||||
<span className="text-left">{formatTime(formattedVersion === WorkflowVersion.Draft ? item.updated_at : item.created_at)}</span>
|
|
||||||
<span className="text-left">{t('workflow.panel.createdBy')} {item.created_by.name}</span>
|
|
||||||
</div>
|
|
||||||
{renderVersionLabel(formattedVersion)}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default React.memo(VersionHistoryItem)
|
|
||||||
@ -1,89 +0,0 @@
|
|||||||
'use client'
|
|
||||||
import React, { useState } from 'react'
|
|
||||||
import { useTranslation } from 'react-i18next'
|
|
||||||
import useSWR from 'swr'
|
|
||||||
import { useWorkflowRun } from '../hooks'
|
|
||||||
import VersionHistoryItem from './version-history-item'
|
|
||||||
import type { VersionHistory } from '@/types/workflow'
|
|
||||||
import { useStore as useAppStore } from '@/app/components/app/store'
|
|
||||||
import { fetchPublishedAllWorkflow } from '@/service/workflow'
|
|
||||||
import Loading from '@/app/components/base/loading'
|
|
||||||
import Button from '@/app/components/base/button'
|
|
||||||
|
|
||||||
const limit = 10
|
|
||||||
|
|
||||||
const VersionHistoryModal = () => {
|
|
||||||
const [selectedVersion, setSelectedVersion] = useState('draft')
|
|
||||||
const [page, setPage] = useState(1)
|
|
||||||
const { handleRestoreFromPublishedWorkflow } = useWorkflowRun()
|
|
||||||
const appDetail = useAppStore.getState().appDetail
|
|
||||||
const { t } = useTranslation()
|
|
||||||
const {
|
|
||||||
data: versionHistory,
|
|
||||||
isLoading,
|
|
||||||
} = useSWR(
|
|
||||||
`/apps/${appDetail?.id}/workflows?page=${page}&limit=${limit}`,
|
|
||||||
fetchPublishedAllWorkflow,
|
|
||||||
)
|
|
||||||
|
|
||||||
const handleVersionClick = (item: VersionHistory) => {
|
|
||||||
if (item.version !== selectedVersion) {
|
|
||||||
setSelectedVersion(item.version)
|
|
||||||
handleRestoreFromPublishedWorkflow(item)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleNextPage = () => {
|
|
||||||
if (versionHistory?.has_more)
|
|
||||||
setPage(page => page + 1)
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className='w-[336px] bg-white rounded-2xl border-[0.5px] border-gray-200 shadow-xl p-2'>
|
|
||||||
<div className="max-h-[400px] overflow-auto">
|
|
||||||
{(isLoading && page) === 1
|
|
||||||
? (
|
|
||||||
<div className='flex items-center justify-center h-10'>
|
|
||||||
<Loading/>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
: (
|
|
||||||
<>
|
|
||||||
{versionHistory?.items?.map((item, idx) => (
|
|
||||||
<VersionHistoryItem
|
|
||||||
key={item.version}
|
|
||||||
item={item}
|
|
||||||
selectedVersion={selectedVersion}
|
|
||||||
onClick={handleVersionClick}
|
|
||||||
curIdx={idx}
|
|
||||||
page={page}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
{isLoading && page > 1 && (
|
|
||||||
<div className='flex items-center justify-center h-10'>
|
|
||||||
<Loading/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{!isLoading && versionHistory?.has_more && (
|
|
||||||
<div className='flex items-center justify-center h-10 mt-2'>
|
|
||||||
<Button
|
|
||||||
className='text-sm'
|
|
||||||
onClick={handleNextPage}
|
|
||||||
>
|
|
||||||
{t('workflow.common.loadMore')}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{!isLoading && !versionHistory?.items?.length && (
|
|
||||||
<div className='flex items-center justify-center h-10 text-gray-500'>
|
|
||||||
{t('workflow.common.noHistory')}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default React.memo(VersionHistoryModal)
|
|
||||||
@ -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='w-4 h-4' />
|
||||||
|
</Button>
|
||||||
|
</PortalToFollowElemTrigger>
|
||||||
|
<PortalToFollowElemContent className='z-10'>
|
||||||
|
<div className='flex flex-col w-[184px] 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='h-[1px] bg-divider-subtle my-0' />
|
||||||
|
<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 items-center justify-between px-2 py-1.5 cursor-pointer rounded-lg ',
|
||||||
|
isDestructive ? 'hover:bg-state-destructive-hover' : 'hover:bg-state-base-hover',
|
||||||
|
)}
|
||||||
|
onClick={() => {
|
||||||
|
onClick(item.key)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className={cn(
|
||||||
|
'flex-1 text-text-primary system-md-regular',
|
||||||
|
isDestructive && 'hover:text-text-destructive',
|
||||||
|
)}>
|
||||||
|
{item.name}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default React.memo(MenuItem)
|
||||||
@ -0,0 +1,42 @@
|
|||||||
|
import { useMemo } from 'react'
|
||||||
|
import { useTranslation } from 'react-i18next'
|
||||||
|
import { VersionHistoryContextMenuOptions } from '../../../types'
|
||||||
|
import type { ContextMenuProps } from './index'
|
||||||
|
|
||||||
|
const useContextMenu = (props: ContextMenuProps) => {
|
||||||
|
const {
|
||||||
|
isNamedVersion,
|
||||||
|
} = props
|
||||||
|
const { t } = useTranslation()
|
||||||
|
|
||||||
|
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'),
|
||||||
|
},
|
||||||
|
]
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [isNamedVersion])
|
||||||
|
|
||||||
|
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='text-text-primary title-2xl-semi-bold'>
|
||||||
|
{`${t('common.operation.delete')} ${versionInfo.marked_name || t('workflow.versionHistory.defaultName')}`}
|
||||||
|
</div>
|
||||||
|
<p className='text-text-secondary system-md-regular'>
|
||||||
|
{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='h-5/6 w-full flex flex-col justify-center gap-y-2'>
|
||||||
|
<div className='flex justify-center'>
|
||||||
|
<RiHistoryLine className='w-10 h-10 text-text-empty-state-icon' />
|
||||||
|
</div>
|
||||||
|
<div className='flex justify-center text-text-tertiary system-xs-regular'>
|
||||||
|
{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 items-center justify-between gap-x-1 px-2 py-1.5 cursor-pointer rounded-lg hover:bg-state-base-hover'
|
||||||
|
onClick={() => {
|
||||||
|
onClick(item.key)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className='flex-1 text-text-primary system-md-regular'>{item.name}</div>
|
||||||
|
{isSelected && <RiCheckLine className='w-4 h-4 text-text-accent shrink-0' />}
|
||||||
|
</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 items-center gap-x-1 w-full px-2 py-1.5'>
|
||||||
|
<div className='flex-1 px-1 text-text-secondary system-md-regular'>
|
||||||
|
{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 items-center justify-center w-6 h-6 p-0.5 cursor-pointer rounded-md',
|
||||||
|
isFiltering ? 'bg-state-accent-active-alt' : 'hover:bg-state-base-hover',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<RiFilter3Line className={cn('w-4 h-4', isFiltering ? 'text-text-accent' : ' text-text-tertiary')} />
|
||||||
|
</div>
|
||||||
|
</PortalToFollowElemTrigger>
|
||||||
|
<PortalToFollowElemContent className='z-[12]'>
|
||||||
|
<div className='flex flex-col w-[248px] 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='h-[1px] bg-divider-subtle my-0' />
|
||||||
|
<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,278 @@
|
|||||||
|
'use client'
|
||||||
|
import React, { useCallback, useState } from 'react'
|
||||||
|
import { useTranslation } from 'react-i18next'
|
||||||
|
import { RiArrowDownDoubleLine, RiCloseLine, RiLoader2Line } from '@remixicon/react'
|
||||||
|
import { 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 { 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'
|
||||||
|
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'
|
||||||
|
|
||||||
|
const HISTORY_PER_PAGE = 10
|
||||||
|
const INITIAL_PAGE = 1
|
||||||
|
|
||||||
|
const VersionHistoryPanel = () => {
|
||||||
|
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 appDetail = useAppStore.getState().appDetail
|
||||||
|
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 { t } = useTranslation()
|
||||||
|
|
||||||
|
const {
|
||||||
|
data: versionHistory,
|
||||||
|
fetchNextPage,
|
||||||
|
hasNextPage,
|
||||||
|
isFetching,
|
||||||
|
} = useWorkflowVersionHistory({
|
||||||
|
appId: appDetail!.id,
|
||||||
|
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
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
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(appDetail!.id)
|
||||||
|
|
||||||
|
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'),
|
||||||
|
})
|
||||||
|
},
|
||||||
|
onError: () => {
|
||||||
|
Toast.notify({
|
||||||
|
type: 'error',
|
||||||
|
message: t('workflow.versionHistory.action.restoreFailure'),
|
||||||
|
})
|
||||||
|
},
|
||||||
|
onSettled: () => {
|
||||||
|
resetWorkflowVersionHistory()
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}, [setShowWorkflowVersionHistoryPanel, handleSyncWorkflowDraft, workflowStore, handleRestoreFromPublishedWorkflow, resetWorkflowVersionHistory, t])
|
||||||
|
|
||||||
|
const { mutateAsync: deleteWorkflow } = useDeleteWorkflow(appDetail!.id)
|
||||||
|
|
||||||
|
const handleDelete = useCallback(async (id: string) => {
|
||||||
|
await deleteWorkflow(id, {
|
||||||
|
onSuccess: () => {
|
||||||
|
setDeleteConfirmOpen(false)
|
||||||
|
Toast.notify({
|
||||||
|
type: 'success',
|
||||||
|
message: t('workflow.versionHistory.action.deleteSuccess'),
|
||||||
|
})
|
||||||
|
resetWorkflowVersionHistory()
|
||||||
|
},
|
||||||
|
onError: () => {
|
||||||
|
Toast.notify({
|
||||||
|
type: 'error',
|
||||||
|
message: t('workflow.versionHistory.action.deleteFailure'),
|
||||||
|
})
|
||||||
|
},
|
||||||
|
onSettled: () => {
|
||||||
|
setDeleteConfirmOpen(false)
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}, [t, deleteWorkflow, resetWorkflowVersionHistory])
|
||||||
|
|
||||||
|
const { mutateAsync: updateWorkflow } = useUpdateWorkflow(appDetail!.id)
|
||||||
|
|
||||||
|
const handleUpdateWorkflow = useCallback(async (params: { id?: string, title: string, releaseNotes: string }) => {
|
||||||
|
const { id, ...rest } = params
|
||||||
|
await updateWorkflow({
|
||||||
|
workflowId: 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])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='flex flex-col w-[268px] bg-components-panel-bg rounded-l-2xl border-y-[0.5px] border-l-[0.5px] border-components-panel-border shadow-xl shadow-shadow-shadow-5'>
|
||||||
|
<div className='flex items-center gap-x-2 px-4 pt-3'>
|
||||||
|
<div className='flex-1 py-1 text-text-primary system-xl-semibold'>{t('workflow.versionHistory.title')}</div>
|
||||||
|
<Filter
|
||||||
|
filterValue={filterValue}
|
||||||
|
isOnlyShowNamedVersions={isOnlyShowNamedVersions}
|
||||||
|
onClickFilterItem={handleClickFilterItem}
|
||||||
|
handleSwitch={handleSwitch}
|
||||||
|
/>
|
||||||
|
<Divider type='vertical' className='h-3.5 mx-1' />
|
||||||
|
<div
|
||||||
|
className='flex items-center justify-center w-6 h-6 p-0.5 cursor-pointer'
|
||||||
|
onClick={handleClose}
|
||||||
|
>
|
||||||
|
<RiCloseLine className='w-4 h-4 text-text-tertiary' />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 relative px-3 py-2 overflow-y-auto">
|
||||||
|
{(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={appDetail!.workflow!.id}
|
||||||
|
onClick={handleVersionClick}
|
||||||
|
handleClickMenuItem={handleClickMenuItem.bind(null, item)}
|
||||||
|
isLast={isLast}
|
||||||
|
/>
|
||||||
|
})
|
||||||
|
))}
|
||||||
|
{hasNextPage && (
|
||||||
|
<div className='flex absolute bottom-2 left-2 p-2'>
|
||||||
|
<div
|
||||||
|
className='flex items-center gap-x-1 cursor-pointer'
|
||||||
|
onClick={handleNextPage}
|
||||||
|
>
|
||||||
|
<div className='flex item-center justify-center p-0.5'>
|
||||||
|
{
|
||||||
|
isFetching
|
||||||
|
? <RiLoader2Line className='w-3.5 h-3.5 text-text-accent animate-spin' />
|
||||||
|
: <RiArrowDownDoubleLine className='w-3.5 h-3.5 text-text-accent' />}
|
||||||
|
</div>
|
||||||
|
<div className='py-[1px] text-text-accent system-xs-medium-uppercase'>
|
||||||
|
{t('workflow.common.loadMore')}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{!isFetching && (!versionHistory?.pages?.length || !versionHistory.pages[0].items.length) && (
|
||||||
|
<Empty onResetFilter={handleResetFilter} />
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</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 z-10 top-0 left-0 w-full h-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='flex gap-x-1 relative p-2' >
|
||||||
|
{!isLast && <div className='absolute w-0.5 h-[calc(100%-0.75rem)] left-4 top-6 bg-divider-subtle' />}
|
||||||
|
<div className=' flex items-center justify-center shrink-0 w-[18px] h-5'>
|
||||||
|
<div className='w-2 h-2 border-[2px] rounded-lg border-text-quaternary' />
|
||||||
|
</div>
|
||||||
|
<div className='flex flex-col grow gap-y-0.5'>
|
||||||
|
<div className='flex items-center h-3.5'>
|
||||||
|
<div className={cn('h-2 w-full bg-text-quaternary rounded-sm opacity-20', titleWidth)} />
|
||||||
|
</div>
|
||||||
|
{
|
||||||
|
!isFirst && (
|
||||||
|
<div className='flex items-center h-3'>
|
||||||
|
<div className={cn('h-1.5 w-full bg-text-quaternary rounded-sm 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='text-text-primary title-2xl-semi-bold'>
|
||||||
|
{`${t('workflow.common.restore')} ${versionInfo.marked_name || t('workflow.versionHistory.defaultName')}`}
|
||||||
|
</div>
|
||||||
|
<p className='text-text-secondary system-md-regular'>
|
||||||
|
{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,137 @@
|
|||||||
|
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)
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const handleClickItem = () => {
|
||||||
|
if (isSelected)
|
||||||
|
return
|
||||||
|
onClick(item)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
'flex gap-x-1 relative p-2 rounded-lg group',
|
||||||
|
isSelected ? 'bg-state-accent-active cursor-not-allowed' : 'hover:bg-state-base-hover cursor-pointer',
|
||||||
|
)}
|
||||||
|
onClick={handleClickItem}
|
||||||
|
onMouseEnter={() => setIsHovering(true)}
|
||||||
|
onMouseLeave={() => {
|
||||||
|
setIsHovering(false)
|
||||||
|
setOpen(false)
|
||||||
|
}}
|
||||||
|
onContextMenu={(e) => {
|
||||||
|
e.preventDefault()
|
||||||
|
setOpen(true)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{!isLast && <div className='absolute w-0.5 h-[calc(100%-0.75rem)] left-4 top-6 bg-divider-subtle' />}
|
||||||
|
<div className=' flex items-center justify-center shrink-0 w-[18px] h-5'>
|
||||||
|
<div className={cn(
|
||||||
|
'w-2 h-2 border-[2px] rounded-lg',
|
||||||
|
isSelected ? 'border-text-accent' : 'border-text-quaternary',
|
||||||
|
)}/>
|
||||||
|
</div>
|
||||||
|
<div className='flex flex-col gap-y-0.5 grow overflow-hidden'>
|
||||||
|
<div className='flex items-center gap-x-1 h-5 mr-6'>
|
||||||
|
<div className={cn(
|
||||||
|
'py-[1px] system-sm-semibold truncate',
|
||||||
|
isSelected ? 'text-text-accent' : 'text-text-secondary',
|
||||||
|
)}>
|
||||||
|
{isDraft ? t('workflow.versionHistory.currentDraft') : item.marked_name || t('workflow.versionHistory.defaultName')}
|
||||||
|
</div>
|
||||||
|
{isLatest && (
|
||||||
|
<div className='flex items-center shrink-0 h-5 px-[5px] rounded-md border border-text-accent-secondary
|
||||||
|
bg-components-badge-bg-dimm text-text-accent-secondary system-2xs-medium-uppercase'>
|
||||||
|
{t('workflow.versionHistory.latest')}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{
|
||||||
|
!isDraft && (
|
||||||
|
<div className='text-text-secondary system-xs-regular break-words'>
|
||||||
|
{item.marked_comment || ''}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
{
|
||||||
|
!isDraft && (
|
||||||
|
<div className='text-text-tertiary system-xs-regular truncate'>
|
||||||
|
{`${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)
|
||||||
Loading…
Reference in New Issue