added pagination to Versions tab on Dataset and File page

Author: ekraffmiller

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,18 +67,39 @@ 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(paginationInfoToDisplay.withTotal(totalCount))
+        }
+      })
     }
-  }, [isInView, fetchSummaries, datasetVersionSummaries])
+  }, [isInView, fetchSummaries, paginationInfo.page, paginationInfo.pageSize])
+
+  useEffect(() => {
+    setSelectedVersions([])
+  }, [paginationInfo.page, paginationInfo.pageSize])
 
-  if (isLoadingDatasetVersionSummaries || !datasetVersionSummaries) {
+  if (!datasetVersionSummaries) {
     return <DatasetVersionsLoadingSkeleton />
   }
 
@@ -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,18 @@ export function DatasetVersions({
           </tbody>
         </Table>
       </div>
+      <PaginationControls
+        initialPaginationInfo={paginationInfo}
+        onPaginationInfoChange={(newPaginationInfo) =>
+          setPaginationInfo(
+            new DatasetVersionPaginationInfo(
+              newPaginationInfo.page,
+              newPaginationInfo.pageSize,
+              newPaginationInfo.totalItems
+            )
+          )
+        }
+      />
     </>
   )
 }

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

@@ -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 {
@@ -38,12 +38,14 @@ export const useGetDatasetVersionsSummaries = ({
           paginationInfo
         )
         setSummaries(versionSummaries.summaries)
+        return versionSummaries.totalCount
       } catch (err) {
         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)
       }

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;