youngkingdom/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-04-28 06:28:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

use base ui toast

Browse Source
This commit is contained in:
yyh
2026-03-25 20:38:44 +08:00
parent a7178b4d5c
commit 20dea1faa2
274 changed files with 3597 additions and 8129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
web/app/components/datasets/external-api/external-api-modal/__tests__/index.spec.tsx
View File

@ -12,10 +12,8 @@ vi.mock('@/service/datasets', () => ({
}))
const mockNotify = vi.fn()
vi.mock('@/app/components/base/toast/context', () => ({
useToastContext: () => ({
notify: mockNotify,
}),
vi.mock('@/app/components/base/ui/toast', () => ({
}))
describe('AddExternalAPIModal', () => {

85
web/app/components/datasets/external-api/external-api-modal/index.tsx
View File

@ -1,26 +1,14 @@
import type { FC } from 'react'
import type { CreateExternalAPIReq, FormSchema } from '../declarations'
import {
RiBook2Line,
RiCloseLine,
RiInformation2Line,
RiLock2Fill,
} from '@remixicon/react'
import {
memo,
useEffect,
useState,
} from 'react'
import { RiBook2Line, RiCloseLine, RiInformation2Line, RiLock2Fill } from '@remixicon/react'
import { memo, useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import ActionButton from '@/app/components/base/action-button'
import Button from '@/app/components/base/button'
import Confirm from '@/app/components/base/confirm'
import {
PortalToFollowElem,
PortalToFollowElemContent,
} from '@/app/components/base/portal-to-follow-elem'
import { useToastContext } from '@/app/components/base/toast/context'
import { PortalToFollowElem, PortalToFollowElemContent } from '@/app/components/base/portal-to-follow-elem'
import Tooltip from '@/app/components/base/tooltip'
import { toast } from '@/app/components/base/ui/toast'
import { createExternalAPI } from '@/service/datasets'
import Form from './Form'
@ -29,10 +17,12 @@ type AddExternalAPIModalProps = {
onSave: (formValue: CreateExternalAPIReq) => void
onCancel: () => void
onEdit?: (formValue: CreateExternalAPIReq) => Promise<void>
datasetBindings?: { id: string, name: string }[]
datasetBindings?: {
id: string
name: string
}[]
isEditMode: boolean
}
const formSchemas: FormSchema[] = [
{
variable: 'name',
@ -59,29 +49,22 @@ const formSchemas: FormSchema[] = [
required: true,
},
]
const AddExternalAPIModal: FC<AddExternalAPIModalProps> = ({ data, onSave, onCancel, datasetBindings, isEditMode, onEdit }) => {
const { t } = useTranslation()
const { notify } = useToastContext()
const [loading, setLoading] = useState(false)
const [showConfirm, setShowConfirm] = useState(false)
const [formData, setFormData] = useState<CreateExternalAPIReq>({ name: '', settings: { endpoint: '', api_key: '' } })
useEffect(() => {
if (isEditMode && data)
setFormData(data)
}, [isEditMode, data])
const hasEmptyInputs = Object.values(formData).some(value =>
typeof value === 'string' ? value.trim() === '' : Object.values(value).some(v => v.trim() === ''),
)
const hasEmptyInputs = Object.values(formData).some(value => typeof value === 'string' ? value.trim() === '' : Object.values(value).some(v => v.trim() === ''))
const handleDataChange = (val: CreateExternalAPIReq) => {
setFormData(val)
}
const handleSave = async () => {
if (formData && formData.settings.api_key && formData.settings.api_key?.length < 5) {
notify({ type: 'error', message: t('apiBasedExtension.modal.apiKey.lengthError', { ns: 'common' }) })
toast.error(t('apiBasedExtension.modal.apiKey.lengthError', { ns: 'common' }))
setLoading(false)
return
}
@ -93,18 +76,16 @@ const AddExternalAPIModal: FC<AddExternalAPIModalProps> = ({ data, onSave, onCan
const apiKeyToSend = formData.settings.api_key === '[__HIDDEN__]'
? '[__HIDDEN__]'
: formData.settings.api_key
await onEdit(
{
...formData,
settings: { ...formData.settings, api_key: apiKeyToSend },
},
)
notify({ type: 'success', message: 'External API updated successfully' })
await onEdit({
...formData,
settings: { ...formData.settings, api_key: apiKeyToSend },
})
toast.success('External API updated successfully')
}
else {
const res = await createExternalAPI({ body: formData })
if (res && res.id) {
notify({ type: 'success', message: 'External API saved successfully' })
toast.success('External API saved successfully')
onSave(res)
}
}
@ -112,13 +93,12 @@ const AddExternalAPIModal: FC<AddExternalAPIModalProps> = ({ data, onSave, onCan
}
catch (error) {
console.error('Error saving/updating external API:', error)
notify({ type: 'error', message: 'Failed to save/update External API' })
toast.error('Failed to save/update External API')
}
finally {
setLoading(false)
}
}
return (
<PortalToFollowElem open>
<PortalToFollowElemContent className="z-[60] h-full w-full">
@ -126,9 +106,7 @@ const AddExternalAPIModal: FC<AddExternalAPIModalProps> = ({ data, onSave, onCan
<div className="shadows-shadow-xl relative flex w-[480px] flex-col items-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg">
<div className="flex flex-col items-start gap-2 self-stretch pb-3 pl-6 pr-14 pt-6">
<div className="grow self-stretch text-text-primary title-2xl-semi-bold">
{
isEditMode ? t('editExternalAPIFormTitle', { ns: 'dataset' }) : t('createExternalAPI', { ns: 'dataset' })
}
{isEditMode ? t('editExternalAPIFormTitle', { ns: 'dataset' }) : t('createExternalAPI', { ns: 'dataset' })}
</div>
{isEditMode && (datasetBindings?.length ?? 0) > 0 && (
<div className="flex items-center text-text-tertiary system-xs-regular">
@ -166,12 +144,7 @@ const AddExternalAPIModal: FC<AddExternalAPIModalProps> = ({ data, onSave, onCan
<ActionButton className="absolute right-5 top-5" onClick={onCancel}>
<RiCloseLine className="h-[18px] w-[18px] shrink-0 text-text-tertiary" />
</ActionButton>
<Form
value={formData}
onChange={handleDataChange}
formSchemas={formSchemas}
className="flex flex-col items-start justify-center gap-4 self-stretch px-6 py-3"
/>
<Form value={formData} onChange={handleDataChange} formSchemas={formSchemas} className="flex flex-col items-start justify-center gap-4 self-stretch px-6 py-3" />
<div className="flex items-center justify-end gap-2 self-stretch p-6 pt-5">
<Button type="button" variant="secondary" onClick={onCancel}>
{t('externalAPIForm.cancel', { ns: 'dataset' })}
@ -184,7 +157,6 @@ const AddExternalAPIModal: FC<AddExternalAPIModalProps> = ({ data, onSave, onCan
setShowConfirm(true)
else if (isEditMode && onEdit)
onEdit(formData)
else
handleSave()
}}
@ -198,31 +170,16 @@ const AddExternalAPIModal: FC<AddExternalAPIModalProps> = ({ data, onSave, onCan
>
<RiLock2Fill className="h-3 w-3 text-text-quaternary" />
{t('externalAPIForm.encrypted.front', { ns: 'dataset' })}
<a
className="text-text-accent"
target="_blank"
rel="noopener noreferrer"
href="https://pycryptodome.readthedocs.io/en/latest/src/cipher/oaep.html"
>
<a className="text-text-accent" target="_blank" rel="noopener noreferrer" href="https://pycryptodome.readthedocs.io/en/latest/src/cipher/oaep.html">
PKCS1_OAEP
</a>
{t('externalAPIForm.encrypted.end', { ns: 'dataset' })}
</div>
</div>
{showConfirm && (datasetBindings?.length ?? 0) > 0 && (
<Confirm
isShow={showConfirm}
type="warning"
title="Warning"
content={`${t('editExternalAPIConfirmWarningContent.front', { ns: 'dataset' })} ${datasetBindings?.length} ${t('editExternalAPIConfirmWarningContent.end', { ns: 'dataset' })}`}
onCancel={() => setShowConfirm(false)}
onConfirm={handleSave}
/>
)}
{showConfirm && (datasetBindings?.length ?? 0) > 0 && (<Confirm isShow={showConfirm} type="warning" title="Warning" content={`${t('editExternalAPIConfirmWarningContent.front', { ns: 'dataset' })} ${datasetBindings?.length} ${t('editExternalAPIConfirmWarningContent.end', { ns: 'dataset' })}`} onCancel={() => setShowConfirm(false)} onConfirm={handleSave} />)}
</div>
</PortalToFollowElemContent>
</PortalToFollowElem>
)
}
export default memo(AddExternalAPIModal)