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

…into feature/139-files-table-file-action-buttons-ui

.github/workflows/deploy-beta-testing.yml

@@ -0,0 +1,96 @@
+name: 'Deploy to Beta Testing'
+
+on:
+  push:
+    branches:
+      - develop
+
+jobs:
+  build:
+    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 UI Library
+        working-directory: packages/design-system
+        run: npm run build
+
+      - name: Create and populate .env file
+        env:
+          DATAVERSE_BACKEND_URL: ${{ secrets.BETA_DATAVERSE_BACKEND_URL }}
+        run: |
+          touch .env
+          echo VITE_DATAVERSE_BACKEND_URL="$DATAVERSE_BACKEND_URL" >> .env
+        shell: bash
+
+      - name: Build with base path
+        run: npm run build -- --base=/spa
+
+      - uses: actions/upload-artifact@v3
+        with:
+          name: built-site
+          path: ./dist
+
+  deploy-to-payara:
+    needs: build
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - uses: actions/setup-java@v3
+        with:
+          distribution: 'zulu'
+          java-version: '11'
+
+      - uses: actions/download-artifact@v3
+        with:
+          name: built-site
+          path: ./dist
+
+      - name: Get branch name
+        id: branch-name
+        uses: tj-actions/branch-names@v6
+
+      - name: Build war file
+        working-directory: ./deployment/payara
+        run: mvn package "-Dversion=${{ steps.branch-name.outputs.current_branch }}"
+
+      - name: Copy war file to remote instance
+        uses: appleboy/scp-action@master
+        with:
+          host: ${{ secrets.BETA_PAYARA_INSTANCE_HOST }}
+          username: ${{ secrets.BETA_PAYARA_INSTANCE_USERNAME }}
+          key: ${{ secrets.BETA_PAYARA_INSTANCE_SSH_PRIVATE_KEY }}
+          source: './deployment/payara/target/dataverse-frontend.war'
+          target: '/home/${{ secrets.BETA_PAYARA_INSTANCE_USERNAME }}'
+          overwrite: true
+
+      - name: Execute payara war deployment remotely
+        uses: appleboy/[email protected]
+        with:
+          host: ${{ secrets.BETA_PAYARA_INSTANCE_HOST }}
+          username: ${{ secrets.BETA_PAYARA_INSTANCE_USERNAME }}
+          key: ${{ secrets.BETA_PAYARA_INSTANCE_SSH_PRIVATE_KEY }}
+          script: |
+            APPLICATION_NAME=dataverse-frontend
+            APPLICATION_WAR_PATH=deployment/payara/target/$APPLICATION_NAME.war
+            ASADMIN='/usr/local/payara6/bin/asadmin --user admin'
+            DATAVERSE_FRONTEND=`$ASADMIN list-applications |grep $APPLICATION_NAME |awk '{print $1}'`
+            $ASADMIN undeploy $DATAVERSE_FRONTEND
+            $ASADMIN deploy --name $APPLICATION_NAME --contextroot /spa $APPLICATION_WAR_PATH

.github/workflows/deploy.yml

@@ -143,7 +143,7 @@ jobs:
           script: |
             APPLICATION_NAME=dataverse-frontend
             APPLICATION_WAR_PATH=deployment/payara/target/$APPLICATION_NAME.war
-            ASADMIN='/usr/local/payara5/bin/asadmin --user admin'
+            ASADMIN='/usr/local/payara6/bin/asadmin --user admin'
             DATAVERSE_FRONTEND=`$ASADMIN list-applications |grep $APPLICATION_NAME |awk '{print $1}'`
             $ASADMIN undeploy $DATAVERSE_FRONTEND
             $ASADMIN deploy --name $APPLICATION_NAME --contextroot /${{ github.event.inputs.basepath }} $APPLICATION_WAR_PATH

.github/workflows/test.yml

@@ -49,7 +49,7 @@ jobs:
         run: ./run-env.sh "$E2E_DATAVERSE_IMAGE_TAG"
 
       - name: Wait for containers to be ready
-        run: timeout 300s sh -c 'while ! docker logs dev_dataverse_bootstrap 2>&1 | grep -q "your instance has been configured"; do sleep 2; done'
+        run: timeout 360s sh -c 'while ! docker logs dev_dataverse_bootstrap 2>&1 | grep -q "your instance has been configured"; do sleep 2; done'
 
       - name: Run e2e tests
         run: npm run test:e2e

README.md

