From f2765b9d31c320534ce520119facdc835ae0585f Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Tue, 29 Oct 2024 11:47:14 +0800
Subject: [PATCH] feat: fetch plugin icon

---
 .../install-plugin/base/use-get-icon.ts       | 24 +++++++++++++++++++
 .../install-from-local-package/index.tsx      | 20 ++++++++++++----
 web/service/plugins.ts                        |  4 ++++
 3 files changed, 44 insertions(+), 4 deletions(-)
 create mode 100644 web/app/components/plugins/install-plugin/base/use-get-icon.ts

diff --git a/web/app/components/plugins/install-plugin/base/use-get-icon.ts b/web/app/components/plugins/install-plugin/base/use-get-icon.ts
new file mode 100644
index 0000000000..210634b4a7
--- /dev/null
+++ b/web/app/components/plugins/install-plugin/base/use-get-icon.ts
@@ -0,0 +1,24 @@
+import { fetchIcon } from '@/service/plugins'
+import { fetchWorkspaces } from '@/service/common'
+
+let tenantId: string | null | undefined = null
+
+const useGetIcon = () => {
+  const getIcon = async (fileName: string) => {
+    if (!tenantId) {
+      const { workspaces } = await fetchWorkspaces({
+        url: '/workspaces',
+        params: {},
+      })
+      tenantId = workspaces.find(v => v.current)?.id
+    }
+    const res = await fetchIcon(tenantId!, fileName)
+    return res
+  }
+
+  return {
+    getIcon,
+  }
+}
+
+export default useGetIcon
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 7d89ede48b..d9dd879fa4 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
@@ -8,10 +8,11 @@ import Uploading from './steps/uploading'
 import Install from './steps/install'
 import Installed from '../base/installed'
 import { useTranslation } from 'react-i18next'
+import useGetIcon from '@/app/components/plugins/install-plugin/base/use-get-icon'
 
 const i18nPrefix = 'plugin.installModal'
 
-interface InstallFromLocalPackageProps {
+type InstallFromLocalPackageProps = {
   file: File
   onSuccess: () => void
   onClose: () => void
@@ -38,12 +39,23 @@ const InstallFromLocalPackage: React.FC<InstallFromLocalPackageProps> = ({
     return t(`${i18nPrefix}.installPlugin`)
   }, [step])
 
-  const handleUploaded = useCallback((result: {
+  const { getIcon } = useGetIcon()
+
+  const handleUploaded = useCallback(async (result: {
     uniqueIdentifier: string
     manifest: PluginDeclaration
   }) => {
-    setUniqueIdentifier(result.uniqueIdentifier)
-    setManifest(result.manifest)
+    const {
+      manifest,
+      uniqueIdentifier,
+    } = result
+    // TODO: wait for api to fix result
+    const icon: any = await getIcon(manifest!.icon)
+    setUniqueIdentifier(uniqueIdentifier)
+    setManifest({
+      ...manifest,
+      icon,
+    })
     setStep(InstallStep.readyToInstall)
   }, [])
 
diff --git a/web/service/plugins.ts b/web/service/plugins.ts
index 77664cb8a2..c2e542f48c 100644
--- a/web/service/plugins.ts
+++ b/web/service/plugins.ts
@@ -71,6 +71,10 @@ export const installPackageFromLocal = async (uniqueIdentifier: string) => {
   })
 }
 
+export const fetchIcon = (tenantId: string, fileName: string) => {
+  return get(`workspaces/current/plugin/icon?tenant_id=${tenantId}&filename=${fileName}`)
+}
+
 export const fetchManifest = async (uniqueIdentifier: string) => {
   return get<PluginDeclaration>(`/workspaces/current/plugin/fetch-manifest?plugin_unique_identifier=${uniqueIdentifier}`)
 }