Fix/enterprise model credential (#25591)

web/app/components/header/account-setting/model-provider-page/model-auth/switch-credential-in-load-balancing.tsx

@@ -37,51 +37,57 @@ const SwitchCredentialInLoadBalancing = ({
   onRemove,
 }: SwitchCredentialInLoadBalancingProps) => {
   const { t } = useTranslation()
-
+  const notAllowCustomCredential = provider.allow_custom_token === false
   const handleItemClick = useCallback((credential: Credential) => {
     setCustomModelCredential(credential)
   }, [setCustomModelCredential])
 
   const renderTrigger = useCallback(() => {
     const selectedCredentialId = customModelCredential?.credential_id
-    const authRemoved = !selectedCredentialId && !!credentials?.length
+    const currentCredential = credentials?.find(c => c.credential_id === selectedCredentialId)
+    const empty = !credentials?.length
+    const authRemoved = selectedCredentialId && !currentCredential && !empty
+    const unavailable = currentCredential?.not_allowed_to_use
+
     let color = 'green'
-    if (authRemoved && !customModelCredential?.not_allowed_to_use)
+    if (authRemoved || unavailable)
       color = 'red'
-    if (customModelCredential?.not_allowed_to_use)
-      color = 'gray'
 
     const Item = (
       <Button
         variant='secondary'
         className={cn(
           'shrink-0 space-x-1',
-          authRemoved && 'text-components-button-destructive-secondary-text',
-          customModelCredential?.not_allowed_to_use && 'cursor-not-allowed opacity-50',
+          (authRemoved || unavailable) && 'text-components-button-destructive-secondary-text',
+          empty && 'cursor-not-allowed opacity-50',
         )}
       >
-        <Indicator
-          className='mr-2'
-          color={color as any}
-        />
         {
-          authRemoved && !customModelCredential?.not_allowed_to_use && t('common.modelProvider.auth.authRemoved')
+          !empty && (
+            <Indicator
+              className='mr-2'
+              color={color as any}
+            />
+          )
         }
         {
-          !authRemoved && customModelCredential?.not_allowed_to_use && t('plugin.auth.credentialUnavailable')
+          authRemoved && t('common.modelProvider.auth.authRemoved')
         }
         {
-          !authRemoved && !customModelCredential?.not_allowed_to_use && customModelCredential?.credential_name
+          (unavailable || empty) && t('plugin.auth.credentialUnavailableInButton')
         }
         {
-          customModelCredential?.from_enterprise && (
+          !authRemoved && !unavailable && !empty && customModelCredential?.credential_name
+        }
+        {
+          currentCredential?.from_enterprise && (
             <Badge className='ml-2'>Enterprise</Badge>
           )
         }
         <RiArrowDownSLine className='h-4 w-4' />
       </Button>
     )
-    if (customModelCredential?.not_allowed_to_use) {
+    if (empty && notAllowCustomCredential) {
       return (
         <Tooltip
           asChild
@@ -92,7 +98,7 @@ const SwitchCredentialInLoadBalancing = ({
       )
     }
     return Item
-  }, [customModelCredential, t, credentials])
+  }, [customModelCredential, t, credentials, notAllowCustomCredential])
 
   return (
     <Authorized
@@ -123,6 +129,7 @@ const SwitchCredentialInLoadBalancing = ({
       enableAddModelCredential
       showItemSelectedIcon
       popupTitle={t('common.modelProvider.auth.modelCredentials')}
+      triggerOnlyOpenModal={!credentials?.length}
     />
   )
 }

web/app/components/header/account-setting/model-provider-page/model-modal/index.tsx

@@ -376,16 +376,16 @@ const ModelModal: FC<ModelModalProps> = ({
                     <a
                       href={provider.help?.url[language] || provider.help?.url.en_US}
                       target='_blank' rel='noopener noreferrer'
-                      className='system-xs-regular mt-2 inline-flex items-center text-text-accent'
+                      className='system-xs-regular mt-2 inline-block  align-middle text-text-accent'
                       onClick={e => !provider.help.url && e.preventDefault()}
                     >
                       {provider.help.title?.[language] || provider.help.url[language] || provider.help.title?.en_US || provider.help.url.en_US}
-                      <LinkExternal02 className='ml-1 h-3 w-3' />
+                      <LinkExternal02 className='ml-1 mt-[-2px] inline-block h-3 w-3' />
                     </a>
                   )
                   : <div />
               }
-              <div className='flex items-center justify-end space-x-2'>
+              <div className='ml-2 flex items-center justify-end space-x-2'>
                 {
                   isEditMode && (
                     <Button

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

@@ -36,14 +36,22 @@ const AuthorizedInNode = ({
     disabled,
     invalidPluginCredentialInfo,
     notAllowCustomCredential,
-  } = usePluginAuth(pluginPayload, isOpen || !!credentialId)
+  } = usePluginAuth(pluginPayload, true)
   const renderTrigger = useCallback((open?: boolean) => {
     let label = ''
     let removed = false
     let unavailable = false
     let color = 'green'
+    let defaultUnavailable = false
     if (!credentialId) {
       label = t('plugin.auth.workspaceDefault')
+
+      const defaultCredential = credentials.find(c => c.is_default)
+
+      if (defaultCredential?.not_allowed_to_use) {
+        color = 'gray'
+        defaultUnavailable = true
+      }
     }
     else {
       const credential = credentials.find(c => c.id === credentialId)
@@ -63,6 +71,7 @@ const AuthorizedInNode = ({
           open && !removed && 'bg-components-button-ghost-bg-hover',
           removed && 'bg-transparent text-text-destructive',
         )}
+        variant={(defaultUnavailable || unavailable) ? 'ghost' : 'secondary'}
       >
         <Indicator
           className='mr-1.5'
@@ -70,7 +79,12 @@ const AuthorizedInNode = ({
         />
         {label}
         {
-          unavailable && t('plugin.auth.unavailable')
+          (unavailable || defaultUnavailable) && (
+            <>
+              &nbsp;
+              {t('plugin.auth.unavailable')}
+            </>
+          )
         }
         <RiArrowDownSLine
           className={cn(
@@ -81,6 +95,7 @@ const AuthorizedInNode = ({
       </Button>
     )
   }, [credentialId, credentials, t])
+  const defaultUnavailable = credentials.find(c => c.is_default)?.not_allowed_to_use
   const extraAuthorizationItems: Credential[] = [
     {
       id: '__workspace_default__',
@@ -88,6 +103,7 @@ const AuthorizedInNode = ({
       provider: '',
       is_default: !credentialId,
       isWorkspaceDefault: true,
+      not_allowed_to_use: defaultUnavailable,
     },
   ]
   const handleAuthorizationItemClick = useCallback((id: string) => {

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

@@ -174,6 +174,7 @@ const Authorized = ({
     }
   }, [updatePluginCredential, notify, t, handleSetDoingAction, onUpdate])
   const unavailableCredentials = credentials.filter(credential => credential.not_allowed_to_use)
+  const unavailableCredential = credentials.find(credential => credential.not_allowed_to_use && credential.is_default)
 
   return (
     <>
@@ -197,7 +198,7 @@ const Authorized = ({
                     'w-full',
                     isOpen && 'bg-components-button-secondary-bg-hover',
                   )}>
-                  <Indicator className='mr-2' />
+                  <Indicator className='mr-2' color={unavailableCredential ? 'gray' : 'green'} />
                   {credentials.length}&nbsp;
                   {
                     credentials.length > 1

web/i18n/en-US/plugin.ts

@@ -298,6 +298,7 @@ const translation = {
     clientInfo: 'As no system client secrets found for this tool provider, setup it manually is required, for redirect_uri, please use',
     oauthClient: 'OAuth Client',
     credentialUnavailable: 'Credentials currently unavailable. Please contact admin.',
+    credentialUnavailableInButton: 'Credential unavailable',
     customCredentialUnavailable: 'Custom credentials currently unavailable',
     unavailable: 'Unavailable',
   },

web/i18n/zh-Hans/plugin.ts

@@ -298,6 +298,7 @@ const translation = {
     clientInfo: '由于未找到此工具提供者的系统客户端密钥，因此需要手动设置，对于 redirect_uri，请使用',
     oauthClient: 'OAuth 客户端',
     credentialUnavailable: '自定义凭据当前不可用，请联系管理员。',
+    credentialUnavailableInButton: '凭据不可用',
     customCredentialUnavailable: '自定义凭据当前不可用',
     unavailable: '不可用',
   },