fix(site): update Combobox to use ExternalImage instead of Avatar

ssncferreira · ssncferreira · commit e1e3d3749a73 · 2025-07-28T18:16:14.000Z
diff --git a/site/src/components/Combobox/Combobox.tsx b/site/src/components/Combobox/Combobox.tsx
@@ -1,4 +1,3 @@
-import { Avatar } from "components/Avatar/Avatar";
 import { Button } from "components/Button/Button";
 import {
 	Command,
@@ -23,6 +22,7 @@ import { Check, ChevronDown, CornerDownLeft } from "lucide-react";
 import { Info } from "lucide-react";
 import { type FC, type KeyboardEventHandler, useState } from "react";
 import { cn } from "utils/cn";
+import { ExternalImage } from "../ExternalImage/ExternalImage";
 
 interface ComboboxProps {
 	value: string;
@@ -118,13 +118,16 @@ export const Combobox: FC<ComboboxProps> = ({
 										onSelect(currentValue === value ? "" : currentValue);
 									}}
 								>
-									{showIcons && (
-										<Avatar
-											size="sm"
-											src={option.icon}
-											fallback={option.value}
-										/>
-									)}
+									{showIcons &&
+										(option.icon ? (
+											<ExternalImage
+												className="w-4 h-4 object-contain"
+												src={option.icon}
+												alt={option.displayName}
+											/>
+										) : (
+											<span className="w-4 h-4"> </span>
+										))}
 									{option.displayName}
 									<div className="flex flex-row items-center ml-auto gap-1">
 										{value === option.value && (
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
@@ -6,7 +6,6 @@ import { Alert } from "components/Alert/Alert";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { Avatar } from "components/Avatar/Avatar";
 import { Button } from "components/Button/Button";
-import { SelectFilter } from "components/Filter/SelectFilter";
 import {
 	FormFields,
 	FormFooter,
@@ -42,10 +41,10 @@ import {
 	useValidationSchemaForRichParameters,
 } from "utils/richParameters";
 import * as Yup from "yup";
+import { Combobox } from "../../components/Combobox/Combobox";
 import type { CreateWorkspaceMode } from "./CreateWorkspacePage";
 import { ExternalAuthButton } from "./ExternalAuthButton";
 import type { CreateWorkspacePermissions } from "./permissions";
-import {Combobox} from "../../components/Combobox/Combobox";
 
 export const Language = {
 	duplicationWarning:
@@ -384,7 +383,9 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
 									<Stack direction="column" spacing={2}>
 										<Stack direction="row" spacing={2}>
 											<Combobox
-												value={presetOptions[selectedPresetIndex]?.displayName || ""}
+												value={
+													presetOptions[selectedPresetIndex]?.displayName || ""
+												}
 												options={presetOptions}
 												placeholder="Select a preset"
 												onSelect={(value) => {
@@ -397,7 +398,10 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
 													setSelectedPresetIndex(index);
 													form.setFieldValue(
 														"template_version_preset_id",
-														presetOptions[index].value === "" ? undefined : presetOptions[index].value,
+														// Empty string is equivalent to using None
+														presetOptions[index].value === ""
+															? undefined
+															: presetOptions[index].value,
 													);
 												}}
 											/>
