Extract SaveSearchComponent

This will enable downstream apps to easily set the css classes on the button

app/components/spotlight/save_search_component.html.erb

@@ -0,0 +1,25 @@
+<%= button %>
+<div class="modal fade" id="save-modal" tabindex="-1" role="dialog" aria-labelledby="save-modal-label" aria-hidden="true">
+  <div class="modal-dialog">
+  <%= bootstrap_form_for form_path, html: { novalidate: true } do |f| %>
+    <div class="modal-content">
+      <div class="modal-header">
+        <h4 class="modal-title" id="save-modal-label"><%= t(:'spotlight.saved_search.label') %></h4>
+        <button type="button" class="blacklight-modal-close close btn-close" data-dismiss="modal" data-bs-dismiss="modal" aria-label="<%= t('blacklight.modal.close') %>">
+          <span aria-hidden="true" class="visually-hidden">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <%= f.text_field :title, label: t(:'spotlight.saved_search.title') %>
+        <%= label_tag :id, t(:'spotlight.saved_search.id'), class: 'col-form-label' %>
+        <%= select_tag :id, options_for_select(searches.map { |s| [s.full_title, s.id] }), include_blank: true, class: 'form-control' %>
+        <%= render Blacklight::HiddenSearchStateComponent.new(params: search_state.params_for_search.except(:qt, :page)) %>
+      </div>
+      <div class="modal-footer d-flex flex-row-reverse justify-content-start">
+        <%= f.submit nil, class: 'btn btn-primary' %>
+        <button type="button" class="btn btn-link" data-dismiss="modal" data-bs-dismiss="modal"><%= t :cancel %></button>
+      </div>
+    </div>
+    <% end %>
+  </div>
+</div>

app/components/spotlight/save_search_component.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module Spotlight
+  # Displays the "Save this search" button and modal
+  class SaveSearchComponent < ViewComponent::Base
+    def initialize(button_classes: 'btn btn-secondary')
+      @button_classes = button_classes
+      super
+    end
+
+    attr_reader :button_classes
+
+    delegate :search_state, :current_exhibit, to: :helpers
+    delegate :searches, to: :current_exhibit
+
+    def button
+      button_tag t(:'spotlight.saved_search.label'), id: 'save-this-search', class: button_classes,
+                                                     data: { toggle: 'modal', 'bs-toggle': 'modal', target: '#save-modal', 'bs-target': '#save-modal' }
+    end
+
+    def form_path
+      [helpers.spotlight, current_exhibit, Spotlight::Search.new]
+    end
+  end
+end

app/views/catalog/_save_search.html.erb

@@ -1,25 +1 @@
-<%= button_tag t(:'spotlight.saved_search.label'), id: "save-this-search", class: 'btn btn-secondary',  data: { toggle: "modal", "bs-toggle": "modal", target: "#save-modal", "bs-target": "#save-modal" } %>
-<div class="modal fade" id="save-modal" tabindex="-1" role="dialog" aria-labelledby="save-modal-label" aria-hidden="true">
-  <div class="modal-dialog">
-  <%= bootstrap_form_for [spotlight, current_exhibit, Spotlight::Search.new], html: { novalidate: true } do |f| %>
-    <div class="modal-content">
-      <div class="modal-header">
-        <h4 class="modal-title" id="save-modal-label"><%= t(:'spotlight.saved_search.label') %></h4>
-        <button type="button" class="blacklight-modal-close close btn-close" data-dismiss="modal" data-bs-dismiss="modal" aria-label="<%= t('blacklight.modal.close') %>">
-          <span aria-hidden="true" class="visually-hidden">&times;</span>
-        </button>
-      </div>
-      <div class="modal-body">
-        <%= f.text_field :title, label: t(:'spotlight.saved_search.title') %>
-        <%= label_tag :id, t(:'spotlight.saved_search.id'), class: 'col-form-label' %>
-        <%= select_tag :id, options_for_select(current_exhibit.searches.map { |s| [s.full_title, s.id] }), include_blank: true, class: 'form-control' %>
-        <%= render Blacklight::HiddenSearchStateComponent.new(params: search_state.params_for_search.except(:qt, :page)) %>
-      </div>
-      <div class="modal-footer d-flex flex-row-reverse justify-content-start">
-        <%= f.submit nil, class: 'btn btn-primary' %>
-        <button type="button" class="btn btn-link" data-dismiss="modal" data-bs-dismiss="modal"><%= t :cancel %></button>
-      </div>
-    </div>
-    <% end %>
-  </div>
-</div>
+<%= render Spotlight::SaveSearchComponent.new %>