avo 2.49.0 → 3.0.0.beta1

data/app/components/avo/paginator_component.rb

@@ -5,41 +5,23 @@ class Avo::PaginatorComponent < ViewComponent::Base
   attr_reader :turbo_frame
   attr_reader :index_params
   attr_reader :resource
-  attr_reader :parent_model
+  attr_reader :parent_record
   attr_reader :discreet_pagination
 
-  def initialize(resource: nil, parent_model: nil, pagy: nil, turbo_frame: nil, index_params: nil, discreet_pagination: nil)
+  def initialize(resource: nil, parent_record: nil, pagy: nil, turbo_frame: nil, index_params: nil, discreet_pagination: nil)
     @pagy = pagy
     @turbo_frame = turbo_frame
     @index_params = index_params
     @resource = resource
-    @parent_model = parent_model
+    @parent_record = parent_record
     @discreet_pagination = discreet_pagination
   end
 
   def change_items_per_page_url(option)
-    if parent_model.present?
-      helpers.related_resources_path(parent_model, parent_model, per_page: option, keep_query_params: true, page: 1)
+    if parent_record.present?
+      helpers.related_resources_path(parent_record, parent_record, per_page: option, keep_query_params: true, page: 1)
     else
       helpers.resources_path(resource: resource, per_page: option, keep_query_params: true, page: 1)
     end
   end
-
-  def render?
-    return false if discreet_pagination && pagy.pages <= 1
-
-    @pagy.items > 0
-  end
-
-  def per_page_options
-    @per_page_options ||= begin
-      options = [*Avo.configuration.per_page_steps, Avo.configuration.per_page.to_i, index_params[:per_page].to_i]
-
-      if parent_model.present?
-        options.prepend Avo.configuration.via_per_page
-      end
-
-      options.sort.uniq
-    end
-  end
 end

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

@@ -1,6 +1,6 @@
 <%= content_tag :div, data: data_attributes, class: classes do %>
   <% if render_header? %>
-    <div class="flex-1 flex flex-col xl:flex-row justify-between mb-4">
+    <div data-target="panel-header" class="flex-1 flex flex-col xl:flex-row justify-between mb-4">
       <div class="overflow-hidden flex flex-col">
         <% if display_breadcrumbs? %>
           <div class="breadcrumbs truncate mb-2">
@@ -24,7 +24,7 @@
     </div>
   <% end %>
   <% if body? %>
-    <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:gap-4 w-full">
+    <div data-target="panel-body" class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:gap-4 w-full">
       <div class="relative flex-1 w-full <% if sidebar? %> sm:w-2/3 <% end %>">
         <% # The body is wrapped inside another div in order to avoid long & tall panels next to sidebars when the sidebar taller. %>
         <div class="relative <%= white_panel_classes %> <%= @body_classes %>">
@@ -32,24 +32,26 @@
         </div>
       </div>
       <% if sidebar? %>
-        <div class="max-w-full sm:w-1/3 flex-shrink-0 h-full <%= white_panel_classes %>">
+        <div class="w-full sm:w-1/3 flex-shrink-0 h-full <%= white_panel_classes %>">
           <%= sidebar %>
         </div>
       <% end %>
       <% if bare_sidebar? %>
-        <div class="max-w-full sm:w-1/3 flex-shrink-0 h-full">
+        <div class="w-full sm:w-1/3 flex-shrink-0 h-full">
           <%= bare_sidebar %>
         </div>
       <% end %>
     </div>
   <% end %>
   <% if bare_content? %>
-    <div class="relative">
+    <div data-target="panel-bare-content" class="relative">
       <%= bare_content %>
     </div>
   <% end %>
   <% if footer_tools? %>
-    <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">
+    <div
+      data-target="panel-footer-tools"
+      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 %>

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

