From 61b6562f9aa5ac03a6a5676fb37861e750419d94 Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden.halko@gmail.com>
Date: Thu, 3 Jul 2025 10:55:20 +0100
Subject: [PATCH] feat: display descriptions in multi-select component (#18730)

<img width="528" alt="Screenshot 2025-07-02 at 23 06 51"
src="https://github.com/user-attachments/assets/d6223d99-bc1b-4325-8eb6-d87a687bcec8"
/>
---
 .../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 2d25ae983c..936e93034c 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 5665129ead..ac0df20355 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,
 			}));