fix: enterprise credential

web/app/components/header/account-setting/model-provider-page/model-auth/add-custom-model.tsx

@@ -52,7 +52,9 @@ const AddCustomModel = ({
         variant='ghost-accent'
         size='small'
         onClick={handleClick}
-        disabled={notAllowCustomCredential}
+        className={cn(
+          notAllowCustomCredential && 'cursor-not-allowed opacity-50',
+        )}
       >
         <RiAddCircleFill className='mr-1 h-3.5 w-3.5' />
         {t('common.modelProvider.addModel')}
@@ -78,6 +80,7 @@ const AddCustomModel = ({
         size='small'
         className={cn(
           open && 'bg-components-button-ghost-bg-hover',
+          notAllowCustomCredential && 'cursor-not-allowed opacity-50',
         )}
       >
         <RiAddCircleFill className='mr-1 h-3.5 w-3.5' />
@@ -85,7 +88,7 @@ const AddCustomModel = ({
       </Button>
     )
     return Item
-  }, [t])
+  }, [t, notAllowCustomCredential])
 
   if (noModels)
     return ButtonComponent

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

@@ -114,9 +114,8 @@ const Authorized = ({
   const Trigger = useMemo(() => {
     const Item = (
       <Button
-        className='grow'
+        className={cn('grow', notAllowCustomCredential && 'cursor-not-allowed')}
         size='small'
-        disabled={notAllowCustomCredential}
       >
         <RiEqualizer2Line className='mr-1 h-3.5 w-3.5' />
         {t('common.operation.config')}

web/app/components/header/account-setting/model-provider-page/model-auth/config-provider.tsx

@@ -18,6 +18,7 @@ import { ConfigurationMethodEnum } from '@/app/components/header/account-setting
 import Authorized from './authorized'
 import { useAuth, useCredentialStatus } from './hooks'
 import Tooltip from '@/app/components/base/tooltip'
+import cn from '@/utils/classnames'
 
 type ConfigProviderProps = {
   provider: ModelProvider,
@@ -48,11 +49,10 @@ const ConfigProvider = ({
   const ButtonComponent = useMemo(() => {
     const Item = (
       <Button
-        className='grow'
+        className={cn('grow', notAllowCustomCredential && 'cursor-not-allowed opacity-50')}
         size='small'
         onClick={handleClick}
         variant={!authorized ? 'secondary-accent' : 'secondary'}
-        disabled={notAllowCustomCredential}
       >
         <RiEqualizer2Line className='mr-1 h-3.5 w-3.5' />
         {t('common.operation.setup')}

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

@@ -15,6 +15,7 @@ import type {
 } from '../declarations'
 import { ConfigurationMethodEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import cn from '@/utils/classnames'
+import Tooltip from '@/app/components/base/tooltip'
 
 type SwitchCredentialInLoadBalancingProps = {
   provider: ModelProvider
@@ -39,17 +40,24 @@ const SwitchCredentialInLoadBalancing = ({
   const renderTrigger = useCallback(() => {
     const selectedCredentialId = customModelCredential?.credential_id
     const authRemoved = !selectedCredentialId && !!credentials?.length
-    return (
+    let color = 'green'
+    if (customModelCredential?.not_allowed_to_use)
+      color = 'gray'
+    if (authRemoved)
+      color = 'red'
+
+    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',
         )}
       >
         <Indicator
           className='mr-2'
-          color={authRemoved ? 'red' : 'green'}
+          color={color as any}
         />
         {
           authRemoved ? t('common.modelProvider.auth.authRemoved') : customModelCredential?.credential_name
@@ -57,6 +65,17 @@ const SwitchCredentialInLoadBalancing = ({
         <RiArrowDownSLine className='h-4 w-4' />
       </Button>
     )
+    if (customModelCredential?.not_allowed_to_use) {
+      return (
+        <Tooltip
+          asChild
+          popupContent={t('plugin.auth.credentialUnavailable')}
+        >
+          {Item}
+        </Tooltip>
+      )
+    }
+    return Item
   }, [customModelCredential, t, credentials])
 
   return (

web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-configs.tsx

@@ -29,6 +29,7 @@ import { useProviderContextSelector } from '@/context/provider-context'
 import { IS_CE_EDITION } from '@/config'
 import { AddCredentialInLoadBalancing } from '@/app/components/header/account-setting/model-provider-page/model-auth'
 import { useModelModalHandler } from '@/app/components/header/account-setting/model-provider-page/hooks'
+import Badge from '@/app/components/base/badge/index'
 
 export type ModelLoadBalancingConfigsProps = {
   draftConfig?: ModelLoadBalancingConfig
@@ -173,6 +174,7 @@ const ModelLoadBalancingConfigs = ({
           <div className='flex flex-col gap-1 px-3 pb-3'>
             {validDraftConfigList.map((config, index) => {
               const isProviderManaged = config.name === '__inherit__'
+              const credential = modelCredential.available_credentials.find(c => c.credential_id === config.credential_id)
               return (
                 <div key={config.id || index} className='group flex h-10 items-center rounded-lg border border-components-panel-border bg-components-panel-on-panel-item-bg px-3 shadow-xs'>
                   <div className='flex grow items-center'>
@@ -191,15 +193,20 @@ const ModelLoadBalancingConfigs = ({
                       {isProviderManaged ? t('common.modelProvider.defaultConfig') : config.name}
                     </div>
                     {isProviderManaged && (
-                      <span className='rounded-[5px] border border-divider-regular px-1 text-2xs uppercase text-text-tertiary'>{t('common.modelProvider.providerManaged')}</span>
+                      <Badge className='ml-2'>{t('common.modelProvider.providerManaged')}</Badge>
                     )}
+                    {
+                      credential?.from_enterprise && (
+                        <Badge className='ml-2'>Enterprise</Badge>
+                      )
+                    }
                   </div>
                   <div className='flex items-center gap-1'>
                     {!isProviderManaged && (
                       <>
                         <div className='flex items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100'>
                           {
-                            config.credential_id && (
+                            config.credential_id && !credential?.not_allowed_to_use && (
                               <span
                                 className='flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-components-button-secondary-bg text-text-tertiary transition-colors hover:bg-components-button-secondary-bg-hover'
                                 onClick={() => {
@@ -238,6 +245,7 @@ const ModelLoadBalancingConfigs = ({
                             size='md'
                             className='justify-self-end'
                             onChange={value => toggleConfigEntryEnabled(index, value)}
+                            disabled={credential?.not_allowed_to_use}
                           />
                         </>
                       )