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

Lines changed: 3 additions & 18 deletions
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

Lines changed: 5 additions & 22 deletions
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

Lines changed: 4 additions & 8 deletions
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

Lines changed: 2 additions & 2 deletions
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

Lines changed: 4 additions & 4 deletions
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

Lines changed: 59 additions & 68 deletions
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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy