fix: disable non standalone actions on custom controls (#3365)

* fix: disable non standalone actions on custom controls

* fix

* properly hydrate actions on row controls

* adjust the item selector controller to function without an actions dropdown

app/components/avo/actions_component.rb

@@ -34,6 +34,13 @@ class Avo::ActionsComponent < Avo::BaseComponent
 
   def after_initialize
     filter_actions unless @custom_list
+
+    # Hydrate each action action with the record when rendering a list on row controls
+    if @as_row_control
+      @actions.each do |action|
+        action.hydrate(resource: @resource, record: @resource.record) if action.respond_to?(:hydrate)
+      end
+    end
   end
 
   def render?
@@ -52,23 +59,8 @@ def filter_actions
     end
   end
 
-  # How should the action be displayed by default
-  def is_disabled?(action)
-    return false if action.standalone || @as_row_control
-
-    on_index_page?
-  end
-
   private
 
-  def on_record_page?
-    @view.in?(["show", "edit", "new"])
-  end
-
-  def on_index_page?
-    !on_record_page?
-  end
-
   def icon(icon)
     svg icon, class: "h-5 shrink-0 mr-1 inline pointer-events-none"
   end
@@ -112,15 +104,17 @@ def action_data_attributes(action)
       "turbo-frame": Avo::MODAL_FRAME_ID,
       action: "click->actions-picker#visitAction",
       "actions-picker-target": action.standalone ? "standaloneAction" : "resourceAction",
-      disabled: is_disabled?(action),
+      disabled: action.disabled?,
       turbo_prefetch: false,
+      enabled_classes: "text-black",
+      disabled_classes: "text-gray-500"
     }
   end
 
   def action_css_class(action)
     helpers.class_names("flex items-center px-4 py-3 w-full font-semibold text-sm hover:bg-primary-100", {
-      "text-gray-500": is_disabled?(action),
-      "text-black": !is_disabled?(action),
+      "text-gray-500": action.disabled?,
+      "text-black": action.enabled?,
     })
   end
 end

app/components/avo/resource_component.rb

@@ -282,10 +282,14 @@ def render_action(action)
       title: action.title,
       size: action.size,
       data: {
+        controller: "actions-picker",
         turbo_frame: Avo::MODAL_FRAME_ID,
         action_name: action.action.action_name,
         tippy: action.title ? :tooltip : nil,
         action: "click->actions-picker#visitAction",
+        turbo_prefetch: false,
+        "actions-picker-target": action.action.standalone ? "standaloneAction" : "resourceAction",
+        disabled: action.action.disabled?
       } do
       action.label
     end

app/javascript/js/controllers/item_selector_controller.js

@@ -1,16 +1,14 @@
 import { Controller } from '@hotwired/stimulus'
 
 export default class extends Controller {
-  static targets = ['panel'];
+  static targets = ['panel']
 
-  checkbox = {};
+  checkbox = {}
 
-  enabledClasses = ['text-black']
-
-  disabledClasses = ['text-gray-500']
-
-  get actionsPanelPresent() {
-    return this.actionsButtonElement !== null
+  get actionLinks() {
+    return document.querySelectorAll(
+      'a[data-actions-picker-target="resourceAction"]',
+    )
   }
 
   get currentIds() {
@@ -21,16 +19,10 @@ export default class extends Controller {
     }
   }
 
-  get actionLinks() {
-    return document.querySelectorAll(
-      '.js-actions-dropdown a[data-actions-picker-target="resourceAction"]',
-    )
-  }
-
   set currentIds(value) {
     this.stateHolderElement.dataset.selectedResources = JSON.stringify(value)
 
-    if (this.actionsPanelPresent) {
+    if (this.actionLinks.length > 0) {
       if (value.length > 0) {
         this.enableResourceActions()
       } else {
@@ -42,9 +34,6 @@ export default class extends Controller {
   connect() {
     this.resourceName = this.element.dataset.resourceName
     this.resourceId = this.element.dataset.resourceId
-    this.actionsButtonElement = document.querySelector(
-      `[data-actions-dropdown-button="${this.resourceName}"]`,
-    )
     this.stateHolderElement = document.querySelector(
       `[data-selected-resources-name="${this.resourceName}"]`,
     )
@@ -76,17 +65,17 @@ export default class extends Controller {
 
   enableResourceActions() {
     this.actionLinks.forEach((link) => {
-      link.classList.add(...this.enabledClasses)
-      link.classList.remove(...this.disabledClasses)
+      link.classList.add(link.dataset.enabledClasses)
+      link.classList.remove(link.dataset.disabledClasses)
       link.setAttribute('data-href', link.getAttribute('href'))
       link.dataset.disabled = false
     })
   }
 
   disableResourceActions() {
     this.actionLinks.forEach((link) => {
-      link.classList.remove(...this.enabledClasses)
-      link.classList.add(...this.disabledClasses)
+      link.classList.remove(link.dataset.enabledClasses)
+      link.classList.add(link.dataset.disabledClasses)
       link.setAttribute('href', link.getAttribute('data-href'))
       link.dataset.disabled = true
     })

lib/avo/base_action.rb

@@ -2,6 +2,7 @@ module Avo
   class BaseAction
     include Avo::Concerns::HasItems
     include Avo::Concerns::HasActionStimulusControllers
+    include Avo::Concerns::Hydration
 
     class_attribute :name, default: nil
     class_attribute :message
@@ -292,6 +293,14 @@ def append_to_response(turbo_stream)
       @appended_turbo_streams = turbo_stream
     end
 
+    def enabled?
+      self.class.standalone || @record&.persisted?
+    end
+
+    def disabled?
+      !enabled?
+    end
+
     private
 
     def add_message(body, type = :info)