feat: add onSuccess callback to InstallFromGitHub and update plugin list on install actions

web/app/components/plugins/install-plugin/install-from-github/index.tsx

@@ -15,7 +15,6 @@ import Installed from '../base/installed'
 import Loaded from './steps/loaded'
 import useGetIcon from '@/app/components/plugins/install-plugin/base/use-get-icon'
 import { useTranslation } from 'react-i18next'
-import { usePluginPageContext } from '../../plugin-page/context'
 
 const i18nPrefix = 'plugin.installModal'
 
@@ -25,7 +24,7 @@ type InstallFromGitHubProps = {
   onSuccess: () => void
 }
 
-const InstallFromGitHub: React.FC<InstallFromGitHubProps> = ({ updatePayload, onClose }) => {
+const InstallFromGitHub: React.FC<InstallFromGitHubProps> = ({ updatePayload, onClose, onSuccess }) => {
   const { t } = useTranslation()
   const [state, setState] = useState<InstallState>({
     step: updatePayload ? InstallStepFromGitHub.selectPackage : InstallStepFromGitHub.setUrl,
@@ -38,7 +37,6 @@ const InstallFromGitHub: React.FC<InstallFromGitHubProps> = ({ updatePayload, on
   const [uniqueIdentifier, setUniqueIdentifier] = useState<string | null>(null)
   const [manifest, setManifest] = useState<PluginDeclaration | null>(null)
   const [errorMsg, setErrorMsg] = useState<string | null>(null)
-  const mutateInstalledPluginList = usePluginPageContext(v => v.mutateInstalledPluginList)
 
   const versions: Item[] = state.releases.map(release => ({
     value: release.tag_name,
@@ -111,9 +109,9 @@ const InstallFromGitHub: React.FC<InstallFromGitHubProps> = ({ updatePayload, on
   }, [])
 
   const handleInstalled = useCallback(() => {
-    mutateInstalledPluginList()
     setState(prevState => ({ ...prevState, step: InstallStepFromGitHub.installed }))
-  }, [mutateInstalledPluginList])
+    onSuccess()
+  }, [onSuccess])
 
   const handleFailed = useCallback((errorMsg?: string) => {
     setState(prevState => ({ ...prevState, step: InstallStepFromGitHub.installFailed }))

web/app/components/plugins/plugin-item/action.tsx

@@ -14,6 +14,7 @@ import { useGitHubReleases } from '../install-plugin/hooks'
 import { compareVersion, getLatestVersion } from '@/utils/semver'
 import Toast from '@/app/components/base/toast'
 import { useModalContext } from '@/context/modal-context'
+import { usePluginPageContext } from '../plugin-page/context'
 
 const i18nPrefix = 'plugin.action'
 
@@ -51,6 +52,7 @@ const Action: FC<Props> = ({
   }] = useBoolean(false)
   const { fetchReleases } = useGitHubReleases()
   const { setShowUpdatePluginModal } = useModalContext()
+  const mutateInstalledPluginList = usePluginPageContext(v => v.mutateInstalledPluginList)
 
   const handleFetchNewVersion = async () => {
     try {
@@ -59,6 +61,9 @@ const Action: FC<Props> = ({
       const latestVersion = getLatestVersion(versions)
       if (compareVersion(latestVersion, version) === 1) {
         setShowUpdatePluginModal({
+          onSaveCallback: () => {
+            mutateInstalledPluginList()
+          },
           payload: {
             type: PluginSource.github,
             github: {

web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx

@@ -15,6 +15,7 @@ import {
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
 import { useSelector as useAppContextSelector } from '@/context/app-context'
+import { usePluginPageContext } from './context'
 
 type Props = {
   onSwitchToMarketplaceTab: () => void
@@ -27,6 +28,7 @@ const InstallPluginDropdown = ({
   const [selectedAction, setSelectedAction] = useState<string | null>(null)
   const [selectedFile, setSelectedFile] = useState<File | null>(null)
   const { enable_marketplace } = useAppContextSelector(s => s.systemFeatures)
+  const mutateInstalledPluginList = usePluginPageContext(v => v.mutateInstalledPluginList)
 
   const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0]
@@ -114,7 +116,10 @@ const InstallPluginDropdown = ({
           </div>
         </PortalToFollowElemContent>
       </div>
-      {selectedAction === 'github' && <InstallFromGitHub onClose={() => setSelectedAction(null)} />}
+      {selectedAction === 'github' && <InstallFromGitHub
+        onSuccess={() => { mutateInstalledPluginList() }}
+        onClose={() => setSelectedAction(null)}
+      />}
       {selectedAction === 'local' && selectedFile
         && (<InstallFromLocalPackage
           file={selectedFile}