Skip to content

Commit c89cbad

Browse files
BrunoQuaresmaBrunoQuaresma
committed
Refactor agent button
1 parent a7b6926 commit c89cbad

File tree

6 files changed

+40
-46
lines changed

6 files changed

+40
-46
lines changed

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

Lines changed: 23 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,28 @@
11
import Button, { ButtonProps } from "@mui/material/Button";
2-
import { FC, forwardRef } from "react";
3-
4-
export const PrimaryAgentButton: FC<ButtonProps> = ({
5-
className,
6-
...props
7-
}) => {
8-
return (
9-
<Button
10-
color="neutral"
11-
{...props}
12-
sx={{
13-
backgroundColor: (theme) => theme.palette.background.default,
14-
"&:hover": {
15-
backgroundColor: (theme) => theme.palette.background.paper,
16-
},
17-
// Making them smaller since those icons don't have a padding around them
18-
"& .MuiButton-startIcon": {
19-
width: 12,
20-
height: 12,
21-
"& svg": { width: "100%", height: "100%" },
22-
},
23-
...props.sx,
24-
}}
25-
/>
26-
);
27-
};
2+
import { forwardRef } from "react";
283

294
// eslint-disable-next-line react/display-name -- Name is inferred from variable name
30-
export const SecondaryAgentButton = forwardRef<HTMLButtonElement, ButtonProps>(
31-
({ className, ...props }, ref) => {
32-
return <Button ref={ref} className={className} {...props} />;
5+
export const AgentButton = forwardRef<HTMLButtonElement, ButtonProps>(
6+
(props, ref) => {
7+
return (
8+
<Button
9+
color="neutral"
10+
{...props}
11+
ref={ref}
12+
sx={{
13+
backgroundColor: (theme) => theme.palette.background.default,
14+
"&:hover": {
15+
backgroundColor: (theme) => theme.palette.background.paper,
16+
},
17+
// Making them smaller since those icons don't have a padding around them
18+
"& .MuiButton-startIcon": {
19+
width: 12,
20+
height: 12,
21+
"& svg": { width: "100%", height: "100%" },
22+
},
23+
...props.sx,
24+
}}
25+
/>
26+
);
3327
},
3428
);

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { useTheme } from "@emotion/react";
77
import { getApiKey } from "api/api";
88
import type * as TypesGen from "api/typesGenerated";
99
import { useProxy } from "contexts/ProxyContext";
10-
import { PrimaryAgentButton } from "components/Resources/AgentButton";
10+
import { AgentButton } from "components/Resources/AgentButton";
1111
import { createAppLinkHref } from "utils/apps";
1212
import { generateRandomString } from "utils/random";
1313
import { BaseIcon } from "./BaseIcon";
@@ -86,7 +86,7 @@ export const AppLink: FC<AppLinkProps> = ({ app, workspace, agent }) => {
8686
const isPrivateApp = app.sharing_level === "owner";
8787

8888
const button = (
89-
<PrimaryAgentButton
89+
<AgentButton
9090
startIcon={icon}
9191
endIcon={isPrivateApp ? undefined : <ShareIcon app={app} />}
9292
disabled={!canClick}
@@ -100,7 +100,7 @@ export const AppLink: FC<AppLinkProps> = ({ app, workspace, agent }) => {
100100
>
101101
{appDisplayName}
102102
</span>
103-
</PrimaryAgentButton>
103+
</AgentButton>
104104
);
105105

106106
return (

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import {
2020
HelpTooltipText,
2121
HelpTooltipTitle,
2222
} from "components/HelpTooltip/HelpTooltip";
23-
import { SecondaryAgentButton } from "components/Resources/AgentButton";
23+
import { AgentButton } from "components/Resources/AgentButton";
2424
import {
2525
Popover,
2626
PopoverContent,
@@ -49,14 +49,14 @@ export const PortForwardButton: FC<PortForwardButtonProps> = (props) => {
4949
return (
5050
<Popover>
5151
<PopoverTrigger>
52-
<SecondaryAgentButton disabled={!portsQuery.data}>
52+
<AgentButton disabled={!portsQuery.data}>
5353
Ports
5454
{portsQuery.data ? (
5555
<div css={styles.portCount}>{portsQuery.data.ports.length}</div>
5656
) : (
5757
<CircularProgress size={10} css={{ marginLeft: 8 }} />
5858
)}
59-
</SecondaryAgentButton>
59+
</AgentButton>
6060
</PopoverTrigger>
6161
<PopoverContent horizontal="right" classes={{ paper }}>
6262
<PortForwardPopoverView {...props} ports={portsQuery.data?.ports} />

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {
1414
PopoverTrigger,
1515
} from "components/Popover/Popover";
1616
import { Stack } from "components/Stack/Stack";
17-
import { SecondaryAgentButton } from "../AgentButton";
17+
import { AgentButton } from "../AgentButton";
1818

1919
export interface SSHButtonProps {
2020
workspaceName: string;
@@ -34,7 +34,7 @@ export const SSHButton: FC<PropsWithChildren<SSHButtonProps>> = ({
3434
return (
3535
<Popover isDefaultOpen={isDefaultOpen}>
3636
<PopoverTrigger>
37-
<SecondaryAgentButton>SSH</SecondaryAgentButton>
37+
<AgentButton>SSH</AgentButton>
3838
</PopoverTrigger>
3939

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

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import Link from "@mui/material/Link";
2-
import { SecondaryAgentButton } from "components/Resources/AgentButton";
2+
import { AgentButton } from "components/Resources/AgentButton";
33
import { FC } from "react";
44
import * as TypesGen from "api/typesGenerated";
55
import { generateRandomString } from "utils/random";
@@ -46,7 +46,7 @@ export const TerminalLink: FC<React.PropsWithChildren<TerminalLinkProps>> = ({
4646
}}
4747
data-testid="terminal"
4848
>
49-
<SecondaryAgentButton>{Language.linkText}</SecondaryAgentButton>
49+
<AgentButton>{Language.linkText}</AgentButton>
5050
</Link>
5151
);
5252
};

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { FC, PropsWithChildren, useState, useRef } from "react";
22
import { getApiKey } from "api/api";
33
import { VSCodeIcon } from "components/Icons/VSCodeIcon";
44
import { VSCodeInsidersIcon } from "components/Icons/VSCodeInsidersIcon";
5-
import { PrimaryAgentButton } from "components/Resources/AgentButton";
5+
import { AgentButton } from "components/Resources/AgentButton";
66
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
77
import ButtonGroup from "@mui/material/ButtonGroup";
88
import { useLocalStorage } from "hooks";
@@ -63,7 +63,7 @@ export const VSCodeDesktopButton: FC<
6363
<VSCodeInsidersButton {...props} />
6464
)}
6565

66-
<PrimaryAgentButton
66+
<AgentButton
6767
aria-controls={
6868
isVariantMenuOpen ? "vscode-variant-button-menu" : undefined
6969
}
@@ -77,7 +77,7 @@ export const VSCodeDesktopButton: FC<
7777
sx={{ px: 0 }}
7878
>
7979
<KeyboardArrowDownIcon sx={{ fontSize: 16 }} />
80-
</PrimaryAgentButton>
80+
</AgentButton>
8181
</ButtonGroup>
8282

8383
<Menu
@@ -126,7 +126,7 @@ const VSCodeButton = ({
126126
const [loading, setLoading] = useState(false);
127127

128128
return (
129-
<PrimaryAgentButton
129+
<AgentButton
130130
startIcon={<VSCodeIcon />}
131131
disabled={loading}
132132
onClick={() => {
@@ -157,7 +157,7 @@ const VSCodeButton = ({
157157
}}
158158
>
159159
VS Code Desktop
160-
</PrimaryAgentButton>
160+
</AgentButton>
161161
);
162162
};
163163

@@ -170,7 +170,7 @@ const VSCodeInsidersButton = ({
170170
const [loading, setLoading] = useState(false);
171171

172172
return (
173-
<PrimaryAgentButton
173+
<AgentButton
174174
startIcon={<VSCodeInsidersIcon />}
175175
disabled={loading}
176176
onClick={() => {
@@ -201,6 +201,6 @@ const VSCodeInsidersButton = ({
201201
}}
202202
>
203203
VS Code Insiders
204-
</PrimaryAgentButton>
204+
</AgentButton>
205205
);
206206
};

0 commit comments

Comments
 (0)