Feature: Title and description for tabs (#3442)

* Refactor tab_groups to have title and description * Fixes with rubocop * Fix with rubocop * Request changes * Request changes * Create new component and move there header part from PanelComponent, add spec * Small fixes * Update app/components/avo/panel_header_component.rb Co-authored-by: Kamil Milewski <kamil.milewski@hotmail.com> * rm unused * test --------- Co-authored-by: Paul Bob <69730720+Paul-Bob@users.noreply.github.com> Co-authored-by: Kamil Milewski <kamil.milewski@hotmail.com> Co-authored-by: Paul Bob <paul.ionut.bob@gmail.com>
avo-hq · Dec 2, 2024 · 5dec5c0 · 5dec5c0
1 parent f7c53f7
commit 5dec5c0
Show file tree

Hide file tree

Showing 9 changed files with 109 additions and 54 deletions.
diff --git a/app/components/avo/panel_component.html.erb b/app/components/avo/panel_component.html.erb
@@ -1,34 +1,21 @@
 <%= content_tag :div, class: classes, data: data_attributes do %>
   <%= render Avo::CoverPhotoComponent.new cover_photo: @cover_photo %>
-
-  <% if render_header? %>
-    <div data-target="panel-header" class="flex flex-col w-full mb-4">
-      <div class="flex justify-center sm:justify-start flex-col sm:flex-row w-full flex-1 has-cover-photo:mt-0">
-        <%= render Avo::ProfilePhotoComponent.new profile_photo: @profile_photo %>
-        <div class="flex flex-col flex-1 w-full">
-          <%= render partial: "avo/partials/panel_breadcrumbs" if display_breadcrumbs? %>
-          <div class="flex-1 flex flex-col xl:flex-row justify-between gap-1 grow-0">
-            <div class="overflow-hidden flex flex-col">
-              <% if name_slot? %>
-                <%= name_slot %>
-              <% else %>
-                <%= render Avo::PanelNameComponent.new name: @name %>
-              <% end %>
-              <% if description.present? %>
-                <div class="text-sm tracking-normal font-medium text-gray-600 text-center sm:text-left" data-target="description">
-                  <%== description %>
-                </div>
-              <% end %>
-            </div>
-            <% if tools.present? %>
-              <div class="flex-1 w-full flex flex-col sm:flex-row xl:justify-end sm:items-end gap-2 mt-4 xl:mt-0" data-target="panel-tools">
-                <%= tools %>
-              </div>
-            <% end %>
-          </div>
-        </div>
-      </div>
-    </div>
+  <%= render Avo::PanelHeaderComponent.new(
+    name: @name,
+    description: @description,
+    display_breadcrumbs: @display_breadcrumbs,
+    profile_photo: @profile_photo
+  ) do |header| %>
+    <% if name_slot.present? %>
+      <% header.with_name_slot do %>
+        <%= name_slot %>
+      <% end %>
+    <% end %>
+    <% if tools.present? %>
+      <% header.with_tools do %>
+        <%= tools %>
+      <% end %>
+    <% end %>
   <% end %>
   <% if body? %>
     <div data-target="panel-body" class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:gap-4 w-full <% if sidebar? %> has-sidebar <% end %>">

diff --git a/app/components/avo/panel_component.rb b/app/components/avo/panel_component.rb
@@ -37,18 +37,4 @@ def classes
   def data_attributes
     @data.merge({"panel-index": @index})
   end
-
-  def display_breadcrumbs?
-    @display_breadcrumbs == true && Avo.configuration.display_breadcrumbs == true
-  end
-
-  def description
-    return @description if @description.present?
-
-    ""
-  end
-
-  def render_header?
-    @name.present? || description.present? || tools.present? || display_breadcrumbs?
-  end
 end
diff --git a/app/components/avo/panel_header_component.html.erb b/app/components/avo/panel_header_component.html.erb
@@ -0,0 +1,31 @@
+<div data-target="panel-header" class="flex flex-col w-full mb-4">
+  <div class="flex justify-center sm:justify-start flex-col sm:flex-row w-full flex-1 has-cover-photo:mt-0">
+    <%= render Avo::ProfilePhotoComponent.new profile_photo: @profile_photo %>
+    <div class="flex flex-col flex-1 w-full">
+      <% if display_breadcrumbs? %>
+        <div class="breadcrumbs text-center sm:text-left mb-2">
+          <%= helpers.render_avo_breadcrumbs(separator: helpers.svg("chevron-right", class: "inline-block h-3 stroke-current relative top-[-1px] ml-1")) if Avo.configuration.display_breadcrumbs %>
+        </div>
+      <% end %>
+      <div class="flex-1 flex flex-col xl:flex-row justify-between gap-1 grow-0">
+        <div class="overflow-hidden flex flex-col">
+          <% if name_slot? %>
+            <%= name_slot %>
+          <% else %>
+            <%= render Avo::PanelNameComponent.new name: @name %>
+          <% end %>
+          <% if @description.present? %>
+            <div class="text-sm tracking-normal font-medium text-gray-600 text-center sm:text-left" data-target="description">
+              <%== @description %>
+            </div>
+          <% end %>
+        </div>
+        <% if tools.present? %>
+          <div class="flex-1 w-full flex flex-col sm:flex-row xl:justify-end sm:items-end gap-2 mt-4 xl:mt-0" data-target="panel-tools">
+            <%= tools %>
+          </div>
+        <% end %>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/app/components/avo/panel_header_component.rb b/app/components/avo/panel_header_component.rb
@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+class Avo::PanelHeaderComponent < Avo::BaseComponent
+  include Avo::ApplicationHelper
+
+  renders_one :name_slot
+  renders_one :tools
+
+  prop :name
+  prop :description
+  prop :display_breadcrumbs, default: false
+  prop :profile_photo
+
+  private
+
+  def display_breadcrumbs?
+    @display_breadcrumbs && Avo.configuration.display_breadcrumbs
+  end
+
+  def description
+    return @description if @description.present?
+
+    ""
+  end
+
+  def render?
+    @name.present? || description.present? || tools.present? || display_breadcrumbs?
+  end
+end
diff --git a/app/components/avo/tab_group_component.html.erb b/app/components/avo/tab_group_component.html.erb
@@ -10,7 +10,8 @@
   } do %>
   <% visible_tabs.each_with_index do |tab, index| %>
     <%= content_tag :div, **args(tab) do %>
