avo 3.1.3 → 3.1.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 58201ebf40ea090bc7ff03e588ae9dba48c913c4d39b16eaa4d0068a99c45211
-  data.tar.gz: 2c3efea520399494770be31f454086cc4ea6aa24eaa16c735099ef336e059e8d
+  metadata.gz: 7fc615ce5edcbf9325987f90d37495c71f641b241fe34d5da9f9fae94018dd94
+  data.tar.gz: 03fae5887aa0b9c0371705d30221cb07f9498ff0d3499f1dd35474fcd449c7f3
 SHA512:
-  metadata.gz: 5ab96094a881dea361ab8c88817030bf277dc737e70f5f273da59545f1db19e6145aaa14877db6bc6b8aa91347df5c2099a1c57183dc52f6ed10dd896831f852
-  data.tar.gz: 404d1af6a00033fc33b3e242fb5e10a1c9a66a0b79771615586466848c6022a3a495ca6ec3e890d394f8c3f5c02c28817c30f30e6563dd443aa1cf0cdd7a7084
+  metadata.gz: 504866933b84f2a3969ab026260f8213327a5448bc2f9c50bafef4c45c7de2513373cf1c101e240700f1a3398560c174b530e47caf17621355c6329a3d322f2f
+  data.tar.gz: be6dedf903e9439795adf0da9a278458ad2b53d4841447c00334b42d9cb6a561f62f987ccd687528d9f6fbd05ffae02f1c8a795a8140f027c18c406091c65f65

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    avo (3.1.3)
+    avo (3.1.4)
       actionview (>= 6.1)
       active_link_to
       activerecord (>= 6.1)

data/app/components/avo/button_component.rb

@@ -78,7 +78,7 @@ class Avo::ButtonComponent < ViewComponent::Base
     result += helpers.svg(@icon, class: icon_classes) if @icon.present?
 
     if is_not_icon? && content.present?
-      result += "<span>#{content}</span>"
+      result += content
     end
 
     result.html_safe

data/app/components/avo/fields/edit_component.rb

@@ -7,6 +7,7 @@ class Avo::Fields::EditComponent < ViewComponent::Base
   attr_reader :field
   attr_reader :form
   attr_reader :index
+  attr_reader :kwargs
   attr_reader :multiple
   attr_reader :resource
   attr_reader :stacked
@@ -17,6 +18,7 @@ class Avo::Fields::EditComponent < ViewComponent::Base
     @field = field
     @form = form
     @index = index
+    @kwargs = kwargs
     @multiple = multiple
     @resource = resource
     @stacked = stacked

data/app/components/avo/fields/has_many_field/show_component.html.erb

@@ -1,3 +1,3 @@
-<turbo-frame id="<%= @field.turbo_frame %>" src="<%= @field.frame_url %>" target="_top" class="block">
+<%= turbo_frame_tag @field.turbo_frame, src: @field.frame_url, loading: loading, target: :_top, class: "block" do %>
   <%= render(Avo::LoadingComponent.new(title: @field.plural_name)) %>
-</turbo-frame>
+<% end %>

data/app/components/avo/fields/has_many_field/show_component.rb

@@ -1,4 +1,11 @@
 # frozen_string_literal: true
 
 class Avo::Fields::HasManyField::ShowComponent < Avo::Fields::ShowComponent
+  include Turbo::FramesHelper
+
+  def turbo_frame_loading = kwargs[:turbo_frame_loading]
+
+  def loading
+    turbo_frame_loading || params[:turbo_frame_loading] || "eager"
+  end
 end

data/app/components/avo/fields/index_component.rb

@@ -4,13 +4,15 @@ class Avo::Fields::IndexComponent < Avo::BaseComponent
   include Avo::ResourcesHelper
 
   attr_reader :field
+  attr_reader :kwargs
   attr_reader :parent_resource
   attr_reader :view
 
-  def initialize(field: nil, resource: nil, reflection: nil, index: 0, parent_record: nil, parent_resource: nil)
+  def initialize(field: nil, resource: nil, reflection: nil, index: 0, parent_record: nil, parent_resource: nil, **kwargs)
     @field = field
     @resource = resource
     @index = index
