From e989c1f3aae5478e0e0215fe835cc10877bdf446 Mon Sep 17 00:00:00 2001 From: Joel Date: Tue, 5 Nov 2024 16:04:52 +0800 Subject: [PATCH] feat: fill update install payload --- .../plugins/test/update/page.tsx | 6 +- web/app/components/plugins/card/card-mock.ts | 58 +++++++++++++++++++ .../install-from-local-package/index.tsx | 4 +- .../plugins/install-plugin/utils.ts | 2 + web/app/components/plugins/types.ts | 5 +- .../update-plugin/from-market-place.tsx | 25 ++++++-- 6 files changed, 91 insertions(+), 9 deletions(-) diff --git a/web/app/(commonLayout)/plugins/test/update/page.tsx b/web/app/(commonLayout)/plugins/test/update/page.tsx index 0f3d05ea7b..9d78b45979 100644 --- a/web/app/(commonLayout)/plugins/test/update/page.tsx +++ b/web/app/(commonLayout)/plugins/test/update/page.tsx @@ -1,4 +1,5 @@ 'use client' +import { toolNeko } from '@/app/components/plugins/card/card-mock' import { PluginSource } from '@/app/components/plugins/types' import { useModalContext } from '@/context/modal-context' import React from 'react' @@ -11,11 +12,12 @@ const UpdatePlugin = () => { type: PluginSource.marketplace, marketPlace: { originalPackageInfo: { - id: 'original_xxx', + id: 'langgenius/neko:0.0.1@9e57d693739287c0efdc96847d7ed959ca93f70aa704471f2eb7ed3313821824', + payload: toolNeko as any, }, targetPackageInfo: { id: 'target_xxx', - payload: {} as any, + version: '1.2.3', }, }, }, diff --git a/web/app/components/plugins/card/card-mock.ts b/web/app/components/plugins/card/card-mock.ts index 2ecd59a12b..4217c4d33a 100644 --- a/web/app/components/plugins/card/card-mock.ts +++ b/web/app/components/plugins/card/card-mock.ts @@ -1,6 +1,64 @@ import type { PluginDeclaration } from '../types' import { PluginType } from '../types' +export const toolNeko: PluginDeclaration = { + version: '0.0.1', + author: 'langgenius', + name: 'neko', + description: { + en_US: 'Neko is a cute cat.', + zh_Hans: '这是一只可爱的小猫。', + pt_BR: 'Neko is a cute cat.', + ja_JP: 'Neko is a cute cat.', + }, + icon: '241e5209ecc8b5ce6b7a29a8e50388e9c75b89c3047c6ecd8e552f26de758883.svg', + label: { + en_US: 'Neko', + zh_Hans: 'Neko', + pt_BR: 'Neko', + ja_JP: 'Neko', + }, + category: 'extension' as any, + created_at: '2024-07-12T08:03:44.658609Z', + resource: { + memory: 1048576, + permission: { + tool: { + enabled: true, + }, + model: { + enabled: true, + llm: true, + text_embedding: false, + rerank: false, + tts: false, + speech2text: false, + moderation: false, + }, + node: null, + endpoint: { + enabled: true, + }, + storage: { + enabled: true, + size: 1048576, + }, + }, + }, + plugins: { + tools: null, + models: null, + endpoints: [ + 'provider/neko.yaml', + ], + }, + tags: [], + verified: false, + tool: null, + model: null, + endpoint: null, +} + export const toolNotion = { type: PluginType.tool, org: 'Notion', diff --git a/web/app/components/plugins/install-plugin/install-from-local-package/index.tsx b/web/app/components/plugins/install-plugin/install-from-local-package/index.tsx index 5ecf9d27f3..d53be9e49b 100644 --- a/web/app/components/plugins/install-plugin/install-from-local-package/index.tsx +++ b/web/app/components/plugins/install-plugin/install-from-local-package/index.tsx @@ -40,7 +40,7 @@ const InstallFromLocalPackage: React.FC = ({ return t(`${i18nPrefix}.installFailed`) return t(`${i18nPrefix}.installPlugin`) - }, [step]) + }, [step, t]) const { getIconUrl } = useGetIcon() @@ -59,7 +59,7 @@ const InstallFromLocalPackage: React.FC = ({ icon, }) setStep(InstallStep.readyToInstall) - }, []) + }, [getIconUrl]) const handleUploadFail = useCallback((errorMsg: string) => { setErrorMsg(errorMsg) diff --git a/web/app/components/plugins/install-plugin/utils.ts b/web/app/components/plugins/install-plugin/utils.ts index 7677bf5b73..9f9508490e 100644 --- a/web/app/components/plugins/install-plugin/utils.ts +++ b/web/app/components/plugins/install-plugin/utils.ts @@ -3,6 +3,7 @@ import type { GitHubUrlInfo } from '@/app/components/plugins/types' export const pluginManifestToCardPluginProps = (pluginManifest: PluginDeclaration): Plugin => { return { + plugin_id: pluginManifest.plugin_unique_identifier, type: pluginManifest.category, category: pluginManifest.category, name: pluginManifest.name, @@ -25,6 +26,7 @@ export const pluginManifestToCardPluginProps = (pluginManifest: PluginDeclaratio export const pluginManifestInMarketToPluginProps = (pluginManifest: PluginManifestInMarket): Plugin => { return { + plugin_id: pluginManifest.plugin_unique_identifier, type: pluginManifest.category, category: pluginManifest.category, name: pluginManifest.name, diff --git a/web/app/components/plugins/types.ts b/web/app/components/plugins/types.ts index 386ecf5f7e..051f93906e 100644 --- a/web/app/components/plugins/types.ts +++ b/web/app/components/plugins/types.ts @@ -54,6 +54,7 @@ export type EndpointListItem = { // Plugin manifest export type PluginDeclaration = { + plugin_unique_identifier: string version: string author: string icon: string @@ -71,6 +72,7 @@ export type PluginDeclaration = { } export type PluginManifestInMarket = { + plugin_unique_identifier: string name: string org: string icon: string @@ -137,10 +139,11 @@ export type Permissions = { export type UpdateFromMarketPlacePayload = { originalPackageInfo: { id: string + payload: PluginDeclaration }, targetPackageInfo: { id: string - payload: PluginDeclaration + version: string } } diff --git a/web/app/components/plugins/update-plugin/from-market-place.tsx b/web/app/components/plugins/update-plugin/from-market-place.tsx index a4e215ccee..e0f9e2bc01 100644 --- a/web/app/components/plugins/update-plugin/from-market-place.tsx +++ b/web/app/components/plugins/update-plugin/from-market-place.tsx @@ -1,14 +1,15 @@ 'use client' import type { FC } from 'react' -import React, { useCallback, useMemo, useState } from 'react' +import React, { useCallback, useEffect, useMemo, useState } from 'react' import { RiInformation2Line } from '@remixicon/react' import { useTranslation } from 'react-i18next' import Card from '@/app/components/plugins/card' import Modal from '@/app/components/base/modal' import Button from '@/app/components/base/button' import Badge, { BadgeState } from '@/app/components/base/badge/index' -import { toolNotion } from '@/app/components/plugins/card/card-mock' import type { UpdateFromMarketPlacePayload } from '../types' +import { pluginManifestToCardPluginProps } from '@/app/components/plugins/install-plugin/utils' +import useGetIcon from '../install-plugin/base/use-get-icon' const i18nPrefix = 'plugin.upgrade' @@ -25,10 +26,23 @@ enum UploadStep { } const UpdatePluginModal: FC = ({ + payload, onSave, onCancel, }) => { + const { + originalPackageInfo, + targetPackageInfo, + } = payload const { t } = useTranslation() + const { getIconUrl } = useGetIcon() + const [icon, setIcon] = useState(originalPackageInfo.payload.icon) + useEffect(() => { + (async () => { + const icon = await getIconUrl(originalPackageInfo.payload.icon) + setIcon(icon) + })() + }, [originalPackageInfo, getIconUrl]) const [uploadStep, setUploadStep] = useState(UploadStep.notStarted) const configBtnText = useMemo(() => { return ({ @@ -65,12 +79,15 @@ const UpdatePluginModal: FC = ({
- {'1.2.0 -> 1.3.2'} + {`${originalPackageInfo.payload.version} -> ${targetPackageInfo.version}`}
{t(`${i18nPrefix}.usedInApps`, { num: 3 })}