From 12c5c65c7f5d243d97bbea8db1c5cc5297bf0873 Mon Sep 17 00:00:00 2001 From: Bruno Quaresma Date: Fri, 24 Jan 2025 10:36:01 -0300 Subject: [PATCH] refactor: replace MUI buttons on banners, paywalls and a few pages (#16215) --- site/e2e/helpers.ts | 2 +- .../EmptyState/EmptyState.stories.tsx | 2 +- site/src/components/Paywall/Paywall.tsx | 20 ++++++------- .../src/components/Paywall/PopoverPaywall.tsx | 20 ++++++------- .../SettingsHeader/SettingsHeader.tsx | 15 +++++----- .../src/modules/dashboard/DashboardLayout.tsx | 4 +-- site/src/modules/resources/XRayScanAlert.tsx | 15 ++++------ .../AnnouncementBannerSettings.tsx | 7 +++-- .../AddNewLicensePageView.tsx | 15 +++++----- .../LicensesSettingsPageView.tsx | 1 - .../CreateOAuth2AppPageView.tsx | 16 +++++------ .../EditOAuth2AppPageView.tsx | 28 +++++++------------ site/src/pages/UsersPage/UsersPageView.tsx | 18 ++++++------ .../WorkspacePage/WorkspaceDeletedBanner.tsx | 4 +-- .../pages/WorkspacesPage/WorkspacesEmpty.tsx | 20 ++++--------- .../WorkspacesPage/WorkspacesPageView.tsx | 2 +- 16 files changed, 79 insertions(+), 110 deletions(-) diff --git a/site/e2e/helpers.ts b/site/e2e/helpers.ts index c0ac7e3562..4bb1010f31 100644 --- a/site/e2e/helpers.ts +++ b/site/e2e/helpers.ts @@ -1062,7 +1062,7 @@ export async function createUser( await page.goto("/deployment/users", { waitUntil: "domcontentloaded" }); await expect(page).toHaveTitle("Users - Coder"); - await page.getByRole("button", { name: "Create user" }).click(); + await page.getByRole("link", { name: "Create user" }).click(); await expect(page).toHaveTitle("Create User - Coder"); const username = userValues.username ?? randomName(); diff --git a/site/src/components/EmptyState/EmptyState.stories.tsx b/site/src/components/EmptyState/EmptyState.stories.tsx index 1e4c5eb183..8b9780bb44 100644 --- a/site/src/components/EmptyState/EmptyState.stories.tsx +++ b/site/src/components/EmptyState/EmptyState.stories.tsx @@ -1,5 +1,5 @@ -import Button from "@mui/material/Button"; import type { Meta, StoryObj } from "@storybook/react"; +import { Button } from "components/Button/Button"; import { EmptyState } from "./EmptyState"; const meta: Meta = { diff --git a/site/src/components/Paywall/Paywall.tsx b/site/src/components/Paywall/Paywall.tsx index 0b7c85e979..899d23ca4a 100644 --- a/site/src/components/Paywall/Paywall.tsx +++ b/site/src/components/Paywall/Paywall.tsx @@ -1,11 +1,10 @@ import type { Interpolation, Theme } from "@emotion/react"; import TaskAltIcon from "@mui/icons-material/TaskAlt"; -import Button from "@mui/material/Button"; import Link from "@mui/material/Link"; import { PremiumBadge } from "components/Badges/Badges"; +import { Button } from "components/Button/Button"; import { Stack } from "components/Stack/Stack"; import type { FC, ReactNode } from "react"; -import { docs } from "utils/docs"; export interface PaywallProps { message: string; @@ -57,15 +56,14 @@ export const Paywall: FC = ({
-
diff --git a/site/src/components/Paywall/PopoverPaywall.tsx b/site/src/components/Paywall/PopoverPaywall.tsx index 0141fac486..ccb60db528 100644 --- a/site/src/components/Paywall/PopoverPaywall.tsx +++ b/site/src/components/Paywall/PopoverPaywall.tsx @@ -1,11 +1,10 @@ import type { Interpolation, Theme } from "@emotion/react"; import TaskAltIcon from "@mui/icons-material/TaskAlt"; -import Button from "@mui/material/Button"; import Link from "@mui/material/Link"; import { PremiumBadge } from "components/Badges/Badges"; +import { Button } from "components/Button/Button"; import { Stack } from "components/Stack/Stack"; import type { FC, ReactNode } from "react"; -import { docs } from "utils/docs"; export interface PopoverPaywallProps { message: string; @@ -61,15 +60,14 @@ export const PopoverPaywall: FC = ({
-
diff --git a/site/src/components/SettingsHeader/SettingsHeader.tsx b/site/src/components/SettingsHeader/SettingsHeader.tsx index 1dec847e65..eb377d1769 100644 --- a/site/src/components/SettingsHeader/SettingsHeader.tsx +++ b/site/src/components/SettingsHeader/SettingsHeader.tsx @@ -1,7 +1,8 @@ import { useTheme } from "@emotion/react"; import LaunchOutlined from "@mui/icons-material/LaunchOutlined"; -import Button from "@mui/material/Button"; +import { Button } from "components/Button/Button"; import { Stack } from "components/Stack/Stack"; +import { SquareArrowOutUpRightIcon } from "lucide-react"; import type { FC, ReactNode } from "react"; interface HeaderProps { @@ -62,13 +63,11 @@ export const SettingsHeader: FC = ({ {docsHref && ( - )} diff --git a/site/src/modules/dashboard/DashboardLayout.tsx b/site/src/modules/dashboard/DashboardLayout.tsx index 6f028b70d5..5fd5e67a0c 100644 --- a/site/src/modules/dashboard/DashboardLayout.tsx +++ b/site/src/modules/dashboard/DashboardLayout.tsx @@ -1,7 +1,7 @@ import InfoOutlined from "@mui/icons-material/InfoOutlined"; -import Button from "@mui/material/Button"; import Link from "@mui/material/Link"; import Snackbar from "@mui/material/Snackbar"; +import { Button } from "components/Button/Button"; import { Loader } from "components/Loader/Loader"; import { useAuthenticated } from "contexts/auth/RequireAuth"; import { AnnouncementBanners } from "modules/dashboard/AnnouncementBanners/AnnouncementBanners"; @@ -92,7 +92,7 @@ export const DashboardLayout: FC = () => { } action={ - } diff --git a/site/src/modules/resources/XRayScanAlert.tsx b/site/src/modules/resources/XRayScanAlert.tsx index d37a5225f9..f9761639d1 100644 --- a/site/src/modules/resources/XRayScanAlert.tsx +++ b/site/src/modules/resources/XRayScanAlert.tsx @@ -1,6 +1,6 @@ import type { Interpolation, Theme } from "@emotion/react"; -import Button from "@mui/material/Button"; import type { JFrogXrayScan } from "api/typesGenerated"; +import { Button } from "components/Button/Button"; import { ExternalImage } from "components/ExternalImage/ExternalImage"; import type { FC } from "react"; @@ -39,15 +39,10 @@ export const XRayScanAlert: FC = ({ scan }) => {
-
diff --git a/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AnnouncementBannerSettings.tsx b/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AnnouncementBannerSettings.tsx index fd16d0dca3..3eccfb3175 100644 --- a/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AnnouncementBannerSettings.tsx +++ b/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AnnouncementBannerSettings.tsx @@ -1,6 +1,4 @@ import { type CSSObject, useTheme } from "@emotion/react"; -import AddIcon from "@mui/icons-material/AddOutlined"; -import Button from "@mui/material/Button"; import Link from "@mui/material/Link"; import Table from "@mui/material/Table"; import TableBody from "@mui/material/TableBody"; @@ -9,9 +7,11 @@ import TableContainer from "@mui/material/TableContainer"; import TableHead from "@mui/material/TableHead"; import TableRow from "@mui/material/TableRow"; import type { BannerConfig } from "api/typesGenerated"; +import { Button } from "components/Button/Button"; import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog"; import { EmptyState } from "components/EmptyState/EmptyState"; import { Stack } from "components/Stack/Stack"; +import { PlusIcon } from "lucide-react"; import { type FC, useState } from "react"; import { AnnouncementBannerDialog } from "./AnnouncementBannerDialog"; import { AnnouncementBannerItem } from "./AnnouncementBannerItem"; @@ -89,8 +89,9 @@ export const AnnouncementBannerSettings: FC< diff --git a/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/AddNewLicensePageView.tsx b/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/AddNewLicensePageView.tsx index e5590f0bb4..a31a4c05ca 100644 --- a/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/AddNewLicensePageView.tsx +++ b/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/AddNewLicensePageView.tsx @@ -1,11 +1,11 @@ -import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft"; -import Button from "@mui/material/Button"; import TextField from "@mui/material/TextField"; import { ErrorAlert } from "components/Alert/ErrorAlert"; +import { Button } from "components/Button/Button"; import { FileUpload } from "components/FileUpload/FileUpload"; import { displayError } from "components/GlobalSnackbar/utils"; import { SettingsHeader } from "components/SettingsHeader/SettingsHeader"; import { Stack } from "components/Stack/Stack"; +import { ChevronLeftIcon } from "lucide-react"; import type { FC } from "react"; import { Link as RouterLink } from "react-router-dom"; import { Fieldset } from "../Fieldset"; @@ -54,12 +54,11 @@ export const AddNewLicensePageView: FC = ({ title="Add a license" description="Get access to high availability, RBAC, quotas, and more." /> - diff --git a/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx b/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx index 86ab4be190..1112d47951 100644 --- a/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx +++ b/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx @@ -14,7 +14,6 @@ import { useWindowSize } from "hooks/useWindowSize"; import type { FC } from "react"; import Confetti from "react-confetti"; import { Link } from "react-router-dom"; -import { license } from "../../../../e2e/constants"; import { LicenseCard } from "./LicenseCard"; import { LicenseSeatConsumptionChart } from "./LicenseSeatConsumptionChart"; diff --git a/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/CreateOAuth2AppPageView.tsx b/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/CreateOAuth2AppPageView.tsx index 7a475846f9..00ec656940 100644 --- a/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/CreateOAuth2AppPageView.tsx +++ b/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/CreateOAuth2AppPageView.tsx @@ -1,11 +1,12 @@ import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft"; -import Button from "@mui/material/Button"; import type * as TypesGen from "api/typesGenerated"; import { ErrorAlert } from "components/Alert/ErrorAlert"; +import { Button } from "components/Button/Button"; import { SettingsHeader } from "components/SettingsHeader/SettingsHeader"; import { Stack } from "components/Stack/Stack"; +import { ChevronLeftIcon } from "lucide-react"; import type { FC } from "react"; -import { Link } from "react-router-dom"; +import { Link as RouterLink } from "react-router-dom"; import { OAuth2AppForm } from "./OAuth2AppForm"; type CreateOAuth2AppProps = { @@ -30,12 +31,11 @@ export const CreateOAuth2AppPageView: FC = ({ title="Add an OAuth2 application" description="Configure an application to use Coder as an OAuth2 provider." /> - diff --git a/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/EditOAuth2AppPageView.tsx b/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/EditOAuth2AppPageView.tsx index 0f606ad4a2..b250f8c245 100644 --- a/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/EditOAuth2AppPageView.tsx +++ b/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/EditOAuth2AppPageView.tsx @@ -1,8 +1,6 @@ import { type Interpolation, type Theme, useTheme } from "@emotion/react"; import CopyIcon from "@mui/icons-material/FileCopyOutlined"; -import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft"; import LoadingButton from "@mui/lab/LoadingButton"; -import Button from "@mui/material/Button"; import Divider from "@mui/material/Divider"; import Table from "@mui/material/Table"; import TableBody from "@mui/material/TableBody"; @@ -13,6 +11,7 @@ import TableRow from "@mui/material/TableRow"; import type * as TypesGen from "api/typesGenerated"; import { Alert } from "components/Alert/Alert"; import { ErrorAlert } from "components/Alert/ErrorAlert"; +import { Button } from "components/Button/Button"; import { CodeExample } from "components/CodeExample/CodeExample"; import { CopyableValue } from "components/CopyableValue/CopyableValue"; import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog"; @@ -21,8 +20,9 @@ import { Loader } from "components/Loader/Loader"; import { SettingsHeader } from "components/SettingsHeader/SettingsHeader"; import { Stack } from "components/Stack/Stack"; import { TableLoader } from "components/TableLoader/TableLoader"; +import { ChevronLeftIcon } from "lucide-react"; import { type FC, useState } from "react"; -import { Link, useSearchParams } from "react-router-dom"; +import { Link as RouterLink, useSearchParams } from "react-router-dom"; import { createDayString } from "utils/createDayString"; import { OAuth2AppForm } from "./OAuth2AppForm"; @@ -79,12 +79,11 @@ export const EditOAuth2AppPageView: FC = ({ title="Edit OAuth2 application" description="Configure an application to use Coder as an OAuth2 provider." /> - @@ -171,9 +170,7 @@ export const EditOAuth2AppPageView: FC = ({ error={error} actions={ diff --git a/site/src/pages/UsersPage/UsersPageView.tsx b/site/src/pages/UsersPage/UsersPageView.tsx index e68c10f904..029d7fc4f1 100644 --- a/site/src/pages/UsersPage/UsersPageView.tsx +++ b/site/src/pages/UsersPage/UsersPageView.tsx @@ -1,14 +1,14 @@ -import PersonAdd from "@mui/icons-material/PersonAdd"; -import Button from "@mui/material/Button"; import type { GroupsByUserId } from "api/queries/groups"; import type * as TypesGen from "api/typesGenerated"; +import { Button } from "components/Button/Button"; import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader"; import { PaginationContainer, type PaginationResult, } from "components/PaginationWidget/PaginationContainer"; +import { UserPlusIcon } from "lucide-react"; import type { ComponentProps, FC } from "react"; -import { useNavigate } from "react-router-dom"; +import { Link as RouterLink } from "react-router-dom"; import { UsersFilter } from "./UsersFilter"; import { UsersTable } from "./UsersTable/UsersTable"; @@ -65,19 +65,17 @@ export const UsersPageView: FC = ({ usersQuery, canCreateUser, }) => { - const navigate = useNavigate(); - return ( <> navigate("create")} - startIcon={} - > - Create user + ) } diff --git a/site/src/pages/WorkspacePage/WorkspaceDeletedBanner.tsx b/site/src/pages/WorkspacePage/WorkspaceDeletedBanner.tsx index c8112ab9b5..ddfe9e9d02 100644 --- a/site/src/pages/WorkspacePage/WorkspaceDeletedBanner.tsx +++ b/site/src/pages/WorkspacePage/WorkspaceDeletedBanner.tsx @@ -1,5 +1,5 @@ -import Button from "@mui/material/Button"; import { Alert } from "components/Alert/Alert"; +import { Button } from "components/Button/Button"; import type { FC } from "react"; export interface WorkspaceDeletedBannerProps { @@ -10,7 +10,7 @@ export const WorkspaceDeletedBanner: FC = ({ handleClick, }) => { const NewWorkspaceButton = ( - ); diff --git a/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx b/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx index 80b5602ba2..fa25ebe57b 100644 --- a/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx +++ b/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx @@ -1,7 +1,7 @@ import ArrowForwardOutlined from "@mui/icons-material/ArrowForwardOutlined"; -import Button from "@mui/material/Button"; import type { Template } from "api/typesGenerated"; import { Avatar } from "components/Avatar/Avatar"; +import { Button } from "components/Button/Button"; import { TableEmpty } from "components/TableEmpty/TableEmpty"; import { linkToTemplate, useLinks } from "modules/navigation"; import type { FC } from "react"; @@ -53,13 +53,8 @@ export const WorkspacesEmpty: FC = ({ message={defaultTitle} description={`${defaultMessage} To create a workspace, you first need to create a template.`} cta={ - } css={{ @@ -162,13 +157,8 @@ export const WorkspacesEmpty: FC = ({ {templates && templates.length > totalFeaturedTemplates && ( - )} diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx index 12826373ad..b6a474f57b 100644 --- a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx +++ b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx @@ -4,11 +4,11 @@ import KeyboardArrowDownOutlined from "@mui/icons-material/KeyboardArrowDownOutl import PlayArrowOutlined from "@mui/icons-material/PlayArrowOutlined"; import StopOutlined from "@mui/icons-material/StopOutlined"; import LoadingButton from "@mui/lab/LoadingButton"; -import Button from "@mui/material/Button"; import Divider from "@mui/material/Divider"; import { hasError, isApiValidationError } from "api/errors"; import type { Template, Workspace } from "api/typesGenerated"; import { ErrorAlert } from "components/Alert/ErrorAlert"; +import { Button } from "components/Button/Button"; import { EmptyState } from "components/EmptyState/EmptyState"; import { Margins } from "components/Margins/Margins"; import {