diff --git a/.changeset/orange-buses-repair.md b/.changeset/orange-buses-repair.md new file mode 100644 index 0000000000..d074216504 --- /dev/null +++ b/.changeset/orange-buses-repair.md @@ -0,0 +1,5 @@ +--- +"@medusajs/dashboard": patch +--- + +feat(dashboard): Allow setting a tooltip for disabled action items diff --git a/packages/admin/dashboard/src/components/common/action-menu/action-menu.tsx b/packages/admin/dashboard/src/components/common/action-menu/action-menu.tsx index 58b17b186f..2ef6ca956d 100644 --- a/packages/admin/dashboard/src/components/common/action-menu/action-menu.tsx +++ b/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 ( {group.actions.map((action, index) => { + const Wrapper = action.disabledTooltip + ? ({ children }: { children: ReactNode }) => ( + +
{children}
+
+ ) + : "div" + if (action.onClick) { return ( - { - 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} - {action.label} - + + { + 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} + {action.label} + + ) } return ( -
+ { {action.label} -
+ ) })} {!isLast && }