fix(site): use ExternalImage for icon URLs (#25315)

site/src/modules/dashboard/Navbar/MobileMenu.tsx

@@ -22,6 +22,7 @@ import {
 	DropdownMenuSeparator,
 	DropdownMenuTrigger,
 } from "#/components/DropdownMenu/DropdownMenu";
+import { ExternalImage } from "#/components/ExternalImage/ExternalImage";
 import { Latency } from "#/components/Latency/Latency";
 import type { ProxyContextValue } from "#/contexts/ProxyContext";
 import { cn } from "#/utils/cn";
@@ -134,7 +135,7 @@ const ProxySettingsSub: FC<ProxySettingsSubProps> = ({ proxyContextValue }) => {
 				>
 					Workspace proxy settings:
 					<span className="leading-none flex items-center gap-1">
-						<img
+						<ExternalImage
 							className="w-4 h-4"
 							src={selectedProxy.icon_url}
 							alt={selectedProxy.name}
@@ -171,7 +172,11 @@ const ProxySettingsSub: FC<ProxySettingsSubProps> = ({ proxyContextValue }) => {
 									setOpen(false);
 								}}
 							>
-								<img className="w-4 h-4" src={p.icon_url} alt={p.name} />
+								<ExternalImage
+									className="w-4 h-4"
+									src={p.icon_url}
+									alt={p.name}
+								/>
 								{p.display_name || p.name}
 								{latency ? (
 									<Latency className="ml-auto" latency={latency.latencyMS} />

site/src/modules/dashboard/Navbar/ProxyMenu.tsx

@@ -14,6 +14,7 @@ import {
 	DropdownMenuSeparator,
 	DropdownMenuTrigger,
 } from "#/components/DropdownMenu/DropdownMenu";
+import { ExternalImage } from "#/components/ExternalImage/ExternalImage";
 import { Latency } from "#/components/Latency/Latency";
 import { Skeleton } from "#/components/Skeleton/Skeleton";
 import type { ProxyContextValue } from "#/contexts/ProxyContext";
@@ -79,7 +80,7 @@ export const ProxyMenu: FC<ProxyMenuProps> = ({ proxyContextValue }) => {
 
 					{selectedProxy ? (
 						<>
-							<img
+							<ExternalImage
 								// Empty alt text used because we don't want to double up on
 								// screen reader announcements from visually-hidden span
 								alt=""
@@ -150,7 +151,7 @@ export const ProxyMenu: FC<ProxyMenuProps> = ({ proxyContextValue }) => {
 									>
 										<div className="flex gap-3 items-center w-full">
 											<div className="leading-none size-4">
-												<img
+												<ExternalImage
 													src={proxy.icon_url}
 													alt=""
 													className="object-contain size-full"

site/src/modules/resources/AgentLogs/AgentLogs.tsx

@@ -2,6 +2,7 @@ import type { JSX } from "react";
 import { FixedSizeList as List } from "react-window";
 import type { WorkspaceAgentLogSource } from "#/api/typesGenerated";
 import { Badge } from "#/components/Badge/Badge";
+import { ExternalImage } from "#/components/ExternalImage/ExternalImage";
 import type { Line } from "#/components/Logs/LogLine";
 import {
 	Tooltip,
@@ -70,7 +71,7 @@ export const AgentLogs: React.FC<AgentLogsProps> = ({
 					// colored circle to identify unique scripts.
 					if (logSource.icon) {
 						icon = (
-							<img
+							<ExternalImage
 								src={logSource.icon}
 								alt=""
 								className="size-3.5 mr-2 shrink-0"

site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx

@@ -27,6 +27,7 @@ import {
 	ComboboxItem,
 	ComboboxTrigger,
 } from "#/components/Combobox/Combobox";
+import { ExternalImage } from "#/components/ExternalImage/ExternalImage";
 import {
 	HelpPopover,
 	HelpPopoverContent,
@@ -636,7 +637,7 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
 															value={preset.value}
 														>
 															{preset.icon && (
-																<img
+																<ExternalImage
 																	src={preset.icon}
 																	alt={preset.label}
 																	className="w-4 h-4"

site/src/pages/HealthPage/WorkspaceProxyPage.tsx

@@ -3,6 +3,7 @@ import type { FC } from "react";
 import { useOutletContext } from "react-router";
 import type { HealthcheckReport } from "#/api/typesGenerated";
 import { Alert } from "#/components/Alert/Alert";
+import { ExternalImage } from "#/components/ExternalImage/ExternalImage";
 import {
 	Tooltip,
 	TooltipContent,
@@ -73,7 +74,7 @@ const WorkspaceProxyPage: FC = () => {
 							<header className="p-6 flex items-center justify-between gap-6">
 								<div className="flex items-center gap-6">
 									<div className="w-9 h-9 flex items-center justify-center">
-										<img
+										<ExternalImage
 											src={region.icon_url}
 											className="object-fill w-full h-full"
 											alt=""

site/src/pages/LoginPage/OAuthSignInForm.tsx

@@ -77,7 +77,7 @@ const OidcIcon: FC<OidcIconProps> = ({ iconUrl }) => {
 	// if that happens, but also still need a way to inject accessible text
 	return (
 		<>
-			<img alt="" src={iconUrl} aria-labelledby={oidcId} />
+			<ExternalImage alt="" src={iconUrl} aria-labelledby={oidcId} />
 			<div id={oidcId} className="sr-only">
 				Open ID Connect
 			</div>

site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx

@@ -600,7 +600,7 @@ const ParameterUsageLabel: FC<ParameterUsageLabelProps> = ({
 			<div className="flex items-center gap-4">
 				{icon && (
 					<div className="leading-none w-4 h-4">
-						<img
+						<ExternalImage
 							alt=""
 							src={icon}
 							className="w-full h-full object-contain"

site/src/pages/UserSettingsPage/SecurityPage/SingleSignOnSection.tsx

@@ -222,7 +222,11 @@ const OIDCIcon: FC<OIDCIconProps> = ({ oidcAuth }) => {
 	}
 
 	return (
-		<img alt="Open ID Connect icon" src={oidcAuth.iconUrl} className="size-4" />
+		<ExternalImage
+			alt="Open ID Connect icon"
+			src={oidcAuth.iconUrl}
+			className="size-4"
+		/>
 	);
 };
 

site/src/pages/WorkspacePage/ResourcesSidebar.tsx

@@ -1,5 +1,6 @@
 import type { FC } from "react";
 import type { WorkspaceResource } from "#/api/typesGenerated";
+import { ExternalImage } from "#/components/ExternalImage/ExternalImage";
 import {
 	Sidebar,
 	SidebarCaption,
@@ -45,7 +46,7 @@ export const ResourcesSidebar: FC<ResourcesSidebarProps> = ({
 					className="leading-normal flex items-center gap-3"
 				>
 					<div className="flex items-center justify-center leading-none w-4 h-4 p-0.5">
-						<img
+						<ExternalImage
 							className="w-full h-full object-contain"
 							src={getResourceIconPath(r.type)}
 							alt=""