Merge pull request #975 from IQSS/add-version-pagination

added pagination to Versions tab on Dataset and File page.


Tested Locally and QA server.

Author: jp-tosca

CHANGELOG.md

@@ -10,6 +10,8 @@ This changelog follows the principles of [Keep a Changelog](https://keepachangel
 
 ### Changed
 
+- Added pagination to the Versions tabs on Dataset and File pages so version summaries are loaded and displayed one page at a time.
+
 ### Fixed
 
 ### Removed

src/dataset/domain/models/DatasetVersionPaginationInfo.ts

@@ -1,7 +1,17 @@
 import { PaginationInfo } from '../../../shared/pagination/domain/models/PaginationInfo'
 
 export class DatasetVersionPaginationInfo extends PaginationInfo<DatasetVersionPaginationInfo> {
-  constructor(page = 1, pageSize = 10, totalItems = 0, itemName = 'Version') {
+  constructor(
+    page = 1,
+    pageSize = 10,
+    totalItems = 0,
+    itemName = 'Version',
+    private readonly offsetOverride?: number
+  ) {
     super(page, pageSize, totalItems, itemName)
   }
+
+  get offset(): number {
+    return this.offsetOverride ?? super.offset
+  }
 }

src/sections/dataset/Dataset.tsx

@@ -172,9 +172,8 @@ export function Dataset({
                     datasetId={dataset.persistentId}
                     currentVersionNumber={currentVersionNumber}
                     canUpdateDataset={canUpdateDataset}
-                    isInView={activeTab === 'versions'}
+                    isInView
                     key={dataset.internalVersionNumber}
-                    isCurrentVersionDeaccessioned={isCurrentVersionDeaccessioned}
                   />
                 </div>
               </Tabs.Tab>

src/sections/dataset/dataset-versions/DatasetVersions.module.scss

@@ -34,6 +34,13 @@
   }
 }
 
+.dataset-versions-table-loading {
+  tbody {
+    opacity: 0.55;
+    transition: opacity 120ms ease-in-out;
+  }
+}
+
 .visually-hidden {
   position: absolute;
   clip: rect(1px, 1px, 1px, 1px);

src/sections/dataset/dataset-versions/DatasetVersions.tsx

@@ -16,14 +16,15 @@ import { useDatasetVersionSummaryDescription } from './useDatasetVersionSummaryD
 import { DatasetViewDetailButton } from './DatasetViewDetailButton'
 import { DatasetVersionState } from '@/dataset/domain/models/Dataset'
 import styles from './DatasetVersions.module.scss'
+import { DatasetVersionPaginationInfo } from '@/dataset/domain/models/DatasetVersionPaginationInfo'
+import { PaginationControls } from '@/sections/shared/pagination/PaginationControls'
 
 interface DatasetVersionsProps {
   datasetRepository: DatasetRepository
   datasetId: string
   currentVersionNumber: string
   canUpdateDataset: boolean
   isInView: boolean
-  isCurrentVersionDeaccessioned?: boolean
 }
 
 const isVersionDeaccessioned = (version: DatasetVersionSummaryInfo) =>
@@ -36,11 +37,13 @@ export function DatasetVersions({
   datasetId,
   currentVersionNumber,
   canUpdateDataset,
-  isInView,
-  isCurrentVersionDeaccessioned
+  isInView
 }: DatasetVersionsProps) {
   const { t } = useTranslation('dataset')
   const [selectedVersions, setSelectedVersions] = useState<DatasetVersionSummaryInfo[]>([])
+  const [paginationInfo, setPaginationInfo] = useState<DatasetVersionPaginationInfo>(
+    new DatasetVersionPaginationInfo()
+  )
   const {
     datasetVersionSummaries,
     error,
@@ -49,7 +52,7 @@ export function DatasetVersions({
   } = useGetDatasetVersionsSummaries({
     datasetRepository,
     persistentId: datasetId,
-    autoFetch: isCurrentVersionDeaccessioned ? true : false
+    autoFetch: false
   })
 
   const handleCheckboxChange = (datasetSummary: DatasetVersionSummaryInfo) => {
@@ -64,25 +67,46 @@ export function DatasetVersions({
     })
   }
 
+  const visibleDatasetVersionSummaries = datasetVersionSummaries?.slice(0, paginationInfo.pageSize)
   const selectableVersions =
-    datasetVersionSummaries &&
-    datasetVersionSummaries.filter((version) => !isVersionDeaccessioned(version))
+    visibleDatasetVersionSummaries &&
+    visibleDatasetVersionSummaries.filter((version) => !isVersionDeaccessioned(version))
   const isCheckBoxValid = (selectableVersions?.length ?? 0) > 2
 
   useEffect(() => {
-    if (isInView && !datasetVersionSummaries) {
-      void fetchSummaries()
+    if (isInView) {
+      const paginationInfoToDisplay = new DatasetVersionPaginationInfo(
+        paginationInfo.page,
+        paginationInfo.pageSize
+      )
+      const paginationInfoToFetch = new DatasetVersionPaginationInfo(
+        paginationInfo.page,
+        paginationInfo.pageSize + 1,
+        0,
+        'Version',
+        paginationInfoToDisplay.offset
+      )
+
+      void fetchSummaries(paginationInfoToFetch).then((totalCount) => {
+        if (typeof totalCount === 'number') {
+          setPaginationInfo((currentPaginationInfo) => currentPaginationInfo.withTotal(totalCount))
+        }
+      })
     }
-  }, [isInView, fetchSummaries, datasetVersionSummaries])
+  }, [isInView, fetchSummaries, paginationInfo.page, paginationInfo.pageSize])
 
-  if (isLoadingDatasetVersionSummaries || !datasetVersionSummaries) {
-    return <DatasetVersionsLoadingSkeleton />
-  }
+  useEffect(() => {
+    setSelectedVersions([])
+  }, [paginationInfo.page, paginationInfo.pageSize])
 
   if (error) {
     return <Alert variant="danger">Error loading dataset versions</Alert>
   }
 
+  if (!datasetVersionSummaries) {
+    return <DatasetVersionsLoadingSkeleton />
+  }
+
   return (
     <>
       {selectedVersions.length === 2 && (
@@ -93,7 +117,12 @@ export function DatasetVersions({
         />
       )}
 
-      <div className={styles['dataset-versions-table']} data-testid="dataset-versions-table">
+      <div
+        className={`${styles['dataset-versions-table']} ${
+          isLoadingDatasetVersionSummaries ? styles['dataset-versions-table-loading'] : ''
+        }`}
+        data-testid="dataset-versions-table"
+        aria-busy={isLoadingDatasetVersionSummaries}>
         <Table>
           <thead>
             <tr>
@@ -110,7 +139,7 @@ export function DatasetVersions({
             </tr>
           </thead>
           <tbody>
-            {datasetVersionSummaries?.map((dataset, index) => {
+            {visibleDatasetVersionSummaries?.map((dataset, index) => {
               const findLastNonDeaccessionedPreviousVersion = () => {
                 for (let i = index + 1; i < datasetVersionSummaries.length; i++) {
                   const version = datasetVersionSummaries[i]
@@ -186,6 +215,10 @@ export function DatasetVersions({
           </tbody>
         </Table>
       </div>
+      <PaginationControls
+        initialPaginationInfo={paginationInfo}
+        onPaginationInfoChange={setPaginationInfo}
+      />
     </>
   )
 }

src/sections/dataset/dataset-versions/useGetDatasetVersionsSummaries.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import { DatasetVersionSummaryInfo } from '@/dataset/domain/models/DatasetVersionSummaryInfo'
 import { DatasetRepository } from '@/dataset/domain/repositories/DatasetRepository'
 import { getDatasetVersionsSummaries } from '@/dataset/domain/useCases/getDatasetVersionsSummaries'
@@ -8,7 +8,7 @@ interface UseGetDatasetVersionsSummaries {
   datasetVersionSummaries: DatasetVersionSummaryInfo[] | undefined
   error: string | null
   isLoading: boolean
-  fetchSummaries: (paginationInfo?: DatasetVersionPaginationInfo) => Promise<void>
+  fetchSummaries: (paginationInfo?: DatasetVersionPaginationInfo) => Promise<number | undefined>
 }
 
 interface Props {
@@ -25,9 +25,12 @@ export const useGetDatasetVersionsSummaries = ({
   const [summaries, setSummaries] = useState<DatasetVersionSummaryInfo[]>()
   const [isLoading, setIsLoading] = useState<boolean>(autoFetch)
   const [error, setError] = useState<string | null>(null)
+  const latestRequestId = useRef(0)
 
   const fetchSummaries = useCallback(
     async (paginationInfo?: DatasetVersionPaginationInfo) => {
+      const requestId = latestRequestId.current + 1
+      latestRequestId.current = requestId
       setIsLoading(true)
       setError(null)
 
@@ -37,15 +40,25 @@ export const useGetDatasetVersionsSummaries = ({
           persistentId,
           paginationInfo
         )
+        if (requestId !== latestRequestId.current) {
+          return undefined
+        }
         setSummaries(versionSummaries.summaries)
+        return versionSummaries.totalCount
       } catch (err) {
+        if (requestId !== latestRequestId.current) {
+          return undefined
+        }
         const errorMessage =
           err instanceof Error && err.message
             ? err.message
             : 'Something went wrong getting the information from the dataset versions summaries. Try again later.'
         setError(errorMessage)
+        return undefined
       } finally {
-        setIsLoading(false)
+        if (requestId === latestRequestId.current) {
+          setIsLoading(false)
+        }
       }
     },
     [datasetRepository, persistentId]

src/sections/file/file-version/FileVersion.module.scss

@@ -19,6 +19,13 @@
   }
 }
 
+.file-versions-table-loading {
+  tbody {
+    opacity: 0.55;
+    transition: opacity 120ms ease-in-out;
+  }
+}
+
 .no-summary-text {
   font-style: italic;
   color: $dv-subtext-color;