feat: display descriptions in multi-select component (#18730)

jaaydenh · web-flow · commit 61b6562f9aa5 · 2025-07-03T05:55:20.000-04:00
diff --git a/site/src/components/MultiSelectCombobox/MultiSelectCombobox.tsx b/site/src/components/MultiSelectCombobox/MultiSelectCombobox.tsx
@@ -11,8 +11,14 @@ import {
 	CommandItem,
 	CommandList,
 } from "components/Command/Command";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "components/Tooltip/Tooltip";
 import { useDebouncedValue } from "hooks/debounce";
-import { ChevronDown, X } from "lucide-react";
+import { ChevronDown, Info, X } from "lucide-react";
 import {
 	type ComponentProps,
 	type ComponentPropsWithoutRef,
@@ -33,6 +39,7 @@ export interface Option {
 	label: string;
 	icon?: string;
 	disable?: boolean;
+	description?: string;
 	/** fixed option that can't be removed. */
 	fixed?: boolean;
 	/** Group the options by providing key. */
@@ -662,6 +669,23 @@ export const MultiSelectCombobox = forwardRef<
 																	/>
 																)}
 																{option.label}
+																{option.description && (
+																	<TooltipProvider delayDuration={100}>
+																		<Tooltip>
+																			<TooltipTrigger asChild>
+																				<span className="flex items-center pointer-events-auto">
+																					<Info className="!w-3.5 !h-3.5 text-content-secondary" />
+																				</span>
+																			</TooltipTrigger>
+																			<TooltipContent
+																				side="right"
+																				sideOffset={10}
+																			>
+																				{option.description}
+																			</TooltipContent>
+																		</Tooltip>
+																	</TooltipProvider>
+																)}
 															</div>
 														</CommandItem>
 													);
diff --git a/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx b/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
@@ -488,6 +488,7 @@ const ParameterField: FC<ParameterFieldProps> = ({
 				value: opt.value.value,
 				label: opt.name,
 				icon: opt.icon,
+				description: opt.description,
 				disable: false,
 			}));
 
