Allow individual fields to configure their own display component (#3808)

* Allow individual fields to configure their own display component

The use case: for certain long fields, we would like to have a
different layout that includes a "Show more"/"Show less" toggle.

This allows us to add the following to our catalog controller:

```
config.add_show_field 'contents_display', label: 'Contents', layout_component: DisplayMoreFieldLayoutComponent
```

* Add documentation for layout_component option

Author: sandbergja

app/components/blacklight/metadata_field_component.rb

@@ -9,7 +9,7 @@ class MetadataFieldComponent < Blacklight::Component
     # @param show [Boolean] are we showing only a single document (vs a list of search results); used for backwards-compatibility
     def initialize(field:, layout: nil, show: false, view_type: nil)
       @field = field
-      @layout = layout || Blacklight::MetadataFieldLayoutComponent
+      @layout = layout || field.layout_component || Blacklight::MetadataFieldLayoutComponent
       @view_type = view_type
       @show = show
     end

app/presenters/blacklight/field_presenter.rb

@@ -31,7 +31,7 @@ def initialize(view_context, document, field_config, options = {})
 
     attr_reader :view_context, :document, :field_config, :except_operations, :options
 
-    delegate :key, :component, to: :field_config
+    delegate :key, :component, :layout_component, to: :field_config
 
     # @return [Array<String>]
     def render

lib/blacklight/configuration/display_field.rb

@@ -35,6 +35,7 @@ def initialize(*args, **kwargs, &)
     #   @return [Blacklight::FieldPresenter]
     # @!attribute component
     #   @return [Blacklight::MetadataFieldComponent]
+    # @!attribute layout_component
 
     ##
     # Default rendering pipeline:

lib/generators/blacklight/templates/catalog_controller.rb

@@ -164,6 +164,14 @@ class <%= controller_name.classify %>Controller < ApplicationController
 
     # solr fields to be displayed in the show (single result) view
     #   The ordering of the field names is the order of the display
+    #   You can configure some components related to the show field:
+    #     - component: should have a similar API to
+    #       Blacklight::MetadataFieldComponent, and describes how
+    #       the values should be displayed
+    #     - layout_component: should have a similar API to
+    #       Blacklight::MetadataFieldLayoutComponent, and describes
+    #       how the overall layout of the field (both label and
+    #       values) should be displayed
     config.add_show_field 'title_tsim', label: 'Title'
     config.add_show_field 'title_vern_ssim', label: 'Title'
     config.add_show_field 'subtitle_tsim', label: 'Subtitle'

spec/components/blacklight/metadata_field_component_spec.rb

@@ -2,6 +2,14 @@
 
 require 'spec_helper'
 
+class CustomLayoutComponent < ViewComponent::Base
+  def initialize(field:); end
+
+  def call
+    'Hello from the custom layout component!'
+  end
+end
+
 RSpec.describe Blacklight::MetadataFieldComponent, type: :component do
   let(:view_context) { vc_test_controller.view_context }
   let(:document) { SolrDocument.new('field' => ['Value']) }
@@ -35,5 +43,23 @@
     it 'renders the right field label' do
       expect(page).to have_css 'dt.blacklight-field', text: 'custom label'
     end
+
+    context 'with a custom layout component specified in the field config' do
+      let(:field_config) { Blacklight::Configuration::Field.new(layout_component: CustomLayoutComponent, key: 'field', field: 'field', label: 'Field label') }
+
+      it 'displays the custom layout component' do
+        expect(page.text).to include 'Hello from the custom layout component!'
+      end
+    end
+  end
+
+  context 'with a custom layout component passed in through args' do
+    before do
+      render_inline(described_class.new(field: field, layout: CustomLayoutComponent))
+    end
+
+    it 'displays the custom layout component' do
+      expect(page.text).to include 'Hello from the custom layout component!'
+    end
   end
 end