style(admin): fix archives table

app/assets/stylesheets/archive.scss

@@ -1,19 +0,0 @@
-@import 'constants';
-
-table.archive-table {
-  .text-right {
-    text-align: right;
-  }
-
-  .center {
-    text-align: center;
-  }
-
-  td {
-    padding: 3 * $default-spacer $default-spacer;
-  }
-
-  a.button {
-    background-image: none; // remove DSFR underline
-  }
-}

app/assets/stylesheets/dossiers_table.scss

@@ -10,10 +10,6 @@
     white-space: nowrap;
   }
 
-  .number-col {
-    font-variant-numeric: tabular-nums;
-  }
-
   .follow-col {
     .fr-btn {
       margin-bottom: 0;

app/assets/stylesheets/dsfr.scss

@@ -248,3 +248,7 @@ input[type='radio'] {
 .fr-tags-group > li {
   line-height: inherit;
 }
+
+.fr-cell--numeric {
+  font-variant-numeric: tabular-nums;
+}

app/components/dossiers/deleted_dossiers_component/deleted_dossiers_component.html.haml

@@ -16,31 +16,38 @@
           %li
             = t(".deleted_explanation_second_#{role}")
 
-    .fr-table.fr-table--layout-fixed.fr-mt-3w
+    .fr-table
-      %table
+      .fr-table__wrapper
-        %thead
+        .fr-table__container
-          %tr
+          .fr-table__content
-            %th N° dossier
+            %table
-            %th Libellé de la démarche
+              %thead
-            %th Raison de suppression
+                %tr
-            %th Date de suppression
+                  %th N° dossier
-        %tbody
+                  %th Libellé de la démarche
-          - @deleted_dossiers.each do |deleted_dossier|
+                  %th Raison de suppression
-            %tr
+                  %th Date de suppression
-              %td.number-col
+              %tbody
-                = deleted_dossier.dossier_id
+                - @deleted_dossiers.each do |deleted_dossier|
+                  %tr
+                    %td.fr-cell--numeric
+                      = deleted_dossier.dossier_id
 
-              %td.number-col
+                    %td.fr-cell--numeric
-                = deleted_dossier.procedure.libelle.truncate_words(10)
+                      = deleted_dossier.procedure.libelle.truncate_words(10)
 
-              %td
+                    %td
-                = deletion_reason_badge(deleted_dossier.reason)
+                      = deletion_reason_badge(deleted_dossier.reason)
-                -# .fr-badge
+                      -# .fr-badge
-                -#   = t("activerecord.attributes.deleted_dossier.reason.#{deleted_dossier.reason}")
+                      -#   = t("activerecord.attributes.deleted_dossier.reason.#{deleted_dossier.reason}")
-              %td.deleted-cell
+                    %td.deleted-cell
-                = l(deleted_dossier.deleted_at, format: '%d/%m/%y')
+                      = l(deleted_dossier.deleted_at, format: '%d/%m/%y')
 
-      = paginate @deleted_dossiers, views_prefix: 'shared'
+      .fr-table__footer
+        .fr-table__footer--start
+        .fr-table__footer--middle
+          = paginate @deleted_dossiers, views_prefix: 'shared'
+        .fr-table__footer--end.flex-no-grow
 
   - else
     %p

app/views/administrateurs/archives/index.html.haml

@@ -4,12 +4,14 @@
                     ['Export et Archives']] }
 
 
-.container.flex
+.fr-container.flex
-  %h1.mb-2.mr-2
+  %h1
     Archives
     -# index not renderable as administrateur flagged as manager, so render it anyway
-  = render Dossiers::ExportDropdownComponent.new(procedure: @procedure, export_url: method(:download_admin_procedure_exports_path), show_export_template_tab: false)
+  .fr-ml-2w.fr-my-1w
-.container
+    = render Dossiers::ExportDropdownComponent.new(procedure: @procedure, export_url: method(:download_admin_procedure_exports_path), show_export_template_tab: false)
+
+.fr-container
   = render Dossiers::ExportLinkComponent.new(procedure: @procedure, exports: @exports, export_url: method(:download_admin_procedure_exports_path))
 
   = render partial: "shared/archives/notice"

app/views/experts/avis/procedure.html.haml

@@ -42,7 +42,7 @@
               %tbody
                 - @avis.each do |avis|
                   %tr
-                    %td.number-col
+                    %td.fr-cell--numeric
                       = link_to(expert_avis_path(avis.procedure, avis), class: 'cell-link') do
                         = avis.dossier.id
                     %td= link_to(avis.dossier.user_email_for(:display), expert_avis_path(avis.procedure, avis), class: 'cell-link')

app/views/instructeurs/procedures/show.html.haml

@@ -127,7 +127,7 @@
                                     aria: { label: t('views.instructeurs.dossiers.batch_operation.enabled', dossier_id: p.dossier_id) }
                               = label_tag dom_id(BatchOperation.new, "checkbox_#{p.dossier_id}"), "Sélectionner le dossier #{p.dossier_id}", class: 'fr-label'
 
-                        %td.number-col
+                        %td.fr-cell--numeric
                           - if p.hidden_by_administration_at.present?
                             %span.cell-link= p.dossier_id
                           - else

app/views/recherche/_hidden_dossier.html.haml

@@ -1,4 +1,4 @@
-%td.number-col
+%td.fr-cell--numeric
   %p.cell-link= p.dossier_id
 
 %td

app/views/recherche/index.html.haml

@@ -36,7 +36,7 @@
 
                 %tr{ class: [p.hidden_by_administration_at.present? && "file-hidden-by-user"] }
                   - if instructeur_and_expert_dossier
-                    %td.number-col
+                    %td.fr-cell--numeric
                       .cell-link.relative
                         = p.dossier_id
                         - if @notifications_dossier_ids.include?(p.dossier_id)
@@ -52,7 +52,7 @@
                     = render partial: "recherche/hidden_dossier", locals: {p: p, procedure_libelle: procedure_libelle, user_email: user_email}
 
                   - else
-                    %td.number-col
+                    %td.fr-cell--numeric
                       %a.cell-link.relative{ href: path }
                         = p.dossier_id
                         - if @notifications_dossier_ids.include?(p.dossier_id)

app/views/shared/archives/_table.html.haml

@@ -1,32 +1,36 @@
-%table.archive-table
+.fr-table.fr-table--bordered.fr-my-4w
-  %thead
+  .fr-table__wrapper
-    %tr
+    .fr-table__container
-      %th  
+      .fr-table__content
-      %th.text-right Nombre de dossiers terminés
+        %table
-      %th.text-right Poids estimé
+          %thead
-      %th.center Télécharger
+            %tr
+              %th{ scope: 'col' }
+              %th.fr-cell---right{ scope: 'col' } Nombre de dossiers terminés
+              %th.fr-cell---right{ scope: 'col' } Poids estimé
+              %th{ scope: 'col' } Télécharger
 
-  %tbody
+          %tbody
-  - count_dossiers_termines_by_month.each do |date, count|
+          - count_dossiers_termines_by_month.each do |date, count|
-    - matching_archive = archives.find { |archive| archive.time_span_type == 'monthly' && archive.month == date }
+            - matching_archive = archives.find { |archive| archive.time_span_type == 'monthly' && archive.month == date }
-    - weight = estimate_weight(matching_archive, count, average_dossier_weight)
+            - weight = estimate_weight(matching_archive, count, average_dossier_weight)
 
-    %tr
+            %tr
-      %td
+              %td
-        = I18n.l(date, format: "%B %Y").capitalize
+                = I18n.l(date, format: "%B %Y").capitalize
-      %td.text-right
+              %td.fr-cell--right.fr-cell--numeric
-        = count
+                = count
-      %td.text-right
+              %td.fr-cell--right
-        = number_to_human_size(weight)
+                = number_to_human_size(weight)
-      %td.center
+              %td
-        - if matching_archive.present?
+                - if matching_archive.present?
-          - if matching_archive.available?
+                  - if matching_archive.available?
-            = link_to url_for(matching_archive.file), class: 'fr-btn fr-btn--secondary fr-icon-download-line fr-btn--icon-left fr-btn--sm' do
+                    = link_to url_for(matching_archive.file), class: 'fr-btn fr-btn--secondary fr-icon-download-line fr-btn--icon-left fr-btn--sm' do
-              = t(:archive_ready_html, scope: [:instructeurs, :procedure], generated_period: time_ago_in_words(matching_archive.updated_at))
+                      = t(:archive_ready_html, scope: [:instructeurs, :procedure], generated_period: time_ago_in_words(matching_archive.updated_at))
-          - else
+                  - else
-            = dsfr_icon("fr-icon-flashlight-line", :sm)
+                    = dsfr_icon("fr-icon-flashlight-line", :sm)
-            = t(:archive_pending_html, scope: [:instructeurs, :procedure], created_period: time_ago_in_words(matching_archive.created_at))
+                    = t(:archive_pending_html, scope: [:instructeurs, :procedure], created_period: time_ago_in_words(matching_archive.created_at))
-        - elsif weight.nil? || weight < Archive::MAX_SIZE
+                - elsif weight.nil? || weight < Archive::MAX_SIZE
-          = link_to "Demander la création", create_archive_url(procedure, date), method: :post, class: "fr-btn fr-btn--secondary fr-icon-download-line fr-btn--icon-left fr-btn--sm"
+                  = link_to "Demander la création", create_archive_url(procedure, date), method: :post, class: "fr-btn fr-btn--secondary fr-icon-download-line fr-btn--icon-left fr-btn--sm"
-        - else
+                - else
-          Archive trop volumineuse
+                  Archive trop volumineuse

spec/system/administrateurs/procedure_archive_and_export_spec.rb

@@ -32,7 +32,7 @@ describe 'Creating a new procedure', js: true do
 
     # check archive
     expect {
-      page.first(".archive-table .fr-btn").click
+      page.first(".fr-table .fr-btn").click
     }.to have_enqueued_job(ArchiveCreationJob).with(procedure, an_instance_of(Archive), administrateur)
     expect(page).to have_content("Votre demande a été prise en compte. Selon le nombre de dossiers, cela peut prendre de quelques minutes à plusieurs heures. Vous recevrez un courriel lorsque le fichier sera disponible.")
     expect(Archive.first.month).not_to be_nil

spec/system/instructeurs/instruction_spec.rb

@@ -208,7 +208,7 @@ describe 'Instructing a dossier:', js: true do
     end
     scenario 'download' do
       expect {
-        page.first(".archive-table .fr-btn").click
+        page.first(".fr-table .fr-btn").click
       }.to have_enqueued_job(ArchiveCreationJob).with(procedure, an_instance_of(Archive), instructeur)
       expect(Archive.first.month).not_to be_nil
     end

spec/system/instructeurs/procedure_sort_spec.rb

@@ -19,18 +19,18 @@ describe "procedure sort", js: true do
   scenario "should be able to sort with header" do
     # sorted by notifications (updated_at desc) by default, filtered by followed
     expect(all(".dossiers-table tbody tr").count).to eq(3)
-    expect(find(".dossiers-table tbody tr:nth-child(2) .number-col a").text).to eq(followed_dossier.id.to_s)
+    expect(find(".dossiers-table tbody tr:nth-child(2) .fr-cell--numeric a").text).to eq(followed_dossier.id.to_s)
-    expect(find(".dossiers-table tbody tr:nth-child(3) .number-col a").text).to eq(followed_dossier_2.id.to_s)
+    expect(find(".dossiers-table tbody tr:nth-child(3) .fr-cell--numeric a").text).to eq(followed_dossier_2.id.to_s)
 
     click_on "Nº dossier" # sort by id asc
 
-    expect(find(".dossiers-table tbody tr:nth-child(2) .number-col a").text).to eq(followed_dossier.id.to_s)
+    expect(find(".dossiers-table tbody tr:nth-child(2) .fr-cell--numeric a").text).to eq(followed_dossier.id.to_s)
-    expect(find(".dossiers-table tbody tr:nth-child(3) .number-col a").text).to eq(followed_dossier_2.id.to_s)
+    expect(find(".dossiers-table tbody tr:nth-child(3) .fr-cell--numeric a").text).to eq(followed_dossier_2.id.to_s)
 
     click_on "Nº dossier" # reverse order - sort by id desc
 
-    expect(find(".dossiers-table tbody tr:nth-child(2) .number-col a").text).to eq(followed_dossier_2.id.to_s)
+    expect(find(".dossiers-table tbody tr:nth-child(2) .fr-cell--numeric a").text).to eq(followed_dossier_2.id.to_s)
-    expect(find(".dossiers-table tbody tr:nth-child(3) .number-col a").text).to eq(followed_dossier.id.to_s)
+    expect(find(".dossiers-table tbody tr:nth-child(3) .fr-cell--numeric a").text).to eq(followed_dossier.id.to_s)
   end
 
   scenario "should be able to sort with header with sva date" do
@@ -41,20 +41,20 @@ describe "procedure sort", js: true do
     visit instructeur_procedure_path(procedure, statut: "suivis")
     # sorted by notifications (updated_at desc) by default, filtered by followed
     expect(all(".dossiers-table tbody tr").count).to eq(3)
-    expect(find(".dossiers-table tbody tr:nth-child(2) .number-col a").text).to eq(followed_dossier.id.to_s)
+    expect(find(".dossiers-table tbody tr:nth-child(2) .fr-cell--numeric a").text).to eq(followed_dossier.id.to_s)
-    expect(find(".dossiers-table tbody tr:nth-child(3) .number-col a").text).to eq(followed_dossier_2.id.to_s)
+    expect(find(".dossiers-table tbody tr:nth-child(3) .fr-cell--numeric a").text).to eq(followed_dossier_2.id.to_s)
 
     click_on "Date décision SVA", exact: true # sort by sva date asc
     # find("thead .sva-col a").click # sort by sva date asc
 
-    expect(find(".dossiers-table tbody tr:nth-child(2) .number-col a").text).to eq(followed_dossier.id.to_s)
+    expect(find(".dossiers-table tbody tr:nth-child(2) .fr-cell--numeric a").text).to eq(followed_dossier.id.to_s)
-    expect(find(".dossiers-table tbody tr:nth-child(3) .number-col a").text).to eq(followed_dossier_2.id.to_s)
+    expect(find(".dossiers-table tbody tr:nth-child(3) .fr-cell--numeric a").text).to eq(followed_dossier_2.id.to_s)
 
     click_on "Date décision SVA ↑", exact: true # reverse order - sort by sva date desc
     # find("thead .sva-col a").click # reverse order - sort by sva date desc
 
-    expect(find(".dossiers-table tbody tr:nth-child(2) .number-col a").text).to eq(followed_dossier_2.id.to_s)
+    expect(find(".dossiers-table tbody tr:nth-child(2) .fr-cell--numeric a").text).to eq(followed_dossier_2.id.to_s)
-    expect(find(".dossiers-table tbody tr:nth-child(3) .number-col a").text).to eq(followed_dossier.id.to_s)
+    expect(find(".dossiers-table tbody tr:nth-child(3) .fr-cell--numeric a").text).to eq(followed_dossier.id.to_s)
   end
 
   scenario "should be able to sort with direct link to notification sort" do
@@ -65,14 +65,14 @@ describe "procedure sort", js: true do
     find("label", text: "Remonter les dossiers avec une notification").click # reverse order - sort by updated_at asc
 
     expect(page).not_to have_checked_field("Remonter les dossiers avec une notification")
-    expect(find(".dossiers-table tbody tr:nth-child(2) .number-col a").text).to eq(followed_dossier_2.id.to_s)
+    expect(find(".dossiers-table tbody tr:nth-child(2) .fr-cell--numeric a").text).to eq(followed_dossier_2.id.to_s)
-    expect(find(".dossiers-table tbody tr:nth-child(3) .number-col a").text).to eq(followed_dossier.id.to_s)
+    expect(find(".dossiers-table tbody tr:nth-child(3) .fr-cell--numeric a").text).to eq(followed_dossier.id.to_s)
 
     find("label", text: "Remonter les dossiers avec une notification").click # set order back - sort by updated_at desc
 
     expect(page).to have_checked_field("Remonter les dossiers avec une notification")
-    expect(find(".dossiers-table tbody tr:nth-child(2) .number-col a").text).to eq(followed_dossier.id.to_s)
+    expect(find(".dossiers-table tbody tr:nth-child(2) .fr-cell--numeric a").text).to eq(followed_dossier.id.to_s)
-    expect(find(".dossiers-table tbody tr:nth-child(3) .number-col a").text).to eq(followed_dossier_2.id.to_s)
+    expect(find(".dossiers-table tbody tr:nth-child(3) .fr-cell--numeric a").text).to eq(followed_dossier_2.id.to_s)
   end
 
   scenario "should be able to sort back by notification filter after any other sort" do
@@ -83,7 +83,7 @@ describe "procedure sort", js: true do
     find("label", text: "Remonter les dossiers avec une notification").click # sort by updated_at desc
     expect(page).to have_checked_field("Remonter les dossiers avec une notification")
 
-    expect(find(".dossiers-table tbody tr:nth-child(2) .number-col a").text).to eq(followed_dossier.id.to_s)
+    expect(find(".dossiers-table tbody tr:nth-child(2) .fr-cell--numeric a").text).to eq(followed_dossier.id.to_s)
-    expect(find(".dossiers-table tbody tr:nth-child(3) .number-col a").text).to eq(followed_dossier_2.id.to_s)
+    expect(find(".dossiers-table tbody tr:nth-child(3) .fr-cell--numeric a").text).to eq(followed_dossier_2.id.to_s)
   end
 end