Merge pull request #7182 from betagouv/main

2022-04-21-01
2022-04-21 14:00:05 +02:00 · 2022-04-21 14:00:05 +02:00 · 3f0cb4d12d
commit 3f0cb4d12d
parent 25b2d82122 2d830a96d2
36 changed files with 369 additions and 209 deletions
--- a/1
+++ b/1
@ -71,7 +71,6 @@ gem 'rack-attack'
 gem 'rails'
 gem 'rails-i18n' # Locales par défaut
 gem 'rake-progressbar', require: false
-gem 'react-rails'
 gem 'rexml' # add missing gem due to ruby3 (https://github.com/Shopify/bootsnap/issues/325)
 gem 'rgeo-geojson'
 gem 'rqrcode'
--- a/Gemfile.lock
+++ b/Gemfile.lock
@ -121,10 +121,6 @@ GEM
    axlsx_styler (1.1.0)
      activesupport (>= 3.1)
      caxlsx (>= 2.0.2)
-    babel-source (5.8.35)
-    babel-transpiler (0.7.0)
-      babel-source (>= 4.0, < 6)
-      execjs (~> 2.0)
    bcrypt (3.1.16)
    better_html (1.0.16)
      actionview (>= 4.0)
@ -173,7 +169,6 @@ GEM
    coercible (1.0.0)
      descendants_tracker (~> 0.0.1)
    concurrent-ruby (1.1.10)
-    connection_pool (2.2.3)
    content_disposition (1.0.0)
    crack (0.4.5)
      rexml
@ -238,7 +233,6 @@ GEM
    ethon (0.15.0)
      ffi (>= 1.15.0)
    excon (0.79.0)
-    execjs (2.7.0)
    factory_bot (6.1.0)
      activesupport (>= 5.0.0)
    faraday (1.8.0)
@ -572,12 +566,6 @@ GEM
    rb-fsevent (0.10.4)
    rb-inotify (0.10.1)
      ffi (~> 1.0)
-    react-rails (2.6.1)
-      babel-transpiler (>= 0.7.0)
-      connection_pool
-      execjs
-      railties (>= 3.2)
-      tilt
    regexp_parser (2.1.0)
    request_store (1.5.0)
      rack (>= 1.4)
@ -885,7 +873,6 @@ DEPENDENCIES
  rails-erd
  rails-i18n
  rake-progressbar
-  react-rails
  rexml
  rgeo-geojson
  rqrcode
--- a/app/assets/stylesheets/carte.scss
+++ b/app/assets/stylesheets/carte.scss
@ -15,7 +15,7 @@
  }
 }

-.form [data-react-class='MapEditor'] [data-reach-combobox-input] {
+.form [data-react-component-value='MapEditor'] [data-reach-combobox-input] {
  margin-bottom: 0;
 }

--- a/app/assets/stylesheets/forms.scss
+++ b/app/assets/stylesheets/forms.scss
@ -488,13 +488,13 @@
  }
 }

