Skip to content

chore: replace MUI Button - 1 #17865

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
May 16, 2025
Merged

chore: replace MUI Button - 1 #17865

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
2fbeb68
chore: replace MUI Button - 1
BrunoQuaresma May 15, 2025
ebe7c0f
Update pagination buttons
BrunoQuaresma May 15, 2025
48d65c9
Replace buton in more components
BrunoQuaresma May 15, 2025
27e4658
Merge branch 'main' of https://github.com/coder/coder into bq/replace…
BrunoQuaresma May 15, 2025
bfe665b
Fix tests, port forward button and fmt
BrunoQuaresma May 16, 2025
299dd1f
Fix stories
BrunoQuaresma May 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 3 additions & 18 deletions site/src/components/PaginationWidget/PageButtons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
import { useTheme } from "@emotion/react";
import Button from "@mui/material/Button";
import { Button } from "components/Button/Button";
import type { FC, ReactNode } from "react";

type NumberedPageButtonProps = {
pageNumber: number;
totalPages: number;

onClick?: () => void;
highlighted?: boolean;
disabled?: boolean;
Expand Down Expand Up @@ -68,23 +66,10 @@ const BasePageButton: FC<BasePageButtonProps> = ({
highlighted = false,
disabled = false,
}) => {
const theme = useTheme();

return (
<Button
css={
highlighted && {
borderColor: theme.roles.active.outline,
backgroundColor: theme.roles.active.background,

// Override the hover state with active colors, but not hover
// colors because clicking won't do anything.
"&:hover": {
borderColor: theme.roles.active.outline,
backgroundColor: theme.roles.active.background,
},
}
}
variant={highlighted ? "default" : "outline"}
size="icon"
aria-label={ariaLabel}
name={name}
disabled={disabled}
Expand Down
27 changes: 5 additions & 22 deletions site/src/components/PaginationWidget/PaginationNavButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { useTheme } from "@emotion/react";
import Button from "@mui/material/Button";
import Tooltip from "@mui/material/Tooltip";
import { Button } from "components/Button/Button";
import {
type ButtonHTMLAttributes,
type ReactNode,
Expand Down Expand Up @@ -32,7 +31,6 @@ function PaginationNavButtonCore({
disabledMessageTimeout = 3000,
...delegatedProps
}: PaginationNavButtonProps) {
const theme = useTheme();
const [showDisabledMessage, setShowDisabledMessage] = useState(false);

// Inline state sync - this is safe/recommended by the React team in this case
Expand Down Expand Up @@ -63,25 +61,10 @@ function PaginationNavButtonCore({
* (mostly for giving direct UI feedback to those actions)
*/}
<Button
aria-disabled={disabled}
css={
disabled && {
borderColor: theme.palette.divider,
color: theme.palette.text.disabled,
cursor: "default",
"&:hover": {
backgroundColor: theme.palette.background.default,
borderColor: theme.palette.divider,
},
}
}
onClick={() => {
if (disabled) {
setShowDisabledMessage(true);
} else {
onClick();
}
}}
variant="outline"
size="icon"
disabled={disabled}
onClick={onClick}
{...delegatedProps}
/>
</Tooltip>
Expand Down
12 changes: 4 additions & 8 deletions site/src/components/PaginationWidget/PaginationWidgetBase.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {
type SampleProps = Omit<PaginationWidgetBaseProps, "onPageChange">;

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

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

await userEvent.click(prevButton);
expect(onPageChange).not.toHaveBeenCalled();
unmount();
}
});

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

const button = await screen.findByLabelText("Next page");
expect(button).not.toBeDisabled();
expect(button).toHaveAttribute("aria-disabled", "true");
expect(button).toBeDisabled();

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

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

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

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

await userEvent.click(nextButton);
expect(onPageChange).toHaveBeenCalledTimes(2);
Expand Down
4 changes: 2 additions & 2 deletions site/src/components/PaginationWidget/PaginationWidgetBase.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ export const PaginationWidgetBase: FC<PaginationWidgetBaseProps> = ({
}
}}
>
<ChevronLeftIcon className="size-icon-sm" />
<ChevronLeftIcon />
</PaginationNavButton>

{isMobile ? (
Expand All @@ -86,7 +86,7 @@ export const PaginationWidgetBase: FC<PaginationWidgetBaseProps> = ({
}
}}
>
<ChevronRightIcon className="size-icon-sm" />
<ChevronRightIcon />
</PaginationNavButton>
</div>
);
Expand Down
8 changes: 4 additions & 4 deletions site/src/modules/resources/DownloadAgentLogsButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import DownloadOutlined from "@mui/icons-material/DownloadOutlined";
import Button from "@mui/material/Button";
import { agentLogs } from "api/queries/workspaces";
import type { WorkspaceAgent, WorkspaceAgentLog } from "api/typesGenerated";
import { Button } from "components/Button/Button";
import { displayError } from "components/GlobalSnackbar/utils";
import { saveAs } from "file-saver";
import { type FC, useState } from "react";
Expand Down Expand Up @@ -35,10 +35,9 @@ export const DownloadAgentLogsButton: FC<DownloadAgentLogsButtonProps> = ({

return (
<Button
startIcon={<DownloadOutlined />}
disabled={!isConnected || isDownloading}
variant="text"
size="small"
variant="subtle"
size="sm"
onClick={async () => {
try {
setIsDownloading(true);
Expand All @@ -57,6 +56,7 @@ export const DownloadAgentLogsButton: FC<DownloadAgentLogsButtonProps> = ({
}
}}
>
<DownloadOutlined />
{isDownloading ? "Downloading..." : "Download logs"}
</Button>
);
Expand Down
127 changes: 59 additions & 68 deletions site/src/modules/resources/PortForwardButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,13 @@ import { type Interpolation, type Theme, useTheme } from "@emotion/react";
import LockIcon from "@mui/icons-material/Lock";
import LockOpenIcon from "@mui/icons-material/LockOpen";
import SensorsIcon from "@mui/icons-material/Sensors";
import MUIButton from "@mui/material/Button";
import CircularProgress from "@mui/material/CircularProgress";
import FormControl from "@mui/material/FormControl";
import Link from "@mui/material/Link";
import MenuItem from "@mui/material/MenuItem";
import Select from "@mui/material/Select";
import Stack from "@mui/material/Stack";
import TextField from "@mui/material/TextField";
import Tooltip from "@mui/material/Tooltip";
import MUITooltip from "@mui/material/Tooltip";
import { API } from "api/api";
import {
deleteWorkspacePortShare,
Expand All @@ -33,14 +31,25 @@ import {
HelpTooltipTitle,
} from "components/HelpTooltip/HelpTooltip";
import { Spinner } from "components/Spinner/Spinner";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "components/Tooltip/Tooltip";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "components/deprecated/Popover/Popover";
import { type FormikContextType, useFormik } from "formik";
import { type ClassName, useClassName } from "hooks/useClassName";
import { ChevronDownIcon, ExternalLinkIcon, X as XIcon } from "lucide-react";
import {
ChevronDownIcon,
ExternalLinkIcon,
ShareIcon,
X as XIcon,
} from "lucide-react";
import { useDashboard } from "modules/dashboard/useDashboard";
import { type FC, useState } from "react";
import { useMutation, useQuery } from "react-query";
Expand Down Expand Up @@ -77,26 +86,13 @@ export const PortForwardButton: FC<PortForwardButtonProps> = (props) => {
return (
<Popover>
<PopoverTrigger>
<MUIButton
disabled={!portsQuery.data}
size="small"
variant="text"
endIcon={<ChevronDownIcon className="size-4" />}
css={{ fontSize: 13, padding: "8px 12px" }}
startIcon={
portsQuery.data ? (
<div>
<span css={styles.portCount}>
{portsQuery.data.ports.length}
</span>
</div>
) : (
<CircularProgress size={10} />
)
}
>
<Button disabled={!portsQuery.data} size="sm" variant="subtle">
<Spinner loading={!portsQuery.data}>
<span css={styles.portCount}>{portsQuery.data?.ports.length}</span>
</Spinner>
Open ports
</MUIButton>
<ChevronDownIcon className="size-4" />
</Button>
</PopoverTrigger>
<PopoverContent horizontal="right" classes={{ paper }}>
<PortForwardPopoverView
Expand Down Expand Up @@ -203,14 +199,14 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
canSharePorts && template.max_port_share_level === "public";

const disabledPublicMenuItem = (
<Tooltip title="This workspace template does not allow sharing ports with unauthenticated users.">
<MUITooltip title="This workspace template does not allow sharing ports with unauthenticated users.">
{/* Tooltips don't work directly on disabled MenuItem components so you must wrap in div. */}
<div>
<MenuItem value="public" disabled>
Public
</MenuItem>
</div>
</Tooltip>
</MUITooltip>
);

return (
Expand Down Expand Up @@ -297,24 +293,17 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
required
css={styles.newPortInput}
/>
<MUIButton
type="submit"
size="small"
variant="text"
css={{
paddingLeft: 12,
paddingRight: 12,
minWidth: 0,
}}
>
<ExternalLinkIcon
className="size-icon-xs"
css={{
flexShrink: 0,
color: theme.palette.text.primary,
}}
/>
</MUIButton>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Button type="submit" size="icon" variant="subtle">
<ExternalLinkIcon />
<span className="sr-only">Connect to port</span>
</Button>
</TooltipTrigger>
<TooltipContent>Connect to port</TooltipContent>
</Tooltip>
</TooltipProvider>
</form>
</Stack>
</Stack>
Expand Down Expand Up @@ -369,21 +358,29 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
alignItems="center"
>
{canSharePorts && (
<MUIButton
size="small"
variant="text"
onClick={async () => {
await upsertSharedPortMutation.mutateAsync({
agent_name: agent.name,
port: port.port,
protocol: listeningPortProtocol,
share_level: "authenticated",
});
await sharedPortsQuery.refetch();
}}
>
Share
</MUIButton>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Button
size="icon"
variant="subtle"
onClick={async () => {
await upsertSharedPortMutation.mutateAsync({
agent_name: agent.name,
port: port.port,
protocol: listeningPortProtocol,
share_level: "authenticated",
});
await sharedPortsQuery.refetch();
}}
>
<ShareIcon />
<span className="sr-only">Share</span>
</Button>
</TooltipTrigger>
<TooltipContent>Share this port</TooltipContent>
</Tooltip>
</TooltipProvider>
)}
</Stack>
</Stack>
Expand Down Expand Up @@ -483,10 +480,9 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
)}
</Select>
</FormControl>
<MUIButton
size="small"
variant="text"
css={styles.deleteButton}
<Button
size="sm"
variant="subtle"
onClick={async () => {
await deleteSharedPortMutation.mutateAsync({
agent_name: agent.name,
Expand All @@ -502,7 +498,7 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
color: theme.palette.text.primary,
}}
/>
</MUIButton>
</Button>
</Stack>
</Stack>
);
Expand Down Expand Up @@ -617,11 +613,6 @@ const styles = {
},
}),

deleteButton: () => ({
minWidth: 30,
padding: 0,
}),

newPortForm: (theme) => ({
border: `1px solid ${theme.palette.divider}`,
borderRadius: "4px",
Expand Down
Loading
Loading