Skip to content

Implémente un import par étapes avec rapports d'erreur

Sylvain Boulade requested to merge add-import-steps into main

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:

  1. 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"
  2. 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
  3. Utiliser l'adresse du navigateur pour les étapes, ça permettrait de faire précédent / suivant via le clavier / la souris.
  4. 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.

Démo

import_iteration_1

Edited by Sylvain Boulade

Merge request reports