feat: move to vitejs (#733)

fix: update workflow names and content
fix: use preview instead of dev server
fix: add env for cypress to get the api host
fix: increase cypress build step node memory
chore: remove cypress plugin file

.eslintrc

@@ -1,17 +1,15 @@
 {
-  "root": true,
   "extends": [
-    "react-app",
     "airbnb",
+    "plugin:import/typescript", // this is needed because airbnb uses eslint-plugin-import
     "prettier",
-    "eslint:recommended",
-    "plugin:react/recommended",
-    "plugin:@typescript-eslint/recommended"
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended",
+    "eslint:recommended"
   ],
   "plugins": [
-    "import",
-    "jsx-a11y",
-    "@typescript-eslint"
+    "@typescript-eslint",
+    "react-hooks"
   ],
   "env": {
     "browser": true,
@@ -21,22 +19,33 @@
   },
   "globals": {
     "cy": true,
-    "Cypress": true
+    "Cypress": true,
+    "JSX": "readonly"
   },
   "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
   "rules": {
+    "import/order": "off",
+    "react/function-component-definition": [
+      2,
+      {
+        "namedComponents": "arrow-function"
+      }
+    ],
+    "react/jsx-uses-react": "off",
+    "react/react-in-jsx-scope": "off",
     // remove when possible
     "@typescript-eslint/no-explicit-any": "off",
     // disable the rule for all files
     "no-restricted-syntax": "off",
     // disable the rule for all files
     "@typescript-eslint/explicit-module-boundary-types": "off",
-    "react/function-component-definition": [
-      "error",
-      {
-        "namedComponents": "arrow-function"
-      }
-    ],
     "jsx-a11y/anchor-is-valid": [
       "error",
       {
@@ -83,7 +92,6 @@
       "error",
       "never"
     ],
-    "react/react-in-jsx-scope": "off",
     "no-console": [
       1,
       {
@@ -108,7 +116,22 @@
     "no-shadow": "off",
     "@typescript-eslint/no-shadow": [
       "error"
-    ]
+    ],
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        "argsIgnorePattern": "^_",
+        "varsIgnorePattern": "^_",
+        "caughtErrorsIgnorePattern": "^_"
+      }
+    ],
+    "import/no-extraneous-dependencies": [
+      "error",
+      {
+        "devDependencies": true
+      }
+    ],
   },
   "overrides": [
     {

.github/workflows/cypress.yml

@@ -6,25 +6,74 @@ on:
   push:
     branches-ignore:
       - main
-      - master
 
-# This workflow is made up of one job that calls the reusable workflow in graasp-deploy
+concurrency:
+  group: ${{ github.workflow }}-${{ github.head_ref || github.ref }}
+  cancel-in-progress: false
+
 jobs:
-  graasp-deploy-cypress-workflow:
-    # only cancel in-progress jobs or runs for the current workflow
-    concurrency:
-      group: ${{ github.workflow }}-${{ github.head_ref || github.ref }}
-      cancel-in-progress: true
-
-    # Replace with repository name
-    name: Cypress caller template
-    # 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/cypress.yml@v1
-    with:
-      # Test values
-      node-env-test: test
-      hidden-item-tag-id-test: 12345678-1234-1234-1234-123456789012
-    # Insert required secrets based on repository with the following format: ${{ secrets.SECRET_NAME }}
-    secrets:
-      api-host-test: ${{ secrets.REACT_APP_API_HOST }}
+  cypress:
+    name: Cypress
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v3
+
+      - name: Yarn Install and Cache
+        uses: graasp/graasp-deploy/.github/actions/yarn-install-and-cache@v1
+        with:
+          cypress: true
+
+      # type check
+      - name: Type-check code
+        run: tsc --noEmit
+
+      - name: Build App
+        run: NODE_OPTIONS=--max-old-space-size=3072 yarn build:test
+        shell: bash
+        env:
+          VITE_PORT: ${{ vars.VITE_PORT }}
+          VITE_VERSION: ${{ vars.VITE_VERSION }}
+          VITE_GRAASP_DOMAIN: ${{ vars.VITE_GRAASP_DOMAIN }}
+          VITE_GRAASP_API_HOST: ${{ vars.VITE_GRAASP_API_HOST }}
+          VITE_GRAASP_AUTH_HOST: ${{ vars.VITE_GRAASP_AUTH_HOST }}
+          VITE_GRAASP_PLAYER_HOST: ${{ vars.VITE_GRAASP_PLAYER_HOST }}
+          VITE_GRAASP_LIBRARY_HOST: ${{ vars.VITE_GRAASP_LIBRARY_HOST }}
+          VITE_GRAASP_ANALYZER_HOST: ${{ vars.VITE_GRAASP_ANALYZER_HOST }}
+          VITE_SHOW_NOTIFICATIONS: ${{ vars.VITE_SHOW_NOTIFICATIONS }}
+
+
+      #  use the Cypress GitHub Action to run Cypress tests within the chrome browser
+      - name: Cypress run
+        uses: cypress-io/github-action@v5
+        with:
+          install: false
+          # we launch the app in preview mode to avoid issues with hmr websockets from vite polluting the mocks
+          start: yarn preview:test
+          browser: chrome
+          quiet: true
+          config-file: cypress.config.ts
+          cache-key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+        env:
+          VITE_PORT: ${{ vars.VITE_PORT }}
+          VITE_VERSION: ${{ vars.VITE_VERSION }}
+          VITE_GRAASP_DOMAIN: ${{ vars.VITE_GRAASP_DOMAIN }}
+          VITE_GRAASP_API_HOST: ${{ vars.VITE_GRAASP_API_HOST }}
+          VITE_GRAASP_AUTH_HOST: ${{ vars.VITE_GRAASP_AUTH_HOST }}
+          VITE_GRAASP_PLAYER_HOST: ${{ vars.VITE_GRAASP_PLAYER_HOST }}
+          VITE_GRAASP_LIBRARY_HOST: ${{ vars.VITE_GRAASP_LIBRARY_HOST }}
+          VITE_GRAASP_ANALYZER_HOST: ${{ vars.VITE_GRAASP_ANALYZER_HOST }}
+          VITE_SHOW_NOTIFICATIONS: ${{ vars.VITE_SHOW_NOTIFICATIONS }}
+
+      # after the test run completes
+      # store any screenshots
+      # NOTE: screenshots will be generated only if E2E test failed
+      # thus we store screenshots only on failures
+      - uses: actions/upload-artifact@v3
+        if: failure()
+        with:
+          name: cypress-screenshots
+          path: cypress/screenshots
+
+      - name: coverage report
+        run: npx nyc report --reporter=text-summary

.github/workflows/deploy-dev.yml

@@ -0,0 +1,52 @@
+name: Deploy to development environment
+
+# Control when the action will run
+on:
+  # Triggers the workflow on push events only for the main branch
+  push:
+    branches:
+      - main
+
+  # Allows to run the workflow manually from the Actions tab
+  workflow_dispatch:
+
+jobs:
+  deploy-app:
+    name: Deploy to dev
+    runs-on: ubuntu-latest
+    environment: development
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Yarn install and Cache dependencies
+        uses: graasp/graasp-deploy/.github/actions/yarn-install-and-cache@v1
+
+      - name: Yarn build
+        # Set environment variables required to perform the build. These are only available to this step
+        env:
+          VITE_VERSION: ${{ github.sha }}
+          VITE_GRAASP_DOMAIN: ${{ vars.VITE_GRAASP_DOMAIN }}
+          VITE_GRAASP_API_HOST: ${{ vars.VITE_GRAASP_API_HOST }}
+          VITE_GRAASP_AUTH_HOST: ${{ vars.VITE_GRAASP_AUTH_HOST }}
+          VITE_GRAASP_PLAYER_HOST: ${{ vars.VITE_GRAASP_PLAYER_HOST }}
+          VITE_GRAASP_LIBRARY_HOST: ${{ vars.VITE_GRAASP_LIBRARY_HOST }}
+          VITE_GRAASP_ANALYZER_HOST: ${{ vars.VITE_GRAASP_ANALYZER_HOST }}
+          VITE_H5P_INTEGRATION_URL: ${{ secrets.VITE_H5P_INTEGRATION_URL }}
+          VITE_SENTRY_ENV: ${{ vars.VITE_SENTRY_ENV }}
+          VITE_SENTRY_DSN: ${{ secrets.VITE_SENTRY_DSN }}
+          # VITE_GA_MEASUREMENT_ID: ${{ secrets.VITE_GA_MEASUREMENT_ID }}
+          VITE_SHOW_NOTIFICATIONS: ${{ vars.VITE_SHOW_NOTIFICATIONS }}
+        run: yarn build
+        shell: bash
+
+      - name: Deploy
+        uses: graasp/graasp-deploy/.github/actions/deploy-s3@v1
+        # Replace input build-folder or version if needed
+        with:
+          build-folder: 'build'
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID_DEV }}
+          aws-region: ${{ secrets.AWS_REGION_DEV }}
+          aws-s3-bucket-name: ${{ secrets.AWS_S3_BUCKET_NAME_GRAASP_COMPOSE_DEV }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY_DEV }}
+          cloudfront-distribution-id: ${{ secrets.CLOUDFRONT_DISTRIBUTION_GRAASP_COMPOSE_DEV }}