From 217b85864bb163c85642c6865f9364d704b303ed Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden@coder.com>
Date: Wed, 2 Jul 2025 22:08:45 +0000
Subject: [PATCH] feat: display descriptions in multi-select component

---
 .../MultiSelectCombobox.tsx                   | 26 ++++++++++++++++++-
 .../DynamicParameter/DynamicParameter.tsx     |  1 +
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/site/src/components/MultiSelectCombobox/MultiSelectCombobox.tsx b/site/src/components/MultiSelectCombobox/MultiSelectCombobox.tsx
index 2d25ae983c3d9..936e93034c705 100644
--- 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
index 5665129eadba3..ac0df20355205 100644
--- 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,
 			}));