Upgrade madmin to v2.x

Gemfile

@@ -29,7 +29,7 @@ gem "bootstrap-sass", "3.4.1"
 # Use Puma as the app server
 gem "puma", "~> 7.2"
 # Use SCSS for stylesheets
-gem "sass-rails", "~> 5.0"
+gem "sass-rails", "~> 6.0"
 
 gem "bourbon"
 gem "matrix"
@@ -110,4 +110,4 @@ gem "pundit", "~> 2.2"
 
 gem "ostruct"
 
-gem "madmin", "~> 1.2"
+gem "madmin", "~> 2.0"

Gemfile.lock

@@ -166,6 +166,10 @@ GEM
       logger
     i18n (1.15.2)
       concurrent-ruby (~> 1.0)
+    importmap-rails (2.2.3)
+      actionpack (>= 6.0.0)
+      activesupport (>= 6.0.0)
+      railties (>= 6.0.0)
     io-console (0.8.2)
     irb (1.18.0)
       pp (>= 0.6.0)
@@ -195,9 +199,13 @@ GEM
     loofah (2.25.2)
       crass (~> 1.0.2)
       nokogiri (>= 1.12.0)
-    madmin (1.2.8)
+    madmin (2.3.3)
+      importmap-rails
       pagy (>= 3.5)
-      rails (>= 6.0.3)
+      propshaft
+      rails (>= 7.0.0)
+      stimulus-rails
+      turbo-rails
     mail (2.9.1)
       logger
       mini_mime (>= 0.1.1)
@@ -274,7 +282,10 @@ GEM
       omniauth (~> 2.0)
     orm_adapter (0.5.0)
     ostruct (0.6.3)
-    pagy (6.1.0)
+    pagy (43.6.0)
+      json
+      uri
+      yaml
     parallel (2.1.0)
     parser (3.3.12.0)
       ast (~> 2.4.1)
@@ -284,6 +295,10 @@ GEM
       prettyprint
     prettyprint (0.2.0)
     prism (1.9.0)
+    propshaft (1.3.2)
+      actionpack (>= 7.0.0)
+      activesupport (>= 7.0.0)
+      rack
     public_suffix (7.0.5)
     puma (7.2.1)
       nio4r (~> 2.0)
@@ -399,19 +414,16 @@ GEM
       rubocop-ast (>= 1.47.1, < 2.0)
     ruby-progressbar (1.13.0)
     rubyzip (2.3.2)
-    sass (3.7.4)
-      sass-listen (~> 4.0.0)
-    sass-listen (4.0.0)
-      rb-fsevent (~> 0.9, >= 0.9.4)
-      rb-inotify (~> 0.9, >= 0.9.7)
-    sass-rails (5.1.0)
-      railties (>= 5.2.0)
-      sass (~> 3.1)
-      sprockets (>= 2.8, < 4.0)
-      sprockets-rails (>= 2.0, < 4.0)
-      tilt (>= 1.1, < 3)
+    sass-rails (6.0.0)
+      sassc-rails (~> 2.1, >= 2.1.1)
     sassc (2.4.0)
       ffi (~> 1.9)
+    sassc-rails (2.1.2)
+      railties (>= 4.0.0)
+      sassc (>= 2.0)
+      sprockets (> 3.0)
+      sprockets-rails
+      tilt
     securerandom (0.4.1)
     selenium-webdriver (4.10.0)
       rexml (~> 3.2, >= 3.2.5)
@@ -435,12 +447,13 @@ GEM
       hashie (>= 0.1.0, < 6)
       version_gem (~> 1.1, >= 1.1.14)
     spring (3.0.0)
-    sprockets (3.7.2)
+    sprockets (4.2.2)
       concurrent-ruby (~> 1.0)
-      rack (> 1, < 3)
-    sprockets-rails (3.4.2)
-      actionpack (>= 5.2)
-      activesupport (>= 5.2)
+      logger
+      rack (>= 2.2.4, < 4)
+    sprockets-rails (3.5.2)
+      actionpack (>= 6.1)
+      activesupport (>= 6.1)
       sprockets (>= 3.0.0)
     stackprof (0.2.26)
     standard (1.56.0)
@@ -457,12 +470,17 @@ GEM
       rubocop-performance (~> 1.26.0)
     standardrb (1.0.1)
       standard
+    stimulus-rails (1.3.4)
+      railties (>= 6.0.0)
     terser (1.1.18)
       execjs (>= 0.3.0, < 3)
     thor (1.5.0)
-    tilt (2.3.0)
+    tilt (2.8.0)
     timeout (0.6.1)
     tsort (0.2.0)
+    turbo-rails (2.0.23)
+      actionpack (>= 7.1.0)
+      railties (>= 7.1.0)
     turbolinks (5.2.1)
       turbolinks-source (~> 5.2)
     turbolinks-source (5.2.0)
@@ -493,6 +511,7 @@ GEM
     websocket-extensions (0.1.5)
     xpath (3.2.0)
       nokogiri (~> 1.8)
+    yaml (0.4.0)
     zeitwerk (2.8.2)
 
 PLATFORMS
