Implémente un import par étapes avec rapports d'erreur
Contexte
Nous voulons faire évoluer notre interface d'import, et la première étape est de supporter un "flux de travail" basique par étape en donnant à l'utilisateur un retour en cas d'erreur ou de warning.
Nous avons convenu pour le moment de découper le flux en 3 étapes:
- Choix du fichier
- Vérification du fichier (via un import 'dry run')
- Upload réel du fichier
Ces étapes seront certainement amenées à évoluer.
Contenu
Pour la navigation nous utilisons le composant "Stepper" du DSFR.
Pour ce qui est des rapports d'erreurs j'ai fait au mieux avec ce que nous avons à dispo actuellement mais ça peut certainement être amélioré, je suis preneur de retours.
Certains partis pris:
- Lorsque nous avons plus de 4 lignes de logs pour un dataset, je mets ça dans un "Accordéon" pour que ça ne prenne pas trop de place sur la page. L'inconvéniant est que ces informations ne sautent pas aux yeux de l'utilisateur du coup.
- Je parse les messages d'erreurs / d'info "connus" pour pouvoir afficher des informations plus riches, notamment quand il y a un décalage au niveau des colonnes, ce sera à ajuster si on étend l'API avec des rapport d'erreurs plus détaillés.
- J'affiche à nouveau le rapport d'import après l'import réel du fichier, ça fait un peu double emploi avec le rapport au niveau du "dry run". A voir si on le conserve
Prochaines fonctionnalités
En vrac, les prochaines fonctionnalités que j'aimerais bien implémenter:
- Rajouter une possibilité de choisir le dataset (via le endpoint rajouté par @ronan), à la première étape, et aussi en cas d'erreur "dataset non reconnu"
- Distinguer les erreurs de "type de fichier non supporté" et "dataset non reconnu" -> A l'heure actuelle l'API ne fait pas de distinction. On pourrait limiter déjà les extensions de fichier sélectionnables dans l'input à la première étape
- Utiliser l'adresse du navigateur pour les étapes, ça permettrait de faire précédent / suivant via le clavier / la souris.
- Ajouter un header / footer DSFR
Test
Pour tester en local:
cd ui/
npm install
- éditer
.env.local
npm run dev
J'ai eu parfois des soucis avec les icones en dev local, si ça arrive, faire un npm run build
avant de refaire npm run dev
.