Merge branch 'develop' of https://github.com/IQSS/dataverse-frontend …

…into feature/316-create-functional-create-dataset-form

.env.example

@@ -1 +1 @@
-VITE_DATAVERSE_BACKEND_URL=http://localhost:8080
+VITE_DATAVERSE_BACKEND_URL=http://localhost:8000

.github/workflows/accessibility.yml

@@ -0,0 +1,51 @@
+name: accessibility
+
+on: push
+
+jobs:
+  interaction-and-accessibility:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: 'npm'
+
+      - name: Create .npmrc
+        run: |
+          cp .npmrc.example .npmrc
+          sed -i -e 's/<YOUR_GITHUB_AUTH_TOKEN>/${{ secrets.GITHUB_TOKEN }}/g' .npmrc
+          sed -i -e 's/<YOUR_NPM_AUTH_TOKEN>/${{ secrets.NPM_AUTH_TOKEN }}/g' .npmrc
+
+      - name: Install Dependencies
+        run: npm install
+
+      - name: Build Dataverse Design System
+        working-directory: packages/design-system
+        run: npm run build
+
+      - name: Install Playwright
+        run: npx playwright install
+
+      - name: Build Storybook Design System
+        working-directory: packages/design-system
+        run: npm run build-storybook --quiet
+
+      - name: Serve Storybook Design System and run tests
+        working-directory: packages/design-system
+        run: |
+          npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
+            "npx http-server storybook-static --port 6006 --silent" \
+            "npx wait-on http://127.0.0.1:6006 --l && npx test-storybook --url http://127.0.0.1:6006"
+
+      - name: Build Storybook
+        run: npm run build-storybook --quiet
+
+      - name: Serve Storybook and run tests
+        run: |
+          npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
+            "npx http-server storybook-static --port 6006 --silent" \
+            "npx wait-on http://127.0.0.1:6006 --l && npx test-storybook --url http://127.0.0.1:6006"

.github/workflows/test.yml

@@ -133,50 +133,3 @@ jobs:
         with:
           name: cypress-screenshots
           path: ./cypress/screenshots
-
-  interaction-and-accessibility:
-    runs-on: ubuntu-latest
-
-    steps:
-      - uses: actions/checkout@v3
-
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 18
-          cache: 'npm'
-
-      - name: Create .npmrc
-        run: |
-          cp .npmrc.example .npmrc
-          sed -i -e 's/<YOUR_GITHUB_AUTH_TOKEN>/${{ secrets.GITHUB_TOKEN }}/g' .npmrc
-          sed -i -e 's/<YOUR_NPM_AUTH_TOKEN>/${{ secrets.NPM_AUTH_TOKEN }}/g' .npmrc
-
-      - name: Install Dependencies
-        run: npm install
-
-      - name: Build Dataverse Design System
-        working-directory: packages/design-system
-        run: npm run build
-
-      - name: Install Playwright
-        run: npx playwright install
-
-      - name: Build Storybook Design System
-        working-directory: packages/design-system
-        run: npm run build-storybook --quiet
-
-      - name: Serve Storybook Design System and run tests
-        working-directory: packages/design-system
-        run: |
-          npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
-            "npx http-server storybook-static --port 6006 --silent" \
-            "npx wait-on http://127.0.0.1:6006 --l && npx test-storybook --url http://127.0.0.1:6006"
-
-      - name: Build Storybook
-        run: npm run build-storybook --quiet
-
-      - name: Serve Storybook and run tests
-        run: |
-          npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
-            "npx http-server storybook-static --port 6006 --silent" \
-            "npx wait-on http://127.0.0.1:6006 --l && npx test-storybook --url http://127.0.0.1:6006"

README.md