@@ -1,7 +1,6 @@
 <%# via_association_type is used in has_one create actions %>
 <%= hidden_field_tag :via_association_type, params[:via_association_type] if params[:via_association_type] %>
 <%= hidden_field_tag :via_resource_class, params[:via_resource_class] if params[:via_resource_class] %>
-<%= hidden_field_tag :via_resource_id, params[:via_resource_id] if params[:via_resource_id] %>
+<%= hidden_field_tag :via_record_id, params[:via_record_id] if params[:via_record_id] %>
 <%= hidden_field_tag :via_relation, params[:via_relation] if params[:via_relation] %>
-<%= hidden_field_tag :via_belongs_to_resource_class, params[:via_belongs_to_resource_class] if params[:via_belongs_to_resource_class] %>
 <%= hidden_field_tag :referrer, back_path if params[:via_resource_class] %>

data/app/components/avo/resource_component.rb

@@ -20,7 +20,7 @@ class Avo::ResourceComponent < Avo::BaseComponent
   end
 
   def can_detach?
-    return false if @reflection.blank? || @resource.model.blank? || !authorize_association_for(:detach)
+    return false if @reflection.blank? || @resource.record.blank? || !authorize_association_for(:detach)
 
     # If the inverse_of is a belongs_to, we need to check if it's optional in order to know if we can detach it.
     if inverse_of.is_a?(ActiveRecord::Reflection::BelongsToReflection)
@@ -33,7 +33,7 @@ class Avo::ResourceComponent < Avo::BaseComponent
   def detach_path
     return "/" if @reflection.blank?
 
-    helpers.resource_detach_path(params[:resource_name], params[:id], @reflection.name.to_s, @resource.model.to_param)
+    helpers.resource_detach_path(params[:resource_name], params[:id], @reflection.name.to_s, @resource.record.to_param)
   end
 
   def can_see_the_edit_button?
@@ -44,7 +44,9 @@ class Avo::ResourceComponent < Avo::BaseComponent
     @resource.authorization.authorize_action(:destroy, raise_exception: false)
   end
 
-  def can_act_on?
+  def can_see_the_actions_button?
+    return false if @actions.blank?
+
     return authorize_association_for(:act_on) if @reflection.present?
 
     @resource.authorization.authorize_action(:act_on, raise_exception: false) && !has_reflection_and_is_read_only
@@ -52,9 +54,9 @@ class Avo::ResourceComponent < Avo::BaseComponent
 
   def destroy_path
     if params[:via_resource_class].present?
-      helpers.resource_path(model: @resource.model, resource: @resource, referrer: back_path)
+      helpers.resource_path(record: @resource.record, resource: @resource, referrer: back_path)
     else
-      helpers.resource_path(model: @resource.model, resource: @resource)
+      helpers.resource_path(record: @resource.record, resource: @resource)
     end
   end
 
@@ -65,9 +67,9 @@ class Avo::ResourceComponent < Avo::BaseComponent
     if @reflection.present?
       # Fetch the appropiate resource
       reflection_resource = field.resource
-      # Fetch the model
-      # Hydrate the resource with the model if we have one
-      reflection_resource.hydrate(model: @parent_model) if @parent_model.present?
+      # Fetch the record
+      # Hydrate the resource with the record if we have one
+      reflection_resource.hydrate(record: @parent_record) if @parent_record.present?
       # Use the related_name as the base of the association
       association_name = @reflection.name
 
@@ -80,16 +82,17 @@ class Avo::ResourceComponent < Avo::BaseComponent
         if service.has_method?(method_name, raise_exception: false)
           # Some policy methods should get the parent record in order to have the necessarry information to do the authorization
           # Example: Post->has_many->Comments
+          #
           # When you want to authorize the creation/attaching of a Comment, you don't have the Comment instance.
           # But you do have the Post instance and you can get that in your policy to authorize against.
           parent_policy_methods = [:view, :create, :attach, :act_on]
 
           record = if parent_policy_methods.include?(policy_method)
             # Use the parent record (Post)
-            reflection_resource.model
+            reflection_resource.record
           else
             # Override the record with the child record (Comment)
-            resource.model
+            resource.record
           end
           policy_result = service.authorize_action(method_name, record: record, raise_exception: false)
         end
@@ -106,7 +109,7 @@ class Avo::ResourceComponent < Avo::BaseComponent
   end
 
   def sidebar
-    return if Avo::App.license.lacks_with_trial(:resource_sidebar)
+    return if Avo.license.lacks_with_trial(:resource_sidebar)
 
     @sidebar ||= search_for_sidebar
   end
@@ -117,23 +120,28 @@ class Avo::ResourceComponent < Avo::BaseComponent
 
   def has_reflection_and_is_read_only
     if @reflection.present? && @reflection.active_record.name && @reflection.name
-      fields = ::Avo::App.get_resource_by_model_name(@reflection.active_record.name).get_field_definitions
+      resource = Avo.resource_manager.get_resource_by_model_class(@reflection.active_record.name).new(params: helpers.params, view: view, user: helpers._current_user)
+      fields = resource.get_field_definitions
       filtered_fields = fields.filter { |f| f.id == @reflection.name }
     else
       return false
     end
 
     if filtered_fields.present?
-      filtered_fields.find { |f| f.id == @reflection.name }.is_readonly?
+      filtered_fields.find { |f| f.id == @reflection.name }.is_disabled?
     else
       false
     end
   end
 
+  def render_control(control)
+    send "render_#{control.type}", control
+  end
+
   private
 
   def via_resource?
-    (params[:via_resource_class].present? || params[:via_relation_class].present?) && params[:via_resource_id].present?
+    (params[:via_resource_class].present? || params[:via_relation_class].present?) && params[:via_record_id].present?
   end
 
   def search_for_sidebar
@@ -144,6 +152,173 @@ class Avo::ResourceComponent < Avo::BaseComponent
     item&.hydrate(view: view)
   end
 
