Merge pull request #184 from sul-dlss/destroyable-related-links#183

app/components/elements/button_component.rb

@@ -3,7 +3,7 @@
 module Elements
   # Generic button component
   class ButtonComponent < ViewComponent::Base
-    def initialize(label:, classes: [], variant: nil, size: nil, **options)
+    def initialize(label: nil, classes: [], variant: nil, size: nil, **options)
       @label = label
       @classes = classes
       @variant = variant
@@ -20,7 +20,7 @@ def call
         type: 'button',
         **options
       ) do
-        label
+        label || content
       end
     end
   end

app/components/elements/forms/nested_component.html.erb

@@ -1,18 +1,32 @@
-<fieldset class="my-3" data-controller="nested-form">
+<fieldset class="my-3" data-controller="nested-form" data-nested-form-selector-value=".row">
   <legend class="h5">
     <%= header_label %>
   </legend>
-  <%= tag.div(class: 'mb-3', data: { nested_form_target: 'container' }) do %>
+  <%= tag.div(class: 'mb-3 container', data: { nested_form_target: 'container' }) do %>
     <template data-nested-form-target="template">
       <%= form.fields_for field_name, model_class.new, child_index: 'NEW_RECORD' do |nested_form| %>
-        <%= tag.div(class: 'mb-3 p-3 border border-3 border-light-subtle border-opacity-75', data: { index: nested_form.options[:child_index], nested_form_target: 'instance' }) do %>
-          <%= render form_component.new(form: nested_form) %>
+        <%= tag.div(class: 'mb-3 p-3 border border-3 border-light-subtle border-opacity-75 row', data: { index: nested_form.options[:child_index], nested_form_target: 'instance' }) do %>
+          <div class="col">
+            <%= render form_component.new(form: nested_form) %>
+          </div>
+          <div class="col-md-auto">
+            <%= render Elements::ButtonComponent.new(classes: 'border border-0 float-end', size: :lg, data: { action: 'click->nested-form#delete' }) do %>
+              <i class="bi bi-trash"></i>
+            <% end %>
+          </div>
         <% end %>
       <% end %>
     </template>
     <%= form.fields_for field_name do |nested_form| %>
-      <%= tag.div(class: 'mb-3 p-3 border border-3 border-light-subtle border-opacity-75', data: { index: nested_form.options[:child_index], nested_form_target: 'instance' }) do %>
-        <%= render form_component.new(form: nested_form) %>
+      <%= tag.div(class: 'mb-3 p-3 border border-3 border-light-subtle border-opacity-75 row', data: { index: nested_form.options[:child_index], nested_form_target: 'instance' }) do %>
+        <div class="col">
+          <%= render form_component.new(form: nested_form) %>
+        </div>
+        <div class="col-md-auto">
+          <%= render Elements::ButtonComponent.new(classes: 'border border-0 float-end', size: :lg, data: { action: 'click->nested-form#delete' }) do %>
+            <%= helpers.delete_icon %>
+          <% end %>
+        </div>
       <% end %>
     <% end %>
   <% end %>

app/components/related_links/edit_component.html.erb

@@ -1,2 +1,2 @@
-<%= render Elements::Forms::TextFieldComponent.new(field_name: :text, label: I18n.t('works.edit.fields.related_links.text.label'), form:) %>
-<%= render Elements::Forms::TextFieldComponent.new(field_name: :url, label: I18n.t('works.edit.fields.related_links.url.label'), form:) %>
+<%= render Elements::Forms::TextFieldComponent.new(field_name: :text, label: I18n.t('related_links.edit.fields.text.label'), form:) %>
+<%= render Elements::Forms::TextFieldComponent.new(field_name: :url, label: I18n.t('related_links.edit.fields.url.label'), form:) %>

app/javascript/controllers/nested_form_controller.js

@@ -2,6 +2,7 @@ import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
   static targets = ["container", "instance", "template"]
+  static values = { selector: String }
 
   add(event) {
     event.preventDefault()
@@ -12,6 +13,12 @@ export default class extends Controller {
     )
   }
 
+  delete(event) {
+    event.preventDefault()
+
+    event.target.closest(this.selectorValue).remove()
+  }
+
   get maxIndex() {
     return Math.max(-1, ...this.instanceTargets.map((instance) => parseInt(instance.dataset.index)))
   }

config/locales/en.yml

@@ -30,6 +30,13 @@
 en:
   errors:
     not_authorized: 'You are not authorized to perform the requested action.'
+  related_links:
+    edit:
+      fields:
+        url:
+          label: 'URL'
+        text:
+          label: 'Link text'
   works:
     edit:
       fields:
@@ -38,13 +45,6 @@ en:
           help_text: >
             Enter a summary statement (max 600 words) describing the work that you are depositing.
             A detailed statement may improve the discovery of your work in web searches.
-        related_content:
-          label: 'Related content'
-        related_links:
-          url:
-            label: 'URL'
-          text:
-            label: 'Link text'
         title:
           label: 'Title of deposit'
           help_text: >
@@ -74,4 +74,3 @@ en:
         title:
           tab_label: 'Title'
           label: 'Title of deposit'
-

lib/active_model/nested_attributes.rb

@@ -12,7 +12,8 @@ module NestedAttributes
 
     class_methods do
       # NOTE: Options have NOT yet been implemented! (e.g., `allow_destroy`)
-      def accepts_nested_attributes_for(*models, **_options)
+      def accepts_nested_attributes_for(*models, **options)
+        validate_options!(options)
         define_attribute_types_for(models)
         define_attributes_for(models)
         define_getters_for(models)
@@ -22,6 +23,11 @@ def accepts_nested_attributes_for(*models, **_options)
 
       private
 
+      def validate_options!(options)
+        opts = { allow_destroy: true }.merge(options)
+        opts.assert_valid_keys(:allow_destroy)
+      end
+
       def define_attribute_types_for(models) # rubocop:disable Metrics/AbcSize
         models.each do |model|
           next if const_defined?(model.to_s.classify.concat('Type'))

spec/system/edit_work_spec.rb

@@ -72,8 +72,16 @@
 
     # Filling in related content
     find('.nav-link', text: 'Related content (optional)').click
-    fill_in('Link text', with: updated_related_links.first['text'])
-    fill_in('URL', with: updated_related_links.first['url'])
+    fill_in('Link text', with: 'delete')
+    fill_in('URL', with: 'me')
+    # Test adding a new nested field
+    click_link_or_button('+ Add another related link')
+    fill_in('work_related_links_attributes_1_text', with: updated_related_links.first['text'])
+    fill_in('work_related_links_attributes_1_url', with: updated_related_links.first['url'])
+    # Test removing a nested field
+    within('div[data-index="0"]') do
+      find('button[data-action="click->nested-form#delete"]').click
+    end
 
     click_link_or_button('Save as draft')