ActiveAdmin With Ruby On Rails 7

ActiveAdmin can save you hours (if not days) of work when it comes to building internal dashboards.

It comes with a great DSL to help you quickly scaffold and make changes to Rails backends easily, which can be unbelievably useful for support teams to work with some form of agency without dependence of developers.

This post will get up a basic version of this tool and demonstrate an example of its usage with a custom model Flag that we will make and update within the panel.

Source code can be found here.

Prerequisites

Getting started

We will use Rails to initialize the project active-admin-getting-started:

# Create a new rails project
$ rails new demo-rails-with-react-frontend
$ cd demo-rails-with-react-frontend
copy

The first that we want to do is update our Gemfile to add the necessary gems to get ActiveAdmin to work with Ruby on Rails 7.

# New version released next week
# @see https://github.com/activeadmin/activeadmin/issues/7196
gem 'activeadmin', github: 'activeadmin/activeadmin', branch: 'master' # FIXME: revert to stable

# Required for ActiveAdmin
gem 'sass-rails'

# Plus integrations with:
gem 'devise'
gem 'cancancan'
gem 'draper'
gem 'pundit'
copy

Note that at the time of writing, ActiveAdmin does not support Rails 7 on the latest version of the Gem, but the master branch does.

It will be resolved very soon after writing this blog post, so there may be a chance that you do not need to use the GitHub reference to the gem by the time you are seeing this.

We can now install the gems and run some helpers.

# Install gems
$ bundle

# Run main installer
$ bin/rails g active_admin:install

# Migrate
$ bin/rails db:create db:migrate db:seed

# Run application
$ bin/rails s
copy

At this stage, our application will be running on localhost:3000.

Seeing the admin dashboard

Head to http://localhost:3000/admin and log in as the default user:

This is the default seed for those values.

Login screen

When you successfully log in, you will be redirected to the dashboard.

Dashboard

At the moment, we only really have our admin and comment resources as options to view, but you can click onto "Admin" in the nav bar to see our list of admin entities (will will be just the one!):

Admin page

Awesome! We are now in a place where ActiveAdmin is working and are ready to take on our own custom resource.

Creating a custom resource

First of all, we will be creating a contrived "Flag" entity to demonstrating how the dashboard can work.

$ bin/rails g model Flag name:string is_active:boolean
copy

Next, let's update the seeds to add some example flags for us to muck around with:

AdminUser.create!(email: 'admin@example.com', password: 'password', password_confirmation: 'password') if Rails.env.development?

Flag.create!([
    {
        "name": "feature_a",
        "is_active": true
    },
    {
        "name": "feature_b",
        "is_active": true
    },
    {
        "name": "feature_c",
        "is_active": true
    }
])
copy

To ensure our database has the data we want, let's reset the database, run the outstanding migration and seed the fresh database.

# Reset, migrate the latest change and seed
$ bin/rails db:reset
$ bin/rails db:migrate db:seed
copy

Next, we will use an ActiveAdmin helper to generate a resource for our Flag entity:

# Create a new resource for Flag
$ bin/rails generate active_admin:resource Flag
copy

This will output a new resource file in app/admin/flag.rb.

In order to be able to interact and update values, we need to uncomment what an admin is allowed to interact with in the admin panel:

ActiveAdmin.register Flag do
  # See permitted parameters documentation:
  # https://github.com/activeadmin/activeadmin/blob/master/docs/2-resource-customization.md#setting-up-strong-parameters
  #
  # Uncomment all parameters which should be permitted for assignment
  #
  permit_params :name, :is_active
  #
  # or
  #
  # permit_params do
  #   permitted = [:name, :is_active]
  #   permitted << :other if params[:action] == 'create' && current_user.admin?
  #   permitted
  # end
end
copy

This is telling ActiveAdmin that a logged in admin has permission to interact and change both the name and is_active values that we have set.

Interacting with our new flag resource

Restart the Rails server bin/rails s and log back into the panel. You will see a new Flag nav bar option. Click onto it and you will arrive at the Flag panel:

ActiveAdmin Flag panel

You can see from the panel that you can create, edit or even delete resources.

First, let's see editing in action to change the value of is_active.

Click on edit for a resource and you will be taken to a form page:

Edit Flag form

Update the value, submit the form and you will see the updated resource has been saved:

Edit success

Next comes creating a new flag. From the Flag panel, click "New Flag" at the top-right and you will arrive at a new flag form:

Create new

Save that flag and you will be returned to the panel with a success message:

Successful creation of a new flag

Summary

Today's post demonstrated how to get up and running with ActiveAdmin.

While this tutorial only covers the setup and a quick tour around one custom resource, it is enough to begin adding in some powerful configurations for your Rails apps for admins with very little overhead.

Resources and further reading

Photo credit: hdbernd