Submit search on enter

app/components/list_filter_component.html.erb

@@ -5,17 +5,28 @@
 >
   <%= viral_dialog(id: 'list-filter-dialog') do |dialog| %>
     <%= dialog.with_trigger do %>
-      <%= viral_button(data: { action: "list-filter#idempotentConnect viral--dialog#open" }, aria: { label: t(:'components.list_filter.title') }, title: t(:'components.list_filter.title'), classes: "relative") do %>
-        <%= viral_icon(name: "document_magnifying_glass", classes: "w-5 h-5 inline-block") %>
-        <div
+      <button
+        type="button"
+        class="
+          relative text-slate-900 bg-white border border-slate-300 focus:outline-none
+          hover:bg-slate-100 focus:ring-4 focus:ring-slate-200 font-medium rounded-lg
+          text-sm px-5 py-2.5 dark:bg-slate-800 dark:text-white dark:border-slate-600
+          dark:hover:bg-slate-700 dark:hover:border-slate-600 dark:focus:ring-slate-700
+        "
+        data-action="list-filter#idempotentConnect viral--dialog#open"
+        aria-label="<%= t(:'components.list_filter.title') %>"
+        title="<%= t(:'components.list_filter.title') %>"
+      >
+        <span
           data-list-filter-target="count"
           class="
             absolute items-center justify-center hidden h-6 px-2 text-xs font-bold
             text-white bg-red-800 border-2 border-white rounded-full -top-2 -end-2
             dark:border-slate-900
           "
-        >8</div>
-      <% end %>
+        >8</span>
+        <%= viral_icon(name: "document_magnifying_glass", classes: "size-5") %>
+      </button>
     <% end %>
     <%= dialog.with_header(title: t(:"components.list_filter.title")) %>
     <%= dialog.with_section do %>
@@ -76,7 +87,7 @@
           <button
             type="button"
             class="
-              absolute inline-flex items-center justify-center w-6 h-6 text-xs font-bold
+              absolute inline-flex items-center justify-center w-5 h-5 text-xs font-bold
               rounded-full text-slate-600 bg-slate-100 border-3 border-slate-10 bottom-2 end-2
               dark:text-slate-300 dark:border-slate-900 dark:bg-slate-600
               dark:hover:bg-slate-500 hover:bg-slate-300

app/components/ransack/hidden_sort_field_component.rb

@@ -8,5 +8,9 @@ class HiddenSortFieldComponent < Component
     def initialize(ransack_obj)
       @ransack_obj = ransack_obj
     end
+
+    def render?
+      ransack_obj.present? && !ransack_obj.sorts.empty?
+    end
   end
 end

app/components/search_component.html.erb

@@ -1,20 +1,23 @@
-<%= search_form_for @q, url: @url, html: {"data-controller": "filters"} do |f| %>
-  <input type="hidden" name="format" value="turbo_stream"/>
-  <input type="hidden" name="tab" value="<%=@tab%>"/>
+<%= search_form_for @query, url: @url, data: { controller: "selection" }, **@kwargs do |f| %>
+  <%= render Ransack::HiddenSortFieldComponent.new(@query) %>
   <%= f.label @search_attribute, @placeholder, class: "sr-only" %>
-  <div class="relative lg:w-72">
+  <div class="relative">
+    <%= f.text_field @search_attribute,
+                 **{ value: @value }.compact,
+                 "data-action": "selection#clear",
+                 class:
+                   "t-search-component block w-full p-2.5 pl-10 text-sm text-slate-900 border border-slate-300 rounded-lg bg-slate-50 focus:ring-primary-500 focus:border-primary-500 dark:bg-slate-700 dark:border-slate-600 dark:placeholder-slate-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500",
+                 placeholder: @placeholder %>
     <div
       class="
         absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none
       "
     >
-      <%= viral_icon(name: "magnifying_glass", classes: "h-5 w-5") %>
+      <%= viral_icon(
+        name: "magnifying_glass",
+        classes: "w-4 h-4 text-slate-500 dark:text-slate-400",
+      ) %>
     </div>
-    <%= helpers.turbo_frame_tag "ransack_hidden_values" %>
-    <%= f.search_field @search_attribute,
-                   "data-action": "filters#submit",
-                   class:
-                     "block w-full p-2.5 pl-10 text-sm text-slate-900 border border-slate-300 rounded-lg bg-slate-50 focus:ring-primary-500 focus:border-primary-500 dark:bg-slate-700 dark:border-slate-600 dark:placeholder-slate-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500",
-                   placeholder: @placeholder %>
   </div>
+  <%= content %>
 <% end %>

app/components/search_component.rb

@@ -6,13 +6,14 @@
 class SearchComponent < Component
   include Ransack::Helpers::FormHelper
 
-  # rubocop:disable Naming/MethodParameterName
-  def initialize(q:, url:, search_attribute:, placeholder:, tab: '')
-    @q = q
+  # rubocop:disable Metrics/ParameterLists
+  def initialize(query:, url:, search_attribute:, placeholder:, value: nil, **kwargs)
+    @query = query
     @url = url
