youngkingdom/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-05-02 00:18:03 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: handle from market install

Browse Source
This commit is contained in:
Joel
2024-10-29 16:33:27 +08:00
parent 0886d7bb8b
commit 0dcbb34cab
8 changed files with 65 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
web/app/components/plugins/install-plugin/base/installed.tsx
View File

@ -1,15 +1,16 @@
'use client'
import type { FC } from 'react'
import React from 'react'
import type { PluginDeclaration } from '../../types'
import type { PluginDeclaration, PluginManifestInMarket } from '../../types'
import Card from '../../card'
import Button from '@/app/components/base/button'
import { pluginManifestToCardPluginProps } from '../utils'
import { pluginManifestInMarketToPluginProps, pluginManifestToCardPluginProps } from '../utils'
import { useTranslation } from 'react-i18next'
import Badge, { BadgeState } from '@/app/components/base/badge/index'
type Props = {
payload?: PluginDeclaration | null
payload?: PluginDeclaration | PluginManifestInMarket | null
isMarketPayload?: boolean
isFailed: boolean
errMsg?: string | null
onCancel: () => void
@ -17,6 +18,7 @@ type Props = {
const Installed: FC<Props> = ({
payload,
isMarketPayload,
isFailed,
errMsg,
onCancel,
@ -30,10 +32,10 @@ const Installed: FC<Props> = ({
<div className='flex p-2 items-start content-start gap-1 self-stretch flex-wrap rounded-2xl bg-background-section-burn'>
<Card
className='w-full'
payload={pluginManifestToCardPluginProps(payload)}
payload={isMarketPayload ? pluginManifestInMarketToPluginProps(payload as PluginManifestInMarket) : pluginManifestToCardPluginProps(payload as PluginDeclaration)}
installed={!isFailed}
installFailed={isFailed}
titleLeft={<Badge className='mx-1' size="s" state={BadgeState.Default}>{payload.version}</Badge>}
titleLeft={<Badge className='mx-1' size="s" state={BadgeState.Default}>{(payload as PluginDeclaration).version || (payload as PluginManifestInMarket).latest_version}</Badge>}
/>
</div>
)}

7
web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx
View File

@ -2,7 +2,7 @@
import React, { useCallback, useState } from 'react'
import Modal from '@/app/components/base/modal'
import type { PluginDeclaration } from '../../types'
import type { PluginManifestInMarket } from '../../types'
import { InstallStep } from '../../types'
import Install from './steps/install'
import Installed from '../base/installed'
@ -10,9 +10,9 @@ import { useTranslation } from 'react-i18next'
const i18nPrefix = 'plugin.installModal'
interface InstallFromMarketplaceProps {
type InstallFromMarketplaceProps = {
uniqueIdentifier: string
manifest: PluginDeclaration
manifest: PluginManifestInMarket
onSuccess: () => void
onClose: () => void
}
@ -75,6 +75,7 @@ const InstallFromMarketplace: React.FC<InstallFromMarketplaceProps> = ({
([InstallStep.installed, InstallStep.installFailed].includes(step)) && (
<Installed
payload={manifest!}
isMarketPayload
isFailed={step === InstallStep.installFailed}
errMsg={errorMsg}
onCancel={onSuccess}

16
web/app/components/plugins/install-plugin/install-from-marketplace/steps/install.tsx
View File

@ -2,9 +2,9 @@
import type { FC } from 'react'
import React, { useMemo } from 'react'
import { RiInformation2Line } from '@remixicon/react'
import type { PluginDeclaration } from '../../../types'
import type { PluginManifestInMarket } from '../../../types'
import Card from '../../../card'
import { pluginManifestToCardPluginProps } from '../../utils'
import { pluginManifestInMarketToPluginProps } from '../../utils'
import Button from '@/app/components/base/button'
import { useTranslation } from 'react-i18next'
import { RiLoader2Line } from '@remixicon/react'
@ -14,9 +14,9 @@ import checkTaskStatus from '../../base/check-task-status'
const i18nPrefix = 'plugin.installModal'
interface Props {
type Props = {
uniqueIdentifier: string
payload: PluginDeclaration
payload: PluginManifestInMarket
onCancel: () => void
onInstalled: () => void
onFailed: (message?: string) => void
@ -74,14 +74,14 @@ const Installed: FC<Props> = ({
const versionInfo = useMemo(() => {
return (<>{
payload.version === toInstallVersion || !supportCheckInstalled
payload.latest_version === toInstallVersion || !supportCheckInstalled
? (
<Badge className='mx-1' size="s" state={BadgeState.Default}>{payload.version}</Badge>
<Badge className='mx-1' size="s" state={BadgeState.Default}>{payload.latest_version}</Badge>
)
: (
<>
<Badge className='mx-1' size="s" state={BadgeState.Warning}>
{`${payload.version} -> ${toInstallVersion}`}
{`${payload.latest_version} -> ${toInstallVersion}`}
</Badge>
<div className='flex px-0.5 justify-center items-center gap-0.5'>
<div className='text-text-warning system-xs-medium'>Used in 3 apps</div>
@ -101,7 +101,7 @@ const Installed: FC<Props> = ({
<div className='flex p-2 items-start content-start gap-1 self-stretch flex-wrap rounded-2xl bg-background-section-burn'>
<Card
className='w-full'
payload={pluginManifestToCardPluginProps(payload)}
payload={pluginManifestInMarketToPluginProps(payload)}
titleLeft={versionInfo}
/>
</div>

23
web/app/components/plugins/install-plugin/utils.ts
View File

@ -1,4 +1,4 @@
import type { Plugin, PluginDeclaration } from '../types'
import type { Plugin, PluginDeclaration, PluginManifestInMarket } from '../types'
export const pluginManifestToCardPluginProps = (pluginManifest: PluginDeclaration): Plugin => {
return {
@ -20,3 +20,24 @@ export const pluginManifestToCardPluginProps = (pluginManifest: PluginDeclaratio
},
}
}
export const pluginManifestInMarketToPluginProps = (pluginManifest: PluginManifestInMarket): Plugin => {
return {
type: pluginManifest.category,
category: pluginManifest.category,
name: pluginManifest.name,
version: pluginManifest.latest_version,
latest_version: pluginManifest.latest_version,
org: pluginManifest.org,
label: pluginManifest.label,
brief: pluginManifest.brief,
icon: pluginManifest.icon,
verified: pluginManifest.verified,
introduction: pluginManifest.introduction,
repository: '',
install_count: 0,
endpoint: {
settings: [],
},
}
}