-[data-react-class]:not([data-react-class^="ComboMultiple"]) {
+[data-react-component-value]:not([data-react-component-value^="ComboMultiple"]) {
  [data-reach-combobox-input]:not(.no-margin) {
    margin-bottom: $default-fields-spacer;
  }
 }

-[data-react-class^="ComboMultiple"] {
+[data-react-component-value^="ComboMultiple"] {
  margin-bottom: $default-fields-spacer;

  [data-reach-combobox-input] {
--- a/app/assets/stylesheets/personnes_impliquees.scss
+++ b/app/assets/stylesheets/personnes_impliquees.scss
@ -9,7 +9,7 @@
    margin-left: 16px;
  }

-  [data-react-class^="ComboMultiple"] {
+  [data-react-component-value^="ComboMultiple"] {
    margin-bottom: $default-fields-spacer;

    [data-reach-combobox-token-list] {
--- a/app/assets/stylesheets/procedure_show.scss
+++ b/app/assets/stylesheets/procedure_show.scss
@ -62,7 +62,7 @@
    text-align: center;
  }

-  [data-react-class^="ComboMultiple"] {
+  [data-react-component-value^="ComboMultiple"] {
    margin-bottom: $default-fields-spacer;

    [data-reach-combobox-token-list] {
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@ -1,6 +1,10 @@
 module ApplicationHelper
  include SanitizeUrl

+  def html_lang
+    I18n.locale.to_s
+  end
+
  def sanitize_url(url)
    if !url.nil?
      super(url, schemes: ['http', 'https'], replace_evil_with: root_url)
@ -26,6 +30,10 @@ module ApplicationHelper
    class_names.join(' ')
  end

+  def react_component(name, props = {}, html = {})
+    tag.div(**html.merge(data: { controller: 'react', react_component_value: name, react_props_value: props.to_json }))
+  end
+
  def render_to_element(selector, partial:, outer: false, locals: {})
    method = outer ? 'outerHTML' : 'innerHTML'
    html = escape_javascript(render partial: partial, locals: locals)
--- a/app/javascript/controllers/react_controller.tsx
+++ b/app/javascript/controllers/react_controller.tsx
@ -0,0 +1,70 @@
+import { Controller } from '@hotwired/stimulus';
+import React, { lazy, Suspense, FunctionComponent, StrictMode } from 'react';
+import { render, unmountComponentAtNode } from 'react-dom';
+import invariant from 'tiny-invariant';
+
+type Props = Record<string, unknown>;
+type Loader = () => Promise<{ default: FunctionComponent<Props> }>;
+const componentsRegistry = new Map<string, FunctionComponent<Props>>();
+
+export function registerComponents(components: Record<string, Loader>): void {
+  for (const [className, loader] of Object.entries(components)) {
+    componentsRegistry.set(className, LoadableComponent(loader));
+  }
+}
+
+// Initialize React components when their markup appears into the DOM.
+//
+// Example:
+//   <div data-controller="react" data-react-component-value="ComboMultiple" data-react-props-value="{}"></div>
+//
+export class ReactController extends Controller {
+  static values = {
+    component: String,
+    props: Object
+  };
+
+  declare readonly componentValue: string;
+  declare readonly propsValue: Props;
+
+  connect(): void {
+    this.mountComponent(this.element as HTMLElement);
+  }
+
+  disconnect(): void {
+    unmountComponentAtNode(this.element as HTMLElement);
+  }
+
+  private mountComponent(node: HTMLElement): void {
+    const componentName = this.componentValue;
+    const props = this.propsValue;
+    const Component = this.getComponent(componentName);
+
+    invariant(
+      Component,
+      `Cannot find a React component with class "${componentName}"`
+    );
+    render(
+      <StrictMode>
+        <Component {...props} />
+      </StrictMode>,
+      node
+    );
+  }
+
+  private getComponent(componentName: string): FunctionComponent<Props> | null {
+    return componentsRegistry.get(componentName) ?? null;
+  }
+}
+
+const Spinner = () => <div className="spinner left" />;
+
+function LoadableComponent(loader: Loader): FunctionComponent<Props> {
+  const LazyComponent = lazy(loader);
+  const Component: FunctionComponent<Props> = (props: Props) => (
+    <Suspense fallback={<Spinner />}>
+      <LazyComponent {...props} />
+    </Suspense>
+  );
+  return Component;
+}
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@ -2,6 +2,7 @@ import '../shared/polyfills';
 import Rails from '@rails/ujs';
 import * as ActiveStorage from '@rails/activestorage';
 import 'whatwg-fetch'; // window.fetch polyfill
+import { Application } from '@hotwired/stimulus';

 import '../shared/page-update-event';
 import '../shared/activestorage/ujs';
@ -12,6 +13,11 @@ import '../shared/franceconnect';
 import '../shared/toggle-target';
 import '../shared/ujs-error-handling';

+import {
+  ReactController,
+  registerComponents
+} from '../controllers/react_controller';
+
 import '../new_design/dropdown';
 import '../new_design/form-validation';
 import '../new_design/procedure-context';
@ -46,37 +52,23 @@ import {
  showNewAccountPasswordConfirmation
 } from '../new_design/fc-fusion';

-import {
-  registerReactComponents,
-  Loadable
-} from '../shared/register-react-components';
-
-registerReactComponents({
-  Chartkick: Loadable(() => import('../components/Chartkick')),
-  ComboAdresseSearch: Loadable(() =>
-    import('../components/ComboAdresseSearch')
-  ),
-  ComboAnnuaireEducationSearch: Loadable(() =>
-    import('../components/ComboAnnuaireEducationSearch')
-  ),
-  ComboCommunesSearch: Loadable(() =>
-    import('../components/ComboCommunesSearch')
-  ),
-  ComboDepartementsSearch: Loadable(() =>
-    import('../components/ComboDepartementsSearch')
-  ),
-  ComboMultipleDropdownList: Loadable(() =>
-    import('../components/ComboMultipleDropdownList')
-  ),
-  ComboMultiple: Loadable(() => import('../components/ComboMultiple')),
-  ComboPaysSearch: Loadable(() => import('../components/ComboPaysSearch')),
-  ComboRegionsSearch: Loadable(() =>
-    import('../components/ComboRegionsSearch')
-  ),
-  MapEditor: Loadable(() => import('../components/MapEditor')),
-  MapReader: Loadable(() => import('../components/MapReader')),
-  Trix: Loadable(() => import('../components/Trix')),
-  TypesDeChampEditor: Loadable(() => import('../components/TypesDeChampEditor'))
+registerComponents({
+  Chartkick: () => import('../components/Chartkick'),
+  ComboAdresseSearch: () => import('../components/ComboAdresseSearch'),
+  ComboAnnuaireEducationSearch: () =>
+    import('../components/ComboAnnuaireEducationSearch'),
+  ComboCommunesSearch: () => import('../components/ComboCommunesSearch'),
+  ComboDepartementsSearch: () =>
+    import('../components/ComboDepartementsSearch'),
+  ComboMultipleDropdownList: () =>
+    import('../components/ComboMultipleDropdownList'),
+  ComboMultiple: () => import('../components/ComboMultiple'),
+  ComboPaysSearch: () => import('../components/ComboPaysSearch'),
+  ComboRegionsSearch: () => import('../components/ComboRegionsSearch'),
+  MapEditor: () => import('../components/MapEditor'),
+  MapReader: () => import('../components/MapReader'),
+  Trix: () => import('../components/Trix'),
+  TypesDeChampEditor: () => import('../components/TypesDeChampEditor')
 });

 // This is the global application namespace where we expose helpers used from rails views
@ -98,5 +90,8 @@ const DS = {
 Rails.start();
 ActiveStorage.start();

+const Stimulus = Application.start();
+Stimulus.register('react', ReactController);
+
 // Expose globals
 window.DS = window.DS || DS;
--- a/app/javascript/shared/register-react-components.tsx
+++ b/app/javascript/shared/register-react-components.tsx
@ -1,97 +0,0 @@
-import React, { Suspense, lazy, createElement, ComponentClass } from 'react';
-import { render } from 'react-dom';
-
-// This attribute holds the name of component which should be mounted
-// example: `data-react-class="MyApp.Items.EditForm"`
-const CLASS_NAME_ATTR = 'data-react-class';
-
-// This attribute holds JSON stringified props for initializing the component
-// example: `data-react-props="{\"item\": { \"id\": 1, \"name\": \"My Item\"} }"`
-const PROPS_ATTR = 'data-react-props';
-
-const CLASS_NAME_SELECTOR = `[${CLASS_NAME_ATTR}]`;
-
-// helper method for the mount and unmount methods to find the
-// `data-react-class` DOM elements
-function findDOMNodes(searchSelector?: string): NodeListOf<HTMLDivElement> {
-  const [selector, parent] = getSelector(searchSelector);
-  return parent.querySelectorAll<HTMLDivElement>(selector);
-}
-
-function getSelector(searchSelector?: string): [string, Document] {
-  switch (typeof searchSelector) {
-    case 'undefined':
-      return [CLASS_NAME_SELECTOR, document];
-    case 'object':
-      return [CLASS_NAME_SELECTOR, searchSelector];
-    case 'string':
-      return [
-        ['', ' ']
-          .map(
-            (separator) => `${searchSelector}${separator}${CLASS_NAME_SELECTOR}`
-          )
-          .join(', '),
-        document
-      ];
-  }
-}
-
-class ReactComponentRegistry {
-  #components;
-
-  constructor(components: Record<string, ComponentClass>) {
-    this.#components = components;
-  }
-
-  getConstructor(className: string | null) {
-    return className ? this.#components[className] : null;
-  }
-
-  mountComponents(searchSelector?: string) {
-    const nodes = findDOMNodes(searchSelector);
-
-    for (const node of nodes) {
-      const className = node.getAttribute(CLASS_NAME_ATTR);
-      const ComponentClass = this.getConstructor(className);
-      const propsJson = node.getAttribute(PROPS_ATTR);
-      const props = propsJson && JSON.parse(propsJson);
-
-      if (!ComponentClass) {
-        const message = `Cannot find component: "${className}"`;
-        console?.log(
-          `%c[react-rails] %c${message} for element`,
-          'font-weight: bold',
-          '',
-          node
-        );
-        throw new Error(
-          `${message}. Make sure your component is available to render.`
-        );
-      } else {
-        render(createElement(ComponentClass, props), node);
-      }
-    }
-  }
-}
-
-const Loader = () => <div className="spinner left" />;
-
-export function Loadable(loader: () => Promise<{ default: ComponentClass }>) {
-  const LazyComponent = lazy(loader);
-
-  return function PureComponent(props: Record<string, unknown>) {
-    return (
-      <Suspense fallback={<Loader />}>
-        <LazyComponent {...props} />
-      </Suspense>
-    );
-  };
-}
-
-export function registerReactComponents(
-  components: Record<string, ComponentClass>
-) {
-  const registry = new ReactComponentRegistry(components);
-
-  addEventListener('ds:page:update', () => registry.mountComponents());
-}
--- a/app/views/administrateurs/groupe_instructeurs/_edit.html.haml
+++ b/app/views/administrateurs/groupe_instructeurs/_edit.html.haml
@ -5,37 +5,44 @@
    html: { class: 'form' } do |f|

    = f.label :routing_criteria_name do
-      Libellé du routage
-    %p.notice Ce texte apparaitra sur le formulaire usager comme le libellé d’une liste
-    = f.text_field :routing_criteria_name, placeholder: 'ex. Votre ville', required: true
-    = f.submit 'Renommer', class: 'button primary send'
+      = t('.routing.title')
+    %p.notice
+      = t('.routing.notice')
+    = f.text_field :routing_criteria_name, placeholder: t('.add_a_group.placeholder'), required: true
+    = f.submit t('.button.rename'), class: 'button primary send'

 .card
-  .card-title Gestion des Groupes
+  .card-title
+    = t('.group_management.title')

  = form_for :groupe_instructeur, html: { class: 'form' } do |f|
    = f.label :label do
-      Ajouter un groupe
-    %p.notice Ce groupe sera un choix de la liste « #{procedure.routing_criteria_name} » .
-    = f.text_field :label, placeholder: 'ex. Ville de Bordeaux', required: true
-    = f.submit 'Ajouter le groupe', class: "button primary send"
+      = t('.add_a_group.title')
+    %p.notice
+      = t('.add_a_group.notice', routing_criteria_name: procedure.routing_criteria_name)
+    = f.text_field :label, placeholder: t('.add_a_group.placeholder'), required: true
+    = f.submit t('.button.add_group'), class: "button primary send"

  - csv_max_size = Administrateurs::GroupeInstructeursController::CSV_MAX_SIZE
  - if procedure.publiee?
    = form_tag import_admin_procedure_groupe_instructeurs_path(procedure), method: :post, multipart: true, class: "mt-4 form" do
-      = label_tag "Importer par fichier CSV"
-      %p.notice Le fichier csv doit comporter 2 colonnes (Groupe, Email) et être séparé par des virgules. L'import n'écrase pas les groupes et les instructeurs existants.
-      %p.notice Le poids du fichier doit être inférieur à #{number_to_human_size(csv_max_size)}
-      %p.mt-2.mb-2= link_to "Télécharger l'exemple de fichier CSV", "/csv/#{I18n.locale}/import-groupe-test.csv"
+      = label_tag t('.csv_import.title')
+      %p.notice
+        = t('.csv_import.notice_1')
+      %p.notice
+        = t('.csv_import.notice_2', csv_max_size: number_to_human_size(csv_max_size))
+      %p.mt-2.mb-2= link_to t('.csv_import.download_exemple'), "/csv/#{I18n.locale}/import-groupe-test.csv"
      = file_field_tag :group_csv_file, required: true, accept: 'text/csv', size: "1"
-      = submit_tag "Importer le fichier", class: 'button primary send', data: { disable_with: "Envoi..." }
+      = submit_tag t('.csv_import.import_file'), class: 'button primary send', data: { disable_with: "Envoi..." }
  - else
-    %p.mt-4.form.bold.mb-2.text-lg Importer par fichier CSV
-    %p.notice L’import d’instructeurs par fichier CSV est disponible une fois la démarche publiée
-
+    %p.mt-4.form.bold.mb-2.text-lg
+      = t('.csv_import.title')
+    %p.notice
+      = t('.csv_import.import_file_procedure_not_published')
  %table.table.mt-2
    %thead
      %tr
+        // i18n-tasks-use t('.existing_groupe')
        %th{ colspan: 2 }= t(".existing_groupe", count: groupes_instructeurs.total_count)
        %th
          - if groupe_instructeurs_count > 1
@ -44,18 +51,18 @@
      - groupes_instructeurs.each do |group|
        %tr
          %td= group.label
-          %td.actions= link_to "voir", admin_procedure_groupe_instructeur_path(procedure, group)
+          %td.actions= link_to t('.view'), admin_procedure_groupe_instructeur_path(procedure, group)
          - if groupes_instructeurs.many?
            - if group.dossiers.empty?
              %td.actions
-                = link_to admin_procedure_groupe_instructeur_path(procedure, group), { method: :delete, class: 'button', data: { confirm: "Êtes-vous sûr de vouloir supprimer le groupe « #{group.label} » ?" }} do
+                = link_to admin_procedure_groupe_instructeur_path(procedure, group), { method: :delete, class: 'button', data: { confirm: t('.group_management.delete_confirmation', group_name: group.label) }} do
                  %span.icon.delete
-                  supprimer ce groupe
+                  = t('.group_management.delete')
            - else
              %td.actions
-                = link_to reaffecter_dossiers_admin_procedure_groupe_instructeur_path(procedure, group), class: 'button', title:'Réaffecter les dossiers à un autre groupe afin de pouvoir le supprimer' do
+                = link_to reaffecter_dossiers_admin_procedure_groupe_instructeur_path(procedure, group), class: 'button', title: t('.group_management.move_folders_confirmation') do
                  %span.icon.follow
-                  déplacer les dossiers
+                  = t('.group_management.move_folders')


  = paginate groupes_instructeurs
--- a/app/views/administrateurs/groupe_instructeurs/_routing.html.haml
+++ b/app/views/administrateurs/groupe_instructeurs/_routing.html.haml
@ -1,5 +1,6 @@
 .card
-  .card-title Routage
+  .card-title
+    = t('.title')
  - if !procedure.routee?
    %p.notice= t('.notice_html')

--- a/app/views/administrateurs/groupe_instructeurs/index.html.haml
+++ b/app/views/administrateurs/groupe_instructeurs/index.html.haml
@ -1,8 +1,8 @@
 - if @procedure.routee?
  = render partial: 'administrateurs/breadcrumbs',
-    locals: { steps: [link_to('Démarches', admin_procedures_path),
+    locals: { steps: [link_to(t('.procedures'), admin_procedures_path),
                      link_to(@procedure.libelle, admin_procedure_path(@procedure)),
-                      'Groupes d’instructeurs'] }
+                      t('.instructors_group')] }
 - else
  = render partial: 'administrateurs/breadcrumbs',
    locals: { steps: [link_to('Démarches', admin_procedures_path),
--- a/app/views/administrateurs/groupe_instructeurs/reaffecter_dossiers.html.haml
+++ b/app/views/administrateurs/groupe_instructeurs/reaffecter_dossiers.html.haml
@ -10,7 +10,6 @@
    .card-title Réaffectation des dossiers du groupe « #{@groupe_instructeur.label} »
    %p
      Le groupe « #{@groupe_instructeur.label} » contient des dossiers. Afin de procéder à sa suppression, vous devez réaffecter ses dossiers à un autre groupe instructeur.
-
    %table.table.mt-2
      %thead
        %tr
--- a/app/views/instructeurs/procedures/email_notifications.html.haml
+++ b/app/views/instructeurs/procedures/email_notifications.html.haml
@ -5,74 +5,75 @@
                    'Notifications'] }

 .container
-  %h1 Notifications par email
+  %h1
+    = t('.title')

  = form_for @assign_to, url: update_email_notifications_instructeur_procedure_path(@procedure), html: { class: 'form' } do |form|
    .explication
-      Configurez sur cette page les notifications que vous souhaitez recevoir par email pour cette démarche.
+      = t('.subtitle')

-    = form.label :email_notification, "Recevoir une notification à chaque dossier déposé"
+    = form.label :email_notification, t('.for_each_file_submitted.title')

    %p.notice
-      Cet email vous signale le dépôt d’un nouveau dossier.
+      = t('.for_each_file_submitted.notice_1')
    %p.notice
-      Il est envoyé à chaque fois qu'un usager dépose un dossier.
+      = t('.for_each_file_submitted.notice_2')

    .radios
      %label
        = form.radio_button :instant_email_dossier_notifications_enabled, true
-        Oui
+        = t('.utils.positive')

      %label
        = form.radio_button :instant_email_dossier_notifications_enabled, false
-        Non
+        = t('.utils.negative')

-    = form.label :email_notification, "Recevoir une notification à chaque message déposé"
+    = form.label :email_notification, t('.for_each_message_submitted.title')

    %p.notice
-      Cet email vous signale le dépôt d’un nouveau message sur vos dossiers suivis.
+      = t('.for_each_message_submitted.notice_1')
    %p.notice
-      Il est envoyé à chaque fois qu'un usager dépose un message.
+      = t('.for_each_message_submitted.notice_2')

    .radios
      %label
        = form.radio_button :instant_email_message_notifications_enabled, true
-        Oui
+        = t('.utils.positive')

      %label
        = form.radio_button :instant_email_message_notifications_enabled, false
-        Non
+        = t('.utils.negative')

-    = form.label :email_notification, "Recevoir une notification quotidienne"
+    = form.label :email_notification, t('.daily_notifications.title')

    %p.notice
-      Cet email vous signale le dépôt de nouveaux dossiers sur cette démarche, ou des changements sur vos dossiers suivis.
+      = t('.daily_notifications.notice_1')
    %p.notice
-      Il est envoyé une fois par jour, du lundi au samedi, vers 10 h du matin.
+      = t('.daily_notifications.notice_2')

    .radios
      %label
        = form.radio_button :daily_email_notifications_enabled, true
-        Oui
+        = t('.utils.positive')

      %label
        = form.radio_button :daily_email_notifications_enabled, false
-        Non
+        = t('.utils.negative')

-    = form.label :email_notification, "Recevoir un récapitulatif hebdomadaire"
+    = form.label :email_notification, t('.hebdo_recap.title')
    %p.notice
-      Cet email récapitule l’activité de la semaine sur l’ensemble de vos démarches.
+      = t('.hebdo_recap.notice_1')
    %p.notice
-      Il est envoyé chaque semaine le lundi matin.
+      = t('.hebdo_recap.notice_2')

    .radios
      %label
        = form.radio_button :weekly_email_notifications_enabled, true
-        Oui
+        = t('.utils.positive')
      %label
        = form.radio_button :weekly_email_notifications_enabled, false
-        Non
+        = t('.utils.negative')

    .send-wrapper
-      = link_to "Revenir à la procédure", instructeur_procedure_path(@procedure), class: 'button mr-1'
-      = form.submit "Enregistrer", class: "button primary"
+      = link_to t('.buttons.back_to_procedure'), instructeur_procedure_path(@procedure), class: 'button mr-1'
+      = form.submit t('.buttons.save'), class: "button primary"
--- a/app/views/instructeurs/procedures/email_usagers.html.haml
+++ b/app/views/instructeurs/procedures/email_usagers.html.haml
@ -2,10 +2,12 @@

 = render partial: 'administrateurs/breadcrumbs',
  locals: { steps: [link_to(@procedure.libelle, instructeur_procedure_path(@procedure)),
-                    'Contacter les usagers (brouillon)'] }
+                    t('.contact_users')] }
 .messagerie.container
  - if @email_usagers_dossiers.present?
-    %p.notice.mb-2.mt-4 Vous allez envoyer un message à #{pluralize(@dossiers_count, 'personne')} dont les dossiers sont en brouillon, dans les groupes instructeurs : #{@groupe_instructeurs.join(', ')}.
+    %p.notice.mb-2.mt-4
+      = t('.notice', dossiers_count: pluralize(@dossiers_count, 'personne'), groupe_instructeurs: @groupe_instructeurs.join(', '))
+
    = render partial: 'shared/dossiers/messages/form', locals: { commentaire: @commentaire, form_url: create_multiple_commentaire_instructeur_procedure_path(@procedure), disable_piece_jointe: true }

    - if @bulk_messages.present?
--- a/app/views/instructeurs/procedures/stats.html.haml
+++ b/app/views/instructeurs/procedures/stats.html.haml
@ -3,6 +3,6 @@

 = render partial: 'administrateurs/breadcrumbs',
  locals: { steps: [link_to(@procedure.libelle, instructeur_procedure_path(@procedure)),
-                    'Statistiques'] }
+                    t('.title')] }

 = render partial: 'shared/procedures/stats', locals: { title: title }
--- a/app/views/layouts/_header.haml
+++ b/app/views/layouts/_header.haml
@ -39,7 +39,7 @@
      - if nav_bar_profile == :user
        %ul.header-tabs
          %li
-            = active_link_to "Dossiers", dossiers_path, active: :inclusive, class: 'tab-link'
+            = active_link_to t('.files'), dossiers_path, active: :inclusive, class: 'tab-link'
          - if current_user.expert && current_expert.avis_summary[:total] > 0
            = render partial: 'layouts/header/avis_tab', locals: { current_expert: current_expert }

--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@ -1,5 +1,5 @@
 !!! 5
-%html{ lang: "fr", class: yield(:root_class) }
+%html{ lang: html_lang, class: yield(:root_class) }
  %head
    %meta{ "http-equiv": "Content-Type", content: "text/html; charset=UTF-8" }
    %meta{ "http-equiv": "X-UA-Compatible", content: "IE=edge" }
--- a/app/views/shared/help/dropdown_items/_email_item.html.haml
+++ b/app/views/shared/help/dropdown_items/_email_item.html.haml
@ -2,5 +2,7 @@
  = mail_to CONTACT_EMAIL do
    %span.icon.mail
    .dropdown-description
-      %span.help-dropdown-title Contact technique
-      %p Envoyez nous un message à #{CONTACT_EMAIL}.
+      %span.help-dropdown-title
+        = t('help_dropdown.technical_contact_title')
+      %p
+        = t('help_dropdown.technical_contact_description', contact_email: CONTACT_EMAIL)
--- a/app/views/shared/help/dropdown_items/_faq_item.html.haml
+++ b/app/views/shared/help/dropdown_items/_faq_item.html.haml
@ -2,5 +2,8 @@
  = link_to FAQ_URL, target: "_blank", rel: "noopener" do
    %span.icon.help
    .dropdown-description
-      %span.help-dropdown-title Un problème avec le site ?
-      %p Trouvez votre réponse dans l’aide en ligne.
+      %span.help-dropdown-title
+        = t('help_dropdown.problem_title')
+      %p
+        = t('help_dropdown.problem_description')
+
--- a/babel.config.js
+++ b/babel.config.js
@ -49,6 +49,7 @@ module.exports = function (api) {
      '@babel/plugin-syntax-dynamic-import',
      isTestEnv && 'babel-plugin-dynamic-import-node',
      '@babel/plugin-transform-destructuring',
+      ['@babel/plugin-transform-typescript', { allowDeclareFields: true }],
      [
        '@babel/plugin-proposal-class-properties',
        {
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@ -34,6 +34,11 @@ en:
    custom_message: 'If you are a human, ignore this field'

  help: 'Help'
+  help_dropdown:
+    problem_title: A problem with the website ?
+    problem_description: Find your answer in the online help.
+    technical_contact_title: Technical contact
+    technical_contact_description: Send us a message to %{contact_email}.
  utils:
    'yes': Yes
    'no': No
--- a/config/locales/fr.yml
+++ b/config/locales/fr.yml
@ -22,8 +22,12 @@
 fr:
  invisible_captcha:
    custom_message: 'Si vous êtes un humain, veuillez ignorer ce champs'
-
  help: 'Aide'
+  help_dropdown:
+    problem_title: Un problème avec le site ?
+    problem_description: Trouvez votre réponse dans l’aide en ligne.
+    technical_contact_title: Contact technique
+    technical_contact_description: Envoyez nous un message à %{contact_email}.
  utils:
    'yes': Oui
    'no': Non
--- a/config/locales/models/procedure_presentation/en.yml
+++ b/config/locales/models/procedure_presentation/en.yml
@ -1,4 +1,4 @@
-fr:
+en:
  activerecord:
    attributes:
      procedure_presentation:
--- a/config/locales/views/administrateurs/groupe_instructeurs/en.yml
+++ b/config/locales/views/administrateurs/groupe_instructeurs/en.yml
@ -0,0 +1,67 @@
+en:
+  administrateurs:
+    experts_procedures:
+      create:
+        experts_assignment:
+          one: "The expert %{value} was assigned to the procedure n° %{procedure}"
+          other: "The experts %{value} were assigned to the procedure n° %{procedure}"
+    groupe_instructeurs:
+      index:
+        procedures: Procedures
+        instructors_group: Group of instructors
+      add_instructeur:
+        wrong_address:
+          one: "%{value} is not a valid email address"
+          other: "%{value} are not valid email addresses"
+        assignment:
+          one: "The instructor %{value} was assigned to the group « %{groupe} »."
+          other: "The instructors %{value} were assigned to the group « %{groupe} »."
+      reaffecter_dossiers:
+        existing_groupe:
+          one: "%{count} group exist"
+          other: "%{count} groups exist"
+      instructeurs:
+        assigned_instructeur:
+          one: "%{count} instructor is assigned"
+          other: "%{count} instructors are assigned"
+      edit:
+        routing:
+          title: Routing label
+          notice: This text will appear on the user form as the label of a list
+        group_management:
+          title: Group management
+          delete: delete the group
+          delete_confirmation: Are you sure you want to delete the group "%{group_name}"
+          move_folders: move folders
+          move_folders_confirmation: Reassign folders to another group so you can delete it
+        add_a_group:
+          title: Add a group
+          notice: This group will be a choice from the list "%{routing_criteria_name}"
+          placeholder: ex. City of Bordeaux
+        csv_import:
+          title: CSV Import
+          notice_1: The csv file must have 2 columns (Group, Email) and be separated by commas. The import does not overwrite existing groups and instructors.
+          notice_2: The size of the file must be less than %{csv_max_size}.
+          download_exemple: Download sample CSV file
+          import_file: Import file
+          import_file_procedure_not_published: The import of instructors by CSV file is available once the process has been published
+        view: view
+        button:
+          add_group: Add group
+          rename: Rename
+        existing_groupe:
+          one: "%{count} group exist"
+          other: "%{count} groups exist"
+      routing:
+        title: Routing
+        notice_html: |
+          Routing is a feature for procedures requiring the sharing of instructions between different groups according to a specific criterion (territory, theme or other).
+          <br><br>
+          This feature makes it possible to route the files to each group, and to no longer need to filter its files among a large quantity of requests. It is therefore particularly suitable for national approaches instructed locally.
+          <br><br>
+          Instructors only see the files that concern them, and therefore do not have access to data outside their scope.
+        self_managment_notice_html: |
+         Instructor Self-Management allows instructors to self-manage the list of Gait Instructors.
+        button:
+          routing_enable: Enable routing
+          routing_disable: Disable routing
--- a/config/locales/views/administrateurs/groupe_instructeurs/fr.yml
+++ b/config/locales/views/administrateurs/groupe_instructeurs/fr.yml
@ -10,6 +10,8 @@ fr:
          other: "Les experts %{value} ont été affectés à la démarche n° %{procedure}"
    groupe_instructeurs:
      index:
+        procedures: Démarches
+        instructors_group: Groupe d'instructeurs
        existing_groupe:
          one: "%{count} groupe existe"
          other: "%{count} groupes existent"
@ -29,10 +31,35 @@ fr:
          one: "%{count} instructeur est affecté"
          other: "%{count} instructeurs sont affectés"
      edit:
+        routing:
+          title: Libellé du routage
+          notice: Ce texte apparaitra sur le formulaire usager comme le libellé d’une liste
+        group_management:
+          title: Gestion des Groupes
+          delete: supprimer le groupe
+          delete_confirmation: Êtes-vous sûr de vouloir supprimer le groupe "%{group_name}"
+          move_folders: déplacer les dossiers
+          move_folders_confirmation: Réaffecter les dossiers à un autre groupe afin de pouvoir le supprimer
+        add_a_group:
+          title: Ajouter un groupe
+          notice: Ce groupe sera un choix de la liste "%{routing_criteria_name}"
+          placeholder: ex. Ville de Bordeaux
+        csv_import:
+          title: Importer par CSV
+          notice_1: Le fichier csv doit comporter 2 colonnes (Groupe, Email) et être séparé par des virgules. L'import n'écrase pas les groupes et les instructeurs existants.
+          notice_2: Le poids du fichier doit être inférieur à %{csv_max_size}
+          download_exemple: Télécharger l'exemple de fichier CSV
+          import_file: Importer le fichier
+          import_file_procedure_not_published: L’import d’instructeurs par fichier CSV est disponible une fois la démarche publiée
+        view: voir
+        button:
+          add_group: Ajouter le groupe
+          rename: Renommer
        existing_groupe:
          one: "%{count} groupe existe"
          other: "%{count} groupes existent"
      routing:
+        title: Routage
        notice_html: |
          Le routage est une fonctionnalité pour les démarches nécessitant le partage de l’instruction entre différents groupes en fonction d’un critère précis (territoire, thématique ou autre).
          <br><br>
@ -45,3 +72,4 @@ fr:
          routing_enable: Activer le routage
          routing_disable: Désactiver le routage
          self_managment_toggle: Activer l’autogestion des instructeurs
+          add_group: Ajouter le groupe
--- a/config/locales/views/instructeurs/procedures/email_notifications/en.yml
+++ b/config/locales/views/instructeurs/procedures/email_notifications/en.yml
@ -0,0 +1,30 @@
+en:
+  instructeurs:
+    procedures:
+      email_notifications:
+        utils:
+          positive: "Yes"
+          negative: "No"
+        title: Email notifications
+        subtitle: On this page, configure the notifications you wish to receive by email for this procedure.
+        for_each_file_submitted:
+          title: Receive a notification for each file submitted
+          notice_1: This email notifies you that a new file has been submitted.
+          notice_2: It is sent each time a user submits a file.
+        for_each_message_submitted:
+          title: Receive a notification for each message submitted
+          notice_1: This email notifies you that a new message has been submitted on your following files.
+          notice_2: It is sent each time a user submits a message.
+        daily_notifications:
+          title: Receive a daily notification
+          notice_1: This email notifies you of the filing of new files on this approach, or of changes to your monitored files.
+          notice_2: It is sent once a day, Monday to Saturday, around 10 a.m.
+        hebdo_recap:
+          title: Receive a weekly recap
+          notice_1: This email summarizes the activity of the week on all of your procedures.
+          notice_2: It is sent weekly on Monday morning.
+        buttons:
+          back_to_procedure: Back to procedure
+          save: Save
+
+  
--- a/config/locales/views/instructeurs/procedures/email_notifications/fr.yml
+++ b/config/locales/views/instructeurs/procedures/email_notifications/fr.yml
@ -0,0 +1,28 @@
+fr:
+  instructeurs:
+    procedures:
+      email_notifications:
+        utils:
+          positive: Oui
+          negative: Non
+        title: Notifications par email
+        subtitle: Configurez sur cette page les notifications que vous souhaitez recevoir par email pour cette démarche.
+        for_each_file_submitted:
+          title: Recevoir une notification à chaque dossier déposé
+          notice_1: Cet email vous signale le dépôt d’un nouveau dossier.
+          notice_2: Il est envoyé à chaque fois qu'un usager dépose un dossier.
+        for_each_message_submitted:
+          title: Recevoir une notification à chaque message déposé
+          notice_1: Cet email vous signale le dépôt d’un nouveau message sur vos dossiers suivis.
+          notice_2: Il est envoyé à chaque fois qu'un usager dépose un message.
+        daily_notifications:
+          title: Recevoir une notification quotidienne
+          notice_1: Cet email vous signale le dépôt de nouveaux dossiers sur cette démarche, ou des changements sur vos dossiers suivis.
+          notice_2: Il est envoyé une fois par jour, du lundi au samedi, vers 10 h du matin.
+        hebdo_recap:
+          title: Recevoir un récapitulatif hebdomadaire
+          notice_1: Cet email récapitule l’activité de la semaine sur l’ensemble de vos démarches.
+          notice_2: Il est envoyé chaque semaine le lundi matin.
+        buttons:
+          back_to_procedure: Revenir à la procédure
+          save: Enregistrer
--- a/config/locales/views/instructeurs/procedures/en.yml
+++ b/config/locales/views/instructeurs/procedures/en.yml
@ -35,3 +35,8 @@ en:
        export_monthly_pending_html: An export of the last 30 days in the format %{export_format} is being generated<br>(asked %{export_time} ago)
        download_archive: Download a .zip archive of all files and their attachments
        download: Download all files
+      email_usagers:
+        contact_users: Contact users (draft)
+        notice: "You will send a message to %{dossiers_count} whose files are in draft, in the instructor groups : %{groupe_instructeurs}."
+      stats: 
+        title: Statistics
--- a/config/locales/views/instructeurs/procedures/fr.yml
+++ b/config/locales/views/instructeurs/procedures/fr.yml
@ -35,3 +35,8 @@ fr:
        export_monthly_pending_html: Un export des 30 derniers jours au format %{export_format} est en train d’être généré<br>(demandé il y a %{export_time})
        download_archive: Télécharger une archive au format .zip de tous les dossiers et leurs pièces jointes
        download: Télécharger tous les dossiers
+      email_usagers:
+        contact_users: Contacter les usagers (brouillon)
+        notice: "Vous allez envoyer un message à %{dossiers_count} dont les dossiers sont en brouillon, dans les groupes instructeurs : %{groupe_instructeurs}."
+      stats:
+        title: Statistiques
--- a/config/locales/views/layouts/_account_dropdown.en.yml
+++ b/config/locales/views/layouts/_account_dropdown.en.yml
@ -1,5 +1,7 @@
 en:
  layouts:
+    header:
+      files: Files
    go_superadmin: "Switch to super-admin"
    go_user: "Switch to user"
    go_instructor: "Switch to instructor"
--- a/config/locales/views/layouts/_account_dropdown.fr.yml
+++ b/config/locales/views/layouts/_account_dropdown.fr.yml
@ -1,5 +1,7 @@
 fr:
  layouts:
+    header:
+      files: Dossiers
    go_superadmin: "Passer en super-admin"
    go_user: "Passer en usager"
    go_instructor: "Passer en instructeur"
--- a/package.json
+++ b/package.json
@ -4,6 +4,7 @@
    "@babel/preset-typescript": "^7.16.7",
    "@headlessui/react": "^1.5.0",
    "@heroicons/react": "^1.0.6",
+    "@hotwired/stimulus": "^3.0.1",
    "@mapbox/mapbox-gl-draw": "^1.3.0",
    "@popperjs/core": "^2.11.4",
    "@rails/actiontext": "^6.1.4-1",
--- a/spec/views/shared/dossiers/_edit.html.haml_spec.rb
+++ b/spec/views/shared/dossiers/_edit.html.haml_spec.rb
@ -87,7 +87,7 @@ describe 'shared/dossiers/edit.html.haml', type: :view do
      let(:champ_value) { ['banana', 'grapefruit'].to_json }

      it 'renders the list as a multiple-selection dropdown' do
-        expect(subject).to have_selector('[data-react-class="ComboMultipleDropdownList"]')
+        expect(subject).to have_selector('[data-react-component-value="ComboMultipleDropdownList"]')
      end
    end
  end
--- a/yarn.lock
+++ b/yarn.lock
@ -1269,6 +1269,11 @@
  resolved "https://registry.yarnpkg.com/@heroicons/react/-/react-1.0.6.tgz#35dd26987228b39ef2316db3b1245c42eb19e324"
  integrity sha512-JJCXydOFWMDpCP4q13iEplA503MQO3xLoZiKum+955ZCtHINWnx26CUxVxxFQu/uLb4LW3ge15ZpzIkXKkJ8oQ==

+"@hotwired/stimulus@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@hotwired/stimulus/-/stimulus-3.0.1.tgz#141f15645acaa3b133b7c247cad58ae252ffae85"
+  integrity sha512-oHsJhgY2cip+K2ED7vKUNd2P+BEswVhrCYcJ802DSsblJFv7mPFVk3cQKvm2vHgHeDVdnj7oOKrBbzp1u8D+KA==
+
 "@humanwhocodes/config-array@^0.5.0":
  version "0.5.0"
  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.5.0.tgz#1407967d4c6eecd7388f83acf1eaf4d0c6e58ef9"