reorganize page config expert invites

app/components/dsfr/toggle_component.rb

@@ -1,5 +1,5 @@
 class Dsfr::ToggleComponent < ApplicationComponent
-  def initialize(form:, target:, title:, disabled: nil, hint: nil, toggle_labels: { checked: 'Activé', unchecked: 'Désactivé' }, opt: nil)
+  def initialize(form:, target:, title:, disabled: nil, hint: nil, toggle_labels: { checked: 'Activé', unchecked: 'Désactivé' }, opt: nil, extra_class_names: nil)
     @form = form
     @target = target
     @title = title
@@ -7,7 +7,8 @@ class Dsfr::ToggleComponent < ApplicationComponent
     @disabled = disabled
     @toggle_labels = toggle_labels
     @opt = opt
+    @extra_class_names = extra_class_names
   end
 
-  attr_reader :toggle_labels
+  attr_reader :toggle_labels, :extra_class_names
 end

app/components/dsfr/toggle_component/toggle_component.html.haml

@@ -1,4 +1,4 @@
-.fr-toggle.fr-toggle--label-left
+%div{ class: "fr-toggle fr-toggle--label-left #{extra_class_names}" }
   = @form.check_box @target, class: 'fr-toggle__input', disabled: @disabled,
     data: @opt
   = @form.label @target,

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

@@ -7,102 +7,112 @@
   %h1.fr-h2
     Avis externes
 
-  .groupe-instructeur
+  = render Dsfr::CalloutComponent.new(title: nil) do |c|
-    .card
+    - c.with_body do
-      .card-title= t('.titles.allow_invite_experts')
+      Pendant l'instruction d'un dossier, les instructeurs peuvent demander leur avis à un ou plusieurs experts.
-      %p= t('.descriptions.allow_invite_experts')
+      %p
+        = link_to('Comment gérer les avis externes', t('.experts_doc.url'),
+          title: t('.experts_doc.title'),
+          **external_link_attributes)
+
+  %ul.fr-toggle__list
+    %li
       = form_for @procedure,
         method: :put,
         url: allow_expert_review_admin_procedure_path(@procedure),
-        html: { class: 'form procedure-form__column--form no-background' } do |f|
+        data: { controller: 'autosubmit', turbo: 'true' } do |f|
-        %label.toggle-switch{ data: { controller: 'autosubmit' } }
+
-          = f.check_box :allow_expert_review, class: 'toggle-switch-checkbox'
+        = render Dsfr::ToggleComponent.new(form: f,
-          %span.toggle-switch-control.round
+          target: :allow_expert_review,
-          %span.toggle-switch-label.on
+          title: t('.titles.allow_invite_experts'),
-          %span.toggle-switch-label.off
+          hint: t('.descriptions.allow_invite_experts'),
+          disabled: false,
+          extra_class_names: 'fr-toggle--border-bottom')
 
     - if @procedure.allow_expert_review?
-      .card
+      %li
-        .card-title= t('.titles.manage_procedure_experts')
+        = form_for @procedure,
-        %p= t('.descriptions.manage_procedure_experts')
+          method: :put,
+          url: allow_expert_messaging_admin_procedure_path(@procedure),
+          data: { controller: 'autosubmit', turbo: 'true' } do |f|
+
+          = render Dsfr::ToggleComponent.new(form: f,
+            target: :allow_expert_messaging,
+            title: t('.titles.allow_expert_messaging'),
+            hint: t('.descriptions.allow_expert_messaging'),
+            disabled: false,
+            extra_class_names: 'fr-toggle--border-bottom')
+
+      %li
         = form_for @procedure,
           method: :put,
           url: experts_require_administrateur_invitation_admin_procedure_path(@procedure),
-          html: { class: 'form procedure-form__column--form no-background' } do |f|
+          data: { controller: 'autosubmit', turbo: 'true' } do |f|
-          %label.toggle-switch{ data: { controller: 'autosubmit' } }
-            = f.check_box :experts_require_administrateur_invitation, class: 'toggle-switch-checkbox'
-            %span.toggle-switch-control.round
-            %span.toggle-switch-label.on
-            %span.toggle-switch-label.off
 
