views: improve the state button

- Turn the "accepted" infos into standard dropdown sections
- Display the justificatif even if there is no motivation

app/assets/images/icons/download.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="20"><path d="M11.5 8H15l-7 7-7-7h3.5V1h7zM1 19h14" stroke="#0069cc" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" fill="#fff" fill-opacity=".981" fill-rule="evenodd"/></svg>

app/assets/images/icons/justificatif.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><g fill="none" fill-rule="evenodd"><path d="M0 0h24v24H0z"/><path d="M20 7V3a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v18c0 1.1.901 2 2 2h12c1.099 0 2-.9 2-2V7" stroke-linecap="round" stroke-linejoin="round" stroke="#0069CC" stroke-width="2"/></g><g fill="none" fill-rule="evenodd"><path d="M4.877 2.014h14.607V16.62H4.877z"/><path d="M8.563 12.523l2.977 3.385 3.944-6.903" stroke="#0069cc" stroke-width="1.9998924599999999" stroke-linecap="round" stroke-linejoin="round"/></g></svg>

app/assets/images/icons/preview.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><g data-name="Layer 78" transform="matrix(1.59996 0 0 1.57052 -3.2 -2.846)" fill="#0069cc"><circle cx="12" cy="12" r="2"/><path d="M21.92 11.62a10.74 10.74 0 0 0-19.84 0 .94.94 0 0 0 0 .76 10.74 10.74 0 0 0 19.84 0 .94.94 0 0 0 0-.76zM12 16a4 4 0 1 1 4-4 4 4 0 0 1-4 4z"/></g></svg>

app/assets/stylesheets/new_design/buttons.scss

@@ -206,7 +206,6 @@
     border-bottom: 1px solid $border-grey;
     font-size: 12px;
     min-width: 300px;
-    cursor: pointer;
 
     &.selected {
       cursor: default;
@@ -217,8 +216,9 @@
     }
 
     &.selected,
-    &:hover {
+    &:hover:not(.inactive) {
       background: $light-grey;
+      cursor: pointer;
     }
 
     &.danger {
@@ -267,8 +267,9 @@
     margin-bottom: $default-spacer;
   }
 
-  &.with-top-border {
+  p + h4,
-    border-top: 1px solid $grey;
+  p + p, {
+    margin-top: $default-spacer;
   }
 }
 

app/assets/stylesheets/new_design/icons.scss

@@ -63,7 +63,15 @@
     background-image: image-url("icons/attachment.svg");
   }
 
+  &.preview {
+    background-image: image-url("icons/preview.svg");
+  }
+
   &.download {
+    background-image: image-url("icons/download.svg");
+  }
+
+  &.download-white {
     background-image: image-url("icons/download-white.svg");
   }
 
@@ -71,6 +79,11 @@
     background-image: image-url("icons/lock.svg");
   }
 
+  &.justificatif {
+    background-image: image-url("icons/justificatif.svg");
+  }
+
+
   &.printer {
     background-image: image-url("icons/printer.svg");
   }

app/assets/stylesheets/new_design/patron.scss

@@ -5,7 +5,7 @@
     margin-bottom: 20px;
   }
 
