UI: Edit Metadata Template

app/components/metadata_templates/table_component.html.erb

@@ -1,6 +1,7 @@
 <%= render Viral::BaseComponent.new(**wrapper_arguments) do %>
   <% unless @metadata_templates.empty? %>
     <table
+      id="metadata-templates-table"
       class="
         w-full text-sm text-left rtl:text-right text-slate-500 dark:text-slate-400
         whitespace-nowrap
@@ -53,7 +54,7 @@
                 classes: class_names('px-3 py-3', 'sticky left-0 bg-slate-50 dark:bg-slate-900': index.zero?)
               ) do %>
                 <% if column == :name %>
-                  <span class ="text-slate-900 dark:text-slate-100 font-semibold hover:underline">
+                  <span class="text-slate-900 dark:text-slate-100 font-semibold hover:underline">
                     <%= metadata_template.name %>
                   </span>
                 <% elsif column == :description %>
@@ -75,8 +76,10 @@
                 <% if @row_actions.key?(:update_metadata_templates) %>
                   <%= link_to(
                     t(:"metadata_templates.table_component.edit_button"),
-                    individual_path(metadata_template),
+                    edit_path(metadata_template),
                     data: {
+                      turbo_frame: "metadata_template_modal",
+                      turbo_stream: true,
                     },
                     aria: {
                       label:

app/components/metadata_templates/table_component.rb

@@ -38,6 +38,14 @@ def render_cell(**arguments, &)
       render(Viral::BaseComponent.new(**arguments), &)
     end
 
+    def edit_path(metadata_template)
+      if @namespace.group_namespace?
+        edit_group_metadata_template_path(@namespace, metadata_template)
+      else
+        edit_namespace_project_metadata_template_path(@namespace.parent, @namespace.project, metadata_template)
+      end
+    end
+
     def individual_path(metadata_template)
       if @namespace.group_namespace?
         group_metadata_template_path(@namespace, metadata_template)

app/controllers/concerns/metadata_template_actions.rb

@@ -7,6 +7,7 @@ module MetadataTemplateActions # rubocop:disable Metrics/ModuleLength
   included do
     before_action proc { namespace }
     before_action proc { metadata_template }, only: %i[destroy edit show update]
+    before_action proc { metadata_template_fields }, only: %i[edit update]
   end
 
   def index
@@ -79,7 +80,7 @@ def destroy
     end
   end
 
-  def update
+  def update # rubocop:disable Metrics/MethodLength
     @updated = MetadataTemplates::UpdateService.new(current_user, @metadata_template, metadata_template_params).execute
 
     respond_to do |format|
@@ -89,9 +90,14 @@ def update
                                 template_name: @metadata_template.name))
         end
       else
+        msg = if @metadata_template.errors.any?
+                @metadata_template.errors.full_messages.to_sentence
+              else
+                I18n.t('concerns.metadata_template_actions.update.error',
+                       template_name: @metadata_template.name)
+              end
         format.turbo_stream do
-          render_error(I18n.t('concerns.metadata_template_actions.update.error',
-                              template_name: @metadata_template.name))
+          render_error(msg)
         end
       end
     end
@@ -113,6 +119,15 @@ def metadata_template
     @metadata_template = MetadataTemplate.find_by(id: params[:id], namespace: @namespace)
   end
 
