Mar 18, 2025 · Mar 11, 2025 · Mar 11, 2025 · Mar 11, 2025 · Mar 12, 2025 · Mar 12, 2025
diff --git a/site/src/modules/resources/AgentDevcontainerCard.tsx b/site/src/modules/resources/AgentDevcontainerCard.tsx
 import Link from "@mui/material/Link";
 import Tooltip, { type TooltipProps } from "@mui/material/Tooltip";
 import type {
 Workspace,
 WorkspaceAgentDevcontainer,
 WorkspaceAgentDevcontainerPort,
 } from "api/typesGenerated";
 import type { Workspace, WorkspaceAgentDevcontainer } from "api/typesGenerated";
 import { ExternalLinkIcon } from "lucide-react";
 import type { FC } from "react";
 import { portForwardURL } from "utils/portForward";
 const helperText = hasHostBind
 ? `${port.host_ip}:${port.host_port}`
 : "Not bound to host";
 const linkDest = hasHostBind
 ? portForwardURL(
 wildcardHostname,
 port.host_port!,
 agentName,
 workspace.name,
 workspace.owner_name,
 location.protocol === "https" ? "https" : "http",
 )
 : "";
 return (
 <Tooltip key={portLabel} title={helperText}>
 <span>
 underline="none"
 startIcon={<ExternalLinkIcon className="size-icon-sm" />}
 disabled={!hasHostBind}
 href={portForwardURL(
 wildcardHostname,
 port.host_port!,
 agentName,
 workspace.name,
 workspace.owner_name,
 location.protocol === "https" ? "https" : "http",
 )}
 href={linkDest}
 >
 {portLabel}
 </Link>
Original file line number	Diff line number	Diff line change
		@@ -1,10 +1,6 @@
		import Link from "@mui/material/Link";
		import Tooltip, { type TooltipProps } from "@mui/material/Tooltip";
		import type {
		Workspace,
		WorkspaceAgentDevcontainer,
		WorkspaceAgentDevcontainerPort,
		} from "api/typesGenerated";
		import type { Workspace, WorkspaceAgentDevcontainer } from "api/typesGenerated";
		import { ExternalLinkIcon } from "lucide-react";
		import type { FC } from "react";
		import { portForwardURL } from "utils/portForward";
Expand DownExpand Up		@@ -58,6 +54,16 @@ export const AgentDevcontainerCard: FC<AgentDevcontainerCardProps> = ({
		const helperText = hasHostBind
		? `${port.host_ip}:${port.host_port}`
		: "Not bound to host";
		const linkDest = hasHostBind
		? portForwardURL(
		wildcardHostname,
		port.host_port!,
		agentName,
		workspace.name,
		workspace.owner_name,
		location.protocol === "https" ? "https" : "http",
		)
		: "";
		return (
		<Tooltip key={portLabel} title={helperText}>
		<span>
Expand All		@@ -68,14 +74,7 @@ export const AgentDevcontainerCard: FC<AgentDevcontainerCardProps> = ({
		underline="none"
		startIcon={<ExternalLinkIcon className="size-icon-sm" />}
		disabled={!hasHostBind}
Copy link Member ParkreinerMar 18, 2025 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. Is the value of`hasHostBind` likely to change over time? If I'm reading this right, it feels weird to me that we could be rendering out a link that is always disabled. At that point, why make it an interactive element in the first place? Copy link MemberAuthor johnstcnMar 18, 2025 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. It could change if the user bound the remote port to a local port and rebuilt the container. My reasoning for including the non-interactive variants was that if they simply didn't show up in the UI, it would be more confusing to users. Having it show up with a tooltip explaining why it was not enabled felt "right" to me. Copy link Member ParkreinerMar 18, 2025• edited Loading Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. Yeah, I think that's a solid solution. I guess I'm just usually a little more skittish about disabled UI elements for accessibility reasons. But if/when that becomes a priority, I think it should be easy to update the component
		href={portForwardURL(
		wildcardHostname,
		port.host_port!,
		agentName,
		workspace.name,
		workspace.owner_name,
		location.protocol === "https" ? "https" : "http",
		)}
		href={linkDest}
		>
		{portLabel}
		</Link>
Expand Down