-  .icon.download {
+  .icon.download-white {
     background-color: $blue;
     box-shadow: 0px 0px 1px 2px $blue;
   }

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

@@ -4,7 +4,7 @@
     = dossier_display_state dossier
 
   -# Dropdown content
-  .dropdown-content.fade-in-down{ class: ('terminated' if dossier.termine?) }
+  .dropdown-content.fade-in-down
 
     - if dossier.en_construction?
       -# ------------------------------------------------------
@@ -75,18 +75,30 @@
       -# ---------------------------------------------------
       -# TERMINÉ
       -# ---------------------------------------------------
-      -# TODO: turn the motivation and attestation into regular dropdown items
+      %ul.dropdown-items
-      - if dossier.motivation.present?
+        - if dossier.motivation.present?
-        %h4.title Motivation
+          %li.inactive
-        %p.dossier-motivation= dossier.motivation
+            %span.icon.info
-        = render partial: 'users/dossiers/show/download_justificatif', locals: { dossier: dossier }
+            .dropdown-description
+              %h4 Motivation
+              %p « #{dossier.motivation} »
 
-      - if dossier.attestation.present?
+        - if dossier.justificatif_motivation.attached?
-        %h4.title Attestation
+          %li.inactive
-        %p.attestation L'acceptation du dossier a envoyé automatiquement une attestation au demandeur
+            %span.icon.justificatif
-        = link_to "Voir l'attestation", attestation_instructeur_dossier_path(dossier.procedure, dossier), target: '_blank', rel: 'noopener', class: 'button'
+            .dropdown-description
+              %h4 Justificatif
+              %p Ce justificatif joint par l’instructeur a été envoyé au demandeur.
+              = render partial: 'users/dossiers/show/download_justificatif', locals: { dossier: dossier }
+
+        - if dossier.attestation.present?
+          %li
+            = link_to attestation_instructeur_dossier_path(dossier.procedure, dossier), target: '_blank', rel: 'noopener' do
+              %span.icon.preview
+              .dropdown-description
+                %h4 Voir l’attestation
+                %p Cette attestation a été envoyée automatiquement au demandeur.
 
-      %ul.dropdown-items.with-top-border
         %li
           = link_to repasser_en_instruction_instructeur_dossier_path(dossier.procedure, dossier), method: :post, data: { remote:true, confirm: "Voulez vous remettre le dossier #{dossier.id} en instruction ?" } do
             %span.icon.in-progress

app/views/root/patron.html.haml

@@ -16,6 +16,7 @@
     %span.icon.bubble
     %span.icon.attachment
     %span.icon.lock
+    %span.icon.justificatif
     %span.icon.printer
     %span.icon.account
     %span.icon.person
@@ -29,7 +30,9 @@
     %span.icon.help
     %span.icon.phone
     %span.icon.clock
+    %span.icon.preview
     %span.icon.download
+    %span.icon.download-white
     %span.icon.move-handle
     %span.icon.frown
     %span.icon.meh

app/views/users/dossiers/show/_status_overview.html.haml

@@ -62,7 +62,7 @@
         - if dossier.attestation.present?
           .action
             = link_to attestation_dossier_path(dossier), target: '_blank', rel: 'noopener', class: 'button primary' do
-              %span.icon.download
+              %span.icon.download-white
               Télécharger l’attestation
 
 

spec/factories/dossier.rb

@@ -145,6 +145,15 @@ FactoryBot.define do
       end
     end
 
+    trait :with_justificatif do
+      after(:create) do |dossier, _evaluator|
+        dossier.justificatif_motivation.attach(
+          io: StringIO.new('Hello World'),
+          filename: 'hello.txt'
+        )
+      end
+    end
+
     trait :with_all_champs do
       after(:create) do |dossier, _evaluator|
         dossier.champs = dossier.procedure.types_de_champ.map do |type_de_champ|

spec/views/instructeur/dossiers/_state_button.html.haml_spec.rb

@@ -77,10 +77,10 @@ describe 'instructeurs/dossiers/state_button.html.haml', type: :view do
     end
 
     context 'with a motivation' do
-      let(:dossier) { create :dossier, state, motivation: 'Correspond au programme' }
+      let(:dossier) { create :dossier, state, :with_motivation }
 
       it 'displays the motivation text' do
-        expect(rendered).to have_content('Motivation')
+        expect(rendered).to have_dropdown_item('Motivation')
         expect(rendered).to have_content(dossier.motivation)
       end
     end
@@ -89,10 +89,23 @@ describe 'instructeurs/dossiers/state_button.html.haml', type: :view do
       let(:dossier) { create :dossier, state, :with_attestation }
 
       it 'provides a link to the attestation' do
-        expect(rendered).to have_content('Attestation')
+        expect(rendered).to have_dropdown_item('Voir l’attestation')
         expect(rendered).to have_link(href: attestation_instructeur_dossier_path(dossier.procedure, dossier))
       end
     end
+
+    context 'with a justificatif' do
+      let(:dossier) do
+        dossier = create(:dossier, state, :with_justificatif)
+        dossier.justificatif_motivation.blob.update(metadata: dossier.justificatif_motivation.blob.metadata.merge(virus_scan_result: ActiveStorage::VirusScanner::SAFE))
+        dossier
+      end
+
+      it 'allows to download the justificatif' do
+        expect(rendered).to have_dropdown_item('Justificatif')
+        expect(rendered).to have_link(href: url_for(dossier.justificatif_motivation.attachment.blob))
+      end
+    end
   end
 
   context 'accepte' do