feat(aside_style): optimize and clean up css code

CHANGELOG.md

@@ -9,6 +9,7 @@ All notable changes to this project will be documented in this file.
 
 ### Fixed
 
+- **Autocomplete performance**: Extended minimum query length guard to `select2`, `selectize`, and `react_select` actions in `AutocompletesController`. All autocomplete endpoints now reject queries shorter than 3 characters without hitting the database, preventing cascade PostgreSQL connection pool exhaustion. Completes the fix from 7.4.0 which only covered the `show` action.
 - add change event handler for select inline edits
 - prevent long filenames from overflowing dropdown
 - S3 ping retry loop no longer runs infinitely after 10 failures — stops retrying, shows a non-blocking flash instead of a blocking `window.alert()`, and resets the loading state

app/assets/stylesheets/folio/tiptap/_styles.scss

@@ -416,9 +416,13 @@ $f-tiptap__media-min-width--desktop: 708px !default;
   }
 
   .f-tiptap-float__aside {
-    margin-bottom: var(--f-tiptap-float__aside-margin-y);
     position: relative;
     z-index: 2;
+    margin-bottom: var(--f-tiptap-float__aside-margin-y);
+    margin-right: var(--f-tiptap-float__aside-margin-x);
+    margin-left: var(--f-tiptap-float__aside-offset);
+    width: var(--f-tiptap-float__aside-width);
+    float: var(--f-tiptap-float__aside-side);
   }
 
   .f-tiptap-editor & .f-tiptap-column::before,
@@ -555,7 +559,28 @@ $f-tiptap__media-min-width--desktop: 708px !default;
     }
   }
 
+  .f-tiptap-float[data-f-tiptap-float-side="right"] .f-tiptap-float__aside {
+    margin-right: var(--f-tiptap-float__aside-offset);
+    margin-left: var(--f-tiptap-float__aside-margin-x);
+  }
+
+  .f-tiptap-float[data-f-tiptap-float-size="small"] .f-tiptap-float__aside {
+    width: var(--f-tiptap-float__aside-width);
+  }
+
+  .f-tiptap-float[data-f-tiptap-float-size="large"] .f-tiptap-float__aside {
+    width: var(--f-tiptap-float__aside-width);
+  }
+
+  .f-tiptap-float[data-f-tiptap-float-side="right"] .f-tiptap-float__aside {
+    float: var(--f-tiptap-float__aside-side);
+  }
 
