Function AgentSSHButton

site/src/modules/resources/SSHButton/SSHButton.tsx:25–83

({
	workspaceName,
	agentName,
	workspaceOwnerUsername,
})

}

export const AgentSSHButton: FC<AgentSSHButtonProps> = ({
	workspaceName,
	agentName,
	workspaceOwnerUsername,
}) => {
	const { data } = useQuery(deploymentSSHConfig());
	const sshSuffix = data?.hostname_suffix;

	return (
		<Popover>
			<PopoverTrigger asChild>
				<Button size="sm" variant="subtle">
					Connect via SSH
					<ChevronDownIcon />
				</Button>
			</PopoverTrigger>

			<PopoverContent
				align="end"
				className="py-4 px-6 w-80 text-content-secondary mt-[2px] bg-surface-secondary"
			>
				<HelpPopoverText>
					Run the following commands to connect with SSH:
				</HelpPopoverText>

				<ol style={{ margin: 0, padding: 0 }}>
					<div className="flex flex-col gap-1 mt-3">
						<SSHStep
							helpText="Configure SSH hosts on machine:"
							codeExample="coder config-ssh"
						/>
						<SSHStep
							helpText="Connect to the agent:"
							codeExample={`ssh ${agentName}.${workspaceName}.${workspaceOwnerUsername}.${sshSuffix}`}
						/>
					</div>
				</ol>

				<HelpPopoverLinksGroup>
					<HelpPopoverLink href="/install">Install Coder CLI</HelpPopoverLink>
					<HelpPopoverLink href={docs("/user-guides/workspace-access/vscode")}>
						Connect via VS Code Remote SSH
					</HelpPopoverLink>
					<HelpPopoverLink
						href={docs("/user-guides/workspace-access/jetbrains")}
					>
						Connect via JetBrains IDEs
					</HelpPopoverLink>
					<HelpPopoverLink href={docs("/user-guides/desktop")}>
						Connect via Coder Desktop
					</HelpPopoverLink>
					<HelpPopoverLink href={docs("/user-guides/workspace-access#ssh")}>
						SSH configuration
					</HelpPopoverLink>
				</HelpPopoverLinksGroup>
			</PopoverContent>
		</Popover>
	);