feat: fetch plugin icon

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

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)
+    const {
-    setManifest(result.manifest)
+      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)
   }, [])
 

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}`)
 }