-      <div class="border rounded-lg p-2 -mx-2 -my-2 lg:p-4 lg:-mx-4 lg:-my-4 space-y-4">
+      <%= render Avo::PanelHeaderComponent.new name: group.title, description: group.description %>
+      <div class="border rounded-lg p-2 -mx-2 -my-2 lg:p-4 lg:-mx-4 lg:-my-3 space-y-4">
         <%= render Avo::TabSwitcherComponent.new resource: resource, current_tab: visible_tabs.first, group: group, active_tab_name: tab.name, view: view %>
         <% if !tab.is_empty? %>
           <div class="space-y-12">

diff --git a/lib/avo/resources/items/holder.rb b/lib/avo/resources/items/holder.rb
@@ -37,11 +37,19 @@ def field(field_name, **args, &block)
     add_item field_parser.instance
   end
 
-  def tabs(tab = nil, id: nil, name: nil, **kwargs, &block)
+  def tabs(tab = nil, id: nil, name: nil, title: nil, description: nil, **args, &block)
     if tab.present?
       add_item tab
     else
-      add_item Avo::Resources::Items::TabGroup::Builder.parse_block(parent: @parent, id: id, name: name, **kwargs, &block)
+      add_item Avo::Resources::Items::TabGroup::Builder.parse_block(
+        parent: @parent,
+        id: id,
+        name: name,
+        title: title,
+        description: description,
+        **args,
+        &block
+      )
     end
   end
 

diff --git a/lib/avo/resources/items/tab_group.rb b/lib/avo/resources/items/tab_group.rb
@@ -6,15 +6,15 @@ class Avo::Resources::Items::TabGroup
   include Avo::Concerns::IsVisible
   include Avo::Concerns::VisibleInDifferentViews
 
-  attr_accessor :index
-  attr_accessor :style
-  attr_accessor :name
+  attr_accessor :index, :style, :name, :title, :description
 
-  def initialize(index: 0, view: nil, style: nil, id: nil, name: nil, **args)
+  def initialize(index: 0, view: nil, style: nil, title: nil, description: nil, id: nil, name: nil, **args)
     @index = index
     @items_holder = Avo::Resources::Items::Holder.new
     @view = Avo::ViewInquirer.new view
     @style = style
+    @title = title
+    @description = description
     @id = id
     @name = name
     @args = args
@@ -67,8 +67,15 @@ def field(field_name, **args, &block)
       @items_holder.tabs tab
     end
 
-    def initialize(name:, id:, parent:, style: nil, **args)
-      @group = Avo::Resources::Items::TabGroup.new(name: name, id: id, style: style, **args)
+    def initialize(name:, id:, parent:, title: nil, description: nil, style: nil, **args)
+      @group = Avo::Resources::Items::TabGroup.new(
+        name: name,
+        id: id,
+        style: style,
+        title: title,
+        description: description,
+        **args
+      )
       @items_holder = Avo::Resources::Items::Holder.new(parent: parent, from: self)
     end
 

diff --git a/spec/dummy/app/avo/resources/user.rb b/spec/dummy/app/avo/resources/user.rb
@@ -227,7 +227,7 @@ def stacked_name
   end
 
   def first_tabs_group
-    tabs do
+    tabs title: "First tabs group", description: "First tabs group description" do
       birthday_tab
       test_tab
       test_field("Inside tabs")
@@ -241,7 +241,7 @@ def first_tabs_group
   end
 
   def second_tabs_group
-    tabs id: :second_tabs_group do
+    tabs title: "Second tabs group", description: "Second tabs group description", id: :second_tabs_group do
       field :post,
         as: :has_one,
         name: "Main post",

diff --git a/spec/system/avo/tabs_spec.rb b/spec/system/avo/tabs_spec.rb
@@ -32,6 +32,12 @@
         expect(find('turbo-frame[id="has_many_field_show_posts"]')).to have_link "Attach post"
         expect(find('turbo-frame[id="has_many_field_show_posts"]')).to have_link "Create new post", href: "/admin/resources/posts/new?via_record_id=#{user.slug}&via_relation=user&via_relation_class=User&via_resource_class=Avo%3A%3AResources%3A%3AUser"
 
+        expect(page).to have_text "First tabs group"
+        expect(page).to have_text "First tabs group description"
+
+        expect(page).to have_text "Second tabs group"
+        expect(page).to have_text "Second tabs group description"
+
         click_on "Attach post"
 
         expect(page).to have_text "Choose post"