fix: tabs persistence when tab name has spaces (#2278)

avo-hq · Dec 29, 2023 · 5fe3bc9 · 5fe3bc9
1 parent 5589e5f
commit 5fe3bc9
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 8 deletions.
diff --git a/app/components/avo/tab_group_component.rb b/app/components/avo/tab_group_component.rb
@@ -7,6 +7,8 @@ class Avo::TabGroupComponent < Avo::BaseComponent
   attr_reader :form
   attr_reader :resource
 
+  delegate :group_param, to: :@group
+
   def initialize(resource:, group:, index:, form:, params:, view:)
     @resource = resource
     @group = group
@@ -26,10 +28,6 @@ def tabs_have_content?
     visible_tabs.present?
   end
 
-  def group_param
-    group.id
-  end
-
   def active_tab_name
     CGI.unescape(params[group_param] || group.visible_items&.first&.name)
   end

diff --git a/app/components/avo/tab_switcher_component.rb b/app/components/avo/tab_switcher_component.rb
@@ -12,6 +12,7 @@ class Avo::TabSwitcherComponent < Avo::BaseComponent
   attr_reader :resource
 
   delegate :white_panel_classes, to: :helpers
+  delegate :group_param, to: :@group
 
   def initialize(resource:, group:, current_tab:, active_tab_name:, view:)
     @active_tab_name = active_tab_name
@@ -48,10 +49,6 @@ def current_one?(tab)
 
   private
 
-  def group_param
-    "tab-group_#{group.id}"
-  end
-
   def tab_param_missing?
     params[group_param].blank?
   end

diff --git a/lib/avo/resources/items/tab_group.rb b/lib/avo/resources/items/tab_group.rb
@@ -37,6 +37,10 @@ def turbo_frame_id
     "#{Avo::Resources::Items::TabGroup.to_s.parameterize} #{index}".parameterize
   end
 
+  def group_param
+    "tab-group_#{id}"
+  end
+
   class Builder
     include Avo::Concerns::BorrowItemsHolder
 

diff --git a/spec/system/avo/tabs_spec.rb b/spec/system/avo/tabs_spec.rb
@@ -140,4 +140,26 @@
       find('a[data-selected="true"][data-tabs-tab-name-param="Posts"]')
     end
   end
+
+  describe "tabs with names that have spaces" do
+    it "keeps tab on reload" do
+      visit avo.resources_user_path user
+
+      find('a[data-selected="true"][data-tabs-tab-name-param="Fish"]')
+      find('a[data-selected="false"][data-tabs-tab-name-param="Projects"]').click
+      find('a[data-selected="false"][data-tabs-tab-name-param="Team memberships"]')
+
+      refresh
+
+      find('a[data-selected="false"][data-tabs-tab-name-param="Fish"]')
+      find('a[data-selected="true"][data-tabs-tab-name-param="Projects"]')
+      find('a[data-selected="false"][data-tabs-tab-name-param="Team memberships"]').click
+
+      refresh
+
+      find('a[data-selected="false"][data-tabs-tab-name-param="Fish"]')
+      find('a[data-selected="false"][data-tabs-tab-name-param="Projects"]')
+      find('a[data-selected="true"][data-tabs-tab-name-param="Team memberships"]')
+    end
+  end
 end