style(attachments): better UX when we can try to upload without network

app/assets/stylesheets/attachment.scss

@@ -1,12 +1,13 @@
 @import "colors";
 @import "constants";
 
-.attachment-error {
+.attachment-error,
+.attachment-upload-error {
   position: relative;
 
   &::before {
     box-shadow: inset 2px 0 0 0 var(--border-plain-error);
-    height: 2rem; // height of button
+    height: 100%;
     content: "";
     left: -0.75rem;
     position: absolute;
@@ -16,7 +17,9 @@
   .attachment-filename {
     color: var(--text-default-error);
   }
+}
 
+.attachment-error {
   .fr-error-text {
     margin-top: 0.5rem;
   }

app/components/attachment/edit_component.rb

@@ -98,7 +98,7 @@ class Attachment::EditComponent < ApplicationComponent
   def retry_button_options
     {
       type: 'button',
-      class: 'fr-btn fr-btn--sm fr-btn--tertiary fr-mt-1w fr-icon-refresh-line fr-btn--icon-left attachment-error-retry',
+      class: 'fr-btn fr-btn--sm fr-btn--tertiary fr-mt-1w attachment-upload-error-retry',
       data: { input_target: ".#{attachment_input_class}", action: 'autosave#onClickRetryButton' }
     }
   end

app/components/attachment/edit_component/edit_component.fr.yml

@@ -2,7 +2,7 @@
 fr:
   max_file_size: "Taille maximale : %{max_file_size}."
   allowed_formats: "Formats supportés : %{formats}"
-  retry: Ré-essayer
+  retry: Réessayer
   delete: Supprimer
   errors:
     uploading: "Une erreur s’est produite pendant l’envoi du fichier."

app/components/attachment/edit_component/edit_component.html.haml

@@ -32,8 +32,8 @@
         .fr-mt-2w
           = render component
 
-  .attachment-error.hidden
-    %p.fr-error-text= t('.errors.uploading')
-    = button_tag(**retry_button_options) do
-      = t(".retry")
+    .attachment-upload-error.hidden
+      %p.fr-error-text= t('.errors.uploading')
+      = button_tag(**retry_button_options) do
+        = t(".retry")
 

app/javascript/shared/activestorage/auto-upload.ts

@@ -119,7 +119,7 @@ export class AutoUpload {
   get errorElement() {
     return this.#input
       .closest('.attachment')
-      ?.querySelector<HTMLElement>('.attachment-error');
+      ?.querySelector<HTMLElement>('.attachment-upload-error');
   }
 
   get errorTitleElement() {
@@ -131,7 +131,7 @@ export class AutoUpload {
 
   get errorRetryButton() {
     const element = this.errorElement?.querySelector<HTMLButtonElement>(
-      '.attachment-error-retry'
+      '.attachment-upload-error-retry'
     );
     invariant(element, 'Could not find the error retry button element.');
     return element;

spec/system/users/brouillon_spec.rb

@@ -220,13 +220,13 @@ describe 'The user' do
     end
     attach_file('Pièce justificative 1', Rails.root + 'spec/fixtures/files/file.pdf')
     expect(page).to have_css('p', text: "Une erreur est survenue", visible: :visible, wait: 5)
-    expect(page).to have_button('Ré-essayer', visible: true)
+    expect(page).to have_button('Réessayer', visible: true)
     expect(page).to have_button('Déposer le dossier', disabled: false)
 
     allow_any_instance_of(Champs::PieceJustificativeController).to receive(:update).and_call_original
 
     # Test that retrying after a failure works
-    click_on('Ré-essayer', visible: true, wait: 5)
+    click_on('Réessayer', visible: true, wait: 5)
     expect(page).to have_text('Analyse antivirus en cours', wait: 5)
     expect(page).to have_text('file.pdf')
     expect(page).to have_button('Déposer le dossier', disabled: false)