Merge pull request #8810 from demarches-simplifiees/ask-avis-remove-specific-css-v2

[UX] améliorer UX de la demande d'avis - partie 2 CSS

app/assets/stylesheets/02_utils.scss

@@ -143,6 +143,11 @@
   vertical-align: super;
 }
 
+.border-left {
+  border-left: 4px solid var(--background-contrast-grey);
+  padding-left: $default-padding;
+}
+
 // Labels that we only want for screen readers
 // https://www.coolfields.co.uk/2016/05/text-for-screen-readers-only-updated/
 .sr-only {

app/assets/stylesheets/avis.scss

@@ -1,120 +0,0 @@
-@import "colors";
-@import "constants";
-
-.give-avis {
-  .lock {
-    margin-right: $default-spacer;
-  }
-
-  h2 {
-    margin-bottom: $default-padding;
-    font-size: 16px;
-
-    .email {
-      font-weight: bold;
-    }
-  }
-
-  .introduction {
-    margin-bottom: $default-padding;
-  }
-
-  .confidentiel {
-    color: $dark-grey;
-    font-weight: normal;
-    margin-bottom: 2 * $default-padding;
-  }
-
-  .date {
-    font-size: 12px;
-    color: $dark-grey;
-    float: right;
-  }
-}
-
-.ask-avis {
-  margin-bottom: 2 * $default-padding;
-
-  .avis-notice {
-    font-size: 14px;
-    color: $dark-grey;
-    margin-bottom: 2 * $default-padding;
-  }
-
-  input[type=email] {
-    max-width: 500px;
-  }
-
-  form > label {
-    display: inline-block;
-  }
-
-  .confidentiel {
-    color: $dark-grey;
-    font-weight: normal;
-    margin-bottom: 2 * $default-padding;
-  }
-
-  .confidentiel-wrapper {
-    label,
-    select {
-      display: inline-block;
-    }
-  }
-
-  .lock {
-    margin-right: $default-spacer;
-  }
-}
-
-.list-avis {
-  ul {
-    padding-inline-start: 0;
-  }
-
-  .one-avis {
-    border-top: 1px solid $grey;
-    padding: $default-padding 0;
-
-    .lock {
-      margin-right: $default-spacer;
-    }
-
-    h2 {
-      margin-bottom: $default-spacer;
-      font-size: 16px;
-
-      .email {
-        font-weight: bold;
-      }
-    }
-
-    .answer {
-      margin-top: $default-padding;
-    }
-
-    .answer-body p:not(:last-of-type) {
-      margin-bottom: $default-padding;
-    }
-
-    .avis-icon {
-      margin-right: $default-spacer;
-    }
-
-    .confidentiel {
-      color: $dark-grey;
-      font-size: 12px;
-
-      .lock {
-        width: 12px;
-        height: 12px;
-        background-size: 12px 12px;
-        vertical-align: sub;
-      }
-    }
-  }
-
-  .date {
-    float: right;
-  }
-}

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

@@ -8,7 +8,7 @@
       = render partial: 'sidemenu'
     .fr-col
       - if @dossier.avis_for_expert(current_expert).present?
-        = render partial: 'experts/avis/shared/list', locals: { avis: @dossier.avis_for_expert(current_expert), avis_seen_at: nil }
+        = render partial: 'shared/avis/list', locals: { avis: @dossier.avis_for_expert(current_expert), avis_seen_at: nil, expert_or_instructeur: current_expert }
 
       - else
         %h2.empty-text

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

@@ -8,7 +8,13 @@
       = render partial: 'sidemenu'
     .fr-col
       - if !@dossier.termine?
-        = render partial: "experts/avis/shared/form", locals: { url: avis_expert_avis_path(@avis.procedure, @avis), linked_dossiers: @dossier.linked_dossiers_for(current_expert), must_be_confidentiel: @avis.confidentiel?, avis: @new_avis }
+        - if @dossier.procedure.allow_expert_review
+          = render partial: "shared/avis/form", locals: { url: avis_expert_avis_path(@avis.procedure, @avis), linked_dossiers: @dossier.linked_dossiers_for(current_expert), must_be_confidentiel: @avis.confidentiel?, avis: @new_avis }
+        - else
+          %h2.empty-text
+            = t('helpers.information_text.unauthorized_avis_text')
+          %p.empty-text-details
+            = t('helpers.information_text.unauthorized_avis_text_detail')
       - else
         %h2.empty-text
           = t('helpers.information_text.no_new_avis_text')

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

@@ -10,15 +10,15 @@
       - if !@dossier.termine?
         %section.give-avis
           %h1.tab-title Donner votre avis
-          %h2.claimant
+          %h2.fr-text--sm.fr-mb-2w
             Demandeur :
             %span.email.font-weight-normal= safe_claimant_email(@avis.claimant)
-            %span.date.font-weight-normal Demande d’avis envoyée le #{l(@avis.created_at, format: '%d/%m/%y')}
+            %span.fr-text--xs.fr-text-mention--grey.pull-right Demande d’avis envoyée le #{l(@avis.created_at, format: '%d/%m/%y')}
           %p.introduction= @avis.introduction
 
           - if @avis.introduction_file.attached?
             = render Attachment::ShowComponent.new(attachment: @avis.introduction_file.attachment)
-          %br/
+
           = render Attachment::DeleteFormComponent.new
           = form_for @avis, url: expert_avis_path(@avis.procedure, @avis), html: { data: { controller: 'persisted-form', persisted_form_key_value: dom_id(@avis) }, multipart: true } do |f|
 
@@ -43,10 +43,8 @@
 
             = render Attachment::EditComponent.new(attached_file: @avis.piece_justificative_file, view_as: :download)
 
-            .flex.justify-between.align-baseline
+            %p.confidentiel
-              %p.confidentiel.flex
               - if @avis.confidentiel?
-                  %span.icon.lock
                 %span
                   Cet avis est confidentiel et n’est pas affiché aux autres experts consultés
               - else

app/views/experts/avis/shared/_form.html.haml

@@ -1,39 +0,0 @@
-- if !@dossier.procedure.experts_require_administrateur_invitation?
-  %section.ask-avis
-    %h1.tab-title Inviter des personnes à donner leur avis
-    %p.avis-notice Les invités pourront consulter le dossier, donner un avis et contribuer au fil de messagerie. Ils ne pourront pas modifier le dossier.
-    = render Attachment::DeleteFormComponent.new
-    = form_for avis, url: url, html: { multipart: true, data: { controller: 'persisted-form', persisted_form_key_value: dom_id(@avis.dossier, :avis_by_expert) } } do |f|
-      = hidden_field_tag  'avis[emails]', nil
-      .fr-input-group
-        = react_component("ComboMultiple",
-            options: [], selected: [], disabled: [],
-            group: '.ask-avis',
-            name: 'emails',
-            label: 'Emails',
-            acceptNewValues: true)
-      .fr-input-group
-        = f.text_area :introduction, rows: 3, class: 'fr-input', value: avis.introduction || 'Bonjour, merci de me donner votre avis sur ce dossier.', required: true
-      %p.tab-title Ajouter une pièce jointe
-      .form-group
-        = render Attachment::EditComponent.new(attached_file: avis.introduction_file)
-
-      - if linked_dossiers.present?
-        = f.check_box :invite_linked_dossiers, {}, true, false
-        = f.label :invite_linked_dossiers, t('helpers.label.invite_linked_dossiers', count: linked_dossiers.length, ids: linked_dossiers.map(&:id).to_sentence)
-
-      .flex.justify-between.align-baseline
-        - if must_be_confidentiel
-          %p.confidentiel.flex
-            %span.icon.lock
-            %span
-              Cet avis sera confidentiel : il ne sera pas affiché aux autres experts consultés, mais sera visible par les instructeurs.
-
-        - else
-          .confidentiel-wrapper
-            = f.label :confidentiel, 'Cet avis sera ', class: 'fr-label'
-            = f.select :confidentiel, [['partagé avec les autres experts', false], ['confidentiel', true]], {}, onchange: "javascript:DS.toggleCondidentielExplanation(event);", class: 'fr-input'
-            .confidentiel-explanation.hidden
-              Il ne sera pas affiché aux autres experts consultés, mais sera visible par les instructeurs.
-
-      = f.submit 'Demander un avis', class: 'fr-btn fr-mt-2w'

app/views/experts/avis/shared/_list.html.haml

@@ -1,42 +0,0 @@
-%section.list-avis
-  %h1.tab-title
-    Avis des invités
-    %span.fr-badge= avis.count
-
-  %ul
-    - avis.each do |avis|
-      %li.one-avis.flex.align-start
-        .width-100
-          %h2.claimant.fr-font--md.font-weight-normal
-            = "#{t('claimant', scope: 'activerecord.attributes.avis')} :"
-            %span.font-weight-bold= (safe_claimant_email(avis.claimant) == current_expert.email) ? 'Vous' : safe_claimant_email(avis.claimant)
-            - if avis.confidentiel?
-              %span.confidentiel
-                = t('confidentiel', scope: 'activerecord.attributes.avis')
-                %span.icon.lock{ title: t('confidentiel', scope: 'helpers.hint') }
-            %span.date.fr-text--xs.fr-text-mention--grey{ class: highlight_if_unseen_class(avis_seen_at, avis.created_at) }
-              = t('demande_envoyee_le', scope: 'views.shared.avis', date: l(avis.created_at, format: '%d/%m/%y à %H:%M'))
-          %p= avis.introduction
-          - if avis.question_label
-            %p= avis.question_label
-
-          .answer.flex.align-start
-            %span.icon.bubble.avis-icon
-            .width-100
-              %h2.instructeur.fr-font--md.font-weight-normal
-                = (avis.expert.email == current_expert.email) ? 'Vous' : avis.expert.email
-                - if avis.answer.present?
-                  - if avis.revoked?
-                    %span.fr-text--xs.fr-text-mention--grey{ class: highlight_if_unseen_class(avis_seen_at, avis.revoked_at) }
-                      = t('demande_revoquee_le', scope: 'views.shared.avis', date: l(avis.revoked_at, format: '%d/%m/%y à %H:%M'))
-                  %span.date.fr-text--xs.fr-text-mention--grey{ class: highlight_if_unseen_class(avis_seen_at, avis.updated_at) }
-                    = t('reponse_donnee_le', scope: 'views.shared.avis', date: l(avis.updated_at, format: '%d/%m/%y à %H:%M'))
-                - else
-                  %span.fr-text--xs.fr-text-mention--grey
-                    = t('en_attente', scope: 'views.shared.avis')
-              - if avis.piece_justificative_file.attached?
-                = render Attachment::ShowComponent.new(attachment: avis.piece_justificative_file.attachment)
-              .answer-body
-                - if [true, false].include? avis.question_answer
-                  %p= t("question_answer.#{avis.question_answer}", scope: 'helpers.label')
-                = render SimpleFormatComponent.new(avis.answer, allow_a: false)

app/views/instructeurs/avis/_list.html.haml

@@ -1,59 +0,0 @@
-%section.list-avis
-  %h1.tab-title
-    Avis des invités
-    %span.fr-badge= avis.count
-
-  %ul
-    - avis.each do |avis|
-      %li.one-avis.flex.align-start
-        .width-100
-          %h2.claimant.fr-font--md.font-weight-normal
-            = "#{t('claimant', scope: 'activerecord.attributes.avis')} :"
-            %span.font-weight-bold= (avis.claimant.email == current_instructeur.email) ? 'Vous' : avis.claimant.email
-            - if avis.confidentiel?
-              %span.confidentiel
-                = t('confidentiel', scope: 'activerecord.attributes.avis')
-                %span.icon.lock{ title: t('confidentiel', scope: 'helpers.hint') }
-            %span.date.fr-text--xs.fr-text-mention--grey{ class: highlight_if_unseen_class(avis_seen_at, avis.created_at) }
-              = t('demande_envoyee_le', scope: 'views.shared.avis', date: l(avis.created_at, format: '%d/%m/%y à %H:%M'))
-          %p= avis.introduction
-          - if avis.question_label
-            %p= avis.question_label
-
-          .answer.flex.align-start
-            %span.icon.bubble.avis-icon
-            .width-100
-              %h2.instructeur.fr-font--md.font-weight-normal
-                = (avis.expert.email == current_instructeur.email) ? 'Vous' : avis.expert.email
-                - if avis.answer.present?
-                  - if avis.revoked?
-                    %span.fr-text--xs.fr-text-mention--grey{ class: highlight_if_unseen_class(avis_seen_at, avis.revoked_at) }
-                      = t('demande_revoquee_le', scope: 'views.shared.avis', date: l(avis.revoked_at, format: '%d/%m/%y à %H:%M'))
-                  - else
-                    - if avis.revokable_by?(current_instructeur)
-                      %span.fr-text--xs.fr-text-mention--grey= link_to(t('revoke', scope: 'helpers.label'), revoquer_instructeur_avis_path(avis.procedure, avis), data: { confirm: t('revoke', scope: 'helpers.confirmation', email: avis.expert.email) }, method: :patch)
-                  %span.date.fr-text--xs.fr-text-mention--grey{ class: highlight_if_unseen_class(avis_seen_at, avis.updated_at) }
-                    = t('reponse_donnee_le', scope: 'views.shared.avis', date: l(avis.updated_at, format: '%d/%m/%y à %H:%M'))
-                - else
-                  %span.fr-text--xs.fr-text-mention--grey
-                    = t('en_attente', scope: 'views.shared.avis')
-                    |
-                    %span= link_to(t('remind', scope: 'helpers.label'), remind_instructeur_avis_path(avis.procedure, avis), data: { confirm: t('remind', scope: 'helpers.confirmation', email: avis.expert.email) })
-                    - if avis.revokable_by?(current_instructeur)
-                      |
-                      = link_to(t('revoke', scope: 'helpers.label'), revoquer_instructeur_avis_path(avis.procedure, avis), data: { confirm: t('revoke', scope: 'helpers.confirmation', email: avis.expert.email) }, method: :patch)
-                  - if avis.reminded_at
-                    %span.date.fr-text--xs.fr-text-mention--grey{ class: highlight_if_unseen_class(avis_seen_at, avis.reminded_at) }
-                      = t('relance_effectuee_le', scope: 'views.shared.avis', date: l(avis.reminded_at, format: '%d/%m/%y à %H:%M'))
-              - if avis.introduction_file.attached?
-                = render Attachment::ShowComponent.new(attachment: avis.introduction_file.attachment)
-                .answer-body.mb-3
-                  %p #{t('views.instructeurs.avis.introduction_file_explaination')} #{avis.claimant.email}
-
-              - if avis.piece_justificative_file.attached?
-                = render Attachment::ShowComponent.new(attachment: avis.piece_justificative_file.attachment)
-              .answer-body
-                - if [true, false].include? avis.question_answer
-                  %p= t("question_answer.#{avis.question_answer}", scope: 'helpers.label')
-
-                = render SimpleFormatComponent.new(avis.answer, allow_a: false)

app/views/instructeurs/dossiers/avis.html.haml

@@ -8,7 +8,7 @@
       = render partial: 'instructeurs/avis/sidemenu'
     .fr-col
       - if @dossier.avis.present?
-        = render partial: 'instructeurs/avis/list', locals: { avis: @dossier.avis, avis_seen_at: @avis_seen_at }
+        = render partial: 'shared/avis/list', locals: { avis: @dossier.avis, avis_seen_at: @avis_seen_at, expert_or_instructeur: current_instructeur }
 
       - else
         %h2.empty-text

app/views/instructeurs/dossiers/avis_new.html.haml

@@ -9,7 +9,7 @@
     .fr-col
       - if !@dossier.termine?
         - if @dossier.procedure.allow_expert_review
-          = render partial: "instructeurs/avis/form", locals: { url: avis_instructeur_dossier_path(@dossier.procedure, @dossier), linked_dossiers: @dossier.linked_dossiers_for(current_instructeur), must_be_confidentiel: false, avis: @avis }
+          = render partial: "shared/avis/form", locals: { url: avis_instructeur_dossier_path(@dossier.procedure, @dossier), linked_dossiers: @dossier.linked_dossiers_for(current_instructeur), must_be_confidentiel: false, avis: @avis }
         - else
           %h2.empty-text
             = t('helpers.information_text.unauthorized_avis_text')

app/views/shared/avis/_list.html.haml

@@ -0,0 +1,63 @@
+%section
+  %h1.tab-title
+    Avis des invités
+    %span.fr-badge= avis.count
+
+  %ul.list-style-type-none.fr-p-0
+    - avis.each do |avis|
+      %li
+        %h2.fr-text--sm.fr-mb-2w
+          %span.fr-icon-questionnaire-line.fr-mr-1v
+          = "#{t('claimant', scope: 'activerecord.attributes.avis')} :"
+          %span= (avis.claimant.email == expert_or_instructeur.email) ? 'Vous' : avis.claimant.email
+          - if avis.confidentiel?
+            %span.fr-badge.fr-badge--sm.fr-badge--warning.fr-badge--no-icon
+              = t('confidentiel', scope: 'activerecord.attributes.avis')
+
+          %span.fr-text--xs.fr-text-mention--grey.pull-right{ class: highlight_if_unseen_class(avis_seen_at, avis.created_at) }
+            = t('demande_envoyee_le', scope: 'views.shared.avis', date: l(avis.created_at, format: '%d/%m/%y à %H:%M'))
+
+        .border-left
+          %p= avis.introduction
+          - if avis.question_label
+            %p= avis.question_label
+
+        %h2.fr-text--sm.fr-mt-5w.fr-mb-2w
+          %span.fr-icon-message-2-line.fr-mr-1v
+          = (avis.expert.email == expert_or_instructeur.email) ? 'Vous' : avis.expert.email
+          - if avis.answer.present?
+            - if avis.revoked?
+              %span.fr-badge.fr-badge--sm{ class: highlight_if_unseen_class(avis_seen_at, avis.revoked_at) }
+                = t('demande_revoquee_le', scope: 'views.shared.avis', date: l(avis.revoked_at, format: '%d/%m/%y à %H:%M'))
+
+            %span.fr-text--xs.fr-text-mention--grey.pull-right{ class: highlight_if_unseen_class(avis_seen_at, avis.updated_at) }
+              = t('reponse_donnee_le', scope: 'views.shared.avis', date: l(avis.updated_at, format: '%d/%m/%y à %H:%M'))
+          - else
+            %span.fr-badge.fr-badge--sm
+              = t('en_attente', scope: 'views.shared.avis')
+
+        .fr-mb-2w
+          - if avis.reminded_at
+            %span.date.fr-text--xs.fr-text-mention--grey{ class: highlight_if_unseen_class(avis_seen_at, avis.reminded_at) }
+              = t('relance_effectuee_le', scope: 'views.shared.avis', date: l(avis.reminded_at, format: '%d/%m/%y à %H:%M'))
+          - if expert_or_instructeur.is_a?(Instructeur)
+            - if avis.answer.blank?
+              = link_to(t('remind', scope: 'helpers.label'), remind_instructeur_avis_path(avis.procedure, avis), class:'fr-btn fr-btn--sm fr-btn--tertiary-no-outline', data: { confirm: t('remind', scope: 'helpers.confirmation', email: avis.expert.email) })
+
+              - if avis.revokable_by?(expert_or_instructeur)
+                = link_to(t('revoke', scope: 'helpers.label'), revoquer_instructeur_avis_path(avis.procedure, avis), class:'fr-btn fr-btn--sm fr-btn--tertiary-no-outline', data: { confirm: t('revoke', scope: 'helpers.confirmation', email: avis.expert.email) }, method: :patch)
+
+        .border-left
+          - if avis.introduction_file.attached?
+            = render Attachment::ShowComponent.new(attachment: avis.introduction_file.attachment)
+            .fr-mb-2w
+              %p #{t('views.instructeurs.avis.introduction_file_explaination')} #{avis.claimant.email}
+
+          - if avis.piece_justificative_file.attached?
+            = render Attachment::ShowComponent.new(attachment: avis.piece_justificative_file.attachment)
+          .fr-mb-2w
+            - if [true, false].include? avis.question_answer
+              %p= t("question_answer.#{avis.question_answer}", scope: 'helpers.label')
+
+            = render SimpleFormatComponent.new(avis.answer, allow_a: false)
+      %hr.fr-mt-2w.fr-mb-2w

config/locales/models/avis/en.yml

@@ -21,8 +21,6 @@ en:
       question_answer:
         true: 'yes'
         false: 'no'
-    hint:
-      confidentiel: "This advice is not displayed to the others consulted experts"
     confirmation:
       revoke: "Would you like to revoke the opinion request to %{email} ?"
       remind: "Would you like to remind %{email} ?"

config/locales/models/avis/fr.yml

@@ -21,8 +21,6 @@ fr:
       question_answer:
         true: oui
         false: non
-    hint:
-      confidentiel: "Cet avis n’est pas affiché avec les autres experts consultés"
     confirmation:
       revoke: "Souhaitez-vous révoquer la demande d’avis à %{email} ?"
       remind: "Souhaitez-vous relancer %{email} ?"

spec/system/instructeurs/expert_spec.rb

@@ -39,7 +39,7 @@ describe 'Inviting an expert:', js: true do
 
       expect(page).to have_content('Une demande d’avis a été envoyée')
       expect(page).to have_content('Avis des invités')
-      within('.list-avis') do
+      within('section') do
         expect(page).to have_content(expert.email.to_s)
         expect(page).to have_content(expert2.email.to_s)
         expect(page).to have_content('Bonjour, merci de me donner votre avis sur ce dossier.')

spec/views/shared/avis/list.html.haml_spec.rb

@@ -1,7 +1,7 @@
-describe 'instructeurs/avis/_list.html.haml', type: :view do
+describe 'shared/avis/_list.html.haml', type: :view do
   before { view.extend DossierHelper }
 
-  subject { render 'instructeurs/avis/list.html.haml', avis: avis, avis_seen_at: seen_at, current_instructeur: instructeur }
+  subject { render 'shared/avis/list.html.haml', avis: avis, avis_seen_at: seen_at, expert_or_instructeur: instructeur }
 
   let(:instructeur) { create(:instructeur) }
   let(:instructeur2) { create(:instructeur) }
@@ -26,9 +26,9 @@ describe 'instructeurs/avis/_list.html.haml', type: :view do
     let(:avis) { [create(:avis, :with_answer, claimant: instructeur, experts_procedure: experts_procedure)] }
 
     it 'renders the answer formatted with newlines' do
-      expect(subject).to have_selector(".answer-body p", text: avis.first.answer.split("\n").first)
+      expect(subject).to have_selector("p", text: avis.first.answer.split("\n").first)
-      expect(subject).to have_selector(".answer-body ul", count: 1) # avis.answer has two list item
+      expect(subject).to have_selector("ul.list-style-type-none ul", count: 1) # avis.answer has two list item
-      expect(subject).to have_selector(".answer-body ul li", count: 2)
+      expect(subject).to have_selector("ul.list-style-type-none ul li", count: 2)
     end
   end