[Investigation] Current bootstrap (4) is past EOL…upgrade to Bootstrap 5

[cielf]

Summary

To stay current with the most recent bootstrap APIs and functionality we need to upgrade from bootstrap 4 to bootstrap 5. The challenge is that we are currently using a theme, AdminLTE, but that theme has not released a bootstrap 5 version yet. We like someone to do a research spike and see if the current working bootstrap 5 branch of AdminLTE is ready enough for us to use and see if we are able to move to the newest version of bootstrap.

Why update?

Very minor potential for security issues due to no longer getting patches.

Primarily though, having such an outdated version of a primary library will make it more difficult for new contributors to dive in and help out as bootstrap continues to evolve and add new and different classes/ids/etc that contributors will expect to exist but are not present on the prior version of bootstrap.

Details

Here is a link to the bootstrap 5 branch of AdminLTE.
Here is a link to the bootstrap 5 upgrade documentation.

Notes:

Just a reminder that the application is now using importmaps.

Initial step:

Determine the status of Admin LTE support for Bootstrap 5. E.g., how far away is the in-progress branch from supporting what we need? It is possible that since AdminLTE supports multiple frameworks (React, Vue, etc) that the base stylings are already finished.

Criteria for completion

• Investigate current state of Admin LTE vis a vis Bootstrap 5 -- how far away is it from supporting what we need?
• If possible, make a branch with one of the layout pages converted and pulling the new assets -- application.html.erb, _lte_sidebar.html.erb, _lte_navbar.html.erb as well as a single page in the application. Link to the branch as well as screenshots.
• Document any potential issues with the issue/upgrade/

[ChaelCodes]

Investigation

Here's some initial results from the investigation into upgrading Bootstrap from the DC event on 7/28.

ADR

There's an architecture decision record from Oct 2022 where Tailwind was considered, but declined due to the effort involved in migrating.
https://github.com/rubyforgood/human-essentials/blob/main/doc/architecture/decisions/0009-stick-with-adminlte-for-app-design.md

Importing

We import AdminLTE using importmaps.

human-essentials/config/importmap.rb

Line 4 in 9df05d4

pin "admin-lte", to: "adminlte.js", preload: true

This line imports a local file - https://github.com/rubyforgood/human-essentials/blob/main/app/javascript/adminlte.js containing 3000+ lines. It's unclear how bootstrap is loaded here.

There's css imported as well in https://github.com/rubyforgood/human-essentials/blob/main/app/assets/stylesheets/AdminLTE.css

Bootstrap is imported in the gemfile, but the connection to AdminLTE is unclear.

human-essentials/Gemfile

Line 43 in 9df05d4

gem 'bootstrap', '~> 4.6.0'

Usage

There are at least 4 files labeled lte:

• https://github.com/rubyforgood/human-essentials/blob/main/app/views/layouts/_lte_navbar.html.erb
• https://github.com/rubyforgood/human-essentials/blob/main/app/views/layouts/_lte_sidebar.html.erb
• https://github.com/rubyforgood/human-essentials/blob/main/app/views/layouts/_lte_admin_navbar.html.erb
• https://github.com/rubyforgood/human-essentials/blob/main/app/views/layouts/_lte_admin_sidebar.html.erb
  It may be used in other places, but we can assume it's used in these 4 layouts.

[jamesiarmes]

Picking this up along with @h-m-m.

[awwaiid]

Per the PR -- bootstrap is upgraded! But we need to do a visual regression test (and likely fix a conflict or two as we are doing parallel work). The PR has a big checklist of areas / types of things to check.

[github-actions]

This issue is marked as stale due to no activity within 30 days. If no further activity is detected within 7 days, it will be unassigned.

[github-actions]

Automatically unassigned after 7 days of inactivity.