1- import { API } from "api/api" ;
2- import { getErrorMessage } from "api/errors" ;
1+ import { workspaceAgentCredentials } from "api/queries/workspaces" ;
32import type { Workspace , WorkspaceAgent } from "api/typesGenerated" ;
4- import isChromatic from "chromatic/isChromatic " ;
3+ import { ErrorAlert } from "components/Alert/ErrorAlert " ;
54import { CodeExample } from "components/CodeExample/CodeExample" ;
6- import { displayError } from "components/GlobalSnackbar/utils" ;
7- import { type FC , useEffect , useState } from "react" ;
5+ import { Loader } from "components/Loader/Loader" ;
6+ import type { FC } from "react" ;
7+ import { useQuery } from "react-query" ;
88
99interface AgentExternalProps {
1010isExternalAgent :boolean ;
@@ -17,29 +17,24 @@ export const AgentExternal: FC<AgentExternalProps> = ({
1717agent,
1818workspace,
1919} ) => {
20- const [ externalAgentToken , setExternalAgentToken ] = useState < string | null > (
21- null ,
22- ) ;
23- const [ command , setCommand ] = useState < string | null > ( null ) ;
20+ if ( ! isExternalAgent ) {
21+ return null ;
22+ }
23+
24+ const {
25+ data :credentials ,
26+ error,
27+ isLoading,
28+ isError,
29+ } = useQuery ( workspaceAgentCredentials ( workspace . id , agent . name ) ) ;
30+
31+ if ( isLoading ) {
32+ return < Loader /> ;
33+ }
2434
25- const origin = isChromatic ( ) ?"https://example.com" :window . location . origin ;
26- useEffect ( ( ) => {
27- if (
28- isExternalAgent &&
29- ( agent . status === "timeout" || agent . status === "connecting" )
30- ) {
31- API . getWorkspaceAgentCredentials ( workspace . id , agent . name )
32- . then ( ( res ) => {
33- setExternalAgentToken ( res . agent_token ) ;
34- setCommand ( res . command ) ;
35- } )
36- . catch ( ( err ) => {
37- displayError (
38- getErrorMessage ( err , "Failed to get external agent credentials" ) ,
39- ) ;
40- } ) ;
41- }
42- } , [ isExternalAgent , agent . status , workspace . id , agent . name ] ) ;
35+ if ( isError ) {
36+ return < ErrorAlert error = { error } /> ;
37+ }
4338
4439return (
4540< section className = "text-base text-muted-foreground pb-2 leading-relaxed" >
@@ -48,7 +43,7 @@ export const AgentExternal: FC<AgentExternalProps> = ({
4843{ workspace . name } workspace:
4944</ p >
5045< CodeExample
51- code = { command ?? "" }
46+ code = { credentials ?. command ?? "" }
5247secret = { false }
5348redactPattern = { / C O D E R _ A G E N T _ T O K E N = " ( [ ^ " ] + ) " / g}
5449redactReplacement = { `CODER_AGENT_TOKEN="********"` }