Skip to content

Commit 87a1ebc

Browse files
BrunoQuaresmaBrunoQuaresma
authored
chore: replace MUI Button - 1 (#17865)
1 parent f8f4dc6 commit 87a1ebc

File tree

13 files changed

+129
-183
lines changed

13 files changed

+129
-183
lines changed

‎site/src/components/PaginationWidget/PageButtons.tsx

+3-18
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
1-
import { useTheme } from "@emotion/react";
2-
import Button from "@mui/material/Button";
1+
import { Button } from "components/Button/Button";
32
import type { FC, ReactNode } from "react";
43

54
type NumberedPageButtonProps = {
65
pageNumber: number;
76
totalPages: number;
8-
97
onClick?: () => void;
108
highlighted?: boolean;
119
disabled?: boolean;
@@ -68,23 +66,10 @@ const BasePageButton: FC<BasePageButtonProps> = ({
6866
highlighted = false,
6967
disabled = false,
7068
}) => {
71-
const theme = useTheme();
72-
7369
return (
7470
<Button
75-
css={
76-
highlighted && {
77-
borderColor: theme.roles.active.outline,
78-
backgroundColor: theme.roles.active.background,
79-
80-
// Override the hover state with active colors, but not hover
81-
// colors because clicking won't do anything.
82-
"&:hover": {
83-
borderColor: theme.roles.active.outline,
84-
backgroundColor: theme.roles.active.background,
85-
},
86-
}
87-
}
71+
variant={highlighted ? "default" : "outline"}
72+
size="icon"
8873
aria-label={ariaLabel}
8974
name={name}
9075
disabled={disabled}

‎site/src/components/PaginationWidget/PaginationNavButton.tsx

+5-22
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
import { useTheme } from "@emotion/react";
2-
import Button from "@mui/material/Button";
31
import Tooltip from "@mui/material/Tooltip";
2+
import { Button } from "components/Button/Button";
43
import {
54
type ButtonHTMLAttributes,
65
type ReactNode,
@@ -32,7 +31,6 @@ function PaginationNavButtonCore({
3231
disabledMessageTimeout = 3000,
3332
...delegatedProps
3433
}: PaginationNavButtonProps) {
35-
const theme = useTheme();
3634
const [showDisabledMessage, setShowDisabledMessage] = useState(false);
3735

3836
// Inline state sync - this is safe/recommended by the React team in this case
@@ -63,25 +61,10 @@ function PaginationNavButtonCore({
6361
* (mostly for giving direct UI feedback to those actions)
6462
*/}
6563
<Button
66-
aria-disabled={disabled}
67-
css={
68-
disabled && {
69-
borderColor: theme.palette.divider,
70-
color: theme.palette.text.disabled,
71-
cursor: "default",
72-
"&:hover": {
73-
backgroundColor: theme.palette.background.default,
74-
borderColor: theme.palette.divider,
75-
},
76-
}
77-
}
78-
onClick={() => {
79-
if (disabled) {
80-
setShowDisabledMessage(true);
81-
} else {
82-
onClick();
83-
}
84-
}}
64+
variant="outline"
65+
size="icon"
66+
disabled={disabled}
67+
onClick={onClick}
8568
{...delegatedProps}
8669
/>
8770
</Tooltip>

‎site/src/components/PaginationWidget/PaginationWidgetBase.test.tsx

+4-8
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
type SampleProps = Omit<PaginationWidgetBaseProps, "onPageChange">;
1010

1111
describe(PaginationWidgetBase.name, () => {
12-
it("Should have its previous button be aria-disabled while on page 1", async () => {
12+
it("Should have its previous button be disabled while on page 1", async () => {
1313
const sampleProps: SampleProps[] = [
1414
{ currentPage: 1, pageSize: 5, totalRecords: 6 },
1515
{ currentPage: 1, pageSize: 50, totalRecords: 200 },
@@ -23,16 +23,15 @@ describe(PaginationWidgetBase.name, () => {
2323
);
2424

2525
const prevButton = await screen.findByLabelText("Previous page");
26-
expect(prevButton).not.toBeDisabled();
27-
expect(prevButton).toHaveAttribute("aria-disabled", "true");
26+
expect(prevButton).toBeDisabled();
2827

2928
await userEvent.click(prevButton);
3029
expect(onPageChange).not.toHaveBeenCalled();
3130
unmount();
3231
}
3332
});
3433

35-
it("Should have its next button be aria-disabled while on last page", async () => {
34+
it("Should have its next button be disabled while on last page", async () => {
3635
const sampleProps: SampleProps[] = [
3736
{ currentPage: 2, pageSize: 5, totalRecords: 6 },
3837
{ currentPage: 4, pageSize: 50, totalRecords: 200 },
@@ -46,8 +45,7 @@ describe(PaginationWidgetBase.name, () => {
4645
);
4746

4847
const button = await screen.findByLabelText("Next page");
49-
expect(button).not.toBeDisabled();
50-
expect(button).toHaveAttribute("aria-disabled", "true");
48+
expect(button).toBeDisabled();
5149

5250
await userEvent.click(button);
5351
expect(onPageChange).not.toHaveBeenCalled();
@@ -72,13 +70,11 @@ describe(PaginationWidgetBase.name, () => {
7270
const nextButton = await screen.findByLabelText("Next page");
7371

7472
expect(prevButton).not.toBeDisabled();
75-
expect(prevButton).toHaveAttribute("aria-disabled", "false");
7673

7774
await userEvent.click(prevButton);
7875
expect(onPageChange).toHaveBeenCalledTimes(1);
7976

8077
expect(nextButton).not.toBeDisabled();
81-
expect(nextButton).toHaveAttribute("aria-disabled", "false");
8278

8379
await userEvent.click(nextButton);
8480
expect(onPageChange).toHaveBeenCalledTimes(2);

‎site/src/components/PaginationWidget/PaginationWidgetBase.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ export const PaginationWidgetBase: FC<PaginationWidgetBaseProps> = ({
5959
}
6060
}}
6161
>
62-
<ChevronLeftIcon className="size-icon-sm" />
62+
<ChevronLeftIcon />
6363
</PaginationNavButton>
6464

6565
{isMobile ? (
@@ -86,7 +86,7 @@ export const PaginationWidgetBase: FC<PaginationWidgetBaseProps> = ({
8686
}
8787
}}
8888
>
89-
<ChevronRightIcon className="size-icon-sm" />
89+
<ChevronRightIcon />
9090
</PaginationNavButton>
9191
</div>
9292
);

‎site/src/modules/resources/DownloadAgentLogsButton.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import DownloadOutlined from "@mui/icons-material/DownloadOutlined";
2-
import Button from "@mui/material/Button";
32
import { agentLogs } from "api/queries/workspaces";
43
import type { WorkspaceAgent, WorkspaceAgentLog } from "api/typesGenerated";
4+
import { Button } from "components/Button/Button";
55
import { displayError } from "components/GlobalSnackbar/utils";
66
import { saveAs } from "file-saver";
77
import { type FC, useState } from "react";
@@ -35,10 +35,9 @@ export const DownloadAgentLogsButton: FC<DownloadAgentLogsButtonProps> = ({
3535

3636
return (
3737
<Button
38-
startIcon={<DownloadOutlined />}
3938
disabled={!isConnected || isDownloading}
40-
variant="text"
41-
size="small"
39+
variant="subtle"
40+
size="sm"
4241
onClick={async () => {
4342
try {
4443
setIsDownloading(true);
@@ -57,6 +56,7 @@ export const DownloadAgentLogsButton: FC<DownloadAgentLogsButtonProps> = ({
5756
}
5857
}}
5958
>
59+
<DownloadOutlined />
6060
{isDownloading ? "Downloading..." : "Download logs"}
6161
</Button>
6262
);

‎site/src/modules/resources/PortForwardButton.tsx

+59-68
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,13 @@ import { type Interpolation, type Theme, useTheme } from "@emotion/react";
22
import LockIcon from "@mui/icons-material/Lock";
33
import LockOpenIcon from "@mui/icons-material/LockOpen";
44
import SensorsIcon from "@mui/icons-material/Sensors";
5-
import MUIButton from "@mui/material/Button";
6-
import CircularProgress from "@mui/material/CircularProgress";
75
import FormControl from "@mui/material/FormControl";
86
import Link from "@mui/material/Link";
97
import MenuItem from "@mui/material/MenuItem";
108
import Select from "@mui/material/Select";
119
import Stack from "@mui/material/Stack";
1210
import TextField from "@mui/material/TextField";
13-
import Tooltip from "@mui/material/Tooltip";
11+
import MUITooltip from "@mui/material/Tooltip";
1412
import { API } from "api/api";
1513
import {
1614
deleteWorkspacePortShare,
@@ -33,14 +31,25 @@ import {
3331
HelpTooltipTitle,
3432
} from "components/HelpTooltip/HelpTooltip";
3533
import { Spinner } from "components/Spinner/Spinner";
34+
import {
35+
Tooltip,
36+
TooltipContent,
37+
TooltipProvider,
38+
TooltipTrigger,
39+
} from "components/Tooltip/Tooltip";
3640
import {
3741
Popover,
3842
PopoverContent,
3943
PopoverTrigger,
4044
} from "components/deprecated/Popover/Popover";
4145
import { type FormikContextType, useFormik } from "formik";
4246
import { type ClassName, useClassName } from "hooks/useClassName";
43-
import { ChevronDownIcon, ExternalLinkIcon, X as XIcon } from "lucide-react";
47+
import {
48+
ChevronDownIcon,
49+
ExternalLinkIcon,
50+
ShareIcon,
51+
X as XIcon,
52+
} from "lucide-react";
4453
import { useDashboard } from "modules/dashboard/useDashboard";
4554
import { type FC, useState } from "react";
4655
import { useMutation, useQuery } from "react-query";
@@ -77,26 +86,13 @@ export const PortForwardButton: FC<PortForwardButtonProps> = (props) => {
7786
return (
7887
<Popover>
7988
<PopoverTrigger>
80-
<MUIButton
81-
disabled={!portsQuery.data}
82-
size="small"
83-
variant="text"
84-
endIcon={<ChevronDownIcon className="size-4" />}
85-
css={{ fontSize: 13, padding: "8px 12px" }}
86-
startIcon={
87-
portsQuery.data ? (
88-
<div>
89-
<span css={styles.portCount}>
90-
{portsQuery.data.ports.length}
91-
</span>
92-
</div>
93-
) : (
94-
<CircularProgress size={10} />
95-
)
96-
}
97-
>
89+
<Button disabled={!portsQuery.data} size="sm" variant="subtle">
90+
<Spinner loading={!portsQuery.data}>
91+
<span css={styles.portCount}>{portsQuery.data?.ports.length}</span>
92+
</Spinner>
9893
Open ports
99-
</MUIButton>
94+
<ChevronDownIcon className="size-4" />
95+
</Button>
10096
</PopoverTrigger>
10197
<PopoverContent horizontal="right" classes={{ paper }}>
10298
<PortForwardPopoverView
@@ -203,14 +199,14 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
203199
canSharePorts && template.max_port_share_level === "public";
204200

205201
const disabledPublicMenuItem = (
206-
<Tooltip title="This workspace template does not allow sharing ports with unauthenticated users.">
202+
<MUITooltip title="This workspace template does not allow sharing ports with unauthenticated users.">
207203
{/* Tooltips don't work directly on disabled MenuItem components so you must wrap in div. */}
208204
<div>
209205
<MenuItem value="public" disabled>
210206
Public
211207
</MenuItem>
212208
</div>
213-
</Tooltip>
209+
</MUITooltip>
214210
);
215211

216212
return (
@@ -297,24 +293,17 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
297293
required
298294
css={styles.newPortInput}
299295
/>
300-
<MUIButton
301-
type="submit"
302-
size="small"
303-
variant="text"
304-
css={{
305-
paddingLeft: 12,
306-
paddingRight: 12,
307-
minWidth: 0,
308-
}}
309-
>
310-
<ExternalLinkIcon
311-
className="size-icon-xs"
312-
css={{
313-
flexShrink: 0,
314-
color: theme.palette.text.primary,
315-
}}
316-
/>
317-
</MUIButton>
296+
<TooltipProvider>
297+
<Tooltip>
298+
<TooltipTrigger asChild>
299+
<Button type="submit" size="icon" variant="subtle">
300+
<ExternalLinkIcon />
301+
<span className="sr-only">Connect to port</span>
302+
</Button>
303+
</TooltipTrigger>
304+
<TooltipContent>Connect to port</TooltipContent>
305+
</Tooltip>
306+
</TooltipProvider>
318307
</form>
319308
</Stack>
320309
</Stack>
@@ -369,21 +358,29 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
369358
alignItems="center"
370359
>
371360
{canSharePorts && (
372-
<MUIButton
373-
size="small"
374-
variant="text"
375-
onClick={async () => {
376-
await upsertSharedPortMutation.mutateAsync({
377-
agent_name: agent.name,
378-
port: port.port,
379-
protocol: listeningPortProtocol,
380-
share_level: "authenticated",
381-
});
382-
await sharedPortsQuery.refetch();
383-
}}
384-
>
385-
Share
386-
</MUIButton>
361+
<TooltipProvider>
362+
<Tooltip>
363+
<TooltipTrigger asChild>
364+
<Button
365+
size="icon"
366+
variant="subtle"
367+
onClick={async () => {
368+
await upsertSharedPortMutation.mutateAsync({
369+
agent_name: agent.name,
370+
port: port.port,
371+
protocol: listeningPortProtocol,
372+
share_level: "authenticated",
373+
});
374+
await sharedPortsQuery.refetch();
375+
}}
376+
>
377+
<ShareIcon />
378+
<span className="sr-only">Share</span>
379+
</Button>
380+
</TooltipTrigger>
381+
<TooltipContent>Share this port</TooltipContent>
382+
</Tooltip>
383+
</TooltipProvider>
387384
)}
388385
</Stack>
389386
</Stack>
@@ -483,10 +480,9 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
483480
)}
484481
</Select>
485482
</FormControl>
486-
<MUIButton
487-
size="small"
488-
variant="text"
489-
css={styles.deleteButton}
483+
<Button
484+
size="sm"
485+
variant="subtle"
490486
onClick={async () => {
491487
await deleteSharedPortMutation.mutateAsync({
492488
agent_name: agent.name,
@@ -502,7 +498,7 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
502498
color: theme.palette.text.primary,
503499
}}
504500
/>
505-
</MUIButton>
501+
</Button>
506502
</Stack>
507503
</Stack>
508504
);
@@ -617,11 +613,6 @@ const styles = {
617613
},
618614
}),
619615

620-
deleteButton: () => ({
621-
minWidth: 30,
622-
padding: 0,
623-
}),
624-
625616
newPortForm: (theme) => ({
626617
border: `1px solid ${theme.palette.divider}`,
627618
borderRadius: "4px",

0 commit comments

Comments
 (0)