From 72b7ff221cfd97c3eb68b93a4a7ee25ec29907b3 Mon Sep 17 00:00:00 2001
From: Nicolas Bouilleaud <nico@bou.io>
Date: Tue, 24 Sep 2019 16:38:58 +0200
Subject: [PATCH 1/8] move procedure to new design

---
 .../admin/procedures_controller.rb            |  53 +---
 .../administrateur_controller.rb              |   2 +-
 .../procedure_administrateurs_controller.rb   |   2 +-
 .../procedures_controller.rb                  |  61 +++-
 app/javascript/new_design/procedure-edit.js   |  24 ++
 app/javascript/packs/application.js           |   1 +
 .../admin/procedures/_informations.html.haml  | 142 ---------
 app/views/admin/procedures/_monavis.html.haml |  17 -
 app/views/admin/procedures/edit.html.haml     |   6 -
 app/views/admin/procedures/monavis.html.haml  |   6 -
 app/views/admin/procedures/new.html.haml      |   9 -
 .../_procedure_description.html.haml          |   4 +-
 .../procedures/_informations.html.haml        | 145 +++++++++
 .../procedures/_monavis.html.haml             |  15 +
 .../procedures/edit.html.haml                 |  16 +
 .../procedures/monavis.html.haml              |  15 +
 .../procedures/new.html.haml                  |  14 +
 config/routes.rb                              |  13 +-
 .../admin/procedures_controller_spec.rb       | 278 -----------------
 .../procedures_controller_spec.rb             | 290 ++++++++++++++++++
 .../procedures/edit.html.haml_spec.rb         |   4 +-
 21 files changed, 597 insertions(+), 520 deletions(-)
 create mode 100644 app/javascript/new_design/procedure-edit.js
 delete mode 100644 app/views/admin/procedures/_informations.html.haml
 delete mode 100644 app/views/admin/procedures/_monavis.html.haml
 delete mode 100644 app/views/admin/procedures/edit.html.haml
 delete mode 100644 app/views/admin/procedures/monavis.html.haml
 delete mode 100644 app/views/admin/procedures/new.html.haml
 create mode 100644 app/views/new_administrateur/procedures/_informations.html.haml
 create mode 100644 app/views/new_administrateur/procedures/_monavis.html.haml
 create mode 100644 app/views/new_administrateur/procedures/edit.html.haml
 create mode 100644 app/views/new_administrateur/procedures/monavis.html.haml
 create mode 100644 app/views/new_administrateur/procedures/new.html.haml
 rename spec/views/{admin => new_administrateur}/procedures/edit.html.haml_spec.rb (68%)

diff --git a/app/controllers/admin/procedures_controller.rb b/app/controllers/admin/procedures_controller.rb
index 6ddd005e0..91bdb5cd5 100644
--- a/app/controllers/admin/procedures_controller.rb
+++ b/app/controllers/admin/procedures_controller.rb
@@ -2,7 +2,7 @@ class Admin::ProceduresController < AdminController
   include SmartListing::Helper::ControllerExtensions
   helper SmartListing::Helper
 
-  before_action :retrieve_procedure, only: [:show, :edit, :delete_logo, :delete_deliberation, :delete_notice, :monavis, :update_monavis, :publish_validate, :publish]
+  before_action :retrieve_procedure, only: [:show, :delete_logo, :delete_deliberation, :delete_notice, :publish_validate, :publish]
 
   def index
     if current_administrateur.procedures.count != 0
@@ -49,9 +49,6 @@ class Admin::ProceduresController < AdminController
     @current_administrateur = current_administrateur
   end
 
-  def edit
-  end
-
   def destroy
     procedure = current_administrateur.procedures.find(params[:id])
 
@@ -66,40 +63,6 @@ class Admin::ProceduresController < AdminController
     redirect_to admin_procedures_draft_path
   end
 
-  def new
-    @procedure ||= Procedure.new(for_individual: true)
-  end
-
-  def create
-    @procedure = Procedure.new(procedure_params.merge(administrateurs: [current_administrateur]))
-
-    if !@procedure.save
-      flash.now.alert = @procedure.errors.full_messages
-      render 'new'
-    else
-      flash.notice = 'Démarche enregistrée.'
-      current_administrateur.instructeur.assign_to_procedure(@procedure)
-
-      redirect_to champs_procedure_path(@procedure)
-    end
-  end
-
-  def update
-    @procedure = current_administrateur.procedures.find(params[:id])
-
-    if !@procedure.update(procedure_params)
-      flash.now.alert = @procedure.errors.full_messages
-      render 'edit'
-    elsif @procedure.brouillon?
-      reset_procedure
-      flash.notice = 'Démarche modifiée. Tous les dossiers de cette démarche ont été supprimés.'
-      redirect_to edit_admin_procedure_path(id: @procedure.id)
-    else
-      flash.notice = 'Démarche modifiée.'
-      redirect_to edit_admin_procedure_path(id: @procedure.id)
-    end
-  end
-
   def publish_validate
     @procedure.assign_attributes(publish_params)
   end
@@ -182,18 +145,6 @@ class Admin::ProceduresController < AdminController
     render layout: 'application'
   end
 
-  def monavis
-  end
-
-  def update_monavis
-    if !@procedure.update(procedure_params)
-      flash.now.alert = @procedure.errors.full_messages
-    else
-      flash.notice = 'le champ MonAvis a bien été mis à jour'
-    end
-    render 'monavis'
-  end
-
   def active_class
     @active_class = 'active'
   end
@@ -238,7 +189,7 @@ class Admin::ProceduresController < AdminController
   end
 
   def procedure_params
-    editable_params = [:libelle, :description, :organisation, :direction, :lien_site_web, :cadre_juridique, :deliberation, :notice, :web_hook_url, :euro_flag, :logo, :auto_archive_on, :monavis_embed]
+    editable_params = [:libelle, :description, :organisation, :direction, :lien_site_web, :cadre_juridique, :deliberation, :notice, :web_hook_url, :euro_flag, :logo, :auto_archive_on]
     permited_params = if @procedure&.locked?
       params.require(:procedure).permit(*editable_params)
     else
diff --git a/app/controllers/new_administrateur/administrateur_controller.rb b/app/controllers/new_administrateur/administrateur_controller.rb
index d8828ba1c..6a8da5753 100644
--- a/app/controllers/new_administrateur/administrateur_controller.rb
+++ b/app/controllers/new_administrateur/administrateur_controller.rb
@@ -9,7 +9,7 @@ module NewAdministrateur
 
     rescue ActiveRecord::RecordNotFound
       flash.alert = 'Démarche inexistante'
-      redirect_to admin_procedures_path
+      redirect_to admin_procedures_path, status: 404
     end
 
     def procedure_locked?
diff --git a/app/controllers/new_administrateur/procedure_administrateurs_controller.rb b/app/controllers/new_administrateur/procedure_administrateurs_controller.rb
index b2fa6811d..f01a83f97 100644
--- a/app/controllers/new_administrateur/procedure_administrateurs_controller.rb
+++ b/app/controllers/new_administrateur/procedure_administrateurs_controller.rb
@@ -1,6 +1,6 @@
 module NewAdministrateur
   class ProcedureAdministrateursController < AdministrateurController
-    before_action :retrieve_procedure
+    before_action :retrieve_procedure, except: [:new]
 
     def index
     end
diff --git a/app/controllers/new_administrateur/procedures_controller.rb b/app/controllers/new_administrateur/procedures_controller.rb
index e51e75aa0..b9236fdb6 100644
--- a/app/controllers/new_administrateur/procedures_controller.rb
+++ b/app/controllers/new_administrateur/procedures_controller.rb
@@ -1,6 +1,6 @@
 module NewAdministrateur
   class ProceduresController < AdministrateurController
-    before_action :retrieve_procedure, only: [:champs, :annotations]
+    before_action :retrieve_procedure, only: [:champs, :annotations, :edit, :monavis, :update_monavis]
     before_action :procedure_locked?, only: [:champs, :annotations]
 
     def apercu
@@ -8,6 +8,55 @@ module NewAdministrateur
       @tab = apercu_tab
     end
 
+    def new
+      @procedure ||= Procedure.new(for_individual: true)
+    end
+
+    def edit
+    end
+
+    def create
+      @procedure = Procedure.new(procedure_params.merge(administrateurs: [current_administrateur]))
+
+      if !@procedure.save
+        flash.now.alert = @procedure.errors.full_messages
+        render 'new'
+      else
+        flash.notice = 'Démarche enregistrée.'
+        current_administrateur.instructeur.assign_to_procedure(@procedure)
+
+        redirect_to champs_procedure_path(@procedure)
+      end
+    end
+
+    def update
+      @procedure = current_administrateur.procedures.find(params[:id])
+
+      if !@procedure.update(procedure_params)
+        flash.now.alert = @procedure.errors.full_messages
+        render 'edit'
+      elsif @procedure.brouillon?
+        reset_procedure
+        flash.notice = 'Démarche modifiée. Tous les dossiers de cette démarche ont été supprimés.'
+        redirect_to edit_admin_procedure_path(id: @procedure.id)
+      else
+        flash.notice = 'Démarche modifiée.'
+        redirect_to edit_admin_procedure_path(id: @procedure.id)
+      end
+    end
+
+    def monavis
+    end
+
+    def update_monavis
+      if !@procedure.update(procedure_params)
+        flash.now.alert = @procedure.errors.full_messages
+      else
+        flash.notice = 'le champ MonAvis a bien été mis à jour'
+      end
+      render 'monavis'
+    end
+
     private
 
     def apercu_tab
@@ -17,5 +66,15 @@ module NewAdministrateur
     def procedure_without_control
       Procedure.find(params[:id])
     end
+
+    def procedure_params
+      editable_params = [:libelle, :description, :organisation, :direction, :lien_site_web, :cadre_juridique, :deliberation, :notice, :web_hook_url, :euro_flag, :logo, :auto_archive_on, :monavis_embed]
+      permited_params = if @procedure&.locked?
+        params.require(:procedure).permit(*editable_params)
+      else
+        params.require(:procedure).permit(*editable_params, :duree_conservation_dossiers_dans_ds, :duree_conservation_dossiers_hors_ds, :for_individual, :path)
+      end
+      permited_params
+    end
   end
 end
diff --git a/app/javascript/new_design/procedure-edit.js b/app/javascript/new_design/procedure-edit.js
new file mode 100644
index 000000000..7b71d2ecb
--- /dev/null
+++ b/app/javascript/new_design/procedure-edit.js
@@ -0,0 +1,24 @@
+import { show, hide, delegate } from '@utils';
+
+function syncInputToElement(fromSelector, toSelector) {
+  const fromElement = document.querySelector(fromSelector);
+  const toElement = document.querySelector(toSelector);
+  if (toElement && fromElement) {
+    toElement.innerText = fromElement.value;
+  }
+}
+
+function syncFormToPreview() {
+  syncInputToElement('#procedure_libelle', 'h2.procedure-title');
+  syncInputToElement('#procedure_description', '.procedure-description-body');
+
+  const euroFlagCheckbox = document.querySelector('#procedure_euro_flag');
+  const euroFlagLogo = document.querySelector('#euro_flag');
+  if (euroFlagCheckbox && euroFlagLogo) {
+    euroFlagCheckbox.checked ? show(euroFlagLogo) : hide(euroFlagLogo);
+  }
+}
+
+delegate('input', '#procedure-edit #procedure_libelle', syncFormToPreview);
+delegate('input', '#procedure-edit #procedure_description', syncFormToPreview);
+delegate('change', '#procedure-edit #procedure_euro_flag', syncFormToPreview);
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index 784ba4497..c72b799f9 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -22,6 +22,7 @@ import '../shared/toggle-target';
 import '../new_design/dropdown';
 import '../new_design/form-validation';
 import '../new_design/procedure-context';
+import '../new_design/procedure-edit';
 import '../new_design/select2';
 import '../new_design/spinner';
 import '../new_design/support';
