fix: form footer buttons in the wrong place

.github/PULL_REQUEST_TEMPLATE.md

@@ -5,7 +5,7 @@ Fixes # (issue)
 
 # Checklist:
 <!--
-  Please go through the steps and complete them if they make sense (add testes if the change requires it, add to the docs, etc.)
+  Please go through the steps and complete them if they make sense (add tests if the change requires it, add to the docs, etc.)
   (Mark [x] inside the brackets)
 -->
 

Gemfile.lock

@@ -201,7 +201,7 @@ GEM
     httparty (0.20.0)
       mime-types (~> 3.0)
       multi_xml (>= 0.5.2)
-    i18n (1.11.0)
+    i18n (1.12.0)
       concurrent-ruby (~> 1.0)
     i18n_data (0.15.0)
       simple_po_parser (~> 1.1)
@@ -252,6 +252,8 @@ GEM
     nokogiri (1.13.7)
       mini_portile2 (~> 2.8.0)
       racc (~> 1.4)
+    nokogiri (1.13.7-x86_64-linux)
+      racc (~> 1.4)
     orm_adapter (0.5.0)
     pagy (5.10.1)
       activesupport
@@ -391,7 +393,7 @@ GEM
     tzinfo (2.0.4)
       concurrent-ruby (~> 1.0)
     unicode-display_width (2.1.0)
-    view_component (2.57.1)
+    view_component (2.61.0)
       activesupport (>= 5.0.0, < 8.0)
       method_source (~> 1.0)
     warden (1.2.9)

app/components/avo/item_switcher_component.rb

@@ -28,6 +28,8 @@ def render?
       return false if in_reflection? && item.hidden_in_reflection?
     end
 
+    return false if item.is_main_panel?
+
     true
   end
 

app/components/avo/panel_component.html.erb

@@ -34,10 +34,8 @@
     </div>
   <% end %>
   <% if footer_tools? %>
-    <div class="<%= white_panel_classes %> p-4 flex-1 flex flex-col xl:flex-row justify-between mt-6">
-      <div class="flex-1 w-full flex flex-col sm:flex-row xl:justify-end sm:items-end space-y-2 sm:space-y-0 sm:space-x-2 mt-4 xl:mt-0">
-        <%= footer_tools %>
-      </div>
+    <div class="flex-1 w-full flex flex-col sm:flex-row xl:justify-end sm:items-end space-y-2 sm:space-y-0 sm:space-x-2 mt-4 xl:mt-0">
+      <%= footer_tools %>
     </div>
   <% end %>
   <% if footer? %>

app/components/avo/panel_component.rb

@@ -47,8 +47,4 @@ def description
   def render_header?
     @name.present? || description.present? || tools.present? || display_breadcrumbs?
   end
-
-  def render_footer_tools?
-    footer_tools.present?
-  end
 end

app/components/avo/resource_component.rb

@@ -58,33 +58,14 @@ def authorize_association_for(policy_method)
     association_policy
   end
 
-  def split_panel_fields
-    initialize_panels
-    @resource.get_fields.each do |field|
-      case field.class.to_s
-      when "Avo::Fields::HasOneField"
-        @has_one_panels << field
-      when "Avo::Fields::HasManyField"
-        @has_many_panels << field
-      when "Avo::Fields::HasAndBelongsToManyField"
-        @has_as_belongs_to_many_panels << field
-      else
-        @fields_by_panel[field.panel_name] ||= []
-        @fields_by_panel[field.panel_name] << field
-      end
+  def main_panel
+    @resource.get_items.find do |item|
+      item.is_main_panel?
     end
   end
 
   private
 
-  def initialize_panels
-    @fields_by_panel = {}
-    @has_one_panels = []
-    @has_many_panels = []
-    @has_as_belongs_to_many_panels = []
-    @resource_tools = @resource.tools
-  end
-
   def via_resource?
     params[:via_resource_class].present? && params[:via_resource_id].present?
   end

app/components/avo/tab_group_component.html.erb

@@ -5,8 +5,7 @@
     controller: "tabs",
     tabs_view_value: view,
     tabs_active_tab_value: active_tab_name