+    @kwargs = kwargs
     @parent_record = parent_record
     @parent_resource = parent_resource
     @view = Avo::ViewInquirer.new("index")

data/app/components/avo/fields/show_component.rb

@@ -6,18 +6,20 @@ class Avo::Fields::ShowComponent < ViewComponent::Base
   attr_reader :compact
   attr_reader :field
   attr_reader :index
+  attr_reader :kwargs
   attr_reader :resource
   attr_reader :stacked
   attr_reader :short
   attr_reader :view
 
-  def initialize(field: nil, resource: nil, index: 0, form: nil, compact: false, short: false, stacked: nil)
+  def initialize(field: nil, resource: nil, index: 0, form: nil, compact: false, short: false, stacked: nil, **kwargs)
     @compact = compact
     @field = field
     @index = index
     @resource = resource
     @stacked = stacked
     @short = short
+    @kwargs = kwargs
     @view = Avo::ViewInquirer.new("show")
   end
 

data/app/components/avo/items/switcher_component.rb

@@ -58,7 +58,7 @@ class Avo::Items::SwitcherComponent < Avo::BaseComponent
 
   def field_component
     final_item = item.dup.hydrate(resource: @resource, record: @resource.record, user: resource.user, view: view)
-    final_item.component_for_view(@view).new(field: final_item, resource: @resource, index: index, form: form, **@field_component_extra_args)
+    final_item.component_for_view(@view).new(field: final_item, resource: @resource, index: index, form: form, turbo_frame_loading: :lazy, **@field_component_extra_args)
   end
 
   def panel_component

data/app/components/avo/tab_group_component.html.erb

@@ -4,53 +4,20 @@
     index: index,
     controller: "tabs",
     tabs_view_value: view,
-    tabs_active_tab_value: active_tab_name
+    tabs_group_id_value: group.id,
+    tabs_active_tab_value: active_tab_name,
+    tabs_resource_name_value: resource.underscore_name
   } do %>
   <% visible_tabs.each_with_index do |tab, index| %>
-    <%
-      args = {
-        # Hide the turbo frames that aren't in the current tab
-        # This way we can lazy load the un-selected tabs on the show view
-        class: "block #{'hidden' unless tab.name == active_tab_name}",
-        data: {
-          # Add a marker to know if we already loaded a turbo frame
-          loaded: tab.name == active_tab_name,
-          tabs_target: :tabPanel,
-          tab_id: tab.name,
-        }
-      }
-
-      is_current_tab = active_tab_name.to_s == tab.name.to_s
-
-      # On edit screens we want to load each tab because we wnst the DOM to have the fields present on form submission.
-      # If you have a field which is in the second tab and it's required, the form submission will fail because the required field is not in view, and we don't want that.
-      # We also want to load the current tab
-      should_lazy_load = if @view.in?(%w[edit new update create])
-        false
-      else
-        !is_current_tab
-      end
-
-      if should_lazy_load
-        args[:src] = helpers.resource_path(resource: resource, record: resource.record, keep_query_params: true, active_tab_name: tab.name, tab_turbo_frame: group.turbo_frame_id)
-        args[:loading] = :lazy
-      end
-    %>
-    <%= turbo_frame_tag tab.turbo_frame_id(parent: @group), **args do %>
+    <%= 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::TabSwitcherComponent.new resource: resource, current_tab: tab, group: group, active_tab_name: active_tab_name, view: view %>
-        <% if should_lazy_load %>
-          <div class="block w-full">
-            <%= render Avo::LoadingComponent.new title: "#{tab.name}" %>
+        <%= 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">
+            <% tab.visible_items.each do |item| %>
+              <%= render Avo::Items::SwitcherComponent.new resource: resource, item: item, index: index, form: form, view: @view %>
+            <% end %>
           </div>
-        <% else %>
-          <% if !tab.is_empty? %>
-            <div class="space-y-12">
-              <% tab.visible_items.each do |item| %>
-                <%= render Avo::Items::SwitcherComponent.new resource: resource, item: item, index: index, form: form, view: @view %>
-              <% end %>
-            </div>
-          <% end %>
         <% end %>
       </div>
     <% end %>

data/app/components/avo/tab_group_component.rb

