opensource/dify
2
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-05-13 08:57:28 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(web): confirm app deletion with enter key

Browse Source
This commit is contained in:
-LAN- 2026-05-08 15:10:44 +08:00
parent 9a2bea9287
commit 244d506058
No known key found for this signature in database
GPG Key ID: 6BA0D108DED011FF
2 changed files with 31 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
web/app/components/apps/__tests__/app-card.spec.tsx
View File

@ -725,6 +725,22 @@ describe('AppCard', () => {
})
})
it('should call deleteApp API when pressing Enter in the delete confirmation input', async () => {
render(<AppCard app={mockApp} onRefresh={mockOnRefresh} />)
fireEvent.click(screen.getByTestId('dropdown-menu-trigger'))
fireEvent.click(await screen.findByRole('menuitem', { name: 'common.operation.delete' }))
expect(await screen.findByRole('alertdialog')).toBeInTheDocument()
const deleteInput = screen.getByRole('textbox')
fireEvent.change(deleteInput, { target: { value: mockApp.name } })
fireEvent.keyDown(deleteInput, { key: 'Enter', code: 'Enter' })
await waitFor(() => {
expect(mockDeleteAppMutation).toHaveBeenCalled()
})
})
it('should not call onRefresh after successful delete', async () => {
render(<AppCard app={mockApp} onRefresh={mockOnRefresh} />)

17
web/app/components/apps/app-card.tsx
View File

@ -250,14 +250,26 @@ const AppCard = ({ app, onlineUsers = [], onRefresh, onOpenTagManagement = () =>
const isDeleteConfirmDisabled = isDeleting || confirmDeleteInput !== app.name
const onDeleteDialogSubmit: React.FormEventHandler<HTMLFormElement> = useCallback((e) => {
e.preventDefault()
const submitDeleteConfirmation = useCallback(() => {
if (isDeleteConfirmDisabled)
return
void onConfirmDelete()
}, [isDeleteConfirmDisabled, onConfirmDelete])
const onDeleteDialogSubmit: React.FormEventHandler<HTMLFormElement> = useCallback((e) => {
e.preventDefault()
submitDeleteConfirmation()
}, [submitDeleteConfirmation])
const onDeleteConfirmInputKeyDown: React.KeyboardEventHandler<HTMLInputElement> = useCallback((e) => {
if (e.key !== 'Enter' || e.nativeEvent.isComposing)
return
e.preventDefault()
submitDeleteConfirmation()
}, [submitDeleteConfirmation])
const handleShowEditModal = useCallback(() => {
setIsOperationsMenuOpen(false)
queueMicrotask(() => {
@ -652,6 +664,7 @@ const AppCard = ({ app, onlineUsers = [], onRefresh, onOpenTagManagement = () =>
placeholder={t('deleteAppConfirmInputPlaceholder', { ns: 'app' })}
value={confirmDeleteInput}
onChange={e => setConfirmDeleteInput(e.target.value)}
onKeyDown={onDeleteConfirmInputKeyDown}
className="border-components-input-border-hover bg-components-input-bg-normal focus:border-components-input-border-active focus:bg-components-input-bg-active"
/>
</div>