@@ -4,6 +4,10 @@
 [![Tests](https://github.com/IQSS/dataverse-frontend/actions/workflows/test.yml/badge.svg)](https://github.com/IQSS/dataverse-frontend/actions/workflows/test.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
+
+- 2023-08-01: [View mode of the dataset page](https://groups.google.com/g/dataverse-community/c/cxZ3Bal_-uo/m/h3kh3iVNCwAJ)
+
 ## Getting Started
 
 First install node >=16 and npm >=8. Recommended versions `node v19` and `npm v9`.
@@ -180,6 +184,19 @@ It is important that the remote instance is correctly pre-configured, with the P
 
 A base path for the frontend application can be established on the remote server by setting the corresponding field in the workflow inputs. This mechanism prevents conflicts between the frontend application and any pre-existing deployed application running on Payara, which can potentially be a Dataverse backend. This way, only the routes with the base path included will redirect to the frontend application.
 
+#### Beta Testing Environment
+
+To make the SPA Frontend accesible and testable by people interested in the project, there is a remote beta testing environment that includes the latest changes developed both for the frontend application and the Dataverse backend application (develop branches).
+
+This environment follows the "all-in-one" solution described above, where both applications coexist on a Payara server.
+
+Environment updates are carried out automatically through GitHub actions, present both in this repository and in the Dataverse backend repository, which deploy the develop branches when any change is pushed to them.
+
+The environment is accessible through the following URLs:
+
+- SPA: https://beta.dataverse.org/spa
+- JSF: https://beta.dataverse.org
+
 ## Changes from the Style Guide
 
 The design system and frontend in this repo are inspired by the Dataverse Project [Style Guide](https://guides.dataverse.org/en/latest/style/index.html), but the following changes have been made, especially for accessibility.

package.json

@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@faker-js/faker": "7.6.0",
-    "@iqss/dataverse-client-javascript": "2.0.0-pr67.5dfc70a",
+    "@iqss/dataverse-client-javascript": "2.0.0-pr80.378cc1e",
     "@iqss/dataverse-design-system": "*",
     "@istanbuljs/nyc-config-typescript": "1.0.2",
     "@tanstack/react-table": "8.9.2",

public/locales/en/files.json

@@ -71,10 +71,10 @@
       "title": "Filter by"
     },
     "filterByType": {
-      "title": "Filter Type"
+      "title": "File Type"
     },
     "filterByTag": {
-      "title": "Filter Tag"
+      "title": "File Tags"
     },
     "filterByAccess": {
       "title": "Access",

src/dataset/infrastructure/mappers/JSDatasetMapper.ts

@@ -24,7 +24,12 @@ export class JSDatasetMapper {
       citation,
       JSDatasetMapper.toSummaryFields(jsDataset.metadataBlocks, summaryFieldsNames),
       jsDataset.license,
-      JSDatasetMapper.toMetadataBlocks(jsDataset.metadataBlocks) // TODO Add alternativePersistentId, publicationDate, citationDate
+      JSDatasetMapper.toMetadataBlocks(
+        jsDataset.metadataBlocks,
+        jsDataset.alternativePersistentId,
+        jsDataset.publicationDate,
+        jsDataset.citationDate
+      )
     ).build()
   }
 
@@ -143,7 +148,7 @@ export class JSDatasetMapper {
       extraFields.publicationDate = publicationDate
     }
 
-    if (publicationDate && citationDate !== publicationDate) {
+    if (citationDate && citationDate !== publicationDate) {
       extraFields.citationDate = citationDate
     }
 

src/dataset/infrastructure/repositories/DatasetJSDataverseRepository.ts

@@ -1,7 +1,7 @@
 import { DatasetRepository } from '../../domain/repositories/DatasetRepository'
 import { Dataset } from '../../domain/models/Dataset'
 import {
-  getDatasetByPersistentId,
+  getDataset,
   getDatasetCitation,
   getDatasetSummaryFieldNames,
   WriteError,
@@ -13,7 +13,7 @@ import { JSDatasetMapper } from '../mappers/JSDatasetMapper'
 
 export class DatasetJSDataverseRepository implements DatasetRepository {
   getByPersistentId(persistentId: string, version?: string): Promise<Dataset | undefined> {
-    return getDatasetByPersistentId
+    return getDataset
       .execute(persistentId, this.versionToVersionId(version))
       .then((jsDataset) =>
         Promise.all([

src/files/domain/models/FilePaginationInfo.ts

@@ -2,14 +2,14 @@ export class FilePaginationInfo {
   constructor(
     public readonly page: number = 1,
     public readonly pageSize: number = 10,
-    public readonly total: number = 0
+    public readonly totalFiles: number = 0
   ) {}
 
   withTotal(total: number): FilePaginationInfo {
     return new FilePaginationInfo(this.page, this.pageSize, total)
   }
   goToPage(page: number): FilePaginationInfo {
-    return new FilePaginationInfo(page, this.pageSize, this.total)
+    return new FilePaginationInfo(page, this.pageSize, this.totalFiles)
   }
 
   goToPreviousPage(): FilePaginationInfo {
@@ -27,11 +27,11 @@ export class FilePaginationInfo {
       const newPage = Math.ceil((this.page * oldPageSize) / newPageSize)
       return newPage > 0 ? newPage : 1
     }
-    return new FilePaginationInfo(getNewPage(this.pageSize, pageSize), pageSize, this.total)
+    return new FilePaginationInfo(getNewPage(this.pageSize, pageSize), pageSize, this.totalFiles)
   }
 
   get totalPages(): number {
-    return Math.ceil(this.total / this.pageSize)
+    return Math.ceil(this.totalFiles / this.pageSize)
   }
 
   get hasPreviousPage(): boolean {

src/metadata-block-info/domain/models/MetadataBlockInfo.ts

@@ -1,10 +1,13 @@
 export interface MetadataBlockInfo {
   name: string
-  fields: Record<string, MetadataFieldInfo>
+  fields: MetadataBlockInfoFields
 }
 
+export type MetadataBlockInfoFields = Record<string, MetadataFieldInfo>
+
 export interface MetadataFieldInfo {
   displayFormat: string
 }
 
 export const METADATA_FIELD_DISPLAY_FORMAT_PLACEHOLDER = '#VALUE'
+export const METADATA_FIELD_DISPLAY_FORMAT_NAME_PLACEHOLDER = '#NAME'

src/metadata-block-info/infrastructure/mappers/JSMetadataBlockInfoMapper.ts

@@ -0,0 +1,51 @@
+import {
+  MetadataBlock as JSMetadataBlockInfo,
+  MetadataFieldInfo as JSMetadataFieldInfo
+} from '@iqss/dataverse-client-javascript'
+import { MetadataBlockInfo, MetadataBlockInfoFields } from '../../domain/models/MetadataBlockInfo'
+
+export class JSMetadataBlockInfoMapper {
+  static toMetadataBlockInfo(jsMetadataBlockInfo: JSMetadataBlockInfo): MetadataBlockInfo {
+    return {
+      name: jsMetadataBlockInfo.name,
+      fields: this.toFields(jsMetadataBlockInfo.metadataFields)
+    }
+  }
+
+  static toFields(
+    jsMetadataBlockInfoFields: Record<string, JSMetadataFieldInfo>
+  ): MetadataBlockInfoFields {
+    return Object.entries(jsMetadataBlockInfoFields).reduce(
+      (fields: MetadataBlockInfoFields, [key, value]) => {
+        fields[key] = { displayFormat: this.toDisplayFormat(value.displayFormat) }
+        return fields
+      },
+      {}
+    )
+  }
+
+  static toDisplayFormat(jsDisplayFormat: string): string {
+    const link = 'href="#VALUE"'
+    if (jsDisplayFormat.includes(link)) {
+      return '[#VALUE](#VALUE)'
+    }
+
+    const linkWithUrl = /<a\s+href='([^']*)\/#VALUE'[^>]*>#VALUE<\/a>/
+    const match = jsDisplayFormat.match(linkWithUrl)
+    if (match) {
+      return `[#VALUE](${match[1]}/#VALUE)`
+    }
+
+    const emailFormat = '#EMAIL'
+    if (jsDisplayFormat === emailFormat) {
+      return '[#VALUE](mailto:#VALUE)'
+    }
+
+    const imageFormat = '<img src="#VALUE" alt="#NAME" class="metadata-logo"/><br/>'
+    if (jsDisplayFormat === imageFormat) {
+      return '![#NAME](#VALUE)'
+    }
+
+    return jsDisplayFormat
+  }
+}

src/metadata-block-info/infrastructure/repositories/MetadataBlockInfoJSDataverseRepository.ts

@@ -0,0 +1,17 @@
+import { MetadataBlockInfoRepository } from '../../domain/repositories/MetadataBlockInfoRepository'
+import { MetadataBlockInfo } from '../../domain/models/MetadataBlockInfo'
+import {
+  getMetadataBlockByName,
+  MetadataBlock as JSMetadataBlockInfo
+} from '@iqss/dataverse-client-javascript'
+import { JSMetadataBlockInfoMapper } from '../mappers/JSMetadataBlockInfoMapper'
+
+export class MetadataBlockInfoJSDataverseRepository implements MetadataBlockInfoRepository {
+  getByName(name: string): Promise<MetadataBlockInfo | undefined> {
+    return getMetadataBlockByName
+      .execute(name)
+      .then((jsMetadataBlockInfo: JSMetadataBlockInfo) =>
+        JSMetadataBlockInfoMapper.toMetadataBlockInfo(jsMetadataBlockInfo)
+      )
+  }
+}

src/sections/dataset/DatasetFactory.tsx

@@ -6,9 +6,9 @@ import { useAnonymized } from './anonymized/AnonymizedContext'
 import { AnonymizedProvider } from './anonymized/AnonymizedProvider'
 import { FileJSDataverseRepository } from '../../files/infrastructure/FileJSDataverseRepository'
 import { MetadataBlockInfoProvider } from './metadata-block-info/MetadataBlockProvider'
-import { MetadataBlockInfoJSDataverseRepository } from '../../metadata-block-info/infrastructure/MetadataBlockInfoJSDataverseRepository'
-import { SettingsProvider } from '../settings/SettingsProvider'
+import { MetadataBlockInfoJSDataverseRepository } from '../../metadata-block-info/infrastructure/repositories/MetadataBlockInfoJSDataverseRepository'
 import { SettingJSDataverseRepository } from '../../settings/infrastructure/SettingJSDataverseRepository'
+import { SettingsProvider } from '../settings/SettingsProvider'
 
 const datasetRepository = new DatasetJSDataverseRepository()
 const fileRepository = new FileJSDataverseRepository()