Refactor the app for individual users and admin view for management

.github/workflows/cypress.yml

@@ -16,7 +16,7 @@ jobs:
       - name: set up node
         uses: actions/setup-node@v3
         with:
-          node-version: '16'
+          node-version: '20'
 
       - name: Yarn Install and Cache
         uses: graasp/graasp-deploy/.github/actions/yarn-install-and-cache@v1

.github/workflows/deploy-dev.yml

@@ -25,11 +25,12 @@ jobs:
       - name: Yarn build
         # Set environment variables required to perform the build. These are only available to this step
         env:
-          VITE_API_HOST: ${{ secrets.REACT_APP_API_HOST_DEV }}
+          VITE_API_HOST: ${{ vars.API_HOST }}
           VITE_GRAASP_APP_KEY: ${{ secrets.APP_KEY }}
-          VITE_SENTRY_ENV: development
+          VITE_SENTRY_ENV: ${{ vars.SENTRY_ENV }}
           VITE_SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
           VITE_VERSION: ${{ github.sha }}
+          VITE_WS_HOST: ${{ vars.WS_HOST }}
           # add any env variable needed by your app here
         run: yarn build
         shell: bash
@@ -39,10 +40,10 @@ jobs:
         with:
           # Replace input build-folder or version if needed
           build-folder: 'build'
-          graasp-app-id: ${{ secrets.APP_KEY }}
+          graasp-app-id: ${{ secrets.APP_ID }}
           version: 'latest'
           aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID_DEV }}
           aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY_DEV }}
-          aws-region: ${{ secrets.APPS_AWS_REGION }}
+          aws-region: ${{ vars.APPS_AWS_REGION_DEV }}
           aws-s3-bucket-name: ${{ secrets.AWS_S3_BUCKET_NAME_APPS_DEV }}
           cloudfront-distribution-id: ${{ secrets.CLOUDFRONT_DISTRIBUTION_APPS_DEV }}

.github/workflows/deploy-prod.yml

@@ -1,4 +1,4 @@
-name: Deploy to staging environment
+name: Deploy to production environment
 
 # Controls when the action will run
 on:
@@ -23,11 +23,12 @@ jobs:
       - name: Yarn build
         # Set environment variables required to perform the build. These are only available to this step
         env:
-          VITE_API_HOST: ${{ secrets.REACT_APP_API_HOST_PROD }}
+          VITE_API_HOST: ${{ vars.API_HOST }}
           VITE_GRAASP_APP_KEY: ${{ secrets.APP_KEY }}
-          VITE_SENTRY_ENV: production
+          VITE_SENTRY_ENV: ${{ vars.SENTRY_ENV }}
           VITE_SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
           VITE_VERSION: ${{ github.event.client_payload.tag }}
+          VITE_WS_HOST: ${{ vars.WS_HOST }}
           # add any env variable needed by your app here
         run: yarn build
         shell: bash
@@ -37,10 +38,10 @@ jobs:
         with:
           # Replace input build-folder or version if needed
           build-folder: 'build'
-          graasp-app-id: ${{ secrets.APP_KEY }}
+          graasp-app-id: ${{ secrets.APP_ID }}
           version: 'latest'
           aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID_PROD }}
           aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY_PROD }}
-          aws-region: ${{ secrets.APPS_AWS_REGION }}
+          aws-region: ${{ vars.APPS_AWS_REGION_PROD }}
           aws-s3-bucket-name: ${{ secrets.AWS_S3_BUCKET_NAME_APPS_PROD }}
           cloudfront-distribution-id: ${{ secrets.CLOUDFRONT_DISTRIBUTION_APPS_PROD }}

.github/workflows/deploy-stage.yml

@@ -8,7 +8,7 @@ on:
 
 jobs:
   deploy-app:
-    name: Deploy to dev
+    name: Deploy to staging
     runs-on: ubuntu-latest
     environment: staging
     steps:
@@ -23,11 +23,12 @@ jobs:
       - name: Yarn build
         # Set environment variables required to perform the build. These are only available to this step
         env:
-          VITE_API_HOST: ${{ secrets.REACT_APP_API_HOST_STAGE }}
+          VITE_API_HOST: ${{ vars.API_HOST }}
           VITE_GRAASP_APP_KEY: ${{ secrets.APP_KEY }}
-          VITE_SENTRY_ENV: staging
+          VITE_SENTRY_ENV: ${{ vars.SENTRY_ENV }}
           VITE_SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
           VITE_VERSION: ${{ github.event.client_payload.tag }}
+          VITE_WS_HOST: ${{ vars.WS_HOST }}
           # add any env variable needed by your app here
         run: yarn build
         shell: bash
@@ -37,10 +38,10 @@ jobs:
         with:
           # Replace input build-folder or version if needed
           build-folder: 'build'
-          graasp-app-id: ${{ secrets.APP_KEY }}
+          graasp-app-id: ${{ secrets.APP_ID }}
           version: 'latest'
           aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID_STAGE }}
           aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY_STAGE }}
-          aws-region: ${{ secrets.APPS_AWS_REGION }}
+          aws-region: ${{ vars.APPS_AWS_REGION_STAGE }}
           aws-s3-bucket-name: ${{ secrets.AWS_S3_BUCKET_NAME_APPS_STAGE }}
           cloudfront-distribution-id: ${{ secrets.CLOUDFRONT_DISTRIBUTION_APPS_STAGE }}

.yarnrc.yml

@@ -1,7 +1,7 @@
-nodeLinker: node-modules
+compressionLevel: mixed
+
+enableGlobalCache: false
 
-plugins:
-  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
-    spec: '@yarnpkg/plugin-interactive-tools'
+nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-3.6.1.cjs
+yarnPath: .yarn/releases/yarn-4.0.1.cjs

README.md

@@ -1,34 +1,46 @@
 # Graasp App Excalidraw
 
-This repository hosts the code for Excalidraw's integration into a Graasp application.
-This app allows the user to use 2D geometric primitives, free draw and style their design using the offered features.
-It is written in TypeScript and uses React.js to import the open-source main component : Excalidraw.
-## Getting Sarted
-### Environment Variables
+This repository hosts the code for Excalidraw's integration into the Graasp ecosystem.
 
-To start developing locally, you should create a `.env.local` file in your root folder with the
-following content:
+Excalidraw is an open-source web drawing application. Find out more on the [Excalidraw website]()!
+
+## Awesome! How does it work?
+
+## Development
+
+### Local setup
+
+To work with Graasp apps locally, follow the official Graasp documentation.
+
+To get started with this app, clone this repo. You will need to add a dotenv file `.env.development`.
 
 ```dotenv
-REACT_APP_APP_ID=
-REACT_APP_GRAASP_DOMAIN=localhost
-REACT_APP_HOST=
-REACT_APP_VERSION=
-REACT_APP_BASE=
+
+GRAASP_DEVELOPER_ID=6505fd8e-9762-49a3-9906-4cbabbb81130 # Your developer UUID in your local Graasp instance.
+
+VITE_PORT=3335 # The port on which you would like to serve the app.
+VITE_API_HOST=localhost # The hostname (localhost for local dev)
+VITE_MOCK_API=false # Mock the API by default (overriden by yarn dev:mock)
+VITE_GRAASP_APP_KEY=82582612-92aa-408f-bfe9-0d202414a3b6 # The app key in your local Graasp instance.
+VITE_VERSION=latest # The version of your app (not important for development)
+```
+
+Install the dependencies by running [yarn]():
+
+```bash
+yarn
 ```
 
-### Installation
-If used locally, the needed dependencies can be installed with 
+And finally start the app. To serve it within your local Graasp instance:
 
 ```bash
-yarn 
+yarn dev
 ```
-### Running the app
 
