[Tech] Migre le Frontend de CRA vers Vite #1150

ivangabriele · 2024-01-25T08:19:03Z

Taches effectuées

Migration des imports SVG en tant que composants pour les adapter à Vite.
Séparation des envs Frontend des autres via un fichier /frontend/.env.example
(⚠️ qu'il faut maintenant copier localement dans un /frontend/.env).
Injection des variables d'environnement Frontend au runtime (et non au buildtime) via import-meta-env, comme sur MonitorFish. Voir l'ADR correspondant.
Création d'un utilitaire isPuppeteer() pour différencier les conditions que l'on applique pour les tests Puppeteer de celles qu'on applique aux tests Cypress. Même principe qu'avec isCypress().
Traduction à la volée des instructions de contribution legacy et déplacement vers le fichier CONTRIBUTING.md.
Début d'écriture des instructions de contribution mises à jour dans ce même fichier, en anglais, pour faciliter le partage éventuel avec d'autres équipes de l'UE.
Remplacement de la commande npm run cypress:open par npm run test:e2e:open.
Petite refacto qui déplace les constantes de frontend/src/features/missions/MissionForm/sse.ts dans un fichier séparé pour éviter un import cycle.

Je me suis aussi permis de désactiver un des tests des points d'întérêt parce qu'on est à près de 10% de failure, il y a au moins 4 bugs notables connus sur cette feature et Adeline a prévu de la revoir entièrement.

Notes

GitGuardian râle pour une clé de dév qui était déjà présente mais qui a été déplacée dans le nouveau ficher fontend/.env.example.
Il y aura un soucis avec monitor-ui concernant cy.fill() lorsqu'on passera à une der versions Rsuite >5.45.0 qui casse la structure DOM des fields en assignant l'attribut id au wrapper (div) au lieu de le passer à l'input. Cet attribut est ciblé par attributs for des labels. Je ferai le fix.
Les tests e2e des missions sont localement instables à cause de clickOutside() manquants ou qui ne ferment pas correctement certains dropdowns. À investiguer ?

Review

Ca serait idéal si vous pouviez tester que tout fonctionne bien localement chez vous. Env est assez léger pour tourner sur Chrome en mode dev chez moi contrairement à Fish.
Je vous conseille de cloner cette branche sous un autre dossier car le switch entre CRA et Vite n'est pas fun d'une branche à l'autre.

⚠️ Derniers points à voir ensemble

Faire le tour des impications staging / prod concernant les variables d'environnement @louptheron @thoomasbro.
Il n'y a pas de FRONTEND_MISSION_FORM_AUTO_SAVE_ENABLED dans le docker compose de prod, c'est normal @louptheron ? Rien de problématique mais juste pour être sûr.

Related Pull Requests & Issues

Tests E2E (Cypress)

gitguardian · 2024-02-03T11:36:07Z

⚠️ GitGuardian has uncovered 1 secret following the scan of your pull request.

Please consider investigating the findings and remediating the incidents. Failure to do so may lead to compromising the associated services or software components.

🔎 Detected hardcoded secret in your pull request

GitGuardian id	GitGuardian status	Secret	Commit	Filename
9429425	Triggered	Generic Password	`07c4d6b`	infra/.env.example	View secret

🛠 Guidelines to remediate hardcoded secrets

Understand the implications of revoking this secret by investigating where it is used in your code.
Replace and store your secret safely. Learn here the best practices.
Revoke and rotate this secret.
If possible, rewrite git history. Rewriting git history is not a trivial act. You might completely break other contributing developers' workflow and you risk accidentally deleting legitimate data.

To avoid such incidents in the future consider

following these best practices for managing and storing secrets including API keys and other credentials
install secret detection on pre-commit to catch secret before it leaves your machine and ease remediation.

^{🦉 GitGuardian detects secrets in your source code to help developers and security teams secure the modern development process. You are seeing this because you or someone else with access to this repository has authorized GitGuardian to scan your pull request.

Our GitHub checks need improvements? Share your feedbacks!}

…r compose file

…cision" This reverts commit 1b3b1c6.

## Linked issues - MTES-MCT/monitorenv#1150 ---- - [ ] Tests E2E (Cypress)

thoomasbro

Well done !!! 👏

frontend/config/jest.config.js

frontend/src/features/missions/MissionForm/Schemas/index.ts

infra/docker/app/env.sh

thoomasbro · 2024-02-08T12:17:36Z

infra/docker/docker-compose.test.yml

+      - FRONTEND_GEOSERVER_NAMESPACE=monitorenv
+      - FRONTEND_GEOSERVER_REMOTE_URL=http://0.0.0.0:8081
+      - FRONTEND_MISSION_FORM_AUTO_SAVE_ENABLED=true
+      - FRONTEND_MISSION_FORM_AUTO_UPDATE=true


Est ce qu'on a encore besoin de ça, vu que c'est dans le .env.example? plutot d'avis de retirer.

Bien vu ! Pour le Docker de test je suis d'accord que ça ne sert pas à grand chose lorsque ce sont les mêmes valeurs.

thoomasbro · 2024-02-08T14:00:12Z

infra/docker/app/Dockerfile

 COPY --from=buildFront /tmp/infra/docker/app/env.sh /home/monitorenv/
+COPY --from=buildFront /tmp/frontend/.env.example /home/monitorenv/
+RUN cp /home/monitorenv/.env.example /home/monitorenv/.env


à quoi sert ce .env dans l'image du coup ? à passer des valeurs par défault ? ou est ce qu'il n'est jamais appelé?

Bien vu aussi ! Mais alors il faut q'uon fasse un choix : soit on passe toutes les envs par le docker-compose, soit on les passe en copiant le .env. Le plus propre et conventionnel étant le docker-compose à priori.

plutot partant pour docker compose aussi. Comme ça c'est très clair que le .envdu front sert uniquement en dev

…_ORIGIN

.github/workflows/cicd-app.yml

…n CI

ivangabriele force-pushed the ivan/migrate-from-CRA-to-Vite branch 7 times, most recently from ce994a0 to 94da0d9 Compare January 26, 2024 10:36

ivangabriele force-pushed the ivan/migrate-from-CRA-to-Vite branch 16 times, most recently from 1416295 to 8fd8a02 Compare February 3, 2024 11:36

ivangabriele force-pushed the ivan/migrate-from-CRA-to-Vite branch 6 times, most recently from 62c611c to 518d26d Compare February 4, 2024 08:28

ivangabriele added 10 commits February 5, 2024 14:59

Fix mission form validation rules within Puppeteer e2e tests

5a18aa9

Remove useless FRONTEND_ENV (was REACT_APP_ENV) env in app Dockerfile

800fa87

Disable flakiest e2e test (interest points) until redesign decision

6b16ee5

Add missing FRONTEND_SENTRY_DSN env var in prod docker compose file

f293311

Remove duplicated code in App.tsx

3f081a2

Update Makefile dev-run-front command following migration to Vite

30c62bb

Rename MissionForm env utils

4e3aa95

Add missing FRONTEND_MISSION_FORM_AUTO_SAVE_ENABLED env in prod docke…

b1dbea4

…r compose file

Revert "Disable flakiest e2e test (interest points) until redesign de…

4388c6f

…cision" This reverts commit 1b3b1c6.

Remove unused isPuppeteer() conditions in mission form schemas

e95e75b

ivangabriele force-pushed the ivan/migrate-from-CRA-to-Vite branch from 8d698ca to e95e75b Compare February 5, 2024 14:00

ivangabriele mentioned this pull request Feb 5, 2024

[Tech] Harmonise la config Vite avec celle de MonitorEnv MTES-MCT/monitorfish#2870

Merged

1 task

ivangabriele added a commit to MTES-MCT/monitorfish that referenced this pull request Feb 5, 2024

[Tech] Harmonise la config Vite avec celle de MonitorEnv (#2870)

1c42b03

## Linked issues - MTES-MCT/monitorenv#1150 ---- - [ ] Tests E2E (Cypress)

thoomasbro reviewed Feb 8, 2024

View reviewed changes

ivangabriele added 2 commits February 8, 2024 16:46

Remove useless codemirror in Jest transformIgnorePatterns

e143939

Rename FRONTEND_SENTRY_TRACING_ORIGINS env to FRONTEND_SENTRY_TRACING…

665588e

…_ORIGIN

ivangabriele force-pushed the ivan/migrate-from-CRA-to-Vite branch 4 times, most recently from 3aae79a to 0ef64ad Compare February 9, 2024 09:08

ivangabriele requested review from thoomasbro and louptheron February 9, 2024 09:09

Remove useless Frontend env injection during build in Dockerfile

a7d26f5

ivangabriele force-pushed the ivan/migrate-from-CRA-to-Vite branch from 0ef64ad to a7d26f5 Compare February 9, 2024 09:34

thoomasbro reviewed Feb 9, 2024

View reviewed changes

.github/workflows/cicd-app.yml Outdated Show resolved Hide resolved

Normalize FRONTEND_GOOGLEMAPS_API_KEY & FRONTEND_MAPBOX_KEY secrets i…

51b6649

…n CI

ivangabriele merged commit 48a63e5 into main Feb 9, 2024
18 of 19 checks passed

ivangabriele deleted the ivan/migrate-from-CRA-to-Vite branch February 9, 2024 14:00

ivangabriele added the tech. enhancement technical enhancement label Feb 10, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Tech] Migre le Frontend de CRA vers Vite #1150

[Tech] Migre le Frontend de CRA vers Vite #1150

ivangabriele commented Jan 25, 2024 •

edited

Loading

gitguardian bot commented Feb 3, 2024 •

edited

Loading

thoomasbro left a comment

thoomasbro Feb 8, 2024

ivangabriele Feb 8, 2024

thoomasbro Feb 8, 2024

ivangabriele Feb 8, 2024 •

edited

Loading

thoomasbro Feb 8, 2024

[Tech] Migre le Frontend de CRA vers Vite #1150

[Tech] Migre le Frontend de CRA vers Vite #1150

Conversation

ivangabriele commented Jan 25, 2024 • edited Loading

Taches effectuées

Notes

Review

⚠️ Derniers points à voir ensemble

Related Pull Requests & Issues

gitguardian bot commented Feb 3, 2024 • edited Loading

⚠️ GitGuardian has uncovered 1 secret following the scan of your pull request.

thoomasbro left a comment

Choose a reason for hiding this comment

thoomasbro Feb 8, 2024

Choose a reason for hiding this comment

ivangabriele Feb 8, 2024

Choose a reason for hiding this comment

thoomasbro Feb 8, 2024

Choose a reason for hiding this comment

ivangabriele Feb 8, 2024 • edited Loading

Choose a reason for hiding this comment

thoomasbro Feb 8, 2024

Choose a reason for hiding this comment

ivangabriele commented Jan 25, 2024 •

edited

Loading

gitguardian bot commented Feb 3, 2024 •

edited

Loading

ivangabriele Feb 8, 2024 •

edited

Loading