@@ -521,7 +540,7 @@ DEPENDENCIES
   jquery-rails
   jquery-ui-rails (~> 8.0)
   listen (~> 3.7)
-  madmin (~> 1.2)
+  madmin (~> 2.0)
   matrix
   mimemagic (~> 0.3.8)
   newrelic_rpm
@@ -538,7 +557,7 @@ DEPENDENCIES
   recursive-open-struct
   redcarpet (~> 3.5.1)
   rspec-rails (~> 6.1)
-  sass-rails (~> 5.0)
+  sass-rails (~> 6.0)
   sentry-rails
   sentry-ruby
   shoulda-matchers (~> 3.1)

Gemfile.next.lock

@@ -174,6 +174,10 @@ GEM
       logger
     i18n (1.14.8)
       concurrent-ruby (~> 1.0)
+    importmap-rails (2.2.3)
+      actionpack (>= 6.0.0)
+      activesupport (>= 6.0.0)
+      railties (>= 6.0.0)
     io-console (0.8.2)
     irb (1.18.0)
       pp (>= 0.6.0)
@@ -206,9 +210,13 @@ GEM
     loofah (2.25.1)
       crass (~> 1.0.2)
       nokogiri (>= 1.12.0)
-    madmin (1.2.11)
+    madmin (2.3.3)
+      importmap-rails
       pagy (>= 3.5)
-      rails (>= 6.0.3)
+      propshaft
+      rails (>= 7.0.0)
+      stimulus-rails
+      turbo-rails
     mail (2.9.0)
       logger
       mini_mime (>= 0.1.1)
@@ -314,6 +322,10 @@ GEM
       prettyprint
     prettyprint (0.2.0)
     prism (1.9.0)
+    propshaft (1.3.2)
+      actionpack (>= 7.0.0)
+      activesupport (>= 7.0.0)
+      rack
     psych (5.3.1)
       date
       stringio
@@ -488,13 +500,18 @@ GEM
       rubocop-performance (~> 1.26.0)
     standardrb (1.0.1)
       standard
+    stimulus-rails (1.3.4)
+      railties (>= 6.0.0)
     stringio (3.2.0)
     terser (1.2.7)
       execjs (>= 0.3.0, < 3)
     thor (1.5.0)
     tilt (2.7.0)
     timeout (0.6.1)
     tsort (0.2.0)
+    turbo-rails (2.0.23)
+      actionpack (>= 7.1.0)
+      railties (>= 7.1.0)
     turbolinks (5.2.1)
       turbolinks-source (~> 5.2)
     turbolinks-source (5.2.0)
@@ -557,7 +574,7 @@ DEPENDENCIES
   jquery-rails
   jquery-ui-rails (~> 8.0)
   listen (~> 3.7)
-  madmin (~> 1.2)
+  madmin (~> 2.0)
   matrix
   mimemagic (~> 0.3.8)
   mutex_m

app/assets/stylesheets/project.scss

@@ -2,6 +2,8 @@
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: http://sass-lang.com/
 
