estel/dify
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix(web): enhance API test page experience by adding loading state for test button (#21091)

Browse Source
This commit is contained in:
Kerwin Bryant
2025-06-18 09:24:41 +08:00
committed by GitHub
parent 21c2de2d7e
commit 4e701b1efd
1 changed files with 5 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
web/app/components/tools/edit-custom-collection-modal/test-api.tsx
View File

@@ -31,10 +31,13 @@ const TestApi: FC<Props> = ({
const language = getLanguage(locale) const language = getLanguage(locale)
const [credentialsModalShow, setCredentialsModalShow] = useState(false) const [credentialsModalShow, setCredentialsModalShow] = useState(false)
const [tempCredential, setTempCredential] = React.useState<Credential>(customCollection.credentials) const [tempCredential, setTempCredential] = React.useState<Credential>(customCollection.credentials)
const [testing, setTesting] = useState(false)
const [result, setResult] = useState<string>('') const [result, setResult] = useState<string>('')
const { operation_id: toolName, parameters } = tool const { operation_id: toolName, parameters } = tool
const [parametersValue, setParametersValue] = useState<Record<string, string>>({}) const [parametersValue, setParametersValue] = useState<Record<string, string>>({})
const handleTest = async () => { const handleTest = async () => {
if (testing) return
setTesting(true)
// clone test schema // clone test schema
const credentials = JSON.parse(JSON.stringify(tempCredential)) as Credential const credentials = JSON.parse(JSON.stringify(tempCredential)) as Credential
if (credentials.auth_type === AuthType.none) { if (credentials.auth_type === AuthType.none) {
@@ -52,6 +55,7 @@ const TestApi: FC<Props> = ({
} }
const res = await testAPIAvailable(data) as any const res = await testAPIAvailable(data) as any
setResult(res.error || res.result) setResult(res.error || res.result)
setTesting(false)
} }
return ( return (
@@ -107,7 +111,7 @@ const TestApi: FC<Props> = ({
</div> </div>
</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 h-10 w-full' loading={testing} disabled={testing} onClick={handleTest}>{t('tools.test.title')}</Button>
<div className='mt-6'> <div className='mt-6'>
<div className='flex items-center space-x-3'> <div className='flex items-center space-x-3'>
<div className='system-xs-semibold text-text-tertiary'>{t('tools.test.testResult')}</div> <div className='system-xs-semibold text-text-tertiary'>{t('tools.test.testResult')}</div>