OH requests go in modal dialog

app/components/work_file_list_show_component.html.erb

@@ -50,7 +50,10 @@
           <div class="text-nowrap mt-4 mb-3 text-center">
             <%= link_to request_button_name,
               oral_history_request_form_path(@work.friendlier_id),
-              class: "btn btn-brand-main mb-2"
+              class: "btn btn-brand-main mb-2",
+              data: {
+                blacklight_modal: "trigger"
+              }
             %>
           </div>
 

app/controllers/oral_history_requests_controller.rb

@@ -84,7 +84,11 @@ def new
     if current_oral_history_requester &&
           OralHistoryRequest.where(work: @work, oral_history_requester: current_oral_history_requester).exists?
 
-        redirect_to oral_history_requests_path, flash: { success: "You have already requested this Oral History: #{@work.title}" }
+        return_status(
+          oral_history_requests_path,
+          "You have already requested this Oral History: #{@work.title}",
+          add_view_requests_link: true
+        )
 
         return # abort further processing
     end
@@ -121,22 +125,56 @@ def create
       OralHistoryDeliveryMailer.with(request: @oral_history_request).approved_with_session_link_email.deliver_later
 
       if current_oral_history_requester.present? && current_oral_history_requester.email == @oral_history_request.requester_email
-        redirect_to oral_history_requests_path, flash: { success: "The files you requested from '#{@work.title}' are immediately available." }
+        return_status(oral_history_requests_path,
+          "The files you requested from '#{@work.title}' are immediately available and can be viewed now",
+          add_view_requests_link: true
+        )
       else
-        redirect_to work_path(@work.friendlier_id), flash: { success: "The files you have requested are immediately available. We've sent an email to #{patron_email_param} with a sign-in link." }
+        return_status(
+          work_path(@work.friendlier_id),
+          "The files you have requested are immediately available. We've sent an email to #{patron_email_param} with a sign-in link."
+        )
       end
     else # manual review
       OralHistoryRequestNotificationMailer.
         with(request: @oral_history_request).
         notification_email.
         deliver_later
 
-      redirect_to work_path(@work.friendlier_id), flash: { success: "Thank you for your interest. Your request will be reviewed, usually within 3 business days, and we'll email you at #{@oral_history_request.requester_email}" }
+      return_status(
+        work_path(@work.friendlier_id),
+        "Thank you for your interest. Your request will be reviewed, usually within 3 business days, and we'll email you at #{@oral_history_request.requester_email}"
+      )
     end
   end
 
 private
 
+  # display a message in a redirect with flash, or an inline HTML fragment for JS placement in modal,
+  # depending on request type
+  #
+  # @param return_dest argument to redirect_to if we are redirecting
+  # @param message [String] message for flash message and/or modal
+  # @param alert_type [String] flash type and `alert_$$` class for alert
+  # @param add_view_requests_link [Boolean] if true, then in modal we'll add a link to View your requests.
+  def return_status(redirect_dest, message, alert_type: "success", add_view_requests_link: false)
+    if request.xhr?
+      if add_view_requests_link
+        message = <<~EOS.html_safe
+          <p>#{ERB::Util.html_escape message}</p>
+          <p>
+            <i class="fa fa-external-link" aria-hidden="true"></i>
+            <a href="#{oral_history_requests_path}" target="_blank">View your requests here</a>
+          </p>
+        EOS
+      end
+
+      render partial: "alert", layout: false, locals: { alert_type: "success", message: message }
+    else
+      redirect_to redirect_dest, flash: { alert_type => message }
+    end
+  end
+
   # load @work, and create a new @oral_history_request
   #
   # Depending on config, we may abort if request already exists. As a before_action,
@@ -154,10 +192,17 @@ def setup_create_request
       # If they are already authenticated, we can just direct them there,
       # otherwise we send them a sign-in link
       if current_oral_history_requester.present? && current_oral_history_requester.email == requester_email.email