+  def render_back_button(control)
+    return if is_a_related_resource?
+
+    tippy = control.title ? :tooltip : nil
+    a_link back_path,
+      style: :text,
+      title: control.title,
+      data: {tippy: tippy},
+      icon: "arrow-left" do
+      control.label
+    end
+  end
+
+  def render_actions_list(actions_list)
+    return unless can_see_the_actions_button?
+
+    render Avo::ActionsComponent.new(
+      actions: @actions,
+      resource: @resource,
+      view: @view,
+      exclude: actions_list.exclude,
+      include: actions_list.include,
+      style: actions_list.style,
+      color: actions_list.color,
+      label: actions_list.label,
+      size: actions_list.size,
+      as_row_control: instance_of?(Avo::Index::ResourceControlsComponent)
+    )
+  end
+
+  def render_delete_button(control)
+    # If the resource is a related resource, we use the can_delete? policy method because it uses
+    # authorize_association_for(:destroy).
+    # Otherwise we use the can_see_the_destroy_button? policy method becuse it do no check for assiciation
+    # only for authorize_action .
+    policy_method = is_a_related_resource? ? :can_delete? : :can_see_the_destroy_button?
+    return unless send policy_method
+
+    a_link destroy_path,
+      style: :text,
+      color: :red,
+      icon: "trash",
+      form_class: "flex flex-col sm:flex-row sm:inline-flex",
+      title: control.title,
+      data: {
+        turbo_confirm: t("avo.are_you_sure", item: @resource.record.model_name.name.downcase),
+        turbo_method: :delete,
+        target: "control:destroy",
+        control: :destroy,
+        tippy: control.title ? :tooltip : nil,
+        "resource-id": @resource.record.id,
+      } do
+      control.label
+    end
+  end
+
+  def render_save_button(control)
+    return unless can_see_the_save_button?
+
+    a_button color: :primary,
+      style: :primary,
+      loading: true,
+      type: :submit,
+      icon: "save" do
+      control.label
+    end
+  end
+
+  def render_edit_button(control)
+    return unless can_see_the_edit_button?
+
+    a_link edit_path,
+      color: :primary,
+      style: :primary,
+      title: control.title,
+      data: {tippy: control.title ? :tooltip : nil},
+      icon: "edit" do
+      control.label
+    end
+  end
+
+  def render_detach_button(control)
+    return unless is_a_related_resource? && can_detach?
+
+    a_button url: detach_path,
+      icon: "detach",
+      method: :delete,
+      form_class: "flex flex-col sm:flex-row sm:inline-flex",
+      style: :text,
+      data: {
+        confirm: "Are you sure you want to detach this #{title}."
+      } do
+      control.label || t("avo.detach_item", item: title).humanize
+    end
+  end
+
+  def render_create_button(control)
+    return unless can_see_the_create_button?
+
+    a_link create_path,
+      color: :primary,
+      style: :primary,
+      icon: "heroicons/outline/plus",
+      data: {
+        target: :create
+      } do
+      control.label
+    end
+  end
+
+  def render_attach_button(control)
+    return unless can_attach?
+
+    a_link attach_path,
+      icon: "heroicons/outline/link",
+      color: :primary,
+      style: :text,
+      data: {
+        turbo_frame: :attach_modal,
+        target: :attach
+      } do
+      control.label
+    end
+  end
+
+  def render_link_to(link)
+    a_link link.path,
+      color: link.color,
+      style: link.style,
+      icon: link.icon,
+      icon_class: link.icon_class,
+      title: link.title, target: link.target,
+      class: link.classes,
+      size: link.size,
+      data: {
+        **link.data,
+        tippy: link.title ? :tooltip : nil,
+      } do
+      link.label
+    end
+  end
+
+  def render_action(action)
+    return if !can_see_the_actions_button?
+    return if !action.action.visible_in_view(parent_resource: @parent_resource)
+
+    a_link action.path,
+      color: action.color,
+      style: action.style,
+      icon: action.icon,
+      icon_class: action.icon_class,
+      title: action.title,
+      size: action.size,
+      data: {
+        turbo_frame: "actions_show",
+        action_name: action.action.action_name,
+        tippy: action.title ? :tooltip : nil,
+        action: "click->actions-picker#visitAction",
+      } do
+      action.label
+    end
+  end
+
+  def is_a_related_resource?
+    @reflection.present? && @resource.record.present?
+  end
+
   def inverse_of
     current_reflection = @reflection.active_record.reflect_on_all_associations.find do |reflection|
       reflection.name == @reflection.name.to_sym

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

@@ -1,9 +1,13 @@
-<div class="resource-sidebar-component divide-y">
+<div class="resource-sidebar-component divide-y"
+  data-component-name="<%= self.class.to_s.underscore%>"
+  data-resource-name="<%= @resource.class.to_s %>"
+  data-record-id="<%= @resource.record.id %>"
+>
   <% fields.each_with_index do |field, index| %>
     <%= render field
       .hydrate(
         resource: resource,
-        model: resource.model,
+        record: resource.record,
         user: resource.user,
         view: view
       ).component_for_view(view)

data/app/components/avo/resource_sidebar_component.rb

@@ -16,6 +16,6 @@ class Avo::ResourceSidebarComponent < ViewComponent::Base
   end
 
   def render?
-    Avo::App.license.has_with_trial(:resource_sidebar)
+    Avo.license.has_with_trial(:resource_sidebar)
   end
 end

data/app/components/avo/sidebar/link_component.rb

@@ -19,7 +19,7 @@ class Avo::Sidebar::LinkComponent < ViewComponent::Base
 
   def is_external?
     # If the path contains the scheme, check if it includes the root path or not
-    return !path.include?(Avo::App.root_path) if URI(path).scheme.present?
+    return !path.include?(Avo.mount_path) if URI(path).scheme.present?
 
     false
   end

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

