refactor(turbo): champ siret and dossier_link use turbo

app/javascript/controllers/turbo_input_controller.tsx

@@ -0,0 +1,22 @@
+import { httpRequest } from '@utils';
+
+import { ApplicationController } from './application_controller';
+
+export class TurboInputController extends ApplicationController {
+  static values = {
+    url: String
+  };
+
+  declare readonly urlValue: string;
+
+  connect(): void {
+    this.on('input', () => this.debounce(this.load, 200));
+  }
+
+  private load(): void {
+    const target = this.element as HTMLInputElement;
+    const url = new URL(this.urlValue, document.baseURI);
+    url.searchParams.append(target.name, target.value);
+    httpRequest(url.toString()).turbo();
+  }
+}

app/javascript/packs/application.js

@@ -8,7 +8,6 @@ import * as Turbo from '@hotwired/turbo';
 import '../shared/activestorage/ujs';
 import '../shared/remote-poller';
 import '../shared/safari-11-file-xhr-workaround';
-import '../shared/remote-input';
 import '../shared/franceconnect';
 import '../shared/toggle-target';
 import '../shared/ujs-error-handling';
@@ -19,6 +18,7 @@ import {
 } from '../controllers/react_controller';
 import { TurboEventController } from '../controllers/turbo_event_controller';
 import { GeoAreaController } from '../controllers/geo_area_controller';
+import { TurboInputController } from '../controllers/turbo_input_controller';
 
 import '../new_design/dropdown';
 import '../new_design/form-validation';
@@ -96,6 +96,7 @@ const Stimulus = Application.start();
 Stimulus.register('react', ReactController);
 Stimulus.register('turbo-event', TurboEventController);
 Stimulus.register('geo-area', GeoAreaController);
+Stimulus.register('turbo-input', TurboInputController);
 
 // Expose globals
 window.DS = window.DS || DS;

app/javascript/shared/remote-input.js

@@ -1,21 +0,0 @@
-import { delegate, fire, debounce } from '@utils';
-
-const remote = 'data-remote';
-const inputChangeSelector = `input[${remote}], textarea[${remote}]`;
-
-// This is a patch for ujs remote handler. Its purpose is to add
-// a debounced input listener.
-function handleRemote(event) {
-  const element = this;
-
-  if (isRemote(element)) {
-    fire(element, 'change', event);
-  }
-}
-
-function isRemote(element) {
-  const value = element.getAttribute(remote);
-  return value && value !== 'false';
-}
-
-delegate('input', inputChangeSelector, debounce(handleRemote, 200));

app/views/champs/dossier_link/show.js.erb

@@ -1,3 +0,0 @@
-<%= render_to_element("##{@champ.input_group_id} .help-block",
-  partial: 'shared/champs/dossier_link/help_block',
-  locals: { id: @linked_dossier_id }) %>

app/views/champs/dossier_link/show.turbo_stream.haml

@@ -0,0 +1 @@
+= turbo_stream.update dom_id(@champ, :help_block), partial: 'shared/champs/dossier_link/help_block', locals: { id: @linked_dossier_id }

app/views/champs/siret/show.js.erb

@@ -1,3 +0,0 @@
-<%= render_to_element("##{@champ.input_group_id} .siret-info",
-  partial: 'shared/champs/siret/etablissement',
-  locals: { siret: @siret, etablissement: @etablissement }) %>

app/views/champs/siret/show.turbo_stream.haml

@@ -0,0 +1 @@
+= turbo_stream.update dom_id(@champ, :siret_info), partial: 'shared/champs/siret/etablissement', locals: { siret: @siret, etablissement: @etablissement }

app/views/shared/dossiers/editable_champs/_dossier_link.html.haml

@@ -5,7 +5,7 @@
     placeholder: "Numéro de dossier",
     autocomplete: 'off',
     required: champ.mandatory?,
-    data: { remote: true, url: champs_dossier_link_path(champ.id) }
+    data: { controller: 'turbo-input', turbo_input_url_value: champs_dossier_link_path(champ.id) }
 
-  .help-block
+  .help-block{ id: dom_id(champ, :help_block) }
     = render partial: 'shared/champs/dossier_link/help_block', locals: { id: champ.value }

app/views/shared/dossiers/editable_champs/_siret.html.haml

@@ -2,11 +2,11 @@
   id: champ.input_id,
   aria: { describedby: champ.describedby_id },
   placeholder: champ.libelle,
