| | |
| | | import React, { useState } from 'react' |
| | | import { useTranslation } from 'react-i18next' |
| | | import { useContext } from 'use-context-selector' |
| | | import { RiSettings2Line } from '@remixicon/react' |
| | | import { Settings01 } from '../../base/icons/src/vender/line/general' |
| | | import ConfigCredentials from './config-credentials' |
| | | import { AuthType, type Credential, type CustomCollectionBackend, type CustomParamSchema } from '@/app/components/tools/types' |
| | | import Button from '@/app/components/base/button' |
| | | import Input from '@/app/components/base/input' |
| | | import Drawer from '@/app/components/base/drawer-plus' |
| | | import I18n from '@/context/i18n' |
| | | import { testAPIAvailable } from '@/service/tools' |
| | |
| | | tool: CustomParamSchema |
| | | onHide: () => void |
| | | } |
| | | |
| | | const keyClassNames = 'py-2 leading-5 text-sm font-medium text-gray-900' |
| | | |
| | | const TestApi: FC<Props> = ({ |
| | | positionCenter, |
| | |
| | | panelClassName='mt-2 !w-[600px]' |
| | | maxWidthClassName='!max-w-[600px]' |
| | | height='calc(100vh - 16px)' |
| | | headerClassName='!border-b-divider-regular' |
| | | headerClassName='!border-b-black/5' |
| | | body={ |
| | | <div className='overflow-y-auto px-6 pt-2'> |
| | | <div className='pt-2 px-6 overflow-y-auto'> |
| | | <div className='space-y-4'> |
| | | <div> |
| | | <div className='system-sm-medium py-2 text-text-primary'>{t('tools.createTool.authMethod.title')}</div> |
| | | <div className='flex h-9 cursor-pointer items-center justify-between rounded-lg bg-components-input-bg-normal px-2.5' onClick={() => setCredentialsModalShow(true)}> |
| | | <div className='system-xs-regular text-text-primary'>{t(`tools.createTool.authMethod.types.${tempCredential.auth_type}`)}</div> |
| | | <RiSettings2Line className='h-4 w-4 text-text-secondary' /> |
| | | <div className={keyClassNames}>{t('tools.createTool.authMethod.title')}</div> |
| | | <div className='flex items-center h-9 justify-between px-2.5 bg-gray-100 rounded-lg cursor-pointer' onClick={() => setCredentialsModalShow(true)}> |
| | | <div className='text-sm font-normal text-gray-900'>{t(`tools.createTool.authMethod.types.${tempCredential.auth_type}`)}</div> |
| | | <Settings01 className='w-4 h-4 text-gray-700 opacity-60' /> |
| | | </div> |
| | | </div> |
| | | |
| | | <div> |
| | | <div className='system-sm-medium py-2 text-text-primary'>{t('tools.test.parametersValue')}</div> |
| | | <div className='rounded-lg border border-divider-regular'> |
| | | <table className='system-xs-regular w-full font-normal text-text-secondary'> |
| | | <thead className='uppercase text-text-tertiary'> |
| | | <tr className='border-b border-divider-regular'> |
| | | <div className={keyClassNames}>{t('tools.test.parametersValue')}</div> |
| | | <div className='rounded-lg border border-gray-200'> |
| | | <table className='w-full leading-[18px] text-xs text-gray-700 font-normal'> |
| | | <thead className='text-gray-500 uppercase'> |
| | | <tr className='border-b border-gray-200'> |
| | | <th className="p-2 pl-3 font-medium">{t('tools.test.parameters')}</th> |
| | | <th className="p-2 pl-3 font-medium">{t('tools.test.value')}</th> |
| | | </tr> |
| | | </thead> |
| | | <tbody> |
| | | {parameters.map((item, index) => ( |
| | | <tr key={index} className='border-b border-divider-regular last:border-0'> |
| | | <tr key={index} className='border-b last:border-0 border-gray-200'> |
| | | <td className="py-2 pl-3 pr-2.5"> |
| | | {item.label[language]} |
| | | </td> |
| | | <td className=""> |
| | | <Input |
| | | <input |
| | | value={parametersValue[item.name] || ''} |
| | | onChange={e => setParametersValue({ ...parametersValue, [item.name]: e.target.value })} |
| | | type='text' |
| | | className='!hover:border-transparent !hover:bg-transparent !focus:border-transparent !focus:bg-transparent !border-transparent !bg-transparent' /> |
| | | type='text' className='px-3 h-[34px] w-full outline-none focus:bg-gray-100' ></input> |
| | | </td> |
| | | </tr> |
| | | ))} |
| | |
| | | </div> |
| | | |
| | | </div> |
| | | <Button variant='primary' className=' mt-4 h-10 w-full' onClick={handleTest}>{t('tools.test.title')}</Button> |
| | | <Button variant='primary' className=' mt-4 w-full h-10' onClick={handleTest}>{t('tools.test.title')}</Button> |
| | | <div className='mt-6'> |
| | | <div className='flex items-center space-x-3'> |
| | | <div className='system-xs-semibold text-text-tertiary'>{t('tools.test.testResult')}</div> |
| | | <div className='bg-[rgb(243, 244, 246)] h-px w-0 grow'></div> |
| | | <div className='leading-[18px] text-xs font-semibold text-gray-500'>{t('tools.test.testResult')}</div> |
| | | <div className='grow w-0 h-px bg-[rgb(243, 244, 246)]'></div> |
| | | </div> |
| | | <div className='system-xs-regular mt-2 h-[200px] overflow-y-auto overflow-x-hidden rounded-lg bg-components-input-bg-normal px-3 py-2 text-text-secondary'> |
| | | {result || <span className='text-text-quaternary'>{t('tools.test.testResultPlaceholder')}</span>} |
| | | <div className='mt-2 px-3 py-2 h-[200px] overflow-y-auto overflow-x-hidden rounded-lg bg-gray-100 leading-4 text-xs font-normal text-gray-700'> |
| | | {result || <span className='text-gray-400'>{t('tools.test.testResultPlaceholder')}</span>} |
| | | </div> |
| | | </div> |
| | | </div> |