Merge pull request #186 from CSCfi/develop

release 0.9.0

.eslintrc.json

@@ -8,11 +8,9 @@
   "extends": [
     "eslint:recommended",
     "plugin:react/recommended",
-    "plugin:prettier/recommended",
     "plugin:flowtype/recommended",
     "plugin:import/errors",
-    "plugin:import/warnings",
-    "plugin:cypress/recommended"
+    "plugin:import/warnings"
   ],
   "parserOptions": {
     "ecmaFeatures": {
@@ -21,7 +19,7 @@
     "ecmaVersion": 2018,
     "sourceType": "module"
   },
-  "plugins": ["react", "jest", "flowtype", "import", "cypress"],
+  "plugins": ["react", "jest", "flowtype", "import"],
   "settings": {
     "react": {
       "version": "detect"
@@ -56,6 +54,6 @@
   "ignorePatterns": ["node_modules/*", "build/*", ".github/*"],
   "globals": {
     "cy": true,
-    "cypress/globals": true
+    "Cypress": true
   }
 }

.github/dependabot.yml

@@ -0,0 +1,18 @@
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+      day: "monday"
+    labels:
+      - "npm dependencies"
+    open-pull-requests-limit: 10
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+      day: "monday"
+    labels:
+      - "github actions"
+    open-pull-requests-limit: 10

.github/workflows/codeql.yml

@@ -2,7 +2,7 @@ name: "CodeQL"
 
 on:
   push:
-    branches: [master]
+    branches: [master, develop]
   pull_request:
     # The branches below must be a subset of the branches above
     branches: [master, develop]

.github/workflows/e2etests.yml

@@ -12,7 +12,11 @@ jobs:
     steps:
       - uses: actions/checkout@v2
       - name: Build Frontend
-        run: npm install && npm run build
+        run: |
+          sudo npm install -g npm@7.6.0
+          npx --quiet pinst --disable
+          npm install --production
+          npm run build --production
       - name: Setup and Run backend
         run: |
           BRANCH=$(echo ${GITHUB_REF#refs/heads/} | sed -r 's#/+#-#g')
@@ -22,11 +26,9 @@ jobs:
             VERSION=develop
           fi
           git clone --branch $VERSION https://github.com/CSCfi/metadata-submitter
-          cd metadata-submitter/metadata_backend
-          mkdir -p frontend
-          cp -r ../../build/* frontend/
-          cd ../
-          docker-compose up -d --build
+          mkdir -p metadata-submitter/metadata_backend/frontend
+          cp -r build/* metadata-submitter/metadata_backend/frontend/
+          docker-compose -f metadata-submitter/docker-compose.yml up -d --build
           sleep 30
       - uses: cypress-io/github-action@v2
         with:
@@ -38,8 +40,10 @@ jobs:
         with:
           name: cypress-screenshots
           path: cypress/screenshots
+          retention-days: 5
       - uses: actions/upload-artifact@v2
         if: failure()
         with:
           name: cypress-videos
-          path: cypress/videos
+          path: cypress/videos
+          retention-days: 5

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npm run concurrently -- "npm:lint:check" "npm:format:check" "npm:flow:check" "npm:test:noninteractive" 

.prettierignore

@@ -1,2 +1,3 @@
 coverage
-.github
+.github
+build/*

architecture.md

@@ -11,6 +11,105 @@ Form components are crucial part of the application:
 - All submissions and folder creation are made with `react-hook-form`. Latter uses form as a reference so submission can be triggered outside the form.
 - Form for json schema based forms are created with custom json schema parser, which builds `react-hook-form` based forms from given json schema. Json schema-based forms are validated against json schema with `Ajv`. React-hook-form is used for performance reasons: it uses uncontrolled components so adding a lot of fields to array doesn't slow rendering of the application.
 
+### Constants
+
+Folder `src/constants` holds all the constants used in the application. The constants are uniquely defined and separated into different files according to its related context. For example, the file `constants/wizardObject.js` contains unique constants regarding to `wizardObject` such as: `ObjectTypes, ObjectStatus, etc.`
+
+The purposes of using these `constants` are:
+
+- to avoid hard coding the values of variables repeatedly
+- to keep the consistency when defining the values of variables
+- to reuse those predefined values across the application
+
+Example of defining and using a constant:
+
+- First, define the constant object `ObjectSubmissionTypes` in `constants/wizardObject.js`
+
+```
+export const ObjectSubmissionTypes = {
+  form: "Form",
+  xml: "XML",
+  existing: "Existing",
+}
+```
+
+- Then, use this constant in `WizardComponents/WizardObjectIndex`:
+
+```
+import { ObjectSubmissionTypes } from "constants/wizardObject"
+
+  switch (currentSubmissionType) {
+    case ObjectSubmissionTypes.form: {
+      target = "form"
+      break
+    }
+    case ObjectSubmissionTypes.xml: {
+      target = "XML upload"
+      break
+    }
+    case ObjectSubmissionTypes.existing: {
+      target = "drafts"
+      break
+    }
+  }
+```
+
+### Commonly used data types
+
+All commonly used data types of variables are defined in the file `index.js` in folder `src/types`. The purposes are:
+
+- to avoid hard coding the same data types frequently in different files
+- to keep track and consistency of the data types across different files
+
+For example:
+
+- declare and export these data types in `src/types/index.js`
+
+```
+export type ObjectInsideFolder = {
+  accessionId: string,
+  schema: string,
+}
+
+export type ObjectTags = {
+  submissionType: string,
+  fileName?: string,
+}
+
+export type ObjectInsideFolderWithTags = ObjectInsideFolder & { tags: ObjectTags }
+```
+
+- import and reuse the data types in different files:
+  - Reuse type `ObjectInsideFolder` in `features/wizardSubmissionFolderSlice.js`:
+
+```
+import type { ObjectInsideFolder } from "types"
+
+export const addObjectToFolder = (
+  folderID: string,
+  objectDetails: ObjectInsideFolder
+) => {}
+
+export const addObjectToDrafts = (
+  folderID: string,
+  objectDetails: ObjectInsideFolder
+) => {}
+```
+
+- Reuse type `ObjectInsideFolderWithTags` consequently in both `WizardComponents/WizardSavedObjectsList.js` and `WizardSteps/WizardShowSummaryStep.js`:
+
+```
+import type { ObjectInsideFolderWithTags } from "types"
+
+type WizardSavedObjectsListProps = { submissions: Array<ObjectInsideFolderWithTags> }
+```
+
+```
+import type { ObjectInsideFolderWithTags } from "types"
+
+type GroupedBySchema = {| [Schema]: Array<ObjectInsideFolderWithTags> |}
+```
+
 ## Redux store
 
 Redux is handled with [Redux Toolkit](https://redux-toolkit.js.org/) and app is using following redux toolkit features:

cypress/integration/app.spec.js

@@ -36,10 +36,9 @@ describe("Basic e2e", function () {
     cy.get(".MuiListItem-container", { timeout: 10000 }).should("have.length", 1)
 
     // Edit saved submission
-    cy.get("button[type=button]").contains("New form").click()
     cy.get("button[type=button]").contains("Edit").click()
     cy.get("input[name='descriptor.studyTitle']").should("have.value", "New title")
-    cy.get("input[name='descriptor.studyTitle']").type(" edited")
+    cy.get("input[name='descriptor.studyTitle']").type(" edited").blur()
     cy.get("input[name='descriptor.studyTitle']").should("have.value", "New title edited")
     cy.get("button[type=button]").contains("Update").click()
     cy.get("div[role=alert]").contains("Object updated")
@@ -86,6 +85,8 @@ describe("Basic e2e", function () {
       .then($btn => $btn.click())
 
     cy.get("form").within(() => {
+
+      cy.get("input[name='title']").type("Test title")
       // Experiment
       cy.get("input[name='experimentRef.accessionId']").type("Experiment Test Accession Id")
       cy.get("input[name='experimentRef.identifiers.submitterId.namespace']").type("Experiment Test Namespace")
@@ -128,7 +129,7 @@ describe("Basic e2e", function () {
           )
           cy.get("button").contains("Add new item").click()
           cy.get("input[name='analysisType.sequenceVariation.sequence[0].accessionId']").type(
-            "Squence Sequence Accession Id"
+            "Sequence Sequence Accession Id"
           )
         })
 

cypress/integration/draft.spec.js

@@ -23,7 +23,7 @@ describe("Draft operations", function () {
     cy.get("button[type=button]").contains("Save as Draft").click()
     cy.get("div[role=alert]", { timeout: 10000 }).contains("Draft saved with")
     cy.get("div[role=button]").contains("Choose from drafts").click()
-    cy.get("div[data-testid='existing']").find("li").should("have.length", 1)
+    cy.get("div[data-testid=Existing").find("li").should("have.length", 1)
 
     // Save another draft
     cy.get("div[role=button]").contains("Fill Form").click()
@@ -36,11 +36,11 @@ describe("Draft operations", function () {
     cy.get("div[role=button]").contains("Choose from drafts").click()
     cy.get("h2").contains("Would you like to save draft version of this form")
     cy.get("div[role=dialog]").contains("Save").click()
-    cy.get("div[data-testid='existing']").find("li").should("have.length", 2)
+    cy.get("div[data-testid='Existing']").find("li").should("have.length", 2)
 
     // Delete a draft
     cy.get("button[aria-label='Delete draft']").first().click()
-    cy.get("div[data-testid='existing']").find("li", { timeout: 10000 }).should("have.length", 1)
+    cy.get("div[data-testid='Existing']").find("li", { timeout: 60000 }).should("have.length", 1)
 
     // Continue draft
     // Clear
@@ -52,7 +52,7 @@ describe("Draft operations", function () {
     cy.get("input[name='descriptor.studyTitle']").type("New title")
     cy.get("input[name='descriptor.studyTitle']").should("have.value", "New title")
     cy.get("select[name='descriptor.studyType']").select("Metagenomics")
-    cy.get("button[type=button]").contains("Save as Draft").click()
+    cy.get("button[type=button]").contains("Update draft").click()
 
     // Create a new form and save as draft
     cy.get("button").contains("New form").click()
@@ -66,7 +66,7 @@ describe("Draft operations", function () {
 
     // Check that there are 2 drafts saved in "Choose from drafts"
     cy.get("div[role=button]").contains("Choose from drafts").click()
-    cy.get("div[data-testid='existing']").find("li").should("have.length", 2)
+    cy.get("div[data-testid='Existing']").find("li").should("have.length", 2)
 
     // Submit first form draft
     cy.get("button[aria-label='Continue draft']").first().click()
@@ -75,7 +75,7 @@ describe("Draft operations", function () {
 
     // Submit second form draft
     cy.get("div[role=button]").contains("Choose from drafts").click()
-    cy.get("div[data-testid='existing']").find("li").should("have.length", 1)
+    cy.get("div[data-testid='Existing']").find("li").should("have.length", 1)
     cy.get("button[aria-label='Continue draft']").first().click()
     cy.get("button[type=submit]").contains("Submit").click()
 

cypress/integration/home.spec.js

@@ -12,7 +12,6 @@ describe("Home e2e", function () {
     cy.contains("Your Published Submissions").should("be.visible")
 
     cy.get("ul.MuiList-root").eq(0).children().should("have.length.at.most", 5)
-    cy.get("ul.MuiList-root").eq(1).children().should("have.length.at.most", 5)
 
     // Create a new Unpublished folder
     cy.get("button").contains("Create Submission").click()
@@ -82,16 +81,6 @@ describe("Home e2e", function () {
     cy.contains("Your draft submissions")
       .should("be.visible")
       .then($el => $el.click())
-
-    // Close unpublished folders list
-    cy.get("div.MuiCardActions-root")
-      .contains("Close")
-      .should("be.visible")
-      .then($btn => $btn.click())
-
-    // Check Overview submissions page is shown
-    cy.contains("Your Draft Submissions").should("be.visible")
-    cy.contains("Your Published Submissions").should("be.visible")
   })
 
   it("create a published folder, navigate to see folder details, delete object inside folder, navigate back to Overview submissions", () => {
@@ -157,15 +146,5 @@ describe("Home e2e", function () {
     cy.contains("Your published submissions")
       .should("be.visible")
       .then($el => $el.click())
-
-    // Close published folders list
-    cy.get("div.MuiCardActions-root")
-      .contains("Close")
-      .should("be.visible")
-      .then($btn => $btn.click())
-
-    // Check Overview submissions page is shown
-    cy.contains("Your Draft Submissions").should("be.visible")
-    cy.contains("Your Published Submissions").should("be.visible")
   })
 })