add language selector component

app/assets/javascripts/bp_search.js.erb

@@ -327,7 +327,7 @@ function performSearch() {
         includeNonProduction = jQuery("#search_include_non_production").is(":checked"),
         includeOnlyDefinitions = jQuery("#search_require_definition").is(":checked"),
         exactMatch = jQuery("#search_exact_match").is(":checked"),
-        categories = jQuery("#search_categories").val() || "";
+        categories = jQuery("#search_categories").val() || "",
         language = jQuery("#select_search_language").val() || "";
 
     // Set the list of search words to be blacklisted for the ontology ownership algorithm

app/components/input/language_selector_component.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+class Input::LanguageSelectorComponent < ViewComponent::Base
+
+  def initialize(languages:, id: '', name: '' )
+    super
+    @languages = languages
+    @id = id
+    @name = languages
+  end
+
+  def languages_options
+    values = [['All languages', 'all']]
+
+    @languages.each do |key, label|
+      option = "<div>#{render(LanguageFieldComponent.new(value: key.to_s.downcase, label: label))}</div>"
+      values += [[option, key.to_s.downcase]]
+    end
+    values
+  end
+
+  def call
+    render SelectInputComponent.new(id: @id, name: @name, values: languages_options, placeholder: 'Select a language')
+  end
+end

app/views/search/index.html.haml

@@ -1,7 +1,7 @@
 - @title = t("search.title")
 
 %div.container.mt-5
-  %h1.display-4 
+  %h1.display-4
     = t("search.class_search")
 
   = form_tag("/search", method: "post") do
@@ -20,7 +20,7 @@
         %div.col-sm-2.mb-4 Search language
         %div.col-sm-10.mb-4
           %div.w-25
-            = render SelectInputComponent.new(id: "search_language", name: "search_language", values: [{id: "fr", title: "French", icon: "fi fi-fr fis"}, {id: "en", title: "English", icon: "fi fi-us fis"}], withIcon: true, placeholder: "Choose language")
+            = render Input::LanguageSelectorComponent.new(id:'search_language' , name:'search_language', languages: {fr: 'French', en: 'English'})
         %div.col-sm-2= t("search.include_in_search") + ":"
         %div.col-sm-10
           %div.form-check
@@ -32,7 +32,7 @@
           %div.form-check
             = check_box(:search, :include_views, class: "form-check-input")
             = label(:search, :include_views, t('search.ontology_views'), class: "form-check-label")
-        
+
         %div.col-sm-2= t("search.narrow_search_to") + ":"
         %div.col-sm-10
           %div.form-check

test/components/previews/input/input_field_component_preview.rb

@@ -87,4 +87,8 @@ def text(label: "Label", placeholder: "", error_message: "", helper_text: "")
   def text_area(label: "Label", placeholder: "", error_message: "", helper_text: "", rows: 5)
     render Input::TextAreaComponent.new(label: label, name: "name",value: '', placeholder: placeholder, error_message: error_message, helper_text: helper_text, rows: rows)
   end
+
+  def language_input
+    render Input::LanguageSelectorComponent.new(languages: {fr: 'French', en: 'English'})
+  end
 end