tool oauth

web/app/components/plugins/plugin-auth/authorize/add-api-key-button.tsx

@@ -5,15 +5,16 @@ import {
 import Button from '@/app/components/base/button'
 import type { ButtonProps } from '@/app/components/base/button'
 import ApiKeyModal from './api-key-modal'
+import type { PluginPayload } from '../types'
 
 export type AddApiKeyButtonProps = {
-  provider?: string
+  pluginPayload: PluginPayload
   buttonVariant?: ButtonProps['variant']
   buttonText?: string
   disabled?: boolean
 }
 const AddApiKeyButton = ({
-  provider = '',
+  pluginPayload,
   buttonVariant = 'secondary-accent',
   buttonText = 'use api key',
   disabled,
@@ -33,7 +34,7 @@ const AddApiKeyButton = ({
       {
         isApiKeyModalOpen && (
           <ApiKeyModal
-            provider={provider}
+            pluginPayload={pluginPayload}
             onClose={() => setIsApiKeyModalOpen(false)}
           />
         )

web/app/components/plugins/plugin-auth/authorize/add-oauth-button.tsx

@@ -7,8 +7,10 @@ import Button from '@/app/components/base/button'
 import type { ButtonProps } from '@/app/components/base/button'
 import OAuthClientSettings from './oauth-client-settings'
 import cn from '@/utils/classnames'
+import type { PluginPayload } from '../types'
 
 export type AddOAuthButtonProps = {
+  pluginPayload: PluginPayload
   buttonVariant?: ButtonProps['variant']
   buttonText?: string
   className?: string

web/app/components/plugins/plugin-auth/authorize/api-key-modal.tsx

@@ -8,28 +8,29 @@ import { useTranslation } from 'react-i18next'
 import { RiExternalLinkLine } from '@remixicon/react'
 import { Lock01 } from '@/app/components/base/icons/src/vender/solid/security'
 import Modal from '@/app/components/base/modal/modal'
-import {
-  useAddPluginToolCredential,
-  useGetPluginToolCredentialSchema,
-  useInvalidPluginToolCredentialInfo,
-  useUpdatePluginToolCredential,
-} from '@/service/use-plugins-auth'
 import { CredentialTypeEnum } from '../types'
 import { transformFormSchemasSecretInput } from '../utils'
 import AuthForm from '@/app/components/base/form/form-scenarios/auth'
 import type { FromRefObject } from '@/app/components/base/form/types'
 import { FormTypeEnum } from '@/app/components/base/form/types'
 import { useToastContext } from '@/app/components/base/toast'
+import type { PluginPayload } from '../types'
+import {
+  useAddPluginCredentialHook,
+  useGetPluginCredentialSchemaHook,
+  useInvalidPluginCredentialInfoHook,
+  useUpdatePluginCredentialHook,
+} from '../hooks/use-credential'
 
 export type ApiKeyModalProps = {
-  provider: string
+  pluginPayload: PluginPayload
   onClose?: () => void
   editValues?: Record<string, any>
   onRemove?: () => void
   disabled?: boolean
 }
 const ApiKeyModal = ({
-  provider,
+  pluginPayload,
   onClose,
   editValues,
   onRemove,
@@ -37,7 +38,7 @@ const ApiKeyModal = ({
 }: ApiKeyModalProps) => {
   const { t } = useTranslation()
   const { notify } = useToastContext()
-  const { data = [] } = useGetPluginToolCredentialSchema(provider, CredentialTypeEnum.API_KEY)
+  const { data = [] } = useGetPluginCredentialSchemaHook(pluginPayload, CredentialTypeEnum.API_KEY)
   const formSchemas = useMemo(() => {
     return [
       {
@@ -49,9 +50,9 @@ const ApiKeyModal = ({
       ...data,
     ]
   }, [data])
-  const { mutateAsync: addPluginToolCredential } = useAddPluginToolCredential(provider)
-  const { mutateAsync: updatePluginToolCredential } = useUpdatePluginToolCredential(provider)
-  const invalidatePluginToolCredentialInfo = useInvalidPluginToolCredentialInfo(provider)
+  const { mutateAsync: addPluginCredential } = useAddPluginCredentialHook(pluginPayload)
+  const { mutateAsync: updatePluginCredential } = useUpdatePluginCredentialHook(pluginPayload)
+  const invalidatePluginCredentialInfo = useInvalidPluginCredentialInfoHook(pluginPayload)
   const formRef = useRef<FromRefObject>(null)
   const handleConfirm = useCallback(async () => {
     const form = formRef.current?.getForm()
@@ -73,7 +74,7 @@ const ApiKeyModal = ({
     const transformedValues = transformFormSchemasSecretInput(isPristineSecretInputNames, values)
 
     if (editValues) {
-      await updatePluginToolCredential({
+      await updatePluginCredential({
         credentials: transformedValues,
         credential_id: __credential_id__,
         type: CredentialTypeEnum.API_KEY,
@@ -81,7 +82,7 @@ const ApiKeyModal = ({
       })
     }
     else {
-      await addPluginToolCredential({
+      await addPluginCredential({
         credentials: transformedValues,
         type: CredentialTypeEnum.API_KEY,
         name: __name__ || '',
@@ -93,8 +94,8 @@ const ApiKeyModal = ({
     })
 
     onClose?.()
-    invalidatePluginToolCredentialInfo()
-  }, [addPluginToolCredential, onClose, invalidatePluginToolCredentialInfo, updatePluginToolCredential, notify, t, editValues, formSchemas])
+    invalidatePluginCredentialInfo()
+  }, [addPluginCredential, onClose, invalidatePluginCredentialInfo, updatePluginCredential, notify, t, editValues, formSchemas])
 
   return (
     <Modal

web/app/components/plugins/plugin-auth/authorize/index.tsx

@@ -6,9 +6,10 @@ import AddOAuthButton from './add-oauth-button'
 import type { AddOAuthButtonProps } from './add-oauth-button'
 import AddApiKeyButton from './add-api-key-button'
 import type { AddApiKeyButtonProps } from './add-api-key-button'
+import type { PluginPayload } from '../types'
 
 type AuthorizeProps = {
-  provider?: string
+  pluginPayload: PluginPayload
   theme?: 'primary' | 'secondary'
   showDivider?: boolean
   canOAuth?: boolean
@@ -16,7 +17,7 @@ type AuthorizeProps = {
   disabled?: boolean
 }
 const Authorize = ({
-  provider = '',
+  pluginPayload,
   theme = 'primary',
   showDivider = true,
   canOAuth,
@@ -32,28 +33,30 @@ const Authorize = ({
         buttonLeftClassName: 'hover:bg-components-button-secondary-bg-hover',
         buttonRightClassName: 'hover:bg-components-button-secondary-bg-hover',
         dividerClassName: 'bg-divider-regular opacity-100',
+        pluginPayload,
       }
     }
 
     return {
       buttonText: !canApiKey ? 'Use OAuth Authorization' : 'Use OAuth',
+      pluginPayload,
     }
-  }, [canApiKey, theme])
+  }, [canApiKey, theme, pluginPayload])
 
   const apiKeyButtonProps: AddApiKeyButtonProps = useMemo(() => {
     if (theme === 'secondary') {
       return {
-        provider,
+        pluginPayload,
         buttonVariant: 'secondary',
         buttonText: !canOAuth ? 'API Key Authorization Configuration' : 'Add API Key',
       }
     }
     return {
-      provider,
+      pluginPayload,
       buttonText: !canOAuth ? 'API Key Authorization Configuration' : 'Use API Key',
       buttonVariant: !canOAuth ? 'primary' : 'secondary-accent',
     }
-  }, [canOAuth, theme, provider])
+  }, [canOAuth, theme, pluginPayload])
 
   return (
     <>