Blacklight 8 update try2 bootstrap5

Gemfile

@@ -54,7 +54,7 @@ gem 'scout_apm'
 # NOTE ALSO: We are using `blacklight-frontend` JS NPM package, updating blacklight
 # version may require an update with yarn to `blacklight-frontend`, has to be
 # checked manually.
-gem "blacklight", "~> 7.38.0"
+gem "blacklight", "~> 8.6.1"
 gem "blacklight_range_limit", "9.0.0.beta1" # version no longer sync'd with blacklight, not sure how we tell what version works with what version of BL
 
 # for some code to deal with transcoding video, via AWS MediaConvert
@@ -112,6 +112,7 @@ gem 'jbuilder', '~> 2.5'
 # Reduces boot times through caching; required in config/boot.rb
 gem 'bootsnap', '>= 1.4.4', require: false
 
+# note if updating to 5, you should change bootstrap_version config in catalog_controller
 gem 'bootstrap', '~> 4.6', '>= 4.6.2'
 
 gem 'sprockets-rails', '>= 3.4.2'
@@ -124,7 +125,7 @@ gem "device_detector", "~> 1.0" # user-agent parsing we use for logging
 gem "attr_json", "~> 2.3"
 
 # temporarily use kithe off main git, that has updates to work with bootstrap 5
-gem 'kithe', "~> 2.15", ">= 2.15.1", git: "https://github.com/sciencehistory/kithe.git"
+gem 'kithe', "~> 2.16"
 
 gem "traject", ">= 3.5" # to include support for HTTP basic auth in Solr url
 

Gemfile.lock

@@ -1,23 +1,3 @@
-GIT
-  remote: https://github.com/sciencehistory/kithe.git
-  revision: 27310b256e51a6fdf75f9c85d5e4c5ed4739338d
-  specs:
-    kithe (2.15.1)
-      attr_json (~> 2.0)
-      fastimage (~> 2.0)
-      fx (>= 0.6.0, < 1)
-      marcel
-      mini_mime
-      pdf-reader (~> 2.0)
-      rails (>= 6.0, < 8.1)
-      rsolr (~> 2.2)
-      ruby-progressbar (~> 1.0)
-      shrine (~> 3.3)
-      shrine-url (~> 2.0)
-      simple_form (>= 4.0, < 6.0)
-      traject (~> 3.0, >= 3.1.0.rc1)
-      tty-command (>= 0.8.2, < 2)
-
 GEM
   remote: https://rubygems.org/
   specs:
@@ -158,16 +138,15 @@ GEM
     bcrypt (3.1.20)
     bigdecimal (3.1.8)
     bindex (0.8.1)
-    blacklight (7.38.0)
-      deprecation
+    blacklight (8.6.1)
       globalid
-      hashdiff
       i18n (>= 1.7.0)
       jbuilder (~> 2.7)
       kaminari (>= 0.15)
       ostruct (>= 0.3.2)
-      rails (>= 5.1, < 7.3)
-      view_component (>= 2.66, < 4)
+      rails (>= 6.1, < 8)
+      view_component (>= 2.74, < 4)
+      zeitwerk
     blacklight_range_limit (9.0.0.beta1)
       blacklight (>= 7.25.2, < 9)
       view_component (>= 2.54, < 4)
@@ -366,6 +345,21 @@ GEM
       activerecord
       kaminari-core (= 1.2.2)
     kaminari-core (1.2.2)
+    kithe (2.16.0)
+      attr_json (~> 2.0)
+      fastimage (~> 2.0)
+      fx (>= 0.6.0, < 1)
+      marcel
+      mini_mime
+      pdf-reader (~> 2.0)
+      rails (>= 6.0, < 8.1)
+      rsolr (~> 2.2)
+      ruby-progressbar (~> 1.0)
+      shrine (~> 3.3)
+      shrine-url (~> 2.0)
+      simple_form (>= 4.0, < 6.0)
+      traject (~> 3.0, >= 3.1.0.rc1)
+      tty-command (>= 0.8.2, < 2)
     launchy (3.0.1)
       addressable (~> 2.8)
       childprocess (~> 5.0)
@@ -415,7 +409,7 @@ GEM
     multi_xml (0.7.1)
       bigdecimal (~> 3.1)
     multipart-post (2.4.1)