-  data: { remote: true, debounce: true, url: champs_siret_path(champ.id), spinner: true },
+  data: { controller: 'turbo-input', turbo_input_url_value: champs_siret_path(champ.id) },
   required: champ.mandatory?,
   pattern: "[0-9]{14}",
   title: "Le numéro de SIRET doit comporter exactement 14 chiffres"
 .spinner.right.hidden
-.siret-info
+.siret-info{ id: dom_id(champ, :siret_info) }
   - if champ.etablissement.present?
     = render partial: 'shared/dossiers/editable_champs/etablissement_titre', locals: { etablissement: champ.etablissement }

spec/controllers/champs/dossier_link_controller_spec.rb

@@ -27,33 +27,33 @@ describe Champs::DossierLinkController, type: :controller do
 
       context 'when the dossier exist' do
         before do
-          get :show, params: params, format: :js, xhr: true
+          get :show, params: params, format: :turbo_stream
         end
 
         it 'renders the procedure name' do
           expect(response.body).to include('Dossier en brouillon')
           expect(response.body).to include(procedure.libelle)
           expect(response.body).to include(procedure.organisation)
-          expect(response.body).to include("##{champ.input_group_id} .help-block")
+          expect(response.body).to include(ActionView::RecordIdentifier.dom_id(champ, :help_block))
         end
       end
 
       context 'when the dossier does not exist' do
         let(:dossier_id) { '13' }
         before do
-          get :show, params: params, format: :js, xhr: true
+          get :show, params: params, format: :turbo_stream
         end
 
         it 'renders error message' do
           expect(response.body).to include('Ce dossier est inconnu')
-          expect(response.body).to include("##{champ.input_group_id} .help-block")
+          expect(response.body).to include(ActionView::RecordIdentifier.dom_id(champ, :help_block))
         end
       end
     end
 
     context 'when user is not connected' do
       before do
-        get :show, params: { champ_id: champ.id }, format: :js, xhr: true
+        get :show, params: { champ_id: champ.id }, format: :turbo_stream
       end
 
       it { expect(response.code).to eq('401') }

spec/controllers/champs/siret_controller_spec.rb

@@ -37,7 +37,7 @@ describe Champs::SiretController, type: :controller do
       end
 
       context 'when the SIRET is empty' do
-        subject! { get :show, params: params, format: :js, xhr: true }
+        subject! { get :show, params: params, format: :turbo_stream }
 
         it 'clears the etablissement and SIRET on the model' do
           champ.reload
@@ -46,15 +46,14 @@ describe Champs::SiretController, type: :controller do
         end
 
         it 'clears any information or error message' do
-          expect(response.body).to include("##{champ.input_group_id} .siret-info")
-          expect(response.body).to include('innerHTML = ""')
+          expect(response.body).to include(ActionView::RecordIdentifier.dom_id(champ, :siret_info))
         end
       end
 
       context 'when the SIRET is invalid' do
         let(:siret) { '1234' }
 
-        subject! { get :show, params: params, format: :js, xhr: true }
+        subject! { get :show, params: params, format: :turbo_stream }
 
         it 'clears the etablissement and SIRET on the model' do
           champ.reload
@@ -71,7 +70,7 @@ describe Champs::SiretController, type: :controller do
         let(:siret) { '82161143100015' }
         let(:api_etablissement_status) { 503 }
 
-        subject! { get :show, params: params, format: :js, xhr: true }
+        subject! { get :show, params: params, format: :turbo_stream }
 
         it 'clears the etablissement and SIRET on the model' do
           champ.reload
@@ -88,7 +87,7 @@ describe Champs::SiretController, type: :controller do
         let(:siret) { '00000000000000' }
         let(:api_etablissement_status) { 404 }
 
-        subject! { get :show, params: params, format: :js, xhr: true }
+        subject! { get :show, params: params, format: :turbo_stream }
 
         it 'clears the etablissement and SIRET on the model' do
           champ.reload
@@ -106,7 +105,7 @@ describe Champs::SiretController, type: :controller do
         let(:api_etablissement_status) { 200 }
         let(:api_etablissement_body) { File.read('spec/fixtures/files/api_entreprise/etablissements.json') }
 
-        subject! { get :show, params: params, format: :js, xhr: true }
+        subject! { get :show, params: params, format: :turbo_stream }
 
         it 'populates the etablissement and SIRET on the model' do
           champ.reload
@@ -119,7 +118,7 @@ describe Champs::SiretController, type: :controller do
     end
 
     context 'when user is not signed in' do
-      subject! { get :show, params: { champ_id: champ.id }, format: :js, xhr: true }
+      subject! { get :show, params: { champ_id: champ.id }, format: :turbo_stream }
 
       it { expect(response.code).to eq('401') }
     end