Merge pull request #9710 from demarches-simplifiees/9615-form-autosave

ETQ admin, je peux savoir quand mon formulaire a été sauvegardé pour la dernière fois

app/components/types_de_champ_editor/estimated_fill_duration_component/estimated_fill_duration_component.html.haml

@@ -1,4 +1,4 @@
-%span.fill-duration{ id: dom_id(@revision, :estimated_fill_duration) }
+%span.fr-text--sm.fill-duration{ id: dom_id(@revision, :estimated_fill_duration) }
   - if show?
     = t('.estimated_fill_duration')
     = link_to "#{DOC_URL}/tutoriels/tutoriel-administrateur#g.-estimation-de-la-duree-de-remplissage", target: "_blank", rel: "noopener noreferrer" do

app/controllers/administrateurs/types_de_champ_controller.rb

@@ -10,8 +10,6 @@ module Administrateurs
         @coordinate = draft.coordinate_for(type_de_champ)
         @created = champ_component_from(@coordinate, focused: true)
         @morphed = champ_components_starting_at(@coordinate, 1)
-
-        flash.notice = "Formulaire enregistré"
       else
         flash.alert = type_de_champ.errors.full_messages
       end
@@ -28,8 +26,6 @@ module Administrateurs
       elsif type_de_champ.update(type_de_champ_update_params)
         @coordinate = draft.coordinate_for(type_de_champ)
         @morphed = champ_components_starting_at(@coordinate)
-
-        flash.notice = "Formulaire enregistré"
       else
         flash.alert = type_de_champ.errors.full_messages
       end
@@ -49,12 +45,10 @@ module Administrateurs
     end
 
     def move
-      flash.notice = "Formulaire enregistré"
       draft.move_type_de_champ(params[:stable_id], params[:position].to_i)
     end
 
     def move_up
-      flash.notice = "Formulaire enregistré"
       @coordinate = draft.move_up_type_de_champ(params[:stable_id])
       @destroyed = @coordinate
       @created = champ_component_from(@coordinate)
@@ -63,7 +57,6 @@ module Administrateurs
     end
 
     def move_down
-      flash.notice = "Formulaire enregistré"
       @coordinate = draft.move_down_type_de_champ(params[:stable_id])
       @destroyed = @coordinate
       @created = champ_component_from(@coordinate)
@@ -80,7 +73,6 @@ module Administrateurs
         flash.alert = errors
       else
         @coordinate = draft.remove_type_de_champ(params[:stable_id])
-        flash.notice = "Formulaire enregistré"
 
         if @coordinate.present?
           @destroyed = @coordinate

app/views/administrateurs/_autosave_notice.html.haml

@@ -0,0 +1 @@
+#autosave-notice.fr-badge.fr-badge--sm.fr-badge--success= t(".form_saved")

app/views/administrateurs/procedures/champs.html.haml

@@ -19,4 +19,5 @@
             %li
               = link_to t('preview', scope: [:layouts, :breadcrumb]), apercu_admin_procedure_path(@procedure), target: "_blank", rel: "noopener", class: 'fr-btn fr-btn--secondary'
         .fr-ml-auto
+          #autosave-notice.hidden
           = render TypesDeChampEditor::EstimatedFillDurationComponent.new(revision: @procedure.draft_revision, is_annotation: false)

app/views/administrateurs/types_de_champ/_insert.turbo_stream.haml

@@ -6,6 +6,11 @@
 
 = turbo_stream.replace 'errors-summary', render(TypesDeChampEditor::ErrorsSummary.new(revision: @procedure.draft_revision))
 
+- unless flash.alert
+  = turbo_stream.show 'autosave-notice'
+  = turbo_stream.replace 'autosave-notice', render(partial: 'administrateurs/autosave_notice')
+  = turbo_stream.hide 'autosave-notice', delay: 30000
+
 - if @destroyed.present?
   = turbo_stream.remove dom_id(@destroyed, :type_de_champ_editor)
 

config/locales/views/administrateurs/procedures/en.yml

