From 9e3f33544ff6c903dac69a93eaec810d37f067e7 Mon Sep 17 00:00:00 2001 From: Bruno Quaresma Date: Tue, 7 Oct 2025 13:26:13 +0000 Subject: [PATCH 1/4] chore: migrate MUI icons to lucide-react --- site/package.json | 2 +- site/pnpm-lock.yaml | 10 ++++----- .../modules/resources/AppLink/ShareIcon.tsx | 16 +++++++------- .../modules/resources/PortForwardButton.tsx | 16 +++++++------- .../TemplateFiles/TemplateFileTree.tsx | 12 ++++++----- .../templates/TemplateFiles/TemplateFiles.tsx | 13 +++--------- .../pages/HealthPage/DismissWarningButton.tsx | 7 +++---- site/src/pages/HealthPage/HealthLayout.tsx | 15 +++---------- site/src/pages/LoginPage/OAuthSignInForm.tsx | 2 +- .../TemplateEmbedPageExperimental.tsx | 7 +++---- .../UsersPage/UsersTable/UsersTableBody.tsx | 21 +++++++++++-------- site/src/pages/WorkspacePage/Workspace.tsx | 9 ++++---- 12 files changed, 60 insertions(+), 70 deletions(-) diff --git a/site/package.json b/site/package.json index ddb04c084ce01..62b2b8dd64981 100644 --- a/site/package.json +++ b/site/package.json @@ -91,7 +91,7 @@ "humanize-duration": "3.32.2", "jszip": "3.10.1", "lodash": "4.17.21", - "lucide-react": "0.474.0", + "lucide-react": "0.545.0", "monaco-editor": "0.53.0", "pretty-bytes": "6.1.1", "react": "19.1.1", diff --git a/site/pnpm-lock.yaml b/site/pnpm-lock.yaml index 396028241502c..e788524025aeb 100644 --- a/site/pnpm-lock.yaml +++ b/site/pnpm-lock.yaml @@ -188,8 +188,8 @@ importers: specifier: 4.17.21 version: 4.17.21 lucide-react: - specifier: 0.474.0 - version: 0.474.0(react@19.1.1) + specifier: 0.545.0 + version: 0.545.0(react@19.1.1) monaco-editor: specifier: 0.53.0 version: 0.53.0 @@ -4885,8 +4885,8 @@ packages: lru-cache@5.1.1: resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==, tarball: https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz} - lucide-react@0.474.0: - resolution: {integrity: sha512-CmghgHkh0OJNmxGKWc0qfPJCYHASPMVSyGY8fj3xgk4v84ItqDg64JNKFZn5hC6E0vHi6gxnbCgwhyVB09wQtA==, tarball: https://registry.npmjs.org/lucide-react/-/lucide-react-0.474.0.tgz} + lucide-react@0.545.0: + resolution: {integrity: sha512-7r1/yUuflQDSt4f1bpn5ZAocyIxcTyVyBBChSVtBKn5M+392cPmI5YJMWOJKk/HUWGm5wg83chlAZtCcGbEZtw==, tarball: https://registry.npmjs.org/lucide-react/-/lucide-react-0.545.0.tgz} peerDependencies: react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0 @@ -11353,7 +11353,7 @@ snapshots: dependencies: yallist: 3.1.1 - lucide-react@0.474.0(react@19.1.1): + lucide-react@0.545.0(react@19.1.1): dependencies: react: 19.1.1 diff --git a/site/src/modules/resources/AppLink/ShareIcon.tsx b/site/src/modules/resources/AppLink/ShareIcon.tsx index 7e6660fe4b162..72685412a9213 100644 --- a/site/src/modules/resources/AppLink/ShareIcon.tsx +++ b/site/src/modules/resources/AppLink/ShareIcon.tsx @@ -1,9 +1,11 @@ -import BusinessIcon from "@mui/icons-material/Business"; -import GroupOutlinedIcon from "@mui/icons-material/GroupOutlined"; -import PublicOutlinedIcon from "@mui/icons-material/PublicOutlined"; import Tooltip from "@mui/material/Tooltip"; import type * as TypesGen from "api/typesGenerated"; -import { SquareArrowOutUpRightIcon } from "lucide-react"; +import { + Building2Icon, + EarthIcon, + SquareArrowOutUpRightIcon, + UsersIcon, +} from "lucide-react"; interface ShareIconProps { app: TypesGen.WorkspaceApp; @@ -20,21 +22,21 @@ export const ShareIcon = ({ app }: ShareIconProps) => { if (app.sharing_level === "authenticated") { return ( - + ); } if (app.sharing_level === "organization") { return ( - + ); } if (app.sharing_level === "public") { return ( - + ); } diff --git a/site/src/modules/resources/PortForwardButton.tsx b/site/src/modules/resources/PortForwardButton.tsx index 749ddfc32bc01..78d4e999b340c 100644 --- a/site/src/modules/resources/PortForwardButton.tsx +++ b/site/src/modules/resources/PortForwardButton.tsx @@ -1,8 +1,4 @@ import { type Interpolation, type Theme, useTheme } from "@emotion/react"; -import BusinessIcon from "@mui/icons-material/Business"; -import LockIcon from "@mui/icons-material/Lock"; -import LockOpenIcon from "@mui/icons-material/LockOpen"; -import SensorsIcon from "@mui/icons-material/Sensors"; import FormControl from "@mui/material/FormControl"; import Link from "@mui/material/Link"; import MenuItem from "@mui/material/MenuItem"; @@ -45,8 +41,12 @@ import { } from "components/Tooltip/Tooltip"; import { useFormik } from "formik"; import { + BuildingIcon, ChevronDownIcon, ExternalLinkIcon, + LockIcon, + LockOpenIcon, + RadioIcon, ShareIcon, X as XIcon, } from "lucide-react"; @@ -385,7 +385,7 @@ export const PortForwardPopoverView: FC = ({ target="_blank" rel="noreferrer" > - + {port.port} = ({ rel="noreferrer" > {share.share_level === "public" ? ( - + ) : share.share_level === "organization" ? ( - + ) : ( - + )} {label} diff --git a/site/src/modules/templates/TemplateFiles/TemplateFileTree.tsx b/site/src/modules/templates/TemplateFiles/TemplateFileTree.tsx index 9578d4aba1548..c4c0c7e041d46 100644 --- a/site/src/modules/templates/TemplateFiles/TemplateFileTree.tsx +++ b/site/src/modules/templates/TemplateFiles/TemplateFileTree.tsx @@ -1,11 +1,13 @@ import { css } from "@emotion/react"; -import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; -import FormatAlignLeftOutlined from "@mui/icons-material/FormatAlignLeftOutlined"; import Menu from "@mui/material/Menu"; import MenuItem from "@mui/material/MenuItem"; import { SimpleTreeView, TreeItem } from "@mui/x-tree-view"; import { DockerIcon } from "components/Icons/DockerIcon"; -import { ChevronRightIcon } from "lucide-react"; +import { + ChevronDownIcon, + ChevronRightIcon, + TextAlignStartIcon, +} from "lucide-react"; import { type CSSProperties, type ElementType, @@ -90,7 +92,7 @@ export const TemplateFileTree: FC = ({ let icon: ElementType | undefined; if (isFolder(content)) { - icon = FormatAlignLeftOutlined; + icon = TextAlignStartIcon; } else if (filename.endsWith(".tf")) { icon = FileTypeTerraform; } else if (filename.endsWith(".md")) { @@ -201,7 +203,7 @@ export const TemplateFileTree: FC = ({ return ( = ({
{filename} {info.hasDiff && ( - + )}
@@ -121,7 +114,7 @@ export const TemplateFiles: FC = ({ }, }} > - + Edit
diff --git a/site/src/pages/HealthPage/DismissWarningButton.tsx b/site/src/pages/HealthPage/DismissWarningButton.tsx index 09ff78d9c01b2..b1d04d2859b7a 100644 --- a/site/src/pages/HealthPage/DismissWarningButton.tsx +++ b/site/src/pages/HealthPage/DismissWarningButton.tsx @@ -1,11 +1,10 @@ -import NotificationsOffOutlined from "@mui/icons-material/NotificationsOffOutlined"; -import NotificationOutlined from "@mui/icons-material/NotificationsOutlined"; import Skeleton from "@mui/material/Skeleton"; import { healthSettings, updateHealthSettings } from "api/queries/debug"; import type { HealthSection } from "api/typesGenerated"; import { Button } from "components/Button/Button"; import { displaySuccess } from "components/GlobalSnackbar/utils"; import { Spinner } from "components/Spinner/Spinner"; +import { BellIcon, BellOffIcon } from "lucide-react"; import { useMutation, useQuery, useQueryClient } from "react-query"; export const DismissWarningButton = (props: { healthcheck: HealthSection }) => { @@ -49,7 +48,7 @@ export const DismissWarningButton = (props: { healthcheck: HealthSection }) => { }} > - + Enable warnings @@ -69,7 +68,7 @@ export const DismissWarningButton = (props: { healthcheck: HealthSection }) => { }} > - + Dismiss warnings diff --git a/site/src/pages/HealthPage/HealthLayout.tsx b/site/src/pages/HealthPage/HealthLayout.tsx index 10c5b1695dc5b..5c9c44dad039d 100644 --- a/site/src/pages/HealthPage/HealthLayout.tsx +++ b/site/src/pages/HealthPage/HealthLayout.tsx @@ -1,6 +1,3 @@ -import { useTheme } from "@emotion/react"; -import NotificationsOffOutlined from "@mui/icons-material/NotificationsOffOutlined"; -import ReplayIcon from "@mui/icons-material/Replay"; import CircularProgress from "@mui/material/CircularProgress"; import IconButton from "@mui/material/IconButton"; import Tooltip from "@mui/material/Tooltip"; @@ -9,6 +6,7 @@ import type { HealthSeverity } from "api/typesGenerated"; import { ErrorAlert } from "components/Alert/ErrorAlert"; import { Loader } from "components/Loader/Loader"; import kebabCase from "lodash/fp/kebabCase"; +import { BellOffIcon, RotateCcwIcon } from "lucide-react"; import { DashboardFullPage } from "modules/dashboard/DashboardLayout"; import { type FC, Suspense } from "react"; import { useMutation, useQuery, useQueryClient } from "react-query"; @@ -28,7 +26,6 @@ const linkStyles = { }; export const HealthLayout: FC = () => { - const theme = useTheme(); const queryClient = useQueryClient(); const { data: healthStatus, @@ -91,7 +88,7 @@ export const HealthLayout: FC = () => { {isRefreshing ? ( ) : ( - + )} @@ -155,13 +152,7 @@ export const HealthLayout: FC = () => { /> {label} {healthSection.dismissed && ( - + )} ); diff --git a/site/src/pages/LoginPage/OAuthSignInForm.tsx b/site/src/pages/LoginPage/OAuthSignInForm.tsx index e4872d6600389..99ec253975b06 100644 --- a/site/src/pages/LoginPage/OAuthSignInForm.tsx +++ b/site/src/pages/LoginPage/OAuthSignInForm.tsx @@ -1,8 +1,8 @@ import GitHubIcon from "@mui/icons-material/GitHub"; -import KeyIcon from "@mui/icons-material/VpnKey"; import Button from "@mui/material/Button"; import { visuallyHidden } from "@mui/utils"; import type { AuthMethods } from "api/typesGenerated"; +import { KeyIcon } from "lucide-react"; import { type FC, useId } from "react"; import { Language } from "./Language"; diff --git a/site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPageExperimental.tsx b/site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPageExperimental.tsx index c9b63f1422478..34c55313d60a3 100644 --- a/site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPageExperimental.tsx +++ b/site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPageExperimental.tsx @@ -1,5 +1,3 @@ -import CheckOutlined from "@mui/icons-material/CheckOutlined"; -import FileCopyOutlined from "@mui/icons-material/FileCopyOutlined"; import { API } from "api/api"; import { DetailedError } from "api/errors"; import type { @@ -18,6 +16,7 @@ import { Skeleton } from "components/Skeleton/Skeleton"; import { useAuthenticated } from "hooks"; import { useEffectEvent } from "hooks/hookPolyfills"; import { useClipboard } from "hooks/useClipboard"; +import { CheckIcon, CopyIcon } from "lucide-react"; import { Diagnostics, DynamicParameter, @@ -308,8 +307,8 @@ const ButtonPreview: FC = ({ template, buttonValues }) => { clipboard.copyToClipboard(textToCopy); }} > - {clipboard.showCopiedSuccess ? : }{" "} - Copy button code + {clipboard.showCopiedSuccess ? : } Copy button + code ); diff --git a/site/src/pages/UsersPage/UsersTable/UsersTableBody.tsx b/site/src/pages/UsersPage/UsersTable/UsersTableBody.tsx index 408ea411a84f9..b46a9af013c28 100644 --- a/site/src/pages/UsersPage/UsersTable/UsersTableBody.tsx +++ b/site/src/pages/UsersPage/UsersTable/UsersTableBody.tsx @@ -1,9 +1,5 @@ import type { Interpolation, Theme } from "@emotion/react"; import GitHub from "@mui/icons-material/GitHub"; -import HideSourceOutlined from "@mui/icons-material/HideSourceOutlined"; -import KeyOutlined from "@mui/icons-material/KeyOutlined"; -import PasswordOutlined from "@mui/icons-material/PasswordOutlined"; -import ShieldOutlined from "@mui/icons-material/ShieldOutlined"; import Skeleton from "@mui/material/Skeleton"; import type { GroupsByUserId } from "api/queries/groups"; import type * as TypesGen from "api/typesGenerated"; @@ -28,7 +24,14 @@ import { } from "components/TableLoader/TableLoader"; import dayjs from "dayjs"; import relativeTime from "dayjs/plugin/relativeTime"; -import { EllipsisVertical, TrashIcon } from "lucide-react"; +import { + BanIcon, + EllipsisVertical, + KeyIcon, + RectangleEllipsisIcon, + ShieldIcon, + TrashIcon, +} from "lucide-react"; import type { FC } from "react"; import { UserRoleCell } from "../../OrganizationSettingsPage/UserTable/UserRoleCell"; import { UserGroupsCell } from "./UserGroupsCell"; @@ -260,22 +263,22 @@ const LoginType: FC = ({ authMethods, value }) => { if (value === "password") { displayName = "Password"; - icon = ; + icon = ; } else if (value === "none") { displayName = "None"; - icon = ; + icon = ; } else if (value === "github") { displayName = "GitHub"; icon = ; } else if (value === "token") { displayName = "Token"; - icon = ; + icon = ; } else if (value === "oidc") { displayName = authMethods.oidc.signInText === "" ? "OIDC" : authMethods.oidc.signInText; icon = authMethods.oidc.iconUrl === "" ? ( - + ) : ( Open ID Connect icon = ({ setSidebarOption("resources"); }} > - + + Resources = ({ setSidebarOption("history"); }} > - + + History From 685edcd4a14beba0ec1b7b97f70a2f87aaac9d0d Mon Sep 17 00:00:00 2001 From: Bruno Quaresma Date: Tue, 7 Oct 2025 15:13:50 +0000 Subject: [PATCH 2/4] fix issues --- .../templates/TemplateFiles/TemplateFiles.tsx | 13 +++++++------ .../TemplateVersionPage/TemplateVersionPageView.tsx | 2 +- .../pages/UsersPage/UsersTable/UsersTableBody.tsx | 4 ++-- site/src/pages/WorkspacePage/Workspace.tsx | 4 ++-- 4 files changed, 12 insertions(+), 11 deletions(-) diff --git a/site/src/modules/templates/TemplateFiles/TemplateFiles.tsx b/site/src/modules/templates/TemplateFiles/TemplateFiles.tsx index e2327701ddc4b..3f7c2527479c5 100644 --- a/site/src/modules/templates/TemplateFiles/TemplateFiles.tsx +++ b/site/src/modules/templates/TemplateFiles/TemplateFiles.tsx @@ -1,7 +1,7 @@ import { type Interpolation, type Theme, useTheme } from "@emotion/react"; import { SyntaxHighlighter } from "components/SyntaxHighlighter/SyntaxHighlighter"; import set from "lodash/set"; -import { CircleCheckIcon, EditIcon } from "lucide-react"; +import { EditIcon } from "lucide-react"; import { linkToTemplate, useLinks } from "modules/navigation"; import { type FC, useCallback, useMemo } from "react"; import { Link } from "react-router"; @@ -93,10 +93,11 @@ export const TemplateFiles: FC = ({ return (
- {filename} - {info.hasDiff && ( - - )} + + {filename} +
= ({ }, }} > - + Edit
diff --git a/site/src/pages/TemplateVersionPage/TemplateVersionPageView.tsx b/site/src/pages/TemplateVersionPage/TemplateVersionPageView.tsx index 3a6b7daeece66..7c7390682b6d1 100644 --- a/site/src/pages/TemplateVersionPage/TemplateVersionPageView.tsx +++ b/site/src/pages/TemplateVersionPage/TemplateVersionPageView.tsx @@ -58,7 +58,7 @@ export const TemplateVersionPageView: FC = ({ )} diff --git a/site/src/pages/UsersPage/UsersTable/UsersTableBody.tsx b/site/src/pages/UsersPage/UsersTable/UsersTableBody.tsx index b46a9af013c28..a070ad7913a68 100644 --- a/site/src/pages/UsersPage/UsersTable/UsersTableBody.tsx +++ b/site/src/pages/UsersPage/UsersTable/UsersTableBody.tsx @@ -28,9 +28,9 @@ import { BanIcon, EllipsisVertical, KeyIcon, - RectangleEllipsisIcon, ShieldIcon, TrashIcon, + UserLockIcon, } from "lucide-react"; import type { FC } from "react"; import { UserRoleCell } from "../../OrganizationSettingsPage/UserTable/UserRoleCell"; @@ -263,7 +263,7 @@ const LoginType: FC = ({ authMethods, value }) => { if (value === "password") { displayName = "Password"; - icon = ; + icon = ; } else if (value === "none") { displayName = "None"; icon = ; diff --git a/site/src/pages/WorkspacePage/Workspace.tsx b/site/src/pages/WorkspacePage/Workspace.tsx index e318c8c40fbda..83b8a6397104c 100644 --- a/site/src/pages/WorkspacePage/Workspace.tsx +++ b/site/src/pages/WorkspacePage/Workspace.tsx @@ -130,7 +130,7 @@ export const Workspace: FC = ({ setSidebarOption("resources"); }} > - + Resources = ({ setSidebarOption("history"); }} > - + History
From b2247da1ad70515ca0fd0c4a1d811521acbd822f Mon Sep 17 00:00:00 2001 From: Bruno Quaresma Date: Tue, 7 Oct 2025 15:24:41 +0000 Subject: [PATCH 3/4] Swap eatch by globe icon --- site/src/modules/resources/AppLink/ShareIcon.tsx | 4 ++-- site/src/pages/HealthPage/WorkspaceProxyPage.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/site/src/modules/resources/AppLink/ShareIcon.tsx b/site/src/modules/resources/AppLink/ShareIcon.tsx index 72685412a9213..d9d536f999259 100644 --- a/site/src/modules/resources/AppLink/ShareIcon.tsx +++ b/site/src/modules/resources/AppLink/ShareIcon.tsx @@ -2,7 +2,7 @@ import Tooltip from "@mui/material/Tooltip"; import type * as TypesGen from "api/typesGenerated"; import { Building2Icon, - EarthIcon, + GlobeIcon, SquareArrowOutUpRightIcon, UsersIcon, } from "lucide-react"; @@ -36,7 +36,7 @@ export const ShareIcon = ({ app }: ShareIconProps) => { if (app.sharing_level === "public") { return ( - + ); } diff --git a/site/src/pages/HealthPage/WorkspaceProxyPage.tsx b/site/src/pages/HealthPage/WorkspaceProxyPage.tsx index 74fc699bb10c7..2276c24cbcbc5 100644 --- a/site/src/pages/HealthPage/WorkspaceProxyPage.tsx +++ b/site/src/pages/HealthPage/WorkspaceProxyPage.tsx @@ -2,7 +2,7 @@ import { useTheme } from "@emotion/react"; import Tooltip from "@mui/material/Tooltip"; import type { HealthcheckReport } from "api/typesGenerated"; import { Alert } from "components/Alert/Alert"; -import { EarthIcon, HashIcon } from "lucide-react"; +import { GlobeIcon, HashIcon } from "lucide-react"; import type { FC } from "react"; import { useOutletContext } from "react-router"; import { createDayString } from "utils/createDayString"; @@ -107,7 +107,7 @@ const WorkspaceProxyPage: FC = () => {
{region.wildcard_hostname && ( - }> + }> {region.wildcard_hostname} From 818a1bbc31a8ca7958b36664e7c6ddfca83d35c8 Mon Sep 17 00:00:00 2001 From: Bruno Quaresma Date: Wed, 8 Oct 2025 17:39:14 +0000 Subject: [PATCH 4/4] minor fix --- site/src/modules/templates/TemplateFiles/TemplateFiles.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/site/src/modules/templates/TemplateFiles/TemplateFiles.tsx b/site/src/modules/templates/TemplateFiles/TemplateFiles.tsx index 3f7c2527479c5..e23a42762013a 100644 --- a/site/src/modules/templates/TemplateFiles/TemplateFiles.tsx +++ b/site/src/modules/templates/TemplateFiles/TemplateFiles.tsx @@ -5,6 +5,7 @@ import { EditIcon } from "lucide-react"; import { linkToTemplate, useLinks } from "modules/navigation"; import { type FC, useCallback, useMemo } from "react"; import { Link } from "react-router"; +import { cn } from "utils/cn"; import type { FileTree } from "utils/filetree"; import type { TemplateVersionFiles } from "utils/templateVersion"; import { TemplateFileTree } from "./TemplateFileTree"; @@ -94,7 +95,9 @@ export const TemplateFiles: FC = ({
{filename}