improve UX for export page

app/components/dossiers/export_link_component.rb

@@ -22,41 +22,43 @@ class Dossiers::ExportLinkComponent < ApplicationComponent
       no_progress_notification: no_progress_notification)
   end
 
+  def time_info(export)
+    if export.available?
+      t(".ready_link_label_time_info", export_time: helpers.time_ago_in_words(export.updated_at))
+    else
+      t(".not_ready_link_label_time_info", export_time: helpers.time_ago_in_words(export.updated_at))
+    end
+  end
+
+  def export_title(export)
+    t(".export_title",
+      export_tabs: export.statut.to_s,
+      export_format: export.format)
+  end
+
+  def badge(export)
+    if export.available?
+      content_tag(:span, t(".success_label"), { class: "fr-badge fr-badge--success fr-text-right" })
+    elsif export.failed?
+      content_tag(:span, t(".failed_label"), { class: "fr-badge fr-badge--warning fr-text-right" })
+    else
+      content_tag(:span, t(".pending_label"), { class: "fr-badge fr-badge--info fr-text-right" })
+    end
+  end
+
+  def export_button(export)
+    if export.available?
+      title = t(".everything_ready", export_format: ".#{export.format}")
+      content_tag(:a, title, { href: export.file.url, title: new_tab_suffix(title), target: "_blank", rel: "noopener", class: 'fr-btn' })
+    elsif export.pending?
+      content_tag(:a, t('.refresh_page'), { href: "", class: 'fr-btn fr-btn fr-btn--tertiary' })
+    end
+  end
+
   def refresh_button_options(export)
     {
       title: t(".refresh_old_export", export_format: ".#{export.format}"),
-      class: "fr-btn  fr-btn--sm fr-icon-refresh-line fr-btn--icon-left fr-btn--tertiary fr-mt-1w"
-    }
-  end
-
-  def ready_link_label(export)
-    t(".everything_ready",
-      export_format: ".#{export.format}")
-  end
-
-  def ready_link_label_extra_infos(export)
-    t(".ready_link_label_extra_infos",
-      export_time: helpers.time_ago_in_words(export.updated_at),
-      export_tabs: export.statut.to_s)
-  end
-
-  def pending_label(export)
-    t(".everything_pending_html",
-      export_time: time_ago_in_words(export.created_at),
-      export_format: ".#{export.format}")
-  end
-
-  def failed_label(export)
-    t(".failed_label",
-      export_format: ".#{export.format}")
-  end
-
-  def poll_controller_options(export)
-    {
-      controller: 'turbo-poll',
-      turbo_poll_url_value: download_export_path(export_format: export.format, statut: export.statut, no_progress_notification: true),
-      turbo_poll_interval_value: 6000,
-      turbo_poll_max_checks_value: 10
+      class: "fr-btn fr-btn--tertiary"
     }
   end
 end

app/components/dossiers/export_link_component/export_link_component.en.yml

@@ -7,10 +7,14 @@ en:
   everything_json_html: Request an export in .json format (GeoJSON)
   everything_short: Request an export in %{export_format} format
   refresh_old_export: Recreate this export
-  everything_pending_html: An export in %{export_format} format is being generated<br>(ask %{export_time} ago)
   everything_ready: Download the export in %{export_format} format
-  failed_label: The export in %{export_format} format has failed
-  ready_link_label_extra_infos: generated %{export_time} ago, for files "%{export_tabs}"
+  success_label: Ready
+  failed_label: Failed
+  pending_label: In progress
+  refresh_page: Refresh page
+  export_title: Export .%{export_format} for files « %{export_tabs} »
+  ready_link_label_time_info: " - generated %{export_time} ago"
+  not_ready_link_label_time_info: " - asked %{export_time} ago"
   download_all: Download all files
   download:
     one: Download a file

app/components/dossiers/export_link_component/export_link_component.fr.yml

@@ -7,10 +7,14 @@ fr:
   everything_json_html: Demander un export au format .json (GeoJSON)
   everything_short: Demander un export au format %{export_format}
   refresh_old_export: Recréer cet export
-  everything_pending_html: Un export au format %{export_format} est en train d’être généré<br>(demandé il y a %{export_time})
   everything_ready: Télécharger l’export au format %{export_format}
-  failed_label: L’export au format %{export_format}, n'a pas fonctionné
-  ready_link_label_extra_infos: généré il y a %{export_time} pour les dossiers "%{export_tabs}"
+  success_label: Prêt
+  failed_label: Erreur
+  pending_label: En cours
+  refresh_page: Recharger la page
+  export_title: Export .%{export_format} pour les dossiers « %{export_tabs} »
+  ready_link_label_time_info: " - généré il y a %{export_time}"
+  not_ready_link_label_time_info: " - demandé il y a %{export_time}"
   download_all: Télécharger tous les dossiers
   download:
     one: Télécharger un dossier

app/components/dossiers/export_link_component/export_link_component.html.haml

@@ -1,12 +1,17 @@
-%ul
+%ul.fr-raw-list
   - @exports.each do |export|
-    - if export.available?
-      %li.fr-mb-2w
-        = link_to ready_link_label(export), export.file.url, target: "_blank", rel: "noopener", role: 'menuitem'
-        %span= ready_link_label_extra_infos(export)
+    %li.fr-mb-3w
+      .flex
+        %strong
+          = export_title(export)
+        %span.fr-text-mention--grey.fr-mb-1w
+          = time_info(export)
+        .fr-ml-auto
+          = badge(export)
+      %ul.fr-btns-group.fr-btns-group--inline-sm
+        %li
+          = export_button(export)
+
         - if export.old?
-          = button_to refresh_button_options(export)[:title], download_export_path(export_format: export.format, statut: export.statut, force_export: true), refresh_button_options(export).merge(role: 'menuitem')
-    - elsif export.pending?
-      %li.fr-mb-2w
-        %span{ data: poll_controller_options(export) }
-          = pending_label(export)
+          %li
+            = button_to refresh_button_options(export)[:title], download_export_path(export_format: export.format, statut: export.statut, force_export: true), refresh_button_options(export)

spec/system/instructeurs/instruction_spec.rb

@@ -122,7 +122,8 @@ describe 'Instructing a dossier:', js: true, retry: 3 do
     expect(page).to have_text('Nous générons cet export.')
 
     click_on "voir les exports"
-    expect(page).to have_text('Un export au format .csv est en train d’être généré')
+    expect(page).to have_text("Export .csv pour les dossiers « a-suivre » - demandé il y a moins d'une minute")
+    expect(page).to have_text("En cours")
 
     assert_performed_jobs 2 do
       perform_enqueued_jobs(only: ExportJob)