-    mustermann (3.0.2)
+    mustermann (3.0.3)
       ruby2_keywords (~> 0.0.1)
     mutex_m (0.2.0)
     namae (1.2.0)
@@ -467,7 +461,7 @@ GEM
       omniauth (~> 2.0)
     orm_adapter (0.5.0)
     os (1.1.4)
-    ostruct (0.6.0)
+    ostruct (0.6.1)
     parser (3.3.4.2)
       ast (~> 2.4.1)
       racc
@@ -519,8 +513,9 @@ GEM
     rack (3.1.8)
     rack-attack (6.7.0)
       rack (>= 1.0, < 4)
-    rack-protection (4.0.0)
+    rack-protection (4.1.0)
       base64 (>= 0.1.0)
+      logger (>= 1.6.0)
       rack (>= 3.0.0, < 4)
     rack-proxy (0.7.7)
       rack
@@ -678,10 +673,11 @@ GEM
     simple_form (5.3.1)
       actionpack (>= 5.2)
       activemodel (>= 5.2)
-    sinatra (4.0.0)
+    sinatra (4.1.0)
+      logger (>= 1.6.0)
       mustermann (~> 3.0)
       rack (>= 3.0.0, < 4)
-      rack-protection (= 4.0.0)
+      rack-protection (= 4.1.0)
       rack-session (>= 2.0.0, < 3)
       tilt (~> 2.0)
     sitemap_generator (6.3.0)
@@ -790,7 +786,7 @@ DEPENDENCIES
   aws-sdk-s3 (~> 1.0)
   axe-core-rspec (~> 4.3)
   barnes
-  blacklight (~> 7.38.0)
+  blacklight (~> 8.6.1)
   blacklight_range_limit (= 9.0.0.beta1)
   bootsnap (>= 1.4.4)
   bootstrap (~> 4.6, >= 4.6.2)
@@ -820,7 +816,7 @@ DEPENDENCIES
   irb (>= 1.3.1)
   jbuilder (~> 2.5)
   kaminari (~> 1.2)
-  kithe (~> 2.15, >= 2.15.1)!
+  kithe (~> 2.16)
   listen (~> 3.3)
   lockbox
   lograge (< 2)

app/components/scihist/blacklight_query_constraint_component.html.erb

@@ -18,7 +18,7 @@
       </button>
       <% if current_search_q.present? %>
           <%= link_to(search_context_params,  { class:"btn btn-primary remove", title:"Remove" }) do %>
-            <span class="remove-icon">✖</span><span class="visually-hidden">Remove query constraint '<%= current_search_q %>'</span>
+            <span class="remove-icon"><%= raw Blacklight::Icons::RemoveComponent.svg %></span><span class="visually-hidden">Remove query constraint '<%= current_search_q %>'</span>
           <% end %>
       <% end %>
     </div>

app/views/catalog/_search_sidebar.html.erb → app/components/scihist/blacklight_search_sidebar_component.html.erb

@@ -1,11 +1,7 @@
-<%# override blacklight to add our extra links
-https://github.com/projectblacklight/blacklight/blob/v6.7.2/app/views/catalog/_search_sidebar.html.erb
-%>
+<%= render_original_sidebar %>
 
-<%= render 'facets' %>
 
 <% if params[:q].present? %>
-
   <%# bootstrap utility classes d-none and d-md-block say show only on md and above, when we
       have enough room for columns. %>
   <div class="other-searches sidenav card d-none d-md-block">

app/components/scihist/blacklight_search_sidebar_component.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+# A customized component for Blacklight only to CALL ORIGINAL, and then ADD ON TO END
+# our list of "other search links"
+#
+# Configured in CatalogController, config.index.sidebar_component
+#
+class Scihist::BlacklightSearchSidebarComponent < ApplicationComponent
+  ORIGINAL_COMPONENT_CLASS = Blacklight::Search::SidebarComponent
+
+
+  def initialize(**kwargs)
+    @original_initialize_kwargs = kwargs
+    super
+  end
+
+  def render_original_sidebar
+    helpers.render ORIGINAL_COMPONENT_CLASS.new(**@original_initialize_kwargs)
+  end
+end

app/components/scihist_masthead.html.erb

