Support ActiveAdmin 4 with a plain ES module by senid231 · Pull Request #8 · activeadmin-plugins/active_admin_filters_visibility

senid231 · 2026-11-12T08:33:01Z

Rewrites the plugin for ActiveAdmin 4 and drops ActiveAdmin 3. The jQuery plugin becomes a plain ES module with plain CSS (dark mode on .dark). Hiding filters per page, reset, and opt-in drag-and-drop ordering all stay. Gemspec: activeadmin >= 4.0.0.beta1, < 5.0.0.a.

Branched from #7, whose two commits show here until it merges. Release #7 as 1.3.0 first, then this as 2.0.0 (major).

Decisions:

The engine pins the module into ActiveAdmin.importmap and joins javascript_modules when that setting exists (Add javascript_modules setting to import modules on every page activeadmin/activeadmin#9148). Otherwise hosts use ActiveAdminTheme.javascripts or an _html_head override. The CSS is imported into the host's Tailwind entry. The README covers both.
The toggle goes into the visible header: h3.filters-form-title on stock, or the .panel-title when the section is wrapped in a panel (active_admin_theme 4). The theme's collapse button lives in the page heading, so they do not clash.
State is keyed by wrapper id, not label text. 1.x state is not carried over; the README lists the breaking changes.
data-filters-visibility-* hooks on all added markup.
CI runs stock and theme (git dependency in a test gemfile).

Verified: 9 specs pass on Rails 8.0 and 8.1, ActiveAdmin 4.0.0.beta23, stock and with the theme.

Ransack 6 raises when a model does not define ransackable_associations, so every spec failed once bundler resolved ransack 6.1.0. Co-Authored-By: Clanker

RubyGems sorts 4.0.0.beta23 below 4.0, so "< 4.0" let bundler pick an ActiveAdmin 4 beta, which this jQuery plugin does not support. Co-Authored-By: Clanker

ActiveAdmin 4 ships no jQuery or Sprockets, and its filters sidebar has new markup. The module is pinned into ActiveAdmin.importmap, the styles are plain CSS for the host's Tailwind build, and ActiveAdmin 3 support is dropped (1.x keeps it). Co-Authored-By: Clanker

The dummy app is committed instead of generated with rails new. A second gemfile runs the same specs with active_admin_theme 4, which moves the filters title into a panel header. Co-Authored-By: Clanker

Co-Authored-By: Clanker

Copilot

🟡 Changes recommended

The dependency bound admits unsupported ActiveAdmin 5 prereleases, while filter detection can hide populated textareas and bypass custom select/boolean overrides.

3 open issues

What changed in this PR

Migrates the filters visibility plugin to ActiveAdmin 4, replacing jQuery with an ES module and plain CSS while preserving per-page visibility, reset, and optional ordering.

Changes:

Adds import-map integration, configurable module exports, and dark-mode styles.
Documents installation and breaking changes for the planned 2.0 release.
Replaces the generated test app with a committed dummy app and tests stock and themed layouts in CI.

File	Description
`tasks/test.rake`	Removes generated test-app setup.
`spec/support/tailwind.rb`	Builds dummy styles with optional theme support.
`spec/support/schema.rb`	Defines the test database schema.
`spec/support/rails_template.rb`	Removes the legacy Rails app template.
`spec/support/capybara.rb`	Uses Puma and Cuprite by default.
`spec/support/admin.rb`	Removes dynamic resource registration.
`spec/spec_helper.rb`	Boots the committed dummy app and configures cleanup.
`spec/filters_visibility_spec.rb`	Covers visibility, persistence, ordering, reset, and layouts.
`spec/dummy/config/routes.rb`	Mounts ActiveAdmin routes.
`spec/dummy/config/initializers/active_admin.rb`	Configures ActiveAdmin and theme module imports.
`spec/dummy/config/importmap.rb`	Provides the host import-map placeholder.
`spec/dummy/config/environment.rb`	Initializes the dummy application.
`spec/dummy/config/database.yml`	Configures SQLite for tests.
`spec/dummy/config/application.rb`	Defines the minimal ActiveAdmin 4 host.
`spec/dummy/config.ru`	Provides the Rack entry point.
`spec/dummy/app/views_stock/active_admin/_html_head.html.erb`	Loads assets and modules for stock ActiveAdmin.
`spec/dummy/app/models/author.rb`	Defines the test model’s Ransack allowlists.
`spec/dummy/app/models/application_record.rb`	Adds the abstract model base.
`spec/dummy/app/javascript/filters_visibility_config.js`	Enables ordering in tests.
`spec/dummy/app/controllers/application_controller.rb`	Adds the dummy controller base.
`spec/dummy/app/assets/builds/.keep`	Preserves the stylesheet output directory.
`spec/dummy/app/admin/dashboard.rb`	Registers the dummy dashboard.
`spec/dummy/app/admin/authors.rb`	Registers the resource and test filters.
`README.md`	Explains installation, configuration, migration, and testing.
`Rakefile`	Makes RSpec the default task.
`package.json`	Exports and packages the ES module and CSS.
`lib/active_admin_filters_visibility.rb`	Registers the module with ActiveAdmin.
`gemfiles/active_admin_theme.gemfile`	Adds the themed test configuration.
`Gemfile`	Switches development dependencies to ActiveAdmin 4.
`config/importmap.rb`	Pins the plugin module.
`app/javascript/active_admin_filters_visibility.js`	Implements the standalone filters visibility module.
`app/assets/stylesheets/active_admin_filters_visibility.css`	Adds plain CSS with dark-mode and theme support.
`app/assets/javascripts/active_admin_filters_visibility.js`	Removes the legacy jQuery implementation.
`active_admin_filters_visibility.gemspec`	Updates the description and ActiveAdmin dependency range.
`.rspec`	Loads the shared spec helper automatically.
`.gitignore`	Excludes generated package and dummy-app artifacts.
`.github/workflows/ci.yml`	Tests stock and themed layouts across Rails and Ruby versions.

_{Review effort: Balanced}

Textareas and checked empty-value radios now count correctly, the dependency excludes ActiveAdmin 5 prereleases, and javascript_modules is only extended when the module is pinned. Specs cover a registered detector and dropping a filter below its target. Co-Authored-By: Clanker

The detector was picked by class order, so a wrapper with `select customized-id` ignored the detector for `customized-id`. Co-Authored-By: Clanker

Copilot

🔵 Needs a closer look

Filter reordering relies solely on native drag-and-drop, leaving keyboard-only users unable to change the order without accessible controls or an equivalent keyboard interaction.

No open issues 🎉

1 previously missed issue

In code that hasn't changed since last review

Add keyboard-accessible filter reordering

app/javascript/active_admin_filters_visibility.js:195

When ordering is enabled, the rows are only made draggable, and the only reordering handlers are dragstart/drop. Native HTML drag-and-drop does not make these rows keyboard-operable, so keyboard-only users cannot change the filter order. Please provide keyboard-accessible move-up/move-down buttons or an equivalent keyboard interaction that uses the same rendering and persistence logic.

3 resolved since last review

_{Review effort: Balanced}

Copilot

🟡 Changes recommended

Filter reordering relies solely on drag events, leaving keyboard-only users unable to change the order without accessible move controls or equivalent keyboard interaction.

1 open issue

Add keyboard-accessible controls for reordering rows · New

_{Review effort: Balanced}

+    checkbox.setAttribute("data-filters-visibility-checkbox", id)
+    label.append(checkbox, document.createTextNode(` ${labelFor(byId.get(id))}`))
+    item.appendChild(label)
+    if (settings.ordering) item.draggable = true


senid231 added 5 commits November 12, 2026 10:19

Allowlist Author associations in the dummy app for Ransack 6

3a2f349

Ransack 6 raises when a model does not define ransackable_associations, so every spec failed once bundler resolved ransack 6.1.0. Co-Authored-By: Clanker

Exclude ActiveAdmin 4 prereleases from the dependency

7649968

RubyGems sorts 4.0.0.beta23 below 4.0, so "< 4.0" let bundler pick an ActiveAdmin 4 beta, which this jQuery plugin does not support. Co-Authored-By: Clanker

Test against an ActiveAdmin 4 dummy app, with and without the theme

126f03d

The dummy app is committed instead of generated with rails new. A second gemfile runs the same specs with active_admin_theme 4, which moves the filters title into a panel header. Co-Authored-By: Clanker

Document ActiveAdmin 4 setup and the upgrade from 1.x

0b35acc

Co-Authored-By: Clanker

senid231 self-assigned this Nov 12, 2026

senid231 requested a balanced review from Copilot November 12, 2026 11:16

Copilot started reviewing on behalf of senid231 November 12, 2026 11:16

View session

Copilot AI reviewed Nov 12, 2026

View reviewed changes

Comment thread active_admin_filters_visibility.gemspec Resolved

Comment thread app/javascript/active_admin_filters_visibility.js Resolved

Comment thread app/javascript/active_admin_filters_visibility.js Resolved

senid231 added 2 commits November 12, 2026 14:02

Prefer a registered detector over the built-in filter types

afdb0b3

The detector was picked by class order, so a wrapper with `select customized-id` ignored the detector for `customized-id`. Co-Authored-By: Clanker

senid231 requested a balanced review from Copilot November 12, 2026 14:54

Copilot started reviewing on behalf of senid231 November 12, 2026 14:55

View session

Copilot AI reviewed Nov 12, 2026

View reviewed changes

senid231 requested a balanced review from Copilot November 13, 2026 08:25

Copilot started reviewing on behalf of senid231 November 13, 2026 08:25

View session

Copilot AI reviewed Nov 13, 2026

View reviewed changes

Comment thread app/javascript/active_admin_filters_visibility.js

checkbox.setAttribute("data-filters-visibility-checkbox", id)

label.append(checkbox, document.createTextNode(` ${labelFor(byId.get(id))}`))

item.appendChild(label)

if (settings.ordering) item.draggable = true

Navigation Menu

Repository navigation

Support ActiveAdmin 4 with a plain ES module - #8

Support ActiveAdmin 4 with a plain ES module#8
senid231 wants to merge 7 commits into
masterfrom
activeadmin-v4

senid231 commented Nov 12, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

senid231 commented Nov 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟡 Changes recommended

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🔵 Needs a closer look

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟡 Changes recommended

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

senid231 commented Nov 12, 2026 •

edited

Loading