-        redirect_to oral_history_requests_path, flash: { success: "You have already requested this Oral History: #{@work.title}" }
+        return_status(
+          oral_history_requests_path,
+          "You have already requested this Oral History: #{@work.title}",
+          add_view_requests_link: true
+        )
       else
         OhSessionMailer.with(requester_email: requester_email).link_email.deliver_later
-        redirect_to work_path(@work.friendlier_id), flash: { success: "You have already requested this Oral History. We've sent another email to #{patron_email_param} with a sign-in link, which you can use to view your requests.", }
+        return_status(
+          work_path(@work.friendlier_id),
+          "You have already requested this Oral History. We've sent another email to #{patron_email_param} with a sign-in link, which you can use to view your requests."
+        )
       end
 
       return false # abort further processing

app/frontend/javascript/blacklight_setup.js

@@ -1,24 +1,63 @@
-// 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.
 
+// If we wanted to, we could pick and choose which elements to import in the standard JS way,
+// which can work, but BL isn't tested very well for it. We'll just import all of BL for now.
 import Blacklight from 'blacklight-frontend';
 
+//****************
+//
+// Customize Blacklight modal to add support for form submission in modal
+// offered upstream at https://github.com/projectblacklight/blacklight/pull/3772
+//
+// Note we do still CALL upstream func here, so changes upstream can break this patch.
+// We should test locally for sure.
+
+
+const modal = Blacklight.Modal;
+
+modal.triggerformSelector  = 'form[data-blacklight-modal~=trigger]';
+modal.preserveFormSelector = modal.modalSelector + ' form[data-blacklight-modal~=preserve]';
+
+
+modal.modalAjaxFormSubmit = function(e) {
+  e.preventDefault();
+
+  const closest = e.target.closest(`${modal.triggerFormSelector}, ${modal.preserveFormSelector}`);
+
+  const method = (closest.getAttribute("method") || "GET").toUpperCase();
+  const formData = new FormData(closest);
+  const formAction = closest.getAttribute('action');
+
+  const href = (method == "GET") ? `${ formAction }?${ new URLSearchParams(formData).toString() }` : formAction;
+  const fetchArgs = {
+    headers: { 'X-Requested-With': 'XMLHttpRequest' }
+  }
+
+  if (method != "GET") {
+    fetchArgs.body = formData;
+    fetchArgs.method = method;
+  }
+
+  fetch(href, fetchArgs)
+    .then(response => {
+       if (!response.ok) {
+         throw new TypeError("Request failed");
+       }
+       return response.text();
+     })
+    .then(data => modal.receiveAjax(data))
+    .catch(error => modal.onFailure(error));
+}
+
+document.addEventListener('submit', (e) => {
+  if (e.target.closest(`${modal.triggerFormSelector}, ${modal.preserveFormSelector}`)) {
+    modal.modalAjaxFormSubmit(e)
+  }
+});
 
-// 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.
 //
-// As of Blacklight 8, that is not seem possible anymore, but will be again in 9
+// End customize Blacklight modal for forms
 //
-// 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 BlacklightRangeLimit from "blacklight-range-limit";

app/frontend/stylesheets/local/site_wide.scss

@@ -352,3 +352,8 @@ hr.brand {
     opacity: 0.7;
   }
 }
+
+// override bootstrap a bit for modals with embedded alert coloring
+.modal-body.alert {
+  margin-bottom: 0;
+}

app/views/oral_history_requests/_alert.html.erb

@@ -0,0 +1,23 @@
+<%# used for sending back html fragment for JS replacement in modal %>
+<%# locals: (message:, alert_type: "success") %>
+
+
+<%= render Blacklight::System::ModalComponent.new do |component| %>
+  <% component.with_title do %>
+    <% if @work.oral_history_content.available_by_request_manual_review? %>
+        Request Oral History Access
+      <% else %>
+        Get Oral History Access
+      <% end %>
+  <% end %>
+
+  <% component.with_body do %>
+    <div class="modal-body alert alert-<%= alert_type %>" role="alert">
+      <%= message %>
+    </div>
+  <% end %>
+
+  <% component.with_footer do %>
+    <%= button_tag "OK", class: "btn btn-primary btn-brand-main", data: { bl_dismiss: "modal" } %>
+  <% end %>
+<% end %>

