ActiveAdmin v4 propshaft, importmap, stimulus, tailwindcss and ActionPolicy configuration

abstract.md

$ rails new . -n ActiveAdminDemo -c tailwind -a propshaft --skip-test --skip-system-test

$ rails g active_admin:install --skip-users
$ rails tailwindcss:install
$ rails generate active_admin:assets
$ cat tailwind-active_admin.config.js | sed 's/require(`@activeadmin\/activeadmin\/plugin`)/require(`${activeAdminPath}\/plugin.js`)/g' > config/tailwind-active_admin.config.js
$ rm tailwind-active_admin.config.js
$ bundle binstub tailwindcss-rails
$ rails generate active_admin:views
$ echo "active_admin: bin/rails active_admin:watch" >> Procfile.dev

$ vim lib/tasks/active_admin.rake
$ vim config/initializers/active_admin.rb

$ rails g model button clicked:boolean clicked_at:timestamp
$ rails generate active_admin:resource Button

$ rails db:create db:migrate db:seed
$ bin/dev

action_policy_adapter.rb

module ActiveAdmin
  class ActionPolicyAdapter < AuthorizationAdapter
    def authorized?(action, subject = nil)
      target = policy_target(subject)
      policy = ActionPolicy.lookup(target)
      action = format_action(action, subject)
      policy.new(target, user: user).apply(action)
    end

    def scope_collection(collection, _action = Auth::READ)
      target = policy_target(collection)
      policy = ActionPolicy.lookup(target)
      policy.new(user: user).apply_scope(collection, type: :active_admin)
    end

    def format_action(action, subject)
      case action
      when Auth::CREATE
        :create?
      when Auth::UPDATE
        :update?
      when Auth::READ
        subject.is_a?(Class) ? :index? : :show?
      when Auth::DESTROY
        subject.is_a?(Class) ? :destroy_all? : :destroy?
      else
        "#{action}?"
      end
    end

    private

    def policy_target(subject)
      case subject
      when nil
        resource.resource_class
      when Class
        subject.new
      else
        subject
      end
    end
  end
end

active_admin.rake

namespace :active_admin do
  desc "Build Active Admin Tailwind stylesheets"
  task build: :environment do
    command = [
      Rails.root.join("bin/tailwindcss").to_s,
      "-i", Rails.root.join("app/assets/stylesheets/active_admin.css").to_s,
      "-o", Rails.root.join("app/assets/builds/active_admin.css").to_s,
      "-c", Rails.root.join("config/tailwind-active_admin.config.js").to_s,
      "-m"
    ]

    system(*command, exception: true)
  end

  desc "Watch Active Admin Tailwind stylesheets"
  task watch: :environment do
    command = [
      Rails.root.join("bin/tailwindcss").to_s,
      "--watch",
      "-i", Rails.root.join("app/assets/stylesheets/active_admin.css").to_s,
      "-o", Rails.root.join("app/assets/builds/active_admin.css").to_s,
      "-c", Rails.root.join("config/tailwind-active_admin.config.js").to_s,
      "-m"
    ]

    system(*command)
  end
end

Rake::Task["assets:precompile"].enhance(["active_admin:build"])

Rake::Task["test:prepare"].enhance(["active_admin:build"]) if Rake::Task.task_defined?("test:prepare")
Rake::Task["spec:prepare"].enhance(["tailwindcss:build"]) if Rake::Task.task_defined?("spec:prepare")
Rake::Task["db:test:prepare"].enhance(["tailwindcss:build"]) if Rake::Task.task_defined?("db:test:prepare")

app\models\current.rb

class Current < ActiveSupport::CurrentAttributes
  attribute :user
  attribute :request_id, :user_agent, :remote_addr
  attribute :locale, :time_zone

  resets do
    I18n.locale = I18n.default_locale
    Time.zone = Time.zone_default
    ActionReporter.reset_context
  end

  def user_agent=(user_agent)
    super
    ActionReporter.context(user_agent: user_agent)
  end

  def remote_addr=(remote_addr)
    super
    ActionReporter.context(remote_addr: remote_addr)
  end

  def locale=(locale)
    super
    I18n.locale = locale
    ActionReporter.context(locale: locale)
  end

  def time_zone=(time_zone)
    super
    Time.zone = time_zone
    ActionReporter.context(time_zone: time_zone)
  end

  def user=(user)
    super
    ActionReporter.audited_user = user
  end
end

config\initializers\active_admin.rb

require_relative "../../app/lib/active_admin/action_policy_adapter"

ActiveAdmin.importmap.draw do
  pin "@rails/actioncable", to: "actioncable.esm.js", preload: true
  pin "@rails/activestorage", to: "activestorage.esm.js", preload: true

  pin "@hotwired/turbo-rails", to: "turbo.js", preload: true
  pin "@hotwired/stimulus", to: "stimulus.js", preload: true
  pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true

  pin "application", preload: true
  pin_all_from "app/assets/javascripts/controllers", under: "controllers"
end

ActiveAdmin.setup do |config|
  # ...
  config.authorization_adapter = ActiveAdmin::ActionPolicyAdapter
  # ...
end

config\initializers\content_security_policy.rb

# https://guides.rubyonrails.org/security.html

# Define an application-wide content security policy
# For further information see the following documentation
# https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy

