1
- import React , { FC , PropsWithChildren , useState , useEffect } from "react"
2
- import { getApiKey } from "api/api"
3
- import { VSCodeIcon } from "components/Icons/VSCodeIcon"
4
- import { VSCodeInsidersIcon } from "components/Icons/VSCodeInsidersIcon"
5
- import { PrimaryAgentButton } from "components/Resources/AgentButton"
1
+ import React , { FC , PropsWithChildren , useState , useEffect } from "react" ;
2
+ import { getApiKey } from "api/api" ;
3
+ import { VSCodeIcon } from "components/Icons/VSCodeIcon" ;
4
+ import { VSCodeInsidersIcon } from "components/Icons/VSCodeInsidersIcon" ;
5
+ import { PrimaryAgentButton } from "components/Resources/AgentButton" ;
6
+ import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown" ;
6
7
7
8
export interface VSCodeDesktopButtonProps {
8
- userName : string
9
- workspaceName : string
10
- agentName ?: string
11
- folderPath ?: string
9
+ userName : string ;
10
+ workspaceName : string ;
11
+ agentName ?: string ;
12
+ folderPath ?: string ;
12
13
}
13
14
14
15
enum VSCodeVariant {
@@ -17,112 +18,121 @@ enum VSCodeVariant {
17
18
}
18
19
19
20
const getSelectedVariantFromLocalStorage = ( ) : VSCodeVariant | null => {
20
- const storedVariant = localStorage . getItem ( "selectedVariant" )
21
+ const storedVariant = localStorage . getItem ( "selectedVariant" ) ;
21
22
if (
22
23
storedVariant &&
23
24
Object . values ( VSCodeVariant ) . includes ( storedVariant as VSCodeVariant )
24
25
) {
25
- return storedVariant as VSCodeVariant
26
+ return storedVariant as VSCodeVariant ;
26
27
}
27
- return null
28
- }
28
+ return null ;
29
+ } ;
29
30
30
31
export const VSCodeDesktopButton : FC <
31
32
PropsWithChildren < VSCodeDesktopButtonProps >
32
33
> = ( { userName, workspaceName, agentName, folderPath } ) => {
33
- const [ loading , setLoading ] = useState ( false )
34
+ const [ loading , setLoading ] = useState ( false ) ;
34
35
const [ selectedVariant , setSelectedVariant ] = useState < VSCodeVariant | null > (
35
- getSelectedVariantFromLocalStorage ( ) ,
36
- )
37
- const [ dropdownOpen , setDropdownOpen ] = useState ( false )
36
+ getSelectedVariantFromLocalStorage ( )
37
+ ) ;
38
+ const [ dropdownOpen , setDropdownOpen ] = useState ( false ) ;
38
39
39
40
useEffect ( ( ) => {
40
41
if ( selectedVariant ) {
41
- localStorage . setItem ( "selectedVariant" , selectedVariant )
42
+ localStorage . setItem ( "selectedVariant" , selectedVariant ) ;
42
43
} else {
43
- localStorage . removeItem ( "selectedVariant" )
44
+ localStorage . removeItem ( "selectedVariant" ) ;
44
45
}
45
- } , [ selectedVariant ] )
46
+ } , [ selectedVariant ] ) ;
46
47
47
48
const handleButtonClick = ( ) => {
48
- setLoading ( true )
49
+ setLoading ( true ) ;
49
50
getApiKey ( )
50
51
. then ( ( { key } ) => {
51
52
const query = new URLSearchParams ( {
52
53
owner : userName ,
53
54
workspace : workspaceName ,
54
55
url : location . origin ,
55
56
token : key ,
56
- } )
57
+ } ) ;
57
58
if ( agentName ) {
58
- query . set ( "agent" , agentName )
59
+ query . set ( "agent" , agentName ) ;
59
60
}
60
61
if ( folderPath ) {
61
- query . set ( "folder" , folderPath )
62
+ query . set ( "folder" , folderPath ) ;
62
63
}
63
64
64
65
const vscodeCommand =
65
66
selectedVariant === VSCodeVariant . VSCode
66
67
? "vscode://"
67
- : "vscode-insiders://"
68
+ : "vscode-insiders://" ;
68
69
69
- location . href = `${ vscodeCommand } coder.coder-remote/open?${ query . toString ( ) } `
70
+ location . href = `${ vscodeCommand } coder.coder-remote/open?${ query . toString ( ) } ` ;
70
71
} )
71
72
. catch ( ( ex ) => {
72
- console . error ( ex )
73
+ console . error ( ex ) ;
73
74
} )
74
75
. finally ( ( ) => {
75
- setLoading ( false )
76
- } )
77
- }
76
+ setLoading ( false ) ;
77
+ } ) ;
78
+ } ;
78
79
79
80
const handleVariantChange = ( variant : VSCodeVariant ) => {
80
- setSelectedVariant ( variant )
81
- setDropdownOpen ( false )
82
- }
81
+ setSelectedVariant ( variant ) ;
82
+ setDropdownOpen ( false ) ;
83
+ } ;
83
84
84
85
return (
85
- < div >
86
- < div style = { { position : "relative" } } >
87
- < PrimaryAgentButton
88
- startIcon = {
89
- selectedVariant === VSCodeVariant . VSCode ? (
90
- < VSCodeIcon />
91
- ) : (
92
- < VSCodeInsidersIcon />
93
- )
94
- }
95
- disabled = { loading || dropdownOpen }
96
- onClick = { ( ) => setDropdownOpen ( ! dropdownOpen ) }
86
+ < div style = { { position : "relative" , display : "inline-flex" } } >
87
+ < PrimaryAgentButton
88
+ startIcon = {
89
+ selectedVariant === VSCodeVariant . VSCode ? (
90
+ < VSCodeIcon />
91
+ ) : (
92
+ < VSCodeInsidersIcon />
93
+ )
94
+ }
95
+ disabled = { loading || dropdownOpen }
96
+ onClick = { handleButtonClick }
97
+ >
98
+ { selectedVariant === VSCodeVariant . VSCode
99
+ ? "VS Code Desktop"
100
+ : "VS Code Insiders" }
101
+ </ PrimaryAgentButton >
102
+ < PrimaryAgentButton
103
+ onClick = { ( ) => setDropdownOpen ( ! dropdownOpen ) }
104
+ >
105
+ < KeyboardArrowDownIcon
106
+ style = { {
107
+ transition : "transform 0.3s ease-in-out" ,
108
+ transform : dropdownOpen ? "rotate(180deg)" : "rotate(0)" ,
109
+ cursor : "pointer" ,
110
+ } }
111
+ />
112
+ </ PrimaryAgentButton >
113
+ { dropdownOpen && (
114
+ < div
115
+ style = { {
116
+ position : "absolute" ,
117
+ top : "100%" ,
118
+ left : 0 ,
119
+ marginTop : "4px" ,
120
+ } }
97
121
>
98
- { selectedVariant === VSCodeVariant . VSCode
99
- ? "VS Code Desktop"
100
- : "VS Code Insiders" }
101
- </ PrimaryAgentButton >
102
- { dropdownOpen && (
103
- < div
104
- style = { {
105
- position : "absolute" ,
106
- top : "100%" ,
107
- left : 0 ,
108
- marginTop : "4px" ,
109
- } }
122
+ < PrimaryAgentButton
123
+ onClick = { ( ) => handleVariantChange ( VSCodeVariant . VSCode ) }
124
+ startIcon = { < VSCodeIcon /> }
125
+ >
126
+ VS Code Desktop
127
+ </ PrimaryAgentButton >
128
+ < PrimaryAgentButton
129
+ onClick = { ( ) => handleVariantChange ( VSCodeVariant . VSCodeInsiders ) }
130
+ startIcon = { < VSCodeInsidersIcon /> }
110
131
>
111
- < PrimaryAgentButton
112
- onClick = { ( ) => handleVariantChange ( VSCodeVariant . VSCode ) }
113
- startIcon = { < VSCodeIcon /> }
114
- >
115
- VS Code Desktop
116
- </ PrimaryAgentButton >
117
- < PrimaryAgentButton
118
- onClick = { ( ) => handleVariantChange ( VSCodeVariant . VSCodeInsiders ) }
119
- startIcon = { < VSCodeInsidersIcon /> }
120
- >
121
- VS Code Insiders
122
- </ PrimaryAgentButton >
123
- </ div >
124
- ) }
125
- </ div >
132
+ VS Code Insiders
133
+ </ PrimaryAgentButton >
134
+ </ div >
135
+ ) }
126
136
</ div >
127
- )
128
- }
137
+ ) ;
138
+ } ;
0 commit comments