Skip to content

BDD-128 — Améliorer l'ergonomie du Workflow Editor (cohérence UI)

User story

En tant qu'administrateur, je veux une interface d'édition de workflow visuellement cohérente (barre d'outils, menu d'ajout de blocs, inspecteur, icônes du canvas), afin de configurer mes flux plus rapidement et sans ambiguïté (retours UX Romain).

Critères d'acceptance

CritèreStatut
Boutons de la barre d'outils (Sauvegarder, Ajouter un bloc, Résumé, Lancer) : même hauteur, style et hiérarchie visuelle
Menu « Ajouter un bloc » : style aligné sur les menus d'action ; indication clic vs glisser-déposer
Clic sur un type de bloc : ajout au centre du canvas
Inspecteur Source : sections « Général » et « Fichier du dépôt » alignées ; bannières info discrètes ; « Colonnes détectées » sans surclasser Général
Canvas : icônes Source, Traitement et Destination avec le même habillage (fond bleu, couleur primaire unifiée)
Export Destination CSV après Lancer : téléchargement avec extension .csv et nom lisible

Périmètre livré

Front

  • front/src/css/workflow-editor-toolbar.scss — tokens partagés barre d'outils.
  • WorkflowBlockPaletteMenu, WorkflowCanvasToolbar, WorkflowEditorPage.
  • WorkflowInspectorDrawer, WorkflowInspectorSection, WorkflowInputSourcePanel.
  • useWorkflowCanvasDnDaddBlockAtViewportCenter pour l'ajout au clic.
  • workflow-destination-export.js, WorkflowDestinationPanel, workflow-store — téléchargement signé avec attribut download.

Back

  • workflow-destination-run.service.ts — clé S3 avec segment workflow_export_{runSlice}.csv (sans modifier uploadFile.ts).
  • workflow-run-artifact.service.ts — résolution du nom de fichier (clés legacy UUID sans extension + query outputType).
  • workflows.controller.tsGET .../export-download?artifactRef=&outputType=.

Migration SQL

Aucun changement de schéma SQL pour ce ticket.

Tests

CoucheFichier
Front unitWorkflowBlockPaletteMenu.spec.js
Front unitworkflow-destination-export.spec.js
Front unituseWorkflowCanvasDnD.spec.js
Back unitworkflow-run-artifact.service.spec.ts

Documentation technique

Hors périmètre

  • Refonte formulaires → source (reportée).
  • Modification de back/src/domains/s3Helper/uploadFile.ts (helper partagé).