feat(routing): small UI polish

app/assets/stylesheets/routing_rules_component.scss

@@ -0,0 +1,59 @@
+@import "colors";
+@import "constants";
+
+#routing-rules {
+
+  .routing-rules-table {
+    table-layout: fixed;
+
+    .far-left {
+      width: 200px;
+    }
+
+    .if {
+      width: 30px;
+    }
+
+    .target {
+      width: 350px;
+
+      select {
+        width: 100%;
+      }
+    }
+
+    .operator {
+      text-align: center;
+      width: 100px;
+    }
+
+    .value {
+      width: 200px;
+    }
+  }
+
+  th {
+    text-align: left;
+    padding: $default-spacer;
+
+  }
+
+  td {
+    padding: $default-spacer;
+
+    input,
+    select {
+      margin-bottom: 0;
+    }
+
+    input[type=text] {
+      display: inline-block;
+      margin-bottom: 0;
+    }
+
+    input.alert,
+    select.alert {
+      border-color: $dark-red;
+    }
+  }
+}

app/components/procedure/routing_rules_component/routing_rules_component.fr.yml

@@ -2,11 +2,10 @@
 fr:
   select: Sélectionner
   apply_routing_rules: Appliquer des règles de routage
-  routing_rules_notice: |
-    Ajoutez des règles de routage à partir de champs créés dans le formulaire.
-    Si les mêmes règles de routage sont appliquées à plusieurs groupes,
-    les dossiers seront routés vers le premier groupe affiché dans la liste.
+  routing_rules_notice_html: |
+    <p>Ajoutez des règles de routage à partir de champs « choix simple » créés dans le <a href="%{path}">formulaire</a>.</p>
+    <p>Les dossiers seront routées vers le premier groupe affiché dont la règle correspond.</p>
   routing_rules_warning_html: |
-    Pour appliquer des règles de routage, votre formulaire doit comporter
-    au moins un champ « choix simple ». <br>
-    Ajoutez ce champ dans la page <a href="%{path}">« Configuration des champs »</a>
+    <p>Pour appliquer des règles de routage, votre formulaire doit comporter
+    au moins un champ « choix simple ».</p>
+    <p>Ajoutez ce champ dans la page <a href="%{path}">« Configuration des champs »</a>.</p>

app/components/procedure/routing_rules_component/routing_rules_component.html.haml

@@ -2,28 +2,31 @@
   .card-title
     = t('.apply_routing_rules')
   - if can_route?
-    %p.notice
-      = t('.routing_rules_notice')
-    .conditionnel.mt-2.width-100
-      %table.condition-table.mt-2.width-100
+    .notice
+      = t('.routing_rules_notice_html', path: champs_admin_procedure_path(@procedure_id))
+    .mt-2.width-100
+      %table.routing-rules-table.mt-2.width-100
         %thead
           %tr
-            %th.far-left
+            %th.far-left Router vers
+            %th.if
             %th.target Champ cible du routage
-            %th.operator Opérateur
+            %th.operator
             %th.value Valeur
-            %th.delete-column
-    .conditionnel.mt-2.width-100
+    .mt-2.width-100
       - rows.each.with_index do |(targeted_champ, value, groupe_instructeur), row_index|
-        = form_tag admin_procedure_routing_rules_path(@procedure_id), method: :post, class: "form width-100 gi-#{groupe_instructeur.id}" do
-          %table.condition-table.mt-2.width-100
+        = form_tag admin_procedure_routing_rules_path(@procedure_id),
+          method: :post,
+          class: "form width-100 gi-#{groupe_instructeur.id}",
+          data: { controller: 'autosave' } do
+          = hidden_groupe_instructeur_tag(groupe_instructeur.id)
+          %table.routing-rules-table.condition-table.mt-2.width-100
             %tbody
-              %tr{ data: { controller: 'autosave' } }
-                %td.far-left Router vers « #{groupe_instructeur.label} »  si
+              %tr
+                %td.far-left= groupe_instructeur.label
+                %td.if si
                 %td.target= targeted_champ_tag(targeted_champ, row_index)
-                %td.operator Est égal à
+                %td.operator est égal à
                 %td.value= value_tag(targeted_champ, value, row_index)
-                %td.delete-column
-                = hidden_groupe_instructeur_tag(groupe_instructeur.id)
   - else
-    %p= t('.routing_rules_warning_html', path: champs_admin_procedure_path(@procedure_id))
+    .notice= t('.routing_rules_warning_html', path: champs_admin_procedure_path(@procedure_id))

spec/system/administrateurs/procedure_routing_spec.rb

@@ -41,8 +41,8 @@ describe 'As an administrateur I can manage procedure routing', js: true do
     visit admin_procedure_groupe_instructeurs_path(procedure)
 
     within('.condition-table tbody tr:nth-child(1)', match: :first) do
-      expect(page).to have_content 'Router vers « a second group »'
-      expect(page).not_to have_content 'Router vers « défaut »'
+      expect(page).to have_content 'second group'
+      expect(page).not_to have_content 'défaut'
     end
   end
 end