-    .card
+          = render Dsfr::ToggleComponent.new(form: f,
-      .card-title= t('.titles.allow_expert_messaging')
+            target: :experts_require_administrateur_invitation,
-      %p= t('.descriptions.allow_expert_messaging')
+            title: t('.titles.manage_procedure_experts'),
-      = form_for @procedure,
+            hint: t('.descriptions.manage_procedure_experts'),
-        method: :put,
+            disabled: false)
-        url: allow_expert_messaging_admin_procedure_path(@procedure),
-        html: { class: 'form procedure-form__column--form no-background' } do |f|
-        %label.toggle-switch{ data: { controller: 'autosubmit' } }
-          = f.check_box :allow_expert_messaging, class: 'toggle-switch-checkbox'
-          %span.toggle-switch-control.round
-          %span.toggle-switch-label.on
-          %span.toggle-switch-label.off
 
-    - if @procedure.experts_require_administrateur_invitation?
-      .card
-        .card-title Affecter des experts à la démarche
-        = form_for :experts_procedure,
-          url: admin_procedure_experts_path(@procedure),
-          html: { class: 'form' } do |f|
 
-          .instructeur-wrapper
+      - if @procedure.experts_require_administrateur_invitation?
-            %p Pendant l'instruction d’un dossier, les instructeurs peuvent demander leur avis à un ou plusieurs experts.
+        .card
-            %p#experts-emails Entrez les adresses email des experts que vous souhaitez affecter à cette démarche
+          = form_for :experts_procedure,
-            = hidden_field_tag :emails, nil
+            url: admin_procedure_experts_path(@procedure),
-            = react_component("ComboMultiple",
+            html: { class: 'form' } do |f|
-              options: [],
+
-              selected: [], disabled: [],
+            .instructeur-wrapper
-              group: '.instructeur-wrapper',
+              %p#experts-emails Entrez les adresses emails des experts que vous souhaitez ajouter à la liste prédéfinie
-              name: 'emails',
+              = hidden_field_tag :emails, nil
-              label: 'Emails',
+              = react_component("ComboMultiple",
-              describedby: 'experts-emails',
+                options: [],
-              acceptNewValues: true)
+                selected: [], disabled: [],
+                group: '.instructeur-wrapper',
+                name: 'emails',
+                label: 'Emails',
+                describedby: 'experts-emails',
+                acceptNewValues: true)
+
+              = f.submit 'Ajouter à la liste', class: 'fr-btn'
 
-            = f.submit 'Affecter à la démarche', class: 'button primary send'
     - if @experts_procedure.present?
-      %table.table.mt-2
+      .fr-table.fr-table--no-caption.fr-table--layout-fixed.fr-mt-3w
-        %thead
+        %table
-          %tr
+          %thead
-            %th Liste des experts
-            %th Nombre d’avis
-            - if @procedure.experts_require_administrateur_invitation
-              %th Notifier des décisions sur les dossiers
-        %tbody
-          - @experts_procedure.each do |expert_procedure|
             %tr
-              %td
+              %th Liste des experts
-                = dsfr_icon('fr-icon-user-fill')
+              %th Nombre d’avis
-                = expert_procedure.expert.email
-              %td.text-center
-                = expert_procedure.avis.count
               - if @procedure.experts_require_administrateur_invitation
+                %th Notifier des décisions sur les dossiers
+              - if @procedure.experts_require_administrateur_invitation
+                %th Action
+          %tbody
+            - @experts_procedure.each do |expert_procedure|
+              %tr
+                %td
+                  = dsfr_icon('fr-icon-user-fill')
+                  = expert_procedure.expert.email
                 %td.text-center