+  def metadata_template_fields
+    @current_template_fields = if params.key?(:metadata_template) && metadata_template_params.key?(:fields)
+                                 metadata_template_params[:fields].uniq
+                               else
+                                 @metadata_template.fields
+                               end
+    @available_metadata_fields = @namespace.metadata_fields.sort_by(&:downcase) - @current_template_fields
+  end
+
   def render_success(message)
     render status: :ok, locals: {
       type: 'success',

app/controllers/groups/metadata_templates_controller.rb

@@ -10,7 +10,8 @@ class MetadataTemplatesController < Groups::ApplicationController
     private
 
     def metadata_template_params
-      params.require(:metadata_template).permit(:name, :description, fields: [])
+      defaults = { fields: [] }
+      params.require(:metadata_template).permit(:name, :description, fields: []).reverse_merge(defaults)
     end
 
     protected

app/controllers/projects/metadata_templates_controller.rb

@@ -10,7 +10,8 @@ class MetadataTemplatesController < Projects::ApplicationController
     private
 
     def metadata_template_params
-      params.require(:metadata_template).permit(:name, fields: [])
+      defaults = { fields: [] }
+      params.require(:metadata_template).permit(:name, :description, fields: []).reverse_merge(defaults)
     end
 
     protected

app/views/groups/metadata_templates/edit.turbo_stream.erb

@@ -0,0 +1,10 @@
+<%= turbo_stream.update "metadata_template_modal",
+                    partial: "shared/metadata_templates/edit_template_dialog",
+                    locals: {
+                      open: true,
+                      update_path:
+                        group_metadata_template_path(
+                          @namespace,
+                          @metadata_template,
+                        ),
+                    } %>

app/views/groups/metadata_templates/update.turbo_stream.erb

@@ -0,0 +1,6 @@
+<%= render partial: "shared/metadata_templates/update",
+locals: {
+  update_path: group_metadata_template_path(@namespace, @metadata_template),
+  type: type,
+  message: message,
+} %>

app/views/projects/metadata_templates/edit.turbo_stream.erb

@@ -0,0 +1,11 @@
+<%= turbo_stream.update "metadata_template_modal",
+                    partial: "shared/metadata_templates/edit_template_dialog",
+                    locals: {
+                      open: true,
+                      update_path:
+                        namespace_project_metadata_template_path(
+                          @namespace.parent,
+                          @namespace.project,
+                          @metadata_template,
+                        ),
+                    } %>

app/views/projects/metadata_templates/update.turbo_stream.erb

@@ -0,0 +1,11 @@
+<%= render partial: "shared/metadata_templates/update",
+locals: {
+  update_path:
+    namespace_project_metadata_template_path(
+      @namespace.parent,
+      @namespace.project,
+      @metadata_template,
+    ),
+  type: type,
+  message: message,
+} %>

app/views/shared/metadata_templates/_edit_template_dialog.html.erb

@@ -0,0 +1,72 @@
+<%= viral_dialog(open: open, size: :large) do |dialog| %>
+  <%= dialog.with_header(title: t("metadata_templates.edit_template_dialog.title")) %>
+  <%= dialog.with_section do %>
+    <%= turbo_frame_tag "metadata_template_error_alert" %>
+    <%= turbo_frame_tag "metadata_template_dialog_content" do %>
+      <div
+        data-controller="viral--sortable-lists--two-lists-selection"
+        data-viral--sortable-lists--two-lists-selection-selected-list-value="selected"
+        data-viral--sortable-lists--two-lists-selection-available-list-value="available"
+        data-viral--sortable-lists--two-lists-selection-field-name-value="metadata_template[fields][]"
+        class="font-normal text-slate-500 dark:text-slate-400"
+      >
+        <div class="grid gap-4">
+          <%= viral_sortable_lists(
+            description: t("metadata_templates.edit_template_dialog.description"),
+            ) do |sortable_lists| %>
+            <%= sortable_lists.with_list(
+              id: "available",
+              title: t("metadata_templates.edit_template_dialog.available"),
+              list_items: @available_metadata_fields,
+              group: "metadata_selection",
+              container_classes: "block mb-1 pr-2 text-sm font-medium",
+              list_classes: "overflow-y-auto max-w-[356px] min-w-[356px] w-full",
+            ) %>
+            <%= sortable_lists.with_list(
+              id: "selected",
+              title: t("metadata_templates.edit_template_dialog.selected"),
+              list_items: @current_template_fields,
+              group: "metadata_selection",
+              container_classes: "block mb-1 text-sm font-medium",
+              list_classes: "overflow-y-auto max-w-[356px] min-w-[356px] w-full",
+            ) %>
+          <% end %>
+          <%= form_for(@metadata_template, url: update_path, method: :patch
+            ) do |form| %>
+            <div class="grid gap-4">
+              <div class="form-field mt-2">
+                <%= form.label :name %>
+                <%= form.text_field :name,
+                                class: "form-control",
+                                required: true,
+                                value: @metadata_template.name %>
+              </div>
+              <div class="form-field mt-2">
+                <%= form.label :description %>
+                <%= form.text_area :description,
+                               class: "form-control",
+                               value: @metadata_template.description %>
+              </div>
+              <div
+                class="hidden"
+                data-viral--sortable-lists--two-lists-selection-target="field"
+              ></div>
+              <div>
+                <%= form.submit t("metadata_templates.edit_template_dialog.update_button"),
+                            data: {
+                              turbo_frame: "_top",
+                              action:
+                                "click->viral--sortable-lists--two-lists-selection#constructParams",
+                              "viral--sortable-lists--two-lists-selection-target": "submitBtn",
+                            },
+                            class:
+                              "focus:outline-none text-sm text-white bg-primary-700 hover:bg-primary-800 focus:ring-0 rounded-md p-2 dark:text-white dark:bg-primary-600 dark:hover:bg-primary-700 cursor-pointer",
+                            disabled: !@current_template_fields.length.positive? %>
+              </div>
+            </div>
+          <% end %>
+        </div>
+      </div>
+    <% end %>
+  <% end %>
+<% end %>

app/views/shared/metadata_templates/_update.turbo_stream.erb

@@ -0,0 +1,21 @@
+<%= turbo_stream.update "metadata_template_modal",
+                    partial: "shared/metadata_templates/edit_template_dialog",
+                    locals: {
+                      open: @metadata_template.errors.any? ? true : false,
+                      update_path: update_path,
+                    } %>
+
+<% if !@metadata_template.errors.any? %>
+  <%= turbo_stream.append "flashes" do %>
+    <%= viral_flash(type:, data: message) %>
+  <% end %>
+  <%= turbo_stream.append "metadata-templates-table" do %>
+    <%= render SpinnerComponent.new(
+      message: t("metadata_templates.table_component.spinner_message"),
+    ) %>
+  <% end %>
+  <turbo-stream action="refresh"></turbo-stream>
+<% else %>
+  <%= turbo_stream.update "metadata_template_error_alert",
+                      viral_alert(type:, message:, classes: "mb-4") %>
+<% end %>

config/locales/en.yml

@@ -983,6 +983,12 @@ en:
       updated_at: Access Granted
       user_email: Username
   metadata_templates:
+    edit_template_dialog:
+      available: Available
+      description: Select the metadata fields for the template by moving the metadata fields from the available list to the selected list and vice versa. The template's fields ordering will be determined by the ordering of the selected list.
+      selected: Selected
+      title: Edit Metadata Template
+      update_button: Update
     table:
       empty:
         description: There are no metadata templates associated with this %{namespace_type}.
@@ -998,6 +1004,7 @@ en:
       remove_aria_label: Delete metadata template %{template_name}
       remove_button: Delete
       remove_confirmation: Are you sure you want to delete metadata template %{template_name}?
+      spinner_message: Loading metadata templates...
       updated_at: Last Modified
   models:
     sample:

config/locales/fr.yml

@@ -983,6 +983,12 @@ fr:
       updated_at: Access Granted
       user_email: Username
   metadata_templates:
+    edit_template_dialog:
+      available: Available
+      description: Select the metadata fields for the template by moving the metadata fields from the available list to the selected list and vice versa. The template's fields ordering will be determined by the ordering of the selected list.
+      selected: Selected
+      title: Edit Metadata Template
+      update_button: Update
     table:
       empty:
         description: There are no metadata templates associated with this %{namespace_type}.
@@ -998,6 +1004,7 @@ fr:
       remove_aria_label: Delete metadata template %{template_name}
       remove_button: Delete
       remove_confirmation: Are you sure you want to delete metadata template %{template_name}?
+      spinner_message: Loading metadata templates...
       updated_at: Last Modified
   models:
     sample:

test/fixtures/metadata_templates.yml

@@ -21,7 +21,7 @@ valid_group_metadata_template:
 project1_metadata_template<%= (n) %>:
   name: <%= "Project Template#{n}" %>
   description: <%= "This is template #{n} for the project" %>
-  fields: ["field_#{n+1}", "field_#{n+2}", "field_#{n+3}"]
+  fields: ["field_1", "field_2", "field_3"]
   created_at: <%= (n+3).hours.ago %>
   namespace_id: <%= ActiveRecord::FixtureSet.identify(:project1_namespace, :uuid) %>
   created_by_id: <%= ActiveRecord::FixtureSet.identify(:joan_doe, :uuid) %>
@@ -31,7 +31,7 @@ project1_metadata_template<%= (n) %>:
 group_one_metadata_template<%= (n) %>:
   name: <%= "Group Template#{n}" %>
   description: <%= "This is template #{n} for the group" %>
-  fields: ["field_#{n+1}", "field_#{n+2}", "field_#{n+3}"]
+  fields: ["field_4", "field_5", "field_6"]
   created_at: <%= (n+3).hours.ago %>
   namespace_id: <%= ActiveRecord::FixtureSet.identify(:group_one, :uuid) %>
   created_by_id: <%= ActiveRecord::FixtureSet.identify(:joan_doe, :uuid) %>

test/system/groups/metadata_templates_test.rb

@@ -138,5 +138,87 @@ def setup
         )
       end
     end