@@ -51,3 +51,5 @@ en:
         dpd_part_4: How to do ? You can either send him the link to the procedure on test stage by email, or name him "administrator". In any case, publish your approach only after having had his opinion.
         back_to_procedure: 'Cancel and return to the procedure page'
         submit: Publish
+    autosave_notice:
+      form_saved: "Form saved"

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

@@ -51,3 +51,5 @@ fr:
         dpd_part_4: Comment faire ? Vous pouvez soit lui communiquer par email le lien vers la démarche en test, ou bien le nommer « administrateur ». Dans tous les cas, ne publiez votre démarche qu’après avoir eu son avis.
         back_to_procedure: 'Annuler et revenir à la page de la démarche'
         submit: Publier
+    autosave_notice:
+      form_saved: "Formulaire enregistré"

spec/support/system_helpers.rb

@@ -78,6 +78,12 @@ module SystemHelpers
     expect(page).to have_button('Ajouter un champ', disabled: false)
     expect(page).to have_content('Formulaire enregistré')
     execute_script("document.querySelector('#flash_message').remove();")
+    execute_script("document.querySelector('#autosave-notice').remove();")
+  end
+
+  def hide_autonotice_message
+    expect(page).to have_text('Formulaire enregistré')
+    execute_script("document.querySelector('#autosave-notice').classList.add('hidden');")
   end
 
   def blur

spec/system/administrateurs/procedure_creation_spec.rb

@@ -34,7 +34,8 @@ describe 'Creating a new procedure', js: true do
       visit champs_admin_procedure_path(procedure)
 
       add_champ
-      remove_flash_message
+      hide_autonotice_message
+
       fill_in 'Libellé du champ', with: 'libelle de champ'
       blur
       expect(page).to have_content('Formulaire enregistré')
@@ -51,7 +52,7 @@ describe 'Creating a new procedure', js: true do
 
       # Add an empty repetition type de champ
       add_champ
-      remove_flash_message
+      hide_autonotice_message
       select('Bloc répétable', from: 'Type de champ')
       fill_in 'Libellé du champ', with: 'libellé de champ'
       blur

spec/system/administrateurs/types_de_champ_spec.rb

@@ -71,7 +71,7 @@ describe 'As an administrateur I can edit types de champ', js: true do
 
   scenario "removing champs" do
     add_champ
-    remove_flash_message
+    hide_autonotice_message
 
     fill_in 'Libellé du champ', with: 'libellé de champ'
     expect(page).to have_content('Formulaire enregistré')
@@ -90,19 +90,19 @@ describe 'As an administrateur I can edit types de champ', js: true do
 
   scenario "adding an invalid champ" do
     add_champ
-    remove_flash_message
+    hide_autonotice_message
 
     fill_in 'Libellé du champ', with: ''
     fill_in 'Description du champ (optionnel)', with: 'description du champ'
-    expect(page).not_to have_content('Formulaire enregistré')
+    expect(page).to have_no_text(:visible, 'Formulaire enregistré')
 
     fill_in 'Libellé du champ', with: 'libellé de champ'
-    expect(page).to have_content('Formulaire enregistré')
+    expect(page).to have_text('Formulaire enregistré')
   end
 
   scenario "adding a repetition champ" do
     add_champ
-    remove_flash_message
+    hide_autonotice_message
 
     select('Bloc répétable', from: 'Type de champ')
     fill_in 'Libellé du champ', with: 'libellé de champ'
@@ -131,7 +131,7 @@ describe 'As an administrateur I can edit types de champ', js: true do
 
   scenario "adding a carte champ" do
     add_champ
-    remove_flash_message
+    hide_autonotice_message
 
     select('Carte', from: 'Type de champ')
     fill_in 'Libellé du champ', with: 'Libellé de champ carte', fill_options: { clear: :backspace }
@@ -153,7 +153,7 @@ describe 'As an administrateur I can edit types de champ', js: true do
 
   scenario "adding a dropdown champ" do
     add_champ
-    remove_flash_message
+    hide_autonotice_message
 
     select('Choix simple', from: 'Type de champ')
     fill_in 'Libellé du champ', with: 'Libellé de champ menu déroulant', fill_options: { clear: :backspace }