Skip to content

Commit 12c5c65

Browse files
BrunoQuaresmaBrunoQuaresma
authored
refactor: replace MUI buttons on banners, paywalls and a few pages (#16215)
1 parent 0c30a11 commit 12c5c65

File tree

16 files changed

+79
-110
lines changed

16 files changed

+79
-110
lines changed

‎site/e2e/helpers.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1062,7 +1062,7 @@ export async function createUser(
10621062
await page.goto("/deployment/users", { waitUntil: "domcontentloaded" });
10631063
await expect(page).toHaveTitle("Users - Coder");
10641064

1065-
await page.getByRole("button", { name: "Create user" }).click();
1065+
await page.getByRole("link", { name: "Create user" }).click();
10661066
await expect(page).toHaveTitle("Create User - Coder");
10671067

10681068
const username = userValues.username ?? randomName();

‎site/src/components/EmptyState/EmptyState.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import Button from "@mui/material/Button";
21
import type { Meta, StoryObj } from "@storybook/react";
2+
import { Button } from "components/Button/Button";
33
import { EmptyState } from "./EmptyState";
44

55
const meta: Meta<typeof EmptyState> = {

‎site/src/components/Paywall/Paywall.tsx

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
import type { Interpolation, Theme } from "@emotion/react";
22
import TaskAltIcon from "@mui/icons-material/TaskAlt";
3-
import Button from "@mui/material/Button";
43
import Link from "@mui/material/Link";
54
import { PremiumBadge } from "components/Badges/Badges";
5+
import { Button } from "components/Button/Button";
66
import { Stack } from "components/Stack/Stack";
77
import type { FC, ReactNode } from "react";
8-
import { docs } from "utils/docs";
98

109
export interface PaywallProps {
1110
message: string;
@@ -57,15 +56,14 @@ export const Paywall: FC<PaywallProps> = ({
5756
</li>
5857
</ul>
5958
<div css={styles.learnButton}>
60-
<Button
61-
href="https://coder.com/pricing#compare-plans"
62-
target="_blank"
63-
rel="noreferrer"
64-
startIcon={<span css={{ fontSize: 22 }}>&rarr;</span>}
65-
variant="outlined"
66-
color="neutral"
67-
>
68-
Learn about Premium
59+
<Button asChild>
60+
<a
61+
href="https://coder.com/pricing#compare-plans"
62+
target="_blank"
63+
rel="noreferrer"
64+
>
65+
Learn about Premium
66+
</a>
6967
</Button>
7068
</div>
7169
</Stack>

‎site/src/components/Paywall/PopoverPaywall.tsx

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
import type { Interpolation, Theme } from "@emotion/react";
22
import TaskAltIcon from "@mui/icons-material/TaskAlt";
3-
import Button from "@mui/material/Button";
43
import Link from "@mui/material/Link";
54
import { PremiumBadge } from "components/Badges/Badges";
5+
import { Button } from "components/Button/Button";
66
import { Stack } from "components/Stack/Stack";
77
import type { FC, ReactNode } from "react";
8-
import { docs } from "utils/docs";
98

109
export interface PopoverPaywallProps {
1110
message: string;
@@ -61,15 +60,14 @@ export const PopoverPaywall: FC<PopoverPaywallProps> = ({
6160
</li>
6261
</ul>
6362
<div css={styles.learnButton}>
64-
<Button
65-
href="https://coder.com/pricing#compare-plans"
66-
target="_blank"
67-
rel="noreferrer"
68-
startIcon={<span css={{ fontSize: 22 }}>&rarr;</span>}
69-
variant="outlined"
70-
color="neutral"
71-
>
72-
Learn about Premium
63+
<Button asChild>
64+
<a
65+
href="https://coder.com/pricing#compare-plans"
66+
target="_blank"
67+
rel="noreferrer"
68+
>
69+
Learn about Premium
70+
</a>
7371
</Button>
7472
</div>
7573
</Stack>

‎site/src/components/SettingsHeader/SettingsHeader.tsx

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import { useTheme } from "@emotion/react";
22
import LaunchOutlined from "@mui/icons-material/LaunchOutlined";
3-
import Button from "@mui/material/Button";
3+
import { Button } from "components/Button/Button";
44
import { Stack } from "components/Stack/Stack";
5+
import { SquareArrowOutUpRightIcon } from "lucide-react";
56
import type { FC, ReactNode } from "react";
67

78
interface HeaderProps {
@@ -62,13 +63,11 @@ export const SettingsHeader: FC<HeaderProps> = ({
6263
</div>
6364

6465
{docsHref && (
65-
<Button
66-
startIcon={<LaunchOutlined />}
67-
component="a"
68-
href={docsHref}
69-
target="_blank"
70-
>
71-
Read the docs
66+
<Button asChild variant="outline">
67+
<a href={docsHref} target="_blank" rel="noreferrer">
68+
<SquareArrowOutUpRightIcon />
69+
Read the docs
70+
</a>
7271
</Button>
7372
)}
7473
</Stack>

‎site/src/modules/dashboard/DashboardLayout.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import InfoOutlined from "@mui/icons-material/InfoOutlined";
2-
import Button from "@mui/material/Button";
32
import Link from "@mui/material/Link";
43
import Snackbar from "@mui/material/Snackbar";
4+
import { Button } from "components/Button/Button";
55
import { Loader } from "components/Loader/Loader";
66
import { useAuthenticated } from "contexts/auth/RequireAuth";
77
import { AnnouncementBanners } from "modules/dashboard/AnnouncementBanners/AnnouncementBanners";
@@ -92,7 +92,7 @@ export const DashboardLayout: FC = () => {
9292
</div>
9393
}
9494
action={
95-
<Button variant="text" size="small" onClick={updateCheck.dismiss}>
95+
<Button variant="subtle" size="sm" onClick={updateCheck.dismiss}>
9696
Dismiss
9797
</Button>
9898
}

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

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import type { Interpolation, Theme } from "@emotion/react";
2-
import Button from "@mui/material/Button";
32
import type { JFrogXrayScan } from "api/typesGenerated";
3+
import { Button } from "components/Button/Button";
44
import { ExternalImage } from "components/ExternalImage/ExternalImage";
55
import type { FC } from "react";
66

@@ -39,15 +39,10 @@ export const XRayScanAlert: FC<XRayScanAlertProps> = ({ scan }) => {
3939
</ul>
4040
</div>
4141
<div css={styles.link}>
42-
<Button
43-
component="a"
44-
size="small"
45-
variant="text"
46-
href={scan.results_url}
47-
target="_blank"
48-
rel="noreferrer"
49-
>
50-
Review results
42+
<Button size="sm" variant="subtle" asChild>
43+
<a href={scan.results_url} target="_blank" rel="noreferrer">
44+
Review results
45+
</a>
5146
</Button>
5247
</div>
5348
</div>

‎site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AnnouncementBannerSettings.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
import { type CSSObject, useTheme } from "@emotion/react";
2-
import AddIcon from "@mui/icons-material/AddOutlined";
3-
import Button from "@mui/material/Button";
42
import Link from "@mui/material/Link";
53
import Table from "@mui/material/Table";
64
import TableBody from "@mui/material/TableBody";
@@ -9,9 +7,11 @@ import TableContainer from "@mui/material/TableContainer";
97
import TableHead from "@mui/material/TableHead";
108
import TableRow from "@mui/material/TableRow";
119
import type { BannerConfig } from "api/typesGenerated";
10+
import { Button } from "components/Button/Button";
1211
import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog";
1312
import { EmptyState } from "components/EmptyState/EmptyState";
1413
import { Stack } from "components/Stack/Stack";
14+
import { PlusIcon } from "lucide-react";
1515
import { type FC, useState } from "react";
1616
import { AnnouncementBannerDialog } from "./AnnouncementBannerDialog";
1717
import { AnnouncementBannerItem } from "./AnnouncementBannerItem";
@@ -89,8 +89,9 @@ export const AnnouncementBannerSettings: FC<
8989
<Button
9090
disabled={!isEntitled}
9191
onClick={() => addBanner()}
92-
startIcon={<AddIcon />}
92+
variant="outline"
9393
>
94+
<PlusIcon />
9495
New
9596
</Button>
9697
</Stack>

‎site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/AddNewLicensePageView.tsx

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft";
2-
import Button from "@mui/material/Button";
31
import TextField from "@mui/material/TextField";
42
import { ErrorAlert } from "components/Alert/ErrorAlert";
3+
import { Button } from "components/Button/Button";
54
import { FileUpload } from "components/FileUpload/FileUpload";
65
import { displayError } from "components/GlobalSnackbar/utils";
76
import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
87
import { Stack } from "components/Stack/Stack";
8+
import { ChevronLeftIcon } from "lucide-react";
99
import type { FC } from "react";
1010
import { Link as RouterLink } from "react-router-dom";
1111
import { Fieldset } from "../Fieldset";
@@ -54,12 +54,11 @@ export const AddNewLicensePageView: FC<AddNewLicenseProps> = ({
5454
title="Add a license"
5555
description="Get access to high availability, RBAC, quotas, and more."
5656
/>
57-
<Button
58-
component={RouterLink}
59-
startIcon={<KeyboardArrowLeft />}
60-
to="/deployment/licenses"
61-
>
62-
All Licenses
57+
<Button asChild variant="outline">
58+
<RouterLink to="/deployment/licenses">
59+
<ChevronLeftIcon />
60+
All Licenses
61+
</RouterLink>
6362
</Button>
6463
</Stack>
6564

‎site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ import { useWindowSize } from "hooks/useWindowSize";
1414
import type { FC } from "react";
1515
import Confetti from "react-confetti";
1616
import { Link } from "react-router-dom";
17-
import { license } from "../../../../e2e/constants";
1817
import { LicenseCard } from "./LicenseCard";
1918
import { LicenseSeatConsumptionChart } from "./LicenseSeatConsumptionChart";
2019

‎site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/CreateOAuth2AppPageView.tsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft";
2-
import Button from "@mui/material/Button";
32
import type * as TypesGen from "api/typesGenerated";
43
import { ErrorAlert } from "components/Alert/ErrorAlert";
4+
import { Button } from "components/Button/Button";
55
import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
66
import { Stack } from "components/Stack/Stack";
7+
import { ChevronLeftIcon } from "lucide-react";
78
import type { FC } from "react";
8-
import { Link } from "react-router-dom";
9+
import { Link as RouterLink } from "react-router-dom";
910
import { OAuth2AppForm } from "./OAuth2AppForm";
1011

1112
type CreateOAuth2AppProps = {
@@ -30,12 +31,11 @@ export const CreateOAuth2AppPageView: FC<CreateOAuth2AppProps> = ({
3031
title="Add an OAuth2 application"
3132
description="Configure an application to use Coder as an OAuth2 provider."
3233
/>
33-
<Button
34-
component={Link}
35-
startIcon={<KeyboardArrowLeft />}
36-
to="/deployment/oauth2-provider/apps"
37-
>
38-
All OAuth2 Applications
34+
<Button variant="outline" asChild>
35+
<RouterLink to="/deployment/oauth2-provider/apps">
36+
<ChevronLeftIcon />
37+
All OAuth2 Applications
38+
</RouterLink>
3939
</Button>
4040
</Stack>
4141

‎site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/EditOAuth2AppPageView.tsx

Lines changed: 10 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
import { type Interpolation, type Theme, useTheme } from "@emotion/react";
22
import CopyIcon from "@mui/icons-material/FileCopyOutlined";
3-
import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft";
43
import LoadingButton from "@mui/lab/LoadingButton";
5-
import Button from "@mui/material/Button";
64
import Divider from "@mui/material/Divider";
75
import Table from "@mui/material/Table";
86
import TableBody from "@mui/material/TableBody";
@@ -13,6 +11,7 @@ import TableRow from "@mui/material/TableRow";
1311
import type * as TypesGen from "api/typesGenerated";
1412
import { Alert } from "components/Alert/Alert";
1513
import { ErrorAlert } from "components/Alert/ErrorAlert";
14+
import { Button } from "components/Button/Button";
1615
import { CodeExample } from "components/CodeExample/CodeExample";
1716
import { CopyableValue } from "components/CopyableValue/CopyableValue";
1817
import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog";
@@ -21,8 +20,9 @@ import { Loader } from "components/Loader/Loader";
2120
import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
2221
import { Stack } from "components/Stack/Stack";
2322
import { TableLoader } from "components/TableLoader/TableLoader";
23+
import { ChevronLeftIcon } from "lucide-react";
2424
import { type FC, useState } from "react";
25-
import { Link, useSearchParams } from "react-router-dom";
25+
import { Link as RouterLink, useSearchParams } from "react-router-dom";
2626
import { createDayString } from "utils/createDayString";
2727
import { OAuth2AppForm } from "./OAuth2AppForm";
2828

@@ -79,12 +79,11 @@ export const EditOAuth2AppPageView: FC<EditOAuth2AppProps> = ({
7979
title="Edit OAuth2 application"
8080
description="Configure an application to use Coder as an OAuth2 provider."
8181
/>
82-
<Button
83-
component={Link}
84-
startIcon={<KeyboardArrowLeft />}
85-
to="/deployment/oauth2-provider/apps"
86-
>
87-
All OAuth2 Applications
82+
<Button variant="outline" asChild>
83+
<RouterLink to="/deployment/oauth2-provider/apps">
84+
<ChevronLeftIcon />
85+
All OAuth2 Applications
86+
</RouterLink>
8887
</Button>
8988
</Stack>
9089

@@ -171,9 +170,7 @@ export const EditOAuth2AppPageView: FC<EditOAuth2AppProps> = ({
171170
error={error}
172171
actions={
173172
<Button
174-
variant="outlined"
175-
type="button"
176-
color="error"
173+
variant="destructive"
177174
onClick={() => setShowDelete(true)}
178175
>
179176
Delete&hellip;
@@ -303,12 +300,7 @@ const OAuth2SecretRow: FC<OAuth2SecretRowProps> = ({
303300
</>
304301
}
305302
/>
306-
<Button
307-
variant="outlined"
308-
type="button"
309-
color="error"
310-
onClick={() => setShowDelete(true)}
311-
>
303+
<Button variant="destructive" onClick={() => setShowDelete(true)}>
312304
Delete&hellip;
313305
</Button>
314306
</TableCell>

‎site/src/pages/UsersPage/UsersPageView.tsx

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
import PersonAdd from "@mui/icons-material/PersonAdd";
2-
import Button from "@mui/material/Button";
31
import type { GroupsByUserId } from "api/queries/groups";
42
import type * as TypesGen from "api/typesGenerated";
3+
import { Button } from "components/Button/Button";
54
import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader";
65
import {
76
PaginationContainer,
87
type PaginationResult,
98
} from "components/PaginationWidget/PaginationContainer";
9+
import { UserPlusIcon } from "lucide-react";
1010
import type { ComponentProps, FC } from "react";
11-
import { useNavigate } from "react-router-dom";
11+
import { Link as RouterLink } from "react-router-dom";
1212
import { UsersFilter } from "./UsersFilter";
1313
import { UsersTable } from "./UsersTable/UsersTable";
1414

@@ -65,19 +65,17 @@ export const UsersPageView: FC<UsersPageViewProps> = ({
6565
usersQuery,
6666
canCreateUser,
6767
}) => {
68-
const navigate = useNavigate();
69-
7068
return (
7169
<>
7270
<PageHeader
7371
css={{ paddingTop: 0 }}
7472
actions={
7573
canCreateUser && (
76-
<Button
77-
onClick={() => navigate("create")}
78-
startIcon={<PersonAdd />}
79-
>
80-
Create user
74+
<Button asChild>
75+
<RouterLink to="create">
76+
<UserPlusIcon />
77+
Create user
78+
</RouterLink>
8179
</Button>
8280
)
8381
}

‎site/src/pages/WorkspacePage/WorkspaceDeletedBanner.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import Button from "@mui/material/Button";
21
import { Alert } from "components/Alert/Alert";
2+
import { Button } from "components/Button/Button";
33
import type { FC } from "react";
44

55
export interface WorkspaceDeletedBannerProps {
@@ -10,7 +10,7 @@ export const WorkspaceDeletedBanner: FC<WorkspaceDeletedBannerProps> = ({
1010
handleClick,
1111
}) => {
1212
const NewWorkspaceButton = (
13-
<Button onClick={handleClick} size="small" variant="text">
13+
<Button onClick={handleClick} size="sm" variant="subtle">
1414
Create new workspace
1515
</Button>
1616
);

0 commit comments

Comments
 (0)