Merge pull request #510 from MORE-Platform/staging

Merge Staging into Main branch
MORE-Platform · Aug 9, 2024 · 04c8613 · 04c8613
2 parents 8e04fdf + 16d9bc8
commit 04c8613
Show file tree

Hide file tree

Showing 111 changed files with 12,997 additions and 17,436 deletions.
diff --git a/.dockerignore b/.dockerignore
@@ -0,0 +1,2 @@
+node_modules/
+dist/
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -22,6 +22,14 @@
     "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/ban-ts-comment": "off",
     "@typescript-eslint/no-non-null-assertion": "off",
-    "vue/no-mutating-props": "off"
+    "@typescript-eslint/explicit-function-return-type": "error",
+    "vue/no-mutating-props": "off",
+    "vue/attribute-hyphenation": [
+      "error",
+      "always",
+      {
+        "ignore": ["headerClass"] // primevue AccordionTab does not fully support kebap-case props (#1263)
+      }
+    ]
   }
 }
diff --git a/.github/workflows/test-build-push.yml b/.github/workflows/test-build-push.yml
@@ -3,6 +3,10 @@ name: Test, Build and Publish
 on:
   push:
   workflow_dispatch:
+    inputs:
+      dockerTag:
+        description: If set, docker img is built and tagged accordingly
+        required: false
 
 env:
   REGISTRY: ghcr.io
@@ -14,21 +18,21 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout commit
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Set up JDK 17
-        uses: actions/setup-java@v3
+        uses: actions/setup-java@v4
         with:
           distribution: 'temurin'
           java-version: 17
 
       - name: Use Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: '16.x'
 
       - name: Cache NPM
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: ~/.npm
           key: "${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}"
@@ -57,23 +61,26 @@ jobs:
       - name: Check licenses
         run: npm run license:check
 
-#      - name: Run tests
-#        run: npm run test:unit:once
-#
-#      - name: Upload Test Results
-#        if: always()
-#        uses: actions/upload-artifact@v4
-#        with:
-#          name: Test Results
-#          path: "target/testResults.xml"
+      #      - name: Run tests
+      #        run: npm run test:unit:once
+      #
+      #      - name: Upload Test Results
+      #        if: always()
+      #        uses: actions/upload-artifact@v4
+      #        with:
+      #          name: Test Results
+      #          path: "target/testResults.xml"
 
       - name: Run build
         run: npm run package
+        env:
+          VITE_GIT_BRANCH: '${{ github.ref_name }}'
+          VITE_GIT_REVISION: '${{ github.sha }}'
 
   build-and-push-image:
     name: Build and Push Docker Image
     runs-on: ubuntu-latest
-    if: (github.ref_type == 'branch' && github.ref_name == 'main') || (github.ref_type == 'tag' && startsWith(github.ref_name, 'v'))
+    if: contains(fromJSON('["main", "develop", "redlink", "staging"]'), github.ref_name) || github.event.inputs.dockerTag != ''
     needs:
       - test
     permissions:
@@ -82,33 +89,43 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Log in to the Container registry
-        uses: docker/login-action@465a07811f14bebb1938fbed4728c6a1ff8901fc
+        uses: docker/login-action@e92390c5fb421da1463c202d546fed0ec5c39f20
         with:
           registry: ${{ env.REGISTRY }}
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Extract metadata (tags, labels) for Docker
         id: meta
-        uses: docker/metadata-action@v4.6.0
+        uses: docker/metadata-action@v5.5.1
         with:
           images: "${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}"
           tags: |
+            # tag with unique id
+            type=raw,value=1.0.${{ github.run_number }}.{{sha}}
+            # tag with branch-name
+            type=ref,event=branch,enable=${{ github.event.inputs.dockerTag == '' }}
+            # latest-tag on the default-branch (main)
             type=raw,value=latest,enable={{is_default_branch}}
-            type=ref,event=pr
-            type=semver,pattern={{version}}
-            type=semver,pattern={{major}}.{{minor}}
-            type=semver,pattern={{major}}
+            # a manually provided tag
+            type=raw,value=${{ github.event.inputs.dockerTag }}
       - name: Build and push Docker image
-        uses: docker/build-push-action@2eb1c1961a95fc15694676618e422e8ba1d63825
+        uses: docker/build-push-action@2cdde995de11925a030ce8070c3d77a52ffcf1c0
         with:
           context: .
           push: ${{ github.event_name != 'pull_request' }}
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}
+          build-args: |
+            VITE_GIT_BRANCH
+            VITE_GIT_REVISION
+        env:
+          VITE_GIT_BRANCH: '${{ github.ref_name }}'
+          VITE_GIT_REVISION: '${{ github.sha }}'
+
 
 
   event_file:

