|
| 1 | +importKeyboardArrowDownIconfrom"@mui/icons-material/KeyboardArrowDown"; |
| 2 | +importButtonGroupfrom"@mui/material/ButtonGroup"; |
| 3 | +importMenufrom"@mui/material/Menu"; |
| 4 | +importMenuItemfrom"@mui/material/MenuItem"; |
| 5 | +import{API}from"api/api"; |
| 6 | +importtype{DisplayApp}from"api/typesGenerated"; |
| 7 | +import{VSCodeIcon}from"components/Icons/VSCodeIcon"; |
| 8 | +import{VSCodeInsidersIcon}from"components/Icons/VSCodeInsidersIcon"; |
| 9 | +import{typeFC,useRef,useState}from"react"; |
| 10 | +import{AgentButton}from"../AgentButton"; |
| 11 | +import{DisplayAppNameMap}from"../AppLink/AppLink"; |
| 12 | + |
| 13 | +exportinterfaceVSCodeDevContainerButtonProps{ |
| 14 | +userName:string; |
| 15 | +workspaceName:string; |
| 16 | +agentName?:string; |
| 17 | +folderPath:string; |
| 18 | +devContainerPath:string; |
| 19 | +devContainerFolder:string; |
| 20 | +displayApps:readonlyDisplayApp[]; |
| 21 | +} |
| 22 | + |
| 23 | +typeVSCodeVariant="vscode"|"vscode-insiders"; |
| 24 | + |
| 25 | +constVARIANT_KEY="vscode-variant"; |
| 26 | + |
| 27 | +exportconstVSCodeDevContainerButton:FC<VSCodeDevContainerButtonProps>=( |
| 28 | +props, |
| 29 | +)=>{ |
| 30 | +const[isVariantMenuOpen,setIsVariantMenuOpen]=useState(false); |
| 31 | +constpreviousVariant=localStorage.getItem(VARIANT_KEY); |
| 32 | +const[variant,setVariant]=useState<VSCodeVariant>(()=>{ |
| 33 | +if(!previousVariant){ |
| 34 | +return"vscode"; |
| 35 | +} |
| 36 | +returnpreviousVariantasVSCodeVariant; |
| 37 | +}); |
| 38 | +constmenuAnchorRef=useRef<HTMLDivElement>(null); |
| 39 | + |
| 40 | +constselectVariant=(variant:VSCodeVariant)=>{ |
| 41 | +localStorage.setItem(VARIANT_KEY,variant); |
| 42 | +setVariant(variant); |
| 43 | +setIsVariantMenuOpen(false); |
| 44 | +}; |
| 45 | + |
| 46 | +constincludesVSCodeDesktop=props.displayApps.includes("vscode"); |
| 47 | +constincludesVSCodeInsiders=props.displayApps.includes("vscode_insiders"); |
| 48 | + |
| 49 | +returnincludesVSCodeDesktop&&includesVSCodeInsiders ?( |
| 50 | +<div> |
| 51 | +<ButtonGroupref={menuAnchorRef}variant="outlined"> |
| 52 | +{variant==="vscode" ?( |
| 53 | +<VSCodeButton{...props}/> |
| 54 | +) :( |
| 55 | +<VSCodeInsidersButton{...props}/> |
| 56 | +)} |
| 57 | + |
| 58 | +<AgentButton |
| 59 | +aria-controls={ |
| 60 | +isVariantMenuOpen ?"vscode-variant-button-menu" :undefined |
| 61 | +} |
| 62 | +aria-expanded={isVariantMenuOpen ?"true" :undefined} |
| 63 | +aria-label="select VSCode variant" |
| 64 | +aria-haspopup="menu" |
| 65 | +disableRipple |
| 66 | +onClick={()=>{ |
| 67 | +setIsVariantMenuOpen(true); |
| 68 | +}} |
| 69 | +css={{paddingLeft:0,paddingRight:0}} |
| 70 | +> |
| 71 | +<KeyboardArrowDownIconcss={{fontSize:16}}/> |
| 72 | +</AgentButton> |
| 73 | +</ButtonGroup> |
| 74 | + |
| 75 | +<Menu |
| 76 | +open={isVariantMenuOpen} |
| 77 | +anchorEl={menuAnchorRef.current} |
| 78 | +onClose={()=>setIsVariantMenuOpen(false)} |
| 79 | +css={{ |
| 80 | +"& .MuiMenu-paper":{ |
| 81 | +width:menuAnchorRef.current?.clientWidth, |
| 82 | +}, |
| 83 | +}} |
| 84 | +> |
| 85 | +<MenuItem |
| 86 | +css={{fontSize:14}} |
| 87 | +onClick={()=>{ |
| 88 | +selectVariant("vscode"); |
| 89 | +}} |
| 90 | +> |
| 91 | +<VSCodeIconcss={{width:12,height:12}}/> |
| 92 | +{DisplayAppNameMap.vscode} |
| 93 | +</MenuItem> |
| 94 | +<MenuItem |
| 95 | +css={{fontSize:14}} |
| 96 | +onClick={()=>{ |
| 97 | +selectVariant("vscode-insiders"); |
| 98 | +}} |
| 99 | +> |
| 100 | +<VSCodeInsidersIconcss={{width:12,height:12}}/> |
| 101 | +{DisplayAppNameMap.vscode_insiders} |
| 102 | +</MenuItem> |
| 103 | +</Menu> |
| 104 | +</div> |
| 105 | +) :includesVSCodeDesktop ?( |
| 106 | +<VSCodeButton{...props}/> |
| 107 | +) :( |
| 108 | +<VSCodeInsidersButton{...props}/> |
| 109 | +); |
| 110 | +}; |
| 111 | + |
| 112 | +constVSCodeButton:FC<VSCodeDevContainerButtonProps>=({ |
| 113 | +userName, |
| 114 | +workspaceName, |
| 115 | +agentName, |
| 116 | +folderPath, |
| 117 | +devContainerPath, |
| 118 | +devContainerFolder, |
| 119 | +})=>{ |
| 120 | +const[loading,setLoading]=useState(false); |
| 121 | + |
| 122 | +return( |
| 123 | +<AgentButton |
| 124 | +startIcon={<VSCodeIcon/>} |
| 125 | +disabled={loading} |
| 126 | +onClick={()=>{ |
| 127 | +setLoading(true); |
| 128 | +API.getApiKey() |
| 129 | +.then(({ key})=>{ |
| 130 | +constquery=newURLSearchParams({ |
| 131 | +owner:userName, |
| 132 | +workspace:workspaceName, |
| 133 | +url:location.origin, |
| 134 | +token:key, |
| 135 | +devContainerPath, |
| 136 | +devContainerFolder, |
| 137 | +}); |
| 138 | +if(agentName){ |
| 139 | +query.set("agent",agentName); |
| 140 | +} |
| 141 | +if(folderPath){ |
| 142 | +query.set("folder",folderPath); |
| 143 | +} |
| 144 | + |
| 145 | +location.href=`vscode://coder.coder-remote/openDevContainer?${query.toString()}`; |
| 146 | +}) |
| 147 | +.catch((ex)=>{ |
| 148 | +console.error(ex); |
| 149 | +}) |
| 150 | +.finally(()=>{ |
| 151 | +setLoading(false); |
| 152 | +}); |
| 153 | +}} |
| 154 | +> |
| 155 | +{DisplayAppNameMap.vscode} |
| 156 | +</AgentButton> |
| 157 | +); |
| 158 | +}; |
| 159 | + |
| 160 | +constVSCodeInsidersButton:FC<VSCodeDevContainerButtonProps>=({ |
| 161 | +userName, |
| 162 | +workspaceName, |
| 163 | +agentName, |
| 164 | +folderPath, |
| 165 | +devContainerPath, |
| 166 | +devContainerFolder, |
| 167 | +})=>{ |
| 168 | +const[loading,setLoading]=useState(false); |
| 169 | + |
| 170 | +return( |
| 171 | +<AgentButton |
| 172 | +startIcon={<VSCodeInsidersIcon/>} |
| 173 | +disabled={loading} |
| 174 | +onClick={()=>{ |
| 175 | +setLoading(true); |
| 176 | +API.getApiKey() |
| 177 | +.then(({ key})=>{ |
| 178 | +constquery=newURLSearchParams({ |
| 179 | +owner:userName, |
| 180 | +workspace:workspaceName, |
| 181 | +url:location.origin, |
| 182 | +token:key, |
| 183 | +devContainerPath, |
| 184 | +devContainerFolder, |
| 185 | +}); |
| 186 | +if(agentName){ |
| 187 | +query.set("agent",agentName); |
| 188 | +} |
| 189 | +if(folderPath){ |
| 190 | +query.set("folder",folderPath); |
| 191 | +} |
| 192 | + |
| 193 | +location.href=`vscode-insiders://coder.coder-remote/openDevContainer?${query.toString()}`; |
| 194 | +}) |
| 195 | +.catch((ex)=>{ |
| 196 | +console.error(ex); |
| 197 | +}) |
| 198 | +.finally(()=>{ |
| 199 | +setLoading(false); |
| 200 | +}); |
| 201 | +}} |
| 202 | +> |
| 203 | +{DisplayAppNameMap.vscode_insiders} |
| 204 | +</AgentButton> |
| 205 | +); |
| 206 | +}; |