Refactor: MUI5, Typescript

.eslintrc

@@ -1,37 +1,91 @@
 {
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
   "extends": [
+    "airbnb",
+    "plugin:cypress/recommended",
+    "plugin:@typescript-eslint/recommended",
     "prettier",
-    "eslint:recommended",
     "plugin:react/recommended"
   ],
-  "plugins": [
-    "react"
-  ],
-  "env": {
-    "browser": true,
-    "node": true,
-    "mocha": true,
-    "jest": true
-  },
   "globals": {
     "cy": true,
     "Cypress": true
   },
-  "parser": "@babel/eslint-parser",
+  "parser": "@typescript-eslint/parser",
   "parserOptions": {
-    "requireConfigFile": false,
-    "babelOptions": {
-       "presets": ["@babel/preset-react"]
-    }
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": "latest",
+    "sourceType": "module"
   },
+  "plugins": ["react", "react-hooks", "@typescript-eslint", "prettier"],
   "rules": {
+    "react/no-array-index-key": "off",
+    "react/jsx-props-no-spreading": "off",
+    "react/destructuring-assignment": "off",
+    "react/require-default-props": "off",
+    "react/react-in-jsx-scope": "off",
+    "@typescript-eslint/ban-ts-comment": "off",
+    "import/no-import-module-exports": "off",
+    "import/no-extraneous-dependencies": [
+      "error",
+      {
+        "devDependencies": true
+      }
+    ],
+    "import/prefer-default-export": "off",
+    "prettier/prettier": "error",
+    "import/extensions": [
+      "error",
+      "ignorePackages",
+      {
+        "ts": "never",
+        "js": "never",
+        "tsx": "never"
+      }
+    ],
+    "@typescript-eslint/explicit-function-return-type": [
+      "error",
+      {
+        "allowExpressions": true
+      }
+    ],
+    "@typescript-eslint/no-var-requires": "off",
+    "global-require": "off",
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
+    "comma-dangle": "off",
+    "@typescript-eslint/comma-dangle": "off",
+    "react/jsx-one-expression-per-line": "off",
     "react/jsx-filename-extension": [
-      1,
+      "warn",
       {
-        "extensions": [".js", ".jsx"]
+        "extensions": [".tsx"]
       }
     ],
-    "react/function-component-definition":  [2, { "namedComponents": "arrow-function" }],
-    "import/no-named-as-default": 0
+    "react/function-component-definition": [
+      2,
+      {
+        "namedComponents": "arrow-function"
+      }
+    ],
+    // eslint rule reports false error
+    "no-shadow": "off",
+    "@typescript-eslint/no-shadow": ["error"]
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    },
+    "import/resolver": {
+      "typescript": {}
+    },
+    "import/parsers": {
+      "@typescript-eslint/parser": [".ts", ".tsx"]
+    }
   }
 }

.github/workflows/cdelivery-s3-apps-caller.yml

@@ -13,7 +13,7 @@ jobs:
     name: Graasp app file-drop
     # Replace 'main' with the hash of a commit, so it points to an specific version of the reusable workflow that is used
     # Reference reusable workflow file. Using the commit SHA is the safest for stability and security
-    uses: graasp/graasp-deploy/.github/workflows/cdelivery-s3-apps.yml@a5e6f97c18c86d97e3e8f15b27e4d898746327cf
+    uses: graasp/graasp-deploy/.github/workflows/cdelivery-s3-apps.yml@v1
     # Replace input build-folder or version if needed
     with:
       build-folder: 'build'
@@ -26,5 +26,6 @@ jobs:
       aws-region: ${{ secrets.APPS_AWS_REGION }}
       aws-s3-bucket-name: ${{ secrets.AWS_S3_BUCKET_NAME_APPS_STAGE }}
       cloudfront-distribution-id: ${{ secrets.CLOUDFRONT_DISTRIBUTION_APPS_STAGE }}
+      # TODO: Change to app key when https://github.com/graasp/graasp-apps-query-client/pull/45 is deployed
       app-id: ${{ secrets.APP_ID }}
-      graasp-domain: ${{ secrets.STAGE_GRAASP_DOMAIN }}
+      graasp-domain: ${{ secrets.REACT_APP_GRAASP_DOMAIN_STAGE }}

.github/workflows/cdeployment-s3-apps-caller.yml

@@ -13,7 +13,7 @@ jobs:
     name: Graasp app file-drop
     # Replace 'main' with the hash of a commit, so it points to an specific version of the reusable workflow that is used
     # Reference reusable workflow file. Using the commit SHA is the safest for stability and security