@@ -49,7 +49,7 @@
                 <div class="header__right-side">
                     <div class="header__menu-container">
                         <button class="header__nav-sandwich js-header-sandwich-btn" aria-expanded="false" aria-label="Menu"><span>X</span></button>
-                        <nav class="header__nav flex fwrap">
+                        <nav class="header__nav flex fwrap" aria-label="Site Top Navigation">
                             <button class="header__nav-close js-shi-nav-close" aria-label="Close menu">
                                 <svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                     <path d="M1 1L18.0022 17.1909M18.0022 1L1 17.1909" stroke="black" stroke-width="2"></path>

app/controllers/catalog_controller.rb

@@ -155,6 +155,9 @@ def active_sort_fields
     # We overide to use custom sub-class for Solr HTTP retries
     config.repository_class = Scihist::BlacklightSolrRepository
 
+    # We need to tell Blacklight we use bootstrap 5, this might be default
+    # anyway not sure.
+    config.bootstrap_version = 5
 
     ## Class for converting Blacklight's url parameters to into request parameters for the search index
     # config.search_builder_class = ::SearchBuilder
@@ -462,6 +465,7 @@ def active_sort_fields
 
 
     config.index.constraints_component = Scihist::BlacklightConstraintsComponent
+    config.index.sidebar_component     = Scihist::BlacklightSearchSidebarComponent
   end
 
   # Some bad actors sometimes send query params that Blacklight doesn't expect and

app/frontend/javascript/blacklight_setup.js

@@ -1,35 +1,60 @@
-// The Blacklight docs at
-//    https://github.com/projectblacklight/blacklight/wiki/Using-Webpacker-to-compile-javascript-assets#installing-webpacker-in-blacklight
-//
-// Suggest importing ALL of BL JS with:
-//
-//      import 'blacklight-frontend/app/javascripts/blacklight/blacklight'
-//
-// BUT we instead take a picking-and-choosing approach to import only
-// the BL JS we want.  This is mainluy to *avoid* importing `typeahead`,
-// which at least in BL 7.x is a LOT of code (it brings in some big dependencies)
-//
-// It's possible we're still including other JS we don't actually use; on the other
-// side, future versions of BL may include JS that we want but don't automatically
-// get included without us realizing and editing here.
-//
-// While this picking-and-choosing apporach is not documented, other BL
-// apps in the wild do it, eg:
-//
-//   * https://github.com/psu-libraries/psulib_blacklight/blob/451a8ab9e64eaed8b0000bda0300a4f28097f165/app/javascript/psulib_blacklight/index.js
-//   * https://github.com/unt-libraries/discover/blob/3c02d22bda7ec3f9e1d2f71a49c3b7e662ef8758/app/webpacker/packs/base.js.erb
+// Import all blacklight javascript, in BL 8 via a rollup derived combo file
+// While not doc'd very well, this seems to be [the/a] way to import all blacklight Javascript.
+
+import Blacklight from 'blacklight-frontend';
+
+
+// We USED to be able to pick-and-choose just the ones we need -- we don't actually need all of them, because
+// we don't use all BL parts.
 //
-// From all sub-parts at Blacklight 7.31.0
+// As of Blacklight 8, that is not seem possible anymore, but will be again in 9
 //
+// https://github.com/projectblacklight/blacklight/issues/3050
+// We used to import only:
 
-import 'blacklight-frontend/app/javascript/blacklight/core';
-// import 'blacklight-frontend/app/javascript/blacklight/bookmark_toggle';
-// import 'blacklight-frontend/app/javascript/blacklight/button_focus';
-// import 'blacklight-frontend/app/javascript/blacklight/checkbox_submit';
-import 'blacklight-frontend/app/javascript/blacklight/facet_load';
-import 'blacklight-frontend/app/javascript/blacklight/modal';
-//import 'blacklight-frontend/app/javascript/blacklight/search_context';
+// import 'blacklight-frontend/app/javascript/blacklight/core';
+//       // import 'blacklight-frontend/app/javascript/blacklight/bookmark_toggle';
+//       // import 'blacklight-frontend/app/javascript/blacklight/button_focus';
+//       // import 'blacklight-frontend/app/javascript/blacklight/checkbox_submit';
+// import 'blacklight-frontend/app/javascript/blacklight/facet_load';
+// import 'blacklight-frontend/app/javascript/blacklight/modal';
+//       //import 'blacklight-frontend/app/javascript/blacklight/search_context';
 
 
 import BlacklightRangeLimit from "blacklight-range-limit";
 BlacklightRangeLimit.init({onLoadHandler: Blacklight.onLoad });
