feat: finish github install

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)