Skip to content

Commit ad82a60

Browse files
BrunoQuaresmaBrunoQuaresma
authored
refactor(site): Group app and agent actions together (#7267)
1 parent 96a12d1 commit ad82a60

File tree

8 files changed

+166
-169
lines changed

8 files changed

+166
-169
lines changed

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

+3-22
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

+3-13
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

+68
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/AgentMetadata.tsx

+8
Original file line numberDiff line numberDiff line change
@@ -181,14 +181,22 @@ const useStyles = makeStyles((theme) => ({
181181
padding: theme.spacing(2.5, 4),
182182
borderTop: `1px solid ${theme.palette.divider}`,
183183
background: theme.palette.background.paper,
184+
overflowX: "auto",
185+
scrollPadding: theme.spacing(0, 4),
184186
},
187+
185188
metadata: {
186189
fontSize: 12,
187190
lineHeight: "normal",
188191
display: "flex",
189192
flexDirection: "column",
190193
gap: theme.spacing(0.5),
191194
overflow: "visible",
195+
196+
// Because of scrolling
197+
"&:last-child": {
198+
paddingRight: theme.spacing(4),
199+
},
192200
},
193201

194202
metadataLabel: {

0 commit comments

Comments
 (0)