use dsfr table for transfer receiver view

app/assets/stylesheets/02_utils.scss

@@ -157,6 +157,10 @@
   word-wrap: normal !important;
 }
 
+.ml-auto {
+  margin-left: auto;
+}
+
 // generate spacer utility like bootstrap my-2 -> margin-left/right: 2 * $default-spacer
 // using $direction.key as css modifier, $direction.values to set css properties
 // scale it using $steps

app/assets/stylesheets/dossiers_table.scss

@@ -8,10 +8,6 @@
     padding: (2 * $default-spacer) $default-spacer;
   }
 
-  td {
-    padding: 0;
-  }
-
   a {
     background-image: none; // remove DSFR underline
   }
@@ -91,3 +87,7 @@
     background-color: rgba(242, 137, 0, 0.6) !important;
   }
 }
+
+table.display-table {
+  display: table;
+}

app/views/users/dossiers/_dossier_actions.html.haml

@@ -7,7 +7,7 @@
 
 
 - if has_actions
-  = render Dropdown::MenuComponent.new(wrapper: :div, wrapper_options: {class: 'invite-user-actions'}, menu_options: {id: dom_id(dossier, :actions_menu)}, button_options: {class: 'fr-btn--sm fr-btn--secondary'}) do |menu|
+  = render Dropdown::MenuComponent.new(wrapper: :div, wrapper_options: {class: 'invite-user-actions'}, menu_options: {id: dom_id(dossier, :actions_menu)}, button_options: {class: 'fr-btn--sm'}) do |menu|
     - menu.with_button_inner_html do
       = t('views.users.dossiers.dossier_action.actions')
 

app/views/users/dossiers/_dossiers_list.html.haml

@@ -10,15 +10,17 @@
             %th{ scope: :col }= t('views.users.dossiers.dossiers_list.requester')
           %th.status-col{ scope: :col }= t('views.users.dossiers.dossiers_list.status')
           %th.updated-at-col{ scope: :col }= t('views.users.dossiers.dossiers_list.updated')
-          %th.sr-only{ scope: :col }= t('views.users.dossiers.dossiers_list.actions')
+          %th.action-col.follow-col{ scope: :col }= t('views.users.dossiers.dossiers_list.actions')
       %tbody
         - dossiers.each do |dossier|
           - if dossier.transfer.present?
             %tr.fr-background-alt--blue-france.no-border
-              %td.fr-py-2w.text-center{ colspan: 100 }
-                %p
-                  %small
-                    = t('views.users.dossiers.transfers.demande_en_cours', id: dossier.id, email: dossier.transfer.email)
+              %td.fr-py-2w{ colspan: 100 }
+                .flex.align-center
+                  %p.fr-mb-0
+                    %small
+                      = t('views.users.dossiers.transfers.sender_demande_en_cours', id: dossier.id, email: dossier.transfer.email)
+                  .ml-auto
                     = link_to t('views.users.dossiers.transfers.revoke'), transfer_path(dossier.transfer), class: 'fr-btn fr-btn--sm fr-btn--tertiary-no-outline', method: :delete
 
           %tr{ data: { 'dossier-id': dossier.id } }
@@ -36,7 +38,7 @@
               = status_badge(dossier.state)
             %td.updated-at-col.cell-link
               = try_format_date(dossier.updated_at)
-            %td.action-col
+            %td.action-col.follow-col
               = render partial: 'dossier_actions', locals: { dossier: dossier }
 
     = paginate(dossiers)

app/views/users/dossiers/_transfered_dossiers_list.html.haml

@@ -1,31 +1,34 @@
 - if dossier_transfers.present?