@@ -2,6 +2,7 @@
 
 [![Project Status: WIP – Initial development is in progress, but there has not yet been a stable, usable release suitable for the public.](https://www.repostatus.org/badges/latest/wip.svg)](https://www.repostatus.org/#wip)
 [![Tests](https://github.com/IQSS/dataverse-frontend/actions/workflows/test.yml/badge.svg)](https://github.com/IQSS/dataverse-frontend/actions/workflows/test.yml)
+[![Accessibility](https://github.com/IQSS/dataverse-frontend/actions/workflows/accessibility.yml/badge.svg)](https://github.com/IQSS/dataverse-frontend/actions/workflows/accessibility.yml)
 [![Unit Tests Coverage](https://coveralls.io/repos/github/IQSS/dataverse-frontend/badge.svg?branch=develop)](https://coveralls.io/github/IQSS/dataverse-frontend?branch=develop)
 
 ## Demo videos
@@ -287,6 +288,11 @@ The new SPA does not use Solr as the API endpoint it uses performs all queries o
 
 The decision of this change is made on the assumption that Solr may not be required in the context of files tab search, whose search facets are reduced compared to other in-application searches. Therefore, if we find evidence that the assumption is incorrect, we will work on extending the search capabilities to support Solr.
 
+#### Dataverses/Datasets list
+
+The original JSF Dataverses/Datasets list on the home page uses normal paging buttons at the bottom of the list.
+We have implemented infinite scrolling in this list, replacing the normal paging buttons, but the goal would be to be able to toggle between normal paging and infinite scrolling via a toggle setting or button.
+
 ## Publishing the Design System
 
 The Design System is published to the npm Package Registry. To publish a new version, follow these steps:

package.json

@@ -24,6 +24,7 @@
     "@types/react": "18.0.27",
     "@types/react-dom": "18.0.10",
     "bootstrap": "5.2.3",
+    "classnames": "2.5.1",
     "html-react-parser": "3.0.16",
     "i18next": "22.4.9",
     "i18next-browser-languagedetector": "7.0.1",
@@ -33,6 +34,7 @@
     "react-bootstrap": "2.7.2",
     "react-bootstrap-icons": "1.10.3",
     "react-i18next": "12.1.5",
+    "react-infinite-scroll-hook": "4.1.1",
     "react-loader-spinner": "5.3.4",
     "react-markdown": "8.0.7",
     "react-router-dom": "6.8.1",
@@ -62,6 +64,7 @@
     "test:coverage-merge": "lcov-result-merger '**/*/lcov.info' 'merged-coverage/lcov.info' && perl -pi -e 's/src\\/lib/packages\\/design-system\\/src\\/lib/g' merged-coverage/lcov.info",
     "git:add": "git add .",
     "storybook": "concurrently 'storybook dev -p 6006 && open \"http://localhost:6006\"' 'cd packages/design-system && npm run storybook'",
+    "storybook:windows": "concurrently \"storybook dev -p 6006\" \"npm run storybook -w packages/design-system\"",
     "build-storybook": "storybook build",
     "test:storybook": "test-storybook",
     "test:storybook-all": "concurrently 'test-storybook' 'cd packages/design-system && npm run test:storybook'",

public/locales/en/pagination.json

@@ -1,5 +1,10 @@
 {
   "results_one": "1 {{item}}",
   "results_other": "{{start}} to {{end}} of {{count}} {{item}}s",
+  "accumulated": {
+    "one": "{{count}} {{item}}",
+    "lessThanPageSize": "{{count}} {{item}}s",
+    "moreThanPageSize": "{{accumulated}} of {{count}} {{item}}s seen"
+  },
   "pageSize": "{{item}}s per page"
 }

src/dataset/domain/models/DatasetsWithCount.ts

@@ -0,0 +1,7 @@
+import { DatasetPreview } from '../../domain/models/DatasetPreview'
+import { TotalDatasetsCount } from './TotalDatasetsCount'
+
+export interface DatasetsWithCount {
+  datasetPreviews: DatasetPreview[]
+  totalCount: TotalDatasetsCount
+}

src/dataset/domain/repositories/DatasetRepository.ts

@@ -3,11 +3,16 @@ import { TotalDatasetsCount } from '../models/TotalDatasetsCount'
 import { DatasetPaginationInfo } from '../models/DatasetPaginationInfo'
 import { DatasetPreview } from '../models/DatasetPreview'
 import { DatasetDTO } from '../useCases/DTOs/DatasetDTO'
+import { DatasetsWithCount } from '../models/DatasetsWithCount'
 
 export interface DatasetRepository {
   getByPersistentId: (persistentId: string, version?: string) => Promise<Dataset | undefined>
   getByPrivateUrlToken: (privateUrlToken: string) => Promise<Dataset | undefined>
   getAll: (collectionId: string, paginationInfo: DatasetPaginationInfo) => Promise<DatasetPreview[]>
   getTotalDatasetsCount: (collectionId: string) => Promise<TotalDatasetsCount>
   create: (dataset: DatasetDTO) => Promise<{ persistentId: string }>
+  getAllWithCount: (
+    collectionId: string,
+    paginationInfo: DatasetPaginationInfo
+  ) => Promise<DatasetsWithCount>
 }

src/dataset/domain/useCases/getDatasetsWithCount.ts

@@ -0,0 +1,13 @@
+import { DatasetRepository } from '../repositories/DatasetRepository'
+import { DatasetPaginationInfo } from '../models/DatasetPaginationInfo'
+import { DatasetsWithCount } from '../models/DatasetsWithCount'
+
+export async function getDatasetsWithCount(
+  datasetRepository: DatasetRepository,
+  collectionId: string,
+  paginationInfo: DatasetPaginationInfo
+): Promise<DatasetsWithCount> {
+  return datasetRepository.getAllWithCount(collectionId, paginationInfo).catch((error: Error) => {
+    throw new Error(error.message)
+  })
+}

src/dataset/infrastructure/repositories/DatasetJSDataverseRepository.ts

@@ -28,6 +28,7 @@ import { DatasetPreview } from '../../domain/models/DatasetPreview'
 import { JSDatasetPreviewMapper } from '../mappers/JSDatasetPreviewMapper'
 import { DatasetDTO } from '../../domain/useCases/DTOs/DatasetDTO'
 import { DatasetDTOMapper } from '../mappers/DatasetDTOMapper'
+import { DatasetsWithCount } from '../../domain/models/DatasetsWithCount'
 
 const includeDeaccessioned = true
 
@@ -51,6 +52,24 @@ export class DatasetJSDataverseRepository implements DatasetRepository {
       })
   }
 
+  getAllWithCount(
+    collectionId: string,
+    paginationInfo: DatasetPaginationInfo
+  ): Promise<DatasetsWithCount> {
+    return getAllDatasetPreviews
+      .execute(paginationInfo.pageSize, paginationInfo.offset, collectionId)
+      .then((subset: DatasetPreviewSubset) => {
+        const datasetPreviewsMapped = subset.datasetPreviews.map(
+          (datasetPreview: JSDatasetPreview) =>
+            JSDatasetPreviewMapper.toDatasetPreview(datasetPreview)
+        )
+        return {
+          datasetPreviews: datasetPreviewsMapped,
+          totalCount: subset.totalDatasetCount
+        }
+      })
+  }
+
   getByPersistentId(
     persistentId: string,
     version?: string,

src/sections/collection/Collection.tsx

@@ -1,6 +1,7 @@
 import { Row } from '@iqss/dataverse-design-system'
 import { DatasetRepository } from '../../dataset/domain/repositories/DatasetRepository'
 import { DatasetsList } from './datasets-list/DatasetsList'
+import { DatasetsListWithInfiniteScroll } from './datasets-list/DatasetsListWithInfiniteScroll'
 import { BreadcrumbsGenerator } from '../shared/hierarchy/BreadcrumbsGenerator'
 import {
   DvObjectType,
@@ -14,6 +15,7 @@ interface CollectionProps {
   datasetRepository: DatasetRepository
   id: string
   page?: number
+  infiniteScrollEnabled?: boolean
 }
 const rootNode = new UpwardHierarchyNode(
   'Root',
@@ -24,7 +26,12 @@ const rootNode = new UpwardHierarchyNode(
   undefined
 )
 
-export function Collection({ datasetRepository, id, page }: CollectionProps) {
+export function Collection({
+  datasetRepository,
+  id,
+  page,
+  infiniteScrollEnabled = false
+}: CollectionProps) {
   const { user } = useSession()
 
   return (
@@ -49,7 +56,11 @@ export function Collection({ datasetRepository, id, page }: CollectionProps) {
           <AddDataActionsButton />
         </div>
       )}
-      <DatasetsList datasetRepository={datasetRepository} page={page} collectionId={id} />
+      {infiniteScrollEnabled ? (
+        <DatasetsListWithInfiniteScroll datasetRepository={datasetRepository} collectionId={id} />
+      ) : (
+        <DatasetsList datasetRepository={datasetRepository} page={page} collectionId={id} />
+      )}
     </Row>
   )
 }

src/sections/collection/CollectionFactory.tsx

@@ -2,6 +2,7 @@ import { ReactElement } from 'react'
 import { Collection } from './Collection'
 import { DatasetJSDataverseRepository } from '../../dataset/infrastructure/repositories/DatasetJSDataverseRepository'
 import { useSearchParams } from 'react-router-dom'
+import { INFINITE_SCROLL_ENABLED } from './config'
 
 const datasetRepository = new DatasetJSDataverseRepository()
 export class CollectionFactory {
@@ -15,5 +16,12 @@ function CollectionWithSearchParams() {
   const page = searchParams.get('page') ? parseInt(searchParams.get('page') as string) : undefined
   const id = searchParams.get('id') ? (searchParams.get('id') as string) : 'root'
 
-  return <Collection datasetRepository={datasetRepository} page={page} id={id} />
+  return (
+    <Collection
+      datasetRepository={datasetRepository}
+      page={page}
+      id={id}
+      infiniteScrollEnabled={INFINITE_SCROLL_ENABLED}
+    />
+  )
 }

src/sections/collection/config.ts

@@ -0,0 +1 @@
+export const INFINITE_SCROLL_ENABLED = true