Upgrade rails 6 to 8

[dschmura]

MiClassrooms Upgrade Summary

Overview

This document summarizes all changes made during the extended upgrade session, migrating MiClassrooms from Rails 6.1 with Webpacker to a modern Rails 8.1 stack with importmap-rails, Tailwind CSS v4, and SolidQueue.

---

Impact Metrics

Build System Improvements

Metric	Before (Webpacker)	After (importmap-rails)	Improvement
Node.js Required	Yes	No	Eliminated dependency
node_modules/ Size	~200-500MB typical	0 MB	100% reduction
package.json Dependencies	20+ packages	0 packages	100% reduction
JS Build Time	5-15 seconds	0 seconds (no build)	No compilation needed
Dev Server Processes	3 (web, js, css)	3 (web, css, jobs)	Same, but simpler
Importmap Pins	N/A	12 pins	Minimal configuration

Asset Sizes

Asset	Size	Notes
Compiled Tailwind CSS	60 KB	Production-ready
Pannellum (vendored)	66 KB	360° panorama viewer
Bigger Picture (CDN)	~15 KB	Lightbox library

Database Query Improvements

N+1 Fix #1: Room Thumbnails & Building Association (rooms#index)

Metric	Before	After	Improvement
Building lookup queries	1 per room displayed	1 batch query	~97% reduction (assuming 30 rooms/page)
Room thumbnail queries	1 per room displayed	1 batch query	~97% reduction
Total queries (30 rooms)	~60+ queries	2 queries	~97% fewer queries

Problem: View used Building.find_by() instead of eager-loaded room.building, and room thumbnails were not eager-loaded.

Solution: Updated to includes(:room_contact, :room_image_attachment, :building)

N+1 Fix #2: Building Images on Rooms Index

Metric	Before	After	Improvement
Building image queries	43 queries (1 per building)	1 batch query	97.7% reduction
ActiveRecord time	~50-60ms	~8-10ms	~80% faster

Problem: Building images were loaded individually when rendering the building filter sidebar.

Solution: Added includes(:building_image_attachment) to the @buildings query.

Infrastructure Simplification

Service	Before	After	Benefit
Redis	Required	Not needed	One less service to manage
Node.js/npm	Required	Not needed	Simpler CI/CD pipelines
Sidekiq	Separate process	SolidQueue (same DB)	Unified PostgreSQL stack

Dependency Reduction

Category	Before	After	Removed
Ruby Gems	40+	36	redis, sidekiq, spring, webpacker, cssbundling-rails
npm Packages	20+	0	All Node.js dependencies
External Services	Redis	None	PostgreSQL handles everything

---

1. Rails Version Upgrades

Rails 6.1 → 7.0

• Updated gem dependencies for Rails 7.0 compatibility
• Resolved deprecation warnings

Rails 7.0 → 7.1

• Updated to Rails 7.1.6
• Addressed breaking changes in ActiveRecord and ActionView

Rails 7.1 → 7.2

• Completed Rails 7.2 upgrade

Rails 7.2 → 8.0 → 8.1

• Upgraded to Rails 8.1.1 (current)
• Fixed Rails 8.x and Ruby 3.4 compatibility issues
• Upgraded Sidekiq to 7.3.10 for Rails 8.1 compatibility

---

2. JavaScript Build System Migration

Webpacker → jsbundling-rails

• Removed Webpacker entirely
• Migrated to jsbundling-rails as an intermediate step
• Updated all JavaScript entry points

jsbundling-rails → importmap-rails

• Eliminated Node.js dependency entirely
• Configured config/importmap.rb for all JavaScript dependencies
• Migrated Stimulus controllers to work with importmap
• Created app/javascript/controllers/index.js for manual controller registration

Files Changed

• Removed: package.json, yarn.lock, node_modules/
• Removed: bin/yarn, bin/webpack, bin/webpack-dev-server
• Added: config/importmap.rb
• Updated: app/javascript/application.js, app/javascript/controllers/index.js

---

3. CSS/Tailwind Migration

Tailwind CSS v3.4 → v4.1

• Major version upgrade with breaking changes
• Updated color utilities, spacing, and configuration syntax

cssbundling-rails → tailwindcss-rails

