ChaelCodes
commented
1 year ago 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. https://github.com/rubyforgood/human-essentials/blob/9df05d4b0f9452b4657d9daeeabb7c03f8ccc0b2/config/importmap.rb#L4 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. https://github.com/rubyforgood/human-essentials/blob/9df05d4b0f9452b4657d9daeeabb7c03f8ccc0b2/Gemfile#L43
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
awwaiid
github-actions[bot]
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
application.html.erb,_lte_sidebar.html.erb,_lte_navbar.html.erbas well as a single page in the application. Link to the branch as well as screenshots.