Skip to content

Commit 3c6e6ff

Browse files
BrunoQuaresmaBrunoQuaresma
committed
Combine buttons
1 parent 3129741 commit 3c6e6ff

File tree

7 files changed

+113
-157
lines changed

7 files changed

+113
-157
lines changed

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

Lines changed: 3 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import Button from "@material-ui/core/Button"
21
import CircularProgress from "@material-ui/core/CircularProgress"
32
import Link from "@material-ui/core/Link"
43
import { makeStyles } from "@material-ui/core/styles"
54
import Tooltip from "@material-ui/core/Tooltip"
65
import ErrorOutlineIcon from "@material-ui/icons/ErrorOutline"
6+
import { PrimaryAgentButton } from "components/Resources/AgentButton"
77
import { FC } from "react"
88
import { combineClasses } from "utils/combineClasses"
99
import * as TypesGen from "../../api/typesGenerated"
@@ -83,16 +83,15 @@ export const AppLink: FC<AppLinkProps> = ({
8383
const isPrivateApp = app.sharing_level === "owner"
8484

8585
const button = (
86-
<Button
86+
<PrimaryAgentButton
8787
startIcon={icon}
8888
endIcon={isPrivateApp ? undefined : <ShareIcon app={app} />}
89-
className={styles.button}
9089
disabled={!canClick}
9190
>
9291
<span className={combineClasses({ [styles.appName]: !isPrivateApp })}>
9392
{appDisplayName}
9493
</span>
95-
</Button>
94+
</PrimaryAgentButton>
9695
)
9796

9897
return (
@@ -132,24 +131,6 @@ const useStyles = makeStyles((theme) => ({
132131
textDecoration: "none !important",
133132
},
134133

135-
button: {
136-
whiteSpace: "nowrap",
137-
backgroundColor: theme.palette.background.default,
138-
padding: theme.spacing(0, 3),
139-
height: 44,
140-
borderRadius: 6,
141-
142-
"&:hover": {
143-
backgroundColor: `${theme.palette.background.paper} !important`,
144-
},
145-
146-
"& .MuiButton-startIcon": {
147-
width: 16,
148-
height: 16,
149-
marginRight: theme.spacing(1.5),
150-
},
151-
},
152-
153134
unhealthyIcon: {
154135
color: theme.palette.warning.light,
155136
},

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

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import {
1616
import { Maybe } from "components/Conditionals/Maybe"
1717
import { useMachine } from "@xstate/react"
1818
import { portForwardMachine } from "xServices/portForward/portForwardXService"
19+
import { SecondaryAgentButton } from "components/Resources/AgentButton"
1920

2021
export interface PortForwardButtonProps {
2122
host: string
@@ -147,17 +148,14 @@ export const PortForwardButton: React.FC<PortForwardButtonProps> = (props) => {
147148

148149
return (
149150
<>
150-
<Button
151-
variant="outlined"
152-
className={styles.button}
153-
size="small"
151+
<SecondaryAgentButton
154152
ref={anchorRef}
155153
onClick={() => {
156154
setIsOpen(true)
157155
}}
158156
>
159157
Port forward
160-
</Button>
158+
</SecondaryAgentButton>
161159
<Popover
162160
classes={{ paper: styles.popoverPaper }}
163161
id={id}
@@ -208,12 +206,4 @@ const useStyles = makeStyles((theme) => ({
208206
form: {
209207
margin: theme.spacing(1.5, 0, 0),
210208
},
211-
212-
button: {
213-
fontSize: 12,
214-
fontWeight: 500,
215-
height: theme.spacing(4),
216-
minHeight: theme.spacing(4),
217-
borderRadius: 4,
218-
},
219209
}))

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

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import { makeStyles } from "@material-ui/core/styles"
2+
import Button, { ButtonProps } from "@material-ui/core/Button"
3+
import { FC } from "react"
4+
import { combineClasses } from "utils/combineClasses"
5+
6+
export const PrimaryAgentButton: FC<ButtonProps> = ({
7+
className,
8+
...props
9+
}) => {
10+
const styles = useStyles()
11+
12+
return (
13+
<Button
14+
className={combineClasses([styles.primaryButton, className])}
15+
{...props}
16+
/>
17+
)
18+
}
19+
20+
export const SecondaryAgentButton: FC<ButtonProps> = ({
21+
className,
22+
...props
23+
}) => {
24+
const styles = useStyles()
25+
26+
return (
27+
<Button
28+
variant="outlined"
29+
className={combineClasses([styles.secondaryButton, className])}
30+
{...props}
31+
/>
32+
)
33+
}
34+
35+
const useStyles = makeStyles((theme) => ({
36+
primaryButton: {
37+
whiteSpace: "nowrap",
38+
backgroundColor: theme.palette.background.default,
39+
height: 36,
40+
minHeight: 36,
41+
borderRadius: 4,
42+
fontWeight: 500,
43+
fontSize: 14,
44+
45+
"&:hover": {
46+
backgroundColor: `${theme.palette.background.paper} !important`,
47+
},
48+
49+
"& .MuiButton-startIcon": {
50+
width: 12,
51+
height: 12,
52+
marginRight: theme.spacing(1.5),
53+
54+
"& svg": {
55+
width: "100%",
56+
height: "100%",
57+
},
58+
},
59+
},
60+
61+
secondaryButton: {
62+
fontSize: 14,
63+
fontWeight: 500,
64+
height: 36,
65+
minHeight: 36,
66+
borderRadius: 4,
67+
},
68+
}))

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

Lines changed: 25 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -218,7 +218,29 @@ export const AgentRow: FC<AgentRowProps> = ({
218218
</div>
219219

220220
{agent.status === "connected" && (
221-
<div className={styles.agentDefaultActions}>
221+
<div className={styles.agentButtons}>
222+
{shouldDisplayApps && (
223+
<>
224+
{!hideVSCodeDesktopButton && (
225+
<VSCodeDesktopButton
226+
userName={workspace.owner_name}
227+
workspaceName={workspace.name}
228+
agentName={agent.name}
229+
folderPath={agent.expanded_directory}
230+
/>
231+
)}
232+
{agent.apps.map((app) => (
233+
<AppLink
234+
key={app.slug}
235+
appsHost={applicationsHost}
236+
app={app}
237+
agent={agent}
238+
workspace={workspace}
239+
/>
240+
))}
241+
</>
242+
)}
243+
222244
<TerminalLink
223245
workspaceName={workspace.name}
224246
agentName={agent.name}
@@ -244,7 +266,7 @@ export const AgentRow: FC<AgentRowProps> = ({
244266
)}
245267

246268
{agent.status === "connecting" && (
247-
<div className={styles.agentDefaultActions}>
269+
<div className={styles.agentButtons}>
248270
<Skeleton
249271
width={80}
250272
height={32}
@@ -263,49 +285,6 @@ export const AgentRow: FC<AgentRowProps> = ({
263285

264286
<AgentMetadata storybookMetadata={storybookAgentMetadata} agent={agent} />
265287

266-
{shouldDisplayApps && (
267-
<div className={styles.apps}>
268-
{agent.status === "connected" && (
269-
<>
270-
{!hideVSCodeDesktopButton && (
271-
<VSCodeDesktopButton
272-
userName={workspace.owner_name}
273-
workspaceName={workspace.name}
274-
agentName={agent.name}
275-
folderPath={agent.expanded_directory}
276-
/>
277-
)}
278-
{agent.apps.map((app) => (
279-
<AppLink
280-
key={app.slug}
281-
appsHost={applicationsHost}
282-
app={app}
283-
agent={agent}
284-
workspace={workspace}
285-
/>
286-
))}
287-
</>
288-
)}
289-
290-
{agent.status === "connecting" && (
291-
<>
292-
<Skeleton
293-
width={80}
294-
height={36}
295-
variant="rect"
296-
className={styles.buttonSkeleton}
297-
/>
298-
<Skeleton
299-
width={110}
300-
height={36}
301-
variant="rect"
302-
className={styles.buttonSkeleton}
303-
/>
304-
</>
305-
)}
306-
</div>
307-
)}
308-
309288
{hasStartupFeatures && (
310289
<div className={styles.logsPanel}>
311290
{showStartupLogs && (
@@ -473,7 +452,7 @@ const useStyles = makeStyles((theme) => ({
473452
padding: theme.spacing(2, 4),
474453
},
475454

476-
agentDefaultActions: {
455+
agentButtons: {
477456
display: "flex",
478457
gap: theme.spacing(1),
479458
marginLeft: "auto",
@@ -532,14 +511,6 @@ const useStyles = makeStyles((theme) => ({
532511
},
533512
},
534513

535-
apps: {
536-
display: "flex",
537-
flexWrap: "wrap",
538-
gap: theme.spacing(1.5),
539-
padding: theme.spacing(4),
540-
borderTop: `1px solid ${theme.palette.divider}`,
541-
},
542-
543514
logsPanel: {
544515
borderTop: `1px solid ${theme.palette.divider}`,
545516
},

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

Lines changed: 3 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import Button from "@material-ui/core/Button"
21
import Popover from "@material-ui/core/Popover"
32
import { makeStyles } from "@material-ui/core/styles"
3+
import { SecondaryAgentButton } from "components/Resources/AgentButton"
44
import { useRef, useState } from "react"
55
import { CodeExample } from "../CodeExample/CodeExample"
66
import { Stack } from "../Stack/Stack"
@@ -34,17 +34,14 @@ export const SSHButton: React.FC<React.PropsWithChildren<SSHButtonProps>> = ({
3434

3535
return (
3636
<>
37-
<Button
38-
className={styles.button}
39-
variant="outlined"
40-
size="small"
37+
<SecondaryAgentButton
4138
ref={anchorRef}
4239
onClick={() => {
4340
setIsOpen(true)
4441
}}
4542
>
4643
Connect SSH
47-
</Button>
44+
</SecondaryAgentButton>
4845
<Popover
4946
classes={{ paper: styles.popoverPaper }}
5047
id={id}
@@ -126,12 +123,4 @@ const useStyles = makeStyles((theme) => ({
126123
textHelper: {
127124
fontWeight: 400,
128125
},
129-
130-
button: {
131-
fontSize: 12,
132-
fontWeight: 500,
133-
height: theme.spacing(4),
134-
minHeight: theme.spacing(4),
135-
borderRadius: 4,
136-
},
137126
}))

‎site/src/components/TerminalLink/TerminalLink.tsx

Lines changed: 8 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
1-
import Button from "@material-ui/core/Button"
2-
import { makeStyles } from "@material-ui/core/styles"
1+
import Link from "@material-ui/core/Link"
2+
import { SecondaryAgentButton } from "components/Resources/AgentButton"
33
import { FC } from "react"
44
import * as TypesGen from "../../api/typesGenerated"
5-
import { combineClasses } from "../../utils/combineClasses"
65
import { generateRandomString } from "../../utils/random"
76

87
export const Language = {
@@ -14,7 +13,6 @@ export interface TerminalLinkProps {
1413
agentName?: TypesGen.WorkspaceAgent["name"]
1514
userName?: TypesGen.User["username"]
1615
workspaceName: TypesGen.Workspace["name"]
17-
className?: string
1816
}
1917

2018
/**
@@ -28,20 +26,15 @@ export const TerminalLink: FC<React.PropsWithChildren<TerminalLinkProps>> = ({
2826
agentName,
2927
userName = "me",
3028
workspaceName,
31-
className = "",
3229
}) => {
33-
const styles = useStyles()
3430
const href = `/@${userName}/${workspaceName}${
3531
agentName ? `.${agentName}` : ""
3632
}/terminal`
3733

3834
return (
39-
<Button
35+
<Link
36+
underline="none"
4037
href={href}
41-
component="a"
42-
size="small"
43-
variant="outlined"
44-
className={combineClasses([styles.button, className])}
4538
target="_blank"
4639
onClick={(event) => {
4740
event.preventDefault()
@@ -52,17 +45,9 @@ export const TerminalLink: FC<React.PropsWithChildren<TerminalLinkProps>> = ({
5245
)
5346
}}
5447
>
55-
{Language.linkText}
56-
</Button>
48+
<SecondaryAgentButton size="small" variant="outlined">
49+
{Language.linkText}
50+
</SecondaryAgentButton>
51+
</Link>
5752
)
5853
}
59-
60-
const useStyles = makeStyles((theme) => ({
61-
button: {
62-
fontSize: 12,
63-
fontWeight: 500,
64-
height: theme.spacing(4),
65-
minHeight: theme.spacing(4),
66-
borderRadius: 4,
67-
},
68-
}))

0 commit comments

Comments
 (0)