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

fix(web): name dataset creation close controls

Browse Source
This commit is contained in:
yyh
2026-05-10 22:55:54 +08:00
parent 8587833a2f
commit 88636a592b
4 changed files with 36 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
web/app/components/datasets/create/empty-dataset-creation-modal/__tests__/index.spec.tsx
View File

@ -148,14 +148,8 @@ describe('EmptyDatasetCreationModal', () => {
const mockOnHide = vi.fn()
render(<EmptyDatasetCreationModal show={true} onHide={mockOnHide} />)
// Act - Wait for modal to be rendered, then find the close span
// The close span is located in the modalHeader div, next to the title
const titleElement = await screen.findByText('datasetCreation.stepOne.modal.title')
const headerDiv = titleElement.parentElement
const closeButton = headerDiv?.querySelector('span')
expect(closeButton).toBeInTheDocument()
fireEvent.click(closeButton!)
const closeButton = await screen.findByRole('button', { name: /operation\.close$/ })
fireEvent.click(closeButton)
expect(mockOnHide).toHaveBeenCalledTimes(1)
})

7
web/app/components/datasets/create/empty-dataset-creation-modal/index.tsx
View File

@ -57,7 +57,12 @@ const EmptyDatasetCreationModal = ({ show = false, onHide }: IProps) => {
<div className={s.modalHeader}>
<div className={s.title}>{t('stepOne.modal.title', { ns: 'datasetCreation' })}</div>
<span className={s.close} onClick={onHide} />
<button
type="button"
className={cn(s.close, 'border-none bg-transparent p-0 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden')}
aria-label={t('operation.close', { ns: 'common' })}
onClick={onHide}
/>
</div>
<div className={s.tip}>{t('stepOne.modal.tip', { ns: 'datasetCreation' })}</div>
<div className={s.form}>

64
web/app/components/datasets/create/stop-embedding-modal/__tests__/index.spec.tsx
View File

@ -84,9 +84,8 @@ describe('StopEmbeddingModal', () => {
it('should render buttons in correct order (cancel first, then confirm)', () => {
renderStopEmbeddingModal({ show: true })
// Assert - Due to flex-row-reverse, confirm appears first visually but cancel is first in DOM
const buttons = screen.getAllByRole('button')
expect(buttons).toHaveLength(2)
expect(screen.getByRole('button', { name: 'datasetCreation.stepThree.modelButtonCancel' })).toBeInTheDocument()
expect(screen.getByRole('button', { name: 'datasetCreation.stepThree.modelButtonConfirm' })).toBeInTheDocument()
})
it('should render confirm button with primary variant styling', () => {
@ -290,48 +289,28 @@ describe('StopEmbeddingModal', () => {
})
describe('Close Icon', () => {
it('should call onHide when close span is clicked', async () => {
it('should call onHide when close button is clicked', async () => {
const onConfirm = vi.fn()
const onHide = vi.fn()
const { container } = renderStopEmbeddingModal({ onConfirm, onHide })
renderStopEmbeddingModal({ onConfirm, onHide })
// Act - Find the close span (it should be the span with onClick handler)
const spans = container.querySelectorAll('span')
const closeSpan = Array.from(spans).find(span =>
span.className && span.getAttribute('class')?.includes('close'),
)
await act(async () => {
fireEvent.click(screen.getByRole('button', { name: /operation\.close$/ }))
})
if (closeSpan) {
await act(async () => {
fireEvent.click(closeSpan)
})
expect(onHide).toHaveBeenCalledTimes(1)
}
else {
// If no close span found with class, just verify the modal renders
// If no close span found with class, just verify the modal renders
expect(screen.getByText('datasetCreation.stepThree.modelTitle'))!.toBeInTheDocument()
}
expect(onHide).toHaveBeenCalledTimes(1)
})
it('should not call onConfirm when close span is clicked', async () => {
it('should not call onConfirm when close button is clicked', async () => {
const onConfirm = vi.fn()
const onHide = vi.fn()
const { container } = renderStopEmbeddingModal({ onConfirm, onHide })
renderStopEmbeddingModal({ onConfirm, onHide })
const spans = container.querySelectorAll('span')
const closeSpan = Array.from(spans).find(span =>
span.className && span.getAttribute('class')?.includes('close'),
)
await act(async () => {
fireEvent.click(screen.getByRole('button', { name: /operation\.close$/ }))
})
if (closeSpan) {
await act(async () => {
fireEvent.click(closeSpan)
})
expect(onConfirm).not.toHaveBeenCalled()
}
expect(onConfirm).not.toHaveBeenCalled()
})
})
@ -444,8 +423,8 @@ describe('StopEmbeddingModal', () => {
it('should have buttons container with flex-row-reverse', () => {
renderStopEmbeddingModal({ show: true })
const buttons = screen.getAllByRole('button')
expect(buttons[0]!.closest('div'))!.toHaveClass('flex', 'flex-row-reverse')
const confirmButton = screen.getByRole('button', { name: 'datasetCreation.stepThree.modelButtonConfirm' })
expect(confirmButton.closest('div'))!.toHaveClass('flex', 'flex-row-reverse')
})
it('should render title and content elements', () => {
@ -455,11 +434,11 @@ describe('StopEmbeddingModal', () => {
expect(screen.getByText('datasetCreation.stepThree.modelContent'))!.toBeInTheDocument()
})
it('should render two buttons', () => {
it('should render two action buttons', () => {
renderStopEmbeddingModal({ show: true })
const buttons = screen.getAllByRole('button')
expect(buttons).toHaveLength(2)
expect(screen.getByRole('button', { name: 'datasetCreation.stepThree.modelButtonCancel' })).toBeInTheDocument()
expect(screen.getByRole('button', { name: 'datasetCreation.stepThree.modelButtonConfirm' })).toBeInTheDocument()
})
})
@ -563,8 +542,9 @@ describe('StopEmbeddingModal', () => {
it('should have semantic button elements', () => {
renderStopEmbeddingModal({ show: true })
const buttons = screen.getAllByRole('button')
expect(buttons).toHaveLength(2)
expect(screen.getByRole('button', { name: /operation\.close$/ })).toBeInTheDocument()
expect(screen.getByRole('button', { name: 'datasetCreation.stepThree.modelButtonCancel' })).toBeInTheDocument()
expect(screen.getByRole('button', { name: 'datasetCreation.stepThree.modelButtonConfirm' })).toBeInTheDocument()
})
it('should have accessible text content', () => {

7
web/app/components/datasets/create/stop-embedding-modal/index.tsx
View File

@ -41,7 +41,12 @@ const StopEmbeddingModal = ({
>
<AlertDialogContent className={cn(s.modal, 'max-w-[480px]! overflow-hidden! border-none px-8 py-6 text-left align-middle shadow-xl')}>
<div className={s.icon} />
<span className={s.close} onClick={onHide} />
<button
type="button"
className={cn(s.close, 'border-none bg-transparent p-0 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden')}
aria-label={t('operation.close', { ns: 'common' })}
onClick={onHide}
/>
<AlertDialogTitle className={s.title}>{t('stepThree.modelTitle', { ns: 'datasetCreation' })}</AlertDialogTitle>
<AlertDialogDescription className={s.content}>{t('stepThree.modelContent', { ns: 'datasetCreation' })}</AlertDialogDescription>
<AlertDialogActions className="flex-row-reverse gap-0 p-0">