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

refactor(web): migrate document list query state to nuqs (#32339)

Browse Source
This commit is contained in:
yyh
2026-03-03 18:29:23 +08:00
committed by GitHub
parent 3a8ff301fc
commit 1a90c4d81b
49 changed files with 1272 additions and 2003 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
web/app/components/datasets/documents/detail/__tests__/index.spec.tsx
View File

@ -9,6 +9,7 @@ const mocks = vi.hoisted(() => {
documentError: null as Error | null,
documentMetadata: null as Record<string, unknown> | null,
media: 'desktop' as string,
searchParams: '' as string,
}
return {
state,
@ -26,6 +27,7 @@ const mocks = vi.hoisted(() => {
// --- External mocks ---
vi.mock('next/navigation', () => ({
useRouter: () => ({ push: mocks.push }),
useSearchParams: () => new URLSearchParams(mocks.state.searchParams),
}))
vi.mock('@/hooks/use-breakpoints', () => ({
@ -193,6 +195,7 @@ describe('DocumentDetail', () => {
mocks.state.documentError = null
mocks.state.documentMetadata = null
mocks.state.media = 'desktop'
mocks.state.searchParams = ''
})
afterEach(() => {
@ -286,15 +289,23 @@ describe('DocumentDetail', () => {
})
it('should toggle metadata panel when button clicked', () => {
const { container } = render(<DocumentDetail datasetId="ds-1" documentId="doc-1" />)
render(<DocumentDetail datasetId="ds-1" documentId="doc-1" />)
expect(screen.getByTestId('metadata')).toBeInTheDocument()
const svgs = container.querySelectorAll('svg')
const toggleBtn = svgs[svgs.length - 1].closest('button')!
fireEvent.click(toggleBtn)
fireEvent.click(screen.getByTestId('document-detail-metadata-toggle'))
expect(screen.queryByTestId('metadata')).not.toBeInTheDocument()
})
it('should expose aria semantics for metadata toggle button', () => {
render(<DocumentDetail datasetId="ds-1" documentId="doc-1" />)
const toggle = screen.getByTestId('document-detail-metadata-toggle')
expect(toggle).toHaveAttribute('aria-label')
expect(toggle).toHaveAttribute('aria-pressed', 'true')
fireEvent.click(toggle)
expect(toggle).toHaveAttribute('aria-pressed', 'false')
})
it('should pass correct props to Metadata', () => {
render(<DocumentDetail datasetId="ds-1" documentId="doc-1" />)
const metadata = screen.getByTestId('metadata')
@ -305,20 +316,21 @@ describe('DocumentDetail', () => {
describe('Navigation', () => {
it('should navigate back when back button clicked', () => {
const { container } = render(<DocumentDetail datasetId="ds-1" documentId="doc-1" />)
const backBtn = container.querySelector('svg')!.parentElement!
fireEvent.click(backBtn)
render(<DocumentDetail datasetId="ds-1" documentId="doc-1" />)
fireEvent.click(screen.getByTestId('document-detail-back-button'))
expect(mocks.push).toHaveBeenCalledWith('/datasets/ds-1/documents')
})
it('should expose aria label for back button', () => {
render(<DocumentDetail datasetId="ds-1" documentId="doc-1" />)
expect(screen.getByTestId('document-detail-back-button')).toHaveAttribute('aria-label')
})
it('should preserve query params when navigating back', () => {
const origLocation = window.location
window.history.pushState({}, '', '?page=2&status=active')
const { container } = render(<DocumentDetail datasetId="ds-1" documentId="doc-1" />)
const backBtn = container.querySelector('svg')!.parentElement!
fireEvent.click(backBtn)
mocks.state.searchParams = 'page=2&status=active'
render(<DocumentDetail datasetId="ds-1" documentId="doc-1" />)
fireEvent.click(screen.getByTestId('document-detail-back-button'))
expect(mocks.push).toHaveBeenCalledWith('/datasets/ds-1/documents?page=2&status=active')
window.history.pushState({}, '', origLocation.href)
})
})

38
web/app/components/datasets/documents/detail/index.tsx
View File

@ -1,8 +1,7 @@
'use client'
import type { FC } from 'react'
import type { DataSourceInfo, FileItem, FullDocumentDetail, LegacyDataSourceInfo } from '@/models/datasets'
import { RiArrowLeftLine, RiLayoutLeft2Line, RiLayoutRight2Line } from '@remixicon/react'
import { useRouter } from 'next/navigation'
import { useRouter, useSearchParams } from 'next/navigation'
import * as React from 'react'
import { useMemo, useState } from 'react'
import { useTranslation } from 'react-i18next'
@ -35,6 +34,7 @@ type DocumentDetailProps = {
const DocumentDetail: FC<DocumentDetailProps> = ({ datasetId, documentId }) => {
const router = useRouter()
const searchParams = useSearchParams()
const { t } = useTranslation()
const media = useBreakpoints()
@ -98,11 +98,8 @@ const DocumentDetail: FC<DocumentDetailProps> = ({ datasetId, documentId }) => {
})
const backToPrev = () => {
// Preserve pagination and filter states when navigating back
const searchParams = new URLSearchParams(window.location.search)
const queryString = searchParams.toString()
const separator = queryString ? '?' : ''
const backPath = `/datasets/${datasetId}/documents${separator}${queryString}`
const backPath = `/datasets/${datasetId}/documents${queryString ? `?${queryString}` : ''}`
router.push(backPath)
}
@ -152,6 +149,11 @@ const DocumentDetail: FC<DocumentDetailProps> = ({ datasetId, documentId }) => {
return chunkMode === ChunkingMode.parentChild && parentMode === 'full-doc'
}, [documentDetail?.doc_form, parentMode])
const backButtonLabel = t('operation.back', { ns: 'common' })
const metadataToggleLabel = `${showMetadata
? t('operation.close', { ns: 'common' })
: t('operation.view', { ns: 'common' })} ${t('metadata.title', { ns: 'datasetDocuments' })}`
return (
<DocumentContext.Provider value={{
datasetId,
@ -162,9 +164,19 @@ const DocumentDetail: FC<DocumentDetailProps> = ({ datasetId, documentId }) => {
>
<div className="flex h-full flex-col bg-background-default">
<div className="flex min-h-16 flex-wrap items-center justify-between border-b border-b-divider-subtle py-2.5 pl-3 pr-4">
<div onClick={backToPrev} className="flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-full hover:bg-components-button-tertiary-bg">
<RiArrowLeftLine className="h-4 w-4 text-components-button-ghost-text hover:text-text-tertiary" />
</div>
<button
type="button"
data-testid="document-detail-back-button"
aria-label={backButtonLabel}
title={backButtonLabel}
onClick={backToPrev}
className="flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-full hover:bg-components-button-tertiary-bg"
>
<span
aria-hidden="true"
className="i-ri-arrow-left-line h-4 w-4 text-components-button-ghost-text hover:text-text-tertiary"
/>
</button>
<DocumentTitle
datasetId={datasetId}
extension={documentUploadFile?.extension}
@ -216,13 +228,17 @@ const DocumentDetail: FC<DocumentDetailProps> = ({ datasetId, documentId }) => {
/>
<button
type="button"
data-testid="document-detail-metadata-toggle"
aria-label={metadataToggleLabel}
aria-pressed={showMetadata}
title={metadataToggleLabel}
className={style.layoutRightIcon}
onClick={() => setShowMetadata(!showMetadata)}
>
{
showMetadata
? <RiLayoutLeft2Line className="h-4 w-4 text-components-button-secondary-text" />
: <RiLayoutRight2Line className="h-4 w-4 text-components-button-secondary-text" />
? <span aria-hidden="true" className="i-ri-layout-left-2-line h-4 w-4 text-components-button-secondary-text" />
: <span aria-hidden="true" className="i-ri-layout-right-2-line h-4 w-4 text-components-button-secondary-text" />
}
</button>
</div>