• Eliminated npm/npx dependency for CSS
• Installed tailwindcss-rails ~> 4.0 gem
• Moved CSS from app/assets/stylesheets/application.tailwind.css to app/assets/tailwind/application.css
• Updated Procfile.dev to use bin/rails tailwindcss:watch

CSS File Location

app/assets/tailwind/application.css  # Main Tailwind entry point
app/assets/builds/tailwind.css       # Compiled output

---

4. Background Jobs Migration

Redis/Sidekiq → SolidQueue/SolidCable

• Eliminated Redis dependency
• Installed gems:
  • solid_queue ~> 1.2
  • solid_cable ~> 3.0
  • mission_control-jobs ~> 1.1

Database Configuration

Updated config/database.yml for multi-database setup:

development:
  primary:
    database: mi_classrooms_development
  queue:
    database: mi_classrooms_queue_development
    migrations_paths: db/queue_migrate
  cable:
    database: mi_classrooms_cable_development
    migrations_paths: db/cable_migrate

Queue Adapter

Updated config/application.rb:

config.active_job.queue_adapter = :solid_queue

Monitoring

• Replaced Sidekiq::Web with Mission Control at /jobs
• Protected by authentication (admin email only)

Removed

• redis gem
• sidekiq gem
• config/sidekiq.yml

---

5. Third-Party Library Updates

Lightbox: lightgallery → Bigger Picture

• Replaced lightgallery.js with bigger-picture (smaller, modern)
• Updated lightbox_controller.js
• CDN-hosted via importmap

Panorama Viewer: Pannellum

• Vendored Pannellum library (vendor/javascript/pannellum.js)
• CSS loaded from unpkg CDN
• Made keyboard accessible (see Accessibility section)

Removed Unused Dependencies

• nouislider (unused)
• capacity-slider (unused)

---

6. Spring Removal

Changes

• Removed spring and spring-watcher-listen gems
• Deleted config/spring.rb
• Deleted bin/spring
• Updated bin/rails and bin/rake to remove Spring loading

Rationale

Spring is deprecated in Rails 7.1+ and no longer provides significant benefits with modern hardware.

---

7. Accessibility Improvements

Skip-to-Content Link (Site-wide)

• Fixed skip link to target #main (the actual main content)
• Removed redundant empty <div id="maincontent"> from 7 views
• Fixed duplicate IDs on homepage buttons

Panorama Keyboard Accessibility

• Removed aria-hidden="true" and focusable="false" from panorama
• Added role="application" and descriptive aria-label
• Made load button focusable (tabindex="0")
• Added keyboard activation (Enter/Space to load)
• Auto-focus panorama after loading for arrow key navigation

Files Modified

• app/views/layouts/application.html.erb
• app/views/rooms/_room_panorama.html.erb
• app/javascript/controllers/pannellum_controller.js
• Multiple view files (announcements, buildings, pages, rooms)

---

8. Performance Fixes

N+1 Query Fixes

• Fixed N+1 queries on rooms#index page
• Fixed N+1 query for building images on rooms index

Bug Fixes

• Removed duplicate Atlassian Jira issue collector script (was in both header and footer)
• Fixed style issues and Gemfile duplication

---

9. Announcements CRUD Refactor

Problem

The announcements controller had a non-RESTful pattern:

• Custom cancel action using GET request that modified session state
• Session-based return URL tracking (session[:return_to])
• Missing new, create, and destroy actions
• No ability to create or delete announcements

Solution

Refactored to standard Rails CRUD pattern:

Controller Changes

• Removed cancel action and session-based return tracking
• Added new, create, and destroy actions
• Simplified edit and update to redirect to announcements_path

Route Changes

# Before
resources :announcements
get 'announcements/:id/cancel', to: "announcements#cancel", as: 'announcements_cancel'

# After
resources :announcements

Model Changes

Added location validation to Announcement model:

LOCATIONS = %w[home_page find_a_room_page about_page].freeze
validates :location, presence: true, inclusion: { in: LOCATIONS }

Policy Changes

Updated AnnouncementPolicy for Pundit authorization:

• Added create? and destroy? permissions
• Removed cancel? permission

View Changes

