feat(dashboard): Allow setting a tooltip for disabled action items (#…

…10234)

**What**
- Allow passing a `disabledTooltip` for actions in a `ActionMenu`. Useful for providing context for the user why a option is disabled. E.g. `{ disabled: sales_channel.is_default, disabledTooltip: "Deleting the default Sales Channel is not allowed. Please assign a different default Sales Channel for your store". }`

.changeset/orange-buses-repair.md

@@ -0,0 +1,5 @@
+---
+"@medusajs/dashboard": patch
+---
+
+feat(dashboard): Allow setting a tooltip for disabled action items

packages/admin/dashboard/src/components/common/action-menu/action-menu.tsx

@@ -3,11 +3,16 @@ import { DropdownMenu, IconButton, clx } from "@medusajs/ui"
 import { EllipsisHorizontal } from "@medusajs/icons"
 import { ReactNode } from "react"
 import { Link } from "react-router-dom"
+import { ConditionalTooltip } from "../conditional-tooltip"
 
 export type Action = {
   icon: ReactNode
   label: string
   disabled?: boolean
+  /**
+   * Optional tooltip to display when a disabled action is hovered.
+   */
+  disabledTooltip?: string | ReactNode
 } & (
   | {
       to: string
@@ -46,30 +51,43 @@ export const ActionMenu = ({ groups }: ActionMenuProps) => {
           return (
             <DropdownMenu.Group key={index}>
               {group.actions.map((action, index) => {
+                const Wrapper = action.disabledTooltip
+                  ? ({ children }: { children: ReactNode }) => (
+                      <ConditionalTooltip
+                        showTooltip={action.disabled}
+                        content={action.disabledTooltip}
+                        side="right"
+                      >
+                        <div>{children}</div>
+                      </ConditionalTooltip>
+                    )
+                  : "div"
+
                 if (action.onClick) {
                   return (
-                    <DropdownMenu.Item
-                      disabled={action.disabled}
-                      key={index}
-                      onClick={(e) => {
-                        e.stopPropagation()
-                        action.onClick()
-                      }}
-                      className={clx(
-                        "[&_svg]:text-ui-fg-subtle flex items-center gap-x-2",
-                        {
-                          "[&_svg]:text-ui-fg-disabled": action.disabled,
-                        }
-                      )}
-                    >
-                      {action.icon}
-                      <span>{action.label}</span>
-                    </DropdownMenu.Item>
+                    <Wrapper key={index}>
+                      <DropdownMenu.Item
+                        disabled={action.disabled}
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          action.onClick()
+                        }}
+                        className={clx(
+                          "[&_svg]:text-ui-fg-subtle flex items-center gap-x-2",
+                          {
+                            "[&_svg]:text-ui-fg-disabled": action.disabled,
+                          }
+                        )}
+                      >
+                        {action.icon}
+                        <span>{action.label}</span>
+                      </DropdownMenu.Item>
+                    </Wrapper>
                   )
                 }
 
                 return (
-                  <div key={index}>
+                  <Wrapper key={index}>
                     <DropdownMenu.Item
                       className={clx(
                         "[&_svg]:text-ui-fg-subtle flex items-center gap-x-2",
@@ -85,7 +103,7 @@ export const ActionMenu = ({ groups }: ActionMenuProps) => {
                         <span>{action.label}</span>
                       </Link>
                     </DropdownMenu.Item>
-                  </div>
+                  </Wrapper>
                 )
               })}
               {!isLast && <DropdownMenu.Separator />}