Merge pull request #9107 from demarches-simplifiees/remove-previsualisation-from-admin-procedure-creation

[Refonte page accueil demarche] Formulaire de création admin full page - plus de prévisualisation

app/assets/stylesheets/forms.scss

@@ -3,15 +3,6 @@
 @import "placeholders";
 
 .form {
-  h1 {
-    text-align: center;
-    margin-bottom: 20px;
-
-    @media (max-width: $two-columns-breakpoint) {
-      font-size: 26px;
-    }
-  }
-
   hr {
     width: 100%;
     height: 0;
@@ -649,6 +640,14 @@ textarea::placeholder {
   color: $dark-grey;
 }
 
-.send-wrapper--with-border-top {
+.sticky-action-footer {
-  border-top: 2px solid rgba(0, 0, 145, 1);
+  border-top: 2px solid $blue-france-500;
+  position: sticky;
+  // scss-lint:disable VendorPrefix
+  position: -webkit-sticky;  // This is needed on Safari (tested on 12.1)
+  // scss-lint:enable VendorPrefix
+  bottom: 0;
+  padding: $default-padding 0;
+  background-color: $white;
+  z-index: 2;
 }

app/assets/stylesheets/procedure_form.scss

@@ -69,8 +69,6 @@
 
 .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;

app/javascript/entrypoints/application.js

@@ -12,7 +12,6 @@ import '../shared/toggle-target';
 import { registerControllers } from '../shared/stimulus-loader';
 
 import '../new_design/form-validation';
-import '../new_design/procedure-form';
 
 import { toggleCondidentielExplanation } from '../new_design/avis';
 import {

app/javascript/new_design/procedure-form.js

@@ -1,26 +0,0 @@
-import { 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', '.procedure-title');
-  syncInputToElement('#procedure_description', '.js_description p');
-  syncInputToElement(
-    '#procedure_description_target_audience',
-    '.js_description_target_audience p'
-  );
-}
-
-delegate('input', '.procedure-form #procedure_libelle', syncFormToPreview);
-delegate('input', '.procedure-form #procedure_description', syncFormToPreview);
-delegate(
-  'input',
-  '.procedure-form #procedure_description_target_audience',
-  syncFormToPreview
-);

app/views/administrateurs/_breadcrumbs.html.haml

@@ -1,5 +1,5 @@
 #breadcrumbs.sub-header
-  .container.flex.justify-between.align-baseline.column
+  .fr-container.flex.justify-between.align-baseline.column
     %nav.fr-breadcrumb.mt-0{ role: "navigation", aria: { label: t('you_are_here', scope: [:layouts, :breadcrumb]) } }
       %button.fr-breadcrumb__button{ aria: { expanded: "false", controls: "breadcrumb-1" } }
         = t('show', scope: [:layouts, :breadcrumb])

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

@@ -21,7 +21,9 @@
   = t(:notice, scope: [:administrateurs, :duree_conservation_dossiers_dans_ds])
   - if f.object.duree_conservation_dossiers_dans_ds.to_i < Procedure::NEW_MAX_DUREE_CONSERVATION
     = t(:new_duration_constraint, scope: [:administrateurs, :duree_conservation_dossiers_dans_ds], new_duration_in_month: f.object.max_duree_conservation_dossiers_dans_ds)
-= f.number_field :duree_conservation_dossiers_dans_ds, { class: 'fr-input', placeholder: '6', required: true, max: f.object.max_duree_conservation_dossiers_dans_ds }
+
+.fr-input-group
+  = f.number_field :duree_conservation_dossiers_dans_ds, { class: 'fr-input', placeholder: '6', required: true, max: f.object.max_duree_conservation_dossiers_dans_ds }
 
 - if @procedure.created_at.present?
   = render Dsfr::InputComponent.new(form: f, attribute: :lien_site_web, input_type: :text_field, opts: {}, required: false)
@@ -89,11 +91,11 @@
       %p.notice
         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.
 
-  %p.explication
+  %p
     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.
 
 %h3.header-subsection Ajouter des tags
-%p.explication Les tags sont des mots ou des expressions que vous attribuez aux démarches pour décrire leur contenu et pour les retrouver. Les tags sont partagés avec la communauté, ce qui vous permet de voir les tags attribués aux démarches créées par les autres administrateurs.
+%p Les tags sont des mots ou des expressions que vous attribuez aux démarches pour décrire leur contenu et pour les retrouver. Les tags sont partagés avec la communauté, ce qui vous permet de voir les tags attribués aux démarches créées par les autres administrateurs.
 = hidden_field_tag  'procedure[tags]', JSON.generate(@procedure.tags)
 = react_component("ComboMultiple",
   id: "procedure_tags_combo",
@@ -101,7 +103,7 @@
   selected: @procedure.tags,
   disabled: [],
   label: 'Tags',
-  group: '.procedure-form__column--form',
+  group: '.procedure_tags_combo',
   name: 'tags',
   describedby: 'procedure-tags',
   acceptNewValues: true)

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

@@ -4,25 +4,21 @@
   locals: { steps: [['Démarches', admin_procedures_back_path(@procedure)],
                     [@procedure.libelle.truncate_words(10), admin_procedure_path(@procedure)],
                     ['Description']] }
-.procedure-form
-  .procedure-form__columns.container
-    = render  NestedForms::FormOwnerComponent.new
-    = form_for @procedure,
-      url: url_for({ controller: 'administrateurs/procedures', action: :update, id: @procedure.id }),
-      html: { class: 'form procedure-form__column--form',
-              multipart: true } do |f|
 
-      %h1.page-title Description
+= render  NestedForms::FormOwnerComponent.new
+= form_for @procedure,
+  url: url_for({ controller: 'administrateurs/procedures', action: :update, id: @procedure.id }),
+  html: { class: 'form procedure_tags_combo', multipart: true } do |f|
+  .fr-container
+    .fr-grid-row
+      .fr-col-12.fr-col-offset-sm-2.fr-col-sm-8
+        %h1.fr-h2 Description
 
         = render partial: 'administrateurs/procedures/informations', locals: { f: f }
 
-      .procedure-form__actions.sticky--bottom
+  .sticky-action-footer
-        .actions-right
+    .fr-container
-          = link_to 'Annuler', admin_procedure_path(id: @procedure), class: 'fr-btn fr-btn--secondary fr-mr-2w', data: { confirm: 'Êtes-vous sûr de vouloir annuler les modifications effectuées ?'}
+      .fr-grid-row
-          = f.button 'Enregistrer', class: 'fr-btn'
+        .fr-col-12.fr-col-offset-sm-2.fr-col-sm-8
-
+          = f.button 'Enregistrer', class: 'fr-btn fr-mr-2w'
-    .procedure-form__column--preview
+          = link_to 'Annuler', admin_procedure_path(id: @procedure), class: 'fr-btn fr-btn--secondary', data: { confirm: 'Êtes-vous sûr de vouloir annuler les modifications effectuées ?'}
-      .procedure-form__preview.sticky--top
-        %h3.procedure-form__preview-title Aperçu
-        .procedure-preview
-          = render partial: 'shared/procedure_description', locals: { procedure: @procedure }

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

@@ -4,25 +4,20 @@
   locals: { steps: [['Démarches', admin_procedures_back_path(@procedure)],
                     ['Nouvelle']] }
 
-.procedure-form
+= render NestedForms::FormOwnerComponent.new
-  .procedure-form__columns.container
+= form_for @procedure,
-    = render NestedForms::FormOwnerComponent.new
-    = form_for @procedure,
   url: url_for({ controller: 'administrateurs/procedures', action: :create, id: @procedure.id }),
-      html: { class: 'form procedure-form__column--form', multipart: true } do |f|
+  html: { class: 'form procedure_tags_combo', multipart: true } do |f|
-
+  .fr-container
-      %h1.page-title Nouvelle démarche
+    .fr-grid-row
-
+      .fr-col-12.fr-col-offset-sm-2.fr-col-sm-8
+        %h1.fr-h2 Nouvelle démarche
 
         = render partial: 'administrateurs/procedures/informations', locals: { f: f }
 
-      .procedure-form__actions.sticky--bottom
+  .sticky-action-footer
-        .actions-right
+    .fr-container
-          = link_to 'Annuler', admin_procedures_path, class: 'fr-btn fr-btn--secondary fr-mr-2w', data: { confirm: 'Êtes-vous sûr de vouloir annuler la création de cette démarche ?'}
+      .fr-grid-row
-          = f.button 'Créer la démarche', class: 'fr-btn'
+        .fr-col-12.fr-col-offset-sm-2.fr-col-sm-8
-
+          = f.button 'Créer la démarche', class: 'fr-btn fr-mr-2w'
-    .procedure-form__column--preview
+          = link_to 'Annuler', admin_procedures_path, class: 'fr-btn fr-btn--secondary', data: { confirm: 'Êtes-vous sûr de vouloir annuler la création de cette démarche ?'}
-      .procedure-form__preview.sticky--top
-        %h3.procedure-form__preview-title Aperçu
-        .procedure-preview
-          = render partial: 'shared/procedure_description', locals: { procedure: @procedure }

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

@@ -3,47 +3,35 @@
                       ["#{@procedure.libelle.truncate_words(10)}"]],
               metadatas: true }
 
-.container.procedure-admin-container
+.fr-container.procedure-admin-container
+  %ul.fr-btns-group.fr-btns-group--inline-sm.fr-btns-group--icon-left
     - if @procedure.draft_revision.valid?
       - if !@procedure.brouillon?
-      = link_to admin_procedure_archives_path(@procedure), class: 'button', id: "archive-procedure" do
+        = link_to 'Télécharger', admin_procedure_archives_path(@procedure), class: 'fr-btn fr-btn--tertiary fr-btn--icon-left fr-icon-download-line', id: "archive-procedure"
-        %span.icon.download
-        Télécharger
 
-      = link_to commencer_dossier_vide_for_revision_path(@procedure.active_revision), target: "_blank", rel: "noopener", class: 'button', id: "pdf-procedure" do
+        = link_to 'PDF', commencer_dossier_vide_for_revision_path(@procedure.active_revision), target: "_blank", rel: "noopener", class: 'fr-btn fr-btn--tertiary fr-btn--icon-left fr-icon-printer-line', id: "pdf-procedure"
-        %span.icon.printer
-        PDF
-
-    = link_to apercu_admin_procedure_path(@procedure), target: "_blank", rel: "noopener", class: 'button', id: "preview-procedure" do
-      %span.icon.preview
-      Prévisualiser
 
       - if @procedure.brouillon? || @procedure.draft_changed?
-      = link_to sanitize_url(@procedure_lien_test), target: :blank, rel: :noopener, class: 'button' do
+        = link_to 'Tester la démarche', sanitize_url(@procedure_lien_test), target: :blank, rel: :noopener, class: 'fr-btn fr-btn--tertiary fr-btn--icon-left fr-icon-edit-line'
-        %span.icon.in-progress
-        Tester
 
       - if @procedure.publiee? || @procedure.brouillon?
-      = link_to admin_procedure_transfert_path(@procedure), class: 'button' do
+        = link_to 'Envoyer une copie', admin_procedure_transfert_path(@procedure), class: 'fr-btn fr-btn--tertiary fr-btn--icon-left fr-icon-arrow-right-up-line'
-        %span.icon.reply
-        Envoyer une copie
 
       - if !@procedure.publiee? && !@procedure.close? && !@procedure.depubliee?
-      = link_to 'Publier', admin_procedure_publication_path(@procedure), class: 'button primary', id: 'publish-procedure-link', data: { disable_with: "Publication..." }
+        = link_to 'Publier', admin_procedure_publication_path(@procedure), class: 'fr-btn fr-btn--primary fr-btn--icon-left fr-icon-success-line', id: 'publish-procedure-link', data: { disable_with: "Publication..." }
 
       - if (@procedure.close? || @procedure.depubliee?) && !@procedure.draft_changed?
-      = link_to 'Réactiver', admin_procedure_publication_path(@procedure), class: 'button primary', id: 'publish-procedure-link', data: { disable_with: "Publication..." }
+        = link_to 'Réactiver', admin_procedure_publication_path(@procedure), class: 'fr-btn fr-btn--primary fr-btn--icon-left fr-icon-success-line', id: 'publish-procedure-link', data: { disable_with: "Publication..." }
 
       - if @procedure.locked? && !@procedure.close?
-      = link_to admin_procedure_archive_path(procedure_id: @procedure.id), method: :put, class: 'button', id: "close-procedure-link", data: { confirm:  "Voulez-vous vraiment clore la démarche ? \nLes dossiers en cours pourront être instruits, mais aucun nouveau dossier ne pourra plus être déposé.", disable_with: "Archivage..."} do
+        = link_to 'Clore', admin_procedure_archive_path(procedure_id: @procedure.id), method: :put, class: 'fr-btn fr-btn--tertiary fr-btn--icon-left fr-icon-archive-line', id: "close-procedure-link", data: { confirm:  "Voulez-vous vraiment clore la démarche ? \nLes dossiers en cours pourront être instruits, mais aucun nouveau dossier ne pourra plus être déposé.", disable_with: "Archivage..."}
-        %span.icon.archive
-        Clore
 
-.container
+
+.fr-container
   = render TypesDeChampEditor::ErrorsSummary.new(revision: @procedure.draft_revision)
 
 - if @procedure.draft_changed?
-  .container
+  .fr-container
     .card.featured
       .card-title
         = t(:has_changes, scope: [:administrateurs, :revision_changes])
@@ -54,7 +42,7 @@
 
 - if !@procedure.procedure_expires_when_termine_enabled?
   = render partial: 'administrateurs/procedures/suggest_expires_when_termine', locals: { procedure: @procedure }
-.container
+.fr-container
   %h2.fr-mt-5w.fr-mb-3w.fr-h1 Indispensable avant publication
   .fr-grid-row.fr-grid-row--gutters
     = render Procedure::Card::PresentationComponent.new(procedure: @procedure)

app/views/administrateurs/services/_form.html.haml

@@ -71,7 +71,6 @@
   - if procedure_id.present?
     = hidden_field_tag :procedure_id, procedure_id
 
-  .send-wrapper.justify-content--space-between.send-wrapper--with-border-top.my-0.py-3
+  .sticky-action-footer
+    = f.submit "Enregistrer", class: "fr-btn fr-mr-2w"
     = link_to "Annuler et revenir à la page de suivi", admin_procedure_path(id: @procedure.id), class: "fr-btn fr-btn--secondary"
-    = f.submit "Enregistrer", class: "fr-btn"
-

app/views/shared/_procedure_description.html.haml

@@ -5,7 +5,7 @@
   = image_tag procedure.logo_url, alt: procedure_logo_alt
   - if procedure.euro_flag
     = image_tag("flag_of_europe.svg", id: 'euro_flag', class: (!procedure.euro_flag ? "hidden" : ""))
-%h1.procedure-title.fr-h2
+%h1.fr-h2
   = procedure.libelle
 
 - if procedure.persisted? && procedure.estimated_duration_visible?

spec/system/administrateurs/procedure_creation_spec.rb

@@ -41,14 +41,6 @@ describe 'Creating a new procedure', js: true do
 
       add_champ
       expect(page).to have_selector('.type-de-champ', count: 1)
-
-      click_on Procedure.last.libelle
-
-      preview_window = window_opened_by { find('#preview-procedure').click }
-      within_window(preview_window) do
-        expect(page).to have_current_path(apercu_admin_procedure_path(Procedure.last))
-        expect(page).to have_field('libelle de champ')
-      end
     end
 
     scenario 'a warning is displayed when creating an invalid procedure' do

spec/system/administrateurs/procedure_publish_spec.rb

@@ -44,7 +44,6 @@ describe 'Publishing a procedure', js: true do
       click_on 'Publier'
 
       expect(page).to have_text('Démarche publiée')
-      expect(page).to have_selector('#preview-procedure')
     end
 
     context 'when the procedure has invalid champs' do
@@ -93,7 +92,6 @@ describe 'Publishing a procedure', js: true do
       click_on 'publish'
 
       expect(page).to have_text('Démarche publiée')
-      expect(page).to have_selector('#preview-procedure')
     end
   end
 
@@ -125,7 +123,6 @@ describe 'Publishing a procedure', js: true do
       find('#publish').click
 
       expect(page).to have_text('Démarche publiée')
-      expect(page).to have_selector('#preview-procedure')
     end
   end
 

spec/system/administrateurs/procedure_update_spec.rb

@@ -32,10 +32,6 @@ describe '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'
 
       expect(page).to have_selector('.fr-breadcrumb li', text: 'Ma petite démarche')

spec/views/administrateurs/procedures/edit.html.haml_spec.rb

@@ -1,15 +1,5 @@
 RSpec.describe 'administrateurs/procedures/edit', type: :view do
-  let(:logo) { fixture_file_upload('spec/fixtures/files/logo_test_procedure.png', 'image/png') }
+  let(:procedure) { create(:procedure, lien_site_web: 'http://some.website') }
-  let(:procedure) { create(:procedure, logo: logo, lien_site_web: 'http://some.website') }
-
-  context 'when procedure logo is present' do
-    it 'display on the page' do
-      assign(:procedure, procedure)
-      render
-
-      expect(rendered).to have_selector('.procedure-logos')
-    end
-  end
 
   context 'when opendata is enabled' do
     it 'asks for opendata' do