• Index view: Reorganized with sections grouped by location type, each with descriptions of where announcements appear
• Form partial: Updated cancel link to use announcements_path, added location dropdown for new announcements
• New view: Created new.html.erb template

Modified Files

• config/routes.rb
• app/controllers/announcements_controller.rb
• app/models/announcement.rb
• app/policies/announcement_policy.rb
• app/views/announcements/index.html.erb
• app/views/announcements/_form.html.erb
• app/views/announcements/new.html.erb (created)

Test Configuration Fix

Moved ActiveJob::Base.queue_adapter = :test from spec/rails_helper.rb (where it ran on every test) to config/environments/test.rb (where it runs once at boot). This follows Rails conventions for environment-specific configuration.

---

10. Files Removed (Cleanup)

Build Tools

• bin/yarn
• bin/webpack
• bin/webpack-dev-server
• bin/spring
• package.json
• yarn.lock
• node_modules/

Configuration

• config/spring.rb
• config/sidekiq.yml
• .asdf-plugins entries for nodejs/yarn

Updated .gitignore

• Removed webpack/yarn entries
• Kept relevant Rails entries

---

11. Current Tech Stack

Component	Before	After
Rails	6.1.7	8.1.1
Ruby	3.3.4	3.3.4
JS Bundler	Webpacker	importmap-rails
CSS	Tailwind v3 + cssbundling	Tailwind v4 + tailwindcss-rails
Background Jobs	Sidekiq + Redis	SolidQueue (PostgreSQL)
ActionCable	Redis	SolidCable (PostgreSQL)
Node.js Required	Yes	No

---

11. Development Workflow

Starting Development Server

bin/dev

This runs (via Procfile.dev):

• web: Rails server on port 3000
• css: Tailwind CSS watcher
• jobs: SolidQueue worker

Monitoring Background Jobs

Visit /jobs (requires admin authentication)

---

12. Deployment Considerations

1. Database Migrations: Run migrations for SolidQueue and SolidCable schemas
2. Remove Redis: No longer required for jobs or ActionCable
3. Environment Variables: Update any Sidekiq/Redis-specific env vars
4. Asset Compilation: bin/rails assets:precompile now handles Tailwind
5. Procfile: Update for production to run SolidQueue workers

[Copilot]

Pull request overview

This PR upgrades the MiClassrooms application from Rails 6.1 to Rails 8.1, eliminating Node.js dependencies by migrating from Webpacker to importmap-rails, upgrading Tailwind CSS from v3 to v4, and replacing Redis/Sidekiq with PostgreSQL-backed SolidQueue for background jobs. The changes significantly simplify the build system, reduce dependencies, and improve performance through N+1 query optimizations.

Key changes:

• Rails framework upgraded from 6.1.7 to 8.1.1 with Ruby 3.3.4
• JavaScript bundling migrated from Webpacker to importmap-rails, eliminating Node.js dependency
• Background jobs migrated from Sidekiq/Redis to SolidQueue/SolidCable (PostgreSQL-backed)
• Tailwind CSS upgraded from v3 to v4 with native Rails gem support
• N+1 query optimizations implemented on rooms index page
• Comprehensive test coverage added for Room, RoomCharacteristic, Note, Floor, and Building models

Reviewed changes

Copilot reviewed 94 out of 111 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
Gemfile	Updated Rails to 8.1, added Ruby 3.4 stdlib gems, replaced Sidekiq with SolidQueue, removed Webpacker
config/database.yml	Added multi-database support for queue and cable databases
config/importmap.rb	New importmap configuration for JavaScript dependencies
app/javascript/application.js	New importmap entry point replacing Webpacker
app/javascript/controllers/index.js	Manual Stimulus controller registration for importmap
app/assets/tailwind/application.css	New Tailwind CSS v4 configuration with custom theme variables
config/routes.rb	Replaced Sidekiq web UI with Mission Control, changed announcement cancel route to GET
app/controllers/rooms_controller.rb	Added eager loading to fix N+1 queries on rooms index
app/views/**/*.erb	Updated Tailwind classes for v4 compatibility, fixed accessibility issues
spec/**/*_spec.rb	Added comprehensive model test coverage

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.