From 15bd7a3addfba86b1e8ca8e0a36163cb8a25d26d Mon Sep 17 00:00:00 2001 From: Bruno Quaresma Date: Mon, 12 May 2025 13:36:51 -0300 Subject: [PATCH] chore: replace MUI icons with Lucide icons - 5 (#17750) Replacements: MUI | Lucide OpenInNewOutlined | ExternalLinkIcon HelpOutline | CircleHelpIcon ErrorOutline | CircleAlertIcon --- site/migrate-icons.md | 8 -------- site/src/components/Filter/Filter.tsx | 6 +++--- site/src/components/HelpTooltip/HelpTooltip.tsx | 6 +++--- site/src/components/Latency/Latency.tsx | 6 +++--- .../RichParameterInput/RichParameterInput.tsx | 7 +++++-- .../DeploymentBanner/DeploymentBannerView.tsx | 10 +++++----- site/src/modules/resources/AgentOutdatedTooltip.tsx | 4 ++-- site/src/modules/resources/PortForwardButton.tsx | 9 +++------ .../WorkspaceOutdatedTooltip.tsx | 4 ++-- .../workspaces/WorkspaceTiming/Chart/Tooltip.tsx | 4 ++-- site/src/pages/GroupsPage/GroupPage.tsx | 5 ++--- site/src/pages/HealthPage/Content.tsx | 7 +++---- .../StarterTemplatePage/StarterTemplatePageView.tsx | 4 ++-- .../TemplateVersionStatusBadge.tsx | 6 +++--- .../UserSettingsPage/TokensPage/TokensPageView.tsx | 2 +- site/src/pages/WorkspacePage/AppStatuses.tsx | 7 +++++-- .../WorkspaceParametersPage.tsx | 4 ++-- site/src/pages/WorkspacesPage/WorkspacesButton.tsx | 4 ++-- 18 files changed, 48 insertions(+), 55 deletions(-) delete mode 100644 site/migrate-icons.md diff --git a/site/migrate-icons.md b/site/migrate-icons.md deleted file mode 100644 index 5bf361c215..0000000000 --- a/site/migrate-icons.md +++ /dev/null @@ -1,8 +0,0 @@ -Look for all the @mui/icons-material icons below and replace them accordinlying with the Lucide icon: - -MUI | Lucide -TaskAlt | CircleCheckBigIcon -InfoOutlined | InfoIcon -ErrorOutline | CircleAlertIcon - -You should update the imports and usage. diff --git a/site/src/components/Filter/Filter.tsx b/site/src/components/Filter/Filter.tsx index 66b0312f80..ede669416d 100644 --- a/site/src/components/Filter/Filter.tsx +++ b/site/src/components/Filter/Filter.tsx @@ -1,5 +1,4 @@ import { useTheme } from "@emotion/react"; -import OpenInNewOutlined from "@mui/icons-material/OpenInNewOutlined"; import Button from "@mui/material/Button"; import Divider from "@mui/material/Divider"; import Menu from "@mui/material/Menu"; @@ -14,6 +13,7 @@ import { import { InputGroup } from "components/InputGroup/InputGroup"; import { SearchField } from "components/SearchField/SearchField"; import { useDebouncedFunction } from "hooks/debounce"; +import { ExternalLinkIcon } from "lucide-react"; import { ChevronDownIcon } from "lucide-react"; import { type FC, type ReactNode, useEffect, useRef, useState } from "react"; import type { useSearchParams } from "react-router-dom"; @@ -311,7 +311,7 @@ const PresetMenu: FC = ({ setIsOpen(false); }} > - + View advanced filtering )} @@ -325,7 +325,7 @@ const PresetMenu: FC = ({ setIsOpen(false); }} > - + {learnMoreLabel2} )} diff --git a/site/src/components/HelpTooltip/HelpTooltip.tsx b/site/src/components/HelpTooltip/HelpTooltip.tsx index cf30e2b169..2ae8700114 100644 --- a/site/src/components/HelpTooltip/HelpTooltip.tsx +++ b/site/src/components/HelpTooltip/HelpTooltip.tsx @@ -5,7 +5,6 @@ import { css, useTheme, } from "@emotion/react"; -import HelpIcon from "@mui/icons-material/HelpOutline"; import OpenInNewIcon from "@mui/icons-material/OpenInNew"; import Link from "@mui/material/Link"; import { Stack } from "components/Stack/Stack"; @@ -17,6 +16,7 @@ import { PopoverTrigger, usePopover, } from "components/deprecated/Popover/Popover"; +import { CircleHelpIcon } from "lucide-react"; import { type FC, type HTMLAttributes, @@ -25,11 +25,11 @@ import { forwardRef, } from "react"; -type Icon = typeof HelpIcon; +type Icon = typeof CircleHelpIcon; type Size = "small" | "medium"; -export const HelpTooltipIcon = HelpIcon; +export const HelpTooltipIcon = CircleHelpIcon; export const HelpTooltip: FC = (props) => { return ; diff --git a/site/src/components/Latency/Latency.tsx b/site/src/components/Latency/Latency.tsx index 706bf10687..b5509ba450 100644 --- a/site/src/components/Latency/Latency.tsx +++ b/site/src/components/Latency/Latency.tsx @@ -1,9 +1,9 @@ import { useTheme } from "@emotion/react"; -import HelpOutline from "@mui/icons-material/HelpOutline"; import CircularProgress from "@mui/material/CircularProgress"; import Tooltip from "@mui/material/Tooltip"; import { visuallyHidden } from "@mui/utils"; import { Abbr } from "components/Abbr/Abbr"; +import { CircleHelpIcon } from "lucide-react"; import type { FC } from "react"; import { getLatencyColor } from "utils/latency"; @@ -41,10 +41,10 @@ export const Latency: FC = ({ <> {notAvailableText} - diff --git a/site/src/components/RichParameterInput/RichParameterInput.tsx b/site/src/components/RichParameterInput/RichParameterInput.tsx index 84fe47bbbf..e62f1d57a9 100644 --- a/site/src/components/RichParameterInput/RichParameterInput.tsx +++ b/site/src/components/RichParameterInput/RichParameterInput.tsx @@ -1,5 +1,4 @@ import type { Interpolation, Theme } from "@emotion/react"; -import ErrorOutline from "@mui/icons-material/ErrorOutline"; import SettingsIcon from "@mui/icons-material/Settings"; import Button from "@mui/material/Button"; import FormControlLabel from "@mui/material/FormControlLabel"; @@ -14,6 +13,7 @@ import { ExternalImage } from "components/ExternalImage/ExternalImage"; import { MemoizedMarkdown } from "components/Markdown/Markdown"; import { Pill } from "components/Pill/Pill"; import { Stack } from "components/Stack/Stack"; +import { CircleAlertIcon } from "lucide-react"; import { type FC, type ReactNode, useState } from "react"; import type { AutofillBuildParameter, @@ -143,7 +143,10 @@ const ParameterLabel: FC = ({ parameter, isPreset }) => { )} {!parameter.mutable && ( - }> + } + > Immutable diff --git a/site/src/modules/dashboard/DeploymentBanner/DeploymentBannerView.tsx b/site/src/modules/dashboard/DeploymentBanner/DeploymentBannerView.tsx index dd3c29e262..c4e313d103 100644 --- a/site/src/modules/dashboard/DeploymentBanner/DeploymentBannerView.tsx +++ b/site/src/modules/dashboard/DeploymentBanner/DeploymentBannerView.tsx @@ -4,7 +4,6 @@ import BuildingIcon from "@mui/icons-material/Build"; import DownloadIcon from "@mui/icons-material/CloudDownload"; import UploadIcon from "@mui/icons-material/CloudUpload"; import CollectedIcon from "@mui/icons-material/Compare"; -import ErrorIcon from "@mui/icons-material/ErrorOutline"; import RefreshIcon from "@mui/icons-material/Refresh"; import LatencyIcon from "@mui/icons-material/SettingsEthernet"; import WebTerminalIcon from "@mui/icons-material/WebAsset"; @@ -24,6 +23,7 @@ import { VSCodeIcon } from "components/Icons/VSCodeIcon"; import { Stack } from "components/Stack/Stack"; import dayjs from "dayjs"; import { type ClassName, useClassName } from "hooks/useClassName"; +import { CircleAlertIcon } from "lucide-react"; import prettyBytes from "pretty-bytes"; import { type FC, @@ -151,7 +151,7 @@ export const DeploymentBannerView: FC = ({ to="/health" css={[styles.statusBadge, styles.unhealthy]} > - + ) : (
@@ -372,9 +372,9 @@ const HealthIssue: FC = ({ children }) => { return ( - {children} diff --git a/site/src/modules/resources/AgentOutdatedTooltip.tsx b/site/src/modules/resources/AgentOutdatedTooltip.tsx index e5bd25d79b..c961def910 100644 --- a/site/src/modules/resources/AgentOutdatedTooltip.tsx +++ b/site/src/modules/resources/AgentOutdatedTooltip.tsx @@ -1,5 +1,4 @@ import { useTheme } from "@emotion/react"; -import RefreshIcon from "@mui/icons-material/RefreshOutlined"; import type { WorkspaceAgent } from "api/typesGenerated"; import { HelpTooltip, @@ -11,6 +10,7 @@ import { } from "components/HelpTooltip/HelpTooltip"; import { Stack } from "components/Stack/Stack"; import { PopoverTrigger } from "components/deprecated/Popover/Popover"; +import { RotateCcwIcon } from "lucide-react"; import type { FC } from "react"; import { agentVersionStatus } from "../../utils/workspace"; @@ -68,7 +68,7 @@ export const AgentOutdatedTooltip: FC = ({ diff --git a/site/src/modules/resources/PortForwardButton.tsx b/site/src/modules/resources/PortForwardButton.tsx index e2670eed65..437adf881e 100644 --- a/site/src/modules/resources/PortForwardButton.tsx +++ b/site/src/modules/resources/PortForwardButton.tsx @@ -1,7 +1,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 OpenInNewOutlined from "@mui/icons-material/OpenInNewOutlined"; import SensorsIcon from "@mui/icons-material/Sensors"; import LoadingButton from "@mui/lab/LoadingButton"; import Button from "@mui/material/Button"; @@ -40,8 +39,7 @@ import { } from "components/deprecated/Popover/Popover"; import { type FormikContextType, useFormik } from "formik"; import { type ClassName, useClassName } from "hooks/useClassName"; -import { X as XIcon } from "lucide-react"; -import { ChevronDownIcon } from "lucide-react"; +import { ChevronDownIcon, ExternalLinkIcon, X as XIcon } from "lucide-react"; import { useDashboard } from "modules/dashboard/useDashboard"; import { type FC, useState } from "react"; import { useMutation, useQuery } from "react-query"; @@ -308,11 +306,10 @@ export const PortForwardPopoverView: FC = ({ minWidth: 0, }} > - diff --git a/site/src/modules/workspaces/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip.tsx b/site/src/modules/workspaces/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip.tsx index 9615560840..eed553b588 100644 --- a/site/src/modules/workspaces/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip.tsx +++ b/site/src/modules/workspaces/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip.tsx @@ -1,6 +1,5 @@ import { type Interpolation, type Theme, useTheme } from "@emotion/react"; import InfoIcon from "@mui/icons-material/InfoOutlined"; -import RefreshIcon from "@mui/icons-material/Refresh"; import Link from "@mui/material/Link"; import Skeleton from "@mui/material/Skeleton"; import { getErrorDetail, getErrorMessage } from "api/errors"; @@ -17,6 +16,7 @@ import { HelpTooltipTrigger, } from "components/HelpTooltip/HelpTooltip"; import { usePopover } from "components/deprecated/Popover/Popover"; +import { RotateCcwIcon } from "lucide-react"; import { linkToTemplate, useLinks } from "modules/navigation"; import type { FC } from "react"; import { useQuery } from "react-query"; @@ -104,7 +104,7 @@ const WorkspaceOutdatedTooltipContent: FC = ({ workspace }) => { Update diff --git a/site/src/modules/workspaces/WorkspaceTiming/Chart/Tooltip.tsx b/site/src/modules/workspaces/WorkspaceTiming/Chart/Tooltip.tsx index fc1ab550a8..85b556c786 100644 --- a/site/src/modules/workspaces/WorkspaceTiming/Chart/Tooltip.tsx +++ b/site/src/modules/workspaces/WorkspaceTiming/Chart/Tooltip.tsx @@ -1,9 +1,9 @@ import { css } from "@emotion/css"; import { type Interpolation, type Theme, useTheme } from "@emotion/react"; -import OpenInNewOutlined from "@mui/icons-material/OpenInNewOutlined"; import MUITooltip, { type TooltipProps as MUITooltipProps, } from "@mui/material/Tooltip"; +import { ExternalLinkIcon } from "lucide-react"; import type { FC, HTMLProps } from "react"; import { Link, type LinkProps } from "react-router-dom"; @@ -36,7 +36,7 @@ export const TooltipShortDescription: FC> = ( export const TooltipLink: FC = (props) => { return ( - + {props.children} ); diff --git a/site/src/pages/GroupsPage/GroupPage.tsx b/site/src/pages/GroupsPage/GroupPage.tsx index 365f105f6f..f97ec2d82b 100644 --- a/site/src/pages/GroupsPage/GroupPage.tsx +++ b/site/src/pages/GroupsPage/GroupPage.tsx @@ -50,8 +50,7 @@ import { TableToolbar, } from "components/TableToolbar/TableToolbar"; import { MemberAutocomplete } from "components/UserAutocomplete/UserAutocomplete"; -import { TrashIcon } from "lucide-react"; -import { EllipsisVertical } from "lucide-react"; +import { EllipsisVertical, TrashIcon } from "lucide-react"; import { type FC, useState } from "react"; import { Helmet } from "react-helmet-async"; import { useMutation, useQuery, useQueryClient } from "react-query"; @@ -134,7 +133,7 @@ const GroupPage: FC = () => { onClick={() => { setIsDeletingGroup(true); }} - startIcon={} + startIcon={} css={styles.removeButton} > Delete… diff --git a/site/src/pages/HealthPage/Content.tsx b/site/src/pages/HealthPage/Content.tsx index 2bd5e96f24..74cbc9a5b8 100644 --- a/site/src/pages/HealthPage/Content.tsx +++ b/site/src/pages/HealthPage/Content.tsx @@ -1,10 +1,9 @@ import { css } from "@emotion/css"; import { useTheme } from "@emotion/react"; -import ErrorOutline from "@mui/icons-material/ErrorOutline"; import Link from "@mui/material/Link"; import type { HealthCode, HealthSeverity } from "api/typesGenerated"; -import { CircleCheck as CircleCheckIcon } from "lucide-react"; -import { CircleMinus as CircleMinusIcon } from "lucide-react"; +import { CircleAlertIcon } from "lucide-react"; +import { CircleCheckIcon, CircleMinusIcon } from "lucide-react"; import { type ComponentProps, type FC, @@ -57,7 +56,7 @@ interface HealthIconProps { export const HealthIcon: FC = ({ size, severity }) => { const theme = useTheme(); const color = healthyColor(theme, severity); - const Icon = severity === "error" ? ErrorOutline : CircleCheckIcon; + const Icon = severity === "error" ? CircleAlertIcon : CircleCheckIcon; return ; }; diff --git a/site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx b/site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx index c79bfc8095..00872ed8d5 100644 --- a/site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx +++ b/site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx @@ -1,6 +1,5 @@ import { useTheme } from "@emotion/react"; import PlusIcon from "@mui/icons-material/AddOutlined"; -import ViewCodeIcon from "@mui/icons-material/OpenInNewOutlined"; import Button from "@mui/material/Button"; import type { TemplateExample } from "api/typesGenerated"; import { ErrorAlert } from "components/Alert/ErrorAlert"; @@ -14,6 +13,7 @@ import { PageHeaderTitle, } from "components/PageHeader/PageHeader"; import { Stack } from "components/Stack/Stack"; +import { ExternalLinkIcon } from "lucide-react"; import type { FC } from "react"; import { Link } from "react-router-dom"; @@ -50,7 +50,7 @@ export const StarterTemplatePageView: FC = ({ target="_blank" href={starterTemplate.url} rel="noreferrer" - startIcon={} + startIcon={} > View source code diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionStatusBadge.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionStatusBadge.tsx index 94f2d17769..cfee103357 100644 --- a/site/src/pages/TemplateVersionEditorPage/TemplateVersionStatusBadge.tsx +++ b/site/src/pages/TemplateVersionEditorPage/TemplateVersionStatusBadge.tsx @@ -1,8 +1,8 @@ import CheckIcon from "@mui/icons-material/CheckOutlined"; -import ErrorIcon from "@mui/icons-material/ErrorOutline"; import QueuedIcon from "@mui/icons-material/HourglassEmpty"; import type { TemplateVersion } from "api/typesGenerated"; import { Pill, PillSpinner } from "components/Pill/Pill"; +import { CircleAlertIcon } from "lucide-react"; import type { FC, ReactNode } from "react"; import type { ThemeRole } from "theme/roles"; import { getPendingStatusLabel } from "utils/provisionerJob"; @@ -57,14 +57,14 @@ const getStatus = ( return { type: "inactive", text: "Canceled", - icon: , + icon: , }; case "unknown": case "failed": return { type: "error", text: "Failed", - icon: , + icon: , }; case "succeeded": return { diff --git a/site/src/pages/UserSettingsPage/TokensPage/TokensPageView.tsx b/site/src/pages/UserSettingsPage/TokensPage/TokensPageView.tsx index f9a2467196..1be416a48c 100644 --- a/site/src/pages/UserSettingsPage/TokensPage/TokensPageView.tsx +++ b/site/src/pages/UserSettingsPage/TokensPage/TokensPageView.tsx @@ -58,7 +58,7 @@ export const TokensPageView: FC = ({ Last Used Expires At Created At - + diff --git a/site/src/pages/WorkspacePage/AppStatuses.tsx b/site/src/pages/WorkspacePage/AppStatuses.tsx index a285f8acc0..9d8b8ed475 100644 --- a/site/src/pages/WorkspacePage/AppStatuses.tsx +++ b/site/src/pages/WorkspacePage/AppStatuses.tsx @@ -3,7 +3,6 @@ import { useTheme } from "@emotion/react"; import AppsIcon from "@mui/icons-material/Apps"; import CheckCircle from "@mui/icons-material/CheckCircle"; import ErrorIcon from "@mui/icons-material/Error"; -import HelpOutline from "@mui/icons-material/HelpOutline"; import HourglassEmpty from "@mui/icons-material/HourglassEmpty"; import InsertDriveFile from "@mui/icons-material/InsertDriveFile"; import OpenInNew from "@mui/icons-material/OpenInNew"; @@ -18,6 +17,7 @@ import type { WorkspaceApp, } from "api/typesGenerated"; import { formatDistance, formatDistanceToNow } from "date-fns"; +import { CircleHelpIcon } from "lucide-react"; import { useAppLink } from "modules/apps/useAppLink"; import type { FC } from "react"; @@ -224,7 +224,10 @@ export const AppStatuses: FC = ({ }} > {getStatusIcon(theme, status.state, isLatest) || ( - + )}
diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPage.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPage.tsx index a3bc7964f9..443e7183cc 100644 --- a/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPage.tsx +++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPage.tsx @@ -1,4 +1,3 @@ -import OpenInNewOutlined from "@mui/icons-material/OpenInNewOutlined"; import Button from "@mui/material/Button"; import { API } from "api/api"; import { isApiValidationError } from "api/errors"; @@ -9,6 +8,7 @@ import { ErrorAlert } from "components/Alert/ErrorAlert"; import { EmptyState } from "components/EmptyState/EmptyState"; import { Loader } from "components/Loader/Loader"; import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader"; +import { ExternalLinkIcon } from "lucide-react"; import type { FC } from "react"; import { Helmet } from "react-helmet-async"; import { useMutation, useQuery } from "react-query"; @@ -143,7 +143,7 @@ export const WorkspaceParametersPageView: FC<