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

…into feature/174-refine-ui-styling-file-tab

.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

.storybook/main.ts

@@ -1,15 +1,16 @@
+import { dirname, join } from "path";
 import type { StorybookConfig } from '@storybook/react-vite'
 
 const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-interactions',
-    '@storybook/addon-a11y'
+    getAbsolutePath("@storybook/addon-links"),
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@storybook/addon-interactions"),
+    getAbsolutePath("@storybook/addon-a11y")
   ],
   framework: {
-    name: '@storybook/react-vite',
+    name: getAbsolutePath("@storybook/react-vite"),
     options: {}
   },
   docs: {
@@ -18,3 +19,7 @@ const config: StorybookConfig = {
   staticDirs: ['../public']
 }
 export default config
+
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, "package.json")));
+}

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.

dev-env/.env

@@ -1,4 +1,4 @@
 POSTGRES_VERSION=13
 DATAVERSE_DB_USER=dataverse
-SOLR_VERSION=8.11.1
+SOLR_VERSION=9.3.0
 REGISTRY=ghcr.io

dev-env/docker-compose-dev.yml

@@ -109,7 +109,8 @@ services:
     hostname: 'solr'
     image: solr:${SOLR_VERSION}
     depends_on:
-      - dev_solr_initializer
+      dev_solr_initializer:
+        condition: service_completed_successfully
     restart: on-failure
     expose:
       - '8983'

dev-env/run-env.sh

@@ -6,7 +6,7 @@ export DATAVERSE_IMAGE_TAG=$1
 export COMPOSE_HTTP_TIMEOUT=200
 
 # Timeout for Dataverse bootstrap configbaker
-export DATAVERSE_BOOTSTRAP_TIMEOUT="10m"
+export DATAVERSE_BOOTSTRAP_TIMEOUT="5m"
 
 echo "INFO - Setting up Dataverse on image tag ${DATAVERSE_IMAGE_TAG}..."
 

dev.Dockerfile

@@ -9,9 +9,8 @@ RUN npm run build
 
 WORKDIR /usr/src/app
 COPY package.json ./
-COPY package-lock.json ./
 COPY .npmrc ./
-RUN npm ci
+RUN npm install
 
 FROM node:19.6.1-alpine