Merge pull request #16449 from opf/implementation/56440-add-🔍-to-proj…

…ects-autocompleter

[#56440] Add 🔍 to projects autocompleter

app/components/_index.sass

@@ -7,5 +7,4 @@
 @import "open_project/common/submenu_component"
 @import "filter/filters_component"
 @import "projects/row_component"
-@import "settings/project_custom_fields/project_custom_field_mapping/new_project_mapping_component"
 @import "op_primer/border_box_table_component"

app/forms/projects/custom_fields/custom_field_mapping_form.rb

@@ -38,6 +38,7 @@ class CustomFieldMappingForm < ApplicationForm
           visually_hide_label: true,
           validation_message: project_ids_error_message,
           autocomplete_options: {
+            with_search_icon: true,
             openDirectly: false,
             focusDirectly: false,
             multiple: true,

frontend/src/global_styles/content/_index.sass

@@ -54,6 +54,7 @@
 @import autocomplete
 @import autocomplete_primerized
 @import diff
+@import projects_autocomplete_with_search_icon
 @import projects_list
 @import project_list_modal
 @import datepicker

frontend/src/global_styles/content/_projects_autocomplete_with_search_icon.sass

@@ -0,0 +1,12 @@
+@import 'helpers'
+
+.projects-autocomplete-with-search-icon
+  ng-select[ng-reflect-multiple='false']
+    input
+      margin-left: 18px
+  ng-select
+    .ng-select-container
+      @extend .icon-search
+      &:before
+        @include icon-font-common
+        padding-left: 10px

lib/primer/open_project/forms/autocompleter.html.erb

@@ -11,14 +11,16 @@
                  append_to: @autocomplete_options.fetch(:append_to, 'body')
                } %>
   <% else %>
-    <%= angular_component_tag @autocomplete_options.fetch(:component),
-                              data: @autocomplete_options.delete(:data) { {} },
-                              inputs: @autocomplete_options.merge(
-                                classes: "ng-select--primerized #{@input.invalid? ? '-error' : ''}",
-                                inputName: @autocomplete_options.fetch(:inputName) { builder.field_name(@input.name) },
-                                inputValue: @autocomplete_options.fetch(:inputValue) { builder.object.send(@input.name) },
-                                defaultData: @autocomplete_options.fetch(:defaultData) { true }
-                              )
-    %>
+    <%= content_tag(:div, class: ("projects-autocomplete-with-search-icon" if @autocomplete_options.delete(:with_search_icon))) do %>
+      <%= angular_component_tag @autocomplete_options.fetch(:component),
+                                data: @autocomplete_options.delete(:data) { {} },
+                                inputs: @autocomplete_options.merge(
+                                  classes: "ng-select--primerized #{@input.invalid? ? '-error' : ''}",
+                                  inputName: @autocomplete_options.fetch(:inputName) { builder.field_name(@input.name) },
+                                  inputValue: @autocomplete_options.fetch(:inputValue) { builder.object.send(@input.name) },
+                                  defaultData: @autocomplete_options.fetch(:defaultData) { true }
+                                )
+      %>
+    <% end %>
   <% end %>
 <% end %>

lookbook/docs/patterns/03-autocompleters.md.erb

@@ -80,6 +80,12 @@ Keep in mind that this component uses the live projects API, so results will dep
 
 <%= embed OpenProject::Common::AutocompletePreview, :project, panels: %i[source] %>
 
+#### Project autocompletion with search icon
+
+There is also an flag for a search icon within the select:
+
+<%= embed OpenProject::Common::AutocompletePreview, :project_with_search_icon, panels: %i[source] %>
+
 ### Outside primer
 
 If you're not in a primer form, you can render the autocomplete directly like so:

lookbook/previews/open_project/common/autocomplete_preview.rb

@@ -44,6 +44,10 @@ def work_package
       def project
         render_with_template
       end
+
+      def project_with_search_icon
+        render_with_template
+      end
     end
   end
 end

lookbook/previews/open_project/common/autocomplete_preview/project_with_search_icon.html.erb

@@ -0,0 +1,28 @@
+<%
+  the_form = Class.new(ApplicationForm) do
+    form do |f|
+      f.project_autocompleter(
+        name: :id,
+        label: Project.model_name.human,
+        visually_hide_label: true,
+        autocomplete_options: {
+          with_search_icon: true,
+          openDirectly: false,
+          focusDirectly: false,
+          dropdownPosition: 'bottom',
+          disabledProjects: Project.visible.take(10).pluck(:id).to_h { |id| [id, "Disabled reason!"] },
+        }
+      )
+    end
+  end
+
+  model = Project.new
+%>
+
+<%= primer_form_with(
+      model:,
+      url: '/abc',
+      id: 'asdf') do |f|
+  render(the_form.new(f))
+end
+%>

modules/storages/app/forms/storages/admin/storages/add_projects_autocompleter_form.rb

@@ -38,6 +38,7 @@ class AddProjectsAutocompleterForm < ApplicationForm
               visually_hide_label: true,
               validation_message: project_ids_error_message,
               autocomplete_options: {
+                with_search_icon: true,
                 openDirectly: false,
                 focusDirectly: false,
                 multiple: true,