-Run the app locally with:
+And to serve it with a mocked API (see [the documentation]()):
 
 ```bash
-yarn start
+yarn dev:mock
 ```
 
 ## How to use
@@ -37,6 +49,7 @@ To use this app, you can either run it locally which will give you direct access
 Excalidraw's documentation can be found [here](https://github.com/excalidraw/excalidraw#documentation), and a description of the tools is available on canvas by clicking on the ? button.
 
 ## Example
+
 Below you can find a screenshot of the app inside the Graasp Builder view.
 
 ![image](AppGraasp.png)
@@ -45,6 +58,6 @@ Below you can find a screenshot of the app inside the Graasp Builder view.
 
 For future versions, here is a list of features to be implemented and points to be optimized:
 
-* Enabling collaboration and saving state (tool selected, etc...)
-* Creating admin view allowing access to a table of submissions linked to the corresponding Excalidraw canvas
-* Choosing method to handle changes so that the list of current elements is checked for equality before treating the change.
+- Enabling collaboration and saving state (tool selected, etc...)
+- Creating admin view allowing access to a table of submissions linked to the corresponding Excalidraw canvas
+- Choosing method to handle changes so that the list of current elements is checked for equality before treating the change.

package.json

@@ -15,37 +15,38 @@
       "email": "[email protected]"
     }
   ],
