[#10788] In instructeur view add a autocomplete select to navigate to a procedure

Author: mmagn

app/components/instructeurs/select_procedure_drop_down_list_component.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+class Instructeurs::SelectProcedureDropDownListComponent < Dsfr::InputComponent
+  def initialize(procedures:)
+    @procedures = procedures
+  end
+
+  def react_props
+    {
+      items:,
+      placeholder: t('.placeholder'),
+      name: "procedure_id",
+      id: 'select-procedure-drop-down-list',
+      'aria-describedby': 'select-procedure-drop-down-list-label',
+      form: 'select-procedure-drop-down-list-component',
+      data: { no_autosubmit: 'input blur', no_autosubmit_on_empty: 'true', autosubmit_target: 'input' }
+    }
+  end
+
+  def items
+    @procedures.map { ["n°#{_1.id} - #{_1.libelle}", _1.id] }
+  end
+end

app/components/instructeurs/select_procedure_drop_down_list_component/select_procedure_drop_down_list_component.en.yml

@@ -0,0 +1,4 @@
+---
+en:
+  label: Direct access
+  placeholder: Select a procedure

app/components/instructeurs/select_procedure_drop_down_list_component/select_procedure_drop_down_list_component.fr.yml

@@ -0,0 +1,4 @@
+---
+fr:
+  label: Accès direct
+  placeholder: Sélectionner une démarche

app/components/instructeurs/select_procedure_drop_down_list_component/select_procedure_drop_down_list_component.html.haml

@@ -0,0 +1,17 @@
+= form_with url: url_for([:select_procedure, :instructeur, :procedures]),
+  class: 'ml-auto',
+  id: 'select-procedure-drop-down-list-component',
+  data: { turbo: true, controller: 'autosubmit' } do
+
+  .flex.align-center
+    = label_tag :procedure_id, t('.label'), class: 'fr-label font-weight-bold fr-mr-2w', id: 'select-procedure-drop-down-list-label', for: 'select-procedure-drop-down-list'
+    %react-fragment
+      = render ReactComponent.new "ComboBox/SingleComboBox", **react_props
+
+    %input.hidden{
+      type: 'submit',
+      formmethod: 'get',
+      formaction: url_for([:select_procedure, :instructeur, :procedures]),
+      formnovalidate: 'true',
+      data: { autosubmit_target: 'submitter' }
+    }

app/controllers/instructeurs/procedures_controller.rb

@@ -74,6 +74,12 @@ def update_order_positions
       redirect_to instructeur_procedures_path, notice: "L'ordre des démarches a été mis à jour."
     end
 
+    def select_procedure
+      return redirect_to instructeur_procedure_path(procedure_id: params[:procedure_id]) if params[:procedure_id].present?
+
+      redirect_to instructeur_procedures_path
+    end
+
     def show
       @procedure = procedure
       # Technically, procedure_presentation already sets the attribute.

app/javascript/components/ComboBox.tsx

@@ -41,8 +41,12 @@ export function ComboBox({
   description,
   className,
   inputRef,
+  placeholder,
   ...props
-}: ComboBoxProps & { inputRef?: RefObject<HTMLInputElement> }) {
+}: ComboBoxProps & {
+  inputRef?: RefObject<HTMLInputElement>;
+  placeholder?: string;
+}) {
   return (
     <AriaComboBox
       {...props}
@@ -60,7 +64,11 @@ export function ComboBox({
         </Label>
       ) : null}
       <div className="fr-ds-combobox__input" style={{ position: 'relative' }}>
-        <Input className="fr-select fr-autocomplete" ref={inputRef} />
+        <Input
+          className="fr-select fr-autocomplete"
+          ref={inputRef}
+          placeholder={placeholder || undefined}
+        />
         <Button
           aria-haspopup="false"
           aria-label=""
@@ -97,6 +105,7 @@ export function SingleComboBox({
   const {
     items: defaultItems,
     selectedKey: defaultSelectedKey,
+    placeholder,
     emptyFilterKey,
     name,
     formValue,
@@ -116,7 +125,12 @@ export function SingleComboBox({
 
   return (
     <>
-      <ComboBox menuTrigger="focus" {...comboBoxProps} {...props}>
+      <ComboBox
+        menuTrigger="focus"
+        placeholder={placeholder}
+        {...comboBoxProps}
+        {...props}
+      >
         {(item) => <ComboBoxItem id={item.value}>{item.label}</ComboBoxItem>}
       </ComboBox>
       {children || name ? (

app/javascript/components/react-aria/props.ts

@@ -46,7 +46,8 @@ export const SingleComboBoxProps = s.assign(
   s.partial(
     s.object({
       selectedKey: s.nullable(s.string()),
-      emptyFilterKey: s.nullable(s.string())
+      emptyFilterKey: s.nullable(s.string()),
+      placeholder: s.string()
     })
   )
 );

app/views/instructeurs/procedures/index.html.haml

@@ -5,6 +5,7 @@
     .flex.fr-mb-2v
       %h1.fr-h3.fr-mb-0 Démarches
       = render Instructeurs::TabsExplanationsComponent.new
+      = render Instructeurs::SelectProcedureDropDownListComponent.new(procedures: @procedures)
     = render partial: 'instructeurs/procedures/synthese', locals: { procedures: @procedures, all_dossiers_counts: @all_dossiers_counts }
 
     %nav.fr-tabs{ role: 'navigation', 'aria-label': t('views.users.dossiers.secondary_menu') }

config/routes.rb

@@ -464,6 +464,7 @@
       collection do
         get 'order_positions'
         patch 'update_order_positions'
+        get 'select_procedure'
       end
     end
 

spec/components/instructeurs/select_procedure_drop_down_list_component_spec.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+require "rails_helper"
+
+RSpec.describe Instructeurs::SelectProcedureDropDownListComponent, type: :component do
+  subject do
+    render_inline(described_class.new(procedures:))
+  end
+
+  let(:procedures) {
+    [
+      create(:procedure, libelle: "Procedure importante", id: 1001),
+      create(:procedure, libelle: "Procedure facile", id: 1002),
+      create(:procedure, libelle: "Procedure terminée", id: 1003)
+    ]
+  }
+
+  it "renders the label" do
+    expect(subject).to have_text("Accès direct")
+  end
+
+  let(:react_component) { page.find('react-component') }
+  let(:react_props_items) { JSON.parse(react_component['props']) }
+
+  it "renders the procedures" do
+    subject
+    expect(react_props_items["items"]).to eq([
+      ["n°1001 - Procedure importante", 1001],
+      ["n°1002 - Procedure facile", 1002],
+      ["n°1003 - Procedure terminée", 1003]
+    ])
+  end
+end