diff --git a/app/views/admin/procedures/_informations.html.haml b/app/views/admin/procedures/_informations.html.haml
deleted file mode 100644
index 0184c07bf..000000000
--- a/app/views/admin/procedures/_informations.html.haml
+++ /dev/null
@@ -1,142 +0,0 @@
-- if @procedure.locked?
-  .alert.alert-info
-    Cette démarche est publiée, certains éléments de la description ne sont plus modifiables
-
-.form-group
-  %h4 Libellé*
-  = f.text_field :libelle, class: 'form-control', placeholder: 'Libellé de la démarche'
-
-.form-group
-  %h4 Description*
-  = f.text_area :description, rows: '6', placeholder: 'Description du projet', class: 'form-control'
-
-- if !@procedure.locked?
-  .form-group
-    %h4 Conservation des données
-    = f.label :duree_conservation_dossiers_dans_ds, "Sur demarches-simplifiees.fr* (durée en mois après le début de l’instruction)"
-    = f.number_field :duree_conservation_dossiers_dans_ds, class: 'form-control', placeholder: '6', required: true
-
-    = f.label :duree_conservation_dossiers_hors_ds, "Hors demarches-simplifiees.fr* (durée en mois après la fin de l'instruction)"
-    = f.number_field :duree_conservation_dossiers_hors_ds, class: 'form-control', placeholder: '6', required: true
-
-- if @procedure.created_at.present?
-  .form-group
-    %h4 Où les usagers trouveront-ils le lien vers la démarche ?
-    = f.text_field :lien_site_web, class: 'form-control', placeholder: 'https://exemple.gouv.fr/ma_demarche'
-
-.form-group
-  %h4 Cadre juridique *
-  %p Texte qui justifie le droit de collecter les données demandées dans votre démarche auprès des usagers, par exemple :
-  %ul
-    %li Texte de loi (loi, décret, circulaire, arrêté,…)
-    %li Texte juridique (statuts, délibération, décision du conseil d'administration…)
-    %li
-      = link_to("En savoir plus avec cette vidéo de 5 minutes", CADRE_JURIDIQUE_URL, target: "_blank", rel: "noopener")
-
-  %p.help-block
-    %i.fa.fa-info-circle
-    Vous pouvez saisir un lien vers ce texte ou importer celui-ci directement.
-
-  .row
-    .col-md-6
-      = f.label :cadre_juridique, 'Lien vers le texte'
-      = f.text_field :cadre_juridique, class: 'form-control', placeholder: 'https://www.legifrance.gouv.fr/'
-    .col-md-6
-      = f.label :deliberation, 'Importer le texte'
-      - deliberation = @procedure.deliberation
-      - if !deliberation.attached?
-        = f.file_field :deliberation,
-          direct_upload: true
-      - else
-        %a{ href: url_for(deliberation), target: '_blank', rel: 'noopener' }
-          = deliberation.filename.to_s
-        - if @procedure.persisted?
-          = link_to 'supprimer', delete_deliberation_admin_procedure_path(@procedure), method: :delete
-        %br
-        Modifier :
-        = f.file_field :deliberation,
-          direct_upload: true
-
-.form-group
-  %h4 Notice explicative de la démarche
-  - notice = @procedure.notice
-  - if !notice.attached?
-    = f.file_field :notice,
-      direct_upload: true
-  - else
-    %a{ href: url_for(notice), target: '_blank', rel: 'noopener' }
-      = notice.filename.to_s
-    - if @procedure.persisted?
-      \-
-      = link_to 'supprimer', delete_notice_admin_procedure_path(@procedure), method: :delete
-    %br
-    Modifier :
-    = f.file_field :notice,
-      direct_upload: true
-
-.row
-  .col-md-6
-    %h4 Logo de la démarche
-    - if @procedure.logo.attached?
-      = image_tag @procedure.logo_url, { style: 'height: 40px; display: inline; margin-right: 6px;', id: 'preview_procedure_logo' }
-      \-
-
-      - if @procedure.persisted?
-        = link_to 'supprimer', delete_logo_admin_procedure_path(@procedure), method: :delete
-    = f.file_field :logo,
-      direct_upload: true,
-      accept: 'image/png, image/jpg, image/jpeg',
-      style: 'display: inline'
-
-    %div{ style: 'margin-top: 5px;' }
-      %i
-        Fichier accepté : JPG / JPEG / PNG
-  .col-md-6
-    %h4 Drapeau européen
-    .checkbox
-      %label
-        = f.check_box :euro_flag
-        Afficher le drapeau européen
-
-- if !@procedure.locked?
-  .row
-    .col-md-6
-      %h4 À qui s’adresse ma démarche ?
-      .checkbox
-        %label
-          = f.radio_button :for_individual, true
-          %b Ma démarche s’adresse à un particulier
-
-        %p
-          En choisissant cette option, l’usager devra renseigner son nom et prénom avant d’accéder au formulaire
-
-      .checkbox
-        %label
-          = f.radio_button :for_individual, false
-          %b Ma démarche s’adresse à une personne morale
-
-        %p
-          En choisissant cette option, l’usager devra renseigner son n° SIRET. Grâce à l’API Entreprise, seront alors automatiquement remontées les informations sur la personne morale type raison sociale ou adresse du siège social.
-
-      %b
-        Si votre démarche s’adresse indifféremment à une personne morale ou un particulier choisissez l'option "particuliers". Vous pourrez utilisez le champ SIRET directement dans le formulaire.
-
-.row
-  .col-md-6
-    %h4 Options avancées
-
-    - if feature_enabled?(:administrateur_web_hook)
-      %label{ for: :web_hook_url } Lien de rappel HTTP (webhook)
-      = f.text_field :web_hook_url, class: 'form-control', placeholder: 'https://callback.exemple.fr/'
-      %p.help-block
-        %i.fa.fa-info-circle
-        Vous pouvez définir un lien de rappel HTTP (aussi appelé webhook) pour notifier un service tiers du changement de l'état d’un dossier de cette démarche sur demarches-simplifiees.fr.
-        = link_to("Consulter la documentation du webhook", WEBHOOK_DOC_URL, target: "_blank", rel: "noopener")
-        \.
-
-    %label{ for: :auto_archive_on } Clôture automatique le
-    = f.date_field :auto_archive_on, id: 'auto_archive_on', value: @procedure.auto_archive_on
-    (à 00h01)
-    %p.help-block
-      %i.fa.fa-info-circle
-      La clôture automatique suspend la publication de la démarche et entraîne le passage de tous les dossiers au statut "en instruction", ce qui ne permet plus aux usagers de les modifier. Le passage en instruction des dossiers s'accompagne de l'envoi de l'email d'accusé de passage en instruction (configurable par l'administrateur dans la partie "E-mail" de la démarche).
diff --git a/app/views/admin/procedures/_monavis.html.haml b/app/views/admin/procedures/_monavis.html.haml
deleted file mode 100644
index f934f8fad..000000000
--- a/app/views/admin/procedures/_monavis.html.haml
+++ /dev/null
@@ -1,17 +0,0 @@
-.form-group
-  %h3 Insérer un lien vers « MonAvis »
-  %p
-    Proposez aux usagers de donner un avis sur votre démarche. Pour ce faire, vous devez précédemment aller sur «
-    %a{ :href => "https://monavis.numerique.gouv.fr" } https://monavis.numerique.gouv.fr
-    », créer un compte, et référencer là démarche que vous venez de publier.
-
-  %p
-    Vous pouvez
-    %a{ :href => "https://doc.demarches-simplifiees.fr/tutoriels/integration-du-bouton-mon-avis" } consulter notre tutoriel complet
-    pour intégrer le bouton « MonAvis » sur demarches-simplifiees.fr.
-
-  %p Une fois en possession du code généré sur le site MonAvis, vous pouvez le coller dans le champ ci-dessous :
-
-  .form-group
-    = f.label :monavis_embed, "Mon avis"
-    = f.text_area :monavis_embed, rows: '6', placeholder: '<a href="https://monavis.numerique.gouv.fr/Demarches/123456?&view-mode=formulaire-avis&nd_mode=en-ligne-enti%C3%A8rement&nd_source=button&key=cd4a872d4"><img src="https://monavis.numerique.gouv.fr/monavis-static/bouton-bleu.png" alt="Je donne mon avis" title="Je donne mon avis sur cette démarche" /></a>', class: 'form-control'
diff --git a/app/views/admin/procedures/edit.html.haml b/app/views/admin/procedures/edit.html.haml
deleted file mode 100644
index 5efaea830..000000000
--- a/app/views/admin/procedures/edit.html.haml
+++ /dev/null
@@ -1,6 +0,0 @@
-.row.white-back
-  #procedure_new.section.section-label
-    = form_for @procedure, url: url_for({ controller: 'admin/procedures', action: :update, id: @procedure.id }), multipart: true do |f|
-      = render partial: 'informations', locals: { f: f }
-      .text-right
-        = f.button 'Enregistrer', class: 'btn btn-success'
diff --git a/app/views/admin/procedures/monavis.html.haml b/app/views/admin/procedures/monavis.html.haml
deleted file mode 100644
index 0b55058a2..000000000
--- a/app/views/admin/procedures/monavis.html.haml
+++ /dev/null
@@ -1,6 +0,0 @@
-.row.white-back
-  #procedure_new.section.section-label
-    = form_for @procedure, url: url_for({ controller: 'admin/procedures', action: :update_monavis }), multipart: true do |f|
-      = render partial: 'monavis', locals: { f: f }
-      .text-right
-        = f.button 'Enregistrer', class: 'btn btn-success'
diff --git a/app/views/admin/procedures/new.html.haml b/app/views/admin/procedures/new.html.haml
deleted file mode 100644
index a61ff161f..000000000
--- a/app/views/admin/procedures/new.html.haml
+++ /dev/null
@@ -1,9 +0,0 @@
-.row.white-back
-  %h2
-    = t('dynamics.admin.dossiers.tableau_de_bord.nouvelle_procedure')
-
-  #procedure_new.section.section-label
-    = form_for @procedure, url: { controller: 'admin/procedures', action: :create }, multipart: true do |f|
-      = render partial: 'informations', locals: { f: f }
-      .text-center
-        = f.button 'Valider', class: 'btn btn-info btn-lg btn-block', id: 'save-procedure'
diff --git a/app/views/layouts/commencer/_procedure_description.html.haml b/app/views/layouts/commencer/_procedure_description.html.haml
index 56409a384..2a6fbb08e 100644
--- a/app/views/layouts/commencer/_procedure_description.html.haml
+++ b/app/views/layouts/commencer/_procedure_description.html.haml
@@ -1,7 +1,7 @@
 .procedure-logos
   = image_tag procedure.logo_url
-  - if procedure.euro_flag
-    = image_tag "flag_of_europe.svg"
+  - if procedure.euro_flag || (defined?(force_euro_flag) && force_euro_flag == true)
+    = image_tag("flag_of_europe.svg", id: 'euro_flag', class: (!procedure.euro_flag ? "hidden" : ""))
 %h2.procedure-title
   = procedure.libelle
 .procedure-description
diff --git a/app/views/new_administrateur/procedures/_informations.html.haml b/app/views/new_administrateur/procedures/_informations.html.haml
new file mode 100644
index 000000000..a0945b190
--- /dev/null
+++ b/app/views/new_administrateur/procedures/_informations.html.haml
@@ -0,0 +1,145 @@
+.container
+  - if @procedure.locked?
+    .alert.alert-info
+      Cette démarche est publiée, certains éléments de la description ne sont plus modifiables
+
+.two-columns
+  .columns-container
+    .column
+      = f.label :libelle do
+        Titre de la démarche
+        %span.mandatory *
+      = f.text_field :libelle, class: 'form-control', placeholder: 'Titre'
+
+      = f.label :description do
+        Description
+        %span.mandatory *
+      = f.text_area :description, rows: '6', placeholder: 'Description de la démarche, destinataires, etc. ', class: 'form-control'
+
+      %h2.header-section Logo de la démarche
+      - if @procedure.persisted?
+        = link_to 'supprimer', delete_logo_admin_procedure_path(@procedure), method: :delete
+      .pj-input
+        = f.file_field :logo,
+          direct_upload: true,
+          accept: 'image/png, image/jpg, image/jpeg',
+          style: 'display: inline'
+
+      %div{ style: 'margin-top: 5px;' }
+        %i
+          Fichier accepté : JPG / JPEG / PNG
+
+      = f.label :euro_flag do
+        = f.check_box :euro_flag
+        Afficher aussi le drapeau européen
+
+    .column.procedure-preview
+      = render partial: 'layouts/commencer/procedure_description', locals: { procedure: @procedure, force_euro_flag: true }
+
+.container
+  - if !@procedure.locked?
+    %h2.header-section Conservation des données
+    = f.label :duree_conservation_dossiers_dans_ds, "Sur demarches-simplifiees.fr* (durée en mois après le début de l’instruction)"
+    = f.number_field :duree_conservation_dossiers_dans_ds, class: 'form-control', placeholder: '6', required: true
+
+    = f.label :duree_conservation_dossiers_hors_ds, "Hors demarches-simplifiees.fr* (durée en mois après la fin de l'instruction)"
+    = f.number_field :duree_conservation_dossiers_hors_ds, class: 'form-control', placeholder: '6', required: true
+
+  - if @procedure.created_at.present?
+    = f.label :description do
+      Où les usagers trouveront-ils le lien vers la démarche ?
+    = f.text_field :lien_site_web, class: 'form-control', placeholder: 'https://exemple.gouv.fr/ma_demarche'
+
+  %h2.header-section Cadre juridique *
+  .explication
+    Texte qui justifie le droit de collecter les données demandées dans votre démarche auprès des usagers, par exemple :
+    %br
+    Texte de loi (loi, décret, circulaire, arrêté,…)
+    %br
+    Texte juridique (statuts, délibération, décision du conseil d'administration…)
+    %br
+      = link_to("En savoir plus avec cette vidéo de 5 minutes", CADRE_JURIDIQUE_URL, target: "_blank", rel: "noopener")
+
+  %p
+    Vous pouvez saisir un lien vers ce texte ou importer celui-ci directement.
+
+  = f.label :cadre_juridique, 'Lien vers le texte'
+  = f.text_field :cadre_juridique, class: 'form-control', placeholder: 'https://www.legifrance.gouv.fr/'
+
+  = f.label :deliberation, 'Importer le texte'
+  - deliberation = @procedure.deliberation
+  - if !deliberation.attached?
+    .pj-input
+      = f.file_field :deliberation,
+        direct_upload: true
+  - else
+    %a{ href: url_for(deliberation), target: '_blank', rel: 'noopener' }
+      = deliberation.filename.to_s
+    - if @procedure.persisted?
+      = link_to 'supprimer', delete_deliberation_admin_procedure_path(@procedure), method: :delete
+    %br
+    Modifier :
+    .pj-input
+      = f.file_field :deliberation,
+        direct_upload: true
+
+  - notice = @procedure.notice
+  %h2.header-section Notice explicative de la démarche
+  .explication
+    Une notice explicative est un document destiné à guider l’usager dans sa démarche. C’est un document que vous avez élaboré et qui peut prendre la forme d’un fichier doc, d’un pdf ou encore de diapositives. Le bouton pour télécharger cette notice apparaît en haut du formulaire pour l’usager.
+
+  - if !notice.attached?
+    .pj-input
+      = f.file_field :notice,
+        direct_upload: true
+  - else
+    %a{ href: url_for(notice), target: '_blank', rel: 'noopener' }
+      = notice.filename.to_s
+    - if @procedure.persisted?
+      \-
+      = link_to 'supprimer', delete_notice_admin_procedure_path(@procedure), method: :delete
+    %br
+    Modifier :
+    .pj-input
+      = f.file_field :notice,
+        direct_upload: true
+
+  - if !@procedure.locked?
+    %h2.header-section À qui s’adresse ma démarche ?
+    .radios
+      = f.label :for_individual, value: true do
+        = f.radio_button :for_individual, true
+        Ma démarche s’adresse à un particulier
+
+      %p.explication
+        En choisissant cette option, l’usager devra renseigner son nom et prénom avant d’accéder au formulaire
+
+    .radios
+      = f.label :for_individual, value: false do
+        = f.radio_button :for_individual, false
+        Ma démarche s’adresse à une personne morale
+
+    %p.explication
+      En choisissant cette option, l’usager devra renseigner son n° SIRET. Grâce à l’API Entreprise, seront alors automatiquement remontées les informations sur la personne morale type raison sociale ou adresse du siège social.
+
+    %p
+      Si votre démarche s’adresse indifféremment à une personne morale ou un particulier choisissez l'option "particuliers". Vous pourrez utilisez le champ SIRET directement dans le formulaire.
+
+  %h2.header-section Options avancées
+  - if feature_enabled?(:administrateur_web_hook)
+    = f.label :web_hook_url do
+      Lien de rappel HTTP (webhook)
+    = f.text_field :web_hook_url, class: 'form-control', placeholder: 'https://callback.exemple.fr/'
+    %p.help-block
+      %i.fa.fa-info-circle
+      Vous pouvez définir un lien de rappel HTTP (aussi appelé webhook) pour notifier un service tiers du changement de l'état d’un dossier de cette démarche sur demarches-simplifiees.fr.
+      = link_to("Consulter la documentation du webhook", WEBHOOK_DOC_URL, target: "_blank", rel: "noopener")
+      \.
+
+  = f.label :auto_archive_on do
+    Clôture automatique à 00h01 le :
+  = f.date_field :auto_archive_on, id: 'auto_archive_on', value: @procedure.auto_archive_on
+
+  %p.explication
+    La clôture automatique suspend la publication de la démarche et entraîne le passage de tous les dossiers "en construction"
+    (c'est à dire ceux qui ont été déposés), au statut "en instruction", ce qui ne permet plus aux usagers de les modifier.
diff --git a/app/views/new_administrateur/procedures/_monavis.html.haml b/app/views/new_administrateur/procedures/_monavis.html.haml
new file mode 100644
index 000000000..8b4b25e99
--- /dev/null
+++ b/app/views/new_administrateur/procedures/_monavis.html.haml
@@ -0,0 +1,15 @@
+%p.explication
+  Proposez aux usagers de donner un avis sur votre démarche. Pour ce faire, vous devez précédemment aller sur «
+  %a{ :href => "https://monavis.numerique.gouv.fr" } https://monavis.numerique.gouv.fr
+  », créer un compte, et référencer là démarche que vous venez de publier.
+  %br
+  %br
+  Vous pouvez
+  %a{ :href => "https://doc.demarches-simplifiees.fr/tutoriels/integration-du-bouton-mon-avis" } consulter notre tutoriel complet
+  pour intégrer le bouton « MonAvis » sur demarches-simplifiees.fr.
+  %br
+  %br
+  Une fois en possession du code généré sur le site MonAvis, vous pouvez le coller dans le champ ci-dessous :
+
+= f.label :monavis_embed, "Mon avis"
+= f.text_area :monavis_embed, rows: '6', placeholder: '<a href="https://monavis.numerique.gouv.fr/Demarches/123456?&view-mode=formulaire-avis&nd_mode=en-ligne-enti%C3%A8rement&nd_source=button&key=cd4a872d4"><img src="https://monavis.numerique.gouv.fr/monavis-static/bouton-bleu.png" alt="Je donne mon avis" title="Je donne mon avis sur cette démarche" /></a>', class: 'form-control'
diff --git a/app/views/new_administrateur/procedures/edit.html.haml b/app/views/new_administrateur/procedures/edit.html.haml
new file mode 100644
index 000000000..038714a94
--- /dev/null
+++ b/app/views/new_administrateur/procedures/edit.html.haml
@@ -0,0 +1,16 @@
+#procedure-edit
+  = render partial: 'new_administrateur/breadcrumbs',
+    locals: { steps: [link_to('Démarches', admin_procedures_path),
+                      link_to(@procedure.libelle, admin_procedure_path(@procedure)),
+                      'Description'] }
+
+  .container
+    %h1.page-title Présentation
+
+  = form_for @procedure, url: url_for({ controller: 'new_administrateur/procedures', action: :update, id: @procedure.id }), multipart: true, html: { class: 'form' } do |f|
+
+    = render partial: 'informations', locals: { f: f }
+
+    .container
+      .text-right
+        = f.button 'Enregistrer', class: 'button primary send'
diff --git a/app/views/new_administrateur/procedures/monavis.html.haml b/app/views/new_administrateur/procedures/monavis.html.haml
new file mode 100644
index 000000000..c10497e5d
--- /dev/null
+++ b/app/views/new_administrateur/procedures/monavis.html.haml
@@ -0,0 +1,15 @@
+= render partial: 'new_administrateur/breadcrumbs',
+  locals: { steps: [link_to('Démarches', admin_procedures_path),
+                    link_to(@procedure.libelle, admin_procedure_path(@procedure)),
+                    link_to('MonAvis', admin_procedures_path)] }
+
+.container
+  %h1.page-title
+    Insérer un lien vers « MonAvis »
+
+.container
+  %h1
+  = form_for @procedure, url: url_for({ controller: 'new_administrateur/procedures', action: :update_monavis }), multipart: true, html: { class: 'form' } do |f|
+    = render partial: 'monavis', locals: { f: f }
+    .text-right
+      = f.button 'Enregistrer', class: 'button primary send'
diff --git a/app/views/new_administrateur/procedures/new.html.haml b/app/views/new_administrateur/procedures/new.html.haml
new file mode 100644
index 000000000..8bee8c4e1
--- /dev/null
+++ b/app/views/new_administrateur/procedures/new.html.haml
@@ -0,0 +1,14 @@
+= render partial: 'new_administrateur/breadcrumbs',
+  locals: { steps: [link_to('Démarches', admin_procedures_path),
+                    'Nouvelle'] }
+
+.container
+  %h1.page-title
+    = t('dynamics.admin.dossiers.tableau_de_bord.nouvelle_procedure')
+
+.container
+  %h1
+  = form_for @procedure, url: { controller: 'new_administrateur/procedures', action: :create }, multipart: true, html: { class: 'form' } do |f|
+    = render partial: 'informations', locals: { f: f }
+    .text-center
+      = f.button 'Valider', class: 'button primary send', id: 'save-procedure'
diff --git a/config/routes.rb b/config/routes.rb
index 16b257416..47bca15b9 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -154,13 +154,20 @@ Rails.application.routes.draw do
     patch 'activate' => '/users/activate#create'
   end
 
+  # order matters: we don't want those routes to match /admin/procedures/:id
+  get 'admin/procedures/new' => 'new_administrateur/procedures#new', as: :new_admin_procedure
+  get 'admin/procedures/:id/edit' => 'new_administrateur/procedures#edit', as: :edit_admin_procedure
+  post 'admin/procedures' => 'new_administrateur/procedures#create'
+  get 'admin/procedures/:id/monavis' => 'new_administrateur/procedures#monavis', as: :admin_procedure_monavis
+  patch 'admin/procedures/:id/monavis' => 'new_administrateur/procedures#update_monavis', as: :update_monavis
+
   namespace :admin do
     get 'activate' => '/administrateurs/activate#new'
     patch 'activate' => '/administrateurs/activate#create'
     get 'procedures/archived' => 'procedures#archived'
     get 'procedures/draft' => 'procedures#draft'
 
-    resources :procedures do
+    resources :procedures, except: [:new, :edit, :update] do
       collection do
         get 'new_from_existing' => 'procedures#new_from_existing', as: :new_from_existing
       end
@@ -178,8 +185,6 @@ Rails.application.routes.draw do
       put 'publish' => 'procedures#publish', as: :publish
       post 'transfer' => 'procedures#transfer', as: :transfer
       put 'clone' => 'procedures#clone', as: :clone
-      get 'monavis' => 'procedures#monavis', as: :monavis
-      patch 'monavis' => 'procedures#update_monavis', as: :update_monavis
 
       resource :assigns, only: [:show, :update], path: 'instructeurs'
 
@@ -350,7 +355,7 @@ Rails.application.routes.draw do
   #
 
   scope module: 'new_administrateur' do
-    resources :procedures, only: [:update] do
+    resources :procedures, only: [:update, :new] do
       member do
         get 'apercu'
         get 'champs'
diff --git a/spec/controllers/admin/procedures_controller_spec.rb b/spec/controllers/admin/procedures_controller_spec.rb
index b5c5fc87c..749cb9684 100644
--- a/spec/controllers/admin/procedures_controller_spec.rb
+++ b/spec/controllers/admin/procedures_controller_spec.rb
@@ -146,192 +146,6 @@ describe Admin::ProceduresController, type: :controller do
     end
   end
 
-  describe 'GET #edit' do
-    let(:published_at) { nil }
-    let(:procedure) { create(:procedure, administrateur: admin, published_at: published_at) }
-    let(:procedure_id) { procedure.id }
-
-    subject { get :edit, params: { id: procedure_id } }
-
-    context 'when user is not connected' do
-      before do
-        sign_out(admin.user)
-      end
-
-      it { is_expected.to redirect_to new_user_session_path }
-    end
-
-    context 'when user is connected' do
-      context 'when procedure exist' do
-        let(:procedure_id) { procedure.id }
-        it { is_expected.to have_http_status(:success) }
-      end
-
-      context 'when procedure is published' do
-        let(:published_at) { Time.zone.now }
-        it { is_expected.to have_http_status(:success) }
-      end
-
-      context "when procedure doesn't exist" do
-        let(:procedure_id) { bad_procedure_id }
-
-        it { is_expected.to have_http_status(404) }
-      end
-    end
-  end
-
-  describe 'POST #create' do
-    context 'when all attributs are filled' do
-      describe 'new procedure in database' do
-        subject { post :create, params: { procedure: procedure_params } }
-
-        it { expect { subject }.to change { Procedure.count }.by(1) }
-      end
-
-      context 'when procedure is correctly save' do
-        before do
-          post :create, params: { procedure: procedure_params }
-        end
-
-        describe 'procedure attributs in database' do
-          subject { Procedure.last }
-
-          it { expect(subject.libelle).to eq(libelle) }
-          it { expect(subject.description).to eq(description) }
-          it { expect(subject.organisation).to eq(organisation) }
-          it { expect(subject.direction).to eq(direction) }
-          it { expect(subject.administrateurs).to eq([admin]) }
-          it { expect(subject.duree_conservation_dossiers_dans_ds).to eq(duree_conservation_dossiers_dans_ds) }
-          it { expect(subject.duree_conservation_dossiers_hors_ds).to eq(duree_conservation_dossiers_hors_ds) }
-        end
-
-        it { is_expected.to redirect_to(champs_procedure_path(Procedure.last)) }
-        it { expect(flash[:notice]).to be_present }
-      end
-
-      context 'when procedure is correctly saved' do
-        let(:instructeur) { admin.instructeur }
-
-        before do
-          post :create, params: { procedure: procedure_params }
-        end
-
-        describe "admin can also instruct the procedure as a instructeur" do
-          subject { Procedure.last }
-          it { expect(subject.defaut_groupe_instructeur.instructeurs).to include(instructeur) }
-        end
-      end
-    end
-
-    context 'when many attributs are not valid' do
-      let(:libelle) { '' }
-      let(:description) { '' }
-
-      describe 'no new procedure in database' do
-        subject { post :create, params: { procedure: procedure_params } }
-
-        it { expect { subject }.to change { Procedure.count }.by(0) }
-
-        describe 'no new module api carto in database' do
-          it { expect { subject }.to change { ModuleAPICarto.count }.by(0) }
-        end
-      end
-
-      describe 'flash message is present' do
-        before do
-          post :create, params: { procedure: procedure_params }
-        end
-
-        it { expect(flash[:alert]).to be_present }
-      end
-    end
-  end
-
-  describe 'PUT #update' do
-    let!(:procedure) { create(:procedure, :with_type_de_champ, administrateur: admin) }
-
-    context 'when administrateur is not connected' do
-      before do
-        sign_out(admin.user)
-      end
-
-      subject { put :update, params: { id: procedure.id } }
-
-      it { is_expected.to redirect_to new_user_session_path }
-    end
-
-    context 'when administrateur is connected' do
-      def update_procedure
-        put :update, params: { id: procedure.id, procedure: procedure_params }
-        procedure.reload
-      end
-
-      context 'when all attributs are present' do
-        let(:libelle) { 'Blable' }
-        let(:description) { 'blabla' }
-        let(:organisation) { 'plop' }
-        let(:direction) { 'plap' }
-        let(:duree_conservation_dossiers_dans_ds) { 7 }
-        let(:duree_conservation_dossiers_hors_ds) { 5 }
-
-        before { update_procedure }
-
-        describe 'procedure attributs in database' do
-          subject { procedure }
-
-          it { expect(subject.libelle).to eq(libelle) }
-          it { expect(subject.description).to eq(description) }
-          it { expect(subject.organisation).to eq(organisation) }
-          it { expect(subject.direction).to eq(direction) }
-          it { expect(subject.duree_conservation_dossiers_dans_ds).to eq(duree_conservation_dossiers_dans_ds) }
-          it { expect(subject.duree_conservation_dossiers_hors_ds).to eq(duree_conservation_dossiers_hors_ds) }
-        end
-
-        it { is_expected.to redirect_to(edit_admin_procedure_path id: procedure.id) }
-        it { expect(flash[:notice]).to be_present }
-      end
-
-      context 'when many attributs are not valid' do
-        before { update_procedure }
-        let(:libelle) { '' }
-        let(:description) { '' }
-
-        describe 'flash message is present' do
-          it { expect(flash[:alert]).to be_present }
-        end
-      end
-
-      context 'when procedure is brouillon' do
-        let(:procedure) { create(:procedure_with_dossiers, :with_path, :with_type_de_champ, administrateur: admin) }
-        let!(:dossiers_count) { procedure.dossiers.count }
-
-        describe 'dossiers are dropped' do
-          subject { update_procedure }
-
-          it {
-            expect(dossiers_count).to eq(1)
-            expect(subject.dossiers.count).to eq(0)
-          }
-        end
-      end
-
-      context 'when procedure is published' do
-        let(:procedure) { create(:procedure, :with_type_de_champ, :published, administrateur: admin) }
-
-        subject { update_procedure }
-
-        describe 'only some properties can be updated' do
-          it { expect(subject.libelle).to eq procedure_params[:libelle] }
-          it { expect(subject.description).to eq procedure_params[:description] }
-          it { expect(subject.organisation).to eq procedure_params[:organisation] }
-          it { expect(subject.direction).to eq procedure_params[:direction] }
-
-          it { expect(subject.for_individual).not_to eq procedure_params[:for_individual] }
-        end
-      end
-    end
-  end
-
   describe 'PUT #publish' do
     let(:procedure) { create(:procedure, administrateur: admin, lien_site_web: lien_site_web) }
     let(:procedure2) { create(:procedure, :published, administrateur: admin, lien_site_web: lien_site_web) }
@@ -663,96 +477,4 @@ describe Admin::ProceduresController, type: :controller do
       it { expect(response.status).to eq(404) }
     end
   end
-
-  describe 'PATCH #monavis' do
-    let!(:procedure) { create(:procedure, administrateur: admin) }
-    let(:procedure_params) {
-      {
-        monavis_embed: monavis_embed
-      }
-    }
-
-    context 'when administrateur is not connected' do
-      before do
-        sign_out(admin.user)
-      end
-
-      subject { patch :update_monavis, params: { procedure_id: procedure.id } }
-
-      it { is_expected.to redirect_to new_user_session_path }
-    end
-
-    context 'when administrateur is connected' do
-      def update_monavis
-        patch :update_monavis, params: { procedure_id: procedure.id, procedure: procedure_params }
-        procedure.reload
-      end
-
-      let(:monavis_embed) {
-        <<-MSG
-        <a href="https://voxusagers.numerique.gouv.fr/Demarches/2136?&view-mode=formulaire-avis&nd_mode=en-ligne-enti%C3%A8rement&nd_source=button&key=e93e77cfd9bf7cce9d10f7a10be55730">
-          <img src="https://voxusagers.numerique.gouv.fr/static/bouton-bleu.svg" alt="Je donne mon avis" title="Je donne mon avis sur cette démarche" />
-        </a>
-        MSG
-      }
-
-      context 'when all attributes are present' do
-        render_views
-
-        before { update_monavis }
-
-        context 'when the embed code is valid' do
-          describe 'the monavis field is updated' do
-            subject { procedure }
-
-            it { expect(subject.monavis_embed).to eq(monavis_embed) }
-          end
-
-          it { expect(flash[:notice]).to be_present }
-          it { expect(response.body).to include "MonAvis" }
-        end
-
-        context 'when the embed code is valid with the original format' do
-          let(:monavis_embed) {
-            <<-MSG
-            <a href="https://monavis.numerique.gouv.fr/Demarches/123?&view-mode=formulaire-avis&nd_mode=en-ligne-enti%C3%A8rement&nd_source=button&key=cd4a872d475e4045666057f">
-              <img src="https://monavis.numerique.gouv.fr/monavis-static/bouton-blanc.png" alt="Je donne mon avis" title="Je donne mon avis sur cette démarche" />
-            </a>
-            MSG
-          }
-          describe 'the monavis field is updated' do
-            subject { procedure }
-
-            it { expect(subject.monavis_embed).to eq(monavis_embed) }
-          end
-
-          it { expect(flash[:notice]).to be_present }
-          it { expect(response.body).to include "MonAvis" }
-        end
-
-        context 'when the embed code is not valid' do
-          let(:monavis_embed) { 'invalid embed code' }
-
-          describe 'the monavis field is not updated' do
-            subject { procedure }
-
-            it { expect(subject.monavis_embed).to eq(nil) }
-          end
-
-          it { expect(flash[:alert]).to be_present }
-          it { expect(response.body).to include "MonAvis" }
-        end
-      end
-
-      context 'when procedure is published' do
-        let(:procedure) { create(:procedure, :published, administrateur: admin) }
-
-        subject { update_monavis }
-
-        describe 'the monavis field is not updated' do
-          it { expect(subject.monavis_embed).to eq monavis_embed }
-        end
-      end
-    end
-  end
 end
diff --git a/spec/controllers/new_administrateur/procedures_controller_spec.rb b/spec/controllers/new_administrateur/procedures_controller_spec.rb
index 1dc6753bb..2220e34f3 100644
--- a/spec/controllers/new_administrateur/procedures_controller_spec.rb
+++ b/spec/controllers/new_administrateur/procedures_controller_spec.rb
@@ -1,5 +1,17 @@
 describe NewAdministrateur::ProceduresController, type: :controller do
   let(:admin) { create(:administrateur) }
+  let(:bad_procedure_id) { 100000 }
+
+  let(:path) { 'ma-jolie-demarche' }
+  let(:libelle) { 'Démarche de test' }
+  let(:description) { 'Description de test' }
+  let(:organisation) { 'Organisation de test' }
+  let(:direction) { 'Direction de test' }
+  let(:cadre_juridique) { 'cadre juridique' }
+  let(:duree_conservation_dossiers_dans_ds) { 3 }
+  let(:duree_conservation_dossiers_hors_ds) { 6 }
+  let(:monavis_embed) { nil }
+  let(:lien_site_web) { 'http://mon-site.gouv.fr' }
 
   describe '#apercu' do
     let(:procedure) { create(:procedure) }
@@ -11,4 +23,282 @@ describe NewAdministrateur::ProceduresController, type: :controller do
 
     it { expect(response).to have_http_status(:ok) }
   end
+
+  let(:procedure_params) {
+    {
+      path: path,
+      libelle: libelle,
+      description: description,
+      organisation: organisation,
+      direction: direction,
+      cadre_juridique: cadre_juridique,
+      duree_conservation_dossiers_dans_ds: duree_conservation_dossiers_dans_ds,
+      duree_conservation_dossiers_hors_ds: duree_conservation_dossiers_hors_ds,
+      monavis_embed: monavis_embed,
+      lien_site_web: lien_site_web
+    }
+  }
+
+  before do
+    sign_in(admin.user)
+  end
+
+  describe 'GET #edit' do
+    let(:published_at) { nil }
+    let(:procedure) { create(:procedure, administrateur: admin, published_at: published_at) }
+    let(:procedure_id) { procedure.id }
+
+    subject { get :edit, params: { id: procedure_id } }
+
+    context 'when user is not connected' do
+      before do
+        sign_out(admin.user)
+      end
+
+      it { is_expected.to redirect_to new_user_session_path }
+    end
+
+    context 'when user is connected' do
+      context 'when procedure exist' do
+        let(:procedure_id) { procedure.id }
+        it { is_expected.to have_http_status(:success) }
+      end
+
+      context 'when procedure is published' do
+        let(:published_at) { Time.zone.now }
+        it { is_expected.to have_http_status(:success) }
+      end
+
+      context 'when procedure doesn’t exist' do
+        let(:procedure_id) { bad_procedure_id }
+
+        it { is_expected.to have_http_status(404) }
+      end
+    end
+  end
+
+  describe 'POST #create' do
+    context 'when all attributs are filled' do
+      describe 'new procedure in database' do
+        subject { post :create, params: { procedure: procedure_params } }
+
+        it { expect { subject }.to change { Procedure.count }.by(1) }
+      end
+
+      context 'when procedure is correctly save' do
+        before do
+          post :create, params: { procedure: procedure_params }
+        end
+
+        describe 'procedure attributs in database' do
+          subject { Procedure.last }
+
+          it { expect(subject.libelle).to eq(libelle) }
+          it { expect(subject.description).to eq(description) }
+          it { expect(subject.organisation).to eq(organisation) }
+          it { expect(subject.direction).to eq(direction) }
+          it { expect(subject.administrateurs).to eq([admin]) }
+          it { expect(subject.duree_conservation_dossiers_dans_ds).to eq(duree_conservation_dossiers_dans_ds) }
+          it { expect(subject.duree_conservation_dossiers_hors_ds).to eq(duree_conservation_dossiers_hors_ds) }
+        end
+
+        it { is_expected.to redirect_to(champs_procedure_path(Procedure.last)) }
+        it { expect(flash[:notice]).to be_present }
+      end
+
+      context 'when procedure is correctly saved' do
+        let(:instructeur) { admin.instructeur }
+
+        before do
+          post :create, params: { procedure: procedure_params }
+        end
+
+        describe "admin can also instruct the procedure as a instructeur" do
+          subject { Procedure.last }
+          it { expect(subject.defaut_groupe_instructeur.instructeurs).to include(instructeur) }
+        end
+      end
+    end
+
+    context 'when many attributs are not valid' do
+      let(:libelle) { '' }
+      let(:description) { '' }
+
+      describe 'no new procedure in database' do
+        subject { post :create, params: { procedure: procedure_params } }
+
+        it { expect { subject }.to change { Procedure.count }.by(0) }
+
+        describe 'no new module api carto in database' do
+          it { expect { subject }.to change { ModuleAPICarto.count }.by(0) }
+        end
+      end
+
+      describe 'flash message is present' do
+        before do
+          post :create, params: { procedure: procedure_params }
+        end
+
+        it { expect(flash[:alert]).to be_present }
+      end
+    end
+  end
+
+  describe 'PUT #update' do
+    let!(:procedure) { create(:procedure, :with_type_de_champ, administrateur: admin) }
+
+    context 'when administrateur is not connected' do
+      before do
+        sign_out(admin.user)
+      end
+
+      subject { put :update, params: { id: procedure.id } }
+
+      it { is_expected.to redirect_to new_user_session_path }
+    end
+
+    context 'when administrateur is connected' do
+      def update_procedure
+        put :update, params: { id: procedure.id, procedure: procedure_params }
+        procedure.reload
+      end
+
+      context 'when all attributs are present' do
+        let(:libelle) { 'Blable' }
+        let(:description) { 'blabla' }
+        let(:organisation) { 'plop' }
+        let(:direction) { 'plap' }
+        let(:duree_conservation_dossiers_dans_ds) { 7 }
+        let(:duree_conservation_dossiers_hors_ds) { 5 }
+
+        before { update_procedure }
+
+        describe 'procedure attributs in database' do
+          subject { procedure }
+
+          it { expect(subject.libelle).to eq(libelle) }
+          it { expect(subject.description).to eq(description) }
+          it { expect(subject.organisation).to eq(organisation) }
+          it { expect(subject.direction).to eq(direction) }
+          it { expect(subject.duree_conservation_dossiers_dans_ds).to eq(duree_conservation_dossiers_dans_ds) }
+          it { expect(subject.duree_conservation_dossiers_hors_ds).to eq(duree_conservation_dossiers_hors_ds) }
+        end
+
+        it { is_expected.to redirect_to(edit_admin_procedure_path id: procedure.id) }
+        it { expect(flash[:notice]).to be_present }
+      end
+
+      context 'when many attributs are not valid' do
+        before { update_procedure }
+        let(:libelle) { '' }
+        let(:description) { '' }
+
+        describe 'flash message is present' do
+          it { expect(flash[:alert]).to be_present }
+        end
+      end
+
+      context 'when procedure is brouillon' do
+        let(:procedure) { create(:procedure_with_dossiers, :with_path, :with_type_de_champ, administrateur: admin) }
+        let!(:dossiers_count) { procedure.dossiers.count }
+
+        describe 'dossiers are dropped' do
+          subject { update_procedure }
+
+          it {
+            expect(dossiers_count).to eq(1)
+            expect(subject.dossiers.count).to eq(0)
+          }
+        end
+      end
+
+      context 'when procedure is published' do
+        let(:procedure) { create(:procedure, :with_type_de_champ, :published, administrateur: admin) }
+
+        subject { update_procedure }
+
+        describe 'only some properties can be updated' do
+          it { expect(subject.libelle).to eq procedure_params[:libelle] }
+          it { expect(subject.description).to eq procedure_params[:description] }
+          it { expect(subject.organisation).to eq procedure_params[:organisation] }
+          it { expect(subject.direction).to eq procedure_params[:direction] }
+
+          it { expect(subject.for_individual).not_to eq procedure_params[:for_individual] }
+        end
+      end
+    end
+  end
+
+  describe 'PATCH #monavis' do
+    let!(:procedure) { create(:procedure, administrateur: admin) }
+    let(:procedure_params) {
+      {
+        monavis_embed: monavis_embed
+      }
+    }
+
+    context 'when administrateur is not connected' do
+      before do
+        sign_out(admin.user)
+      end
+
+      subject { patch :update_monavis, params: { id: procedure.id } }
+
+      it { is_expected.to redirect_to new_user_session_path }
+    end
+
+    context 'when administrateur is connected' do
+      def update_monavis
+        patch :update_monavis, params: { id: procedure.id, procedure: procedure_params }
+        procedure.reload
+      end
+      let(:monavis_embed) {
+        <<-MSG
+        <a href="https://monavis.numerique.gouv.fr/Demarches/123?&view-mode=formulaire-avis&nd_mode=en-ligne-enti%C3%A8rement&nd_source=button&key=cd4a872d475e4045666057f">
+          <img src="https://monavis.numerique.gouv.fr/monavis-static/bouton-blanc.png" alt="Je donne mon avis" title="Je donne mon avis sur cette démarche" />
+        </a>
+        MSG
+      }
+
+      context 'when all attributes are present' do
+        render_views
+
+        before { update_monavis }
+
+        context 'when the embed code is valid' do
+          describe 'the monavis field is updated' do
+            subject { procedure }
+
+            it { expect(subject.monavis_embed).to eq(monavis_embed) }
+          end
+
+          it { expect(flash[:notice]).to be_present }
+          it { expect(response.body).to include "MonAvis" }
+        end
+
+        context 'when the embed code is not valid' do
+          let(:monavis_embed) { 'invalid embed code' }
+
+          describe 'the monavis field is not updated' do
+            subject { procedure }
+
+            it { expect(subject.monavis_embed).to eq(nil) }
+          end
+
+          it { expect(flash[:alert]).to be_present }
+          it { expect(response.body).to include "MonAvis" }
+        end
+      end
+
+      context 'when procedure is published' do
+        let(:procedure) { create(:procedure, :published, administrateur: admin) }
+
+        subject { update_monavis }
+
+        describe 'the monavis field is not updated' do
+          it { expect(subject.monavis_embed).to eq monavis_embed }
+        end
+      end
+    end
+  end
 end
diff --git a/spec/views/admin/procedures/edit.html.haml_spec.rb b/spec/views/new_administrateur/procedures/edit.html.haml_spec.rb
similarity index 68%
rename from spec/views/admin/procedures/edit.html.haml_spec.rb
rename to spec/views/new_administrateur/procedures/edit.html.haml_spec.rb
index cb09b0ba3..89ed5339b 100644
--- a/spec/views/admin/procedures/edit.html.haml_spec.rb
+++ b/spec/views/new_administrateur/procedures/edit.html.haml_spec.rb
@@ -1,6 +1,6 @@
 require 'spec_helper'
 
-describe 'admin/procedures/edit.html.haml', type: :view, vcr: { cassette_name: 'admin_procedure_edit' } do
+describe 'new_administrateur/procedures/edit.html.haml' do
   let(:logo) { Rack::Test::UploadedFile.new("./spec/fixtures/files/logo_test_procedure.png", 'image/png') }
   let(:procedure) { create(:procedure, logo: logo, lien_site_web: 'http://some.website') }
 
@@ -11,7 +11,7 @@ describe 'admin/procedures/edit.html.haml', type: :view, vcr: { cassette_name: '
 
   context 'when procedure logo is present' do
     it 'display on the page' do
-      expect(rendered).to have_selector('#preview_procedure_logo')
+      expect(rendered).to have_selector('.procedure-logos')
     end
   end
 end

From 112b44bdea62b857150a7cfe72c8dd4d3eaf757f Mon Sep 17 00:00:00 2001
From: Pierre de La Morinerie <kemenaran@gmail.com>
Date: Wed, 9 Oct 2019 15:35:33 +0000
Subject: [PATCH 2/8] procedure: align radio buttons vertically

- Remove the unused `.radios.vertical`
- Add a `.editable-champ-radio.vertical` variant for vertical radios
- Add an example of vertical radios to the patron
- Use vertical radios to display the procedure options
---
 app/assets/stylesheets/new_design/forms.scss  | 16 +++------------
 .../procedures/_informations.html.haml        | 20 +++++++++----------
 app/views/root/patron.html.haml               | 19 ++++++++++++++++--
 3 files changed, 29 insertions(+), 26 deletions(-)

diff --git a/app/assets/stylesheets/new_design/forms.scss b/app/assets/stylesheets/new_design/forms.scss
index e4f412ce7..4c8936e30 100644
--- a/app/assets/stylesheets/new_design/forms.scss
+++ b/app/assets/stylesheets/new_design/forms.scss
@@ -70,12 +70,14 @@
 
     // Align checkboxes on the top-left side of the label
     &.editable-champ-checkbox,
+    &.editable-champ-radio.vertical,
     &.editable-champ-engagement {
       label {
         padding-left: 28px;
       }
 
-      input[type=checkbox] {
+      input[type=checkbox],
+      input[type=radio] {
         position: absolute;
         top: 1px;
         left: 0px;
@@ -92,18 +94,6 @@
         margin-left: 0;
       }
     }
-
-    &.vertical {
-      label {
-        display: block;
-        margin-left: 0;
-        margin-bottom: 0;
-      }
-
-      input[type=radio] {
-        margin-bottom: 16px;
-      }
-    }
   }
 
   input[type=text]:not([data-address='true']),
diff --git a/app/views/new_administrateur/procedures/_informations.html.haml b/app/views/new_administrateur/procedures/_informations.html.haml
index a0945b190..f3b67106b 100644
--- a/app/views/new_administrateur/procedures/_informations.html.haml
+++ b/app/views/new_administrateur/procedures/_informations.html.haml
@@ -106,24 +106,22 @@
 
   - if !@procedure.locked?
     %h2.header-section À qui s’adresse ma démarche ?
-    .radios
+    .editable-champ.editable-champ-radio.vertical
       = f.label :for_individual, value: true do
-        = f.radio_button :for_individual, true
         Ma démarche s’adresse à un particulier
+        %span.notice
+          %p En choisissant cette option, l’usager devra renseigner son nom et prénom avant d’accéder au formulaire
+      = f.radio_button :for_individual, true
 
-      %p.explication
-        En choisissant cette option, l’usager devra renseigner son nom et prénom avant d’accéder au formulaire
-
-    .radios
+    .editable-champ.editable-champ-radio.vertical
       = f.label :for_individual, value: false do
-        = f.radio_button :for_individual, false
         Ma démarche s’adresse à une personne morale
+        %span.notice
+          %p En choisissant cette option, l’usager devra renseigner son n° SIRET.<br>Grâce à l’API Entreprise, les informations sur la personne morale (raison sociale, adresse du siège, etc.) seront automatiquement renseignées.
+      = f.radio_button :for_individual, false
 
     %p.explication
-      En choisissant cette option, l’usager devra renseigner son n° SIRET. Grâce à l’API Entreprise, seront alors automatiquement remontées les informations sur la personne morale type raison sociale ou adresse du siège social.
-
-    %p
-      Si votre démarche s’adresse indifféremment à une personne morale ou un particulier choisissez l'option "particuliers". Vous pourrez utilisez le champ SIRET directement dans le formulaire.
+      Si votre démarche s’adresse indifféremment à une personne morale ou un particulier, choisissez l'option « Particuliers ». Vous pourrez utiliser le champ SIRET directement dans le formulaire.
 
   %h2.header-section Options avancées
   - if feature_enabled?(:administrateur_web_hook)
diff --git a/app/views/root/patron.html.haml b/app/views/root/patron.html.haml
index c7bdc0679..50d68a193 100644
--- a/app/views/root/patron.html.haml
+++ b/app/views/root/patron.html.haml
@@ -48,8 +48,23 @@
           = render partial: "shared/dossiers/editable_champs/editable_champ",
             locals: { champ: champ, form: champ_form, seen_at: nil }
 
-        %label Mot de passe
-        %input{ type: "password", value: "12345678" }
+        .editable-champ.editable-champ-text
+          %label Mot de passe
+          %input{ type: "password", value: "12345678" }
+
+        %h2.header-section Bouton radio verticaux
+        .editable-champ.editable-champ-radio.vertical
+          = f.label :archived, value: true do
+            Option A
+            %span.notice
+              %p Une option tout à fait valable.
+          = f.radio_button :archived, true
+        .editable-champ.editable-champ-radio.vertical
+          = f.label :archived, value: false do
+            Option B
+            %span.notice
+              %p Une autre option, pas mal non plus.
+          = f.radio_button :archived, false
 
         .send-wrapper
           = f.submit 'Enregistrer un brouillon (formnovalidate)', formnovalidate: true, class: 'button send'

From 02384b078c7161140fcd7b86c9838ac4140bdbab Mon Sep 17 00:00:00 2001
From: Pierre de La Morinerie <kemenaran@gmail.com>
Date: Mon, 21 Oct 2019 17:18:05 +0200
Subject: [PATCH 3/8] procedure: remove UI to edit the european flag

This is an option we want to deprecate, and remove entirely in the
future.

Admins can still add the EU flag manually to their uploaded logo.
---
 app/javascript/new_design/procedure-edit.js            | 10 ++--------
 .../layouts/commencer/_procedure_description.html.haml |  2 +-
 .../procedures/_informations.html.haml                 |  6 +-----
 3 files changed, 4 insertions(+), 14 deletions(-)

diff --git a/app/javascript/new_design/procedure-edit.js b/app/javascript/new_design/procedure-edit.js
index 7b71d2ecb..be1bb3aa0 100644
--- a/app/javascript/new_design/procedure-edit.js
+++ b/app/javascript/new_design/procedure-edit.js
@@ -1,4 +1,4 @@
-import { show, hide, delegate } from '@utils';
+import { delegate } from '@utils';
 
 function syncInputToElement(fromSelector, toSelector) {
   const fromElement = document.querySelector(fromSelector);
@@ -11,14 +11,8 @@ function syncInputToElement(fromSelector, toSelector) {
 function syncFormToPreview() {
   syncInputToElement('#procedure_libelle', 'h2.procedure-title');
   syncInputToElement('#procedure_description', '.procedure-description-body');
-
-  const euroFlagCheckbox = document.querySelector('#procedure_euro_flag');
-  const euroFlagLogo = document.querySelector('#euro_flag');
-  if (euroFlagCheckbox && euroFlagLogo) {
-    euroFlagCheckbox.checked ? show(euroFlagLogo) : hide(euroFlagLogo);
-  }
 }
 
 delegate('input', '#procedure-edit #procedure_libelle', syncFormToPreview);
 delegate('input', '#procedure-edit #procedure_description', syncFormToPreview);
-delegate('change', '#procedure-edit #procedure_euro_flag', syncFormToPreview);
+
diff --git a/app/views/layouts/commencer/_procedure_description.html.haml b/app/views/layouts/commencer/_procedure_description.html.haml
index 2a6fbb08e..52d7b9460 100644
--- a/app/views/layouts/commencer/_procedure_description.html.haml
+++ b/app/views/layouts/commencer/_procedure_description.html.haml
@@ -1,6 +1,6 @@
 .procedure-logos
   = image_tag procedure.logo_url
-  - if procedure.euro_flag || (defined?(force_euro_flag) && force_euro_flag == true)
+  - if procedure.euro_flag
     = image_tag("flag_of_europe.svg", id: 'euro_flag', class: (!procedure.euro_flag ? "hidden" : ""))
 %h2.procedure-title
   = procedure.libelle
diff --git a/app/views/new_administrateur/procedures/_informations.html.haml b/app/views/new_administrateur/procedures/_informations.html.haml
index f3b67106b..90165987a 100644
--- a/app/views/new_administrateur/procedures/_informations.html.haml
+++ b/app/views/new_administrateur/procedures/_informations.html.haml
@@ -29,12 +29,8 @@
         %i
           Fichier accepté : JPG / JPEG / PNG
 
-      = f.label :euro_flag do
-        = f.check_box :euro_flag
-        Afficher aussi le drapeau européen
-
     .column.procedure-preview
-      = render partial: 'layouts/commencer/procedure_description', locals: { procedure: @procedure, force_euro_flag: true }
+      = render partial: 'layouts/commencer/procedure_description', locals: { procedure: @procedure }
 
 .container
   - if !@procedure.locked?

From 5be83bd01e1ebe243ec6c15910876e5f7aa05ca5 Mon Sep 17 00:00:00 2001
From: Pierre de La Morinerie <kemenaran@gmail.com>
Date: Mon, 21 Oct 2019 16:12:57 +0000
Subject: [PATCH 4/8] procedure: make the layout more similar to the mockup

---
 .../stylesheets/new_design/_constants.scss    |   1 +
 app/assets/stylesheets/new_design/common.scss |   6 +-
 .../stylesheets/new_design/layouts.scss       |  17 ++
 .../new_design/procedure_form.scss            |  79 +++++++
 .../stylesheets/new_design/sub_header.scss    |   2 +-
 .../{procedure-edit.js => procedure-form.js}  |   7 +-
 app/javascript/packs/application.js           |   2 +-
 .../procedures/_informations.html.haml        | 215 +++++++++---------
 .../procedures/edit.html.haml                 |  32 ++-
 .../procedures/new.html.haml                  |  28 ++-
 .../features/admin/procedure_creation_spec.rb |   6 +-
 spec/features/admin/procedure_update_spec.rb  |   3 +
 12 files changed, 263 insertions(+), 135 deletions(-)
 create mode 100644 app/assets/stylesheets/new_design/procedure_form.scss
 rename app/javascript/new_design/{procedure-edit.js => procedure-form.js} (69%)

diff --git a/app/assets/stylesheets/new_design/_constants.scss b/app/assets/stylesheets/new_design/_constants.scss
index 0b479f2de..dfc87c788 100644
--- a/app/assets/stylesheets/new_design/_constants.scss
+++ b/app/assets/stylesheets/new_design/_constants.scss
@@ -7,6 +7,7 @@ $default-padding: 2 * $default-spacer;
 // layouts
 $two-columns-padding: 60px;
 $two-columns-breakpoint: 980px;
+$sub-header-bottom-margin: 3 * $default-spacer;
 
 // z-order
 $alert-z-index: 100;
diff --git a/app/assets/stylesheets/new_design/common.scss b/app/assets/stylesheets/new_design/common.scss
index 9e3d6a09f..171076082 100644
--- a/app/assets/stylesheets/new_design/common.scss
+++ b/app/assets/stylesheets/new_design/common.scss
@@ -61,11 +61,13 @@ sup {
 .container {
   @include horizontal-padding($default-padding);
   max-width: $page-width + 2 * $default-padding;
-  margin: 0 auto;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 .small-container {
   @include horizontal-padding($default-padding);
   max-width: $small-page-width + 2 * $default-padding;
-  margin: 0 auto;
+  margin-left: auto;
+  margin-right: auto;
 }
diff --git a/app/assets/stylesheets/new_design/layouts.scss b/app/assets/stylesheets/new_design/layouts.scss
index a5eee6808..de4c71231 100644
--- a/app/assets/stylesheets/new_design/layouts.scss
+++ b/app/assets/stylesheets/new_design/layouts.scss
@@ -52,3 +52,20 @@
 .blank-tab {
   text-align: center;
 }
+
+.sticky--top {
+  position: sticky;
+  // scss-lint:disable VendorPrefix
+  position: -webkit-sticky;  // This is needed on Safari (tested on 12.1)
+  // scss-lint:enable VendorPrefix
+  top: 0;
+}
+
+.sticky--bottom {
+  position: sticky;
+  // scss-lint:disable VendorPrefix
+  position: -webkit-sticky;  // This is needed on Safari (tested on 12.1)
+  // scss-lint:enable VendorPrefix
+  bottom: 0;
+}
+
diff --git a/app/assets/stylesheets/new_design/procedure_form.scss b/app/assets/stylesheets/new_design/procedure_form.scss
new file mode 100644
index 000000000..4c920eb59
--- /dev/null
+++ b/app/assets/stylesheets/new_design/procedure_form.scss
@@ -0,0 +1,79 @@
+@import "colors";
+@import "constants";
+
+// scss-lint:disable SelectorFormat
+
+.procedure-form .page-title {
+  text-align: left;
+}
+
+.procedure-form__columns {
+  display: flex;
+  margin-top: -$sub-header-bottom-margin;
+}
+
+// We want to make the form as large as possible,
+// without shrinking the preview too much.
+//
+// A balanced compromised seems to make the form
+// slighly larger than the preview (flex 10/9), and
+// to reduce the margins on the preview as much as
+// possible.
+.procedure-form__column--form {
+  flex: 10;
+  padding: 0 $default-padding;
+  background-color: $light-grey;
+}
+
+.procedure-form__column--preview {
+  flex: 9;
+  padding: 0 2 * $default-padding;
+  // Gain a little horizontal space by using the white
+  // space on the right as our margin.
+  padding-right: 0;
+}
+
+// Hide the preview panel on smaller screens
+@media screen and (max-width: 800px) {
+  .procedure-form__column--preview {
+    display: none;
+  }
+}
+
+.procedure-form__preview .procedure-preview {
+  max-width: 450px;
+  margin: 0 auto;
+}
+
+.procedure-form__preview-title {
+  font-size: 1.2rem;
+  font-weight: bold;
+  opacity: 0.5;
+  margin-top: $default-spacer * 4;
+  margin-bottom: $default-spacer * 8;
+}
+
+.procedure-form__actions {
+  display: flex;
+  margin-left: -$default-padding;
+  margin-right: -$default-padding;
+  padding: $default-spacer $default-padding;
+  background: $light-grey;
+  border-top: 1px solid $border-grey;
+
+  .button.send {
+    margin-left: auto;
+  }
+}
+
+.procedure-form__options-details {
+  margin-bottom: $default-padding;
+}
+
+.procedure-form__options-summary {
+  cursor: pointer;
+
+  .header-section {
+    display: inline-block;
+  }
+}
diff --git a/app/assets/stylesheets/new_design/sub_header.scss b/app/assets/stylesheets/new_design/sub_header.scss
index 84121b6dd..f3cc9eeb8 100644
--- a/app/assets/stylesheets/new_design/sub_header.scss
+++ b/app/assets/stylesheets/new_design/sub_header.scss
@@ -4,7 +4,7 @@
 .sub-header {
   background-color: $light-grey;
   padding-top: $default-padding;
-  margin-bottom: 3 * $default-spacer;
+  margin-bottom: $sub-header-bottom-margin;
   border-bottom: 1px solid $border-grey;
 
   .container {
diff --git a/app/javascript/new_design/procedure-edit.js b/app/javascript/new_design/procedure-form.js
similarity index 69%
rename from app/javascript/new_design/procedure-edit.js
rename to app/javascript/new_design/procedure-form.js
index be1bb3aa0..0c161bbb7 100644
--- a/app/javascript/new_design/procedure-edit.js
+++ b/app/javascript/new_design/procedure-form.js
@@ -9,10 +9,9 @@ function syncInputToElement(fromSelector, toSelector) {
 }
 
 function syncFormToPreview() {
-  syncInputToElement('#procedure_libelle', 'h2.procedure-title');
+  syncInputToElement('#procedure_libelle', '.procedure-title');
   syncInputToElement('#procedure_description', '.procedure-description-body');
 }
 
-delegate('input', '#procedure-edit #procedure_libelle', syncFormToPreview);
-delegate('input', '#procedure-edit #procedure_description', syncFormToPreview);
-
+delegate('input', '.procedure-form #procedure_libelle', syncFormToPreview);
+delegate('input', '.procedure-form #procedure_description', syncFormToPreview);
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index c72b799f9..9b956474a 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -22,7 +22,7 @@ import '../shared/toggle-target';
 import '../new_design/dropdown';
 import '../new_design/form-validation';
 import '../new_design/procedure-context';
-import '../new_design/procedure-edit';
+import '../new_design/procedure-form';
 import '../new_design/select2';
 import '../new_design/spinner';
 import '../new_design/support';
diff --git a/app/views/new_administrateur/procedures/_informations.html.haml b/app/views/new_administrateur/procedures/_informations.html.haml
index 90165987a..780a3ef4a 100644
--- a/app/views/new_administrateur/procedures/_informations.html.haml
+++ b/app/views/new_administrateur/procedures/_informations.html.haml
@@ -1,125 +1,134 @@
-.container
-  - if @procedure.locked?
-    .alert.alert-info
-      Cette démarche est publiée, certains éléments de la description ne sont plus modifiables
+- if @procedure.locked?
+  .card.warning
+    .card-title Cette démarche est publiée.
+    Certains éléments de la description ne sont plus modifiables.
 
-.two-columns
-  .columns-container
-    .column
-      = f.label :libelle do
-        Titre de la démarche
-        %span.mandatory *
-      = f.text_field :libelle, class: 'form-control', placeholder: 'Titre'
+= f.label :libelle do
+  Titre de la démarche
+  %span.mandatory *
+= f.text_field :libelle, class: 'form-control', placeholder: 'Titre'
 
-      = f.label :description do
-        Description
-        %span.mandatory *
-      = f.text_area :description, rows: '6', placeholder: 'Description de la démarche, destinataires, etc. ', class: 'form-control'
+= f.label :description do
+  Description
+  %span.mandatory *
+= f.text_area :description, rows: '6', placeholder: 'Description de la démarche, destinataires, etc. ', class: 'form-control'
 
-      %h2.header-section Logo de la démarche
-      - if @procedure.persisted?
-        = link_to 'supprimer', delete_logo_admin_procedure_path(@procedure), method: :delete
-      .pj-input
-        = f.file_field :logo,
-          direct_upload: true,
-          accept: 'image/png, image/jpg, image/jpeg',
-          style: 'display: inline'
+%h2.header-section Logo de la démarche
+- if @procedure.persisted?
+  = link_to 'supprimer', delete_logo_admin_procedure_path(@procedure), method: :delete
+.pj-input
+  = f.file_field :logo,
+    direct_upload: true,
+    accept: 'image/png, image/jpg, image/jpeg',
+    style: 'display: inline'
 
-      %div{ style: 'margin-top: 5px;' }
-        %i
-          Fichier accepté : JPG / JPEG / PNG
+%div{ style: 'margin-top: 5px;' }
+  %i
+    Fichier accepté : JPG / JPEG / PNG
 
-    .column.procedure-preview
-      = render partial: 'layouts/commencer/procedure_description', locals: { procedure: @procedure }
+- if !@procedure.locked?
+  %h2.header-section Conservation des données
+  = f.label :duree_conservation_dossiers_dans_ds do
+    Sur demarches-simplifiees.fr
+    %span.mandatory *
+    .notice (durée en mois après le début de l’instruction)
+  = f.number_field :duree_conservation_dossiers_dans_ds, class: 'form-control', placeholder: '6', required: true
 
-.container
-  - if !@procedure.locked?
-    %h2.header-section Conservation des données
-    = f.label :duree_conservation_dossiers_dans_ds, "Sur demarches-simplifiees.fr* (durée en mois après le début de l’instruction)"
-    = f.number_field :duree_conservation_dossiers_dans_ds, class: 'form-control', placeholder: '6', required: true
+  = f.label :duree_conservation_dossiers_hors_ds do
+    Hors demarches-simplifiees.fr
+    %span.mandatory *
+    .notice (durée en mois après la fin de l'instruction)
+  = f.number_field :duree_conservation_dossiers_hors_ds, class: 'form-control', placeholder: '6', required: true
 
-    = f.label :duree_conservation_dossiers_hors_ds, "Hors demarches-simplifiees.fr* (durée en mois après la fin de l'instruction)"
-    = f.number_field :duree_conservation_dossiers_hors_ds, class: 'form-control', placeholder: '6', required: true
+- if @procedure.created_at.present?
+  = f.label :lien_site_web do
+    Où les usagers trouveront-ils le lien vers la démarche ?
+  = f.text_field :lien_site_web, class: 'form-control', placeholder: 'https://exemple.gouv.fr/ma_demarche'
 
-  - if @procedure.created_at.present?
-    = f.label :description do
-      Où les usagers trouveront-ils le lien vers la démarche ?
-    = f.text_field :lien_site_web, class: 'form-control', placeholder: 'https://exemple.gouv.fr/ma_demarche'
+%h2.header-section
+  Cadre juridique
+  %span.mandatory *
 
-  %h2.header-section Cadre juridique *
-  .explication
-    Texte qui justifie le droit de collecter les données demandées dans votre démarche auprès des usagers, par exemple :
-    %br
-    Texte de loi (loi, décret, circulaire, arrêté,…)
-    %br
-    Texte juridique (statuts, délibération, décision du conseil d'administration…)
-    %br
+= f.label :cadre_juridique do
+  .notice
+    %p
+      Le cadre juridique justifie le droit de collecter les données demandées dans votre démarche auprès des usagers. Par exemple :
+      %br
+      • Texte de loi (loi, décret, circulaire, arrêté…)
+      %br
+      • Texte juridique (statuts, délibération, décision du conseil d'administration…)
+      %br
       = link_to("En savoir plus avec cette vidéo de 5 minutes", CADRE_JURIDIQUE_URL, target: "_blank", rel: "noopener")
+      %p
+        Vous pouvez saisir un lien web vers ce texte, ou l’importer depuis un fichier.
+  Lien vers le texte
+= f.text_field :cadre_juridique, class: 'form-control', placeholder: 'https://www.legifrance.gouv.fr/'
 
-  %p
-    Vous pouvez saisir un lien vers ce texte ou importer celui-ci directement.
+= f.label :deliberation, 'Importer le texte'
+- deliberation = @procedure.deliberation
+- if !deliberation.attached?
+  .pj-input
+    = f.file_field :deliberation,
+      direct_upload: true
+- else
+  %a{ href: url_for(deliberation), target: '_blank', rel: 'noopener' }
+    = deliberation.filename.to_s
+  - if @procedure.persisted?
+    = link_to 'supprimer', delete_deliberation_admin_procedure_path(@procedure), method: :delete
+  %br
+  Modifier :
+  .pj-input
+    = f.file_field :deliberation,
+      direct_upload: true
 
-  = f.label :cadre_juridique, 'Lien vers le texte'
-  = f.text_field :cadre_juridique, class: 'form-control', placeholder: 'https://www.legifrance.gouv.fr/'
+%h2.header-section
+  Notice explicative de la démarche
 
-  = f.label :deliberation, 'Importer le texte'
-  - deliberation = @procedure.deliberation
-  - if !deliberation.attached?
-    .pj-input
-      = f.file_field :deliberation,
-        direct_upload: true
-  - else
-    %a{ href: url_for(deliberation), target: '_blank', rel: 'noopener' }
-      = deliberation.filename.to_s
-    - if @procedure.persisted?
-      = link_to 'supprimer', delete_deliberation_admin_procedure_path(@procedure), method: :delete
-    %br
-    Modifier :
-    .pj-input
-      = f.file_field :deliberation,
-        direct_upload: true
+- notice = @procedure.notice
+= f.label :notice do
+  .notice
+    %p
+      Une notice explicative est un document destiné à guider l’usager dans sa démarche. C’est un document que vous avez élaboré et qui peut prendre la forme d’un fichier doc, d’un pdf ou encore de diapositives. Le bouton pour télécharger cette notice apparaît en haut du formulaire pour l’usager.
 
-  - notice = @procedure.notice
-  %h2.header-section Notice explicative de la démarche
-  .explication
-    Une notice explicative est un document destiné à guider l’usager dans sa démarche. C’est un document que vous avez élaboré et qui peut prendre la forme d’un fichier doc, d’un pdf ou encore de diapositives. Le bouton pour télécharger cette notice apparaît en haut du formulaire pour l’usager.
+- if !notice.attached?
+  .pj-input
+    = f.file_field :notice,
+      direct_upload: true
+- else
+  %a{ href: url_for(notice), target: '_blank', rel: 'noopener' }
+    = notice.filename.to_s
+  - if @procedure.persisted?
+    \-
+    = link_to 'supprimer', delete_notice_admin_procedure_path(@procedure), method: :delete
+  %br
+  Modifier :
+  .pj-input
+    = f.file_field :notice,
+      direct_upload: true
 
-  - if !notice.attached?
-    .pj-input
-      = f.file_field :notice,
-        direct_upload: true
-  - else
-    %a{ href: url_for(notice), target: '_blank', rel: 'noopener' }
-      = notice.filename.to_s
-    - if @procedure.persisted?
-      \-
-      = link_to 'supprimer', delete_notice_admin_procedure_path(@procedure), method: :delete
-    %br
-    Modifier :
-    .pj-input
-      = f.file_field :notice,
-        direct_upload: true
+- if !@procedure.locked?
+  %h2.header-section À qui s’adresse ma démarche ?
+  .editable-champ.editable-champ-radio.vertical
+    = f.label :for_individual, value: true do
+      Ma démarche s’adresse à un particulier
+      %span.notice
+        %p En choisissant cette option, l’usager devra renseigner son nom et prénom avant d’accéder au formulaire
+    = f.radio_button :for_individual, true
 
-  - if !@procedure.locked?
-    %h2.header-section À qui s’adresse ma démarche ?
-    .editable-champ.editable-champ-radio.vertical
-      = f.label :for_individual, value: true do
-        Ma démarche s’adresse à un particulier
-        %span.notice
-          %p En choisissant cette option, l’usager devra renseigner son nom et prénom avant d’accéder au formulaire
-      = f.radio_button :for_individual, true
+  .editable-champ.editable-champ-radio.vertical
+    = f.label :for_individual, value: false do
+      Ma démarche s’adresse à une personne morale
+      %span.notice
+        %p En choisissant cette option, l’usager devra renseigner son n° SIRET.<br>Grâce à l’API Entreprise, les informations sur la personne morale (raison sociale, adresse du siège, etc.) seront automatiquement renseignées.
+    = f.radio_button :for_individual, false
 
-    .editable-champ.editable-champ-radio.vertical
-      = f.label :for_individual, value: false do
-        Ma démarche s’adresse à une personne morale
-        %span.notice
-          %p En choisissant cette option, l’usager devra renseigner son n° SIRET.<br>Grâce à l’API Entreprise, les informations sur la personne morale (raison sociale, adresse du siège, etc.) seront automatiquement renseignées.
-      = f.radio_button :for_individual, false
+  %p.explication
+    Si votre démarche s’adresse indifféremment à une personne morale ou un particulier, choisissez l'option « Particuliers ». Vous pourrez ajouter un champ SIRET directement dans le formulaire.
 
-    %p.explication
-      Si votre démarche s’adresse indifféremment à une personne morale ou un particulier, choisissez l'option « Particuliers ». Vous pourrez utiliser le champ SIRET directement dans le formulaire.
+%details.procedure-form__options-details
+  %summary.procedure-form__options-summary
+    %h2.header-section Options avancées
 
-  %h2.header-section Options avancées
   - if feature_enabled?(:administrateur_web_hook)
     = f.label :web_hook_url do
       Lien de rappel HTTP (webhook)
diff --git a/app/views/new_administrateur/procedures/edit.html.haml b/app/views/new_administrateur/procedures/edit.html.haml
index 038714a94..9ba8f8bdf 100644
--- a/app/views/new_administrateur/procedures/edit.html.haml
+++ b/app/views/new_administrateur/procedures/edit.html.haml
@@ -1,16 +1,24 @@
-#procedure-edit
-  = render partial: 'new_administrateur/breadcrumbs',
-    locals: { steps: [link_to('Démarches', admin_procedures_path),
-                      link_to(@procedure.libelle, admin_procedure_path(@procedure)),
-                      'Description'] }
+= render partial: 'new_administrateur/breadcrumbs',
+  locals: { steps: [link_to('Démarches', admin_procedures_path),
+                    link_to(@procedure.libelle, admin_procedure_path(@procedure)),
+                    'Description'] }
+.procedure-form
+  .procedure-form__columns.container
+    = form_for @procedure,
+      url: url_for({ controller: 'new_administrateur/procedures', action: :update, id: @procedure.id }),
+      multipart: true,
+      html: { class: 'form procedure-form__column--form' } do |f|
 
-  .container
-    %h1.page-title Présentation
+      %h1.page-title Description
 
-  = form_for @procedure, url: url_for({ controller: 'new_administrateur/procedures', action: :update, id: @procedure.id }), multipart: true, html: { class: 'form' } do |f|
+      = render partial: 'new_administrateur/procedures/informations', locals: { f: f }
 
-    = render partial: 'informations', locals: { f: f }
-
-    .container
-      .text-right
+      .procedure-form__actions.sticky--bottom
+        = link_to 'Annuler', admin_procedure_path(id: @procedure), class: 'button', data: { confirm: 'Êtes-vous sûr de vouloir annuler les modifications effectuées ?'}
         = f.button 'Enregistrer', class: 'button primary send'
+
+    .procedure-form__column--preview
+      .procedure-form__preview.sticky--top
+        %h3.procedure-form__preview-title Aperçu
+        .procedure-preview
+          = render partial: 'layouts/commencer/procedure_description', locals: { procedure: @procedure }
diff --git a/app/views/new_administrateur/procedures/new.html.haml b/app/views/new_administrateur/procedures/new.html.haml
index 8bee8c4e1..42ee75fdb 100644
--- a/app/views/new_administrateur/procedures/new.html.haml
+++ b/app/views/new_administrateur/procedures/new.html.haml
@@ -2,13 +2,23 @@
   locals: { steps: [link_to('Démarches', admin_procedures_path),
                     'Nouvelle'] }
 
-.container
-  %h1.page-title
-    = t('dynamics.admin.dossiers.tableau_de_bord.nouvelle_procedure')
+.procedure-form
+  .procedure-form__columns.container
+    = form_for @procedure,
+      url: url_for({ controller: 'new_administrateur/procedures', action: :create, id: @procedure.id }),
+      multipart: true,
+      html: { class: 'form procedure-form__column--form' } do |f|
 
-.container
-  %h1
-  = form_for @procedure, url: { controller: 'new_administrateur/procedures', action: :create }, multipart: true, html: { class: 'form' } do |f|
-    = render partial: 'informations', locals: { f: f }
-    .text-center
-      = f.button 'Valider', class: 'button primary send', id: 'save-procedure'
+      %h1.page-title Nouvelle démarche
+
+      = render partial: 'new_administrateur/procedures/informations', locals: { f: f }
+
+      .procedure-form__actions.sticky--bottom
+        = link_to 'Annuler', admin_procedures_path, class: 'button', data: { confirm: 'Êtes-vous sûr de vouloir annuler la création de cette démarche ?'}
+        = f.button 'Créer la démarche', class: 'button primary send'
+
+    .procedure-form__column--preview
+      .procedure-form__preview.sticky--top
+        %h3.procedure-form__preview-title Aperçu
+        .procedure-preview
+          = render partial: 'layouts/commencer/procedure_description', locals: { procedure: @procedure }
diff --git a/spec/features/admin/procedure_creation_spec.rb b/spec/features/admin/procedure_creation_spec.rb
index 5abfec21c..66292414c 100644
--- a/spec/features/admin/procedure_creation_spec.rb
+++ b/spec/features/admin/procedure_creation_spec.rb
@@ -40,11 +40,11 @@ feature 'As an administrateur I wanna create a new procedure', js: true do
         expect(find('#procedure_for_individual_false')).not_to be_checked
         fill_in 'procedure_duree_conservation_dossiers_dans_ds', with: '3'
         fill_in 'procedure_duree_conservation_dossiers_hors_ds', with: '6'
-        click_on 'save-procedure'
+        click_on 'Créer la démarche'
 
         expect(page).to have_text('Libelle doit être rempli')
         fill_in_dummy_procedure_details
-        click_on 'save-procedure'
+        click_on 'Créer la démarche'
 
         expect(page).to have_current_path(champs_procedure_path(Procedure.last))
       end
@@ -59,7 +59,7 @@ feature 'As an administrateur I wanna create a new procedure', js: true do
 
       expect(page).to have_current_path(new_admin_procedure_path)
       fill_in_dummy_procedure_details
-      click_on 'save-procedure'
+      click_on 'Créer la démarche'
 
       procedure = Procedure.last
       procedure.update(service: create(:service))
diff --git a/spec/features/admin/procedure_update_spec.rb b/spec/features/admin/procedure_update_spec.rb
index 23101549b..f2d09565a 100644
--- a/spec/features/admin/procedure_update_spec.rb
+++ b/spec/features/admin/procedure_update_spec.rb
@@ -33,6 +33,9 @@ feature 'Administrateurs can edit procedures', js: true do
       expect(page).to have_field('procedure_libelle', with: procedure.libelle)
 
       fill_in('procedure_libelle', with: 'Ma petite démarche')
+      within('.procedure-form__preview') do
+        expect(page).to have_content('Ma petite démarche')
+      end
 
       click_on 'Enregistrer'
 

From 1c61f2de5828872aa3975b1ccc44f082419d4170 Mon Sep 17 00:00:00 2001
From: Pierre de La Morinerie <kemenaran@gmail.com>
Date: Tue, 22 Oct 2019 08:58:04 +0000
Subject: [PATCH 5/8] 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
---
 ...ece_justificative.scss => attachment.scss} |  8 ++---
 app/assets/stylesheets/new_design/forms.scss  |  2 +-
 app/views/attachments/destroy.js.erb          |  4 +--
 app/views/attachments/show.js.erb             |  2 +-
 .../instructeurs/avis/instruction.html.haml   |  5 +++-
 app/views/shared/attachment/_edit.html.haml   | 29 +++++++++++++++++++
 app/views/shared/attachment/_show.html.haml   |  2 +-
 app/views/shared/attachment/_update.html.haml | 24 ---------------
 .../_piece_justificative.html.haml            |  5 +++-
 spec/features/instructeurs/expert_spec.rb     |  2 +-
 spec/features/users/brouillon_spec.rb         | 12 ++------
 .../attachment/_update.html.haml_spec.rb      | 28 ++++++++++--------
 12 files changed, 66 insertions(+), 57 deletions(-)
 rename app/assets/stylesheets/new_design/{editable_champs/piece_justificative.scss => attachment.scss} (56%)
 create mode 100644 app/views/shared/attachment/_edit.html.haml
 delete mode 100644 app/views/shared/attachment/_update.html.haml

diff --git a/app/assets/stylesheets/new_design/editable_champs/piece_justificative.scss b/app/assets/stylesheets/new_design/attachment.scss
similarity index 56%
rename from app/assets/stylesheets/new_design/editable_champs/piece_justificative.scss
rename to app/assets/stylesheets/new_design/attachment.scss
index 906f9dc6c..27c585d63 100644
--- a/app/assets/stylesheets/new_design/editable_champs/piece_justificative.scss
+++ b/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;
 }
diff --git a/app/assets/stylesheets/new_design/forms.scss b/app/assets/stylesheets/new_design/forms.scss
index 4c8936e30..f12f5681a 100644
--- a/app/assets/stylesheets/new_design/forms.scss
+++ b/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;
 
diff --git a/app/views/attachments/destroy.js.erb b/app/views/attachments/destroy.js.erb
index ca79c22a1..4d5054b7e 100644
--- a/app/views/attachments/destroy.js.erb
+++ b/app/views/attachments/destroy.js.erb
@@ -1,3 +1,3 @@
 <%= render_flash(timeout: 5000, sticky: true) %>
-<%= remove_element("#piece_justificative_#{@attachment_id}") %>
-<%= show_element("#piece_justificative_file_#{@attachment_id}") %>
+<%= remove_element("#attachment_#{@attachment_id}") %>
+<%= show_element("#attachment_file_#{@attachment_id}") %>
diff --git a/app/views/attachments/show.js.erb b/app/views/attachments/show.js.erb
index fb65942b8..488e71cae 100644
--- a/app/views/attachments/show.js.erb
+++ b/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 }) %>
diff --git a/app/views/instructeurs/avis/instruction.html.haml b/app/views/instructeurs/avis/instruction.html.haml
index c396cd221..713082704 100644
--- a/app/views/instructeurs/avis/instruction.html.haml
+++ b/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
diff --git a/app/views/shared/attachment/_edit.html.haml b/app/views/shared/attachment/_edit.html.haml
new file mode 100644
index 000000000..2a12e2f74
--- /dev/null
+++ b/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
diff --git a/app/views/shared/attachment/_show.html.haml b/app/views/shared/attachment/_show.html.haml
index 1da36cdbd..72d39c6c1 100644
--- a/app/views/shared/attachment/_show.html.haml
+++ b/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
diff --git a/app/views/shared/attachment/_update.html.haml b/app/views/shared/attachment/_update.html.haml
deleted file mode 100644
index 7631d3411..000000000
--- a/app/views/shared/attachment/_update.html.haml
+++ /dev/null
@@ -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
diff --git a/app/views/shared/dossiers/editable_champs/_piece_justificative.html.haml b/app/views/shared/dossiers/editable_champs/_piece_justificative.html.haml
index 3fefd0238..0fc1f99c8 100644
--- a/app/views/shared/dossiers/editable_champs/_piece_justificative.html.haml
+++ b/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 }
diff --git a/spec/features/instructeurs/expert_spec.rb b/spec/features/instructeurs/expert_spec.rb
index 08ceae5a3..abb43423e 100644
--- a/spec/features/instructeurs/expert_spec.rb
+++ b/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')
diff --git a/spec/features/users/brouillon_spec.rb b/spec/features/users/brouillon_spec.rb
index 49c9fd93c..b6c284cbb 100644
--- a/spec/features/users/brouillon_spec.rb
+++ b/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
-      click_on 'rafraichir'
-    end
+    within('.attachment') { click_on 'rafraichir' }
     expect(page).to have_link('file.pdf')
     expect(page).to have_no_content('analyse antivirus en cours')
 
     # Replace the attachment
-    within '.piece-justificative' do
-      click_on 'Remplacer'
-    end
+    within('.attachment') { click_on 'Remplacer' }
     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
-      click_on 'Supprimer'
-    end
+    within('.attachment') { click_on 'Supprimer' }
     expect(page).to have_content('La pièce jointe a bien été supprimée')
     expect(page).to have_no_text('RIB.pdf')
   end
diff --git a/spec/views/shared/attachment/_update.html.haml_spec.rb b/spec/views/shared/attachment/_update.html.haml_spec.rb
index 111b42acd..a98a30b0a 100644
--- a/spec/views/shared/attachment/_update.html.haml_spec.rb
+++ b/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(:virus_scan_result) { nil }
+  let(:attached_file) { champ.piece_justificative_file }
   let(:user_can_destroy) { false }
 
   subject do
     form_for(champ.dossier) do |form|
-      render 'shared/attachment/update', {
-        attachment: attachment,
-        user_can_destroy: user_can_destroy,
-        form: form
+      render 'shared/attachment/edit', {
+        form: form,
+        attached_file: attached_file,
+        accept: 'image/png',
+        user_can_destroy: user_can_destroy
       }
     end
   end
 
-  it 'renders a form field for uploading a file' do
-    expect(subject).to have_selector('input[type=file]:not(.hidden)')
+  context 'when there is no attached file' do
+    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

From aea93779cc6e16cd94a496c6636e27e5ebfcd104 Mon Sep 17 00:00:00 2001
From: Pierre de La Morinerie <kemenaran@gmail.com>
Date: Tue, 22 Oct 2019 09:05:38 +0000
Subject: [PATCH 6/8] procedure: use the attachment view to upload files

---
 .../procedures/_informations.html.haml        | 53 +++++--------------
 1 file changed, 12 insertions(+), 41 deletions(-)

diff --git a/app/views/new_administrateur/procedures/_informations.html.haml b/app/views/new_administrateur/procedures/_informations.html.haml
index 780a3ef4a..c473c2726 100644
--- a/app/views/new_administrateur/procedures/_informations.html.haml
+++ b/app/views/new_administrateur/procedures/_informations.html.haml
@@ -14,17 +14,11 @@
 = f.text_area :description, rows: '6', placeholder: 'Description de la démarche, destinataires, etc. ', class: 'form-control'
 
 %h2.header-section Logo de la démarche
-- if @procedure.persisted?
-  = link_to 'supprimer', delete_logo_admin_procedure_path(@procedure), method: :delete
-.pj-input
-  = f.file_field :logo,
-    direct_upload: true,
+= render 'shared/attachment/edit',
+  { form: f,
+    attached_file: @procedure.logo,
     accept: 'image/png, image/jpg, image/jpeg',
-    style: 'display: inline'
-
-%div{ style: 'margin-top: 5px;' }
-  %i
-    Fichier accepté : JPG / JPEG / PNG
+    user_can_destroy: true }
 
 - if !@procedure.locked?
   %h2.header-section Conservation des données
@@ -65,21 +59,10 @@
 = f.text_field :cadre_juridique, class: 'form-control', placeholder: 'https://www.legifrance.gouv.fr/'
 
 = f.label :deliberation, 'Importer le texte'
-- deliberation = @procedure.deliberation
-- if !deliberation.attached?
-  .pj-input
-    = f.file_field :deliberation,
-      direct_upload: true
-- else
-  %a{ href: url_for(deliberation), target: '_blank', rel: 'noopener' }
-    = deliberation.filename.to_s
-  - if @procedure.persisted?
-    = link_to 'supprimer', delete_deliberation_admin_procedure_path(@procedure), method: :delete
-  %br
-  Modifier :
-  .pj-input
-    = f.file_field :deliberation,
-      direct_upload: true
+= render 'shared/attachment/edit',
+  { form: f,
+    attached_file: @procedure.deliberation,
+    user_can_destroy: true }
 
 %h2.header-section
   Notice explicative de la démarche
@@ -89,22 +72,10 @@
   .notice
     %p
       Une notice explicative est un document destiné à guider l’usager dans sa démarche. C’est un document que vous avez élaboré et qui peut prendre la forme d’un fichier doc, d’un pdf ou encore de diapositives. Le bouton pour télécharger cette notice apparaît en haut du formulaire pour l’usager.
-
-- if !notice.attached?
-  .pj-input
-    = f.file_field :notice,
-      direct_upload: true
-- else
-  %a{ href: url_for(notice), target: '_blank', rel: 'noopener' }
-    = notice.filename.to_s
-  - if @procedure.persisted?
-    \-
-    = link_to 'supprimer', delete_notice_admin_procedure_path(@procedure), method: :delete
-  %br
-  Modifier :
-  .pj-input
-    = f.file_field :notice,
-      direct_upload: true
+= render 'shared/attachment/edit',
+  { form: f,
+    attached_file: @procedure.notice,
+    user_can_destroy: true }
 
 - if !@procedure.locked?
   %h2.header-section À qui s’adresse ma démarche ?

From 2e0ef8494107d99fe4dfe6bdb9c2e576dec2db8d Mon Sep 17 00:00:00 2001
From: Pierre de La Morinerie <kemenaran@gmail.com>
Date: Tue, 22 Oct 2019 10:21:16 +0000
Subject: [PATCH 7/8] images: rename 'attachment' icon to 'attached'

This avoids conflicts with the 'attachment' component.
---
 app/assets/images/icons/{attachment.svg => attached.svg}  | 0
 app/assets/stylesheets/new_design/icons.scss              | 4 ++--
 app/views/instructeurs/dossiers/_header_actions.html.haml | 2 +-
 app/views/root/patron.html.haml                           | 2 +-
 app/views/shared/attachment/_show.html.haml               | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)
 rename app/assets/images/icons/{attachment.svg => attached.svg} (100%)

diff --git a/app/assets/images/icons/attachment.svg b/app/assets/images/icons/attached.svg
similarity index 100%
rename from app/assets/images/icons/attachment.svg
rename to app/assets/images/icons/attached.svg
diff --git a/app/assets/stylesheets/new_design/icons.scss b/app/assets/stylesheets/new_design/icons.scss
index 1d3c21b16..c95fc87df 100644
--- a/app/assets/stylesheets/new_design/icons.scss
+++ b/app/assets/stylesheets/new_design/icons.scss
@@ -59,8 +59,8 @@
     background-image: image-url("icons/bubble.svg");
   }
 
-  &.attachment {
-    background-image: image-url("icons/attachment.svg");
+  &.attached {
+    background-image: image-url("icons/attached.svg");
   }
 
   &.preview {
diff --git a/app/views/instructeurs/dossiers/_header_actions.html.haml b/app/views/instructeurs/dossiers/_header_actions.html.haml
index 1df589d7a..dc63ef8d0 100644
--- a/app/views/instructeurs/dossiers/_header_actions.html.haml
+++ b/app/views/instructeurs/dossiers/_header_actions.html.haml
@@ -10,7 +10,7 @@
 - if !PiecesJustificativesService.liste_pieces_justificatives(dossier).empty?
   %span.dropdown.print-menu-opener
     %button.button.dropdown-button.icon-only
-      %span.icon.attachment
+      %span.icon.attached
     %ul.print-menu.dropdown-content
       %li
         - if PiecesJustificativesService.pieces_justificatives_total_size(dossier) < Dossier::TAILLE_MAX_ZIP
diff --git a/app/views/root/patron.html.haml b/app/views/root/patron.html.haml
index 50d68a193..f311584d7 100644
--- a/app/views/root/patron.html.haml
+++ b/app/views/root/patron.html.haml
@@ -14,7 +14,7 @@
     %span.icon.edit
     %span.icon.in-progress
     %span.icon.bubble
-    %span.icon.attachment
+    %span.icon.attached
     %span.icon.lock
     %span.icon.add
     %span.icon.justificatif
diff --git a/app/views/shared/attachment/_show.html.haml b/app/views/shared/attachment/_show.html.haml
index 72d39c6c1..41c747055 100644
--- a/app/views/shared/attachment/_show.html.haml
+++ b/app/views/shared/attachment/_show.html.haml
@@ -8,7 +8,7 @@
 .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
+      %span.icon.attached
       = attachment.filename.to_s
     - if !attachment.virus_scanner.started?
       (ce fichier n’a pas été analysé par notre antivirus, téléchargez-le avec précaution)

From 817662f7d977bc8fa2fd47bce09f8f1ae75d4648 Mon Sep 17 00:00:00 2001
From: Pierre de La Morinerie <kemenaran@gmail.com>
Date: Tue, 22 Oct 2019 14:41:32 +0200
Subject: [PATCH 8/8] procedure: move description to `views/shared`

Now that the description is used not only in the layout, but also in the
procedure form, better to make it an official shared partial.
---
 app/views/layouts/procedure_context.html.haml                   | 2 +-
 app/views/new_administrateur/procedures/edit.html.haml          | 2 +-
 app/views/new_administrateur/procedures/new.html.haml           | 2 +-
 .../commencer => shared}/_procedure_description.html.haml       | 0
 4 files changed, 3 insertions(+), 3 deletions(-)
 rename app/views/{layouts/commencer => shared}/_procedure_description.html.haml (100%)

diff --git a/app/views/layouts/procedure_context.html.haml b/app/views/layouts/procedure_context.html.haml
index 37c24000c..4c2874c34 100644
--- a/app/views/layouts/procedure_context.html.haml
+++ b/app/views/layouts/procedure_context.html.haml
@@ -6,7 +6,7 @@
 
       .column.procedure-preview
         - if procedure
-          = render partial: 'layouts/commencer/procedure_description', locals: { procedure: procedure }
+          = render partial: 'shared/procedure_description', locals: { procedure: procedure }
         - else
           = render partial: 'layouts/commencer/no_procedure'
 
diff --git a/app/views/new_administrateur/procedures/edit.html.haml b/app/views/new_administrateur/procedures/edit.html.haml
index 9ba8f8bdf..0de6f300f 100644
--- a/app/views/new_administrateur/procedures/edit.html.haml
+++ b/app/views/new_administrateur/procedures/edit.html.haml
@@ -21,4 +21,4 @@
       .procedure-form__preview.sticky--top
         %h3.procedure-form__preview-title Aperçu
         .procedure-preview
-          = render partial: 'layouts/commencer/procedure_description', locals: { procedure: @procedure }
+          = render partial: 'shared/procedure_description', locals: { procedure: @procedure }
diff --git a/app/views/new_administrateur/procedures/new.html.haml b/app/views/new_administrateur/procedures/new.html.haml
index 42ee75fdb..8cfdc47f9 100644
--- a/app/views/new_administrateur/procedures/new.html.haml
+++ b/app/views/new_administrateur/procedures/new.html.haml
@@ -21,4 +21,4 @@
       .procedure-form__preview.sticky--top
         %h3.procedure-form__preview-title Aperçu
         .procedure-preview
-          = render partial: 'layouts/commencer/procedure_description', locals: { procedure: @procedure }
+          = render partial: 'shared/procedure_description', locals: { procedure: @procedure }
diff --git a/app/views/layouts/commencer/_procedure_description.html.haml b/app/views/shared/_procedure_description.html.haml
similarity index 100%
rename from app/views/layouts/commencer/_procedure_description.html.haml
rename to app/views/shared/_procedure_description.html.haml