Refactor/model credential (#24994)

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

@@ -0,0 +1,115 @@
+import {
+  memo,
+  useCallback,
+  useState,
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  RiAddLine,
+  RiArrowDownSLine,
+} from '@remixicon/react'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import type { Credential } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import CredentialItem from './authorized/credential-item'
+import Badge from '@/app/components/base/badge'
+import Indicator from '@/app/components/header/indicator'
+
+type CredentialSelectorProps = {
+  selectedCredential?: Credential & { addNewCredential?: boolean }
+  credentials: Credential[]
+  onSelect: (credential: Credential & { addNewCredential?: boolean }) => void
+  disabled?: boolean
+  notAllowAddNewCredential?: boolean
+}
+const CredentialSelector = ({
+  selectedCredential,
+  credentials,
+  onSelect,
+  disabled,
+  notAllowAddNewCredential,
+}: CredentialSelectorProps) => {
+  const { t } = useTranslation()
+  const [open, setOpen] = useState(false)
+  const handleSelect = useCallback((credential: Credential & { addNewCredential?: boolean }) => {
+    setOpen(false)
+    onSelect(credential)
+  }, [onSelect])
+  const handleAddNewCredential = useCallback(() => {
+    handleSelect({
+      credential_id: '__add_new_credential',
+      addNewCredential: true,
+      credential_name: t('common.modelProvider.auth.addNewModelCredential'),
+    })
+  }, [handleSelect, t])
+
+  return (
+    <PortalToFollowElem
+      open={open}
+      onOpenChange={setOpen}
+      triggerPopupSameWidth
+    >
+      <PortalToFollowElemTrigger asChild onClick={() => !disabled && setOpen(v => !v)}>
+        <div className='system-sm-regular flex h-8 w-full items-center justify-between rounded-lg bg-components-input-bg-normal px-2'>
+          {
+            selectedCredential && (
+              <div className='flex items-center'>
+                {
+                  !selectedCredential.addNewCredential && <Indicator className='ml-1 mr-2 shrink-0' />
+                }
+                <div className='system-sm-regular truncate text-components-input-text-filled' title={selectedCredential.credential_name}>{selectedCredential.credential_name}</div>
+                {
+                  selectedCredential.from_enterprise && (
+                    <Badge className='shrink-0'>Enterprise</Badge>
+                  )
+                }
+              </div>
+            )
+          }
+          {
+            !selectedCredential && (
+              <div className='system-sm-regular grow truncate text-components-input-text-placeholder'>{t('common.modelProvider.auth.selectModelCredential')}</div>
+            )
+          }
+          <RiArrowDownSLine className='h-4 w-4 text-text-quaternary' />
+        </div>
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent className='z-[100]'>
+        <div className='border-ccomponents-panel-border rounded-xl border-[0.5px] bg-components-panel-bg-blur shadow-lg'>
+          <div className='max-h-[320px] overflow-y-auto p-1'>
+            {
+              credentials.map(credential => (
+                <CredentialItem
+                  key={credential.credential_id}
+                  credential={credential}
+                  disableDelete
+                  disableEdit
+                  disableRename
+                  onItemClick={handleSelect}
+                  showSelectedIcon
+                  selectedCredentialId={selectedCredential?.credential_id}
+                />
+              ))
+            }
+          </div>
+          {
+            !notAllowAddNewCredential && (
+              <div
+                className='system-xs-medium flex h-10 cursor-pointer items-center border-t border-t-divider-subtle px-7 text-text-accent-light-mode-only'
+                onClick={handleAddNewCredential}
+              >
+                <RiAddLine className='mr-1 h-4 w-4' />
+                {t('common.modelProvider.auth.addNewModelCredential')}
+              </div>
+            )
+          }
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+
+export default memo(CredentialSelector)