feat: add multi model credentials (#24451)

Co-authored-by: zxhlyh <jasonapring2015@outlook.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

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

@@ -52,6 +52,7 @@ type AuthorizedProps = {
   showItemSelectedIcon?: boolean
   selectedCredentialId?: string
   onUpdate?: () => void
+  notAllowCustomCredential?: boolean
 }
 const Authorized = ({
   pluginPayload,
@@ -72,6 +73,7 @@ const Authorized = ({
   showItemSelectedIcon,
   selectedCredentialId,
   onUpdate,
+  notAllowCustomCredential,
 }: AuthorizedProps) => {
   const { t } = useTranslation()
   const { notify } = useToastContext()
@@ -171,6 +173,7 @@ const Authorized = ({
       handleSetDoingAction(false)
     }
   }, [updatePluginCredential, notify, t, handleSetDoingAction, onUpdate])
+  const unavailableCredentials = credentials.filter(credential => credential.not_allowed_to_use)
 
   return (
     <>
@@ -201,6 +204,11 @@ const Authorized = ({
                       ? t('plugin.auth.authorizations')
                       : t('plugin.auth.authorization')
                   }
+                  {
+                    !!unavailableCredentials.length && (
+                      ` (${unavailableCredentials.length} ${t('plugin.auth.unavailable')})`
+                    )
+                  }
                   <RiArrowDownSLine className='ml-0.5 h-4 w-4' />
                 </Button>
               )
@@ -294,18 +302,24 @@ const Authorized = ({
                 )
               }
             </div>
-            <div className='h-px bg-divider-subtle'></div>
-            <div className='p-2'>
-              <Authorize
-                pluginPayload={pluginPayload}
-                theme='secondary'
-                showDivider={false}
-                canOAuth={canOAuth}
-                canApiKey={canApiKey}
-                disabled={disabled}
-                onUpdate={onUpdate}
-              />
-            </div>
+            {
+              !notAllowCustomCredential && (
+                <>
+                  <div className='h-[1px] bg-divider-subtle'></div>
+                    <div className='p-2'>
+                      <Authorize
+                        pluginPayload={pluginPayload}
+                        theme='secondary'
+                        showDivider={false}
+                        canOAuth={canOAuth}
+                        canApiKey={canApiKey}
+                        disabled={disabled}
+                        onUpdate={onUpdate}
+                      />
+                    </div>
+                </>
+              )
+            }
           </div>
         </PortalToFollowElemContent>
       </PortalToFollowElem>

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

@@ -61,14 +61,19 @@ const Item = ({
     return !(disableRename && disableEdit && disableDelete && disableSetDefault)
   }, [disableRename, disableEdit, disableDelete, disableSetDefault])
 
-  return (
+  const CredentialItem = (
     <div
       key={credential.id}
       className={cn(
         'group flex h-8 items-center rounded-lg p-1 hover:bg-state-base-hover',
         renaming && 'bg-state-base-hover',
+        (disabled || credential.not_allowed_to_use) && 'cursor-not-allowed opacity-50',
       )}
-      onClick={() => onItemClick?.(credential.id === '__workspace_default__' ? '' : credential.id)}
+      onClick={() => {
+        if (credential.not_allowed_to_use || disabled)
+          return
+        onItemClick?.(credential.id === '__workspace_default__' ? '' : credential.id)
+      }}
     >
       {
         renaming && (
@@ -121,7 +126,10 @@ const Item = ({
                 </div>
               )
             }
-            <Indicator className='ml-2 mr-1.5 shrink-0' />
+            <Indicator
+              className='ml-2 mr-1.5 shrink-0'
+              color={credential.not_allowed_to_use ? 'gray' : 'green'}
+            />
             <div
               className='system-md-regular truncate text-text-secondary'
               title={credential.name}
@@ -138,11 +146,18 @@ const Item = ({
           </div>
         )
       }
+      {
+        credential.from_enterprise && (
+          <Badge className='shrink-0'>
+            Enterprise
+          </Badge>
+        )
+      }
       {
         showAction && !renaming && (
           <div className='ml-2 hidden shrink-0 items-center group-hover:flex'>
             {
-              !credential.is_default && !disableSetDefault && (
+              !credential.is_default && !disableSetDefault && !credential.not_allowed_to_use && (
                 <Button
                   size='small'
                   disabled={disabled}
@@ -156,7 +171,7 @@ const Item = ({
               )
             }
             {
-              !disableRename && (
+              !disableRename && !credential.from_enterprise && !credential.not_allowed_to_use && (
                 <Tooltip popupContent={t('common.operation.rename')}>
                   <ActionButton
                     disabled={disabled}
@@ -172,7 +187,7 @@ const Item = ({
               )
             }
             {
-              !isOAuth && !disableEdit && (
+              !isOAuth && !disableEdit && !credential.from_enterprise && !credential.not_allowed_to_use && (
                 <Tooltip popupContent={t('common.operation.edit')}>
                   <ActionButton
                     disabled={disabled}
@@ -194,7 +209,7 @@ const Item = ({
               )
             }
             {
-              !disableDelete && (
+              !disableDelete && !credential.from_enterprise && (
                 <Tooltip popupContent={t('common.operation.delete')}>
                   <ActionButton
                     className='hover:bg-transparent'
@@ -214,6 +229,18 @@ const Item = ({
       }
     </div>
   )
+
+  if (credential.not_allowed_to_use) {
+    return (
+      <Tooltip popupContent={t('plugin.auth.customCredentialUnavailable')}>
+        {CredentialItem}
+      </Tooltip>
+    )
+  }
+
+  return (
+    CredentialItem
+  )
 }
 
 export default memo(Item)