+@import "1-utilities/variables";
+
 .projects-controller {
   &.index-action {
     .btn-group {

app/assets/stylesheets/stories.scss

@@ -113,7 +113,7 @@
   .extra_info_preview .content,
   .story_preview .content {
     overflow: auto;
-    max-height: min(50vh, 700px);
+    max-height: unquote("min(50vh, 700px)");
     // prevent long links from overflowing
     a {
       word-break: break-all;

app/views/madmin/application/_javascript.html.erb

@@ -1,107 +1,13 @@
+<%# Styling for these customized madmin views comes from the Tailwind runtime
+    CDN; the JS comes from madmin's own importmap. %>
 <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
-<%= stylesheet_link_tag "https://unpkg.com/flatpickr/dist/flatpickr.min.css", "data-turbo-track": "reload" %>
 <%= stylesheet_link_tag "https://unpkg.com/trix/dist/trix.css", "data-turbo-track": "reload" %>
 <%= stylesheet_link_tag "https://unpkg.com/tom-select/dist/css/tom-select.min.css", "data-turbo-track": "reload" %>
 
-<script type="importmap" data-turbo-track="reload">
-  {
-    "imports": {
-      "@hotwired/stimulus": "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js",
-      "@hotwired/turbo": "https://unpkg.com/@hotwired/turbo",
-      "@hotwired/turbo-rails": "https://unpkg.com/@hotwired/turbo-rails",
-      "@rails/actiontext": "https://unpkg.com/@rails/actiontext@<%= npm_rails_version %>/app/assets/javascripts/actiontext.js",
-      "@rails/activestorage": "https://unpkg.com/@rails/activestorage@<%= npm_rails_version %>/app/assets/javascripts/activestorage.esm.js",
-      "flatpickr": "https://unpkg.com/flatpickr/dist/esm/index.js",
-      "stimulus-flatpickr": "https://unpkg.com/stimulus-flatpickr@3.0.0-0/dist/index.m.js",
-      "tailwindcss-stimulus-components": "https://unpkg.com/tailwindcss-stimulus-components/dist/tailwindcss-stimulus-components.modern.js",
-      "tom-select": "https://unpkg.com/tom-select/dist/esm/tom-select.complete.js",
-      "trix": "https://unpkg.com/trix"
-    }
-  }
-</script>
-<script async src="https://unpkg.com/es-module-shims/dist/es-module-shims.js"></script>
-
-<script type="module">
-  import * as Turbo from "@hotwired/turbo-rails"
-
-  import * as ActiveStorage from "@rails/activestorage"
-  ActiveStorage.start()
-  import "trix"
-  import "@rails/actiontext"
-
-  import { Application, Controller } from '@hotwired/stimulus'
-  const application = Application.start()
-
-  import { Dropdown } from "tailwindcss-stimulus-components"
-  application.register("dropdown", Dropdown)
-
-  import StimulusFlatpickr from "stimulus-flatpickr"
-  application.register("flatpickr", StimulusFlatpickr)
-
-  import TomSelect from "tom-select"
-
-  (() => {
-    application.register('select', class extends Controller {
-      static values = {
-        options: Object,
-        url: String
-      }
-
-      connect() {
-        this.select = new TomSelect(this.element, {
-          plugins: ['remove_button'],
-          valueField: 'id',
-          labelField: 'name',
-          searchField: 'name',
-          load: (search, callback) => {
-            let url = search ? `${this.urlValue}?q=${search}` : this.urlValue;
-            fetch(url)
-              .then(response => response.json())
-              .then(json => {
-                callback(json);
-              }).catch(() => {
-                callback();
-              });
-          }
-        })
-      }
-
-      disconnect() {
-        this.select.destroy()
-      }
-    })
-
-    application.register('nested-form', class extends Controller {
-      static get targets() {
-        return [ "links", "template" ]
-      }
-
-      connect() {
-        this.wrapperClass = this.data.get("wrapperClass") || "nested-fields"
-      }
-
-      add_association(event) {
-        event.preventDefault()
-
-        var content = this.templateTarget.innerHTML.replace(/NEW_RECORD/g, new Date().getTime())
-        this.linksTarget.insertAdjacentHTML('beforebegin', content)
-      }
-
-      remove_association(event) {
-        event.preventDefault()
-
-        let wrapper = event.target.closest("." + this.wrapperClass)
-
-        // New records are simply removed from the page
-        if (wrapper.dataset.newRecord == "true") {
-          wrapper.remove()
-
-        // Existing records are hidden and flagged for deletion
-        } else {
-          wrapper.querySelector("input[name*='_destroy']").value = 1
-          wrapper.style.display = 'none'
-        }
-      }
-    })
-  })()
-</script>
+<%# Madmin.importmap pins @hotwired/*, @rails/actiontext, @rails/activestorage,
+    trix, tom-select and tailwindcss-stimulus-components (all vendored by the
+    madmin gem, no Rails-version-pinned unpkg URLs), and eager-loads madmin's
+    select / nested_form / dropdown Stimulus controllers. This replaces the
+    hand-written importmap and the npm_rails_version helper that madmin 2.x
+    removed. %>
+<%= javascript_importmap_tags "application", importmap: Madmin.importmap %>

app/views/madmin/application/index.html.erb

@@ -63,4 +63,9 @@
     </tbody>
   </table>
 </div>
-<%== render(partial: 'madmin/pagy/nav', locals: { pagy: @pagy }) if @pagy.pages > 1 %>
+<%# madmin 2.x renders pagination with pagy's own object helpers instead of
+    the removed madmin/pagy/_nav partial. %>
+<div class="pagination">
+  <%== @pagy.series_nav if @pagy.last > 1 %>
+  <%== @pagy.info_tag %>
+</div>

config/application.rb

@@ -15,5 +15,16 @@ class Application < Rails::Application
     # Settings in config/environments/* take precedence over those specified here.
     # Application configuration should go into files in config/initializers
     # -- all .rb files in that directory are automatically loaded.
+
+    # Do not use the SassC/libsass CSS compressor: it re-parses already-compiled
+    # CSS and evaluates arithmetic inside calc()/min() (e.g. `100vh - 160px`),
+    # raising "Incompatible units" on valid CSS. Set to nil explicitly since
+    # sprockets-rails otherwise defaults to :sass when sassc is available. This
+    # affects any env that compiles assets (test + production), so set it here.
+    #
+    # Tradeoff: this disables CSS minification in production, so application.css
+    # ships unminified (gzip at the web/CDN layer still applies). Revisit with a
+    # non-SassC minifier if CSS payload size becomes a concern.
+    config.assets.css_compressor = nil
   end
 end

config/environments/production.rb

@@ -18,7 +18,8 @@
   # Apache or NGINX already handles this.
   config.public_file_server.enabled = ENV["RAILS_SERVE_STATIC_FILES"].present?
 
-  config.assets.css_compressor = :sass
+  # css_compressor is disabled globally in config/application.rb (SassC re-parses
+  # compiled CSS and chokes on calc()/min() unit arithmetic).
   config.assets.js_compressor = :terser
 
   # Do not fallback to assets pipeline if a precompiled asset is missed.