-    uses: graasp/graasp-deploy/.github/workflows/cdeployment-s3-apps.yml@7b5dd84304458c3c5ab03cbbde059670f77b1687
+    uses: graasp/graasp-deploy/.github/workflows/cdeployment-s3-apps.yml@v1
     # Replace input build-folder or version if needed.
     with:
       build-folder: 'build'
@@ -26,5 +26,6 @@ jobs:
       aws-region: ${{ secrets.APPS_AWS_REGION }}
       aws-s3-bucket-name: ${{ secrets.AWS_S3_BUCKET_NAME_APPS_PROD }}
       cloudfront-distribution-id: ${{ secrets.CLOUDFRONT_DISTRIBUTION_APPS_PROD }}
+      # TODO: Change to app key when https://github.com/graasp/graasp-apps-query-client/pull/45 is deployed
       app-id: ${{ secrets.APP_ID }}
       graasp-domain: ${{ secrets.PROD_GRAASP_DOMAIN }}

.github/workflows/cintegration-s3-apps-caller.yml

@@ -5,8 +5,8 @@ on:
   # Triggers the workflow on push events only for the main branch
   push:
     branches:
-    - main
-    - master
+      - main
+      - master
 
   # Allows to run the workflow manually from the Actions tab
   workflow_dispatch:
@@ -15,7 +15,7 @@ on:
 jobs:
   graasp-deploy-s3-apps-workflow:
     name: Graasp app file-drop
-    uses: graasp/graasp-deploy/.github/workflows/cintegration-s3-apps.yml@7b5dd84304458c3c5ab03cbbde059670f77b1687
+    uses: graasp/graasp-deploy/.github/workflows/cintegration-s3-apps.yml@78c70b9b9e3b8c66b279a5d9378b2fcc6fa680fe
     with:
       build-folder: 'build'
       version: 'latest'
@@ -25,5 +25,6 @@ jobs:
       aws-region: ${{ secrets.APPS_AWS_REGION }}
       aws-s3-bucket-name: ${{ secrets.AWS_S3_BUCKET_NAME_APPS_DEV }}
       cloudfront-distribution-id: ${{ secrets.CLOUDFRONT_DISTRIBUTION_APPS_DEV }}
+      # TODO: Change to app key when https://github.com/graasp/graasp-apps-query-client/pull/45 is deployed
       app-id: ${{ secrets.APP_ID }}
       graasp-domain: ${{ secrets.DEV_GRAASP_DOMAIN }}

.github/workflows/cypress.yml

@@ -1,56 +1,89 @@
 name: cypress tests
-on: [push]
+
+on:
+  push:
+    branches-ignore:
+      - 'release-please-**'
+
 jobs:
   cypress-run:
     runs-on: ubuntu-latest
     steps:
       - name: checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       - name: set up node
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
-          node-version: '14'
-          cache: 'yarn'
+          node-version: '16'
 
-      - name: install yarn
-        # avoid checksum errors with github packages
-        run: YARN_CHECKSUM_BEHAVIOR=update yarn
+      - name: Yarn Install and Cache
+        uses: graasp/graasp-deploy/.github/actions/yarn-install-and-cache@v1
+        with:
+          cypress: true
 
       - name: cypress run
-        uses: cypress-io/github-action@v2
+        uses: cypress-io/github-action@v4
         env:
+          REACT_APP_API_HOST: http://localhost:3636
           REACT_APP_GRAASP_DOMAIN: localhost
           REACT_APP_GRAASP_APP_ID: id-1234567890
           REACT_APP_MOCK_API: true
           NODE_ENV: test
         with:
           install: false
+          build: yarn build
           config: baseUrl=http://localhost:3000
           start: yarn start:ci
           wait-on: 'http://localhost:3000'
           wait-on-timeout: 180
           browser: chrome
-          headless: true
           quiet: true
+          # point to new cypress@10 config file
+          config-file: cypress.config.ts
+
+      # component tests are not running ok in the CI
+      # - name: Run Component tests 🧪
+      #   uses: cypress-io/github-action@v4
+      #   with:
+      #     # we have already installed everything
+      #     install: false
+      #     # to run component tests we need to use "component: true"
+      #     component: true
 
       # after the test run completes
       # store videos and any screenshots
       # NOTE: screenshots will be generated only if E2E test failed
       # thus we store screenshots only on failures
       # Alternative: create and commit an empty cypress/screenshots folder
       # to always have something to upload
-      - uses: actions/upload-artifact@v2
+      - uses: actions/upload-artifact@v3
         if: failure()
         with:
           name: cypress-screenshots
           path: cypress/screenshots
-      # Test run video was always captured, so this action uses "always()" condition
-      - uses: actions/upload-artifact@v2
-        if: always()
+
+      - uses: actions/upload-artifact@v3
+        if: failure()
         with:
           name: cypress-videos
           path: cypress/videos
 
       - name: coverage report
         run: npx nyc report --reporter=text-summary