@@ -26,12 +26,16 @@ class Avo::TabGroupComponent < Avo::BaseComponent
     visible_tabs.present?
   end
 
+  def group_param
+    group.id
+  end
+
   def active_tab_name
-    params[:active_tab_name] || group.visible_items&.first&.name
+    CGI.unescape(params[group_param] || group.visible_items&.first&.name)
   end
 
   def tabs
-    @group.items.map do |tab|
+    @group.visible_items.map do |tab|
       tab.hydrate(view: view)
     end
   end
@@ -49,4 +53,18 @@ class Avo::TabGroupComponent < Avo::BaseComponent
       tab.name.to_s == active_tab_name.to_s
     end
   end
+
+  def args(tab)
+    {
+      # Hide the turbo frames that aren't in the current tab
+      # This way we can lazy load the un-selected tabs on the show view
+      class: "block #{'hidden' unless tab.name == active_tab_name}",
+      data: {
+        # Add a marker to know if we already loaded a turbo frame
+        loaded: tab.name == active_tab_name,
+        tabs_target: :tabPanel,
+        tab_id: tab.name,
+      }
+    }
+  end
 end

data/app/components/avo/tab_switcher_component.html.erb

@@ -1,17 +1,19 @@
-<div class="flex flex-wrap gap-2 p-2 <%= white_panel_classes %>" data-target="tab-switcher">
+<div class="flex flex-wrap gap-2 p-2 <%= white_panel_classes %>" data-tabs-target="tabSwitcher">
   <% group.visible_items.each do |tab| %>
     <%= a_link tab_path(tab),
-    color: selected?(tab) ? :primary : :gray,
-    style: selected?(tab) ? :outline : :text,
-    size: :sm,
-    class: selected?(tab) ? "z-20 bg-primary-100" : "",
-    title: tab.description,
-    data: {
-      tippy: tab.description.present? ? 'tooltip' : '',
-      selected: selected?(tab),
-      action: 'click->tabs#changeTab',
-      tabs_id_param: tab.name
-    } do %>
+      color: current_one?(tab) ? :primary : :gray,
+      style: current_one?(tab) ? :outline : :text,
+      size: :sm,
+      class: current_one?(tab) ? "z-20 bg-primary-100" : "",
+      title: tab.description,
+      data: {
+        tippy: tab.description.present? ? 'tooltip' : '',
+        selected: current_one?(tab),
+        action: 'click->tabs#changeTab',
+        tabs_tab_name_param: tab.name,
+        tabs_group_id_param: group.to_param,
+        tabs_resource_name_param: resource.underscore_name,
+      } do %>
       <%= tab.name %>
     <% end %>
   <% end %>

data/app/components/avo/tab_switcher_component.rb

@@ -9,6 +9,7 @@ class Avo::TabSwitcherComponent < Avo::BaseComponent
   attr_reader :current_tab
   attr_reader :tabs
   attr_reader :view
+  attr_reader :resource
 
   delegate :white_panel_classes, to: :helpers
 
@@ -40,17 +41,18 @@ class Avo::TabSwitcherComponent < Avo::BaseComponent
     @view.in?(%w[new create])
   end
 
-  def is_initial_load?
-    params[:active_tab_name].blank?
+  # We'll mark the tab as selected if it's the current one
+  def current_one?(tab)
+    tab.name == active_tab_name
   end
 
-  # On initial load we want that each tab button to be the selected one.
-  # We do that so we don't get the wrongly selected item for a quick brief when first switching from one panel to another.
-  def selected?(tab)
-    if is_initial_load?
-      current_tab.name.to_s == tab.name.to_s
-    else
-      tab.name.to_s == active_tab_name.to_s
-    end
+  private
+
+  def group_param
+    "tab-group_#{group.id}"
+  end
+
+  def tab_param_missing?
+    params[group_param].blank?
   end
 end

data/app/controllers/avo/base_controller.rb

@@ -357,12 +357,12 @@ module Avo
     def set_applied_filters
       reset_filters if params[:reset_filter]
 