Rails.application.config.content_security_policy do |policy|
  policy.default_src :self, :https
  policy.img_src :self, :https, :data
  policy.script_src :self, :https
  policy.style_src :self, :https, :unsafe_inline

  # if Rails.env.production?
  #   policy.report_uri -> { "https://api.honeybadger.io/v1/browser/csp?api_key=#{HoneybadgerConfig.new.api_key}&report_only=true&env=#{EnvConfig.new.environment}&context[user_id]=#{respond_to?(:current_user) ? current_user&.id : nil}" }
  # end
end

# If you are using UJS then enable automatic nonce generation
Rails.application.config.content_security_policy_nonce_generator = ->(request) { request.session.id.to_s }

# Set the nonce only to specific directives
Rails.application.config.content_security_policy_nonce_directives = %w[script-src]

# Report CSP violations to a specified URI
# For further information see the following documentation:
# https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy-Report-Only
# Rails.application.config.content_security_policy_report_only = true

config\tailwind-active_admin.config.js

const execSync = require('child_process').execSync;
const activeAdminPath = execSync('bundle show activeadmin', { encoding: 'utf-8' }).trim();

module.exports = {
  content: [
    `${activeAdminPath}/vendor/javascript/flowbite.js`,
    `${activeAdminPath}/plugin.js`,
    `${activeAdminPath}/app/views/**/*.{arb,erb,html,rb}`,
    './app/admin/**/*.{arb,erb,html,rb}',
    './app/views/active_admin/**/*.{arb,erb,html,rb}',
    './app/views/admin/**/*.{arb,erb,html,rb}',
    './app/javascript/**/*.js'
  ],
  darkMode: "class",
  plugins: [
    require(`${activeAdminPath}\/plugin.js`)
  ]
}

Gemfile

# NOTE: partial content required for Gemfile

gem "rails"
gem "propshaft"
gem "importmap-rails"
gem "stimulus-rails"
gem "tailwindcss-rails"

gem "action_policy"

gem "activeadmin", "4.0.0.beta6"

views\active_admin\_html_head.html.erb

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">

<%= csrf_meta_tags %>
<%= csp_meta_tag %>

<%= stylesheet_link_tag "active_admin" %>

<% # On page load or when changing themes, best to add inline in `head` to avoid FOUC %>
<%= javascript_tag nonce: true do %>
  if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
    document.documentElement.classList.add('dark')
  } else {
    document.documentElement.classList.remove('dark')
  }
<% end %>

<%= javascript_importmap_tags "active_admin", importmap: ActiveAdmin.importmap %>
<%= javascript_import_module_tag "application" %>

<%= render partial: "honeybadger", locals: { layout: :active_admin } %>
<%= render partial: "favicon" %>
<%= render partial: "fonts" %>
<%= render partial: "scripts" %>

<% if content_for?(:head) %>
  <%= yield(:head) %>
<% end %>

views\application\_honeybadger.html.erb

<%= javascript_include_tag "https://js.honeybadger.io/v6.8/honeybadger.min.js" nonce: true %>

<% if ENV["HONEYBADGER_API_KEY"].present? %>
  <%= javascript_tag nonce: true do %>
    if (typeof Honeybadger !== "undefined") {
      Honeybadger.configure({
        apiKey: "<%= ENV.fetch("HONEYBADGER_API_KEY") %>",
        environment: "<%= ENV.fetch("HONEYBADGER_ENV") %>",
        revision: "<%= ENV.fetch("HONEYBADGER_REVISION", "unknown") %>",
      });
      Honeybadger.setContext({
        layout: "<%= layout %>",
        user_id: "<%= current_user&.id %>"
      });
    }
  <% end %>
<% end %>

views\application\_scripts.html.erb

<%= javascript_include_tag "https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js", nonce: true, defer: true %>

@w3villa-Khushi-Gupta Hey! Do you have source code publicly available? And please elaborate more what do you mean by "to link css in the view"?

I have no LinkedIn profile, so won't contact you there, let's continue it here.

No source code ain't public. I meant that the view in the admin panel is not having any css they are just divs and other things without any styling being implemneted.

Authentication system is not part of ActiveAdmin, you should take care of assets inclusion on layout level like app/views/layouts/application.html.erb or depending on gem you use for authentication.

Actually this is one page going inside after logging in

This is what I'm getting, so the css is not applicable in this page as well

Check app/views/active_admin/_html_head.html.erb it should have <%= stylesheet_link_tag "active_admin" %>

Also you should run rake task to compile active_admin.tailwind.css.

@w3villa-Khushi-Gupta not sure if you figured this out ever, but the thing that was causing this to break for me (albeit with a yarn/node setup as per the active admin docs) is that my active_admin.css file had imports for Tailwind v3.x but my build process (script in package.json for build:css) was building for Tailwind v4. I had to install my specific version of Tailwind in package.json so that the build script would create a v3 file. It was smooth sailing after that.

Now, I'm here to try to see if I can remove all of that package.json junk to get it working in a more streamlined way.

Yeah, unfortunately Tailwind v4 got breaking changes, like .css files importing tailwind will have to be changed to:

@import "tailwindcss";

It makes sense to just read https://tailwindcss.com/docs/upgrade-guide fully, there are lot's of things...