@@ -13,8 +13,8 @@
       <div class="space-y-6 mb-4">
         <%= render Avo::Sidebar::LinkComponent.new label: 'Get started', path: helpers.avo.root_path, active: :exclusive if Rails.env.development? && Avo.configuration.home_path.nil? %>
 
-        <% if Avo::App.has_main_menu? %>
-          <% Avo::App.main_menu.items.each do |item| %>
+        <% if Avo.plugin_manager.installed?("avo-menu") && Avo.has_main_menu? %>
+          <% Avo.main_menu.items.each do |item| %>
             <%= render Avo::Sidebar::ItemSwitcherComponent.new item: item %>
           <% end %>
         <% else %>
@@ -57,7 +57,14 @@
         <%= render partial: "/avo/partials/sidebar_extra" %>
       </div>
     </div>
-    <%= helpers.render_license_warnings unless Rails.env.production? %>
+    <% if Rails.env.development? %>
+      <div class="p-4 border-t group">
+        <%= link_to helpers.avo.avo_private_status_path, class: "block px-4 py-2 border rounded flex justify-between items-center w-full text-black text-sm" do %>
+          <span>Avo Status</span> <span><div class="rounded-full w-4 h-4 <%= Avo.app_status ? "bg-green-400" : "bg-orange-400" %>"></div></span>
+        <% end %>
+        <div class="absolute text-xs text-gray-700 group-hover:block hidden text-center w-full -ml-4">👆Visible only in development👆</div>
+      </div>
+    <% end %>
     <%= render Avo::SidebarProfileComponent.new user: helpers._current_user %>
   </div>
 </div>

data/app/components/avo/sidebar_component.rb

@@ -7,15 +7,17 @@ class Avo::SidebarComponent < ViewComponent::Base
   end
 
   def dashboards
-    Avo::App.dashboards_for_navigation
+    return [] unless Avo.plugin_manager.installed?("avo-dashboards")
+
+    Avo::Dashboards.dashboard_manager.dashboards_for_navigation
   end
 
   def resources
-    Avo::App.resources_for_navigation
+    Avo.resource_manager.resources_for_navigation helpers._current_user
   end
 
   def tools
-    Avo::App.tools_for_navigation
+    Avo.tool_manager.tools_for_navigation
   end
 
   def stimulus_target

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

@@ -16,24 +16,31 @@
       <% end %>
     </div>
   </div>
-  <div class="relative" data-controller="toggle-panel">
-    <a class="flex items-center h-full cursor-pointer" data-control="profile-dots" data-action="click->toggle-panel#togglePanel">
+  <div class="relative" data-controller="toggle">
+    <a class="flex items-center h-full cursor-pointer" data-control="profile-dots" data-action="click->toggle#togglePanel">
       <%= helpers.svg 'three-dots', class: 'h-4' %>
     </a>
     <div
       class="hidden absolute flex flex-col inset-auto right-0 -mt-12 bg-white rounded min-w-[200px] shadow-context -translate-y-full z-40"
-      data-toggle-panel-target="panel"
+      data-toggle-target="panel"
+      data-transition-enter="transition ease-out duration-100"
+      data-transition-enter-start="transform opacity-0 translate-y-1"
+      data-transition-enter-end="transform opacity-100 translate-y-0"
+      data-transition-leave="transition ease-in duration-75"
+      data-transition-leave-start="transform opacity-100 translate-y-0"
+      data-transition-leave-end="transform opacity-0 translate-y-1"
     >
-      <% if Avo::App.has_profile_menu? %>
-        <div class="text-black">
-          <% Avo::App.profile_menu.items.each do |item| %>
+      <% if Avo.plugin_manager.installed?("avo-menu") && Avo.has_profile_menu? %>
+        <div class="text-black space-y-4">
+          <% Avo.profile_menu.items.each do |item| %>
             <% if item.is_a? Avo::Menu::Link %>
               <%= render Avo::ProfileItemComponent.new label: item.name, path: item.path, icon: item.icon, method: item.method, params: item.params %>
             <% end %>
           <% end %>
         </div>
       <% end %>
