Reload icon

app/components/avo/panel_component.html.erb

@@ -9,6 +9,11 @@
         <% end %>
         <div class="text-2xl tracking-normal font-semibold text-gray-800 truncate items-center flex flex-1" data-target="title">
           <span><%= @name %></span>
+          <% if @reload_button %>
+            <%= button_tag data: { controller: "panel-refresh", action: "click->panel-refresh#refresh" } do %>
+              <%= svg "heroicons/outline/arrow-path", class: "ml-2 text-2xl h-6 " %>
+            <% end %>
+          <% end %>
         </div>
         <% if description.present? %>
           <div class="text-sm tracking-normal font-medium text-gray-600" data-target="description">

app/components/avo/panel_component.rb

@@ -1,6 +1,8 @@
 # frozen_string_literal: true
 
 class Avo::PanelComponent < ViewComponent::Base
+  include Avo::ApplicationHelper
+
   attr_reader :title # deprecating title in favor of name
   attr_reader :name
   attr_reader :classes
@@ -15,7 +17,7 @@ class Avo::PanelComponent < ViewComponent::Base
   renders_one :footer_tools
   renders_one :footer
 
-  def initialize(name: nil, description: nil, body_classes: nil, data: {}, display_breadcrumbs: false, index: nil, classes: nil, **args)
+  def initialize(name: nil, description: nil, body_classes: nil, data: {}, display_breadcrumbs: false, index: nil, classes: nil, reload_button: nil, **args)
     # deprecating title in favor of name
     @title = args[:title]
     @name = name || title
@@ -25,6 +27,7 @@ def initialize(name: nil, description: nil, body_classes: nil, data: {}, display
     @data = data
     @display_breadcrumbs = display_breadcrumbs
     @index = index
+    @reload_button = reload_button
   end
 
   private

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

@@ -6,7 +6,7 @@
     **@resource.stimulus_data_attributes
   } do %>
   <%= render_cards_component %>
-  <%= render Avo::PanelComponent.new(name: title, description: description, data: { component: 'resources-index' }, display_breadcrumbs: @reflection.blank?) do |c| %>
+  <%= render Avo::PanelComponent.new(name: title, description: description, data: { component: 'resources-index' }, display_breadcrumbs: @reflection.blank?, reload_button: reload_button) do |c| %>
     <% c.with_tools do %>
       <% @resource.render_index_controls(item: singular_resource_name.downcase).each do |control| %>
         <%= render_control control %>

app/components/avo/views/resource_index_component.rb

@@ -220,4 +220,8 @@ def has_many_view_types?
   def dynamic_filters_component_id
     @dynamic_filters_component_id ||= "dynamic_filters_component_id_#{SecureRandom.hex(3)}"
   end
+
+  def reload_button
+    field&.reload_icon_enabled?
+  end
 end

app/javascript/js/controllers.js

@@ -12,6 +12,7 @@ import DashboardCardController from './controllers/dashboard_card_controller'
 import DateFieldController from './controllers/fields/date_field_controller'
 import EasyMdeController from './controllers/fields/easy_mde_controller'
 import FilterController from './controllers/filter_controller'
+import PanelRefreshController from './controllers/fields/panel_refresh_controller'
 import HiddenInputController from './controllers/hidden_input_controller'
 import InputAutofocusController from './controllers/input_autofocus_controller'
 import ItemSelectAllController from './controllers/item_select_all_controller'
@@ -48,6 +49,7 @@ application.register('boolean-filter', BooleanFilterController)
 application.register('copy-to-clipboard', CopyToClipboardController)
 application.register('dashboard-card', DashboardCardController)
 application.register('filter', FilterController)
+application.register('panel-refresh', PanelRefreshController)
 application.register('hidden-input', HiddenInputController)
 application.register('input-autofocus', InputAutofocusController)
 application.register('item-select-all', ItemSelectAllController)

app/javascript/js/controllers/fields/panel_refresh_controller.js

@@ -0,0 +1,15 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  refresh() {
+    const frame = this.context.scope.element.closest('turbo-frame')
+    this.element.querySelector('svg').classList.add('animate-spin')
+    if (frame) {
+      frame.reload()
+    } else {
+      console.error(
+        `Element with ID '${this.turboFrameIdValue}' not found.`,
+      )
+    }
+  }
+}

lib/avo/fields/concerns/reload_icon.rb

@@ -0,0 +1,17 @@
+module Avo
+  module Fields
+    module Concerns
+      module ReloadIcon
+        extend ActiveSupport::Concern
+
+        included do
+          attr_accessor :reload_button
+        end
+
+        def reload_icon_enabled?
+          Avo::ExecutionContext.new(target: @reload_button).handle
+        end
+      end
+    end
+  end
+end

lib/avo/fields/has_base_field.rb

@@ -3,6 +3,7 @@ module Fields
     class HasBaseField < BaseField
       include Avo::Fields::Concerns::IsSearchable
       include Avo::Fields::Concerns::UseResource
+      include Avo::Fields::Concerns::ReloadIcon
 
       attr_accessor :display
       attr_accessor :scope
@@ -14,7 +15,6 @@ class HasBaseField < BaseField
 
       def initialize(id, **args, &block)
         super(id, **args, &block)
-
         @scope = args[:scope].present? ? args[:scope] : nil
         @attach_scope = args[:attach_scope].present? ? args[:attach_scope] : nil
         @display = args[:display].present? ? args[:display] : :show
@@ -24,6 +24,7 @@ def initialize(id, **args, &block)
         @use_resource = args[:use_resource] || nil
         @discreet_pagination = args[:discreet_pagination] || false
         @link_to_child_resource = args[:link_to_child_resource] || false
+        @reload_button = args[:reload_button].present? ? args[:reload_button] : false
       end
 
       def field_resource

spec/dummy/app/avo/resources/team.rb

@@ -78,9 +78,12 @@ def fields
 
     field :admin, as: :has_one
     field :team_members, as: :has_many, through: :memberships, translation_key: "avo.resource_translations.team_members"
-    field :reviews, as: :has_many
+    field :reviews, as: :has_many,
+      reload_button: -> {
+        current_user.is_admin?
+      }
 
-    if params[:show_location_field] == '1'
+    if params[:show_location_field] == "1"
       # Example for error message when resource is missing
       field :locations, as: :has_many
     end

spec/system/avo/reload_button_spec.rb

@@ -0,0 +1,25 @@
+require "rails_helper"
+
+RSpec.describe "Reload button", type: :system do
+  describe "reload button" do
+    let!(:user) { create :user, id: 39 }
+    let!(:team) { create :team, id: 4 }
+    let!(:review) { create :review, reviewable: team, user: user, body: "Initial review body" }
+    context "Teams" do
+      it "press the reload button and it will refresh the Turbo-Frame", js: true do
+        visit "/admin/resources/teams/4"
+        scroll_to find('turbo-frame[id="has_many_field_show_reviews"]')
+
+        expect(page).to have_content("Initial review body")
+
+        review.update(body: "Updated review body")
+
+        expect(page).to have_content("Initial review body")
+
+        find("button[data-controller='panel-refresh']").click
+
+        expect(page).to have_content("Updated review body")
+      end
+    end
+  end
+end