-  },
-  class: 'space-y-12' do %>
+  } do %>
   <% visible_tabs.each_with_index do |tab, index| %>
     <%
       args = {

app/components/avo/views/resource_edit_component.html.erb

@@ -33,20 +33,42 @@
           <% end %>
         <% end %>
       <% end %>
+      <%# Extract the main panel and display the fields here. %>
+      <%# This way we'll be able to render the footer buttons under the main fields. %>
+      <% if main_panel.present? %>
+        <% c.body do %>
+          <div class="divide-y">
+            <% main_panel.items.each_with_index do |field, index| %>
+              <%= render field.hydrate(resource: @resource, model: @resource.model, user: @resource.user, view: view)
+                .component_for_view(view)
+                .new(field: field, resource: @resource, index: index, form: form)
+              %>
+            <% end %>
+          </div>
+        <% end %>
+      <% end %>
       <% if Avo.configuration.buttons_on_form_footers %>
         <% c.footer_tools do %>
-          <%= a_link back_path, icon: 'arrow-left' do %>
-            <%= t('avo.cancel').capitalize %>
-          <% end %>
-          <% if can_see_the_save_button? %>
-            <%= a_button color: :green, loading: true, type: :submit, icon: 'save' do %>
-              <%= t('avo.save').capitalize %>
+          <div class="mt-4">
+            <%= a_link back_path,
+              style: :text,
+              icon: 'arrow-left' do %>
+              <%= t('avo.cancel').capitalize %>
             <% end %>
-          <% end %>
+            <% if can_see_the_save_button? %>
+              <%= a_button color: :primary,
+                style: :primary,
+                loading: true,
+                type: :submit,
+                icon: 'save' do %>
+                <%= t('avo.save').capitalize %>
+              <% end %>
+            <% end %>
+          </div>
         <% end %>
       <% end %>
     <% end %>
-    <%= content_tag :div, class: 'space-y-12' do %>
+    <%= content_tag :div, class: 'space-y-12 mt-12' do %>
       <% @resource.get_items.each_with_index do |item, index| %>
         <% next if item.nil? %>
         <%= render Avo::ItemSwitcherComponent.new resource: @resource, item: item, index: index + 1, view: @view, form: form %>

app/components/avo/views/resource_edit_component.rb

@@ -11,8 +11,6 @@ def initialize(resource: nil, model: nil, actions: [], view: :edit)
     @model = model
     @actions = actions
     @view = view
-
-    split_panel_fields
   end
 
   def title

app/components/avo/views/resource_show_component.html.erb

@@ -64,8 +64,20 @@
         <% end %>
       <% end %>
     <% end %>
+    <% if main_panel.present? %>
+      <% c.body do %>
+        <div class="divide-y">
+          <% main_panel.items.each_with_index do |field, index| %>
+            <%= render field.hydrate(resource: @resource, model: @resource.model, user: @resource.user, view: view)
+              .component_for_view(view)
+              .new(field: field, resource: @resource, index: index)
+            %>
+          <% end %>
+        </div>
+      <% end %>
+    <% end %>
   <% end %>
-  <%= content_tag :div, class: 'space-y-12' do %>
+  <%= content_tag :div, class: 'space-y-12 mt-12' do %>
     <% @resource.get_items.each_with_index do |item, index| %>
       <% next if item.nil? %>
       <%= render Avo::ItemSwitcherComponent.new resource: @resource, reflection: @reflection, item: item, index: index + 1, view: @view %>

app/components/avo/views/resource_show_component.rb

@@ -10,8 +10,6 @@ def initialize(resource: nil, reflection: nil, parent_model: nil, resource_panel
     @resource_panel = resource_panel
     @actions = actions
     @view = :show
-
-    split_panel_fields
   end
 
   def title

app/views/avo/base/edit.html.erb

@@ -1,2 +1 @@
 <%= render Avo::Views::ResourceEditComponent.new(resource: @resource, view: @view, actions: @actions) %>
-

spec/system/avo/tabs_spec.rb

@@ -57,7 +57,8 @@
       it "shows the birthday in the tab" do
         visit avo.edit_resources_user_path user
 
-        expect(find('[data-panel-index="1"]')).not_to have_text "Birthday"
+        # Birthday not visible on the first panel
+        expect(find_all('[data-panel-index="0"]').first).not_to have_text "Birthday"
 
         scroll_to first_tab_group