diff --git a/.gitignore b/.gitignore
@@ -10,4 +10,5 @@ more-configuration-api-client-ts*
 ConfiguratorAPI.yaml
 openapitools.json
 src/generated-sources
-.env
+tests/coverage
+.env
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-v16.15.0
+v18.18.0
diff --git a/Dockerfile b/Dockerfile
@@ -3,8 +3,10 @@ FROM node:lts-alpine as build-stage
 RUN apk add openjdk11-jre-headless
 WORKDIR /app
 COPY package*.json ./
-RUN npm install
+RUN npm ci
 COPY . .
+ARG VITE_GIT_BRANCH
+ARG VITE_GIT_REVISION
 RUN npm run package:quick
 
 # production stage

diff --git a/README.md b/README.md
@@ -74,7 +74,6 @@ First-party plugins needed for Tailwind UI:
 
 - [tailwindcss/forms](https://github.com/tailwindlabs/tailwindcss-forms)
 - [tailwindcss/typography](https://tailwindcss.com/docs/typography-plugin)
-- [tailwindcss/line-clamp](https://github.com/tailwindlabs/tailwindcss-line-clamp)
 - [tailwindcss/aspect-ratio](https://github.com/tailwindlabs/tailwindcss-aspect-ratio)
 
 

diff --git a/docs/adr/basic_frontend_setup-ADR.md b/docs/adr/basic_frontend_setup-ADR.md
@@ -52,7 +52,7 @@ Since downgrading to Vue 2 wouldn't bring any benefits and Vue 3 was declared th
 
 ### 1.3. Vue CLI or Vite
 
-[Vite](https://vitejs.dev/) is a build tool for Vue and was developed by Vue's creator Evan You to improve on Vue's developement workflow and work with native ES modules of modern browsers. Vue and Vites functioinalities and in project workflow are very similar. As for now, due to its good community feedback and integration, it was extended for other Frameworks too.
+[Vite](https://vitejs.dev/) is a build tool for Vue and was developed by Vue's creator Evan You to improve on Vue's development workflow and work with native ES modules of modern browsers. Vue and Vites functionalities and in project workflow are very similar. As for now, due to its good community feedback and integration, it was extended for other Frameworks too.
 
 [Vue CLI](https://cli.vuejs.org/) is a tool for quickly setting up a Vue-based project with standard build tools and best-practice configuration. Its main features include project scaffolding, dev server with hot-module reloading, plugin system and a user interface. It is built on top of Webpack and the development server, build functionality and performance will be a superset of Webpack.
 
@@ -169,7 +169,7 @@ Web Accessibility can help to provide access to Websites for (partially) disable
 
 Provider O-Auth. will be used for the authentication process. Here the user will be connected to a login site, which checks the session status or offers to enter the login data. After successfully logging in the user will be redirected to the More landing page.
 
-For the specific authentication server the backend will use [Keycloak](https://www.psimms.de/keycloak-integration-in-vuejs-3/) or [Logto](https://docs.logto.io/docs/recipes/integrate-logto/vue/). Though Logto is more often used with Vue, both can be integrated with Vue. After the backend has prepered the authentication server with its tool of joice, the Vue for the specific tool can be implemented.
+For the specific authentication server the backend will use [Keycloak](https://www.psimms.de/keycloak-integration-in-vuejs-3/) or [Logto](https://docs.logto.io/docs/recipes/integrate-logto/). Though Logto is more often used with Vue, both can be integrated with Vue. After the backend has prepered the authentication server with its tool of joice, the Vue for the specific tool can be implemented.
 
 ### 3.6. API Calls
 

diff --git a/docs/frontend-documentation/Documentation.md b/docs/frontend-documentation/Documentation.md
@@ -94,7 +94,7 @@ The columns array define which properties will be shown in the table and which f
 ![StudyGroup Table](./img/study-groups.png)
 
 ### 4.2 Dialog
-Another batch of important reusable components are the **Dialogs**, which are based on the [Primevue Dynamic Dialog](https://primevue.org/dynamicdialog/) or the [Primevue Confnirmation Dialog](https://primevue.org/confirmdialog/). Their main function is to create/edit an entity or provide further information to actions taken, that are required to be confirmed by the researcher (```./src/components.dialogs```).
+Another batch of important reusable components are the **Dialogs**, which are based on the [Primevue Dynamic Dialog](https://primevue.org/dynamicdialog/) or the [Primevue Confirmation Dialog](https://primevue.org/confirmdialog/). Their main function is to create/edit an entity or provide further information to actions taken, that are required to be confirmed by the researcher (```./src/components.dialogs```).
 
 Note: A dialog takes in the data that has to be displayed or edited (```data: {...}```) and uses the ```toClose()``` event to save/delete/close the item referred to.
 
@@ -123,7 +123,7 @@ dialog.open(StudyDialog, {
 ***Create Study Dialog***
 ![Create Study Dialog](./img/create-study.png)
 
-***Delete StudyGroup Dilaog***
+***Delete StudyGroup Dialog***
 ![Delete StudyGroup Dialog](./img/delete-study-group.png)
 
 ### 4.3 InputProperty Components
@@ -193,7 +193,7 @@ The ```validate(): string | undefined {...}``` function defines how each propert
 ```
 
 #### 4.4.3 Parsing and mapping a property
-To parse a ```Proeprty<T>``` both the specific ```Component Factory``` for an observation, trigger or action and the ```values``` of already existing components (if present) have to be mapped on another. Each Component can have more than one property. The property type is defined inside the ```Component Factory``` which is mapped by id on each property.
+To parse a ```Property<T>``` both the specific ```Component Factory``` for an observation, trigger or action and the ```values``` of already existing components (if present) have to be mapped on another. Each Component can have more than one property. The property type is defined inside the ```Component Factory``` which is mapped by id on each property.
 
 ***TriggerFactory Cron Property (triggerTypeProps)***
 
@@ -217,7 +217,7 @@ const properties: Ref<Property<any>[]> = ref(
 ```
 
 #### 4.4.4 Vue Template
-The parsed Input Property is processed by a specific Input Proeprty Template, that defines how the Property UI should look like. Input Property Templates are saved inside the ```./src/components/dialog/shared``` directory. The ```PropertyInputs.vue``` component collects every existing input property component and runs from the parent given Property Array through them, to render Input Components based on the Property instance types.
+The parsed Input Property is processed by a specific Input Property Template, that defines how the Property UI should look like. Input Property Templates are saved inside the ```./src/components/dialog/shared``` directory. The ```PropertyInputs.vue``` component collects every existing input property component and runs from the parent given Property Array through them, to render Input Components based on the Property instance types.
 
 ##### 4.4.4.1 Emits
 The ```PropertyInput.vue``` component uses two ``emits`` to process the change of data.
@@ -305,7 +305,7 @@ The ```editable``` property tells the input component, if the form section is ed
 </template>
 ```
 
-***Watches the input proeprty and emits changes to the PropertyInput.vue***
+***Watches the input property and emits changes to the PropertyInput.vue***
 ```
   watch(props.property, () => {
     emit('onInputChange', props.property);

diff --git a/docs/gherkin/Relative-Scheduler-time-and-participant-starting-time.md b/docs/gherkin/Relative-Scheduler-time-and-participant-starting-time.md
@@ -0,0 +1,11 @@
+# Gherkin Test: Bug fix relative scheduler (UTC time) and participant starting time
+
+### Background:
+- Study was created or exists and has a valid relative observation and 10 participants.
+
+| **Scenario**                                            | **Given**                                                                                                                                                                                                                                                              | **Steps**                                                                                                                                                                                                                                                    | **Expected Result**                                                                                                                                                           | **Result**  | **Note**                                            |
+|---------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------|-----------------------------------------------------|
+| Participant list exists and updates                     | Background, and that a smartphone with the more app is prepared                                                                                                                                                                                                        | <ul><li>WHEN I click on the participant tab, </li><li>And join the study as one of the participants </li></ul>                                                                                                                                               | THEN the participants list should show a "started on" coloumn <br/>AND it should update with the correct starting date once the user data has been entered to the smartphone  | as expected | After reload the startdate and time has been shown. |
+| Relative scheduer shows the correct start and end times | Background, and the observation tab is open                                                                                                                                                                                                                            | <ul><li>WHEN I create a new observation</li><li>AND I add a relative scheduler</li><li>AND enter a valid start and end date</li><li>AND save the relative scheduler</li><li>AND fill in the needed data to save.</li><li>AND save the observation.</li></ul> | THEN the relative scheduler should show the correct start and end date (I have entered) at any given point during this test.                                                  | as expected |                                                     |
+| The exported calendar shows the correct dates.          | Background, and the study list is open.                                                                                                                                                                                                                                | <ul><li>WHEN I click the export study calendar button</li><li>AND I import the data to lokal calendar</li></ul>                                                                                                                                              | THEN the existing observation(s) should be displayed correctly <br/>AND should not have a one hour offset compared to the observation(s) in the study manager                 | as expected |                                                     |
+| Correct observation display on the smartphone           | Background, one observation with a relative calendar exists with an start time of day one at 00:00 and an end time of 12:00<br/> AND it is repeated every day<br/>AND a mobile phone with the MORE app is ready to join the study <br/>AND the participant tab is open | <ul><li>WHEN I join the study on the mobile phone as one of the participants, which can have a relative observation take place,</li></ul>                                                                                          | THEN the observaions should be shown at the correct time, at the correct day.                                                                                                 | as expected |                                                     |