+
+
+// Patch in some blacklight modal fixes
+
+if (Blacklight.Modal.target()) {
+
+  // Disable scrollbar on body when modal is open
+  // https://github.com/projectblacklight/blacklight/pull
+
+  Blacklight.Modal.target().addEventListener("show.blacklight.blacklight-modal", (event) => {
+    // Turn off body scrolling
+    Blacklight.Modal.originalBodyOverflow = document.body.style['overflow'];
+    Blacklight.Modal.originalBodyPaddingRight = document.body.style['padding-right'];
+    document.body.style["overflow"] = "hidden"
+    document.body.style["padding-right"] = "0px"
+  });
+
+  Blacklight.Modal.target().addEventListener("hide.blacklight.blacklight-modal", (event) => {
+    // Turn body scrolling back to what it was
+    document.body.style["overflow"] = Blacklight.Modal.originalBodyOverflow;
+    document.body.style["padding-right"] = Blacklight.Modal.originalBodyPaddingRight;
+    Blacklight.Modal.originalBodyOverflow = undefined;
+    Blacklight.Modal.originalBodyPaddingRight = undefined;
+  });
+
+
+  // Make click on background overlay close modal
+
+  Blacklight.Modal.target().addEventListener("click", (event) => {
+    if (event.target.matches(Blacklight.Modal.modalSelector)) {
+      Blacklight.Modal.hide();
+    }
+  });
+}
+

app/frontend/stylesheets/_mixins.scss

@@ -34,13 +34,13 @@
 
   // perceived margins are done with padding, on small
   // screens fairly tight.
-  padding-left: 15px;
-  padding-right: 15px;
+  padding-left: $grid-gutter-width * 0.5;
+  padding-right: $grid-gutter-width * 0.5;
 
   @include media-breakpoint-up($layout-expand-up) {
     // large screen, bigger margins
-    padding-left: 30px;
-    padding-right: 30px;
+    padding-left: $grid-gutter-width;
+    padding-right: $grid-gutter-width;
   }
 }
 

app/frontend/stylesheets/_variables.scss

@@ -190,6 +190,12 @@ $grid-gutter-width: 2rem;
 $badge-padding-x: 0.4em;
 $badge-padding-y: 0.25em;
 
+// Make match bootstrap 4, cause that's what we designed for
+$table-cell-padding-x: .75rem;
+$table-cell-padding-y: .75rem;
+
+$dropdown-item-padding-x: 1.5rem;
+
 // Restore bootstrap 4 links not underlined by default. Yes underline by default is
 // better, but we designed CSS based on this default, easier to do this.
 $link-decoration: none;

app/frontend/stylesheets/local/admin/admin.scss

@@ -24,3 +24,7 @@ dl.admin-metadata {
     display: inline;
   }
 }
+
+.admin-content {
+  max-width: 88rem;
+}

app/frontend/stylesheets/local/admin/edit.scss

@@ -33,6 +33,11 @@
     @extend .mb-2;
   }
 
+  // Weird workaround can't get bootstrap templates to do form-select all the time.
+  .form-control.select {
+    @extend .form-select;
+  }
+
   // Give em a red bar alongside for visibility. Only top-level.
   .form-inputs > .form-group-invalid,
   .oral-history-biography > .form-group.form-group-invalid,

app/frontend/stylesheets/local/admin/member_list.scss

@@ -1,6 +1,4 @@
 table.admin-list {
-  max-width: 1400px;
-
   .thumbnail {
     width: 120px;
   }

app/frontend/stylesheets/local/attribute_table.scss

@@ -96,4 +96,8 @@ $attribute-table-max-tabular: 22.5em;
   margin-bottom: 1px;
   // 0 padding on left to line up with table negative margin
   padding: $table-cell-padding-y-sm $table-cell-padding-x-sm $table-cell-padding-y-sm 0;
+
+  .text-muted {
+    font-weight: 400;
+  }
 }