dify/web/app/components/plugins/install-plugin/install-from-local-package/ready-to-install.tsx
Jingyi 9b74df21d0
feat(web): refine onboarding UI (#37433)
Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: yyh <yuanyouhuilyz@gmail.com>
Co-authored-by: Joel <iamjoel007@gmail.com>
Co-authored-by: hjlarry <hjlarry@163.com>
Co-authored-by: fatelei <fatelei@gmail.com>
Co-authored-by: Asuka Minato <i@asukaminato.eu.org>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Xiyuan Chen <52963600+GareArc@users.noreply.github.com>
Co-authored-by: gigglewang <gigglewang@dify.ai>
Co-authored-by: Yunlu Wen <yunlu.wen@dify.ai>
Co-authored-by: chariri <w@chariri.moe>
Co-authored-by: Evan <2869018789@qq.com>
Co-authored-by: yyh <92089059+lyzno1@users.noreply.github.com>
2026-06-15 08:47:15 +00:00

81 lines
2.3 KiB
TypeScript

'use client'
import type { FC } from 'react'
import type { PluginCategoryEnum, PluginDeclaration } from '../../types'
import * as React from 'react'
import { useCallback } from 'react'
import { InstallStep } from '../../types'
import Installed from '../base/installed'
import useRefreshPluginList from '../hooks/use-refresh-plugin-list'
import Install from './steps/install'
type Props = Readonly<{
step: InstallStep
onStepChange: (step: InstallStep) => void
onStartToInstall: () => void
setIsInstalling: (isInstalling: boolean) => void
onClose: () => void
uniqueIdentifier: string | null
manifest: PluginDeclaration | null
errorMsg: string | null
installContextCategory?: PluginCategoryEnum
onError: (errorMsg: string) => void
}>
const ReadyToInstall: FC<Props> = ({
step,
onStepChange,
onStartToInstall,
setIsInstalling,
onClose,
uniqueIdentifier,
manifest,
errorMsg,
installContextCategory,
onError,
}) => {
const { refreshPluginList } = useRefreshPluginList()
const handleInstalled = useCallback((notRefresh?: boolean) => {
onStepChange(InstallStep.installed)
if (!notRefresh)
refreshPluginList(manifest)
setIsInstalling(false)
}, [manifest, onStepChange, refreshPluginList, setIsInstalling])
const handleFailed = useCallback((errorMsg?: string) => {
onStepChange(InstallStep.installFailed)
setIsInstalling(false)
if (errorMsg)
onError(errorMsg)
}, [onError, onStepChange, setIsInstalling])
return (
<>
{
step === InstallStep.readyToInstall && (
<Install
uniqueIdentifier={uniqueIdentifier!}
payload={manifest!}
onCancel={onClose}
onInstalled={handleInstalled}
onFailed={handleFailed}
onStartToInstall={onStartToInstall}
/>
)
}
{
([InstallStep.uploadFailed, InstallStep.installed, InstallStep.installFailed].includes(step)) && (
<Installed
payload={manifest}
isFailed={[InstallStep.uploadFailed, InstallStep.installFailed].includes(step)}
errMsg={errorMsg}
installContextCategory={installContextCategory}
onCancel={onClose}
/>
)
}
</>
)
}
export default React.memo(ReadyToInstall)