-  %ul.dossiers-transfers.mb-2
-    - dossier_transfers.each do |transfer|
-      %li.mb-4
-        .transfer-details.mb-2
-          Demande de transfert Nº #{transfer.id} envoyé par #{transfer.dossiers.first.user.email}
-        %table.table.dossiers-table.hoverable
-          %thead
-            %tr
-              %th.number-col= t('views.users.dossiers.dossiers_list.n_dossier')
-              %th= t('views.users.dossiers.dossiers_list.procedure')
-              %th= t('views.users.dossiers.dossiers_list.status')
-              %th Date de dépot
-          %tbody
-            - transfer.dossiers.each do |dossier|
-              %tr{ data: { 'transfer-id': transfer.id } }
-                %td.number-col
-                  %span.icon.folder
-                  = dossier.id
-                %td= dossier.procedure.libelle
-                %td= status_badge(dossier.state)
-                %td{ style: 'padding: 18px;' }= (dossier.depose_at || dossier.created_at).strftime('%d/%m/%Y')
+  .fr-table.fr-table--bordered
+    %table.table.dossiers-table.display-table
+      %thead
+        %tr
+          %th.number-col= t('views.users.dossiers.dossiers_list.n_dossier')
+          %th= t('views.users.dossiers.dossiers_list.procedure')
+          %th= t('views.users.dossiers.dossiers_list.status')
+          %th.action-col.follow-col Date de dépot
+      %tbody
+        - dossier_transfers.each do |transfer|
+          - transfer.dossiers.each do |dossier|
+            %tr.fr-background-alt--blue-france.no-border
+              %td.fr-py-2w{ colspan: 100 }
+                .flex.align-center
+                  %p.fr-mb-0
+                    %small
+                      = t('views.users.dossiers.transfers.receiver_demande_en_cours', id: dossier.id, email: transfer.dossiers.first.user.email)
+                  .ml-auto
+                    = link_to t('views.users.dossiers.transfers.accept'), transfer_path(transfer), class: "fr-btn fr-btn--sm fr-btn--tertiary", method: :put
 
-        .transfer-actions.mt-4
-          = link_to "Accepter", transfer_path(transfer), class: "button primary", method: :put
-          = link_to "Rejeter", transfer_path(transfer), class: "button danger", method: :delete
+                    = link_to t('views.users.dossiers.transfers.reject'), transfer_path(transfer), class: "fr-btn fr-btn--sm fr-btn--tertiary-no-outline", method: :delete
+            %tr{ data: { 'transfer-id': transfer.id } }
+              %th.number-col{ scope: :row }
+                %span.icon.folder
+                = dossier.id
+              %td= dossier.procedure.libelle
+              %td= status_badge(dossier.state)
+              %td.action-col.follow-col{ style: 'padding: 18px;' }= (dossier.depose_at || dossier.created_at).strftime('%d/%m/%Y')
 
-  = paginate(dossier_transfers)
+    = paginate(dossier_transfers)
 
 - else
   .blank-tab

config/locales/en.yml

@@ -358,8 +358,11 @@ en:
           updated: "Updated"
           actions: "Actions"
         transfers:
-          demande_en_cours: "Une demande de transfert est en cours sur le dossier %{id} pour %{email}"
-          revoke: Révoquer cette demande
+          sender_demande_en_cours: "A transfer request is pending on file Nº %{id} to %{email}"
+          receiver_demande_en_cours: "Transfer request on file Nº %{id} sent by %{email}"
+          revoke: Revoke this request
+          accept: Accept
+          reject: Reject
         dossier_action:
           edit_dossier: "Edit the file"
           start_other_dossier: "Start another empty file"

config/locales/fr.yml

@@ -362,8 +362,11 @@ fr:
           edit_draft: "Modifier le brouillon"
           actions: "Actions"
         transfers:
-          demande_en_cours: "Une demande de transfert est en cours sur le dossier %{id} pour %{email}"
+          sender_demande_en_cours: "Une demande de transfert est en cours sur le dossier Nº %{id} pour %{email}"
+          receiver_demande_en_cours: "Demande de transfert pour le dossier Nº %{id} envoyé par %{email}"
           revoke: Révoquer cette demande
+          accept: Accepter
+          reject: Rejeter
       sessions:
         new:
           sign_in: Connexion à %{application_name}