-      @applied_filters = Avo::Filters::BaseFilter.decode_filters(fetch_filters)
+      return @applied_filters = {} if (fetched_filters = fetch_filters).blank?
+
+      @applied_filters = Avo::Filters::BaseFilter.decode_filters(fetched_filters)
 
       # Some filters react to others and will have to be merged into this
       @applied_filters = @applied_filters.merge reactive_filters
-    rescue
-      @applied_filters = {}
     end
 
     def reactive_filters

data/app/javascript/avo.base.js

@@ -8,8 +8,12 @@ import { Turbo } from '@hotwired/turbo-rails'
 import Rails from '@rails/ujs'
 import tippy from 'tippy.js'
 
+import { LocalStorageService } from './js/local-storage-service'
+
 import 'chartkick/chart.js/chart.esm'
 
+window.Avo.localStorage = new LocalStorageService()
+
 import './js/active-storage'
 import './js/controllers'
 import './js/custom-stream-actions'

data/app/javascript/js/controllers/filter_controller.js

@@ -25,17 +25,28 @@ export default class extends Controller {
     return param
   }
 
-  b64EncodeUnicode(str) {
-    // first we use encodeURIComponent to get percent-encoded UTF-8,
-    // then we convert the percent encodings into raw bytes which
-    // can be fed into btoa.
-    return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g,
-      (match, p1) => String.fromCharCode(`0x${p1}`)))
+  decode(filters) {
+    return JSON.parse(
+      new TextDecoder().decode(
+        Uint8Array.from(
+          atob(
+            decodeURIComponent(filters),
+          ), (m) => m.codePointAt(0),
+        ),
+      ),
+    )
   }
 