+
+    test 'should edit metadata template associated with the group' do
+      group = groups(:group_one)
+      metadata_template = metadata_templates(:group_one_metadata_template0)
+
+      visit group_metadata_templates_url(group)
+
+      table_row = find(:table_row, [metadata_template.name])
+
+      assert_equal 3, metadata_template.fields.length
+      assert_equal 'Group Template0', metadata_template.name
+
+      within table_row do
+        assert_link I18n.t(:'metadata_templates.table_component.edit_button'), count: 1
+        click_link I18n.t(:'metadata_templates.table_component.edit_button')
+      end
+
+      assert_selector '#dialog'
+
+      within('span[data-controller-connected="true"] dialog') do
+        assert_text I18n.t('metadata_templates.edit_template_dialog.title')
+
+        within "ul[id='available']" do
+          assert_text 'metadatafield1'
+          assert_text 'metadatafield2'
+          assert_text 'unique.metadata.field'
+          assert_selector 'li', count: 3
+        end
+
+        # fields currently in template fixture
+        within "ul[id='selected']" do
+          assert_text 'field_4'
+          assert_text 'field_5'
+          assert_text 'field_6'
+          assert_selector 'li', count: 3
+        end
+
+        click_button I18n.t('viral.sortable_lists_component.add_all')
+
+        within "ul[id='available']" do
+          assert_no_text 'metadatafield1'
+          assert_no_text 'metadatafield2'
+          assert_no_text 'unique.metadata.field'
+          assert_no_selector 'li'
+        end
+
+        within "ul[id='selected']" do
+          assert_text 'field_4'
+          assert_text 'field_5'
+          assert_text 'field_6'
+          assert_text 'metadatafield1'
+          assert_text 'metadatafield2'
+          assert_text 'unique.metadata.field'
+          assert_selector 'li', count: 6
+        end
+
+        fill_in 'Name', with: 'Group Template011'
+
+        assert_selector 'input[type="submit"]', count: 1
+        click_on I18n.t('metadata_templates.edit_template_dialog.update_button')
+      end
+
+      within %(div[data-controller='viral--flash']) do
+        assert_text I18n.t(
+          :'concerns.metadata_template_actions.update.success',
+          template_name: 'Group Template011'
+        )
+      end
+
+      assert_selector 'div#spinner'
+      assert_text I18n.t('metadata_templates.table_component.spinner_message')
+      assert_no_selector 'div#spinner'
+
+      assert_equal 6, metadata_template.reload.fields.length
+      assert_equal 'Group Template011', metadata_template.name
+
+      table_row = find(:table_row, ['Group Template011'])
+
+      within(table_row) do
+        assert_text 'Group Template011'
+      end
+    end
   end
 end