From 5008d9f4a05633f6393df8ac7fec6542c2ca3164 Mon Sep 17 00:00:00 2001
From: twwu <twwu@dify.ai>
Date: Wed, 6 Nov 2024 16:58:52 +0800
Subject: [PATCH] feat: add onSuccess callback to InstallFromGitHub and update
 plugin list on install actions

---
 .../plugins/install-plugin/install-from-github/index.tsx  | 8 +++-----
 web/app/components/plugins/plugin-item/action.tsx         | 5 +++++
 .../plugins/plugin-page/install-plugin-dropdown.tsx       | 7 ++++++-
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/web/app/components/plugins/install-plugin/install-from-github/index.tsx b/web/app/components/plugins/install-plugin/install-from-github/index.tsx
index e8fdd69f0c..fea4041764 100644
--- a/web/app/components/plugins/install-plugin/install-from-github/index.tsx
+++ b/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 }))
diff --git a/web/app/components/plugins/plugin-item/action.tsx b/web/app/components/plugins/plugin-item/action.tsx
index 624adf87b0..e0ace028ee 100644
--- a/web/app/components/plugins/plugin-item/action.tsx
+++ b/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: {
diff --git a/web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx b/web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx
index 5b8d4caa2e..c658921b61 100644
--- a/web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx
+++ b/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}