include searchtips modal (#2590)

* include searchtips modal

* moving view component test support to rails helper, using blacklight icon for info button, styling

* refactoring based on upstream spotlight refactoring, putting components in top level directory

* fixing rubocop errors

* updated spotlight release

* updates to placement of component

* update to new spotlight version

* updating exhibitnavbar component configuration in catalog controller

* removing blacklight icon style

Gemfile.lock

@@ -122,14 +122,13 @@ GEM
       blacklight (>= 7.25, < 9)
       rails
       ruby-oembed
-    blacklight-spotlight (4.1.2)
+    blacklight-spotlight (4.2.0)
       activejob-status
       acts-as-taggable-on (>= 5.0, < 12)
       autoprefixer-rails
       blacklight (>= 7.19, < 9)
       blacklight-gallery (>= 3.0, < 5)
       bootstrap_form (>= 4.1, < 6)
-      breadcrumbs_on_rails (>= 3.0, < 5)
       cancancan
       carrierwave (~> 2.2)
       clipboard-rails (~> 1.5)
@@ -180,8 +179,6 @@ GEM
     bootstrap_form (4.5.0)
       actionpack (>= 5.2)
       activemodel (>= 5.2)
-    breadcrumbs_on_rails (4.1.0)
-      railties (>= 5.0)
     builder (3.3.0)
     bundler-audit (0.9.2)
       bundler (>= 1.2.0, < 3)
@@ -390,22 +387,22 @@ GEM
       multi_json (~> 1.11)
       os (>= 0.9, < 2.0)
       signet (>= 0.16, < 2.a)
-    grpc (1.66.0)
+    grpc (1.67.0)
       google-protobuf (>= 3.25, < 5.0)
       googleapis-common-protos-types (~> 1.0)
-    grpc (1.66.0-aarch64-linux)
+    grpc (1.67.0-aarch64-linux)
       google-protobuf (>= 3.25, < 5.0)
       googleapis-common-protos-types (~> 1.0)
-    grpc (1.66.0-arm64-darwin)
+    grpc (1.67.0-arm64-darwin)
       google-protobuf (>= 3.25, < 5.0)
       googleapis-common-protos-types (~> 1.0)
-    grpc (1.66.0-x86-linux)
+    grpc (1.67.0-x86-linux)
       google-protobuf (>= 3.25, < 5.0)
       googleapis-common-protos-types (~> 1.0)
-    grpc (1.66.0-x86_64-darwin)
+    grpc (1.67.0-x86_64-darwin)
       google-protobuf (>= 3.25, < 5.0)
       googleapis-common-protos-types (~> 1.0)
-    grpc (1.66.0-x86_64-linux)
+    grpc (1.67.0-x86_64-linux)
       google-protobuf (>= 3.25, < 5.0)
       googleapis-common-protos-types (~> 1.0)
     hashdiff (1.1.1)
@@ -442,7 +439,8 @@ GEM
     irb (1.14.1)
       rdoc (>= 4.0.0)
       reline (>= 0.4.2)
-    iso-639 (0.3.6)
+    iso-639 (0.3.8)
+      csv
     jbuilder (2.13.0)
       actionview (>= 5.0.0)
       activesupport (>= 5.0.0)
@@ -571,7 +569,7 @@ GEM
       version_gem (~> 1.1)
     observer (0.1.2)
     okcomputer (1.18.5)
-    openseadragon (0.7.0)
+    openseadragon (0.8.0)
       rails (> 6.1.0)
     orm_adapter (0.5.0)
     os (1.1.4)
@@ -863,7 +861,7 @@ GEM
     uri (0.13.1)
     useragent (0.16.10)
     version_gem (1.1.4)
-    view_component (3.16.0)
+    view_component (3.17.0)
       activesupport (>= 5.2.0, < 8.0)
       concurrent-ruby (~> 1.0)
       method_source (~> 1.0)
@@ -895,6 +893,7 @@ PLATFORMS
   arm-linux
   arm-linux-gnu
   arm-linux-musl
+  arm64-darwin-21
   arm64-darwin-23
   x86-linux
   x86-linux-gnu

app/assets/stylesheets/modules/spotlight_overrides.scss

@@ -309,3 +309,9 @@ h5,
     z-index: 1;
   }
 }
+
+// Overrides for search tips link and info icon
+// Prevents capitalization of search tips link text when the masthead has an image background
+.image-masthead .searchtips-link {
+  text-transform: none !important;
+}

app/components/blacklight/icons/outline_info_component.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module Blacklight
+  module Icons
+    # Icon for outline info button
+    class OutlineInfoComponent < Spotlight::IconComponent
+      self.svg = <<~SVG
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16">
+          <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
+          <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0"/>
+        </svg>
+      SVG
+    end
+  end
+end

app/components/exhibit_navbar_component.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+# Overrides Spotlight ExhibitNavbarComponent and provides Search Tips link
+class ExhibitNavbarComponent < Spotlight::ExhibitNavbarComponent
+  def prepend_to_search_bar
+    render SearchTipsLinkComponent.new
+  end
+end

app/components/search_tips_component.html.erb

