From 1e62768eed1b792f7cd7d654b73a7976ba622371 Mon Sep 17 00:00:00 2001 From: JzoNg Date: Sat, 9 Nov 2024 12:51:10 +0800 Subject: [PATCH] useQuery in action list --- .../plugin-detail-panel/action-list.tsx | 63 +++++++++--------- web/service/use-tools.ts | 65 ++++++++++++++++--- 2 files changed, 87 insertions(+), 41 deletions(-) diff --git a/web/app/components/plugins/plugin-detail-panel/action-list.tsx b/web/app/components/plugins/plugin-detail-panel/action-list.tsx index c90f1ffb0d..609e7d1306 100644 --- a/web/app/components/plugins/plugin-detail-panel/action-list.tsx +++ b/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 = () => { 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)} /> )} diff --git a/web/service/use-tools.ts b/web/service/use-tools.ts index fb01888e7f..0d0f816b3e 100644 --- a/web/service/use-tools.ts +++ b/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', collectionName], - queryFn: () => get(`/workspaces/current/tool-provider/builtin/${collectionName}/tools`), + queryKey: [NAME_SPACE, 'builtin-provider-info', providerName], + queryFn: () => get(`/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-provider-tools', providerName], + queryFn: () => get(`/workspaces/current/tool-provider/builtin/${providerName}/tools`), + }) +} + +export const useUpdateProviderCredentials = ({ + onSuccess, +}: { + onSuccess?: () => void +}) => { + return useMutation({ + mutationFn: (payload: { providerName: string, credentials: Record }) => { + 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, }) }