+  /* Mobile first - Aside width and spacing */
+  .f-tiptap-float {
+    --f-tiptap-float__aside-side: left;
+    --f-tiptap-float__aside-width: 100%;
+  }
 
   @container (min-width: #{$f-tiptap__media-min-width--tablet}) {
     .f-tiptap-float {
@@ -564,6 +589,7 @@ $f-tiptap__media-min-width--desktop: 708px !default;
       --f-tiptap-float__aside-side: left;
       --f-tiptap-float__aside-margin-x: var(--f-tiptap-float__aside-margin-x--tablet);
       --f-tiptap-float__aside-offset: var(--f-tiptap-float__aside-offset--tablet);
+      --f-tiptap-float__aside-margin-y: var(--f-tiptap__spacer);
 
       &::after {
         content: "";
@@ -586,30 +612,12 @@ $f-tiptap__media-min-width--desktop: 708px !default;
 
     .f-tiptap-float__aside {
       float: left;
-      margin-right: var(--f-tiptap-float__aside-margin-x);
-      margin-bottom: var(--f-tiptap__spacer);
-      margin-left: var(--f-tiptap-float__aside-offset);
-      width: var(--f-tiptap-float__aside-width);
       position: relative;
       container-type: inline-size;
       box-sizing: border-box;
       min-height: 2rem;
     }
 
-    .f-tiptap-float[data-f-tiptap-float-side="right"] .f-tiptap-float__aside {
-      float: right;
-      margin-right: var(--f-tiptap-float__aside-offset);
-      margin-left: var(--f-tiptap-float__aside-margin-x);
-    }
-
-    .f-tiptap-float[data-f-tiptap-float-size="small"] .f-tiptap-float__aside {
-      width: var(--f-tiptap-float__aside-width);
-    }
-
-    .f-tiptap-float[data-f-tiptap-float-size="large"] .f-tiptap-float__aside {
-      width: var(--f-tiptap-float__aside-width);
-    }
-
     .f-tiptap-columns {
       display: grid;
       grid-auto-columns: 1fr;

app/controllers/folio/console/api/autocompletes_controller.rb

@@ -155,7 +155,14 @@ def selectize
 
       scope = filter_by_atom_setting_params(scope)
 
-      scope = scope.by_label_query(q) if q.present?
+      if q.present?
+        if q.length >= AUTOCOMPLETE_QUERY_MIN_LENGTH
+          scope = scope.by_label_query(q)
+        else
+          render_selectize_options([])
+          return
+        end
+      end
 
       scope, has_type_ordering = apply_ordered_for_folio_console_selects(scope, klass)
 
@@ -197,7 +204,14 @@ def select2
 
       scope = filter_by_atom_setting_params(scope)
 
-      scope = scope.by_label_query(q) if q.present?
+      if q.present?
+        if q.length >= AUTOCOMPLETE_QUERY_MIN_LENGTH
+          scope = scope.by_label_query(q)
+        else
+          render_select2_options([])
+          return
+        end
+      end
 
       scope, has_type_ordering = apply_ordered_for_folio_console_selects(scope, klass)
 
@@ -237,6 +251,11 @@ def react_select
     p_without = params[:without]
     p_page = params[:page]&.to_i || 1
 
+    if q.present? && q.length < AUTOCOMPLETE_QUERY_MIN_LENGTH
+      render json: { data: [], meta: { page: 1, pages: 1, from: nil, to: nil, count: 0, next: nil } }
+      return
+    end
+
     if class_names
       # Show model names when there are multiple classes, or when a single class forces it
       show_model_names = class_names.size > 1

app/jobs/folio/files/after_save_job.rb

@@ -10,18 +10,42 @@ class Folio::Files::AfterSaveJob < Folio::ApplicationJob
 
   # use SQL commands only!
   # save/update would cause an infinite loop as this is hooked in after_save
-  def perform(file)
+  def perform(file, changed_attrs = {})
     return if Rails.env.test? && !Rails.application.config.try(:folio_testing_after_save_job)
 
     placements = file.file_placements
 
     file.update_column(:file_placements_count, placements.size)
 
+    # Sync description/alt/headline to placements if file metadata changed
+    if changed_attrs.present?
+      sync_metadata_to_placements(file, placements, changed_attrs)
+    end
+
     # touch placements to bust cache
     placements.find_each do |placement|
       if placement.placement
         placement.placement.touch
       end
     end
   end
+
+  private
+
+    def sync_metadata_to_placements(file, placements, changed_attrs)
+      if changed_attrs.key?("description")
+        old_desc, new_desc = changed_attrs["description"]
+        placements.where(description: [old_desc, nil, ""]).update_all(description: new_desc)
+      end
+
+      if changed_attrs.key?("alt")
+        old_alt, new_alt = changed_attrs["alt"]
+        placements.where(alt: [old_alt, nil, ""]).update_all(alt: new_alt)
+      end
+
+      if changed_attrs.key?("headline")
+        old_headline, new_headline = changed_attrs["headline"]
+        placements.where(title: [old_headline, nil, ""]).update_all(title: new_headline)
+      end
+    end
 end

app/models/folio/file.rb

@@ -42,6 +42,7 @@ class Folio::File < Folio::ApplicationRecord
       update_thumbnails_crop
     ],
     read: %i[
+      additional_html
       batch_bar
       batch_download
       batch_download_failure
@@ -237,7 +238,10 @@ def run_after_save_job
     # updating placements
     return if ENV["SKIP_FOLIO_FILE_AFTER_SAVE_JOB"]
     return if Rails.env.test? && !Rails.application.config.try(:folio_testing_after_save_job)
-    Folio::Files::AfterSaveJob.perform_later(self)
+
+    changed_attrs = saved_changes.slice("description", "alt", "headline")
+
+    Folio::Files::AfterSaveJob.perform_later(self, changed_attrs)
   end
 
   def process_attached_file

test/controllers/folio/console/api/autocompletes_controller_test.rb

@@ -275,4 +275,83 @@ class Folio::Console::Api::AutocompletesControllerTest < Folio::Console::BaseCon
     # Clean up
     Folio::Page.singleton_class.remove_method(:ordered_for_folio_console_selects)
   end
+
+  test "selectize ignores short queries below minimum length" do
+    create(:folio_page, title: "Foo bar baz")
+
+    # 1-char query should return empty (below min length of 3)
+    get selectize_console_api_autocomplete_path(klass: "Folio::Page", q: "f")
+    json = JSON.parse(response.body)
+    assert_equal([], json["data"])
+
+    # 2-char query should return empty (below min length of 3)
+    get selectize_console_api_autocomplete_path(klass: "Folio::Page", q: "fo")
+    json = JSON.parse(response.body)
+    assert_equal([], json["data"])
+
+    # 3-char query should trigger search and return results
+    get selectize_console_api_autocomplete_path(klass: "Folio::Page", q: "foo")
+    json = JSON.parse(response.body)
+    assert_equal(1, json["data"].size)
+    assert_equal("Foo bar baz", json["data"][0]["text"])
+  end
+
+  test "select2 ignores short queries below minimum length" do
+    create(:folio_page, title: "Foo bar baz")
+
+    # 1-char query should return empty (below min length of 3)
+    get select2_console_api_autocomplete_path(klass: "Folio::Page", q: "f")
+    json = JSON.parse(response.body)
+    assert_equal([], json["results"])
+
+    # 2-char query should return empty (below min length of 3)
+    get select2_console_api_autocomplete_path(klass: "Folio::Page", q: "fo")
+    json = JSON.parse(response.body)
+    assert_equal([], json["results"])
+
+    # 3-char query should trigger search and return results
+    get select2_console_api_autocomplete_path(klass: "Folio::Page", q: "foo")
+    json = JSON.parse(response.body)
+    assert_equal(1, json["results"].size)
+    assert_equal("Foo bar baz", json["results"][0]["text"])
+  end
+
+  test "react_select ignores short queries below minimum length" do
+    create(:folio_page, title: "Foo bar baz")
+
+    # 1-char query should return empty (below min length of 3)
+    get react_select_console_api_autocomplete_path(class_names: "Folio::Page", q: "f")
+    json = JSON.parse(response.body)
+    assert_equal([], json["data"])
+    assert_equal(1, json["meta"]["page"])
+    assert_equal(1, json["meta"]["pages"])
+
+    # 2-char query should return empty (below min length of 3)
+    get react_select_console_api_autocomplete_path(class_names: "Folio::Page", q: "fo")
+    json = JSON.parse(response.body)
+    assert_equal([], json["data"])
+    assert_equal(1, json["meta"]["page"])
+    assert_equal(1, json["meta"]["pages"])
+
+    # 3-char query should trigger search and return results
+    get react_select_console_api_autocomplete_path(class_names: "Folio::Page", q: "foo")
+    json = JSON.parse(response.body)
+    assert_equal(1, json["data"].size)
+    assert_equal("Foo bar baz", json["data"][0]["text"])
+  end
+
+  test "react_select with multiple classes ignores short queries" do
+    create(:folio_page, title: "Foo page")
+
+    # 2-char query should return empty for multiple classes
+    get react_select_console_api_autocomplete_path(class_names: "Folio::Page", q: "fo")
+    json = JSON.parse(response.body)
+    assert_equal([], json["data"])
+    assert_equal(1, json["meta"]["page"])
+
+    # 3-char query should return results
+    get react_select_console_api_autocomplete_path(class_names: "Folio::Page", q: "foo")
+    json = JSON.parse(response.body)
+    assert json["data"].size > 0
+  end
 end