-                  = form_for expert_procedure,
+                  = expert_procedure.avis.count
-                    url: admin_procedure_expert_path(id: expert_procedure),
+                - if @procedure.experts_require_administrateur_invitation
-                    method: :put,
+                  %td.text-center
-                    data: { turbo: true },
+                    = form_for expert_procedure,
-                    html: { class: 'form procedure-form__column--form no-background' } do |f|
+                      url: admin_procedure_expert_path(id: expert_procedure),
-                    %label.toggle-switch{ data: { controller: 'autosubmit' } }
+                      method: :put,
-                      = f.check_box :allow_decision_access, class: 'toggle-switch-checkbox'
+                      data: { turbo: true },
-                      %span.toggle-switch-control.round
+                      html: { class: 'form procedure-form__column--form no-background' } do |f|
-                      %span.toggle-switch-label.on
+                      %label.toggle-switch{ data: { controller: 'autosubmit' } }
-                      %span.toggle-switch-label.off
+                        = f.check_box :allow_decision_access, class: 'toggle-switch-checkbox'
-              - if @procedure.experts_require_administrateur_invitation
+                        %span.toggle-switch-control.round
-                %td.actions= button_to 'retirer',
+                        %span.toggle-switch-label.on
-                  admin_procedure_expert_path(id: expert_procedure, procedure: @procedure),
+                        %span.toggle-switch-label.off
-                  method: :delete,
+                - if @procedure.experts_require_administrateur_invitation
-                  data: { confirm: "Êtes-vous sûr de vouloir révoquer l'expert « #{expert_procedure.expert.email} » de la démarche #{expert_procedure.procedure.libelle} ? Les instructeurs ne pourront plus lui demander d’avis" },
+                  %td.actions= button_to 'retirer',
-                  class: 'button'
+                    admin_procedure_expert_path(id: expert_procedure, procedure: @procedure),
+                    method: :delete,
+                    data: { confirm: "Êtes-vous sûr de vouloir révoquer l'expert « #{expert_procedure.expert.email} » de la démarche #{expert_procedure.procedure.libelle} ? Les instructeurs ne pourront plus lui demander d’avis" },
+                    class: 'fr-btn fr-btn--secondary'
     - else
       .blank-tab
         %h2.empty-text Aucun expert invité pour le moment.

config/locales/views/administrateurs/experts_procedures/fr.yml

@@ -6,8 +6,11 @@ fr:
           main: Experts invités sur %{libelle}
           allow_invite_experts: "Autoriser les instructeurs à solliciter des experts invités"
           allow_expert_messaging: "Autoriser les experts à accéder à la messagerie usager"
-          manage_procedure_experts: "Gérer les experts invités de la démarche"
+          manage_procedure_experts: "Gérer les experts invités de la démarche avec une liste prédéfinie"
         descriptions:
           allow_invite_experts : Lorsque cette fonctionnalité est active, les instructeurs peuvent solliciter les experts
           allow_expert_messaging: Lorsque cette fonctionnalité est active, les experts peuvent demander des informations aux usagers
           manage_procedure_experts: Lorsque cette fonctionnalité est active, les instructeurs peuvent uniquement solliciter les experts de votre liste
+        experts_doc:
+          title: Avis externes documentation
+          url: 'https://app.gitbook.com/o/-L7_aClyGhmMzzsqtO4_/s/-L7_aKvpAJdAIEfxHudA/tutoriels/tutoriel-administrateur/~/comments?context=post&node=ff7bd481c1994d6aa56817b7237b9e59#id-12.-la-gestion-des-avis-experts-invites-de-votre-demarche'

spec/views/administrateurs/experts_procedures/index.html.haml_spec.rb

@@ -40,7 +40,7 @@ describe 'administrateurs/experts_procedures/index', type: :view do
 
   context 'when the experts_require_administrateur_invitation is false' do
     it 'authorize instructors to invite any expert' do
-      expect(rendered).not_to have_content "Affecter des experts à la démarche"
+      expect(rendered).not_to have_content "Entrez les adresses emails des experts que vous souhaitez ajouter à la liste prédéfinie"
     end
   end
 
@@ -50,7 +50,7 @@ describe 'administrateurs/experts_procedures/index', type: :view do
       subject
     end
     it 'does not authorize instructors to invite any expert but only those presents in admin list' do
-      expect(rendered).to have_content "Affecter des experts à la démarche"
+      expect(rendered).to have_content "Entrez les adresses emails des experts que vous souhaitez ajouter à la liste prédéfinie"
     end
   end
 end