views: refactor the attachment/edit view

Make it more reusable, by:

- Renaming `attachment/update` to `attachment/edit`
- Refactoring the CSS styles into their own stylesheet
- Allow to specify the 'accept' option

app/assets/stylesheets/new_design/attachment.scss

@@ -1,11 +1,11 @@
-@import "../constants";
+@import "constants";
 
-.piece-justificative-actions {
+.attachment-actions {
   display: flex;
   margin-bottom: $default-spacer;
 }
 
-.piece-justificative-action {
+.attachment-action {
   margin-right: $default-spacer;
 
   .button {
@@ -13,6 +13,6 @@
   }
 }
 
-.piece-justificative-input.hidden {
+.attachment-input.hidden {
   display: none;
 }

app/assets/stylesheets/new_design/forms.scss

@@ -104,7 +104,7 @@
   input[type=tel],
   textarea,
   select,
-  .piece-justificative {
+  .attachment {
     display: block;
     margin-bottom: 2 * $default-padding;
 

app/views/attachments/destroy.js.erb

@@ -1,3 +1,3 @@
 <%= render_flash(timeout: 5000, sticky: true) %>
-<%= remove_element("#piece_justificative_#{@attachment_id}") %>
+<%= remove_element("#attachment_#{@attachment_id}") %>
-<%= show_element("#piece_justificative_file_#{@attachment_id}") %>
+<%= show_element("#attachment_file_#{@attachment_id}") %>

app/views/attachments/show.js.erb

@@ -1,4 +1,4 @@
-<%= render_to_element(".pj-link[data-attachment-id=\"#{@attachment.id}\"]",
+<%= render_to_element(".attachment-link[data-attachment-id=\"#{@attachment.id}\"]",
   partial: 'shared/attachment/show',
   outer: true,
   locals: { attachment: @attachment, user_can_upload: @user_can_upload }) %>

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

@@ -13,7 +13,10 @@
 
     = form_for @avis, url: instructeur_avis_path(@avis), html: { class: 'form' } do |f|
       = f.text_area :answer, rows: 3, placeholder: 'Votre avis', required: true
-      = render partial: "shared/attachment/update", locals: { attachment: @avis.piece_justificative_file.attachment, user_can_destroy: true, form: f }
+      = render 'shared/attachment/edit',
+        { form: f,
+          attached_file: @avis.piece_justificative_file,
+          user_can_destroy: true }
 
       .flex.justify-between.align-baseline
         %p.confidentiel.flex

app/views/shared/attachment/_edit.html.haml

@@ -0,0 +1,29 @@
+-# Display a widget for uploading, editing and deleting a file attachment
+
+- attachment = attached_file.attachment
+- attachment_id = attachment ? attachment.id : SecureRandom.uuid
+- persisted = attachment && attachment.persisted?
+- accept = defined?(accept) ? accept : nil
+- user_can_destroy = defined?(user_can_destroy) ? user_can_destroy : false
+
+.attachment
+  - if defined?(template) && template.attached?
+    %p.mb-1
+      Veuillez télécharger, remplir et joindre
+      = link_to('le modèle suivant', url_for(template), target: '_blank', rel: 'noopener')
+
+  - if persisted
+    .attachment-actions{ id: "attachment_#{attachment_id}" }
+      .attachment-action
+        = render partial: "shared/attachment/show", locals: { attachment: attachment, user_can_upload: true }
+      - if user_can_destroy
+        .attachment-action
+          = link_to 'Supprimer', attachment_url(attachment.id, { signed_id: attachment.blob.signed_id }), remote: true, method: :delete, class: 'button small danger'
+      .attachment-action
+        = button_tag 'Remplacer', type: 'button', class: 'button small', data: { 'toggle-target': "#attachment_file_#{attachment_id}" }
+
+  = form.file_field attached_file.name,
+    id: "attachment_file_#{attachment_id}",
+    class: "attachment-input #{'hidden' if persisted}",
+    accept: accept,
+    direct_upload: true

app/views/shared/attachment/_show.html.haml

@@ -5,7 +5,7 @@
 - else
   - attachment_check_url = attachment_url(attachment.id, { signed_id: attachment.blob.signed_id, user_can_upload: user_can_upload })
 
-.pj-link{ 'data-attachment-id': attachment.id, 'data-attachment-check-url': attachment_check_url }
+.attachment-link{ 'data-attachment-id': attachment.id, 'data-attachment-check-url': attachment_check_url }
   - if should_display_link
     = link_to url_for(attachment.blob), target: '_blank', rel: 'noopener',  title: "Télécharger la pièce jointe" do
       %span.icon.attachment

app/views/shared/attachment/_update.html.haml

@@ -1,24 +0,0 @@
-.piece-justificative
-  - if defined?(template) && template.attached?
-    %p.edit-pj-template.mb-1
-      Veuillez télécharger, remplir et joindre
-      = link_to('le modèle suivant', url_for(template), target: '_blank', rel: 'noopener')
-
-  - attachment_id = attachment ? attachment.id : SecureRandom.uuid
-  - persisted = attachment && attachment.persisted?
-  - user_can_destroy = defined?(user_can_destroy) ? user_can_destroy : false
-
-  - if persisted
-    .piece-justificative-actions{ id: "piece_justificative_#{attachment_id}" }
-      .piece-justificative-action
-        = render partial: "shared/attachment/show", locals: { attachment: attachment, user_can_upload: true }
-      - if user_can_destroy
-        .piece-justificative-action
-          = link_to 'Supprimer', attachment_url(attachment.id, { signed_id: attachment.blob.signed_id }), remote: true, method: :delete, class: 'button small danger'
-      .piece-justificative-action
-        = button_tag 'Remplacer', type: 'button', class: 'button small', data: { 'toggle-target': "#piece_justificative_file_#{attachment_id}" }
-
-  = form.file_field :piece_justificative_file,
-    id: "piece_justificative_file_#{attachment_id}",
-    class: "piece-justificative-input #{'hidden' if persisted}",
-    direct_upload: true

app/views/shared/dossiers/editable_champs/_piece_justificative.html.haml

@@ -1 +1,4 @@
-= render partial: "shared/attachment/update", locals: { attachment: champ.piece_justificative_file.attachment, template: champ.type_de_champ.piece_justificative_template, user_can_destroy: true, form: form }
+= render 'shared/attachment/edit',
+  { form: form,
+    attached_file: champ.piece_justificative_file,
+    template: champ.type_de_champ.piece_justificative_template, user_can_destroy: true }

spec/features/instructeurs/expert_spec.rb

@@ -108,7 +108,7 @@ feature 'Inviting an expert:' do
       expect(page).to have_text('Cet avis est confidentiel')
 
       fill_in 'avis_answer', with: 'Ma réponse d’expert : c’est un oui.'
-      find('.piece-justificative input[type=file]').attach_file(Rails.root + 'spec/fixtures/files/RIB.pdf')
+      find('.attachment input[type=file]').attach_file(Rails.root + 'spec/fixtures/files/RIB.pdf')
       click_on 'Envoyer votre avis'
 
       expect(page).to have_content('Votre réponse est enregistrée')

spec/features/users/brouillon_spec.rb

@@ -169,25 +169,19 @@ feature 'The user' do
     # Mark file as scanned and clean
     attachment = ActiveStorage::Attachment.last
     attachment.blob.update(metadata: attachment.blob.metadata.merge(scanned_at: Time.zone.now, virus_scan_result: ActiveStorage::VirusScanner::SAFE))
-    within '.piece-justificative' do
+    within('.attachment') { click_on 'rafraichir' }
-      click_on 'rafraichir'
-    end
     expect(page).to have_link('file.pdf')
     expect(page).to have_no_content('analyse antivirus en cours')
 
     # Replace the attachment
-    within '.piece-justificative' do
+    within('.attachment') { click_on 'Remplacer' }
-      click_on 'Remplacer'
-    end
     find('.editable-champ-piece_justificative input[type=file]').attach_file(Rails.root + 'spec/fixtures/files/RIB.pdf')
     click_on 'Enregistrer le brouillon'
     expect(page).to have_no_text('file.pdf')
     expect(page).to have_text('RIB.pdf')
 
     # Remove the attachment
-    within '.piece-justificative' do
+    within('.attachment') { click_on 'Supprimer' }
-      click_on 'Supprimer'
-    end
     expect(page).to have_content('La pièce jointe a bien été supprimée')
     expect(page).to have_no_text('RIB.pdf')
   end

spec/views/shared/attachment/_update.html.haml_spec.rb

@@ -2,33 +2,37 @@ require 'rails_helper'
 
 describe 'shared/attachment/_update.html.haml', type: :view do
   let(:champ) { build(:champ_piece_justificative, dossier: create(:dossier)) }
-  let(:attachment) { nil }
+  let(:attached_file) { champ.piece_justificative_file }
-  let(:virus_scan_result) { nil }
   let(:user_can_destroy) { false }
 
   subject do
     form_for(champ.dossier) do |form|
-      render 'shared/attachment/update', {
+      render 'shared/attachment/edit', {
-        attachment: attachment,
+        form: form,
-        user_can_destroy: user_can_destroy,
+        attached_file: attached_file,
-        form: form
+        accept: 'image/png',
+        user_can_destroy: user_can_destroy
       }
     end
   end
 
-  it 'renders a form field for uploading a file' do
+  context 'when there is no attached file' do
-    expect(subject).to have_selector('input[type=file]:not(.hidden)')
+    before do
+      champ.piece_justificative_file.purge
+    end
+
+    it 'renders a form field for uploading a file' do
+      expect(subject).to have_selector('input[type=file]:not(.hidden)')
+    end
   end
 
   context 'when there is a attached file' do
-    let(:attachment) { champ.piece_justificative_file.attachment }
-
     it 'renders a form field for uploading a file' do
       expect(subject).to have_selector('input[type=file]:not(.hidden)')
     end
 
     it 'does not renders a link to the unsaved file' do
-      expect(subject).not_to have_content(attachment.filename.to_s)
+      expect(subject).not_to have_content(attached_file.filename.to_s)
     end
 
     it 'doesn’t render action buttons' do
@@ -40,7 +44,7 @@ describe 'shared/attachment/_update.html.haml', type: :view do
       before { champ.save! }
 
       it 'renders a link to the file' do
-        expect(subject).to have_content(attachment.filename.to_s)
+        expect(subject).to have_content(attached_file.filename.to_s)
       end
 
       it 'renders action buttons' do