+
+      - name: coverage commit status
+        run: |
+          total=$(cat coverage/coverage-summary.json | jq .total.lines.pct)
+          echo Total coverage ${total}
+          curl -S -s \
+            -X POST \
+            -H "Accept: application/vnd.github+json" \
+            -H "Authorization: Bearer ${GITHUB_TOKEN}" \
+            https://api.github.com/repos/${REPO_PATH}/statuses/${COMMIT_SHA} \
+            -d "{\"state\":\"success\",\"target_url\":\"https://github.com/${REPO_PATH}/actions/runs/${RUN_ID}\",\"description\":\"${total}%\",\"context\":\"code-coverage\"}"
+        env:
+          GITHUB_TOKEN: ${{ github.token }}
+          REPO_PATH: ${{ github.repository }}
+          COMMIT_SHA: ${{ github.sha }}
+          RUN_ID: ${{ github.run_id }}

.github/workflows/release-please.yml

@@ -0,0 +1,48 @@
+# Automate releases of new app versions
+name: release-please
+
+on:
+  push:
+    branches:
+      - 'main'
+
+jobs:
+  release-please:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: google-github-actions/release-please-action@v3
+        id: release
+        with:
+          release-type: node
+          package-name: graasp-app-file-drop
+          changelog-types: '[{"type":"feat","section":"Features","hidden":false},{"type":"fix","section":"Bug Fixes","hidden":false},{"type":"docs","section":"Documentation","hidden":false},{"type":"test","section":"Tests","hidden":false}]'
+
+      - uses: actions/checkout@v3
+
+      # creates minor and major tags that follow the latest release
+      - name: Tag major and minor versions
+        uses: jacobsvante/tag-major-minor-action@v0.1
+        if: ${{ steps.release.outputs.release_created }}
+        with:
+          major: ${{ steps.release.outputs.major }}
+          minor: ${{ steps.release.outputs.minor }}
+
+      # put created tag in an env variable to be sent to the dispatch
+      - name: Set tag
+        if: ${{ steps.release.outputs.release_created }}
+        id: set-tag
+        run: |
+          REPOSITORY=$(echo '${{ github.repository }}')
+          TAG=$(echo '${{ steps.release.outputs.tag_name }}')
+          JSON=$(jq -c --null-input --arg repository "$REPOSITORY" --arg tag "$TAG" '{"repository": $repository, "tag": $tag}')
+          echo "json=$JSON" >> $GITHUB_OUTPUT
+
+      # Trigger an 'on: repository_dispatch' workflow to run in graasp-deploy repository
+      - name: Push tag to Graasp Deploy (Staging)
+        if: ${{ steps.release.outputs.release_created }}
+        uses: peter-evans/repository-dispatch@v2
+        with:
+          token: ${{ secrets.REPO_ACCESS_TOKEN }}
+          repository: graasp/graasp-deploy
+          event-type: update-staging-version
+          client-payload: ${{ steps.set-tag.outputs.json }}

.gitignore

@@ -28,21 +28,12 @@ yarn-error.log*
 # include encrypted environment variables
 !.env*.encrypted
 
-# cache
-.eslintcache
-
 # exclude keys
 *.aes
 
 # exclude coverage
 /coverage
 .nyc_output
-cypress/downloads
-cypress/videos
-cypress/screenshots
-
-# exclude local database
-db.json
 
 # yarn
 .yarn/*
@@ -51,3 +42,9 @@ db.json
 !.yarn/releases
 !.yarn/sdks
 !.yarn/versions
+
+# cypress
+cypress/screenshots
+cypress/videos
+
+.vscode

.husky/commit-msg

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-npx --no-install commitlint --edit "$1"
+yarn commitlint --edit ${1}

.husky/post-checkout

@@ -1,4 +1,8 @@
 #!/bin/sh
+
+# skip hook when in CI
+[ -n "$CI" ] && exit 0
+
 . "$(dirname "$0")/_/husky.sh"
 
 yarn install

.husky/post-commit

@@ -1,4 +1,8 @@
 #!/bin/sh
+
+# skip hook when in CI
+[ -n "$CI" ] && exit 0
+
 . "$(dirname "$0")/_/husky.sh"
 
 git status

.husky/pre-commit

@@ -1,4 +1,8 @@
 #!/bin/sh
+
+# skip hook when in CI
+[ -n "$CI" ] && exit 0
+
 . "$(dirname "$0")/_/husky.sh"
 
-yarn pre-commit
+yarn pretty-quick --staged && yarn lint && yarn test