| | |
| | | import Form from '@/app/components/header/account-setting/model-provider-page/model-modal/Form' |
| | | import { LinkExternal02 } from '@/app/components/base/icons/src/vender/line/general' |
| | | import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks' |
| | | import { noop } from 'lodash-es' |
| | | |
| | | type Props = { |
| | | collection: Collection |
| | |
| | | onSaved: (value: Record<string, any>) => void |
| | | isHideRemoveBtn?: boolean |
| | | onRemove?: () => void |
| | | isSaving?: boolean |
| | | } |
| | | |
| | | const ConfigCredential: FC<Props> = ({ |
| | |
| | | onCancel, |
| | | onSaved, |
| | | isHideRemoveBtn, |
| | | onRemove = noop, |
| | | isSaving, |
| | | onRemove = () => { }, |
| | | }) => { |
| | | const { t } = useTranslation() |
| | | const language = useLanguage() |
| | | const [credentialSchema, setCredentialSchema] = useState<any>(null) |
| | | const { name: collectionName } = collection |
| | | const [tempCredential, setTempCredential] = React.useState<any>({}) |
| | | const [isLoading, setIsLoading] = React.useState(false) |
| | | useEffect(() => { |
| | | fetchBuiltInToolCredentialSchema(collectionName).then(async (res) => { |
| | | const toolCredentialSchemas = toolCredentialToFormSchemas(res) |
| | |
| | | }) |
| | | }, []) |
| | | |
| | | const handleSave = async () => { |
| | | const handleSave = () => { |
| | | for (const field of credentialSchema) { |
| | | if (field.required && !tempCredential[field.name]) { |
| | | Toast.notify({ type: 'error', message: t('common.errorMsg.fieldRequired', { field: field.label[language] || field.label.en_US }) }) |
| | | return |
| | | } |
| | | } |
| | | setIsLoading(true) |
| | | try { |
| | | await onSaved(tempCredential) |
| | | setIsLoading(false) |
| | | } |
| | | finally { |
| | | setIsLoading(false) |
| | | } |
| | | onSaved(tempCredential) |
| | | } |
| | | |
| | | return ( |
| | |
| | | onHide={onCancel} |
| | | title={t('tools.auth.setupModalTitle') as string} |
| | | titleDescription={t('tools.auth.setupModalTitleDescription') as string} |
| | | panelClassName='mt-[64px] mb-2 !w-[420px] border-components-panel-border' |
| | | maxWidthClassName='!max-w-[420px]' |
| | | height='calc(100vh - 64px)' |
| | | contentClassName='!bg-components-panel-bg' |
| | | headerClassName='!border-b-divider-subtle' |
| | | panelClassName='mt-2 !w-[405px]' |
| | | maxWidthClassName='!max-w-[405px]' |
| | | height='calc(100vh - 16px)' |
| | | contentClassName='!bg-gray-100' |
| | | headerClassName='!border-b-black/5' |
| | | body={ |
| | | |
| | | <div className='h-full px-6 py-3'> |
| | | <div className='px-6 py-3 h-full'> |
| | | {!credentialSchema |
| | | ? <Loading type='app' /> |
| | | : ( |
| | |
| | | isEditMode={true} |
| | | showOnVariableMap={{}} |
| | | validating={false} |
| | | inputClassName='!bg-components-input-bg-normal' |
| | | inputClassName='!bg-gray-50' |
| | | fieldMoreInfo={item => item.url |
| | | ? (<a |
| | | href={item.url} |
| | | target='_blank' rel='noopener noreferrer' |
| | | className='inline-flex items-center text-xs text-text-accent' |
| | | className='inline-flex items-center text-xs text-primary-600' |
| | | > |
| | | {t('tools.howToGet')} |
| | | <LinkExternal02 className='ml-1 h-3 w-3' /> |
| | | <LinkExternal02 className='ml-1 w-3 h-3' /> |
| | | </a>) |
| | | : null} |
| | | /> |
| | |
| | | } |
| | | < div className='flex space-x-2'> |
| | | <Button onClick={onCancel}>{t('common.operation.cancel')}</Button> |
| | | <Button loading={isLoading || isSaving} disabled={isLoading || isSaving} variant='primary' onClick={handleSave}>{t('common.operation.save')}</Button> |
| | | <Button variant='primary' onClick={handleSave}>{t('common.operation.save')}</Button> |
| | | </div> |
| | | </div> |
| | | </> |