feat: finish github install

web/app/(commonLayout)/plugins/test/card/page.tsx

@@ -6,35 +6,53 @@ import CardMoreInfo from '@/app/components/plugins/card/card-more-info'
 // import ProviderCard from '@/app/components/plugins/provider-card'
 import Badge from '@/app/components/base/badge'
 import InstallBundle from '@/app/components/plugins/install-plugin/install-bundle'
+import { useBoolean } from 'ahooks'
 
 const PluginList = () => {
   const pluginList = [toolNotion, extensionDallE, modelGPT4, customTool]
+  const [isShow, {
+    setFalse: hide,
+  }] = useBoolean(true)
 
   return (
     <div className='pb-3 bg-white'>
-      <InstallBundle onClose={() => { }} fromDSLPayload={[
+      {isShow && (
-        // {
+        <InstallBundle
-        //   type: 'marketplace',
+          onClose={hide}
-        //   value: {
+          fromDSLPayload={[
-        //     plugin_unique_identifier: 'langgenius/google:0.0.2@dcb354c9d0fee60e6e9c9eb996e1e485bbef343ba8cd545c0cfb3ec80970f6f1',
+            // {
-        //   },
+            //   type: 'marketplace',
-        // },
+            //   value: {
-        {
+            //     plugin_unique_identifier: 'langgenius/google:0.0.2@dcb354c9d0fee60e6e9c9eb996e1e485bbef343ba8cd545c0cfb3ec80970f6f1',
-          type: 'github',
+            //   },
-          value: {
+            // },
-            repo: 'YIXIAO0/test',
+            {
-            version: '1.11.5',
+              type: 'github',
-            package: 'test.difypkg',
+              value: {
-            github_plugin_unique_identifier: 'yixiao0/test:0.0.1@3592166c87afcf944b4f13f27467a5c8f9e00bd349cb42033a072734a37431b4',
+                repo: 'YIXIAO0/test',
-          },
+                version: '1.11.5',
-        },
+                package: 'test.difypkg',
-        // {
+                github_plugin_unique_identifier: 'yixiao0/test:0.0.1@3592166c87afcf944b4f13f27467a5c8f9e00bd349cb42033a072734a37431b4',
-        //   type: 'marketplace',
+              },
-        //   value: {
+            },
-        //     plugin_unique_identifier: 'langgenius/openai:0.0.1@f88fdb98d104466db16a425bfe3af8c1bcad45047a40fb802d98a989ac57a5a3',
+            {
-        //   },
+              type: 'github',
-        // },
+              value: {
-      ]} />
+                package: 'dify-test.difypkg',
+                repo: 'WTW0313/dify-test',
+                version: '0.0.5-beta.2',
+                github_plugin_unique_identifier: 'wtw0313/dify-test:0.0.1@1633daa043b47155d4228e2db7734245fd6d3e20ba812e5c02ce69fc1e3038f4',
+              },
+            },
+            // {
+            //   type: 'marketplace',
+            //   value: {
+            //     plugin_unique_identifier: 'langgenius/openai:0.0.1@f88fdb98d104466db16a425bfe3af8c1bcad45047a40fb802d98a989ac57a5a3',
+            //   },
+            // },
+          ]} />
+      )
+      }
       <div className='mx-3 '>
         {/* <h2 className='my-3'>Dify Plugin list</h2> */}
         {/* <div className='grid grid-cols-2 gap-3'>

web/app/components/plugins/install-plugin/install-bundle/index.tsx

@@ -3,8 +3,9 @@ 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 } from '../../types'
+import type { Dependency, Plugin } from '../../types'
 import Install from './steps/install'
+import Installed from './steps/installed'
 import { useTranslation } from 'react-i18next'
 
 const i18nPrefix = 'plugin.installModal'
@@ -29,7 +30,8 @@ const InstallBundle: FC<Props> = ({
 }) => {
   const { t } = useTranslation()
   const [step, setStep] = useState<InstallStep>(installType === InstallType.fromMarketplace ? InstallStep.readyToInstall : InstallStep.uploading)
-
+  const [installedPlugins, setInstalledPlugins] = useState<Plugin[]>([])
+  const [installStatus, setInstallStatus] = useState<{ success: boolean }[]>([])
   const getTitle = useCallback(() => {
     if (step === InstallStep.uploadFailed)
       return t(`${i18nPrefix}.uploadFailed`)
@@ -41,6 +43,12 @@ const InstallBundle: FC<Props> = ({
     return t(`${i18nPrefix}.installPlugin`)
   }, [step, t])
 
+  const handleInstalled = useCallback((plugins: Plugin[], installStatus: { success: boolean }[]) => {
+    setInstallStatus(installStatus)
+    setInstalledPlugins(plugins)
+    setStep(InstallStep.installed)
+  }, [])
+
   return (
     <Modal
       isShow={true}
@@ -57,6 +65,14 @@ const InstallBundle: FC<Props> = ({
         <Install
           fromDSLPayload={fromDSLPayload}
           onCancel={onClose}
+          onInstalled={handleInstalled}
+        />
+      )}
+      {step === InstallStep.installed && (
+        <Installed
+          list={installedPlugins}
+          installStatus={installStatus}
+          onCancel={onClose}
         />
       )}
     </Modal>

web/app/components/plugins/install-plugin/install-bundle/item/github-item.tsx

@@ -29,7 +29,10 @@ const Item: FC<Props> = ({
   const [payload, setPayload] = React.useState<Plugin | null>(null)
   useEffect(() => {
     if (data) {
-      const payload = pluginManifestToCardPluginProps(data.manifest)
+      const payload = {
+        ...pluginManifestToCardPluginProps(data.manifest),
+        plugin_id: data.unique_identifier,
+      }
       onFetchedPayload(payload)
       setPayload(payload)
     }

web/app/components/plugins/install-plugin/install-bundle/steps/install-by-dsl-list.tsx

@@ -26,12 +26,12 @@ const InstallByDSLList: FC<Props> = ({
   const [plugins, setPlugins, getPlugins] = useGetState<Plugin[]>([])
   const handlePlugInFetched = useCallback((index: number) => {
     return (p: Plugin) => {
-      const nextPlugins = produce(plugins, (draft) => {
+      const nextPlugins = produce(getPlugins(), (draft) => {
         draft[index] = p
       })
       setPlugins(nextPlugins)
     }
-  }, [plugins, setPlugins])
+  }, [getPlugins, setPlugins])
 
   const marketPlaceInDSLIndex = useMemo(() => {
     const res: number[] = []

web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx

@@ -7,23 +7,25 @@ import { RiLoader2Line } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import InstallByDSLList from './install-by-dsl-list'
 import { useInstallFromMarketplaceAndGitHub } from '@/service/use-plugins'
-
+import { useInvalidateInstalledPluginList } from '@/service/use-plugins'
 const i18nPrefix = 'plugin.installModal'
 
 type Props = {
   fromDSLPayload: Dependency[]
+  onInstalled: (plugins: Plugin[], installStatus: { success: boolean }[]) => void
   onCancel: () => void
 }
 
 const Install: FC<Props> = ({
   fromDSLPayload,
+  onInstalled,
   onCancel,
 }) => {
   const { t } = useTranslation()
   const [selectedPlugins, setSelectedPlugins] = React.useState<Plugin[]>([])
   const [selectedIndexes, setSelectedIndexes] = React.useState<number[]>([])
   const selectedPluginsNum = selectedPlugins.length
-
+  const invalidateInstalledPluginList = useInvalidateInstalledPluginList()
   const handleSelect = (plugin: Plugin, selectedIndex: number) => {
     const isSelected = !!selectedPlugins.find(p => p.plugin_id === plugin.plugin_id)
     let nextSelectedPlugins
@@ -44,10 +46,12 @@ const Install: FC<Props> = ({
   // Install from marketplace and github
   const { mutate: installFromMarketplaceAndGitHub, isPending: isInstalling } = useInstallFromMarketplaceAndGitHub({
     onSuccess: (res: { success: boolean }[]) => {
-      console.log(res)
+      onInstalled(selectedPlugins, res)
+      const hasInstallSuccess = res.some(r => r.success)
+      if (hasInstallSuccess)
+        invalidateInstalledPluginList()
     },
   })
-  console.log(canInstall, !isInstalling, selectedPlugins.length === 0)
   const handleInstall = () => {
     installFromMarketplaceAndGitHub(fromDSLPayload.filter((_d, index) => selectedIndexes.includes(index)))
   }

web/app/components/plugins/install-plugin/install-bundle/steps/installed.tsx

@@ -0,0 +1,55 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import type { Plugin } from '../../../types'
+import Card from '@/app/components/plugins/card'
+import Button from '@/app/components/base/button'
+import { useTranslation } from 'react-i18next'
+import Badge, { BadgeState } from '@/app/components/base/badge/index'
+
+type Props = {
+  list: Plugin[]
+  installStatus: { success: boolean }[]
+  onCancel: () => void
+}
+
+const Installed: FC<Props> = ({
+  list,
+  installStatus,
+  onCancel,
+}) => {
+  const { t } = useTranslation()
+  return (
+    <>
+      <div className='flex flex-col px-6 py-3 justify-center items-start gap-4 self-stretch'>
+        {/* <p className='text-text-secondary system-md-regular'>{(isFailed && errMsg) ? errMsg : t(`plugin.installModal.${isFailed ? 'installFailedDesc' : 'installedSuccessfullyDesc'}`)}</p> */}
+        <div className='flex p-2 items-start content-start gap-1 self-stretch flex-wrap rounded-2xl bg-background-section-burn space-y-1'>
+          {list.map((plugin, index) => {
+            return (
+              <Card
+                key={plugin.plugin_id}
+                className='w-full'
+                payload={plugin}
+                installed={installStatus[index].success}
+                installFailed={!installStatus[index].success}
+                titleLeft={plugin.version ? <Badge className='mx-1' size="s" state={BadgeState.Default}>{plugin.version}</Badge> : null}
+              />
+            )
+          })}
+        </div>
+      </div>
+      {/* Action Buttons */}
+      <div className='flex p-6 pt-5 justify-end items-center gap-2 self-stretch'>
+        <Button
+          variant='primary'
+          className='min-w-[72px]'
+          onClick={onCancel}
+        >
+          {t('common.operation.close')}
+        </Button>
+      </div>
+    </>
+  )
+}
+
+export default React.memo(Installed)

web/service/use-plugins.ts

@@ -121,6 +121,7 @@ export const useInstallFromMarketplaceAndGitHub = ({
           })
           return ({ success: true })
         }
+        // eslint-disable-next-line unused-imports/no-unused-vars
         catch (e) {
           return Promise.resolve({ success: false })
         }