+    @value = value
     @search_attribute = search_attribute
     @placeholder = placeholder
-    @tab = tab
+    @kwargs = kwargs
   end
-  # rubocop:enable Naming/MethodParameterName
+  # rubocop:enable Metrics/ParameterLists
 end

app/components/viral/tabs_component.html.erb

@@ -1,7 +1,7 @@
 <div
   id="<%= id %>"
   class="
-    flex text-sm font-medium text-center text-slate-500 border-b border-slate-200
+    flex text-sm font-medium text-center border-b text-slate-500 border-slate-200
     dark:text-slate-400 dark:border-slate-700
   "
 >
@@ -17,11 +17,6 @@
       </li>
     <% end %>
   </ul>
-  <% if search_bar? %>
-    <div class="flex flex-row ml-auto">
-      <%= search_bar %>
-    </div>
-  <% end %>
 </div>
 <div role="region" aria-live="polite">
   <%= tab_content %>

app/components/viral/tabs_component.rb

@@ -6,7 +6,6 @@ class TabsComponent < Viral::Component
     attr_reader :id, :label
 
     renders_many :tabs, Viral::Tabs::TabComponent
-    renders_one :search_bar, SearchComponent
     renders_one :tab_content
 
     def initialize(id:, label:)

app/javascript/controllers/filters_controller.js

@@ -5,14 +5,6 @@ import _ from "lodash";
 export default class extends Controller {
   static outlets = ["selection"];
 
-  initialize() {
-    this.submit = this.submit.bind(this);
-  }
-
-  connect() {
-    this.submit = _.debounce(this.submit, 500);
-  }
-
   submit() {
     this.element.requestSubmit();
     if (this.hasSelectionOutlet) {

app/javascript/controllers/selection_controller.js

@@ -118,8 +118,10 @@ export default class extends Controller {
 
   #setSelectPageCheckboxValue() {
     if (this.hasSelectPageTarget) {
-      const uncheckedBoxes = this.rowSelectionTargets.filter(row => !row.checked)
-      this.selectPageTarget.checked = uncheckedBoxes.length === 0
+      const uncheckedBoxes = this.rowSelectionTargets.filter(
+        (row) => !row.checked,
+      );
+      this.selectPageTarget.checked = uncheckedBoxes.length === 0;
     }
   }
 

app/views/dashboard/groups/index.html.erb

@@ -14,23 +14,15 @@
     "
   >
     <div class="flex flex-row items-center ml-auto space-x-2 font-normal">
-      <%= search_form_for @q, url: dashboard_groups_url, html: { "data-controller": "filters", "data-turbo-permanent": "true" } do |f| %>
-        <%= f.label :name_or_puid_cont, "SEARCH", class: "sr-only" %>
-        <div class="relative lg:w-72">
-          <div
-            class="
-              absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none
-            "
-          >
-            <%= viral_icon(name: "magnifying_glass", classes: "h-5 w-5") %>
-          </div>
-          <%= f.search_field :name_or_puid_cont,
-                         "data-action": "filters#submit",
-                         class:
-                           "block w-full p-2.5 pl-10 text-sm text-slate-900 border border-slate-300 rounded-lg bg-slate-50 focus:ring-primary-500 focus:border-primary-500 dark:bg-slate-700 dark:border-slate-600 dark:placeholder-slate-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500",
-                         placeholder: t(:".search.placeholder") %>
-        </div>
-      <% end %>
+      <%= render SearchComponent.new(
+        query: @q,
+        url: dashboard_groups_url,
+        search_attribute: :name_or_puid_cont,
+        placeholder: t(:".search.placeholder"),
+        html: {
+          "data-turbo-permanent": "true",
+        },
+      ) %>
       <%= search_form_for @q, url: dashboard_groups_url, method: :post, html: { method: :post, "data-controller": "filters", "data-turbo": false } do %>
         <div class="flex flex-row items-center ml-auto space-x-2 font-normal py-1.5">
           <%= render Ransack::SortDropdownComponent.new(

app/views/dashboard/projects/index.html.erb

@@ -10,7 +10,7 @@
   <div
     class="flex text-sm font-medium text-center border-b  text-slate-500 border-slate-200 dark:text-slate-400 dark:border-slate-700"
   >
-    <ul class="flex flex-wrap -mb-px">
+    <ul class="flex flex-1">
       <li class="mr-2">
         <%= link_to t(".all"),
         dashboard_projects_url(),
@@ -42,29 +42,8 @@
         } %>
       </li>
     </ul>
-    <div class="flex flex-row items-center ml-auto space-x-2 font-normal">
-      <%= search_form_for @q, url: dashboard_projects_url(**request.query_parameters), html: { "data-controller": "filters" } do |f| %>
-        <input type="hidden" name="format" value="turbo_stream"/>
-        <input type="hidden" name="personal" value="<%= params['personal'] %>">
-        <%= f.label :namespace_name_or_namespace_puid_cont,
-                t(".search.placeholder"),
-                class: "sr-only" %>
-        <div class="relative lg:w-72">
-          <div
-            class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none "
-          >
-            <%= viral_icon(name: "magnifying_glass", classes: "h-5 w-5") %>
-          </div>
-          <%= turbo_frame_tag "project_hidden_values" %>
-          <%= f.search_field :namespace_name_or_namespace_puid_cont,
-                         "data-action": "filters#submit",
-                         class:
-                           "block w-full p-2.5 pl-10 text-sm text-slate-900 border border-slate-300 rounded-lg bg-slate-50 focus:ring-primary-500 focus:border-primary-500 dark:bg-slate-700 dark:border-slate-600 dark:placeholder-slate-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500",
-                         placeholder: t(".search.placeholder") %>
-        </div>
-      <% end %>
-      <%= turbo_frame_tag "project_sort_dropdown" %>
-    </div>
+    <%= turbo_frame_tag "project_sort_dropdown" %>
+
   </div>
   <div class="flex flex-col" data-turbo-temporary>
     <% if @has_projects %>

app/views/dashboard/projects/index.turbo_stream.erb

@@ -1,13 +1,7 @@
 <%= turbo_stream.update("projects_list") do %>
   <table class="min-w-full table-fixed dark:divide-slate-600">
     <tbody
-      class="
-        bg-white
-        divide-y
-        divide-slate-200
-        dark:bg-slate-800
-        dark:divide-slate-700
-      "
+      class="bg-white divide-y divide-slate-200 dark:bg-slate-800 dark:divide-slate-700"
     >
       <%= render partial: "shared/project/row", collection: @projects, as: :project %>
     </tbody>
@@ -22,7 +16,7 @@
         if @pagy.prev
           pagy_url_for(@pagy, @pagy.prev).gsub(
             "projects.turbo_stream",
-            "projects"
+            "projects",
           )
         else
           nil
@@ -33,28 +27,34 @@
         if @pagy.next
           pagy_url_for(@pagy, @pagy.next).gsub(
             "projects.turbo_stream",
-            "projects"
+            "projects",
           )
         else
           nil
         end
-      )
+      ),
   ) %>
 <% end %>
 
 <%= turbo_stream.update "project_sort_dropdown" do %>
