Refactor/model credential (#24994)

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

@@ -1,7 +1,6 @@
 import {
   memo,
   useCallback,
-  useMemo,
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
@@ -16,24 +15,18 @@ import type {
 } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { ConfigurationMethodEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import Authorized from './authorized'
-import { useAuth, useCredentialStatus } from './hooks'
+import { useCredentialStatus } from './hooks'
 import Tooltip from '@/app/components/base/tooltip'
-import cn from '@/utils/classnames'
 
 type ConfigProviderProps = {
   provider: ModelProvider,
-  configurationMethod: ConfigurationMethodEnum,
   currentCustomConfigurationModelFixedFields?: CustomConfigurationModelFixedFields,
 }
 const ConfigProvider = ({
   provider,
-  configurationMethod,
   currentCustomConfigurationModelFixedFields,
 }: ConfigProviderProps) => {
   const { t } = useTranslation()
-  const {
-    handleOpenModal,
-  } = useAuth(provider, configurationMethod, currentCustomConfigurationModelFixedFields)
   const {
     hasCredential,
     authorized,
@@ -42,23 +35,20 @@ const ConfigProvider = ({
     available_credentials,
   } = useCredentialStatus(provider)
   const notAllowCustomCredential = provider.allow_custom_token === false
-  const handleClick = useCallback(() => {
-    if (!hasCredential && !notAllowCustomCredential)
-      handleOpenModal()
-  }, [handleOpenModal, hasCredential, notAllowCustomCredential])
-  const ButtonComponent = useMemo(() => {
+
+  const renderTrigger = useCallback(() => {
     const Item = (
       <Button
-        className={cn('grow', notAllowCustomCredential && 'cursor-not-allowed opacity-50')}
+        className='grow'
         size='small'
-        onClick={handleClick}
         variant={!authorized ? 'secondary-accent' : 'secondary'}
       >
         <RiEqualizer2Line className='mr-1 h-3.5 w-3.5' />
-        {t('common.operation.setup')}
+        {hasCredential && t('common.operation.config')}
+        {!hasCredential && t('common.operation.setup')}
       </Button>
     )
-    if (notAllowCustomCredential) {
+    if (notAllowCustomCredential && !hasCredential) {
       return (
         <Tooltip
           asChild
@@ -69,26 +59,27 @@ const ConfigProvider = ({
       )
     }
     return Item
-  }, [handleClick, authorized, notAllowCustomCredential, t])
-
-  if (!hasCredential)
-    return ButtonComponent
+  }, [authorized, hasCredential, notAllowCustomCredential, t])
 
   return (
     <Authorized
       provider={provider}
       configurationMethod={ConfigurationMethodEnum.predefinedModel}
+      currentCustomConfigurationModelFixedFields={currentCustomConfigurationModelFixedFields}
       items={[
         {
           title: t('common.modelProvider.auth.apiKeys'),
           credentials: available_credentials ?? [],
+          selectedCredential: {
+            credential_id: current_credential_id ?? '',
+            credential_name: current_credential_name ?? '',
+          },
         },
       ]}
-      selectedCredential={{
-        credential_id: current_credential_id ?? '',
-        credential_name: current_credential_name ?? '',
-      }}
       showItemSelectedIcon
+      showModelTitle
+      renderTrigger={renderTrigger}
+      triggerOnlyOpenModal={!hasCredential && !notAllowCustomCredential}
     />
   )
 }