dont'use DSFR component - add a line inside the table instead

app/assets/stylesheets/table.scss

@@ -28,7 +28,7 @@
 
   &.hoverable {
     tbody tr:hover {
-      background: $light-grey;
+      background-color: $light-grey;
     }
   }
 
@@ -60,7 +60,7 @@
   .table {
     &.hoverable {
       tbody tr:hover {
-        background: $white;
+        background-color: $white;
       }
     }
   }

app/components/dossiers/batch_notice_select_all_component/batch_notice_select_all_component.html.haml

@@ -1,21 +0,0 @@
-.fr-notice.fr-notice--info.fr-mt-2w.hidden
-  .fr-container
-    .fr-notice__body
-      #not_selected
-        %p.fr-notice__title
-          = t('.selected_html')
-          %a{ :href => "#", data: { action: "batch-operation#onSelectMore", dossiers: @filtered_sorted_ids.first(Instructeurs::ProceduresController::BATCH_SELECTION_LIMIT).join(',') } }
-            - if @dossiers_count <= Instructeurs::ProceduresController::BATCH_SELECTION_LIMIT
-              = t(".select_all", dossiers_count: @dossiers_count)
-            - else
-              = t(".select_all_limit", dossiers_count: @dossiers_count, limit: Instructeurs::ProceduresController::BATCH_SELECTION_LIMIT)
-      #selected.hidden
-        %p.fr-notice__title
-          - if @dossiers_count <= Instructeurs::ProceduresController::BATCH_SELECTION_LIMIT
-            = t(".selected_all", dossiers_count: @dossiers_count)
-          - else
-            = t(".selected_all_limit", limit: Instructeurs::ProceduresController::BATCH_SELECTION_LIMIT)
-          %a{ :href => "#", data: { action: "batch-operation#onDeleteSelection" } }
-            = t(".delete_selection")
-
-        = hidden_field_tag :"batch_operation[dossier_ids][]", "", form: dom_id(BatchOperation.new), id: dom_id(BatchOperation.new, "input_multiple_ids")

app/components/dossiers/batch_select_more_component.rb

@@ -1,4 +1,4 @@
-class Dossiers::BatchNoticeSelectAllComponent < ApplicationComponent
+class Dossiers::BatchSelectMoreComponent < ApplicationComponent
   def initialize(dossiers_count:, filtered_sorted_ids:)
     @dossiers_count = dossiers_count
     @filtered_sorted_ids = filtered_sorted_ids

app/components/dossiers/batch_select_more_component/batch_select_more_component.html.haml

@@ -0,0 +1,21 @@
+%tr#js_batch_select_more.fr-background-alt--blue-france.hidden
+  %td.fr-py-2w.text-center{ colspan: 100 }
+    #not_selected
+      %p
+        = t('.selected_html')
+        %button.fr-btn.fr-btn--sm.fr-btn--tertiary-no-outline{ data: { action: "batch-operation#onSelectMore", dossiers: @filtered_sorted_ids.first(Instructeurs::ProceduresController::BATCH_SELECTION_LIMIT).join(',') } }
+          - if @dossiers_count <= Instructeurs::ProceduresController::BATCH_SELECTION_LIMIT
+            = t(".select_all", dossiers_count: @dossiers_count)
+          - else
+            = t(".select_all_limit", dossiers_count: @dossiers_count, limit: Instructeurs::ProceduresController::BATCH_SELECTION_LIMIT)
+
+    #selected.hidden
+      %p
+        - if @dossiers_count <= Instructeurs::ProceduresController::BATCH_SELECTION_LIMIT
+          = t(".selected_all", dossiers_count: @dossiers_count)
+        - else
+          = t(".selected_all_limit", limit: Instructeurs::ProceduresController::BATCH_SELECTION_LIMIT)
+        %button.fr-btn.fr-btn--sm.fr-btn--tertiary-no-outline{ data: { action: "batch-operation#onDeleteSelection" } }
+          = t(".delete_selection")
+
+      = hidden_field_tag :"batch_operation[dossier_ids][]", "", form: dom_id(BatchOperation.new), id: dom_id(BatchOperation.new, "input_multiple_ids")

