fix: FE show correct config-ssh prefix (#6904)

* fix: Push correct ssh prefix to FE

site/src/components/Resources/AgentRow.tsx

@@ -44,6 +44,7 @@ export interface AgentRowProps {
   applicationsHost: string | undefined
   showApps: boolean
   hideSSHButton?: boolean
+  sshPrefix?: string
   hideVSCodeDesktopButton?: boolean
   serverVersion: string
   onUpdateAgent: () => void
@@ -61,6 +62,7 @@ export const AgentRow: FC<AgentRowProps> = ({
   serverVersion,
   onUpdateAgent,
   storybookStartupLogs,
+  sshPrefix,
 }) => {
   const styles = useStyles()
   const { t } = useTranslation("agent")
@@ -308,6 +310,7 @@ export const AgentRow: FC<AgentRowProps> = ({
                 <SSHButton
                   workspaceName={workspace.name}
                   agentName={agent.name}
+                  sshPrefix={sshPrefix}
                 />
               )}
               {!hideVSCodeDesktopButton && (

site/src/components/SSHButton/SSHButton.stories.tsx

@@ -13,6 +13,7 @@ export const Closed = Template.bind({})
 Closed.args = {
   workspaceName: MockWorkspace.name,
   agentName: MockWorkspaceAgent.name,
+  sshPrefix: "coder.",
 }
 
 export const Opened = Template.bind({})
@@ -20,4 +21,5 @@ Opened.args = {
   workspaceName: MockWorkspace.name,
   agentName: MockWorkspaceAgent.name,
   defaultIsOpen: true,
+  sshPrefix: "coder.",
 }

site/src/components/SSHButton/SSHButton.tsx

@@ -15,12 +15,14 @@ export interface SSHButtonProps {
   workspaceName: string
   agentName: string
   defaultIsOpen?: boolean
+  sshPrefix?: string
 }
 
 export const SSHButton: React.FC<React.PropsWithChildren<SSHButtonProps>> = ({
   workspaceName,
   agentName,
   defaultIsOpen = false,
+  sshPrefix,
 }) => {
   const anchorRef = useRef<HTMLButtonElement>(null)
   const [isOpen, setIsOpen] = useState(defaultIsOpen)
@@ -79,7 +81,9 @@ export const SSHButton: React.FC<React.PropsWithChildren<SSHButtonProps>> = ({
                 Connect to the agent:
               </strong>
             </HelpTooltipText>
-            <CodeExample code={`ssh coder.${workspaceName}.${agentName}`} />
+            <CodeExample
+              code={`ssh ${sshPrefix}${workspaceName}.${agentName}`}
+            />
           </div>
         </Stack>
 

site/src/components/Workspace/Workspace.tsx

@@ -53,6 +53,7 @@ export interface WorkspaceProps {
   workspaceErrors: Partial<Record<WorkspaceErrors, Error | unknown>>
   buildInfo?: TypesGen.BuildInfoResponse
   applicationsHost?: string
+  sshPrefix?: string
   template?: TypesGen.Template
   quota_budget?: number
 }
@@ -78,6 +79,7 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
   hideVSCodeDesktopButton,
   buildInfo,
   applicationsHost,
+  sshPrefix,
   template,
   quota_budget,
 }) => {
@@ -193,6 +195,7 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
                 agent={agent}
                 workspace={workspace}
                 applicationsHost={applicationsHost}
+                sshPrefix={sshPrefix}
                 showApps={canUpdateWorkspace}
                 hideSSHButton={hideSSHButton}
                 hideVSCodeDesktopButton={hideVSCodeDesktopButton}

site/src/pages/WorkspacePage/WorkspaceReadyPage.tsx

@@ -51,6 +51,7 @@ export const WorkspaceReadyPage = ({
     buildError,
     cancellationError,
     applicationsHost,
+    sshPrefix,
     permissions,
     missedParameters,
   } = workspaceState.context
@@ -124,6 +125,7 @@ export const WorkspaceReadyPage = ({
         }}
         buildInfo={buildInfo}
         applicationsHost={applicationsHost}
+        sshPrefix={sshPrefix}
         template={template}
         quota_budget={quotaState.context.quota?.budget}
       />

site/src/xServices/workspace/workspaceXService.ts

@@ -73,6 +73,8 @@ export interface WorkspaceContext {
   checkPermissionsError?: Error | unknown
   // applications
   applicationsHost?: string
+  // SSH Config
+  sshPrefix?: string
 }
 
 export type WorkspaceEvent =
@@ -163,6 +165,9 @@ export const workspaceMachine = createMachine(
         getApplicationsHost: {
           data: TypesGen.AppHostResponse
         }
+        getSSHPrefix: {
+          data: TypesGen.SSHConfigResponse
+        }
       },
     },
     initial: "idle",
@@ -457,6 +462,30 @@ export const workspaceMachine = createMachine(
               },
             },
           },
+          sshConfig: {
+            initial: "gettingSshConfig",
+            states: {
+              gettingSshConfig: {
+                invoke: {
+                  src: "getSSHPrefix",
+                  onDone: {
+                    target: "success",
+                    actions: ["assignSSHPrefix"],
+                  },
+                  onError: {
+                    target: "error",
+                    actions: ["displaySSHPrefixError"],
+                  },
+                },
+              },
+              error: {
+                type: "final",
+              },
+              success: {
+                type: "final",
+              },
+            },
+          },
           schedule: {
             invoke: {
               id: "scheduleBannerMachine",
@@ -580,6 +609,17 @@ export const workspaceMachine = createMachine(
         )
         displayError(message)
       },
+      // SSH
+      assignSSHPrefix: assign({
+        sshPrefix: (_, { data }) => data.hostname_prefix,
+      }),
+      displaySSHPrefixError: (_, { data }) => {
+        const message = getErrorMessage(
+          data,
+          "Error getting the deployment ssh configuration.",
+        )
+        displayError(message)
+      },
       // Optimistically update. So when the user clicks on stop, we can show
       // the "pending" state right away without having to wait 0.5s ~ 2s to
       // display the visual feedback to the user.
@@ -737,6 +777,9 @@ export const workspaceMachine = createMachine(
       getApplicationsHost: async () => {
         return API.getApplicationsHost()
       },
+      getSSHPrefix: async () => {
+        return API.getDeploymentSSHConfig()
+      },
     },
   },
 )