-  b64DecodeUnicode(str) {
-    // Going backwards: from bytestream, to percent-encoding, to original string.
-    return decodeURIComponent(atob(str).split('').map((c) => `%${(`00${c.charCodeAt(0).toString(16)}`).slice(-2)}`).join(''))
+  encode(filtered) {
+    return encodeURIComponent(
+      btoa(
+        String.fromCodePoint(
+          ...new TextEncoder().encode(
+            JSON.stringify(filtered),
+          ),
+        ),
+      ),
+    )
   }
 
   changeFilter() {
@@ -47,7 +58,7 @@ export default class extends Controller {
 
     // Decode the filters
     if (filters) {
-      filters = JSON.parse(this.b64DecodeUnicode(filters))
+      filters = this.decode(filters)
     } else {
       filters = {}
     }
@@ -68,7 +79,7 @@ export default class extends Controller {
 
     // Encode the filters and their values
     if (filtered && Object.keys(filtered).length > 0) {
-      encodedFilters = this.b64EncodeUnicode(JSON.stringify(filtered))
+      encodedFilters = this.encode(filtered)
     }
 
     this.navigateToURLWithFilters(encodedFilters)

data/app/javascript/js/controllers/tabs_controller.js

@@ -1,74 +1,70 @@
 import { Controller } from '@hotwired/stimulus'
-import { castBoolean } from '../helpers/cast_boolean'
 
 export default class extends Controller {
-  static targets = ['tabPanel'];
+  static targets = ['tabPanel']
 
   static values = {
     view: String,
     activeTab: String,
-  };
-
-  get currentTab() {
-    return this.tabPanelTargets.find(
-      (element) => element.dataset.tabId === this.activeTabValue,
-    )
+    groupId: String,
+    resourceName: String,
   }
 
-  targetTabPanel(id) {
-    return this.tabPanelTargets.find((element) => element.dataset.tabId === id)
+  connect() {
+    this.selectCurrentTab()
   }
 
-  async changeTab(e) {
-    // Stopping the link execution.
-    // We're going to reveal a lazy-loaded frame to fulfill the tab change.
-    e.preventDefault()
+  selectCurrentTab() {
+    const params = {}
+    Array.from(new URL(window.location).searchParams.entries()).forEach(([key, value]) => { params[key] = value })
 
-    const { params } = e
-    const { id } = params
+    const key = `resources.${this.resourceNameValue}.tabgroups.${this.groupIdValue}.selectedTab`
 
-    await this.setTheTargetPanelHeight(id)
+    // LocalStorage value
+    const lsValue = window.Avo.localStorage.get(key)
 
-    this.hideAllTabs()
-    this.revealTab(id)
-    this.markTabLoaded(id)
-
-    this.activeTabValue = id
-  }
+    let groupId = null
 
-  /**
-   * Sets the target container height to the previous panel height so we don't get jerky tab changes.
-   */
-  async setTheTargetPanelHeight(id) {
-    // Ignore this on edit.
-    // All tabs are loaded beforehand, they have their own height, and the page won't jiggle when the user toggles between them.
-    if (this.viewValue === 'edit' || this.viewValue === 'new') {
-      return
+    // if this tab group has a param in the address, select it
+    if (params[this.groupParam(this.groupIdValue)]) {
+      groupId = params[this.groupParam(this.groupIdValue)]
+    } else if (lsValue) {
+      groupId = lsValue
     }
 
-    // We don't need to add a height to this panel because it was loaded before
-    if (castBoolean(this.targetTabPanel(id).dataset.loaded)) {
-      return
+    if (this.getTabByName(groupId)) {
+      this.hideAllTabs()
+      this.revealTabByName(groupId)
     }
+  }
 
-    // Get the height of the active panel
-    const { height } = this.currentTab.getBoundingClientRect()
-    // Set it to the target panel
-    this.targetTabPanel(id).style.height = `${height}px`
+  getTabByName(id) {
+    return this.tabPanelTargets.find((element) => element.dataset.tabId === id)
+  }
 
-    // Wait until the panel loaded it's content and then remove the forced height
-    await this.targetTabPanel(id).loaded
-    this.targetTabPanel(id).style.height = ''
+  groupParam(groupId) {
+    return encodeURIComponent(`tab-group_${groupId}`)
   }
 
-  // Marking tab as loaded so we know to skip some things the next time the user clicks on it
-  markTabLoaded(id) {
-    this.targetTabPanel(id).dataset.loaded = true
+  async changeTab(e) {
+    e.preventDefault()
+    const { params } = e
+    const { groupId, tabName, resourceName } = params
+    const key = `resources.${resourceName}.tabgroups.${groupId}.selectedTab`
+
+    const u = new URL(window.location)
+    u.searchParams.set(this.groupParam(groupId), encodeURIComponent(tabName))
+    window.history.replaceState(null, '', u.pathname + u.search)
+
+    window.Avo.localStorage.set(key, tabName)
+
+    this.hideAllTabs()
+    this.revealTabByName(tabName)
   }
 
   // We're revealing the new tab that's lazy loaded by Turbo.
-  revealTab(id) {
-    this.targetTabPanel(id).classList.remove('hidden')
+  revealTabByName(name) {
+    this.getTabByName(name).classList.remove('hidden')
   }
 
   hideAllTabs() {

data/app/javascript/js/local-storage-service.js

@@ -0,0 +1,19 @@
+export class LocalStorageService {
+  prefix = 'avo'
+
+  prefixedKey(key) {
+    return `${this.prefix}.${key}`
+  }
+
+  get(key) {
+    return window.localStorage.getItem(this.prefixedKey(key))
+  }
+
+  set(key, value) {
+    return window.localStorage.setItem(this.prefixedKey(key), value)
+  }
+
+  remove(key) {
+    return window.localStorage.removeItem(this.prefixedKey(key))
+  }
+}

data/app/views/avo/home/_actions.html.erb

@@ -11,6 +11,6 @@
       </div>
     </div>
 
-    <a href="https://docs.avohq.io/2.0/actions.html" target="_blank" title="Avo Actions documentation" class="text-bold cursor-pointer block mt-2">Actions in the docs 👉</a>
+    <a href="https://docs.avohq.io/3.0/actions.html" target="_blank" title="Avo Actions documentation" class="text-bold cursor-pointer block mt-2">Actions in the docs 👉</a>
   </div>
 </div>

data/app/views/avo/home/_dashboards.html.erb

@@ -13,7 +13,7 @@
   </div>
 
   <p>
-    <a href="https://docs.avohq.io/2.0/dashboards.html" target="_blank" title="Avo Dashboards documentation">Docs</a>
+    <a href="https://docs.avohq.io/3.0/dashboards.html" target="_blank" title="Avo Dashboards documentation">Docs</a>
   </p>
 </div>
 

data/app/views/avo/home/_filters.html.erb

@@ -11,6 +11,6 @@
       </div>
     </div>
 
-    <a href="https://docs.avohq.io/2.0/filters.html" target="_blank" title="Avo Filters documentation" class="text-bold cursor-pointer block mt-2">Filters in the docs 👉</a>
+    <a href="https://docs.avohq.io/3.0/filters.html" target="_blank" title="Avo Filters documentation" class="text-bold cursor-pointer block mt-2">Filters in the docs 👉</a>
   </div>
 </div>

data/app/views/avo/home/_resources.html.erb

@@ -35,7 +35,7 @@
   <% end %>
 
   <p>
-    <a href="https://docs.avohq.io/2.0/resources.html" target="_blank" title="Avo Resources documentation">Docs</a>
+    <a href="https://docs.avohq.io/3.0/resources.html" target="_blank" title="Avo Resources documentation">Docs</a>
   </p>
 </div>
 

data/lib/avo/base_resource.rb

@@ -231,7 +231,7 @@ module Avo
     delegate :singular_name, to: :class
     delegate :plural_name, to: :class
     delegate :underscore_name, to: :class
-    delegate :underscore_name, to: :class
+    delegate :to_param, to: :class
     delegate :find_record, to: :class
     delegate :model_key, to: :class
     delegate :tab, to: :items_holder

data/lib/avo/concerns/has_items.rb

@@ -275,16 +275,23 @@ module Avo
             end
           end
           .select do |item|
-            # On location field we can have field coordinates and setters with different names like latitude and longitude
-            if !item.is_a?(Avo::Fields::LocationField) && !item.is_heading? && view.in?(%w[edit update new create])
-              if item.respond_to?(:id)
-                item.resource.record.respond_to?("#{item.id}=")
-              else
-                true
-              end
-            else
-              true
-            end
+            # Check if record has the setter method
+            # Next if the view is not on forms
+            next true if !view.in?(%w[edit update new create])
+
+            # Skip items that don't have an id
+            next true if !item.respond_to?(:id)
+
+            # Skip tab groups
+            # Skip headings
+            # Skip location fields
+            # On location field we can have field coordinates and setters with different names
+            #   like latitude and longitude
+            next true if item.is_a?(Avo::Resources::Items::TabGroup) ||
+              item.is_heading? ||
+              item.is_a?(Avo::Fields::LocationField)
+
+            item.resource.record.respond_to?("#{item.id}=")
           end
           .select do |item|
             # Check if the user is authorized to view it.

data/lib/avo/filters/base_filter.rb

@@ -23,8 +23,6 @@ module Avo
       class << self
         def decode_filters(filter_params)
           JSON.parse(Base64.decode64(filter_params))
-        rescue
-          {}
         end
 
         def encode_filters(filter_params)
@@ -67,7 +65,9 @@ module Avo
 
       # Fetch the applied filters from the params
       def applied_filters
-        self.class.decode_filters params[PARAM_KEY]
+        return {} if (filters_from_params = params[PARAM_KEY]).blank?
+
+        self.class.decode_filters filters_from_params
       end
 
       def visible_in_view(resource: nil, parent_resource: nil)

data/lib/avo/resources/items/holder.rb

@@ -37,11 +37,11 @@ class Avo::Resources::Items::Holder
     add_item field_parser.instance
   end
 
-  def tabs(tab = nil, **kwargs, &block)
+  def tabs(tab = nil, id: nil, name: nil, **kwargs, &block)
     if tab.present?
       add_item tab
     else
-      add_item Avo::Resources::Items::TabGroup::Builder.parse_block(parent: @parent, **kwargs, &block)
+      add_item Avo::Resources::Items::TabGroup::Builder.parse_block(parent: @parent, id: id, name: name, **kwargs, &block)
     end
   end
 

data/lib/avo/resources/items/tab.rb

@@ -24,6 +24,11 @@ class Avo::Resources::Items::Tab
     Avo::ExecutionContext.new(target: @name).handle
   end
 
+  def id
+    name.to_s.parameterize
+  end
+  alias_method :to_param, :id
+
   def turbo_frame_id(parent: nil)
     id = "#{Avo::Resources::Items::Tab.to_s.parameterize} #{name}".parameterize