From 2fbeb682806ce43a6f1b52a8d2aed454aa1ddee5 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Thu, 15 May 2025 18:26:03 +0000 Subject: [PATCH 1/5] chore: replace MUI Button - 1 --- .../PaginationWidget/PageButtons.tsx | 29 ++++++---- .../PaginationWidget/PaginationNavButton.tsx | 18 ++---- .../resources/DownloadAgentLogsButton.tsx | 10 ++-- .../modules/resources/PortForwardButton.tsx | 55 +++++++++---------- .../modules/resources/SSHButton/SSHButton.tsx | 16 +++--- .../TemplateExampleCard.tsx | 21 +++---- site/src/pages/ChatPage/ChatLanding.tsx | 10 ++-- .../pages/TemplatesPage/EmptyTemplates.tsx | 11 ++-- 8 files changed, 82 insertions(+), 88 deletions(-) diff --git a/site/src/components/PaginationWidget/PageButtons.tsx b/site/src/components/PaginationWidget/PageButtons.tsx index 1e5f9ff7df18c..f3dc1edf33c05 100644 --- a/site/src/components/PaginationWidget/PageButtons.tsx +++ b/site/src/components/PaginationWidget/PageButtons.tsx @@ -1,6 +1,7 @@ import { useTheme } from "@emotion/react"; -import Button from "@mui/material/Button"; +import { Button } from "components/Button/Button"; import type { FC, ReactNode } from "react"; +import { cn } from "utils/cn"; type NumberedPageButtonProps = { pageNumber: number; @@ -72,18 +73,22 @@ const BasePageButton: FC = ({ return ( ); -}; +}; \ No newline at end of file diff --git a/site/src/modules/resources/PortForwardButton.tsx b/site/src/modules/resources/PortForwardButton.tsx index a4b8ee8277ebc..f89b99d356862 100644 --- a/site/src/modules/resources/PortForwardButton.tsx +++ b/site/src/modules/resources/PortForwardButton.tsx @@ -2,7 +2,6 @@ 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"; @@ -77,26 +76,24 @@ export const PortForwardButton: FC = (props) => { return ( - } + size="sm" + variant="subtle" css={{ fontSize: 13, padding: "8px 12px" }} - startIcon={ - portsQuery.data ? ( -
- - {portsQuery.data.ports.length} - -
- ) : ( - - ) - } > + {portsQuery.data ? ( +
+ + {portsQuery.data.ports.length} + +
+ ) : ( + + )} Open ports - + + = ({ required css={styles.newPortInput} /> - = ({ color: theme.palette.text.primary, }} /> - + @@ -369,9 +366,9 @@ export const PortForwardPopoverView: FC = ({ alignItems="center" > {canSharePorts && ( - { await upsertSharedPortMutation.mutateAsync({ agent_name: agent.name, @@ -383,7 +380,7 @@ export const PortForwardPopoverView: FC = ({ }} > Share - + )} @@ -483,9 +480,9 @@ export const PortForwardPopoverView: FC = ({ )} - { await deleteSharedPortMutation.mutateAsync({ @@ -502,7 +499,7 @@ export const PortForwardPopoverView: FC = ({ color: theme.palette.text.primary, }} /> - + ); diff --git a/site/src/modules/resources/SSHButton/SSHButton.tsx b/site/src/modules/resources/SSHButton/SSHButton.tsx index 2673d8a8e2241..291ccf20d63a5 100644 --- a/site/src/modules/resources/SSHButton/SSHButton.tsx +++ b/site/src/modules/resources/SSHButton/SSHButton.tsx @@ -1,5 +1,5 @@ import type { Interpolation, Theme } from "@emotion/react"; -import Button from "@mui/material/Button"; +import { Button } from "components/Button/Button"; import { CodeExample } from "components/CodeExample/CodeExample"; import { HelpTooltipLink, @@ -34,12 +34,12 @@ export const AgentSSHButton: FC = ({ @@ -96,12 +96,12 @@ export const AgentDevcontainerSSHButton: FC< @@ -163,4 +163,4 @@ const styles = { codeExampleLabel: { fontSize: 12, }, -} satisfies Record>; +} satisfies Record>; \ No newline at end of file diff --git a/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx b/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx index f003a886552e1..5f040f846cd5a 100644 --- a/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx +++ b/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx @@ -1,5 +1,5 @@ import type { Interpolation, Theme } from "@emotion/react"; -import Button from "@mui/material/Button"; +import { Button } from "components/Button/Button"; import Link from "@mui/material/Link"; import type { TemplateExample } from "api/typesGenerated"; import { ExternalImage } from "components/ExternalImage/ExternalImage"; @@ -54,15 +54,16 @@ export const TemplateExampleCard: FC = ({ -
- -
+
+ +
); }; diff --git a/site/src/pages/ChatPage/ChatLanding.tsx b/site/src/pages/ChatPage/ChatLanding.tsx index 060752f895313..58e5ed32d9f4c 100644 --- a/site/src/pages/ChatPage/ChatLanding.tsx +++ b/site/src/pages/ChatPage/ChatLanding.tsx @@ -1,6 +1,6 @@ import { useTheme } from "@emotion/react"; import SendIcon from "@mui/icons-material/Send"; -import Button from "@mui/material/Button"; +import { Button } from "components/Button/Button"; import IconButton from "@mui/material/IconButton"; import Paper from "@mui/material/Paper"; import Stack from "@mui/material/Stack"; @@ -89,19 +89,19 @@ const ChatLanding: FC = () => { sx={{ mb: 2 }} > } From ebe7c0f12e9fd6fea13af058a2cbd820d8a98afa Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Thu, 15 May 2025 18:36:13 +0000 Subject: [PATCH 2/5] Update pagination buttons --- .../PaginationWidget/PageButtons.tsx | 26 +++---------------- .../PaginationWidget/PaginationNavButton.tsx | 13 +++------- .../PaginationWidget/PaginationWidgetBase.tsx | 4 +-- 3 files changed, 8 insertions(+), 35 deletions(-) diff --git a/site/src/components/PaginationWidget/PageButtons.tsx b/site/src/components/PaginationWidget/PageButtons.tsx index f3dc1edf33c05..666720b62b913 100644 --- a/site/src/components/PaginationWidget/PageButtons.tsx +++ b/site/src/components/PaginationWidget/PageButtons.tsx @@ -1,12 +1,9 @@ -import { useTheme } from "@emotion/react"; import { Button } from "components/Button/Button"; import type { FC, ReactNode } from "react"; -import { cn } from "utils/cn"; type NumberedPageButtonProps = { pageNumber: number; totalPages: number; - onClick?: () => void; highlighted?: boolean; disabled?: boolean; @@ -69,27 +66,10 @@ const BasePageButton: FC = ({ highlighted = false, disabled = false, }) => { - const theme = useTheme(); - return ( - - Cancel - + + Cancel + + @@ -151,9 +151,11 @@ const RequestOTPSuccess: FC<{ email: string }> = ({ email }) => { Contact your deployment administrator if you encounter issues.

- - Back to login - + ); diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/IntervalMenu.tsx b/site/src/pages/TemplatePage/TemplateInsightsPage/IntervalMenu.tsx index 6f14cb0e38e75..c7da8332a29ab 100644 --- a/site/src/pages/TemplatePage/TemplateInsightsPage/IntervalMenu.tsx +++ b/site/src/pages/TemplatePage/TemplateInsightsPage/IntervalMenu.tsx @@ -1,7 +1,7 @@ import ExpandMoreOutlined from "@mui/icons-material/ExpandMoreOutlined"; -import Button from "@mui/material/Button"; import Menu from "@mui/material/Menu"; import MenuItem from "@mui/material/MenuItem"; +import { Button } from "components/Button/Button"; import { CheckIcon } from "lucide-react"; import { type FC, useRef, useState } from "react"; @@ -38,9 +38,10 @@ export const IntervalMenu: FC = ({ value, onChange }) => { aria-haspopup="true" aria-expanded={open ? "true" : undefined} onClick={() => setOpen(true)} - endIcon={} + variant="outline" > {insightsIntervals[value].label} + = ({ ) : workspacePermissions?.[template.organization_id] ?.createWorkspaceForUserID ? ( - } title={`Create a workspace using the ${template.display_name} template`} onClick={(e) => { e.stopPropagation(); navigate(`${templatePageLink}/workspace`); }} > + Create Workspace - + ) : null} From bfe665b9b7f6dbd5d69c19712645d7fa7d03b615 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Fri, 16 May 2025 01:42:40 +0000 Subject: [PATCH 4/5] Fix tests, port forward button and fmt --- .../PaginationWidgetBase.test.tsx | 12 ++++------- .../resources/DownloadAgentLogsButton.tsx | 4 ++-- .../modules/resources/PortForwardButton.tsx | 20 ++++--------------- .../modules/resources/SSHButton/SSHButton.tsx | 2 +- .../TemplateExampleCard.tsx | 19 ++++++++---------- site/src/pages/ChatPage/ChatLanding.tsx | 2 +- .../ResetPasswordPage/RequestOTPPage.tsx | 15 +++----------- .../pages/TemplatesPage/EmptyTemplates.tsx | 8 ++------ 8 files changed, 25 insertions(+), 57 deletions(-) diff --git a/site/src/components/PaginationWidget/PaginationWidgetBase.test.tsx b/site/src/components/PaginationWidget/PaginationWidgetBase.test.tsx index 20c388b3f85b8..a3682978597ad 100644 --- a/site/src/components/PaginationWidget/PaginationWidgetBase.test.tsx +++ b/site/src/components/PaginationWidget/PaginationWidgetBase.test.tsx @@ -9,7 +9,7 @@ import { type SampleProps = Omit; 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 }, @@ -23,8 +23,7 @@ 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(); @@ -32,7 +31,7 @@ describe(PaginationWidgetBase.name, () => { } }); - 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 }, @@ -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(); @@ -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); diff --git a/site/src/modules/resources/DownloadAgentLogsButton.tsx b/site/src/modules/resources/DownloadAgentLogsButton.tsx index 74b5f362a1c9a..fc7296b6c0ea0 100644 --- a/site/src/modules/resources/DownloadAgentLogsButton.tsx +++ b/site/src/modules/resources/DownloadAgentLogsButton.tsx @@ -1,7 +1,7 @@ import DownloadOutlined from "@mui/icons-material/DownloadOutlined"; -import { Button } from "components/Button/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"; @@ -60,4 +60,4 @@ export const DownloadAgentLogsButton: FC = ({ {isDownloading ? "Downloading..." : "Download logs"} ); -}; \ No newline at end of file +}; diff --git a/site/src/modules/resources/PortForwardButton.tsx b/site/src/modules/resources/PortForwardButton.tsx index f89b99d356862..f179d339f2fa6 100644 --- a/site/src/modules/resources/PortForwardButton.tsx +++ b/site/src/modules/resources/PortForwardButton.tsx @@ -2,7 +2,6 @@ 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 CircularProgress from "@mui/material/CircularProgress"; import FormControl from "@mui/material/FormControl"; import Link from "@mui/material/Link"; import MenuItem from "@mui/material/MenuItem"; @@ -76,21 +75,10 @@ export const PortForwardButton: FC = (props) => { return ( - diff --git a/site/src/modules/resources/SSHButton/SSHButton.tsx b/site/src/modules/resources/SSHButton/SSHButton.tsx index 291ccf20d63a5..42e2b3828f3ae 100644 --- a/site/src/modules/resources/SSHButton/SSHButton.tsx +++ b/site/src/modules/resources/SSHButton/SSHButton.tsx @@ -163,4 +163,4 @@ const styles = { codeExampleLabel: { fontSize: 12, }, -} satisfies Record>; \ No newline at end of file +} satisfies Record>; diff --git a/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx b/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx index 5f040f846cd5a..bf5c03f96bd2d 100644 --- a/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx +++ b/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx @@ -1,7 +1,7 @@ import type { Interpolation, Theme } from "@emotion/react"; -import { Button } from "components/Button/Button"; import Link from "@mui/material/Link"; import type { TemplateExample } from "api/typesGenerated"; +import { Button } from "components/Button/Button"; import { ExternalImage } from "components/ExternalImage/ExternalImage"; import { Pill } from "components/Pill/Pill"; import type { FC, HTMLAttributes } from "react"; @@ -54,16 +54,13 @@ export const TemplateExampleCard: FC = ({ -
- -
+
+ +
); }; diff --git a/site/src/pages/ChatPage/ChatLanding.tsx b/site/src/pages/ChatPage/ChatLanding.tsx index 503d50f886d83..fb49c609e6639 100644 --- a/site/src/pages/ChatPage/ChatLanding.tsx +++ b/site/src/pages/ChatPage/ChatLanding.tsx @@ -1,11 +1,11 @@ import { useTheme } from "@emotion/react"; -import { Button } from "components/Button/Button"; import IconButton from "@mui/material/IconButton"; import Paper from "@mui/material/Paper"; import Stack from "@mui/material/Stack"; import TextField from "@mui/material/TextField"; import { createChat } from "api/queries/chats"; import type { Chat } from "api/typesGenerated"; +import { Button } from "components/Button/Button"; import { Margins } from "components/Margins/Margins"; import { useAuthenticated } from "hooks"; import { SendIcon } from "lucide-react"; diff --git a/site/src/pages/ResetPasswordPage/RequestOTPPage.tsx b/site/src/pages/ResetPasswordPage/RequestOTPPage.tsx index 093c409677010..f67395b3f732a 100644 --- a/site/src/pages/ResetPasswordPage/RequestOTPPage.tsx +++ b/site/src/pages/ResetPasswordPage/RequestOTPPage.tsx @@ -97,15 +97,8 @@ const RequestOTP: FC = ({ Reset password - @@ -152,9 +145,7 @@ const RequestOTPSuccess: FC<{ email: string }> = ({ email }) => {

diff --git a/site/src/pages/TemplatesPage/EmptyTemplates.tsx b/site/src/pages/TemplatesPage/EmptyTemplates.tsx index 0da852957e230..aee7c6a5ea5b5 100644 --- a/site/src/pages/TemplatesPage/EmptyTemplates.tsx +++ b/site/src/pages/TemplatesPage/EmptyTemplates.tsx @@ -1,7 +1,7 @@ import type { Interpolation, Theme } from "@emotion/react"; -import { Button } from "components/Button/Button"; import Link from "@mui/material/Link"; import type { TemplateExample } from "api/typesGenerated"; +import { Button } from "components/Button/Button"; import { CodeExample } from "components/CodeExample/CodeExample"; import { Stack } from "components/Stack/Stack"; import { TableEmpty } from "components/TableEmpty/TableEmpty"; @@ -78,11 +78,7 @@ export const EmptyTemplates: FC = ({ ))} - + + + + + + Connect to port + + @@ -354,21 +358,29 @@ export const PortForwardPopoverView: FC = ({ alignItems="center" > {canSharePorts && ( - + + + + + + Share this port + + )} @@ -471,7 +483,6 @@ export const PortForwardPopoverView: FC = ({ ) : null} @@ -203,18 +204,20 @@ export const TemplatesPageView: FC = ({ const isLoading = !templates; const isEmpty = templates && templates.length === 0; - const createTemplateAction = ( - - ); - return ( - + + + + New template + + + ) + } + > Templates