-      <%= render "avo/partials/profile_menu_extra" %>
+      <%# Example link below %>
+      <%#= render Avo::ProfileItemComponent.new label: 'Profile', path: '/profile', icon: 'user-circle' %>
       <% if can_destroy_user? %>
         <%= button_to helpers.main_app.send(destroy_user_session_path),
           form: { "data-turbo" => "false" },
@@ -45,7 +52,7 @@
           form_class: 'flex-1' do %>
           <%= helpers.svg 'logout', class: 'h-4 mr-1' %> <%= t('avo.sign_out') %>
         <% end %>
-      <% end %>
+    <% end %>
     </div>
   </div>
 </div>

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

@@ -32,19 +32,25 @@
       end
 
       if should_lazy_load
-        args[:src] = helpers.resource_path(resource: resource, model: resource.model, keep_query_params: true, active_tab_name: tab.name, tab_turbo_frame: group.turbo_frame_id)
+        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 %>
       <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, style: tabs_style %>
-        <% if !should_lazy_load && !tab.empty? %>
-          <div class="space-y-12">
-            <% tab.visible_items.each do |item| %>
-              <%= render Avo::ItemSwitcherComponent.new resource: resource, item: item, index: index, form: form, view: @view %>
-            <% end %>
+        <%= 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}" %>
           </div>
+        <% else %>
+          <% if !tab.is_empty? %>
+            <div class="space-y-12">
+              <% tab.visible_items.each do |item| %>
+                <%= render Avo::ItemSwitcherComponent.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

@@ -7,14 +7,13 @@ class Avo::TabGroupComponent < Avo::BaseComponent
   attr_reader :form
   attr_reader :resource
 
-  def initialize(resource:, group:, index:, form:, params:, view:, tabs_style:)
+  def initialize(resource:, group:, index:, form:, params:, view:)
     @resource = resource
     @group = group
     @index = index
     @form = form
     @params = params
     @view = view
-    @tabs_style = tabs_style
 
     @group.index = index
   end
@@ -50,8 +49,4 @@ class Avo::TabGroupComponent < Avo::BaseComponent
       tab.name.to_s == active_tab_name.to_s
     end
   end
-
-  def tabs_style
-    @tabs_style || Avo.configuration.tabs_style
-  end
 end

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

@@ -1,41 +1,18 @@
-<% if style == :tabs %>
-  <div class="flex overflow-auto mac-styled-scrollbar" data-target="tab-switcher" data-style="tabs">
-    <div class="button-group">
-      <% visible_items.each do |tab| %>
-        <%= a_link tab_path(tab),
-          color: selected?(tab) ? :primary : :gray ,
-          rounded: false,
-          size: :sm,
-          class: "active:outline-0 #{selected?(tab) ? "z-20" : "bg-gray-100 border-gray-300"}",
-          title: tab.description,
-          data: {
-            tippy: tab.description.present? ? 'tooltip' : '',
-            selected: selected?(tab),
-            action: 'click->tabs#changeTab',
-            tabs_id_param: tab.name
-          } do %>
-          <%= tab.name %>
-        <% end %>
-      <% end %>
-    </div>
-  </div>
-<% else %>
-  <div class="flex flex-wrap gap-2 p-2 <%= white_panel_classes %>" data-target="tab-switcher" data-style="pills">
-    <% 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 %>
-        <%= tab.name %>
-      <% end %>
+<div class="flex flex-wrap gap-2 p-2 <%= white_panel_classes %>" data-target="tab-switcher">
+  <% 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 %>
+      <%= tab.name %>
     <% end %>
-  </div>
-<% end %>
+  <% end %>
+</div>