useQuery in action list

web/app/components/plugins/plugin-detail-panel/action-list.tsx

@@ -1,5 +1,4 @@
 import React, { useState } from 'react'
-import useSWR from 'swr'
 import { useTranslation } from 'react-i18next'
 import { usePluginPageContext } from '@/app/components/plugins/plugin-page/context'
 import { useAppContext } from '@/context/app-context'
@@ -9,28 +8,39 @@ import Indicator from '@/app/components/header/indicator'
 import ToolItem from '@/app/components/tools/provider/tool-item'
 import ConfigCredential from '@/app/components/tools/setting/build-in/config-credentials'
 import {
-  fetchBuiltInToolList,
-  fetchCollectionDetail,
-  removeBuiltInToolCredential,
-  updateBuiltInToolCredential,
-} from '@/service/tools'
+  useBuiltinProviderInfo,
+  useBuiltinTools,
+  useInvalidateBuiltinProviderInfo,
+  useRemoveProviderCredentials,
+  useUpdateProviderCredentials,
+} from '@/service/use-tools'
 
 const ActionList = () => {
   const { t } = useTranslation()
   const { isCurrentWorkspaceManager } = useAppContext()
   const currentPluginDetail = usePluginPageContext(v => v.currentPluginDetail)
-  const { data: provider } = useSWR(
-    `builtin/${currentPluginDetail.plugin_id}/${currentPluginDetail.name}`,
-    fetchCollectionDetail,
-  )
-  const { data } = useSWR(
-    `${currentPluginDetail.plugin_id}/${currentPluginDetail.name}`,
-    fetchBuiltInToolList,
-  )
+  const { data: provider } = useBuiltinProviderInfo(`${currentPluginDetail.plugin_id}/${currentPluginDetail.name}`)
+  const invalidateProviderInfo = useInvalidateBuiltinProviderInfo()
+  const { data } = useBuiltinTools(`${currentPluginDetail.plugin_id}/${currentPluginDetail.name}`)
 
   const [showSettingAuth, setShowSettingAuth] = useState(false)
 
-  const handleCredentialSettingUpdate = () => {}
+  const handleCredentialSettingUpdate = () => {
+    invalidateProviderInfo(`${currentPluginDetail.plugin_id}/${currentPluginDetail.name}`)
+    Toast.notify({
+      type: 'success',
+      message: t('common.api.actionSuccess'),
+    })
+    setShowSettingAuth(false)
+  }
+
+  const { mutate: updatePermission } = useUpdateProviderCredentials({
+    onSuccess: handleCredentialSettingUpdate,
+  })
+
+  const { mutate: removePermission } = useRemoveProviderCredentials({
+    onSuccess: handleCredentialSettingUpdate,
+  })
 
   if (!data || !provider)
     return null
@@ -77,24 +87,11 @@ const ActionList = () => {
         <ConfigCredential
           collection={provider}
           onCancel={() => setShowSettingAuth(false)}
-          onSaved={async (value) => {
-            await updateBuiltInToolCredential(provider.name, value)
-            Toast.notify({
-              type: 'success',
-              message: t('common.api.actionSuccess'),
-            })
-            handleCredentialSettingUpdate()
-            setShowSettingAuth(false)
-          }}
-          onRemove={async () => {
-            await removeBuiltInToolCredential(provider.name)
-            Toast.notify({
-              type: 'success',
-              message: t('common.api.actionSuccess'),
-            })
-            handleCredentialSettingUpdate()
-            setShowSettingAuth(false)
-          }}
+          onSaved={async value => updatePermission({
+            providerName: provider.name,
+            credentials: value,
+          })}
+          onRemove={async () => removePermission(provider.name)}
         />
       )}
     </div>

web/service/use-tools.ts

@@ -1,14 +1,13 @@
-import { get } from './base'
+import { get, post } from './base'
 import type {
+  Collection,
   Tool,
 } from '@/app/components/tools/types'
 import type { ToolWithProvider } from '@/app/components/workflow/types'
 import {
-  useQueryClient,
-} from '@tanstack/react-query'
-
-import {
+  useMutation,
   useQuery,
+  useQueryClient,
 } from '@tanstack/react-query'
 
 const NAME_SPACE = 'tools'
@@ -45,9 +44,59 @@ export const useAllWorkflowTools = () => {
   })
 }
 
-export const useBuiltInTools = (collectionName: string) => {
+export const useBuiltinProviderInfo = (providerName: string) => {
+  return useQuery({
+    queryKey: [NAME_SPACE, 'builtin-provider-info', providerName],
+    queryFn: () => get<Collection>(`/workspaces/current/tool-provider/builtin/${providerName}/info`),
+  })
+}
+
+export const useInvalidateBuiltinProviderInfo = () => {
+  const queryClient = useQueryClient()
+  return (providerName: string) => {
+    queryClient.invalidateQueries(
+      {
+        queryKey: [NAME_SPACE, 'builtin-provider-info', providerName],
+      })
+  }
+}
+
+export const useBuiltinTools = (providerName: string) => {
   return useQuery({
-    queryKey: [NAME_SPACE, 'builtIn', collectionName],
-    queryFn: () => get<Tool[]>(`/workspaces/current/tool-provider/builtin/${collectionName}/tools`),
+    queryKey: [NAME_SPACE, 'builtin-provider-tools', providerName],
+    queryFn: () => get<Tool[]>(`/workspaces/current/tool-provider/builtin/${providerName}/tools`),
+  })
+}
+
+export const useUpdateProviderCredentials = ({
+  onSuccess,
+}: {
+  onSuccess?: () => void
+}) => {
+  return useMutation({
+    mutationFn: (payload: { providerName: string, credentials: Record<string, any> }) => {
+      const { providerName, credentials } = payload
+      return post(`/workspaces/current/tool-provider/builtin/${providerName}/update`, {
+        body: {
+          credentials,
+        },
+      })
+    },
+    onSuccess,
+  })
+}
+
+export const useRemoveProviderCredentials = ({
+  onSuccess,
+}: {
+  onSuccess?: () => void
+}) => {
+  return useMutation({
+    mutationFn: (providerName: string) => {
+      return post(`/workspaces/current/tool-provider/builtin/${providerName}/delete`, {
+        body: {},
+      })
+    },
+    onSuccess,
   })
 }