-  <%= render Ransack::SortDropdownComponent.new(
-    @q,
-    "projects",
-    [
-      { name: "updated_at", dir: "desc" },
-      { name: "updated_at", dir: "asc" },
-      { name: "namespace_name", dir: "asc" },
-      { name: "namespace_name", dir: "desc" },
-      { name: "created_at", dir: "desc" },
-      { name: "created_at", dir: "asc" }
-    ]
-  ) %>
+  <div class="inline-flex space-x-2">
+    <%= render SearchComponent.new(query: @q, url: dashboard_projects_url(**request.query_parameters), search_attribute: :namespace_name_or_namespace_puid_cont, placeholder: t(".search.placeholder")) do %>
+      <input type="hidden" name="personal" value="<%= params['personal'] %>">
+      <input type="hidden" name="format" value="turbo_stream"/>
+    <% end %>
+    <%= render Ransack::SortDropdownComponent.new(
+      @q,
+      "projects",
+      [
+        { name: "updated_at", dir: "desc" },
+        { name: "updated_at", dir: "asc" },
+        { name: "namespace_name", dir: "asc" },
+        { name: "namespace_name", dir: "desc" },
+        { name: "created_at", dir: "desc" },
+        { name: "created_at", dir: "asc" },
+      ],
+    ) %>
+  </div>
 <% end %>
 
 <%= turbo_stream.update "project_hidden_values" do %>

app/views/data_exports/index.html.erb

@@ -5,24 +5,13 @@
 <%= render Viral::PageHeaderComponent.new(title: t(".title")) %>
 
 <div class="flow-root">
-  <div class="flex flex-row-reverse items-center mb-4 space-x-2">
-    <%= search_form_for @q, url: data_exports_url, html: { "data-controller": "filters", "data-turbo-permanent": "true" } do |f| %>
-      <%= f.label :id_or_name_cont, "SEARCH", class: "sr-only" %>
-      <div class="relative lg:w-72">
-        <div
-          class="
-            absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none
-          "
-        >
-          <%= viral_icon(name: "magnifying_glass", classes: "h-5 w-5") %>
-        </div>
-        <%= f.search_field :id_or_name_cont,
-                       "data-action": "filters#submit",
-                       class:
-                         "block w-full p-2.5 pl-10 text-sm text-slate-900 border border-slate-300 rounded-lg bg-slate-50 focus:ring-primary-500 focus:border-primary-500 dark:bg-slate-700 dark:border-slate-600 dark:placeholder-slate-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500",
-                       placeholder: t(:".search.placeholder") %>
-      </div>
-    <% end %>
+  <div class="flex flex-row-reverse items-center mb-2">
+    <%= render SearchComponent.new(
+      query: @q,
+      url: data_exports_url,
+      search_attribute: :id_or_name_cont,
+      placeholder: t(:".search.placeholder"),
+    ) %>
   </div>
 </div>