Function PortForwardButton

site/src/modules/resources/PortForwardButton.tsx:71–123

({
	host,
	workspace,
	template,
	agent,
})

}

export const PortForwardButton: FC<PortForwardButtonProps> = ({
	host,
	workspace,
	template,
	agent,
}) => {
	const { entitlements } = useDashboard();

	const { data: listeningPorts } = useQuery({
		queryKey: ["portForward", agent.id],
		queryFn: () => API.getAgentListeningPorts(agent.id),
		enabled: agent.status === "connected",
		refetchInterval: 5_000,
		select: (res) => res.ports,
	});

	const { data: sharedPorts, refetch: refetchSharedPorts } = useQuery({
		...workspacePortShares(workspace.id),
		enabled: agent.status === "connected",
		select: (res) => res.shares,
	});

	return (
		<Popover>
			<PopoverTrigger asChild>
				<Button disabled={!listeningPorts} size="sm" variant="subtle">
					<Spinner loading={!listeningPorts}>
						<span css={styles.portCount}>{listeningPorts?.length}</span>
					</Spinner>
					Open ports
					<ChevronDownIcon />
				</Button>
			</PopoverTrigger>
			<PopoverContent
				align="end"
				className="p-0 w-[404px] mt-1 text-content-secondary bg-surface-secondary border-surface-quaternary"
			>
				<PortForwardPopoverView
					host={host}
					agent={agent}
					workspace={workspace}
					template={template}
					sharedPorts={sharedPorts ?? []}
					listeningPorts={listeningPorts ?? []}
					portSharingControlsEnabled={
						entitlements.features.control_shared_ports.enabled
					}
					refetchSharedPorts={refetchSharedPorts}
				/>
			</PopoverContent>
		</Popover>
	);
};

const openPortSchema = (): Yup.AnyObjectSchema =>
	Yup.object({