fix: updated the tooltip and ui for module select

This commit is contained in:
gurusainath 2024-02-20 15:46:35 +05:30
parent 4bf7ea9687
commit 499d5ea006

View File

@ -77,12 +77,16 @@ const ButtonContent: React.FC<ButtonContentProps> = (props) => {
return ( return (
<> <>
{showCount ? ( {showCount ? (
<> <div className="relative flex items-center gap-1">
{!hideIcon && <DiceIcon className="h-3 w-3 flex-shrink-0" />} {!hideIcon && <DiceIcon className="h-3 w-3 flex-shrink-0" />}
<span className="flex-grow truncate text-left"> <div className="flex-grow truncate max-w-40">
{value.length > 0 ? `${value.length} Module${value.length === 1 ? "" : "s"}` : placeholder} {value.length > 0
</span> ? value.length === 1
</> ? `${getModuleById(value[0])?.name || "module"}`
: `${value.length} Module${value.length === 1 ? "" : "s"}`
: placeholder}
</div>
</div>
) : value.length > 0 ? ( ) : value.length > 0 ? (
<div className="flex items-center gap-2 py-0.5 flex-wrap"> <div className="flex items-center gap-2 py-0.5 flex-wrap">
{value.map((moduleId) => { {value.map((moduleId) => {
@ -298,7 +302,12 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
isActive={isOpen} isActive={isOpen}
tooltipHeading="Module" tooltipHeading="Module"
tooltipContent={ tooltipContent={
Array.isArray(value) ? `${value?.length ?? 0} module${value?.length !== 1 ? "s" : ""}` : "" Array.isArray(value)
? `${value
.map((moduleId) => getModuleById(moduleId)?.name)
.toString()
.replaceAll(",", ", ")}`
: ""
} }
showTooltip={showTooltip} showTooltip={showTooltip}
variant={buttonVariant} variant={buttonVariant}