@@ -0,0 +1,22 @@
+<%= render Blacklight::System::ModalComponent.new do |component| %>
+  <% component.with_title do %>
+    <div><h2 class="modal-title"> <%= t('search_tips.title') %> </h2></div>
+    <div><h3> <%= t('search_tips.subtitle') %> </h3></div>
+  <% end %>
+  <% component.with_body do %>
+    <ul class="mt-3 pr-4 pb-2">
+      <li> Use quotation marks to search as a <span class="font-weight-bold">phrase</span>. (Word-stemming will still be applied to words within the phrase.) </li>
+      <li> Use "+" (no space) before a word to make it <span class="font-weight-bold">required</span>. </li>
+      <li> Use "-" (no space) before a word or phrase to <span class="font-weight-bold">exclude</span>. </li>
+      <li> Use "OR", "AND", and "NOT" (uppercase) to create <span class="font-weight-bold">Boolean</span> logic within a field. You can use parentheses in your complex expressions. </li>
+      <li> Use "*" to search a <span class="font-weight-bold">truncated</span> term. (Word-stemming is done automatically.) </li>
+      <li> Use "?" as a <span class="font-weight-bold">wildcard</span> to replace a character in a word. </li>
+      <li> <span class="font-weight-bold">Word-stemming</span> automatically includes plural and singular forms, and common suffix and tense variations. </li>
+    </ul>
+  <% end %>
+  <% component.with_footer do %>
+    <button type="button" class="btn btn-outline-primary" data-bs-dismiss="modal" data-dismiss="modal">
+      <span aria-hidden="true" class="visually-hidden"><%= t('search_tips.close') %> </span>
+    </button>
+  <% end %>
+<% end %>

app/components/search_tips_component.rb

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+class SearchTipsComponent < ViewComponent::Base
+end

app/components/search_tips_link_component.html.erb

@@ -0,0 +1,4 @@
+<div class="navbar-nav searchtips-link">
+  <a class="nav-link" data-blacklight-modal="trigger" href="/search_tips">
+  <%= blacklight_icon('outline_info', classes: 'mr-1 pt-0 d-inline-block') %><%= t('search_tips.title') %></a>
+</div>

app/components/search_tips_link_component.rb

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+class SearchTipsLinkComponent < ViewComponent::Base
+end

app/controllers/catalog_controller.rb

@@ -35,6 +35,7 @@ class CatalogController < ApplicationController
   configure_blacklight do |config|
     config.http_method = :post
     config.header_component = Spotlight::HeaderComponent
+    config.exhibit_navbar_component = ExhibitNavbarComponent
     config.index.default_thumbnail = :exhibits_default_thumbnail
 
     config.document_solr_request_handler = 'document'
@@ -457,6 +458,16 @@ def admin
     raise NotImplementedError
   end
 
+  # Method to route search tips
+  def search_tips
+    respond_to do |format|
+      format.html do
+        return render layout: false if request.xhr?
+        # Otherwise draw the full page
+      end
+    end
+  end
+
   class << self
     def document_has_full_text_and_search_is_query?(context, _config, document)
       context.params[:q].present? && document.full_text?

app/views/catalog/search_tips.html.erb

@@ -0,0 +1 @@
+<%= render SearchTipsComponent.new %>

config/locales/en.yml

@@ -147,3 +147,7 @@ en:
     update:
       notice: The viewer settings have been updated.
       error: There was a problem updating the viewer settings.
+  search_tips: 
+    title: 'Search tips'
+    subtitle: 'Refine your search'
+    close: 'Close'

config/routes.rb

@@ -41,6 +41,8 @@
       end
     end
 
+    get '/search_tips' => 'catalog#search_tips'
+
     resources :solr_documents, only: [:show], path: '/catalog', controller: 'catalog'
     resource :catalog, only: [:index], as: 'catalog', path: '/catalog', controller: 'catalog' do
       concerns :searchable

spec/components/search_tips_component_spec.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+require 'rails_helper'
+
+RSpec.describe SearchTipsComponent, type: :component do
+  subject(:rendered) { Capybara::Node::Simple.new(render_inline(described_class.new)) }
+
+  it 'displays a title with a subheading' do
+    expect(rendered).to have_selector('h2.modal-title'), text: 'Search tips'
+    expect(rendered).to have_selector('h3'), text: 'Refine your search'
+  end
+
+  it 'includes search tips text' do
+    expect(rendered).to have_selector('ul.mt-3 li', count: 7)
+    expect(rendered).to have_content('Use quotation marks to search')
+  end
+
+  it 'includes a close button' do
+    expect(rendered).to have_selector('button.btn-outline-primary span'), text: 'Close'
+  end
+end

spec/components/search_tips_link_component_spec.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+require 'rails_helper'
+
+RSpec.describe SearchTipsLinkComponent, type: :component do
+  subject(:rendered) { Capybara::Node::Simple.new(render_inline(described_class.new)) }
+
+  it 'displays seearch tips links' do
+    expect(rendered).to have_link('Search tips'), href: '/search_tips'
+  end
+
+  it 'displays info icon' do
+    expect(rendered).to have_selector('div.searchtips-link span svg.bi-info-circle')
+  end
+end

spec/rails_helper.rb

@@ -6,6 +6,8 @@
 require File.expand_path('../config/environment', __dir__)
 require 'rspec/rails'
 require 'factory_bot_rails'
+require 'view_component/test_helpers'
+require 'view_component/system_test_helpers'
 
 require 'selenium-webdriver'
 
@@ -92,4 +94,5 @@
   config.include Devise::Test::ControllerHelpers, type: :controller
   config.extend ControllerMacros, type: :controller
   config.include ViewComponent::TestHelpers, type: :component
+  config.include ViewComponent::SystemTestHelpers, type: :component
 end