dify/web/features/deployments/create-release/index.tsx

98 lines
2.2 KiB
TypeScript

'use client'
import type { ButtonProps } from '@langgenius/dify-ui/button'
import { Button } from '@langgenius/dify-ui/button'
import { Dialog, DialogTrigger } from '@langgenius/dify-ui/dialog'
import { useAtomValue, useSetAtom } from 'jotai'
import { ScopeProvider } from 'jotai-scope'
import { useTranslation } from 'react-i18next'
import {
createReleaseAppInstanceIdAtom,
createReleaseDialogOpenAtom,
createReleaseLocalAtoms,
isCreatingReleaseAtom,
openCreateReleaseDialogAtom,
requestCloseCreateReleaseDialogAtom,
} from './state'
import { CreateReleaseDialogContent } from './ui/dialog'
function CreateReleaseScopedControl({
variant,
size,
label,
className,
}: {
variant: ButtonProps['variant']
size: ButtonProps['size']
label?: string
className?: string
}) {
const { t } = useTranslation('deployments')
const open = useAtomValue(createReleaseDialogOpenAtom)
const isCreatingRelease = useAtomValue(isCreatingReleaseAtom)
const openDialog = useSetAtom(openCreateReleaseDialogAtom)
const requestCloseDialog = useSetAtom(requestCloseCreateReleaseDialogAtom)
function handleDialogOpenChange(nextOpen: boolean) {
if (nextOpen) {
openDialog()
return
}
if (!isCreatingRelease)
requestCloseDialog()
}
return (
<Dialog
open={open}
onOpenChange={handleDialogOpenChange}
>
<DialogTrigger
render={(
<Button
size={size}
variant={variant}
className={className}
/>
)}
>
{label ?? t('versions.createRelease')}
</DialogTrigger>
<CreateReleaseDialogContent />
</Dialog>
)
}
export function CreateReleaseControl({
appInstanceId,
variant = 'primary',
size = 'small',
label,
className,
}: {
appInstanceId: string
variant?: ButtonProps['variant']
size?: ButtonProps['size']
label?: string
className?: string
}) {
return (
<ScopeProvider
key={appInstanceId}
atoms={[
[createReleaseAppInstanceIdAtom, appInstanceId],
...createReleaseLocalAtoms,
]}
name="CreateRelease"
>
<CreateReleaseScopedControl
variant={variant}
size={size}
label={label}
className={className}
/>
</ScopeProvider>
)
}