-  "homepage": ".",
+  "homepage": "https://github.com/graasp/graasp-app-excalidraw/blob/main/README.md",
   "dependencies": {
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
-    "@excalidraw/excalidraw": "^0.15.2",
-    "@graasp/apps-query-client": "^2.0.1",
-    "@graasp/sdk": "1.1.3",
-    "@graasp/ui": "^3.2.4",
-    "@mui/icons-material": "5.14.1",
-    "@mui/lab": "5.0.0-alpha.137",
-    "@mui/material": "5.14.1",
-    "@sentry/react": "7.59.3",
-    "@sentry/tracing": "7.59.3",
-    "@tanstack/react-query": "^4.29.25",
-    "@tanstack/react-query-devtools": "^4.29.25",
-    "@testing-library/react": "13.4.0",
-    "@types/lodash.debounce": "4.0.7",
-    "i18next": "22.5.1",
+    "@excalidraw/excalidraw": "^0.16.1",
+    "@graasp/apps-query-client": "^2.0.4",
+    "@graasp/sdk": "1.2.1",
+    "@graasp/ui": "^3.7.0",
+    "@mui/icons-material": "5.14.16",
+    "@mui/lab": "5.0.0-alpha.151",
+    "@mui/material": "5.14.16",
+    "@sentry/react": "7.77.0",
+    "@sentry/tracing": "7.77.0",
+    "@tanstack/react-query": "^4.36.1",
+    "@tanstack/react-query-devtools": "^4.36.1",
+    "file-saver": "^2.0.5",
+    "i18next": "23.6.0",
     "immutable": "^4.3.1",
+    "jszip": "^3.10.1",
+    "lodash.clonedeep": "^4.5.0",
     "lodash.debounce": "4.0.8",
     "lodash.isequal": "~4.5.0",
     "lodash.isobject": "3.0.2",
     "lodash.isstring": "4.0.1",
     "qs": "6.11.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-i18next": "12.3.1",
-    "react-router-dom": "^6.14.2",
+    "react-i18next": "13.3.1",
+    "react-router-dom": "^6.18.0",
     "react-toastify": "9.1.3",
-    "typescript": "4.9.5",
-    "uuid": "9.0.0"
+    "typescript": "5.2.2",
+    "uuid": "9.0.1"
   },
   "scripts": {
     "dev:mock": "VITE_MOCK_API=true && yarn vite",
@@ -68,44 +69,48 @@
     "cov:report": "open ./coverage/lcov-report/index.html"
   },
   "devDependencies": {
-    "@commitlint/cli": "17.6.7",
-    "@commitlint/config-conventional": "17.6.7",
+    "@commitlint/cli": "18.2.0",
+    "@commitlint/config-conventional": "18.1.0",
     "@cypress/code-coverage": "3.11.0",
     "@cypress/instrument-cra": "1.4.0",
-    "@trivago/prettier-plugin-sort-imports": "4.2.0",
-    "@types/i18n": "0.13.6",
-    "@types/lodash.isequal": "~4.5.6",
-    "@types/lodash.isobject": "3.0.7",
-    "@types/lodash.isstring": "4.0.7",
-    "@types/node": "18.16.19",
-    "@types/react": "18.2.15",
-    "@types/react-dom": "18.2.7",
-    "@types/uuid": "9.0.2",
-    "@typescript-eslint/eslint-plugin": "5.62.0",
-    "@typescript-eslint/parser": "5.62.0",
+    "@trivago/prettier-plugin-sort-imports": "4.2.1",
+    "@types/file-saver": "^2.0.6",
+    "@types/i18n": "0.13.8",
+    "@types/lodash.clonedeep": "^4",
+    "@types/lodash.debounce": "4.0.8",
+    "@types/lodash.isequal": "~4.5.7",
+    "@types/lodash.isobject": "3.0.8",
+    "@types/lodash.isstring": "4.0.8",
+    "@types/node": "20.8.10",
+    "@types/react": "18.2.34",
+    "@types/react-dom": "18.2.14",
+    "@types/uuid": "9.0.6",
+    "@typescript-eslint/eslint-plugin": "6.9.1",
+    "@typescript-eslint/parser": "6.9.1",
     "@vitejs/plugin-basic-ssl": "^1.0.1",
-    "@vitejs/plugin-react": "^4.0.3",
-    "concurrently": "8.2.0",
+    "@vitejs/plugin-react": "^4.1.1",
+    "concurrently": "8.2.2",
     "cypress": "12.17.2",
     "env-cmd": "10.1.0",
-    "eslint": "8.45.0",
+    "eslint": "8.52.0",
     "eslint-config-airbnb": "19.0.4",
-    "eslint-config-prettier": "8.8.0",
+    "eslint-config-prettier": "8.10.0",
     "eslint-config-react-app": "7.0.1",
-    "eslint-import-resolver-typescript": "3.5.5",
-    "eslint-plugin-cypress": "2.13.3",
-    "eslint-plugin-import": "2.27.5",
-    "eslint-plugin-jsx-a11y": "6.7.1",
+    "eslint-import-resolver-typescript": "3.6.1",
+    "eslint-plugin-cypress": "2.15.1",
+    "eslint-plugin-import": "2.29.0",
+    "eslint-plugin-jsx-a11y": "6.8.0",
     "eslint-plugin-prettier": "4.2.1",
-    "eslint-plugin-react": "7.33.0",
+    "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
     "husky": "8.0.3",
     "nyc": "15.1.0",
     "prettier": "2.8.8",
     "pretty-quick": "3.1.3",
-    "vite": "^4.4.6",
-    "vite-plugin-checker": "^0.6.1",
-    "vite-plugin-istanbul": "^4.1.0",
+    "stylis-plugin-rtl": "^2.1.1",
+    "vite": "^4.5.0",
+    "vite-plugin-checker": "^0.6.2",
+    "vite-plugin-istanbul": "^5.0.0",
     "wait-on": "7.0.1"
   },
   "browserslist": {
@@ -134,5 +139,5 @@
   "resolutions": {
     "immutable": "4.3.1"
   },
-  "packageManager": "yarn@3.6.1"
+  "packageManager": "yarn@4.0.1"
 }

src/@types/i18next.d.ts

@@ -0,0 +1,8 @@
+import { defaultNS, resources } from '../config/i18n';
+
+declare module 'i18next' {
+  interface CustomTypeOptions {
+    defaultNS: typeof defaultNS;
+    resources: (typeof resources)['en'];
+  }
+}