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/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)