app/javascript/controllers/batch_operation_controller.ts

@@ -103,11 +103,11 @@ function displayNotice(inputs: HTMLInputElement[]) {
   );
   if (checkbox_all) {
     if (checkbox_all.checked) {
-      show(document.querySelector('.fr-notice'));
+      show(document.querySelector('#js_batch_select_more'));
       hide(document.querySelector('#selected'));
       show(document.querySelector('#not_selected'));
     } else {
-      hide(document.querySelector('.fr-notice'));
+      hide(document.querySelector('#js_batch_select_more'));
       deleteSelection();
     }
   }
@@ -128,7 +128,7 @@ function deleteSelection() {
     hidden_input_multiple_ids.value = '';
   }
 
-  hide(document.querySelector('.fr-notice'));
+  hide(document.querySelector('#js_batch_select_more'));
 }
 
 function emptyCheckboxes() {

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

@@ -103,8 +103,6 @@
 
           = render batch_operation_component
 
-        = render Dossiers::BatchNoticeSelectAllComponent.new(dossiers_count: @dossiers_count, filtered_sorted_ids: @filtered_sorted_ids)
-
         .fr-table.fr-table--bordered
           %table.table.dossiers-table.hoverable
             %thead
@@ -127,6 +125,8 @@
               %tr
 
             %tbody
+              = render Dossiers::BatchSelectMoreComponent.new(dossiers_count: @dossiers_count, filtered_sorted_ids: @filtered_sorted_ids)
+
               - @projected_dossiers.each do |p|
                 - path = instructeur_dossier_path(@procedure, p.dossier_id)
                 %tr{ class: [p.hidden_by_user_at.present? && "file-hidden-by-user"] }

spec/system/instructeurs/batch_operation_spec.rb

@@ -63,7 +63,7 @@ describe 'BatchOperation a dossier:', js: true do
       find("##{dom_id(BatchOperation.new, :checkbox_all)}").check
 
       # multiple select notice don't appear if all the dossiers are on the same page
-      expect(page).to have_selector('.fr-notice', visible: false)
+      expect(page).to have_selector('#js_batch_select_more', visible: false)
 
       [dossier_2, dossier_3].map do |dossier|
         dossier_checkbox_id = dom_id(BatchOperation.new, "checkbox_#{dossier.id}")
@@ -91,7 +91,7 @@ describe 'BatchOperation a dossier:', js: true do
 
       # click on check_all make the notice appear
       find("##{dom_id(BatchOperation.new, :checkbox_all)}").check
-      expect(page).to have_selector('.fr-notice')
+      expect(page).to have_selector('#js_batch_select_more')
       expect(page).to have_content('Les 2 dossiers de cette page sont sélectionnés. Sélectionner les 3 dossiers.')
 
       # click on selection link fill checkbox value with dossier_ids
@@ -101,7 +101,7 @@ describe 'BatchOperation a dossier:', js: true do
 
       # click on delete link empty checkbox value and hide notice
       click_on("Effacer la sélection")
-      expect(page).to have_selector('.fr-notice', visible: false)
+      expect(page).to have_selector('#js_batch_select_more', visible: false)
       expect(page).to have_button("Suivre les dossiers", disabled: true)
       expect(find_field("batch_operation[dossier_ids][]", type: :hidden).value).to eq ""
 
@@ -129,7 +129,7 @@ describe 'BatchOperation a dossier:', js: true do
 
       # click on check_all make the notice appear
       find("##{dom_id(BatchOperation.new, :checkbox_all)}").check
-      expect(page).to have_selector('.fr-notice')
+      expect(page).to have_selector('#js_batch_select_more')
       expect(page).to have_content('Les 2 dossiers de cette page sont sélectionnés. Sélectionner les 3 premiers dossiers sur les 4')
 
       # click on selection link fill checkbox value with dossier_ids