From 3b032f086d7967c41447c144c6168a2df3bbd7e9 Mon Sep 17 00:00:00 2001 From: Joel Date: Fri, 15 Nov 2024 16:35:09 +0800 Subject: [PATCH 1/2] fix: market icon not show --- .../plugins/install-plugin/install-bundle/index.tsx | 6 +++--- .../install-bundle/item/loaded-item.tsx | 5 ++++- .../install-bundle/item/marketplace-item.tsx | 1 + .../install-plugin/install-bundle/steps/install.tsx | 13 +++++++++---- .../install-bundle/steps/installed.tsx | 5 +++-- web/app/components/plugins/types.ts | 5 +++++ 6 files changed, 25 insertions(+), 10 deletions(-) diff --git a/web/app/components/plugins/install-plugin/install-bundle/index.tsx b/web/app/components/plugins/install-plugin/install-bundle/index.tsx index 4e57af59e0..6a7397fa6c 100644 --- a/web/app/components/plugins/install-plugin/install-bundle/index.tsx +++ b/web/app/components/plugins/install-plugin/install-bundle/index.tsx @@ -3,7 +3,7 @@ import type { FC } from 'react' import Modal from '@/app/components/base/modal' import React, { useCallback, useState } from 'react' import { InstallStep } from '../../types' -import type { Dependency, Plugin } from '../../types' +import type { Dependency, InstallStatusResponse, Plugin } from '../../types' import Install from './steps/install' import Installed from './steps/installed' import { useTranslation } from 'react-i18next' @@ -31,7 +31,7 @@ const InstallBundle: FC = ({ const { t } = useTranslation() const [step, setStep] = useState(installType === InstallType.fromMarketplace ? InstallStep.readyToInstall : InstallStep.uploading) const [installedPlugins, setInstalledPlugins] = useState([]) - const [installStatus, setInstallStatus] = useState<{ success: boolean }[]>([]) + const [installStatus, setInstallStatus] = useState([]) const getTitle = useCallback(() => { if (step === InstallStep.uploadFailed) return t(`${i18nPrefix}.uploadFailed`) @@ -43,7 +43,7 @@ const InstallBundle: FC = ({ return t(`${i18nPrefix}.installPlugin`) }, [step, t]) - const handleInstalled = useCallback((plugins: Plugin[], installStatus: { success: boolean }[]) => { + const handleInstalled = useCallback((plugins: Plugin[], installStatus: InstallStatusResponse[]) => { setInstallStatus(installStatus) setInstalledPlugins(plugins) setStep(InstallStep.installed) diff --git a/web/app/components/plugins/install-plugin/install-bundle/item/loaded-item.tsx b/web/app/components/plugins/install-plugin/install-bundle/item/loaded-item.tsx index 1fff28b5fc..9b503245ce 100644 --- a/web/app/components/plugins/install-plugin/install-bundle/item/loaded-item.tsx +++ b/web/app/components/plugins/install-plugin/install-bundle/item/loaded-item.tsx @@ -6,17 +6,20 @@ import Card from '../../../card' import Checkbox from '@/app/components/base/checkbox' import Badge, { BadgeState } from '@/app/components/base/badge/index' import useGetIcon from '../../base/use-get-icon' +import { MARKETPLACE_API_PREFIX } from '@/config' type Props = { checked: boolean onCheckedChange: (plugin: Plugin) => void payload: Plugin + isFromMarketPlace?: boolean } const LoadedItem: FC = ({ checked, onCheckedChange, payload, + isFromMarketPlace, }) => { const { getIconUrl } = useGetIcon() return ( @@ -30,7 +33,7 @@ const LoadedItem: FC = ({ className='grow' payload={{ ...payload, - icon: getIconUrl(payload.icon), + icon: isFromMarketPlace ? `${MARKETPLACE_API_PREFIX}/plugins/${payload.org}/${payload.name}/icon` : getIconUrl(payload.icon), }} titleLeft={payload.version ? {payload.version} : null} /> diff --git a/web/app/components/plugins/install-plugin/install-bundle/item/marketplace-item.tsx b/web/app/components/plugins/install-plugin/install-bundle/item/marketplace-item.tsx index 5f2e9433a1..836869df63 100644 --- a/web/app/components/plugins/install-plugin/install-bundle/item/marketplace-item.tsx +++ b/web/app/components/plugins/install-plugin/install-bundle/item/marketplace-item.tsx @@ -22,6 +22,7 @@ const MarketPlaceItem: FC = ({ checked={checked} onCheckedChange={onCheckedChange} payload={payload} + isFromMarketPlace /> ) } diff --git a/web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx b/web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx index 5600481a69..6cb1bf5a21 100644 --- a/web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx +++ b/web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx @@ -1,7 +1,7 @@ 'use client' import type { FC } from 'react' import React, { useCallback } from 'react' -import type { Dependency, Plugin } from '../../../types' +import type { Dependency, InstallStatusResponse, Plugin } from '../../../types' import Button from '@/app/components/base/button' import { RiLoader2Line } from '@remixicon/react' import { useTranslation } from 'react-i18next' @@ -12,7 +12,7 @@ const i18nPrefix = 'plugin.installModal' type Props = { fromDSLPayload: Dependency[] - onInstalled: (plugins: Plugin[], installStatus: { success: boolean }[]) => void + onInstalled: (plugins: Plugin[], installStatus: InstallStatusResponse[]) => void onCancel: () => void } @@ -45,8 +45,13 @@ const Install: FC = ({ // Install from marketplace and github const { mutate: installFromMarketplaceAndGitHub, isPending: isInstalling } = useInstallFromMarketplaceAndGitHub({ - onSuccess: (res: { success: boolean }[]) => { - onInstalled(selectedPlugins, res) + onSuccess: (res: InstallStatusResponse[]) => { + onInstalled(selectedPlugins, res.map((r, i) => { + return ({ + ...r, + isFromMarketPlace: fromDSLPayload[selectedIndexes[i]].type === 'marketplace', + }) + })) const hasInstallSuccess = res.some(r => r.success) if (hasInstallSuccess) invalidateInstalledPluginList() diff --git a/web/app/components/plugins/install-plugin/install-bundle/steps/installed.tsx b/web/app/components/plugins/install-plugin/install-bundle/steps/installed.tsx index f8f058f2fa..736930d88c 100644 --- a/web/app/components/plugins/install-plugin/install-bundle/steps/installed.tsx +++ b/web/app/components/plugins/install-plugin/install-bundle/steps/installed.tsx @@ -7,10 +7,11 @@ import Button from '@/app/components/base/button' import { useTranslation } from 'react-i18next' import Badge, { BadgeState } from '@/app/components/base/badge/index' import useGetIcon from '../../base/use-get-icon' +import { MARKETPLACE_API_PREFIX } from '@/config' type Props = { list: Plugin[] - installStatus: { success: boolean }[] + installStatus: { success: boolean, isFromMarketPlace: boolean }[] onCancel: () => void } @@ -33,7 +34,7 @@ const Installed: FC = ({ className='w-full' payload={{ ...plugin, - icon: getIconUrl(plugin.icon), + icon: installStatus[index].isFromMarketPlace ? `${MARKETPLACE_API_PREFIX}/plugins/${plugin.org}/${plugin.name}/icon` : getIconUrl(plugin.icon), }} installed={installStatus[index].success} installFailed={!installStatus[index].success} diff --git a/web/app/components/plugins/types.ts b/web/app/components/plugins/types.ts index e42dff0f5c..34049171ea 100644 --- a/web/app/components/plugins/types.ts +++ b/web/app/components/plugins/types.ts @@ -238,6 +238,11 @@ export type InstallPackageResponse = { task_id: string } +export type InstallStatusResponse = { + success: boolean, + isFromMarketPlace?: boolean +} + export type updatePackageResponse = { all_installed: boolean task_id: string From 9193bc3143c04b1930987af4e986a4d832b8336e Mon Sep 17 00:00:00 2001 From: StyleZhang Date: Fri, 15 Nov 2024 16:45:57 +0800 Subject: [PATCH 2/2] fix: marketplace link --- web/app/components/plugins/marketplace/list/card-wrapper.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/app/components/plugins/marketplace/list/card-wrapper.tsx b/web/app/components/plugins/marketplace/list/card-wrapper.tsx index fd16cd1e6b..364a1b2b58 100644 --- a/web/app/components/plugins/marketplace/list/card-wrapper.tsx +++ b/web/app/components/plugins/marketplace/list/card-wrapper.tsx @@ -56,7 +56,7 @@ const CardWrapper = ({