fix: style

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

@@ -12,12 +12,14 @@ export type AddApiKeyButtonProps = {
   buttonVariant?: ButtonProps['variant']
   buttonText?: string
   disabled?: boolean
+  onUpdate?: () => void
 }
 const AddApiKeyButton = ({
   pluginPayload,
   buttonVariant = 'secondary-accent',
   buttonText = 'use api key',
   disabled,
+  onUpdate,
 }: AddApiKeyButtonProps) => {
   const [isApiKeyModalOpen, setIsApiKeyModalOpen] = useState(false)
 
@@ -36,6 +38,7 @@ const AddApiKeyButton = ({
           <ApiKeyModal
             pluginPayload={pluginPayload}
             onClose={() => setIsApiKeyModalOpen(false)}
+            onUpdate={onUpdate}
           />
         )
       }

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

@@ -21,7 +21,6 @@ import Badge from '@/app/components/base/badge'
 import {
   useGetPluginOAuthClientSchemaHook,
   useGetPluginOAuthUrlHook,
-  useInvalidPluginCredentialInfoHook,
 } from '../hooks/use-credential'
 import type { FormSchema } from '@/app/components/base/form/types'
 import { FormTypeEnum } from '@/app/components/base/form/types'
@@ -37,6 +36,7 @@ export type AddOAuthButtonProps = {
   buttonRightClassName?: string
   dividerClassName?: string
   disabled?: boolean
+  onUpdate?: () => void
 }
 const AddOAuthButton = ({
   pluginPayload,
@@ -47,6 +47,7 @@ const AddOAuthButton = ({
   buttonRightClassName,
   dividerClassName,
   disabled,
+  onUpdate,
 }: AddOAuthButtonProps) => {
   const { t } = useTranslation()
   const renderI18nObject = useRenderI18nObject()
@@ -61,17 +62,16 @@ const AddOAuthButton = ({
     redirect_uri,
   } = data || {}
   const isConfigured = is_system_oauth_params_exists || Object.keys(client_params || {}).length > 0
-  const invalidatePluginCredentialInfo = useInvalidPluginCredentialInfoHook(pluginPayload)
   const handleOAuth = useCallback(async () => {
     const { authorization_url } = await getPluginOAuthUrl()
 
     if (authorization_url) {
       openOAuthPopup(
         authorization_url,
-        invalidatePluginCredentialInfo,
+        () => onUpdate?.(),
       )
     }
-  }, [getPluginOAuthUrl, invalidatePluginCredentialInfo])
+  }, [getPluginOAuthUrl, onUpdate])
 
   const renderCustomLabel = useCallback((item: FormSchema) => {
     return (
@@ -177,14 +177,14 @@ const AddOAuthButton = ({
           <Button
             variant={buttonVariant}
             className={cn(
-              'w-full py-0 pl-0.5 pr-0 hover:bg-components-button-primary-bg',
+              'w-full px-0 py-0 hover:bg-components-button-primary-bg',
               className,
             )}
             disabled={disabled}
             onClick={handleOAuth}
           >
             <div className={cn(
-              'flex h-full w-0 grow items-center justify-center rounded-l-lg hover:bg-components-button-primary-bg-hover',
+              'flex h-full w-0 grow items-center justify-center rounded-l-lg pl-0.5 hover:bg-components-button-primary-bg-hover',
               buttonLeftClassName,
             )}>
               <div
@@ -251,6 +251,7 @@ const AddOAuthButton = ({
               __oauth_client__: __auth_client__,
             }}
             hasOriginalClientParams={Object.keys(client_params || {}).length > 0}
+            onUpdate={onUpdate}
           />
         )
       }

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

@@ -19,7 +19,6 @@ import type { PluginPayload } from '../types'
 import {
   useAddPluginCredentialHook,
   useGetPluginCredentialSchemaHook,
-  useInvalidPluginCredentialInfoHook,
   useUpdatePluginCredentialHook,
 } from '../hooks/use-credential'
 import { useRenderI18nObject } from '@/hooks/use-i18n'
@@ -30,6 +29,7 @@ export type ApiKeyModalProps = {
   editValues?: Record<string, any>
   onRemove?: () => void
   disabled?: boolean
+  onUpdate?: () => void
 }
 const ApiKeyModal = ({
   pluginPayload,
@@ -37,6 +37,7 @@ const ApiKeyModal = ({
   editValues,
   onRemove,
   disabled,
+  onUpdate,
 }: ApiKeyModalProps) => {
   const { t } = useTranslation()
   const { notify } = useToastContext()
@@ -67,7 +68,6 @@ const ApiKeyModal = ({
   const renderI18nObject = useRenderI18nObject()
   const { mutateAsync: addPluginCredential } = useAddPluginCredentialHook(pluginPayload)
   const { mutateAsync: updatePluginCredential } = useUpdatePluginCredentialHook(pluginPayload)
-  const invalidatePluginCredentialInfo = useInvalidPluginCredentialInfoHook(pluginPayload)
   const formRef = useRef<FormRefObject>(null)
   const handleConfirm = useCallback(async () => {
     if (doingActionRef.current)
@@ -110,12 +110,12 @@ const ApiKeyModal = ({
       })
 
       onClose?.()
-      invalidatePluginCredentialInfo()
+      onUpdate?.()
     }
     finally {
       handleSetDoingAction(false)
     }
-  }, [addPluginCredential, onClose, invalidatePluginCredentialInfo, updatePluginCredential, notify, t, editValues, handleSetDoingAction])
+  }, [addPluginCredential, onClose, onUpdate, updatePluginCredential, notify, t, editValues, handleSetDoingAction])
 
   return (
     <Modal

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

@@ -16,6 +16,7 @@ type AuthorizeProps = {
   canOAuth?: boolean
   canApiKey?: boolean
   disabled?: boolean
+  onUpdate?: () => void
 }
 const Authorize = ({
   pluginPayload,
@@ -24,6 +25,7 @@ const Authorize = ({
   canOAuth,
   canApiKey,
   disabled,
+  onUpdate,
 }: AuthorizeProps) => {
   const { t } = useTranslation()
   const oAuthButtonProps: AddOAuthButtonProps = useMemo(() => {
@@ -69,6 +71,7 @@ const Authorize = ({
               <AddOAuthButton
                 {...oAuthButtonProps}
                 disabled={disabled}
+                onUpdate={onUpdate}
               />
             </div>
           )
@@ -88,6 +91,7 @@ const Authorize = ({
               <AddApiKeyButton
                 {...apiKeyButtonProps}
                 disabled={disabled}
+                onUpdate={onUpdate}
               />
             </div>
           )

web/app/components/plugins/plugin-auth/authorize/oauth-client-settings.tsx

@@ -13,7 +13,6 @@ import { useTranslation } from 'react-i18next'
 import Modal from '@/app/components/base/modal/modal'
 import {
   useDeletePluginOAuthCustomClientHook,
-  useInvalidPluginCredentialInfoHook,
   useInvalidPluginOAuthClientSchemaHook,
   useSetPluginOAuthCustomClientHook,
 } from '../hooks/use-credential'
@@ -35,6 +34,7 @@ type OAuthClientSettingsProps = {
   schemas: FormSchema[]
   onAuth?: () => Promise<void>
   hasOriginalClientParams?: boolean
+  onUpdate?: () => void
 }
 const OAuthClientSettings = ({
   pluginPayload,
@@ -44,6 +44,7 @@ const OAuthClientSettings = ({
   schemas,
   onAuth,
   hasOriginalClientParams,
+  onUpdate,
 }: OAuthClientSettingsProps) => {
   const { t } = useTranslation()
   const { notify } = useToastContext()
@@ -59,7 +60,6 @@ const OAuthClientSettings = ({
     return acc
   }, {} as Record<string, any>)
   const { mutateAsync: setPluginOAuthCustomClient } = useSetPluginOAuthCustomClientHook(pluginPayload)
-  const invalidPluginCredentialInfo = useInvalidPluginCredentialInfoHook(pluginPayload)
   const invalidPluginOAuthClientSchema = useInvalidPluginOAuthClientSchemaHook(pluginPayload)
   const formRef = useRef<FormRefObject>(null)
   const handleConfirm = useCallback(async () => {
@@ -92,13 +92,13 @@ const OAuthClientSettings = ({
       })
 
       onClose?.()
-      invalidPluginCredentialInfo()
+      onUpdate?.()
       invalidPluginOAuthClientSchema()
     }
     finally {
       handleSetDoingAction(false)
     }
-  }, [onClose, invalidPluginCredentialInfo, invalidPluginOAuthClientSchema, setPluginOAuthCustomClient, notify, t, handleSetDoingAction])
+  }, [onClose, onUpdate, invalidPluginOAuthClientSchema, setPluginOAuthCustomClient, notify, t, handleSetDoingAction])
 
   const handleConfirmAndAuthorize = useCallback(async () => {
     await handleConfirm()
@@ -118,13 +118,13 @@ const OAuthClientSettings = ({
         message: t('common.api.actionSuccess'),
       })
       onClose?.()
-      invalidPluginCredentialInfo()
+      onUpdate?.()
       invalidPluginOAuthClientSchema()
     }
     finally {
       handleSetDoingAction(false)
     }
-  }, [invalidPluginCredentialInfo, invalidPluginOAuthClientSchema, deletePluginOAuthCustomClient, notify, t, handleSetDoingAction, onClose])
+  }, [onUpdate, invalidPluginOAuthClientSchema, deletePluginOAuthCustomClient, notify, t, handleSetDoingAction, onClose])
   const form = useForm({
     defaultValues: editValues || defaultValues,
   })

web/app/components/plugins/plugin-auth/authorized-in-node.tsx

@@ -34,6 +34,7 @@ const AuthorizedInNode = ({
     canOAuth,
     credentials,
     disabled,
+    invalidPluginCredentialInfo,
   } = usePluginAuth(pluginPayload, isOpen || !!credentialId)
   const renderTrigger = useCallback((open?: boolean) => {
     let label = ''
@@ -104,6 +105,7 @@ const AuthorizedInNode = ({
       extraAuthorizationItems={extraAuthorizationItems}
       showItemSelectedIcon
       selectedCredentialId={credentialId || '__workspace_default__'}
+      onUpdate={invalidPluginCredentialInfo}
     />
   )
 }

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

@@ -29,7 +29,6 @@ import { useToastContext } from '@/app/components/base/toast'
 import type { PluginPayload } from '../types'
 import {
   useDeletePluginCredentialHook,
-  useInvalidPluginCredentialInfoHook,
   useSetPluginDefaultCredentialHook,
   useUpdatePluginCredentialHook,
 } from '../hooks/use-credential'
@@ -52,6 +51,7 @@ type AuthorizedProps = {
   extraAuthorizationItems?: Credential[]
   showItemSelectedIcon?: boolean
   selectedCredentialId?: string
+  onUpdate?: () => void
 }
 const Authorized = ({
   pluginPayload,
@@ -71,6 +71,7 @@ const Authorized = ({
   extraAuthorizationItems,
   showItemSelectedIcon,
   selectedCredentialId,
+  onUpdate,
 }: AuthorizedProps) => {
   const { t } = useTranslation()
   const { notify } = useToastContext()
@@ -87,7 +88,6 @@ const Authorized = ({
   const pendingOperationCredentialId = useRef<string | null>(null)
   const [deleteCredentialId, setDeleteCredentialId] = useState<string | null>(null)
   const { mutateAsync: deletePluginCredential } = useDeletePluginCredentialHook(pluginPayload)
-  const invalidatePluginCredentialInfo = useInvalidPluginCredentialInfoHook(pluginPayload)
   const openConfirm = useCallback((credentialId?: string) => {
     if (credentialId)
       pendingOperationCredentialId.current = credentialId
@@ -118,14 +118,14 @@ const Authorized = ({
         type: 'success',
         message: t('common.api.actionSuccess'),
       })
-      invalidatePluginCredentialInfo()
+      onUpdate?.()
       setDeleteCredentialId(null)
       pendingOperationCredentialId.current = null
     }
     finally {
       handleSetDoingAction(false)
     }
-  }, [deletePluginCredential, invalidatePluginCredentialInfo, notify, t, handleSetDoingAction])
+  }, [deletePluginCredential, onUpdate, notify, t, handleSetDoingAction])
   const [editValues, setEditValues] = useState<Record<string, any> | null>(null)
   const handleEdit = useCallback((id: string, values: Record<string, any>) => {
     pendingOperationCredentialId.current = id
@@ -145,12 +145,12 @@ const Authorized = ({
         type: 'success',
         message: t('common.api.actionSuccess'),
       })
-      invalidatePluginCredentialInfo()
+      onUpdate?.()
     }
     finally {
       handleSetDoingAction(false)
     }
-  }, [setPluginDefaultCredential, invalidatePluginCredentialInfo, notify, t, handleSetDoingAction])
+  }, [setPluginDefaultCredential, onUpdate, notify, t, handleSetDoingAction])
   const { mutateAsync: updatePluginCredential } = useUpdatePluginCredentialHook(pluginPayload)
   const handleRename = useCallback(async (payload: {
       credential_id: string
@@ -165,12 +165,12 @@ const Authorized = ({
         type: 'success',
         message: t('common.api.actionSuccess'),
       })
-      invalidatePluginCredentialInfo()
+      onUpdate?.()
     }
     finally {
       handleSetDoingAction(false)
     }
-  }, [updatePluginCredential, notify, t, handleSetDoingAction, invalidatePluginCredentialInfo])
+  }, [updatePluginCredential, notify, t, handleSetDoingAction, onUpdate])
 
   return (
     <>

web/app/components/plugins/plugin-auth/hooks/use-plugin-auth.ts

@@ -1,5 +1,8 @@
 import { useAppContext } from '@/context/app-context'
-import { useGetPluginCredentialInfoHook } from './use-credential'
+import {
+  useGetPluginCredentialInfoHook,
+  useInvalidPluginCredentialInfoHook,
+} from './use-credential'
 import { CredentialTypeEnum } from '../types'
 import type { PluginPayload } from '../types'
 
@@ -9,6 +12,7 @@ export const usePluginAuth = (pluginPayload: PluginPayload, enable?: boolean) =>
   const isAuthorized = !!data?.credentials.length
   const canOAuth = data?.supported_credential_types.includes(CredentialTypeEnum.OAUTH2)
   const canApiKey = data?.supported_credential_types.includes(CredentialTypeEnum.API_KEY)
+  const invalidPluginCredentialInfo = useInvalidPluginCredentialInfoHook(pluginPayload)
 
   return {
     isAuthorized,
@@ -16,5 +20,6 @@ export const usePluginAuth = (pluginPayload: PluginPayload, enable?: boolean) =>
     canApiKey,
     credentials: data?.credentials || [],
     disabled: !isCurrentWorkspaceManager,
+    invalidPluginCredentialInfo,
   }
 }

web/app/components/plugins/plugin-auth/plugin-auth-in-agent.tsx

@@ -34,6 +34,7 @@ const PluginAuthInAgent = ({
     canApiKey,
     credentials,
     disabled,
+    invalidPluginCredentialInfo,
   } = usePluginAuth(pluginPayload, true)
 
   const extraAuthorizationItems: Credential[] = [
@@ -91,6 +92,7 @@ const PluginAuthInAgent = ({
             canOAuth={canOAuth}
             canApiKey={canApiKey}
             disabled={disabled}
+            onUpdate={invalidPluginCredentialInfo}
           />
         )
       }
@@ -110,6 +112,7 @@ const PluginAuthInAgent = ({
             isOpen={isOpen}
             onOpenChange={setIsOpen}
             selectedCredentialId={credentialId || '__workspace_default__'}
+            onUpdate={invalidPluginCredentialInfo}
           />
         )
       }

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

@@ -21,6 +21,7 @@ const PluginAuth = ({
     canApiKey,
     credentials,
     disabled,
+    invalidPluginCredentialInfo,
   } = usePluginAuth(pluginPayload, !!pluginPayload.provider)
 
   return (
@@ -32,6 +33,7 @@ const PluginAuth = ({
             canOAuth={canOAuth}
             canApiKey={canApiKey}
             disabled={disabled}
+            onUpdate={invalidPluginCredentialInfo}
           />
         )
       }
@@ -43,6 +45,7 @@ const PluginAuth = ({
             canOAuth={canOAuth}
             canApiKey={canApiKey}
             disabled={disabled}
+            onUpdate={invalidPluginCredentialInfo}
           />
         )
       }