ActiveAdmin v4 supports importmaps.
How can I add custom JS to ActiveAdmin via importmaps?
Add a comment
|
1 Answer
This solution merges Rails and ActiveAdmin importmap config that was previously separate (see discussion). The caveat is that you have to disable turbo because it's part of Rails by default but doesn't play nice with AA v4 (see). Keeping the config separate and extending the ActiveAdmin config is also possible (see below) but it breaks some functionality.
config/application.rb
config.importmap.paths << ActiveAdmin::Engine.root.join('config', 'importmap.rb')
config/importmap.rb
pin 'chartkick', to: 'chartkick.js'
pin 'Chart.bundle', to: 'Chart.bundle.js'
app/javascripts/application.js
import 'active_admin'
import "chartkick"
import "Chart.bundle"
Eject ActiveAdmin views via bin/rails g active_admin:views.
Replace ActiveAdmin JS import tag in app/views/active_admin/_html_head.html.erb with:
<%= javascript_importmap_tags %>
Remove turbo-rails from your Gemfile, or disable it for active_admin:
active_admin.html.erb
<body class="..." data-turbo="false">
The other ejected views can be removed.
Old solution
This works for adding packages, but when making changes to JS files the whole server would need to be restarted.
ActiveAdmin v4 has its own layout and importmap separate from the app's default config/importmap.rb and app/javascript/application.js.
Edit ActiveAdmin's importmap in config/initializers/active_admin.rb:
ActiveAdmin.importmap.draw do
pin 'chartkick', to: 'chartkick.js'
pin 'Chart.bundle', to: 'Chart.bundle.js'
pin 'active_admin_custom', to: 'active_admin_custom.js'
end
Restart rails when AA's importmap is modified.
Create your own app/javascript/active_admin_custom.js (which will function like a custom application.js for ActiveAdmin):
import "chartkick"
import "Chart.bundle"
Eject ActiveAdmin views via bin/rails g active_admin:views.
Add JS import tag to app/views/active_admin/_html_head.html.erb:
<%= javascript_import_module_tag "active_admin_custom" %>
The other views can be removed.
Resources
- ActiveAdmin's importmap: https://github.com/activeadmin/activeadmin/blob/cd0891dab20d375928f82300c863bc2f551fa0ef/config/importmap.rb
- ActiveAdmin's application.js: https://github.com/activeadmin/activeadmin/blob/cd0891dab20d375928f82300c863bc2f551fa0ef/app/javascript/active_admin.js
- HTML head template: https://github.com/activeadmin/activeadmin/blob/cd0891dab20d375928f82300c863bc2f551fa0ef/app/views/active_admin/_html_head.html.erb