app/views/oral_history_requests/_form.html.erb

@@ -1,8 +1,8 @@
-<%= simple_form_for @oral_history_request,  :url => :request_oral_history  do |f| %>
+<%= simple_form_for @oral_history_request, :url => :request_oral_history, html: { data: { blacklight_modal: "preserve" } }  do |f| %>
 
   <% remembered_form_values = oral_history_request_form_entry_read %>
 
-  <div class="mb-5 mt-4">
+  <div>
     <p>
       To receive files for "<%= @work.title %>" by email, please fill out the form below.
 
@@ -77,13 +77,13 @@
 
     <%= f.hidden_field :work_friendlier_id, value: @work.friendlier_id %>
 
-    <div class="form-actions mt-3">
-      <%= link_to "Cancel", work_path(@work.friendlier_id), class: "btn btn-brand-secondary me-3" %>
+    <div class="form-actions mt-3 d-flex justify-content-end">
+      <%= link_to "Cancel", work_path(@work.friendlier_id), class: "btn btn-brand-secondary me-3", data: { bl_dismiss: "modal" } %>
       <%= f.button :submit, value: "Submit request", class: "btn btn-brand-main" %>
     </div>
   </div>
 
-  <div class="alert alert-info mt-5 mb-5" role="alert">
+  <div class="alert alert-info mt-4" role="alert">
     <p>We consider your personal information confidential. We will only use it for our records, and we will not share it with anyone outside the Science History Institute.
     </p>
 

app/views/oral_history_requests/new.html.erb

@@ -1,8 +1,12 @@
-<h1 class="brand-alt-h1">
-  <% if @work.oral_history_content.available_by_request_manual_review? %>
-    Request Oral History Access
-  <% else %>
-    Get Oral History Access
+<%= render Blacklight::System::ModalComponent.new do |component| %>
+  <% component.with_title do %>
+    <% if @work.oral_history_content.available_by_request_manual_review? %>
+      Request Oral History Access
+    <% else %>
+      Get Oral History Access
+    <% end %>
   <% end %>
-</h1>
-<%= render 'form', oral_history_request: @oral_history_request %>
+
+  <%= render 'form', oral_history_request: @oral_history_request %>
+<% end %>
+

spec/system/oral_history_by_request_spec.rb

@@ -61,6 +61,9 @@
       expect(page).to have_text("Fill out a brief form to receive immediate access to these files.")
 
       click_on 'Get Access'
+
+      expect(page).to have_selector(".modal") # now in modal
+                                              #
       pr = '#oral_history_request_'
 
       all("#{pr}patron_name").first.fill_in  with: 'Joe Schmo'
@@ -69,7 +72,11 @@
       # leave out intended use, because not required for this request type, make sure it goes through
 
       expect(OralHistoryRequest.count).to eq 0
+
       click_on 'Submit request'
+
+
+      expect(page).to have_selector(".modal") # now in modal
       expect(page).to have_text("The files you have requested are immediately available")
       expect(OralHistoryRequest.count).to eq 1
 
@@ -113,6 +120,7 @@
       click_on 'Request Access'
       pr = '#oral_history_request_'
 
+      expect(page).to have_selector(".modal") # now in modal
       expect(page).to have_text("After your request is received, you will receive an email response, usually within 3 business days. ")
 
       all("#{pr}patron_name").first.fill_in  with: 'Joe Schmo'
@@ -122,6 +130,8 @@
 
       expect(OralHistoryRequest.count).to eq 0
       click_on 'Submit request'
+
+      expect(page).to have_selector(".modal") # now in modal
       expect(page).to have_text("Your request will be reviewed")
       expect(OralHistoryRequest.count).to eq 1
 
@@ -176,6 +186,8 @@
 
 
       click_on 'Submit request'
+
+      expect(page).to have_selector(".modal") # now in modal
       expect(page).to have_text "Thank you for your interest"
 
       # by saving and restoring from cookie, the form should be pre-filled