Skip to content

Commit 7db1022

Browse files
BrunoQuaresmaBrunoQuaresma
committed
Refactor ssh and open port actions
1 parent 0a2cb43 commit 7db1022

File tree

4 files changed

+57
-34
lines changed

4 files changed

+57
-34
lines changed

‎site/src/components/Resources/AgentRow.tsx

Lines changed: 26 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -183,6 +183,28 @@ export const AgentRow: FC<AgentRowProps> = ({
183183
</>
184184
)}
185185
</div>
186+
187+
{showBuiltinApps && (
188+
<div css={{ display: "flex" }}>
189+
{!hideSSHButton && agent.display_apps.includes("ssh_helper") && (
190+
<SSHButton
191+
workspaceName={workspace.name}
192+
agentName={agent.name}
193+
sshPrefix={sshPrefix}
194+
/>
195+
)}
196+
{proxy.preferredWildcardHostname &&
197+
proxy.preferredWildcardHostname !== "" &&
198+
agent.display_apps.includes("port_forwarding_helper") && (
199+
<PortForwardButton
200+
host={proxy.preferredWildcardHostname}
201+
workspaceName={workspace.name}
202+
agent={agent}
203+
username={workspace.owner_name}
204+
/>
205+
)}
206+
</div>
207+
)}
186208
</header>
187209

188210
{agent.status === "connected" && (
@@ -220,23 +242,6 @@ export const AgentRow: FC<AgentRowProps> = ({
220242
userName={workspace.owner_name}
221243
/>
222244
)}
223-
{!hideSSHButton && agent.display_apps.includes("ssh_helper") && (
224-
<SSHButton
225-
workspaceName={workspace.name}
226-
agentName={agent.name}
227-
sshPrefix={sshPrefix}
228-
/>
229-
)}
230-
{proxy.preferredWildcardHostname &&
231-
proxy.preferredWildcardHostname !== "" &&
232-
agent.display_apps.includes("port_forwarding_helper") && (
233-
<PortForwardButton
234-
host={proxy.preferredWildcardHostname}
235-
workspaceName={workspace.name}
236-
agent={agent}
237-
username={workspace.owner_name}
238-
/>
239-
)}
240245
</>
241246
)}
242247
</section>
@@ -262,7 +267,9 @@ export const AgentRow: FC<AgentRowProps> = ({
262267
<AgentMetadata storybookMetadata={storybookAgentMetadata} agent={agent} />
263268

264269
{hasStartupFeatures && (
265-
<section>
270+
<section
271+
css={(theme) => ({ borderTop: `1px solid ${theme.palette.divider}` })}
272+
>
266273
<Collapse in={showLogs}>
267274
<AutoSizer disableHeight>
268275
{({ width }) => (
@@ -600,7 +607,6 @@ const styles = {
600607
startupLogs: (theme) => ({
601608
maxHeight: 256,
602609
borderBottom: `1px solid ${theme.palette.divider}`,
603-
borderTop: `1px solid ${theme.palette.divider}`,
604610
backgroundColor: theme.palette.background.paper,
605611
paddingTop: 16,
606612

@@ -658,7 +664,7 @@ const styles = {
658664
background: "transparent",
659665
border: 0,
660666
fontFamily: "inherit",
661-
padding: "16px 24px",
667+
padding: "12px 24px",
662668
color: theme.palette.text.secondary,
663669
cursor: "pointer",
664670
display: "flex",

‎site/src/components/Resources/AppLink/AppLink.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@ import { BaseIcon } from "./BaseIcon";
1414
import { ShareIcon } from "./ShareIcon";
1515

1616
export const DisplayAppNameMap: Record<TypesGen.DisplayApp, string> = {
17-
port_forwarding_helper: "Ports",
18-
ssh_helper: "SSH",
17+
port_forwarding_helper: "Open ports",
18+
ssh_helper: "Connect SSH",
1919
vscode: "VS Code Desktop",
2020
vscode_insiders: "VS Code Insiders",
2121
web_terminal: "Terminal",

‎site/src/components/Resources/PortForwardButton.tsx

Lines changed: 19 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -20,13 +20,13 @@ import {
2020
HelpTooltipText,
2121
HelpTooltipTitle,
2222
} from "components/HelpTooltip/HelpTooltip";
23-
import { AgentButton } from "components/Resources/AgentButton";
2423
import {
2524
Popover,
2625
PopoverContent,
2726
PopoverTrigger,
2827
} from "components/Popover/Popover";
2928
import { DisplayAppNameMap } from "./AppLink/AppLink";
29+
import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
3030

3131
export interface PortForwardButtonProps {
3232
host: string;
@@ -59,14 +59,24 @@ export const PortForwardButton: FC<PortForwardButtonProps> = (props) => {
5959
return (
6060
<Popover>
6161
<PopoverTrigger>
62-
<AgentButton disabled={!data}>
62+
<Button
63+
disabled={!data}
64+
size="small"
65+
variant="text"
66+
endIcon={<KeyboardArrowDown />}
67+
css={{ fontSize: 13, padding: "8px 12px" }}
68+
startIcon={
69+
data ? (
70+
<div>
71+
<span css={styles.portCount}>{data.ports.length}</span>
72+
</div>
73+
) : (
74+
<CircularProgress size={10} />
75+
)
76+
}
77+
>
6378
{DisplayAppNameMap["port_forwarding_helper"]}
64-
{data ? (
65-
<div css={styles.portCount}>{data.ports.length}</div>
66-
) : (
67-
<CircularProgress size={10} css={{ marginLeft: 8 }} />
68-
)}
69-
</AgentButton>
79+
</Button>
7080
</PopoverTrigger>
7181
<PopoverContent horizontal="right" classes={{ paper }}>
7282
<PortForwardPopoverView {...props} ports={data?.ports} />
@@ -214,8 +224,7 @@ const styles = {
214224
display: "flex",
215225
alignItems: "center",
216226
justifyContent: "center",
217-
backgroundColor: theme.experimental.l2.background,
218-
marginLeft: 8,
227+
backgroundColor: theme.palette.action.selected,
219228
}),
220229

221230
portLink: (theme) => ({

‎site/src/components/Resources/SSHButton/SSHButton.tsx

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,9 @@ import {
1414
PopoverTrigger,
1515
} from "components/Popover/Popover";
1616
import { Stack } from "components/Stack/Stack";
17-
import { AgentButton } from "../AgentButton";
1817
import { DisplayAppNameMap } from "../AppLink/AppLink";
18+
import Button from "@mui/material/Button";
19+
import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
1920

2021
export interface SSHButtonProps {
2122
workspaceName: string;
@@ -35,7 +36,14 @@ export const SSHButton: FC<PropsWithChildren<SSHButtonProps>> = ({
3536
return (
3637
<Popover isDefaultOpen={isDefaultOpen}>
3738
<PopoverTrigger>
38-
<AgentButton>{DisplayAppNameMap["ssh_helper"]}</AgentButton>
39+
<Button
40+
size="small"
41+
variant="text"
42+
endIcon={<KeyboardArrowDown />}
43+
css={{ fontSize: 13, padding: "8px 12px" }}
44+
>
45+
{DisplayAppNameMap["ssh_helper"]}
46+
</Button>
3947
</PopoverTrigger>
4048

4149
<PopoverContent horizontal="right" classes={{ paper }}>

0 commit comments

Comments
 (0)